Radio_Garage_static/index.html
2025-09-29 15:19:13 +02:00

301 lines
11 KiB
HTML
Raw Permalink Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!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 </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 ny 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 HavreRouen, créée en 2025. <br>
Radio Garage encourage toutes les formes de création sonores et radiophoniques, la documentation et larchivage 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>
dau 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 cest 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 à lUniversité de Picardie, critique dart et commissaire dexposition. Elle dirige la collection décrits dartistes 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 à lUniversité de Picardie, critique dart et commissaire dexposition. Elle dirige la collection décrits dartistes 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 à lUniversité de Picardie, critique dart et commissaire dexposition. Elle dirige la collection décrits dartistes 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>