Готова авторизация
This commit is contained in:
@@ -3,5 +3,6 @@
|
||||
"singleQuote": false,
|
||||
"printWidth": 120,
|
||||
"trailingComma": "es5",
|
||||
"useTabs": false
|
||||
"useTabs": false,
|
||||
"endOfLine": "auto"
|
||||
}
|
||||
|
||||
@@ -5,32 +5,94 @@
|
||||
<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>
|
||||
<body class="bg-dark text-light">
|
||||
|
||||
<div class="menu">
|
||||
<a href="index.html" class="logo">
|
||||
<img src="img/manga.png" alt="ЛОГО">
|
||||
</a>
|
||||
</div>
|
||||
<header class="bg-custom-dark py-3">
|
||||
<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>
|
||||
|
||||
<div class="input">
|
||||
<form class="form">
|
||||
<div class="form-row input">
|
||||
<p>Введите номер телефона</p>
|
||||
<input type="tel" placeholder="Телефон" id="number" name="number_acc">
|
||||
<main class="container my-5">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-6 bg-custom-dark p-4 rounded">
|
||||
<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 class="form-row input">
|
||||
<p>Введите пароль</p>
|
||||
<input type="text" placeholder="Пароль" id="password" name="password_acc">
|
||||
</div>
|
||||
<div class="form-row input">
|
||||
<button type="submit">Вход</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row justify-content-center mt-5" id="userCards">
|
||||
<!-- Здесь будут карточки -->
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer class="bg-custom-dark text-center py-4 text-light mt-5">
|
||||
<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>
|
||||
@@ -1,8 +1,35 @@
|
||||
* {
|
||||
|
||||
.bg-custom-dark {
|
||||
background-color: #0f0630 !important;
|
||||
color: #f0ffff;
|
||||
}
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
main {
|
||||
flex: 1 0 auto;
|
||||
}
|
||||
|
||||
footer {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
|
||||
/* * {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
body {
|
||||
background-color: #0f0630;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
@@ -184,4 +211,4 @@ footer {
|
||||
margin: 0px 0px 15px;
|
||||
}
|
||||
}
|
||||
|
||||
*/
|
||||
|
||||
@@ -0,0 +1,3 @@
|
||||
import "bootstrap"; // Подключение JS Bootstrap
|
||||
import "bootstrap-icons/font/bootstrap-icons.css";
|
||||
import "bootstrap/dist/css/bootstrap.min.css"; // Подключение стилей
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
import { resolve } from "path";
|
||||
// eslint-disable-next-line import/no-extraneous-dependencies
|
||||
import { defineConfig } from "vite";
|
||||
|
||||
export default defineConfig({
|
||||
|
||||
Reference in New Issue
Block a user