redesign avec edmée, super déçue car pas bouboule orange

css/style.css

@@ -1,121 +1,140 @@
-main {
-  flex: 1 0 auto;
-}
-
-footer {
-  text-align: center;
-  position: fixed;
-  bottom: 0;
-  width: 100%;
-  background-color: #f8f9fa;
-  padding: 10px;
-  border-top: 1px solid #e7e7e7;
-}
-
-.row {
-  margin-top: 20px;
-  display: flex;
-  justify-content: space-between;
-}
-
-.col-md-6 {
-  flex: 0 0 50%;
-  max-width: 50%;
-}
-
-.col-md-12 {
-  flex: 0 0 100%;
-  max-width: 100%;
-}
-
-.hiddenTable {
-  max-height: 400px; /* Adjust this value as needed */
-  overflow-y: hidden;
-}
-
-.full-view {
-  max-height: none;
-  overflow-y: visible;
-}
-
-.sticky-header thead {
-  position: sticky;
-  top: 0;
-  z-index: 1;
-  background-color: #fff;
-}
-
-#addVideoHandler {
-  display: flex;
-  align-items: center;
-}
-
-#show-form-button {
-  margin-left: 20px;
-}
-
-.form-container {
-  z-index: 25;
-  display: none;
-  position: fixed;
+body::before {
+  content: "";
+  position: fixed; /* Use fixed positioning to keep the image in place */
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
+  background-image: url("../image/camera-image");
+  background-position: center;
+  background-size: cover;
+  filter: blur(1px) brightness(0.3);
+  z-index: -100; /* Ensure the background image stays behind other content */
+}
+
+.container {
+  max-width: 1140px;
+  margin: auto;
+  padding: 15px;
+}
+
+.mt-5 {
+  margin-top: 5rem;
+}
+
+.mb-4 {
+  margin-bottom: 4rem;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.modal,
+.form-container {
+  display: none;
+  position: fixed;
+  z-index: 1;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.8);
   justify-content: center;
   align-items: center;
 }
 
+.modal-content,
+.form-content {
+  background-color: #1e1e1e;
+  padding: 20px;
+  border-radius: 8px;
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
+  width: 80%;
+  max-width: 600px;
+  margin: auto;
+  color: #e0e0e0;
+}
+
 .form-content {
-  background-color: #fff;
   padding: 30px;
   border-radius: 12px;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
   text-align: left;
   display: flex;
   flex-direction: column;
-  width: 90%;
-  max-width: 600px;
-  max-height: 90vh; /* Adjust the max-height as needed */
+  max-height: 90vh;
   overflow-y: auto;
 }
 
+.modal-buttons {
+  text-align: center;
+  margin-top: 20px;
+}
+.default-button {
+  background-color: #248f99;
+  z-index: 15;
+  color: white;
+  border: none;
+  padding: 10px;
+  cursor: pointer;
+  border-radius: 5px;
+  font-size: 18px;
+  margin-bottom: 15px;
+  white-space: nowrap;
+  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition */
+}
+
+.default-button:hover {
+  transform: translateY(-4px); /* Lift the button more on hover */
+  box-shadow: 0 6px 8px rgba(0, 0, 0, 1); /* Increase shadow on hover */
+}
+
+.default-button:active {
+  transform: translateY(0); /* Remove lift on click */
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Reduce shadow on click */
+}
+
+.buttons-container {
+  display: flex;
+  gap: 10px; /* Space between buttons */
+  margin-bottom: 20px;
+}
+
 .form-content h1 {
-  margin: 0;
   margin-bottom: 20px;
   font-size: 1.5rem;
-  color: #333;
+  color: #f0f0f0;
 }
 
 .form-content label {
   margin-bottom: 10px;
   font-weight: bold;
-  color: #555;
+  color: #cccccc;
 }
 
 .form-content input,
-.form-content select,
-.form-content .duration-input,
-.form-content .fraction-input {
+.form-content select {
   margin-bottom: 20px;
   padding: 12px;
   font-size: 1rem;
-  border: 1px solid #ccc;
+  border: 1px solid #555;
   border-radius: 4px;
   width: 100%;
   box-sizing: border-box;
+  background-color: #333;
+  color: #e0e0e0;
 }
 
-.form-content .duration-input,
-.form-content .fraction-input {
+.duration-input,
+.fraction-input {
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
-.form-content .duration-input button,
-.form-content .fraction-input button {
+.duration-input button,
+.fraction-input button {
   width: 40px;
   height: 40px;
   margin: 0 10px;
@@ -127,149 +146,101 @@ footer {
   transition: background-color 0.3s;
 }
 
-.form-content .duration-input button:hover,
-.form-content .fraction-input button:hover {
+.duration-input button:hover,
+.fraction-input button:hover {
   background-color: #0056b3;
 }
 
-.form-content .duration-input input {
+.duration-input input {
   width: 60px;
   text-align: center;
 }
 
-.form-content #submit {
-  margin-top: 20px;
-  padding: 12px;
-  font-size: 1rem;
-  width: 100%;
-  background-color: #007bff;
-  color: #fff;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  transition: background-color 0.3s;
-}
-
-.form-content #submit:hover{
-  background-color: #0056b3;
-}
-
-#number-board {
-  display: grid;
-  gap: 10px;
-  justify-content: center;
-  max-height: 40vh; /* Adjust the max-height as needed */
-  overflow-y: auto;
-}
-
-.number-button {
-  padding: 10px;
-  font-size: 1rem;
-  background-color: #f0f0f0;
-  border: 1px solid #ccc;
-  cursor: pointer;
-  transition: background-color 0.3s;
-  margin: 5px;
-  border-radius: 4px;
-}
-
-.number-button.highlight {
-  background-color: red;
-  color: #fff;
-}
-
-#numerator, #denominator {
-  width: 30%;
-  text-align: center;
-}
-
-.close-button {
-  position: absolute;
-  top: 10px;
-  right: 10px;
-  width: 30px;
-  height: 30px;
-  background-color: red;
-  color: white;
-  border: none;
-  border-radius: 5px;
-  font-size: 1.5rem;
-  cursor: pointer;
+.frequency-control {
   display: flex;
-  justify-content: center;
   align-items: center;
-  z-index: 30;
-}
-
-.close-button:hover {
-  background-color: darkred;
-}
-footer{
-  margin-top: 15px;
-}
-#video-container{
-  margin-bottom: 15px;
-}
-.modal {
-  display: none;
-  position: fixed;
-  z-index: 1;
-  left: 0;
-  top: 0;
-  background-color: rgba(0, 0, 0, 0.6); /* Darker background */
-}
-
-.modal-content {
-  background-color: #fff;
-  padding: 20px;
-  border: 2px solid #ff0000; /* Red border */
-  width: 40% !important; /* Fixed width for a smaller modal */
-  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); /* Add shadow for emphasis */
-  border-radius: 8px; /* Rounded corners */
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%); /* Center the modal */
-}
-
-.modal-buttons {
-  text-align: center; /* Center buttons */
-  margin-top: 20px;
-}
-
-.modal-buttons button {
-  background-color: #ff0000; /* Red buttons */
-  color: white;
-  border: none;
-  padding: 10px 20px;
-  margin: 5px;
-  cursor: pointer;
-  border-radius: 5px;
-  font-size: 16px;
-}
-
-.modal-buttons button:hover {
-  background-color: #cc0000; /* Darker red on hover */
-}
-
-#alertMessage {
-  color: #ff0000; /* Red text */
-  font-size: 18px;
-  text-align: center;
-}
-
-.buttons-container2{
-  float: left; 
-  width:20%;
+  margin-bottom: 20px;
 }
 
 .frequency-control label {
   margin-right: 10px;
+  color: #e0e0e0;
 }
+
 .frequency-control input[type="number"] {
   width: 50px;
   text-align: center;
+  background-color: #333;
+  border: 1px solid #555;
+  color: #e0e0e0;
 }
-.frequency-control button {
-  margin: 0 5px;
+
+.hiddenTable {
+  max-height: 65vh;
+  overflow-y: hidden;
+}
+
+.full-view {
+  max-height: none;
+  overflow-y: visible;
+}
+
+footer {
+  text-align: center;
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  background-color: #1e1e1e;
+  padding: 1.5vh;
+  border-top: 1px solid #333;
+  color: #e0e0e0;
+}
+
+#metric_viewer {
+  background-color: rgb(227, 216, 216);
+}
+
+.default-access-button {
+  background-color: #182b3f;
+  z-index: 15;
+  color: white;
+  border: 1px solid yellow;
+  padding: 10px;
+  cursor: pointer;
+  border-radius: 5px;
+  font-size: 18px;
+  margin-bottom: 15px;
+  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition */
+}
+
+.default-access-button:hover {
+  transform: translateY(-4px); /* Lift the button more on hover */
+  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.8); /* Increase shadow on hover */
+}
+
+.default-access-button:active {
+  transform: translateY(0); /* Remove lift on click */
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Reduce shadow on click */
+}
+
+.default-delete-button {
+  background-color: #7e2416;
+  z-index: 15;
+  color: white;
+  border: none;
+  padding: 10px;
+  cursor: pointer;
+  border-radius: 5px;
+  font-size: 18px;
+  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition */
+}
+
+.default-delete-button:hover {
+  transform: translateY(-4px); /* Lift the button more on hover */
+  box-shadow: 0 6px 8px rgba(0, 0, 0, 1); /* Increase shadow on hover */
+}
+
+.default-delete-button:active {
+  transform: translateY(0); /* Remove lift on click */
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Reduce shadow on click */
 }

css/style_menu.css

@@ -0,0 +1,63 @@
+#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;
+  }
+  
+  

css/style_project.less

@@ -0,0 +1,47 @@
+@bggradient: linear-gradient(to right top, #ffffff, #f5f4f5, #ebeaeb, #e2dfe0, #d9d5d5);
+@ball: #f57724;
+@text: #414141;
+
+
+#name_project {
+    position: absolute;
+    font-size: 40px;
+    display: inline-block;
+    white-space: nowrap;
+    font-weight: bold;
+    overflow: hidden;
+    top: 50px;
+    left: 115px;
+    color: darken(@text, 10%);
+    animation: textreveal 4s infinite alternate;
+  }
+
+  #ball {
+    position: absolute;
+    top: 27.5px;
+    left: 50px;
+    height: 98px;
+    width: 100px;
+    white-space: nowrap;
+    overflow: hidden;
+    background-color: @ball;
+    border-radius: 50%;
+    animation: ballmove 4s infinite alternate;
+    z-index: 1;
+    box-shadow: 0px 3px 15px rgba(0,0,0,0.3);
+  }
+  
+  @keyframes ballmove {
+    0%{transform: translate(0px, 8.5px) scale(0.1);}
+    25%{transform: translateX(127.5px) scale(0.5);}
+    50%{transform: translateX(255px) scale(0.1);}
+    75%{transform: translateX(127.5px) scale(0.5);}
+    100%{transform: translate(0px, 8.5px) scale(0.1);}
+  }
+  
+  @keyframes textreveal {
+    0% {width: 0;}
+    10% {width: 0;}
+  50% {width: 240px;}
+  100% {width: 0;}
+}

css/style_projet.css

@@ -0,0 +1,246 @@
+.nexter {
+  float: left;
+  display: inline;
+  width: 49%;
+  margin-bottom: 10vh;
+}
+
+.picture_placeHolder {
+  width: 100%;
+}
+
+.video {
+  width: 100%;
+}
+
+.video_placeHolder {
+  width: 100%;
+  margin-top: 10px;
+}
+
+.box {
+  display: inline-block;
+  height: 45px;
+}
+
+.box select {
+  background-color: #248f99;
+  color: white;
+  padding: 10px;
+  width: 250px;
+  border: none;
+  font-size: 18px;
+  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2);
+  -webkit-appearance: button;
+  appearance: button;
+  outline: none;
+  border-radius: 5px;
+  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Ensure smooth transition */
+}
+
+.box:hover select {
+  transform: translateY(-4px); /* Lift the button more on hover */
+  box-shadow: 0 6px 8px rgba(0, 0, 0, 1); /* Increase shadow on hover */
+}
+
+.box:active select {
+  transform: translateY(0); /* Remove lift on click */
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Reduce shadow on click */
+}
+
+.box select option {
+  padding: 30px;
+}
+
+.arrow-icon {
+  z-index: 100;
+  height: 3em;
+  width: 2.8em;
+  padding: 0.5em;
+  margin: 1em auto;
+  cursor: pointer;
+  padding-top: 1em; 
+  border-radius: 4px;
+  bottom: 45px; /* Adjust as needed to position below the table */
+  left: 72%;
+  transform: translateX(-50%);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: fixed;
+  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Ensure smooth transition */
+}
+
+.arrow-icon:hover {
+  transform: translateX(-50%) translateY(-10px); /* Move the arrow up on hover */
+}
+
+.arrow-icon:active {
+  transform: translateX(-50%) translateY(0); /* Remove lift on click */
+}
+
+.left-bar, .right-bar {
+  z-index: 100;
+  position: absolute;
+  background-color: transparent;
+  width: 40px;
+  height: 10px;
+  display: block;
+  border-radius: 2px;
+}
+
+.left-bar {
+  top: 50%;
+  left: 0;
+  transform: rotate(35deg);
+}
+
+.right-bar {
+  top: 50%;
+  left: 26px;
+  transform: rotate(-35deg);
+}
+
+.left-bar:after, .right-bar:after {
+  content: "";
+  background-color: white;
+  width: 40px;
+  height: 10px;
+  display: block;
+  border-radius: 6px 10px 10px 6px;
+  transition: all 0.5s cubic-bezier(0.25, 1.7, 0.35, 0.8);
+  z-index: -1;
+}
+
+.right-bar:after {
+  border-radius: 10px 6px 6px 10px;
+}
+
+.open .left-bar:after {
+  transform-origin: center center;
+  transform: rotate(-70deg);
+}
+
+.open .right-bar:after {
+  transform-origin: center center;
+  transform: rotate(70deg);
+}
+
+#name_project {
+  animation: glitch 3s steps(100) infinite;
+  color: #151515;
+  font-size: 6em;
+  text-align: center;
+  text-transform: uppercase;
+}
+
+@media (min-width: 480px) {
+  #name_project {
+    font-size: 2em;
+  }
+}
+
+@keyframes glitch { 
+  0% { text-shadow: 3px 0 0 red, -3px 0 0 #0c33f5; filter: blur(0);}
+  1% { text-shadow: 3px 0 0 red, -3px 0 0 #0c33f5; filter: blur(0);}
+  2% { text-shadow: 3px 0 0 red, -3px 0 0 #0c33f5; filter: blur(0);}
+  3% { text-shadow: 3px 0 0 red, -3px 0 0 #0c33f5; filter: blur(0);}
+  4% { text-shadow: 3px 0 0 red, -3px 0 0 #0c33f5; filter: blur(0);}
+  5% { text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5; filter: blur(0);}
+  6% { text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5; filter: blur(0);}
+  7% { text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5; filter: blur(0);}
+  8% { text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5; filter: blur(0);}
+  9% { text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5; filter: blur(0);}
+  10% { text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5; filter: blur(0);}
+  11% { text-shadow: 1px 0 0 red, -1px 0 0 lime; filter: blur(0.5px);}
+  12% { text-shadow: 1px 0 0 red, -1px 0 0 lime; filter: blur(0.5px);}
+  13% { text-shadow: 1px 0 0 red, -1px 0 0 lime; filter: blur(0.5px);}
+  14% { text-shadow: 1px 0 0 red, -1px 0 0 lime; filter: blur(0);}
+  15% { text-shadow: 1px 0 0 red, -1px 0 0 lime; filter: blur(0);}
+  16% { text-shadow: -3px 0 0 red, 3px 0 0 lime; filter: blur(0);}
+  17% { text-shadow: -3px 0 0 red, 3px 0 0 lime; filter: blur(0);}
+  18% { text-shadow: -3px 0 0 red, 3px 0 0 lime; filter: blur(0);}
+  19% { text-shadow: -3px 0 0 red, 3px 0 0 lime; filter: blur(0);}
+  20% { text-shadow: -3px 0 0 red, 3px 0 0 lime; filter: blur(0);}
+  21% { text-shadow: 0.8px 0 0 #0c33f5, -0.8px 0 0 lime; filter: blur(0);}
+  22% { text-shadow: 0.8px 0 0 #0c33f5, -0.8px 0 0 lime; filter: blur(0);}
+  23% { text-shadow: 0.8px 0 0 #0c33f5, -0.8px 0 0 lime; filter: blur(0);}
+  24% { text-shadow: 0.8px 0 0 #0c33f5, -0.8px 0 0 lime; filter: blur(0);}
+  25% { text-shadow: 0.8px 0 0 #0c33f5, -0.8px 0 0 lime; filter: blur(0);}
+  26% { text-shadow: 0.8px 0 0 #0c33f5, -0.8px 0 0 lime; filter: blur(0.5px);}
+  27% { text-shadow: 0.8px 0 0 #0c33f5, -0.8px 0 0 lime; filter: blur(0.5px);}
+  28% { text-shadow: 0.8px 0 0 #0c33f5, -0.8px 0 0 lime; filter: blur(0);}
+  29% { text-shadow: 0.8px 0 0 #0c33f5, -0.8px 0 0 lime; filter: blur(0);}
+  30% { text-shadow: 0.8px 0 0 #0c33f5, -0.8px 0 0 lime; filter: blur(0);}
+  31% { text-shadow: -3px 0 0 #0c33f5, 3px 0 0 lime; filter: blur(0);}
+  32% { text-shadow: -3px 0 0 #0c33f5, 3px 0 0 lime; filter: blur(0);}
+  33% { text-shadow: -3px 0 0 #0c33f5, 3px 0 0 lime; filter: blur(0);}
+  34% { text-shadow: -3px 0 0 #0c33f5, 3px 0 0 lime; filter: blur(0);}
+  35% { text-shadow: -3px 0 0 #0c33f5, 3px 0 0 lime; filter: blur(0.5px);}
+  36% { text-shadow: -3px 0 0 #0c33f5, 3px 0 0 lime; filter: blur(0.5px);}
+  37% { text-shadow: -3px 0 0 #0c33f5, 3px 0 0 lime; filter: blur(0.5px);}
+  38% { text-shadow: -3px 0 0 #0c33f5, 3px 0 0 lime; filter: blur(0);}
+  39% { text-shadow: -3px 0 0 #0c33f5, 3px 0 0 lime; filter: blur(0);}
+  40% { text-shadow: -3px 0 0 #0c33f5, 3px 0 0 lime; filter: blur(0);}
+  41% { text-shadow: 45px 0 0 #0c33f5, -45px 0 0 lime; filter: blur(0);}
+  42% { text-shadow: 0 0 0 #0c33f5, 0 0 0 lime; filter: blur(0);}
+  43% { text-shadow: 1px 0 0 red, -1px 0 0 lime; filter: blur(0);}
+  44% { text-shadow: 1px 0 0 red, -1px 0 0 lime; filter: blur(0);}
+  45% { text-shadow: 1px 0 0 red, -1px 0 0 lime; filter: blur(0);}
+  46% { text-shadow: 1px 0 0 red, -1px 0 0 lime; filter: blur(0.5px);}
+  47% { text-shadow: -3px 0 0 red, 3px 0 0 lime; filter: blur(0.5px);}
+  48% { text-shadow: -3px 0 0 red, 3px 0 0 lime; filter: blur(0);}
+  49% { text-shadow: -3px 0 0 red, 3px 0 0 lime; filter: blur(0);}
+  50% { text-shadow: -3px 0 0 red, 3px 0 0 lime; filter: blur(0);}
+  51% { text-shadow: 3px 0 0 red, -3px 0 0 #0c33f5; filter: blur(0);}
+  52% { text-shadow: 3px 0 0 red, -3px 0 0 #0c33f5; filter: blur(0);}
+  53% { text-shadow: 3px 0 0 red, -3px 0 0 #0c33f5; filter: blur(0);}
+  54% { text-shadow: 3px 0 0 red, -3px 0 0 #0c33f5; filter: blur(0);}
+  55% { text-shadow: 3px 0 0 red, -3px 0 0 #0c33f5; filter: blur(0.5px);}
+  56% { text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5; filter: blur(0.5px);}
+  57% { text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5; filter: blur(0.5px);}
+  58% { text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5; filter: blur(0);}
+  59% { text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5; filter: blur(0);}
+  60% { text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5; filter: blur(0);}
+  61% { text-shadow: 30px 0 0 red, -30px 0 0 lime; filter: blur(0);}
+  62% { text-shadow: 0 0 0 red, 0 0 0 lime; filter: blur(0);}
+  63% { text-shadow: 1px 0 0 red, -1px 0 0 #0c33f5; filter: blur(0);}
+  64% { text-shadow: 1px 0 0 red, -1px 0 0 #0c33f5; filter: blur(0);}
+  65% { text-shadow: 1px 0 0 red, -1px 0 0 #0c33f5; filter: blur(0);}
+  66% { text-shadow: 1px 0 0 red, -1px 0 0 #0c33f5; filter: blur(0.5px);}
+  67% { text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5; filter: blur(0.5px);}
+  68% { text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5; filter: blur(0);}
+  69% { text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5; filter: blur(0);}
+  70% { text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5; filter: blur(0);}
+  71% { text-shadow: 50px 0 0 red, -50px 0 0 #0c33f5; filter: blur(0);}
+  72% { text-shadow: 0 0 0 red, 0 0 0 #0c33f5; filter: blur(0);}
+  73% { text-shadow: 3px 0 0 red, -3px 0 0 #0c33f5; filter: blur(0);}
+  74% { text-shadow: 3px 0 0 red, -3px 0 0 #0c33f5; filter: blur(0);}
+  75% { text-shadow: 3px 0 0 red, -3px 0 0 #0c33f5; filter: blur(0);}
+  76% { text-shadow: 3px 0 0 red, -3px 0 0 #0c33f5; filter: blur(0);}
+  77% { text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5; filter: blur(0);}
+  78% { text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5; filter: blur(0);}
+  79% { text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5; filter: blur(0);}
+  80% { text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5; filter: blur(0);}
+  81% { text-shadow: 1px 0 0 red, -1px 0 0 lime; filter: blur(0);}
+  82% { text-shadow: 1px 0 0 red, -1px 0 0 lime; filter: blur(0);}
+  83% { text-shadow: 1px 0 0 red, -1px 0 0 lime; filter: blur(0.5px);}
+  84% { text-shadow: 1px 0 0 red, -1px 0 0 lime; filter: blur(0.5px);}
+  85% { text-shadow: 1px 0 0 red, -1px 0 0 lime; filter: blur(0.5px);}
+  86% { text-shadow: -3px 0 0 red, 3px 0 0 lime; filter: blur(0.5px);}
+  87% { text-shadow: -3px 0 0 red, 3px 0 0 lime; filter: blur(0.5px);}
+  88% { text-shadow: -3px 0 0 red, 3px 0 0 lime; filter: blur(0);}
+  89% { text-shadow: -3px 0 0 red, 3px 0 0 lime; filter: blur(0);}
+  90% { text-shadow: -3px 0 0 red, 3px 0 0 lime; filter: blur(0);}
+  91% { text-shadow: 60px 0 0 lime, -60px 0 0 #0c33f5; filter: blur(0);}
+  92% { text-shadow: 0 0 0 lime, 0 0 0 #0c33f5; filter: blur(0);}
+  92% { text-shadow: 0.8px 0 0 #0c33f5, -0.8px 0 0 lime; filter: blur(0);}
+  93% { text-shadow: 0.8px 0 0 #0c33f5, -0.8px 0 0 lime; filter: blur(0);}
+  94% { text-shadow: 0.8px 0 0 #0c33f5, -0.8px 0 0 lime; filter: blur(0);}
+  95% { text-shadow: 0.8px 0 0 #0c33f5, -0.8px 0 0 lime; filter: blur(0);}
+  96% { text-shadow: -3px 0 0 #0c33f5, 3px 0 0 lime; filter: blur(0);}
+  97% { text-shadow: -3px 0 0 #0c33f5, 3px 0 0 lime; filter: blur(0);}
+  98% { text-shadow: -3px 0 0 #0c33f5, 3px 0 0 lime; filter: blur(0);}
+  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);} 
+}

html/projet_detail.html

@@ -1,32 +1,26 @@
 <!DOCTYPE html>
 <html lang="en">
-
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Détails</title>
   <link rel="stylesheet" href="../css/style.css" />
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css"
-    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" />
-  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet" />
-  <!-- Select2 CSS -->
-  <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0/dist/css/select2.min.css" rel="stylesheet" />
+  <link rel="stylesheet" href="../css/style_projet.css">
 </head>
-
 <body>
   <div id="customAlert" class="modal">
     <div class="modal-content">
       <p id="alertMessage">This is a custom alert!</p>
       <div class="modal-buttons">
-        <button class="btn btn-danger" id="cancelBtn">Cancel</button>
-        <button class="btn btn-primary" id="okBtn">OK</button>
+        <button class="default-delete-button" id="cancelBtn">Cancel</button>
+        <button class="default-access-button" id="okBtn">OK</button>
       </div>
     </div>
   </div>
   <!-- formulaire nouveau projet -->
   <div id="form-container-project" class="form-container" style="display: none">
     <div class="form-content">
-      <button id="close-form-button-project" class="close-button">&times;</button>
+      <button id="close-form-button-project" class="default-delete-button">&times;</button>
       <h1>Formulaire</h1>
       <div id="my-form">
         <label for="name">Nom :</label>
@@ -40,9 +34,9 @@
         <br /><br />
         <label for="duration">Durée (en secondes) :</label>
         <div class="duration-input">
-          <button type="button" id="decrement-button">-</button>
+          <button type="button" class="default-access-button" id="decrement-button">-</button>
           <input type="number" id="duration" name="duration" value="0" min="0" required />
-          <button type="button" id="increment-button">+</button>
+          <button type="button" class="default-access-button" id="increment-button">+</button>
         </div>
         <label for="choice">Options :</label>
         <select id="choice" name="choice">
@@ -71,100 +65,83 @@
         <br /><br />
         <div id="result-container"></div>
         <br /><br />
-        <button class="btn btn-primary" id="submit">Soumettre</button>
+        <button class="default-access-button" id="submit">Soumettre</button>
       </div>
     </div>
   </div>
   <!-- Formulaire configuration de la caméra -->
   <div id="form-container-camera" class="form-container" style="display: none">
     <div class="form-content">
-      <button id="close-form-button-camera" class="close-button">&times;</button>
+      <button id="close-form-button-camera" class="default-delete-button">&times;</button>
       <h1>Formulaire</h1>
       <span>La fréquence minimale est de 3 minutes entre deux images</span>
       <div class="frequency-control">
         <label for="days">Days:</label>
-        <button type="button" onclick="decrement('days')">-</button>
+        <button class="default-access-button" type="button" onclick="decrement('days')">-</button>
         <input type="number" id="days" name="days" value="0" min="0" oninput="updateFrequencyText()">
-        <button type="button" onclick="increment('days')">+</button>
+        <button class="default-access-button" type="button" onclick="increment('days')">+</button>
       </div>
       <div class="frequency-control">
         <label for="hours">Hours:</label>
-        <button type="button" onclick="decrement('hours')">-</button>
+        <button class="default-access-button" type="button" onclick="decrement('hours')">-</button>
         <input type="number" id="hours" name="hours" value="0" min="0" oninput="updateFrequencyText()">
-        <button type="button" onclick="increment('hours')">+</button>
+        <button class="default-access-button" type="button" onclick="increment('hours')">+</button>
       </div>
       <div class="frequency-control">
         <label for="minutes">Minutes:</label>
-        <button type="button" onclick="decrement('minutes')">-</button>
+        <button class="default-access-button" type="button" onclick="decrement('minutes')">-</button>
         <input type="number" id="minutes" name="minutes" value="0" min="0" oninput="updateFrequencyText()">
-        <button type="button" onclick="increment('minutes')">+</button>
+        <button class="default-access-button" type="button" onclick="increment('minutes')">+</button>
       </div>
       <span id="frequency-text">une image sera prise toutes les 0 jours 0 heures 0 minutes</span>
   <br>
-      <button id="commencer" class="btn btn-primary">Lancer</button>
+      <button id="commencer" class="default-access-button">Lancer</button>
     </div>
   </div>
   <!-- page classique -->
-  <div id="section" class="container mt-5">
-    <div class="row">
-      <div class="col-md-12">
-        <div class="buttons-container" style="float: left; width: 10%">
-          <button class="btn btn-primary" id="projets">
-            <span> Menu Principal</span>
-          </button>
-        </div>
-        <div class="buttons-container buttons-container2 " id="delete-placeholder">
-        </div>
-        <div class="buttons-container buttons-container2" id="start-timelapse"></div>
-        <h3 id="name_project" class="text-black" style="float: right; width: 50%"></h3>
-      </div>
-    </div>
-    <div class="row">
-      <div class="col-md-6">
-        <div id="addVideoHandler">
-          <select name="videos" id="video_selector" class="select2"></select>
-          <div class="buttons-container">
-            <button class="btn btn-primary" id="show-form-button-camera">
-              <span> + </span>
-            </button>
+  <div>
+      <div>
+        <div class="buttons-container">
+          <button class="default-button" id="projets">Menu Principal</button>
+          <div class="box">
+            <select name="videos" id="video_selector"></select>
           </div>
+          <div id="start-timelapse"></div>
+          <button class="default-access-button" id="show-form-button-camera">+</button>
+          <div id="delete-placeholder"></div>
         </div>
-        <div id="metric_viewer_placeholder">
-          <canvas id="metric_viewer"></canvas>
-        </div>
-        <div id="video-container"><span>Pas de vidéos pour le projet par défaut</span></div>
       </div>
-      <div class="col-md-6">
-        <div id="content1" class="hiddenTable">
-          <table class="table table-striped scrollable sticky-header .thead-dark" id="table-image">
-            <thead>
-              <tr>
-                <th colspan="3">
-                  <button class="btn btn-primary" id="toggle-view">
-                    See all images
-                  </button>
-                </th>
-              </tr>
-            </thead>
-            <tbody id="imageSource"></tbody>
-          </table>
-        </div>
+      <div>
+        <h3 id="name_project"></h3>
+      </div>
+    <div class="nexter">
+      <div id="metric_viewer_placeholder" >
+        <canvas id="metric_viewer"></canvas>
+      </div>
+      <div class="video_placeHolder" id="video-container">
       </div>
     </div>
+    <div class="nexter">
+      <div id="content1" class="hiddenTable">
+        <table class="customTable" id="table-image">
+          <tbody id="imageSource"></tbody>
+        </table>
+      </div>    
+    </div>
+    <a class="arrow-icon" id="toggle-view">
+      <span class="left-bar"></span>
+      <span class="right-bar"></span>
+    </a>
   </div>
-
-  <footer>
-    <p>&copy; 2025 Timelapse. All rights reserved.</p>
-  </footer>
   <script src="../js/utilities/chart.js"></script>
   <script src="../js/utilities/jquery.js"></script>
-  <!-- Select2 JS -->
-  <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0/dist/js/select2.min.js"></script>
   <script src="../js/utilities/constVariables.js"></script>
   <script src="../js/utilities/populate.js"></script>
   <script src="../js/utilities/routes.js"></script>
   <script src="../js/utilities/tools.js"></script>
   <script src="../js/projet_detail.js"></script>
 </body>
-
+  <footer>
+    <p>&copy; 2025 Timelapse. All rights reserved.</p>
+  </footer>
 </html>

index.html

@@ -6,9 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Timelapse</title>
     <link rel="stylesheet" href="../css/style.css">
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css"
-        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
-    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="../css/style_menu.css">
 </head>
 
 <body>
@@ -16,14 +14,14 @@
         <div class="modal-content">
             <p id="alertMessage">This is a custom alert!</p>
             <div class="modal-buttons">
-                <button class="btn btn-danger"id="cancelBtn">Cancel</button>
-                <button class="btn btn-primary"id="okBtn">OK</button>
+                <button class="default-access-button" id="cancelBtn">Cancel</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="close-button">&times;</button>
+        <button id="close-form-button" class="default-delete-button">&times;</button>
         <h1>Formulaire</h1>
         <div id="my-form">
           <label for="name">Nom :</label>
@@ -32,40 +30,33 @@
           <label for="description">Description :</label>
           <input type="text" id="description" name="description" required />
           <br /><br />
-          
-          <button class="btn btn-primary" id="submit">Soumettre</button>
+          <button class="default-button" id="submit">Soumettre</button>
         </div>
       </div>
     </div>
-    <div id="section" class="container mt-5">
-        <div class="buttons-container mb-4">
-            <button class="btn btn-primary" id="download" ><span>Download App</span></button>
-            <button class="btn btn-primary" id="show-form-button"><span>+</span></button>
+    <div id="section" class="container2">
+        <div>
+            <button class="default-button" id="download"><span>Download App</span></button>
+            <button class="default-button" id="show-form-button"><span>+</span></button>
         </div>
 
-        <table class="table table-striped" id="table-projects">
-            <thead class="bg-blue-600 text-white">
-                <tr>
-                    <th>Name</th>
-                    <th>Images</th>
-                    <th>Actions</th>
-                </tr>
-            </thead>
-            <tbody></tbody>
-        </table>
+        <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>
     </div>
 
     <footer class="text-center mt-5 py-3">
         <p>&copy; 2025 Timelapse. All rights reserved.</p>
     </footer>
 
-    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
-
+    <script src="./js/utilities/jquery.js"></script>
     <script src="../js/utilities/constVariables.js"></script>
     <script src="../js/utilities/routes.js"></script>
     <script src="../js/index.js"></script>
-    <script>
-    </script>
 </body>
 
 </html>

js/index.js

@@ -1,7 +1,30 @@
-// Function to display projects in a table
-function display_projects() {
-  // Get data from API and then generate HTML code to display the data in a table
-  const table = document.getElementById("table-projects");
+document.addEventListener("DOMContentLoaded", () => {
+  getAllProject()
+    .then((project_list) => {
+      global_project_list = project_list;
+      setupCarousel(global_project_list);
+    })
+    .catch((error) => {
+      console.error(error);
+    });
+});
+
+function formatStatus(status) {
+  switch (status) {
+    case 0:
+      return "brouillon";
+    case 1:
+      return "en cours";
+    case 2:
+      return "terminé";
+    case 3:
+      return "En cours de génération";
+    default:
+      return "inconnu";
+  }
+}
+
+function setupCarousel(global_project_list) {
   const formContainer = document.getElementById('form-container');
 
   function showForm() {
@@ -20,13 +43,13 @@ function display_projects() {
     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' +
+      alert('Le nom : "' + nameProject + '" est déjà pris ou vide ! \n' +
         'veuillez en trouver un autre');
-      return 0;
+      return;
     }
     PostNewProject(nameProject, description).then(() => {
-      location.reload();})
-
+      location.reload();
+    });
   }
 
   function checkName(Projects, name) {
@@ -39,70 +62,83 @@ function display_projects() {
     return res;
   }
 
-  let datas = `<tr>
-                <th>Id</th>
-                <th>Name</th>
-                <th>Date</th>
-                <th>Status</th>
-                <th>Actions</th>
-                <th>Delete Project</th>
-                </tr> `;
-  for (let i = 0; i < global_project_list.length; i++) {
-    datas += `<tr>
-                <th>${global_project_list[i].id}</th>
-                <th>${global_project_list[i].name}</th>
-                <th>${formatDate(global_project_list[i].start_date)}</th>
-                <th>${global_project_list[i].status}</th>
-                <th><button class="project_detail btn btn-primary">détails de ${
-      global_project_list[i].name
-    }</button></th>
-                <th><button name="${i}" class="project_delete btn btn-danger">Delete</button></th>
-                </tr>`;
-  }
-  table.innerHTML = datas;
+  const carousel = document.getElementById('carousel');
+  let currentIndex = 0;
 
-  // Select all the buttons_access with the class button_project
-  const buttons_access = document.getElementsByClassName("project_detail");
-  const buttons_delete = document.getElementsByClassName("project_delete");
-  // Add an event listener to each button
-  for (let i = 0; i < buttons_access.length; i++) {
-    buttons_access[i].addEventListener("click", (event) => {
-      // Send data to API and then navigate to projet_detail.html page
-      window.location.href = `html/projet_detail.html?id=${global_project_list[i].id}`;
-    });
-    buttons_access[i].addEventListener("click", (event) => {
-      // Send data to API and then navigate to projet_detail.html page
-      current_project = change_current_project(i);
-    });
+  function updateCarousel() {
+    const projectWidth = document.querySelector('.project').clientWidth;
+    carousel.style.transform = `translateX(-${currentIndex * projectWidth}px)`;
   }
 
-  for (let i = 0; i < buttons_delete.length; i++) {
-    buttons_delete[i].addEventListener("click", (event) => {
-      const projectName = global_project_list[i].name;
+  function showPrevProject() {
+    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();
+    }
+  }
+
+  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>
+      <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>
+      </div>
+    `;
+    carousel.appendChild(projectDiv);
+
+    // 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;
+
       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(global_project_list[i].id).then(()=>{
+        deleteProject(project.id).then(() => {
           location.reload();
-        })
+        });
       };
 
       document.getElementById('cancelBtn').onclick = function() {
         document.getElementById('customAlert').style.display = 'none';
       };
     });
-  }
-}
-
-getAllProject()
-  .then((project_list) => {
-    global_project_list = project_list;
-    // Call the next function here
-    display_projects();
-  })
-  .catch((error) => {
-    console.error(error);
   });
+
+  // Initial update to set the correct position
+  updateCarousel();
+}

js/projet_detail.js

@@ -163,12 +163,6 @@ document.addEventListener("DOMContentLoaded", async () => {
         alert('Nouvelle vidéo enregistrée :\nNom : ' + nameVideo +
           '\nRésolution : ' + videoResolution +
           '\nDurée : ' + videoDuration + ' secondes');
-      }).then(()=>{
-        getDataProjectVideosFromApi(projectId).then((data)=>{
-          idVideo = data[data.length-1].id
-          console.log(idVideo)
-          renderVideo(idVideo)
-        })
       })
     
   }
@@ -181,11 +175,9 @@ document.addEventListener("DOMContentLoaded", async () => {
     if (tableImage.classList.contains("hiddenTable")) {
       tableImage.classList.remove("hiddenTable");
       tableImage.classList.add("full-view");
-      document.getElementById("toggle-view").innerHTML = "See first images";
     } else {
       tableImage.classList.remove("full-view");
       tableImage.classList.add("hiddenTable");
-      document.getElementById("toggle-view").innerHTML = "See all images";
     }
   }
 
@@ -230,7 +222,7 @@ function populateImageTable(DataMetrics) {
   let i = 0;
   DataMetrics.forEach((measure) => {
     let imageTD = document.createElement("td");
-    imageTD.innerHTML = `<a href="${api_url}/images/${measure.project_id}/${measure.order_id}" target="_blank"><img id="${i}" src="${api_url}/preview/${measure.project_id}/${measure.order_id}"/></a>`;
+    imageTD.innerHTML = `<a href="${api_url}/images/${measure.project_id}/${measure.order_id}" target="_blank"><img class="picture_placeHolder"id="${i}" src="${api_url}/preview/${measure.project_id}/${measure.order_id}"/></a>`;
     row.appendChild(imageTD);
 
     if ((i + 1) % 3 === 0 && i !== 0) {
@@ -274,7 +266,7 @@ async function generateViewMetric(projectId) {
     samples = JSON.parse(currentVideoDatas[0]["measurement_ids"]);
     if(currentVideoDatas[0].status != 0){
     videoPlaceHolder.innerHTML=`
-    <video width="600" controls>
+    <video class="video" controls>
     <source src="${api_url}/videos/file/${videoId}" type="video/mp4">
     Your browser does not support the video tag.
   </video>`
@@ -282,13 +274,15 @@ async function generateViewMetric(projectId) {
       videoPlaceHolder.innerHTML=`<h2>La vidéo n'a pas été rendered</h2>`
     }
   deletePlaceHolder.innerHTML=`
-    <button id="delete-video" class="btn btn-danger delete-video-button" data-video-id="${videoId}">Delete Video</button>
+    <button id="delete-video" class="default-delete-button" data-video-id="${videoId}">Delete Video</button>
   `
   document.getElementById("delete-video").addEventListener("click", ()=>{
     showConfirmationAlert(videoId)
   })
   tempoMeasure=filterAndSortMeasurementsByNumber(measurements, samples)
   } else {
+    deletePlaceHolder.innerHTML=''
+    videoPlaceHolder.innerHTML=''
     samples=measurements.map(measurements => measurements.id);
     tempoMeasure = filterAndSortMeasurementsByIds(measurements, samples);
   }
@@ -309,7 +303,7 @@ async function generateViewMetric(projectId) {
       labels: datesMeasurement,
       datasets: [
         {
-          label: "Température (F°)",
+          label: "Température (C°)",
           data: Temperature,
           fill: false,
           borderColor: "rgba(75, 192, 192, 1)",
@@ -420,7 +414,7 @@ function getMeasurementsIdsFromForm(choice, firstInput, lastInput) {
 async function populateTimelapseLogic(placeholder,id) {
   const data = await getSingleProject(id);
   if(data.status == 0){
-    placeholder.innerHTML = `<button class="btn btn-primary" id="show-form-button-camera">
+    placeholder.innerHTML = `<button class="default-button" id="show-form-button-camera">
               <span> Configurer la caméra </span>
             </button>`
   } else if (data.status == 1) {
@@ -455,4 +449,6 @@ function updateFrequencyText() {
   document.getElementById('frequency-text').innerHTML = frequencyText;
 }
 
-
+$( ".arrow-icon" ).click(function() {
+  $(this).toggleClass("open");
+});