Camera acessibility

package.json

@@ -5,6 +5,7 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
+    "dev:host": "vite --host",
     "build": "tsc && vite build",
     "lint": "eslint .",
     "lint:fix": "eslint --fix .",
@@ -21,6 +22,7 @@
     "@types/react-dom": "^18.2.22",
     "@typescript-eslint/eslint-plugin": "^7.2.0",
     "@typescript-eslint/parser": "^7.2.0",
+    "@vitejs/plugin-basic-ssl": "^1.1.0",
     "@vitejs/plugin-react-swc": "^3.5.0",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",

src/App.tsx

@@ -4,15 +4,22 @@ import JsonPage from "./Pages/JsonPage/Json";
 import NoPage from "./Pages/NoPage/NoPage";
 import "./App.css";
 import Header from "./Components/Header/Header";
+import FormPage from "./Pages/FormPage/FormPage";
+import { StrictMode } from "react";
 
 function App() {
   return (
     <BrowserRouter>
-      <Header />
+      <StrictMode>
+        <Header />
+      </StrictMode>
       <Routes>
         <Route path="/">
           <Route index element={<HomePage />} />
+
           <Route path="Json" element={<JsonPage />} />
+          <Route path="Form" element={<FormPage />} />
+
           <Route path="*" element={<NoPage />} />
         </Route>
       </Routes>

src/Components/Carousel/Carousel.css

@@ -0,0 +1,67 @@
+.curr-img {
+  grid-area: main;
+  display: flex;
+}
+
+#main-img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  margin: 0 -20%;
+}
+
+.carousel-wrapper {
+  display: grid;
+  grid-template-areas:
+    "main main main"
+    ".  carousel  .";
+  grid-template-rows: 60% 30%;
+}
+
+.carousel {
+  grid-area: carousel;
+  width: 50px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.carousel-img {
+  border: solid 2px #ccc0;
+  display: flex;
+  transition: all 750ms linear;
+  width: 100%;
+  height: fit-content;
+  object-fit: contain;
+}
+
+.carousel-img.current {
+  border: solid 2px #ccc;
+}
+
+/* Next & previous buttons */
+.prev,
+.next {
+  cursor: pointer;
+  width: auto;
+  margin: auto;
+  padding: 16px;
+  color: white;
+  font-weight: bold;
+  font-size: 18px;
+  transition: 0.6s ease;
+  border-radius: 0 3px 3px 0;
+  user-select: none;
+  z-index: 1;
+}
+
+/* Position the "next button" to the right */
+.next {
+  right: 0;
+  border-radius: 3px 0 0 3px;
+}
+
+/* On hover, add a black background color with a little bit see-through */
+.prev:hover,
+.next:hover {
+  background-color: rgba(0, 0, 0, 0.8);
+}

src/Components/Carousel/Carousel.tsx

@@ -0,0 +1,76 @@
+import React, { useState } from "react";
+import "./Carousel.css";
+interface CarouselProps {
+  imgs: {
+    url: string;
+    title: string;
+  }[];
+}
+
+class imgObject {
+  index: number;
+  url: string;
+  title: string;
+  constructor(index: number, url: string, title: string) {
+    this.index = index;
+    this.url = url;
+    this.title = title;
+  }
+}
+
+const Carousel: React.FC<CarouselProps> = ({ imgs }) => {
+  const [currImg, setCurrImg] = useState<number>(0);
+
+  const imgList: imgObject[] = [];
+  imgs.forEach((imgData, index) => {
+    imgList.push(new imgObject(index, imgData.url, imgData.title));
+  });
+
+  const selectImg = (idx: number) => {
+    if (imgList.length == 1) return setCurrImg(0);
+    if (idx < 0) {
+      while (idx < 0) {
+        idx = imgList.length + idx;
+      }
+    }
+    if (idx > imgList.length - 1) {
+      idx %= imgList.length;
+    }
+    setCurrImg(idx);
+  };
+
+  return (
+    <div className="carousel-wrapper">
+      <div className="curr-img">
+        <a className="prev" onClick={() => selectImg(currImg - 1)}>
+          &#10094;
+        </a>
+        <img
+          id="main-img"
+          src={imgList.length > 0 ? imgList[currImg].url : ""}
+          alt={imgList.length > 0 ? imgList[currImg].title : "No picture"}
+        ></img>
+        <a className="next" onClick={() => selectImg(currImg + 1)}>
+          &#10095;
+        </a>
+      </div>
+      <div className="carousel">
+        {imgList.map((img: imgObject) => {
+          return (
+            <img
+              src={img.url}
+              className={
+                "carousel-img" + (img.index == currImg ? " current" : " ")
+              }
+              alt={imgList[currImg].title}
+              key={img.index}
+              onClick={() => selectImg(img.index)}
+            ></img>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+export default Carousel;

src/Components/DragDropFileInput/DragDropFileInput.css

@@ -62,6 +62,101 @@ input[type="file"] {
   display: block;
 }
 
-.drag-drop-container{
+.drag-drop-container {
   grid-area: a;
 }
+
+/* DragDropFileInput.css */
+.modal {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: fixed;
+  z-index: 1;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  background-color: rgba(0, 0, 0, 0.4);
+}
+
+.modal-content {
+  background-color: #fefefe;
+  margin: auto;
+  padding: 20px;
+  border: 1px solid #888;
+  width: 80%;
+  max-width: 500px;
+  position: relative;
+}
+
+.close {
+  color: #aaa;
+  float: right;
+  font-size: 28px;
+  font-weight: bold;
+  cursor: pointer;
+}
+
+.close:hover,
+.close:focus {
+  color: black;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.camera-container {
+  display: none;
+  flex-direction: column;
+  align-items: center;
+}
+
+.camera-container.active {
+  display: flex;
+}
+
+.options-container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  vertical-align: center;
+  margin-left: 30%;
+  gap: 10px;
+}
+.centered-buttons {
+  display: flex;
+  vertical-align: middle;
+  align-self: center;
+  z-index: 9999;
+}
+
+.centered-buttons button {
+  display: flex;
+  margin: 10px auto;
+  padding: 10px 20px;
+  cursor: pointer;
+}
+.option-modal-content {
+  background-color: transparent;
+  margin: auto;
+  padding: 20px;
+  width: 80%;
+  max-width: 500px;
+  position: relative;
+  background-color: rgba(
+    0,
+    0,
+    0,
+    0.1
+  ); /* couleur de l'overlay avec une opacité */
+  border-radius: 10px;
+}
+
+.input-wrapper {
+  display: none;
+}
+
+.input-wrapper.active {
+  display: block;
+}