Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Kuro Browser - Secure Virtual Browsing</title> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;700&family=Noto+Sans+JP:wght@400;700&display=swap" rel="stylesheet"> | |
| <link rel="stylesheet" href="styles.css"> | |
| </head> | |
| <body> | |
| <nav class="navbar"> | |
| <div class="container"> | |
| <a href="#" class="logo">Kuro Browser</a> | |
| <div class="nav-links"> | |
| <a href="#features">Features</a> | |
| <a href="#security">Security</a> | |
| <a href="#technology">Technology</a> | |
| <a href="#launch-plans">Launch Plans</a> | |
| <a href="#faq">FAQ</a> | |
| <a href="#brainstorming">Brainstorming</a> | |
| <a href="signin.html" class="sign-in-link">Sign In</a> | |
| </div> | |
| </div> | |
| </nav> | |
| <section class="hero"> | |
| <div class="animated-stars"></div> | |
| <div class="hero-content container"> | |
| <div class="mission-badge"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/> | |
| </svg> | |
| Your Secure Gateway | |
| </div> | |
| <h1>Experience the Web, Reimagined</h1> | |
| <p>Aetheria offers a secure, private, and personalized virtual browser accessible from any device. Protect your data and browse with complete peace of mind.</p> | |
| <a href="#" class="cta-button">Start Browsing Securely | |
| <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <path d="M5 12h14M12 5l7 7-7 7"/> | |
| </svg> | |
| </a> | |
| </div> | |
| </section> | |
| <section class="features section" id="features"> | |
| <div class="container"> | |
| <div class="feature-card"> | |
| <div class="feature-icon"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/> | |
| </svg> | |
| </div> | |
| <h3>Personalized Browsing</h3> | |
| <p>Customize your browsing environment with themes, extensions, and settings, making it truly yours.</p> | |
| </div> | |
| <div class="feature-card"> | |
| <div class="feature-icon"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/> | |
| </svg> | |
| </div> | |
| <h3>Cross-Device Access</h3> | |
| <p>Access your virtual browser and settings from any device, ensuring a consistent browsing experience.</p> | |
| </div> | |
| <div class="feature-card"> | |
| <div class="feature-icon"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-2 2 2 2 0 01-2-2v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83 0 2 2 0 010-2.83l.06-.06a1.65 1.65 0 00.33-1.82 1.65 1.65 0 00-1.51-1H3a2 2 0 01-2-2 2 2 0 012-2h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 010-2.83 2 2 0 012.83 0l.06.06a1.65 1.65 0 001.82.33H9a1.65 1.65 0 001-1.51V3a2 2 0 012-2 2 2 0 012 2v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 0 2 2 0 010 2.83l-.06.06a1.65 1.65 0 00-.33 1.82V9a1.65 1.65 0 001.51 1H21a2 2 0 012 2 2 2 0 01-2 2h-.09a1.65 1.65 0 00-1.51 1z"/> | |
| </svg> | |
| </div> | |
| <h3>Enhanced Privacy</h3> | |
| <p>Keep your browsing history and data private with our advanced security features and privacy options.</p> | |
| </div> | |
| <div class="feature-card"> | |
| <div class="feature-icon"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"/> | |
| </svg> | |
| </div> | |
| <h3>Secure File Storage</h3> | |
| <p>Store your important files securely within Aetheria, accessible from any device, any time.</p> | |
| </div> | |
| <div class="feature-card"> | |
| <div class="feature-icon"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <path d="M16 17l-4-4-4 4m0-8l4 4 4-4M21 3l-2.8 2.8c-.5.5-1.4.5-2 0L12 5l-3.2 1.8c-.5.5-1.4.5-2 0L3 3"/> | |
| </svg> | |
| </div> | |
| <h3>Real-Time Threat Detection</h3> | |
| <p>Our advanced system monitors and prevents threats in real-time, safeguarding your browsing experience.</p> | |
| </div> | |
| <div class="feature-card"> | |
| <div class="feature-icon"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/> | |
| <path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h5z"/> | |
| </svg> | |
| </div> | |
| <h3>Multiple Sessions</h3> | |
| <p>Run multiple browsing sessions simultaneously, boosting your productivity and organization.</p> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="security section" id="security"> | |
| <div class="container"> | |
| <h2>Interactive Exploration of Your Digital World</h2> | |
| <p>Dive into a new dimension of control, privacy, and customization. Aetheria is not just a browser, it's your personal digital sanctuary.</p> | |
| <div class="interactive-grid"> | |
| <div class="interactive-item" data-modal="data-encryption"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <path d="M12 15v6m-4-2h8M7 7h10a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2z"/> | |
| </svg> | |
| <h3>Data Encryption</h3> | |
| <p>Explore the advanced encryption protocols that protect your data.</p> | |
| </div> | |
| <div class="interactive-item" data-modal="anonymous-browsing"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <path d="M17.5 17.5a3.5 3.5 0 10-5-5 3.5 3.5 0 005 5z"/> | |
| <path d="M2 12s4-8 10-8 10 8 10 8-4 8-10 8-10-8-10-8z"/> | |
| </svg> | |
| <h3>Anonymous Browsing</h3> | |
| <p>Uncover how we mask your IP and prevent tracking.</p> | |
| </div> | |
| <div class="interactive-item" data-modal="sandboxed-environment"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><path d="M17 7v10M7 7v10"/> | |
| </svg> | |
| <h3>Sandboxed Environment</h3> | |
| <p>Understand how our virtual environment safeguards your system.</p> | |
| </div> | |
| <div class="interactive-item" data-modal="realtime-threat-detection"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <path d="M16 17l-4-4-4 4m0-8l4 4 4-4M21 3l-2.8 2.8c-.5.5-1.4.5-2 0L12 5l-3.2 1.8c-.5.5-1.4.5-2 0L3 3"/> | |
| </svg> | |
| <h3>Real-time Threat Detection</h3> | |
| <p>See how we continuously monitor and prevent security compromises.</p> | |
| </div> | |
| <div class="interactive-item" data-modal="personalized-themes"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <path d="M3 9l9-7 9 7-9 7-9-7zm0 5l9 7 9-7-9-7-9 7z"/> | |
| </svg> | |
| <h3>Personalized Themes</h3> | |
| <p>Explore the array of themes that will allow you to tailor your browsing experience.</p> | |
| </div> | |
| <div class="interactive-item" data-modal="cross-device-access"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <path d="M22 12a10 10 0 0 1-10 10 10 10 0 0 1-10-10 10 10 0 0 1 10-10 10 10 0 0 1 10 10z"/> | |
| <path d="M12 12v8"/> | |
| <path d="M4 20a8 8 0 0 0 16 0"/> | |
| </svg> | |
| <h3>Cross-Device Access</h3> | |
| <p>Learn how Aetheria seamlessly syncs across all your devices.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <div class="interactive-modal" id="data-encryption"> | |
| <div class="interactive-modal-content"> | |
| <span class="interactive-modal-close">×</span> | |
| <h2>Data Encryption</h2> | |
| <p>Aetheria employs state-of-the-art encryption techniques to safeguard your data. All data transmitted and stored within Aetheria is encrypted, providing the highest level of protection. You can explore our protocols and learn more about how we prioritize your privacy. Your peace of mind is our priority.</p> | |
| </div> | |
| </div> | |
| <div class="interactive-modal" id="anonymous-browsing"> | |
| <div class="interactive-modal-content"> | |
| <span class="interactive-modal-close">×</span> | |
| <h2>Anonymous Browsing</h2> | |
| <p>With Aetheria, you can browse the web without leaving a trace. Our advanced system masks your IP address and prevents tracking, ensuring your anonymity and privacy. You can delve into our anonymity protocols and understand how Aetheria keeps your browsing activity truly private. Explore freely without any worry.</p> | |
| </div> | |
| </div> | |
| <div class="interactive-modal" id="sandboxed-environment"> | |
| <div class="interactive-modal-content"> | |
| <span class="interactive-modal-close">×</span> | |
| <h2>Sandboxed Environment</h2> | |
| <p>Aetheria's sandboxed environment isolates your browsing sessions, preventing malware and tracking cookies from affecting your system. This means you can explore the web without any fear of malicious software or intrusive tracking. It is your own virtual safe zone within the web.</p> | |
| </div> | |
| </div> | |
| <div class="interactive-modal" id="realtime-threat-detection"> | |
| <div class="interactive-modal-content"> | |
| <span class="interactive-modal-close">×</span> | |
| <h2>Real-time Threat Detection</h2> | |
| <p>Aetheria continuously monitors your browsing activity in real-time to detect and prevent potential security threats, ensuring a safe and secure browsing experience.</p> | |
| </div> | |
| </div> | |
| <div class="interactive-modal" id="personalized-themes"> | |
| <div class="interactive-modal-content"> | |
| <span class="interactive-modal-close">×</span> | |
| <h2>Personalized Themes</h2> | |
| <p>Aetheria offers a wide range of personalized themes, allowing you to customize your browsing experience to suit your preferences. From minimalistic designs to vibrant colors, you can choose the perfect theme to match your personality.</p> | |
| </div> | |
| </div> | |
| <div class="interactive-modal" id="cross-device-access"> | |
| <div class="interactive-modal-content"> | |
| <span class="interactive-modal-close">×</span> | |
| <h2>Cross-Device Access</h2> | |
| <p>Aetheria allows you to access your virtual browser and settings from any device, ensuring a consistent browsing experience across all your devices. With Aetheria, you can start browsing on one device and pick up where you left off on another, seamlessly.</p> | |
| </div> | |
| </div> | |
| <section class="user-experience section" id="user-experience"> | |
| <div class="container"> | |
| <h2>Reimagine Your Digital Journey</h2> | |
| <p>Aetheria is more than a browser - it's a personalized digital ecosystem that adapts to your unique needs.</p> | |
| <div class="experience-showcase"> | |
| <div class="experience-card"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 16c-3.31 0-6-2.69-6-6s2.69-6 6-6 6 2.69 6 6-2.69 6-6 6z"/> | |
| <path d="M13 9h-2v2h2V9zm0 4h-2v2h2v-2z"/> | |
| </svg> | |
| <h3>Adaptive Intelligence</h3> | |
| <p>Our AI learns your browsing patterns, suggesting optimal experiences and privacy settings.</p> | |
| <button class="learn-more-btn">How It Works</button> | |
| </div> | |
| <div class="experience-card"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <path d="M10 19l-7-7 7-7"/> | |
| <path d="M19 19l-7-7 7-7"/> | |
| </svg> | |
| <h3>Seamless Transitions</h3> | |
| <p>Switch between devices, workspaces, and browsing modes without losing context.</p> | |
| <button class="learn-more-btn">Explore Transitions</button> | |
| </div> | |
| <div class="experience-card"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <circle cx="12" cy="12" r="10"/> | |
| <path d="M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3"/> | |
| <line x1="12" y1="17" x2="12.01" y2="17"/> | |
| </svg> | |
| <h3>Contextual Privacy</h3> | |
| <p>Intelligent privacy modes that automatically adjust based on your browsing context.</p> | |
| <button class="learn-more-btn">Privacy Insights</button> | |
| </div> | |
| </div> | |
| <div class="experience-testimonial"> | |
| <blockquote> | |
| "Aetheria doesn't just protect my browsing - it transforms how I interact with the digital world." | |
| <footer>— Alex Rodriguez, Tech Innovator</footer> | |
| </blockquote> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="advanced-features section" id="advanced-features"> | |
| <div class="container"> | |
| <h2>Beyond Boundaries: Advanced Features</h2> | |
| <div class="features-grid"> | |
| <div class="advanced-feature"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/> | |
| <circle cx="12" cy="7" r="4"/> | |
| </svg> | |
| <h3>Persona Management</h3> | |
| <p>Create multiple digital personas for different contexts: work, personal, research.</p> | |
| </div> | |
| <div class="advanced-feature"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/> | |
| <rect x="8" y="2" width="8" height="4" rx="1" ry="1"/> | |
| </svg> | |
| <h3>Dynamic Content Isolation</h3> | |
| <p>Separate browsing contexts to prevent cross-site tracking and data leakage.</p> | |
| </div> | |
| <div class="advanced-feature"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <polygon points="12 2 2 7 12 12 22 7 12 2"/> | |
| <polyline points="2 17 12 22 22 17"/> | |
| <polyline points="2 12 12 17 22 12"/> | |
| </svg> | |
| <h3>Knowledge Layers</h3> | |
| <p>Intelligent content categorization and smart bookmarking across browsing sessions.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="community-interaction section" id="community"> | |
| <div class="container"> | |
| <h2>Join the Aetheria Community</h2> | |
| <div class="community-grid"> | |
| <div class="community-card"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <path d="M17 8h2a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2h-2v4l-4-4H9a1.5 1.5 0 0 1-1.5-1.5v-6A1.5 1.5 0 0 1 9 8h8z"/> | |
| <path d="M9 8V6a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2h-2v4l-4-4H9a1.5 1.5 0 0 1-1.5-1.5v-6A1.5 1.5 0 0 1 9 8z"/> | |
| </svg> | |
| <h3>Community Forum</h3> | |
| <p>Connect with other Aetheria users, share experiences, and get support.</p> | |
| <button class="community-btn">Join Discussion</button> | |
| </div> | |
| <div class="community-card"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"/> | |
| </svg> | |
| <h3>Beta Tester Program</h3> | |
| <p>Help shape the future of Aetheria by becoming an early feedback contributor.</p> | |
| <button class="community-btn">Apply Now</button> | |
| </div> | |
| <div class="community-card"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <rect x="3" y="3" width="18" height="18" rx="2"/> | |
| <path d="M3 9h18M9 21V9"/> | |
| </svg> | |
| <h3>Roadmap Collaboration</h3> | |
| <p>Vote on features and contribute to our product development roadmap.</p> | |
| <button class="community-btn">Collaborate</button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="early-access section" id="early-access"> | |
| <div class="container"> | |
| <h2>Get Early Access</h2> | |
| <form id="early-access-form" class="early-access-form"> | |
| <input type="email" placeholder="Enter your email" required> | |
| <select required> | |
| <option value="">Select Your Primary Use Case</option> | |
| <option value="personal">Personal Browsing</option> | |
| <option value="business">Business</option> | |
| <option value="research">Research</option> | |
| <option value="privacy">Privacy Focused</option> | |
| </select> | |
| <button type="submit">Request Invite</button> | |
| </form> | |
| </div> | |
| </section> | |
| <section class="innovation-journey section" id="innovation"> | |
| <div class="container"> | |
| <h2>Your Digital Innovation Journey</h2> | |
| <div class="innovation-timeline"> | |
| <div class="timeline-item"> | |
| <div class="timeline-icon">🚀</div> | |
| <div class="timeline-content"> | |
| <h3>Conceptualization</h3> | |
| <p>Where groundbreaking ideas transform into revolutionary technology.</p> | |
| </div> | |
| </div> | |
| <div class="timeline-item"> | |
| <div class="timeline-icon">🔬</div> | |
| <div class="timeline-content"> | |
| <h3>Advanced Research</h3> | |
| <p>Continuous exploration of cutting-edge privacy and security technologies.</p> | |
| </div> | |
| </div> | |
| <div class="timeline-item"> | |
| <div class="timeline-icon">🌐</div> | |
| <div class="timeline-content"> | |
| <h3>Global Integration</h3> | |
| <p>Connecting innovators, researchers, and privacy enthusiasts worldwide.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="interactive-playground section" id="playground"> | |
| <div class="container"> | |
| <h2>Your Digital Playground</h2> | |
| <p>Explore, experiment, and experience the future of browsing.</p> | |
| <div class="playground-grid"> | |
| <div class="playground-card" data-tooltip="Customize your browsing environment"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24"> | |
| <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 16c-3.31 0-6-2.69-6-6s2.69-6 6-6 6 2.69 6 6-2.69 6-6 6z"/> | |
| </svg> | |
| <h3>Personalization Hub</h3> | |
| </div> | |
| <div class="playground-card" data-tooltip="Experiment with privacy modes"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24"> | |
| <path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4z"/> | |
| </svg> | |
| <h3>Privacy Laboratory</h3> | |
| </div> | |
| <div class="playground-card" data-tooltip="Discover new browsing paradigms"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24"> | |
| <path d="M9 21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-1H9v1zm3-19C8.14 2 5 5.14 5 9c0 2.38 1.19 4.47 3 5.74V17c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2.26c1.81-1.27 3-3.36 3-5.74 0-3.86-3.14-7-7-7zm2.85 11.1l-.85.6V16h-4v-2.3l-.85-.6A4.997 4.997 0 0 1 7 9c0-2.76 2.24-5 5-5s5 2.24 5 5c0 1.63-.8 3.16-2.15 4.1z"/> | |
| </svg> | |
| <h3>Innovation Arena</h3> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="vision-exploration section" id="vision"> | |
| <div class="container"> | |
| <h2>Beyond Browsing: A Visionary Expedition</h2> | |
| <div class="vision-cards"> | |
| <div class="vision-card" data-interaction="modal"> | |
| <h3>Future of Digital Privacy</h3> | |
| <p>Explore how Aetheria is redefining digital sovereignty.</p> | |
| <button class="vision-trigger">Discover More</button> | |
| </div> | |
| <div class="vision-card" data-interaction="modal"> | |
| <h3>Technological Frontiers</h3> | |
| <p>Dive into the cutting-edge technologies powering Aetheria.</p> | |
| <button class="vision-trigger">Explore Frontiers</button> | |
| </div> | |
| <div class="vision-card" data-interaction="modal"> | |
| <h3>Global Privacy Movement</h3> | |
| <p>Join our mission to transform digital interactions.</p> | |
| <button class="vision-trigger">Join Movement</button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <div id="vision-modals" class="vision-modal-container"> | |
| <!-- Modals for Vision Sections --> | |
| <div class="vision-modal" id="privacy-modal"> | |
| <div class="modal-content"> | |
| <h2>Digital Privacy Redefined</h2> | |
| <p>Aetheria is not just a browser; it's a declaration of digital rights.</p> | |
| <button class="modal-close">Close</button> | |
| </div> | |
| </div> | |
| <!-- Similar modals for other vision cards --> | |
| </div> | |
| <section class="kuro-hero"> | |
| <div class="hero-content"> | |
| <h1>Secure Your Digital Journey</h1> | |
| <p>Experience private, personalized browsing with Kuro Browser. Your virtual gateway to the web.</p> | |
| <button class="cta-button">Get Started Now</button> | |
| <div class="hero-animation-container"> | |
| <svg class="hero-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 150"> | |
| <path class="sakura-path" d="M75 20 C70 2, 40 2, 25 30 S30 90 75 115, 120 90, 125 30, 80 2 75 20 Z" fill="none" stroke="#ffb6c1" stroke-width="2" stroke-linecap="round" /> | |
| <path class="sakura-path" d="M75 40 C60 10, 30 10, 15 40 S20 100 75 125, 130 100, 135 40, 90 10 75 40 Z" fill="none" stroke="#ffb6c1" stroke-width="2" stroke-linecap="round" /> | |
| </svg> | |
| <div class="floating-kanji"> | |
| <div class="kanji" style="left: 20%; top: 10%;">私</div> | |
| <div class="kanji" style="left: 80%; top: 25%;">安</div> | |
| <div class="kanji" style="left: 10%; top: 40%;">全</div> | |
| <div class="kanji" style="left: 60%; top: 60%;">専</div> | |
| <div class="kanji" style="left: 30%; top: 70%;">用</div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <footer class="enhanced-footer" style="background-image: url('https://deta.surf/footer-32-yesdither-nomatte.gif'); background-size: cover; background-position: center;"> | |
| <div class="container"> | |
| <div class="footer-grid"> | |
| <div class="footer-column"> | |
| <h4>Quick Links</h4> | |
| <ul> | |
| <li><a href="#features">Features</a></li> | |
| <li><a href="#security">Security</a></li> | |
| <li><a href="#innovation">Our Journey</a></li> | |
| </ul> | |
| </div> | |
| <div class="footer-column"> | |
| <h4>Community</h4> | |
| <ul> | |
| <li><a href="#community">Forums</a></li> | |
| <li><a href="#beta">Beta Program</a></li> | |
| <li><a href="#roadmap">Roadmap</a></li> | |
| </ul> | |
| </div> | |
| <div class="footer-social"> | |
| <h4>Connect</h4> | |
| <div class="social-icons"> | |
| <a href="#" class="social-icon">Twitter</a> | |
| <a href="#" class="social-icon">GitHub</a> | |
| <a href="#" class="social-icon">Discord</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="footer-bottom"> | |
| <p>© 2023 Kuro Browser. All Rights Reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script src="interactive.js"></script> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', () => { | |
| const ctaButton = document.querySelector('.cta-button'); | |
| if (ctaButton) { | |
| ctaButton.addEventListener('click', () => { | |
| alert('Starting your secure browsing experience!'); | |
| }); | |
| } | |
| function getRandomPosition(element) { | |
| const containerWidth = document.querySelector('.hero-animation-container').offsetWidth; | |
| const containerHeight = document.querySelector('.hero-animation-container').offsetHeight; | |
| const elementWidth = element.offsetWidth; | |
| const elementHeight = element.offsetHeight; | |
| const x = Math.random() * (containerWidth - elementWidth); | |
| const y = Math.random() * (containerHeight - elementHeight); | |
| return {x, y}; | |
| } | |
| const kanjiElements = document.querySelectorAll('.kanji'); | |
| kanjiElements.forEach(kanji => { | |
| const {x, y} = getRandomPosition(kanji); | |
| kanji.style.left = `${x}px`; | |
| kanji.style.top = `${y}px`; | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |