add login button

public/header-snippet.html

@@ -2,6 +2,7 @@
     The land of the penguin
 </a>
 
+<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" />
@@ -11,3 +12,16 @@
             fill="#CDF5FF" />
         </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>

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,6 +279,7 @@ main {
     margin-bottom: 10px;
     /* Espace entre les champs */
   }
+}
 
 button {
   padding: 10px 20px;
@@ -296,7 +297,6 @@ main {
     /* Couleur au survol */
   }
 }
-}
 
 .arrow-icon {
   width: 50px;