| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>JackOliva - Futuristic Platform</title> |
| |
| <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.js"></script> |
| <style> |
| * { |
| margin: 0; |
| padding: 0; |
| box-sizing: border-box; |
| } |
| |
| body { |
| font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; |
| background: linear-gradient(to bottom right, #0f172a, #581c87, #0f172a); |
| color: white; |
| min-height: 100vh; |
| overflow-x: hidden; |
| } |
| |
| .stars { |
| position: fixed; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| pointer-events: none; |
| z-index: 1; |
| } |
| |
| .stars::before { |
| content: ''; |
| position: absolute; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| background-image: |
| radial-gradient(2px 2px at 20px 30px, #fff, transparent), |
| radial-gradient(2px 2px at 40px 70px, rgba(255,255,255,0.3), transparent), |
| radial-gradient(1px 1px at 90px 40px, rgba(255,255,255,0.5), transparent), |
| radial-gradient(1px 1px at 130px 80px, rgba(255,255,255,0.3), transparent), |
| radial-gradient(2px 2px at 160px 30px, rgba(255,255,255,0.6), transparent); |
| background-repeat: repeat; |
| background-size: 200px 100px; |
| animation: sparkle 20s linear infinite; |
| } |
| |
| @keyframes sparkle { |
| from { transform: translateY(0); } |
| to { transform: translateY(-100px); } |
| } |
| |
| .container { |
| position: relative; |
| z-index: 10; |
| } |
| |
| |
| header { |
| padding: 1rem 1.5rem; |
| } |
| |
| nav { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| max-width: 1200px; |
| margin: 0 auto; |
| } |
| |
| .logo { |
| display: flex; |
| align-items: center; |
| gap: 0.5rem; |
| } |
| |
| .logo-icon { |
| width: 40px; |
| height: 40px; |
| background: transparent; |
| border-radius: 50%; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| font-size: 1.5rem; |
| } |
| |
| .logo-icon img { |
| width: 40px; |
| height: 40px; |
| object-fit: contain; |
| } |
| |
| .logo-text { |
| font-size: 1.5rem; |
| font-weight: bold; |
| } |
| |
| .logo-accent { |
| color: #a855f7; |
| } |
| |
| .nav-links { |
| display: none; |
| gap: 2rem; |
| align-items: center; |
| } |
| |
| .nav-links a { |
| color: #d1d5db; |
| text-decoration: none; |
| transition: color 0.3s; |
| } |
| |
| .nav-links a:hover { |
| color: white; |
| } |
| |
| .btn { |
| background: linear-gradient(to right, #a855f7, #ec4899); |
| color: white; |
| padding: 0.75rem 1.5rem; |
| border: none; |
| border-radius: 0.5rem; |
| cursor: pointer; |
| font-weight: 500; |
| transition: all 0.3s; |
| } |
| |
| .btn:hover { |
| background: linear-gradient(to right, #9333ea, #db2777); |
| } |
| |
| |
| .hero { |
| text-align: center; |
| padding: 5rem 1.5rem; |
| max-width: 1000px; |
| margin: 0 auto; |
| } |
| |
| .hero h1 { |
| font-size: 3rem; |
| font-weight: bold; |
| margin-bottom: 1.5rem; |
| } |
| |
| .hero p { |
| font-size: 1.25rem; |
| color: #d1d5db; |
| margin-bottom: 2rem; |
| max-width: 600px; |
| margin-left: auto; |
| margin-right: auto; |
| } |
| |
| .badges { |
| display: flex; |
| flex-wrap: wrap; |
| justify-content: center; |
| gap: 1rem; |
| margin-bottom: 3rem; |
| } |
| |
| .badge { |
| background: rgba(88, 28, 135, 0.5); |
| color: #d8b4fe; |
| padding: 0.5rem 1rem; |
| border-radius: 1rem; |
| border: 1px solid #a855f7; |
| font-size: 0.875rem; |
| } |
| |
| |
| .stats { |
| padding: 4rem 1.5rem; |
| max-width: 1200px; |
| margin: 0 auto; |
| } |
| |
| .stats-grid { |
| display: grid; |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); |
| gap: 1.5rem; |
| } |
| |
| .stat-card { |
| background: rgba(30, 41, 59, 0.5); |
| border: 1px solid #475569; |
| backdrop-filter: blur(4px); |
| padding: 1.5rem; |
| border-radius: 0.5rem; |
| text-align: center; |
| transition: all 0.3s; |
| } |
| |
| .stat-card:hover { |
| background: rgba(30, 41, 59, 0.7); |
| } |
| |
| .stat-icon { |
| font-size: 2rem; |
| margin-bottom: 0.5rem; |
| } |
| |
| .stat-value { |
| font-size: 2rem; |
| font-weight: bold; |
| margin-bottom: 0.25rem; |
| } |
| |
| .stat-label { |
| color: #9ca3af; |
| font-size: 0.875rem; |
| } |
| |
| |
| .features { |
| padding: 4rem 1.5rem; |
| max-width: 1200px; |
| margin: 0 auto; |
| } |
| |
| .features-grid { |
| display: grid; |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); |
| gap: 1.5rem; |
| } |
| |
| .feature-card { |
| background: rgba(30, 41, 59, 0.5); |
| border: 1px solid #475569; |
| backdrop-filter: blur(4px); |
| padding: 1.5rem; |
| border-radius: 0.5rem; |
| transition: all 0.3s; |
| } |
| |
| .feature-card:hover { |
| background: rgba(30, 41, 59, 0.7); |
| } |
| |
| .feature-header { |
| display: flex; |
| align-items: flex-start; |
| gap: 1rem; |
| } |
| |
| .feature-icon { |
| font-size: 2rem; |
| flex-shrink: 0; |
| } |
| |
| .feature-content h3 { |
| font-size: 1.25rem; |
| font-weight: 600; |
| margin-bottom: 0.5rem; |
| } |
| |
| .feature-content p { |
| color: #9ca3af; |
| } |
| |
| |
| .access-section { |
| padding: 4rem 1.5rem; |
| max-width: 400px; |
| margin: 0 auto; |
| } |
| |
| .access-card { |
| background: rgba(30, 41, 59, 0.5); |
| border: 1px solid #475569; |
| backdrop-filter: blur(4px); |
| padding: 2rem; |
| border-radius: 0.5rem; |
| text-align: center; |
| transition: all 0.3s ease; |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); |
| transform: perspective(1000px) rotateX(0deg) scale(1); |
| overflow: hidden; |
| position: relative; |
| } |
| |
| .access-card::before { |
| content: ''; |
| position: absolute; |
| top: 0; |
| left: 0; |
| right: 0; |
| height: 4px; |
| background: linear-gradient(to right, #a855f7, #ec4899); |
| transform: scaleX(0); |
| transform-origin: left; |
| transition: transform 0.3s ease; |
| } |
| |
| .access-card:hover { |
| transform: perspective(1000px) rotateX(5deg) scale(1.02); |
| box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); |
| border-color: #a855f7; |
| } |
| |
| .access-card:hover::before { |
| transform: scaleX(1); |
| } |
| |
| .hovered-element { |
| transition: all 0.3s ease; |
| } |
| |
| .access-card:hover .hovered-element { |
| transform: translateY(-2px); |
| } |
| |
| .access-icon { |
| width: 64px; |
| height: 64px; |
| background: linear-gradient(to right, #a855f7, #ec4899); |
| border-radius: 50%; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| margin: 0 auto 1.5rem; |
| font-size: 2rem; |
| } |
| |
| .access-card h2 { |
| font-size: 1.5rem; |
| font-weight: bold; |
| margin-bottom: 0.5rem; |
| } |
| |
| .access-card .subtitle { |
| color: #9ca3af; |
| margin-bottom: 1.5rem; |
| } |
| |
| .benefits { |
| margin-bottom: 2rem; |
| } |
| |
| .benefit { |
| display: flex; |
| align-items: center; |
| gap: 0.75rem; |
| text-align: left; |
| margin-bottom: 0.75rem; |
| } |
| |
| .benefit .check { |
| color: #10b981; |
| font-size: 1.25rem; |
| } |
| |
| .full-width-btn { |
| width: 100%; |
| margin-bottom: 1rem; |
| } |
| |
| .security-info { |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| gap: 0.5rem; |
| font-size: 0.875rem; |
| color: #9ca3af; |
| margin-bottom: 1rem; |
| } |
| |
| .terms { |
| font-size: 0.75rem; |
| color: #6b7280; |
| margin-bottom: 1.5rem; |
| } |
| |
| .status { |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| gap: 0.5rem; |
| margin-bottom: 0.5rem; |
| } |
| |
| .status-dot { |
| width: 12px; |
| height: 12px; |
| background: #10b981; |
| border-radius: 50%; |
| } |
| |
| .status-text { |
| font-size: 0.875rem; |
| color: #9ca3af; |
| } |
| |
| .tagline { |
| font-size: 0.75rem; |
| color: #6b7280; |
| } |
| |
| @media (min-width: 768px) { |
| .nav-links { |
| display: flex; |
| } |
| |
| .hero h1 { |
| font-size: 4rem; |
| } |
| |
| .stats-grid { |
| grid-template-columns: repeat(4, 1fr); |
| } |
| |
| .features-grid { |
| grid-template-columns: repeat(2, 1fr); |
| } |
| } |
| |
| .icon-svg { |
| width: 1em; |
| height: 1em; |
| display: inline-block; |
| vertical-align: middle; |
| } |
| |
| .stat-icon .icon-svg { |
| width: 2rem; |
| height: 2rem; |
| } |
| |
| .feature-icon .icon-svg { |
| width: 2rem; |
| height: 2rem; |
| } |
| |
| .access-icon .icon-svg { |
| width: 2rem; |
| height: 2rem; |
| } |
| </style> |
| </head> |
| <body> |
| <div class="stars"></div> |
| |
| <div class="container"> |
| |
| <header> |
| <nav> |
| <div class="logo"> |
| <div class="logo-icon"> |
| <img src="https://i.postimg.cc/Gm6cPWkT/image.png" alt="JackOliva Logo" /> |
| </div> |
| <span class="logo-text">Jack<span class="logo-accent">Oliva</span></span> |
| </div> |
| |
| |
| </nav> |
| </header> |
|
|
| |
| <section class="hero"> |
| <h1>Jack<span class="logo-accent">Oliva</span></h1> |
| <p>The ultimate <span class="logo-accent">futuristic platform</span> for elite developers. Access cutting-edge tools and join an exclusive Discord community.</p> |
| |
| <div class="badges"> |
| <span class="badge"><i data-lucide="star" class="icon-svg"></i> Premium Access</span> |
| <span class="badge"><i data-lucide="trophy" class="icon-svg"></i> Elite Community</span> |
| <span class="badge"><i data-lucide="wrench" class="icon-svg"></i> Advanced Tools</span> |
| </div> |
| |
| <button class="btn" onclick="scrollToAccess()">Join the Platform</button> |
| </section> |
|
|
| |
| <section class="stats"> |
| <div class="stats-grid"> |
| <div class="stat-card"> |
| <div class="stat-icon"><i data-lucide="users" class="icon-svg"></i></div> |
| <div class="stat-value">12.8K+</div> |
| <div class="stat-label">Active Users</div> |
| </div> |
| <div class="stat-card"> |
| <div class="stat-icon"><i data-lucide="wrench" class="icon-svg"></i></div> |
| <div class="stat-value">47+</div> |
| <div class="stat-label">Tools Available</div> |
| </div> |
| <div class="stat-card"> |
| <div class="stat-icon"><i data-lucide="zap" class="icon-svg"></i></div> |
| <div class="stat-value">99.9%</div> |
| <div class="stat-label">Uptime</div> |
| </div> |
| <div class="stat-card"> |
| <div class="stat-icon"><i data-lucide="globe" class="icon-svg"></i></div> |
| <div class="stat-value">156</div> |
| <div class="stat-label">Countries</div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="features"> |
| <div class="features-grid"> |
| <div class="feature-card"> |
| <div class="feature-header"> |
| <div class="feature-icon" style="color: #a855f7;"><i data-lucide="settings" class="icon-svg"></i></div> |
| <div class="feature-content"> |
| <h3>Advanced Tools</h3> |
| <p>Hyper-scale commands, faster generations, and more</p> |
| </div> |
| </div> |
| </div> |
| <div class="feature-card"> |
| <div class="feature-header"> |
| <div class="feature-icon" style="color: #ef4444;"><i data-lucide="shield" class="icon-svg"></i></div> |
| <div class="feature-content"> |
| <h3>Security Suite</h3> |
| <p>Password generators, JWT decoders, encryption tools</p> |
| </div> |
| </div> |
| </div> |
| <div class="feature-card"> |
| <div class="feature-header"> |
| <div class="feature-icon" style="color: #3b82f6;"><i data-lucide="network" class="icon-svg"></i></div> |
| <div class="feature-content"> |
| <h3>Network Tools</h3> |
| <p>IP lookup, DNS checker, port scanner monitoring</p> |
| </div> |
| </div> |
| </div> |
| <div class="feature-card"> |
| <div class="feature-header"> |
| <div class="feature-icon" style="color: #10b981;"><i data-lucide="terminal" class="icon-svg"></i></div> |
| <div class="feature-content"> |
| <h3>Developer Console</h3> |
| <p>Custom analytics tool, schema monitoring</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="access-section" id="access"> |
| <div class="access-card"> |
| <div class="access-icon"><i data-lucide="shield" class="icon-svg"></i></div> |
| |
| <h2>Secure Access</h2> |
| <p class="subtitle">Discord authentication required for exclusive access</p> |
| |
| <div class="benefits"> |
| <div class="benefit"> |
| <span class="check"><i data-lucide="check" class="icon-svg" style="color: #10b981;"></i></span> |
| <span>End-to-end encrypted sessions</span> |
| </div> |
| <div class="benefit"> |
| <span class="check"><i data-lucide="check" class="icon-svg" style="color: #10b981;"></i></span> |
| <span>Discord server verification</span> |
| </div> |
| <div class="benefit"> |
| <span class="check"><i data-lucide="check" class="icon-svg" style="color: #10b981;"></i></span> |
| <span>Premium member benefits</span> |
| </div> |
| </div> |
| |
| <a href="https://discord.gg/3MkdY4UjeM" target="_blank" rel="noopener noreferrer" class="btn full-width-btn">Continue with Discord</a> |
| |
| <div class="security-info"> |
| <span><i data-lucide="shield" class="icon-svg"></i></span> |
| <span>Secure OAuth 2.0 Authentication</span> |
| </div> |
| |
| <p class="terms"> |
| By continuing, you agree to our Terms of Service and acknowledge |
| that you've read our Privacy Policy. You must be 13 or older to |
| use the platform. |
| </p> |
| |
| <div class="status"> |
| <div class="status-dot"></div> |
| <span class="status-text">Jack 668</span> |
| </div> |
| <p class="tagline">Master Fullstack Development</p> |
| </div> |
| </section> |
| </div> |
|
|
| <script> |
| |
| lucide.createIcons(); |
| |
| function scrollToAccess() { |
| document.getElementById('access').scrollIntoView({ |
| behavior: 'smooth' |
| }); |
| } |
| |
| function connectDiscord() { |
| alert('Discord authentication would be implemented here!'); |
| } |
| |
| |
| document.addEventListener('DOMContentLoaded', function() { |
| |
| const observerOptions = { |
| threshold: 0.1, |
| rootMargin: '0px 0px -50px 0px' |
| }; |
| |
| const observer = new IntersectionObserver((entries) => { |
| entries.forEach(entry => { |
| if (entry.isIntersecting) { |
| entry.target.style.transform = 'translateY(0)'; |
| entry.target.style.opacity = '1'; |
| |
| if (entry.target.classList.contains('access-card')) { |
| entry.target.style.animation = 'cardAppear 0.8s ease forwards'; |
| } |
| } |
| }); |
| }, observerOptions); |
| |
| |
| document.querySelectorAll('.stat-card, .feature-card, .access-card').forEach(card => { |
| card.style.transform = 'translateY(20px)'; |
| card.style.opacity = '0'; |
| card.style.transition = 'all 0.6s ease'; |
| observer.observe(card); |
| }); |
| }); |
| |
| |
| const style = document.createElement('style'); |
| style.textContent = ` |
| @keyframes cardAppear { |
| 0% { |
| transform: translateY(20px) scale(0.95); |
| opacity: 0; |
| } |
| 50% { |
| opacity: 1; |
| } |
| 100% { |
| transform: translateY(0) scale(1); |
| opacity: 1; |
| } |
| } |
| |
| @keyframes gradientPulse { |
| 0% { |
| background-position: 0% 50%; |
| } |
| 50% { |
| background-position: 100% 50%; |
| } |
| 100% { |
| background-position: 0% 50%; |
| } |
| } |
| `; |
| document.head.appendChild(style); |
| </script> |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=dlma/jack" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
