diff --git a/FrontEnd/README.md b/FrontEnd/README.md new file mode 100644 index 0000000..1fe482a Binary files /dev/null and b/FrontEnd/README.md differ diff --git a/FrontEnd/V5.png b/FrontEnd/V5.png new file mode 100644 index 0000000..08d6169 Binary files /dev/null and b/FrontEnd/V5.png differ diff --git a/FrontEnd/index.html b/FrontEnd/index.html index e69de29..2237382 100644 --- a/FrontEnd/index.html +++ b/FrontEnd/index.html @@ -0,0 +1,44 @@ + + + + + Groupe 8 Projet C + + + + + + + + +

Filmothèque

+
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+ +
+
+
+ +
+
+

Created by Louis MARVILLET, Herman MARZELIERE, Félix MARQUET
+
The source code is available here

+
+ + \ No newline at end of file diff --git a/FrontEnd/read_write.js b/FrontEnd/read_write.js new file mode 100644 index 0000000..9a31114 --- /dev/null +++ b/FrontEnd/read_write.js @@ -0,0 +1,52 @@ +// ------- WRITE FILE ------- +function writeFile(id_form,func) { + + var element = document.createElement('a'); + + let text1 = document.getElementById(id_form); + let count = text1.elements.length; + let textToSave = func; + for(let i = 0;i + + + + Résultat de la recherche + + + + + + + + +

Filmothèque

+
+
+

Film par [Réalisateur] :
Temps de recherche : [temps]

+
+
+
+
+ Titre : [titre]
+ Durée : [durée]
+ Catégorie : [catégorie] +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+

Created by Louis MARVILLET, Herman MARZELIERE, Félix MARQUET
+
The source code is available here

+
+ + \ No newline at end of file diff --git a/FrontEnd/script.js b/FrontEnd/script.js new file mode 100644 index 0000000..045bd03 --- /dev/null +++ b/FrontEnd/script.js @@ -0,0 +1,101 @@ +document.addEventListener("DOMContentLoaded", function(event) { + //Add event listener to the checkboxes + document.getElementById("directorCheck").addEventListener("change", function() { + if(this.checked){ + document.getElementById("director").disabled = false; + document.getElementById("director").style.opacity = "1"; + document.getElementById("duree").disabled = true; + document.getElementById("duree").value = ""; + document.getElementById("duree").style.opacity = "0.5"; + document.getElementById("categorie").disabled = true; + document.getElementById("categorie").value = ""; + document.getElementById("categorie").style.opacity = "0.5"; + document.getElementById("film").disabled = true; + document.getElementById("film").value = ""; + document.getElementById("film").style.opacity = "0.5"; + document.getElementById("dureeCheck").checked = false; + document.getElementById("categorieCheck").checked = false; + document.getElementById("filmCheck").checked = false; + } + }); + + document.getElementById("dureeCheck").addEventListener("change", function() { + if(this.checked){ + document.getElementById("duree").disabled = false; + document.getElementById("duree").style.opacity = "1"; + document.getElementById("director").disabled = true; + document.getElementById("director").value = ""; + document.getElementById("director").style.opacity = "0.5"; + document.getElementById("categorie").disabled = true; + document.getElementById("categorie").value = ""; + document.getElementById("categorie").style.opacity = "0.5"; + document.getElementById("film").disabled = true; + document.getElementById("film").value = "" + document.getElementById("film").style.opacity = "0.5"; + document.getElementById("directorCheck").checked = false; + document.getElementById("categorieCheck").checked = false; + document.getElementById("filmCheck").checked = false; + } + }); + + document.getElementById("categorieCheck").addEventListener("change", function() { + if(this.checked){ + document.getElementById("categorie").disabled = false; + document.getElementById("categorie").style.opacity = "1"; + document.getElementById("director").disabled = true; + document.getElementById("director").value = ""; + document.getElementById("director").style.opacity = "0.5"; + document.getElementById("duree").disabled = true + document.getElementById("duree").value = ""; + document.getElementById("duree").style.opacity = "0.5"; + document.getElementById("film").disabled = true; + document.getElementById("film").value = ""; + document.getElementById("film").style.opacity = "0.5"; + document.getElementById("directorCheck").checked = false; + document.getElementById("dureeCheck").checked = false; + document.getElementById("filmCheck").checked = false; + } + }); + + document.getElementById("filmCheck").addEventListener("change", function() { + if(this.checked){ + document.getElementById("film").disabled = false; + document.getElementById("film").style.opacity = "1"; + document.getElementById("director").disabled = true; + document.getElementById("director").value = ""; + document.getElementById("director").style.opacity = "0.5"; + document.getElementById("duree").disabled = true; + document.getElementById("duree").value = ""; + document.getElementById("duree").style.opacity = "0.5"; + document.getElementById("categorie").disabled = true; + document.getElementById("categorie").value = ""; + document.getElementById("categorie").style.opacity = "0.5"; + document.getElementById("directorCheck").checked = false; + document.getElementById("dureeCheck").checked = false; + document.getElementById("categorieCheck").checked = false; + } + }); +}); + +window.addEventListener("load", function(event) { + document.getElementById("director").disabled = false; + document.getElementById("duree").disabled = true; + document.getElementById("duree").value = ""; + document.getElementById("duree").style.opacity = "0.5"; + document.getElementById("categorie").disabled = true; + document.getElementById("categorie").value = ""; + document.getElementById("categorie").style.opacity = "0.5"; + document.getElementById("film").disabled = true; + document.getElementById("film").value = ""; + document.getElementById("film").style.opacity = "0.5"; + document.getElementById("directorCheck").checked = true; + document.getElementById("dureeCheck").checked = false; + document.getElementById("categorieCheck").checked = false; + document.getElementById("filmCheck").checked = false; +}); + +// Recuperation des données du formulaire +function getFormData() { + if(document.getElementById("directorCheck").checked){ + +} \ No newline at end of file diff --git a/FrontEnd/style.css b/FrontEnd/style.css new file mode 100644 index 0000000..be6ed94 --- /dev/null +++ b/FrontEnd/style.css @@ -0,0 +1,132 @@ +body{ + font-family: 'Open Sans', sans-serif; + background-color: #313338; + color: white; + overflow: scroll; + display: flex; + flex-direction: column; + min-height: 100vh; +} + +#bottom{ + color: white; + background-color: #1E1F22; + text-align: center; + padding-left: 0.5em; + padding-right: 0.5em; +} + +a{ + text-decoration: underline; + color: white; +} + +h1{ + text-align: center; + font-size: 3em; +} + +#research{ + text-align: center; +} + +.searchField{ + width: 40%; + height: 4em; + background-color: #1E1F22; + color: white; + border: none; + margin-bottom: 5em; + text-align: center; +} + +.searchButton{ + width: 25%; + height: 4em; + margin-bottom: 2em; + background-color: #3B428A; + color: white; + border: none; + cursor: pointer; +} + +#stop{ + width: 10%; + height: 4em; + margin-bottom: 2em; + background-color: #FF0000; + color: white; + border: none; + cursor: pointer; +} + +#result{ + display: grid; + grid-template-columns: 1fr 5fr; + grid-template-rows: repeat(4, minmax(0,1fr)); + grid-column-gap: 0px; + grid-row-gap: 0px; + margin: 5%; + margin-top: 10%; +} + +#resultTitleContainer{ + grid-area: 1 / 1 / 5 / 2; +} + +#resultContentContainer1{ + grid-area: 1 / 2 / 2 / 3; +} + +#resultContentContainer2{ + grid-area: 2 / 2 / 3 / 3; +} + +#resultContentContainer3{ + grid-area: 3 / 2 / 4 / 3; +} + +#resultContentContainer4{ + grid-area: 4 / 2 / 5 / 3; +} + +.resultContent{ + display: flex; +} + +#resultTitle{ + text-align: center; + margin-top: 5%; + font-size: 20px; +} + +.card{ + background-color: #2B2D31; + color: white; + margin-left: 2%; + margin-right: 2%; + margin-top: 2%; + margin-bottom: 2%; + padding: 2%; + transition: background-color 0.3s ease-in-out; + border-radius: 10px; +} + +.card:hover{ + background-color: #3b428a; +} + +#returnToHome{ + margin-left: 37.5%; +} + +#stop\ stopResult{ + margin-left: 45%; + width: 10%; + height: 4em; + margin-bottom: 2em; + background-color: #FF0000; + color: white; + border: none; + cursor: pointer; +} \ No newline at end of file diff --git a/README.md b/README.md index 420690d..38c4914 100644 Binary files a/README.md and b/README.md differ