OpenClassrooms-Student-Center · DavyHaYehoudi · Oct 29, 2023 · Oct 29, 2023 · Oct 29, 2023 · Oct 29, 2023
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -0,0 +1,25 @@
+module.exports = {
+    "env": {
+        "browser": true,
+        "es2021": true
+    },
+    "extends": "airbnb-base",
+    "overrides": [
+        {
+            "env": {
+                "node": true
+            },
+            "files": [
+                ".eslintrc.{js,cjs}"
+            ],
+            "parserOptions": {
+                "sourceType": "script"
+            }
+        }
+    ],
+    "parserOptions": {
+        "ecmaVersion": "latest"
+    },
+    "rules": {
+    }
+}
diff --git a/assets/captions.vtt b/assets/captions.vtt
diff --git a/assets/galleries/Adventure Door, India.jpg b/assets/galleries/Adventure Door, India.jpg
diff --git a/assets/galleries/Animals_Majesty.jpg b/assets/galleries/Animals_Majesty.jpg
diff --git a/assets/galleries/Animals_Puppiness.mp4 b/assets/galleries/Animals_Puppiness.mp4
diff --git a/assets/galleries/Animals_Rainbow.jpg b/assets/galleries/Animals_Rainbow.jpg
diff --git a/assets/galleries/Animals_Wild_Horses_in_the_mountains.mp4 b/assets/galleries/Animals_Wild_Horses_in_the_mountains.mp4
diff --git a/assets/galleries/Architecture_Connected_Curves.jpg b/assets/galleries/Architecture_Connected_Curves.jpg
diff --git a/assets/galleries/Architecture_Contrast.jpg b/assets/galleries/Architecture_Contrast.jpg
diff --git a/assets/galleries/Architecture_Corner_Room.jpg b/assets/galleries/Architecture_Corner_Room.jpg
diff --git a/assets/galleries/Architecture_Cross_Bar.jpg b/assets/galleries/Architecture_Cross_Bar.jpg
diff --git a/assets/galleries/Architecture_Dome.jpg b/assets/galleries/Architecture_Dome.jpg
diff --git a/assets/galleries/Architecture_Horseshoe.jpg b/assets/galleries/Architecture_Horseshoe.jpg
diff --git a/assets/galleries/Architecture_On_a_hill.jpg b/assets/galleries/Architecture_On_a_hill.jpg
diff --git a/assets/galleries/Architecture_Water_on_Modern.jpg b/assets/galleries/Architecture_Water_on_Modern.jpg
diff --git a/assets/galleries/Architecture_White_Light.jpg b/assets/galleries/Architecture_White_Light.jpg
diff --git a/assets/galleries/Architecture_coverr_circle_empty_highway_in_buenos_aires_587740985637.mp4 b/assets/galleries/Architecture_coverr_circle_empty_highway_in_buenos_aires_587740985637.mp4
diff --git a/assets/galleries/Art_Mine.jpg b/assets/galleries/Art_Mine.jpg
diff --git a/assets/galleries/Art_Purple_light.jpg b/assets/galleries/Art_Purple_light.jpg
diff --git a/assets/galleries/Art_Triangle_Man.jpg b/assets/galleries/Art_Triangle_Man.jpg
diff --git a/assets/galleries/Art_Wooden_Horse_Sculpture.mp4 b/assets/galleries/Art_Wooden_Horse_Sculpture.mp4
diff --git a/assets/galleries/Event_18thAnniversary.jpg b/assets/galleries/Event_18thAnniversary.jpg
diff --git a/assets/galleries/Event_BenevidesWedding.jpg b/assets/galleries/Event_BenevidesWedding.jpg
diff --git a/assets/galleries/Event_Emcee.jpg b/assets/galleries/Event_Emcee.jpg
diff --git a/assets/galleries/Event_KeyboardCheck.jpg b/assets/galleries/Event_KeyboardCheck.jpg
diff --git a/assets/galleries/Event_PintoWedding.jpg b/assets/galleries/Event_PintoWedding.jpg
diff --git a/assets/galleries/Event_ProductPitch.jpg b/assets/galleries/Event_ProductPitch.jpg
diff --git a/assets/galleries/Event_SeasideWedding.jpg b/assets/galleries/Event_SeasideWedding.jpg
diff --git a/assets/galleries/Event_Sparklers.jpg b/assets/galleries/Event_Sparklers.jpg
diff --git a/assets/galleries/Event_VentureConference.jpg b/assets/galleries/Event_VentureConference.jpg
diff --git a/assets/galleries/Event_WeddingGazebo.jpg b/assets/galleries/Event_WeddingGazebo.jpg
diff --git a/assets/galleries/Fashion_Melody_Red_on_Stripes.jpg b/assets/galleries/Fashion_Melody_Red_on_Stripes.jpg
diff --git a/assets/galleries/Fashion_Pattern_on_Pattern.jpg b/assets/galleries/Fashion_Pattern_on_Pattern.jpg
diff --git a/assets/galleries/Fashion_Urban_Jungle.jpg b/assets/galleries/Fashion_Urban_Jungle.jpg
diff --git a/assets/galleries/Fashion_Wings.jpg b/assets/galleries/Fashion_Wings.jpg
diff --git a/assets/galleries/Fashion_Yellow_Beach.jpg b/assets/galleries/Fashion_Yellow_Beach.jpg
diff --git a/assets/galleries/Portrait_AfternoonBreak.jpg b/assets/galleries/Portrait_AfternoonBreak.jpg
diff --git a/assets/galleries/Portrait_Alexandra.jpg b/assets/galleries/Portrait_Alexandra.jpg
diff --git a/assets/galleries/Portrait_Background.jpg b/assets/galleries/Portrait_Background.jpg
diff --git a/assets/galleries/Portrait_Nora.jpg b/assets/galleries/Portrait_Nora.jpg
diff --git a/assets/galleries/Portrait_Shaw.jpg b/assets/galleries/Portrait_Shaw.jpg
diff --git a/assets/galleries/Portrait_Sunkissed.jpg b/assets/galleries/Portrait_Sunkissed.jpg
diff --git a/assets/galleries/Portrait_Wednesday.jpg b/assets/galleries/Portrait_Wednesday.jpg
diff --git a/assets/galleries/Sport_2000_with_8.jpg b/assets/galleries/Sport_2000_with_8.jpg
diff --git a/assets/galleries/Sport_Butterfly.jpg b/assets/galleries/Sport_Butterfly.jpg
diff --git a/assets/galleries/Sport_Jump.jpg b/assets/galleries/Sport_Jump.jpg
diff --git a/assets/galleries/Sport_Next_Hold.jpg b/assets/galleries/Sport_Next_Hold.jpg
diff --git a/assets/galleries/Sport_Race_End.jpg b/assets/galleries/Sport_Race_End.jpg
diff --git a/assets/galleries/Sport_Sky_Cross.jpg b/assets/galleries/Sport_Sky_Cross.jpg
diff --git a/assets/galleries/Sport_Tricks_in_the_air.mp4 b/assets/galleries/Sport_Tricks_in_the_air.mp4
diff --git a/assets/galleries/TracyGalindo.jpg b/assets/galleries/TracyGalindo.jpg
diff --git a/assets/galleries/Travel_Adventure_Door.jpg b/assets/galleries/Travel_Adventure_Door.jpg
diff --git a/assets/galleries/Travel_Bike_and_Stair.jpg b/assets/galleries/Travel_Bike_and_Stair.jpg
diff --git a/assets/galleries/Travel_Boat_Wanderer.jpg b/assets/galleries/Travel_Boat_Wanderer.jpg
diff --git a/assets/galleries/Travel_Bridge_into_Forest.jpg b/assets/galleries/Travel_Bridge_into_Forest.jpg
diff --git a/assets/galleries/Travel_HillsideColor.jpg b/assets/galleries/Travel_HillsideColor.jpg
diff --git a/assets/galleries/Travel_Lonesome.jpg b/assets/galleries/Travel_Lonesome.jpg
diff --git a/assets/galleries/Travel_On_the_Road.jpg b/assets/galleries/Travel_On_the_Road.jpg
diff --git a/assets/galleries/Travel_OpenMountain.jpg b/assets/galleries/Travel_OpenMountain.jpg
diff --git a/assets/galleries/Travel_Outdoor_Baths.jpg b/assets/galleries/Travel_Outdoor_Baths.jpg
diff --git a/assets/galleries/Travel_Road_into_Hill.jpg b/assets/galleries/Travel_Road_into_Hill.jpg
diff --git a/assets/galleries/Travel_Rock_Mountains.mp4 b/assets/galleries/Travel_Rock_Mountains.mp4
diff --git a/assets/galleries/Travel_SunsetonCanals.jpg b/assets/galleries/Travel_SunsetonCanals.jpg
diff --git a/assets/galleries/Travel_Tower.jpg b/assets/galleries/Travel_Tower.jpg
diff --git a/assets/galleries/sport_water_tunnel.jpg b/assets/galleries/sport_water_tunnel.jpg
diff --git a/assets/photographers/EllieRoseWilkens.jpg b/assets/photographers/EllieRoseWilkens.jpg
diff --git a/assets/photographers/MarcelNikolic.jpg b/assets/photographers/MarcelNikolic.jpg
diff --git a/assets/photographers/MimiKeel.jpg b/assets/photographers/MimiKeel.jpg
diff --git a/assets/photographers/NabeelBradford.jpg b/assets/photographers/NabeelBradford.jpg
diff --git a/assets/photographers/RhodeDubois.jpg b/assets/photographers/RhodeDubois.jpg
diff --git a/assets/photographers/TracyGalindo.jpg b/assets/photographers/TracyGalindo.jpg
diff --git a/css/contactForm.css b/css/contactForm.css
@@ -0,0 +1,139 @@
+/* ****************** START MODAL ******************  */
+#contact_modal {
+    display: none;
+    position: absolute;
+    top: 45%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 3;
+}
+
+#contact_modal.visible {
+    display: block;
+}
+
+.modal-contact {
+    width: 669px;
+    border-radius: 5px;
+    background-color: #DB8876;
+    padding: 35px;
+    margin: auto;
+    animation: modalopen 400ms ease;
+}
+
+#contact_modal.visible {
+    display: block;
+}
+
+.modal-contact .header {
+    display: flex;
+    justify-content: space-between;
+    align-items: baseline;
+}
+
+.modal-contact img {
+    font-size: 72px;
+}
+
+.modal-contact .header button {
+    background-color: transparent;
+    border: none;
+}
+
+.modal-contact h2 {
+    font-size: 4rem;
+    font-weight: normal;
+    margin-block-start: 0;
+}
+
+form {
+    display: flex;
+    width: 100%;
+    flex-direction: column;
+    align-items: flex-start;
+}
+
+form label {
+    color: #312E2E;
+    font-size: 2.25rem;
+}
+
+form div {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    align-items: self-start;
+    margin-bottom: 26px;
+}
+
+form input {
+    width: 100%;
+    height: 68px;
+    border: none;
+    border-radius: 5px;
+    margin: 10px 0;
+}
+
+form textarea {
+    width: 100%;
+    height: 170px;
+    margin-bottom: 20px;
+}
+
+.contact_button,
+#contact_button {
+    font-size: 20px;
+    font-weight: bold;
+    color: white;
+    padding: 11px;
+    width: 170px;
+    height: 70px;
+    border: none;
+    background-color: var(--primary-color);
+    border-radius: 5px;
+    transition: background-color 400ms ease;
+}
+
+.contact_button:hover,
+.contact_button:focus,
+#contact_button :hover,
+#contact_button :focus {
+    background-color: var(--secondary-color);
+}
+
+/* Gestion des erreurs */
+.text-control {
+    margin: 0;
+    padding: 8px;
+    width: 100%;
+    border-radius: 8px;
+    font-size: 20px;
+    height: 48px;
+}
+
+/* Confirmation soumission */
+#confirm {
+    display: none;
+}
+
+#confirm.active {
+    position: absolute;
+    left: 50%;
+    transform: translate(-50%, 50%);
+    display: block;
+}
+
+#confirm .closeBtn {
+    text-align: end;
+}
+
+#confirm button {
+    background-color: transparent;
+    border: none;
+}
+
+.confirmText {
+    text-align: center;
+}
+
+/* ****************** END MODAL ******************  */
diff --git a/css/index.css b/css/index.css
@@ -0,0 +1,7 @@
+@import url("variables.css");
+@import url("main.css");
+@import url("photographerProfile.css");
+@import url("photographersList.css");
+@import url("contactForm.css");
+@import url("lightbox.css");
+@import url("listBox.css");
diff --git a/css/lightbox.css b/css/lightbox.css
@@ -0,0 +1,61 @@
+#lightbox_modal {
+    display: none;
+    width: 1253px;
+    height: auto;
+    background-color: white;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 3;
+}
+
+#lightbox_modal.visible {
+    display: block;
+}
+
+.lightbox-media img,
+.lightbox-media video {
+    width: 1000px;
+    height: 800px;
+    display: block;
+    margin: 0 auto;
+    object-fit: contain;
+}
+
+#prevMedia,
+#nextMedia,
+#closeLightbox {
+    position: absolute;
+    top: 40%;
+    background-color: transparent;
+    border: none;
+    color: var(--primary-color);
+    font-weight: bold;
+    font-size: 48px;
+}
+
+#prevMedia {
+    left: 10px;
+}
+
+#prevMedia:disabled,
+#nextMedia:disabled {
+    color: gray;
+    cursor: not-allowed;
+}
+
+#nextMedia {
+    right: 10px;
+}
+
+#closeLightbox {
+    top: 0;
+    right: 10px;
+}
+#lightbox_modal figcaption{
+font-size: 24px;
+color: var(--primary-color);
+text-align: center;
+padding-top: 10px;
+}
diff --git a/css/listBox.css b/css/listBox.css
@@ -0,0 +1,45 @@
+/* ******************  START DE LA LISTBOX ******************  */
+.custom-select {
+    position: relative;
+    display: inline-block;
+}
+
+#selectOptions {
+    display: none;
+    position: absolute;
+    background-color: var(--primary-color);
+    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
+    z-index: 1;
+    border-radius: 5px;
+}
+
+#selectOptions li {
+    padding: 10px;
+    cursor: pointer;
+    color: white;
+    border-bottom: 1px white solid;
+}
+
+#selectOptions li:last-child {
+    border-bottom: none;
+}
+
+#selectOptions li:hover {
+    background-color: var(--secondary-color);
+    border-bottom: 1px solid var(--secondary-color);
+}
+
+#sortSelect{
+    background-color: var(--primary-color);
+    color: aliceblue;
+    border: none;
+    border-radius: 5px;
+    padding: 5px;
+    font-size: 18px;
+}
+
+.custom-select[aria-expanded="true"] #selectOptions {
+    display: block;
+}
+
+/* ******************  END DE LA LISTBOX  ******************  */
diff --git a/css/main.css b/css/main.css
@@ -0,0 +1,93 @@
+body {
+    font-family: "DM Sans", sans-serif;
+    padding: 0;
+    box-sizing: border-box;
+    max-width: 1440px;
+    margin: auto;
+}
+
+::after,
+::before {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+.container {
+    margin: 20px;
+}
+
+header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 90px;
+}
+
+h1 {
+    color: var(--primary-color);
+}
+
+.logo {
+    height: 50px;
+}
+
+button {
+    cursor: pointer;
+}
+
+img,
+video {
+    object-fit: cover;
+}
+
+/* ************ Start Affichage modal ************ */
+.overlay {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
+    z-index: 2;
+}
+
+body.modal-open {
+    overflow: hidden;
+}
+
+.overlay.visible {
+    display: block;
+}
+
+@keyframes modalopen {
+    from {
+        opacity: 0;
+        transform: translateY(-150px);
+    }
+
+    to {
+        opacity: 1;
+    }
+}
+
+/* ************ End Affichage modal ************ */
+.required {
+    color: black;
+    /* margin-left: 5px; */
+}
+
+/* debugg */
+/* *:focus{
+    font-size: 500px;
+} */
+/* *{
+    border: 1px red solid;
+} */