|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>TMT — Traffic Monsters Team</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script src="https://unpkg.com/typewriter-effect@latest/dist/core.js"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<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;600;700&family=JetBrains+Mono:wght@100;200;300;400;500;600;700;800&display=swap" rel="stylesheet"> |
|
|
<style> |
|
|
:root { |
|
|
--matrix-green: #00FF41; |
|
|
--matrix-dark: #000000; |
|
|
--matrix-light: #0D0208; |
|
|
--matrix-blue: #0066FF; |
|
|
--matrix-red: #FF0033; |
|
|
} |
|
|
|
|
|
body { |
|
|
font-family: 'JetBrains Mono', monospace; |
|
|
background-color: var(--matrix-dark); |
|
|
color: white; |
|
|
overflow-x: hidden; |
|
|
cursor: none; |
|
|
} |
|
|
|
|
|
h1, h2, h3, h4, h5, h6 { |
|
|
font-family: 'Space Grotesk', sans-serif; |
|
|
} |
|
|
|
|
|
.matrix-bg { |
|
|
position: fixed; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
background: var(--matrix-dark); |
|
|
z-index: -2; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.matrix-code { |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
opacity: 0.15; |
|
|
z-index: -1; |
|
|
} |
|
|
|
|
|
.matrix-char { |
|
|
color: var(--matrix-green); |
|
|
text-shadow: 0 0 5px var(--matrix-green); |
|
|
opacity: 0; |
|
|
animation: fall linear forwards; |
|
|
} |
|
|
|
|
|
@keyframes fall { |
|
|
to { |
|
|
transform: translateY(100vh); |
|
|
opacity: 1; |
|
|
} |
|
|
} |
|
|
|
|
|
.neon-border { |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.neon-border::before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: -2px; |
|
|
left: -2px; |
|
|
right: -2px; |
|
|
bottom: -2px; |
|
|
border: 2px solid var(--matrix-green); |
|
|
border-radius: inherit; |
|
|
z-index: -1; |
|
|
opacity: 0; |
|
|
transition: opacity 0.3s, box-shadow 0.3s; |
|
|
} |
|
|
|
|
|
.neon-border:hover::before { |
|
|
opacity: 1; |
|
|
box-shadow: 0 0 10px var(--matrix-green), 0 0 20px var(--matrix-green); |
|
|
} |
|
|
|
|
|
.glow-text { |
|
|
text-shadow: 0 0 5px var(--matrix-green); |
|
|
} |
|
|
|
|
|
.custom-cursor { |
|
|
width: 20px; |
|
|
height: 20px; |
|
|
border-radius: 50%; |
|
|
background-color: var(--matrix-green); |
|
|
position: fixed; |
|
|
pointer-events: none; |
|
|
mix-blend-mode: difference; |
|
|
z-index: 9999; |
|
|
transform: translate(-50%, -50%); |
|
|
} |
|
|
|
|
|
.cursor-trail { |
|
|
position: fixed; |
|
|
width: 10px; |
|
|
height: 10px; |
|
|
border-radius: 50%; |
|
|
background-color: var(--matrix-green); |
|
|
pointer-events: none; |
|
|
z-index: 9998; |
|
|
opacity: 0.6; |
|
|
transform: translate(-50%, -50%); |
|
|
} |
|
|
|
|
|
.code-typing { |
|
|
font-family: 'JetBrains Mono', monospace; |
|
|
color: var(--matrix-green); |
|
|
} |
|
|
|
|
|
.avatar-glow { |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.avatar-glow::after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
right: 0; |
|
|
bottom: 0; |
|
|
border-radius: 50%; |
|
|
background: radial-gradient(circle, transparent 50%, var(--matrix-green) 150%); |
|
|
opacity: 0; |
|
|
transition: opacity 0.3s; |
|
|
z-index: -1; |
|
|
} |
|
|
|
|
|
.avatar-glow:hover::after { |
|
|
opacity: 0.3; |
|
|
} |
|
|
|
|
|
.data-node { |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.data-node::before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: -5px; |
|
|
left: -5px; |
|
|
right: -5px; |
|
|
bottom: -5px; |
|
|
border: 1px solid var(--matrix-green); |
|
|
border-radius: 4px; |
|
|
opacity: 0; |
|
|
transition: opacity 0.3s; |
|
|
} |
|
|
|
|
|
.data-node:hover::before { |
|
|
opacity: 0.5; |
|
|
} |
|
|
|
|
|
.terminal-flicker { |
|
|
animation: flicker 0.5s infinite alternate; |
|
|
} |
|
|
|
|
|
@keyframes flicker { |
|
|
0%, 19.999%, 22%, 62.999%, 64%, 64.999%, 70%, 100% { |
|
|
opacity: 1; |
|
|
} |
|
|
20%, 21.999%, 63%, 63.999%, 65%, 69.999% { |
|
|
opacity: 0.4; |
|
|
} |
|
|
} |
|
|
|
|
|
.hologram-effect { |
|
|
transition: transform 0.3s, filter 0.3s; |
|
|
} |
|
|
|
|
|
.hologram-effect:hover { |
|
|
transform: translateY(-5px); |
|
|
filter: drop-shadow(0 5px 10px var(--matrix-green)); |
|
|
} |
|
|
|
|
|
.magnetic-button { |
|
|
transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); |
|
|
} |
|
|
|
|
|
.magnetic-button:hover { |
|
|
transform: scale(1.05); |
|
|
} |
|
|
|
|
|
.crt-effect { |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.crt-effect::after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
right: 0; |
|
|
bottom: 0; |
|
|
background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), |
|
|
linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06)); |
|
|
background-size: 100% 2px, 3px 100%; |
|
|
pointer-events: none; |
|
|
} |
|
|
|
|
|
.scroll-top { |
|
|
position: fixed; |
|
|
bottom: 30px; |
|
|
right: 30px; |
|
|
width: 50px; |
|
|
height: 50px; |
|
|
border-radius: 50%; |
|
|
background-color: rgba(0, 255, 65, 0.2); |
|
|
display: flex; |
|
|
justify-content: center; |
|
|
align-items: center; |
|
|
cursor: pointer; |
|
|
transition: all 0.3s; |
|
|
z-index: 99; |
|
|
} |
|
|
|
|
|
.scroll-top:hover { |
|
|
background-color: rgba(0, 255, 65, 0.4); |
|
|
box-shadow: 0 0 15px var(--matrix-green); |
|
|
} |
|
|
|
|
|
.scroll-top i { |
|
|
color: var(--matrix-green); |
|
|
font-size: 20px; |
|
|
} |
|
|
|
|
|
.section-divider { |
|
|
height: 1px; |
|
|
background: linear-gradient(90deg, transparent, var(--matrix-green), transparent); |
|
|
margin: 100px 0; |
|
|
} |
|
|
|
|
|
|
|
|
.matrix-rain { |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
overflow: hidden; |
|
|
z-index: -1; |
|
|
} |
|
|
|
|
|
.matrix-column { |
|
|
position: relative; |
|
|
float: left; |
|
|
width: 2ch; |
|
|
height: 100%; |
|
|
font-size: 16px; |
|
|
writing-mode: vertical-rl; |
|
|
text-orientation: mixed; |
|
|
} |
|
|
|
|
|
.matrix-digit { |
|
|
color: var(--matrix-green); |
|
|
text-shadow: 0 0 8px var(--matrix-green); |
|
|
opacity: 0; |
|
|
animation: matrix-fall linear infinite; |
|
|
} |
|
|
|
|
|
@keyframes matrix-fall { |
|
|
0% { |
|
|
transform: translateY(-100px); |
|
|
opacity: 1; |
|
|
} |
|
|
100% { |
|
|
transform: translateY(100vh); |
|
|
opacity: 0; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.history-terminal { |
|
|
background-color: rgba(0, 0, 0, 0.7); |
|
|
border: 1px solid var(--matrix-green); |
|
|
padding: 30px; |
|
|
position: relative; |
|
|
font-family: 'JetBrains Mono', monospace; |
|
|
} |
|
|
|
|
|
.history-terminal::before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
right: 0; |
|
|
bottom: 0; |
|
|
background: |
|
|
linear-gradient(rgba(0, 255, 65, 0.1) 1px, transparent 1px), |
|
|
linear-gradient(90deg, rgba(0, 255, 65, 0.1) 1px, transparent 1px); |
|
|
background-size: 20px 20px; |
|
|
pointer-events: none; |
|
|
} |
|
|
|
|
|
.terminal-header { |
|
|
color: var(--matrix-green); |
|
|
border-bottom: 1px solid var(--matrix-green); |
|
|
padding-bottom: 10px; |
|
|
margin-bottom: 20px; |
|
|
font-size: 1.2rem; |
|
|
} |
|
|
|
|
|
.terminal-line { |
|
|
margin-bottom: 15px; |
|
|
position: relative; |
|
|
padding-left: 30px; |
|
|
} |
|
|
|
|
|
.terminal-line::before { |
|
|
content: '>'; |
|
|
position: absolute; |
|
|
left: 10px; |
|
|
color: var(--matrix-green); |
|
|
} |
|
|
|
|
|
.terminal-text { |
|
|
color: white; |
|
|
line-height: 1.6; |
|
|
} |
|
|
|
|
|
.terminal-text span { |
|
|
color: var(--matrix-green); |
|
|
font-weight: bold; |
|
|
} |
|
|
|
|
|
.terminal-cursor { |
|
|
display: inline-block; |
|
|
width: 10px; |
|
|
height: 20px; |
|
|
background-color: var(--matrix-green); |
|
|
animation: blink 1s infinite; |
|
|
vertical-align: middle; |
|
|
margin-left: 5px; |
|
|
} |
|
|
|
|
|
@keyframes blink { |
|
|
0%, 100% { opacity: 1; } |
|
|
50% { opacity: 0; } |
|
|
} |
|
|
|
|
|
|
|
|
.pill-container { |
|
|
position: fixed; |
|
|
bottom: 30px; |
|
|
left: 50%; |
|
|
transform: translateX(-50%); |
|
|
display: flex; |
|
|
gap: 30px; |
|
|
z-index: 100; |
|
|
} |
|
|
|
|
|
.pill-button { |
|
|
width: 120px; |
|
|
height: 40px; |
|
|
border-radius: 20px; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
font-weight: bold; |
|
|
font-size: 14px; |
|
|
text-transform: uppercase; |
|
|
letter-spacing: 1px; |
|
|
cursor: pointer; |
|
|
transition: all 0.3s ease; |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); |
|
|
} |
|
|
|
|
|
.pill-button::before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: -10px; |
|
|
left: -10px; |
|
|
right: -10px; |
|
|
bottom: -10px; |
|
|
border-radius: 30px; |
|
|
opacity: 0; |
|
|
transition: opacity 0.3s; |
|
|
} |
|
|
|
|
|
.pill-button:hover::before { |
|
|
opacity: 0.3; |
|
|
} |
|
|
|
|
|
.blue-pill { |
|
|
background-color: var(--matrix-blue); |
|
|
color: white; |
|
|
border: 1px solid var(--matrix-blue); |
|
|
} |
|
|
|
|
|
.blue-pill::before { |
|
|
background: radial-gradient(circle, rgba(0, 102, 255, 0.8), transparent 70%); |
|
|
} |
|
|
|
|
|
.blue-pill:hover { |
|
|
box-shadow: 0 0 20px var(--matrix-blue); |
|
|
transform: translateY(-3px); |
|
|
} |
|
|
|
|
|
.red-pill { |
|
|
background-color: var(--matrix-red); |
|
|
color: white; |
|
|
border: 1px solid var(--matrix-red); |
|
|
} |
|
|
|
|
|
.red-pill::before { |
|
|
background: radial-gradient(circle, rgba(255, 0, 51, 0.8), transparent 70%); |
|
|
} |
|
|
|
|
|
.red-pill:hover { |
|
|
box-shadow: 0 0 20px var(--matrix-red); |
|
|
transform: translateY(-3px); |
|
|
} |
|
|
|
|
|
.pill-glow { |
|
|
position: absolute; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
border-radius: 20px; |
|
|
opacity: 0; |
|
|
transition: opacity 0.3s; |
|
|
} |
|
|
|
|
|
.pill-button:hover .pill-glow { |
|
|
opacity: 0.6; |
|
|
} |
|
|
|
|
|
.blue-glow { |
|
|
box-shadow: 0 0 15px var(--matrix-blue); |
|
|
} |
|
|
|
|
|
.red-glow { |
|
|
box-shadow: 0 0 15px var(--matrix-red); |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
|
|
|
<div class="matrix-bg" id="matrixBg"></div> |
|
|
|
|
|
|
|
|
<div class="matrix-rain" id="matrixRain"></div> |
|
|
|
|
|
|
|
|
<div class="custom-cursor" id="cursor"></div> |
|
|
|
|
|
|
|
|
<div class="scroll-top" id="scrollTop"> |
|
|
<i class="fas fa-arrow-up"></i> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="pill-container"> |
|
|
<div class="pill-button blue-pill"> |
|
|
<div class="pill-glow blue-glow"></div> |
|
|
Blue Pill |
|
|
</div> |
|
|
<div class="pill-button red-pill"> |
|
|
<div class="pill-glow red-glow"></div> |
|
|
Red Pill |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<section class="min-h-screen flex items-center justify-center relative overflow-hidden crt-effect"> |
|
|
<div class="container mx-auto px-6 py-20 text-center relative z-10"> |
|
|
<h1 class="text-6xl md:text-8xl font-bold mb-6 glow-text"> |
|
|
<span class="text-white">TMT</span> |
|
|
<span class="text-[#00FF41]">—</span> |
|
|
<span class="text-white">TRAFFIC MONSTERS TEAM</span> |
|
|
</h1> |
|
|
<p class="text-xl md:text-2xl mb-12 text-gray-300 terminal-flicker"> |
|
|
We decode markets. We rewire performance. |
|
|
</p> |
|
|
<div class="flex flex-col md:flex-row gap-4 justify-center"> |
|
|
<a href="#" class="bg-[#00FF41] text-black font-bold py-3 px-8 rounded-none magnetic-button hover:bg-opacity-80 transition-all duration-300 relative overflow-hidden group"> |
|
|
<span class="relative z-10">Enter the Network</span> |
|
|
<span class="absolute inset-0 bg-black opacity-0 group-hover:opacity-10 transition-opacity duration-300"></span> |
|
|
</a> |
|
|
<a href="#" class="border border-[#00FF41] text-[#00FF41] font-bold py-3 px-8 rounded-none magnetic-button hover:bg-[#00FF41] hover:bg-opacity-10 transition-all duration-300 relative overflow-hidden neon-border"> |
|
|
<span class="relative z-10">View Case Studies</span> |
|
|
<span class="absolute inset-0 bg-[#00FF41] opacity-0 group-hover:opacity-5 transition-opacity duration-300"></span> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-20 relative overflow-hidden"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<div class="history-terminal max-w-4xl mx-auto"> |
|
|
<div class="terminal-header">TMT_HISTORY.TXT</div> |
|
|
|
|
|
<div class="terminal-line"> |
|
|
<div class="terminal-text"> |
|
|
<span>INITIALIZING TMT CORE PROTOCOLS...</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="terminal-line"> |
|
|
<div class="terminal-text"> |
|
|
<span>YEAR 2018:</span> First traces of TMT detected in the digital ecosystem. A small group of performance hackers begins rewriting traffic acquisition algorithms. |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="terminal-line"> |
|
|
<div class="terminal-text"> |
|
|
<span>YEAR 2020:</span> The collective evolves into a decentralized network. First major breakthrough - cracking the Facebook ad algorithm during pandemic market shifts. |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="terminal-line"> |
|
|
<div class="terminal-text"> |
|
|
<span>YEAR 2022:</span> Full operational capacity achieved. TMT now controls traffic flows across 15+ ecosystems. $1M/month in managed spend becomes standard. |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="terminal-line"> |
|
|
<div class="terminal-text"> |
|
|
<span>CORE VALUES:</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="terminal-line"> |
|
|
<div class="terminal-text"> |
|
|
<span>></span> <span>PERFORMANCE IS TRUTH:</span> Data over opinions. We follow the numbers wherever they lead. |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="terminal-line"> |
|
|
<div class="terminal-text"> |
|
|
<span>></span> <span>ADAPT OR DIE:</span> Market conditions change hourly. Our systems evolve in real-time. |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="terminal-line"> |
|
|
<div class="terminal-text"> |
|
|
<span>></span> <span>CONTROL THE FLOW:</span> Traffic is the lifeblood of digital. We don't just buy it - we engineer it. |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="terminal-line"> |
|
|
<div class="terminal-text"> |
|
|
<span>MISSION STATEMENT:</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="terminal-line"> |
|
|
<div class="terminal-text"> |
|
|
To dominate performance marketing through algorithmic precision, infrastructure hacking, and relentless optimization. We exist to push the boundaries of what's possible in traffic acquisition. |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="terminal-line"> |
|
|
<div class="terminal-text"> |
|
|
<span>END OF FILE</span><span class="terminal-cursor"></span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-20 relative overflow-hidden"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<h2 class="text-4xl md:text-5xl font-bold mb-16 text-center glow-text"> |
|
|
<span class="text-[#00FF41]">WHAT</span> WE CONTROL |
|
|
</h2> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="data-node p-8 border border-gray-800 hover:border-[#00FF41] transition-all duration-300"> |
|
|
<div class="text-[#00FF41] text-4xl mb-4"> |
|
|
<i class="fas fa-chart-line"></i> |
|
|
</div> |
|
|
<h3 class="text-2xl font-bold mb-3">Traffic Scaling</h3> |
|
|
<p class="text-gray-400"> |
|
|
FB, TikTok, Google, Push, Native - we dominate all channels with surgical precision. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="data-node p-8 border border-gray-800 hover:border-[#00FF41] transition-all duration-300"> |
|
|
<div class="text-[#00FF41] text-4xl mb-4"> |
|
|
<i class="fas fa-map-marked-alt"></i> |
|
|
</div> |
|
|
<h3 class="text-2xl font-bold mb-3">Strategic Offer Mapping</h3> |
|
|
<p class="text-gray-400"> |
|
|
Algorithmic matching of offers to traffic sources for maximum conversion efficiency. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="data-node p-8 border border-gray-800 hover:border-[#00FF41] transition-all duration-300"> |
|
|
<div class="text-[#00FF41] text-4xl mb-4"> |
|
|
<i class="fas fa-server"></i> |
|
|
</div> |
|
|
<h3 class="text-2xl font-bold mb-3">Infrastructure Hacking</h3> |
|
|
<p class="text-gray-400"> |
|
|
Keitaro, API networks, custom tracking solutions - we build the tools that others copy. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="data-node p-8 border border-gray-800 hover:border-[#00FF41] transition-all duration-300"> |
|
|
<div class="text-[#00FF41] text-4xl mb-4"> |
|
|
<i class="fas fa-video"></i> |
|
|
</div> |
|
|
<h3 class="text-2xl font-bold mb-3">Creative Labs</h3> |
|
|
<p class="text-gray-400"> |
|
|
Video, UGC, Deepfake modules - our creatives outperform industry benchmarks by 300%. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="data-node p-8 border border-gray-800 hover:border-[#00FF41] transition-all duration-300"> |
|
|
<div class="text-[#00FF41] text-4xl mb-4"> |
|
|
<i class="fas fa-handshake"></i> |
|
|
</div> |
|
|
<h3 class="text-2xl font-bold mb-3">Direct Advertiser Integrations</h3> |
|
|
<p class="text-gray-400"> |
|
|
White-glove service for brands seeking direct access to premium traffic flows. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="data-node p-8 border border-gray-800 hover:border-[#00FF41] transition-all duration-300"> |
|
|
<div class="text-[#00FF41] text-4xl mb-4"> |
|
|
<i class="fas fa-brain"></i> |
|
|
</div> |
|
|
<h3 class="text-2xl font-bold mb-3">Data Science</h3> |
|
|
<p class="text-gray-400"> |
|
|
Predictive analytics and machine learning models that anticipate market shifts. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-20 relative overflow-hidden"> |
|
|
<div class="section-divider"></div> |
|
|
<div class="container mx-auto px-6"> |
|
|
<h2 class="text-4xl md:text-5xl font-bold mb-16 text-center glow-text"> |
|
|
<span class="text-[#00FF41]">TMT</span> IN NUMBERS |
|
|
</h2> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"> |
|
|
<div class="text-center"> |
|
|
<div class="text-5xl md:text-6xl font-bold mb-4 text-[#00FF41] code-typing" id="counter1">0</div> |
|
|
<p class="text-gray-400 uppercase text-sm tracking-widest">USD IN MANAGED TRAFFIC</p> |
|
|
</div> |
|
|
|
|
|
<div class="text-center"> |
|
|
<div class="text-5xl md:text-6xl font-bold mb-4 text-[#00FF41] code-typing" id="counter2">0</div> |
|
|
<p class="text-gray-400 uppercase text-sm tracking-widest">TEAM SPECIALISTS</p> |
|
|
</div> |
|
|
|
|
|
<div class="text-center"> |
|
|
<div class="text-5xl md:text-6xl font-bold mb-4 text-[#00FF41] code-typing" id="counter3">0</div> |
|
|
<p class="text-gray-400 uppercase text-sm tracking-widest">OFFERS ROTATED</p> |
|
|
</div> |
|
|
|
|
|
<div class="text-center"> |
|
|
<div class="text-5xl md:text-6xl font-bold mb-4 text-[#00FF41] code-typing" id="counter4">0</div> |
|
|
<p class="text-gray-400 uppercase text-sm tracking-widest">TRAFFIC ECOSYSTEMS</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="section-divider"></div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-20 relative overflow-hidden"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<h2 class="text-4xl md:text-5xl font-bold mb-16 text-center glow-text"> |
|
|
<span class="text-[#00FF41]">TMT</span> MISSIONS |
|
|
</h2> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="border border-gray-800 hover:border-[#00FF41] transition-all duration-300 group"> |
|
|
<div class="p-6"> |
|
|
<div class="flex justify-between items-start mb-4"> |
|
|
<h3 class="text-xl font-bold group-hover:text-[#00FF41] transition-colors duration-300">Gambling Vertical</h3> |
|
|
<span class="text-[#00FF41] text-sm">EUROPE</span> |
|
|
</div> |
|
|
<div class="mb-4"> |
|
|
<p class="text-gray-400 text-sm mb-2">Traffic Source: <span class="text-white">Facebook</span></p> |
|
|
<p class="text-gray-400 text-sm mb-2">Duration: <span class="text-white">90 days</span></p> |
|
|
</div> |
|
|
<div class="grid grid-cols-3 gap-2 mb-4"> |
|
|
<div class="text-center"> |
|
|
<p class="text-[#00FF41] text-xl font-bold">4.2%</p> |
|
|
<p class="text-gray-400 text-xs">CTR</p> |
|
|
</div> |
|
|
<div class="text-center"> |
|
|
<p class="text-[#00FF41] text-xl font-bold">12.7%</p> |
|
|
<p class="text-gray-400 text-xs">CR</p> |
|
|
</div> |
|
|
<div class="text-center"> |
|
|
<p class="text-[#00FF41] text-xl font-bold">3.8x</p> |
|
|
<p class="text-gray-400 text-xs">ROI</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="h-40 bg-gray-900 mb-4 flex items-center justify-center terminal-flicker"> |
|
|
<span class="text-gray-600">[creative preview]</span> |
|
|
</div> |
|
|
<button class="w-full py-2 border border-[#00FF41] text-[#00FF41] hover:bg-[#00FF41] hover:text-black transition-all duration-300"> |
|
|
DECRYPT DETAILS |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="border border-gray-800 hover:border-[#00FF41] transition-all duration-300 group"> |
|
|
<div class="p-6"> |
|
|
<div class="flex justify-between items-start mb-4"> |
|
|
<h3 class="text-xl font-bold group-hover:text-[#00FF41] transition-colors duration-300">Nutra Vertical</h3> |
|
|
<span class="text-[#00FF41] text-sm">USA</span> |
|
|
</div> |
|
|
<div class="mb-4"> |
|
|
<p class="text-gray-400 text-sm mb-2">Traffic Source: <span class="text-white">Native</span></p> |
|
|
<p class="text-gray-400 text-sm mb-2">Duration: <span class="text-white">45 days</span></p> |
|
|
</div> |
|
|
<div class="grid grid-cols-3 gap-2 mb-4"> |
|
|
<div class="text-center"> |
|
|
<p class="text-[#00FF41] text-xl font-bold">2.8%</p> |
|
|
<p class="text-gray-400 text-xs">CTR</p> |
|
|
</div> |
|
|
<div class="text-center"> |
|
|
<p class="text-[#00FF41] text-xl font-bold">8.3%</p> |
|
|
<p class="text-gray-400 text-xs">CR</p> |
|
|
</div> |
|
|
<div class="text-center"> |
|
|
<p class="text-[#00FF41] text-xl font-bold">5.2x</p> |
|
|
<p class="text-gray-400 text-xs">ROI</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="h-40 bg-gray-900 mb-4 flex items-center justify-center terminal-flicker"> |
|
|
<span class="text-gray-600">[creative preview]</span> |
|
|
</div> |
|
|
<button class="w-full py-2 border border-[#00FF41] text-[#00FF41] hover:bg-[#00FF41] hover:text-black transition-all duration-300"> |
|
|
DECRYPT DETAILS |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="border border-gray-800 hover:border-[#00FF41] transition-all duration-300 group"> |
|
|
<div class="p-6"> |
|
|
<div class="flex justify-between items-start mb-4"> |
|
|
<h3 class="text-xl font-bold group-hover:text-[#00FF41] transition-colors duration-300">Finance Vertical</h3> |
|
|
<span class="text-[#00FF41] text-sm">ASIA</span> |
|
|
</div> |
|
|
<div class="mb-4"> |
|
|
<p class="text-gray-400 text-sm mb-2">Traffic Source: <span class="text-white">Google</span></p> |
|
|
<p class="text-gray-400 text-sm mb-2">Duration: <span class="text-white">60 days</span></p> |
|
|
</div> |
|
|
<div class="grid grid-cols-3 gap-2 mb-4"> |
|
|
<div class="text-center"> |
|
|
<p class="text-[#00FF41] text-xl font-bold">3.5%</p> |
|
|
<p class="text-gray-400 text-xs">CTR</p> |
|
|
</div> |
|
|
<div class="text-center"> |
|
|
<p class="text-[#00FF41] text-xl font-bold">15.1%</p> |
|
|
<p class="text-gray-400 text-xs">CR</p> |
|
|
</div> |
|
|
<div class="text-center"> |
|
|
<p class="text-[#00FF41] text-xl font-bold">4.1x</p> |
|
|
<p class="text-gray-400 text-xs">ROI</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="h-40 bg-gray-900 mb-4 flex items-center justify-center terminal-flicker"> |
|
|
<span class="text-gray-600">[creative preview]</span> |
|
|
</div> |
|
|
<button class="w-full py-2 border border-[#00FF41] text-[#00FF41] hover:bg-[#00FF41] hover:text-black transition-all duration-300"> |
|
|
DECRYPT DETAILS |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-20 relative overflow-hidden"> |
|
|
<div class="section-divider"></div> |
|
|
<div class="container mx-auto px-6"> |
|
|
<div class="flex flex-col lg:flex-row items-center gap-12"> |
|
|
<div class="lg:w-1/3 relative"> |
|
|
<div class="w-full h-96 bg-gray-900 relative overflow-hidden group"> |
|
|
<div class="absolute inset-0 bg-[#00FF41] opacity-0 group-hover:opacity-5 transition-opacity duration-500"></div> |
|
|
<div class="absolute inset-0 flex items-center justify-center terminal-flicker"> |
|
|
<span class="text-gray-600">[founder image]</span> |
|
|
</div> |
|
|
<div class="absolute bottom-0 left-0 right-0 h-1 bg-[#00FF41] transform origin-left scale-x-0 group-hover:scale-x-100 transition-transform duration-500"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="lg:w-2/3"> |
|
|
<h2 class="text-4xl md:text-5xl font-bold mb-8 glow-text"> |
|
|
<span class="text-[#00FF41]">TIMUR</span> — ORCHESTRATOR |
|
|
</h2> |
|
|
<p class="text-gray-300 mb-6 leading-relaxed"> |
|
|
Architect of decentralized performance domination. Timur founded TMT with a singular vision: to create the most efficient traffic acquisition machine in the digital ecosystem. |
|
|
</p> |
|
|
<p class="text-gray-300 mb-6 leading-relaxed"> |
|
|
With over a decade in performance marketing, Timur has personally scaled campaigns to seven-figure monthly spends across every major vertical and GEO. His strategic frameworks are now implemented by the entire TMT operator network. |
|
|
</p> |
|
|
<div class="flex gap-4"> |
|
|
<a href="#" class="border border-[#00FF41] text-[#00FF41] px-6 py-2 flex items-center gap-2 hover:bg-[#00FF41] hover:text-black transition-all duration-300"> |
|
|
<i class="fab fa-instagram"></i> Instagram |
|
|
</a> |
|
|
<a href="#" class="border border-[#00FF41] text-[#00FF41] px-6 py-2 flex items-center gap-2 hover:bg-[#00FF41] hover:text-black transition-all duration-300"> |
|
|
<i class="fab fa-youtube"></i> YouTube Interview |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="section-divider"></div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-20 relative overflow-hidden"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<h2 class="text-4xl md:text-5xl font-bold mb-16 text-center glow-text"> |
|
|
THE <span class="text-[#00FF41]">OPERATORS</span> |
|
|
</h2> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"> |
|
|
|
|
|
<div class="text-center group"> |
|
|
<div class="w-32 h-32 mx-auto mb-6 rounded-full bg-gray-900 relative overflow-hidden avatar-glow"> |
|
|
<div class="absolute inset-0 flex items-center justify-center terminal-flicker"> |
|
|
<span class="text-gray-600">[avatar]</span> |
|
|
</div> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-1 group-hover:text-[#00FF41] transition-colors duration-300">@roi_architect</h3> |
|
|
<p class="text-gray-400 text-sm">Facebook Conqueror</p> |
|
|
<div class="mt-4 h-px bg-gray-800 w-1/2 mx-auto group-hover:bg-[#00FF41] transition-colors duration-300"></div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="text-center group"> |
|
|
<div class="w-32 h-32 mx-auto mb-6 rounded-full bg-gray-900 relative overflow-hidden avatar-glow"> |
|
|
<div class="absolute inset-0 flex items-center justify-center terminal-flicker"> |
|
|
<span class="text-gray-600">[avatar]</span> |
|
|
</div> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-1 group-hover:text-[#00FF41] transition-colors duration-300">@traffic_necromancer</h3> |
|
|
<p class="text-gray-400 text-sm">Multi-GEO Master</p> |
|
|
<div class="mt-4 h-px bg-gray-800 w-1/2 mx-auto group-hover:bg-[#00FF41] transition-colors duration-300"></div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="text-center group"> |
|
|
<div class="w-32 h-32 mx-auto mb-6 rounded-full bg-gray-900 relative overflow-hidden avatar-glow"> |
|
|
<div class="absolute inset-0 flex items-center justify-center terminal-flicker"> |
|
|
<span class="text-gray-600">[avatar]</span> |
|
|
</div> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-1 group-hover:text-[#00FF41] transition-colors duration-300">@bm_blacksmith</h3> |
|
|
<p class="text-gray-400 text-sm">BM Engineer</p> |
|
|
<div class="mt-4 h-px bg-gray-800 w-1/2 mx-auto group-hover:bg-[#00FF41] transition-colors duration-300"></div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="text-center group"> |
|
|
<div class="w-32 h-32 mx-auto mb-6 rounded-full bg-gray-900 relative overflow-hidden avatar-glow"> |
|
|
<div class="absolute inset-0 flex items-center justify-center terminal-flicker"> |
|
|
<span class="text-gray-600">[avatar]</span> |
|
|
</div> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-1 group-hover:text-[#00FF41] transition-colors duration-300">@data_sorcerer</h3> |
|
|
<p class="text-gray-400 text-sm">Analytics Wizard</p> |
|
|
<div class="mt-4 h-px bg-gray-800 w-1/2 mx-auto group-hover:bg-[#00FF41] transition-colors duration-300"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-20 relative overflow-hidden"> |
|
|
<div class="section-divider"></div> |
|
|
<div class="container mx-auto px-6"> |
|
|
<h2 class="text-4xl md:text-5xl font-bold mb-16 text-center glow-text"> |
|
|
<span class="text-[#00FF41]">PARTNER</span> NETWORKS |
|
|
</h2> |
|
|
|
|
|
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-8"> |
|
|
<div class="h-24 bg-gray-900 flex items-center justify-center hologram-effect"> |
|
|
<span class="text-gray-600">[partner logo]</span> |
|
|
</div> |
|
|
<div class="h-24 bg-gray-900 flex items-center justify-center hologram-effect"> |
|
|
<span class="text-gray-600">[partner logo]</span> |
|
|
</div> |
|
|
<div class="h-24 bg-gray-900 flex items-center justify-center hologram-effect"> |
|
|
<span class="text-gray-600">[partner logo]</span> |
|
|
</div> |
|
|
<div class="h-24 bg-gray-900 flex items-center justify-center hologram-effect"> |
|
|
<span class="text-gray-600">[partner logo]</span> |
|
|
</div> |
|
|
<div class="h-24 bg-gray-900 flex items-center justify-center hologram-effect"> |
|
|
<span class="text-gray-600">[partner logo]</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-12"> |
|
|
<h3 class="text-xl font-bold mb-6 text-center text-[#00FF41]">VERTICALS WE DOMINATE</h3> |
|
|
<div class="flex flex-wrap justify-center gap-4"> |
|
|
<span class="px-4 py-2 border border-[#00FF41] text-[#00FF41]">GAMBLING</span> |
|
|
<span class="px-4 py-2 border border-[#00FF41] text-[#00FF41]">BETTING</span> |
|
|
<span class="px-4 py-2 border border-[#00FF41] text-[#00FF41]">NUTRA</span> |
|
|
<span class="px-4 py-2 border border-[#00FF41] text-[#00FF41]">FINANCE</span> |
|
|
<span class="px-4 py-2 border border-[#00FF41] text-[#00FF41]">UTILITIES</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="section-divider"></div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-32 relative overflow-hidden"> |
|
|
<div class="container mx-auto px-6 text-center"> |
|
|
<h2 class="text-4xl md:text-6xl font-bold mb-6 glow-text"> |
|
|
READY TO <span class="text-[#00FF41]">REWIRE</span> YOUR TRAFFIC? |
|
|
</h2> |
|
|
<p class="text-xl md:text-2xl mb-12 text-gray-300"> |
|
|
Join the operators who control the flow. |
|
|
</p> |
|
|
<a href="#" class="inline-block bg-[#00FF41] text-black font-bold py-4 px-12 rounded-none magnetic-button hover:bg-opacity-90 transition-all duration-300 relative overflow-hidden group"> |
|
|
<span class="relative z-10 flex items-center gap-2"> |
|
|
<i class="fab fa-telegram-plane"></i> Connect via Telegram |
|
|
</span> |
|
|
<span class="absolute inset-0 bg-black opacity-0 group-hover:opacity-10 transition-opacity duration-300"></span> |
|
|
</a> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer class="py-12 border-t border-gray-800"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<div class="flex flex-col md:flex-row justify-between items-center"> |
|
|
<div class="mb-6 md:mb-0"> |
|
|
<p class="text-gray-400">© 2025 TMT — CONTROL THE FLOW</p> |
|
|
</div> |
|
|
<div class="flex gap-6"> |
|
|
<a href="#" class="text-gray-400 hover:text-[#00FF41] transition-colors duration-300 text-xl"> |
|
|
<i class="fab fa-telegram-plane"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-[#00FF41] transition-colors duration-300 text-xl"> |
|
|
<i class="fab fa-instagram"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-[#00FF41] transition-colors duration-300 text-xl"> |
|
|
<i class="fab fa-youtube"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
|
|
|
function createMatrixEffect() { |
|
|
const chars = "01アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン"; |
|
|
const matrixBg = document.getElementById('matrixBg'); |
|
|
|
|
|
|
|
|
for (let i = 0; i < 100; i++) { |
|
|
const column = document.createElement('div'); |
|
|
column.className = 'matrix-code'; |
|
|
column.style.left = `${Math.random() * 100}%`; |
|
|
column.style.animationDuration = `${5 + Math.random() * 20}s`; |
|
|
column.style.animationDelay = `${Math.random() * 5}s`; |
|
|
|
|
|
|
|
|
for (let j = 0; j < 30; j++) { |
|
|
const char = document.createElement('span'); |
|
|
char.className = 'matrix-char'; |
|
|
char.textContent = chars[Math.floor(Math.random() * chars.length)]; |
|
|
char.style.animationDuration = `${3 + Math.random() * 10}s`; |
|
|
char.style.animationDelay = `${Math.random() * 5}s`; |
|
|
column.appendChild(char); |
|
|
} |
|
|
|
|
|
matrixBg.appendChild(column); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function createMatrixRain() { |
|
|
const matrixRain = document.getElementById('matrixRain'); |
|
|
const columns = Math.floor(window.innerWidth / 20); |
|
|
|
|
|
for (let i = 0; i < columns; i++) { |
|
|
const column = document.createElement('div'); |
|
|
column.className = 'matrix-column'; |
|
|
column.style.left = `${i * 20}px`; |
|
|
column.style.animationDelay = `${Math.random() * 2}s`; |
|
|
column.style.animationDuration = `${2 + Math.random() * 5}s`; |
|
|
|
|
|
|
|
|
const digitCount = 20 + Math.floor(Math.random() * 20); |
|
|
for (let j = 0; j < digitCount; j++) { |
|
|
const digit = document.createElement('div'); |
|
|
digit.className = 'matrix-digit'; |
|
|
digit.textContent = Math.floor(Math.random() * 10); |
|
|
digit.style.animationDelay = `${Math.random() * 5}s`; |
|
|
digit.style.animationDuration = `${3 + Math.random() * 7}s`; |
|
|
column.appendChild(digit); |
|
|
} |
|
|
|
|
|
matrixRain.appendChild(column); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function initCustomCursor() { |
|
|
const cursor = document.getElementById('cursor'); |
|
|
const cursorTrails = []; |
|
|
const trailCount = 10; |
|
|
|
|
|
|
|
|
for (let i = 0; i < trailCount; i++) { |
|
|
const trail = document.createElement('div'); |
|
|
trail.className = 'cursor-trail'; |
|
|
trail.style.width = `${20 - i}px`; |
|
|
trail.style.height = `${20 - i}px`; |
|
|
trail.style.opacity = `${1 - (i / trailCount)}`; |
|
|
document.body.appendChild(trail); |
|
|
cursorTrails.push({ |
|
|
element: trail, |
|
|
position: { x: 0, y: 0 }, |
|
|
targetPosition: { x: 0, y: 0 } |
|
|
}); |
|
|
} |
|
|
|
|
|
document.addEventListener('mousemove', (e) => { |
|
|
cursor.style.left = `${e.clientX}px`; |
|
|
cursor.style.top = `${e.clientY}px`; |
|
|
|
|
|
|
|
|
cursorTrails.forEach((trail, index) => { |
|
|
if (index === 0) { |
|
|
trail.targetPosition = { x: e.clientX, y: e.clientY }; |
|
|
} else { |
|
|
const prevTrail = cursorTrails[index - 1]; |
|
|
trail.targetPosition = { |
|
|
x: prevTrail.position.x, |
|
|
y: prevTrail.position.y |
|
|
}; |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
function animateTrails() { |
|
|
cursorTrails.forEach((trail) => { |
|
|
trail.position.x += (trail.targetPosition.x - trail.position.x) * 0.2; |
|
|
trail.position.y += (trail.targetPosition.y - trail.position.y) * 0.2; |
|
|
|
|
|
trail.element.style.left = `${trail.position.x}px`; |
|
|
trail.element.style.top = `${trail.position.y}px`; |
|
|
}); |
|
|
|
|
|
requestAnimationFrame(animateTrails); |
|
|
} |
|
|
|
|
|
animateTrails(); |
|
|
} |
|
|
|
|
|
|
|
|
function animateCounters() { |
|
|
const counters = [ |
|
|
{ element: document.getElementById('counter1'), target: 5, suffix: 'M+' }, |
|
|
{ element: document.getElementById('counter2'), target: 70, suffix: '+' }, |
|
|
{ element: document.getElementById('counter3'), target: 200, suffix: '+' }, |
|
|
{ element: document.getElementById('counter4'), target: 15, suffix: '+' } |
|
|
]; |
|
|
|
|
|
counters.forEach((counter) => { |
|
|
let current = 0; |
|
|
const increment = counter.target / 30; |
|
|
const timer = setInterval(() => { |
|
|
current += increment; |
|
|
if (current >= counter.target) { |
|
|
current = counter.target; |
|
|
clearInterval(timer); |
|
|
} |
|
|
counter.element.textContent = Math.floor(current) + counter.suffix; |
|
|
}, 50); |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
function initScrollTop() { |
|
|
const scrollTop = document.getElementById('scrollTop'); |
|
|
|
|
|
window.addEventListener('scroll', () => { |
|
|
if (window.pageYOffset > 300) { |
|
|
scrollTop.style.opacity = '1'; |
|
|
scrollTop.style.visibility = 'visible'; |
|
|
} else { |
|
|
scrollTop.style.opacity = '0'; |
|
|
scrollTop.style.visibility = 'hidden'; |
|
|
} |
|
|
}); |
|
|
|
|
|
scrollTop.addEventListener('click', () => { |
|
|
window.scrollTo({ |
|
|
top: 0, |
|
|
behavior: 'smooth' |
|
|
}); |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
function initMagneticButtons() { |
|
|
const buttons = document.querySelectorAll('.magnetic-button'); |
|
|
|
|
|
buttons.forEach(button => { |
|
|
button.addEventListener('mousemove', (e) => { |
|
|
const rect = button.getBoundingClientRect(); |
|
|
const x = e.clientX - rect.left; |
|
|
const y = e.clientY - rect.top; |
|
|
|
|
|
const centerX = rect.width / 2; |
|
|
const centerY = rect.height / 2; |
|
|
|
|
|
const angle = Math.atan2(y - centerY, x - centerX); |
|
|
const distance = Math.sqrt(Math.pow(x - centerX, 2) + Math.pow(y - centerY, 2)); |
|
|
const maxDistance = Math.sqrt(Math.pow(centerX, 2) + Math.pow(centerY, 2)); |
|
|
|
|
|
const translateX = Math.cos(angle) * distance * 0.1; |
|
|
const translateY = Math.sin(angle) * distance * 0.1; |
|
|
|
|
|
button.style.transform = `translate(${translateX}px, ${translateY}px) scale(1.05)`; |
|
|
}); |
|
|
|
|
|
button.addEventListener('mouseleave', () => { |
|
|
button.style.transform = ''; |
|
|
}); |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
function initPillButtons() { |
|
|
const bluePill = document.querySelector('.blue-pill'); |
|
|
const redPill = document.querySelector('.red-pill'); |
|
|
|
|
|
bluePill.addEventListener('click', () => { |
|
|
alert('You chose the Blue Pill - Continue living in the blissful ignorance of the ordinary marketing world.'); |
|
|
}); |
|
|
|
|
|
redPill.addEventListener('click', () => { |
|
|
alert('You chose the Red Pill - Welcome to the real world of performance marketing. Follow the white rabbit...'); |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', () => { |
|
|
createMatrixEffect(); |
|
|
createMatrixRain(); |
|
|
initCustomCursor(); |
|
|
animateCounters(); |
|
|
initScrollTop(); |
|
|
initMagneticButtons(); |
|
|
initPillButtons(); |
|
|
|
|
|
|
|
|
const observer = new IntersectionObserver((entries) => { |
|
|
entries.forEach(entry => { |
|
|
if (entry.isIntersecting) { |
|
|
entry.target.classList.add('animate'); |
|
|
} |
|
|
}); |
|
|
}, { |
|
|
threshold: 0.1 |
|
|
}); |
|
|
|
|
|
document.querySelectorAll('.data-node, .avatar-glow, .hologram-effect').forEach(el => { |
|
|
observer.observe(el); |
|
|
}); |
|
|
}); |
|
|
</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=timoon811/tmtmatrix" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
