maj title

css/style.css

@@ -13,6 +13,8 @@ body::before {
 }
 
 .container {
+  position: absolute;
+  top: 28vh;
   max-width: 1140px;
   margin: auto;
   padding: 15px;
@@ -361,14 +363,15 @@ footer {
 
 .container-title {
   text-align: center;
-
+  position: absolute;
+  top:5vh
 }
 .container-title #xyz {
   left: 25vw;
   font-family: 'Cabin Condensed', sans-serif;
   position: relative;
   white-space: nowrap;
-  font-size: 10vh;
+  font-size: 4.5vw;
   max-width: 40vw;
   font-weight: bold;
   overflow: hidden;
@@ -376,9 +379,9 @@ footer {
   animation: textreveal 4s infinite alternate;
 }
 .container-title #ball {
-  top: 14vh;
+  top: 4vh;
   position: absolute;
-  height: 20vh;
+  height: 10vw;
   width: 10vw;
   white-space: nowrap;
   overflow: hidden;

css/style_menu.css

@@ -12,6 +12,8 @@
 }
 
 .global_title {
+  position: absolute;
+  width: 99vw;
   animation: glitch 3s steps(100) infinite;
   color: #151515;
   font-size: 10vh;
@@ -20,8 +22,9 @@
 }
 
 #carousel-dots {
-  position: sticky;
-  bottom: 0;
+  width: 99vw;
+  position: absolute;
+  bottom: 12vh;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -30,7 +33,7 @@
 .dot {
   z-index: 30;
   width: 0.8vw;
-  height: 1.8vh;
+  height: 0.8vw;
   margin: 0 0.3vw;
   background-color: #bbb;
   border-radius: 50%;
@@ -47,7 +50,7 @@
   width: 25vw;
   height: 47vh;
   position: relative;
-  perspective: 100vw;
+  perspective: 99vw;
 }
 
 .carousel {

css/style_projet.css

@@ -126,10 +126,10 @@
   transform: rotate(70deg);
 }
 
-#name_project {
+.name_project {
   animation: glitch 3s steps(100) infinite;
-  color: #151515;
-  font-size: 6em;
+  color: #ffffff;
+  font-size: 10vh;
   text-align: center;
   text-transform: uppercase;
 }
@@ -139,3 +139,16 @@
     font-size: 2em;
   }
 }
+
+.container-title #xyzv {
+  left: 25vw;
+  font-family: 'Cabin Condensed', sans-serif;
+  position: relative;
+  white-space: nowrap;
+  font-size: 10vh;
+  max-width: 40vw;
+  font-weight: bold;
+  overflow: hidden;
+  color: #f6f6f6;
+  animation: none;
+}

html/projet_detail.html

@@ -115,8 +115,9 @@
           <div id="delete-placeholder"></div>
         </div>
       </div>
-      <div>
-        <h3 id="name_project"></h3>
+      <div id="title-global">
+        <h3 id="h3-title" class="name_project"></h3>
+        <p class="name_project" id="xyzv" style="display: none;"></p>
       </div>
     <div class="nexter">
       <div id="metric_viewer_placeholder" >
@@ -145,7 +146,7 @@
   <script src="../js/utilities/tools.js"></script>
   <script src="../js/projet_detail.js"></script>
 </body>
-  <footer>
+  <footer onclick="change_title_style()">
     <p>&copy; 2025 Timelapse. All rights reserved.</p>
   </footer>
 </html>

js/projet_detail.js

@@ -7,7 +7,8 @@ document.addEventListener("DOMContentLoaded", async () => {
 
   const project = data.find(project => project.id == projectId);
   if (project) {
-    document.getElementById("name_project").innerHTML = project.name;
+    for(obj of document.getElementsByClassName("name_project"))
+      obj.innerHTML = project.name;
   } else {
     console.error("Project not found");
   }
@@ -451,4 +452,26 @@ function updateFrequencyText() {
 
 $( ".arrow-icon" ).click(function() {
   $(this).toggleClass("open");
-});
+});
+
+let titleIsReadable = true;
+
+function change_title_style(){
+  const titlePlaceHolder = document.getElementById('title-global');
+  const xyz = document.getElementById('xyzv');
+  const h3_title = document.getElementById('h3-title');
+  if(titleIsReadable){
+    titleIsReadable = false;
+    titlePlaceHolder.classList.add('container-title');
+    xyz.style.display = 'block';
+    h3_title.style.display = 'none';
+  } else {
+    titleIsReadable = true;
+    titlePlaceHolder.classList.remove('container-title');
+    xyz.style.display = 'none';
+    h3_title.style.display = 'block';
+  }
+ 
+
+} 
+change_title_style();