162 lines
7.1 KiB
HTML
162 lines
7.1 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<!-- Google tag (gtag.js) -->
|
|
<script async src="https://www.googletagmanager.com/gtag/js?id=G-Z9Z4BWJ3GT"></script>
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
|
|
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Accueil</title>
|
|
<link rel="stylesheet" href="CSS.css"> <!-- Lien vers le fichier CSS externe -->
|
|
<link rel="icon" href="favicon.ico" type="image/x-icon">
|
|
<script src="Data/Boites.js"></script>
|
|
|
|
<!-- <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>-->
|
|
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
|
|
|
|
<script>
|
|
function checkOptions() {
|
|
var option1Checked = document.getElementById('option1').checked;
|
|
var option2Checked = document.getElementById('option2').checked;
|
|
|
|
// Vérifie si les deux options sont cochées
|
|
if (option1Checked && option2Checked) {
|
|
// Affiche une boîte de dialogue avec l'emoji Unicode
|
|
alert('Vous validez les 2 musiques ?');
|
|
}
|
|
}
|
|
|
|
</script>
|
|
|
|
<style>
|
|
h1, h2 {display: block; /* Pour s'assurer que la marge s'applique correctement */
|
|
margin: 20px 40px; /* Marge de 10px en haut et en bas, 40px à gauche et à droite */}
|
|
/*a {display: block; margin: 20px 20%; color:black;} */
|
|
body {background-image: linear-gradient(to bottom,#bc31f8, #fdb0ec,#6bb0f5, #36eeae ); /* Dégradé du haut vers le bas */ background-attachment: fixed; /* Fond d'écran statique */}
|
|
a { margin-bottom: 30px; /* Ajoute 10 pixels d'espace en bas de chaque lien */}
|
|
.nowrap { white-space: nowrap; /* force le non retour à la ligne*/ }
|
|
.audio {background-color: crimson; opacity:0.5; color:#36eeae ; margin-left: 500px; }
|
|
body{background-image: url(Data/futurist.png);background-size: cover; background-position: center;
|
|
font-family: proxima;
|
|
|
|
@font-face {
|
|
font-family: proxima; /* Le nom que vous souhaitez attribuer à la police */
|
|
src: url(ProximaNova-Regular.woff2) format(woff2);
|
|
}
|
|
|
|
}
|
|
</style>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
var params = new URLSearchParams(window.location.search);
|
|
if (params.has('erreur')) {
|
|
alert("Mot de passe incorrect.");
|
|
}
|
|
});
|
|
window.addEventListener('DOMContentLoaded', (event) => {
|
|
setTimeout(() => {
|
|
window.scrollTo(0, 100); }); // Faites défiler vers le bas de 100 pixels (ajustez la valeur selon vos besoins)
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<div class="header1">
|
|
<h1 class="encadreAccueil">Bienvenue sur le site de <span class="nowrap">Sushi</span>!</h1>
|
|
<h2></h2>
|
|
</div>
|
|
<div class="header2">
|
|
<h2></h2>
|
|
<!--<nav>
|
|
<ul>
|
|
<li><a href="#">Accueil</a></li>
|
|
<li><a href="#">À Propos</a></li>
|
|
<li><a href="#">Services</a></li>
|
|
<li><a href="#">Contact</a></li>
|
|
</ul>
|
|
</nav> -->
|
|
</div>
|
|
</header>
|
|
|
|
<main>
|
|
<section>
|
|
<div class="column-container">
|
|
<article style=" display: flex; align-items: center; justify-content: center;">
|
|
<p style="padding:0px;">
|
|
<center>Pour votre information, cette page est actuellement en travaux. Vous pouvez tout de même donner
|
|
vos recommendations dans l'encadré "commentaires".</center></p></article>
|
|
</article>
|
|
<article class="encadré-rouge" style="margin-right: 10px;">
|
|
<h2>Accès au site</h2>
|
|
<form action="Data/connexion.php" method="post">
|
|
<center>Connexion : <input type="password" name="motdepasse" required class="custom-area"><br><br> </center>
|
|
<center> <input type="submit" value="Se Connecter" class="custom-button"> </center>
|
|
</form>
|
|
</article>
|
|
</div>
|
|
|
|
<article>
|
|
<h2>Musiques</h2>
|
|
<p style="text-align: center;">Vous pouvez voter entre la musique 1 et la musique 2.</p><br>
|
|
|
|
|
|
<table style="width:100%">
|
|
<tr style="border-color:#bc31f8">
|
|
<td style="text-align:center;"><audio controls>
|
|
<source src="Data/le_cinquieme.mp3" type="audio/mpeg">
|
|
Votre navigateur ne supporte pas l'audio HTML.
|
|
</audio></td>
|
|
<td style="text-align:center"><audio controls>
|
|
<source src="Data/le 6e.mp3" type="audio/mpeg">
|
|
Votre navigateur ne supporte pas l'audio HTML.
|
|
</audio></td>
|
|
</tr>
|
|
<form action="Data/sondage musique.php" method="post">
|
|
<tr>
|
|
<td style="text-align:center"><input type="checkbox" id="option1" name="option1" value="Option 1" onchange="checkOptions()">
|
|
<label for="option1">Musique de Hector</label><br></td>
|
|
<td style="text-align:center"><input type="checkbox" id="option2" name="option2" value="Option 2" onchange="checkOptions()">
|
|
<label for="option2">Musique de Mich</label><br></td>
|
|
</tr>
|
|
</table>
|
|
<div style="display: flex; align-items: center; justify-content: center;">
|
|
<button class="custom-button" type="submit">Soumettre</button>
|
|
</div>
|
|
</form>
|
|
|
|
</form>
|
|
</article>
|
|
|
|
<article>
|
|
<h2>Votre organisation</h2>
|
|
<p style="display: flex; align-items: center; justify-content: center;">Vous pouvez ici créer des post it. Attention ça disparait quand vous actualisez la page.</p>
|
|
<div style="display: flex; align-items: center; justify-content: center;">
|
|
<button onclick="createBox()" class="custom-button" style="margin: 15px;">Créer une boîte</button></center>
|
|
</div>
|
|
<div id="container"></div> <!-- Permet d'afficher la boite-->
|
|
</article>
|
|
|
|
</section>
|
|
|
|
<aside style="text-align: center;">
|
|
<h2>Vos commentaires</h2>
|
|
<p>Saisissez vos commentaires et validez :</p><br>
|
|
<form id="espionnage" action="Data/commentaires.php" method="post" style="text-align: center;">
|
|
|
|
<div><input type="text" name="nom" placeholder="Nom" maxlength="20" style="width:60px;">
|
|
<input type="email" name="email" placeholder="Email" style="width:135px;"></div>
|
|
<p><br></p>
|
|
<textarea name="commentaire" class="ZoneTexte" placeholder="Vos suggestions concernant ce site" style="white-space: pre-wrap; margin:0"></textarea>
|
|
<p><br></p>
|
|
<div><button type="submit" class="custom-button">Envoyer</button></div>
|
|
</form>
|
|
|
|
</aside>
|
|
</main>
|
|
<footer>
|
|
<p>Créative common.</p>
|
|
<p>Version graphique 2.0</p>
|
|
<p class="encadre" style="background-color: rgb(237, 234, 37);">L'image utilisée provient de Midjourney.</p><li></li>
|
|
</footer>
|
|
</body>
|
|
</html> |