1162 lines
46 KiB
HTML
1162 lines
46 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Operation Track2 - Roman Seleznev</title>
|
||
|
||
<!-- External Libraries -->
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
|
||
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
|
||
|
||
<style>
|
||
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;700&family=Montserrat:wght@400;600;700&display=swap');
|
||
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
body {
|
||
font-family: 'Montserrat', sans-serif;
|
||
background: #0A0E27;
|
||
color: #FFFFFF;
|
||
overflow: hidden;
|
||
height: 100vh;
|
||
}
|
||
|
||
#particles-js {
|
||
position: fixed;
|
||
width: 100%;
|
||
height: 100%;
|
||
z-index: 0;
|
||
}
|
||
|
||
.presentation {
|
||
width: 100%;
|
||
height: 100vh;
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
|
||
.slide {
|
||
width: 100%;
|
||
height: 100%;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
display: none;
|
||
padding: clamp(15px, 2vh, 25px) clamp(25px, 3vw, 50px) clamp(60px, 6vh, 80px) clamp(25px, 3vw, 50px);
|
||
background: linear-gradient(135deg, rgba(10, 14, 39, 0.95) 0%, rgba(26, 31, 58, 0.95) 100%);
|
||
overflow-y: auto;
|
||
overflow-x: hidden;
|
||
}
|
||
|
||
.slide.active {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.slide::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: repeating-linear-gradient(
|
||
0deg,
|
||
transparent,
|
||
transparent 2px,
|
||
rgba(0, 255, 65, 0.03) 2px,
|
||
rgba(0, 255, 65, 0.03) 4px
|
||
);
|
||
pointer-events: none;
|
||
}
|
||
|
||
h1 {
|
||
font-family: 'Roboto Mono', monospace;
|
||
font-size: clamp(32px, 4vw, 56px);
|
||
color: #00FF41;
|
||
text-shadow: 0 0 20px rgba(0, 255, 65, 0.5);
|
||
margin-bottom: clamp(10px, 1.5vh, 15px);
|
||
letter-spacing: -2px;
|
||
}
|
||
|
||
h2 {
|
||
font-family: 'Roboto Mono', monospace;
|
||
font-size: clamp(24px, 2.5vw, 36px);
|
||
color: #00FF41;
|
||
margin-bottom: clamp(10px, 1.2vh, 15px);
|
||
letter-spacing: -1px;
|
||
}
|
||
|
||
h3 {
|
||
font-size: clamp(18px, 1.8vw, 24px);
|
||
color: #FFD700;
|
||
margin-bottom: clamp(6px, 0.8vh, 10px);
|
||
}
|
||
|
||
p {
|
||
font-size: clamp(14px, 1.3vw, 18px);
|
||
line-height: 1.4;
|
||
margin-bottom: clamp(6px, 0.6vh, 8px);
|
||
color: #E0E0E0;
|
||
}
|
||
|
||
.subtitle {
|
||
font-size: clamp(18px, 2vw, 26px);
|
||
color: #B0B0B0;
|
||
margin-bottom: clamp(15px, 1.5vh, 20px);
|
||
line-height: 1.3;
|
||
}
|
||
|
||
.stats {
|
||
display: flex;
|
||
justify-content: space-around;
|
||
margin: 15px 0;
|
||
gap: 15px;
|
||
}
|
||
|
||
.stat-box {
|
||
flex: 1;
|
||
background: rgba(0, 255, 65, 0.1);
|
||
border: 2px solid #00FF41;
|
||
border-radius: 10px;
|
||
padding: 15px;
|
||
text-align: center;
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
.stat-box:hover {
|
||
transform: translateY(-5px);
|
||
box-shadow: 0 10px 30px rgba(0, 255, 65, 0.3);
|
||
}
|
||
|
||
.stat-number {
|
||
font-family: 'Roboto Mono', monospace;
|
||
font-size: clamp(28px, 3vw, 40px);
|
||
color: #FFD700;
|
||
font-weight: bold;
|
||
display: block;
|
||
margin-bottom: clamp(6px, 0.6vh, 8px);
|
||
}
|
||
|
||
.stat-label {
|
||
font-size: clamp(12px, 1.2vw, 16px);
|
||
color: #B0B0B0;
|
||
}
|
||
|
||
.quote-box {
|
||
background: #1E1E1E;
|
||
border-left: 4px solid #00FF41;
|
||
padding: 12px 20px;
|
||
margin: 12px 0;
|
||
font-family: 'Courier New', monospace;
|
||
font-size: 16px;
|
||
color: #00FF41;
|
||
position: relative;
|
||
}
|
||
|
||
.quote-box::before {
|
||
content: '>';
|
||
position: absolute;
|
||
left: 8px;
|
||
color: #00FF41;
|
||
}
|
||
|
||
.timeline {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin: 15px 0;
|
||
position: relative;
|
||
}
|
||
|
||
.timeline::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 0;
|
||
right: 0;
|
||
height: 2px;
|
||
background: #00FF41;
|
||
z-index: 0;
|
||
}
|
||
|
||
.timeline-item {
|
||
background: #0A0E27;
|
||
border: 2px solid #00FF41;
|
||
border-radius: 50%;
|
||
width: 70px;
|
||
height: 70px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
position: relative;
|
||
z-index: 1;
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
.timeline-item:hover {
|
||
transform: scale(1.2);
|
||
box-shadow: 0 0 20px rgba(0, 255, 65, 0.5);
|
||
}
|
||
|
||
.split-content {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 20px;
|
||
margin-top: 10px;
|
||
flex: 1;
|
||
}
|
||
|
||
.content-box {
|
||
background: rgba(30, 30, 30, 0.6);
|
||
border: 1px solid #00FF41;
|
||
border-radius: 10px;
|
||
padding: 15px;
|
||
position: relative;
|
||
}
|
||
|
||
.icon-list {
|
||
list-style: none;
|
||
font-size: clamp(13px, 1.2vw, 16px);
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.icon-list li::before {
|
||
content: '▸ ';
|
||
color: #00FF41;
|
||
font-weight: bold;
|
||
margin-right: 8px;
|
||
}
|
||
|
||
.alert-box {
|
||
background: rgba(255, 0, 85, 0.1);
|
||
border: 2px solid #FF0055;
|
||
border-radius: 10px;
|
||
padding: 15px;
|
||
margin: 15px 0;
|
||
text-align: center;
|
||
font-size: 20px;
|
||
box-shadow: 0 0 10px rgba(255, 0, 85, 0.3);
|
||
}
|
||
|
||
.highlight {
|
||
color: #FFD700;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.classified-stamp {
|
||
position: absolute;
|
||
top: 15px;
|
||
right: 15px;
|
||
background: #FF0055;
|
||
color: white;
|
||
padding: 8px 25px;
|
||
font-family: 'Roboto Mono', monospace;
|
||
font-size: 20px;
|
||
font-weight: bold;
|
||
transform: rotate(-15deg);
|
||
border: 3px solid #FFFFFF;
|
||
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
|
||
animation: stamp-appear 0.5s ease-out;
|
||
}
|
||
|
||
@keyframes stamp-appear {
|
||
0% { transform: scale(0) rotate(-15deg); }
|
||
50% { transform: scale(1.2) rotate(-15deg); }
|
||
100% { transform: scale(1) rotate(-15deg); }
|
||
}
|
||
|
||
.controls {
|
||
position: fixed;
|
||
bottom: 30px;
|
||
right: 30px;
|
||
display: flex;
|
||
gap: 15px;
|
||
z-index: 1000;
|
||
}
|
||
|
||
.btn {
|
||
background: rgba(0, 255, 65, 0.2);
|
||
border: 2px solid #00FF41;
|
||
color: #00FF41;
|
||
padding: 12px 25px;
|
||
font-size: 16px;
|
||
font-family: 'Roboto Mono', monospace;
|
||
cursor: pointer;
|
||
border-radius: 5px;
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
.btn:hover {
|
||
background: #00FF41;
|
||
color: #0A0E27;
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 5px 15px rgba(0, 255, 65, 0.4);
|
||
}
|
||
|
||
.slide-number {
|
||
position: fixed;
|
||
bottom: 30px;
|
||
left: 30px;
|
||
font-family: 'Roboto Mono', monospace;
|
||
font-size: 18px;
|
||
color: #00FF41;
|
||
z-index: 1000;
|
||
}
|
||
|
||
.map-visual {
|
||
background: rgba(30, 30, 30, 0.6);
|
||
border: 2px solid #00FF41;
|
||
border-radius: 10px;
|
||
padding: clamp(15px, 2vh, 25px);
|
||
text-align: center;
|
||
margin: clamp(10px, 1.2vh, 15px) 0;
|
||
font-size: clamp(18px, 2vw, 26px);
|
||
color: #FFD700;
|
||
}
|
||
|
||
.grid-3 {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 20px;
|
||
margin: 20px 0;
|
||
}
|
||
|
||
.password-reveal {
|
||
background: #1E1E1E;
|
||
border: 3px solid #FF0055;
|
||
border-radius: 10px;
|
||
padding: 20px;
|
||
margin: 15px 0;
|
||
text-align: center;
|
||
}
|
||
|
||
.password-text {
|
||
font-family: 'Courier New', monospace;
|
||
font-size: clamp(28px, 3vw, 38px);
|
||
color: #FF0055;
|
||
letter-spacing: clamp(3px, 0.4vw, 5px);
|
||
text-shadow: 0 0 10px rgba(255, 0, 85, 0.5);
|
||
}
|
||
|
||
ul.features {
|
||
list-style: none;
|
||
font-size: clamp(15px, 1.5vw, 20px);
|
||
line-height: 1.6;
|
||
}
|
||
|
||
ul.features li {
|
||
margin: clamp(8px, 0.8vh, 10px) 0;
|
||
padding-left: clamp(25px, 2.5vw, 35px);
|
||
position: relative;
|
||
}
|
||
|
||
ul.features li::before {
|
||
content: '✓';
|
||
position: absolute;
|
||
left: 0;
|
||
color: #00FF41;
|
||
font-weight: bold;
|
||
font-size: clamp(18px, 1.8vw, 24px);
|
||
}
|
||
|
||
.center-content {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
text-align: center;
|
||
flex: 1;
|
||
}
|
||
|
||
.slide-image {
|
||
max-width: 100%;
|
||
max-height: 180px;
|
||
border-radius: 10px;
|
||
border: 2px solid #00FF41;
|
||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
|
||
margin: 8px 0;
|
||
object-fit: contain;
|
||
opacity: 0;
|
||
transform: translateX(-100px) rotate(-5deg);
|
||
cursor: pointer;
|
||
transition: transform 0.3s;
|
||
}
|
||
|
||
.slide-image:hover {
|
||
transform: translateX(0) rotate(0deg) scale(1.05);
|
||
box-shadow: 0 15px 40px rgba(0, 255, 65, 0.4);
|
||
}
|
||
|
||
.slide-image.animate-in {
|
||
animation: imageSlideIn 1s ease-out forwards;
|
||
}
|
||
|
||
@keyframes imageSlideIn {
|
||
to {
|
||
opacity: 1;
|
||
transform: translateX(0) rotate(0deg);
|
||
}
|
||
}
|
||
|
||
/* Lightbox */
|
||
.lightbox {
|
||
display: none;
|
||
position: fixed;
|
||
z-index: 9999;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: rgba(0, 0, 0, 0.95);
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.lightbox.active {
|
||
display: flex;
|
||
}
|
||
|
||
.lightbox-content {
|
||
max-width: 90%;
|
||
max-height: 90%;
|
||
object-fit: contain;
|
||
border: 3px solid #00FF41;
|
||
border-radius: 10px;
|
||
box-shadow: 0 0 50px rgba(0, 255, 65, 0.5);
|
||
}
|
||
|
||
.lightbox-close {
|
||
position: absolute;
|
||
top: 30px;
|
||
right: 30px;
|
||
font-size: 50px;
|
||
color: #00FF41;
|
||
cursor: pointer;
|
||
font-weight: bold;
|
||
font-family: 'Roboto Mono', monospace;
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
.lightbox-close:hover {
|
||
color: #FF0055;
|
||
transform: scale(1.2);
|
||
}
|
||
|
||
.image-container {
|
||
position: relative;
|
||
display: inline-block;
|
||
margin: 8px;
|
||
}
|
||
|
||
.image-caption {
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
background: rgba(0, 0, 0, 0.8);
|
||
color: #00FF41;
|
||
padding: 8px;
|
||
font-size: 13px;
|
||
font-family: 'Roboto Mono', monospace;
|
||
}
|
||
|
||
#qrcode {
|
||
display: inline-block;
|
||
padding: 12px;
|
||
background: white;
|
||
border-radius: 10px;
|
||
margin: 10px 0;
|
||
}
|
||
|
||
.glitch {
|
||
animation: glitch 1s infinite;
|
||
}
|
||
|
||
@keyframes glitch {
|
||
0%, 100% { transform: translate(0); }
|
||
20% { transform: translate(-2px, 2px); }
|
||
40% { transform: translate(-2px, -2px); }
|
||
60% { transform: translate(2px, 2px); }
|
||
80% { transform: translate(2px, -2px); }
|
||
}
|
||
|
||
.fade-in {
|
||
animation: fadeIn 1s ease-out;
|
||
}
|
||
|
||
@keyframes fadeIn {
|
||
from { opacity: 0; transform: translateY(20px); }
|
||
to { opacity: 1; transform: translateY(0); }
|
||
}
|
||
|
||
.matrix-bg {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
overflow: hidden;
|
||
z-index: -1;
|
||
}
|
||
|
||
.roman-empire-quote {
|
||
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
|
||
border: 3px solid #FFD700;
|
||
border-radius: 15px;
|
||
padding: 15px;
|
||
margin: 15px 0;
|
||
text-align: center;
|
||
font-family: 'Georgia', serif;
|
||
font-size: 20px;
|
||
color: #FFD700;
|
||
font-style: italic;
|
||
box-shadow: 0 10px 40px rgba(255, 215, 0, 0.2);
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div id="particles-js"></div>
|
||
|
||
<div class="presentation">
|
||
<!-- SLIDE 1: TITEL -->
|
||
<div class="slide active" data-slide="1">
|
||
<div class="classified-stamp">CLASSIFIED</div>
|
||
<div class="center-content">
|
||
<h1 class="glitch">OPERATION TRACK2</h1>
|
||
<p class="subtitle">
|
||
Der Psycho-Hacker, der $169 Millionen stahl<br>
|
||
und zum Spielball der Supermächte wurde
|
||
</p>
|
||
<div class="stats" style="margin-top: 40px;">
|
||
<div class="stat-box">
|
||
<span class="stat-number">27</span>
|
||
<span class="stat-label">Jahre Haft</span>
|
||
</div>
|
||
<div class="stat-box">
|
||
<span class="stat-number">2,9M</span>
|
||
<span class="stat-label">Kreditkarten</span>
|
||
</div>
|
||
<div class="stat-box">
|
||
<span class="stat-number">2024</span>
|
||
<span class="stat-label">Gefangenenaustausch</span>
|
||
</div>
|
||
</div>
|
||
<p style="margin-top: 30px; font-size: 18px; color: #B0B0B0;">
|
||
🇷🇺 Roman Valerevich Seleznev | aka "nCuX", "Track2", "2Pac"
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- SLIDE 2: URSPRUNG Teil 1 -->
|
||
<div class="slide" data-slide="2">
|
||
<h2>Von 10m² zum Cyber-König</h2>
|
||
<div class="timeline">
|
||
<div class="timeline-item">1984</div>
|
||
<div class="timeline-item">2000</div>
|
||
<div class="timeline-item">2003</div>
|
||
<div class="timeline-item">2005</div>
|
||
</div>
|
||
<div class="content-box" style="margin: 20px auto; max-width: 900px;">
|
||
<h3 style="color: #FF0055; text-align: center;">Der Albtraum beginnt</h3>
|
||
<ul class="icon-list" style="font-size: clamp(14px, 1.4vw, 17px); line-height: 1.6;">
|
||
<li>🏚️ <strong>10m² Zimmer</strong> in Vladivostok – bitter arm</li>
|
||
<li>👨👩👦 Eltern geschieden als er 2 Jahre alt war</li>
|
||
<li>🍺 Mutter: Supermarktkassiererin, Alkoholikerin</li>
|
||
<li>💀 <strong>Mit 17:</strong> Mutter tot in der Badewanne gefunden</li>
|
||
<li>📦 <strong>Am selben Tag:</strong> Onkel raubt ihn aus, wirft ihn raus</li>
|
||
<li>🏠 Obdachlos bei Oma</li>
|
||
<li>💻 Überlebt mit $5/Tag durch PC-Reparaturen</li>
|
||
</ul>
|
||
</div>
|
||
<div class="quote-box" style="border-color: #FF0055; margin-top: 20px;">
|
||
"I was 17, struggle hard, and lose my way into bad world."<br>
|
||
<span style="color: #B0B0B0;">— Roman Seleznev, handgeschriebener Brief an US-Gericht</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- SLIDE 3: URSPRUNG Teil 2 -->
|
||
<div class="slide" data-slide="3">
|
||
<h2>Die dunkle Transformation</h2>
|
||
<div class="content-box" style="margin: 20px auto; max-width: 900px;">
|
||
<h3 style="color: #00FF41; text-align: center;">Vom Opfer zum Täter</h3>
|
||
<ul class="icon-list" style="font-size: clamp(14px, 1.4vw, 17px); line-height: 1.8;">
|
||
<li>🧠 Autodidakt: Bringt sich Programmieren bei</li>
|
||
<li>👨💻 Alias <strong>"nCuX"</strong> = "Psycho" (explosives Temperament)</li>
|
||
<li>🌐 2003: Eintritt ins CarderPlanet Forum</li>
|
||
<li>💳 2005: Start des Kreditkartenhandels</li>
|
||
<li>👨👦 Vater: <strong>Valery Seleznev</strong>, Duma-Abgeordneter</li>
|
||
<li>🛡️ Genießt FSB-Schutz durch politische Verbindungen</li>
|
||
</ul>
|
||
</div>
|
||
<div class="alert-box" style="margin-top: 30px;">
|
||
💡 Ein tragischer Anfang führt zu einer kriminellen Karriere
|
||
</div>
|
||
</div>
|
||
|
||
<!-- SLIDE 4: GESCHÄFTSMODELL -->
|
||
<div class="slide" data-slide="4">
|
||
<h2>Der "Amazon" der Kreditkarten</h2>
|
||
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 15px 0; align-items: start;">
|
||
<div style="text-align: center;">
|
||
<div class="image-container">
|
||
<img src="./images/WerbungimCarderforum.png"
|
||
alt="Track2.name Screenshot" class="slide-image" id="track2-img"
|
||
style="max-height: clamp(200px, 25vh, 280px); border-color: #FF0055;">
|
||
<div class="image-caption">🌐 track2.name - Die automatisierte Carding-Plattform</div>
|
||
</div>
|
||
</div>
|
||
<div class="content-box" style="height: 100%;">
|
||
<h3 style="text-align: center; margin-bottom: 12px;">🌐 track2.name (2009-2012)</h3>
|
||
<ul class="features" style="font-size: clamp(14px, 1.4vw, 17px);">
|
||
<li>🔍 Suchfunktion nach Bank, Region & Kartentyp</li>
|
||
<li>🛒 Shopping-Cart System mit Checkout</li>
|
||
<li>⚡ 48-Stunden Umtauschgarantie</li>
|
||
<li>💰 Zahlung via Liberty Reserve</li>
|
||
<li>📦 Automatisierte Auslieferung</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="stats">
|
||
<div class="stat-box">
|
||
<span class="stat-number">747k</span>
|
||
<span class="stat-label">Karten verfügbar<br>(gleichzeitig)</span>
|
||
</div>
|
||
<div class="stat-box">
|
||
<span class="stat-number">$2.4M</span>
|
||
<span class="stat-label">Wöchentlicher<br>Umsatz</span>
|
||
</div>
|
||
<div class="stat-box">
|
||
<span class="stat-number">96k</span>
|
||
<span class="stat-label">Verkäufe<br>pro Woche</span>
|
||
</div>
|
||
</div>
|
||
<div class="alert-box" style="margin-top: 15px;">
|
||
💬 "Reinvented the market for stolen credit cards" — US Prosecutors
|
||
</div>
|
||
</div>
|
||
|
||
<!-- SLIDE 5: OPFER -->
|
||
<div class="slide" data-slide="5">
|
||
<h2>Von Köln nach Dortmund – aus Kreditkarten</h2>
|
||
<div class="map-visual">
|
||
📍 KÖLN ━━━━━━━━━━━━━━━━━━━━━ DORTMUND 📍<br>
|
||
<span class="highlight">95 KILOMETER</span> gestohlener Kreditkarten (aneinandergelegt)
|
||
</div>
|
||
<div class="grid-3">
|
||
<div class="stat-box">
|
||
<span class="stat-number">3,700+</span>
|
||
<span class="stat-label">Gehackte<br>Unternehmen</span>
|
||
</div>
|
||
<div class="stat-box">
|
||
<span class="stat-number">500</span>
|
||
<span class="stat-label">US-Firmen<br>betroffen</span>
|
||
</div>
|
||
<div class="stat-box">
|
||
<span class="stat-number">$169M</span>
|
||
<span class="stat-label">Schaden<br>(nur Seattle)</span>
|
||
</div>
|
||
</div>
|
||
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 15px; align-items: center;">
|
||
<div style="text-align: center;">
|
||
<div class="image-container">
|
||
<img src="./images/BroadwayGrill.png"
|
||
alt="Broadway Grill" class="slide-image" id="broadway-img"
|
||
style="max-height: clamp(160px, 20vh, 220px);">
|
||
<div class="image-caption">🍕 Broadway Grill, Seattle - Opfer des Hacks</div>
|
||
</div>
|
||
</div>
|
||
<div class="content-box">
|
||
<h3>🍕 Case Study: Broadway Grill, Seattle</h3>
|
||
<ul class="icon-list" style="font-size: clamp(14px, 1.4vw, 17px);">
|
||
<li>22 Jahre erfolgreiches Restaurant</li>
|
||
<li>Gehackt von Seleznev</li>
|
||
<li>-40% Einnahmen nach Hack</li>
|
||
<li>Resultat: <span class="highlight">BANKROTT</span></li>
|
||
</ul>
|
||
<p style="margin-top: 12px; color: #FF0055; font-size: clamp(13px, 1.3vw, 16px);">
|
||
Ziele: Kleine Unternehmen ohne IT-Security Budget (Pizzerien, Bäckereien, Cafés)
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- SLIDE 6: EXPLOSION Teil 1 -->
|
||
<div class="slide" data-slide="6">
|
||
<h2>Plot Twist: Die Explosion</h2>
|
||
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 15px; align-items: start;">
|
||
<div style="text-align: center;">
|
||
<div class="image-container">
|
||
<img src="./images/marrakechCafe.png"
|
||
alt="Café Argana destroyed" class="slide-image" id="argana-img"
|
||
style="max-height: clamp(200px, 28vh, 260px); border-color: #FF0055;">
|
||
<div class="image-caption">💥 Café Argana nach dem Bombenanschlag, 28. April 2011</div>
|
||
</div>
|
||
</div>
|
||
<div class="content-box">
|
||
<h3 style="font-size: clamp(18px, 1.8vw, 22px); margin-bottom: 15px;">📅 28. April 2011 - Ein Monat nach Anklage</h3>
|
||
<ul class="icon-list" style="font-size: clamp(14px, 1.4vw, 17px); line-height: 1.6;">
|
||
<li>📍 Café Argana, Djemaa el-Fna, Marrakesch</li>
|
||
<li>🏨 Hotel verweigert Eintritt → gehen ins Café</li>
|
||
<li>⏰ Kellner: "Dauert 30 Minuten" / "Bad idea"</li>
|
||
<li>💥 Zwei Bomben explodieren (Al-Qaida)</li>
|
||
<li>☠️ 17 Tote, 25 Verletzte</li>
|
||
<li>🧠 Roman: Großer Teil des Schädels weggerissen</li>
|
||
<li>✈️ Evakuierung nach Moskau, 2 Wochen Koma</li>
|
||
<li>🦾 Titanplatte ersetzt Schädelteile</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- SLIDE 7: EXPLOSION Teil 2 - Die Reaktion -->
|
||
<div class="slide" data-slide="7">
|
||
<h2>Der Totgeglaubte kehrt zurück</h2>
|
||
<div class="split-content" style="gap: 20px; margin-top: 20px;">
|
||
<div class="content-box" style="border-color: #003B6F; padding: 20px;">
|
||
<h3 style="color: #003B6F; font-size: clamp(18px, 1.8vw, 22px); margin-bottom: 15px;">🕵️ US Secret Service denkt:</h3>
|
||
<p style="font-size: clamp(16px, 1.6vw, 19px); line-height: 1.7; color: #B0B0B0;">
|
||
✓ "Er wird sterben"<br>
|
||
✓ "Oder ein Gemüse bleiben"<br>
|
||
✓ <span style="color: #00FF41;">"Case closed"</span><br><br>
|
||
<span style="font-size: clamp(15px, 1.5vw, 18px); color: #FFD700;">Jan 2012: Shops geschlossen<br>
|
||
"Ermittlung beendet ✓"</span>
|
||
</p>
|
||
</div>
|
||
<div class="content-box" style="border-color: #FF0055; padding: 20px;">
|
||
<h3 style="color: #FF0055; font-size: clamp(18px, 1.8vw, 22px); margin-bottom: 15px;">😈 Romans Reaktion 2013:</h3>
|
||
<p style="font-size: clamp(16px, 1.6vw, 19px); line-height: 1.7;">
|
||
✓ Aufgewacht & genesen<br>
|
||
✓ Frau verlässt ihn im Koma<br>
|
||
✓ Neues Alias: <span class="highlight">"2Pac"</span><br>
|
||
✓ Neue Website: <span class="highlight">2pac.cc</span><br>
|
||
✓ <span style="color: #FF0055;">WEITERHACKEN</span><br><br>
|
||
<span style="font-size: clamp(15px, 1.5vw, 18px); color: #B0B0B0;">"Wieso hat Gott mich gerettet?"</span>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="alert-box" style="margin-top: 25px; font-size: clamp(16px, 1.7vw, 20px);">
|
||
🎭 Die Ermittler waren schockiert: Der "tote" Hacker ist zurück
|
||
</div>
|
||
</div>
|
||
|
||
<!-- SLIDE 8: DIE JAGD -->
|
||
<div class="slide" data-slide="8">
|
||
<h2>10 Jahre Katz und Maus</h2>
|
||
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 20px; align-items: start;">
|
||
<div style="text-align: center;">
|
||
<div class="image-container">
|
||
<img src="./images/RomanMitDodgeCharger.jpg"
|
||
alt="Roman with yellow Dodge" class="slide-image" id="dodge-img"
|
||
style="max-height: clamp(180px, 24vh, 230px);">
|
||
<div class="image-caption">🚗 Roman mit seinem gelben Dodge Challenger vor dem Roten Platz</div>
|
||
</div>
|
||
</div>
|
||
<div class="content-box">
|
||
<h3 style="font-size: clamp(18px, 1.8vw, 22px); margin-bottom: 15px;">🕵️ Die Jagd des Secret Service</h3>
|
||
<ul class="features" style="font-size: clamp(14px, 1.4vw, 17px); line-height: 1.6;">
|
||
<li>🇷🇺 <strong>2009:</strong> FSB verrät ihn → "nCuX" verschwindet → kehrt als "Track2" zurück</li>
|
||
<li>🇩🇪 <strong>Deutschland:</strong> Falsche Person festgenommen</li>
|
||
<li>🇰🇷 <strong>Südkorea:</strong> Ausweichmanöver mit Direktflügen</li>
|
||
<li>🇦🇺 <strong>Australien:</strong> Köder-Operationen scheitern</li>
|
||
<li>🇮🇩 <strong>Bali:</strong> Strandhaus (kein Auslieferungsabkommen)</li>
|
||
<li>🔍 Er googelte seine eigenen Haftbefehle auf PACER</li>
|
||
<li>✈️ Nur Last-Minute-Tickets in Nicht-Auslieferungsländer</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="quote-box" style="margin-top: 20px;">
|
||
"Ich habe Schutz durch das FSB-Zentrum für Informationssicherheit erhalten"<br>
|
||
<span style="color: #B0B0B0;">— Roman Seleznev in Chat-Nachrichten an Komplizen (2008)</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- SLIDE 9: FESTNAHME Teil 1 -->
|
||
<div class="slide" data-slide="9">
|
||
<h2>Luxusurlaub mit Folgen</h2>
|
||
<div style="text-align: center; margin-bottom: 20px;">
|
||
<div class="image-container">
|
||
<img src="./images/RomanmitFamilie.jpg"
|
||
alt="Roman with family" class="slide-image" id="family-img"
|
||
style="max-height: clamp(150px, 20vh, 200px);">
|
||
<div class="image-caption">👨👩👧 Roman mit seiner Frau und Kind - vor der Festnahme</div>
|
||
</div>
|
||
</div>
|
||
<div class="content-box" style="padding: 20px; max-width: 800px; margin: 0 auto;">
|
||
<h3>🏝️ Juli 2014: Malediven</h3>
|
||
<p style="font-size: clamp(16px, 1.6vw, 20px); line-height: 1.6;">
|
||
💰 $1,400/Nacht - Teuerste Villa im Resort<br>
|
||
💬 "Ich werde meinen eigenen Diener haben"
|
||
</p>
|
||
</div>
|
||
<div class="timeline" style="margin: 30px 0;">
|
||
<div class="timeline-item" style="width: 90px; height: 90px; font-size: clamp(13px, 1.3vw, 15px);">1. Juli<br>📡</div>
|
||
<div class="timeline-item" style="width: 90px; height: 90px; font-size: clamp(13px, 1.3vw, 15px);">5. Juli<br>✈️</div>
|
||
<div class="timeline-item" style="width: 90px; height: 90px; font-size: clamp(13px, 1.3vw, 15px);">Guam<br>🇺🇸</div>
|
||
</div>
|
||
<div class="alert-box" style="margin-top: 30px; font-size: clamp(16px, 1.7vw, 20px);">
|
||
⚠️ Secret Service wartet bereits am Flughafen
|
||
</div>
|
||
</div>
|
||
|
||
<!-- SLIDE 10: LAPTOP-JACKPOT -->
|
||
<div class="slide" data-slide="10">
|
||
<h2>Der Laptop-Jackpot</h2>
|
||
<div class="password-reveal" style="padding: 25px; max-width: 900px; margin: 30px auto;">
|
||
<h3 style="color: #FF0055; margin-bottom: 20px; font-size: clamp(20px, 2vw, 26px);">🔓 DER LAPTOP-JACKPOT</h3>
|
||
<p style="font-size: clamp(16px, 1.6vw, 19px); margin-bottom: 20px; line-height: 1.7;">
|
||
✓ Laptop die ganze Zeit EINGESCHALTET<br>
|
||
✓ Username überall: "smaus1"<br>
|
||
✓ Kino-Website schickte Passwort im Klartext
|
||
</p>
|
||
<div style="margin: 30px 0;">
|
||
<p style="font-size: clamp(15px, 1.5vw, 18px); color: #B0B0B0; margin-bottom: 10px;">Passwort:</p>
|
||
<div class="password-text glitch">Ochko123</div>
|
||
</div>
|
||
<p style="font-size: clamp(18px, 2vw, 24px); color: #FFD700; margin-top: 30px;">
|
||
💳 1,7 MILLIONEN Kreditkarten gefunden
|
||
</p>
|
||
</div>
|
||
<div class="alert-box" style="background: rgba(0, 255, 65, 0.1); border-color: #00FF41; margin-top: 30px;">
|
||
💡 Ein Passwort für ALLES - vom Email-Account bis zu den Servern
|
||
</div>
|
||
</div>
|
||
|
||
<!-- SLIDE 11: VATER & GEOPOLITIK -->
|
||
<div class="slide" data-slide="11">
|
||
<h2>Diplomatischer Shitstorm</h2>
|
||
<div style="text-align: center; margin-bottom: 15px;">
|
||
<div class="image-container">
|
||
<img src="./images/VaterVonRoman.jpg.webp"
|
||
alt="Valery Seleznev" class="slide-image" id="valery-img"
|
||
style="max-height: clamp(160px, 20vh, 200px);">
|
||
<div class="image-caption">👨⚖️ Valery Seleznev - Duma-Abgeordneter und Romans Vater</div>
|
||
</div>
|
||
</div>
|
||
<div class="split-content" style="margin-top: 20px;">
|
||
<div class="content-box" style="padding: 20px;">
|
||
<h3 style="font-size: clamp(18px, 1.8vw, 22px); margin-bottom: 12px;">👨 Valery Seleznev</h3>
|
||
<p style="font-size: clamp(14px, 1.4vw, 17px); margin-bottom: 12px;">Duma-Abgeordneter (LDPR) | Putin-nah</p>
|
||
<ul class="icon-list" style="font-size: clamp(15px, 1.5vw, 18px); line-height: 1.6;">
|
||
<li>"Entführung durch die USA!"</li>
|
||
<li>"Menschenfresser-Urteil"</li>
|
||
<li>"Internet-Bin-Laden"</li>
|
||
<li>"8 Panzerwagen-Transport"</li>
|
||
<li>"Tauschobjekt für Snowden"</li>
|
||
<li>"Hat nichts mit Computern zu tun"</li>
|
||
</ul>
|
||
</div>
|
||
<div class="content-box" style="padding: 20px;">
|
||
<h3 style="font-size: clamp(18px, 1.8vw, 22px); margin-bottom: 12px;">🇷🇺 Russland reagiert</h3>
|
||
<ul class="icon-list" style="font-size: clamp(15px, 1.5vw, 18px); line-height: 1.6;">
|
||
<li>Formelle Demarche an USA</li>
|
||
<li>"Flagrante Verletzung"</li>
|
||
<li>"Feindselige Handlung"</li>
|
||
<li>Forderung: Sofortige Freilassung</li>
|
||
<li>Pressekonferenz Moskau</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="alert-box" style="margin-top: 25px; font-size: clamp(16px, 1.7vw, 20px); padding: 15px;">
|
||
⚠️ KONTEXT: Nur 4 Monate nach der Krim-Annexion<br>
|
||
US-Russland Beziehungen auf dem Tiefpunkt<br>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- SLIDE 12: URTEIL -->
|
||
<div class="slide" data-slide="12">
|
||
<h2>27 Jahre = Rekord</h2>
|
||
<div class="content-box" style="text-align: center; margin-bottom: 25px; padding: 15px;">
|
||
<h3 style="font-size: 30px; margin-bottom: 15px;">⚖️ 21. APRIL 2017</h3>
|
||
<p style="font-size: 26px; color: #FF0055;">
|
||
38 von 40 Anklagepunkten: <span class="highlight">SCHULDIG</span>
|
||
</p>
|
||
<p style="font-size: 18px; color: #B0B0B0; margin-top: 8px;">
|
||
Jury-Beratung: Nur 6 Stunden
|
||
</p>
|
||
</div>
|
||
<div class="grid-3">
|
||
<div class="stat-box" style="border-color: #FF0055;">
|
||
<span class="stat-number" style="color: #FF0055;">27</span>
|
||
<span class="stat-label">Jahre Haft<br><strong>(REKORD!)</strong></span>
|
||
</div>
|
||
<div class="stat-box" style="border-color: #FF0055;">
|
||
<span class="stat-number" style="color: #FF0055;">$169M</span>
|
||
<span class="stat-label">Wiedergutmachung<br>(nie gezahlt)</span>
|
||
</div>
|
||
<div class="stat-box" style="border-color: #FF0055;">
|
||
<span class="stat-number" style="color: #FF0055;">+28</span>
|
||
<span class="stat-label">Jahre<br>(weitere Fälle)</span>
|
||
</div>
|
||
</div>
|
||
<div class="quote-box" style="margin-top: 25px; border-color: #FFD700; color: #FFD700; font-size: 15px;">
|
||
"The bombing in Morocco was an invitation to right your wrongs and recognize you were given a second chance in life. Instead, you amassed a fortune at the expense of hundreds of small businesses. You were driven by one single goal: GREED."<br>
|
||
<span style="color: #B0B0B0;">— Judge Richard A. Jones</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- SLIDE 13: EPILOG Teil 1 - Der Austausch -->
|
||
<div class="slide" data-slide="13">
|
||
<h2>Der große Austausch 2024</h2>
|
||
<div class="content-box" style="text-align: center; margin-bottom: 20px; padding: 18px;">
|
||
<h3 style="font-size: clamp(22px, 2.2vw, 28px); color: #FFD700; margin-bottom: 12px;">🤝 1. AUGUST 2024</h3>
|
||
<p style="font-size: clamp(16px, 1.6vw, 20px); line-height: 1.6;">
|
||
Größter Gefangenenaustausch seit dem Kalten Krieg<br>
|
||
<span class="highlight">26 Personen</span> | Putin begrüßt Seleznev persönlich am Flughafen
|
||
</p>
|
||
</div>
|
||
<div class="split-content" style="gap: 20px; margin-top: 20px;">
|
||
<div class="content-box" style="border-color: #003B6F; padding: 18px;">
|
||
<h3 style="color: #003B6F; font-size: clamp(18px, 1.8vw, 22px); margin-bottom: 12px;">🇺🇸 USA ERHÄLT</h3>
|
||
<ul class="icon-list" style="font-size: clamp(15px, 1.5vw, 18px); line-height: 1.7;">
|
||
<li>Evan Gershkovich (WSJ Journalist)</li>
|
||
<li>Paul Whelan (Ex-Marine)</li>
|
||
<li>Alsu Kurmasheva (RFE Journalistin)</li>
|
||
<li>+ weitere Amerikaner</li>
|
||
</ul>
|
||
</div>
|
||
<div class="content-box" style="border-color: #FF0055; padding: 18px;">
|
||
<h3 style="color: #FF0055; font-size: clamp(18px, 1.8vw, 22px); margin-bottom: 12px;">🇷🇺 RUSSLAND ERHÄLT</h3>
|
||
<ul class="icon-list" style="font-size: clamp(15px, 1.5vw, 18px); line-height: 1.7;">
|
||
<li>Roman Seleznev (10 von 27 Jahren)</li>
|
||
<li>Vadim Krasikov (FSB-Attentäter)</li>
|
||
<li>+ weitere russische Häftlinge</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- SLIDE 14: EPILOG Teil 2 - Die Lektion -->
|
||
<div class="slide" data-slide="14">
|
||
<h2>Die Lektion</h2>
|
||
<div class="alert-box" style="background: rgba(0, 255, 65, 0.1); border-color: #00FF41; padding: 25px; margin: 30px auto; max-width: 900px;">
|
||
<h3 style="color: #FFD700; margin-bottom: 20px; font-size: clamp(20px, 2vw, 26px);">💡 DIE LEKTION</h3>
|
||
<p style="font-size: clamp(16px, 1.7vw, 20px); line-height: 1.7;">
|
||
Internationale Cybercrime-Bekämpfung ist <span class="highlight">BRUTAL SCHWER</span>,<br>
|
||
wenn Täter politisch geschützt sind und zu<br>
|
||
<span style="color: #FF0055;">diplomatischer Verhandlungsmasse</span> werden.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="roman-empire-quote" style="margin: 30px auto; max-width: 800px;">
|
||
"The roman empire has fallen"<br>
|
||
<span style="font-size: clamp(15px, 1.5vw, 18px); color: #B0B0B0;">— Irgendein dude auf Youtube</span>
|
||
</div>
|
||
|
||
<div style="text-align: center; margin-top: 40px;">
|
||
<h3 style="color: #00FF41; margin-bottom: 20px; font-size: clamp(18px, 1.8vw, 22px);">📱 Mehr erfahren?</h3>
|
||
<div id="qrcode"></div>
|
||
<p style="font-size: clamp(14px, 1.4vw, 16px); color: #B0B0B0; margin-top: 15px;">
|
||
Scanne den QR-Code für das YouTube-Video
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="slide-number">
|
||
<span id="currentSlide">1</span> / 14
|
||
</div>
|
||
|
||
<div class="controls">
|
||
<button class="btn" onclick="prevSlide()">◀ Zurück</button>
|
||
<button class="btn" onclick="nextSlide()">Weiter ▶</button>
|
||
</div>
|
||
|
||
<!-- Lightbox -->
|
||
<div class="lightbox" id="lightbox" onclick="closeLightbox()">
|
||
<span class="lightbox-close">×</span>
|
||
<img class="lightbox-content" id="lightbox-img" onclick="event.stopPropagation()">
|
||
</div>
|
||
|
||
<script>
|
||
let currentSlide = 1;
|
||
const totalSlides = 14;
|
||
|
||
// Initialize Particles.js (optional - fails gracefully if library not loaded)
|
||
if (typeof particlesJS !== 'undefined') {
|
||
particlesJS('particles-js', {
|
||
particles: {
|
||
number: { value: 80, density: { enable: true, value_area: 800 } },
|
||
color: { value: '#00FF41' },
|
||
shape: { type: 'circle' },
|
||
opacity: { value: 0.3, random: true },
|
||
size: { value: 3, random: true },
|
||
line_linked: {
|
||
enable: true,
|
||
distance: 150,
|
||
color: '#00FF41',
|
||
opacity: 0.2,
|
||
width: 1
|
||
},
|
||
move: {
|
||
enable: true,
|
||
speed: 2,
|
||
direction: 'none',
|
||
random: true,
|
||
straight: false,
|
||
out_mode: 'out',
|
||
bounce: false
|
||
}
|
||
},
|
||
interactivity: {
|
||
detect_on: 'canvas',
|
||
events: {
|
||
onhover: { enable: true, mode: 'repulse' },
|
||
resize: true
|
||
}
|
||
},
|
||
retina_detect: true
|
||
});
|
||
} else {
|
||
console.warn('particles.js library not loaded - continuing without background animation');
|
||
}
|
||
|
||
// Generate QR Code (YouTube video) - wait for library to load
|
||
function generateQRCode() {
|
||
const youtubeUrl = 'https://www.youtube.com/watch?v=6Chp12sEnWk';
|
||
const qrcodeElement = document.getElementById('qrcode');
|
||
|
||
if (typeof QRCode !== 'undefined' && qrcodeElement) {
|
||
try {
|
||
new QRCode(qrcodeElement, {
|
||
text: youtubeUrl,
|
||
width: 150,
|
||
height: 150,
|
||
colorDark: '#000000',
|
||
colorLight: '#ffffff'
|
||
});
|
||
} catch(e) {
|
||
console.warn('QR Code generation failed:', e);
|
||
}
|
||
} else {
|
||
console.warn('QRCode library not loaded or element not found');
|
||
}
|
||
}
|
||
|
||
// Image click to lightbox
|
||
document.addEventListener('click', function(e) {
|
||
if (e.target.classList.contains('slide-image')) {
|
||
openLightbox(e.target.src);
|
||
}
|
||
});
|
||
|
||
function openLightbox(src) {
|
||
document.getElementById('lightbox').classList.add('active');
|
||
document.getElementById('lightbox-img').src = src;
|
||
}
|
||
|
||
function closeLightbox() {
|
||
document.getElementById('lightbox').classList.remove('active');
|
||
}
|
||
|
||
function showSlide(n) {
|
||
const slides = document.querySelectorAll('.slide');
|
||
|
||
if (n > totalSlides) {
|
||
currentSlide = totalSlides;
|
||
return;
|
||
}
|
||
if (n < 1) {
|
||
currentSlide = 1;
|
||
return;
|
||
}
|
||
|
||
currentSlide = n;
|
||
|
||
slides.forEach(slide => {
|
||
slide.classList.remove('active');
|
||
});
|
||
|
||
const activeSlide = document.querySelector(`[data-slide="${currentSlide}"]`);
|
||
if (activeSlide) {
|
||
activeSlide.classList.add('active');
|
||
animateSlide(activeSlide);
|
||
}
|
||
|
||
document.getElementById('currentSlide').textContent = currentSlide;
|
||
}
|
||
|
||
function animateSlide(slide) {
|
||
// Animate elements within the slide using anime.js (if available)
|
||
if (typeof anime !== 'undefined') {
|
||
anime({
|
||
targets: slide.querySelectorAll('.stat-box, .content-box'),
|
||
translateY: [50, 0],
|
||
opacity: [0, 1],
|
||
delay: anime.stagger(100),
|
||
easing: 'easeOutExpo',
|
||
duration: 800
|
||
});
|
||
|
||
anime({
|
||
targets: slide.querySelectorAll('h2, h3'),
|
||
translateX: [-30, 0],
|
||
opacity: [0, 1],
|
||
easing: 'easeOutExpo',
|
||
duration: 600
|
||
});
|
||
}
|
||
|
||
// Animate images with fly-in effect
|
||
const images = slide.querySelectorAll('.slide-image');
|
||
images.forEach((img, index) => {
|
||
// Reset animation
|
||
img.classList.remove('animate-in');
|
||
// Trigger reflow
|
||
void img.offsetWidth;
|
||
// Add animation class with delay
|
||
setTimeout(() => {
|
||
img.classList.add('animate-in');
|
||
}, 300 + (index * 200));
|
||
});
|
||
}
|
||
|
||
function nextSlide() {
|
||
showSlide(currentSlide + 1);
|
||
}
|
||
|
||
function prevSlide() {
|
||
showSlide(currentSlide - 1);
|
||
}
|
||
|
||
// Keyboard navigation
|
||
document.addEventListener('keydown', (e) => {
|
||
// Don't navigate slides when lightbox is open
|
||
if (document.getElementById('lightbox').classList.contains('active')) {
|
||
if (e.key === 'Escape') {
|
||
closeLightbox();
|
||
}
|
||
return;
|
||
}
|
||
|
||
if (e.key === 'ArrowRight' || e.key === ' ') {
|
||
e.preventDefault();
|
||
nextSlide();
|
||
} else if (e.key === 'ArrowLeft') {
|
||
e.preventDefault();
|
||
prevSlide();
|
||
} else if (e.key === 'Home') {
|
||
e.preventDefault();
|
||
showSlide(1);
|
||
} else if (e.key === 'End') {
|
||
e.preventDefault();
|
||
showSlide(totalSlides);
|
||
}
|
||
});
|
||
|
||
// Initialize
|
||
window.addEventListener('load', () => {
|
||
generateQRCode();
|
||
showSlide(1);
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |