Initial commit

static/css/catalog-style.css

@@ -0,0 +1,80 @@
+body {
+    overflow: scroll;
+}
+.catalog-container {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    justify-content: flex-start;
+    box-sizing: inherit;
+}
+
+.catalog-categories {
+    padding: 5px;
+    margin: 5px;
+    border: solid 1px gray;
+    border-radius: 5px;
+}
+
+.catalog-categories a {
+    text-decoration: none;
+}
+
+.catalog-products {
+    display: flex;
+    flex-wrap: wrap;
+    flex-grow: 1;
+    align-items: stretch;
+    padding: 0 5px;
+}
+
+.product {
+    border: solid 1px gray;
+    border-radius: 5px;
+    padding: 8px;
+    margin: 4px;
+}
+
+.product img {
+    border-radius: 5%; /* Радиус скругления */
+    box-shadow: 0 0 0 3px transparent; /* Параметры теней */
+    width: 210px;
+    height: 210px;
+    margin-bottom: 5px;
+}
+
+/* для мобилок <= 700px */
+@media screen and (max-width: 701px) {
+    .catalog-container {
+        display: block;
+    }
+    .catalog-categories {
+        flex: 1;
+    }
+    .catalog-products {
+        grid-template-columns: repeat(1, 1fr);
+        display: grid;
+        grid-gap: 8px;
+    }
+    .product {
+        display: inline-flex;
+    }
+    .product img {
+        width: 8em;
+        height: 8em;
+        margin-bottom: 0;
+        margin-right: 5px;
+    }
+}
+
+/* для экранов > 700px */
+@media screen and (min-width: 700px) {
+    .product {
+        display: flex;
+        flex-direction: column;
+    }
+    .catalog-categories {
+        display: block;
+        min-width: 230px;
+    }
+}

static/css/product-view-style.css

@@ -0,0 +1,46 @@
+.options-list {
+
+}
+
+.option-item {
+    margin: 5px;
+    border-radius: 4px;
+}
+
+.option-selected {
+    border: solid 2px red;
+}
+
+/* для мобилок <= 700px */
+@media screen and (max-width: 701px) {
+    .product-container {
+        display: flex;
+        flex-direction: column;
+    }
+    #product-photo-container {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        margin-bottom: 2em;
+    }
+    #product-photo {
+        width: 90%;
+        height: auto;
+    }
+}
+
+/* для экранов > 700px */
+@media screen and (min-width: 700px) {
+    .product-container {
+        display: flex;
+        flex-direction: row;
+    }
+    #product-photo-container {
+        margin-right: 2em;
+    }
+    #product-photo {
+        max-width: 500px;
+        min-width: 50%;
+        height: auto;
+    }
+}

static/css/style.css

@@ -0,0 +1,83 @@
+/* ========== THEME ========== */
+body {
+  --text-color: #222;
+  --bkg-color: #fff;
+  --bkg-color2: #bbb;
+}
+body.dark-theme {
+  --text-color: #eee;
+  --bkg-color: #121212;
+  --bkg-color2: #303030;
+}
+
+@media (prefers-color-scheme: dark) {
+  /* defaults to dark theme */
+  body {
+    --text-color: #eee;
+    --bkg-color: #121212;
+    --bkg-color2: #303030;
+  }
+  body.light-theme {
+    --text-color: #222;
+    --bkg-color: #fff;
+    --bkg-color2: #bbb;
+  }
+}
+
+* {
+  font-family: Arial, Helvetica, sans-serif;
+  background: transparent;
+  color: var(--text-color);
+}
+
+body {
+  background: var(--bkg-color);
+}
+
+h1, p {
+  color: var(--text-color);
+}
+
+/* ========== MAIN STYLES ========== */
+
+nav {
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: row;
+  padding: 0;
+  justify-content: center;
+  background: var(--bkg-color2);
+}
+
+nav * {
+  margin: 10px;
+  width: 12em;
+  text-decoration: none;
+  border: none;
+  font-size: medium;
+  text-align: center;
+}
+
+.header-wrapper {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  margin: 1em;
+}
+
+.header-wrapper img {
+  margin-right: 10px;
+  width: 64px;
+  height: 64px;
+
+}
+
+.header-wrapper div * {
+  margin-top: 0;
+  margin-bottom: 10px;
+}
+
+h1 {
+  text-align: center;
+}
+

static/js/main.js

@@ -0,0 +1,12 @@
+// скрипт...
+
+// Listen for a click on the button
+const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)");
+
+document.getElementById("theme-switcher").addEventListener("click", function () {
+  if (prefersDarkScheme.matches) {
+    document.body.classList.toggle("light-theme");
+  } else {
+    document.body.classList.toggle("dark-theme");
+  }
+});