From a0a0448a13ee89c7ae30e18e55197dda9821c114 Mon Sep 17 00:00:00 2001
From: florian <la238872@student.helha.be>
Date: Fri, 5 Sep 2025 14:14:23 +0200
Subject: [PATCH] add login button

---
 public/header-snippet.html | 32 +++++++++++++++++++++++---------
 public/scripts/common.js   | 14 ++++++++++++++
 public/styles/common.css   | 26 +++++++++++++-------------
 3 files changed, 50 insertions(+), 22 deletions(-)

diff --git a/public/header-snippet.html b/public/header-snippet.html
index 82283e7..d8a49ca 100644
--- a/public/header-snippet.html
+++ b/public/header-snippet.html
@@ -2,12 +2,26 @@
     The land of the penguin
 </a>
 
-<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" />
-    <path
-        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>
\ No newline at end of file
+<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" />
+        <path
+            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>
+</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>
\ No newline at end of file
diff --git a/public/scripts/common.js b/public/scripts/common.js
index 4cf68e6..7c727c4 100644
--- a/public/scripts/common.js
+++ b/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');
diff --git a/public/styles/common.css b/public/styles/common.css
index 6b75486..b5b4d05 100644
--- a/public/styles/common.css
+++ b/public/styles/common.css
@@ -279,22 +279,22 @@ main {
     margin-bottom: 10px;
     /* Espace entre les champs */
   }
+}
 
-  button {
-    padding: 10px 20px;
-    border-radius: 5px;
-    border: none;
-    background-color: #9ccfcd;
-    color: white;
-    font-size: 16px;
-    cursor: pointer;
+button {
+  padding: 10px 20px;
+  border-radius: 5px;
+  border: none;
+  background-color: #9ccfcd;
+  color: white;
+  font-size: 16px;
+  cursor: pointer;
 
-    transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-in-out;
 
-    &:hover {
-      background-color: #7fb1ae;
-      /* Couleur au survol */
-    }
+  &:hover {
+    background-color: #7fb1ae;
+    /* Couleur au survol */
   }
 }