final version, submitted to teacher

web/static/css/style.css

@@ -241,20 +241,43 @@ footer {
 
 /* Reviews section */
 .reviews {
+  margin: 20px 0;
+  padding: 15px;
+  background-color: #222;
+  border: 1px solid #555;
+  color: white;
+  border-radius: 1em;
+  text-align: center;
+}
+
+.reviews-header {
+  margin-bottom: 20px;
+}
+
+.review-list {
   display: flex;
   justify-content: space-around;
-  margin: 20px;
+  flex-wrap: wrap;
 }
 
 .review-box {
+  flex: 1 1 200px;
+  background-color: #333;
   width: 200px;
   min-height: 100px;
-  background-color: #444;
-  border: 1px solid #555;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  transition: transform 0.3s, box-shadow 0.3s;
+  margin: 10px;
   padding: 10px;
   text-align: center;
-  transition: transform 0.3s, box-shadow 0.3s;
-  color: white;
+}
+
+.review-box:hover {
+  transform: scale(1.05);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
 }
 
 /* Text alignment for Directions */
@@ -413,19 +436,29 @@ table tr:hover {
 
 /* Media queries for mobile responsiveness */
 @media (max-width: 768px) {
-  .navbar, .container, .about, .map, .service-info, .photos, .directions, .services, .service-item, .review-box {
+  header, footer, .navbar, .container, .about, .map, .service-info, .photos, .directions, .services, .service-item, .review-box {
+    width: 100%;
     border-radius: 0.5em;
   }
 
+  .header, .buttons {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .header .contact-info, .header .nazev, .header .buttons {
+    text-align: center;
+    margin: 10px 0;
+  }
+
   .navbar {
     flex-direction: column;
     align-items: center;
   }
 
-  .navbar a {
-    padding: 10px;
+  .navbar button {
     width: 100%;
-    text-align: center;
+    margin: 5px 0;
   }
 
   .content {
@@ -474,6 +507,19 @@ table tr:hover {
   .form-container {
     width: 90%;
   }
+
+  .user-info {
+    width: 100%;
+    text-align: center;
+  }
+
+  table {
+    font-size: 14px;
+  }
+
+  table th, table td {
+    padding: 8px 10px;
+  }
 }
 
 /* Button link styles */
@@ -619,3 +665,52 @@ canvas {
   transform: scale(1.05);
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
 }
+
+.partners {
+  margin: 20px 0;
+  padding: 15px;
+  background-color: #222;
+  border: 1px solid #555;
+  color: white;
+  border-radius: 1em;
+}
+
+.partner-list {
+  display: flex;
+  justify-content: space-around;
+  flex-wrap: wrap;
+}
+
+.partner-item {
+  flex: 1 1 200px;
+  width: 200px;
+  height: 200px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transition: transform 0.3s, box-shadow 0.3s;
+  margin: 10px;
+}
+
+.partner-item img {
+  width: 10em;
+  height: auto;
+  border-radius: 10em;
+}
+
+.partner-item:hover {
+  transform: scale(1.5);
+}
+
+.partner-logos {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  margin: 20px 0;
+}
+
+.partner-logos img {
+  width: var(--partner-logo-width, 100px);
+  height: var(--partner-logo-height, auto);
+  margin: 0 10px;
+}

web/static/scripts/products.js

@@ -0,0 +1,29 @@
+let productCount = document.querySelectorAll('.product-item').length;
+
+function addProduct() {
+  const container = document.getElementById('product-container');
+  const newProduct = document.createElement('div');
+  newProduct.classList.add('product-item');
+  newProduct.id = `product-item-${productCount}`;
+  newProduct.innerHTML = `
+    <label for="product_${productCount}">Produkt:</label>
+    <select id="product_${productCount}" name="products[${productCount}][id]" required>
+      <option value="" disabled selected>Vyberte produkt</option>
+      {% for product in products %}
+      <option value="{{ product['ID_Produktu'] }}">{{ product['Nazev'] }}</option>
+      {% endfor %}
+    </select>
+    <label for="quantity_${productCount}">Množství:</label>
+    <input type="number" id="quantity_${productCount}" name="products[${productCount}][quantity]" value="0" min="0" required>
+    <button type="button" onclick="removeProduct(${productCount})">Odstranit</button>
+  `;
+  container.appendChild(newProduct);
+  productCount++;
+}
+
+function removeProduct(index) {
+  const productItem = document.getElementById(`product-item-${index}`);
+  if (productItem) {
+    productItem.remove();
+  }
+}