Доработал header и реализовал добавление стихов
This commit is contained in:
parent
c8910f218e
commit
1227529163
GPG key ID:
867F0C8041D69B4C
9 changed files with 434 additions and 104 deletions
71
404.html
71
404.html
|
|
@ -3,29 +3,66 @@
|
|||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>КОМП</title>
|
||||
<title>Ошибка 404</title>
|
||||
<link rel="stylesheet" href="style/main.css">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<div class="left">
|
||||
<div class="logo">
|
||||
КОМП
|
||||
<div class="heigher">
|
||||
<div class="left">
|
||||
<div class="logo">
|
||||
КОМП
|
||||
</div>
|
||||
<nav>
|
||||
<a href="/">Стихи</a>
|
||||
<a href="news">Новости</a>
|
||||
<a href="people">Участники</a>
|
||||
<a href="about">О нас</a>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="right">
|
||||
<nav class="non-logged" style="display: none">
|
||||
<a href="signup">Регистрация</a>
|
||||
<a href="login">Вход</a>
|
||||
</nav>
|
||||
<nav class="logged" style="display: none">
|
||||
<a href="add">Добавить</a>
|
||||
<a href="my">Профиль</a>
|
||||
</nav>
|
||||
<button>
|
||||
<svg width="25" height="25">
|
||||
<rect width="25" height="3" y="4"></rect>
|
||||
<rect width="25" height="3" y="11"></rect>
|
||||
<rect width="25" height="3" y="18"></rect>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<nav>
|
||||
<a href="/">Стихи</a>
|
||||
<a href="/news">Новости</a>
|
||||
<a href="/people">Участники</a>
|
||||
<a href="/about">О нас</a>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="right">
|
||||
<nav>
|
||||
<a href="/signup">Регистрация</a>
|
||||
<a href="/login">Вход</a>
|
||||
</nav>
|
||||
</div>
|
||||
<nav id="menu">
|
||||
<a href="/">Стихи</a>
|
||||
<a href="news">Новости</a>
|
||||
<a href="people">Участники</a>
|
||||
<a href="about">О нас</a>
|
||||
<div class="non-logged" style="display: none">
|
||||
<a href="signup">Регистрация</a>
|
||||
<a href="login">Вход</a>
|
||||
</div>
|
||||
<div class="logged" style="display: none">
|
||||
<a href="add">Добавить</a>
|
||||
<a href="my">Профиль</a>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
Файл не найден!
|
||||
<main>
|
||||
Не найдено!
|
||||
</main>
|
||||
<footer>
|
||||
<div>Казанское объединение молодых поэтов</div>
|
||||
<div>
|
||||
<a href="https://t.me/komppoet">Telegram</a>
|
||||
<a href="https://git.debu.su/komp">Исходный код</a>
|
||||
</div>
|
||||
</footer>
|
||||
<script src="js/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
83
add.html
Normal file
83
add.html
Normal file
|
|
@ -0,0 +1,83 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Добавить стихотворение | КОМП</title>
|
||||
<link rel="stylesheet" href="style/main.css">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<div class="heigher">
|
||||
<div class="left">
|
||||
<div class="logo">
|
||||
КОМП
|
||||
</div>
|
||||
<nav>
|
||||
<a href="/">Стихи</a>
|
||||
<a href="news">Новости</a>
|
||||
<a href="people">Участники</a>
|
||||
<a href="about">О нас</a>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="right">
|
||||
<nav class="non-logged" style="display: none">
|
||||
<a href="signup">Регистрация</a>
|
||||
<a href="login">Вход</a>
|
||||
</nav>
|
||||
<nav class="logged" style="display: none">
|
||||
<a href="add" class="active">Добавить</a>
|
||||
<a href="my">Профиль</a>
|
||||
</nav>
|
||||
<button>
|
||||
<svg width="25" height="25">
|
||||
<rect width="25" height="3" y="4"></rect>
|
||||
<rect width="25" height="3" y="11"></rect>
|
||||
<rect width="25" height="3" y="18"></rect>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<nav id="menu">
|
||||
<a href="/">Стихи</a>
|
||||
<a href="news">Новости</a>
|
||||
<a href="people">Участники</a>
|
||||
<a href="about">О нас</a>
|
||||
<div class="non-logged" style="display: none">
|
||||
<a href="signup">Регистрация</a>
|
||||
<a href="login">Вход</a>
|
||||
</div>
|
||||
<div class="logged" style="display: none">
|
||||
<a href="add" class="active">Добавить</a>
|
||||
<a href="my">Профиль</a>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<div class="content">
|
||||
<h1>Добавить стихотворение</h1>
|
||||
<form method="post" action="api/addverse">
|
||||
<input type="text" name="title" class="input" placeholder="Введите название" required>
|
||||
<textarea class="input" name="text" placeholder="Введите текст" required></textarea>
|
||||
<select name="genre">
|
||||
<option value="">-- Выберите жанр --</option>
|
||||
<option value="love">Любовная лирика</option>
|
||||
<option value="landscape">Пейзажная лирика</option>
|
||||
<option value="civil">Гражданская лирика</option>
|
||||
<option value="philosophy">Философская лирика</option>
|
||||
</select>
|
||||
<input type="submit" value="Опубликовать">
|
||||
</form>
|
||||
</div>
|
||||
</main>
|
||||
<footer>
|
||||
<div>Казанское объединение молодых поэтов</div>
|
||||
<div>
|
||||
<a href="https://t.me/komppoet">Telegram</a>
|
||||
<a href="https://git.debu.su/komp">Исходный код</a>
|
||||
</div>
|
||||
</footer>
|
||||
<script src="js/main.js"></script>
|
||||
<script src="js/add.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
57
head.html
57
head.html
|
|
@ -8,22 +8,49 @@
|
|||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<div class="left">
|
||||
<div class="logo">
|
||||
КОМП
|
||||
<div class="heigher">
|
||||
<div class="left">
|
||||
<div class="logo">
|
||||
КОМП
|
||||
</div>
|
||||
<nav>
|
||||
<a href="/">Стихи</a>
|
||||
<a href="news">Новости</a>
|
||||
<a href="people">Участники</a>
|
||||
<a href="about">О нас</a>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="right">
|
||||
<nav class="non-logged" style="display: none">
|
||||
<a href="signup">Регистрация</a>
|
||||
<a href="login">Вход</a>
|
||||
</nav>
|
||||
<nav class="logged" style="display: none">
|
||||
<a href="add">Добавить</a>
|
||||
<a href="my">Профиль</a>
|
||||
</nav>
|
||||
<button>
|
||||
<svg width="25" height="25">
|
||||
<rect width="25" height="3" y="4"></rect>
|
||||
<rect width="25" height="3" y="11"></rect>
|
||||
<rect width="25" height="3" y="18"></rect>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<nav>
|
||||
<a href="/">Стихи</a>
|
||||
<a href="/news">Новости</a>
|
||||
<a href="/people">Участники</a>
|
||||
<a href="/about">О нас</a>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="right">
|
||||
<nav>
|
||||
<a href="/signup">Регистрация</a>
|
||||
<a href="/login">Вход</a>
|
||||
</nav>
|
||||
</div>
|
||||
<nav id="menu">
|
||||
<a href="/">Стихи</a>
|
||||
<a href="news">Новости</a>
|
||||
<a href="people">Участники</a>
|
||||
<a href="about">О нас</a>
|
||||
<div class="non-logged" style="display: none">
|
||||
<a href="signup">Регистрация</a>
|
||||
<a href="login">Вход</a>
|
||||
</div>
|
||||
<div class="logged" style="display: none">
|
||||
<a href="add">Добавить</a>
|
||||
<a href="my">Профиль</a>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
|
|
|
|||
56
index.html
56
index.html
|
|
@ -8,28 +8,50 @@
|
|||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<div class="left">
|
||||
<div class="logo">
|
||||
КОМП
|
||||
<div class="heigher">
|
||||
<div class="left">
|
||||
<div class="logo">
|
||||
КОМП
|
||||
</div>
|
||||
<nav>
|
||||
<a href="/" class="active">Стихи</a>
|
||||
<a href="news">Новости</a>
|
||||
<a href="people">Участники</a>
|
||||
<a href="about">О нас</a>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="right">
|
||||
<nav class="non-logged" style="display: none">
|
||||
<a href="signup">Регистрация</a>
|
||||
<a href="login">Вход</a>
|
||||
</nav>
|
||||
<nav class="logged" style="display: none">
|
||||
<a href="add">Добавить</a>
|
||||
<a href="my">Профиль</a>
|
||||
</nav>
|
||||
<button>
|
||||
<svg width="25" height="25">
|
||||
<rect width="25" height="3" y="4"></rect>
|
||||
<rect width="25" height="3" y="11"></rect>
|
||||
<rect width="25" height="3" y="18"></rect>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<nav>
|
||||
<a href="/" class="active">Стихи</a>
|
||||
<a href="news">Новости</a>
|
||||
<a href="people">Участники</a>
|
||||
<a href="about">О нас</a>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="right">
|
||||
<nav id="non-logged" style="display: none;">
|
||||
<nav id="menu">
|
||||
<a href="/" class="active">Стихи</a>
|
||||
<a href="news">Новости</a>
|
||||
<a href="people">Участники</a>
|
||||
<a href="about">О нас</a>
|
||||
<div class="non-logged" style="display: none">
|
||||
<a href="signup">Регистрация</a>
|
||||
<a href="login">Вход</a>
|
||||
</nav>
|
||||
<nav id="logged" style="display: none;">
|
||||
</div>
|
||||
<div class="logged" style="display: none">
|
||||
<a href="add">Добавить</a>
|
||||
<a href="my">Профиль</a>
|
||||
</nav>
|
||||
<button>Меню</button>
|
||||
</div>
|
||||
<a href="my">Профиль</a>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
|
||||
|
|
|
|||
30
js/add.js
Normal file
30
js/add.js
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
const form = document.getElementsByTagName('form')[0]
|
||||
|
||||
const select = document.getElementsByTagName('select')[0]
|
||||
|
||||
form.addEventListener('submit', async (e) => {
|
||||
e.preventDefault()
|
||||
if (select.value == '')
|
||||
alert('Выберите жанр!')
|
||||
else {
|
||||
const user = getUser()
|
||||
if (user) {
|
||||
const login = document.createElement('input')
|
||||
login.type = 'hidden'
|
||||
login.name = 'login'
|
||||
login.value = user.login
|
||||
|
||||
const password = document.createElement('input')
|
||||
password.type = 'hidden'
|
||||
password.name = 'password'
|
||||
password.value = user.password
|
||||
|
||||
form.appendChild(login)
|
||||
form.appendChild(password)
|
||||
form.submit()
|
||||
}
|
||||
else {
|
||||
alert('Войдите в систему!')
|
||||
}
|
||||
}
|
||||
})
|
||||
20
js/main.js
20
js/main.js
|
|
@ -1,7 +1,23 @@
|
|||
const button = document.getElementsByTagName('button')[0]
|
||||
const menu = document.getElementById('menu')
|
||||
|
||||
function toggleMenu() {
|
||||
if (menu.className == '') {
|
||||
menu.className = button.className = 'active'
|
||||
}
|
||||
else {
|
||||
menu.className = button.className = ''
|
||||
}
|
||||
}
|
||||
|
||||
button.onclick = toggleMenu
|
||||
|
||||
if (getUser())
|
||||
document.getElementById('logged').style.display = ''
|
||||
for (el of document.getElementsByClassName('logged'))
|
||||
el.style.display = ''
|
||||
else
|
||||
document.getElementById('non-logged').style.display = ''
|
||||
for (el of document.getElementsByClassName('non-logged'))
|
||||
el.style.display = ''
|
||||
|
||||
async function checkStatus(url, data = {}) {
|
||||
try {
|
||||
|
|
|
|||
60
login.html
60
login.html
|
|
@ -3,33 +3,55 @@
|
|||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Регистрация | КОМП</title>
|
||||
<title>Вход | КОМП</title>
|
||||
<link rel="stylesheet" href="style/main.css">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<div class="left">
|
||||
<div class="logo">
|
||||
КОМП
|
||||
<div class="heigher">
|
||||
<div class="left">
|
||||
<div class="logo">
|
||||
КОМП
|
||||
</div>
|
||||
<nav>
|
||||
<a href="/">Стихи</a>
|
||||
<a href="news">Новости</a>
|
||||
<a href="people">Участники</a>
|
||||
<a href="about">О нас</a>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="right">
|
||||
<nav class="non-logged" style="display: none">
|
||||
<a href="signup">Регистрация</a>
|
||||
<a href="login" class="active">Вход</a>
|
||||
</nav>
|
||||
<nav class="logged" style="display: none">
|
||||
<a href="add">Добавить</a>
|
||||
<a href="my">Профиль</a>
|
||||
</nav>
|
||||
<button>
|
||||
<svg width="25" height="25">
|
||||
<rect width="25" height="3" y="4"></rect>
|
||||
<rect width="25" height="3" y="11"></rect>
|
||||
<rect width="25" height="3" y="18"></rect>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<nav>
|
||||
<a href="/">Стихи</a>
|
||||
<a href="news">Новости</a>
|
||||
<a href="people">Участники</a>
|
||||
<a href="about">О нас</a>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="right">
|
||||
<nav id="non-logged" style="display: none;">
|
||||
<nav id="menu">
|
||||
<a href="/">Стихи</a>
|
||||
<a href="news">Новости</a>
|
||||
<a href="people">Участники</a>
|
||||
<a href="about">О нас</a>
|
||||
<div class="non-logged" style="display: none">
|
||||
<a href="signup">Регистрация</a>
|
||||
<a href="login" class="active">Вход</a>
|
||||
</nav>
|
||||
<nav id="logged" style="display: none;">
|
||||
<a href="login">Вход</a>
|
||||
</div>
|
||||
<div class="logged" style="display: none">
|
||||
<a href="add">Добавить</a>
|
||||
<a href="my">Профиль</a>
|
||||
</nav>
|
||||
<button>Меню</button>
|
||||
</div>
|
||||
<a href="my">Профиль</a>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<div id="form">
|
||||
|
|
|
|||
58
signup.html
58
signup.html
|
|
@ -8,32 +8,54 @@
|
|||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<div class="left">
|
||||
<div class="logo">
|
||||
КОМП
|
||||
<div class="heigher">
|
||||
<div class="left">
|
||||
<div class="logo">
|
||||
КОМП
|
||||
</div>
|
||||
<nav>
|
||||
<a href="/">Стихи</a>
|
||||
<a href="news">Новости</a>
|
||||
<a href="people">Участники</a>
|
||||
<a href="about">О нас</a>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="right">
|
||||
<nav class="non-logged" style="display: none">
|
||||
<a href="signup" class="active">Регистрация</a>
|
||||
<a href="login">Вход</a>
|
||||
</nav>
|
||||
<nav class="logged" style="display: none">
|
||||
<a href="add">Добавить</a>
|
||||
<a href="my">Профиль</a>
|
||||
</nav>
|
||||
<button>
|
||||
<svg width="25" height="25">
|
||||
<rect width="25" height="3" y="4"></rect>
|
||||
<rect width="25" height="3" y="11"></rect>
|
||||
<rect width="25" height="3" y="18"></rect>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<nav>
|
||||
<a href="/">Стихи</a>
|
||||
<a href="news">Новости</a>
|
||||
<a href="people">Участники</a>
|
||||
<a href="about">О нас</a>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="right">
|
||||
<nav id="non-logged" style="display: none;">
|
||||
<nav id="menu">
|
||||
<a href="/">Стихи</a>
|
||||
<a href="news">Новости</a>
|
||||
<a href="people">Участники</a>
|
||||
<a href="about">О нас</a>
|
||||
<div class="non-logged" style="display: none">
|
||||
<a href="signup" class="active">Регистрация</a>
|
||||
<a href="login">Вход</a>
|
||||
</nav>
|
||||
<nav id="logged" style="display: none;">
|
||||
</div>
|
||||
<div class="logged" style="display: none">
|
||||
<a href="add">Добавить</a>
|
||||
<a href="my">Профиль</a>
|
||||
</nav>
|
||||
<button>Меню</button>
|
||||
</div>
|
||||
<a href="my">Профиль</a>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<div id="form">
|
||||
<div id="label">Регистрация</div>
|
||||
<div id="label" class="active">Регистрация</div>
|
||||
<form method="post" action="api/signup">
|
||||
<label>
|
||||
<p>Имя</p>
|
||||
|
|
|
|||
103
style/main.css
103
style/main.css
|
|
@ -14,11 +14,6 @@
|
|||
src: url(fonts/Libertinus/LibertinusSerif-Regular.woff2)
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Playfair Display';
|
||||
src: url(fonts/PlayfairDisplay/PlayfairDisplay-VariableFont_wght.ttf)
|
||||
}
|
||||
|
||||
* {
|
||||
font-family: Libertinus;
|
||||
padding: 0;
|
||||
|
|
@ -44,15 +39,36 @@ body {
|
|||
}
|
||||
|
||||
header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
min-height: 50px;
|
||||
padding-inline: 6px;
|
||||
background: var(--header-color);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
user-select: none;
|
||||
}
|
||||
.heigher {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
min-height: 50px;
|
||||
}
|
||||
.heigher button {
|
||||
display: none;
|
||||
cursor: pointer;
|
||||
margin-right: 10px;
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
background: none;
|
||||
border-radius: 5px;
|
||||
border: none;
|
||||
padding: 5px
|
||||
}
|
||||
|
||||
.heigher button.active {
|
||||
background: var(--header-button-active-color);
|
||||
}
|
||||
|
||||
.heigher button:hover {
|
||||
background: var(--header-button-hover-color);
|
||||
}
|
||||
|
||||
header a {
|
||||
display: inline-block;
|
||||
|
|
@ -64,6 +80,16 @@ header a {
|
|||
color: var(--header-button-font-color)
|
||||
}
|
||||
|
||||
#menu {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#menu a {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
header a.active {
|
||||
background: var(--header-button-active-color);
|
||||
}
|
||||
|
|
@ -77,9 +103,6 @@ header .logo {
|
|||
display: none;
|
||||
font-size: 150%;
|
||||
}
|
||||
.right > button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
|
|
@ -93,7 +116,7 @@ main {
|
|||
|
||||
#form {
|
||||
width: 500px;
|
||||
margin: 20px calc(50vw - 250px);
|
||||
margin: 30px calc(50vw - 250px) 50px;
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--border-color);
|
||||
|
|
@ -161,11 +184,50 @@ input[type=submit]:hover {
|
|||
background: color-mix(in srgb, var(--accent-color), black 20%);
|
||||
}
|
||||
|
||||
.content {
|
||||
width: 800px;
|
||||
margin: 30px calc(50vw - 400px) 50px;
|
||||
}
|
||||
.content h1 {
|
||||
margin-bottom: 20px;
|
||||
text-align: center
|
||||
}
|
||||
.content form {
|
||||
padding: 0;
|
||||
}
|
||||
.content .input {
|
||||
box-sizing: border-box;
|
||||
width: 100%
|
||||
}
|
||||
.content input {
|
||||
margin-bottom: 10px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.content textarea {
|
||||
height: 400px;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
margin-bottom: 10px
|
||||
}
|
||||
.content select {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
textarea {
|
||||
resize: none;
|
||||
}
|
||||
|
||||
select {
|
||||
height: 40px;
|
||||
accent-color: red;
|
||||
padding-inline: 10px;
|
||||
}
|
||||
|
||||
#fullverse {
|
||||
margin: 20px
|
||||
}
|
||||
|
||||
#fullverse h1 {
|
||||
h1 {
|
||||
font-size: 120%;
|
||||
}
|
||||
|
||||
|
|
@ -184,7 +246,7 @@ footer {
|
|||
}
|
||||
|
||||
@media (max-width: 748px) {
|
||||
nav {
|
||||
.heigher nav {
|
||||
display: none;
|
||||
}
|
||||
header .logo {
|
||||
|
|
@ -194,6 +256,9 @@ footer {
|
|||
.right > button {
|
||||
display: block;
|
||||
}
|
||||
#menu.active {
|
||||
display: block;
|
||||
}
|
||||
footer {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
|
@ -202,6 +267,12 @@ footer {
|
|||
@media (max-width: 555px) {
|
||||
#form {
|
||||
width: 90vw;
|
||||
margin: 20px 5vw;
|
||||
margin: 30px 5vw 50px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 888px) {
|
||||
.content {
|
||||
width: 90vw;
|
||||
margin: 30px 5vw 50px
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue