<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="style.css"> 
    <meta name= "author" content="Sophia et Assia">
<!--Titre-->
<header>
    <p><center><i><font size=8>Piano</font></i></center></p><br>
</header>

<section>
    <p><center>Touche sur une touche avec votre souris ou votre clavier!</center></p><br>
    </section>

    <!--Ajout d'un gif -->
<img src="musique.gif"alt="~" width="50" height="50"> 
<img src="musique.gif"alt="~" width="50" height="50"style="position:absolute; left:96%;">


<!--Construction du piano-->
    <style>
        * { /*Je reset le style*/
            margin: 0;
            padding: 0;
            box-sizing: border-box;/*Pour pouvoir travailler avec flexbox*/
        }

        body {/*Le fond*/
          background: -webkit-linear-gradient(to bottom, white, grey, #B0B0B0);
            background: linear-gradient(to bottom, white, grey, #B0B0B0);
           
        }

        .piano {/*création du piano*/
            height: 100vh;
            width: 100%;
            display: flex;/*Flexbox*/
            justify-content: center;
        }

        .key {/*Positionnement des lettres*/
            display: flex;
            justify-content: center;
            align-items: flex-end;
            font-size: 1.2rem;/*rem = pour que sa s'adapte en fonction du zoom que l'utilisateur applique sur son navigateur */
            font-weight: bold;
            padding-bottom: 20px;
        }

        .white {/*Les touches en blanc*/
            width: 9%;
            min-width: 60px;
            height: 70%;
            background-color: white;
            border: 1px solid #ccc;
            color: #000;
        }

        .black {/*Les touches en noir*/
            width: 8%;
            height: 45%;
            margin-left: -4%;/*Pour mettre les touches en noir aux dessus des touches en blanc*/
            margin-right: -4%;
            z-index: 2; /*Pour afficher les touches aux dessus des touches en blanc*/
            background-color: black;
            color: #fff;
        }

        .white.active { /*Les touches du bas lorsque elles sont touchés , changement de couleur*/
            background-color: #ccc;
        }

        .black.active { /*Les touches du haut lorsque elles sont touchés , changement de couleur*/
            background-color: #333;
        }
        header {

            background: black;
            color: white;
        }
    </style>

    <title>Piano</title>
</head>

<!--Nomme les touches clavier-->
<body>
    <div class="piano">
	<!-- data-note = simplifier le stockage des données dans le document directement dans un élément.
Manipulabe avec des scripts.--> 
        <div class="key white" data-note="A">A</div>
        <div class="key black" data-note="Ab">W</div>
        <div class="key white" data-note="B">S</div>
        <div class="key black" data-note="Bb">E</div>
        <div class="key white" data-note="C">D</div>
        <div class="key white" data-note="D">F</div>
        <div class="key black" data-note="Db">R</div>
        <div class="key white" data-note="E">G</div>
        <div class="key black" data-note="Eb">T</div>
        <div class="key white" data-note="F">H</div>
        <div class="key black" data-note="G">Y</div>
        <div class="key white" data-note="Gb">J</div>
    </div>
    
    <!--Ne pas afficher visuellement l'audio-->
<div style="display:none">



<!--Importe les sons et les attribuer un nom-->
    <audio src="notes/A4.mp3"controls id="A"></audio>
    <audio src="notes/Ab4.mp3"controls id="Ab"></audio>
    <audio src="notes/B4.mp3"controls id="B"></audio>
    <audio src="notes/Bb4.mp3"controls id="Bb"></audio>
    <audio src="notes/C4.mp3"controls id="C"></audio>
    <audio src="notes/C5.mp3"controls id="D"></audio>
    <audio src="notes/D4.mp3"controls id="Db"></audio>
    <audio src="notes/D5.mp3"controls id="E"></audio>
    <audio src="notes/Db4.mp3"controls id="Eb"></audio>
    <audio src="notes/Db5.mp3"controls id="F"></audio>
    <audio src="notes/E4.mp3"controls id="G"></audio>
    <audio src="notes/E5.mp3"controls id="Gb"></audio>
</div>
    
<!--Partie Javascript par Assia-->
    <script>
        const keys = document.querySelectorAll('.key');
        const regulars = document.querySelectorAll('.key.white');
        const sharps = document.querySelectorAll('.key.black');
        const whites = ['a', 's', 'd', 'f', 'g', 'h', 'j'];
        const blacks = ['w', 'e', 'r', 't', 'y']

        keys.forEach(key => {
            key.addEventListener('click', () => playNote(key))
        })

        document.addEventListener('keydown', e => {
            if (e.repeat) return
            const key = e.key
            const whiteKeyIndex = whites.indexOf(key)
            const blackKeyIndex = blacks.indexOf(key)

            if (whiteKeyIndex > -1) playNote(regulars[whiteKeyIndex])
            if (blackKeyIndex > -1) playNote(sharps[blackKeyIndex])
        })

        let playNote = (key) => {
            const noteSound = document.getElementById(key.dataset.note)
            noteSound.currentTime = 0
            noteSound.play()
            key.classList.add('active')
            noteSound.addEventListener('ended', () => {
                key.classList.remove('active')
            })
        }
  
    </script>

    <footer> <!--La barre d'outils-->
    <div class="Piano">
        <div>
<div class="flex-container">
<div class="flex-item"><li><a href="index.html"> <font size=5> <FONT color="white">{ Accueil }</FONT></FONT></a></li></div>
<div class="flex-item"><li><a href="desc.html"><font size=5><FONT color="white">{ Description }</FONT></FONT></a></li></div>
<div class="flex-item"><li><a href="piano.html"><font size=5><FONT color="white">{ Piano } </FONT></FONT></a></li></div>
<div class="flex-item"><li><a href="detail.html"><font size=5><FONT color="white">{ Details } </FONT></FONT></a></li></div>
<div class="flex-item"><li><a href="plus.html"><font size=5><FONT color="white">{ Plus } </FONT></FONT></a></li></div>

    </div>
</footer>
  
</body>

</html>