Add MikAMuz part

2024-02-18 20:14:51 +01:00
parent a1eef91b93
commit 62793dc622
7 changed files with 2253 additions and 0 deletions
@@ -0,0 +1,94 @@
+body {
+  font-family: 'Noto Sans', sans-serif;
+  background-color: #333;
+  color: #fff;
+}
+.container {
+  width: 80%;
+  margin: auto;
+  border: 2px solid #8C0312;
+  border-radius: 25px;
+  padding: 20px;
+  background-color: #444;
+}
+.nav a {
+  text-decoration: none;
+  color: #fff;
+  padding: 10px 20px;
+  border: 2px solid #8C0312;
+  border-radius: 25px;
+  background-color: #333;
+  transition: all 0.3s ease-in-out;
+}
+.nav a:hover {
+  background-color: #8C0312;
+  color: #333;
+  cursor: pointer;
+  transition: all 0.3s ease-in-out;
+}
+
+.video-container {
+  width: 80%;
+  margin: 20px auto;
+  border: 2px solid #8C0312;
+  border-radius: 25px;
+  overflow: hidden;
+  padding-bottom: 56.25%;
+  position: relative;
+}
+.video-container iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+header {
+  text-align: left;
+}
+.logo {
+  width: 9.5%;
+  display: inline-block;
+  vertical-align: middle;
+  margin-right: 10px;
+}
+.title {
+  display: inline-block;
+  font-size: 48px;
+  line-height: 60px;
+  vertical-align: middle;
+}
+
+div.footer {
+  width: 80%;
+  margin: auto;
+  border: 2px solid #8C0312;
+  border-radius: 25px;
+  padding: 20px;
+  background-color: #444;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+img.flash {
+  display: inline-block;
+  width: 128px;
+  transition: 0.4s;
+};
+
+img.flash:hover {
+  transition: 0.4s;
+  width: 800px
+};
+
+#results {
+    list-style-type: none;
+    padding: 0;
+}
+
+#results li {
+    margin-bottom: 5px;
+    cursor: pointer;
+}
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap" rel="stylesheet">
+  <link href="css/style.css" rel="stylesheet">
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Mik'A'Muz</title>
+</head>
+<body>
+<div class="container">
+  <header>
+    <a href="https://www.facebook.com/mikamuzdj" target="_blank">
+      <img class="logo" src="img/logo.png" alt="Logo">
+    </a>
+    <h1 class="title">Mik'A'Muz</h1>
+	<h4>DJ amateur depuis plus de 15 ans passionné de musique depuis petit, je me ferai un plaisir de vous aMUZer sur des MUZiques de tous styles.</h4>
+  </header>
+  <hr>
+  <h1>Liste de karaokés - 2024</h1>
+  <p>Vous pouvez télécharger la liste des karaokés entière. Ou effectuer une recherche dans la liste tout en bas.</p>
+  <div class="nav">
+  <a href="Liste karaoké 2024.pdf" target="_BLANK">Liste Karaoké 2024</a>
+  </div>
+  <br>
+  <hr>
+  <h1>Recherche dans la liste de karaoké</h1>
+  <input type="text" id="searchInput" placeholder="Rechercher...">
+  <ul id="results"></ul>
+</div>
+<div class="footer">
+  Copyright | Whykorp® 2021-2024
+</div>
+<script src="script.js"></script>
+</body>
+</html>
@@ -0,0 +1,33 @@
+document.addEventListener('DOMContentLoaded', function () {
+    const searchInput = document.getElementById('searchInput');
+    const resultsList = document.getElementById('results');
+
+    // Charger le fichier CSV
+    fetch('Liste karaoké 2024.csv')
+        .then(response => response.text())
+        .then(data => {
+            const lines = data.split('\n');
+            const items = lines.map(line => line.trim());
+
+// Fonction de recherche
+function search(query) {
+    resultsList.innerHTML = '';
+    const filteredItems = items.filter(item => 
+        item.toLowerCase().includes(query.toLowerCase())
+    );
+    filteredItems.forEach(item => {
+        let displayedItem = item.replace('.mp4', '').replace(';;;', '');
+        const li = document.createElement('li');
+        li.textContent = displayedItem;
+        resultsList.appendChild(li);
+    });
+}
+
+
+            // Écouter les changements de la barre de recherche
+            searchInput.addEventListener('input', function () {
+                search(searchInput.value);
+            });
+        })
+        .catch(error => console.error('Erreur de chargement du fichier :', error));
+});