rendu

MarsaColombo · Sep 29, 2023 · 2a1020a · 2a1020a
commit 2a1020a
Show file tree

Hide file tree

Showing 18 changed files with 1,089 additions and 0 deletions.
diff --git a/BlouseSoie.png b/BlouseSoie.png
diff --git a/ChausssureCuire.png b/ChausssureCuire.png
diff --git a/ChemiseCoton.png b/ChemiseCoton.png
diff --git a/CostumeLaine.png b/CostumeLaine.png
diff --git a/CravatteSoie.png b/CravatteSoie.png
diff --git a/JupePlissee.png b/JupePlissee.png
diff --git a/ManteauLaine.png b/ManteauLaine.png
diff --git a/PantalonCostume.png b/PantalonCostume.png
diff --git a/RobeSoiree.png b/RobeSoiree.png
diff --git a/VesteTweed.png b/VesteTweed.png
diff --git a/index.html b/index.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Ductalio</title>
+    <link rel="stylesheet" href="output.css" />
+    <script src="layout.js" defer></script>
+    <script defer src="main.js"></script>
+  </head>
+  <body class="body">
+    <!-- Je stylise le titre de la page -->
+    <div class="titre-site flex flex-col justify-center leading-normal">
+      <h1 class="titre">Ducsman</h1>
+      <p class="titre -mt-3 text-lg">Sapés comme jamais</p>
+    </div>
+
+    <!-- Je commence par faire le Header/ Nav  -->
+    <header class="">
+      <!-- Nav -->
+      <div class="menu">
+        <nav id="navbar" class="menu-li">
+          <ion-icon
+            name="reorder-four-outline"
+            class="logo logo-hover"
+          ></ion-icon>
+          <ion-icon name="heart-outline" class="logo logo-hover"></ion-icon>
+          <ion-icon name="bag-outline" class="logo logo-hover"></ion-icon>
+          <ion-icon name="person-outline" class="logo logo-hover"></ion-icon>
+        </nav>
+      </div>
+      <div class="search-filter_bar">
+        <div class="search-filter_container">
+          <ion-icon
+            name="search-outline"
+            class="logo m-5 logo-hover"
+          ></ion-icon>
+
+          <ion-icon
+            name="options-outline"
+            class="logo m-5 logo-hover"
+          ></ion-icon>
+        </div>
+      </div>
+    </header>
+    <!-- Recherche et filtres -->
+
+    <!-- Je stylise le main  -->
+    <main class="main-page">
+      <!-- Je stylise la galerie -->
+      <section id="galerie" class="galerie-section">
+        <div id="zoneAffichage" class="galerie-container"></div>
+      </section>
+    </main>
+  </body>
+
+  <script
+    type="module"
+    src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"
+  ></script>
+  <script
+    nomodule
+    src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"
+  ></script>
+</html>
diff --git a/input.css b/input.css
@@ -0,0 +1,105 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+@import url("https://fonts.googleapis.com/css2?family=Italianno&family=Lobster+Two:ital,wght@0,400;0,700;1,400;1,700&family=Maitree:wght@200;300;400;500;600;700&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Meie+Script&display=swap");
+@layer components {
+  .logo {
+    @apply h-5 w-5;
+  }
+}
+/* Font */
+@layer components {
+  .maitree {
+    @apply font-Maitree;
+  }
+}
+@layer components {
+  .meie {
+    @apply font-Meie;
+  }
+}
+@layer components {
+  .logo-hover {
+    @apply hover:cursor-pointer active:bg-trueGray active:bg-opacity-70 active:rounded-full p-2;
+  }
+}
+
+/* Style generales */
+
+@layer components {
+  .body {
+    @apply h-full w-full bg-gradient-to-br from-fafafa to-coolGrayfa;
+  }
+}
+
+/* Screen under 600px */
+@layer components {
+  .titre-site {
+    @apply w-full h-12 flex justify-center text-center border-b-2 shadow-md bg-gradient-to-br from-blue-300 to-indigo-50;
+  }
+}
+@layer components {
+  .titre {
+    @apply font-Italianno text-3xl bg-clip-text text-darkBlue;
+  }
+}
+@layer components {
+  .menu {
+    @apply w-full fixed bottom-0 bg-gradient-to-br from-blue-300 to-indigo-50 text-darkBlue;
+  }
+}
+@layer components {
+  .menu-li {
+    @apply flex h-10 justify-around items-center p-2;
+  }
+}
+@layer components {
+  .search-filter_bar {
+    @apply w-full flex justify-center content-center text-darkBlue;
+  }
+}
+@layer components {
+  .search-filter_container {
+    @apply w-full flex justify-between items-center bg-transparent;
+  }
+}
+@layer components {
+  .main-page {
+    @apply h-screen w-full flex justify-center content-center pt-0;
+  }
+}
+@layer components {
+  .galerie-section {
+    @apply flex justify-center content-center gap-2;
+  }
+}
+@layer components {
+  .galerie-container {
+    @apply grid grid-cols-2 auto-rows-min gap-5 text-sm;
+  }
+}
+@layer components {
+  .galerie-element {
+    @apply flex flex-col justify-center content-center border-b-2 text-darkGrey;
+  }
+}
+
+/* ClassList */
+.nav-transform {
+}
+
+.img {
+  width: 200px;
+  heigth: 300px;
+}
+
+.produit {
+  font-family: Lobster;
+  color: #303030;
+}
+
+.prix {
+  font-family: Meie;
+  color: #303030;
+}
diff --git a/layout.js b/layout.js
@@ -0,0 +1,13 @@
+let Navbar = document.getElementById("navbar");
+
+function changeNavbar() {
+  window.addEventListener("resize", () => {
+    if (innerWidth >= "640px") {
+      Navbar.classList.add("nav-trabsform");
+    } else {
+      Navbar.classList.remove("nav-transform");
+    }
+    console.log(screen.width);
+  });
+}
+changeNavbar();
diff --git a/main.js b/main.js
@@ -0,0 +1,55 @@
+fetch("vitrine.json")
+  .then(function (resp) {
+    return resp.json();
+  })
+  .then(function (data) {
+    console.log(data);
+    data.articles.forEach(function (article) {
+
+      let zoneAffichage = document.getElementById("zoneAffichage");
+      let articleDiv = document.createElement("div");
+      articleDiv.innerHTML = `
+                    <img class="img" src="${article.img}" alt="${article.nom}"/>
+                    <p class="produit">${article.nom}</p>
+                    <p class="prix">${article.prix}€</p>
+                    <p class="produit">${article.designation}</p>`;
+      zoneAffichage.appendChild(articleDiv);
+    });
+  });
+
+// const min1 = 0;
+// const max1 = 2;
+// const randomInteger1 = Math.floor(Math.random() * (max1 - min1 + 1)) + min1;
+// console.log(randomInteger1);
+
+// let zoneAffichage1 = document.getElementById("1");
+// let affichageArticle1 = `<img src="${data.articles[randomInteger1].img}"<p>${data.articles[randomInteger1].nom}</p>${data.articles[randomInteger1].prix}€<p><p>${data.articles[randomInteger1].designation}</p>`
+// zoneAffichage1.innerHTML = affichageArticle1
+
+// const min2 = 3;
+// const max2 = 4;
+// const randomInteger2 = Math.floor(Math.random() * (max2 - min2 + 1)) + min2;
+// console.log(randomInteger2);
+
+// let zoneAffichage2 = document.getElementById("2");
+// let affichageArticle2 = `<img src="${data.articles[randomInteger2].img}"<p>${data.articles[randomInteger2].nom}</p>${data.articles[randomInteger2].prix}€<p><p>${data.articles[randomInteger2].designation}</p>`
+// zoneAffichage2.innerHTML = affichageArticle2
+
+// const min3 = 5;
+// const max3 = 6;
+// const randomInteger3 = Math.floor(Math.random() * (max3 - min3 + 1)) + min3;
+// console.log(randomInteger3);
+
+// let zoneAffichage3 = document.getElementById("3");
+// let affichageArticle3 = `<img src="${data.articles[randomInteger3].img}"<p>${data.articles[randomInteger3].nom}</p>${data.articles[randomInteger3].prix}€<p><p>${data.articles[randomInteger3].designation}</p>`
+// zoneAffichage3.innerHTML = affichageArticle3
+
+// const min4 = 7;
+// const max4 = 9;
+// const randomInteger4 = Math.floor(Math.random() * (max4 - min4 + 1)) + min4;
+// console.log(randomInteger4);
+
+// let zoneAffichage4 = document.getElementById("4");
+// let affichageArticle4 = `<img src="${data.articles[randomInteger4].img}"><p>${data.articles[randomInteger4].nom}</p>${data.articles[randomInteger4].prix}€<p><p>${data.articles[randomInteger4].designation}</p>
+// `
+// zoneAffichage4.innerHTML = affichageArticle4