|
|
<!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> |
