![](https://i.imgur.com/N5qM2vM.png" "победитель конкурса: лекси кортез")
11
- Подпись автора
♥️
поле чудес х rich bitch x капсула х капсула'23
«good morning, reasons why I drink.»
тесты
Страница: 1
Сообщений 1 страница 2 из 2
Поделиться12025-11-24 01:26:24
Поделиться22025-11-24 01:26:33
Код:
<!--HTML--><style>
.puzzle-container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
.puzzle-group {
margin-bottom: 30px;
border: 1px solid #ddd;
border-radius: 8px;
overflow: hidden;
}
.group-header {
background-color: #f5f5f5;
padding: 15px;
cursor: pointer;
border-bottom: 1px solid #ddd;
font-weight: bold;
display: flex;
justify-content: space-between;
align-items: center;
}
.group-header:hover {
background-color: #e9e9e9;
}
.group-content {
display: none;
padding: 20px;
background-color: white;
}
.group-content.active {
display: block;
}
.puzzle-item {
margin-bottom: 15px;
border: 1px solid #ccc;
border-radius: 4px;
overflow: hidden;
}
.puzzle-item:last-child {
margin-bottom: 0;
}
.puzzle-header {
background-color: #f8f8f8;
padding: 12px 15px;
cursor: pointer;
border-bottom: 1px solid #eee;
font-weight: bold;
display: flex;
justify-content: space-between;
align-items: center;
}
.puzzle-header:hover {
background-color: #f0f0f0;
}
.puzzle-content {
display: none;
background-color: white;
}
.puzzle-content.active {
display: block;
}
.puzzle-frame-container {
position: relative;
}
.puzzle-link {
padding: 10px 15px;
text-align: center;
background-color: #efefef;
color: black;
text-decoration: none;
display: block;
border: none;
cursor: pointer;
font-size: 14px;
transition: background-color 0.3s;
}
.puzzle-link:hover {
background-color: #fff;
color: black;
text-decoration: none;
}
.date-indicator {
font-size: 14px;
color: #666;
font-weight: normal;
}
.hidden {
display: none !important;
}
.arrow {
transition: transform 0.3s ease;
}
.arrow.rotated {
transform: rotate(180deg);
}
</style>
</head>
<body>
<div class="puzzle-container" id="puzzleContainer">
<!-- Группы паззлов будут добавляться здесь автоматически -->
</div>
<script>
// Конфигурация паззлов
const puzzleConfig = {
// Список фреймов в формате: ['puzzleGroupID', 'номер паззла', 'код фрейма', 'ссылка на паззл']
frames: [
['1', '1', '<iframe src="https://www.jigsawplanet.com/?rc=play&pid=298b78d4cdee&view=iframe" style="width:100%;height:600px" frameborder="0" allowfullscreen></iframe>', 'https://www.jigsawplanet.com/?rc=play&pid=298b78d4cdee'],
['1', '2', '<iframe src="https://www.jigsawplanet.com/?rc=play&pid=123456789abc&view=iframe" style="width:100%;height:600px" frameborder="0" allowfullscreen></iframe>', 'https://www.jigsawplanet.com/?rc=play&pid=123456789abc'],
['1', '3', '<iframe src="https://www.jigsawplanet.com/?rc=play&pid=987654321def&view=iframe" style="width:100%;height:600px" frameborder="0" allowfullscreen></iframe>', 'https://www.jigsawplanet.com/?rc=play&pid=987654321def'],
['1', '4', '<iframe src="https://www.jigsawplanet.com/?rc=play&pid=555555555555&view=iframe" style="width:100%;height:600px" frameborder="0" allowfullscreen></iframe>', 'https://www.jigsawplanet.com/?rc=play&pid=555555555555'],
['1', '5', '<iframe src="https://www.jigsawplanet.com/?rc=play&pid=666666666666&view=iframe" style="width:100%;height:600px" frameborder="0" allowfullscreen></iframe>', 'https://www.jigsawplanet.com/?rc=play&pid=666666666666'],
['2', '6', '<iframe src="https://www.jigsawplanet.com/?rc=play&pid=777777777777&view=iframe" style="width:100%;height:600px" frameborder="0" allowfullscreen></iframe>', 'https://www.jigsawplanet.com/?rc=play&pid=777777777777'],
['2', '7', '<iframe src="https://www.jigsawplanet.com/?rc=play&pid=888888888888&view=iframe" style="width:100%;height:600px" frameborder="0" allowfullscreen></iframe>', 'https://www.jigsawplanet.com/?rc=play&pid=888888888888'],
['2', '8', '<iframe src="https://www.jigsawplanet.com/?rc=play&pid=999999999999&view=iframe" style="width:100%;height:600px" frameborder="0" allowfullscreen></iframe>', 'https://www.jigsawplanet.com/?rc=play&pid=999999999999'],
['2', '9', '<iframe src="https://www.jigsawplanet.com/?rc=play&pid=aaaaaaaaaaaa&view=iframe" style="width:100%;height:600px" frameborder="0" allowfullscreen></iframe>', 'https://www.jigsawplanet.com/?rc=play&pid=aaaaaaaaaaaa'],
['2', '10', '<iframe src="https://www.jigsawplanet.com/?rc=play&pid=bbbbbbbbbbbb&view=iframe" style="width:100%;height:600px" frameborder="0" allowfullscreen></iframe>', 'https://www.jigsawplanet.com/?rc=play&pid=bbbbbbbbbbbb']
],
// Даты отображения групп в формате: ['puzzleGroupID', 'дата начала отображения']
startDates: [
['1', '2024-01-01'],
['2', '2024-01-08']
]
};
// Функция для проверки, наступила ли дата
function isDateReached(targetDate) {
const today = new Date();
const target = new Date(targetDate);
today.setHours(0, 0, 0, 0);
target.setHours(0, 0, 0, 0);
return today >= target;
}
// Функция для форматирования даты
function formatDate(dateString) {
const date = new Date(dateString);
return date.toLocaleDateString('ru-RU', {
year: 'numeric',
month: 'long',
day: 'numeric'
});
}
// Функция для создания HTML структуры отдельного паззла
function createPuzzleItem(puzzleNumber, frameCode, puzzleLink) {
const puzzleItem = document.createElement('div');
puzzleItem.className = 'puzzle-item';
const puzzleHeader = document.createElement('div');
puzzleHeader.className = 'puzzle-header';
puzzleHeader.innerHTML = `
Паззл #${puzzleNumber}
<span class="arrow">▼</span>
`;
const puzzleContent = document.createElement('div');
puzzleContent.className = 'puzzle-content';
const frameContainer = document.createElement('div');
frameContainer.className = 'puzzle-frame-container';
frameContainer.innerHTML = frameCode;
const linkButton = document.createElement('a');
linkButton.className = 'puzzle-link';
linkButton.href = puzzleLink;
linkButton.target = '_blank';
linkButton.textContent = 'Открыть в новой вкладке';
puzzleContent.appendChild(frameContainer);
puzzleContent.appendChild(linkButton);
// Добавляем обработчик клика для спойлера паззла
puzzleHeader.addEventListener('click', () => {
puzzleContent.classList.toggle('active');
const arrow = puzzleHeader.querySelector('.arrow');
arrow.classList.toggle('rotated');
});
puzzleItem.appendChild(puzzleHeader);
puzzleItem.appendChild(puzzleContent);
return puzzleItem;
}
// Функция для создания HTML структуры группы паззлов
function createPuzzleGroup(puzzleGroupID, puzzles, startDate) {
const isActive = isDateReached(startDate);
const groupElement = document.createElement('div');
groupElement.className = `puzzle-group ${isActive ? '' : 'hidden'}`;
groupElement.id = `group-${puzzleGroupID}`;
const groupHeader = document.createElement('div');
groupHeader.className = 'group-header';
groupHeader.innerHTML = `
Неделя #${puzzleGroupID}
<span class="date-indicator">Доступна с: ${formatDate(startDate)}</span>
<span class="arrow">▼</span>
`;
const groupContent = document.createElement('div');
groupContent.className = 'group-content';
// Добавляем отдельные паззлы в группу
puzzles.forEach(([puzzleNumber, frameCode, puzzleLink]) => {
const puzzleItem = createPuzzleItem(puzzleNumber, frameCode, puzzleLink);
groupContent.appendChild(puzzleItem);
});
// Добавляем обработчик клика для спойлера группы
if (isActive) {
groupHeader.addEventListener('click', () => {
groupContent.classList.toggle('active');
const arrow = groupHeader.querySelector('.arrow');
arrow.classList.toggle('rotated');
});
}
groupElement.appendChild(groupHeader);
groupElement.appendChild(groupContent);
return groupElement;
}
// Функция для инициализации паззлов
function initializePuzzles() {
const container = document.getElementById('puzzleContainer');
// Группируем фреймы по puzzleGroupID
const groupedPuzzles = {};
puzzleConfig.frames.forEach(([puzzleGroupID, puzzleNumber, frameCode, puzzleLink]) => {
if (!groupedPuzzles[puzzleGroupID]) {
groupedPuzzles[puzzleGroupID] = [];
}
groupedPuzzles[puzzleGroupID].push([puzzleNumber, frameCode, puzzleLink]);
});
// Создаем группы паззлов
puzzleConfig.startDates.forEach(([puzzleGroupID, startDate]) => {
const puzzles = groupedPuzzles[puzzleGroupID] || [];
const groupElement = createPuzzleGroup(puzzleGroupID, puzzles, startDate);
container.appendChild(groupElement);
});
}
// Инициализация при загрузке страницы
document.addEventListener('DOMContentLoaded', initializePuzzles);
</script>- Подпись автора
♥️
поле чудес х rich bitch x капсула х капсула'23
«good morning, reasons why I drink.»
Страница: 1
