Spaces:
Running
Running
File size: 26,449 Bytes
e7a4412 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 462 463 464 465 466 467 468 469 470 471 472 473 474 475 476 477 478 479 480 481 482 483 484 485 486 487 488 489 490 491 492 493 494 495 496 497 498 499 500 501 502 503 504 505 506 507 508 509 |
<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>
|