Временное оформление карточек заготовок

2024-11-21 17:54:51 +03:00
parent 3f0c671cd1
commit 351b6c97e5
2 changed files with 64 additions and 13 deletions
--- a/App/Waybill/templates/waybill.html
+++ b/App/Waybill/templates/waybill.html
@@ -7,19 +7,28 @@
    <link href="/static/css/main.css" type="text/css" rel="stylesheet">
 </head>
 <body>
-    <h1>Новая накладная</h1>
-    <form action="" method="post">
-        {% for item in items %}
-            <div class="card">
-                <p>{{ item['name'] }}</p>
-                <p>В наличии {{ item['count'] }}</p>
-                <input type="number" name="{{ item['id'] }}" value="0" min="0">
-            </div>
-        {% endfor %}
-        <input type="submit" value="Создать накладную">
-    </form>
-    <div class="return">
-        <a href="{{ url_for('index') }}"><button>Главное меню</button></a>
+    <h1>Заглушка для примера составления накладной</h1>
+    <div class="container">
+        <!-- Пример карточки -->
+        <div class="card">
+            <img src="https://via.placeholder.com/250x150" alt="Фото товара">
+            <h3>Название товара 1</h3>
+            <p class="price">Цена: 500 руб.</p>
+            <p class="quantity">Количество: 10 шт.</p>
+        </div>
+        <div class="card">
+            <img src="https://via.placeholder.com/250x150" alt="Фото товара">
+            <h3>Название товара 2</h3>
+            <p class="price">Цена: 1200 руб.</p>
+            <p class="quantity">Количество: 5 шт.</p>
+        </div>
+        <div class="card">
+            <img src="https://via.placeholder.com/250x150" alt="Фото товара">
+            <h3>Название товара 3</h3>
+            <p class="price">Цена: 800 руб.</p>
+            <p class="quantity">Количество: 7 шт.</p>
+        </div>
    </div>
+    <a href="{{ url_for('index') }}"><button>На главную страницу</button></a>
 </body>
 </html>
--- a/App/static/css/waybill.css
+++ b/App/static/css/waybill.css
@@ -0,0 +1,42 @@
+.container {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 20px;
+    padding: 20px;
+    justify-content: center;
+}
+.card {
+    background: #fff;
+    border: 1px solid #ddd;
+    border-radius: 10px;
+    width: 250px;
+    padding: 15px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    transition: transform 0.2s;
+}
+.card:hover {
+    transform: scale(1.05);
+}
+.card img {
+    width: 100%;
+    height: 150px;
+    object-fit: cover;
+    border-radius: 5px;
+}
+.card h3 {
+    margin: 10px 0;
+    font-size: 18px;
+    color: #333;
+}
+.card p {
+    margin: 5px 0;
+    color: #555;
+}
+.price {
+    font-weight: bold;
+    color: #28a745;
+}
+.quantity {
+    font-weight: bold;
+    color: #007bff;
+}