220 lines
7.5 KiB
HTML
220 lines
7.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>RedscapeFactory | Le Trajet</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> |