![](https://i.imgur.com/N5qM2vM.png" "победитель конкурса: лекси кортез")
11
- Подпись автора
♥️
поле чудес х rich bitch x капсула х капсула'23
«good morning, reasons why I drink.»
паззлы
Страница: 1
Сообщений 1 страница 2 из 2
Поделиться12025-11-24 22:01:44
Поделиться22025-11-24 22:14:01
Код:
<!--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', 'номер паззла', 'ID фрейма']
frames: [
['1', '1', '298b78d4cdee'],
['1', '2', '123456789abc'],
['1', '3', '987654321def'],
['1', '4', '555555555555'],
['1', '5', '666666666666'],
['puzzleGroup2', '6', '777777777777'],
['puzzleGroup2', '7', '888888888888'],
['puzzleGroup2', '8', '999999999999'],
['puzzleGroup2', '9', 'aaaaaaaaaaaa'],
['puzzleGroup2', '10', 'bbbbbbbbbbbb']
],
// Даты отображения групп в формате: ['puzzleGroupID', 'дата начала отображения', 'дата окончания']
startDates: [
['1', '2024-01-01', '2024-01-07'],
['puzzleGroup2', '2024-01-08', '2024-01-14']
]
};
// Функция для проверки, наступила ли дата
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, frameId) {
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';
// Генерация iframe с подставленным frameId
const iframeCode = `<iframe src="https://www.jigsawplanet.com/?rc=play&pid=${frameId}&view=iframe" style="width:100%;height:600px" frameborder="0" allowfullscreen></iframe>`;
frameContainer.innerHTML = iframeCode;
// Генерация ссылки с подставленным frameId
const puzzleLink = `https://www.jigsawplanet.com/?rc=play&pid=${frameId}`;
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, endDate) {
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)} по ${formatDate(endDate)}</span>
<span class="arrow">▼</span>
`;
const groupContent = document.createElement('div');
groupContent.className = 'group-content';
// Добавляем отдельные паззлы в группу
puzzles.forEach(([puzzleNumber, frameId]) => {
const puzzleItem = createPuzzleItem(puzzleNumber, frameId);
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, frameId]) => {
if (!groupedPuzzles[puzzleGroupID]) {
groupedPuzzles[puzzleGroupID] = [];
}
groupedPuzzles[puzzleGroupID].push([puzzleNumber, frameId]);
});
// Создаем группы паззлов
puzzleConfig.startDates.forEach(([puzzleGroupID, startDate, endDate]) => {
const puzzles = groupedPuzzles[puzzleGroupID] || [];
const groupElement = createPuzzleGroup(puzzleGroupID, puzzles, startDate, endDate);
container.appendChild(groupElement);
});
}
// Инициализация при загрузке страницы
document.addEventListener('DOMContentLoaded', initializePuzzles);
</script>- Подпись автора
♥️
поле чудес х rich bitch x капсула х капсула'23
«good morning, reasons why I drink.»
Страница: 1
