<?php
$LINK = mysqli_connect('127.0.0.1','pisjo950','vjPRjFTxDVIoG7)t','pisjo950');
//get Ado
$statementAdo = $LINK->prepare("SELECT * FROM Adolescence");
$statementAdo->execute();
$resultAdo = $statementAdo->get_result();
$adoData=[];
if($resultAdo->num_rows>0)
{
while($row = $resultAdo->fetch_assoc()){
$adoData[]=[
'id'=>$row['id'],
'title'=>$row['title'],
'year' => $row['year'],
'description' => $row['description'],
'image' => $row['picture'] ?? '',
'uploadDate' => $row['uploadDate']
];
}
}
//get Enfacne
$statementEnf = $LINK->prepare("SELECT * FROM Enfance");
$statementEnf->execute();
$enfData=[];
$resultEnf = $statementEnf->get_result();
if($resultEnf->num_rows>0)
{
while($row = $resultEnf->fetch_assoc()){
$enfData[]=[
'id'=>$row['id'],
'title'=>$row['title'],
'year' => $row['year'],
'description' => $row['description'],
'image' => $row['picture'] ?? '',
'uploadDate' => $row['uploadDate']
];
}
}
//get Oeuvres
$statementOeuv = $LINK->prepare("SELECT * FROM Oeuvres");
$statementOeuv->execute();
$oeuvData=[];
$resultOeuv = $statementOeuv->get_result();
if($resultOeuv->num_rows>0)
{
while($row = $resultOeuv->fetch_assoc()){
$oeuvData[]=[
'id'=>$row['id'],
'title'=>$row['title'],
'year' => $row['year'],
'description' => $row['description'],
'image' => $row['picture'] ?? '',
'uploadDate' => $row['uploadDate']
];
}
}
//get prix
$statementPrix = $LINK->prepare("SELECT * FROM Prix");
$statementPrix->execute();
$prixData=[];
$resultPrix = $statementPrix->get_result();
if($resultPrix->num_rows>0)
{
while($row = $resultPrix->fetch_assoc()){
$prixData[]=[
'id'=>$row['id'],
'title'=>$row['title'],
'year' => $row['year'],
'description' => $row['description'],
'image' => $row['picture'] ?? '',
'uploadDate' => $row['uploadDate']
];
}
}
//save all DB entryies in one data structure
$data = [
"Adolescence"=>$adoData,
"Enfance"=>$enfData,
"Oeuvres"=>$oeuvData,
"Prix"=>$prixData
];
//var_dump($data);
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="Styles/style.css">
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
<!-- animated css -->
</head>
<body>
<div id="overlay"></div>
<div id="mainWindow">
<!-- <img src="Images/background.png" alt="image"> -->
<div id="upper">
<nav id=" navbar">
<p id="pLogo">Pierre Nimax</p>
<span id="logo">Musicien polyvalent</span>
<p id="smallLogo">Musique militaire Inventeur Professeur</p>
</nav>
<div id="description">
<p>Explorez la vie de Pierre Nimax, en cliquant sur les notes de musique!</p>
</div>
</div>
<div id="under">
<div id="items">
<div class="block">
<h1 class="invisible-title">1. Enfance</h1>
<!-- <img class="cord" src="Images/Music cords.png" alt="cord"> -->
<div class="cord">
<div class="line thick"></div>
<div class="line thin"></div>
<div class="line thick"></div>
<div class="line thin"></div>
<div class="line thick"></div>
<div class="line thin"></div>
<div class="line thick"></div>
<hr>
<hr>
<hr>
<hr>
</div>
<div id="notes">
<!-- <img src="Images/musical-note.png" alt="Enfance">
<img src="Images/musical-note (1).png" alt="Enfance">
<img src="Images/musical-note (1).png" alt="Enfance">
<img src="Images/musical-note (1).png" alt="Enfance">
<img src="Images/musical-note.png" alt="Enfance"> -->
<audio id="audio" src="Audio/Septieme.mp3" alt="audioE"></audio>
</div>
</div>
<div class="block">
<h1 class="invisible-title">2. Adolescence</h1>
<!-- <img class="cord" src="Images/Music cords.png" alt="cord"> -->
<div class="cord">
<div class="line thick"></div>
<div class="line thin"></div>
<div class="line thick"></div>
<div class="line thin"></div>
<div class="line thick"></div>
<div class="line thin"></div>
<div class="line thick"></div>
<hr>
<hr>
<hr>
<hr>
</div>
<div id="notes">
<audio id="audio" src="Audio/LaLa.mp3" alt="audioA"></audio>
</div>
</div>
<div class="block">
<h1 class="invisible-title">3. Oeuvres</h1>
<!-- <img class="cord" src="Images/Music cords.png" alt="oeuvres"> -->
<div class="cord">
<div class="line thick"></div>
<div class="line thin"></div>
<div class="line thick"></div>
<div class="line thin"></div>
<div class="line thick"></div>
<div class="line thin"></div>
<div class="line thick"></div>
<hr>
<hr>
<hr>
<hr>
</div>
<div id="notes">
</div>
</div>
<div class="block">
<h1 class="invisible-title">4. Prix</h1>
<!-- <img class="cord" src="Images/Music cords.png" alt="prix"> -->
<div class="cord">
<div class="line thick"></div>
<div class="line thin"></div>
<div class="line thick"></div>
<div class="line thin"></div>
<div class="line thick"></div>
<div class="line thin"></div>
<div class="line thick"></div>
<hr>
<hr>
<hr>
<hr>
</div>
<div id="notes">
</div>
</div>
</div>
</div>
<div id="sideWindow">
<div id="sideBar">
</div>
<div id="sideContent">
<h1>1930</h1>
<h2>Naissance de Pierre Nimax</h2>
<img src="Images/music.png" alt="NimaxFoto">
<p>Lorem Ipsum</p>
</div>
</div>
</div>
<script>
const sideWindow= document.getElementById("sideWindow");//the wole sideWindow with all the contents inside
const overlay= document.getElementById("overlay");//the background made a little darker
const allNotes = document.querySelectorAll(".block"); //this selects all the notes
let rnd=1;//notes images
var data={
};
<?php
echo"data = ".json_encode($data).";";
?>
console.log(data);
//play the music
function play()
{
audio.play();
}
//stop the music
function stop()
{
audio.pause();
}
// show the window
function showWindow()
{
sideWindow.classList.add("show");
overlay.classList.add("show");
}
// hide the sidewindow
function hideSideWindow()
{
sideWindow.classList.remove("show");
overlay.classList.remove("show");
}
// hide when clicking on sideWindow
overlay.addEventListener('click',hideSideWindow);
function generateSideWindow(section, noteIndex)
{
console.log(section, noteIndex);
const sideContent= document.getElementById("sideContent");//here we will save our content
sideContent.innerHTML="";//remove existing html
console.log(data[section][noteIndex].year);
//check if section and noteindex exist
if (data[section]) {
//const [id, year, description, image, uploadDate] = data[section][noteIndex]; //stores an array of [years, description] for each section
const yearElement = document.createElement("h1");//create new h1
yearElement.innerText = data[section][noteIndex].year;//save the text from the list in this h1
//console.log(data.section);
const descriptionElement = document.createElement("h2");//create an new h2
descriptionElement.innerText = data[section][noteIndex].title;//save the list description
//console.log(data[section][noteIndex].description);
//more content, like images and more text here:
const imgElement=document.createElement("img");
imgElement.src="Images/"+data[section][noteIndex].image;
console.log(data[section][noteIndex].image);
//descrtiption for each note
const desc=document.createElement("p");
desc.innerText=data[section][noteIndex].description;
//don't forget to append them afterwards
sideContent.appendChild(yearElement);
sideContent.appendChild(descriptionElement);
sideContent.appendChild(imgElement);
sideContent.appendChild(desc);
}
//if not in the list data[] or in the section
else{
const noData= document.createElement("p");
noData.textContent="No data available";
sideContent.appendChild(noData);
}
}
//here we dynamically generate notes
function generateNote()
{
//this is our notecord where we save our notes
const noteCord=document.querySelectorAll(".block");
console.log(noteCord);
noteCord.forEach((note) => {
//get the notes inside of the block
const notesCont=note.querySelector("#notes");
//name of section
const section=note.querySelector("h1").innerHTML.split(".")[1].trim();
const sectionData=data[section];
noteCord.innerHTML="";
//generate notes
//if not empty
if(sectionData)
{
sectionData.forEach((noteData) => {
const noteElement=document.createElement("img");
//random img generator
if(rnd>1)
{
rnd++;
}
let imgAlt="";
if(rnd<=1)
{
imgAlt="Note0100.png";
noteElement.style.top+="3.3rem";
rnd++;
}
else if(rnd < 2)
{
imgAlt="Note02.png";
noteElement.style.top+=Math.round(Math.random()*5)+".5rem";
}else if(rnd <3)
{
imgAlt="Note03.png";
noteElement.style.top+=Math.round(Math.random()*5)+".7rem";
}else if(rnd <4)
{
imgAlt="Note02.png"
noteElement.style.top+="0.2rem";
}else if(rnd < 5)
{
imgAlt="Note05.png";
noteElement.style.top+="3.6rem";
}else if(rnd <6)
{
imgAlt="Note06.png";
noteElement.style.top+="4rem";
}else if(rnd < 8)
{
imgAlt="Note070.png";
noteElement.style.top+="4.9rem";
}else if(rnd <9)
{
imgAlt="Note09.png";
noteElement.style.top+="1.8rem";
}else if(rnd <10)
{
imgAlt="Note10.png";
noteElement.style.top+="3.4rem";
}else if(rnd<11)
{
imgAlt="Note11.png";
noteElement.style.top+="1.9rem";
}else if(rnd<12)
{
imgAlt="Note12.png";
noteElement.style.top+="0.5rem";
}else if(rnd<13)
{
imgAlt="Note05.png";
noteElement.style.top+="-0.4rem";
}else if(rnd<14)
{
imgAlt="Note06.png";
noteElement.style.top+="4rem";
}else if(rnd<15)
{
imgAlt="Note07.png";
noteElement.style.top+=Math.round(Math.random()*5)+"rem";
}else if(rnd<16)
{
imgAlt="Note07.png";
noteElement.style.top+=Math.round(Math.random()*5)+".3rem";
}else if(rnd<17)
{
imgAlt="Note17.png";
noteElement.style.top+=Math.round(Math.random()*5)+".3rem";
}else if(rnd<18)
{
imgAlt="Note18.png";
noteElement.style.top+=Math.round(Math.random()*5)+".3rem";
}else if(rnd<19)
{
imgAlt="Note19.png";
noteElement.style.top+=Math.round(Math.random()*5)+".3rem";
}else if(rnd<20)
{
imgAlt="Note20.png";
noteElement.style.top+=Math.round(Math.random()*5)+".3rem";
}
noteElement.src="Images/"+imgAlt;
noteElement.alt=section;
noteElement.style.left+="-3rem";
//noteElement.style.top+=Math.round(Math.random()*5)+".3rem";
//when clicked sideWindow loaded
noteElement.addEventListener("click", () => {
generateSideWindow(section, sectionData.indexOf(noteData));
showWindow();
})
noteElement.addEventListener("mouseover", () => {
//console.log("mouseover");
classList.add("animate__animated", "animate__pulse");//not working anymore, :(
noteElement.style.setProperty('--animate-duration', '2s'); // Optional: Control animation speed
noteElement.style.set
});
noteElement.addEventListener("mouseout", () => {
console.log("mouseout")
noteElement.classList.remove("animate__animated", "animate__pulse");
});
notesCont.appendChild(noteElement);
});
}else
{
console.log("No notes availabale");
}
});
}
// generate pianokey
function generatePiano()
{
// access our sidebar
const sideBar=document.getElementById("sideBar");
// create a keys list
const keysW=40;
const keysB=[1,2, 4,5,6, 8,9, 11,12,13]//black key indices
for(let i=0;i<keysW;i++)
{
//create the container
const keyContainer=document.createElement("div");
keyContainer.classList.add("key-container");
const whiteKey=document.createElement("div");
whiteKey.classList.add("white-key");
keyContainer.appendChild(whiteKey);
if(keysB.includes(i%14))
{
const blackKey=document.createElement("div");//create the black key divs
blackKey.classList.add("black-key");
keyContainer.appendChild(blackKey);//insert inside our conainer
}
sideBar.appendChild(keyContainer);
}
}
window.onload= ()=>
{
generatePiano();
generateNote();
}
</script>
</body>
</html>