commit 6f565d3f37c9ae4bac8b824f4a3c75652ce55801
Author: root <root@hub.scroll.pub>
Date: 2025-01-01 18:37:24 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..c7b9bd0
--- /dev/null
+++ b/body.html
@@ -0,0 +1,55 @@
+<header>
+ <nav>
+ <div class="logo">ASN Lookup</div>
+ <div class="menu-toggle" aria-label="Toggle menu">
+ <span></span><span></span><span></span>
+ </div>
+ <ul class="nav-links">
+ <li><a href="#lookup">Lookup</a></li>
+ <li><a href="#about">About</a></li>
+ <li><a href="#info">ASN Info</a></li>
+ </ul>
+ </nav>
+</header>
+
+<main>
+ <section id="hero">
+ <h1>ASN Lookup Tool</h1>
+ <p>Find detailed information about Autonomous System Numbers</p>
+ </section>
+
+ <section id="lookup">
+ <div class="lookup-container">
+ <h2>ASN Lookup</h2>
+ <div class="search-box">
+ <input type="text" id="asn-input" placeholder="Enter ASN (e.g., AS15169)" aria-label="ASN input">
+ <button id="search-btn">Search</button>
+ </div>
+ <div id="result" class="result-container"></div>
+ </div>
+ </section>
+
+ <section id="about">
+ <h2>About ASNs</h2>
+ <div class="info-grid">
+ <div class="info-card">
+ <h3>What is an ASN?</h3>
+ <p>An Autonomous System Number (ASN) is a unique identifier assigned to autonomous systems on the internet.</p>
+ </div>
+ <div class="info-card">
+ <h3>Why are ASNs Important?</h3>
+ <p>ASNs are crucial for BGP routing and organizing the internet's infrastructure into manageable networks.</p>
+ </div>
+ </div>
+ </section>
+</main>
+
+<footer>
+ <div class="footer-content">
+ <div class="footer-links">
+ <a href="#privacy">Privacy Policy</a>
+ <a href="#terms">Terms of Use</a>
+ <a href="#contact">Contact</a>
+ </div>
+ </div>
+</footer>
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..74534e1
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,8 @@
+buildHtml
+baseUrl https://asn.scroll.pub
+metaTags
+editButton /edit.html
+title ASN Lookup & Information
+style.css
+body.html
+script.js
diff --git a/prompt.json b/prompt.json
new file mode 100644
index 0000000..9843959
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,20 @@
+{
+ "id": "msg_01Wvi3ssw8r8EREYSW9SUSgx",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "For an ASN (Autonomous System Number) website, I suggest the domain:\n\n---domain---\nasn.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://asn.scroll.pub\nmetaTags\neditButton /edit.html\ntitle ASN Lookup & Information\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n<header>\n <nav>\n <div class=\"logo\">ASN Lookup</div>\n <div class=\"menu-toggle\" aria-label=\"Toggle menu\">\n <span></span><span></span><span></span>\n </div>\n <ul class=\"nav-links\">\n <li><a href=\"#lookup\">Lookup</a></li>\n <li><a href=\"#about\">About</a></li>\n <li><a href=\"#info\">ASN Info</a></li>\n </ul>\n </nav>\n</header>\n\n<main>\n <section id=\"hero\">\n <h1>ASN Lookup Tool</h1>\n <p>Find detailed information about Autonomous System Numbers</p>\n </section>\n\n <section id=\"lookup\">\n <div class=\"lookup-container\">\n <h2>ASN Lookup</h2>\n <div class=\"search-box\">\n <input type=\"text\" id=\"asn-input\" placeholder=\"Enter ASN (e.g., AS15169)\" aria-label=\"ASN input\">\n <button id=\"search-btn\">Search</button>\n </div>\n <div id=\"result\" class=\"result-container\"></div>\n </div>\n </section>\n\n <section id=\"about\">\n <h2>About ASNs</h2>\n <div class=\"info-grid\">\n <div class=\"info-card\">\n <h3>What is an ASN?</h3>\n <p>An Autonomous System Number (ASN) is a unique identifier assigned to autonomous systems on the internet.</p>\n </div>\n <div class=\"info-card\">\n <h3>Why are ASNs Important?</h3>\n <p>ASNs are crucial for BGP routing and organizing the internet's infrastructure into manageable networks.</p>\n </div>\n </div>\n </section>\n</main>\n\n<footer>\n <div class=\"footer-content\">\n <div class=\"footer-links\">\n <a href=\"#privacy\">Privacy Policy</a>\n <a href=\"#terms\">Terms of Use</a>\n <a href=\"#contact\">Contact</a>\n </div>\n </div>\n</footer>\n\n---style.css---\n:root {\n --primary-color: #2a6bc2;\n --secondary-color: #1d4e94;\n --background-color: #f5f7fa;\n --text-color: #333;\n --card-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;\n line-height: 1.6;\n background: var(--background-color);\n color: var(--text-color);\n}\n\n/* Header & Navigation */\nheader {\n background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));\n padding: 1rem;\n position: fixed;\n width: 100%;\n top: 0;\n z-index: 1000;\n}\n\nnav {\n max-width: 1200px;\n margin: 0 auto;\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n\n.logo {\n color: white;\n font-size: 1.5rem;\n font-weight: bold;\n}\n\n.nav-links {\n display: flex;\n list-style: none;\n}\n\n.nav-links a {\n color: white;\n text-decoration: none;\n padding: 0.5rem 1rem;\n transition: color 0.3s ease;\n}\n\n.nav-links a:hover {\n color: #c5d9f8;\n}\n\n/* Hero Section */\n#hero {\n padding: 8rem 2rem 4rem;\n text-align: center;\n background: linear-gradient(rgba(42, 107, 194, 0.1), rgba(42, 107, 194, 0.05));\n}\n\n#hero h1 {\n font-size: 3rem;\n margin-bottom: 1rem;\n background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n}\n\n/* Lookup Section */\n.lookup-container {\n max-width: 800px;\n margin: 2rem auto;\n padding: 2rem;\n background: white;\n border-radius: 10px;\n box-shadow: var(--card-shadow);\n}\n\n.search-box {\n display: flex;\n gap: 1rem;\n margin: 2rem 0;\n}\n\ninput {\n flex: 1;\n padding: 0.8rem;\n border: 2px solid #ddd;\n border-radius: 5px;\n font-size: 1rem;\n}\n\nbutton {\n padding: 0.8rem 1.5rem;\n background: var(--primary-color);\n color: white;\n border: none;\n border-radius: 5px;\n cursor: pointer;\n transition: background-color 0.3s ease;\n}\n\nbutton:hover {\n background: var(--secondary-color);\n}\n\n/* Info Grid */\n.info-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: 2rem;\n padding: 2rem;\n max-width: 1200px;\n margin: 0 auto;\n}\n\n.info-card {\n background: white;\n padding: 2rem;\n border-radius: 10px;\n box-shadow: var(--card-shadow);\n transition: transform 0.3s ease;\n}\n\n.info-card:hover {\n transform: translateY(-5px);\n}\n\n/* Footer */\nfooter {\n background: #2a2a2a;\n color: white;\n padding: 2rem;\n margin-top: 4rem;\n}\n\n.footer-content {\n max-width: 1200px;\n margin: 0 auto;\n text-align: center;\n}\n\n.footer-links a {\n color: white;\n text-decoration: none;\n margin: 0 1rem;\n}\n\n/* Mobile Responsive */\n.menu-toggle {\n display: none;\n flex-direction: column;\n gap: 5px;\n cursor: pointer;\n}\n\n.menu-toggle span {\n width: 25px;\n height: 3px;\n background: white;\n transition: 0.3s;\n}\n\n@media (max-width: 768px) {\n .menu-toggle {\n display: flex;\n }\n\n .nav-links {\n display: none;\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n background: var(--primary-color);\n flex-direction: column;\n padding: 1rem;\n }\n\n .nav-links.active {\n display: flex;\n }\n\n .nav-links li {\n margin: 0.5rem 0;\n }\n\n .search-box {\n flex-direction: column;\n }\n\n #hero h1 {\n font-size: 2rem;\n }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n // Mobile menu toggle\n const menuToggle = document.querySelector('.menu-toggle');\n const navLinks = document.querySelector('.nav-links');\n\n menuToggle.addEventListener('click', () => {\n navLinks.classList.toggle('active');\n menuToggle.classList.toggle('active');\n });\n\n // Smooth scroll for navigation links\n document.querySelectorAll('a[href^=\"#\"]').forEach(anchor => {\n anchor.addEventListener('click', function (e) {\n e.preventDefault();\n const target = document.querySelector(this.getAttribute('href'));\n if (target) {\n target.scrollIntoView({\n behavior: 'smooth'\n });\n navLinks.classList.remove('active');\n }\n });\n });\n\n // ASN Lookup functionality\n const searchBtn = document.getElementById('search-btn');\n const asnInput = document.getElementById('asn-input');\n const resultDiv = document.getElementById('result');\n\n searchBtn.addEventListener('click', () => {\n const asn = asnInput.value.trim();\n if (!asn) {\n resultDiv.innerHTML = '<p class=\"error\">Please enter an ASN</p>';\n return;\n }\n\n // Simulate API call with loading state\n resultDiv.innerHTML = '<p class=\"loading\">Searching...</p>';\n \n // This is a mock response - in a real implementation, you would call an actual API\n setTimeout(() => {\n const mockData = {\n asn: asn,\n name: \"Example Network\",\n country: \"United States\",\n prefix_count: 1234,\n description: \"Example ASN for demonstration purposes\"\n };\n\n resultDiv.innerHTML = `\n <div class=\"result-card\">\n <h3>ASN Information</h3>\n <p><strong>ASN:</strong> ${mockData.asn}</p>\n <p><strong>Name:</strong> ${mockData.name}</p>\n <p><strong>Country:</strong> ${mockData.country}</p>\n <p><strong>Prefix Count:</strong> ${mockData.prefix_count}</p>\n <p><strong>Description:</strong> ${mockData.description}</p>\n </div>\n `;\n }, 1000);\n });\n\n // Handle Enter key in input\n asnInput.addEventListener('keypress', (e) => {\n if (e.key === 'Enter') {\n searchBtn.click();\n }\n });\n});\n\n---end---\n\nThis implementation creates a modern, responsive ASN lookup website with a clean and professional design. Key features include:\n\n1. Mobile-responsive navigation with hamburger menu\n2. Smooth scrolling navigation\n3. Modern gradient effects and animations\n4. Clean, accessible form inputs\n5. Card-based layout for information display\n6. Loading states and error handling\n7. Semantic HTML5 structure\n8. CSS Grid and Flexbox for layouts\n9. Beautiful hover effects and transitions\n10. Simulated ASN lookup functionality (can be connected to a real API)\n\nThe design uses a professional color scheme with blue tones typically associated with technical/networking websites. It's both functional and visually appealing while maintaining good accessibility and user experience."
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 273,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 2816
+ }
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..4682572
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# asn.scroll.pub
+Website generated by Claude from prompt: asn website
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..79515b6
--- /dev/null
+++ b/script.js
@@ -0,0 +1,69 @@
+document.addEventListener('DOMContentLoaded', () => {
+ // Mobile menu toggle
+ const menuToggle = document.querySelector('.menu-toggle');
+ const navLinks = document.querySelector('.nav-links');
+
+ menuToggle.addEventListener('click', () => {
+ navLinks.classList.toggle('active');
+ menuToggle.classList.toggle('active');
+ });
+
+ // Smooth scroll for navigation links
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+ anchor.addEventListener('click', function (e) {
+ e.preventDefault();
+ const target = document.querySelector(this.getAttribute('href'));
+ if (target) {
+ target.scrollIntoView({
+ behavior: 'smooth'
+ });
+ navLinks.classList.remove('active');
+ }
+ });
+ });
+
+ // ASN Lookup functionality
+ const searchBtn = document.getElementById('search-btn');
+ const asnInput = document.getElementById('asn-input');
+ const resultDiv = document.getElementById('result');
+
+ searchBtn.addEventListener('click', () => {
+ const asn = asnInput.value.trim();
+ if (!asn) {
+ resultDiv.innerHTML = '<p class="error">Please enter an ASN</p>';
+ return;
+ }
+
+ // Simulate API call with loading state
+ resultDiv.innerHTML = '<p class="loading">Searching...</p>';
+
+ // This is a mock response - in a real implementation, you would call an actual API
+ setTimeout(() => {
+ const mockData = {
+ asn: asn,
+ name: "Example Network",
+ country: "United States",
+ prefix_count: 1234,
+ description: "Example ASN for demonstration purposes"
+ };
+
+ resultDiv.innerHTML = `
+ <div class="result-card">
+ <h3>ASN Information</h3>
+ <p><strong>ASN:</strong> ${mockData.asn}</p>
+ <p><strong>Name:</strong> ${mockData.name}</p>
+ <p><strong>Country:</strong> ${mockData.country}</p>
+ <p><strong>Prefix Count:</strong> ${mockData.prefix_count}</p>
+ <p><strong>Description:</strong> ${mockData.description}</p>
+ </div>
+ `;
+ }, 1000);
+ });
+
+ // Handle Enter key in input
+ asnInput.addEventListener('keypress', (e) => {
+ if (e.key === 'Enter') {
+ searchBtn.click();
+ }
+ });
+});
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..8a36c6f
--- /dev/null
+++ b/style.css
@@ -0,0 +1,203 @@
+:root {
+ --primary-color: #2a6bc2;
+ --secondary-color: #1d4e94;
+ --background-color: #f5f7fa;
+ --text-color: #333;
+ --card-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+ line-height: 1.6;
+ background: var(--background-color);
+ color: var(--text-color);
+}
+
+/* Header & Navigation */
+header {
+ background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+ padding: 1rem;
+ position: fixed;
+ width: 100%;
+ top: 0;
+ z-index: 1000;
+}
+
+nav {
+ max-width: 1200px;
+ margin: 0 auto;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.logo {
+ color: white;
+ font-size: 1.5rem;
+ font-weight: bold;
+}
+
+.nav-links {
+ display: flex;
+ list-style: none;
+}
+
+.nav-links a {
+ color: white;
+ text-decoration: none;
+ padding: 0.5rem 1rem;
+ transition: color 0.3s ease;
+}
+
+.nav-links a:hover {
+ color: #c5d9f8;
+}
+
+/* Hero Section */
+#hero {
+ padding: 8rem 2rem 4rem;
+ text-align: center;
+ background: linear-gradient(rgba(42, 107, 194, 0.1), rgba(42, 107, 194, 0.05));
+}
+
+#hero h1 {
+ font-size: 3rem;
+ margin-bottom: 1rem;
+ background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+}
+
+/* Lookup Section */
+.lookup-container {
+ max-width: 800px;
+ margin: 2rem auto;
+ padding: 2rem;
+ background: white;
+ border-radius: 10px;
+ box-shadow: var(--card-shadow);
+}
+
+.search-box {
+ display: flex;
+ gap: 1rem;
+ margin: 2rem 0;
+}
+
+input {
+ flex: 1;
+ padding: 0.8rem;
+ border: 2px solid #ddd;
+ border-radius: 5px;
+ font-size: 1rem;
+}
+
+button {
+ padding: 0.8rem 1.5rem;
+ background: var(--primary-color);
+ color: white;
+ border: none;
+ border-radius: 5px;
+ cursor: pointer;
+ transition: background-color 0.3s ease;
+}
+
+button:hover {
+ background: var(--secondary-color);
+}
+
+/* Info Grid */
+.info-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+ gap: 2rem;
+ padding: 2rem;
+ max-width: 1200px;
+ margin: 0 auto;
+}
+
+.info-card {
+ background: white;
+ padding: 2rem;
+ border-radius: 10px;
+ box-shadow: var(--card-shadow);
+ transition: transform 0.3s ease;
+}
+
+.info-card:hover {
+ transform: translateY(-5px);
+}
+
+/* Footer */
+footer {
+ background: #2a2a2a;
+ color: white;
+ padding: 2rem;
+ margin-top: 4rem;
+}
+
+.footer-content {
+ max-width: 1200px;
+ margin: 0 auto;
+ text-align: center;
+}
+
+.footer-links a {
+ color: white;
+ text-decoration: none;
+ margin: 0 1rem;
+}
+
+/* Mobile Responsive */
+.menu-toggle {
+ display: none;
+ flex-direction: column;
+ gap: 5px;
+ cursor: pointer;
+}
+
+.menu-toggle span {
+ width: 25px;
+ height: 3px;
+ background: white;
+ transition: 0.3s;
+}
+
+@media (max-width: 768px) {
+ .menu-toggle {
+ display: flex;
+ }
+
+ .nav-links {
+ display: none;
+ position: absolute;
+ top: 100%;
+ left: 0;
+ right: 0;
+ background: var(--primary-color);
+ flex-direction: column;
+ padding: 1rem;
+ }
+
+ .nav-links.active {
+ display: flex;
+ }
+
+ .nav-links li {
+ margin: 0.5rem 0;
+ }
+
+ .search-box {
+ flex-direction: column;
+ }
+
+ #hero h1 {
+ font-size: 2rem;
+ }
+}