frontend sketch on pure web

This commit is contained in:
OleSTEEP 2025-09-12 01:04:32 +03:00
commit 7d0c459b77
13 changed files with 1054 additions and 0 deletions

95
www/index.html Normal file
View file

@ -0,0 +1,95 @@
<html>
<head>
<title>Отложка</title>
<link rel="stylesheet" type="text/css" href="css/global.css">
<link rel="stylesheet" type="text/css" href="css/calendar.css">
<link rel="stylesheet" type="text/css" href="css/themes.css">
<link rel="preload" href="font/Inter-Light.woff2" as="font" type="font/ttf" crossorigin>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8" />
</head>
<body>
<script type="text/javascript" src="js/functions.js"></script>
<script type="text/javascript" src="js/types.js"></script>
<!-- Обложка -->
<div class="cover">
<div class="vertical image rounded" id="cover-div">
<button class="plus round" id="cover-plus">+</button>
</div>
<p>Обложка</p>
</div>
<div class="fields rounded" id="fields">
<!-- Название -->
<input type="text" class="input rounded" placeholder="Название"></input>
<!-- Описание -->
<textarea class="input rounded" placeholder="Описание" rows="4"></textarea>
<!-- Время на чтение -->
<div class="horisontal-bar">
<p>Время на чтение</p>
<select class="input rounded" id="hours-count">
<option value="first">менее 2-х часов</option>
<option value="second">2-10 часов</option>
<option value="third">10-30 часов</option>
<option value="third">50+ часов</option>
</select>
</div>
<!-- Поле с жанрами -->
<script>
let genres = new HorisontalBar("Жанры", "genres");
document.getElementById("fields").appendChild(genres.html);
</script>
<!-- Поле с тегами -->
<script>
let tags = new HorisontalBar("Теги", "tags");
document.getElementById("fields").appendChild(tags.html);
</script>
<!-- Поле с баджами -->
<script>
let badges = new HorisontalBar("Баджи", "badges");
document.getElementById("fields").appendChild(badges.html);
</script>
<!-- Скриншоты -->
<p>Скриншоты</p>
<script>
let screenshots = new HorisontalImageBar("screenshots");
document.getElementById("fields").appendChild(screenshots.html);
</script>
<!-- Календарь с датой -->
<p>Дата публикации</p>
<script>
let calendar = new Calendar();
document.getElementById("fields").appendChild(calendar.html);
</script>
<!-- Очередь публикации -->
<p>Очередь публикации</p>
<div class="input rounded" id="queue">
<script>
let queue1 = new QueueItem("28.11.24", "Fate/Stay Night (Судьба/Ночь схватки)");
document.getElementById("queue").appendChild(queue1.html);
</script>
<script>
let queue2 = new QueueItem("30.11.24", "Fate/Hollow Ataraxia (Судьба/Святая атараксия)");
document.getElementById("queue").appendChild(queue2.html);
</script>
</div>
</div>
<!-- Кнопка "Создать" -->
<div class="create">
<button class="rounded" id="create">Создать</button>
</div>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="js/calendar.js"></script>
</body>
</html>