adminflsu/CommonHtml
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add login button

Browse Source
This commit is contained in:
florian 2025-09-05 14:14:23 +02:00
parent c43d2839ac
commit a0a0448a13
3 changed files with 50 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
public/header-snippet.html
View File

@ -2,12 +2,26 @@
The land of the penguin The land of the penguin
</a> </a>
<div class="back-button""> <template id="back-button-template">
<svg width=" 24" height="8" viewBox="0 0 16 8" fill="none" class="arrow-icon"> <div class="back-button"">
<path d="M15 4H4V1" stroke="#CDF5FF" /> <svg width=" 24" height="8" viewBox="0 0 16 8" fill="none" class="arrow-icon">
<path d="M14.5 4H3.5H0" stroke="#CDF5FF" /> <path d="M15 4H4V1" stroke="#CDF5FF" />
<path <path d="M14.5 4H3.5H0" stroke="#CDF5FF" />
d="M15.8536 4.35355C16.0488 4.15829 16.0488 3.84171 15.8536 3.64645L12.6716 0.464466C12.4763 0.269204 12.1597 0.269204 11.9645 0.464466C11.7692 0.659728 11.7692 0.976311 11.9645 1.17157L14.7929 4L11.9645 6.82843C11.7692 7.02369 11.7692 7.34027 11.9645 7.53553C12.1597 7.7308 12.4763 7.7308 12.6716 7.53553L15.8536 4.35355ZM15 4.5L15.5 4.5L15.5 3.5L15 3.5L15 4.5Z" <path
fill="#CDF5FF" /> d="M15.8536 4.35355C16.0488 4.15829 16.0488 3.84171 15.8536 3.64645L12.6716 0.464466C12.4763 0.269204 12.1597 0.269204 11.9645 0.464466C11.7692 0.659728 11.7692 0.976311 11.9645 1.17157L14.7929 4L11.9645 6.82843C11.7692 7.02369 11.7692 7.34027 11.9645 7.53553C12.1597 7.7308 12.4763 7.7308 12.6716 7.53553L15.8536 4.35355ZM15 4.5L15.5 4.5L15.5 3.5L15 3.5L15 4.5Z"
</svg> fill="#CDF5FF" />
</div> </svg>
</div>
</template>
<template id="login-template">
<a href="https://penglogin.thepenguinontheweb.tech" class="header-link">
Login
</a>
</template>
<template id="my-account-template">
<a href="https://penglogin.thepenguinontheweb.tech/myaccount" class="header-link">
My Account
</a>
</template>

14
public/scripts/common.js
View File

@ -1,11 +1,25 @@
const headerElement = document.querySelector('header'); const headerElement = document.querySelector('header');
const footerElement = document.querySelector('footer'); const footerElement = document.querySelector('footer');
let isLoggedIn = false;
async function loadHeaderFooter() { async function loadHeaderFooter() {
try { try {
const headerResponse = await fetch('https://commonhtml.thepenguinontheweb.tech/header-snippet.html'); const headerResponse = await fetch('https://commonhtml.thepenguinontheweb.tech/header-snippet.html');
if (!headerResponse.ok) throw new Error('Failed to load header'); if (!headerResponse.ok) throw new Error('Failed to load header');
const headerHTML = await headerResponse.text(); const headerHTML = await headerResponse.text();
const backButtonTemplate = document.getElementById('back-button-template').innerHTML;
const loginTemplate = document.getElementById('login-template').innerHTML;
const myAccountTemplate = document.getElementById('my-account-template').innerHTML;
if (isLoggedIn) {
headerElement.innerHTML += myAccountTemplate.cloneNode(true);
}
else {
headerElement.innerHTML += loginTemplate.cloneNode(true);
}
headerElement.innerHTML = headerHTML; headerElement.innerHTML = headerHTML;
const footerResponse = await fetch('https://commonhtml.thepenguinontheweb.tech/footer-snippet.html'); const footerResponse = await fetch('https://commonhtml.thepenguinontheweb.tech/footer-snippet.html');

26
public/styles/common.css
View File

@ -279,22 +279,22 @@ main {
margin-bottom: 10px; margin-bottom: 10px;
/* Espace entre les champs */ /* Espace entre les champs */
} }
}
button { button {
padding: 10px 20px; padding: 10px 20px;
border-radius: 5px; border-radius: 5px;
border: none; border: none;
background-color: #9ccfcd; background-color: #9ccfcd;
color: white; color: white;
font-size: 16px; font-size: 16px;
cursor: pointer; cursor: pointer;
transition: background-color 0.3s ease-in-out; transition: background-color 0.3s ease-in-out;
&:hover { &:hover {
background-color: #7fb1ae; background-color: #7fb1ae;
/* Couleur au survol */ /* Couleur au survol */
}
} }
} }