Changes to asn.scroll.pub

root

21 days ago

Initial commit

body.html

Changed around line 1
+ 
+   
+     ASN Lookup
+     
+       
+     
+     
+       Lookup
+       About
+       ASN Info
+     
+   
+ 
+ 
+ 
+   
+     ASN Lookup Tool
+     Find detailed information about Autonomous System Numbers
+   
+ 
+   
+     
+       ASN Lookup
+       
+         
+         
+       
+       
+     
+   
+ 
+   
+     About ASNs
+     
+       
+         What is an ASN?
+         An Autonomous System Number (ASN) is a unique identifier assigned to autonomous systems on the internet.
+       
+       
+         Why are ASNs Important?
+         ASNs are crucial for BGP routing and organizing the internet's infrastructure into manageable networks.
+       
+     
+   
+ 
+ 
+ 
+   
+     
+       Privacy Policy
+       Terms of Use
+       Contact
+     
+   
+ 

index.scroll

Changed around line 1
+ buildHtml
+ baseUrl https://asn.scroll.pub
+ metaTags
+ editButton /edit.html
+ title ASN Lookup & Information
+ style.css
+ body.html
+ script.js

prompt.json

Changed around line 1
+ {
+   "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\n  \n    ASN Lookup
\n    \n      \n    
\n    \n      Lookup
\n      About
\n      ASN Info
\n    \n  \n\n\n\n  \n    ASN Lookup Tool\n    Find detailed information about Autonomous System Numbers
\n  \n\n  \n    \n      ASN Lookup\n      \n        \n        \n      
\n      
\n    
\n  \n\n  \n    About ASNs\n    \n      \n        What is an ASN?\n        An Autonomous System Number (ASN) is a unique identifier assigned to autonomous systems on the internet.
\n      
\n      \n        Why are ASNs Important?\n        ASNs are crucial for BGP routing and organizing the internet's infrastructure into manageable networks.
\n      
\n    
\n  \n\n\n\n  \n    \n      Privacy Policy\n      Terms of Use\n      Contact\n    
\n  
\n\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 = 'Please enter an ASN
';\n      return;\n    }\n\n    // Simulate API call with loading state\n    resultDiv.innerHTML = 'Searching...
';\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        \n          ASN Information\n          ASN: ${mockData.asn}
\n          Name: ${mockData.name}
\n          Country: ${mockData.country}
\n          Prefix Count: ${mockData.prefix_count}
\n          Description: ${mockData.description}
\n        
\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
+   }
+ }

readme.scroll

Changed around line 1

+ # asn.scroll.pub

+ Website generated by Claude from prompt: asn website

script.js

Changed around line 1
+ 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 = 'Please enter an ASN
';
+       return;
+     }
+ 
+     // Simulate API call with loading state
+     resultDiv.innerHTML = 'Searching...
';
+ 
+     // 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 = `
+         
+           ASN Information
+           ASN: ${mockData.asn}
+           Name: ${mockData.name}
+           Country: ${mockData.country}
+           Prefix Count: ${mockData.prefix_count}
+           Description: ${mockData.description}
+         
+       `;
+     }, 1000);
+   });
+ 
+   // Handle Enter key in input
+   asnInput.addEventListener('keypress', (e) => {
+     if (e.key === 'Enter') {
+       searchBtn.click();
+     }
+   });
+ });

style.css

Changed around line 1
+ :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;
+   }
+ }