rozenrod/Sheep-Service
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Додана сторінка "Розклад зібрань"

Browse Source 
Перероблен генератор карточок територій APІ
This commit is contained in:
Rozenrod
2025-11-22 20:17:50 +02:00
parent 04f39da611
commit 4b96ef0806
50 changed files with 1486 additions and 494 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
web/lib/pages/stand/list/script.js
View File

@@ -1,9 +1,13 @@
const Stand_list = {
list: [],
renderIndex: 0,
init: async () => {
let html = await fetch('/lib/pages/stand/list/index.html').then((response) => response.text());
app.innerHTML = html;
Stand_list.renderIndex = 0;
Stand_list.setHTML();
if (USER.possibilities.can_add_stand) {
@@ -11,6 +15,7 @@ const Stand_list = {
document.getElementById("constructorButton").style.display = "";
}
},
loadAPI: async function (url) {
const uuid = localStorage.getItem("uuid");
const response = await fetch(url, {
@@ -23,6 +28,7 @@ const Stand_list = {
Stand_list.list = await response.json();
return Stand_list.list;
},
setHTML: async function () {
const block = document.getElementById('list');
const null_list = document.getElementById('null-list');
@@ -52,12 +58,12 @@ const Stand_list = {
block.innerHTML = html;
}
},
renderCard: ({ element, pack=0 }) => {
const images = [
['stand_1.png', 'stand_2.png', 'stand_3.png'],
['stand_4.png', 'stand_5.png']
];
const randomImage = images[pack][Math.floor(Math.random() * images[pack].length)];
renderCard: ({ element }) => {
const imagesList = ['1.png', '2.png', '3.png', '4.png', '5.png', '6.png', '7.png', '8.png'];
// const randomImage = images[Math.floor(Math.random() * images.length)];
const image = imagesList[Stand_list.renderIndex % imagesList.length];
Stand_list.renderIndex++;
const editor = USER.possibilities.can_add_stand
? `<a id="editor_button" class="button-edit" data-route title="Змінити графік" href="/stand/editor/${element.id}"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"><path d="M 22.828125 3 C 22.316375 3 21.804562 3.1954375 21.414062 3.5859375 L 19 6 L 24 11 L 26.414062 8.5859375 C 27.195062 7.8049375 27.195062 6.5388125 26.414062 5.7578125 L 24.242188 3.5859375 C 23.851688 3.1954375 23.339875 3 22.828125 3 z M 17 8 L 5.2597656 19.740234 C 5.2597656 19.740234 6.1775313 19.658 6.5195312 20 C 6.8615312 20.342 6.58 22.58 7 23 C 7.42 23.42 9.6438906 23.124359 9.9628906 23.443359 C 10.281891 23.762359 10.259766 24.740234 10.259766 24.740234 L 22 13 L 17 8 z M 4 23 L 3.0566406 25.671875 A 1 1 0 0 0 3 26 A 1 1 0 0 0 4 27 A 1 1 0 0 0 4.328125 26.943359 A 1 1 0 0 0 4.3378906 26.939453 L 4.3632812 26.931641 A 1 1 0 0 0 4.3691406 26.927734 L 7 26 L 5.5 24.5 L 4 23 z"></path></svg></a>`
@@ -67,7 +73,7 @@ const Stand_list = {
<div class="card">
<div class="contents">
<div class="image">
<img src="/img/${randomImage}">
<img src="/img/stand/${image}">
</div>
<div class="info">
<div>

66
web/lib/pages/stand/list/style.css
View File

@@ -59,7 +59,7 @@
display: flex;
}
.page-stand-list>.list-controls select {
.page-stand-list>.list-controls>select {
min-width: 140px;
height: 30px;
background-color: var(--ColorThemes2);
@@ -73,7 +73,7 @@
border-radius: calc(var(--border-radius) - 5px - 2px);
}
.page-stand-list details {
.page-stand-list>details {
border-radius: var(--border-radius);
width: 100%;
display: flex;
@@ -86,19 +86,19 @@
box-shadow: var(--shadow-l1);
}
.page-stand-list>details[disabled] summary,
.page-stand-list>details.disabled summary {
.page-stand-list>details[disabled]>summary,
.page-stand-list>details.disabled>summary {
pointer-events: none;
user-select: none;
}
.page-stand-list>details summary::-webkit-details-marker,
.page-stand-list>details summary::marker {
.page-stand-list>details>summary::-webkit-details-marker,
.page-stand-list>details>summary::marker {
display: none;
content: "";
}
.page-stand-list summary {
.page-stand-list>details>summary {
width: calc(100% - 40px);
cursor: pointer;
color: var(--ColorThemes3);
@@ -111,12 +111,12 @@
align-items: center;
}
.page-stand-list summary span {
.page-stand-list>details>summary>span {
font-weight: 500;
width: 100%;
}
.page-stand-list #list {
.page-stand-list>details>#list {
width: 100%;
margin: 0;
display: flex;
@@ -129,7 +129,7 @@
transition: .3s ease;
}
.page-stand-list #list>.mess-list {
.page-stand-list>details>#list>.mess-list {
height: 200px;
display: none;
flex-direction: column;
@@ -137,24 +137,24 @@
justify-content: space-evenly;
}
.page-stand-list #list>.mess-list[data-visible="true"] {
.page-stand-list>details>#list>.mess-list[data-visible="true"] {
display: flex;
}
.page-stand-list #list>.mess-list>svg {
.page-stand-list>details>#list>.mess-list>svg {
width: 100px;
height: 100px;
fill: var(--ColorThemes3);
opacity: 0.7;
}
.page-stand-list #list>.mess-list>h3 {
.page-stand-list>details>#list>.mess-list>h3 {
font-size: var(--FontSize5);
color: var(--ColorThemes3);
opacity: 0.7;
}
.page-stand-list .card {
.page-stand-list>details>#list>.card {
position: relative;
width: 300px;
height: 200px;
@@ -166,42 +166,42 @@
}
@media (max-width: 2300px) {
.page-stand-list .card {
.page-stand-list>details>#list>.card {
width: calc((100% / 5) - 40px);
}
}
@media (max-width: 1960px) {
.page-stand-list .card {
.page-stand-list>details>#list>.card {
width: calc((100% / 4) - 40px);
}
}
@media (max-width: 1640px) {
.page-stand-list .card {
.page-stand-list>details>#list>.card {
width: calc((100% / 3) - 40px);
}
}
@media (max-width: 1280px) {
.page-stand-list .card {
.page-stand-list>details>#list>.card {
width: calc((100% / 2) - 40px);
}
}
@media (max-width: 650px) {
.page-stand-list .card {
.page-stand-list>details>#list>.card {
width: 100%;
}
}
@media(hover: hover) {
.page-stand-list .card:hover {
.page-stand-list>details>#list>.card:hover {
opacity: 0.8;
}
}
.page-stand-list .card>i {
.page-stand-list>details>#list>.card>i {
position: absolute;
width: 100%;
height: 100%;
@@ -214,7 +214,7 @@
background-color: var(--PrimaryColor);
}
.page-stand-list .card>a {
.page-stand-list>details>#list>.card>a {
position: absolute;
width: 100%;
height: 100%;
@@ -222,7 +222,7 @@
}
.page-stand-list .card>.contents {
.page-stand-list>details>#list>.card>.contents {
position: absolute;
background: rgb(64 64 64 / 0.7);
width: 100%;
@@ -236,25 +236,27 @@
justify-content: space-between;
}
.page-stand-list .card>.contents>.image {
.page-stand-list>details>#list>.card>.contents>.image {
position: absolute;
width: 100%;
border-radius: calc(var(--border-radius) - 5px);
}
.page-stand-list .card>.contents>.image>img {
.page-stand-list>details>#list>.card>.contents>.image>img {
width: 100%;
height: 200px;
object-fit: cover;
filter: brightness(0.9) contrast(80%) saturate(110%) drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.3));
border-radius: calc(var(--border-radius) - 5px);
}
@media (prefers-color-scheme: dark) {
.page-stand-list .card>.contents>.image>img {
.page-stand-list>details>#list>.card>.contents>.image>img {
filter: brightness(0.6) contrast(80%) saturate(110%) drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.3));
}
}
.page-stand-list .card>.contents>.info {
.page-stand-list>details>#list>.card>.contents>.info {
width: calc(100% - 20px);
position: absolute;
bottom: 0;
@@ -262,7 +264,7 @@
display: flex;
}
.page-stand-list .card>.contents>.info>div {
.page-stand-list>details>#list>.card>.contents>.info>div {
width: 100%;
height: 35px;
display: flex;
@@ -277,14 +279,14 @@
box-shadow: var(--shadow-l1);
}
.page-stand-list .card>.contents>.info>div>span {
.page-stand-list>details>#list>.card>.contents>.info>div>span {
color: var(--ColorThemes3);
font-size: var(--FontSize3);
font-weight: 300;
z-index: 2;
}
.page-stand-list .card>.contents>.info>div>p {
.page-stand-list>details>#list>.card>.contents>.info>div>p {
color: var(--ColorThemes3);
font-size: var(--FontSize3);
font-weight: 400;
@@ -292,7 +294,7 @@
z-index: 2;
}
.page-stand-list .card>.contents>.info>.button-edit {
.page-stand-list>details>#list>.card>.contents>.info>.button-edit {
min-width: 35px;
height: 35px;
border-radius: calc(var(--border-radius) - 5px - 4px);
@@ -306,7 +308,7 @@
box-shadow: var(--shadow-l1);
}
.page-stand-list .card>.contents>.info>.button-edit>svg {
.page-stand-list>details>#list>.card>.contents>.info>.button-edit>svg {
width: 20px;
height: 20px;
fill: var(--PrimaryColorText);