frontend sketch on pure web

2025-09-12 01:04:32 +03:00 · 2025-09-12 01:04:32 +03:00 · 7d0c459b77
commit 7d0c459b77
13 changed files with 1054 additions and 0 deletions
--- a/www/css/global.css
+++ b/www/css/global.css
@ -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;
+}