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

This commit is contained in:
2024-11-21 17:54:51 +03:00
parent bf8020afc8
commit a86de70f05
2 changed files with 64 additions and 13 deletions

View File

@@ -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>

View 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;
}