frontend sketch on pure web
This commit is contained in:
commit
7d0c459b77
13 changed files with 1054 additions and 0 deletions
2
.gitignore
vendored
Normal file
2
.gitignore
vendored
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
.idea/
|
||||
.DS_Store
|
||||
21
vnshed/types.py
Normal file
21
vnshed/types.py
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
from datetime import datetime
|
||||
|
||||
class Novel:
|
||||
title: str
|
||||
description: str
|
||||
|
||||
vndb: int
|
||||
hours_to_read: int
|
||||
|
||||
tags: list[str]
|
||||
genres: list[str]
|
||||
|
||||
tg_post: str #url::Url
|
||||
post_at: datetime
|
||||
|
||||
class FullNovel:
|
||||
data: Novel
|
||||
|
||||
upload_queue: list[str]
|
||||
files: list[str]
|
||||
screenshots: list[str]
|
||||
75
www/css/calendar.css
Normal file
75
www/css/calendar.css
Normal file
|
|
@ -0,0 +1,75 @@
|
|||
ul {list-style-type: none;}
|
||||
|
||||
.calendar * {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.month {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
align-content: center;
|
||||
}
|
||||
|
||||
.month ul {
|
||||
margin: 0;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.month ul li {
|
||||
display: inline;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 3px;
|
||||
}
|
||||
|
||||
.month .prev {
|
||||
float: inline-start;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.month .next {
|
||||
float: inline-end;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.weekdays {
|
||||
padding: 10px 0 0 0;
|
||||
}
|
||||
|
||||
.weekdays li {
|
||||
display: inline-block;
|
||||
width: 13.6%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.days {
|
||||
padding: 10px 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.days li {
|
||||
list-style-type: none;
|
||||
display: inline-block;
|
||||
width: 13.6%;
|
||||
text-align: center;
|
||||
margin-bottom: 5px;
|
||||
font-size: smaller;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.days li .active {
|
||||
padding: 5px;
|
||||
border-radius: 30%;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 720px) {
|
||||
.weekdays li, .days li {width: 13.1%;}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 420px) {
|
||||
.weekdays li, .days li {width: 12.5%;}
|
||||
.days li .active {padding: 2px;}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 290px) {
|
||||
.weekdays li, .days li {width: 12.2%;}
|
||||
}
|
||||
195
www/css/global.css
Normal file
195
www/css/global.css
Normal file
|
|
@ -0,0 +1,195 @@
|
|||
@font-face {
|
||||
font-family: 'Inter';
|
||||
src: url('../font/Inter-Light.woff2') format('woff2');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Lobster';
|
||||
src: url('../font/Lobster-Regular.ttf') format('ttf');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
/* Шрифт для всей страницы */
|
||||
* {
|
||||
font-family: Inter;
|
||||
font-size: large;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
button {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/* Все элементы для ввода данных (input, textarea, собственные) */
|
||||
.input {
|
||||
border: 0;
|
||||
resize: none;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
/* Круглый элемент */
|
||||
.round {
|
||||
border-radius: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Закруглённый элемент */
|
||||
.rounded {
|
||||
border-radius: 0.75rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Вертикальное изображение */
|
||||
.vertical {
|
||||
aspect-ratio: 11 / 16;
|
||||
}
|
||||
|
||||
/* Горизонтальное изображение */
|
||||
.horisontal {
|
||||
aspect-ratio: 16 / 11;
|
||||
}
|
||||
|
||||
.image {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
align-content: center;
|
||||
text-align: center;
|
||||
width: 11rem;
|
||||
}
|
||||
|
||||
/* Кнопка "плюс" */
|
||||
.plus {
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
aspect-ratio: 1 / 1;
|
||||
height: 32px;
|
||||
font-size: x-large;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Кнопка "плюс" на изображении должна быть больше */
|
||||
.image .plus {
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
/* Поле с обложкой */
|
||||
.cover {
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
align-content: center;
|
||||
}
|
||||
|
||||
/* Поле с кнопкой "Создать" */
|
||||
.create {
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.create button {
|
||||
margin: 0.5rem;
|
||||
padding: 1rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Поле с заполняемыми полями */
|
||||
.fields {
|
||||
width: 100%;
|
||||
height: fit-content;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
padding-bottom: 5rem;
|
||||
}
|
||||
|
||||
/* Отступ между полями */
|
||||
.fields * {
|
||||
margin: 1rem;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Вертикальный список */
|
||||
.horisontal-bar {
|
||||
display: flex;
|
||||
overflow-x: scroll;
|
||||
align-content: center;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.horisontal-bar * {
|
||||
margin: 0;
|
||||
margin-right: 0.5rem;
|
||||
align-content: center;
|
||||
}
|
||||
|
||||
/* Элемент вертикального списка (тег, бадж, жанр) */
|
||||
.horisontal-item {
|
||||
padding: 0.25rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Элемент в очереди */
|
||||
.queue-item {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.queue-item + .queue-item {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.queue-item p {
|
||||
margin: 0.5rem;
|
||||
}
|
||||
|
||||
/* Текст с троеточием в конце */
|
||||
.ellipsis {
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
/* Кнопка с изображением */
|
||||
.imgbutton {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 0;
|
||||
align-content: center;
|
||||
text-align: center;
|
||||
font-size: small;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.imgbutton * {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.imgbutton img {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 2rem;
|
||||
}
|
||||
|
||||
/* Кнопка "Удалить" */
|
||||
.remove {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Кнопка "Изменить" */
|
||||
.edit {
|
||||
cursor: pointer;
|
||||
margin-left: auto;
|
||||
}
|
||||
233
www/css/themes.css
Normal file
233
www/css/themes.css
Normal file
|
|
@ -0,0 +1,233 @@
|
|||
@media (prefers-color-scheme: light) {
|
||||
body {
|
||||
background-color: #EFEFF3;
|
||||
}
|
||||
|
||||
p {
|
||||
color: black;
|
||||
}
|
||||
|
||||
.input {
|
||||
background-color: #F4F4F4;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.input::placeholder {
|
||||
color: black;
|
||||
}
|
||||
|
||||
.plus {
|
||||
background-color: #5C8DC0;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.plus:hover {
|
||||
background-color: #567aa1;
|
||||
}
|
||||
|
||||
.horisontal-item {
|
||||
background-color: #5C8DC0;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.horisontal-item:hover {
|
||||
background-color: #567aa1;
|
||||
}
|
||||
|
||||
.cover .image {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.create {
|
||||
background-color: #D9D9D9;
|
||||
}
|
||||
|
||||
.create button {
|
||||
background-color: #3CAA36;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.create button:hover {
|
||||
background-color: #3b8d37;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.fields {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.queue-item {
|
||||
background-color: #5C8DC0;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.queue-item p {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.imgbutton {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.month {
|
||||
background: #5C8DC0;
|
||||
}
|
||||
|
||||
.month ul li {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.weekdays {
|
||||
background-color: #F4F4F4;
|
||||
}
|
||||
|
||||
.weekdays li {
|
||||
color: black;
|
||||
}
|
||||
|
||||
.days {
|
||||
background: #F4F4F4;
|
||||
}
|
||||
|
||||
.days li {
|
||||
color: black;
|
||||
}
|
||||
|
||||
.days li .active {
|
||||
color: white !important;
|
||||
background: #5C8DC0;
|
||||
}
|
||||
|
||||
.remove {
|
||||
background-color: #FC1F1C;
|
||||
}
|
||||
|
||||
.remove:hover {
|
||||
background-color: #d32522;
|
||||
}
|
||||
|
||||
.edit {
|
||||
background-color: #1BC304;
|
||||
}
|
||||
|
||||
.edit:hover {
|
||||
background-color: #1c9d0b;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
body {
|
||||
background-color: #0F1011;
|
||||
}
|
||||
|
||||
p {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.input {
|
||||
background-color: #192431;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.input::placeholder {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.plus {
|
||||
background-color: #2791FF;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.plus:hover {
|
||||
background-color: #2c7dd4;
|
||||
}
|
||||
|
||||
.horisontal-item {
|
||||
background-color: #2791FF;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.horisontal-item:hover {
|
||||
background-color: #2c7dd4;
|
||||
}
|
||||
|
||||
.cover .image {
|
||||
background-color: #131A22;
|
||||
}
|
||||
|
||||
.create {
|
||||
background-color: #192431;
|
||||
}
|
||||
|
||||
.create button {
|
||||
background-color: #3CAA36;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.create button:hover {
|
||||
background-color: #3b8d37;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.fields {
|
||||
background-color: #131A22;
|
||||
}
|
||||
|
||||
.queue-item {
|
||||
background-color: #2791FF;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.queue-item p {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.imgbutton {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.month {
|
||||
background: #2791FF;
|
||||
}
|
||||
|
||||
.month ul li {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.weekdays {
|
||||
background-color: #192431;
|
||||
}
|
||||
|
||||
.weekdays li {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.days {
|
||||
background: #192431;
|
||||
}
|
||||
|
||||
.days li {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.days li .active {
|
||||
color: white !important;
|
||||
background: #2791FF;
|
||||
}
|
||||
|
||||
.remove {
|
||||
background-color: #FC1F1C;
|
||||
}
|
||||
|
||||
.remove:hover {
|
||||
background-color: #d32522;
|
||||
}
|
||||
|
||||
.edit {
|
||||
background-color: #1BC304;
|
||||
}
|
||||
|
||||
.edit:hover {
|
||||
background-color: #1c9d0b;
|
||||
}
|
||||
}
|
||||
BIN
www/font/Inter-Light.woff2
Normal file
BIN
www/font/Inter-Light.woff2
Normal file
Binary file not shown.
9
www/img/delete.svg
Normal file
9
www/img/delete.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 19 KiB |
109
www/img/edit.svg
Normal file
109
www/img/edit.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 119 KiB |
95
www/index.html
Normal file
95
www/index.html
Normal 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>
|
||||
8
www/js/calendar.js
Normal file
8
www/js/calendar.js
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
|
||||
document.getElementById("cal-prev").addEventListener("click", (event) => {
|
||||
console.log("cal-prev");
|
||||
})
|
||||
|
||||
document.getElementById("cal-next").addEventListener("click", (event) => {
|
||||
console.log("cal-next");
|
||||
})
|
||||
46
www/js/functions.js
Normal file
46
www/js/functions.js
Normal file
|
|
@ -0,0 +1,46 @@
|
|||
function makeid(length) {
|
||||
var result = '';
|
||||
var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
|
||||
var charactersLength = characters.length;
|
||||
for ( var i = 0; i < length; i++ ) {
|
||||
result += characters.charAt(Math.floor(Math.random() * charactersLength));
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
const imageTypes = {
|
||||
types: [
|
||||
{
|
||||
description: "Images",
|
||||
accept: {
|
||||
"image/*": [".png", ".gif", ".jpeg", ".jpg"],
|
||||
},
|
||||
},
|
||||
],
|
||||
excludeAcceptAllOption: true,
|
||||
multiple: false,
|
||||
};
|
||||
|
||||
let fileHandle;
|
||||
async function loadImage() {
|
||||
[fileHandle] = await window.showOpenFilePicker(imageTypes);
|
||||
return fileHandle;
|
||||
}
|
||||
|
||||
function addImage(initiator, target) {
|
||||
loadImage().then(async (result) => {
|
||||
let img = document.createElement("img");
|
||||
img.src = URL.createObjectURL(await result.getFile());
|
||||
document.getElementById(target).appendChild(img);
|
||||
initiator = document.getElementById(initiator);
|
||||
if (initiator) initiator.remove();
|
||||
//document.getElementById(target).addEventListener("click", addImage("", target));
|
||||
});
|
||||
}
|
||||
|
||||
function json_filter(key,value)
|
||||
{
|
||||
if (key=="html") return undefined;
|
||||
//else if (key=="id") return undefined;
|
||||
else return value;
|
||||
}
|
||||
12
www/js/index.js
Normal file
12
www/js/index.js
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
|
||||
document.getElementById("cover-plus").addEventListener("click", (event) => {
|
||||
addImage("cover-plus", "cover-div");
|
||||
})
|
||||
|
||||
// document.getElementById("screen-plus").addEventListener("click", (event) => {
|
||||
// addImage("screen-plus", "scr-1");
|
||||
// })
|
||||
|
||||
document.getElementById("create").addEventListener("click", (event) => {
|
||||
console.log("create");
|
||||
})
|
||||
249
www/js/types.js
Normal file
249
www/js/types.js
Normal file
|
|
@ -0,0 +1,249 @@
|
|||
class AddButton {
|
||||
|
||||
id = "";
|
||||
html = undefined;
|
||||
|
||||
constructor() {
|
||||
this.html = document.createElement('button');
|
||||
this.html.classList.add("plus");
|
||||
this.html.classList.add("round");
|
||||
this.html.appendChild(document.createTextNode("+"));
|
||||
this.id = makeid(8);
|
||||
this.html.id = this.id;
|
||||
}
|
||||
|
||||
addHadler(func) {
|
||||
this.html.addEventListener("click", func);
|
||||
return this;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
class HorisontalItem {
|
||||
|
||||
id = undefined;
|
||||
html = undefined;
|
||||
text = undefined;
|
||||
|
||||
constructor(text) {
|
||||
this.text = text;
|
||||
this.html = document.createElement('div');
|
||||
this.html.classList.add("horisontal-item");
|
||||
this.html.classList.add("rounded");
|
||||
this.html.appendChild(document.createTextNode(text));
|
||||
this.id = makeid(8);
|
||||
this.html.id = this.id;
|
||||
this.html.addEventListener("click", this.remove);
|
||||
}
|
||||
|
||||
remove() {
|
||||
document.getElementById(this.id).remove();
|
||||
}
|
||||
}
|
||||
|
||||
class HorisontalBar {
|
||||
|
||||
html = undefined;
|
||||
plus_id = undefined;
|
||||
elements = [];
|
||||
|
||||
constructor(text, id) {
|
||||
this.html = document.createElement('div');
|
||||
this.html.classList.add("horisontal-bar");
|
||||
this.html.classList.add("input");
|
||||
this.html.classList.add("rounded");
|
||||
let label = document.createElement('p');
|
||||
label.appendChild(document.createTextNode(text))
|
||||
this.html.appendChild(label);
|
||||
const plus = new AddButton().addHadler(
|
||||
() => this.append(new HorisontalItem('test'))
|
||||
);
|
||||
this.html.appendChild(plus.html);
|
||||
this.plus_id = plus.id;
|
||||
}
|
||||
|
||||
append(elem) {
|
||||
this.elements.push(elem);
|
||||
this.html.insertBefore(elem.html, document.getElementById(this.plus_id));
|
||||
return this;
|
||||
}
|
||||
|
||||
json() {
|
||||
return JSON.stringify(this.elements, json_filter);
|
||||
}
|
||||
}
|
||||
|
||||
class HorisontalImage {
|
||||
|
||||
id = undefined;
|
||||
html = undefined;
|
||||
|
||||
constructor() {
|
||||
this.html = document.createElement('div');
|
||||
this.html.classList.add("horisontal");
|
||||
this.html.classList.add("image");
|
||||
this.html.classList.add("input");
|
||||
this.html.classList.add("rounded");
|
||||
this.id = makeid(8);
|
||||
this.html.id = this.id;
|
||||
|
||||
let plus = new AddButton();
|
||||
plus.addHadler(() => {
|
||||
addImage(plus.id, this.id);
|
||||
document.getElementById("screenshots").appendChild(new HorisontalImage().html);
|
||||
});
|
||||
this.html.appendChild(plus.html);
|
||||
}
|
||||
|
||||
remove() {
|
||||
document.getElementById(this.id).remove();
|
||||
}
|
||||
}
|
||||
|
||||
class HorisontalImageBar {
|
||||
|
||||
html = undefined;
|
||||
first_id = undefined;
|
||||
elements = [];
|
||||
|
||||
constructor(id) {
|
||||
this.html = document.createElement('div');
|
||||
this.html.classList.add("horisontal-bar");
|
||||
const first = new HorisontalImage();
|
||||
this.html.appendChild(first.html);
|
||||
this.first_id = first.id;
|
||||
}
|
||||
|
||||
append(elem) {
|
||||
this.elements.push(elem);
|
||||
this.html.insertBefore(elem.html, document.getElementById(this.first_id));
|
||||
return this;
|
||||
}
|
||||
|
||||
json() {
|
||||
return JSON.stringify(this.elements, json_filter);
|
||||
}
|
||||
}
|
||||
|
||||
class ImgButton {
|
||||
|
||||
html = undefined;
|
||||
id = undefined;
|
||||
|
||||
constructor(name, img) {
|
||||
this.html = document.createElement('div');
|
||||
this.html.classList.add("imgbutton");
|
||||
this.id = makeid(8);
|
||||
this.html.id = this.id;
|
||||
|
||||
let btn_img = document.createElement('img');
|
||||
btn_img.src = img;
|
||||
btn_img.innerHTML = name;
|
||||
this.html.appendChild(btn_img);
|
||||
}
|
||||
|
||||
addHadler(func) {
|
||||
this.html.addEventListener("click", func);
|
||||
return this;
|
||||
}
|
||||
|
||||
setCssClass(name) {
|
||||
this.html.classList.add(name);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
class QueueItem {
|
||||
|
||||
html = undefined;
|
||||
id = undefined;
|
||||
|
||||
constructor(date, name) {
|
||||
this.html = document.createElement('div');
|
||||
this.html.classList.add("queue-item");
|
||||
this.html.classList.add("horisontal-bar");
|
||||
this.html.classList.add("rounded");
|
||||
this.id = makeid(8);
|
||||
this.html.id = this.id;
|
||||
|
||||
var date_p = document.createElement('p');
|
||||
date_p.innerHTML = date;
|
||||
this.html.appendChild(date_p);
|
||||
|
||||
var text = document.createElement('p');
|
||||
text.classList.add("ellipsis");
|
||||
text.innerHTML = name;
|
||||
this.html.appendChild(text);
|
||||
|
||||
let edit_btn = new ImgButton("Изменить", "./img/edit.svg");
|
||||
edit_btn.setCssClass("edit");
|
||||
this.html.appendChild(edit_btn.html);
|
||||
let rem_btn = new ImgButton("Удалить", "./img/delete.svg");
|
||||
rem_btn.setCssClass("remove");
|
||||
this.html.appendChild(rem_btn.html);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
class Calendar {
|
||||
|
||||
html = undefined;
|
||||
id = undefined;
|
||||
|
||||
constructor() {
|
||||
this.html = document.createElement('div');
|
||||
this.html.classList.add("calendar");
|
||||
this.html.classList.add("rounded");
|
||||
this.id = makeid(8);
|
||||
this.html.id = this.id;
|
||||
|
||||
// Calendar Header
|
||||
let month = document.createElement('div');
|
||||
month.classList.add("month");
|
||||
let m_header = document.createElement('ul');
|
||||
let prev_btn = document.createElement('li');
|
||||
prev_btn.classList.add("prev");
|
||||
prev_btn.id = this.id + "-prev";
|
||||
prev_btn.innerHTML = "❮";
|
||||
m_header.appendChild(prev_btn);
|
||||
let next_btn = document.createElement('li');
|
||||
next_btn.classList.add("next");
|
||||
next_btn.id = this.id + "-next";
|
||||
next_btn.innerHTML = "❯";
|
||||
m_header.appendChild(next_btn);
|
||||
let month_text = document.createElement('li');
|
||||
month_text.innerHTML = "Август 2025";
|
||||
m_header.appendChild(month_text);
|
||||
month.appendChild(m_header);
|
||||
this.html.appendChild(month);
|
||||
|
||||
// Week header
|
||||
let weekdays = document.createElement('ul');
|
||||
weekdays.classList.add("weekdays");
|
||||
const days = ["Пн", "Вт", "Ср", "Чт", "Пт", "Сб", "Вс"];
|
||||
for (const day of days) {
|
||||
let day_li = document.createElement('li');
|
||||
day_li.innerHTML = day;
|
||||
weekdays.appendChild(day_li);
|
||||
}
|
||||
this.html.appendChild(weekdays);
|
||||
|
||||
let day_table = document.createElement('ul');
|
||||
day_table.classList.add("days");
|
||||
const current = 10;
|
||||
for (const day of [...Array(31).keys()]) {
|
||||
let day_li = document.createElement('li');
|
||||
if (day+1 == current) {
|
||||
let day_sp = document.createElement('span');
|
||||
day_sp.classList.add("active");
|
||||
day_sp.innerHTML = day+1;
|
||||
day_li.appendChild(day_sp);
|
||||
} else {
|
||||
day_li.innerHTML = day+1;
|
||||
}
|
||||
day_table.appendChild(day_li);
|
||||
}
|
||||
this.html.appendChild(day_table);
|
||||
}
|
||||
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue