im crazy as fuck

css/style.css

@@ -349,3 +349,13 @@ footer {
   99% { text-shadow: -3px 0 0 #0c33f5, 3px 0 0 lime; filter: blur(0);}
   100% { text-shadow: -3px 0 0 #0c33f5, 3px 0 0 lime; filter: blur(0);} 
 }
+
+.form-header {
+  display: flex;
+  justify-content: right; /* Aligns items with space between them */
+  ;
+}
+
+#close-form-button-project, #close-form-button-{
+  width: 35px;
+}

css/style_menu.css

@@ -1,69 +1,81 @@
-#carousel-container {
+.project {
-    display: flex;
+  width: 90%;
-    align-items: center;
+  height: 40vh;
-    justify-content: center;
+  box-sizing: border-box;
-    width: 80%;
+  padding: 20px;
-    margin: auto;
+  background-color: #f8f9fa;
-    overflow: hidden;
+  text-align: center;
-    position: relative;
+  border: 1px solid #ddd;
-    perspective: 1000px;
+  border-radius: 10px;
-  }
+  margin: 0 10px;
+  backface-visibility: hidden;
+}
 
-  #carousel {
+#global_title {
-    display: flex;
-    transition: transform 0.5s ease;
-    transform-style: preserve-3d;
-  }
-  
-  .project {
-    min-width: 90%;
-    box-sizing: border-box;
-    padding: 20px;
-    background-color: #f8f9fa;
-    text-align: center;
-    border: 1px solid #ddd;
-    border-radius: 10px;
-    margin: 0 10px;
-    backface-visibility: hidden;
-  }
-  
-  .nav-button {
-    background-color: #182b3f;
-    z-index: 15;
-    color: white;
-    border: none;
-    padding: 10px;
-    cursor: pointer;
-    border-radius: 5px;
-    font-size: 18px;
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-  }
-  
-  #prev-button {
-    left: 10px;
-  }
-  
-  #next-button {
-    right: 10px;
-  }
-  
-  .nav-button:hover {
-    background-color: #12457d;
-  }
-  
-  .project_buttons {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    text-align: center;
-  }
-  
- #global_title {
   animation: glitch 3s steps(100) infinite;
   color: #151515;
-  font-size: 13vh;
+  font-size: 10vh;
   text-align: center;
   text-transform: uppercase;
-  }
+}
+
+#carousel-dots {
+  position: sticky;
+  bottom: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.dot {
+  z-index: 30;
+  width: 12px;
+  height: 12px;
+  margin: 0 5px;
+  background-color: #bbb;
+  border-radius: 50%;
+  cursor: pointer;
+  transition: background-color 0.3s;
+}
+
+.dot.active {
+  background-color: #717171;
+} 
+
+.container {
+  margin: 0 auto;
+  width: 250px;
+  height: 47vh;
+  position: relative;
+  perspective: 1000px;
+}
+
+.carousel {
+  width: 100%;
+  position: absolute;
+  transform-style: preserve-3d;
+  transition: transform 1s;
+}
+
+.item {
+  display: block;
+  position: absolute;
+  text-align: center;
+}
+
+.next, .prev {
+  position: absolute;
+  cursor: pointer;
+  background-color: transparent;
+  font-size: 90px;
+  color: white;
+  border: none;
+  bottom: 2.5em;
+  transition: transform 0.3s, box-shadow 0.3s;
+}
+.next:hover, .prev:hover {
+  box-shadow: 0 0 15px 0 rgba(253, 252, 252, 0.2);
+  transform: translateY(-4px);
+}
+.next { right: 2em; }
+.prev { left: 2em; }

css/style_projet.css

@@ -139,13 +139,3 @@
     font-size: 2em;
   }
 }
-
-.form-header {
-  display: flex;
-  justify-content: right; /* Aligns items with space between them */
-  ;
-}
-
-#close-form-button-project{
-  width: 35px;
-}

html/projet_detail.html

@@ -21,7 +21,7 @@
   <div id="form-container-project" class="form-container" style="display: none">
     <div class="form-content">
       <div class="form-header">
-        <button id="close-form-button-project" class="default-delete-button">&times;</button>
+        <button id="close-form-button-project" class="default-delete-button">&#x2715;</button>
       </div>
       <h1>Formulaire</h1>
       <div id="my-form">

index.html

@@ -14,14 +14,16 @@
         <div class="modal-content">
             <p id="alertMessage">This is a custom alert!</p>
             <div class="modal-buttons">
-                <button class="default-access-button" id="cancelBtn">Cancel</button>
+                <button class="default-delete-button" id="cancelBtn">Annuler</button>
                 <button class="default-access-button" id="okBtn">OK</button>
             </div>
         </div>
     </div>
     <div id="form-container" class="form-container" style="display: none">
       <div class="form-content" id="place-of-form">
-        <button id="close-form-button" class="default-delete-button">&times;</button>
+        <div class="form-header">
+          <button id="close-form-button" class="default-delete-button">&#x2715;</button>
+        </div>
         <h1>Formulaire</h1>
         <div id="my-form">
           <label for="name">Nom :</label>
@@ -34,7 +36,7 @@
         </div>
       </div>
     </div>
-    <div id="section" class="container2">
+    <div>
         <div>
             <button class="default-button" id="download"><span>Download App</span></button>
             <button class="default-button" id="show-form-button"><span>+</span></button>
@@ -42,14 +44,15 @@
         <div>
           <h1 id="global_title">Caméra Timelapse</h1>
         </div>
-        <div id="carousel-container">
+        <div id="carousel-container" class="container">
-            <button id="prev-button" class="nav-button">&larr;</button>
+          <div id="carousel" class="carousel">
-            <div id="carousel">
+            <!-- Projects will be dynamically inserted here -->
-              <!-- Projects will be dynamically inserted here -->
-            </div>
-            <button id="next-button" class="nav-button">&rarr;</button>
           </div>
+        </div>
+        <button id="prev-button" class="prev">⮜</button>
+        <button id="next-button" class="next">⮞</button>
     </div>
+      <div id="carousel-dots"></div>
 
     <footer class="text-center mt-5 py-3">
         <p>&copy; 2025 Timelapse. All rights reserved.</p>

js/index.js

@@ -26,13 +26,16 @@ function formatStatus(status) {
 
 function setupCarousel(global_project_list) {
   const formContainer = document.getElementById('form-container');
+  const carousel = document.getElementById('carousel');
+  const carouselDots = document.getElementById('carousel-dots');
+  let currentIndex = 0;
 
   function showForm() {
-    formContainer.style.display = 'flex';
+      formContainer.style.display = 'flex';
   }
 
   function hideForm() {
-    formContainer.style.display = 'none';
+      formContainer.style.display = 'none';
   }
 
   document.getElementById('show-form-button').addEventListener('click', showForm);
@@ -40,105 +43,164 @@ function setupCarousel(global_project_list) {
   document.getElementById('submit').addEventListener('click', handleFormSubmit);
 
   async function handleFormSubmit() {
-    const nameProject = document.getElementById('name').value;
+      const nameProject = document.getElementById('name').value;
-    const description = document.getElementById('description').value;
+      const description = document.getElementById('description').value;
-    if (nameProject.length === 0 || !checkName(global_project_list, nameProject)) {
+      if (nameProject.length === 0 || !checkName(global_project_list, nameProject)) {
-      alert('Le nom : "' + nameProject + '" est déjà pris ou vide ! \n' +
+          alert('Le nom : "' + nameProject + '" est déjà pris ou vide ! \n' +
-        'veuillez en trouver un autre');
+              'veuillez en trouver un autre');
-      return;
+          return;
-    }
+      }
-    PostNewProject(nameProject, description).then(() => {
+      PostNewProject(nameProject, description).then(() => {
-      location.reload();
+          location.reload();
-    });
+      });
   }
 
   function checkName(Projects, name) {
-    let res = true;
+      let res = true;
-    Projects.forEach(project => {
+      Projects.forEach(project => {
-      const ProjectName = project.name;
+          const ProjectName = project.name;
-      if (ProjectName === name)
+          if (ProjectName === name)
-        res = false;
+              res = false;
-    });
+      });
-    return res;
+      return res;
   }
 
-  const carousel = document.getElementById('carousel');
-  let currentIndex = 0;
-
   function updateCarousel() {
-    const projectWidth = document.querySelector('.project').clientWidth;
+      const projectWidth = document.querySelector('.project').clientWidth;
-    carousel.style.transform = `translateX(-${currentIndex * projectWidth}px)`;
+      carousel.style.transform = `translateX(-${currentIndex * projectWidth}px)`;
+      updateDots();
+  }
+
+  function updateDots() {
+      const dots = document.querySelectorAll('.dot');
+      dots.forEach((dot, index) => {
+          dot.classList.toggle('active', index === currentIndex);
+      });
   }
 
   function showPrevProject() {
-    if (currentIndex > 0) {
+      if (currentIndex > 0) {
-      currentIndex--;
+          currentIndex--;
-      updateCarousel();
+          updateCarousel();
-    } else {
+      } else {
-      currentIndex = global_project_list.length - 1;
+          currentIndex = global_project_list.length - 1;
-      updateCarousel();
+          updateCarousel();
-    }
+      }
   }
 
   function showNextProject() {
-    if (currentIndex < global_project_list.length - 1) {
+      if (currentIndex < global_project_list.length - 1) {
-      currentIndex++;
+          currentIndex++;
-      updateCarousel();
+          updateCarousel();
-    } else {
+      } else {
-      currentIndex = 0;
+          currentIndex = 0;
-      updateCarousel();
+          updateCarousel();
-    }
+      }
   }  
 
+
   document.getElementById('prev-button').addEventListener('click', showPrevProject);
   document.getElementById('next-button').addEventListener('click', showNextProject);
 
   // Populate the carousel with project data
-  global_project_list.forEach(project => {
+  const letter = ['a', 'b', 'c', 'd', 'e', 'f','g','h','i','j','k','l','m','n','o','p','q','r','s','t'];
-    const projectDiv = document.createElement('div');
+  const degGlobal = 360 / global_project_list.length;
-    projectDiv.classList.add('project');
+
-    projectDiv.innerHTML = `
+  var carousel_css = $(".carousel"),
-      <h2>Nom : ${project.name}</h2>
+    currdeg  = 0
-      <p>Date : ${formatDate(project.start_date)}</p>
+
+  global_project_list.forEach((project, index) => {
+      const projectDiv = document.createElement('div');
+      projectDiv.classList.add('project');
+      projectDiv.classList.add('item');
+      projectDiv.classList.add(letter[index]);
+      projectDiv.innerHTML = `
+      <h2>${project.name}</h2>
+      <p>${formatDate(project.start_date)}</p>
       <p>Status : ${formatStatus(parseInt(project.status))}</p>
       <div class="project_buttons">
-        <button class="default-access-button">détails de ${project.name}</button>
+      <button class="default-access-button">détails de ${project.name}</button>
-        <button class="default-delete-button">Supprimer</button>
+      <button class="default-delete-button">Supprimer</button>
       </div>
-    `;
+      `;
-    carousel.appendChild(projectDiv);
+      carousel.appendChild(projectDiv);
+      document.querySelector('.'.concat(letter[index])).style=`transform: rotateY(${index * degGlobal}deg) translateZ(250px);`;
 
-    // Add event listener for project details button
+      // Add event listener for project details button
-    const detailButton = projectDiv.querySelector('.default-access-button');
+      const detailButton = projectDiv.querySelector('.default-access-button');
-    detailButton.addEventListener('click', (event) => {
+      detailButton.addEventListener('click', (event) => {
-      event.stopPropagation();
+          event.stopPropagation();
-      window.location.href = `html/projet_detail.html?id=${project.id}`;
+          window.location.href = `html/projet_detail.html?id=${project.id}`;
-      change_current_project(global_project_list.indexOf(project));
+          change_current_project(global_project_list.indexOf(project));
-    });
+      });
 
-    // Add event listener for project delete button
+      // Add event listener for project delete button
-    const deleteButton = projectDiv.querySelector('.default-delete-button');
+      const deleteButton = projectDiv.querySelector('.default-delete-button');
-    deleteButton.addEventListener('click', (event) => {
+      deleteButton.addEventListener('click', (event) => {
-      event.stopPropagation();
+          event.stopPropagation();
-      const projectName = project.name;
+          const projectName = project.name;
 
-      document.getElementById('alertMessage').textContent = `Veux-tu vraiment supprimer le projet : ${projectName} ?`;
+          document.getElementById('alertMessage').textContent = `Veux-tu vraiment supprimer le projet : ${projectName} ?`;
-      document.getElementById('customAlert').style.display = 'block';
+          document.getElementById('customAlert').style.display = 'block';
 
-      document.getElementById('okBtn').onclick = function() {
+          document.getElementById('okBtn').onclick = function () {
-        document.getElementById('customAlert').style.display = 'none';
+              document.getElementById('customAlert').style.display = 'none';
-        // Call your delete function here
+              // Call your delete function here
-        deleteProject(project.id).then(() => {
+              deleteProject(project.id).then(() => {
-          location.reload();
+                  location.reload();
+              });
+          };
+
+          document.getElementById('cancelBtn').onclick = function () {
+              document.getElementById('customAlert').style.display = 'none';
+          };
+      });
+
+      // Create a dot for each project
+      const dot = document.createElement('div');
+      dot.classList.add('dot');
+      dot.addEventListener('click', () => {
+        const targetDeg = index * degGlobal;
+        const diff = targetDeg - currdeg;
+        currdeg +=diff;
+        currdeg=-currdeg;
+        currentIndex = index;
+        carousel_css.css({
+            "-webkit-transform": `rotateY(${currdeg}deg)`,
+            "-moz-transform": `rotateY(${currdeg}deg)`,
+            "-o-transform": `rotateY(${currdeg}deg)`,
+            "transform": `rotateY(${currdeg}deg)`
         });
-      };
+        updateDots(); // Update active dot styles
-
+      });
-      document.getElementById('cancelBtn').onclick = function() {
+      carouselDots.appendChild(dot);
-        document.getElementById('customAlert').style.display = 'none';
-      };
-    });
   });
 
   // Initial update to set the correct position
   updateCarousel();
+
+
+  
+
+$(".next").on("click", { d: "n" }, rotate);
+$(".prev").on("click", { d: "p" }, rotate);
+
+function rotate(e){
+  if(e.data.d=="n"){
+    currdeg = currdeg - degGlobal;
+  }
+  if(e.data.d=="p"){
+    currdeg = currdeg + degGlobal;
+  }
+  if(currdeg > 360){
+    currdeg = currdeg%360;
+  }
+  carousel_css.css({
+    "-webkit-transform": "rotateY("+currdeg+"deg)",
+    "-moz-transform": "rotateY("+currdeg+"deg)",
+    "-o-transform": "rotateY("+currdeg+"deg)",
+    "transform": "rotateY("+currdeg+"deg)"
+  });
+}
+
 }