408 lines
17 KiB
HTML
408 lines
17 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Julien Bam - Songs aus der Bohne Übersicht | PonyWave Tools</title>
|
|
<link rel="icon" type="image/jpeg" href="https://tools.ponywave.de/bohne/icon.jpg">
|
|
<meta property="og:title" content="Julien Bam - Songs aus der Bohne Übersicht | PonyWave Tools">
|
|
<meta property="og:description" content="Eine Übersicht aller Videos der Songs aus der Bohne Saga von Julien Bam">
|
|
<meta property="og:type" content="website">
|
|
<meta property="og:url" content="https://tools.ponywave.de/bohne">
|
|
<meta property="og:image" content="https://tools.ponywave.de/bohne/icon.jpg">
|
|
<script defer src="https://stats.ponywave.de/script" data-website-id="9ef713d2-adb9-4906-9df5-708d8a8b9131" data-tag="bohne"></script>
|
|
<style>
|
|
body { font-family: Arial, sans-serif; max-width: 1200px; margin: 0 auto; padding: 20px; }
|
|
header {
|
|
text-align: center;
|
|
padding: 2rem 0;
|
|
margin-bottom: 2rem;
|
|
background: linear-gradient(135deg, #1a1a1a 0%, #4a4a4a 100%);
|
|
color: white;
|
|
border-radius: 10px;
|
|
}
|
|
header h1 { margin: 0; font-size: 2.5em; }
|
|
header p { margin: 1rem 0 0; opacity: 0.9; }
|
|
.category { margin: 3rem 0; padding: 1rem; border-bottom: 2px solid #eee; }
|
|
.video-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
|
gap: 2rem;
|
|
padding: 1rem 0;
|
|
}
|
|
.video-item {
|
|
text-align: center;
|
|
position: relative;
|
|
}
|
|
.thumbnail {
|
|
width: 100%;
|
|
height: 140px;
|
|
object-fit: cover;
|
|
border-radius: 8px;
|
|
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
|
|
transition: transform 0.2s;
|
|
filter: brightness(1);
|
|
}
|
|
.thumbnail:hover { transform: scale(1.03); }
|
|
.video-title {
|
|
margin: 8px 0;
|
|
font-size: 0.9em;
|
|
color: #333;
|
|
line-height: 1.4;
|
|
}
|
|
h2 { color: #2c3e50; margin-bottom: 1.5rem; }
|
|
.watched-checkbox {
|
|
position: absolute;
|
|
top: 10px;
|
|
right: 10px;
|
|
transform: scale(1.5);
|
|
z-index: 10;
|
|
}
|
|
.video-item.watched .thumbnail {
|
|
filter: brightness(0.7);
|
|
}
|
|
.stats {
|
|
text-align: center;
|
|
margin: 1rem 0;
|
|
font-size: 0.9em;
|
|
color: #666;
|
|
}
|
|
|
|
footer {
|
|
margin-top: 2rem;
|
|
padding: 1rem 0;
|
|
color: #666;
|
|
font-size: 0.9rem;
|
|
text-align: center;
|
|
border-top: 1px solid #ddd;
|
|
width: 100%;
|
|
}
|
|
|
|
footer a {
|
|
color: #7F006E;
|
|
text-decoration: none;
|
|
transition: color 0.3s;
|
|
}
|
|
|
|
footer a:hover {
|
|
color: #FF7FED;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.heart {
|
|
color: #e74c3c;
|
|
animation: heartbeat 1.5s infinite;
|
|
}
|
|
|
|
@keyframes heartbeat {
|
|
0% { transform: scale(1); }
|
|
50% { transform: scale(1.2); }
|
|
100% { transform: scale(1); }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<header>
|
|
<h1>Songs aus der Bohne Übersicht</h1>
|
|
<p>Eine komplette Übersicht aller Videos aus dem Julien Bam Universum</p>
|
|
<div class="stats">
|
|
Gesehen: <span id="watchedCount">0</span> von <span id="totalCount">0</span> Videos
|
|
</div>
|
|
</header>
|
|
|
|
<!-- OPTIONAL -->
|
|
<div class="category">
|
|
<h2>🔍 Optional (Hintergrundinfo)</h2>
|
|
<h4><i>(Nicht direkt relevant für die Hauptserie, aber Hintergrundinfo zur Herkunft der Bohnen)</i></h4>
|
|
<div class="video-grid">
|
|
<div class="video-item">
|
|
<a href="https://www.youtube.com/watch?v=v1mDeIkWR7c" target="_blank">
|
|
<img src="https://akamaru.de/scripts/img.php?url=https://img.youtube.com/vi/v1mDeIkWR7c/mqdefault.jpg"
|
|
class="thumbnail"
|
|
alt="Märchen in Asozial 1">
|
|
</a>
|
|
<p class="video-title">Märchen in Asozial 1</p>
|
|
</div>
|
|
<div class="video-item">
|
|
<a href="https://www.youtube.com/watch?v=2JOQSd1MB90" target="_blank">
|
|
<img src="https://akamaru.de/scripts/img.php?url=https://img.youtube.com/vi/2JOQSd1MB90/mqdefault.jpg"
|
|
class="thumbnail"
|
|
alt="Märchen in Asozial 2">
|
|
</a>
|
|
<p class="video-title">Märchen in Asozial 2</p>
|
|
</div>
|
|
<div class="video-item">
|
|
<a href="https://www.youtube.com/watch?v=xXHxd6JebbY" target="_blank">
|
|
<img src="https://akamaru.de/scripts/img.php?url=https://img.youtube.com/vi/xXHxd6JebbY/mqdefault.jpg"
|
|
class="thumbnail"
|
|
alt="Märchen in Asozial 3">
|
|
</a>
|
|
<p class="video-title">Märchen in Asozial 3</p>
|
|
</div>
|
|
<div class="video-item">
|
|
<a href="https://www.youtube.com/watch?v=K6BbVjo-UC8" target="_blank">
|
|
<img src="https://akamaru.de/scripts/img.php?url=https://img.youtube.com/vi/K6BbVjo-UC8/mqdefault.jpg"
|
|
class="thumbnail"
|
|
alt="Märchen in Asozial 4">
|
|
</a>
|
|
<p class="video-title">Märchen in Asozial 4</p>
|
|
</div>
|
|
<div class="video-item">
|
|
<a href="https://www.youtube.com/watch?v=hSREEzhCB6k" target="_blank">
|
|
<img src="https://akamaru.de/scripts/img.php?url=https://img.youtube.com/vi/hSREEzhCB6k/mqdefault.jpg"
|
|
class="thumbnail"
|
|
alt="Das letzte Märchen in Asozial Part 1">
|
|
</a>
|
|
<p class="video-title">Das letzte Märchen in Asozial (Part 1)</p>
|
|
</div>
|
|
<div class="video-item">
|
|
<a href="https://www.youtube.com/watch?v=H1p9k2rj-8U" target="_blank">
|
|
<img src="https://akamaru.de/scripts/img.php?url=https://img.youtube.com/vi/H1p9k2rj-8U/mqdefault.jpg"
|
|
class="thumbnail"
|
|
alt="Das letzte Märchen in Asozial Part 2">
|
|
</a>
|
|
<p class="video-title">Das letzte Märchen in Asozial (Part 2)</p>
|
|
</div>
|
|
<div class="video-item">
|
|
<a href="https://www.youtube.com/watch?v=aKJl0Rnqqpg" target="_blank">
|
|
<img src="https://akamaru.de/scripts/img.php?url=https://img.youtube.com/vi/aKJl0Rnqqpg/mqdefault.jpg"
|
|
class="thumbnail"
|
|
alt="Das letzte Märchen in Asozial Part 3">
|
|
</a>
|
|
<p class="video-title">Das letzte Märchen in Asozial (Part 3)</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- SPIN-OFFS -->
|
|
<div class="category">
|
|
<h2>🌠 Spin-offs</h2>
|
|
<h4><i>(Relevant für Mann im Mond)</i></h4>
|
|
<div class="video-grid">
|
|
<div class="video-item">
|
|
<a href="https://www.youtube.com/watch?v=LRaENLSfLIY" target="_blank">
|
|
<img src="https://akamaru.de/scripts/img.php?url=https://img.youtube.com/vi/LRaENLSfLIY/mqdefault.jpg"
|
|
class="thumbnail"
|
|
alt="Ehrenmänner of the Galaxy">
|
|
</a>
|
|
<p class="video-title">Ehrenmänner of the Galaxy</p>
|
|
</div>
|
|
<div class="video-item">
|
|
<a href="https://www.youtube.com/watch?v=07VfwFwqNks" target="_blank">
|
|
<img src="https://akamaru.de/scripts/img.php?url=https://img.youtube.com/vi/07VfwFwqNks/mqdefault.jpg"
|
|
class="thumbnail"
|
|
alt="Bikini Planet">
|
|
</a>
|
|
<p class="video-title">Bikini Planet - Ehrenmänner of the Galaxy 2</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- HAUPTSERIE -->
|
|
<div class="category">
|
|
<h2>🎵 Hauptserie</h2>
|
|
<div class="video-grid">
|
|
<div class="video-item">
|
|
<a href="https://www.youtube.com/watch?v=YcP5MEnPGyM" target="_blank">
|
|
<img src="https://akamaru.de/scripts/img.php?url=https://img.youtube.com/vi/YcP5MEnPGyM/mqdefault.jpg"
|
|
class="thumbnail"
|
|
alt="Songs aus der Bohne 1">
|
|
</a>
|
|
<p class="video-title">Songs aus der Bohne (Teil 1)</p>
|
|
</div>
|
|
<div class="video-item">
|
|
<a href="https://www.youtube.com/watch?v=3aMoo8ho0VY" target="_blank">
|
|
<img src="https://akamaru.de/scripts/img.php?url=https://img.youtube.com/vi/3aMoo8ho0VY/mqdefault.jpg"
|
|
class="thumbnail"
|
|
alt="Songs aus der Bohne 2">
|
|
</a>
|
|
<p class="video-title">Songs aus der Bohne (Teil 2)</p>
|
|
</div>
|
|
<div class="video-item">
|
|
<a href="https://www.youtube.com/watch?v=ZkGC8HQvPz8" target="_blank">
|
|
<img src="https://akamaru.de/scripts/img.php?url=https://img.youtube.com/vi/ZkGC8HQvPz8/mqdefault.jpg"
|
|
class="thumbnail"
|
|
alt="Songs aus der Bohne 3">
|
|
</a>
|
|
<p class="video-title">Songs aus der Bohne (Teil 3)</p>
|
|
</div>
|
|
<div class="video-item">
|
|
<a href="https://www.youtube.com/watch?v=kxHfPFnMVaA" target="_blank">
|
|
<img src="https://akamaru.de/scripts/img.php?url=https://img.youtube.com/vi/kxHfPFnMVaA/mqdefault.jpg"
|
|
class="thumbnail"
|
|
alt="Der letzte Song aus der Bohne Akt 1">
|
|
</a>
|
|
<p class="video-title">Der letzte Song aus der Bohne (Akt 1)</p>
|
|
</div>
|
|
<div class="video-item">
|
|
<a href="https://www.youtube.com/watch?v=IfBhRM-4vHU" target="_blank">
|
|
<img src="https://akamaru.de/scripts/img.php?url=https://img.youtube.com/vi/IfBhRM-4vHU/mqdefault.jpg"
|
|
class="thumbnail"
|
|
alt="Der letzte Song aus der Bohne Akt 2">
|
|
</a>
|
|
<p class="video-title">Der letzte Song aus der Bohne (Akt 2)</p>
|
|
</div>
|
|
<div class="video-item">
|
|
<a href="https://www.youtube.com/watch?v=rKidiBm4JGk" target="_blank">
|
|
<img src="https://akamaru.de/scripts/img.php?url=https://img.youtube.com/vi/rKidiBm4JGk/mqdefault.jpg"
|
|
class="thumbnail"
|
|
alt="Der letzte SONG des OSTERHASEN">
|
|
</a>
|
|
<p class="video-title">Der letzte SONG des OSTERHASEN</p>
|
|
</div>
|
|
<div class="video-item">
|
|
<a href="https://www.youtube.com/watch?v=iOd_IXAcyYE" target="_blank">
|
|
<img src="https://akamaru.de/scripts/img.php?url=https://img.youtube.com/vi/iOd_IXAcyYE/mqdefault.jpg"
|
|
class="thumbnail"
|
|
alt="Der letzte Song aus der Bohne Akt 3">
|
|
</a>
|
|
<p class="video-title">Der letzte Song aus der Bohne (Akt 3)</p>
|
|
</div>
|
|
<div class="video-item">
|
|
<a href="https://www.youtube.com/watch?v=jZIp4NBJLl0" target="_blank">
|
|
<img src="https://akamaru.de/scripts/img.php?url=https://img.youtube.com/vi/jZIp4NBJLl0/mqdefault.jpg"
|
|
class="thumbnail"
|
|
alt="Santa der Boss">
|
|
</a>
|
|
<p class="video-title">Santa der Boss</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- FORTSETZUNG -->
|
|
<div class="category">
|
|
<h2>🌙 Fortsetzung</h2>
|
|
<div class="video-grid">
|
|
<div class="video-item">
|
|
<a href="https://www.youtube.com/watch?v=CNju4qLDwHs" target="_blank">
|
|
<img src="https://akamaru.de/scripts/img.php?url=https://img.youtube.com/vi/CNju4qLDwHs/mqdefault.jpg"
|
|
class="thumbnail"
|
|
alt="Der Mann im Mond - Akt 1">
|
|
</a>
|
|
<p class="video-title">Der Mann im Mond - Akt 1</p>
|
|
</div>
|
|
<div class="video-item">
|
|
<a href="https://www.youtube.com/watch?v=BrfoYZQSwTw" target="_blank">
|
|
<img src="https://akamaru.de/scripts/img.php?url=https://img.youtube.com/vi/BrfoYZQSwTw/mqdefault.jpg"
|
|
class="thumbnail"
|
|
alt="Der Mann im Mond - Akt 2">
|
|
</a>
|
|
<p class="video-title">Der Mann im Mond - Akt 2</p>
|
|
</div>
|
|
<div class="video-item">
|
|
<a href="https://www.youtube.com/watch?v=kgGPUt7C6E8" target="_blank">
|
|
<img src="https://akamaru.de/scripts/img.php?url=https://img.youtube.com/vi/kgGPUt7C6E8/mqdefault.jpg"
|
|
class="thumbnail"
|
|
alt="Der Mann im Mond - Akt 3">
|
|
</a>
|
|
<p class="video-title">Der Mann im Mond - Akt 3</p>
|
|
</div>
|
|
<div class="video-item">
|
|
<a href="https://www.youtube.com/watch?v=NFlyVjVs3aI" target="_blank">
|
|
<img src="https://akamaru.de/scripts/img.php?url=https://img.youtube.com/vi/NFlyVjVs3aI/mqdefault.jpg"
|
|
class="thumbnail"
|
|
alt="Das Geheimnis der Zahnfee">
|
|
</a>
|
|
<p class="video-title">Das Geheimnis der Zahnfee</p>
|
|
</div>
|
|
<div class="video-item">
|
|
<a href="https://www.youtube.com/watch?v=rLEEOdFlnCY" target="_blank">
|
|
<img src="https://akamaru.de/scripts/img.php?url=https://img.youtube.com/vi/rLEEOdFlnCY/mqdefault.jpg"
|
|
class="thumbnail"
|
|
alt="Der Mann im Mond - Akt 4">
|
|
</a>
|
|
<p class="video-title">Der Mann im Mond - Akt 4</p>
|
|
</div>
|
|
<div class="video-item">
|
|
<a href="https://www.youtube.com/watch?v=V9IWsb9LbO0" target="_blank">
|
|
<img src="https://akamaru.de/scripts/img.php?url=https://img.youtube.com/vi/V9IWsb9LbO0/mqdefault.jpg"
|
|
class="thumbnail"
|
|
alt="Der Mann im Mond - Akt 5">
|
|
</a>
|
|
<p class="video-title">Der Mann im Mond - Akt 5</p>
|
|
</div>
|
|
<div class="video-item">
|
|
<a href="https://www.youtube.com/watch?v=3FDIiIxm0Ww" target="_blank">
|
|
<img src="https://akamaru.de/scripts/img.php?url=https://img.youtube.com/vi/3FDIiIxm0Ww/mqdefault.jpg"
|
|
class="thumbnail"
|
|
alt="Der Sandmann und die Fieberdüne">
|
|
</a>
|
|
<p class="video-title">Der Sandmann und die Fieberdüne</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- FINALE -->
|
|
<div class="category">
|
|
<h2>🎉 Finale</h2>
|
|
<div class="video-grid">
|
|
<div class="video-item">
|
|
<a href="https://www.youtube.com/watch?v=WLwkdOCeqYE" target="_blank">
|
|
<img src="https://akamaru.de/scripts/img.php?url=https://img.youtube.com/vi/WLwkdOCeqYE/mqdefault.jpg"
|
|
class="thumbnail"
|
|
alt="Der Mann im Mond - Das Finale">
|
|
</a>
|
|
<p class="video-title">Der Mann im Mond - Das Finale</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const videos = document.querySelectorAll('.video-item');
|
|
const watchedVideos = JSON.parse(localStorage.getItem('watchedBohneVideos') || '[]');
|
|
|
|
// Füge Checkboxen hinzu und markiere bereits gesehene Videos
|
|
videos.forEach(video => {
|
|
const videoId = video.querySelector('a').href.split('v=')[1];
|
|
const checkbox = document.createElement('input');
|
|
checkbox.type = 'checkbox';
|
|
checkbox.className = 'watched-checkbox';
|
|
checkbox.checked = watchedVideos.includes(videoId);
|
|
if (checkbox.checked) {
|
|
video.classList.add('watched');
|
|
}
|
|
|
|
checkbox.addEventListener('change', function() {
|
|
const videoId = this.parentElement.querySelector('a').href.split('v=')[1];
|
|
if (this.checked) {
|
|
watchedVideos.push(videoId);
|
|
video.classList.add('watched');
|
|
} else {
|
|
const index = watchedVideos.indexOf(videoId);
|
|
if (index > -1) {
|
|
watchedVideos.splice(index, 1);
|
|
}
|
|
video.classList.remove('watched');
|
|
}
|
|
localStorage.setItem('watchedBohneVideos', JSON.stringify(watchedVideos));
|
|
updateStats();
|
|
});
|
|
|
|
video.appendChild(checkbox);
|
|
});
|
|
|
|
function updateStats() {
|
|
const totalVideos = videos.length;
|
|
const watchedCount = document.querySelectorAll('.video-item.watched').length;
|
|
document.getElementById('watchedCount').textContent = watchedCount;
|
|
document.getElementById('totalCount').textContent = totalVideos;
|
|
}
|
|
|
|
updateStats();
|
|
|
|
// Jahr für das Copyright aktualisieren
|
|
document.getElementById('current-year').textContent = new Date().getFullYear();
|
|
});
|
|
</script>
|
|
|
|
<footer>
|
|
<p>
|
|
<a href="https://tools.ponywave.de/">Zurück zur Startseite</a> |
|
|
© <span id="current-year"></span> Akamaru | Made with <span class="heart">❤️</span> by Claude
|
|
</p>
|
|
</footer>
|
|
|
|
</body>
|
|
</html>
|