игра

Страница: 1

Сообщений 1 страница 2 из 2

Поделиться12026-03-17 10:59:11

Автор: сибирь
Сообщений: 913
Последний визит:
Вчера 22:41:35

[hideprofile]
[html]<style>
:root {
--sg30-gap: 6px;
--sg30-cell-size: 110px;
--sg30-board-width: 690px;
}

.sg30-root,
.sg30-root * {
box-sizing: border-box;
}

.sg30-root {
font-family: Arial, sans-serif;
width: 900px;
max-width: 100%;
margin: 0 auto;
color: #1f2937;
}

.sg30-layout {
display: flex;
flex-direction: column;
gap: 18px;
}

.sg30-panel,
.sg30-board-wrap {
border: 1px solid #d1d5db;
border-radius: 16px;
background: #ffffff;
padding: 16px;
}

.sg30-title {
margin: 0 0 8px;
font-size: 24px;
}

.sg30-sub {
margin: 0;
color: #6b7280;
line-height: 1.45;
}

.sg30-admin-grid {
display: grid;
grid-template-columns: repeat(2, minmax(220px, 1fr));
gap: 12px;
margin-top: 14px;
}

.sg30-admin-card {
border: 1px solid #e5e7eb;
border-radius: 12px;
padding: 12px;
background: #f9fafb;
}

.sg30-admin-head {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 8px;
font-weight: 700;
}

.sg30-token-dot {
width: 16px;
height: 16px;
border-radius: 50%;
border: 2px solid rgba(0,0,0,.2);
flex: 0 0 auto;
}

.sg30-label {
display: block;
font-size: 13px;
margin-bottom: 6px;
}

.sg30-select,
.sg30-button,
.sg30-copy-box {
width: 100%;
border-radius: 10px;
font: inherit;
}

.sg30-select {
min-height: 38px;
border: 1px solid #cbd5e1;
background: #fff;
padding: 8px 10px;
}

.sg30-button {
min-height: 38px;
border: 0;
background: #2563eb;
color: #fff;
padding: 10px 12px;
cursor: pointer;
font-weight: 700;
}

.sg30-button.sg30-button-secondary {
background: #e5e7eb;
color: #111827;
}

.sg30-admin-actions {
display: flex;
gap: 12px;
margin-top: 14px;
flex-wrap: wrap;
}

.sg30-help {
margin-top: 12px;
font-size: 13px;
color: #6b7280;
line-height: 1.45;
}

.sg30-copy-wrap {
margin-top: 16px;
border-top: 1px solid #e5e7eb;
padding-top: 16px;
}

.sg30-copy-title {
margin: 0 0 8px;
font-size: 16px;
}

.sg30-copy-box {
min-height: 260px;
border: 1px solid #cbd5e1;
background: #f8fafc;
padding: 12px;
resize: vertical;
font-family: Consolas, Monaco, monospace;
font-size: 12px;
line-height: 1.45;
}

.sg30-board-wrap {
width: fit-content;
}

.sg30-board {
display: grid;
grid-template-columns: repeat(6, 110px);
grid-template-rows: repeat(5, 110px);
gap: var(--sg30-gap);
position: relative;
width: var(--sg30-board-width);
}

.sg30-cell {
border: 1px solid #cbd5e1;
border-radius: 12px;
padding: 8px;
background: #fff;
font-size: 12px;
position: relative;
}

.sg30-start { background: #d1fae5; }
.sg30-finish { background: #fee2e2; }
.sg30-task { background: #fff7ed; }

.sg30-cell-num {
font-weight: 700;
font-size: 16px;
}

.sg30-cell-star {
position: absolute;
top: 8px;
right: 8px;
color: #f59e0b;
font-weight: 700;
}

.sg30-token-layer {
position: absolute;
inset: 0;
display: grid;
grid-template-columns: repeat(6, 110px);
grid-template-rows: repeat(5, 110px);
gap: var(--sg30-gap);
pointer-events: none;
z-index: 3;
}

.sg30-token {
width: 16px;
height: 16px;
border-radius: 50%;
border: 2px solid rgba(0,0,0,.2);
place-self: center;
}

.sg30-token-p1 { transform: translate(-14px,-14px); }
.sg30-token-p2 { transform: translate(0,-14px); }
.sg30-token-p3 { transform: translate(14px,-14px); }
.sg30-token-p4 { transform: translate(-14px,0); }
.sg30-token-p5 { transform: translate(0,0); }
.sg30-token-p6 { transform: translate(14px,0); }
.sg30-token-p7 { transform: translate(0,14px); }

.sg30-pos-0 { display: none; }
.sg30-pos-1 { grid-area: 1 / 1; }
.sg30-pos-2 { grid-area: 1 / 2; }
.sg30-pos-3 { grid-area: 1 / 3; }
.sg30-pos-4 { grid-area: 1 / 4; }
.sg30-pos-5 { grid-area: 1 / 5; }
.sg30-pos-6 { grid-area: 1 / 6; }
.sg30-pos-7 { grid-area: 2 / 6; }
.sg30-pos-8 { grid-area: 3 / 6; }
.sg30-pos-9 { grid-area: 4 / 6; }
.sg30-pos-10 { grid-area: 5 / 6; }
.sg30-pos-11 { grid-area: 5 / 5; }
.sg30-pos-12 { grid-area: 5 / 4; }
.sg30-pos-13 { grid-area: 5 / 3; }
.sg30-pos-14 { grid-area: 5 / 2; }
.sg30-pos-15 { grid-area: 5 / 1; }
.sg30-pos-16 { grid-area: 4 / 1; }
.sg30-pos-17 { grid-area: 3 / 1; }
.sg30-pos-18 { grid-area: 2 / 1; }
.sg30-pos-19 { grid-area: 2 / 2; }
.sg30-pos-20 { grid-area: 2 / 3; }
.sg30-pos-21 { grid-area: 2 / 4; }
.sg30-pos-22 { grid-area: 2 / 5; }
.sg30-pos-23 { grid-area: 3 / 5; }
.sg30-pos-24 { grid-area: 4 / 5; }
.sg30-pos-25 { grid-area: 4 / 4; }
.sg30-pos-26 { grid-area: 4 / 3; }
.sg30-pos-27 { grid-area: 4 / 2; }
.sg30-pos-28 { grid-area: 3 / 2; }
.sg30-pos-29 { grid-area: 3 / 3; }
.sg30-pos-30 { grid-area: 3 / 4; }

.sg30-hidden {
display: none !important;
}

@media (max-width: 760px) {
.sg30-admin-grid {
grid-template-columns: 1fr;
}

.sg30-root {
width: 100%;
}

.sg30-board {
transform: scale(.9);
transform-origin: top left;
}

.sg30-board-wrap {
overflow-x: auto;
}
}
</style>

<div class="sg30-root" id="sg30-root">
<div class="sg30-layout">
<section class="sg30-panel" id="sg30-admin-panel">
<h1 class="sg30-title">Настольная игра: спираль из 30 ячеек</h1>
<p class="sg30-sub">
Администратор выставляет номера клеток, нажимает «Применить позиции», затем копирует готовый HTML всего игрового блока и вставляет его в пост при редактировании.
</p>

<div class="sg30-admin-grid">
<div class="sg30-admin-card">
<div class="sg30-admin-head"><span class="sg30-token-dot" style="background:red"></span> Игрок 1</div>
<label class="sg30-label" for="sg30-select-p1">Номер ячейки</label>
<select class="sg30-select" id="sg30-select-p1" data-token="sg30-token-p1"></select>
</div>

<div class="sg30-admin-card">
<div class="sg30-admin-head"><span class="sg30-token-dot" style="background:blue"></span> Игрок 2</div>
<label class="sg30-label" for="sg30-select-p2">Номер ячейки</label>
<select class="sg30-select" id="sg30-select-p2" data-token="sg30-token-p2"></select>
</div>

<div class="sg30-admin-card">
<div class="sg30-admin-head"><span class="sg30-token-dot" style="background:green"></span> Игрок 3</div>
<label class="sg30-label" for="sg30-select-p3">Номер ячейки</label>
<select class="sg30-select" id="sg30-select-p3" data-token="sg30-token-p3"></select>
</div>

<div class="sg30-admin-card">
<div class="sg30-admin-head"><span class="sg30-token-dot" style="background:orange"></span> Игрок 4</div>
<label class="sg30-label" for="sg30-select-p4">Номер ячейки</label>
<select class="sg30-select" id="sg30-select-p4" data-token="sg30-token-p4"></select>
</div>

<div class="sg30-admin-card">
<div class="sg30-admin-head"><span class="sg30-token-dot" style="background:purple"></span> Игрок 5</div>
<label class="sg30-label" for="sg30-select-p5">Номер ячейки</label>
<select class="sg30-select" id="sg30-select-p5" data-token="sg30-token-p5"></select>
</div>

<div class="sg30-admin-card">
<div class="sg30-admin-head"><span class="sg30-token-dot" style="background:brown"></span> Игрок 6</div>
<label class="sg30-label" for="sg30-select-p6">Номер ячейки</label>
<select class="sg30-select" id="sg30-select-p6" data-token="sg30-token-p6"></select>
</div>

<div class="sg30-admin-card">
<div class="sg30-admin-head"><span class="sg30-token-dot" style="background:black"></span> Игрок 7</div>
<label class="sg30-label" for="sg30-select-p7">Номер ячейки</label>
<select class="sg30-select" id="sg30-select-p7" data-token="sg30-token-p7"></select>
</div>
</div>

<div class="sg30-admin-actions">
<button class="sg30-button" id="sg30-apply" type="button">Применить позиции</button>
<button class="sg30-button sg30-button-secondary" id="sg30-reset" type="button">Сбросить</button>
<button class="sg30-button" id="sg30-copy-html" type="button">Копировать весь HTML поля</button>
</div>

<div class="sg30-help">
0 — игрок вне поля. 1–30 — номер клетки. Несколько игроков могут стоять в одной ячейке.
</div>

<div class="sg30-copy-wrap">
<h2 class="sg30-copy-title">Полный HTML игрового блока для вставки в пост</h2>
<textarea class="sg30-copy-box" id="sg30-copy-box" readonly></textarea>
</div>
</section>

<div class="sg30-token-layer" id="sg30-token-layer">
<div class="sg30-token sg30-token-p1 sg30-pos-0" style="background:red"></div>
<div class="sg30-token sg30-token-p2 sg30-pos-0" style="background:blue"></div>
<div class="sg30-token sg30-token-p3 sg30-pos-0" style="background:green"></div>
<div class="sg30-token sg30-token-p4 sg30-pos-4" style="background:orange"></div>
<div class="sg30-token sg30-token-p5 sg30-pos-4" style="background:purple"></div>
<div class="sg30-token sg30-token-p6 sg30-pos-0" style="background:brown"></div>
<div class="sg30-token sg30-token-p7 sg30-pos-6" style="background:black"></div>
</div>
</div>
</section>
</div>
</div>[/html]

Поделиться22026-03-17 15:59:00

Автор: сибирь
Сообщений: 913
Последний визит:
Вчера 22:41:35

[hideprofile]
[html]<style>
#board-game-app.zbgame {
background: #5b78f6;
border-radius: 24px;
padding: 20px;
font-family: Arial, Helvetica, sans-serif;
}

#board-game-app.zbgame,
#board-game-app.zbgame * {
box-sizing: border-box;
}

.zbgame__state-source {
display: none;
}

.zbgame__board {
display: grid;
grid-template-columns: repeat(6, minmax(90px, 1fr));
gap: 12px;
}

.zbgame__cell {
position: relative;
min-height: 140px;
background: #d9d9d9;
border-radius: 26px;
overflow: hidden;
}

.zbgame__cell::before {
content: "";
display: block;
padding-top: 100%;
}

.zbgame__num {
position: absolute;
top: 14px;
left: 16px;
z-index: 2;
font-size: 42px;
line-height: 1;
color: #9b9b9b;
}

.zbgame__tokens {
position: absolute;
left: 12px;
right: 12px;
bottom: 12px;
z-index: 3;
display: flex;
flex-wrap: wrap;
gap: 8px;
}

.zbgame__token {
width: 36px;
height: 36px;
border-radius: 999px;
border: 2px solid #fff;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 12px;
font-weight: bold;
box-shadow: 0 2px 8px rgba(0,0,0,.18);
}

.zbgame__token--selected {
box-shadow: 0 0 0 4px rgba(15,23,42,.15), 0 2px 8px rgba(0,0,0,.18);
}

.zbgame__burst {
position: absolute;
left: 50%;
top: 50%;
width: 108px;
height: 108px;
margin-left: -54px;
margin-top: -54px;
background: #5b78f6;
clip-path: polygon(50% 0%, 56% 28%, 68% 6%, 66% 34%, 82% 12%, 74% 40%, 96% 24%, 80% 50%, 100% 50%, 80% 60%, 96% 76%, 74% 60%, 82% 88%, 66% 66%, 68% 94%, 56% 72%, 50% 100%, 44% 72%, 32% 94%, 34% 66%, 18% 88%, 26% 60%, 4% 76%, 20% 50%, 0% 50%, 20% 40%, 4% 24%, 26% 40%, 18% 12%, 34% 34%, 32% 6%, 44% 28%);
}

.zbgame__burst span {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
white-space: nowrap;
font-size: 22px;
font-weight: 900;
text-transform: uppercase;
color: #000;
}

.zbgame__burst--start {
transform: rotate(-18deg) translate(-8px, 6px);
}

.zbgame__burst--finish {
transform: rotate(-12deg) translate(0, 12px);
}

.zbgame__admin {
margin-top: 24px;
background: rgba(255,255,255,.96);
border-radius: 28px;
padding: 20px;
}

.zbgame__admin.is-hidden {
display: none;
}

.zbgame__admin-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}

.zbgame__panel {
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 22px;
padding: 18px;
}

.zbgame__title {
margin-bottom: 12px;
font-size: 24px;
font-weight: bold;
color: #0f172a;
}

.zbgame__label {
display: block;
margin: 14px 0 8px;
font-size: 14px;
font-weight: bold;
color: #334155;
}

.zbgame__row {
display: flex;
gap: 8px;
}

.zbgame__input,
.zbgame__select,
.zbgame__textarea {
width: 100%;
min-height: 44px;
padding: 10px 12px;
border: 1px solid #dbe3ee;
border-radius: 16px;
background: #fff;
font-size: 14px;
}

.zbgame__textarea {
min-height: 120px;
resize: vertical;
}

.zbgame__btn {
min-height: 44px;
padding: 10px 14px;
border-radius: 16px;
border: none;
cursor: pointer;
font-weight: bold;
}

.zbgame__btn--dark {
background: #0f172a;
color: #fff;
}

.zbgame__btn--light {
width: 100%;
background: #fff;
color: #334155;
border: 1px solid #cbd5e1;
}

.zbgame__players-title {
margin: 20px 0 12px;
font-size: 12px;
text-transform: uppercase;
letter-spacing: .12em;
color: #64748b;
}

.zbgame__player-card {
display: flex;
justify-content: space-between;
gap: 10px;
padding: 14px;
border: 1px solid #e2e8f0;
border-radius: 16px;
background: #fff;
margin-bottom: 10px;
}

.zbgame__player-card--selected {
border-color: #0f172a;
background: #f8fafc;
}

.zbgame__player-left {
display: flex;
align-items: center;
gap: 10px;
}

.zbgame__player-dot {
width: 16px;
height: 16px;
border-radius: 999px;
}

.zbgame__player-name {
font-size: 14px;
font-weight: bold;
color: #0f172a;
}

.zbgame__player-meta,
.zbgame__player-label {
font-size: 12px;
color: #64748b;
}

.zbgame__player-position {
font-size: 18px;
font-weight: bold;
color: #0f172a;
text-align: right;
}

.zbgame__player-actions {
margin-top: 6px;
}

.zbgame__player-remove {
padding: 0;
border: none;
background: transparent;
color: #dc2626;
font-size: 12px;
cursor: pointer;
text-decoration: underline;
}

.zbgame__copy-status {
min-height: 44px;
display: flex;
align-items: center;
font-size: 13px;
color: #334155;
}

.zbgame__hint {
margin-top: 10px;
font-size: 12px;
color: #64748b;
}

@media (max-width: 1100px) {
.zbgame__board {
grid-template-columns: repeat(3, 1fr);
}

.zbgame__admin-grid {
grid-template-columns: 1fr;
}
}

@media (max-width: 640px) {
.zbgame__board {
grid-template-columns: repeat(2, 1fr);
}

.zbgame__row {
flex-direction: column;
}

.zbgame__num {
font-size: 34px;
}
}
</style>

<div id="board-game-app" class="zbgame">
<textarea id="zbgame-state-source" class="zbgame__state-source" hidden>{"players":[{"id":1,"name":"Игрок 1","position":"01","color":"#f43f5e"},{"id":2,"name":"Игрок 2","position":"01","color":"#22c55e"},{"id":3,"name":"Игрок 3","position":"01","color":"#0ea5e9"}],"selectedPlayerId":1}</textarea>

<div class="zbgame__board" id="zbgame-board">
<div class="zbgame__cell" data-cell="01"><div class="zbgame__num">01</div><div class="zbgame__burst zbgame__burst--start"><span>старт</span></div><div class="zbgame__tokens"></div></div>
<div class="zbgame__cell" data-cell="02"><div class="zbgame__num">02</div><div class="zbgame__tokens"></div></div>
<div class="zbgame__cell" data-cell="03"><div class="zbgame__num">03</div><div class="zbgame__tokens"></div></div>
<div class="zbgame__cell" data-cell="04"><div class="zbgame__num">04</div><div class="zbgame__tokens"></div></div>
<div class="zbgame__cell" data-cell="05"><div class="zbgame__num">05</div><div class="zbgame__tokens"></div></div>
<div class="zbgame__cell" data-cell="06"><div class="zbgame__num">06</div><div class="zbgame__tokens"></div></div>

<div class="zbgame__cell" data-cell="17"><div class="zbgame__num">17</div><div class="zbgame__tokens"></div></div>
<div class="zbgame__cell" data-cell="28"><div class="zbgame__num">28</div><div class="zbgame__tokens"></div></div>
<div class="zbgame__cell" data-cell="29"><div class="zbgame__num">29</div><div class="zbgame__tokens"></div></div>
<div class="zbgame__cell" data-cell="30"><div class="zbgame__num">30</div><div class="zbgame__burst zbgame__burst--finish"><span>финиш</span></div><div class="zbgame__tokens"></div></div>
<div class="zbgame__cell" data-cell="23"><div class="zbgame__num">23</div><div class="zbgame__tokens"></div></div>
<div class="zbgame__cell" data-cell="08"><div class="zbgame__num">08</div><div class="zbgame__tokens"></div></div>

<div id="zbgame-admin" class="zbgame__admin">
<div class="zbgame__admin-grid">
<div class="zbgame__panel">
<div class="zbgame__title">Игроки</div>

<label class="zbgame__label" for="zbgame-new-player">Добавить игрока</label>
<div class="zbgame__row">
<input id="zbgame-new-player" class="zbgame__input" type="text" placeholder="Например, Анна">
<button id="zbgame-add-player" class="zbgame__btn zbgame__btn--dark" type="button">Добавить</button>
</div>

<div class="zbgame__players-title">Состояние игроков</div>
<div id="zbgame-players-state"></div>
</div>

<label class="zbgame__label" for="zbgame-player-select">Выбрать игрока</label>
<select id="zbgame-player-select" class="zbgame__select"></select>

<label class="zbgame__label" for="zbgame-cell-select">Переместить на клетку</label>
<select id="zbgame-cell-select" class="zbgame__select"></select>

<label class="zbgame__label" for="zbgame-export">Код состояния</label>
<textarea id="zbgame-export" class="zbgame__textarea" readonly></textarea>

<div class="zbgame__row">
<button id="zbgame-copy-export" class="zbgame__btn zbgame__btn--dark" type="button">Скопировать код</button>
<div id="zbgame-copy-status" class="zbgame__copy-status"></div>
</div>

<div class="zbgame__hint">
После изменений скопируй код и замени им содержимое скрытого поля <code>#zbgame-state-source</code>.
</div>
</div>
</div>
</div>
</div>
[/html]

Страница: 1

Zion_test

Меню навигации

Пользовательские ссылки

Информация о пользователе

игра

Сообщений 1 страница 2 из 2

Поделиться12026-03-17 10:59:11

Поделиться22026-03-17 15:59:00