PIbd-22_Kaznacheeva.E.K_Int.../lab3/master.html
2023-12-15 15:57:59 +04:00

121 lines
5.8 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ceramic.studio</title>
<link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="style.css"/>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css"/>
</head>
<body>
<nav class="navbar navbar-expand-lg">
<div class="container">
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarNav"
aria-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" aria-current="page" href="index.html">ceramic.studio</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="registration.html">связаться с нами</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container text-center my-5">
<h1>МАСТЕР КЛАССЫ</h1>
<p>Добро пожаловать в нашу студию керамики! Мы предлагаем уникальный опыт создания керамических изделий
руками с помощью наших опытных инструкторов. Мы проводим мастер-классы для всех возрастов и уровней опыта, от
начинающих до продвинутых художников.
Мы создали специальную атмосферу, чтобы каждый участник мог наслаждаться творческим процессом
и получить максимальное удовольствие от создания своего уникального керамического изделия.</p>
</div>
<div class="container my-5">
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-2 g-5" id="cards-container">
<!-- Формируется список блоков-->
</div>
</div>
<div id="items-update" class="modal fade" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false">
<div class="modal-dialog">
<form id="items-form" class="needs-validation" novalidate>
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="items-update-title"></h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="text-center">
<img id="image-preview" style="width: 200px" src="https://via.placeholder.com/200"
class="rounded rounded-circle"
alt="placeholder">
</div>
<input id="items-line-id" type="number" hidden>
<div class="mb-2">
<label for="item" class="form-label">Название</label>
<select id="item" class="form-select" name="selected" required>
</select>
</div>
<div class="mb-2">
<label class="form-label" for="description">Заголовок</label>
<input
id="title"
name="title"
class="form-control"
type="text1"
maxlength="100"
required/>
</div>
<div class="mb-2">
<label class="form-label" for="price">Цена</label>
<input id="price" name="price" class="form-control" type="number" value="0.00"
min="1000.00"
step="0.50" required>
</div>
<div class="mb-2">
<label class="form-label" for="description">Описание</label>
<input id="description" name="description" class="form-control" type="text1"
required>
</div>
<div class="mb-2">
<label class="form-label" for="image">Изображение</label>
<input id="image" type="file" name="image" class="form-control" accept="image/*">
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-secondary" data-bs-dismiss="modal">Закрыть</button>
<button type="submit" class="btn btn-primary">Сохранить</button>
</div>
</div>
</form>
</div>
</div>
<div class="container text-center my-5 mx-auto">
<a href="registration.html" class="btn btn-my">Записаться</a>
</div>
</body>
<script type="module">
import {createCards} from "./js/lines";
import validation from "./js/validation";
import {linesForm} from "./js/lines";
document.addEventListener('DOMContentLoaded', () => {
validation();
linesForm(false);
createCards();
});
</script>
</html>