<div class="home"> <h1>Mon CV</h1> </br> <div class="homepanel"> <div class="row w-100"> <div class="hbox col-lg"> <h1><i class="fas fa-puzzle-piece"></i> Sections</h1> <div class="cv-sections"> <div class="row w-100"> <select id="cv-section-selector" class="cv-selector"> <option>Qui suis-je ?</option> <option>Contact</option> <option>Formations</option> <option>Diplomes & Certifications</option> <option>Passions et activités</option> <option>Ma recherche de stage</option> </select> </div> <div class="row w-100"> <textarea id="cv-section-textarea" class="cv-textarea"> </textarea> </div> <div class="row w-100"> <button id="cv-section-save" class="cv-save col-lg-2"><i class="fa fa-save"></i> Sauvegarder</button> </div> <div class="row w-100"> <p id="cv-section-info" class="cv-info" style="color:rgb(255, 48, 48)"></p> </div> </div> </div> <div class="hbox col-lg"> <h1><i class="fa fa-gear"></i> Projets</h1> <div class="cv-sections"> <div class="row w-100"> <select class="col-lg-10 cv-selector"> <option>NONE</option> <option>NONE</option> <option>NONE</option> <option>NONE</option> <option>NONE</option> </select> <button class="col-lg-1 cv-plus"><i class="fa fa-plus"></i></button> </div> <div class="row w-100"> <textarea class="cv-textarea"> </textarea> </div> <div class="row w-100"> <button class="cv-save col-lg-2"><i class="fa fa-save"></i> Sauvegarder</button> <button class="cv-del col-lg-2"><i class="fa fa-trash"></i> Effacer</button> </div> <div class="row cv-upload-section"> <p class="col-lg">Uploader une image : <span>NAMTEST.png</span> </p> <button class=" col-lg-2 cv-upload"><i class="fa fa-upload"></i> Upload</button> </div> </div> </div> </div> <div class="row w-100"> <div class="hbox col-lg"> <h1><i class="fa fa-signal"></i> Statistiques</h1> <p>Coming soon ...</p> </div> </div> </div> </div> <script> if(typeof checkDelare == "undefined") { const checkDelare = true; const sectionTextArea = document.getElementById("cv-section-textarea") const sectionSelector = document.getElementById("cv-section-selector") const sectionSave = document.getElementById("cv-section-save") const sectionInfo = document.getElementById("cv-section-info") var sectionSelectedMD = null; loadText(sectionTextArea, "WHOAMI") sectionSelector.addEventListener("change", () => { const opt = sectionSelector.value if(opt == "Qui suis-je ?") { loadText(sectionTextArea, "WHOAMI") } else if(opt == "Contact") { loadText(sectionTextArea, "CONTACT") } else if(opt == "Formations") { loadText(sectionTextArea, "FORMATION") } else if(opt == "Diplomes & Certifications") { loadText(sectionTextArea, "DIPLOME") } else if(opt == "Passions et activités") { loadText(sectionTextArea, "LOBBIES") } else if(opt == "Ma recherche de stage") { loadText(sectionTextArea, "FIND") } }) sectionSave.addEventListener("click", () => { sectionInfo.innerHTML = "" fetch('/cv', { method: 'POST', redirect: 'follow', headers: { 'Accept': 'application/json', 'Content-Type': 'application/json' }, body: JSON.stringify({"request":"set", "value": sectionTextArea.value, "type": sectionSelectedMD}) }) .then(response => response.json()) .then(response => res(response)) function res(response) { if(response.result == "failed") { content.innerHTML = ' <h1 style="color:red;"><i style="color:yellow; font-size: 2vw;" class="fa fa-warning"></i> Erreur de chargement des données - Erreur : ' + response.content + '</h1>' console.log("FAILED") } else if(response.result == "success") { if(response.content == "ERROR_NOT_PERMITTED") { sectionInfo.innerHTML = "Erreur, le fichier n'a pas été sauvegardé correctement !" } else { sectionInfo.innerHTML = "<span style='color:rgb(130, 255, 163); '>Le fichier a été sauvegardé avec succès !</span>" } } } }) loadText(sectionTextArea, "WHOAMI") function loadText(textArea, requestElement) { sectionSelectedMD = requestElement fetch('/cv', { method: 'POST', redirect: 'follow', headers: { 'Accept': 'application/json', 'Content-Type': 'application/json' }, body: JSON.stringify({"request":"get", "value": requestElement}) }) .then(response => response.json()) .then(response => res(response)) function res(response) { if(response.result == "failed") { content.innerHTML = ' <h1 style="color:red;"><i style="color:yellow; font-size: 2vw;" class="fa fa-warning"></i> Erreur de chargement des données - Erreur : ' + response.content + '</h1>' console.log("FAILED") } else if(response.result == "success") { textArea.value = response.content } } } } </script> <!-- Style--> <style> .cv-info { margin-top: 5%; } .cv-upload-section { align-items: center; margin-top: 3%; } .cv-selector { border-radius: 1vw; border-color: rgb(0, 174, 255); border-width: 1%; border-style: solid; color: white; background-color: transparent; transition: all 0.2s ease 0s; font-size: 0.7vw; padding: 0.5vw; margin-bottom: 3%; } .cv-selector:hover { box-shadow: 1px 1px 10px rgb(0, 174, 255); background-color: rgb(0, 174, 255); color: black; } .cv-selector:active { box-shadow: none; } .cv-selector option { background-color: rgb(80, 80, 80); color: white; } .cv-upload { border-radius: 1vw; border-color: rgb(0, 174, 255); border-width: 1%; border-style: solid; color: white; background-color: transparent; transition: all 0.2s ease 0s; font-size: 0.7vw; padding: 0.5vw; } .cv-upload:hover { box-shadow: 1px 1px 10px rgb(0, 174, 255); background-color: rgb(0, 174, 255); color: black; } .cv-upload:active { box-shadow: none; } .cv-save{ border-radius: 1vw; border-color: rgb(0, 174, 255); border-width: 1%; border-style: solid; color: white; background-color: transparent; transition: all 0.2s ease 0s; font-size: 0.7vw; padding: 0.5vw; margin-top: 3%; margin-right: 3%; } .cv-save:hover { box-shadow: 1px 1px 10px rgb(0, 174, 255); background-color: rgb(0, 174, 255); color: black; } .cv-save:active { box-shadow: none; } .cv-plus { border-radius: 1vw; border-color: rgb(0, 174, 255); border-width: 1%; border-style: solid; color: white; background-color: transparent; transition: all 0.2s ease 0s; font-size: 0.7vw; padding: 0.5vw; margin-bottom: 3%; margin-left: 2%; } .cv-plus:hover { box-shadow: 1px 1px 10px rgb(0, 174, 255); background-color: rgb(0, 174, 255); color: black; } .cv-plus:active { box-shadow: none; } .cv-del { border-radius: 1vw; border-color: rgb(255, 48, 48); border-width: 1%; border-style: solid; color: white; background-color: transparent; transition: all 0.2s ease 0s; font-size: 0.7vw; padding: 0.5vw; margin-top: 3%; margin-right: 3%; } .cv-del:hover { box-shadow: 1px 1px 10px rgb(255, 48, 48); background-color: rgb(255, 48, 48); color: black; } .cv-del:active { box-shadow: none; } .cv-textarea { border-radius: 1vw; padding: 3%; color: black; height: 15vw; } .cv-sections { padding: 2% !important; } .hbox h1 { font-size: large; } table { color: white; } .hbox { margin: 1%; padding: 1%; background-color: rgb(80, 80, 80); border-radius: 1vw; box-shadow: 5px 5px 5px rgba(80, 80, 80, 0.477) ; } </style>