Нефритовая пыль |
Привет, Гость! Войдите или зарегистрируйтесь.
Вы здесь » Нефритовая пыль » Пользовательская » Тайные комнаты
[html]<link rel="stylesheet" href="https://kit-pro.fontawesome.com/releases/v6.1.2/css/pro.min.css">
<div class="guest-template-container">
<div class="guest-header">
<h1>Правила квестов</h1>
<p></p>
<p>★ Участие в квестах добровольное</p>
<p>★ Если застряли, кричите громко и вас услышат</p></div></div>[/html]
[html]
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Комнаты — карточки (флип на чистом CSS)</title>
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
html,body { height: 100%; }
body {
font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
background: linear-gradient(135deg,#667eea 0%,#764ba2 100%);
padding: 24px;
display: flex;
flex-direction: column;
align-items: center;
}
h1 {
color: #fff;
margin-bottom: 16px;
text-shadow: 0 2px 6px rgba(0,0,0,.35);
}
/* Сетка карточек */
.grid-container {
width: 95%;
max-width: 1200px;
display: grid;
gap: 12px;
grid-template-columns: repeat(6, 1fr);
background: rgba(255,255,255,0.04);
padding: 12px;
border-radius: 12px;
backdrop-filter: blur(6px);
}
/* Упаковка флипа: делает квадрат */
.flip-container {
width: 100%;
padding-top: 100%; /* квадрат */
position: relative;
perspective: 1000px;
outline: none; /* чтобы focus выглядел штатно в твох стилях; можно убрать */
}
/* Сам флип-элемент */
.flipper {
position: absolute;
inset: 0;
transition: transform 0.6s cubic-bezier(.4,0,.2,1);
transform-style: preserve-3d;
}
/* Вращаем на hover и на focus (чтобы была доступность через Tab и клик) */
.flip-container:hover .flipper,
.flip-container:focus .flipper {
transform: rotateY(180deg);
}
.front, .back {
position: absolute;
inset: 0;
backface-visibility: hidden;
border-radius: 12px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
padding: 8px;
box-shadow: 0 6px 18px rgba(0,0,0,.35);
}
/* Лицевая сторона — картинка (можно менять per-card inline) */
.front {
background: url('https://i.imgur.com/kv846si.jpeg') center/cover no-repeat;
background-color: #c9d4e5;
position: relative;
}
/* затемнение для читаемости текста */
.front::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.05) 100%);
}
.front-text {
position: relative;
z-index: 1;
color: #fff;
font-size: 16px;
font-weight: 700;
padding: 8px 12px;
border-radius: 8px;
background: rgba(0,0,0,0.35);
user-select: none;
}
/* Оборотная сторона */
.back {
transform: rotateY(180deg);
background: linear-gradient(180deg,#222 0%,#3a3a3a 100%);
color: #fff;
text-align: left;
padding: 14px;
gap: 6px;
display: flex;
flex-direction: column;
justify-content: center;
}
/* Текст на обороте должен быть копируемым */
.back, .back * {
-webkit-user-select: text;
-moz-user-select: text;
user-select: text;
-webkit-touch-callout: text;
}
.room-number {
font-size: 26px;
font-weight: 800;
line-height: 1;
margin-bottom: 6px;
cursor: text;
}
.quest-name {
font-size: 13px;
font-weight: 700;
color: #ffd966;
margin-bottom: 8px;
cursor: text;
}
.room-text {
font-size: 12px;
opacity: 0.9;
line-height: 1.4;
cursor: text;
}
/* адаптив */
@media (max-width: 1100px) {
.grid-container { grid-template-columns: repeat(5,1fr); }
}
@media (max-width: 900px) {
.grid-container { grid-template-columns: repeat(4,1fr); }
}
@media (max-width: 700px) {
.grid-container { grid-template-columns: repeat(3,1fr); }
}
@media (max-width: 480px) {
.grid-container { grid-template-columns: repeat(2,1fr); }
.room-number { font-size: 20px; }
.quest-name { font-size: 12px; }
}
</style>
</head>
<body>
<h1>Выберите комнату — квест</h1>
<div class="grid-container">
<!-- По содержанию — восстановлены карточки 1–36 (как было) -->
<div class="flip-container" tabindex="0">
<div class="flipper">
<div class="front"><div class="front-text">Комната</div></div>
<div class="back">
<div class="room-number">1</div>
<div class="quest-name">Тайна древнего замка</div>
<div class="room-text">Выделите этот текст, чтобы скопировать — краткое описание комнаты/квеста.</div>
</div>
</div>
</div>
<div class="flip-container" tabindex="0">
<div class="flipper">
<div class="front"><div class="front-text">Комната</div></div>
<div class="back">
<div class="room-number">2</div>
<div class="quest-name">Побег из лаборатории</div>
<div class="room-text">Выделите этот текст, чтобы скопировать — краткое описание комнаты/квеста.</div>
</div>
</div>
</div>
<div class="flip-container" tabindex="0">
<div class="flipper">
<div class="front"><div class="front-text">Комната</div></div>
<div class="back">
<div class="room-number">3</div>
<div class="quest-name">Загадка фараона</div>
<div class="room-text">Выделите этот текст, чтобы скопировать — краткое описание комнаты/квеста.</div>
</div>
</div>
</div>
<div class="flip-container" tabindex="0">
<div class="flipper">
<div class="front"><div class="front-text">Комната</div></div>
<div class="back">
<div class="room-number">4</div>
<div class="quest-name">Космическая одиссея</div>
<div class="room-text">Выделите этот текст, чтобы скопировать — краткое описание комнаты/квеста.</div>
</div>
</div>
</div>
<div class="flip-container" tabindex="0">
<div class="flipper">
<div class="front"><div class="front-text">Комната</div></div>
<div class="back">
<div class="room-number">5</div>
<div class="quest-name">Детективное агентство</div>
<div class="room-text">Выделите этот текст, чтобы скопировать — краткое описание комнаты/квеста.</div>
</div>
</div>
</div>
<div class="flip-container" tabindex="0">
<div class="flipper">
<div class="front"><div class="front-text">Комната</div></div>
<div class="back">
<div class="room-number">6</div>
<div class="quest-name">Пиратские сокровища</div>
<div class="room-text">Выделите этот текст, чтобы скопировать — краткое описание комнаты/квеста.</div>
</div>
</div>
</div>
<div class="flip-container" tabindex="0">
<div class="flipper">
<div class="front"><div class="front-text">Комната</div></div>
<div class="back">
<div class="room-number">7</div>
<div class="quest-name">Школа магии</div>
<div class="room-text">Выделите этот текст, чтобы скопировать — краткое описание комнаты/квеста.</div>
</div>
</div>
</div>
<div class="flip-container" tabindex="0">
<div class="flipper">
<div class="front"><div class="front-text">Комната</div></div>
<div class="back">
<div class="room-number">8</div>
<div class="quest-name">Зомби апокалипсис</div>
<div class="room-text">Выделите этот текст, чтобы скопировать — краткое описание комнаты/квеста.</div>
</div>
</div>
</div>
<div class="flip-container" tabindex="0">
<div class="flipper">
<div class="front"><div class="front-text">Комната</div></div>
<div class="back">
<div class="room-number">9</div>
<div class="quest-name">Банковское ограбление</div>
<div class="room-text">Выделите этот текст, чтобы скопировать — краткое описание комнаты/квеста.</div>
</div>
</div>
</div>
<div class="flip-container" tabindex="0">
<div class="flipper">
<div class="front"><div class="front-text">Комната</div></div>
<div class="back">
<div class="room-number">10</div>
<div class="quest-name">Подводная лодка</div>
<div class="room-text">Выделите этот текст, чтобы скопировать — краткое описание комнаты/квеста.</div>
</div>
</div>
</div>
<div class="flip-container" tabindex="0">
<div class="flipper">
<div class="front"><div class="front-text">Комната</div></div>
<div class="back">
<div class="room-number">11</div>
<div class="quest-name">Дом с привидениями</div>
<div class="room-text">Выделите этот текст, чтобы скопировать — краткое описание комнаты/квеста.</div>
</div>
</div>
</div>
<div class="flip-container" tabindex="0">
<div class="flipper">
<div class="front"><div class="front-text">Комната</div></div>
<div class="back">
<div class="room-number">12</div>
<div class="quest-name">Секретный бункер</div>
<div class="room-text">Выделите этот текст, чтобы скопировать — краткое описание комнаты/квеста.</div>
</div>
</div>
</div>
<div class="flip-container" tabindex="0">
<div class="flipper">
<div class="front"><div class="front-text">Комната</div></div>
<div class="back">
<div class="room-number">13</div>
<div class="quest-name">Машина времени</div>
<div class="room-text">Выделите этот текст, чтобы скопировать — краткое описание комнаты/квеста.</div>
</div>
</div>
</div>
<div class="flip-container" tabindex="0">
<div class="flipper">
<div class="front"><div class="front-text">Комната</div></div>
<div class="back">
<div class="room-number">14</div>
<div class="quest-name">Цирк ужасов</div>
<div class="room-text">Выделите этот текст, чтобы скопировать — краткое описание комнаты/квеста.</div>
</div>
</div>
</div>
<div class="flip-container" tabindex="0">
<div class="flipper">
<div class="front"><div class="front-text">Комната</div></div>
<div class="back">
<div class="room-number">15</div>
<div class="quest-name">Алиса в Стране чудес</div>
<div class="room-text">Выделите этот текст, чтобы скопировать — краткое описание комнаты/квеста.</div>
</div>
</div>
</div>
<div class="flip-container" tabindex="0">
<div class="flipper">
<div class="front"><div class="front-text">Комната</div></div>
<div class="back">
<div class="room-number">16</div>
<div class="quest-name">Шерлок Холмс</div>
<div class="room-text">Выделите этот текст, чтобы скопировать — краткое описание комнаты/квеста.</div>
</div>
</div>
</div>
<div class="flip-container" tabindex="0">
<div class="flipper">
<div class="front"><div class="front-text">Комната</div></div>
<div class="back">
<div class="room-number">17</div>
<div class="quest-name">Остров сокровищ</div>
<div class="room-text">Выделите этот текст, чтобы скопировать — краткое описание комнаты/квеста.</div>
</div>
</div>
</div>
<div class="flip-container" tabindex="0">
<div class="flipper">
<div class="front"><div class="front-text">Комната</div></div>
<div class="back">
<div class="room-number">18</div>
<div class="quest-name">Викторианский особняк</div>
<div class="room-text">Выделите этот текст, чтобы скопировать — краткое описание комнаты/квеста.</div>
</div>
</div>
</div>
<div class="flip-container" tabindex="0">
<div class="flipper">
<div class="front"><div class="front-text">Комната</div></div>
<div class="back">
<div class="room-number">19</div>
<div class="quest-name">Затерянный храм</div>
<div class="room-text">Выделите этот текст, чтобы скопировать — краткое описание комнаты/квеста.</div>
</div>
</div>
</div>
<div class="flip-container" tabindex="0">
<div class="flipper">
<div class="front"><div class="front-text">Комната</div></div>
<div class="back">
<div class="room-number">20</div>
<div class="quest-name">Кабинет алхимика</div>
<div class="room-text">Выделите этот текст, чтобы скопировать — краткое описание комнаты/квеста.</div>
</div>
</div>
</div>
<div class="flip-container" tabindex="0">
<div class="flipper">
<div class="front"><div class="front-text">Комната</div></div>
<div class="back">
<div class="room-number">21</div>
<div class="quest-name">Тюремный блок</div>
<div class="room-text">Выделите этот текст, чтобы скопировать — краткое описание комнаты/квеста.</div>
</div>
</div>
</div>
<div class="flip-container" tabindex="0">
<div class="flipper">
<div class="front"><div class="front-text">Комната</div></div>
<div class="back">
<div class="room-number">22</div>
<div class="quest-name">Арт-галерея</div>
<div class="room-text">Выделите этот текст, чтобы скопировать — краткое описание комнаты/квеста.</div>
</div>
</div>
</div>
<div class="flip-container" tabindex="0">
<div class="flipper">
<div class="front"><div class="front-text">Комната</div></div>
<div class="back">
<div class="room-number">23</div>
<div class="quest-name">Казино Рояль</div>
<div class="room-text">Выделите этот текст, чтобы скопировать — краткое описание комнаты/квеста.</div>
</div>
</div>
</div>
<div class="flip-container" tabindex="0">
<div class="flipper">
<div class="front"><div class="front-text">Комната</div></div>
<div class="back">
<div class="room-number">24</div>
<div class="quest-name">Северный полюс</div>
<div class="room-text">Выделите этот текст, чтобы скопировать — краткое описание комнаты/квеста.</div>
</div>
</div>
</div>
<div class="flip-container" tabindex="0">
<div class="flipper">
<div class="front"><div class="front-text">Комната</div></div>
<div class="back">
<div class="room-number">25</div>
<div class="quest-name">Дикий Запад</div>
<div class="room-text">Выделите этот текст, чтобы скопировать — краткое описание комнаты/квеста.</div>
</div>
</div>
</div>
<div class="flip-container" tabindex="0">
<div class="flipper">
<div class="front"><div class="front-text">Комната</div></div>
<div class="back">
<div class="room-number">26</div>
<div class="quest-name">Японский храм</div>
<div class="room-text">Выделите этот текст, чтобы скопировать — краткое описание комнаты/квеста.</div>
</div>
</div>
</div>
<div class="flip-container" tabindex="0">
<div class="flipper">
<div class="front"><div class="front-text">Комната</div></div>
<div class="back">
<div class="room-number">27</div>
<div class="quest-name">Подземелье дракона</div>
<div class="room-text">Выделите этот текст, чтобы скопировать — краткое описание комнаты/квеста.</div>
</div>
</div>
</div>
<div class="flip-container" tabindex="0">
<div class="flipper">
<div class="front"><div class="front-text">Комната</div></div>
<div class="back">
<div class="room-number">28</div>
<div class="quest-name">Киберпанк 2077</div>
<div class="room-text">Выделите этот текст, чтобы скопировать — краткое описание комнаты/квеста.</div>
</div>
</div>
</div>
<div class="flip-container" tabindex="0">
<div class="flipper">
<div class="front"><div class="front-text">Комната</div></div>
<div class="back">
<div class="room-number">29</div>
<div class="quest-name">Средневековый квест</div>
<div class="room-text">Выделите этот текст, чтобы скопировать — краткое описание комнаты/квеста.</div>
</div>
</div>
</div>
<div class="flip-container" tabindex="0">
<div class="flipper">
<div class="front"><div class="front-text">Комната</div></div>
<div class="back">
<div class="room-number">30</div>
<div class="quest-name">Амазонские джунгли</div>
<div class="room-text">Выделите этот текст, чтобы скопировать — краткое описание комнаты/квеста.</div>
</div>
</div>
</div>
<div class="flip-container" tabindex="0">
<div class="flipper">
<div class="front"><div class="front-text">Комната</div></div>
<div class="back">
<div class="room-number">31</div>
<div class="quest-name">Станция Марс</div>
<div class="room-text">Выделите этот текст, чтобы скопировать — краткое описание комнаты/квеста.</div>
</div>
</div>
</div>
<div class="flip-container" tabindex="0">
<div class="flipper">
<div class="front"><div class="front-text">Комната</div></div>
<div class="back">
<div class="room-number">32</div>
<div class="quest-name">Библиотека тайн</div>
<div class="room-text">Выделите этот текст, чтобы скопировать — краткое описание комнаты/квеста.</div>
</div>
</div>
</div>
<div class="flip-container" tabindex="0">
<div class="flipper">
<div class="front"><div class="front-text">Комната</div></div>
<div class="back">
<div class="room-number">33</div>
<div class="quest-name">Фабрика игрушек</div>
<div class="room-text">Выделите этот текст, чтобы скопировать — краткое описание комнаты/квеста.</div>
</div>
</div>
</div>
<div class="flip-container" tabindex="0">
<div class="flipper">
<div class="front"><div class="front-text">Комната</div></div>
<div class="back">
<div class="room-number">34</div>
<div class="quest-name">Музей восковых фигур</div>
<div class="room-text">Выделите этот текст, чтобы скопировать — краткое описание комнаты/квеста.</div>
</div>
</div>
</div>
<div class="flip-container" tabindex="0">
<div class="flipper">
<div class="front"><div class="front-text">Комната</div></div>
<div class="back">
<div class="room-number">35</div>
<div class="quest-name">Ледяная пещера</div>
<div class="room-text">Выделите этот текст, чтобы скопировать — краткое описание комнаты/квеста.</div>
</div>
</div>
</div>
<div class="flip-container" tabindex="0">
<div class="flipper">
<div class="front"><div class="front-text">Комната</div></div>
<div class="back">
<div class="room-number">36</div>
<div class="quest-name">Золотая лихорадка</div>
<div class="room-text">Выделите этот текст, чтобы скопировать — краткое описание комнаты/квеста.</div>
</div>
</div>
</div>
</div>
<!-- Конец .grid-container -->
</body>
</html>
[/html]
Вы здесь » Нефритовая пыль » Пользовательская » Тайные комнаты