prettier

README.old.md

@@ -5,11 +5,10 @@ and some ESLint rules.
 
 Currently, two official plugins are available:
 
-- [@vitejs/plugin-react](
-https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md)
-uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md)
+  uses [Babel](https://babeljs.io/) for Fast Refresh
 - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc)
-uses [SWC](https://swc.rs/) for Fast Refresh
+  uses [SWC](https://swc.rs/) for Fast Refresh
 
 ## Expanding the ESLint configuration
 
@@ -31,9 +30,8 @@ export default {
 ```
 
 - Replace `plugin:@typescript-eslint/recommended` to
-`plugin:@typescript-eslint/recommended-type-checked` or
-`plugin:@typescript-eslint/strict-type-checked`
+  `plugin:@typescript-eslint/recommended-type-checked` or
+  `plugin:@typescript-eslint/strict-type-checked`
 - Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
-- Install [eslint-plugin-react](
-https://github.com/jsx-eslint/eslint-plugin-react) and add
-`plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list
+- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add
+  `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list

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/Components/Carousel/Carousel.css

@@ -1,48 +1,46 @@
-.curr-img{
+.curr-img {
   grid-area: main;
-  display:flex;
+  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;
-  }
+#main-img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  margin: 0 -20%;
+}
 
-  .carousel-img.current{
-    border: solid 2px #ccc;
-  }
+.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 {
+/* Next & previous buttons */
+.prev,
+.next {
   cursor: pointer;
   width: auto;
   margin: auto;
@@ -63,6 +61,7 @@
 }
 
 /* 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);
+.prev:hover,
+.next:hover {
+  background-color: rgba(0, 0, 0, 0.8);
 }

src/Components/DragDropFileInput/DragDropFileInput.css

@@ -112,7 +112,7 @@ input[type="file"] {
   align-items: center;
 }
 
-.camera-container.active{
+.camera-container.active {
   display: flex;
 }
 
@@ -126,7 +126,7 @@ input[type="file"] {
 }
 .centered-buttons {
   display: flex;
-  vertical-align:middle;
+  vertical-align: middle;
   align-self: center;
   z-index: 9999;
 }
@@ -144,16 +144,19 @@ input[type="file"] {
   width: 80%;
   max-width: 500px;
   position: relative;
-  background-color: rgba(0, 0, 0, 0.1); /* couleur de l'overlay avec une opacité */
+  background-color: rgba(
+    0,
+    0,
+    0,
+    0.1
+  ); /* couleur de l'overlay avec une opacité */
   border-radius: 10px;
 }
 
-
-.input-wrapper{
+.input-wrapper {
   display: none;
 }
 
-.input-wrapper.active{
+.input-wrapper.active {
   display: block;
 }
-

src/Components/FileList/FileElement/FileElement.css

@@ -72,6 +72,6 @@
   transform: translate(-50%, -50%) rotate(45deg);
 }
 
-  .cross:after {
-    transform: translate(-50%, -50%) rotate(-45deg);
-  }
+.cross:after {
+  transform: translate(-50%, -50%) rotate(-45deg);
+}

src/Components/FileList/FileList.css

@@ -23,35 +23,34 @@
   }
 }
 
-
-  .file-list.empty {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .no-element {
-    display: none;
-  }
-
-  .no-element.active {
-    display: block;
-  }
-
-  .overlay {
-    position: absolute; /* Positioned absolutely within FileList */
-    top: 0;
-    left: 0; /* Initial position (can be adjusted based on selection) */
-    width: 100%; /* Adjust width/height as needed */
-    height: 100%;
-    background-color: rgba(0, 0, 0, 0.5); /* Gray overlay with opacity */
-    display: flex; /* Center image content horizontally and vertically */
-    align-items: center;
-    justify-content: center;
-    z-index: 1; /* Ensure overlay is above FileElement components */
-    visibility: hidden; /* Initially hidden */
-  }
-
-  .overlay.active {
-    visibility: visible; /* Show overlay when an image is selected */
-  }
+.file-list.empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.no-element {
+  display: none;
+}
+
+.no-element.active {
+  display: block;
+}
+
+.overlay {
+  position: absolute; /* Positioned absolutely within FileList */
+  top: 0;
+  left: 0; /* Initial position (can be adjusted based on selection) */
+  width: 100%; /* Adjust width/height as needed */
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5); /* Gray overlay with opacity */
+  display: flex; /* Center image content horizontally and vertically */
+  align-items: center;
+  justify-content: center;
+  z-index: 1; /* Ensure overlay is above FileElement components */
+  visibility: hidden; /* Initially hidden */
+}
+
+.overlay.active {
+  visibility: visible; /* Show overlay when an image is selected */
+}

src/Components/Header/Header.css

@@ -1,4 +1,4 @@
-header{
+header {
   width: 100%;
   z-index: 2;
 }

src/Pages/FormPage/FormPage.css

@@ -5,32 +5,32 @@
 }
 
 @media only screen and (min-width: 850px) {
-  .formPage-container{
+  .formPage-container {
     grid-template-areas: "pics data";
     grid-template-columns: 42% 55%;
   }
 }
 
-@media only screen and (max-width: 850px){
-  .formPage-container{
-    grid-template-areas: "pics"
-                         "data";
+@media only screen and (max-width: 850px) {
+  .formPage-container {
+    grid-template-areas:
+      "pics"
+      "data";
     justify-content: center;
   }
 }
 
 .pic-container {
   grid-area: pics;
-
 }
 
 @media (prefers-color-scheme: dark) {
-  .open-icon{
-    filter: invert(74%) sepia(37%) saturate(0%) hue-rotate(249deg) brightness(101%) contrast(98%);
+  .open-icon {
+    filter: invert(74%) sepia(37%) saturate(0%) hue-rotate(249deg)
+      brightness(101%) contrast(98%);
   }
 }
 
-
 /* Text box container styles */
 .data-container {
   grid-area: data;
@@ -70,8 +70,6 @@ textarea {
   height: auto;
 }
 
-
-
 .data-section {
   display: flex;
   flex-direction: column;
@@ -91,7 +89,6 @@ textarea {
   width: 98%;
 }
 
-
 .loader-container-form.active {
   display: flex;
   align-items: center;
@@ -102,8 +99,8 @@ textarea {
 }
 .loader-container-form p {
   position: relative;
-  top:7%;
+  top: 7%;
 }
 .loader-container-form {
   display: none;
-}
+}

src/Pages/HomePage/HomePage.css

@@ -26,13 +26,12 @@
   }
 }
 
-.submit-btn{
-    margin-top:50px;
-    grid-area: c;
+.submit-btn {
+  margin-top: 50px;
+  grid-area: c;
 }
 
-
-#camera-switch{
-  position:relative;
+#camera-switch {
+  position: relative;
   right: 20px;
-}
+}

src/Pages/JsonPage/Json.css

@@ -17,6 +17,6 @@
   display: none;
 }
 
-pre{
-    text-align: left;
+pre {
+  text-align: left;
 }