Нефритовая пыль |
Привет, Гость! Войдите или зарегистрируйтесь.
Вы здесь » Нефритовая пыль » Пользовательская » Тайные комнаты
[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.0">
<title>Таблица с поворачивающимися картинками</title>
<style>
* {
box-sizing: border-box;
}
body {
font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
padding: 20px;
margin: 0;
}
h1 {
text-align: center;
color: white;
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
margin-bottom: 10px;
}
.stats {
text-align: center;
margin: 20px;
font-size: 18px;
color: white;
font-weight: 500;
}
/* Основные стили таблицы */
table {
width: 95%;
max-width: 1000px;
margin: 20px auto;
border-collapse: separate;
border-spacing: 8px;
background: rgba(255, 255, 255, 0.1);
padding: 10px;
border-radius: 12px;
backdrop-filter: blur(10px);
}
td {
width: 140px;
height: 140px;
position: relative;
perspective: 1000px;
padding: 0;
}
/* Контейнер для поворачивающихся элементов */
.flip-container {
position: relative;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: transform 0.6s cubic-bezier(0.4, 0.0, 0.2, 1);
cursor: pointer;
}
/* При наведении на неиспользованную карточку - легкий поворот */
td:not(.used):hover .flip-container {
transform: rotateY(15deg);
}
/* При клике карточка полностью переворачивается */
td.flipped .flip-container {
transform: rotateY(180deg);
}
/* Использованная карточка остается перевернутой и затемненной */
td.used .flip-container {
transform: rotateY(180deg);
pointer-events: none;
}
td.used .back {
filter: brightness(0.4);
}
td.used::after {
content: "✓";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 48px;
color: #4CAF50;
font-weight: bold;
z-index: 10;
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
animation: checkmark 0.3s ease-out;
}
@keyframes checkmark {
from {
transform: translate(-50%, -50%) scale(0);
}
to {
transform: translate(-50%, -50%) scale(1);
}
}
/* Стороны карточки */
.front, .back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}
/* Передняя сторона с картинкой */
.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.3) 0%, rgba(0,0,0,0.1) 100%);
border-radius: 12px;
}
.front-text {
position: relative;
color: white;
font-size: 18px;
font-weight: bold;
text-shadow: 2px 2px 4px rgba(0,0,0,0.7);
background: rgba(0,0,0,0.5);
padding: 8px 16px;
border-radius: 8px;
}
/* Задняя сторона */
.back {
background: linear-gradient(135deg, #222 0%, #444 100%);
color: white;
transform: rotateY(180deg);
border: 2px solid rgba(255,255,255,0.1);
}
.room-number {
font-size: 32px;
font-weight: bold;
margin-bottom: 10px;
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}
.room-text {
font-size: 14px;
opacity: 0.8;
}
/* Область вывода */
#send-area {
width: 95%;
max-width: 1000px;
margin: 30px auto;
padding: 25px;
background: white;
border-radius: 16px;
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
min-height: 150px;
}
#send-area h3 {
margin-top: 0;
color: #333;
border-bottom: 3px solid #667eea;
padding-bottom: 10px;
font-size: 20px;
}
#selected-rooms {
margin: 15px 0;
min-height: 50px;
}
.selected-item {
display: inline-block;
margin: 5px;
padding: 10px 20px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border-radius: 25px;
font-size: 14px;
font-weight: 500;
animation: slideIn 0.3s ease;
box-shadow: 0 2px 8px rgba(102, 126, 234, 0.4);
}
@keyframes slideIn {
from {
opacity: 0;
transform: translateY(-10px) scale(0.9);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.clear-button {
margin-top: 15px;
padding: 12px 30px;
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
color: white;
border: none;
border-radius: 25px;
cursor: pointer;
font-size: 16px;
font-weight: 600;
transition: all 0.3s;
box-shadow: 0 4px 15px rgba(240, 87, 108, 0.4);
}
.clear-button:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(240, 87, 108, 0.5);
}
.clear-button:active {
transform: translateY(0);
}
/* Адаптивность */
@media (max-width: 768px) {
td {
width: 100px;
height: 100px;
}
.room-number {
font-size: 24px;
}
table {
border-spacing: 4px;
}
}
</style>
</head>
<body>
<h1>�� Выберите комнаты</h1>
<div class="stats">
Выбрано комнат: <span id="selected-count">0</span> из 36
</div>
<table>
<tr>
<td data-room="1">
<div class="flip-container" onclick="selectRoom(this, 1)">
<div class="front">
<div class="front-text">Комната</div>
</div>
<div class="back">
<div class="room-number">№1</div>
<div class="room-text">Нажмите для выбора</div>
</div>
</div>
</td>
<td data-room="2">
<div class="flip-container" onclick="selectRoom(this, 2)">
<div class="front">
<div class="front-text">Комната</div>
</div>
<div class="back">
<div class="room-number">№2</div>
<div class="room-text">Нажмите для выбора</div>
</div>
</div>
</td>
<td data-room="3">
<div class="flip-container" onclick="selectRoom(this, 3)">
<div class="front">
<div class="front-text">Комната</div>
</div>
<div class="back">
<div class="room-number">№3</div>
<div class="room-text">Нажмите для выбора</div>
</div>
</div>
</td>
<td data-room="4">
<div class="flip-container" onclick="selectRoom(this, 4)">
<div class="front">
<div class="front-text">Комната</div>
</div>
<div class="back">
<div class="room-number">№4</div>
<div class="room-text">Нажмите для выбора</div>
</div>
</div>
</td>
<td data-room="5">
<div class="flip-container" onclick="selectRoom(this, 5)">
<div class="front">
<div class="front-text">Комната</div>
</div>
<div class="back">
<div class="room-number">№5</div>
<div class="room-text">Нажмите для выбора</div>
</div>
</div>
</td>
<td data-room="6">
<div class="flip-container" onclick="selectRoom(this, 6)">
<div class="front">
<div class="front-text">Комната</div>
</div>
<div class="back">
<div class="room-number">№6</div>
<div class="room-text">Нажмите для выбора</div>
</div>
</div>
</td>
</tr>
<tr>
<td data-room="7">
<div class="flip-container" onclick="selectRoom(this, 7)">
<div class="front">
<div class="front-text">Комната</div>
</div>
<div class="back">
<div class="room-number">№7</div>
<div class="room-text">Нажмите для выбора</div>
</div>
</div>
</td>
<td data-room="8">
<div class="flip-container" onclick="selectRoom(this, 8)">
<div class="front">
<div class="front-text">Комната</div>
</div>
<div class="back">
<div class="room-number">№8</div>
<div class="room-text">Нажмите для выбора</div>
</div>
</div>
</td>
<td data-room="9">
<div class="flip-container" onclick="selectRoom(this, 9)">
<div class="front">
<div class="front-text">Комната</div>
</div>
<div class="back">
<div class="room-number">№9</div>
<div class="room-text">Нажмите для выбора</div>
</div>
</div>
</td>
<td data-room="10">
<div class="flip-container" onclick="selectRoom(this, 10)">
<div class="front">
<div class="front-text">Комната</div>
</div>
<div class="back">
<div class="room-number">№10</div>
<div class="room-text">Нажмите для выбора</div>
</div>
</div>
</td>
<td data-room="11">
<div class="flip-container" onclick="selectRoom(this, 11)">
<div class="front">
<div class="front-text">Комната</div>
</div>
<div class="back">
<div class="room-number">№11</div>
<div class="room-text">Нажмите для выбора</div>
</div>
</div>
</td>
<td data-room="12">
<div class="flip-container" onclick="selectRoom(this, 12)">
<div class="front">
<div class="front-text">Комната</div>
</div>
<div class="back">
<div class="room-number">№12</div>
<div class="room-text">Нажмите для выбора</div>
</div>
</div>
</td>
</tr>
<tr>
<td data-room="13">
<div class="flip-container" onclick="selectRoom(this, 13)">
<div class="front">
<div class="front-text">Комната</div>
</div>
<div class="back">
<div class="room-number">№13</div>
<div class="room-text">Нажмите для выбора</div>
</div>
</div>
</td>
<td data-room="14">
<div class="flip-container" onclick="selectRoom(this, 14)">
<div class="front">
<div class="front-text">Комната</div>
</div>
<div class="back">
<div class="room-number">№14</div>
<div class="room-text">Нажмите для выбора</div>
</div>
</div>
</td>
<td data-room="15">
<div class="flip-container" onclick="selectRoom(this, 15)">
<div class="front">
<div class="front-text">Комната</div>
</div>
<div class="back">
<div class="room-number">№15</div>
<div class="room-text">Нажмите для выбора</div>
</div>
</div>
</td>
<td data-room="16">
<div class="flip-container" onclick="selectRoom(this, 16)">
<div class="front">
<div class="front-text">Комната</div>
</div>
<div class="back">
<div class="room-number">№16</div>
<div class="room-text">Нажмите для выбора</div>
</div>
</div>
</td>
<td data-room="17">
<div class="flip-container" onclick="selectRoom(this, 17)">
<div class="front">
<div class="front-text">Комната</div>
</div>
<div class="back">
<div class="room-number">№17</div>
<div class="room-text">Нажмите для выбора</div>
</div>
</div>
</td>
<td data-room="18">
<div class="flip-container" onclick="selectRoom(this, 18)">
<div class="front">
<div class="front-text">Комната</div>
</div>
<div class="back">
<div class="room-number">№18</div>
<div class="room-text">Нажмите для выбора</div>
</div>
</div>
</td>
</tr>
<tr>
<td data-room="19">
<div class="flip-container" onclick="selectRoom(this, 19)">
<div class="front">
<div class="front-text">Комната</div>
</div>
<div class="back">
<div class="room-number">№19</div>
<div class="room-text">Нажмите для выбора</div>
</div>
</div>
</td>
<td data-room="20">
<div class="flip-container" onclick="selectRoom(this, 20)">
<div class="front">
<div class="front-text">Комната</div>
</div>
<div class="back">
<div class="room-number">№20</div>
<div class="room-text">Нажмите для выбора</div>
</div>
</div>
</td>
<td data-room="21">
<div class="flip-container" onclick="selectRoom(this, 21)">
<div class="front">
<div class="front-text">Комната</div>
</div>
<div class="back">
<div class="room-number">№21</div>
<div class="room-text">Нажмите для выбора</div>
</div>
</div>
</td>
<td data-room="22">
<div class="flip-container" onclick="selectRoom(this, 22)">
<div class="front">
<div class="front-text">Комната</div>
</div>
<div class="back">
<div class="room-number">№22</div>
<div class="room-text">Нажмите для выбора</div>
</div>
</div>
</td>
<td data-room="23">
<div class="flip-container" onclick="selectRoom(this, 23)">
<div class="front">
<div class="front-text">Комната</div>
</div>
<div class="back">
<div class="room-number">№23</div>
<div class="room-text">Нажмите для выбора</div>
</div>
</div>
</td>
<td data-room="24">
<div class="flip-container" onclick="selectRoom(this, 24)">
<div class="front">
<div class="front-text">Комната</div>
</div>
<div class="back">
<div class="room-number">№24</div>
<div class="room-text">Нажмите для выбора</div>
</div>
</div>
</td>
</tr>
<tr>
<td data-room="25">
<div class="flip-container" onclick="selectRoom(this, 25)">
<div class="front">
<div class="front-text">Комната</div>
</div>
<div class="back">
<div class="room-number">№25</div>
<div class="room-text">Нажмите для выбора</div>
</div>
</div>
</td>
<td data-room="26">
<div class="flip-container" onclick="selectRoom(this, 26)">
<div class="front">
<div class="front-text">Комната</div>
</div>
<div class="back">
<div class="room-number">№26</div>
<div class="room-text">Нажмите для выбора</div>
</div>
</div>
</td>
<td data-room="27">
<div class="flip-container" onclick="selectRoom(this, 27)">
<div class="front">
<div class="front-text">Комната</div>
</div>
<div class="back">
<div class="room-number">№27</div>
<div class="room-text">Нажмите для выбора</div>
</div>
</div>
</td>
<td data-room="28">
<div class="flip-container" onclick="selectRoom(this, 28)">
<div class="front">
<div class="front-text">Комната</div>
</div>
<div class="back">
<div class="room-number">№28</div>
<div class="room-text">Нажмите для выбора</div>
</div>
</div>
</td>
<td data-room="29">
<div class="flip-container" onclick="selectRoom(this, 29)">
<div class="front">
<div class="front-text">Комната</div>
</div>
<div class="back">
<div class="room-number">№29</div>
<div class="room-text">Нажмите для выбора</div>
</div>
</div>
</td>
<td data-room="30">
<div class="flip-container" onclick="selectRoom(this, 30)">
<div class="front">
<div class="front-text">Комната</div>
</div>
<div class="back">
<div class="room-number">№30</div>
<div class="room-text">Нажмите для выбора</div>
</div>
</div>
</td>
</tr>
<tr>
<td data-room="31">
<div class="flip-container" onclick="selectRoom(this, 31)">
<div class="front">
<div class="front-text">Комната</div>
</div>
<div class="back">
<div class="room-number">№31</div>
<div class="room-text">Нажмите для выбора</div>
</div>
</div>
</td>
<td data-room="32">
<div class="flip-container" onclick="selectRoom(this, 32)">
<div class="front">
<div class="front-text">Комната</div>
</div>
<div class="back">
<div class="room-number">№32</div>
<div class="room-text">Нажмите для выбора</div>
</div>
</div>
</td>
<td data-room="33">
<div class="flip-container" onclick="selectRoom(this, 33)">
<div class="front">
<div class="front-text">Комната</div>
</div>
<div class="back">
<div class="room-number">№33</div>
<div class="room-text">Нажмите для выбора</div>
</div>
</div>
</td>
<td data-room="34">
<div class="flip-container" onclick="selectRoom(this, 34)">
<div class="front">
<div class="front-text">Комната</div>
</div>
<div class="back">
<div class="room-number">№34</div>
<div class="room-text">Нажмите для выбора</div>
</div>
</div>
</td>
<td data-room="35">
<div class="flip-container" onclick="selectRoom(this, 35)">
<div class="front">
<div class="front-text">Комната</div>
</div>
<div class="back">
<div class="room-number">№35</div>
<div class="room-text">Нажмите для выбора</div>
</div>
</div>
</td>
<td data-room="36">
<div class="flip-container" onclick="selectRoom(this, 36)">
<div class="front">
<div class="front-text">Комната</div>
</div>
<div class="back">
<div class="room-number">№36</div>
<div class="room-text">Нажмите для выбора</div>
</div>
</div>
</td>
</tr>
</table>
<div id="send-area">
<h3>�� Выбранные комнаты:</h3>
<div id="selected-rooms"></div>
<button class="clear-button" onclick="clearAll()">��️ Очистить все</button>
</div>
<script>
// Хранилище выбранных комнат
let selectedRooms = [];
function selectRoom(element, roomNumber) {
const td = element.closest('td');
// Проверяем, не была ли комната уже выбрана
if (td.classList.contains('used')) {
return;
}
// Сначала переворачиваем карточку
td.classList.add('flipped');
// Через небольшую задержку помечаем как использованную
setTimeout(() => {
td.classList.add('used');
}, 600);
// Добавляем в массив выбранных комнат
if (!selectedRooms.includes(roomNumber)) {
selectedRooms.push(roomNumber);
updateDisplay(roomNumber);
}
}
function updateDisplay(roomNumber) {
const selectedRoomsDiv = document.getElementById('selected-rooms');
const selectedCount = document.getElementById('selected-count');
// Создаем элемент для отображения выбранной комнаты
const roomElement = document.createElement('span');
roomElement.className = 'selected-item';
roomElement.innerHTML = `�� Комната номер ${roomNumber}`;
roomElement.setAttribute('data-room-item', roomNumber);
selectedRoomsDiv.appendChild(roomElement);
// Обновляем счетчик
selectedCount.textContent = selectedRooms.length;
}
function clearAll() {
// Очищаем массив
selectedRooms = [];
// Очищаем отображение
document.getElementById('selected-rooms').innerHTML = '';
document.getElementById('selected-count').textContent = '0';
// Сбрасываем все карточки
document.querySelectorAll('td').forEach(td => {
td.classList.remove('used', 'flipped');
});
}
// Добавляем поддержку клавиатуры
document.addEventListener('DOMContentLoaded', function() {
const containers = document.querySelectorAll('.flip-container');
containers.forEach((container, index) => {
container.setAttribute('tabindex', '0');
container.setAttribute('role', 'button');
container.setAttribute('aria-label', `Комната ${index + 1}`);
container.addEventListener('keydown', function(e) {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
const roomNumber = parseInt(container.closest('td').getAttribute('data-room'));
selectRoom(container, roomNumber);
}
});
});
});
</script>
</body>
</html>
[/html]
Вы здесь » Нефритовая пыль » Пользовательская » Тайные комнаты