VFN/seleznev-vortrag
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Layout optimierung

Browse Source
This commit is contained in:
Marius Rometsch 2025-12-22 00:42:24 +01:00
parent c8d9161d97
commit 668eca6f2b
1 changed files with 324 additions and 307 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

631
präsentation.html
View File

@ -8,7 +8,7 @@
<!-- External Libraries --> <!-- 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/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://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js"></script> <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<style> <style>
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;700&family=Montserrat:wght@400;600;700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;700&family=Montserrat:wght@400;600;700&display=swap');
@ -48,9 +48,10 @@
top: 0; top: 0;
left: 0; left: 0;
display: none; display: none;
padding: 25px 50px 80px 50px; 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%); background: linear-gradient(135deg, rgba(10, 14, 39, 0.95) 0%, rgba(26, 31, 58, 0.95) 100%);
overflow: hidden; overflow-y: auto;
overflow-x: hidden;
} }
.slide.active { .slide.active {
@ -77,38 +78,38 @@
h1 { h1 {
font-family: 'Roboto Mono', monospace; font-family: 'Roboto Mono', monospace;
font-size: 56px; font-size: clamp(32px, 4vw, 56px);
color: #00FF41; color: #00FF41;
text-shadow: 0 0 20px rgba(0, 255, 65, 0.5); text-shadow: 0 0 20px rgba(0, 255, 65, 0.5);
margin-bottom: 15px; margin-bottom: clamp(10px, 1.5vh, 15px);
letter-spacing: -2px; letter-spacing: -2px;
} }
h2 { h2 {
font-family: 'Roboto Mono', monospace; font-family: 'Roboto Mono', monospace;
font-size: 36px; font-size: clamp(24px, 2.5vw, 36px);
color: #00FF41; color: #00FF41;
margin-bottom: 15px; margin-bottom: clamp(10px, 1.2vh, 15px);
letter-spacing: -1px; letter-spacing: -1px;
} }
h3 { h3 {
font-size: 24px; font-size: clamp(18px, 1.8vw, 24px);
color: #FFD700; color: #FFD700;
margin-bottom: 10px; margin-bottom: clamp(6px, 0.8vh, 10px);
} }
p { p {
font-size: 18px; font-size: clamp(14px, 1.3vw, 18px);
line-height: 1.4; line-height: 1.4;
margin-bottom: 8px; margin-bottom: clamp(6px, 0.6vh, 8px);
color: #E0E0E0; color: #E0E0E0;
} }
.subtitle { .subtitle {
font-size: 26px; font-size: clamp(18px, 2vw, 26px);
color: #B0B0B0; color: #B0B0B0;
margin-bottom: 20px; margin-bottom: clamp(15px, 1.5vh, 20px);
line-height: 1.3; line-height: 1.3;
} }
@ -136,15 +137,15 @@
.stat-number { .stat-number {
font-family: 'Roboto Mono', monospace; font-family: 'Roboto Mono', monospace;
font-size: 40px; font-size: clamp(28px, 3vw, 40px);
color: #FFD700; color: #FFD700;
font-weight: bold; font-weight: bold;
display: block; display: block;
margin-bottom: 8px; margin-bottom: clamp(6px, 0.6vh, 8px);
} }
.stat-label { .stat-label {
font-size: 16px; font-size: clamp(12px, 1.2vw, 16px);
color: #B0B0B0; color: #B0B0B0;
} }
@ -224,7 +225,7 @@
.icon-list { .icon-list {
list-style: none; list-style: none;
font-size: 16px; font-size: clamp(13px, 1.2vw, 16px);
line-height: 1.5; line-height: 1.5;
} }
@ -315,10 +316,10 @@
background: rgba(30, 30, 30, 0.6); background: rgba(30, 30, 30, 0.6);
border: 2px solid #00FF41; border: 2px solid #00FF41;
border-radius: 10px; border-radius: 10px;
padding: 25px; padding: clamp(15px, 2vh, 25px);
text-align: center; text-align: center;
margin: 15px 0; margin: clamp(10px, 1.2vh, 15px) 0;
font-size: 26px; font-size: clamp(18px, 2vw, 26px);
color: #FFD700; color: #FFD700;
} }
@ -340,31 +341,31 @@
.password-text { .password-text {
font-family: 'Courier New', monospace; font-family: 'Courier New', monospace;
font-size: 38px; font-size: clamp(28px, 3vw, 38px);
color: #FF0055; color: #FF0055;
letter-spacing: 5px; letter-spacing: clamp(3px, 0.4vw, 5px);
text-shadow: 0 0 10px rgba(255, 0, 85, 0.5); text-shadow: 0 0 10px rgba(255, 0, 85, 0.5);
} }
ul.features { ul.features {
list-style: none; list-style: none;
font-size: 20px; font-size: clamp(15px, 1.5vw, 20px);
line-height: 1.6; line-height: 1.6;
} }
ul.features li { ul.features li {
margin: 10px 0; margin: clamp(8px, 0.8vh, 10px) 0;
padding-left: 35px; padding-left: clamp(25px, 2.5vw, 35px);
position: relative; position: relative;
} }
ul.features li::before { ul.features li::before {
content: '✓'; content: '✓';
position: absolute; position: absolute;
left: 0; left: 0;
color: #00FF41; color: #00FF41;
font-weight: bold; font-weight: bold;
font-size: 24px; font-size: clamp(18px, 1.8vw, 24px);
} }
.center-content { .center-content {
@ -555,7 +556,7 @@
</div> </div>
</div> </div>
<!-- SLIDE 2: URSPRUNG --> <!-- SLIDE 2: URSPRUNG Teil 1 -->
<div class="slide" data-slide="2"> <div class="slide" data-slide="2">
<h2>Von 10m² zum Cyber-König</h2> <h2>Von 10m² zum Cyber-König</h2>
<div class="timeline"> <div class="timeline">
@ -564,58 +565,66 @@
<div class="timeline-item">2003</div> <div class="timeline-item">2003</div>
<div class="timeline-item">2005</div> <div class="timeline-item">2005</div>
</div> </div>
<div class="split-content"> <div class="content-box" style="margin: 20px auto; max-width: 900px;">
<div class="content-box"> <h3 style="color: #FF0055; text-align: center;">Der Albtraum beginnt</h3>
<h3 style="color: #FF0055;">Der Albtraum beginnt</h3> <ul class="icon-list" style="font-size: clamp(14px, 1.4vw, 17px); line-height: 1.6;">
<ul class="icon-list"> <li>🏚️ <strong>10m² Zimmer</strong> in Vladivostok – bitter arm</li>
<li>🏚️ <strong>10m² Zimmer</strong> in Vladivostok – bitter arm</li> <li>👨‍👩‍👦 Eltern geschieden als er 2 Jahre alt war</li>
<li>👨‍👩‍👦 Eltern geschieden als er 2 Jahre alt war</li> <li>🍺 Mutter: Supermarktkassiererin, Alkoholikerin</li>
<li>🍺 Mutter: Supermarktkassiererin, Alkoholikerin</li> <li>💀 <strong>Mit 17:</strong> Mutter tot in der Badewanne gefunden</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>📦 <strong>Am selben Tag:</strong> Onkel raubt ihn aus, wirft ihn raus</li> <li>🏠 Obdachlos bei Oma</li>
<li>🏠 Obdachlos bei Oma</li> <li>💻 Überlebt mit $5/Tag durch PC-Reparaturen</li>
<li>💻 Überlebt mit $5/Tag durch PC-Reparaturen</li> </ul>
</ul>
</div>
<div class="content-box">
<h3 style="color: #00FF41;">Die dunkle Transformation</h3>
<ul class="icon-list">
<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> </div>
<div class="quote-box" style="border-color: #FF0055;"> <div class="quote-box" style="border-color: #FF0055; margin-top: 20px;">
"I was 17, struggle hard, and lose my way into bad world."<br> "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> <span style="color: #B0B0B0;">— Roman Seleznev, handgeschriebener Brief an US-Gericht</span>
</div> </div>
</div> </div>
<!-- SLIDE 3: GESCHÄFTSMODELL --> <!-- SLIDE 3: URSPRUNG Teil 2 -->
<div class="slide" data-slide="3"> <div class="slide" data-slide="3">
<h2>Der "Amazon" der Kreditkarten</h2> <h2>Die dunkle Transformation</h2>
<div style="text-align: center; margin: 10px 0;"> <div class="content-box" style="margin: 20px auto; max-width: 900px;">
<div class="image-container"> <h3 style="color: #00FF41; text-align: center;">Vom Opfer zum Täter</h3>
<img src="" <ul class="icon-list" style="font-size: clamp(14px, 1.4vw, 17px); line-height: 1.8;">
alt="Track2.name Screenshot" class="slide-image" id="track2-img" <li>🧠 Autodidakt: Bringt sich Programmieren bei</li>
style="max-height: 200px; border-color: #FF0055;"> <li>👨‍💻 Alias <strong>"nCuX"</strong> = "Psycho" (explosives Temperament)</li>
<div class="image-caption">🌐 track2.name - Die automatisierte Carding-Plattform</div> <li>🌐 2003: Eintritt ins CarderPlanet Forum</li>
</div> <li>💳 2005: Start des Kreditkartenhandels</li>
</div> <li>👨‍👦 Vater: <strong>Valery Seleznev</strong>, Duma-Abgeordneter</li>
<div class="content-box" style="margin: 10px auto; max-width: 900px;"> <li>🛡️ Genießt FSB-Schutz durch politische Verbindungen</li>
<h3 style="text-align: center; margin-bottom: 12px;">🌐 track2.name (2009-2012)</h3>
<ul class="features" style="font-size: 18px;">
<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> </ul>
</div> </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="stats">
<div class="stat-box"> <div class="stat-box">
<span class="stat-number">747k</span> <span class="stat-number">747k</span>
@ -630,13 +639,13 @@
<span class="stat-label">Verkäufe<br>pro Woche</span> <span class="stat-label">Verkäufe<br>pro Woche</span>
</div> </div>
</div> </div>
<div class="alert-box"> <div class="alert-box" style="margin-top: 15px;">
💬 "Reinvented the market for stolen credit cards" — US Prosecutors 💬 "Reinvented the market for stolen credit cards" — US Prosecutors
</div> </div>
</div> </div>
<!-- SLIDE 4: OPFER --> <!-- SLIDE 5: OPFER -->
<div class="slide" data-slide="4"> <div class="slide" data-slide="5">
<h2>Von Köln nach Dortmund – aus Kreditkarten</h2> <h2>Von Köln nach Dortmund – aus Kreditkarten</h2>
<div class="map-visual"> <div class="map-visual">
📍 KÖLN ━━━━━━━━━━━━━━━━━━━━━ DORTMUND 📍<br> 📍 KÖLN ━━━━━━━━━━━━━━━━━━━━━ DORTMUND 📍<br>
@ -656,174 +665,187 @@
<span class="stat-label">Schaden<br>(nur Seattle)</span> <span class="stat-label">Schaden<br>(nur Seattle)</span>
</div> </div>
</div> </div>
<div style="text-align: center; margin: 10px 0;"> <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 15px; align-items: center;">
<div class="image-container"> <div style="text-align: center;">
<img src="" <div class="image-container">
alt="Broadway Grill" class="slide-image" id="broadway-img" <img src="./images/BroadwayGrill.png"
style="max-height: 160px;"> alt="Broadway Grill" class="slide-image" id="broadway-img"
<div class="image-caption">🍕 Broadway Grill, Seattle - Opfer des Hacks</div> 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>
<div class="content-box">
<h3>🍕 Case Study: Broadway Grill, Seattle</h3>
<ul class="icon-list">
<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: 16px;">
Ziele: Kleine Unternehmen ohne IT-Security Budget (Pizzerien, Bäckereien, Cafés)
</p>
</div> </div>
</div> </div>
<!-- SLIDE 5: EXPLOSION --> <!-- SLIDE 6: EXPLOSION Teil 1 -->
<div class="slide" data-slide="5"> <div class="slide" data-slide="6">
<h2>Plot Twist: Die Explosion</h2> <h2>Plot Twist: Die Explosion</h2>
<div style="text-align: center; margin-bottom: 10px;"> <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 15px; align-items: start;">
<div class="image-container"> <div style="text-align: center;">
<img src="" <div class="image-container">
alt="Café Argana destroyed" class="slide-image" id="argana-img" <img src="./images/marrakechCafe.png"
style="max-height: 150px; border-color: #FF0055;"> alt="Café Argana destroyed" class="slide-image" id="argana-img"
<div class="image-caption">💥 Café Argana nach dem Bombenanschlag, 28. April 2011</div> 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> </div>
<div class="content-box" style="margin-bottom: 10px;"> </div>
<h3>📅 28. April 2011 - Ein Monat nach Anklage</h3>
<ul class="icon-list" style="font-size: 15px; line-height: 1.4;"> <!-- SLIDE 7: EXPLOSION Teil 2 - Die Reaktion -->
<li>📍 Café Argana, Djemaa el-Fna, Marrakesch</li> <div class="slide" data-slide="7">
<li>🏨 Hotel verweigert Eintritt → gehen ins Café</li> <h2>Der Totgeglaubte kehrt zurück</h2>
<li>⏰ Kellner: "Dauert 30 Minuten" / "Bad idea"</li> <div class="split-content" style="gap: 20px; margin-top: 20px;">
<li>💥 Zwei Bomben explodieren (Al-Qaida)</li> <div class="content-box" style="border-color: #003B6F; padding: 20px;">
<li>☠️ 17 Tote, 25 Verletzte</li> <h3 style="color: #003B6F; font-size: clamp(18px, 1.8vw, 22px); margin-bottom: 15px;">🕵️ US Secret Service denkt:</h3>
<li>🧠 Roman: Großer Teil des Schädels weggerissen</li> <p style="font-size: clamp(16px, 1.6vw, 19px); line-height: 1.7; color: #B0B0B0;">
<li>✈️ Evakuierung nach Moskau, 2 Wochen Koma</li>
<li>🦾 Titanplatte ersetzt Schädelteile</li>
</ul>
</div>
<div class="split-content" style="margin-top: 10px;">
<div class="content-box" style="border-color: #003B6F;">
<h3 style="color: #003B6F;">🕵️ US Secret Service denkt:</h3>
<p style="font-size: 18px; line-height: 1.5; color: #B0B0B0;">
✓ "Er wird sterben"<br> ✓ "Er wird sterben"<br>
✓ "Oder ein Gemüse bleiben"<br> ✓ "Oder ein Gemüse bleiben"<br>
✓ <span style="color: #00FF41;">"Case closed"</span><br><br> ✓ <span style="color: #00FF41;">"Case closed"</span><br><br>
<span style="font-size: 16px; color: #FFD700;">Jan 2012: Shops geschlossen<br> <span style="font-size: clamp(15px, 1.5vw, 18px); color: #FFD700;">Jan 2012: Shops geschlossen<br>
"Ermittlung beendet ✓"</span> "Ermittlung beendet ✓"</span>
</p> </p>
</div> </div>
<div class="content-box" style="border-color: #FF0055;"> <div class="content-box" style="border-color: #FF0055; padding: 20px;">
<h3 style="color: #FF0055;">😈 Romans Reaktion 2013:</h3> <h3 style="color: #FF0055; font-size: clamp(18px, 1.8vw, 22px); margin-bottom: 15px;">😈 Romans Reaktion 2013:</h3>
<p style="font-size: 20px; margin-top: 8px; line-height: 1.4;"> <p style="font-size: clamp(16px, 1.6vw, 19px); line-height: 1.7;">
✓ Aufgewacht & genesen<br> ✓ Aufgewacht & genesen<br>
✓ Frau verlässt ihn im Koma<br> ✓ Frau verlässt ihn im Koma<br>
✓ Neues Alias: <span class="highlight">"2Pac"</span><br> ✓ Neues Alias: <span class="highlight">"2Pac"</span><br>
✓ Neue Website: <span class="highlight">2pac.cc</span><br> ✓ Neue Website: <span class="highlight">2pac.cc</span><br>
✓ <span style="color: #FF0055;">WEITERHACKEN</span><br><br> ✓ <span style="color: #FF0055;">WEITERHACKEN</span><br><br>
<span style="font-size: 16px; color: #B0B0B0;">"Wieso hat Gott mich gerettet?"</span> <span style="font-size: clamp(15px, 1.5vw, 18px); color: #B0B0B0;">"Wieso hat Gott mich gerettet?"</span>
</p> </p>
</div> </div>
</div> </div>
<div class="alert-box" style="margin-top: 25px; font-size: clamp(16px, 1.7vw, 20px);">
<div class="alert-box" style="margin-top: 10px; padding: 10px; font-size: 18px;">
🎭 Die Ermittler waren schockiert: Der "tote" Hacker ist zurück 🎭 Die Ermittler waren schockiert: Der "tote" Hacker ist zurück
</div> </div>
</div> </div>
<!-- SLIDE 6: DIE JAGD --> <!-- SLIDE 8: DIE JAGD -->
<div class="slide" data-slide="6"> <div class="slide" data-slide="8">
<h2>10 Jahre Katz und Maus</h2> <h2>10 Jahre Katz und Maus</h2>
<div class="timeline" style="margin-bottom: 15px;"> <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 20px; align-items: start;">
<div class="timeline-item">2005</div> <div style="text-align: center;">
<div class="timeline-item">2009</div> <div class="image-container">
<div class="timeline-item">2011</div> <img src="./images/RomanMitDodgeCharger.jpg"
<div class="timeline-item">2014</div> alt="Roman with yellow Dodge" class="slide-image" id="dodge-img"
</div> style="max-height: clamp(180px, 24vh, 230px);">
<div style="text-align: center; margin: 10px 0;"> <div class="image-caption">🚗 Roman mit seinem gelben Dodge Challenger vor dem Roten Platz</div>
<div class="image-container"> </div>
<img src="" </div>
alt="Roman with yellow Dodge" class="slide-image" id="dodge-img" <div class="content-box">
style="max-height: 170px;"> <h3 style="font-size: clamp(18px, 1.8vw, 22px); margin-bottom: 15px;">🕵️ Die Jagd des Secret Service</h3>
<div class="image-caption">🚗 Roman mit seinem gelben Dodge Challenger vor dem Roten Platz</div> <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> </div>
<div class="content-box"> <div class="quote-box" style="margin-top: 20px;">
<h3>🕵️ Die Jagd des Secret Service</h3>
<ul class="features" style="font-size: 17px; line-height: 1.5;">
<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 class="quote-box" style="margin-top: 15px;">
"Ich habe Schutz durch das FSB-Zentrum für Informationssicherheit erhalten"<br> "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> <span style="color: #B0B0B0;">— Roman Seleznev in Chat-Nachrichten an Komplizen (2008)</span>
</div> </div>
</div> </div>
<!-- SLIDE 7: FESTNAHME --> <!-- SLIDE 9: FESTNAHME Teil 1 -->
<div class="slide" data-slide="7"> <div class="slide" data-slide="9">
<h2>Luxusurlaub mit Folgen</h2> <h2>Luxusurlaub mit Folgen</h2>
<div style="text-align: center; margin-bottom: 10px;"> <div style="text-align: center; margin-bottom: 20px;">
<div class="image-container"> <div class="image-container">
<img src="" <img src="./images/RomanmitFamilie.jpg"
alt="Roman with family" class="slide-image" id="family-img" alt="Roman with family" class="slide-image" id="family-img"
style="max-height: 160px;"> style="max-height: clamp(150px, 20vh, 200px);">
<div class="image-caption">👨‍👩‍👧 Roman mit seiner Frau und Kind - vor der Festnahme</div> <div class="image-caption">👨‍👩‍👧 Roman mit seiner Frau und Kind - vor der Festnahme</div>
</div> </div>
</div> </div>
<div class="content-box" style="padding: 12px;"> <div class="content-box" style="padding: 20px; max-width: 800px; margin: 0 auto;">
<h3>🏝️ Juli 2014: Malediven</h3> <h3>🏝️ Juli 2014: Malediven</h3>
<p style="font-size: 18px; line-height: 1.5;"> <p style="font-size: clamp(16px, 1.6vw, 20px); line-height: 1.6;">
💰 $1,400/Nacht - Teuerste Villa im Resort<br> 💰 $1,400/Nacht - Teuerste Villa im Resort<br>
💬 "Ich werde meinen eigenen Diener haben" 💬 "Ich werde meinen eigenen Diener haben"
</p> </p>
</div> </div>
<div class="timeline" style="margin: 15px 0;"> <div class="timeline" style="margin: 30px 0;">
<div class="timeline-item" style="width: 80px; height: 80px; font-size: 14px;">1. Juli<br>📡</div> <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: 80px; height: 80px; font-size: 14px;">5. 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: 80px; height: 80px; font-size: 14px;">Guam<br>🇺🇸</div> <div class="timeline-item" style="width: 90px; height: 90px; font-size: clamp(13px, 1.3vw, 15px);">Guam<br>🇺🇸</div>
</div> </div>
<div class="password-reveal" style="padding: 18px;"> <div class="alert-box" style="margin-top: 30px; font-size: clamp(16px, 1.7vw, 20px);">
<h3 style="color: #FF0055; margin-bottom: 12px; font-size: 22px;">🔓 DER LAPTOP-JACKPOT</h3> ⚠️ Secret Service wartet bereits am Flughafen
<p style="font-size: 17px; margin-bottom: 12px;"> </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> ✓ Laptop die ganze Zeit EINGESCHALTET<br>
✓ Username überall: "smaus1"<br> ✓ Username überall: "smaus1"<br>
✓ Kino-Website schickte Passwort im Klartext ✓ Kino-Website schickte Passwort im Klartext
</p> </p>
<div style="margin: 15px 0;"> <div style="margin: 30px 0;">
<p style="font-size: 16px; color: #B0B0B0; margin-bottom: 6px;">Passwort:</p> <p style="font-size: clamp(15px, 1.5vw, 18px); color: #B0B0B0; margin-bottom: 10px;">Passwort:</p>
<div class="password-text glitch" style="font-size: 36px;">Ochko123</div> <div class="password-text glitch">Ochko123</div>
<p style="font-size: 14px; color: #FF0055; margin-top: 6px;">(Russisch: "Arschloch123")</p>
</div> </div>
<p style="font-size: 20px; color: #FFD700; margin-top: 15px;"> <p style="font-size: clamp(18px, 2vw, 24px); color: #FFD700; margin-top: 30px;">
💳 1,7 MILLIONEN Kreditkarten gefunden 💳 1,7 MILLIONEN Kreditkarten gefunden
</p> </p>
</div> </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> </div>
<!-- SLIDE 8: VATER & GEOPOLITIK --> <!-- SLIDE 11: VATER & GEOPOLITIK -->
<div class="slide" data-slide="8"> <div class="slide" data-slide="11">
<h2>Diplomatischer Shitstorm</h2> <h2>Diplomatischer Shitstorm</h2>
<div style="text-align: center; margin-bottom: 10px;"> <div style="text-align: center; margin-bottom: 15px;">
<div class="image-container"> <div class="image-container">
<img src="" <img src="./images/VaterVonRoman.jpg.webp"
alt="Valery Seleznev" class="slide-image" id="valery-img" alt="Valery Seleznev" class="slide-image" id="valery-img"
style="max-height: 150px;"> style="max-height: clamp(160px, 20vh, 200px);">
<div class="image-caption">👨‍⚖️ Valery Seleznev - Duma-Abgeordneter und Romans Vater</div> <div class="image-caption">👨‍⚖️ Valery Seleznev - Duma-Abgeordneter und Romans Vater</div>
</div> </div>
</div> </div>
<div class="split-content"> <div class="split-content" style="margin-top: 20px;">
<div class="content-box"> <div class="content-box" style="padding: 20px;">
<h3>👨 Valery Seleznev</h3> <h3 style="font-size: clamp(18px, 1.8vw, 22px); margin-bottom: 12px;">👨 Valery Seleznev</h3>
<p style="font-size: 15px; margin-bottom: 10px;">Duma-Abgeordneter (LDPR) | Putin-nah</p> <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: 16px; line-height: 1.5;"> <ul class="icon-list" style="font-size: clamp(15px, 1.5vw, 18px); line-height: 1.6;">
<li>"Entführung durch die USA!"</li> <li>"Entführung durch die USA!"</li>
<li>"Menschenfresser-Urteil"</li> <li>"Menschenfresser-Urteil"</li>
<li>"Internet-Bin-Laden"</li> <li>"Internet-Bin-Laden"</li>
@ -832,9 +854,9 @@
<li>"Hat nichts mit Computern zu tun"</li> <li>"Hat nichts mit Computern zu tun"</li>
</ul> </ul>
</div> </div>
<div class="content-box"> <div class="content-box" style="padding: 20px;">
<h3>🇷🇺 Russland reagiert</h3> <h3 style="font-size: clamp(18px, 1.8vw, 22px); margin-bottom: 12px;">🇷🇺 Russland reagiert</h3>
<ul class="icon-list" style="font-size: 16px; line-height: 1.5;"> <ul class="icon-list" style="font-size: clamp(15px, 1.5vw, 18px); line-height: 1.6;">
<li>Formelle Demarche an USA</li> <li>Formelle Demarche an USA</li>
<li>"Flagrante Verletzung"</li> <li>"Flagrante Verletzung"</li>
<li>"Feindselige Handlung"</li> <li>"Feindselige Handlung"</li>
@ -843,19 +865,14 @@
</ul> </ul>
</div> </div>
</div> </div>
<div class="alert-box" style="margin-top: 15px; font-size: 18px; padding: 12px;"> <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> ⚠️ KONTEXT: Nur 4 Monate nach der Krim-Annexion<br>
US-Russland Beziehungen auf dem Tiefpunkt US-Russland Beziehungen auf dem Tiefpunkt<br>
</div>
<div class="timeline" style="margin-top: 15px;">
<div class="timeline-item">2014<br>📅</div>
<div style="flex: 1; text-align: center; color: #00FF41; font-size: 16px;">━━━ 10 Jahre ━━━</div>
<div class="timeline-item">2024<br>🤝</div>
</div> </div>
</div> </div>
<!-- SLIDE 9: URTEIL --> <!-- SLIDE 12: URTEIL -->
<div class="slide" data-slide="9"> <div class="slide" data-slide="12">
<h2>27 Jahre = Rekord</h2> <h2>27 Jahre = Rekord</h2>
<div class="content-box" style="text-align: center; margin-bottom: 25px; padding: 15px;"> <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> <h3 style="font-size: 30px; margin-bottom: 15px;">⚖️ 21. APRIL 2017</h3>
@ -886,53 +903,58 @@
</div> </div>
</div> </div>
<!-- SLIDE 10: EPILOG --> <!-- SLIDE 13: EPILOG Teil 1 - Der Austausch -->
<div class="slide" data-slide="10"> <div class="slide" data-slide="13">
<h2>Der große Austausch 2024</h2> <h2>Der große Austausch 2024</h2>
<div class="content-box" style="text-align: center; margin-bottom: 20px; padding: 15px;"> <div class="content-box" style="text-align: center; margin-bottom: 20px; padding: 18px;">
<h3 style="font-size: 28px; color: #FFD700;">🤝 1. AUGUST 2024</h3> <h3 style="font-size: clamp(22px, 2.2vw, 28px); color: #FFD700; margin-bottom: 12px;">🤝 1. AUGUST 2024</h3>
<p style="font-size: 20px; margin-top: 12px;"> <p style="font-size: clamp(16px, 1.6vw, 20px); line-height: 1.6;">
Größter Gefangenenaustausch seit dem Kalten Krieg<br> Größter Gefangenenaustausch seit dem Kalten Krieg<br>
<span class="highlight">26 Personen</span> | Putin begrüßt Seleznev persönlich am Flughafen <span class="highlight">26 Personen</span> | Putin begrüßt Seleznev persönlich am Flughafen
</p> </p>
</div> </div>
<div class="split-content"> <div class="split-content" style="gap: 20px; margin-top: 20px;">
<div class="content-box" style="border-color: #003B6F;"> <div class="content-box" style="border-color: #003B6F; padding: 18px;">
<h3 style="color: #003B6F;">🇺🇸 USA ERHÄLT</h3> <h3 style="color: #003B6F; font-size: clamp(18px, 1.8vw, 22px); margin-bottom: 12px;">🇺🇸 USA ERHÄLT</h3>
<ul class="icon-list"> <ul class="icon-list" style="font-size: clamp(15px, 1.5vw, 18px); line-height: 1.7;">
<li>Evan Gershkovich (WSJ Journalist)</li> <li>Evan Gershkovich (WSJ Journalist)</li>
<li>Paul Whelan (Ex-Marine)</li> <li>Paul Whelan (Ex-Marine)</li>
<li>Alsu Kurmasheva (RFE Journalistin)</li> <li>Alsu Kurmasheva (RFE Journalistin)</li>
<li>+ weitere Amerikaner</li> <li>+ weitere Amerikaner</li>
</ul> </ul>
</div> </div>
<div class="content-box" style="border-color: #FF0055;"> <div class="content-box" style="border-color: #FF0055; padding: 18px;">
<h3 style="color: #FF0055;">🇷🇺 RUSSLAND ERHÄLT</h3> <h3 style="color: #FF0055; font-size: clamp(18px, 1.8vw, 22px); margin-bottom: 12px;">🇷🇺 RUSSLAND ERHÄLT</h3>
<ul class="icon-list"> <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>Roman Seleznev (10 von 27 Jahren)</li>
<li>Vadim Krasikov (FSB-Attentäter)</li> <li>Vadim Krasikov (FSB-Attentäter)</li>
<li>+ weitere russische Häftlinge</li> <li>+ weitere russische Häftlinge</li>
</ul> </ul>
</div> </div>
</div> </div>
<div class="alert-box" style="background: rgba(0, 255, 65, 0.1); border-color: #00FF41; padding: 15px; font-size: 18px;"> </div>
<h3 style="color: #FFD700; margin-bottom: 15px; font-size: 22px;">💡 DIE LEKTION</h3>
<p style="font-size: 19px; line-height: 1.5;"> <!-- 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> Internationale Cybercrime-Bekämpfung ist <span class="highlight">BRUTAL SCHWER</span>,<br>
wenn Täter politisch geschützt sind und zu<br> wenn Täter politisch geschützt sind und zu<br>
<span style="color: #FF0055;">diplomatischer Verhandlungsmasse</span> werden. <span style="color: #FF0055;">diplomatischer Verhandlungsmasse</span> werden.
</p> </p>
</div> </div>
<div class="roman-empire-quote"> <div class="roman-empire-quote" style="margin: 30px auto; max-width: 800px;">
"The roman empire has fallen"<br> "The roman empire has fallen"<br>
<span style="font-size: 18px; color: #B0B0B0;">— Irgendein dude auf Youtube</span> <span style="font-size: clamp(15px, 1.5vw, 18px); color: #B0B0B0;">— Irgendein dude auf Youtube</span>
</div> </div>
<div style="text-align: center; margin-top: 20px;"> <div style="text-align: center; margin-top: 40px;">
<h3 style="color: #00FF41; margin-bottom: 15px; font-size: 22px;">📱 Mehr erfahren?</h3> <h3 style="color: #00FF41; margin-bottom: 20px; font-size: clamp(18px, 1.8vw, 22px);">📱 Mehr erfahren?</h3>
<div id="qrcode"></div> <div id="qrcode"></div>
<p style="font-size: 16px; color: #B0B0B0; margin-top: 12px;"> <p style="font-size: clamp(14px, 1.4vw, 16px); color: #B0B0B0; margin-top: 15px;">
Scanne den QR-Code für das YouTube-Video Scanne den QR-Code für das YouTube-Video
</p> </p>
</div> </div>
@ -940,7 +962,7 @@
</div> </div>
<div class="slide-number"> <div class="slide-number">
<span id="currentSlide">1</span> / 10 <span id="currentSlide">1</span> / 14
</div> </div>
<div class="controls"> <div class="controls">
@ -956,74 +978,67 @@
<script> <script>
let currentSlide = 1; let currentSlide = 1;
const totalSlides = 10; const totalSlides = 14;
// Initialize Particles.js // Initialize Particles.js (optional - fails gracefully if library not loaded)
particlesJS('particles-js', { if (typeof particlesJS !== 'undefined') {
particles: { particlesJS('particles-js', {
number: { value: 80, density: { enable: true, value_area: 800 } }, particles: {
color: { value: '#00FF41' }, number: { value: 80, density: { enable: true, value_area: 800 } },
shape: { type: 'circle' }, color: { value: '#00FF41' },
opacity: { value: 0.3, random: true }, shape: { type: 'circle' },
size: { value: 3, random: true }, opacity: { value: 0.3, random: true },
line_linked: { size: { value: 3, random: true },
enable: true, line_linked: {
distance: 150, enable: true,
color: '#00FF41', distance: 150,
opacity: 0.2, color: '#00FF41',
width: 1 opacity: 0.2,
width: 1
},
move: {
enable: true,
speed: 2,
direction: 'none',
random: true,
straight: false,
out_mode: 'out',
bounce: false
}
}, },
move: { interactivity: {
enable: true, detect_on: 'canvas',
speed: 2, events: {
direction: 'none', onhover: { enable: true, mode: 'repulse' },
random: true, resize: true
straight: false, }
out_mode: 'out', },
bounce: false retina_detect: true
}
},
interactivity: {
detect_on: 'canvas',
events: {
onhover: { enable: true, mode: 'repulse' },
resize: true
}
},
retina_detect: true
});
// Generate QR Code (YouTube video)
const youtubeUrl = 'https://www.youtube.com/watch?v=6Chp12sEnWk';
new QRCode(document.getElementById('qrcode'), {
text: youtubeUrl,
width: 150,
height: 150,
colorDark: '#000000',
colorLight: '#ffffff'
});
// Load images from ./images/ folder
function loadImages() {
const imageMap = {
'track2-img': 'WerbungimCarderforum.png',
'broadway-img': 'BroadwayGrill.png',
'argana-img': 'marrakechCafe.png',
'family-img': 'RomanmitFamilie.jpg',
'valery-img': 'VaterVonRoman.jpg.webp',
'dodge-img': 'RomanMitDodgeCharger.jpg'
};
Object.entries(imageMap).forEach(([id, filename]) => {
const img = document.getElementById(id);
if (img) {
img.src = `./images/${filename}`;
img.onerror = function() {
console.warn(`Image not found: ./images/${filename}`);
this.src = 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="400" height="300"%3E%3Crect fill="%231E1E1E" width="400" height="300"/%3E%3Ctext fill="%2300FF41" font-family="monospace" font-size="14" x="50%25" y="50%25" text-anchor="middle"%3EBild nicht gefunden%3C/text%3E%3Ctext fill="%23B0B0B0" font-family="monospace" font-size="12" x="50%25" y="60%25" text-anchor="middle"%3E${filename}%3C/text%3E%3C/svg%3E';
};
}
}); });
} 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 // Image click to lightbox
@ -1070,24 +1085,26 @@
} }
function animateSlide(slide) { function animateSlide(slide) {
// Animate elements within the slide using anime.js // Animate elements within the slide using anime.js (if available)
anime({ if (typeof anime !== 'undefined') {
targets: slide.querySelectorAll('.stat-box, .content-box'), anime({
translateY: [50, 0], targets: slide.querySelectorAll('.stat-box, .content-box'),
opacity: [0, 1], translateY: [50, 0],
delay: anime.stagger(100), opacity: [0, 1],
easing: 'easeOutExpo', delay: anime.stagger(100),
duration: 800 easing: 'easeOutExpo',
}); duration: 800
});
anime({
targets: slide.querySelectorAll('h2, h3'),
translateX: [-30, 0],
opacity: [0, 1],
easing: 'easeOutExpo',
duration: 600
});
}
anime({
targets: slide.querySelectorAll('h2, h3'),
translateX: [-30, 0],
opacity: [0, 1],
easing: 'easeOutExpo',
duration: 600
});
// Animate images with fly-in effect // Animate images with fly-in effect
const images = slide.querySelectorAll('.slide-image'); const images = slide.querySelectorAll('.slide-image');
images.forEach((img, index) => { images.forEach((img, index) => {
@ -1137,7 +1154,7 @@
// Initialize // Initialize
window.addEventListener('load', () => { window.addEventListener('load', () => {
loadImages(); generateQRCode();
showSlide(1); showSlide(1);
}); });
</script> </script>