Premier commit
This commit is contained in:
commit
b477d8e5d5
BIN
favicon.jpg
Normal file
BIN
favicon.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 230 KiB |
BIN
import/.DS_Store
vendored
Normal file
BIN
import/.DS_Store
vendored
Normal file
Binary file not shown.
BIN
import/audio/.DS_Store
vendored
Normal file
BIN
import/audio/.DS_Store
vendored
Normal file
Binary file not shown.
BIN
import/audio/Song-Of-The-Racle.mp3
Normal file
BIN
import/audio/Song-Of-The-Racle.mp3
Normal file
Binary file not shown.
BIN
import/images/.DS_Store
vendored
Normal file
BIN
import/images/.DS_Store
vendored
Normal file
Binary file not shown.
BIN
import/images/radiogarage_logo.jpg
Normal file
BIN
import/images/radiogarage_logo.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 230 KiB |
BIN
import/images/test-image.jpg
Normal file
BIN
import/images/test-image.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 699 KiB |
301
index.html
Normal file
301
index.html
Normal file
@ -0,0 +1,301 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="fr">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="style/reset.css">
|
||||||
|
<link rel="stylesheet" href="style/style.css">
|
||||||
|
<link rel="stylesheet" media="screen and (max-width: 667px)" href="style/phone.css">
|
||||||
|
<link rel="stylesheet" href="https://use.typekit.net/qpi5siq.css">
|
||||||
|
<link rel="icon" type="image/x-icon" href="favicon.jpg">
|
||||||
|
|
||||||
|
|
||||||
|
<title>Radio Garage</title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<!--
|
||||||
|
___ __ _ ______ _______ __ __
|
||||||
|
| | | | | || | | || |_| |
|
||||||
|
| | | |_| || _ || ___|| |
|
||||||
|
| | | || | | || |___ | |
|
||||||
|
| | | _ || |_| || ___| | |
|
||||||
|
| | | | | || || |___ | _ |
|
||||||
|
|___| |_| |__||______| |_______||__| |__|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<div id="header">
|
||||||
|
|
||||||
|
<div id="name">
|
||||||
|
<button class="nav-home" onclick="showPage('home', this)" >Radio Garage</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="navigation">
|
||||||
|
<div id="archives-button">
|
||||||
|
<button class="nav-btn" onclick="showPage('archives', this)">Archives</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="apropos-button">
|
||||||
|
<button class="nav-btn" onclick="showPage('about', this)">À propos</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="player">
|
||||||
|
<div id="info-player">
|
||||||
|
<h4 id="second-title">Il n’y a aucun direct en ce moment… dsl :(</h4>
|
||||||
|
<h4 id="title">mais ça arrive !!</h4>
|
||||||
|
<div class="controls">
|
||||||
|
<div id="playPauseBtn" class="play-btn">Lecture</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<audio id="myAudio" src="import/audio/Song-Of-The-Racle.mp3"></audio>
|
||||||
|
|
||||||
|
<div class="seek-container">
|
||||||
|
<input type="range" id="seekSlider" value="0" min="0" step="0.01">
|
||||||
|
<div class="progress-overlay" id="progressOverlay"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="home" class="page">
|
||||||
|
<div id="home-box">
|
||||||
|
|
||||||
|
<h2>Prochain rdv direct</h2>
|
||||||
|
|
||||||
|
<div class="audio-line">
|
||||||
|
<div class="audio-info">
|
||||||
|
<div class="und-audio-info">
|
||||||
|
<h4 class="date-desktop">22.05.2025</h4>
|
||||||
|
<h4 class="date-mobile">Jeudi 22 mai 2025</h4>
|
||||||
|
<h4 class="hour">10:30</h4>
|
||||||
|
<h4 class="title">Titre de l'émission</h4>
|
||||||
|
<h4 class="autors">Auteurice(s)</h4>
|
||||||
|
<h4 class="duration">Durée inconnue</h4>
|
||||||
|
</div>
|
||||||
|
<div class="button-box">
|
||||||
|
<button class="listen-button" data-src="import/audio/test-01.mp3" data-title="01" data-second-title="001">Écouter</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="audio-text">
|
||||||
|
<img src="import/images/test-image.jpg">
|
||||||
|
<p>
|
||||||
|
Description de l’émission + liens utiles de la personne
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="audio-line">
|
||||||
|
<div class="audio-info">
|
||||||
|
<div class="und-audio-info">
|
||||||
|
<h4 class="date-desktop">22.05.2025</h4>
|
||||||
|
<h4 class="date-mobile">Jeudi 22 mai 2025</h4>
|
||||||
|
<h4 class="hour">10:30</h4>
|
||||||
|
<h4 class="title">Titre de l'émission</h4>
|
||||||
|
<h4 class="autors">Auteurice(s)</h4>
|
||||||
|
<h4 class="duration">Durée inconnue</h4>
|
||||||
|
</div>
|
||||||
|
<div class="button-box">
|
||||||
|
<button class="listen-button" data-src="import/audio/test-01.mp3" data-title="01" data-second-title="001">Écouter</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="audio-text">
|
||||||
|
<img src="import/images/test-image.jpg">
|
||||||
|
<p>
|
||||||
|
Description de l’émission + liens utiles de la personne
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="audio-line">
|
||||||
|
<div class="audio-info">
|
||||||
|
<div class="und-audio-info">
|
||||||
|
<h4 class="date-desktop">22.05.2025</h4>
|
||||||
|
<h4 class="date-mobile">Jeudi 22 mai 2025</h4>
|
||||||
|
<h4 class="hour">10:30</h4>
|
||||||
|
<h4 class="title">Titre de l'émission</h4>
|
||||||
|
<h4 class="autors">Auteurice(s)</h4>
|
||||||
|
<h4 class="duration">Durée inconnue</h4>
|
||||||
|
</div>
|
||||||
|
<div class="button-box">
|
||||||
|
<button class="listen-button" data-src="import/audio/test-01.mp3" data-title="01" data-second-title="001">Écouter</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="audio-text">
|
||||||
|
<img src="import/images/test-image.jpg">
|
||||||
|
<p>
|
||||||
|
Description de l’émission + liens utiles de la personne
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="logoandcredits">
|
||||||
|
<p>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<img src="import/images/radiogarage_logo.jpg" id="logo">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!--
|
||||||
|
_______ _______ _______ __ __ _______
|
||||||
|
| _ || _ || || | | || |
|
||||||
|
| |_| || |_| || _ || | | ||_ _|
|
||||||
|
| || || | | || |_| | | |
|
||||||
|
| || _ | | |_| || | | |
|
||||||
|
| _ || |_| || || | | |
|
||||||
|
|__| |__||_______||_______||_______| |___|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<div id="about" class="page" style="display: none;">
|
||||||
|
<div id="apropos-box">
|
||||||
|
|
||||||
|
<div id="info-apropos">
|
||||||
|
|
||||||
|
<div id="presentation">
|
||||||
|
<h3 class="title-apropos">Présentation</h3>
|
||||||
|
<p class="text-apropos">
|
||||||
|
Web radio 100% auto-gérée par les étudiantxes et membres de l’ésadhar Le Havre–Rouen, créée en 2025. <br>
|
||||||
|
Radio Garage encourage toutes les formes de création sonores et radiophoniques, la documentation et l’archivage des temps forts de l’école et est ouverte aux contributions ponctuelles comme longues durées.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div id="gestionmaintenance">
|
||||||
|
<h3 class="title-apropos">Gestion et maintenance</h3>
|
||||||
|
<p class="text-apropos">
|
||||||
|
La gestion et la maintenance de Radio Garage se fait par cycle et par groupe<br>
|
||||||
|
d’au moins 3 personnes.<br>
|
||||||
|
Les missions sont les suivantes :<br>
|
||||||
|
Maintient et actualisation du site web<br>
|
||||||
|
Gestion de la mise en ligne des pièces sonores<br>
|
||||||
|
Gestion et coordination des contributeurxices<br>
|
||||||
|
Organisation d’événements<br>
|
||||||
|
Gestion du compte Instagram et de la communication interne.<br>
|
||||||
|
<br>
|
||||||
|
Pour cette année de lancement, ces missions sont assurées par :<br>
|
||||||
|
Méline Grellier (étudiante en 4ESP)<br>
|
||||||
|
Louise Fantozzi (étudiante en 4DGI)
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div id="contact">
|
||||||
|
<h3 class="title-apropos">Contact</h3>
|
||||||
|
<p class="text-apropos">
|
||||||
|
Pour toutes envie de contributions, de discussion ou autre, pour nous contacter c’est par ici : <a href="mailto:radio.garage@outlook.fr" target="_blank">radio.garage@outlook.fr</a> ou par là : <a href="https://www.instagram.com/radio__garage/" target="_blank">@radio__garage</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="logoandcredits">
|
||||||
|
<p>
|
||||||
|
Web design, logo et identité : <a href="">Méline Grellier</a> et <a href="">Louise Fantozzi</a><br>
|
||||||
|
Développement : <a href="">Odilon Aouatah</a><br>
|
||||||
|
Typographie : Covik Sans Mono
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<img src="import/images/radiogarage_logo.jpg" id="logo">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!--
|
||||||
|
_______ ______ _______ __ __ ___ __ __ _______ _______
|
||||||
|
| _ || _ | | || | | || | | | | || || |
|
||||||
|
| |_| || | || | || |_| || | | |_| || ___|| _____|
|
||||||
|
| || |_||_ | || || | | || |___ | |_____
|
||||||
|
| || __ || _|| || | | || ___||_____ |
|
||||||
|
| _ || | | || |_ | _ || | | | | |___ _____| |
|
||||||
|
|__| |__||___| |_||_______||__| |__||___| |___| |_______||_______|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<div id="archives" class="page" style="display: none;">
|
||||||
|
<div id="archives-box">
|
||||||
|
|
||||||
|
<div class="audio-line">
|
||||||
|
<div class="audio-info">
|
||||||
|
<div class="und-audio-info">
|
||||||
|
<h4 class="date-desktop">08.02.2025</h4>
|
||||||
|
<h4 class="second-title">Visite sonore d'atelier</h4>
|
||||||
|
<h4 class="title">#01 Songs of serigraphy</h4>
|
||||||
|
<h4 class="autors">Méline Grellier, Louise Fantozzi</h4>
|
||||||
|
<h4 class="date-mobile">08.02.2025</h4>
|
||||||
|
<h4 class="duration">xx'xx''</h4>
|
||||||
|
</div>
|
||||||
|
<div class="button-box">
|
||||||
|
<button class="listen-button" data-src="import/audio/test-01.mp3" data-title="01" data-second-title="001">Écouter</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="audio-text">
|
||||||
|
<img src="import/images/test-image.jpg">
|
||||||
|
<p>
|
||||||
|
Dit voir est un programme court proposé par Sally Bonn qui donne la parole à ceux qui aiment les œuvres et les font voir par leurs mots.<br><br>
|
||||||
|
|
||||||
|
Sally Bonn est maître de conférences en Esthétique à l’Université de Picardie, critique d’art et commissaire d’exposition. Elle dirige la collection d’écrits d’artistes Les Indiscipliné.e.s aux éditions Macula. Son dernier ouvrage paru : Écrire, écrire, écrire, aux éditions Arléa, 2022.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="audio-line">
|
||||||
|
<div class="audio-info">
|
||||||
|
<div class="und-audio-info">
|
||||||
|
<h4 class="date-desktop">08.02.2025</h4>
|
||||||
|
<h4 class="second-title">Visite sonore d'atelier</h4>
|
||||||
|
<h4 class="title">#01 Songs of serigraphy</h4>
|
||||||
|
<h4 class="autors">Méline Grellier, Louise Fantozzi</h4>
|
||||||
|
<h4 class="date-mobile">08.02.2025</h4>
|
||||||
|
<h4 class="duration">xx'xx''</h4>
|
||||||
|
</div>
|
||||||
|
<div class="button-box">
|
||||||
|
<button class="listen-button" data-src="import/audio/test-01.mp3" data-title="01" data-second-title="001">Écouter</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="audio-text">
|
||||||
|
<img src="import/images/test-image.jpg">
|
||||||
|
<p>
|
||||||
|
Dit voir est un programme court proposé par Sally Bonn qui donne la parole à ceux qui aiment les œuvres et les font voir par leurs mots.<br><br>
|
||||||
|
|
||||||
|
Sally Bonn est maître de conférences en Esthétique à l’Université de Picardie, critique d’art et commissaire d’exposition. Elle dirige la collection d’écrits d’artistes Les Indiscipliné.e.s aux éditions Macula. Son dernier ouvrage paru : Écrire, écrire, écrire, aux éditions Arléa, 2022.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="audio-line">
|
||||||
|
<div class="audio-info">
|
||||||
|
<div class="und-audio-info">
|
||||||
|
<h4 class="date-desktop">08.02.2025</h4>
|
||||||
|
<h4 class="second-title">Visite sonore d'atelier</h4>
|
||||||
|
<h4 class="title">#01 Songs of serigraphy</h4>
|
||||||
|
<h4 class="autors">Méline Grellier, Louise Fantozzi</h4>
|
||||||
|
<h4 class="date-mobile">08.02.2025</h4>
|
||||||
|
<h4 class="duration">xx'xx''</h4>
|
||||||
|
</div>
|
||||||
|
<div class="button-box">
|
||||||
|
<button class="listen-button" data-src="import/audio/test-01.mp3" data-title="01" data-second-title="001">Écouter</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="audio-text">
|
||||||
|
<img src="import/images/test-image.jpg">
|
||||||
|
<p>
|
||||||
|
Dit voir est un programme court proposé par Sally Bonn qui donne la parole à ceux qui aiment les œuvres et les font voir par leurs mots.<br><br>
|
||||||
|
|
||||||
|
Sally Bonn est maître de conférences en Esthétique à l’Université de Picardie, critique d’art et commissaire d’exposition. Elle dirige la collection d’écrits d’artistes Les Indiscipliné.e.s aux éditions Macula. Son dernier ouvrage paru : Écrire, écrire, écrire, aux éditions Arléa, 2022.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="logoandcredits">
|
||||||
|
<p>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<img src="import/images/radiogarage_logo.jpg" id="logo">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
|
||||||
|
<script src="js/player-and-archiveplayer.js" defer></script>
|
||||||
|
<script src="js/changement-page.js" defer></script>
|
||||||
|
<script src="js/affichage-info-archives.js" defer></script>
|
||||||
|
</html>
|
||||||
BIN
js/.DS_Store
vendored
Normal file
BIN
js/.DS_Store
vendored
Normal file
Binary file not shown.
17
js/affichage-info-archives.js
Normal file
17
js/affichage-info-archives.js
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
const audioLines = document.querySelectorAll('.audio-line');
|
||||||
|
|
||||||
|
audioLines.forEach(line => {
|
||||||
|
const header = line.querySelector('.audio-info');
|
||||||
|
|
||||||
|
header.addEventListener('click', () => {
|
||||||
|
const isActive = line.classList.contains('active');
|
||||||
|
|
||||||
|
// Fermer tous les autres
|
||||||
|
audioLines.forEach(l => l.classList.remove('active'));
|
||||||
|
|
||||||
|
// Si ce n'était pas déjà ouvert, on l'ouvre
|
||||||
|
if (!isActive) {
|
||||||
|
line.classList.add('active');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
27
js/changement-page.js
Normal file
27
js/changement-page.js
Normal file
@ -0,0 +1,27 @@
|
|||||||
|
function showPage(pageId, button) {
|
||||||
|
// Masquer toutes les sections avec la classe "page"
|
||||||
|
document.querySelectorAll('.page').forEach(page => {
|
||||||
|
page.style.display = 'none';
|
||||||
|
});
|
||||||
|
|
||||||
|
// Afficher la section demandée
|
||||||
|
const selectedPage = document.getElementById(pageId);
|
||||||
|
if (selectedPage) {
|
||||||
|
selectedPage.style.display = 'block';
|
||||||
|
}
|
||||||
|
|
||||||
|
// Retirer la classe active de tous les conteneurs de boutons
|
||||||
|
document.querySelectorAll('#archives-button, #apropos-button').forEach(div => {
|
||||||
|
div.classList.remove('active');
|
||||||
|
});
|
||||||
|
|
||||||
|
// Ajouter la classe active au conteneur du bouton cliqué
|
||||||
|
if (button && button.parentElement) {
|
||||||
|
button.parentElement.classList.add('active');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Affiche la section home par défaut au chargement
|
||||||
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
showPage('home');
|
||||||
|
});
|
||||||
79
js/player-and-archiveplayer copie.js
Normal file
79
js/player-and-archiveplayer copie.js
Normal file
@ -0,0 +1,79 @@
|
|||||||
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
const audio = document.getElementById('myAudio');
|
||||||
|
const playPauseBtn = document.getElementById('playPauseBtn');
|
||||||
|
const seekSlider = document.getElementById('seekSlider');
|
||||||
|
const progressOverlay = document.getElementById('progressOverlay');
|
||||||
|
const title = document.getElementById('title');
|
||||||
|
const secondTitle = document.getElementById('second-title');
|
||||||
|
|
||||||
|
let isDragging = false;
|
||||||
|
let animationFrameId = null;
|
||||||
|
|
||||||
|
// Détection mobile
|
||||||
|
const isMobile = /Mobi|Android/i.test(navigator.userAgent);
|
||||||
|
|
||||||
|
// Initialiser le texte du bouton Play/Pause au chargement
|
||||||
|
playPauseBtn.textContent = isMobile ? '▶' : 'Lecture';
|
||||||
|
|
||||||
|
// Synchronisation de la barre pendant la lecture
|
||||||
|
function updateProgress() {
|
||||||
|
if (!isDragging) {
|
||||||
|
seekSlider.value = audio.currentTime;
|
||||||
|
const percent = (audio.currentTime / audio.duration) * 100;
|
||||||
|
progressOverlay.style.width = percent + "%";
|
||||||
|
}
|
||||||
|
animationFrameId = requestAnimationFrame(updateProgress);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Bouton Play/Pause
|
||||||
|
playPauseBtn.addEventListener('click', () => {
|
||||||
|
if (audio.paused) {
|
||||||
|
audio.play();
|
||||||
|
playPauseBtn.textContent = isMobile ? '⏸' : 'Pause';
|
||||||
|
updateProgress();
|
||||||
|
} else {
|
||||||
|
audio.pause();
|
||||||
|
playPauseBtn.textContent = isMobile ? '▶' : 'Lecture';
|
||||||
|
cancelAnimationFrame(animationFrameId);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Drag slider
|
||||||
|
seekSlider.addEventListener('input', () => {
|
||||||
|
isDragging = true;
|
||||||
|
const percent = (seekSlider.value / audio.duration) * 100;
|
||||||
|
progressOverlay.style.width = percent + "%";
|
||||||
|
});
|
||||||
|
|
||||||
|
seekSlider.addEventListener('change', () => {
|
||||||
|
audio.currentTime = seekSlider.value;
|
||||||
|
isDragging = false;
|
||||||
|
});
|
||||||
|
|
||||||
|
// Quand un bouton "Écouter" est cliqué
|
||||||
|
document.querySelectorAll('.listen-button').forEach(button => {
|
||||||
|
button.addEventListener('click', () => {
|
||||||
|
const newSrc = button.dataset.src;
|
||||||
|
const mainTitle = button.dataset.title;
|
||||||
|
const subTitle = button.dataset.secondTitle;
|
||||||
|
|
||||||
|
audio.pause();
|
||||||
|
cancelAnimationFrame(animationFrameId);
|
||||||
|
|
||||||
|
audio.src = newSrc;
|
||||||
|
audio.load();
|
||||||
|
|
||||||
|
title.textContent = mainTitle;
|
||||||
|
secondTitle.textContent = subTitle;
|
||||||
|
|
||||||
|
audio.addEventListener('loadedmetadata', () => {
|
||||||
|
seekSlider.max = audio.duration;
|
||||||
|
seekSlider.value = 0;
|
||||||
|
progressOverlay.style.width = "0%";
|
||||||
|
audio.play();
|
||||||
|
playPauseBtn.textContent = isMobile ? '⏸' : 'Pause';
|
||||||
|
updateProgress();
|
||||||
|
}, { once: true });
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
79
js/player-and-archiveplayer.js
Normal file
79
js/player-and-archiveplayer.js
Normal file
@ -0,0 +1,79 @@
|
|||||||
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
const audio = document.getElementById('myAudio');
|
||||||
|
const playPauseBtn = document.getElementById('playPauseBtn');
|
||||||
|
const seekSlider = document.getElementById('seekSlider');
|
||||||
|
const progressOverlay = document.getElementById('progressOverlay');
|
||||||
|
const title = document.getElementById('title');
|
||||||
|
const secondTitle = document.getElementById('second-title');
|
||||||
|
|
||||||
|
let isDragging = false;
|
||||||
|
let animationFrameId = null;
|
||||||
|
|
||||||
|
const isMobile = /Mobi|Android/i.test(navigator.userAgent);
|
||||||
|
playPauseBtn.textContent = isMobile ? '▶' : 'Lecture';
|
||||||
|
|
||||||
|
// Met à jour la barre de progression
|
||||||
|
function updateProgress() {
|
||||||
|
if (!isDragging && !isNaN(audio.duration)) {
|
||||||
|
seekSlider.value = audio.currentTime;
|
||||||
|
const percent = (audio.currentTime / audio.duration) * 100;
|
||||||
|
progressOverlay.style.width = percent + "%";
|
||||||
|
}
|
||||||
|
animationFrameId = requestAnimationFrame(updateProgress);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Play / Pause
|
||||||
|
playPauseBtn.addEventListener('click', () => {
|
||||||
|
if (audio.paused) {
|
||||||
|
audio.play();
|
||||||
|
playPauseBtn.textContent = isMobile ? '⏸' : 'Pause';
|
||||||
|
updateProgress();
|
||||||
|
} else {
|
||||||
|
audio.pause();
|
||||||
|
playPauseBtn.textContent = isMobile ? '▶' : 'Lecture';
|
||||||
|
cancelAnimationFrame(animationFrameId);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Drag de la barre
|
||||||
|
seekSlider.addEventListener('input', () => {
|
||||||
|
isDragging = true;
|
||||||
|
const percent = (seekSlider.value / audio.duration) * 100;
|
||||||
|
progressOverlay.style.width = percent + "%";
|
||||||
|
});
|
||||||
|
|
||||||
|
seekSlider.addEventListener('change', () => {
|
||||||
|
isDragging = false;
|
||||||
|
audio.currentTime = parseFloat(seekSlider.value);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Quand l'audio change (durée chargée)
|
||||||
|
audio.addEventListener('loadedmetadata', () => {
|
||||||
|
seekSlider.max = audio.duration;
|
||||||
|
});
|
||||||
|
|
||||||
|
// Quand un bouton "Écouter" est cliqué
|
||||||
|
document.querySelectorAll('.listen-button').forEach(button => {
|
||||||
|
button.addEventListener('click', () => {
|
||||||
|
const newSrc = button.getAttribute('data-src');
|
||||||
|
const newTitle = button.getAttribute('data-title');
|
||||||
|
const newSecondTitle = button.getAttribute('data-second-title');
|
||||||
|
|
||||||
|
if (audio.src !== location.href + newSrc) {
|
||||||
|
audio.src = newSrc;
|
||||||
|
title.textContent = newTitle || '';
|
||||||
|
secondTitle.textContent = newSecondTitle || '';
|
||||||
|
|
||||||
|
audio.load();
|
||||||
|
audio.play();
|
||||||
|
playPauseBtn.textContent = isMobile ? '⏸' : 'Pause';
|
||||||
|
updateProgress();
|
||||||
|
} else {
|
||||||
|
// Si on reclique sur le même, on relance la lecture
|
||||||
|
audio.currentTime = 0;
|
||||||
|
audio.play();
|
||||||
|
playPauseBtn.textContent = isMobile ? '⏸' : 'Pause';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
BIN
style/.DS_Store
vendored
Normal file
BIN
style/.DS_Store
vendored
Normal file
Binary file not shown.
466
style/phone.css
Normal file
466
style/phone.css
Normal file
@ -0,0 +1,466 @@
|
|||||||
|
:root {
|
||||||
|
--main-color: black ;
|
||||||
|
--alternative-color: white ;
|
||||||
|
--interactive-color: grey;
|
||||||
|
}
|
||||||
|
|
||||||
|
a{
|
||||||
|
color: var(--main-color);
|
||||||
|
text-decoration: underline;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover{
|
||||||
|
background-color: var(--main-color);
|
||||||
|
color: var(--alternative-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
body{
|
||||||
|
font-family: "covik-sans-mono", sans-serif;
|
||||||
|
font-weight: 500;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
#logoandcredits{
|
||||||
|
height: fit-content; width: 100%;
|
||||||
|
position: relative; bottom: auto;
|
||||||
|
margin-top: 25vh; margin-bottom: 3vh;
|
||||||
|
|
||||||
|
display: flex; justify-content: space-between;
|
||||||
|
align-items: end;
|
||||||
|
}
|
||||||
|
|
||||||
|
#logo{
|
||||||
|
width: auto; height: 20vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
#credits{
|
||||||
|
width: fit-content;
|
||||||
|
display: flex; justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#logoandcredits p{
|
||||||
|
width: 70vw;
|
||||||
|
line-height: 2.5vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
#logoandcredits p a{
|
||||||
|
color: var(--main-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
#logoandcredits p a:hover{
|
||||||
|
color: var(--alternative-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
$$\ $$\ $$\ $$\ $$$$$$$\ $$\
|
||||||
|
$$ | $$ | $$ | $$ | $$ __$$\ $$ |
|
||||||
|
$$ | $$ | $$$$$$\ $$$$$$\ $$$$$$$ | $$$$$$\ $$$$$$\ $$$$$$\ $$$$$$$\ $$$$$$$ | $$ | $$ |$$ | $$$$$$\ $$\ $$\ $$$$$$\ $$$$$$\
|
||||||
|
$$$$$$$$ |$$ __$$\ \____$$\ $$ __$$ |$$ __$$\ $$ __$$\ \____$$\ $$ __$$\ $$ __$$ | $$$$$$$ |$$ | \____$$\ $$ | $$ |$$ __$$\ $$ __$$\
|
||||||
|
$$ __$$ |$$$$$$$$ | $$$$$$$ |$$ / $$ |$$$$$$$$ |$$ | \__| $$$$$$$ |$$ | $$ |$$ / $$ | $$ ____/ $$ | $$$$$$$ |$$ | $$ |$$$$$$$$ |$$ | \__|
|
||||||
|
$$ | $$ |$$ ____|$$ __$$ |$$ | $$ |$$ ____|$$ | $$ __$$ |$$ | $$ |$$ | $$ | $$ | $$ |$$ __$$ |$$ | $$ |$$ ____|$$ |
|
||||||
|
$$ | $$ |\$$$$$$$\ \$$$$$$$ |\$$$$$$$ |\$$$$$$$\ $$ | \$$$$$$$ |$$ | $$ |\$$$$$$$ | $$ | $$ |\$$$$$$$ |\$$$$$$$ |\$$$$$$$\ $$ |
|
||||||
|
\__| \__| \_______| \_______| \_______| \_______|\__| \_______|\__| \__| \_______| \__| \__| \_______| \____$$ | \_______|\__|
|
||||||
|
$$\ $$ |
|
||||||
|
\$$$$$$ |
|
||||||
|
\______/
|
||||||
|
*/
|
||||||
|
|
||||||
|
#header{
|
||||||
|
width: 100vw; height: fit-content;
|
||||||
|
position: fixed; top: 0vh;
|
||||||
|
|
||||||
|
padding-top: 2vh; padding-left: 4vw; padding-right: 4vw; padding-bottom: 0.5vh;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
display: flex; justify-content: space-between;
|
||||||
|
z-index: 100;
|
||||||
|
|
||||||
|
background-color: var(--alternative-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
#name{
|
||||||
|
width: 32vw; height: fit-content;
|
||||||
|
margin-right: 1vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-home {
|
||||||
|
background-color: transparent; border: none; margin-left: -0.5vw; margin-top: -0.1vh; padding: none;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
align-items: center; text-align: left;
|
||||||
|
width: 100%; height: 100%;
|
||||||
|
font-family: "covik-sans-mono", sans-serif;
|
||||||
|
font-weight: 500;
|
||||||
|
font-style: normal;
|
||||||
|
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 4vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
#navigation{
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
#archives-button, #apropos-button{
|
||||||
|
width: 22vw; height: 2vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
#archives-button{
|
||||||
|
margin-right: 0.5vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-btn {
|
||||||
|
background-color: transparent; border: none; margin-left: -0.4vw; margin-top: -0.1vh; padding: none;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
align-items: center; text-align: left;
|
||||||
|
width: 100%; height: 100%;
|
||||||
|
font-family: "covik-sans-mono", sans-serif;
|
||||||
|
font-weight: 500;
|
||||||
|
font-style: normal;
|
||||||
|
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 4vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
#archives-button.active, #apropos-button.active {
|
||||||
|
background-color: var(--main-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
#archives-button.active button, #apropos-button.active button{
|
||||||
|
color: var(--alternative-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
#apropos{
|
||||||
|
text-align: right; margin-right: 0vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
#player{
|
||||||
|
width: 92vw; height: fit-content; margin-right: 0vw;
|
||||||
|
position: fixed; top: 5vh; left: 4vw;
|
||||||
|
|
||||||
|
font-size: 3.7vw;
|
||||||
|
z-index: 100;
|
||||||
|
|
||||||
|
border: 0.2vh solid var(--main-color);
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
#info-player{
|
||||||
|
width: 100%; height: 3vh;
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
background-color: var(--main-color);
|
||||||
|
color: var(--alternative-color);
|
||||||
|
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#info-player #second-title{
|
||||||
|
width: 95%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#info-player #title{
|
||||||
|
width: 57%;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#info-player .controls {
|
||||||
|
width: 5%; height: 3vh;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.play-btn {
|
||||||
|
height: fit-content;
|
||||||
|
border: none;
|
||||||
|
|
||||||
|
background-color: var(--main-color);
|
||||||
|
color: var(--alternative-color);
|
||||||
|
|
||||||
|
font-family: "covik-sans-mono", sans-serif;
|
||||||
|
font-weight: 500;
|
||||||
|
font-style: normal;
|
||||||
|
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 4vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
.play-btn:hover {
|
||||||
|
color: var(--interactive-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.seek-container {
|
||||||
|
position: relative;
|
||||||
|
width: 100%; height: 3vh;
|
||||||
|
background-color: var(--alternative-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
#seekSlider {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
width: 75vw;
|
||||||
|
height: fit-content;
|
||||||
|
background: transparent;
|
||||||
|
z-index: 2;
|
||||||
|
position: relative;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
#seekSlider::-webkit-slider-thumb {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
width: 75vw;
|
||||||
|
height: fit-content;
|
||||||
|
background: transparent;
|
||||||
|
margin-top: -4px;
|
||||||
|
position: relative;
|
||||||
|
z-index: 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-overlay {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
height: 100%;
|
||||||
|
background-color: var(--interactive-color);
|
||||||
|
border-right: 0.2vw solid var(--main-color);
|
||||||
|
z-index: 1;
|
||||||
|
pointer-events: none; /* important pour que l'utilisateur puisse cliquer sur le slider */
|
||||||
|
}
|
||||||
|
|
||||||
|
#home-box, #apropos-box, #archives-box{
|
||||||
|
width: 100vw; height: fit-content;
|
||||||
|
position: absolute; top: 15vh;
|
||||||
|
|
||||||
|
padding-left: 4vw; padding-right: 4vw;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
font-size: 4vw;
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
|
||||||
|
#home-box h2{
|
||||||
|
width: 60vw; height: 2vh;
|
||||||
|
|
||||||
|
background-color: var(--main-color);
|
||||||
|
color: var(--alternative-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
#image-text{
|
||||||
|
width: fit-content; height: 80vh;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
#image-legende{
|
||||||
|
width: 7.5vw; height: 100%;
|
||||||
|
margin-right: 0.5vw;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#image-legende img{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#text-new{
|
||||||
|
width: 100%; height: fit-content;
|
||||||
|
padding-bottom: 0.5vh;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
background-color: var(--main-color);
|
||||||
|
color: var(--alternative-color);
|
||||||
|
font-family: "covik-sans-mono", sans-serif;
|
||||||
|
font-weight: 400;
|
||||||
|
font-style: normal;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
#info-apropos{
|
||||||
|
height: fit-content;
|
||||||
|
padding-bottom: 0.5vh;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
display: flex; flex-direction: column;
|
||||||
|
|
||||||
|
color: var(--alternative-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
#presentation{
|
||||||
|
width: 100%; height: fit-content;
|
||||||
|
|
||||||
|
margin-bottom: 1vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
#gestionmaintenance{
|
||||||
|
width: 100%; height: fit-content;
|
||||||
|
margin-bottom: 1vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
#contact{
|
||||||
|
width: 100%; height: fit-content;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title-apropos{
|
||||||
|
width: fit-content;
|
||||||
|
background-color: var(--main-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
#presentation p, #gestionmaintenance p, #contact p{
|
||||||
|
line-height: 2.5vh;
|
||||||
|
background-color: var(--main-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
#contact a{
|
||||||
|
color: var(--alternative-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.audio-line{
|
||||||
|
width: 100%; height: fit-content;
|
||||||
|
padding-bottom: 0.5vh;
|
||||||
|
overflow: hidden;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: 0.2s ease all;
|
||||||
|
}
|
||||||
|
|
||||||
|
.audio-line:hover .audio-text p{
|
||||||
|
background-color: var(--main-color);
|
||||||
|
color: var(--alternative-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.audio-info{
|
||||||
|
width: 100%; height: fit-content;
|
||||||
|
display: flex; justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.und-audio-info{
|
||||||
|
display: block;
|
||||||
|
width: fit-content;
|
||||||
|
}
|
||||||
|
|
||||||
|
.und-audio-info h4{
|
||||||
|
margin-bottom: 0.5vh;
|
||||||
|
width: 70vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
#home-box .audio-info .button-box{
|
||||||
|
height: fit-content; width: 30vw;
|
||||||
|
text-align: right;
|
||||||
|
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#home-box .audio-info .listen-button{
|
||||||
|
all: unset;
|
||||||
|
width: fit-content; height: fit-content;
|
||||||
|
}
|
||||||
|
|
||||||
|
.audio-line.active .button-box{
|
||||||
|
background-color: var(--main-color);
|
||||||
|
color: var(--alternative-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.audio-text{
|
||||||
|
width: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.audio-text img{
|
||||||
|
width: 7.7vw;
|
||||||
|
margin-right: 0.5vw;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.audio-text p{
|
||||||
|
padding-bottom: 1vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.audio-line.active .audio-text {
|
||||||
|
display: block;
|
||||||
|
background-color: var(--main-color);
|
||||||
|
color: var(--alternative-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.audio-line.active .und-audio-info{
|
||||||
|
background-color: var(--main-color);
|
||||||
|
color: var(--alternative-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
#archives-box .audio-line.active .und-audio-info{
|
||||||
|
background-color: var(--main-color);
|
||||||
|
color: var(--alternative-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
#home-box .und-audio-info .date-desktop{
|
||||||
|
width: 7vw;
|
||||||
|
display: block;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
#home-box .und-audio-info .date-mobile{
|
||||||
|
width: 70vw;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#home-box .und-audio-info .hour{
|
||||||
|
width: 70vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
#home-box .und-audio-info .title{
|
||||||
|
width: 70vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
#home-box .und-audio-info .autors{
|
||||||
|
width: 70vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
#home-box .und-audio-info .duration{
|
||||||
|
width: 70vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
#home-box .und-audio-info .button-box{
|
||||||
|
width: 70vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
#archives-box .und-audio-info .date-desktop{
|
||||||
|
width: 7vw;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#archives-box .und-audio-info .date-mobile{
|
||||||
|
width: 70vw;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
#archives-box .und-audio-info .second-title{
|
||||||
|
width: 70vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
#archives-box .und-audio-info .title{
|
||||||
|
width: 70vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
#archives-box .und-audio-info .autors{
|
||||||
|
width: 70vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
#archives-box .und-audio-info .duration{
|
||||||
|
width: 70vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
#archives-box .button-box{
|
||||||
|
height: fit-content; width: 30vw;
|
||||||
|
text-align: right;
|
||||||
|
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
#archives-box .audio-info .listen-button{
|
||||||
|
all: unset;
|
||||||
|
width: fit-content; height: fit-content;
|
||||||
|
}
|
||||||
48
style/reset.css
Normal file
48
style/reset.css
Normal file
@ -0,0 +1,48 @@
|
|||||||
|
/* http://meyerweb.com/eric/tools/css/reset/
|
||||||
|
v2.0 | 20110126
|
||||||
|
License: none (public domain)
|
||||||
|
*/
|
||||||
|
|
||||||
|
html, body, div, span, applet, object, iframe,
|
||||||
|
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||||||
|
a, abbr, acronym, address, big, cite, code,
|
||||||
|
del, dfn, em, img, ins, kbd, q, s, samp,
|
||||||
|
small, strike, strong, sub, sup, tt, var,
|
||||||
|
b, u, i, center,
|
||||||
|
dl, dt, dd, ol, ul, li,
|
||||||
|
fieldset, form, label, legend,
|
||||||
|
table, caption, tbody, tfoot, thead, tr, th, td,
|
||||||
|
article, aside, canvas, details, embed,
|
||||||
|
figure, figcaption, footer, header, hgroup,
|
||||||
|
menu, nav, output, ruby, section, summary,
|
||||||
|
time, mark, audio, video {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
border: 0;
|
||||||
|
font-size: 100%;
|
||||||
|
font: inherit;
|
||||||
|
vertical-align: baseline;
|
||||||
|
}
|
||||||
|
/* HTML5 display-role reset for older browsers */
|
||||||
|
article, aside, details, figcaption, figure,
|
||||||
|
footer, header, hgroup, menu, nav, section {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
ol, ul {
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
blockquote, q {
|
||||||
|
quotes: none;
|
||||||
|
}
|
||||||
|
blockquote:before, blockquote:after,
|
||||||
|
q:before, q:after {
|
||||||
|
content: '';
|
||||||
|
content: none;
|
||||||
|
}
|
||||||
|
table {
|
||||||
|
border-collapse: collapse;
|
||||||
|
border-spacing: 0;
|
||||||
|
}
|
||||||
514
style/style.css
Normal file
514
style/style.css
Normal file
@ -0,0 +1,514 @@
|
|||||||
|
:root {
|
||||||
|
--main-color: black ;
|
||||||
|
--alternative-color: white ;
|
||||||
|
--interactive-color: grey;
|
||||||
|
}
|
||||||
|
|
||||||
|
a{
|
||||||
|
color: var(--main-color);
|
||||||
|
text-decoration: underline;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover{
|
||||||
|
background-color: var(--main-color);
|
||||||
|
color: var(--alternative-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
body{
|
||||||
|
font-family: "covik-sans-mono", sans-serif;
|
||||||
|
font-weight: 500;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
#logoandcredits{
|
||||||
|
height: fit-content; width: 98vw;
|
||||||
|
position: fixed; bottom: 0vh;
|
||||||
|
margin-top: 12vh; margin-bottom: 3vh;
|
||||||
|
|
||||||
|
display: flex; justify-content: space-between;
|
||||||
|
align-items: end;
|
||||||
|
}
|
||||||
|
|
||||||
|
#logo{
|
||||||
|
width: auto; height: 40vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
#credits{
|
||||||
|
width: fit-content;
|
||||||
|
display: flex; justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#logoandcredits p{
|
||||||
|
width: 70vw;
|
||||||
|
line-height: 2.5vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
#logoandcredits p a{
|
||||||
|
color: var(--main-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
#logoandcredits p a:hover{
|
||||||
|
color: var(--alternative-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* __ __ _______ _______ ______ _______ ______
|
||||||
|
| | | || || _ || | | || _ |
|
||||||
|
| |_| || ___|| |_| || _ || ___|| | ||
|
||||||
|
| || |___ | || | | || |___ | |_||_
|
||||||
|
| || ___|| || |_| || ___|| __ |
|
||||||
|
| _ || |___ | _ || || |___ | | | |
|
||||||
|
|__| |__||_______||__| |__||______| |_______||___| |_|
|
||||||
|
*/
|
||||||
|
|
||||||
|
#header{
|
||||||
|
width: 100vw; height: fit-content;
|
||||||
|
position: fixed; top: 0vh;
|
||||||
|
|
||||||
|
padding-top: 2vh; padding-left: 1vw; padding-right: 1vw; padding-bottom: 0.5vh;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
display: flex; justify-content: space-between;
|
||||||
|
z-index: 100;
|
||||||
|
|
||||||
|
background-color: var(--alternative-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
#name{
|
||||||
|
width: 10vw; height: fit-content;
|
||||||
|
margin-right: 1vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-home {
|
||||||
|
background-color: transparent; border: none; margin-left: -0.5vw; margin-top: -0.5vh; padding: none;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
align-items: center; text-align: left;
|
||||||
|
width: 100%; height: 100%;
|
||||||
|
font-family: "covik-sans-mono", sans-serif;
|
||||||
|
font-weight: 500;
|
||||||
|
font-style: normal;
|
||||||
|
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 0.9vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
#navigation{
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
#archives-button, #apropos-button{
|
||||||
|
width: 6vw; height: 2.1vh;
|
||||||
|
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#archives-button{
|
||||||
|
margin-right: 0.5vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-btn {
|
||||||
|
background-color: transparent; border: none; margin-left: -0.4vw; margin-top: -0.5vh; padding: none;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
align-items: center; text-align: left;
|
||||||
|
width: 100%; height: 100%;
|
||||||
|
font-family: "covik-sans-mono", sans-serif;
|
||||||
|
font-weight: 500;
|
||||||
|
font-style: normal;
|
||||||
|
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 0.9vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
#archives-button.active, #apropos-button.active {
|
||||||
|
background-color: var(--main-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
#archives-button.active button, #apropos-button.active button{
|
||||||
|
color: var(--alternative-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
#apropos{
|
||||||
|
text-align: right; margin-right: 0vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* _______ ___ _______ __ __ _______ ______
|
||||||
|
| || | | _ || | | || || _ |
|
||||||
|
| _ || | | |_| || |_| || ___|| | ||
|
||||||
|
| |_| || | | || || |___ | |_||_
|
||||||
|
| ___|| |___ | ||_ _|| ___|| __ |
|
||||||
|
| | | || _ | | | | |___ | | | |
|
||||||
|
|___| |_______||__| |__| |___| |_______||___| |_|
|
||||||
|
*/
|
||||||
|
|
||||||
|
#player{
|
||||||
|
width: 78vw; height: fit-content; margin-right: 0vw;
|
||||||
|
position: fixed; top: 2.1vh; left: 8vw;
|
||||||
|
|
||||||
|
font-size: 0.9vw;
|
||||||
|
z-index: 100;
|
||||||
|
|
||||||
|
border: 0.2vh solid var(--main-color);
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
#info-player{
|
||||||
|
width: 100%; height: 2vh;
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
background-color: var(--main-color);
|
||||||
|
color: var(--alternative-color);
|
||||||
|
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#info-player #second-title{
|
||||||
|
width: 35%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#info-player #title{
|
||||||
|
width: 57%;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
#info-player .controls {
|
||||||
|
width: 8%; height: 2vh;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.play-btn {
|
||||||
|
height: fit-content;
|
||||||
|
border: none;
|
||||||
|
|
||||||
|
background-color: var(--main-color);
|
||||||
|
color: var(--alternative-color);
|
||||||
|
|
||||||
|
font-family: "covik-sans-mono", sans-serif;
|
||||||
|
font-weight: 500;
|
||||||
|
font-style: normal;
|
||||||
|
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 0.9vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
.play-btn:hover {
|
||||||
|
color: var(--interactive-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.seek-container {
|
||||||
|
position: relative;
|
||||||
|
width: 100%; height: 2vh;
|
||||||
|
background-color: var(--alternative-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
#seekSlider {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
width: 100%;
|
||||||
|
height: 2vh;
|
||||||
|
background: transparent;
|
||||||
|
z-index: 2;
|
||||||
|
margin-left: -0.1vw;
|
||||||
|
position: relative;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
#seekSlider::-webkit-slider-thumb {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
width: 0.2vw;
|
||||||
|
height: 2vh;
|
||||||
|
background: transparent;
|
||||||
|
margin-top: -0.9vh;
|
||||||
|
position: relative;
|
||||||
|
z-index: 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-overlay {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
height: 2vh;
|
||||||
|
background-color: var(--interactive-color);
|
||||||
|
border-right: 0.2vw solid var(--main-color);
|
||||||
|
z-index: 1;
|
||||||
|
pointer-events: none; /* important pour que l'utilisateur puisse cliquer sur le slider */
|
||||||
|
}
|
||||||
|
|
||||||
|
.audio-line{
|
||||||
|
width: 100%; height: fit-content;
|
||||||
|
padding-bottom: 0.5vh;
|
||||||
|
overflow: hidden;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: 0.2s ease all;
|
||||||
|
}
|
||||||
|
|
||||||
|
.audio-line:hover .audio-text p{
|
||||||
|
background-color: var(--main-color);
|
||||||
|
color: var(--alternative-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.audio-info{
|
||||||
|
width: 100%; height: fit-content;
|
||||||
|
display: flex; justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.und-audio-info{
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.und-audio-info h4{
|
||||||
|
margin-bottom: 0.5vh;
|
||||||
|
width: fit-content;
|
||||||
|
}
|
||||||
|
|
||||||
|
.und-audio-info .date-mobile{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.audio-line.active .button-box{
|
||||||
|
background-color: var(--main-color);
|
||||||
|
color: var(--alternative-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.audio-text{
|
||||||
|
width: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.audio-text img{
|
||||||
|
width: 6.5vw;
|
||||||
|
margin-right: 0.5vw;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.audio-text p{
|
||||||
|
width: 100%;
|
||||||
|
padding-bottom: 1vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.audio-line.active .audio-text {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.audio-line.active .audio-text p{
|
||||||
|
background-color: var(--main-color);
|
||||||
|
color: var(--alternative-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.audio-line.active .und-audio-info{
|
||||||
|
background-color: var(--main-color);
|
||||||
|
color: var(--alternative-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
#archives-box .audio-line.active .und-audio-info{
|
||||||
|
background-color: var(--main-color);
|
||||||
|
color: var(--alternative-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
#home-box, #apropos-box, #archives-box{
|
||||||
|
width: 100vw; height: fit-content;
|
||||||
|
position: absolute; top: 10vh;
|
||||||
|
|
||||||
|
padding-left: 1vw; padding-right: 1vw;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
font-size: 0.9vw;
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ___ __ _ ______ _______ __ __
|
||||||
|
| | | | | || | | || |_| |
|
||||||
|
| | | |_| || _ || ___|| |
|
||||||
|
| | | || | | || |___ | |
|
||||||
|
| | | _ || |_| || ___| | |
|
||||||
|
| | | | | || || |___ | _ |
|
||||||
|
|___| |_| |__||______| |_______||__| |__|
|
||||||
|
*/
|
||||||
|
|
||||||
|
#home-box h2{
|
||||||
|
width: 14.8vw; height: 2vh;
|
||||||
|
|
||||||
|
background-color: var(--main-color);
|
||||||
|
color: var(--alternative-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
#image-text{
|
||||||
|
width: fit-content; height: 80vh;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
#image-legende{
|
||||||
|
width: 7.5vw; height: 100%;
|
||||||
|
margin-right: 0.5vw;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#image-legende img{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#text-new{
|
||||||
|
width: 100%; height: fit-content;
|
||||||
|
padding-bottom: 0.5vh;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
background-color: var(--main-color);
|
||||||
|
color: var(--alternative-color);
|
||||||
|
font-family: "covik-sans-mono", sans-serif;
|
||||||
|
font-weight: 400;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
#home-box .und-audio-info .date-desktop{
|
||||||
|
width: 7vw;
|
||||||
|
display: block;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
#home-box .und-audio-info .date-mobile{
|
||||||
|
width: 70vw;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#home-box .und-audio-info .hour{
|
||||||
|
width: 9vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
#home-box .und-audio-info .title{
|
||||||
|
width: 40vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
#home-box .und-audio-info .autors{
|
||||||
|
width: 29.5vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
#home-box .und-audio-info .duration{
|
||||||
|
width: 10vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
#home-box .und-audio-info .button-box{
|
||||||
|
width: 8vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
#home-box .audio-info .button-box{
|
||||||
|
height: fit-content; width: 30vw;
|
||||||
|
text-align: right;
|
||||||
|
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#home-box .audio-info .listen-button{
|
||||||
|
all: unset;
|
||||||
|
width: fit-content; height: fit-content;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* _______ ______ _______ __ __ ___ __ __ _______ _______
|
||||||
|
| _ || _ | | || | | || | | | | || || |
|
||||||
|
| |_| || | || | || |_| || | | |_| || ___|| _____|
|
||||||
|
| || |_||_ | || || | | || |___ | |_____
|
||||||
|
| || __ || _|| || | | || ___||_____ |
|
||||||
|
| _ || | | || |_ | _ || | | | | |___ _____| |
|
||||||
|
|__| |__||___| |_||_______||__| |__||___| |___| |_______||_______|
|
||||||
|
*/
|
||||||
|
|
||||||
|
#archives-box .und-audio-info .date-desktop{
|
||||||
|
width: 7vw;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
#archives-box .und-audio-info .date-mobile{
|
||||||
|
width: 70vw;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#archives-box .und-audio-info .second-title{
|
||||||
|
width: 27vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
#archives-box .und-audio-info .title{
|
||||||
|
width: 25vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
#archives-box .und-audio-info .autors{
|
||||||
|
width: 26.5vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
#archives-box .und-audio-info .duration{
|
||||||
|
width: 6vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
#archives-box .button-box{
|
||||||
|
height: fit-content; width: 8vw;
|
||||||
|
text-align: left;
|
||||||
|
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
#archives-box .audio-info .listen-button{
|
||||||
|
all: unset;
|
||||||
|
width: fit-content; height: fit-content;
|
||||||
|
}
|
||||||
|
|
||||||
|
#archives-button.active, #apropos-button.active {
|
||||||
|
background-color: var(--main-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
#archives-button.active button, #apropos-button.active button{
|
||||||
|
color: var(--alternative-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* _______ _______ _______ __ __ _______
|
||||||
|
| _ || _ || || | | || |
|
||||||
|
| |_| || |_| || _ || | | ||_ _|
|
||||||
|
| || || | | || |_| | | |
|
||||||
|
| || _ | | |_| || | | |
|
||||||
|
| _ || |_| || || | | |
|
||||||
|
|__| |__||_______||_______||_______| |___|
|
||||||
|
*/
|
||||||
|
|
||||||
|
#info-apropos{
|
||||||
|
height: fit-content;
|
||||||
|
padding-bottom: 0.5vh;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
display: flex; flex-direction: row;
|
||||||
|
|
||||||
|
color: var(--alternative-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
#presentation{
|
||||||
|
width: 100%; height: fit-content;
|
||||||
|
|
||||||
|
margin-bottom: 1vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
#gestionmaintenance{
|
||||||
|
width: 100%; height: fit-content;
|
||||||
|
margin-bottom: 1vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
#contact{
|
||||||
|
width: 100%; height: fit-content;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title-apropos{
|
||||||
|
width: 100%;
|
||||||
|
background-color: var(--main-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
#presentation p, #gestionmaintenance p, #contact p{
|
||||||
|
line-height: 2.5vh;
|
||||||
|
background-color: var(--main-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
#contact a{
|
||||||
|
color: var(--alternative-color);
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user