Временное оформление карточек заготовок
This commit is contained in:
@@ -7,19 +7,28 @@
|
|||||||
<link href="/static/css/main.css" type="text/css" rel="stylesheet">
|
<link href="/static/css/main.css" type="text/css" rel="stylesheet">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<h1>Новая накладная</h1>
|
<h1>Заглушка для примера составления накладной</h1>
|
||||||
<form action="" method="post">
|
<div class="container">
|
||||||
{% for item in items %}
|
<!-- Пример карточки -->
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<p>{{ item['name'] }}</p>
|
<img src="https://via.placeholder.com/250x150" alt="Фото товара">
|
||||||
<p>В наличии {{ item['count'] }}</p>
|
<h3>Название товара 1</h3>
|
||||||
<input type="number" name="{{ item['id'] }}" value="0" min="0">
|
<p class="price">Цена: 500 руб.</p>
|
||||||
</div>
|
<p class="quantity">Количество: 10 шт.</p>
|
||||||
{% endfor %}
|
</div>
|
||||||
<input type="submit" value="Создать накладную">
|
<div class="card">
|
||||||
</form>
|
<img src="https://via.placeholder.com/250x150" alt="Фото товара">
|
||||||
<div class="return">
|
<h3>Название товара 2</h3>
|
||||||
<a href="{{ url_for('index') }}"><button>Главное меню</button></a>
|
<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>
|
</div>
|
||||||
|
<a href="{{ url_for('index') }}"><button>На главную страницу</button></a>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
42
App/static/css/waybill.css
Normal file
42
App/static/css/waybill.css
Normal file
@@ -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;
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user