Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>CYBERORIGIN.AI | DATA IS THE NEW OIL</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| :root { | |
| --neon-blue: #00f0ff; | |
| --neon-pink: #ff00ff; | |
| --matrix-green: #00ff41; | |
| --cyber-yellow: #fff000; | |
| --dark-bg: #0a0a12; | |
| --darker-bg: #050508; | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| font-family: 'Rajdhani', 'Segoe UI', sans-serif; | |
| } | |
| @font-face { | |
| font-family: 'Rajdhani'; | |
| src: url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;700&display=swap'); | |
| } | |
| body { | |
| background-color: var(--dark-bg); | |
| color: white; | |
| overflow-x: hidden; | |
| position: relative; | |
| } | |
| body::before { | |
| content: ""; | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: | |
| linear-gradient(135deg, rgba(0, 240, 255, 0.1) 0%, rgba(255, 0, 255, 0.1) 100%), | |
| url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect width="50" height="50" x="0" y="0" fill="%2300f0ff" opacity="0.05"/><rect width="50" height="50" x="50" y="50" fill="%2300f0ff" opacity="0.05"/></svg>'); | |
| z-index: -2; | |
| pointer-events: none; | |
| } | |
| .glitch-effect { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: repeating-linear-gradient( | |
| 0deg, | |
| rgba(0, 240, 255, 0.1) 0px, | |
| rgba(0, 240, 255, 0.1) 1px, | |
| transparent 1px, | |
| transparent 3px | |
| ); | |
| z-index: -1; | |
| animation: glitch 8s linear infinite; | |
| pointer-events: none; | |
| } | |
| @keyframes glitch { | |
| 0% { transform: translateY(0); opacity: 1; } | |
| 25% { transform: translateY(-10px); opacity: 0.8; } | |
| 50% { transform: translateY(0); opacity: 0.9; } | |
| 75% { transform: translateY(10px); opacity: 0.7; } | |
| 100% { transform: translateY(0); opacity: 1; } | |
| } | |
| .terminal-cursor { | |
| display: inline-block; | |
| width: 8px; | |
| height: 16px; | |
| background: var(--neon-blue); | |
| vertical-align: middle; | |
| margin-left: 5px; | |
| animation: blink 1s infinite; | |
| } | |
| @keyframes blink { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0; } | |
| } | |
| header { | |
| padding: 20px 5%; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| border-bottom: 1px solid rgba(0, 240, 255, 0.3); | |
| position: relative; | |
| } | |
| .logo { | |
| display: flex; | |
| align-items: center; | |
| font-weight: 700; | |
| text-transform: uppercase; | |
| letter-spacing: 3px; | |
| font-size: 1.8rem; | |
| background: linear-gradient(90deg, var(--neon-blue), var(--neon-pink)); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| text-shadow: 0 0 10px rgba(0, 240, 255, 0.3); | |
| } | |
| .logo .pulse { | |
| width: 15px; | |
| height: 15px; | |
| background: var(--neon-blue); | |
| border-radius: 50%; | |
| margin-right: 15px; | |
| animation: pulse 2s infinite; | |
| box-shadow: 0 0 10px var(--neon-blue); | |
| } | |
| @keyframes pulse { | |
| 0% { transform: scale(0.95); } | |
| 50% { transform: scale(1.1); } | |
| 100% { transform: scale(0.95); } | |
| } | |
| nav ul { | |
| display: flex; | |
| list-style: none; | |
| } | |
| nav ul li { | |
| margin-left: 30px; | |
| } | |
| nav ul li a { | |
| color: white; | |
| text-decoration: none; | |
| font-weight: 500; | |
| letter-spacing: 1px; | |
| position: relative; | |
| padding-bottom: 5px; | |
| transition: all 0.3s ease; | |
| } | |
| nav ul li a::after { | |
| content: ''; | |
| position: absolute; | |
| width: 0; | |
| height: 2px; | |
| bottom: 0; | |
| left: 0; | |
| background: var(--neon-blue); | |
| transition: width 0.3s ease; | |
| } | |
| nav ul li a:hover { | |
| color: var(--neon-blue); | |
| } | |
| nav ul li a:hover::after { | |
| width: 100%; | |
| } | |
| .hero { | |
| height: 80vh; | |
| display: flex; | |
| align-items: center; | |
| padding: 0 5%; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .hero-content { | |
| flex: 1; | |
| z-index: 1; | |
| } | |
| .hero h1 { | |
| font-size: 4rem; | |
| margin-bottom: 20px; | |
| line-height: 1.2; | |
| font-weight: 700; | |
| text-transform: uppercase; | |
| background: linear-gradient(90deg, white, var(--neon-blue)); | |
| -webkit-background-cllip: text; | |
| background-clip: text; | |
| color: transparent; | |
| } | |
| .hero h1 span { | |
| display: block; | |
| color: var(--neon-pink); | |
| text-shadow: 0 0 15px rgba(255, 0, 255, 0.7); | |
| } | |
| .typing-effect { | |
| font-size: 1.5rem; | |
| color: var(--neon-blue); | |
| margin-bottom: 30px; | |
| text-shadow: 0 0 10px rgba(0, 240, 255, 0.5); | |
| height: 2rem; | |
| } | |
| .cta-button { | |
| display: inline-block; | |
| padding: 15px 40px; | |
| background: linear-gradient(45deg, var(--neon-blue), var(--neon-pink)); | |
| color: black; | |
| font-weight: 700; | |
| text-transform: uppercase; | |
| letter-spacing: 2px; | |
| border-radius: 30px; | |
| text-decoration: none; | |
| margin-top: 20px; | |
| border: none; | |
| cursor: pointer; | |
| position: relative; | |
| overflow: hidden; | |
| transition: all 0.3s ease; | |
| box-shadow: 0 0 20px rgba(0, 240, 255, 0.5); | |
| } | |
| .cta-button:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 0 30px rgba(255, 0, 255, 0.7); | |
| } | |
| .cta-button::before { | |
| content: ''; | |
| position: absolute; | |
| top: -50%; | |
| left: -50%; | |
| width: 200%; | |
| height: 200%; | |
| background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 70%); | |
| transform: scale(0); | |
| transition: transform 0.5s ease; | |
| } | |
| .cta-button:hover::before { | |
| transform: scale(1); | |
| } | |
| .hero-image { | |
| flex: 1; | |
| position: relative; | |
| height: 100%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .robot-container { | |
| position: relative; | |
| width: 400px; | |
| height: 400px; | |
| } | |
| .robot { | |
| width: 100%; | |
| height: 100%; | |
| background: url('https://i.imgur.com/JYw9R3J.png') center/contain no-repeat; | |
| position: relative; | |
| z-index: 1; | |
| filter: drop-shadow(0 0 20px rgba(0, 240, 255, 0.7)); | |
| } | |
| .data-stream { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: | |
| linear-gradient(rgba(0, 240, 255, 0.7), transparent), | |
| url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect width="80" height="2" x="10" y="10" fill="%2300f0ff"/><rect width="60" height="2" x="20" y="20" fill="%2300f0ff"/><rect width="40" height="2" x="30" y="30" fill="%2300f0ff"/><rect width="20" height="2" x="40" y="40" fill="%2300f0ff"/></svg>'); | |
| animation: dataFlow 10s linear infinite; | |
| z-index: 0; | |
| opacity: 0.6; | |
| filter: blur(1px); | |
| } | |
| @keyframes dataFlow { | |
| 0% { background-position: 0 0; } | |
| 100% { background-position: 0 100px; } | |
| } | |
| .barcode-overlay { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect width="4" height="100" x="0" fill="%23fff"/><rect width="4" height="100" x="10" fill="%23fff"/><rect width="4" height="100" x="20" fill="%23fff"/><rect width="4" height="100" x="30" fill="%23fff"/><rect width="4" height="100" x="40" fill="%23fff"/><rect width="4" height="100" x="50" fill="%23fff"/><rect width="4" height="100" x="60" fill="%23fff"/><rect width="4" height="100" x="70" fill="%23fff"/><rect width="4" height="100" x="80" fill="%23fff"/><rect width="4" height="100" x="90" fill="%23fff"/></svg>'); | |
| mix-blend-mode: overlay; | |
| opacity: 0.1; | |
| z-index: 2; | |
| } | |
| .hex-grid { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path d="M50 0 L100 30 L100 70 L50 100 L0 70 L0 30 Z" fill="none" stroke="%2300f0ff" stroke-width="0.5"/></svg>'); | |
| animation: hexMove 30s linear infinite; | |
| opacity: 0.1; | |
| z-index: 0; | |
| } | |
| @keyframes hexMove { | |
| 0% { transform: translateY(0) translateX(0); } | |
| 50% { transform: translateY(-50px) translateX(50px); } | |
| 100% { transform: translateY(0) translateX(0); } | |
| } | |
| .data-particles { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index: 3; | |
| } | |
| .data-particle { | |
| position: absolute; | |
| width: 4px; | |
| height: 4px; | |
| background: var(--neon-blue); | |
| border-radius: 50%; | |
| opacity: 0.8; | |
| animation: float 10s linear infinite; | |
| } | |
| @keyframes float { | |
| 0% { transform: translateY(0) translateX(0); opacity: 0; } | |
| 20% { opacity: 1; } | |
| 100% { transform: translateY(-500px) translateX(100px); opacity: 0; } | |
| } | |
| .stats { | |
| display: flex; | |
| padding: 50px 5%; | |
| background: var(--darker-bg); | |
| border-top: 1px solid rgba(0, 240, 255, 0.2); | |
| border-bottom: 1px solid rgba(0, 240, 255, 0.2); | |
| } | |
| .stat-item { | |
| flex: 1; | |
| text-align: center; | |
| padding: 20px; | |
| position: relative; | |
| } | |
| .stat-item::after { | |
| content: ''; | |
| position: absolute; | |
| right: 0; | |
| top: 50%; | |
| transform: translateY(-50%); | |
| width: 1px; | |
| height: 60%; | |
| background: linear-gradient(to bottom, transparent, var(--neon-blue), transparent); | |
| } | |
| .stat-item:last-child::after { | |
| display: none; | |
| } | |
| .stat-number { | |
| font-size: 3rem; | |
| font-weight: 700; | |
| margin-bottom: 10px; | |
| background: linear-gradient(90deg, var(--neon-blue), var(--neon-pink)); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| } | |
| .stat-label { | |
| color: rgba(255, 255, 255, 0.7); | |
| font-size: 1rem; | |
| text-transform: uppercase; | |
| letter-spacing: 2px; | |
| } | |
| .process { | |
| padding: 100px 5%; | |
| text-align: center; | |
| position: relative; | |
| } | |
| .process h2 { | |
| font-size: 2.5rem; | |
| margin-bottom: 50px; | |
| text-transform: uppercase; | |
| letter-spacing: 3px; | |
| color: white; | |
| position: relative; | |
| display: inline-block; | |
| } | |
| .process h2::after { | |
| content: ''; | |
| position: absolute; | |
| width: 50%; | |
| height: 3px; | |
| bottom: -10px; | |
| left: 25%; | |
| background: linear-gradient(90deg, var(--neon-blue), var(--neon-pink)); | |
| } | |
| .process-steps { | |
| display: flex; | |
| justify-content: center; | |
| flex-wrap: wrap; | |
| gap: 30px; | |
| margin-top: 50px; | |
| } | |
| .process-step { | |
| flex: 1; | |
| min-width: 250px; | |
| max-width: 300px; | |
| padding: 30px; | |
| background: rgba(10, 10, 20, 0.8); | |
| border-radius: 10px; | |
| position: relative; | |
| overflow: hidden; | |
| transition: all 0.3s ease; | |
| box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); | |
| border: 1px solid rgba(0, 240, 255, 0.2); | |
| } | |
| .process-step:hover { | |
| transform: translateY(-10px); | |
| box-shadow: 0 15px 30px rgba(0, 240, 255, 0.2); | |
| border-color: var(--neon-blue); | |
| } | |
| .process-step::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 5px; | |
| background: linear-gradient(90deg, var(--neon-blue), var(--neon-pink)); | |
| opacity: 0; | |
| transition: opacity 0.3s ease; | |
| } | |
| .process-step:hover::before { | |
| opacity: 1; | |
| } | |
| .step-icon { | |
| font-size: 3rem; | |
| margin-bottom: 20px; | |
| color: var(--neon-blue); | |
| text-shadow: 0 0 15px rgba(0, 240, 255, 0.5); | |
| } | |
| .process-step h3 { | |
| margin-bottom: 15px; | |
| font-size: 1.5rem; | |
| color: white; | |
| } | |
| .process-step p { | |
| color: rgba(255, 255, 255, 0.7); | |
| line-height: 1.6; | |
| } | |
| footer { | |
| background: black; | |
| padding: 50px 5%; | |
| text-align: center; | |
| position: relative; | |
| border-top: 1px solid rgba(0, 240, 255, 0.2); | |
| } | |
| .footer-content { | |
| max-width: 800px; | |
| margin: 0 auto; | |
| } | |
| .footer-logo { | |
| font-size: 2rem; | |
| font-weight: 700; | |
| text-transform: uppercase; | |
| letter-spacing: 3px; | |
| background: linear-gradient(90deg, var(--neon-blue), var(--neon-pink)); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| margin-bottom: 20px; | |
| display: inline-block; | |
| } | |
| .footer-links { | |
| display: flex; | |
| justify-content: center; | |
| margin: 30px 0; | |
| } | |
| .footer-links a { | |
| color: white; | |
| margin: 0 15px; | |
| text-decoration: none; | |
| position: relative; | |
| padding-bottom: 5px; | |
| } | |
| .footer-links a::after { | |
| content: ''; | |
| position: absolute; | |
| width: 0; | |
| height: 2px; | |
| bottom: 0; | |
| left: 0; | |
| background: var(--neon-blue); | |
| transition: width 0.3s ease; | |
| } | |
| .footer-links a:hover::after { | |
| width: 100%; | |
| } | |
| .social-icons { | |
| margin: 30px 0; | |
| } | |
| .social-icons a { | |
| display: inline-block; | |
| width: 40px; | |
| height: 40px; | |
| background: rgba(255, 255, 255, 0.1); | |
| margin: 0 10px; | |
| border-radius: 50%; | |
| color: white; | |
| line-height: 40px; | |
| font-size: 1.2rem; | |
| transition: all 0.3s ease; | |
| } | |
| .social-icons a:hover { | |
| background: var(--neon-blue); | |
| color: black; | |
| transform: translateY(-5px); | |
| box-shadow: 0 5px 15px rgba(0, 240, 255, 0.5); | |
| } | |
| .copyright { | |
| color: rgba(255, 255, 255, 0.5); | |
| font-size: 0.9rem; | |
| } | |
| .grid-line { | |
| position: fixed; | |
| top: 0; | |
| height: 100%; | |
| width: 1px; | |
| background: rgba(0, 240, 255, 0.1); | |
| z-index: -1; | |
| } | |
| .grid-line:nth-child(1) { left: 10%; } | |
| .grid-line:nth-child(2) { left: 20%; } | |
| .grid-line:nth-child(3) { left: 30%; } | |
| .grid-line:nth-child(4) { left: 40%; } | |
| .grid-line:nth-child(5) { left: 50%; } | |
| .grid-line:nth-child(6) { left: 60%; } | |
| .grid-line:nth-child(7) { left: 70%; } | |
| .grid-line:nth-child(8) { left: 80%; } | |
| .grid-line:nth-child(9) { left: 90%; } | |
| /* Responsive */ | |
| @media (max-width: 1024px) { | |
| .hero { | |
| flex-direction: column; | |
| text-align: center; | |
| height: auto; | |
| padding-top: 100px; | |
| } | |
| .hero-content { | |
| margin-bottom: 50px; | |
| } | |
| .hero-image { | |
| margin-top: 50px; | |
| padding-bottom: 50px; | |
| } | |
| .stats { | |
| flex-wrap: wrap; | |
| } | |
| .stat-item { | |
| flex: 50%; | |
| margin-bottom: 30px; | |
| } | |
| .stat-item::after { | |
| display: none; | |
| } | |
| } | |
| @media (max-width: 768px) { | |
| .hero h1 { | |
| font-size: 2.5rem; | |
| } | |
| nav ul { | |
| display: none; | |
| } | |
| .process-step { | |
| min-width: 100%; | |
| } | |
| .stat-item { | |
| flex: 100%; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="glitch-effect"></div> | |
| <!-- Grid lines --> | |
| <div class="grid-line"></div> | |
| <div class="grid-line"></div> | |
| <div class="grid-line"></div> | |
| <div class="grid-line"></div> | |
| <div class="grid-line"></div> | |
| <div class="grid-line"></div> | |
| <div class="grid-line"></div> | |
| <div class="grid-line"></div> | |
| <div class="grid-line"></div> | |
| <header> | |
| <div class="logo"> | |
| <div class="pulse"></div> | |
| CYBERORIGIN.AI | |
| </div> | |
| <nav> | |
| <ul> | |
| <li><a href="#home">HOME</a></li> | |
| <li><a href="#technology">TECHNOLOGY</a></li> | |
| <li><a href="#solutions">SOLUTIONS</a></li> | |
| <li><a href="#about">ABOUT</a></li> | |
| <li><a href="#contact">CONTACT</a></li> | |
| </ul> | |
| </nav> | |
| </header> | |
| <section class="hero" id="home"> | |
| <div class="hero-content"> | |
| <h1>FUELING THE <span>ROBOTIC REVOLUTION</span></h1> | |
| <div class="typing-effect" id="typing-text">FEEDING AI WITH PRECISION DATA<span class="terminal-cursor"></span></div> | |
| <p style="color: #aaa; max-width: 600px; line-height: 1.6;">At CyberOrigin.AI, we're building the data infrastructure for the robotic future. High-quality, structured data is the lifeblood of autonomous systems, and we're creating the pumping system that keeps them alive and evolving.</p> | |
| <a href="#contact" class="cta-button">BOOST YOUR DATA PIPELINE</a> | |
| </div> | |
| <div class="hero-image"> | |
| <div class="robot-container"> | |
| <div class="data-stream"></div> | |
| <div class="hex-grid"></div> | |
| <div class="robot"></div> | |
| <div class="barcode-overlay"></div> | |
| <div class="data-particles" id="data-particles"></div> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="stats"> | |
| <div class="stat-item"> | |
| <div class="stat-number" data-count="5000">0</div> | |
| <div class="stat-label">TERABYTES PROCESSED</div> | |
| </div> | |
| <div class="stat-item"> | |
| <div class="stat-number" data-count="1200">0</div> | |
| <div class="stat-label">ROBOTIC MODELS TRAINED</div> | |
| </div> | |
| <div class="stat-item"> | |
| <div class="stat-number" data-count="99.9">0</div> | |
| <div class="stat-label">DATA ACCURACY %</div> | |
| </div> | |
| <div class="stat-item"> | |
| <div class="stat-number" data-count="24">0</div> | |
| <div class="stat-label">HOUR SUPPORT</div> | |
| </div> | |
| </section> | |
| <section class="process"> | |
| <h2>OUR DATA ENGINE</h2> | |
| <p style="color: rgba(255,255,255,0.7); max-width: 800px; margin: 0 auto 50px; line-height: 1.6;">We transform raw data into high-octane fuel for your robotic systems. Our pipelines ensure only the cleanest, most relevant data reaches your models, dramatically improving performance and reducing training time.</p> | |
| <div class="process-steps"> | |
| <div class="process-step"> | |
| <div class="step-icon"><i class="fas fa-database"></i></div> | |
| <h3>DATA INGESTION</h3> | |
| <p>Aggregating data from diverse sources with our custom-built collectors designed specifically for robotic applications.</p> | |
| </div> | |
| <div class="process-step"> | |
| <div class="step-icon"><i class="fas fa-filter"></i></div> | |
| <h3>STRUCTURED PROCESSING</h3> | |
| <p>Applying our proprietary algorithms to filter noise and extract only signal from your data streams.</p> | |
| </div> | |
| <div class="process-step"> | |
| <div class="step-icon"><i class="fas fa-brain"></i></div> | |
| <h3>MODEL FEEDING</h3> | |
| <p>Optimized data delivery pipelines that adapt to your model's exact requirements in real-time.</p> | |
| </div> | |
| </div> | |
| </section> | |
| <footer> | |
| <div class="footer-content"> | |
| <div class="footer-logo">CYBERORIGIN.AI</div> | |
| <p style="color: rgba(255,255,255,0.7); margin-bottom: 20px;">The future runs on our data pipelines. Power your robotic systems with premium, structured data.</p> | |
| <div class="footer-links"> | |
| <a href="#home">HOME</a> | |
| <a href="#technology">TECHNOLOGY</a> | |
| <a href="#solutions">SOLUTIONS</a> | |
| <a href="#about">ABOUT</a> | |
| <a href="#contact">CONTACT</a> | |
| </div> | |
| <div class="social-icons"> | |
| <a href="#"><i class="fab fa-twitter"></i></a> | |
| <a href="#"><i class="fab fa-linkedin"></i></a> | |
| <a href="#"><i class="fab fa-github"></i></a> | |
| <a href="#"><i class="fab fa-discord"></i></a> | |
| </div> | |
| <div class="copyright"> | |
| © 2023 CYBERORIGIN.AI | ALL RIGHTS RESERVED | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Typing effect | |
| const texts = [ | |
| "FEEDING AI WITH PRECISION DATA", | |
| "OPTIMIZING ROBOTIC PERFORMANCE", | |
| "STRUCTURING THE FUTURE", | |
| "DATA IS THE NEW OIL" | |
| ]; | |
| let count = 0; | |
| let index = 0; | |
| let currentText = ''; | |
| let letter = ''; | |
| let deleting = false; | |
| const typingElement = document.getElementById('typing-text'); | |
| function type() { | |
| if (count === texts.length) { | |
| count = 0; | |
| } | |
| currentText = texts[count]; | |
| if (!deleting) { | |
| if (index < currentText.length) { | |
| letter = currentText.slice(0, ++index); | |
| typingElement.textContent = letter; | |
| } else { | |
| deleting = true; | |
| setTimeout(type, 2000); | |
| return; | |
| } | |
| } else { | |
| if (index > 0) { | |
| letter = currentText.slice(0, --index); | |
| typingElement.textContent = letter; | |
| } else { | |
| deleting = false; | |
| count++; | |
| } | |
| } | |
| setTimeout(type, deleting ? 50 : 150); | |
| } | |
| // Create data particles | |
| const particleContainer = document.getElementById('data-particles'); | |
| function createParticles() { | |
| for (let i = 0; i < 50; i++) { | |
| const particle = document.createElement('div'); | |
| particle.classList.add('data-particle'); | |
| particle.style.left = `${Math.random() * 100}%`; | |
| particle.style.top = `${Math.random() * 100}%`; | |
| particle.style.opacity = `${Math.random() * 0.5 + 0.3}`; | |
| particle.style.width = `${Math.random() * 6 + 2}px`; | |
| particle.style.height = particle.style.width; | |
| particle.style.animation = `float ${Math.random() * 10 + 5}s linear infinite`; | |
| particle.style.animationDelay = `${Math.random() * 5}s`; | |
| particleContainer.appendChild(particle); | |
| } | |
| } | |
| // Animate stats | |
| function animateStats() { | |
| const statNumbers = document.querySelectorAll('.stat-number'); | |
| statNumbers.forEach(stat => { | |
| const target = parseInt(stat.getAttribute('data-count')); | |
| let current = 0; | |
| const increment = target / 30; | |
| const timer = setInterval(() => { | |
| current += increment; | |
| if (current >= target) { | |
| current = target; | |
| clearInterval(timer); | |
| } | |
| stat.textContent = Math.floor(current) + (target % 1 !== 0 ? '.' + Math.floor((current % 1) * 10) : ''); | |
| }, 50); | |
| }); | |
| } | |
| // Intersection Observer for animations | |
| const observer = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| if (entry.target.classList.contains('stats')) { | |
| animateStats(); | |
| } | |
| } | |
| }); | |
| }, { threshold: 0.5 }); | |
| // Start all animations | |
| document.addEventListener('DOMContentLoaded', () => { | |
| type(); | |
| createParticles(); | |
| const statsSection = document.querySelector('.stats'); | |
| observer.observe(statsSection); | |
| }); | |
| </script> | |
| </body> | |
| </html> |