im crazy as fuck

2025-03-23 21:25:33 +01:00
parent a6e565d677
commit 4222b37e77
6 changed files with 236 additions and 159 deletions
--- a/css/style.css
+++ b/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;
+}
--- a/css/style_menu.css
+++ b/css/style_menu.css
@@ -1,22 +1,6 @@
-#carousel-container {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 80%;
-    margin: auto;
-    overflow: hidden;
-    position: relative;
-    perspective: 1000px;
-  }
-  
-  #carousel {
-    display: flex;
-    transition: transform 0.5s ease;
-    transform-style: preserve-3d;
-  }
-  
-  .project {
-    min-width: 90%;
+.project {
+  width: 90%;
+  height: 40vh;
  box-sizing: border-box;
  padding: 20px;
  background-color: #f8f9fa;
@@ -25,45 +9,73 @@
  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 {
+#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; }
--- a/css/style_projet.css
+++ b/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;
-}
--- a/html/projet_detail.html
+++ b/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">
--- a/index.html
+++ b/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">
-            <button id="prev-button" class="nav-button">&larr;</button>
-            <div id="carousel">
+        <div id="carousel-container" class="container">
+          <div id="carousel" class="carousel">
            <!-- Projects will be dynamically inserted here -->
          </div>
-            <button id="next-button" class="nav-button">&rarr;</button>
        </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>
--- a/js/index.js
+++ b/js/index.js
@@ -26,6 +26,9 @@ 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';
@@ -62,12 +65,17 @@ function setupCarousel(global_project_list) {
      return res;
  }

-  const carousel = document.getElementById('carousel');
-  let currentIndex = 0;
-
  function updateCarousel() {
      const projectWidth = document.querySelector('.project').clientWidth;
      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() {
@@ -90,16 +98,25 @@ function setupCarousel(global_project_list) {
      }
  }  

+
  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 degGlobal = 360 / global_project_list.length;
+
+  var carousel_css = $(".carousel"),
+    currdeg  = 0
+
+  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>Nom : ${project.name}</h2>
-      <p>Date : ${formatDate(project.start_date)}</p>
+      <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>
@@ -107,6 +124,7 @@ function setupCarousel(global_project_list) {
      </div>
      `;
      carousel.appendChild(projectDiv);
+      document.querySelector('.'.concat(letter[index])).style=`transform: rotateY(${index * degGlobal}deg) translateZ(250px);`;

      // Add event listener for project details button
      const detailButton = projectDiv.querySelector('.default-access-button');
@@ -125,7 +143,7 @@ function setupCarousel(global_project_list) {
          document.getElementById('alertMessage').textContent = `Veux-tu vraiment supprimer le projet : ${projectName} ?`;
          document.getElementById('customAlert').style.display = 'block';

-      document.getElementById('okBtn').onclick = function() {
+          document.getElementById('okBtn').onclick = function () {
              document.getElementById('customAlert').style.display = 'none';
              // Call your delete function here
              deleteProject(project.id).then(() => {
@@ -133,12 +151,56 @@ function setupCarousel(global_project_list) {
              });
          };

-      document.getElementById('cancelBtn').onclick = function() {
+          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
+      });
+      carouselDots.appendChild(dot);
  });

  // 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)"
+  });
+}
+
 }