98 lines
4.2 KiB
HTML
98 lines
4.2 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
|
||
<head>
|
||
<title>Личный кабинет</title>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
|
||
|
||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/css/bootstrap.min.css" rel="stylesheet"
|
||
integrity="sha384-4Q6Gf2aSP4eDXB8Miphtr37CMZZQ5oXLH2yaXMJ2w8e2ZtHTl7GptT4jmndRuHDT" crossorigin="anonymous">
|
||
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
|
||
<link href="css/style.css" rel="stylesheet">
|
||
</head>
|
||
|
||
<body class="bg-dark text-light">
|
||
|
||
<header class="bg-secondary py-3 bg-custom-dark">
|
||
<div class="container d-flex align-items-center">
|
||
<a href="index.html" class="me-3">
|
||
<img src="../img/manga.png" alt="ЛОГО" height="50" />
|
||
</a>
|
||
<h1 class="h5 mb-0 text-light">Личный кабинет</h1>
|
||
</div>
|
||
</header>
|
||
|
||
<main class="container my-5">
|
||
<div class="row justify-content-center">
|
||
<div class="col-md-6 bg-secondary p-4 rounded bg-custom-dark">
|
||
<form id="loginForm">
|
||
<h2 class="text-center mb-4">
|
||
<i class="bi bi-person-circle me-2"></i>Вход в систему
|
||
</h2>
|
||
|
||
<div class="mb-3">
|
||
<label for="number" class="form-label">
|
||
<i class="bi bi-telephone-fill me-2"></i>Номер телефона
|
||
</label>
|
||
<input type="tel" class="form-control" id="number" name="number_acc" placeholder="Телефон" required>
|
||
</div>
|
||
|
||
<div class="mb-4">
|
||
<label for="password" class="form-label">
|
||
<i class="bi bi-lock-fill me-2"></i>Пароль
|
||
</label>
|
||
<input type="password" class="form-control" id="password" name="password_acc" placeholder="Пароль" required>
|
||
</div>
|
||
|
||
<div class="d-grid">
|
||
<button type="submit" class="btn btn-warning">
|
||
<i class="bi bi-box-arrow-in-right me-2"></i>Войти
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row justify-content-center mt-5" id="userCards">
|
||
<!-- Здесь будут карточки -->
|
||
</div>
|
||
</main>
|
||
|
||
<footer class="bg-secondary text-center py-4 text-light mt-5 bg-custom-dark">
|
||
<p><i class="bi bi-journal-text me-2"></i>Все права защищены, 2025</p>
|
||
</footer>
|
||
|
||
<script>
|
||
document.getElementById("loginForm")?.addEventListener("submit", (e) => {
|
||
e.preventDefault();
|
||
|
||
const number = document.getElementById("number").value;
|
||
const password = document.getElementById("password").value;
|
||
|
||
// типо AJAX
|
||
setTimeout(() => {
|
||
// создаём карточку пользователя
|
||
const card = document.createElement("div");
|
||
card.className = "col-md-4 mb-4"; // Класс для каждой карточки
|
||
card.innerHTML = `
|
||
<div class="card text-dark bg-light">
|
||
<div class="card-header">
|
||
<i class="bi bi-person-circle me-2"></i>Профиль пользователя
|
||
</div>
|
||
<div class="card-body">
|
||
<h5 class="card-title">Добро пожаловать!</h5>
|
||
<p class="card-text"><i class="bi bi-telephone-fill me-2"></i>${number}</p>
|
||
<p class="card-text"><i class="bi bi-shield-lock-fill me-2"></i>Пароль: <code>${password}</code></p>
|
||
</div>
|
||
</div>
|
||
`;
|
||
|
||
// добавляем карточку на страницу
|
||
document.getElementById("userCards").appendChild(card);
|
||
}, 0);
|
||
});
|
||
</script>
|
||
</body>
|
||
|
||
</html> |