add login button

public/header-snippet.html

@@ -2,7 +2,8 @@
     The land of the penguin
 </a>
 
-<div class="back-button"">
+<template id="back-button-template">
+    <div class="back-button"">
                 <svg width=" 24" height="8" viewBox="0 0 16 8" fill="none" class="arrow-icon">
         <path d="M15 4H4V1" stroke="#CDF5FF" />
         <path d="M14.5 4H3.5H0" stroke="#CDF5FF" />
@@ -10,4 +11,17 @@
             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"
             fill="#CDF5FF" />
         </svg>
-</div>
+    </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>

public/scripts/common.js

@@ -1,11 +1,25 @@
 const headerElement = document.querySelector('header');
 const footerElement = document.querySelector('footer');
 
+let isLoggedIn = false;
+
 async function loadHeaderFooter() {
   try {
     const headerResponse = await fetch('https://commonhtml.thepenguinontheweb.tech/header-snippet.html');
     if (!headerResponse.ok) throw new Error('Failed to load header');
     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;
 
     const footerResponse = await fetch('https://commonhtml.thepenguinontheweb.tech/footer-snippet.html');

public/styles/common.css

@@ -279,8 +279,9 @@ main {
     margin-bottom: 10px;
     /* Espace entre les champs */
   }
+}
 
-  button {
+button {
   padding: 10px 20px;
   border-radius: 5px;
   border: none;
@@ -295,7 +296,6 @@ main {
     background-color: #7fb1ae;
     /* Couleur au survol */
   }
-  }
 }
 
 .arrow-icon {