This commit is contained in:
Ghislain Larose
220
podcasts/parlons-sport-auto/parlons-sport-auto.html
Normal file
220
podcasts/parlons-sport-auto/parlons-sport-auto.html
Normal file
@@ -0,0 +1,220 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>RedscapeFactory | Parlons Sport Auto</title>
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:url" content="https://redscapefactory.com/">
|
||||
<meta property="og:title" content="RedscapeFactory">
|
||||
<meta property="og:description" content="The Factory Of Sounds">
|
||||
<meta property="og:image" content="https://redscapefactory.com/assets/img/live-preview.png">
|
||||
<meta property="og:site_name" content="REDSCAPEFACTORY">
|
||||
<link rel="stylesheet" href="../../style.css">
|
||||
<link rel="icon" type="image/png" href="../../assets/img/favicon.png?v=2">
|
||||
<link rel="apple-touch-icon" href="../../assets/img/favicon.png">
|
||||
</head>
|
||||
<body class="site-frame">
|
||||
<header>
|
||||
<nav>
|
||||
<div class="logo">
|
||||
<a href="../../index.html">
|
||||
<img src="../../assets/img/logo.png" alt="REDSCAPEFACTORY">
|
||||
</a>
|
||||
</div>
|
||||
<ul class="nav-links">
|
||||
<li><a href="../../index.html">Home</a></li>
|
||||
|
||||
<li class="has-dropdown">
|
||||
<a href="#">Music</a>
|
||||
<ul class="dropdown">
|
||||
<li><a href="../../music/asceptic-siliceum.html">Asceptic Siliceum</a></li>
|
||||
<li><a href="../../music/asceptic.html">Asceptic</a></li>
|
||||
<li><a href="../../music/arisi-namaz.html">Arisi Namaz</a></li>
|
||||
<li><a href="../../music/physicalscience.html">PHYSICALSCIENCE</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li class="has-dropdown">
|
||||
<a href="#">Others</a>
|
||||
<ul class="dropdown">
|
||||
<li><a href="../../podcasts.html">Podcasts</a></li>
|
||||
<li><a href="../../composer.html">Composer</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li><a href="../../gallery.html">Gallery</a></li>
|
||||
<li><a href="../../about.html">About</a></li>
|
||||
<li><a href="../../contact.html">Contact</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<section class="project-intro-section">
|
||||
<div class="hero-container">
|
||||
<div class="hero-description">
|
||||
<div class="brand-line"><span>PODCAST PROJECT</span></div>
|
||||
<h1 id="pod-title" style="font-size: 2.5rem; margin: 10px 0;">Chargement...</h1>
|
||||
<p id="pod-subtitle" style="color: #888; letter-spacing: 1px; text-transform: uppercase; font-size: 0.7rem; margin-bottom: 20px;"></p>
|
||||
<p id="pod-desc" class="intro-text"></p>
|
||||
</div>
|
||||
<div class="hero-visual">
|
||||
<img id="pod-image" src="" alt="" style="max-width: 400px; float: right;">
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="podcasts-grid-container">
|
||||
<div id="episodes-grid" class="podcasts-grid">
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<div id="audio-player-bar" class="player-fixed">
|
||||
<div class="player-content">
|
||||
<div class="player-info">
|
||||
<span class="player-status">NOW PLAYING</span>
|
||||
<span id="current-ep-name" class="player-title">Selectionnez un épisode...</span>
|
||||
</div>
|
||||
|
||||
<div class="player-controls">
|
||||
<audio id="player-core" controls></audio>
|
||||
</div>
|
||||
|
||||
<button class="player-close" onclick="closePlayer()">×</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
async function init() {
|
||||
console.log("Démarrage du chargement...");
|
||||
try {
|
||||
// 1. Chargement des infos du podcast (Chemin direct)
|
||||
const rP = await fetch('podcast.json');
|
||||
if (!rP.ok) throw new Error("Fichier podcasts.json introuvable (Erreur " + rP.status + ")");
|
||||
const dP = await rP.json();
|
||||
|
||||
// Au lieu de mettre tout le texte brut, on coupe avant le désordre XML
|
||||
const cleanDesc = dP.description.split('<link>')[0];
|
||||
|
||||
document.getElementById('pod-title').innerText = dP.title;
|
||||
document.getElementById('pod-subtitle').innerText = dP.subtitle;
|
||||
document.getElementById('pod-desc').innerText = cleanDesc; // On affiche la version propre
|
||||
document.getElementById('pod-image').src = dP.image;
|
||||
|
||||
// 2. Chargement des épisodes (Chemin direct)
|
||||
const rE = await fetch('episodes.json');
|
||||
if (!rE.ok) throw new Error("Fichier episodes.json introuvable (Erreur " + rE.status + ")");
|
||||
const episodes = await rE.json();
|
||||
const grid = document.getElementById('episodes-grid');
|
||||
|
||||
grid.innerHTML = '';
|
||||
|
||||
episodes.forEach(ep => {
|
||||
const div = document.createElement('div');
|
||||
div.className = 'podcast-card';
|
||||
div.innerHTML = `
|
||||
<div class="podcast-image-wrapper">
|
||||
<img src="./images/${ep.id}.jpg" alt="${ep.title}" onerror="this.src='${ep.cover}'">
|
||||
<div class="btn-play-overlay" onclick="play('${ep.audio}', '${ep.title.replace(/'/g, "\\'")}')">
|
||||
<span>PLAY</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="podcast-info">
|
||||
<h3>${ep.title}</h3>
|
||||
<p>${ep.duration} — ${new Date(ep.date).toLocaleDateString('fr-FR')}</p>
|
||||
</div>
|
||||
`;
|
||||
grid.appendChild(div);
|
||||
});
|
||||
console.log("Chargement réussi.");
|
||||
|
||||
} catch (error) {
|
||||
console.error("Détails de l'erreur:", error);
|
||||
document.getElementById('pod-title').innerText = "Erreur de chargement";
|
||||
// Affiche l'erreur technique pour t'aider à débugger
|
||||
document.getElementById('pod-desc').innerHTML = "Détail : " + error.message + "<br>Vérifiez que les fichiers sont bien dans le dossier <strong>/podcasts/le-trajet/</strong>";
|
||||
}
|
||||
}
|
||||
|
||||
function play(url, title) {
|
||||
const bar = document.getElementById('audio-player-bar');
|
||||
const player = document.getElementById('player-core');
|
||||
document.getElementById('current-ep-name').innerText = title;
|
||||
|
||||
// On utilise flex pour respecter le layout du nouveau CSS
|
||||
bar.style.display = 'flex';
|
||||
player.src = url;
|
||||
player.play();
|
||||
}
|
||||
|
||||
function closePlayer() {
|
||||
const bar = document.getElementById('audio-player-bar');
|
||||
const player = document.getElementById('player-core');
|
||||
player.pause();
|
||||
bar.style.display = 'none';
|
||||
}
|
||||
|
||||
init();
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/* Style spécifique pour le bouton Play dans la grille d'épisodes */
|
||||
.btn-play-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.75); /* Plus sombre */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
opacity: 0;
|
||||
transition: 0.3s;
|
||||
cursor: pointer;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.btn-play-overlay span {
|
||||
border: 1px solid #00f0ff; /* Liseré couleur néon pour le rappel audio */
|
||||
color: #00f0ff;
|
||||
padding: 10px 25px;
|
||||
font-size: 0.8rem;
|
||||
letter-spacing: 2px;
|
||||
background: rgba(0,0,0,0.4);
|
||||
}
|
||||
|
||||
.podcast-card:hover .btn-play-overlay {
|
||||
opacity: 1;
|
||||
}
|
||||
.podcast-card {
|
||||
border: 1px solid #222;
|
||||
background: #050505;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.podcast-card:hover {
|
||||
transform: translateY(-5px);
|
||||
border-color: #00f0ff;
|
||||
}
|
||||
|
||||
/* On s'assure que le titre ne dépasse pas */
|
||||
.podcast-info h3 {
|
||||
font-size: 0.75rem !important;
|
||||
line-height: 1.4;
|
||||
min-height: 40px; /* Aligne les boutons si les titres font 2 lignes */
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.podcast-info p {
|
||||
font-size: 0.6rem;
|
||||
color: #666;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
</style>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user