196 lines
8 KiB
JavaScript
196 lines
8 KiB
JavaScript
|
var getfooter = `
|
|||
|
|
<div style="height:95% width:100%; display:flex; border-bottom: solid var(--scdr-txt-color)">
|
|||
|
|
<div class=footerleft>
|
|||
|
|
<a href="/">Accueil</a><br>
|
|||
|
|
<a href="/games">Jeux</a><br>
|
|||
|
|
<a href="/services">Services</a><br>
|
|||
|
|
<a href="/projects">Projets</a><br>
|
|||
|
|
</div>
|
|||
|
|
<div class=footerright>
|
|||
|
|
<a href="/contact">Me contacter</a><br>
|
|||
|
|
<a href="/sitemap">Plan Du Site</a><br>
|
|||
|
|
<a href="/about">A Propos</a><br>
|
|||
|
|
<a href="/legal">Mentions Légales</a><br>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div style="height:5%; width:100%;">
|
|||
|
|
<p>Copyright © 2023-<current-time type="year"></current-time>
|
|||
|
|
| GZod01</p>
|
|||
|
|
<script>echo('<a onclick=\'showdevconsole()\' href="javascript:void(0)">Console</a>')</script>
|
|||
|
|
</div>
|
|||
|
|
<span title="Changer Le Theme" class="themebutton" onclick=switchtheme()><i class="fa fa-star-half-o" aria-hidden="true" id="switchmodeicon"></i></span>
|
|||
|
|
`
|
|||
|
|
var getheader = `
|
|||
|
|
<a href="/">Accueil</a>
|
|||
|
|
<a href="/games">Jeux</a>
|
|||
|
|
<a href="/services">Services</a>
|
|||
|
|
<a href="/projects">Projets</a>
|
|||
|
|
<a href="/contact">Me contacter</a>
|
|||
|
|
<a href="/sitemap">Plan Du Site</a>
|
|||
|
|
<a href="/about">A Propos</a>
|
|||
|
|
<a href="/legal">Mentions Légales</a>
|
|||
|
|
<a href="javascript:void(0);" class="icon" onclick="barresponsivefunction()">
|
|||
|
|
<i class="fa fa-bars"></i>
|
|||
|
|
</a>
|
|||
|
|
`
|
|||
|
|
|
|||
|
|
|
|||
|
|
function barresponsivefunction(){
|
|||
|
|
var x = document.getElementById("headernavbar");
|
|||
|
|
if (x.className === "nav") {
|
|||
|
|
x.className += " responsive";
|
|||
|
|
} else {
|
|||
|
|
x.className = "nav";
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
function getpartials(){
|
|||
|
|
// Bug with the fetch to api.gzod01.fr/parts/... TODO
|
|||
|
|
// let default_header = document.createElement('header')
|
|||
|
|
// let getheader = fetch('//api.gzod01.fr/parts/header.html').then(function (response) {
|
|||
|
|
// // The API call was successful!
|
|||
|
|
// return response.text();
|
|||
|
|
// }).then(function (html) {
|
|||
|
|
// let parser = new DOMParser();
|
|||
|
|
// let doc = parser.parseFromString(html, 'text/html');
|
|||
|
|
// return doc
|
|||
|
|
// }).catch(function (err) {
|
|||
|
|
// console.warn('Something went wrong.', err);
|
|||
|
|
// });
|
|||
|
|
// default_header.appendChild(getheader)
|
|||
|
|
// let default_footer = document.createElement('footer')
|
|||
|
|
// let getfooter = fetch('//api.gzod01.fr/parts/footer.html').then(function (response) {
|
|||
|
|
// // The API call was successful!
|
|||
|
|
// return response.text();
|
|||
|
|
// }).then(function (html) {
|
|||
|
|
// let parser = new DOMParser();
|
|||
|
|
// let doc = parser.parseFromString(html, 'text/html');
|
|||
|
|
// return doc
|
|||
|
|
// }).catch(function (err) {
|
|||
|
|
// console.warn('Something went wrong.', err);
|
|||
|
|
// });
|
|||
|
|
// default_footer.appendChild(getfooter)
|
|||
|
|
let default_header = document.createElement('header')
|
|||
|
|
let default_footer = document.createElement('footer')
|
|||
|
|
default_header.innerHTML = getheader
|
|||
|
|
default_header.className = 'nav'
|
|||
|
|
default_header.id = 'headernavbar'
|
|||
|
|
default_footer.innerHTML = getfooter
|
|||
|
|
document.getElementById('header').replaceWith(default_header)
|
|||
|
|
document.getElementById('footer').replaceWith(default_footer)
|
|||
|
|
}
|
|||
|
|
function mainscript(){
|
|||
|
|
getpartials()
|
|||
|
|
gettheme()
|
|||
|
|
cookiepopup()
|
|||
|
|
checkProtocol()
|
|||
|
|
document.head.innerHTML = document.head.innerHTML + '<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">'
|
|||
|
|
}
|
|||
|
|
window.onload = ()=>{mainscript()}
|
|||
|
|
function gettheme(){
|
|||
|
|
if(localStorage.getItem('colorscheme')==='dark'){
|
|||
|
|
var colorScheme = 'dark'
|
|||
|
|
}
|
|||
|
|
else if(localStorage.getItem('colorscheme')==='light'){
|
|||
|
|
var colorScheme = 'light'
|
|||
|
|
}
|
|||
|
|
else if(localStorage.getItem('colorscheme')==='matrix'){
|
|||
|
|
var colorScheme = 'matrix'
|
|||
|
|
}
|
|||
|
|
else{
|
|||
|
|
var colorScheme = getComputedStyle(document.body,':after').content
|
|||
|
|
if(colorScheme==='"dark"'){colorScheme='dark'}
|
|||
|
|
else if(colorScheme==='"light"'){colorScheme='light'}
|
|||
|
|
else{colorScheme='light'}
|
|||
|
|
}
|
|||
|
|
let r = document.querySelector(':root')
|
|||
|
|
if(colorScheme==='dark'){
|
|||
|
|
r.style.setProperty('--main-bg-color','midnightblue')
|
|||
|
|
r.style.setProperty('--main-txt-color','white')
|
|||
|
|
r.style.setProperty('--scdr-bg-color','darkslateblue')
|
|||
|
|
}
|
|||
|
|
else if(colorScheme==='light'){
|
|||
|
|
r.style.setProperty('--main-bg-color','white')
|
|||
|
|
r.style.setProperty('--main-txt-color','black')
|
|||
|
|
r.style.setProperty('--scdr-bg-color','lightgray ')
|
|||
|
|
}
|
|||
|
|
else if(colorScheme==='matrix'){
|
|||
|
|
r.style.setProperty('--main-bg-color','#000')
|
|||
|
|
r.style.setProperty('--main-txt-color','lime')
|
|||
|
|
r.style.setProperty('--scdr-bg-color','#111')
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
function switchtheme(){
|
|||
|
|
let r = document.querySelector(':root')
|
|||
|
|
if('white'===r.style.getPropertyValue('--main-txt-color')){
|
|||
|
|
localStorage.setItem('colorscheme','light')
|
|||
|
|
gettheme()
|
|||
|
|
}
|
|||
|
|
else if('black'===r.style.getPropertyValue('--main-txt-color')){
|
|||
|
|
localStorage.setItem('colorscheme','dark')
|
|||
|
|
gettheme()
|
|||
|
|
}
|
|||
|
|
else{
|
|||
|
|
localStorage.setItem('colorscheme','light')
|
|||
|
|
gettheme()
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function cookiepopup(){
|
|||
|
|
if(localStorage.getItem('cookieaccepted')==null){
|
|||
|
|
let cookieparentdiv = document.createElement('div')
|
|||
|
|
cookieparentdiv.style.backgroundColor= 'rgba(0,0,0,0.5)'
|
|||
|
|
cookieparentdiv.style.setProperty('backdrop-filter','blur(5px)')
|
|||
|
|
cookieparentdiv.style.width = '100%'
|
|||
|
|
cookieparentdiv.style.height= '100%'
|
|||
|
|
cookieparentdiv.style.position='fixed'
|
|||
|
|
cookieparentdiv.id='cookiepopup'
|
|||
|
|
let cookiediv = document.createElement('div')
|
|||
|
|
cookiediv.className= 'reallycentered'
|
|||
|
|
cookiediv.id = 'cookiepopup'
|
|||
|
|
cookiediv.style.backgroundColor = 'var(--scdr-bg-color)'
|
|||
|
|
cookiediv.style.border = 'solid 2px var(--scdr-txt-color)'
|
|||
|
|
cookiediv.innerHTML= '<p>Ce site utilise des "Cookies" (principalement le localStorage) pour fonctionner (theme de couleurs, données des jeux, etc.).</p><p>Afin que ce site fonctionne vous devez donc accepter les cookies, si vous avez une question sur l\'utilisation des cookies vous pouvez consulter les <a href="/legal">Mentions Légales</a>(contenant aussi la politique de confidentialité).</p><br><button style="background-color:green" onclick="localStorage.setItem(\'cookieaccepted\',\'true\'); document.getElementById(\'cookiepopup\').remove()">Accepter</button>'
|
|||
|
|
cookieparentdiv.appendChild(cookiediv)
|
|||
|
|
document.body.appendChild(cookieparentdiv)
|
|||
|
|
console.log('do')
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
class CurrentTime extends HTMLElement {
|
|||
|
|
connectedCallback() {
|
|||
|
|
let date = new Date()
|
|||
|
|
let type = this.getAttribute('type').toLowerCase()
|
|||
|
|
if(type==='year'){
|
|||
|
|
this.innerHTML=date.getFullYear()
|
|||
|
|
} else if(type==='fulldate'){
|
|||
|
|
this.innerHTML=date.getDay()+'/'+date.getMonth()+'/'+date.getFullYear()
|
|||
|
|
}
|
|||
|
|
else if(type==='full'){this.innerHTML=date.getHours()+':'+date.getMinutes()+':'+date.getSeconds()+' '+date.getDay()+'/'+date.getMonth()+'/'+date.getFullYear()}
|
|||
|
|
else{this.innerHTML = 'YOU HAVE TO SET THE TYPE ATTRIBUTE TO ONE OF THESE VALUE: YEAR : IT WILL DISPLAY THE CURRENT YEAR ; FULLDATE : IT WILL DISPLAY THE CURRENT DATE (day/month/year) ; FULL : IT WILL DISPLAY tHE FULL CURRENT DATE AND HOUR (hour:minute:seconds day/month/year) ; THERE WILL BE OTHER TYPE IN THE FUTURE'}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
customElements.define("current-time", CurrentTime);
|
|||
|
|
function text(url) {
|
|||
|
|
return fetch(url).then(res => res.text());
|
|||
|
|
}
|
|||
|
|
function checkProtocol(){
|
|||
|
|
if(localStorage['dangerous']==='OK'){
|
|||
|
|
}
|
|||
|
|
else if(location.protocol==='http:'){
|
|||
|
|
let a = document.querySelector('.content').innerHTML
|
|||
|
|
document.querySelector('.content').innerHTML = '<div class=fullcentered>Bonjour, Une nouvelle version plus sécurisée du site est disponible (version https).<br><button onclick="location.protocol=\'https:\'">Se rendre sur la version HTTPS</button> OU <button onclick="localStorage[\'dangerous\']=\'OK\'; window.location.reload()">Je Comprend Les Risques mais Je préfère rester</button>'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// BETA OF FETCH DON'T VERY WORK:
|
|||
|
|
//await toawaithtml(url) return the html in the url
|
|||
|
|
//so:
|
|||
|
|
async function fetchhtml(url){
|
|||
|
|
let result = await text(url)
|
|||
|
|
let parser = new DOMParser()
|
|||
|
|
let finalresult= await parser.parseFromString(result, 'text/html')
|
|||
|
|
return finalresult
|
|||
|
|
}
|
|||
|
|
html =(url,result)=> fetchhtml(url).then(res=>result = res)
|
|||
|
|
|