Changes to axone.scroll.pub

root
root
13 days ago
Initial commit
body.html
Changed around line 1
+
+
+
+
+
+
+
    +
  • Home
    • +
  • Solutions
    • +
  • About
    • +
  • Contact
    • +
    +
    +
    +
    +
    +
    +
    +

    Transform Your Digital Future

    +

    Innovative solutions for tomorrow's challenges

    + Get Started
    +
    +
    +
    +
    +
    +

    Our Solutions

    +
    +
    +
    🚀
    +

    Digital Innovation

    +

    Cutting-edge solutions for digital transformation

    +
    +
    +
    🔒
    +

    Cyber Security

    +

    Advanced protection for your digital assets

    +
    +
    +
    📊
    +

    Data Analytics

    +

    Transform data into actionable insights

    +
    +
    +
    +
    +
    +

    About AXone

    +

    Leading the way in technological innovation since 2023. We help businesses transform their digital presence with cutting-edge solutions.

    +
    +
    +
    +

    Contact Us

    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +

    AXone

    +

    Innovation through technology

    +
    +
    +

    Contact

    +

    hello@axone.scroll.pub

    +
    +
    +
    index.scroll
    Changed around line 1
    + buildHtml
    + baseUrl https://axone.scroll.pub
    + metaTags
    + editButton /edit.html
    + title AXone - Innovative Technology Solutions
    + style.css
    + body.html
    + script.js
    prompt.json
    Changed around line 1
    + {
    + "id": "msg_01Qe7pd9nvoAN2HahHKN94UF",
    + "type": "message",
    + "role": "assistant",
    + "model": "claude-3-5-sonnet-20241022",
    + "content": [
    + {
    + "type": "text",
    + "text": "Let me create a modern, professional website for \"AXone\" - I'll imagine it as a cutting-edge technology solutions company.\n\n---domain---\naxone.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://axone.scroll.pub\nmetaTags\neditButton /edit.html\ntitle AXone - Innovative Technology Solutions\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n
    \n \n
    \n\n
    \n
    \n
    \n

    Transform Your Digital Future

    \n

    Innovative solutions for tomorrow's challenges

    \n Get Started\n
    \n
    \n
    \n\n
    \n

    Our Solutions

    \n
    \n
    \n
    🚀
    \n

    Digital Innovation

    \n

    Cutting-edge solutions for digital transformation

    \n
    \n
    \n
    🔒
    \n

    Cyber Security

    \n

    Advanced protection for your digital assets

    \n
    \n
    \n
    📊
    \n

    Data Analytics

    \n

    Transform data into actionable insights

    \n
    \n
    \n
    \n\n
    \n

    About AXone

    \n

    Leading the way in technological innovation since 2023. We help businesses transform their digital presence with cutting-edge solutions.

    \n
    \n\n
    \n

    Contact Us

    \n
    \n \n \n \n \n
    \n
    \n
    \n\n
    \n
    \n
    \n

    AXone

    \n

    Innovation through technology

    \n
    \n
    \n

    Contact

    \n

    hello@axone.scroll.pub

    \n
    \n
    \n
    \n\n---style.css---\n:root {\n --primary: #2563eb;\n --secondary: #1e40af;\n --text: #1f2937;\n --background: #ffffff;\n --accent: #dbeafe;\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 color: var(--text);\n}\n\n/* Header & Navigation */\nheader {\n position: fixed;\n width: 100%;\n background: rgba(255, 255, 255, 0.95);\n backdrop-filter: blur(10px);\n z-index: 1000;\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\n}\n\nnav {\n max-width: 1200px;\n margin: 0 auto;\n padding: 1rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n\n.logo {\n font-size: 1.5rem;\n font-weight: bold;\n color: var(--primary);\n}\n\n.nav-links {\n display: flex;\n gap: 2rem;\n list-style: none;\n}\n\n.nav-links a {\n text-decoration: none;\n color: var(--text);\n transition: color 0.3s;\n}\n\n.nav-links a:hover {\n color: var(--primary);\n}\n\n/* Hero Section */\n.hero {\n min-height: 100vh;\n display: flex;\n align-items: center;\n position: relative;\n overflow: hidden;\n padding: 2rem;\n}\n\n.hero-content {\n max-width: 600px;\n z-index: 1;\n}\n\n.hero h1 {\n font-size: 3.5rem;\n margin-bottom: 1rem;\n background: linear-gradient(45deg, var(--primary), var(--secondary));\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n}\n\n.hero-shape {\n position: absolute;\n right: -10%;\n top: -10%;\n width: 80%;\n height: 120%;\n background: linear-gradient(45deg, var(--accent), var(--primary));\n transform: rotate(-12deg);\n border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;\n z-index: 0;\n animation: morphShape 15s infinite;\n}\n\n/* Solutions Section */\n.solutions {\n padding: 5rem 2rem;\n background: var(--background);\n}\n\n.cards {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 2rem;\n margin-top: 3rem;\n}\n\n.card {\n background: white;\n padding: 2rem;\n border-radius: 1rem;\n box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);\n transition: transform 0.3s;\n}\n\n.card:hover {\n transform: translateY(-5px);\n}\n\n.card-icon {\n font-size: 2rem;\n margin-bottom: 1rem;\n}\n\n/* Contact Form */\n.contact {\n padding: 5rem 2rem;\n background: var(--accent);\n}\n\nform {\n max-width: 600px;\n margin: 0 auto;\n display: flex;\n flex-direction: column;\n gap: 1rem;\n}\n\ninput, textarea {\n padding: 1rem;\n border: 2px solid transparent;\n border-radius: 0.5rem;\n transition: border-color 0.3s;\n}\n\ninput:focus, textarea:focus {\n outline: none;\n border-color: var(--primary);\n}\n\nbutton {\n background: var(--primary);\n color: white;\n padding: 1rem 2rem;\n border: none;\n border-radius: 0.5rem;\n cursor: pointer;\n transition: background 0.3s;\n}\n\nbutton:hover {\n background: var(--secondary);\n}\n\n/* Footer */\nfooter {\n background: var(--text);\n color: white;\n padding: 3rem 2rem;\n}\n\n.footer-content {\n max-width: 1200px;\n margin: 0 auto;\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 2rem;\n}\n\n/* Animations */\n@keyframes morphShape {\n 0% { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }\n 50% { border-radius: 70% 30% 30% 70% / 70% 70% 30% 30%; }\n 100% { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }\n}\n\n/* Mobile Responsiveness */\n.mobile-menu {\n display: none;\n flex-direction: column;\n gap: 6px;\n background: none;\n border: none;\n padding: 0.5rem;\n cursor: pointer;\n}\n\n.mobile-menu span {\n width: 25px;\n height: 2px;\n background: var(--text);\n transition: 0.3s;\n}\n\n@media (max-width: 768px) {\n .mobile-menu {\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: white;\n flex-direction: column;\n padding: 1rem;\n text-align: center;\n }\n\n .nav-links.active {\n display: flex;\n }\n\n .hero h1 {\n font-size: 2.5rem;\n }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n // Mobile menu toggle\n const mobileMenu = document.querySelector('.mobile-menu');\n const navLinks = document.querySelector('.nav-links');\n\n mobileMenu.addEventListener('click', () => {\n navLinks.classList.toggle('active');\n const spans = mobileMenu.querySelectorAll('span');\n spans[0].style.transform = navLinks.classList.contains('active') ? 'rotate(45deg) translate(6px, 6px)' : 'none';\n spans[1].style.opacity = navLinks.classList.contains('active') ? '0' : '1';\n spans[2].style.transform = navLinks.classList.contains('active') ? 'rotate(-45deg) translate(6px, -6px)' : 'none';\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 targetId = this.getAttribute('href');\n const targetElement = document.querySelector(targetId);\n \n if (targetElement) {\n targetElement.scrollIntoView({\n behavior: 'smooth'\n });\n \n // Close mobile menu if open\n navLinks.classList.remove('active');\n }\n });\n });\n\n // Form submission handler\n const contactForm = document.getElementById('contact-form');\n if (contactForm) {\n contactForm.addEventListener('submit', (e) => {\n e.preventDefault();\n // Add form submission logic here\n alert('Thank you for your message! We will get back to you soon.');\n contactForm.reset();\n });\n }\n\n // Intersection Observer for fade-in animations\n const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.style.opacity = '1';\n entry.target.style.transform = 'translateY(0)';\n }\n });\n }, { threshold: 0.1 });\n\n // Observe all sections\n document.querySelectorAll('section').forEach(section => {\n section.style.opacity = '0';\n section.style.transform = 'translateY(20px)';\n section.style.transition = 'opacity 0.6s ease-out, transform 0.6s ease-out';\n observer.observe(section);\n });\n});\n\n---end---\n\nThis implementation features:\n\n1. Modern, clean design with smooth animations\n2. Fully responsive layout\n3. Interactive navigation with smooth scrolling\n4. Animated hero section with morphing background shape\n5. Card-based solutions section with hover effects\n6. Contact form with validation\n7. Mobile-friendly navigation menu\n8. Intersection Observer for scroll animations\n9. Accessible semantic HTML\n10. CSS variables for easy theming\n11. Performance optimized animations\n12. Clean, maintainable code structure\n\nThe design uses a professional blue color scheme with modern gradients and subtle animations to create an engaging but professional experience."
    + }
    + ],
    + "stop_reason": "end_turn",
    + "stop_sequence": null,
    + "usage": {
    + "input_tokens": 273,
    + "cache_creation_input_tokens": 0,
    + "cache_read_input_tokens": 0,
    + "output_tokens": 3208
    + }
    + }
    readme.scroll
    Changed around line 1
    + # axone.scroll.pub
    +
    + website generated by Claude from prompt: AXone
    script.js
    Changed around line 1
    + document.addEventListener('DOMContentLoaded', () => {
    + // Mobile menu toggle
    + const mobileMenu = document.querySelector('.mobile-menu');
    + const navLinks = document.querySelector('.nav-links');
    +
    + mobileMenu.addEventListener('click', () => {
    + navLinks.classList.toggle('active');
    + const spans = mobileMenu.querySelectorAll('span');
    + spans[0].style.transform = navLinks.classList.contains('active') ? 'rotate(45deg) translate(6px, 6px)' : 'none';
    + spans[1].style.opacity = navLinks.classList.contains('active') ? '0' : '1';
    + spans[2].style.transform = navLinks.classList.contains('active') ? 'rotate(-45deg) translate(6px, -6px)' : 'none';
    + });
    +
    + // Smooth scroll for navigation links
    + document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    + anchor.addEventListener('click', function (e) {
    + e.preventDefault();
    + const targetId = this.getAttribute('href');
    + const targetElement = document.querySelector(targetId);
    +
    + if (targetElement) {
    + targetElement.scrollIntoView({
    + behavior: 'smooth'
    + });
    +
    + // Close mobile menu if open
    + navLinks.classList.remove('active');
    + }
    + });
    + });
    +
    + // Form submission handler
    + const contactForm = document.getElementById('contact-form');
    + if (contactForm) {
    + contactForm.addEventListener('submit', (e) => {
    + e.preventDefault();
    + // Add form submission logic here
    + alert('Thank you for your message! We will get back to you soon.');
    + contactForm.reset();
    + });
    + }
    +
    + // Intersection Observer for fade-in animations
    + const observer = new IntersectionObserver((entries) => {
    + entries.forEach(entry => {
    + if (entry.isIntersecting) {
    + entry.target.style.opacity = '1';
    + entry.target.style.transform = 'translateY(0)';
    + }
    + });
    + }, { threshold: 0.1 });
    +
    + // Observe all sections
    + document.querySelectorAll('section').forEach(section => {
    + section.style.opacity = '0';
    + section.style.transform = 'translateY(20px)';
    + section.style.transition = 'opacity 0.6s ease-out, transform 0.6s ease-out';
    + observer.observe(section);
    + });
    + });
    style.css
    Changed around line 1
    + :root {
    + --primary: #2563eb;
    + --secondary: #1e40af;
    + --text: #1f2937;
    + --background: #ffffff;
    + --accent: #dbeafe;
    + }
    +
    + * {
    + 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;
    + color: var(--text);
    + }
    +
    + /* Header & Navigation */
    + header {
    + position: fixed;
    + width: 100%;
    + background: rgba(255, 255, 255, 0.95);
    + backdrop-filter: blur(10px);
    + z-index: 1000;
    + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    + }
    +
    + nav {
    + max-width: 1200px;
    + margin: 0 auto;
    + padding: 1rem;
    + display: flex;
    + justify-content: space-between;
    + align-items: center;
    + }
    +
    + .logo {
    + font-size: 1.5rem;
    + font-weight: bold;
    + color: var(--primary);
    + }
    +
    + .nav-links {
    + display: flex;
    + gap: 2rem;
    + list-style: none;
    + }
    +
    + .nav-links a {
    + text-decoration: none;
    + color: var(--text);
    + transition: color 0.3s;
    + }
    +
    + .nav-links a:hover {
    + color: var(--primary);
    + }
    +
    + /* Hero Section */
    + .hero {
    + min-height: 100vh;
    + display: flex;
    + align-items: center;
    + position: relative;
    + overflow: hidden;
    + padding: 2rem;
    + }
    +
    + .hero-content {
    + max-width: 600px;
    + z-index: 1;
    + }
    +
    + .hero h1 {
    + font-size: 3.5rem;
    + margin-bottom: 1rem;
    + background: linear-gradient(45deg, var(--primary), var(--secondary));
    + -webkit-background-clip: text;
    + -webkit-text-fill-color: transparent;
    + }
    +
    + .hero-shape {
    + position: absolute;
    + right: -10%;
    + top: -10%;
    + width: 80%;
    + height: 120%;
    + background: linear-gradient(45deg, var(--accent), var(--primary));
    + transform: rotate(-12deg);
    + border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    + z-index: 0;
    + animation: morphShape 15s infinite;
    + }
    +
    + /* Solutions Section */
    + .solutions {
    + padding: 5rem 2rem;
    + background: var(--background);
    + }
    +
    + .cards {
    + display: grid;
    + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    + gap: 2rem;
    + margin-top: 3rem;
    + }
    +
    + .card {
    + background: white;
    + padding: 2rem;
    + border-radius: 1rem;
    + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    + transition: transform 0.3s;
    + }
    +
    + .card:hover {
    + transform: translateY(-5px);
    + }
    +
    + .card-icon {
    + font-size: 2rem;
    + margin-bottom: 1rem;
    + }
    +
    + /* Contact Form */
    + .contact {
    + padding: 5rem 2rem;
    + background: var(--accent);
    + }
    +
    + form {
    + max-width: 600px;
    + margin: 0 auto;
    + display: flex;
    + flex-direction: column;
    + gap: 1rem;
    + }
    +
    + input, textarea {
    + padding: 1rem;
    + border: 2px solid transparent;
    + border-radius: 0.5rem;
    + transition: border-color 0.3s;
    + }
    +
    + input:focus, textarea:focus {
    + outline: none;
    + border-color: var(--primary);
    + }
    +
    + button {
    + background: var(--primary);
    + color: white;
    + padding: 1rem 2rem;
    + border: none;
    + border-radius: 0.5rem;
    + cursor: pointer;
    + transition: background 0.3s;
    + }
    +
    + button:hover {
    + background: var(--secondary);
    + }
    +
    + /* Footer */
    + footer {
    + background: var(--text);
    + color: white;
    + padding: 3rem 2rem;
    + }
    +
    + .footer-content {
    + max-width: 1200px;
    + margin: 0 auto;
    + display: grid;
    + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    + gap: 2rem;
    + }
    +
    + /* Animations */
    + @keyframes morphShape {
    + 0% { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }
    + 50% { border-radius: 70% 30% 30% 70% / 70% 70% 30% 30%; }
    + 100% { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }
    + }
    +
    + /* Mobile Responsiveness */
    + .mobile-menu {
    + display: none;
    + flex-direction: column;
    + gap: 6px;
    + background: none;
    + border: none;
    + padding: 0.5rem;
    + cursor: pointer;
    + }
    +
    + .mobile-menu span {
    + width: 25px;
    + height: 2px;
    + background: var(--text);
    + transition: 0.3s;
    + }
    +
    + @media (max-width: 768px) {
    + .mobile-menu {
    + display: flex;
    + }
    +
    + .nav-links {
    + display: none;
    + position: absolute;
    + top: 100%;
    + left: 0;
    + right: 0;
    + background: white;
    + flex-direction: column;
    + padding: 1rem;
    + text-align: center;
    + }
    +
    + .nav-links.active {
    + display: flex;
    + }
    +
    + .hero h1 {
    + font-size: 2.5rem;
    + }
    + }