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,69 +1,81 @@
-#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%;
-    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 {
+.project {
+  width: 90%;
+  height: 40vh;
+  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;
+}
+
+#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">
-              <!-- Projects will be dynamically inserted here -->
-            </div>
-            <button id="next-button" class="nav-button">&rarr;</button>
+        <div id="carousel-container" class="container">
+          <div id="carousel" class="carousel">
+            <!-- Projects will be dynamically inserted here -->
          </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>
--- a/js/index.js
+++ b/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 description = document.getElementById('description').value;
-    if (nameProject.length === 0 || !checkName(global_project_list, nameProject)) {
-      alert('Le nom : "' + nameProject + '" est déjà pris ou vide ! \n' +
-        'veuillez en trouver un autre');
-      return;
-    }
-    PostNewProject(nameProject, description).then(() => {
-      location.reload();
-    });
+      const nameProject = document.getElementById('name').value;
+      const description = document.getElementById('description').value;
+      if (nameProject.length === 0 || !checkName(global_project_list, nameProject)) {
+          alert('Le nom : "' + nameProject + '" est déjà pris ou vide ! \n' +
+              'veuillez en trouver un autre');
+          return;
+      }
+      PostNewProject(nameProject, description).then(() => {
+          location.reload();
+      });
  }

  function checkName(Projects, name) {
-    let res = true;
-    Projects.forEach(project => {
-      const ProjectName = project.name;
-      if (ProjectName === name)
-        res = false;
-    });
-    return res;
+      let res = true;
+      Projects.forEach(project => {
+          const ProjectName = project.name;
+          if (ProjectName === name)
+              res = false;
+      });
+      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)`;
+      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() {
-    if (currentIndex > 0) {
-      currentIndex--;
-      updateCarousel();
-    } else {
-      currentIndex = global_project_list.length - 1;
-      updateCarousel();
-    }
+      if (currentIndex > 0) {
+          currentIndex--;
+          updateCarousel();
+      } else {
+          currentIndex = global_project_list.length - 1;
+          updateCarousel();
+      }
  }

  function showNextProject() {
-    if (currentIndex < global_project_list.length - 1) {
-      currentIndex++;
-      updateCarousel();
-    } else {
-      currentIndex = 0;
-      updateCarousel();
-    }
-  }
+      if (currentIndex < global_project_list.length - 1) {
+          currentIndex++;
+          updateCarousel();
+      } else {
+          currentIndex = 0;
+          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 projectDiv = document.createElement('div');
-    projectDiv.classList.add('project');
-    projectDiv.innerHTML = `
-      <h2>Nom : ${project.name}</h2>
-      <p>Date : ${formatDate(project.start_date)}</p>
+  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>${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-delete-button">Supprimer</button>
+      <button class="default-access-button">détails de ${project.name}</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
-    const detailButton = projectDiv.querySelector('.default-access-button');
-    detailButton.addEventListener('click', (event) => {
-      event.stopPropagation();
-      window.location.href = `html/projet_detail.html?id=${project.id}`;
-      change_current_project(global_project_list.indexOf(project));
-    });
+      // Add event listener for project details button
+      const detailButton = projectDiv.querySelector('.default-access-button');
+      detailButton.addEventListener('click', (event) => {
+          event.stopPropagation();
+          window.location.href = `html/projet_detail.html?id=${project.id}`;
+          change_current_project(global_project_list.indexOf(project));
+      });

-    // Add event listener for project delete button
-    const deleteButton = projectDiv.querySelector('.default-delete-button');
-    deleteButton.addEventListener('click', (event) => {
-      event.stopPropagation();
-      const projectName = project.name;
+      // Add event listener for project delete button
+      const deleteButton = projectDiv.querySelector('.default-delete-button');
+      deleteButton.addEventListener('click', (event) => {
+          event.stopPropagation();
+          const projectName = project.name;

-      document.getElementById('alertMessage').textContent = `Veux-tu vraiment supprimer le projet : ${projectName} ?`;
-      document.getElementById('customAlert').style.display = 'block';
+          document.getElementById('alertMessage').textContent = `Veux-tu vraiment supprimer le projet : ${projectName} ?`;
+          document.getElementById('customAlert').style.display = 'block';

-      document.getElementById('okBtn').onclick = function() {
-        document.getElementById('customAlert').style.display = 'none';
-        // Call your delete function here
-        deleteProject(project.id).then(() => {
-          location.reload();
+          document.getElementById('okBtn').onclick = function () {
+              document.getElementById('customAlert').style.display = 'none';
+              // Call your delete function here
+              deleteProject(project.id).then(() => {
+                  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)`
        });
-      };
-
-      document.getElementById('cancelBtn').onclick = function() {
-        document.getElementById('customAlert').style.display = 'none';
-      };
-    });
+        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)"
+  });
+}
+
 }