10.05.2024|2:08 (reworked goods with descriptions)

zmorok · May 9, 2024 · 71828a5 · 71828a5
1 parent 8013750
commit 71828a5
Show file tree

Hide file tree

Showing 18 changed files with 995 additions and 156 deletions.
diff --git a/css/orderPage.css b/css/orderPage.css
@@ -0,0 +1,120 @@
+@import url("../css/fonts.css");
+.modal {
+  display: none;
+  position: fixed;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  overflow: hidden;
+}
+.modal.show {
+  animation: fadeIn 0.3s ease;
+}
+.modal.hide {
+  animation: fadeOut 0.3s ease;
+  display: none;
+}
+.modal .modal-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-evenly;
+  background-color: #fefefe;
+  padding: 20px;
+  border: 1px solid #888;
+  border-radius: 20px 5px 5px 20px;
+  width: 60%;
+  height: 80%;
+  margin-right: calc(-1.5 * (100vw - 100%));
+  position: relative;
+  overflow: auto;
+  scrollbar-width: 0;
+  opacity: 0;
+  animation: fadeIn 0.3s ease forwards;
+  font-family: "Source Sans 3";
+}
+.modal .modal-content img {
+  width: 30%;
+  max-height: 80%;
+  display: block;
+  filter: drop-shadow(2px 2px 7px black);
+}
+.modal .modal-content h2,
+.modal .modal-content .product_price {
+  font-size: 2.6vw;
+}
+.modal .modal-content .product_desc {
+  text-align: center;
+}
+.modal .modal-content #confirm_btn {
+  width: 65%;
+  height: 50px;
+  border-radius: 25px;
+  border: none;
+  outline: none;
+  color: black;
+  background-color: transparent;
+  font-size: 20px;
+  font-weight: bold;
+  padding: 10px 0;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+.modal .modal-content #confirm_btn:hover {
+  background-color: rgb(0, 0, 0);
+  color: white;
+  transition: 0.4s;
+}
+
+.scroll-lock {
+  overflow: hidden;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes fadeOut {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+@media screen and (max-width: 1024px) {
+  .modal .modal-content h2,
+  .modal .modal-content .product_price {
+    font-size: 5vw;
+  }
+  .modal .modal-content img {
+    width: 80%;
+    height: auto;
+  }
+  .modal .modal-content #confirm_btn {
+    font-size: 2.5vw;
+  }
+}
+@media screen and (max-width: 450px) {
+  .modal .modal-content {
+    width: 85%;
+    height: 60%;
+  }
+  .modal .modal-content h2,
+  .modal .modal-content .product_price {
+    font-size: 7vw;
+  }
+  .modal .modal-content img {
+    width: 90%;
+    height: auto;
+  }
+}
diff --git a/css/page.css b/css/page.css
@@ -23,8 +23,8 @@ main div {
   overflow: hidden;
 }
 main div:hover {
-  transform: scale(1.1);
-  border-radius: 30px;
+  transform: scale(1.02);
+  border-radius: 10px;
   transition: 0.3s;
 }
 main div img {

diff --git a/css/root.css b/css/root.css
@@ -2,19 +2,36 @@
 * {
   margin: 0;
   padding: 0;
+  box-sizing: content-box;
   scroll-behavior: smooth;
 }
 
-.wrapper {
-  display: flex;
-  flex-direction: column;
-}
-
 body {
+  margin-right: calc(-1 * (100vw - 100%));
+  overflow-x: hidden;
   background-color: rgb(222, 184, 135);
 }
 
 h1 {
   text-align: center;
   font-family: "Montserrat";
+}
+
+::-webkit-scrollbar {
+  width: 10px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent !important;
+}
+
+::-webkit-scrollbar-thumb {
+  background-image: linear-gradient(180deg, #2912be 0%, #708ad4 99%);
+  box-shadow: inset 2px 2px 5px 0 rgba(255, 255, 255, 0.5);
+  border-radius: 20px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  box-shadow: inset 2px 2px 5px 0 rgba(255, 255, 255, 0.8);
+  border-radius: 20px;
 }
diff --git a/pages/page_books.html b/pages/page_books.html
@@ -9,6 +9,7 @@
   <link rel="stylesheet" href="../css/header.css">
   <link rel="stylesheet" href="../css/page.css">
   <link rel="stylesheet" href="../css/footer.css">
+  <link rel="stylesheet" href="../css/orderPage.css">
   <link rel="icon" href="../favicon.svg">
 </head>
 
@@ -73,6 +74,7 @@ <h1>Книги</h1>
   <script src="../src/sidebar.js"></script>
   <script src="../src/goods.js"></script>
   <script src="../src/footerPages.js"></script>
+  <script src="../src/orderPage.js"></script>
 
 </body>
 

diff --git a/pages/page_electronics.html b/pages/page_electronics.html
@@ -9,6 +9,7 @@
   <link rel="stylesheet" href="../css/header.css">
   <link rel="stylesheet" href="../css/page.css">
   <link rel="stylesheet" href="../css/footer.css">
+  <link rel="stylesheet" href="../css/orderPage.css">
   <link rel="icon" href="../favicon.svg">
 </head>
 
@@ -73,6 +74,7 @@ <h1>Электроника</h1>
   <script src="../src/sidebar.js"></script>
   <script src="../src/goods.js"></script>
   <script src="../src/footerPages.js"></script>
+  <script src="../src/orderPage.js"></script>
 
 </body>
 

diff --git a/pages/page_furniture.html b/pages/page_furniture.html
@@ -9,6 +9,7 @@
   <link rel="stylesheet" href="../css/header.css">
   <link rel="stylesheet" href="../css/page.css">
   <link rel="stylesheet" href="../css/footer.css">
+  <link rel="stylesheet" href="../css/orderPage.css">
   <link rel="icon" href="../favicon.svg">
 </head>
 
@@ -73,6 +74,7 @@ <h1>Мебель</h1>
   <script src="../src/sidebar.js"></script>
   <script src="../src/goods.js"></script>
   <script src="../src/footerPages.js"></script>
+  <script src="../src/orderPage.js"></script>
 
 </body>
 

diff --git a/pages/page_jewelry.html b/pages/page_jewelry.html
@@ -9,6 +9,7 @@
   <link rel="stylesheet" href="../css/header.css">
   <link rel="stylesheet" href="../css/page.css">
   <link rel="stylesheet" href="../css/footer.css">
+  <link rel="stylesheet" href="../css/orderPage.css">
   <link rel="icon" href="../favicon.svg">
 </head>
 
@@ -73,6 +74,7 @@ <h1>Ювелирные изделия</h1>
   <script src="../src/sidebar.js"></script>
   <script src="../src/goods.js"></script>
   <script src="../src/footerPages.js"></script>
+  <script src="../src/orderPage.js"></script>
 
 </body>
 

diff --git a/pages/page_pet_supplies.html b/pages/page_pet_supplies.html
@@ -8,6 +8,7 @@
   <link rel="stylesheet" href="../css/root.css">
   <link rel="stylesheet" href="../css/header.css">
   <link rel="stylesheet" href="../css/footer.css">
+  <link rel="stylesheet" href="../css/orderPage.css">
   <link rel="icon" href="../favicon.svg">
   <style>
     .inactive {
@@ -86,6 +87,7 @@ <h1>Зоотовары</h1>
   <script src="../src/sidebar.js"></script>
   <script src="../src/goods.js"></script>
   <script src="../src/footerPages.js"></script>
+  <script src="../src/orderPage.js"></script>
 
 </body>
 

diff --git a/pages/page_products.html b/pages/page_products.html
@@ -8,6 +8,7 @@
   <link rel="stylesheet" href="../css/root.css">
   <link rel="stylesheet" href="../css/header.css">
   <link rel="stylesheet" href="../css/footer.css">
+  <link rel="stylesheet" href="../css/orderPage.css">
   <link rel="icon" href="../favicon.svg">
   <style>
     .inactive {
@@ -87,6 +88,7 @@ <h1>Продукты</h1>
   <script src="../src/sidebar.js"></script>
   <script src="../src/goods.js"></script>
   <script src="../src/footerPages.js"></script>
+  <script src="../src/orderPage.js"></script>
 
 </body>
 

diff --git a/pages/page_shoes.html b/pages/page_shoes.html
@@ -9,6 +9,7 @@
   <link rel="stylesheet" href="../css/header.css">
   <link rel="stylesheet" href="../css/page.css">
   <link rel="stylesheet" href="../css/footer.css">
+  <link rel="stylesheet" href="../css/orderPage.css">
   <link rel="icon" href="../favicon.svg">
 </head>
 
@@ -73,6 +74,7 @@ <h1>Обувь</h1>
   <script src="../src/sidebar.js"></script>
   <script src="../src/goods.js"></script>
   <script src="../src/footerPages.js"></script>
+  <script src="../src/orderPage.js"></script>
 
 </body>
 

diff --git a/pages/page_sport.html b/pages/page_sport.html
@@ -9,6 +9,7 @@
   <link rel="stylesheet" href="../css/header.css">
   <link rel="stylesheet" href="../css/page.css">
   <link rel="stylesheet" href="../css/footer.css">
+  <link rel="stylesheet" href="../css/orderPage.css">
   <link rel="icon" href="../favicon.svg">
 </head>
 
@@ -73,6 +74,7 @@ <h1>Спорт</h1>
   <script src="../src/sidebar.js"></script>
   <script src="../src/goods.js"></script>
   <script src="../src/footerPages.js"></script>
+  <script src="../src/orderPage.js"></script>
 
 </body>
 

diff --git a/pages/page_stationery.html b/pages/page_stationery.html
@@ -9,6 +9,7 @@
   <link rel="stylesheet" href="../css/header.css">
   <link rel="stylesheet" href="../css/page.css">
   <link rel="stylesheet" href="../css/footer.css">
+  <link rel="stylesheet" href="../css/orderPage.css">
   <link rel="icon" href="../favicon.svg">
 </head>
 
@@ -73,6 +74,7 @@ <h1>Канцелярия</h1>
   <script src="../src/sidebar.js"></script>
   <script src="../src/goods.js"></script>
   <script src="../src/footerPages.js"></script>
+  <script src="../src/orderPage.js"></script>
 
 </body>