Stamina fati nos ligabunt et sine spe in terram proicient.
О юная душа, ты забрела в город грёз! Отдохни перед долгой дорогой и наберись знаний, они тебе пригодятся.
Флуд [00] Мы развели костёр
Сообщений 31 страница 40 из 40
Поделиться12024-04-13 20:17:49
- Администратор
- Сообщений: 70
Поделиться312025-05-25 22:35:41
- Администратор
- Сообщений: 70
Судоку блэт
[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>
.bleach-sudoku-container {
all: initial;
font-family: 'Yu Gothic', 'Meiryo', 'MS Gothic', 'Segoe UI', sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
background: linear-gradient(135deg, #1a1a2e 0%, #2d1b69 50%, #0f3460 100%);
color: #ffffff;
padding: 20px;
box-sizing: border-box;
position: relative;
overflow: hidden;
}.bleach-sudoku-container::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image:
radial-gradient(circle at 20% 80%, rgba(219, 112, 147, 0.2) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, rgba(255, 182, 193, 0.1) 0%, transparent 50%),
radial-gradient(circle at 50% 50%, rgba(186, 85, 211, 0.1) 0%, transparent 70%);
pointer-events: none;
}.bleach-sudoku-title {
all: initial;
font-family: 'Yu Gothic', 'Meiryo', 'MS Gothic', 'Segoe UI', sans-serif;
font-size: 2.8rem;
font-weight: 300;
color: #ffffff;
text-shadow: 0 0 15px rgba(219, 112, 147, 0.8), 0 0 30px rgba(186, 85, 211, 0.4);
margin-bottom: 15px;
letter-spacing: 3px;
z-index: 10;
position: relative;
text-align: center;
}.bleach-sudoku-subtitle {
all: initial;
font-family: 'Yu Gothic', 'Meiryo', 'MS Gothic', 'Segoe UI', sans-serif;
font-size: 1rem;
color: rgba(255, 182, 193, 0.8);
margin-bottom: 25px;
text-align: center;
letter-spacing: 1px;
z-index: 10;
position: relative;
}.bleach-sudoku-board {
all: initial;
display: grid;
grid-template-columns: repeat(9, 52px);
grid-template-rows: repeat(9, 52px);
gap: 1px;
background: #2d1b69;
border: 6px solid #2d1b69;
box-shadow:
0 0 40px rgba(219, 112, 147, 0.4),
inset 0 0 30px rgba(0, 0, 0, 0.4);
z-index: 10;
position: relative;
margin-bottom: 25px;
}.bleach-sudoku-cell {
all: initial;
width: 52px;
height: 52px;
background: rgba(26, 26, 46, 0.9);
border: 1px solid rgba(219, 112, 147, 0.2);
display: flex;
align-items: center;
justify-content: center;
font-family: 'Yu Gothic', 'Meiryo', 'MS Gothic', 'Segoe UI', sans-serif;
font-size: 1.6rem;
font-weight: 400;
color: #ffffff;
cursor: pointer;
transition: all 0.3s ease;
box-sizing: border-box;
position: relative;
}.bleach-sudoku-cell:hover {
background: rgba(219, 112, 147, 0.15);
box-shadow: 0 0 12px rgba(219, 112, 147, 0.4);
}.bleach-sudoku-cell.bleach-given {
background: rgba(186, 85, 211, 0.25);
color: #ffb6c1;
text-shadow: 0 0 8px rgba(255, 182, 193, 0.6);
cursor: default;
}.bleach-sudoku-cell.bleach-selected {
background: rgba(255, 182, 193, 0.3);
box-shadow: 0 0 20px rgba(255, 182, 193, 0.7);
border: 2px solid #ffb6c1;
}.bleach-sudoku-cell.bleach-error {
background: rgba(220, 20, 60, 0.4);
animation: bleach-error-pulse 0.6s ease-in-out;
}.bleach-sudoku-cell.bleach-hint {
background: rgba(50, 205, 50, 0.3);
animation: bleach-hint-glow 1s ease-in-out;
}.bleach-sudoku-cell.bleach-highlight-row,
.bleach-sudoku-cell.bleach-highlight-col,
.bleach-sudoku-cell.bleach-highlight-box {
background: rgba(219, 112, 147, 0.1);
}.bleach-sudoku-cell.bleach-highlight-duplicate {
background: rgba(255, 165, 0, 0.3);
box-shadow: 0 0 8px rgba(255, 165, 0, 0.5);
}/* Толстые границы для 3x3 блоков */
.bleach-sudoku-cell:nth-child(3n):not(:nth-child(9n)) {
border-right: 3px solid #2d1b69;
}.bleach-sudoku-cell:nth-child(6n):not(:nth-child(9n)) {
border-right: 3px solid #2d1b69;
}.bleach-sudoku-cell:nth-child(n+19):nth-child(-n+27) {
border-bottom: 3px solid #2d1b69;
}.bleach-sudoku-cell:nth-child(n+46):nth-child(-n+54) {
border-bottom: 3px solid #2d1b69;
}@keyframes bleach-error-pulse {
0%, 100% { transform: scale(1); box-shadow: 0 0 15px rgba(220, 20, 60, 0.8); }
50% { transform: scale(1.08); box-shadow: 0 0 25px rgba(220, 20, 60, 1); }
}@keyframes bleach-hint-glow {
0%, 100% { box-shadow: 0 0 10px rgba(50, 205, 50, 0.6); }
50% { box-shadow: 0 0 25px rgba(50, 205, 50, 1); }
}.bleach-sudoku-controls {
all: initial;
display: flex;
gap: 15px;
margin-bottom: 20px;
z-index: 10;
position: relative;
flex-wrap: wrap;
justify-content: center;
}.bleach-sudoku-btn {
all: initial;
font-family: 'Yu Gothic', 'Meiryo', 'MS Gothic', 'Segoe UI', sans-serif;
background: linear-gradient(45deg, #2d1b69, #ba55d3);
color: #ffffff;
border: none;
padding: 12px 24px;
border-radius: 30px;
cursor: pointer;
font-size: 0.95rem;
font-weight: 400;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(186, 85, 211, 0.3);
letter-spacing: 0.5px;
}.bleach-sudoku-btn:hover:not(:disabled) {
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(186, 85, 211, 0.5);
}.bleach-sudoku-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
background: linear-gradient(45deg, #666, #888);
}.bleach-sudoku-info {
all: initial;
font-family: 'Yu Gothic', 'Meiryo', 'MS Gothic', 'Segoe UI', sans-serif;
display: flex;
justify-content: space-between;
align-items: center;
width: 500px;
max-width: 90vw;
color: rgba(255, 255, 255, 0.9);
z-index: 10;
position: relative;
margin-bottom: 15px;
}.bleach-sudoku-timer, .bleach-sudoku-hint-timer {
all: initial;
font-family: 'Yu Gothic', 'Meiryo', 'MS Gothic', 'Segoe UI', sans-serif;
font-size: 1.3rem;
color: #ffb6c1;
font-weight: 400;
text-shadow: 0 0 8px rgba(255, 182, 193, 0.6);
}.bleach-sudoku-controls-info {
all: initial;
font-family: 'Yu Gothic', 'Meiryo', 'MS Gothic', 'Segoe UI', sans-serif;
text-align: center;
color: rgba(255, 255, 255, 0.7);
font-size: 0.9rem;
z-index: 10;
position: relative;
line-height: 1.4;
}.bleach-victory {
all: initial;
font-family: 'Yu Gothic', 'Meiryo', 'MS Gothic', 'Segoe UI', sans-serif;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(26, 26, 46, 0.95);
color: #ffffff;
padding: 50px;
border-radius: 20px;
text-align: center;
border: 4px solid #ba55d3;
box-shadow: 0 0 60px rgba(186, 85, 211, 0.8);
z-index: 100;
display: none;
}.bleach-victory h2 {
all: initial;
font-family: 'Yu Gothic', 'Meiryo', 'MS Gothic', 'Segoe UI', sans-serif;
font-size: 2.2rem;
color: #ffb6c1;
margin-bottom: 20px;
text-shadow: 0 0 15px rgba(255, 182, 193, 0.8);
font-weight: 300;
letter-spacing: 2px;
}.bleach-victory p {
all: initial;
font-family: 'Yu Gothic', 'Meiryo', 'MS Gothic', 'Segoe UI', sans-serif;
color: rgba(255, 255, 255, 0.9);
margin-bottom: 10px;
font-size: 1.1rem;
line-height: 1.5;
}
</style>
</head>
<body>
<div class="bleach-sudoku-container">
<h1 class="bleach-sudoku-title">数独 禅</h1>
<div class="bleach-sudoku-subtitle">Судоку в японском стиле</div>
<div class="bleach-sudoku-info">
<div>Время: <span class="bleach-sudoku-timer" id="bleachTimer">00:00</span></div>
<div>Подсказка: <span class="bleach-sudoku-hint-timer" id="bleachHintTimer">готова</span></div>
</div>
<div class="bleach-sudoku-board" id="bleachSudokuBoard"></div>
<div class="bleach-sudoku-controls">
<button class="bleach-sudoku-btn" onclick="bleachNewGame()">Новая игра</button>
<button class="bleach-sudoku-btn" id="bleachHintBtn" onclick="bleachGetHint()">Подсказка</button>
<button class="bleach-sudoku-btn" onclick="bleachSolve()">Показать решение</button>
<button class="bleach-sudoku-btn" onclick="bleachClear()">Очистить</button>
</div>
<div class="bleach-sudoku-controls-info">
Нажмите на ячейку и введите цифру 1-9<br>
0 или Delete для очистки • Автоподсветка рядов и столбцов
</div><div class="bleach-victory" id="bleachVictory">
<h2>完璧！ Совершенство!</h2>
<p>Вы достигли гармонии числ!</p>
<p>Время: <span id="bleachFinalTimer"></span></p>
<button class="bleach-sudoku-btn" onclick="bleachNewGame(); document.getElementById('bleachVictory').style.display='none';">Новый вызов</button>
</div>
</div><script>
(function() {
let bleachSudokuGrid = [];
let bleachSolution = [];
let bleachSelectedCell = null;
let bleachStartTime = Date.now();
let bleachTimerInterval = null;
let bleachHintCooldown = 0;
let bleachHintInterval = null;
let bleachOriginalPuzzle = [];const bleachBoard = document.getElementById('bleachSudokuBoard');
const bleachTimerElement = document.getElementById('bleachTimer');
const bleachHintTimerElement = document.getElementById('bleachHintTimer');
const bleachHintBtn = document.getElementById('bleachHintBtn');
const bleachVictoryElement = document.getElementById('bleachVictory');function bleachInitGrid() {
bleachSudokuGrid = Array(9).fill().map(() => Array(9).fill(0));
bleachSolution = Array(9).fill().map(() => Array(9).fill(0));
bleachOriginalPuzzle = Array(9).fill().map(() => Array(9).fill(0));
}function bleachIsValid(grid, row, col, num) {
// Check row
for (let x = 0; x < 9; x++) {
if (grid[row][x] === num) return false;
}
// Check column
for (let x = 0; x < 9; x++) {
if (grid[x][col] === num) return false;
}
// Check 3x3 box
const boxRow = Math.floor(row / 3) * 3;
const boxCol = Math.floor(col / 3) * 3;
for (let i = 0; i < 3; i++) {
for (let j = 0; j < 3; j++) {
if (grid[boxRow + i][boxCol + j] === num) return false;
}
}
return true;
}function bleachSolveSudoku(grid) {
for (let row = 0; row < 9; row++) {
for (let col = 0; col < 9; col++) {
if (grid[row][col] === 0) {
for (let num = 1; num <= 9; num++) {
if (bleachIsValid(grid, row, col, num)) {
grid[row][col] = num;
if (bleachSolveSudoku(grid)) {
return true;
}
grid[row][col] = 0;
}
}
return false;
}
}
}
return true;
}function bleachGeneratePuzzle() {
bleachInitGrid();
// Fill diagonal 3x3 boxes first
for (let box = 0; box < 9; box += 3) {
const nums = [1,2,3,4,5,6,7,8,9];
for (let i = 0; i < 3; i++) {
for (let j = 0; j < 3; j++) {
const randomIndex = Math.floor(Math.random() * nums.length);
bleachSolution[box + i][box + j] = nums[randomIndex];
nums.splice(randomIndex, 1);
}
}
}
// Solve the rest
bleachSolveSudoku(bleachSolution);
// Create puzzle by removing numbers
for (let row = 0; row < 9; row++) {
for (let col = 0; col < 9; col++) {
bleachSudokuGrid[row][col] = bleachSolution[row][col];
bleachOriginalPuzzle[row][col] = bleachSolution[row][col];
}
}
// Remove 40-50 numbers for medium difficulty
const cellsToRemove = 45;
let removed = 0;
while (removed < cellsToRemove) {
const row = Math.floor(Math.random() * 9);
const col = Math.floor(Math.random() * 9);
if (bleachSudokuGrid[row][col] !== 0) {
bleachSudokuGrid[row][col] = 0;
bleachOriginalPuzzle[row][col] = 0;
removed++;
}
}
}function bleachHighlightRelated(selectedRow, selectedCol) {
const cells = bleachBoard.children;
// Clear previous highlights
for (let cell of cells) {
cell.classList.remove('bleach-highlight-row', 'bleach-highlight-col', 'bleach-highlight-box', 'bleach-highlight-duplicate');
}
if (selectedRow === -1 || selectedCol === -1) return;
const selectedValue = bleachSudokuGrid[selectedRow][selectedCol];
for (let row = 0; row < 9; row++) {
for (let col = 0; col < 9; col++) {
const index = row * 9 + col;
const cell = cells[index];
// Highlight row
if (row === selectedRow) {
cell.classList.add('bleach-highlight-row');
}
// Highlight column
if (col === selectedCol) {
cell.classList.add('bleach-highlight-col');
}
// Highlight 3x3 box
const boxRow = Math.floor(selectedRow / 3);
const boxCol = Math.floor(selectedCol / 3);
const cellBoxRow = Math.floor(row / 3);
const cellBoxCol = Math.floor(col / 3);
if (boxRow === cellBoxRow && boxCol === cellBoxCol) {
cell.classList.add('bleach-highlight-box');
}
// Highlight duplicates
if (selectedValue !== 0 && bleachSudokuGrid[row][col] === selectedValue && !(row === selectedRow && col === selectedCol)) {
cell.classList.add('bleach-highlight-duplicate');
}
}
}
}function bleachRenderBoard() {
bleachBoard.innerHTML = '';
for (let row = 0; row < 9; row++) {
for (let col = 0; col < 9; col++) {
const cell = document.createElement('div');
cell.className = 'bleach-sudoku-cell';
cell.textContent = bleachSudokuGrid[row][col] || '';
if (bleachOriginalPuzzle[row][col] !== 0) {
cell.classList.add('bleach-given');
}
cell.addEventListener('click', () => {
if (bleachSelectedCell) {
bleachSelectedCell.classList.remove('bleach-selected');
}
bleachSelectedCell = cell;
cell.classList.add('bleach-selected');
bleachSelectedCell.dataset.row = row;
bleachSelectedCell.dataset.col = col;
bleachHighlightRelated(row, col);
});
bleachBoard.appendChild(cell);
}
}
}function bleachUpdateTimer() {
const elapsed = Math.floor((Date.now() - bleachStartTime) / 1000);
const minutes = Math.floor(elapsed / 60).toString().padStart(2, '0');
const seconds = (elapsed % 60).toString().padStart(2, '0');
bleachTimerElement.textContent = `${minutes}:${seconds}`;
}function bleachUpdateHintTimer() {
if (bleachHintCooldown > 0) {
bleachHintCooldown--;
bleachHintTimerElement.textContent = `${bleachHintCooldown}с`;
bleachHintBtn.disabled = true;
} else {
bleachHintTimerElement.textContent = 'готова';
bleachHintBtn.disabled = false;
}
}function bleachCheckWin() {
for (let row = 0; row < 9; row++) {
for (let col = 0; col < 9; col++) {
if (bleachSudokuGrid[row][col] !== bleachSolution[row][col]) {
return false;
}
}
}
clearInterval(bleachTimerInterval);
clearInterval(bleachHintInterval);
document.getElementById('bleachFinalTimer').textContent = bleachTimerElement.textContent;
bleachVictoryElement.style.display = 'block';
return true;
}function bleachHandleKeyPress(e) {
if (!bleachSelectedCell) return;
const row = parseInt(bleachSelectedCell.dataset.row);
const col = parseInt(bleachSelectedCell.dataset.col);
// Don't modify given numbers
if (bleachOriginalPuzzle[row][col] !== 0) {
return;
}
const key = e.key;
if (key >= '1' && key <= '9') {
const num = parseInt(key);
if (bleachIsValid(bleachSudokuGrid, row, col, num)) {
bleachSudokuGrid[row][col] = num;
bleachSelectedCell.textContent = num;
bleachSelectedCell.classList.remove('bleach-error');
bleachHighlightRelated(row, col);
bleachCheckWin();
} else {
bleachSelectedCell.classList.add('bleach-error');
setTimeout(() => {
bleachSelectedCell.classList.remove('bleach-error');
}, 600);
}
} else if (key === '0' || key === 'Delete' || key === 'Backspace') {
bleachSudokuGrid[row][col] = 0;
bleachSelectedCell.textContent = '';
bleachSelectedCell.classList.remove('bleach-error');
bleachHighlightRelated(row, col);
}
}window.bleachNewGame = function() {
bleachGeneratePuzzle();
bleachRenderBoard();
bleachStartTime = Date.now();
bleachHintCooldown = 0;
clearInterval(bleachTimerInterval);
clearInterval(bleachHintInterval);
bleachTimerInterval = setInterval(bleachUpdateTimer, 1000);
bleachHintInterval = setInterval(bleachUpdateHintTimer, 1000);
bleachSelectedCell = null;
bleachHighlightRelated(-1, -1);
bleachUpdateHintTimer();
};window.bleachGetHint = function() {
if (bleachHintCooldown > 0) return;
// Find empty cells
const emptyCells = [];
for (let row = 0; row < 9; row++) {
for (let col = 0; col < 9; col++) {
if (bleachSudokuGrid[row][col] === 0) {
emptyCells.push({row, col});
}
}
}
if (emptyCells.length === 0) return;
// Pick random empty cell and fill it
const randomCell = emptyCells[Math.floor(Math.random() * emptyCells.length)];
const {row, col} = randomCell;
bleachSudokuGrid[row][col] = bleachSolution[row][col];
// Update display
const cellIndex = row * 9 + col;
const cellElement = bleachBoard.children[cellIndex];
cellElement.textContent = bleachSolution[row][col];
cellElement.classList.add('bleach-hint');
setTimeout(() => {
cellElement.classList.remove('bleach-hint');
}, 1000);
// Start cooldown
bleachHintCooldown = 60;
bleachUpdateHintTimer();
bleachCheckWin();
};window.bleachSolve = function() {
for (let row = 0; row < 9; row++) {
for (let col = 0; col < 9; col++) {
bleachSudokuGrid[row][col] = bleachSolution[row][col];
}
}
bleachRenderBoard();
bleachCheckWin();
};window.bleachClear = function() {
for (let row = 0; row < 9; row++) {
for (let col = 0; col < 9; col++) {
if (bleachOriginalPuzzle[row][col] === 0) {
bleachSudokuGrid[row][col] = 0;
}
}
}
bleachRenderBoard();
if (bleachSelectedCell) {
const row = parseInt(bleachSelectedCell.dataset.row);
const col = parseInt(bleachSelectedCell.dataset.col);
bleachHighlightRelated(row, col);
}
};document.addEventListener('keydown', bleachHandleKeyPress);
// Initialize game
bleachNewGame();
})();
</script>
</body>
</html>[/html]
Поделиться322025-06-03 00:16:41
- Администратор
- Сообщений: 70
2,0
[html]<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Судоку 2.0</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap" rel="stylesheet">
<style>
body {
margin: 0;
overflow: hidden; /* Prevent scrollbar due to pseudo-elements */
}.bleach-sudoku-container {
all: initial;
font-family: 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
background: linear-gradient(135deg, #1a1a2e 0%, #2d1b69 50%, #0f3460 100%);
color: #ffffff;
padding: 20px;
box-sizing: border-box;
position: relative;
overflow: hidden;
}.bleach-sudoku-container::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image:
radial-gradient(circle at 20% 80%, rgba(219, 112, 147, 0.2) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, rgba(255, 182, 193, 0.1) 0%, transparent 50%),
radial-gradient(circle at 50% 50%, rgba(186, 85, 211, 0.1) 0%, transparent 70%);
pointer-events: none;
}.bleach-sudoku-title {
all: initial;
font-family: 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
font-size: 2.8rem;
font-weight: 700; /* Bolder for title */
color: #ffffff;
text-shadow: 0 0 15px rgba(219, 112, 147, 0.8), 0 0 30px rgba(186, 85, 211, 0.4);
margin-bottom: 15px;
letter-spacing: 3px;
z-index: 10;
position: relative;
text-align: center;
}.bleach-sudoku-subtitle {
all: initial;
font-family: 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
font-size: 1rem;
color: rgba(255, 182, 193, 0.8);
margin-bottom: 25px;
text-align: center;
letter-spacing: 1px;
z-index: 10;
position: relative;
}.bleach-sudoku-board {
all: initial;
display: grid;
grid-template-columns: repeat(9, 52px);
grid-template-rows: repeat(9, 52px);
gap: 1px;
background: #2d1b69;
border: 6px solid #2d1b69;
box-shadow:
0 0 40px rgba(219, 112, 147, 0.4),
inset 0 0 30px rgba(0, 0, 0, 0.4);
z-index: 10;
position: relative;
margin-bottom: 25px;
}.bleach-sudoku-cell {
all: initial;
width: 52px;
height: 52px;
background: rgba(26, 26, 46, 0.9);
border: 1px solid rgba(219, 112, 147, 0.2);
display: flex;
align-items: center;
justify-content: center;
font-family: 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
font-size: 1.6rem;
font-weight: 400;
color: #ffffff;
cursor: pointer;
transition: all 0.3s ease;
box-sizing: border-box;
position: relative;
}.bleach-sudoku-cell:hover {
background: rgba(219, 112, 147, 0.15);
box-shadow: 0 0 12px rgba(219, 112, 147, 0.4);
}.bleach-sudoku-cell.bleach-given {
background: rgba(186, 85, 211, 0.25);
color: #ffb6c1;
text-shadow: 0 0 8px rgba(255, 182, 193, 0.6);
cursor: default;
}.bleach-sudoku-cell.bleach-selected {
background: rgba(255, 182, 193, 0.3);
box-shadow: 0 0 20px rgba(255, 182, 193, 0.7);
border: 2px solid #ffb6c1;
}.bleach-sudoku-cell.bleach-error {
background: rgba(220, 20, 60, 0.4);
animation: bleach-error-pulse 0.6s ease-in-out;
}.bleach-sudoku-cell.bleach-hint {
background: rgba(50, 205, 50, 0.3);
animation: bleach-hint-glow 1s ease-in-out;
}.bleach-sudoku-cell.bleach-highlight-row,
.bleach-sudoku-cell.bleach-highlight-col,
.bleach-sudoku-cell.bleach-highlight-box {
background: rgba(219, 112, 147, 0.1);
}.bleach-sudoku-cell.bleach-highlight-duplicate {
background: rgba(255, 165, 0, 0.3);
box-shadow: 0 0 8px rgba(255, 165, 0, 0.5);
}/* Толстые границы для 3x3 блоков */
.bleach-sudoku-cell:nth-child(3n):not(:nth-child(9n)) {
border-right: 3px solid #2d1b69;
}.bleach-sudoku-cell:nth-child(n+19):nth-child(-n+27),
.bleach-sudoku-cell:nth-child(n+46):nth-child(-n+54) {
border-bottom: 3px solid #2d1b69;
}@keyframes bleach-error-pulse {
0%, 100% { transform: scale(1); box-shadow: 0 0 15px rgba(220, 20, 60, 0.8); }
50% { transform: scale(1.08); box-shadow: 0 0 25px rgba(220, 20, 60, 1); }
}@keyframes bleach-hint-glow {
0%, 100% { box-shadow: 0 0 10px rgba(50, 205, 50, 0.6); }
50% { box-shadow: 0 0 25px rgba(50, 205, 50, 1); }
}.bleach-sudoku-controls {
all: initial;
display: flex;
gap: 15px;
margin-bottom: 20px;
z-index: 10;
position: relative;
flex-wrap: wrap;
justify-content: center;
}.bleach-sudoku-btn {
all: initial;
font-family: 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
background: linear-gradient(45deg, #2d1b69, #ba55d3);
color: #ffffff;
border: none;
padding: 12px 24px;
border-radius: 30px;
cursor: pointer;
font-size: 0.95rem;
font-weight: 400;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(186, 85, 211, 0.3);
letter-spacing: 0.5px;
}.bleach-sudoku-btn:hover:not(:disabled) {
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(186, 85, 211, 0.5);
}.bleach-sudoku-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
background: linear-gradient(45deg, #666, #888);
}.bleach-sudoku-info {
all: initial;
font-family: 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
display: flex;
justify-content: space-between;
align-items: center;
width: 500px;
max-width: 90vw;
color: rgba(255, 255, 255, 0.9);
z-index: 10;
position: relative;
margin-bottom: 15px;
}.bleach-sudoku-timer, .bleach-sudoku-hint-timer {
all: initial;
font-family: 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
font-size: 1.3rem;
color: #ffb6c1;
font-weight: 400;
text-shadow: 0 0 8px rgba(255, 182, 193, 0.6);
}.bleach-sudoku-controls-info {
all: initial;
font-family: 'Roboto', 'Oxygen', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
text-align: center;
color: rgba(255, 255, 255, 0.7);
font-size: 0.9rem;
z-index: 10;
position: relative;
line-height: 1.4;
}.bleach-victory {
all: initial;
font-family: 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(26, 26, 46, 0.95);
color: #ffffff;
padding: 50px;
border-radius: 20px;
text-align: center;
border: 4px solid #ba55d3;
box-shadow: 0 0 60px rgba(186, 85, 211, 0.8);
z-index: 100;
display: none;
}.bleach-victory h2 {
all: initial;
font-family: 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
font-size: 2.2rem;
color: #ffb6c1;
margin-bottom: 20px;
text-shadow: 0 0 15px rgba(255, 182, 193, 0.8);
font-weight: 300;
letter-spacing: 2px;
}.bleach-victory p {
all: initial;
font-family: 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
color: rgba(255, 255, 255, 0.9);
margin-bottom: 10px;
font-size: 1.1rem;
line-height: 1.5;
}.bleach-copyright {
all: initial;
font-family: 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
font-size: 0.8rem;
color: rgba(255, 255, 255, 0.5);
margin-top: 20px;
z-index: 10;
position: relative;
}
</style>
</head>
<body>
<div class="bleach-sudoku-container">
<h1 class="bleach-sudoku-title">Судоку 2.0</h1>
<div class="bleach-sudoku-subtitle">Примите вызов чисел!</div>
<div class="bleach-sudoku-info">
<div>Время: <span class="bleach-sudoku-timer" id="bleachTimer">00:00</span></div>
<div>Подсказка: <span class="bleach-sudoku-hint-timer" id="bleachHintTimer">готова</span></div>
</div>
<div class="bleach-sudoku-board" id="bleachSudokuBoard"></div>
<div class="bleach-sudoku-controls">
<button class="bleach-sudoku-btn" onclick="bleachNewGame()">Новая игра</button>
<button class="bleach-sudoku-btn" id="bleachHintBtn" onclick="bleachGetHint()">Подсказка</button>
<button class="bleach-sudoku-btn" onclick="bleachSolve()">Показать решение</button>
<button class="bleach-sudoku-btn" onclick="bleachClear()">Очистить</button>
</div>
<div class="bleach-sudoku-controls-info">
Нажмите на ячейку и введите цифру 1-9<br>
0 или Delete для очистки • Автоподсветка рядов и столбцов
</div><div class="bleach-victory" id="bleachVictory">
<h2>完璧！ Совершенство!</h2>
<p>Вы достигли гармонии чисел!</p>
<p>Время: <span id="bleachFinalTimer"></span></p>
<button class="bleach-sudoku-btn" onclick="bleachNewGame(); document.getElementById('bleachVictory').style.display='none';">Новый вызов</button>
</div>
<div class="bleach-copyright">(c) made by Zero_Chan 2025</div>
</div><script>
(function() {
let bleachSudokuGrid = [];
let bleachSolution = [];
let bleachSelectedCell = null;
let bleachStartTime = Date.now();
let bleachTimerInterval = null;
let bleachHintCooldown = 0;
let bleachHintInterval = null;
let bleachOriginalPuzzle = [];const bleachBoard = document.getElementById('bleachSudokuBoard');
const bleachTimerElement = document.getElementById('bleachTimer');
const bleachHintTimerElement = document.getElementById('bleachHintTimer');
const bleachHintBtn = document.getElementById('bleachHintBtn');
const bleachVictoryElement = document.getElementById('bleachVictory');function bleachInitGrid() {
bleachSudokuGrid = Array(9).fill().map(() => Array(9).fill(0));
bleachSolution = Array(9).fill().map(() => Array(9).fill(0));
bleachOriginalPuzzle = Array(9).fill().map(() => Array(9).fill(0));
}function bleachIsValid(grid, row, col, num) {
// Check row
for (let x = 0; x < 9; x++) {
if (grid[row][x] === num) return false;
}
// Check column
for (let x = 0; x < 9; x++) {
if (grid[x][col] === num) return false;
}
// Check 3x3 box
const boxRow = Math.floor(row / 3) * 3;
const boxCol = Math.floor(col / 3) * 3;
for (let i = 0; i < 3; i++) {
for (let j = 0; j < 3; j++) {
if (grid[boxRow + i][boxCol + j] === num) return false;
}
}
return true;
}function bleachSolveSudoku(grid) {
for (let row = 0; row < 9; row++) {
for (let col = 0; col < 9; col++) {
if (grid[row][col] === 0) {
for (let num = 1; num <= 9; num++) {
if (bleachIsValid(grid, row, col, num)) {
grid[row][col] = num;
if (bleachSolveSudoku(grid)) {
return true;
}
grid[row][col] = 0;
}
}
return false;
}
}
}
return true;
}function bleachGeneratePuzzle() {
bleachInitGrid();
// Fill diagonal 3x3 boxes first
for (let box = 0; box < 9; box += 3) {
const nums = [1,2,3,4,5,6,7,8,9];
for (let i = 0; i < 3; i++) {
for (let j = 0; j < 3; j++) {
const randomIndex = Math.floor(Math.random() * nums.length);
bleachSolution[box + i][box + j] = nums[randomIndex];
nums.splice(randomIndex, 1);
}
}
}
// Solve the rest
bleachSolveSudoku(bleachSolution);
// Create puzzle by removing numbers
for (let row = 0; row < 9; row++) {
for (let col = 0; col < 9; col++) {
bleachSudokuGrid[row][col] = bleachSolution[row][col];
bleachOriginalPuzzle[row][col] = bleachSolution[row][col];
}
}
// Remove 40-50 numbers for medium difficulty
const cellsToRemove = 45;
let removed = 0;
while (removed < cellsToRemove) {
const row = Math.floor(Math.random() * 9);
const col = Math.floor(Math.random() * 9);
if (bleachSudokuGrid[row][col] !== 0) {
bleachSudokuGrid[row][col] = 0;
bleachOriginalPuzzle[row][col] = 0;
removed++;
}
}
}function bleachHighlightRelated(selectedRow, selectedCol) {
const cells = bleachBoard.children;
// Clear previous highlights
for (let cell of cells) {
cell.classList.remove('bleach-highlight-row', 'bleach-highlight-col', 'bleach-highlight-box', 'bleach-highlight-duplicate');
}
if (selectedRow === -1 || selectedCol === -1) return;
const selectedValue = bleachSudokuGrid[selectedRow][selectedCol];
for (let row = 0; row < 9; row++) {
for (let col = 0; col < 9; col++) {
const index = row * 9 + col;
const cell = cells[index];
// Highlight row
if (row === selectedRow) {
cell.classList.add('bleach-highlight-row');
}
// Highlight column
if (col === selectedCol) {
cell.classList.add('bleach-highlight-col');
}
// Highlight 3x3 box
const boxRow = Math.floor(selectedRow / 3);
const boxCol = Math.floor(selectedCol / 3);
const cellBoxRow = Math.floor(row / 3);
const cellBoxCol = Math.floor(col / 3);
if (boxRow === cellBoxRow && boxCol === cellBoxCol) {
cell.classList.add('bleach-highlight-box');
}
// Highlight duplicates
if (selectedValue !== 0 && bleachSudokuGrid[row][col] === selectedValue && !(row === selectedRow && col === selectedCol)) {
cell.classList.add('bleach-highlight-duplicate');
}
}
}
}function bleachRenderBoard() {
bleachBoard.innerHTML = '';
for (let row = 0; row < 9; row++) {
for (let col = 0; col < 9; col++) {
const cell = document.createElement('div');
cell.className = 'bleach-sudoku-cell';
cell.textContent = bleachSudokuGrid[row][col] || '';
if (bleachOriginalPuzzle[row][col] !== 0) {
cell.classList.add('bleach-given');
}
cell.addEventListener('click', () => {
if (bleachSelectedCell) {
bleachSelectedCell.classList.remove('bleach-selected');
}
bleachSelectedCell = cell;
cell.classList.add('bleach-selected');
bleachSelectedCell.dataset.row = row;
bleachSelectedCell.dataset.col = col;
bleachHighlightRelated(row, col);
});
bleachBoard.appendChild(cell);
}
}
}function bleachUpdateTimer() {
const elapsed = Math.floor((Date.now() - bleachStartTime) / 1000);
const minutes = Math.floor(elapsed / 60).toString().padStart(2, '0');
const seconds = (elapsed % 60).toString().padStart(2, '0');
bleachTimerElement.textContent = `${minutes}:${seconds}`;
}function bleachUpdateHintTimer() {
if (bleachHintCooldown > 0) {
bleachHintCooldown--;
bleachHintTimerElement.textContent = `${bleachHintCooldown}с`;
bleachHintBtn.disabled = true;
} else {
bleachHintTimerElement.textContent = 'готова';
bleachHintBtn.disabled = false;
}
}function bleachCheckWin() {
for (let row = 0; row < 9; row++) {
for (let col = 0; col < 9; col++) {
if (bleachSudokuGrid[row][col] !== bleachSolution[row][col]) {
return false;
}
}
}
clearInterval(bleachTimerInterval);
clearInterval(bleachHintInterval);
document.getElementById('bleachFinalTimer').textContent = bleachTimerElement.textContent;
bleachVictoryElement.style.display = 'block';
return true;
}function bleachHandleKeyPress(e) {
if (!bleachSelectedCell) return;
const row = parseInt(bleachSelectedCell.dataset.row);
const col = parseInt(bleachSelectedCell.dataset.col);
// Don't modify given numbers
if (bleachOriginalPuzzle[row][col] !== 0) {
return;
}
const key = e.key;
if (key >= '1' && key <= '9') {
const num = parseInt(key);
if (bleachIsValid(bleachSudokuGrid, row, col, num)) {
bleachSudokuGrid[row][col] = num;
bleachSelectedCell.textContent = num;
bleachSelectedCell.classList.remove('bleach-error');
bleachHighlightRelated(row, col);
bleachCheckWin();
} else {
bleachSelectedCell.classList.add('bleach-error');
setTimeout(() => {
bleachSelectedCell.classList.remove('bleach-error');
}, 600);
}
} else if (key === '0' || key === 'Delete' || key === 'Backspace') {
bleachSudokuGrid[row][col] = 0;
bleachSelectedCell.textContent = '';
bleachSelectedCell.classList.remove('bleach-error');
bleachHighlightRelated(row, col);
}
}window.bleachNewGame = function() {
bleachGeneratePuzzle();
bleachRenderBoard();
bleachStartTime = Date.now();
bleachHintCooldown = 0;
clearInterval(bleachTimerInterval);
clearInterval(bleachHintInterval);
bleachTimerInterval = setInterval(bleachUpdateTimer, 1000);
bleachHintInterval = setInterval(bleachUpdateHintTimer, 1000);
bleachSelectedCell = null;
bleachHighlightRelated(-1, -1);
bleachUpdateHintTimer();
bleachVictoryElement.style.display = 'none'; // Hide victory message on new game
};window.bleachGetHint = function() {
if (bleachHintCooldown > 0) return;
// Find empty cells
const emptyCells = [];
for (let row = 0; row < 9; row++) {
for (let col = 0; col < 9; col++) {
if (bleachSudokuGrid[row][col] === 0) {
emptyCells.push({row, col});
}
}
}
if (emptyCells.length === 0) return;
// Pick random empty cell and fill it
const randomCell = emptyCells[Math.floor(Math.random() * emptyCells.length)];
const {row, col} = randomCell;
bleachSudokuGrid[row][col] = bleachSolution[row][col];
// Update display
const cellIndex = row * 9 + col;
const cellElement = bleachBoard.children[cellIndex];
cellElement.textContent = bleachSolution[row][col];
cellElement.classList.add('bleach-hint');
setTimeout(() => {
cellElement.classList.remove('bleach-hint');
}, 1000);
// Start cooldown
bleachHintCooldown = 60;
bleachUpdateHintTimer();
bleachCheckWin();
};window.bleachSolve = function() {
for (let row = 0; row < 9; row++) {
for (let col = 0; col < 9; col++) {
bleachSudokuGrid[row][col] = bleachSolution[row][col];
}
}
bleachRenderBoard();
bleachCheckWin();
};window.bleachClear = function() {
for (let row = 0; row < 9; row++) {
for (let col = 0; col < 9; col++) {
if (bleachOriginalPuzzle[row][col] === 0) {
bleachSudokuGrid[row][col] = 0;
}
}
}
bleachRenderBoard();
if (bleachSelectedCell) {
const row = parseInt(bleachSelectedCell.dataset.row);
const col = parseInt(bleachSelectedCell.dataset.col);
bleachHighlightRelated(row, col);
}
};document.addEventListener('keydown', bleachHandleKeyPress);
// Initialize game
bleachNewGame();
})();
</script>
</body>
</html>[/html]
Поделиться332025-06-03 00:23:49
- Администратор
- Сообщений: 70
совиет
[html]<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Судоку - За Отчизну!</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap" rel="stylesheet">
<style>
body {
margin: 0;
overflow: hidden; /* Prevent scrollbar due to pseudo-elements */
}.bleach-sudoku-container {
all: initial;
font-family: 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
/* Советский фон: темно-серый, почти как бетон или военная форма */
background: #3c3c3c; /* Темно-серый */
color: #e0e0e0; /* Светлый текст */
padding: 20px;
box-sizing: border-box;
position: relative;
overflow: hidden;
}.bleach-sudoku-container::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
/* Менее выраженные градиенты или их отсутствие */
background-image: none; /* Убираем яркие радиальные градиенты */
pointer-events: none;
}.bleach-sudoku-title {
all: initial;
font-family: 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
font-size: 2.8rem;
font-weight: 700;
/* Цвет названия: золотистый или яркий красный */
color: #ffd700; /* Золотой */
text-shadow: 0 0 10px rgba(255, 215, 0, 0.6), 0 0 20px rgba(255, 215, 0, 0.3);
margin-bottom: 15px;
letter-spacing: 3px;
z-index: 10;
position: relative;
text-align: center;
}.bleach-sudoku-subtitle {
all: initial;
font-family: 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
font-size: 1rem;
/* Приглушенный светло-желтый или белый */
color: rgba(255, 255, 255, 0.8);
margin-bottom: 25px;
text-align: center;
letter-spacing: 1px;
z-index: 10;
position: relative;
}.bleach-sudoku-board {
all: initial;
display: grid;
grid-template-columns: repeat(9, 52px);
grid-template-rows: repeat(9, 52px);
gap: 1px;
/* Строгий цвет фона доски */
background: #4a4a4a; /* Темно-серый */
border: 6px solid #4a4a4a; /* Граница в тон фона */
box-shadow:
0 0 20px rgba(0, 0, 0, 0.5),
inset 0 0 15px rgba(0, 0, 0, 0.6);
z-index: 10;
position: relative;
margin-bottom: 25px;
}.bleach-sudoku-cell {
all: initial;
width: 52px;
height: 52px;
/* Цвет ячейки: темный, "рабочий" */
background: #2b2b2b; /* Очень темно-серый */
border: 1px solid rgba(100, 100, 100, 0.4); /* Мягкая серая граница */
display: flex;
align-items: center;
justify-content: center;
font-family: 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
font-size: 1.6rem;
font-weight: 400;
color: #e0e0e0; /* Светлый текст */
cursor: pointer;
transition: all 0.3s ease;
box-sizing: border-box;
position: relative;
}.bleach-sudoku-cell:hover {
/* Менее яркая подсветка при наведении */
background: #404040; /* Средне-серый */
box-shadow: 0 0 8px rgba(100, 100, 100, 0.6);
}.bleach-sudoku-cell.bleach-given {
/* Заданные числа: более строгий цвет */
background: #353535; /* Чуть светлее фона ячеек */
color: #ffd700; /* Золотой или светло-желтый */
text-shadow: 0 0 5px rgba(255, 215, 0, 0.4);
cursor: default;
}.bleach-sudoku-cell.bleach-selected {
/* Выделенная ячейка: акцент красного */
background: rgba(178, 34, 34, 0.4); /* Огненно-красный */
box-shadow: 0 0 15px rgba(178, 34, 34, 0.8);
border: 2px solid #b22222; /* Красная граница */
}.bleach-sudoku-cell.bleach-error {
/* Ошибка: все еще красный, но менее "кричащий" */
background: rgba(139, 0, 0, 0.6); /* Темно-красный */
animation: bleach-error-pulse 0.6s ease-in-out;
}.bleach-sudoku-cell.bleach-hint {
/* Подсказка: зеленый, но приглушенный */
background: rgba(34, 139, 34, 0.5); /* Лесной зеленый */
animation: bleach-hint-glow 1s ease-in-out;
}.bleach-sudoku-cell.bleach-highlight-row,
.bleach-sudoku-cell.bleach-highlight-col,
.bleach-sudoku-cell.bleach-highlight-box {
/* Подсветка: приглушенный серый */
background: rgba(70, 70, 70, 0.3);
}.bleach-sudoku-cell.bleach-highlight-duplicate {
/* Дубликаты: оранжевый, но темнее */
background: rgba(184, 134, 11, 0.5); /* Темный золотисто-оранжевый */
box-shadow: 0 0 8px rgba(184, 134, 11, 0.6);
}/* Толстые границы для 3x3 блоков */
.bleach-sudoku-cell:nth-child(3n):not(:nth-child(9n)) {
border-right: 3px solid #4a4a4a;
}.bleach-sudoku-cell:nth-child(n+19):nth-child(-n+27),
.bleach-sudoku-cell:nth-child(n+46):nth-child(-n+54) {
border-bottom: 3px solid #4a4a4a;
}@keyframes bleach-error-pulse {
0%, 100% { transform: scale(1); box-shadow: 0 0 10px rgba(139, 0, 0, 0.8); }
50% { transform: scale(1.08); box-shadow: 0 0 20px rgba(139, 0, 0, 1); }
}@keyframes bleach-hint-glow {
0%, 100% { box-shadow: 0 0 8px rgba(34, 139, 34, 0.6); }
50% { box-shadow: 0 0 20px rgba(34, 139, 34, 1); }
}.bleach-sudoku-controls {
all: initial;
display: flex;
gap: 15px;
margin-bottom: 20px;
z-index: 10;
position: relative;
flex-wrap: wrap;
justify-content: center;
}.bleach-sudoku-btn {
all: initial;
font-family: 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
/* Кнопки: строгие, с легким градиентом красного или серого */
background: linear-gradient(45deg, #8b0000, #b22222); /* От темно-красного до красного */
color: #e0e0e0;
border: none;
padding: 12px 24px;
border-radius: 5px; /* Менее скругленные кнопки */
cursor: pointer;
font-size: 0.95rem;
font-weight: 400;
transition: all 0.3s ease;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
letter-spacing: 0.5px;
}.bleach-sudoku-btn:hover:not(:disabled) {
transform: translateY(-2px); /* Меньший эффект при наведении */
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.5);
background: linear-gradient(45deg, #b22222, #cd5c5c);
}.bleach-sudoku-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
background: linear-gradient(45deg, #505050, #707070); /* Серые отключенные кнопки */
}.bleach-sudoku-info {
all: initial;
font-family: 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
display: flex;
justify-content: space-between;
align-items: center;
width: 500px;
max-width: 90vw;
color: rgba(255, 255, 255, 0.9);
z-index: 10;
position: relative;
margin-bottom: 15px;
}.bleach-sudoku-timer, .bleach-sudoku-hint-timer {
all: initial;
font-family: 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
font-size: 1.3rem;
/* Цвет таймера: золотой или светло-желтый */
color: #ffd700;
font-weight: 400;
text-shadow: 0 0 8px rgba(255, 215, 0, 0.6);
}.bleach-sudoku-controls-info {
all: initial;
font-family: 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
text-align: center;
color: rgba(255, 255, 255, 0.7);
font-size: 0.9rem;
z-index: 10;
position: relative;
line-height: 1.4;
}.bleach-victory {
all: initial;
font-family: 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* Фон окна победы: темный, с красной или золотой рамкой */
background: rgba(43, 43, 43, 0.95);
color: #e0e0e0;
padding: 50px;
border-radius: 10px; /* Менее скругленные углы */
text-align: center;
border: 4px solid #b22222; /* Красная рамка */
box-shadow: 0 0 40px rgba(178, 34, 34, 0.7);
z-index: 100;
display: none;
}.bleach-victory h2 {
all: initial;
font-family: 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
font-size: 2.2rem;
color: #ffd700; /* Золотой заголовок победы */
margin-bottom: 20px;
text-shadow: 0 0 10px rgba(255, 215, 0, 0.7);
font-weight: 300;
letter-spacing: 2px;
}.bleach-victory p {
all: initial;
font-family: 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
color: rgba(255, 255, 255, 0.9);
margin-bottom: 10px;
font-size: 1.1rem;
line-height: 1.5;
}.bleach-copyright {
all: initial;
font-family: 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
font-size: 0.8rem;
color: rgba(255, 255, 255, 0.5);
margin-top: 20px;
z-index: 10;
position: relative;
}
</style>
</head>
<body>
<div class="bleach-sudoku-container">
<h1 class="bleach-sudoku-title">Судоку - Наша Цель!</h1>
<div class="bleach-sudoku-subtitle">Примите вызов и укрепите дисциплину!</div>
<div class="bleach-sudoku-info">
<div>Время борьбы: <span class="bleach-sudoku-timer" id="bleachTimer">00:00</span></div>
<div>Помощь товарища: <span class="bleach-sudoku-hint-timer" id="bleachHintTimer">готова</span></div>
</div>
<div class="bleach-sudoku-board" id="bleachSudokuBoard"></div>
<div class="bleach-sudoku-controls">
<button class="bleach-sudoku-btn" onclick="bleachNewGame()">Новый бой!</button>
<button class="bleach-sudoku-btn" id="bleachHintBtn" onclick="bleachGetHint()">Взаимопомощь</button>
<button class="bleach-sudoku-btn" onclick="bleachSolve()">Проверенное решение</button>
<button class="bleach-sudoku-btn" onclick="bleachClear()">Очистить поле</button>
</div>
<div class="bleach-sudoku-controls-info">
Выберите ячейку и введите цифру 1-9<br>
0 или Delete для очистки • Порядок в строках и столбцах
</div><div class="bleach-victory" id="bleachVictory">
<h2>Победа Наша!</h2>
<p>Вы завершили задание! Родина гордится вами!</p>
<p>Время достижения: <span id="bleachFinalTimer"></span></p>
<button class="bleach-sudoku-btn" onclick="bleachNewGame(); document.getElementById('bleachVictory').style.display='none';">Новое задание</button>
</div>
<div class="bleach-copyright">Построено Zero_Chan для народа © 2025</div>
</div><script>
(function() {
let bleachSudokuGrid = [];
let bleachSolution = [];
let bleachSelectedCell = null;
let bleachStartTime = Date.now();
let bleachTimerInterval = null;
let bleachHintCooldown = 0;
let bleachHintInterval = null;
let bleachOriginalPuzzle = [];const bleachBoard = document.getElementById('bleachSudokuBoard');
const bleachTimerElement = document.getElementById('bleachTimer');
const bleachHintTimerElement = document.getElementById('bleachHintTimer');
const bleachHintBtn = document.getElementById('bleachHintBtn');
const bleachVictoryElement = document.getElementById('bleachVictory');function bleachInitGrid() {
bleachSudokuGrid = Array(9).fill().map(() => Array(9).fill(0));
bleachSolution = Array(9).fill().map(() => Array(9).fill(0));
bleachOriginalPuzzle = Array(9).fill().map(() => Array(9).fill(0));
}function bleachIsValid(grid, row, col, num) {
// Check row
for (let x = 0; x < 9; x++) {
if (grid[row][x] === num) return false;
}
// Check column
for (let x = 0; x < 9; x++) {
if (grid[x][col] === num) return false;
}
// Check 3x3 box
const boxRow = Math.floor(row / 3) * 3;
const boxCol = Math.floor(col / 3) * 3;
for (let i = 0; i < 3; i++) {
for (let j = 0; j < 3; j++) {
if (grid[boxRow + i][boxCol + j] === num) return false;
}
}
return true;
}function bleachSolveSudoku(grid) {
for (let row = 0; row < 9; row++) {
for (let col = 0; col < 9; col++) {
if (grid[row][col] === 0) {
for (let num = 1; num <= 9; num++) {
if (bleachIsValid(grid, row, col, num)) {
grid[row][col] = num;
if (bleachSolveSudoku(grid)) {
return true;
}
grid[row][col] = 0;
}
}
return false;
}
}
}
return true;
}function bleachGeneratePuzzle() {
bleachInitGrid();
// Fill diagonal 3x3 boxes first
for (let box = 0; box < 9; box += 3) {
const nums = [1,2,3,4,5,6,7,8,9];
for (let i = 0; i < 3; i++) {
for (let j = 0; j < 3; j++) {
const randomIndex = Math.floor(Math.random() * nums.length);
bleachSolution[box + i][box + j] = nums[randomIndex];
nums.splice(randomIndex, 1);
}
}
}
// Solve the rest
bleachSolveSudoku(bleachSolution);
// Create puzzle by removing numbers
for (let row = 0; row < 9; row++) {
for (let col = 0; col < 9; col++) {
bleachSudokuGrid[row][col] = bleachSolution[row][col];
bleachOriginalPuzzle[row][col] = bleachSolution[row][col];
}
}
// Remove 40-50 numbers for medium difficulty
const cellsToRemove = 45;
let removed = 0;
while (removed < cellsToRemove) {
const row = Math.floor(Math.random() * 9);
const col = Math.floor(Math.random() * 9);
if (bleachSudokuGrid[row][col] !== 0) {
bleachSudokuGrid[row][col] = 0;
bleachOriginalPuzzle[row][col] = 0;
removed++;
}
}
}function bleachHighlightRelated(selectedRow, selectedCol) {
const cells = bleachBoard.children;
// Clear previous highlights
for (let cell of cells) {
cell.classList.remove('bleach-highlight-row', 'bleach-highlight-col', 'bleach-highlight-box', 'bleach-highlight-duplicate');
}
if (selectedRow === -1 || selectedCol === -1) return;
const selectedValue = bleachSudokuGrid[selectedRow][selectedCol];
for (let row = 0; row < 9; row++) {
for (let col = 0; col < 9; col++) {
const index = row * 9 + col;
const cell = cells[index];
// Highlight row
if (row === selectedRow) {
cell.classList.add('bleach-highlight-row');
}
// Highlight column
if (col === selectedCol) {
cell.classList.add('bleach-highlight-col');
}
// Highlight 3x3 box
const boxRow = Math.floor(selectedRow / 3);
const boxCol = Math.floor(selectedCol / 3);
const cellBoxRow = Math.floor(row / 3);
const cellBoxCol = Math.floor(col / 3);
if (boxRow === cellBoxRow && boxCol === cellBoxCol) {
cell.classList.add('bleach-highlight-box');
}
// Highlight duplicates
if (selectedValue !== 0 && bleachSudokuGrid[row][col] === selectedValue && !(row === selectedRow && col === selectedCol)) {
cell.classList.add('bleach-highlight-duplicate');
}
}
}
}function bleachRenderBoard() {
bleachBoard.innerHTML = '';
for (let row = 0; row < 9; row++) {
for (let col = 0; col < 9; col++) {
const cell = document.createElement('div');
cell.className = 'bleach-sudoku-cell';
cell.textContent = bleachSudokuGrid[row][col] || '';
if (bleachOriginalPuzzle[row][col] !== 0) {
cell.classList.add('bleach-given');
}
cell.addEventListener('click', () => {
if (bleachSelectedCell) {
bleachSelectedCell.classList.remove('bleach-selected');
}
bleachSelectedCell = cell;
cell.classList.add('bleach-selected');
bleachSelectedCell.dataset.row = row;
bleachSelectedCell.dataset.col = col;
bleachHighlightRelated(row, col);
});
bleachBoard.appendChild(cell);
}
}
}function bleachUpdateTimer() {
const elapsed = Math.floor((Date.now() - bleachStartTime) / 1000);
const minutes = Math.floor(elapsed / 60).toString().padStart(2, '0');
const seconds = (elapsed % 60).toString().padStart(2, '0');
bleachTimerElement.textContent = `${minutes}:${seconds}`;
}function bleachUpdateHintTimer() {
if (bleachHintCooldown > 0) {
bleachHintCooldown--;
bleachHintTimerElement.textContent = `${bleachHintCooldown}с`;
bleachHintBtn.disabled = true;
} else {
bleachHintTimerElement.textContent = 'готова';
bleachHintBtn.disabled = false;
}
}function bleachCheckWin() {
for (let row = 0; row < 9; row++) {
for (let col = 0; col < 9; col++) {
if (bleachSudokuGrid[row][col] !== bleachSolution[row][col]) {
return false;
}
}
}
clearInterval(bleachTimerInterval);
clearInterval(bleachHintInterval);
document.getElementById('bleachFinalTimer').textContent = bleachTimerElement.textContent;
bleachVictoryElement.style.display = 'block';
return true;
}function bleachHandleKeyPress(e) {
if (!bleachSelectedCell) return;
const row = parseInt(bleachSelectedCell.dataset.row);
const col = parseInt(bleachSelectedCell.dataset.col);
// Don't modify given numbers
if (bleachOriginalPuzzle[row][col] !== 0) {
return;
}
const key = e.key;
if (key >= '1' && key <= '9') {
const num = parseInt(key);
if (bleachIsValid(bleachSudokuGrid, row, col, num)) {
bleachSudokuGrid[row][col] = num;
bleachSelectedCell.textContent = num;
bleachSelectedCell.classList.remove('bleach-error');
bleachHighlightRelated(row, col);
bleachCheckWin();
} else {
bleachSelectedCell.classList.add('bleach-error');
setTimeout(() => {
bleachSelectedCell.classList.remove('bleach-error');
}, 600);
}
} else if (key === '0' || key === 'Delete' || key === 'Backspace') {
bleachSudokuGrid[row][col] = 0;
bleachSelectedCell.textContent = '';
bleachSelectedCell.classList.remove('bleach-error');
bleachHighlightRelated(row, col);
}
}window.bleachNewGame = function() {
bleachGeneratePuzzle();
bleachRenderBoard();
bleachStartTime = Date.now();
bleachHintCooldown = 0;
clearInterval(bleachTimerInterval);
clearInterval(bleachHintInterval);
bleachTimerInterval = setInterval(bleachUpdateTimer, 1000);
bleachHintInterval = setInterval(bleachUpdateHintTimer, 1000);
bleachSelectedCell = null;
bleachHighlightRelated(-1, -1);
bleachUpdateHintTimer();
bleachVictoryElement.style.display = 'none'; // Hide victory message on new game
};window.bleachGetHint = function() {
if (bleachHintCooldown > 0) return;
// Find empty cells
const emptyCells = [];
for (let row = 0; row < 9; row++) {
for (let col = 0; col < 9; col++) {
if (bleachSudokuGrid[row][col] === 0) {
emptyCells.push({row, col});
}
}
}
if (emptyCells.length === 0) return;
// Pick random empty cell and fill it
const randomCell = emptyCells[Math.floor(Math.random() * emptyCells.length)];
const {row, col} = randomCell;
bleachSudokuGrid[row][col] = bleachSolution[row][col];
// Update display
const cellIndex = row * 9 + col;
const cellElement = bleachBoard.children[cellIndex];
cellElement.textContent = bleachSolution[row][col];
cellElement.classList.add('bleach-hint');
setTimeout(() => {
cellElement.classList.remove('bleach-hint');
}, 1000);
// Start cooldown
bleachHintCooldown = 60;
bleachUpdateHintTimer();
bleachCheckWin();
};window.bleachSolve = function() {
for (let row = 0; row < 9; row++) {
for (let col = 0; col < 9; col++) {
bleachSudokuGrid[row][col] = bleachSolution[row][col];
}
}
bleachRenderBoard();
bleachCheckWin();
};window.bleachClear = function() {
for (let row = 0; row < 9; row++) {
for (let col = 0; col < 9; col++) {
if (bleachOriginalPuzzle[row][col] === 0) {
bleachSudokuGrid[row][col] = 0;
}
}
}
bleachRenderBoard();
if (bleachSelectedCell) {
const row = parseInt(bleachSelectedCell.dataset.row);
const col = parseInt(bleachSelectedCell.dataset.col);
bleachHighlightRelated(row, col);
}
};document.addEventListener('keydown', bleachHandleKeyPress);
// Initialize game
bleachNewGame();
})();
</script>
</body>
</html>[/html]
Поделиться342025-06-03 08:58:27
- Администратор
- Сообщений: 70
[html]<style>
/* ===== ОБЩИЕ НАСТРОЙКИ КАРТОЧКИ ===== */
.boris-final-card {
--card-width: 700px; /* Ширина карточки */
--header-height-collapsed: 180px; /* Высота шапки в свернутом виде */
--header-height-expanded: 300px; /* Высота шапки в развернутом виде */
--accent-color: #A32D2D; /* Более глубокий красный */
--text-color: #E0E0E0; /* Основной текст */
--bg-color: #202020; /* Фон карточки */
--border-color: #4A4A4A; /* Цвет рамок */
--secondary-bg-color: #2B2B2B; /* Фон для внутренних блоков */
--shadow-color: rgba(0, 0, 0, 0.5);
--tab-inactive-color: #383838; /* Цвет неактивной вкладки */
--tab-active-color: var(--secondary-bg-color); /* Цвет активной вкладки */
--tab-image-size: 150px; /* Размер квадратной картинки во вкладках хронологии */
width: 100%;
max-width: var(--card-width);
margin: 25px auto;
font-family: 'Roboto Condensed', sans-serif;
background-color: var(--bg-color);
border: 1px solid var(--border-color);
border-radius: 6px;
box-shadow: 0 6px 20px var(--shadow-color);
overflow: hidden;
cursor: pointer;
transition: all 0.4s ease;
position: relative;
box-sizing: border-box;
}
.boris-final-card * {
box-sizing: border-box;
}
/* Виньетка (менее агрессивная) */
.boris-final-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(ellipse at center, rgba(0,0,0,0) 70%, rgba(0,0,0,0.1) 100%);
pointer-events: none;
z-index: 1;
}
/* ===== ШАПКА КАРТОЧКИ ===== */
.card-header-area {
position: relative;
height: var(--header-height-collapsed);
transition: height 0.5s ease;
overflow: hidden;
display: flex; /* Для центрирования контента в шапке */
align-items: flex-end; /* Выравнивание по низу */
padding: 15px;
border-bottom: 1px solid var(--border-color);
}
.card-header-area img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 30%;
transition: opacity 0.5s ease, transform 0.5s ease;
z-index: 0; /* Под контентом */
}
.header-img-collapsed {
opacity: 1;
}
.header-img-expanded {
opacity: 0;
transform: scale(1.03);
}
/* Контент поверх изображения в шапке */
.header-content-overlay {
position: relative;
z-index: 1;
width: 100%;
display: flex;
justify-content: space-between;
align-items: flex-end;
}
.header-content-overlay h2 {
color: #FFF;
font-size: 2.2em;
font-weight: bold;
text-shadow: 2px 2px 5px rgba(0,0,0,0.8);
margin: 0;
text-transform: uppercase;
letter-spacing: 1px;
background: linear-gradient(90deg, rgba(163,45,45,0.8), transparent);
padding: 8px 15px;
border-radius: 4px;
}
.header-content-overlay .small-info {
color: #CCC;
font-size: 0.9em;
text-shadow: 1px 1px 3px rgba(0,0,0,0.7);
padding: 5px 10px;
background-color: rgba(0,0,0,0.5);
border-radius: 3px;
}
/* Цитата (видима всегда) */
.boris-quote-visible {
padding: 15px 20px;
font-style: italic;
color: #B0B0B0;
text-align: center;
font-size: 0.9em;
background-color: var(--secondary-bg-color);
border-bottom: 1px solid var(--border-color);
}
/* ===== РАСКРЫВАЮЩЕЕСЯ СОДЕРЖИМОЕ ===== */
.boris-collapsible-content {
max-height: 0;
opacity: 0;
padding: 0 20px;
overflow: hidden;
transition: max-height 0.6s ease-out, opacity 0.6s ease-out, padding 0.6s ease-out;
color: var(--text-color);
}
.content-section {
margin-top: 25px;
padding-top: 15px;
border-top: 1px dashed var(--border-color);
}
.content-section:first-child {
border-top: none;
margin-top: 0;
padding-top: 0;
}
.content-section h3 {
color: var(--accent-color);
font-size: 1.4em;
margin-bottom: 12px;
text-transform: uppercase;
letter-spacing: 0.5px;
border-bottom: 1px solid rgba(163,45,45,0.5);
padding-bottom: 5px;
}
.content-section ul {
list-style: none;
padding-left: 0;
}
.content-section ul li {
position: relative;
padding-left: 20px;
margin-bottom: 8px;
font-size: 0.95em;
}
.content-section ul li::before {
content: '▶';
color: var(--accent-color);
position: absolute;
left: 0;
font-size: 0.8em;
line-height: 1;
top: 2px;
}
/* Ссылка на анкету в раскрытом виде */
.boris-full-profile-btn {
display: block;
width: fit-content;
margin: 20px auto;
padding: 10px 25px;
background-color: var(--accent-color);
color: #FFF;
text-decoration: none;
border-radius: 4px;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 0.5px;
transition: background-color 0.3s ease, transform 0.2s ease;
border: 1px solid #C00000;
box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}
.boris-full-profile-btn:hover {
background-color: #C00000;
transform: translateY(-1px);
}
/* ===== СТИЛИ ДЛЯ РАЗДЕЛА ХРОНОЛОГИИ (С ВКЛАДКАМИ) ===== */
.chronology-tabs {
display: flex;
margin-bottom: 0;
border-bottom: 1px solid var(--border-color);
}
.chronology-tab-button {
flex-grow: 1;
padding: 10px 15px;
background-color: var(--tab-inactive-color);
color: #CCC;
border: none;
cursor: pointer;
font-family: 'Roboto Condensed', sans-serif;
font-size: 1em;
text-transform: uppercase;
letter-spacing: 0.5px;
transition: background-color 0.3s ease, color 0.3s ease;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
margin-right: 2px;
}
.chronology-tab-button:last-child {
margin-right: 0;
}
.chronology-tab-button:hover {
background-color: #444;
color: #FFF;
}
.chronology-tab-button.active {
background-color: var(--tab-active-color);
color: var(--accent-color);
border-bottom: 2px solid var(--accent-color);
font-weight: bold;
}
.chronology-content {
background-color: var(--secondary-bg-color);
border-radius: 0 0 4px 4px;
border: 1px solid var(--border-color);
border-top: none;
/* padding: 0; был здесь, но теперь управляется через .chronology-items-wrapper и .tab-image-container */
}
.chronology-tab-pane {
display: none;
}
.chronology-tab-pane.active {
display: block;
}
/* Контейнер для изображения во вкладке */
.tab-image-container {
width: var(--tab-image-size);
height: var(--tab-image-size);
margin: 15px auto; /* Центрирование и отступы */
border: 1px solid var(--border-color);
border-radius: 4px;
overflow: hidden; /* На всякий случай, если object-fit не сработает как надо */
background-color: var(--bg-color); /* Фон, если картинка не полностью заполнит (с object-fit: contain) */
}
.chronology-tab-pane .tab-image {
display: block;
width: 100%;
height: 100%;
object-fit: contain; /* Вписать изображение полностью, сохраняя пропорции */
}
/* Обертка для списка эпизодов, чтобы отделить его от картинки и задать отступы */
.chronology-items-wrapper {
padding: 0 15px 15px 15px; /* Отступы по бокам и снизу. Верхний отступ создается margin у .tab-image-container */
}
.chronology-item {
background-color: var(--bg-color);
border: 1px solid #333;
border-left: 3px solid var(--accent-color);
padding: 12px 15px;
margin-bottom: 10px;
border-radius: 4px;
box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
}
.chronology-item:last-child {
margin-bottom: 0;
}
.chronology-item strong {
color: var(--accent-color);
display: block;
margin-bottom: 5px;
font-size: 1.1em;
}
.chronology-item p {
font-size: 0.9em;
margin-bottom: 5px;
}
.chronology-item ul {
list-style: none;
padding-left: 0;
margin-top: 8px;
border-top: 1px dashed #3A3A3A;
padding-top: 8px;
}
.chronology-item ul li {
font-size: 0.85em;
padding-left: 15px;
}
.chronology-item ul li::before {
content: '- ';
color: #C0C0C0;
position: absolute;
left: 0;
}
/* ===== АКТИВНОЕ СОСТОЯНИЕ КАРТОЧКИ ===== */
.boris-final-card.active {
box-shadow: 0 10px 30px var(--shadow-color);
transform: translateY(-2px);
}
.boris-final-card.active .card-header-area {
height: var(--header-height-expanded);
}
.boris-final-card.active .header-img-collapsed {
opacity: 0;
}
.boris-final-card.active .header-img-expanded {
opacity: 1;
transform: scale(1);
}
.boris-final-card.active .boris-collapsible-content {
max-height: 2500px;
opacity: 1;
padding: 20px;
transition: max-height 0.8s ease-in, opacity 0.8s ease-in, padding 0.8s ease-in;
}
/* ===== АДАПТИВНОСТЬ ===== */
@media (max-width: 768px) {
.boris-final-card {
margin: 15px auto;
--tab-image-size: 130px; /* Уменьшаем размер картинки на средних экранах */
}
.header-content-overlay h2 {
font-size: 1.8em;
padding: 6px 12px;
}
.header-content-overlay .small-info {
font-size: 0.8em;
}
.boris-quote-visible {
font-size: 0.85em;
padding: 10px 15px;
}
.boris-collapsible-content {
padding: 0 15px;
}
.boris-final-card.active .boris-collapsible-content {
padding: 15px;
}
.chronology-tab-button {
padding: 8px 10px;
font-size: 0.9em;
}
}
@media (max-width: 480px) {
.boris-final-card {
border-radius: 0;
margin: 0;
--tab-image-size: 110px; /* Еще уменьшаем на маленьких экранах */
}
.card-header-area {
height: 150px;
padding: 10px;
}
.boris-final-card.active .card-header-area {
height: 250px;
}
.header-content-overlay h2 {
font-size: 1.5em;
}
/* .boris-info-item-short { font-size: 0.8em; } -- такого класса нет в HTML, убрал */
.content-section h3 {
font-size: 1.2em;
}
}
</style>
<div class="boris-final-card" onclick="toggleCard(this)">
<div class="card-header-area">
<img class="header-img-collapsed" src="https://forumupload.ru/uploads/001c/1f/11/2/266394.jpg"
alt="Борис Стальнов - Свернутое изображение">
<img class="header-img-expanded" src="https://forumupload.ru/uploads/001c/1f/11/2/266394.jpg"
alt="Борис Стальнов - Развернутое изображение">
<div class="header-content-overlay">
<h2>Борис Стальнов</h2>
<div class="small-info">
Эмпиреал / "Старый ростовщик" из Нижнего
</div>
</div>
</div>
<div class="boris-quote-visible">
« Твоя тень – это эхо твоего присутствия.<br>И я всегда услышу его зов. »
</div>
<div class="boris-collapsible-content">
<a href="https://defect.rusff.me/viewtopic.php?id=242#p38550" target="_blank" class="boris-full-profile-btn" onclick="event.stopPropagation()">
Полная анкета персонажа
</a>
<div class="content-section">
<h3>Особые привычки и "клюквенные" факты</h3>
<ul>
<li><strong>Хранит гвозди в банке из-под кофе "Пеле"</strong>, оставшейся от опекуна, бормоча, что "раньше и тара была крепче, не то что нынешний импортный ширпотреб".</li>
<li>По утрам глушит <strong>самоварный чай такой крепости, что им можно проводку паять</strong>, обязательно без сахара, но с "добавкой суровой действительности".</li>
<li>В своей закусочной "Русские Суши" по четвергам устраивает <strong>"Политчас Кино"</strong>, крутя на старом проекторе фильмы про подвиги разведчиков и трудовые пятилетки. Иногда сопровождает показ едкими комментариями.</li>
<li>Его реальный капитал — не кредиты, а <strong>коллекция советских значков</strong> ("ГТО", "Ворошиловский стрелок", "Мастер золотые руки"). Каждый для него – "орден за заслуги перед прошлым".</li>
<li><strong>Презрительно фыркает на "энергетики" и прочую "химию"</strong>. Его выбор – квас собственного брожения, который он называет "эликсиром трезвомыслия и народного духа".</li>
<li><strong>Убежден, что любую проблему лучше решать "по-человечески"</strong>: за столом с пельменями, соленьями и стопкой "для ясности ума", а не "этими вашими протоколами".</li>
</ul>
</div>
<div class="content-section">
<h3>Предпочтения и взгляды</h3>
<ul>
<li><strong>Любимое блюдо:</strong> Борщ, сваренный "по ГОСТу опекуна" – густой, наваристый, "чтоб ложка стояла", и обязательно с "генеральской" порцией сметаны.</li>
<li><strong>Ненавидит:</strong> Фанаберию, "эффективных менеджеров", пустозвонство, и тех, кто "родства не помнит и от корней отрывается, как сорняк".</li>
<li><strong>Идеал:</strong> "Когда все по уму и по совести, как в хорошей рабочей бригаде: каждый знает свое дело, помогает товарищу, и никто не тянет одеяло на себя."</li>
<li><strong>Хобби:</strong> Восстановление старых советских <strong>радиоприемников "Океан" и "Спидола"</strong>. Считает, что в них "еще осталась душа инженеров, а не маркетологов".</li>
<li><strong>Отношение к Эдему:</strong> Воспринимает его как "гигантский завод, где растащили все по цехам, а руководство давно сбежало с кассой". Считает, что "тут не реформы нужны, а хороший субботник и пара показательных процессов".</li>
</ul>
</div>
<div class="content-section">
<h3>Хронология эпизодов</h3>
<div class="chronology-tabs">
<button class="chronology-tab-button active" onclick="openTab(event, 'main-plot')">Сюжетные</button>
<button class="chronology-tab-button" onclick="openTab(event, 'side-quests')">Побочные</button>
<button class="chronology-tab-button" onclick="openTab(event, 'personal-events')">Личные</button>
</div>
<div class="chronology-content">
<div id="main-plot" class="chronology-tab-pane active">
<div class="tab-image-container">
<img src="https://forumupload.ru/uploads/001c/1f/11/2/185713.png" alt="Сюжетные эпизоды Бориса" class="tab-image">
</div>
<div class="chronology-items-wrapper">
<div class="chronology-item">
<strong>Эпизод #1: Гром среди теней</strong>
<p>
В Нижнем городе снова "неразбериха и разгильдяйство" – у местных начали пропадать посылки. Борис взялся навести порядок, подозревая, что это не просто шпана, а кто-то, кто "слишком умело играет с тенями на чужом поле".
</p>
<ul>
<li><strong>Участники:</strong> Борис Стальнов, Лина (курьер-бедолага), "Безликие" (или "Тени тыловые")</li>
<li><strong>Дата:</strong> 35 день 4-й луны</li>
</ul>
</div>
<div class="chronology-item">
<strong>Эпизод #2: Шепот старых улиц</strong>
<p>
На пороге закусочной материализовались "люди в штатском" из "Аргуса" с просьбой государственной важности: найти "ценного кадра", решившего поиграть в самостоятельность. Борис поморщился, но "партия сказала "надо"..." вернее, предложила бартер, от которого сложно отказаться.
</p>
<ul>
<li><strong>Участники:</strong> Борис Стальнов, Агент "Филин" (с папкой "Совершенно Секретно"), "Перебежчик Иван" (решил, что умнее всех)</li>
<li><strong>Дата:</strong> 12 день 5-й луны</li>
</ul>
</div>
</div>
</div>
<div id="side-quests" class="chronology-tab-pane">
<div class="tab-image-container">
<img src="https://forumupload.ru/uploads/001c/1f/11/2/142388.png" alt="Побочные эпизоды Бориса" class="tab-image">
</div>
<div class="chronology-items-wrapper">
<div class="chronology-item">
<strong>Эпизод #3: Пропавший кот и народное хозяйство</strong>
<p>
Старушка Марфа Петровна пришла в слезах: пропал ее кот, "единственная отрада и главный специалист по борьбе с грызунами в коммуналке". Борис, вздохнув о "мелочах жизни, которые важнее глобальных проблем", отправился в экспедицию по подвалам и канализациям.
</p>
<ul>
<li><strong>Участники:</strong> Борис Стальнов, Старушка Марфа, Кот "Товарищ Мурзик", Канализационные Мутанты (мелкие)</li>
<li><strong>Дата:</strong> 7 день 4-й луны</li>
</ul>
</div>
</div>
</div>
<div id="personal-events" class="chronology-tab-pane">
<div class="tab-image-container">
<img src="https://forumupload.ru/uploads/001c/1f/11/2/197333.png" alt="Личные события Бориса" class="tab-image">
</div>
<div class="chronology-items-wrapper">
<div class="chronology-item">
<strong>Эпизод #4: Сварка по-стахановски</strong>
<p>
Ночь, подвал и старый, но верный самогонный аппарат опекуна, требующий "планового ремонта". Борис, вооружившись сварочником и воспоминаниями, решил "дать вторую жизнь заслуженному ветерану производства", попутно размышляя о качестве современных технологий и крепости старых уз.
</p>
<ul>
<li><strong>Участники:</strong> Борис Стальнов, Дух Опекуна (и его чертежи), Искры Ностальгии</li>
<li><strong>Дата:</strong> 20 день 5-й луны</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
// Скрипт для переключения вкладок хронологии
function openTab(evt, tabName) {
// Остановить всплытие события, чтобы не сворачивалась вся карточка
evt.stopPropagation();
// Получить все элементы с классом "chronology-tab-pane" и скрыть их
let tabPanes = document.getElementsByClassName("chronology-tab-pane");
for (let i = 0; i < tabPanes.length; i++) {
tabPanes[i].classList.remove("active");
}
// Получить все элементы с классом "chronology-tab-button" и удалить класс "active"
let tabButtons = document.getElementsByClassName("chronology-tab-button");
for (let i = 0; i < tabButtons.length; i++) {
tabButtons[i].classList.remove("active");
}
// Показать текущую вкладку и добавить класс "active" к кнопке, которая открыла вкладку
document.getElementById(tabName).classList.add("active");
evt.currentTarget.classList.add("active");
}
// Скрипт для переключения всей карточки (сворачивание/разворачивание)
function toggleCard(cardElement) {
// Проверяем, был ли клик по элементу внутри карточки, который должен предотвращать сворачивание
// Например, если кликнули по ссылке или кнопке внутри раскрытого контента
if (event.target.closest('.boris-full-profile-btn') || event.target.closest('.chronology-tab-button') || event.target.closest('a')) {
return; // Если клик был по этим элементам, не сворачиваем карточку
}
cardElement.classList.toggle('active');
}
// Инициализация: показать первую вкладку при загрузке, если JavaScript включен
document.addEventListener('DOMContentLoaded', (event) => {
const firstTabButton = document.querySelector('.chronology-tabs .chronology-tab-button.active');
if (firstTabButton) {
const tabNameMatch = firstTabButton.getAttribute('onclick').match(/'([^']+)'/);
if (tabNameMatch && tabNameMatch[1]) {
const firstTabName = tabNameMatch[1];
const firstTabPane = document.getElementById(firstTabName);
if (firstTabPane) {
openTab({ currentTarget: firstTabButton, stopPropagation: function(){} }, firstTabName);
}
}
} else {
const firstButtonOverall = document.querySelector('.chronology-tabs .chronology-tab-button');
if (firstButtonOverall) {
const tabNameMatch = firstButtonOverall.getAttribute('onclick').match(/'([^']+)'/);
if (tabNameMatch && tabNameMatch[1]) {
openTab({ currentTarget: firstButtonOverall, stopPropagation: function(){} }, tabNameMatch[1]);
}
}
}
});
</script>[/html]
Поделиться352025-06-03 23:20:25
- Администратор
- Сообщений: 70
[html]<div style="font-family: 'Georgia', serif; max-width: 850px; margin: 20px auto; border-radius: 6px; overflow: hidden; background-color: #333333; border: 2px solid #A30000; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);">
<div style="position: relative; width: 100%; height: 300px; overflow: hidden; border-bottom: 3px solid #DAA520;">
<img src="https://forumupload.ru/uploads/001c/1f/11/2/398083.jpg" alt="Обложка эпизода" style="width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(20%) brightness(80%);">
<div style="position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to top, rgba(51,51,51,0.9) 0%, rgba(51,51,51,0) 100%); padding: 30px; text-align: center;">
<h1 style="margin: 0; color: #DAA520; font-size: 2.8em; text-transform: uppercase; letter-spacing: 2px; text-shadow: 2px 2px 5px rgba(0,0,0,0.8); font-weight: bold;">[НАЗВАНИЕ ЭПИЗОДА]</h1>
</div>
</div>
<div style="padding: 25px; background-color: #444444; border-bottom: 1px solid #555555;">
<p style="margin: 0 0 15px 0; font-size: 1em; color: #AAAAAA; text-transform: uppercase;">Музыка для атмосферы:</p>
<audio controls style="width: 100%; filter: invert(8%);" preload="none">
<source src="https://forumstatic.ru/files/001c/1f/11/78308.mp3?v=1" type="audio/mpeg">
Ваш браузер не поддерживает элемент audio.
</audio>
</div>
<details style="padding: 0 25px 25px 25px;">
<summary style="display: flex; align-items: center; cursor: pointer; padding: 25px 0; color: #DAA520; font-size: 1.2em; font-weight: bold; border-bottom: 2px solid #8B0000; user-select: none; text-transform: uppercase; letter-spacing: 1px; transition: color 0.3s ease;">
<span style="display: inline-block; width: 20px; height: 20px; text-align: center; line-height: 18px; border: 2px solid #DAA520; color: #DAA520; font-size: 1.5em; margin-right: 15px; transform: rotate(90deg); transition: transform 0.3s ease-in-out;">›</span>
Подробнее об эпизоде
</summary>
<div style="padding-top: 25px;">
<div style="padding-bottom: 25px; border-bottom: 1px dashed #666666; color: #CCCCCC;">
<h2 style="margin-top: 0; margin-bottom: 20px; font-size: 1.8em; border-bottom: 3px solid #8B0000; padding-bottom: 10px; color: #DAA520; text-transform: uppercase;">Описание Эпизода</h2>
<p style="margin: 0 0 15px 0; line-height: 1.8; font-size: 1.1em;">
[ПОЛНОЕ ОПИСАНИЕ ЭПИЗОДА. Расскажите, что происходит, какие события разворачиваются.]
</p>
<p style="margin: 20px 0 0 0; font-size: 1em; color: #AAAAAA;">
<strong>Дата эпизода:</strong> <span style="color: #DAA520;">[ДАТА ПРОИСХОЖДЕНИЯ ЭПИЗОДА, например, 25 мая 2025 года]</span>
</p>
</div>
<div style="padding-top: 15px; padding-bottom: 10px;">
<h2 style="margin-top: 0; margin-bottom: 15px; font-size: 1.8em; border-bottom: 3px solid #8B0000; padding-bottom: 10px; color: #DAA520; text-transform: uppercase;">Участники</h2>
<div style="display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 20px;">
<div style="display: flex; flex-direction: column; gap: 15px; flex: 0 0 auto; width: calc(65% - 10px);">
<div style="background: linear-gradient(135deg, #444444, #3a3a3a); border-radius: 4px; padding: 15px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); border: 1px solid #666666; display: flex; align-items: center;">
<img src="URL_АВАТАРА_ИГРОКА_1" alt="Аватар участника 1" style="width: 70px; height: 70px; object-fit: cover; margin-right: 15px; border: 2px solid #DAA520; border-radius: 2px;">
<div>
<h3 style="margin: 0 0 4px 0; font-size: 1.25em; color: #ffffff; text-shadow: 1px 1px 2px rgba(0,0,0,0.5);">[НИК ИГРОКА 1]</h3>
<p style="margin: 0; font-size: 0.95em; color: #AAAAAA; line-height: 1.4;">[Краткое описание роли или персонажа игрока 1]</p>
</div>
</div>
<div style="background: linear-gradient(135deg, #444444, #3a3a3a); border-radius: 4px; padding: 15px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); border: 1px solid #666666; display: flex; align-items: center;">
<img src="URL_АВАТАРА_ИГРОКА_2" alt="Аватар участника 2" style="width: 70px; height: 70px; object-fit: cover; margin-right: 15px; border: 2px solid #DAA520; border-radius: 2px;">
<div>
<h3 style="margin: 0 0 4px 0; font-size: 1.25em; color: #ffffff; text-shadow: 1px 1px 2px rgba(0,0,0,0.5);">[НИК ИГРОКА 2]</h3>
<p style="margin: 0; font-size: 0.95em; color: #AAAAAA; line-height: 1.4;">[Краткое описание роли или персонажа игрока 2]</p>
</div>
</div>
</div>
<div style="flex: 0 0 auto; width: calc(35% - 10px); text-align: center;">
<img src="https://forumupload.ru/uploads/001c/1f/11/2/546911.jpg" alt="Декоративная картинка" style="width: 100%; height: 285px; object-fit: cover; border-radius: 4px; border: 2px solid #DAA520; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);">
</div>
</div>
</div>
</div>
</details>
<style>
/* CSS для анимации стрелочки */
details[open] > summary > span {
transform: rotate(270deg) !important;
}
</style>
</div>[/html]
Поделиться362025-06-06 09:47:14
- Администратор
- Сообщений: 70
Поделиться372025-06-11 08:02:36
- Администратор
- Сообщений: 70
[html]<!-- Начало кода Бинго-генератора -->
<div id="bleach-bingo-generator-v2">
<h1>Бинго Персонажа: Путь Синигами</h1>
<p class="bingo-subtitle">Сделайте скриншот и отметьте, что подходит вашему персонажу. Нажмите кнопку, чтобы получить новую карточку!</p>
<div class="bingo-grid-wrapper">
<div id="bingo-grid-container">
<!-- Ячейки генерируются JavaScript -->
</div>
</div>
<button id="bingo-generate-btn">Сгенерировать новое бинго</button>
<style>
/* Все стили применяются только внутри #bleach-bingo-generator-v2 для изоляции */
#bleach-bingo-generator-v2 {
--bleach-orange: #ff6600;
--bleach-bg-dark: #1a1a1a;
--bleach-bg-light: #2a2a2a;
--bleach-border-color: #444;
--bleach-text-light: #f0f0f0;
--bleach-text-dark: #111;
background-color: var(--bleach-bg-dark);
color: var(--bleach-text-light);
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
text-align: center;
padding: 25px;
border-radius: 12px;
border: 1px solid var(--bleach-border-color);
box-shadow: 0 0 25px rgba(255, 102, 0, 0.3);
max-width: 800px;
margin: 20px auto;
}
#bleach-bingo-generator-v2 h1 {
color: var(--bleach-orange);
text-transform: uppercase;
letter-spacing: 2px;
border-bottom: 2px solid var(--bleach-orange);
padding-bottom: 10px;
margin: 0 0 10px 0;
font-size: 2em;
}
#bleach-bingo-generator-v2 .bingo-subtitle {
font-size: 1.1em;
color: #ccc;
margin-bottom: 20px;
}
#bleach-bingo-generator-v2 .bingo-grid-wrapper {
border: 2px solid var(--bleach-border-color);
padding: 10px;
background-color: var(--bleach-bg-light);
margin-bottom: 25px;
}
#bleach-bingo-generator-v2 #bingo-grid-container {
display: grid;
gap: 10px;
grid-template-columns: repeat(5, 1fr);
}
#bleach-bingo-generator-v2 .bingo-cell {
background-color: #333;
border: 1px solid var(--bleach-border-color);
aspect-ratio: 1 / 1;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
padding: 5px;
font-size: 14px;
line-height: 1.3;
cursor: default;
transition: background-color 0.2s, transform 0.2s;
overflow: hidden;
color: var(--bleach-text-light);
}
#bleach-bingo-generator-v2 .free-space {
background-color: var(--bleach-orange);
color: var(--bleach-text-dark);
font-weight: bold;
font-size: 1.6em;
text-transform: uppercase;
}
#bleach-bingo-generator-v2 .free-space:hover {
background-color: #ff8533;
}
#bleach-bingo-generator-v2 .bingo-cell:not(.free-space):hover {
background-color: #4a4a4a;
transform: scale(1.03);
z-index: 10;
}
#bleach-bingo-generator-v2 #bingo-generate-btn {
background-color: var(--bleach-orange);
color: #fff;
border: none;
padding: 15px 30px;
font-size: 1.2em;
font-weight: bold;
text-transform: uppercase;
border-radius: 5px;
cursor: pointer;
transition: all 0.3s;
}
#bleach-bingo-generator-v2 #bingo-generate-btn:hover {
background-color: #ff8533;
transform: translateY(-3px);
box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}
@media (max-width: 600px) {
#bleach-bingo-generator-v2 .bingo-cell {
font-size: 10px;
}
#bleach-bingo-generator-v2 .free-space {
font-size: 1.2em;
}
}
</style>
<script>
{ // Изолирующий блок для скрипта
const GRID_SIZE = 5;
// --- ОГРОМНЫЙ СПИСОК ВАРИАНТОВ (150+) ---
const bingoPrompts = [
"Знает имя своего дзанпакто", "Достиг банкая", "Проиграл дуэль и сделал выводы",
"Заблудился в Сейрейтее", "Ненавидит бумажную работу", "Пил саке с Кьёраку",
"Считает, что у Кона ужасный вкус", "Спорил о справедливости с капитаном", "Получил нагоняй от Уноханы",
"Был в Уэко Мундо", "Покупал вещи в магазине Урахары", "Тайно восхищается Зараки",
"Пытался понять рисунки Рукии", "Знает кидо выше 60-го уровня", "Прятал закуски от Ячиру",
"Имеет шрам от пустого", "Сомневался в приказах Общества Душ", "Дружит с кем-то из другого отряда",
"Считает себя экспертом в моде Каракуры", "Не понимает любовь Бьякуи к водорослям",
"Слушал лекцию по стратегии", "Проспал важное собрание", "Попал под 'дружественный огонь'",
"Сломал что-то в НИИ и свалил на другого", "Имеет странное хобби",
"Считает, что у Исиды отличный вкус", "Защищал человека в мире живых", "Пытался подружиться с Бьякуей",
"Недолюбливает Маюри Куроцучи", "Считает очки Тоусена стильными", "Рассказывал несмешную шутку",
"Тренировался до потери сознания", "Носит нестандартный элемент формы", "Ходил на миссию под прикрытием",
"Общался с модифицированной душой", "Пробовал еду Орихиме (и выжил)",
"Дал кому-то прозвище", "Считает, что у Ренджи слишком много татуировок", "Помогал в 4-м отряде",
"Участвовал в празднике фейерверков", "Знает, где в Руконгае лучшая лапша", "Тайно шипперит кого-то",
"Пытался повторить танец квинси", "Боится насекомых больше, чем пустых", "Пытался понять, о чем думает Комамура",
"Втайне читает любовные романы", "Потерял друга в бою", "Смотрел фильмы с Доном Канонджи",
"Считает цвет волос Ичиго ненатуральным", "Дрался на Арене Покаяния", "Отдал свой паек голодному",
"Завидует скорости Йоруичи", "Готовил по рецепту Рангику (и пожалел)", "Считает банкай Хицугаи слишком холодным",
"Имеет доверенное лицо для разговоров", "Носит с собой талисман на удачу", "Плакал из-за книги/фильма",
"Пытался помирить Иккаку и Юмичику", "Получил комплимент от врага", "Спас кота/собаку в мире живых",
"Знает хотя бы одну песню из мира живых", "Думает, что шляпа Урахары живая", "Никогда не видел моря",
"Имеет в комнате что-то из мира живых", "Верит в приметы", "Мечтает стать капитаном",
"Пытался скрыть свои духовные нити", "Считает, что у Айзена был хороший парикмахер",
"Разговаривает со своим дзанпакто", "Использовал гигай", "Встречал вайзарда",
"Спорил с кем-то из 11 отряда", "Завидовал чужому дзанпакто", "Нарушил прямой приказ",
"Был в Королевском дворце", "Получил травму от своего же кидо", "Считает, что Айзен был прав",
"Пытался объяснить синигами, что такое Wi-Fi", "Носит с собой Soul Candy", "Чинил свой гигай",
"Спорил, кто круче: Зангетсу или Сенбонзакура", "Нашел тайный проход в Сейрейтее",
"Получал зарплату в Обществе Душ", "Участвовал в спортивном фестивале", "Выполнял миссию с арранкаром",
"Боится гнева Ямамото", "Считает себя фотогеничным", "Не умеет готовить",
"Пробовал кофе", "Думает, что Чад слишком молчаливый", "Восхищается капитаном своего отряда",
"Считает вайзардов крутыми", "Пытался флиртовать и провалился", "Знает слабость кого-то из капитанов",
"Помогал Рукии с домашкой по истории", "Посещал горячие источники", "Имеет любимый эндинг 'Блича'",
"Считает, что у Гриммджоу проблемы с гневом", "Пытался погладить Комамуру", "Заблудился в лесу Меносов",
"Проиграл в карты Рангику", "Дрался спина к спине с товарищем", "Спас новичка от пустого",
"Выслушивал жалобы Хинамори", "Считает Сой Фон слишком строгой", "Украл хурму с дерева Бьякуи",
"Пытался понять Хашвальта", "Имеет зуб на квинси", "Считает фуллбрингеров странными",
"Думает, что Улькиорра был одинок", "Знает наизусть правила Готея 13", "Был свидетелем казни",
"Участвовал в чайной церемонии", "Помогал строить что-то в Сейрейтее", "Дрался с гигантом",
"Использовал банкай и повредил город", "Тайно подражает кому-то", "Считает себя недооцененным",
"Имеет аллергию на что-то", "Знает больше 3 хадо и 3 бакудо", "Видел бой двух капитанов",
"Был на собрании Женской ассоциации синигами", "Думает, что у Зараки нет чувства направления",
"Переживал вторжение в Сейрейтей", "Боролся с искушением силы пустого", "Был ранен в сердце (буквально или фигурально)",
"Давал клятву", "Знает истинную природу Короля Душ", "Считает, что у Маюри есть сердце",
"Защищал Каракуру от вторжения", "Никогда не использовал кидо в бою", "Имеет друга-квинси",
"Считает себя умнее Урахары", "Пытался приручить пустого", "Носит очки без диоптрий",
"Имеет счет в банке мира живых", "Мечтает об отпуске на Окинаве", "Считает, что в Уэко Мундо не хватает зелени",
"Пробовал рамэн из Ичираку (из другого аниме)", "Считает, что его история заслуживает отдельной арки"
];
const bingoGenerator = document.getElementById('bleach-bingo-generator-v2');
const gridContainer = bingoGenerator.querySelector('#bingo-grid-container');
const generateBtn = bingoGenerator.querySelector('#bingo-generate-btn');
const totalCells = GRID_SIZE * GRID_SIZE;
const centerCellIndex = Math.floor(totalCells / 2);
function generateBingo() {
if (bingoPrompts.length < totalCells - 1) {
gridContainer.innerHTML = `<p style="color: var(--bleach-orange);">Ошибка: Недостаточно вариантов для бинго.</p>`;
return;
}
gridContainer.innerHTML = '';
const shuffledPrompts = [...bingoPrompts].sort(() => 0.5 - Math.random());
const selectedPrompts = shuffledPrompts.slice(0, totalCells - 1);
let promptCounter = 0;
for (let i = 0; i < totalCells; i++) {
const cell = document.createElement('div');
cell.classList.add('bingo-cell');
if (i === centerCellIndex) {
cell.classList.add('free-space');
cell.innerHTML = 'БАНКАЙ!';
} else {
cell.textContent = selectedPrompts[promptCounter];
promptCounter++;
}
gridContainer.appendChild(cell);
}
}
if (generateBtn && gridContainer) {
generateBtn.addEventListener('click', generateBingo);
generateBingo(); // Первый запуск
}
}
</script>
</div>
<!-- Конец кода Бинго-генератора -->[/html]
Поделиться382025-06-11 08:05:06
- Администратор
- Сообщений: 70
[html]<!-- Начало кода Генератора AU-Ивентов -->
<div id="bleach-au-generator-v2">
<h2>Генератор Альтернативных Вселенных</h2>
<div class="au-rules-container">
<button class="au-rules-toggle">Как это работает? (Нажмите, чтобы раскрыть)</button>
<div class="au-rules-content">
<p><strong>Это ваш шанс дать волю воображению!</strong></p>
<p>Этот генератор создает случайный сценарий Альтернативной Вселенной (AU) для вашего персонажа. Ваша задача — погрузиться в эти необычные условия и описать, как бы ваш герой жил, что чувствовал и с какими трудностями сталкивался.</p>
<ul>
<li><strong>Цель:</strong> Написать небольшой пост (от 1500-2000 символов) или сделать творческую работу (арт, коллаж) на заданную тему.</li>
<li><strong>Где публиковать:</strong> В специальной теме во флуде или в творческом разделе вашего форума.</li>
<li><strong>Нет давления:</strong> Это развлечение для удовольствия. Не бойтесь экспериментировать и пробовать самые смелые идеи!</li>
</ul>
<p>Сделайте скриншот выпавшего вам сценария и прикрепите к своему посту. Удачи!</p>
</div>
</div>
<div class="au-prompt-box">
<p><strong>Что, если бы ваш персонаж...</strong></p>
<h3 id="au-output">...нажал на эту кнопку?</h3>
</div>
<button id="au-generate-btn">🌀 Получить новую реальность</button>
<style>
#bleach-au-generator-v2 {
--au-purple: #8e44ad;
--au-yellow: #f1c40f;
--au-bg: #2c2c54;
--au-bg-light: #3e3e75;
font-family: 'Roboto', 'Helvetica Neue', sans-serif;
background: var(--au-bg);
background-image: linear-gradient(45deg, rgba(0,0,0,0.1) 25%, transparent 25%, transparent 50%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.1) 75%, transparent 75%, transparent);
background-size: 40px 40px;
color: #fff;
padding: 30px;
border-radius: 15px;
max-width: 700px;
margin: 20px auto;
text-align: center;
border: 2px solid var(--au-purple);
box-shadow: 0 0 20px rgba(142, 68, 173, 0.4);
}
#bleach-au-generator-v2 h2 {
margin: 0 0 20px 0;
font-size: 2.2em;
text-transform: uppercase;
color: #fff;
text-shadow: 0 0 5px var(--au-purple);
}
#bleach-au-generator-v2 .au-rules-container {
margin-bottom: 25px;
}
#bleach-au-generator-v2 .au-rules-toggle {
width: 100%;
background: none;
border: 1px solid var(--au-purple);
color: #ccc;
padding: 10px;
font-size: 1.1em;
cursor: pointer;
border-radius: 5px;
transition: all 0.3s;
}
#bleach-au-generator-v2 .au-rules-toggle:hover {
background: var(--au-purple);
color: #fff;
}
#bleach-au-generator-v2 .au-rules-content {
max-height: 0;
overflow: hidden;
text-align: left;
background: rgba(0,0,0,0.2);
border-radius: 0 0 5px 5px;
transition: max-height 0.5s ease-out;
padding: 0 20px;
}
#bleach-au-generator-v2 .au-rules-content.active {
padding: 20px;
}
#bleach-au-generator-v2 .au-rules-content ul {
list-style-type: '✧ ';
padding-left: 20px;
}
#bleach-au-generator-v2 .au-rules-content li {
margin-bottom: 10px;
}
#bleach-au-generator-v2 .au-prompt-box {
background: rgba(0,0,0,0.3);
border-radius: 10px;
padding: 20px;
margin-bottom: 25px;
border-left: 3px solid var(--au-yellow);
}
#bleach-au-generator-v2 .au-prompt-box p { margin: 0; color: #ddd; font-size: 1.1em; }
#bleach-au-generator-v2 #au-output {
font-size: 1.8em;
color: var(--au-yellow);
margin: 10px 0 0 0;
min-height: 50px;
line-height: 1.4;
}
#bleach-au-generator-v2 #au-generate-btn {
background: var(--au-purple);
color: white;
border: none;
padding: 15px 35px;
font-size: 1.2em;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s;
text-transform: uppercase;
letter-spacing: 1px;
}
#bleach-au-generator-v2 #au-generate-btn:hover {
background-color: #9b59b6;
transform: rotate(2deg) scale(1.05);
box-shadow: 0 5px 15px rgba(0,0,0,0.4);
}
</style>
<script>
{ // Изолирующий блок
const auScenarios = [
"...был учителем в старшей школе Каракуры?", "...работал бариста в уютном кафе?",
"...стал рок-музыкантом в популярной группе?", "...оказался квинси, а не синигами?",
"...поменялся телами со своим дзанпакто на день?", "...стал владельцем магазина сладостей?",
"...был частным детективом в нуарном городе?", "...попал в мир жестокой видеоигры?",
"...оказался членом клана Якудза?", "...стал популярным видеоблогером?",
"...был пиратом в поисках сокровищ?", "...проснулся в теле другого капитана?",
"...был обычным офисным работником, уставшим от рутины?", "...стал гонщиком в подпольных гонках?",
"...был известным шеф-поваром со своей звездой Мишлен?", "...оказался в Хогвартсе на чужом факультете?",
"...стал последним выжившим в зомби-апокалипсисе?", "...был королевским рыцарем в фэнтези-мире?",
"...стал астронавтом на далекой планете?", "...был хранителем древней библиотеки?",
"...оказался цирковым артистом?", "...был шпионом во времена Холодной войны?",
"...стал фермером, выращивающим говорящие овощи?", "...был частью команды охотников за привидениями?",
"...работал в цветочном магазине Юмичики?", "...попал в ситком с закадровым смехом?",
"...оказался правителем маленького, но гордого королевства?", "...был наёмником в киберпанк-мегаполисе?",
"...стал монахом в уединенном горном монастыре?", "...был моделью для модных журналов Сейрейтея?",
"...оказался пациентом в больнице 4-го отряда с амнезией?", "...был гениальным ученым, как Маюри, но добрым?",
"...стал профессиональным игроком в сёги?", "...был телохранителем важной персоны?",
"...усыновил маленького пустого как питомца?", "...работал в службе доставки лапши?",
"...попал в викторианскую Англию?", "...стал лидером повстанцев против тирании?",
"...был художником, который не может найти вдохновение?", "...оказался в команде рейнджеров для защиты мира?",
"...был вынужден работать в магазине Урахары за долги?", "...стал волшебной девочкой (или мальчиком)?",
"...попал в мир, где кидо — единственный вид магии?", "...был смотрителем маяка на краю света?",
"...стал археологом, ищущим артефакты в Уэко Мундо?", "...оказался тренером боевых покемонов?",
"...был актером, играющим роль синигами в сериале?", "...открыл приют для бездомных модифицированных душ?"
];
const generator = document.getElementById('bleach-au-generator-v2');
const outputH3 = generator.querySelector('#au-output');
const button = generator.querySelector('#au-generate-btn');
const toggleBtn = generator.querySelector('.au-rules-toggle');
const rulesContent = generator.querySelector('.au-rules-content');
function generateAU() {
const scenario = auScenarios[Math.floor(Math.random() * auScenarios.length)];
outputH3.textContent = scenario;
}
function toggleRules() {
const isActive = rulesContent.classList.contains('active');
if (isActive) {
rulesContent.style.maxHeight = null;
rulesContent.classList.remove('active');
toggleBtn.textContent = 'Как это работает? (Нажмите, чтобы раскрыть)';
} else {
rulesContent.classList.add('active');
rulesContent.style.maxHeight = rulesContent.scrollHeight + "px";
toggleBtn.textContent = 'Скрыть описание';
}
}
if (button) {
button.addEventListener('click', generateAU);
generateAU(); // Первый запуск, чтобы не было пусто
}
if (toggleBtn) {
toggleBtn.addEventListener('click', toggleRules);
}
}
</script>
</div>
<!-- Конец кода Генератора AU-Ивентов -->[/html]
Поделиться392025-06-11 08:14:30
- Администратор
- Сообщений: 70
[html]<!-- Начало кода Динамического Генератора Ивентов для АМС -->
<div id="bleach-gm-event-generator-v2">
<div class="gm-header">
<h2>СИНТЕТИЗАТОР СЦЕНАРИЕВ: АМС</h2>
<p class="gm-subtitle">Запрос новой директивы для оперативного развертывания...</p>
</div>
<div class="gm-dossier">
<div class="gm-dossier-row">
<strong>ТИП ОПЕРАЦИИ:</strong>
<span id="gm-event-type">[Ожидание данных]</span>
</div>
<div class="gm-dossier-row">
<strong>АНАЛИЗ СИТУАЦИИ (ЗАВЯЗКА):</strong>
<span id="gm-event-concept">[Ожидание данных]</span>
</div>
<div class="gm-dossier-row">
<strong>СЕКТОР ДЕЙСТВИЯ (ЛОКАЦИЯ):</strong>
<span id="gm-event-location">[Ожидание данных]</span>
</div>
<div class="gm-dossier-row">
<strong>ОСНОВНАЯ ЗАДАЧА (ЦЕЛЬ):</strong>
<span id="gm-event-objective">[Ожидание данных]</span>
</div>
<div class="gm-dossier-row gm-complication-row">
<strong>ВЕРОЯТНОЕ ОСЛОЖНЕНИЕ (ТВИСТ):</strong>
<span id="gm-event-complication">[Ожидание данных]</span>
</div>
</div>
<div class="gm-footer">
<p>// Примечание: Данные являются отправной точкой. Адаптация и импровизация — ключ к успеху миссии.</p>
<button id="gm-generate-btn">► Сгенерировать новый сценарий</button>
</div>
<style>
#bleach-gm-event-generator-v2 {
--gm-bg: #1a1c1d;
--gm-border: #00bcd4;
--gm-text: #e0e0e0;
--gm-accent-text: #80deea;
--gm-red-text: #ff8a80;
font-family: 'Consolas', 'Menlo', 'Courier New', monospace;
background: var(--gm-bg);
border: 1px solid #2a2a2a;
padding: 25px;
max-width: 800px;
margin: 20px auto;
color: var(--gm-text);
box-shadow: inset 0 0 15px rgba(0,0,0,0.5);
}
#bleach-gm-event-generator-v2 .gm-header { text-align: center; border-bottom: 1px solid #333; padding-bottom: 15px; margin-bottom: 20px; }
#bleach-gm-event-generator-v2 h2 { margin: 0; color: var(--gm-border); letter-spacing: 2px; }
#bleach-gm-event-generator-v2 .gm-subtitle { margin: 5px 0 0 0; color: #777; font-size: 0.9em; }
#bleach-gm-event-generator-v2 .gm-dossier { background: rgba(0,0,0,0.2); padding: 20px; border-left: 3px solid var(--gm-border); }
#bleach-gm-event-generator-v2 .gm-dossier-row { margin-bottom: 18px; line-height: 1.6; }
#bleach-gm-event-generator-v2 .gm-dossier-row strong { color: var(--gm-accent-text); display: block; margin-bottom: 4px;}
#bleach-gm-event-generator-v2 .gm-complication-row strong { color: var(--gm-red-text); }
#bleach-gm-event-generator-v2 .gm-footer { text-align: center; margin-top: 20px; padding-top: 15px; border-top: 1px solid #333; }
#bleach-gm-event-generator-v2 .gm-footer p { font-size: 0.9em; color: #666; }
#bleach-gm-event-generator-v2 #gm-generate-btn { background: var(--gm-border); color: #111; border: none; padding: 12px 25px; font-family: 'Consolas', monospace; font-size: 1.1em; font-weight: bold; cursor: pointer; transition: all 0.2s; margin-top: 10px; }
#bleach-gm-event-generator-v2 #gm-generate-btn:hover { background: #4dd0e1; box-shadow: 0 0 15px var(--gm-border); }
</style>
<script>
{ // Изолирующий блок
// --- БАЗА КОМПОНЕНТОВ ---
const eventTypes = ["Мини-квест (1-3 игрока)", "Локальный ивент", "Социальный ивент", "Боевое событие", "Мистическое расследование", "Завязка для арки", "Политическая интрига", "Экспедиция"];
// Компоненты для ЗАВЯЗКИ
const agents = ["Группа арранкаров-ренегатов", "Древний артефакт, пробудившийся от сна", "Таинственный культ из Руконгая", "Сбежавший эксперимент из НИИ", "Призрак могущественного синигами прошлого", "Неизвестный фуллбрингер", "Заблудившаяся в Сейрейтее душа Плюса с уникальной силой", "Отряд квинси-разведчиков", "Необычайно сильный и хитрый пустой", "Аномальное слияние нескольких душ"];
const actions = ["пытается открыть нелегальный портал", "распространяет аномальную духовную энергию", "похищает душ с особыми способностями", "пытается захватить контроль над важным объектом", "ищет способ уничтожить защитный барьер", "создает иллюзии, сводящие с ума", "оставляет зашифрованные послания", "активирует древние руины", "вербует сторонников среди жителей Руконгая", "разрушает поток духовных частиц"];
const consequences = ["что искажает реальность в определённом секторе", "что вызывает панику среди жителей", "что привлекает внимание враждебных фракций", "что может привести к крупномасштабному вторжению", "что угрожает балансу душ", "что создает временные петли", "что может раскрыть тайну Общества Душ", "что истощает духовную энергию в округе"];
// Компоненты для ЦЕЛИ
const objectiveVerbs = ["Расследовать", "Защитить", "Эвакуировать", "Захватить", "Нейтрализовать", "Провести разведку", "Найти и доставить", "Расшифровать", "Выследить и обезвредить", "Пережить"];
const objectiveNouns = ["источник аномалии", "важного NPC", "мирных жителей из зоны опасности", "вражеского лидера", "нестабильный артефакт", "местонахождение вражеской базы", "ценные разведданные", "похищенных синигами", "ключ к решению проблемы", "волны нападающих"];
const objectiveConditions = ["не привлекая лишнего внимания", "до прибытия подкрепления", "используя только ограниченный набор способностей", "пока не стало слишком поздно", "прежде чем враг завершит свой ритуал", "не допустив жертв среди гражданских", "не нарушая приказ о неразглашении", "в условиях полного радиомолчания"];
// Расширенные списки
const locations = ["В трущобах 78-го района Руконгая", "На территории Академии Синигами", "В деловом квартале Каракуры", "В Уэко Мундо, недалеко от Лас Ночес", "В бараках 11-го отряда", "На закрытой территории поместья Кучики", "В подземных туннелях под Сейрейтеем", "В лесу Меносов", "В магазине Кискэ Урахары", "На Арене Покаяния", "Внутри заброшенной лаборатории НИИ", "На одной из тренировочных площадок", "В тихом храме на окраине Сейрейтея", "На крышах высотных зданий Каракуры", "Внутри Искаженного пространства (Дангай)"];
const complications = ["Главный подозреваемый оказывается на самом деле жертвой.", "Артефакт, который нужно найти, обладает сознанием и не хочет, чтобы его находили.", "Приказы начальства оказываются ложью или провокацией.", "В конфликт вмешивается третья, неизвестная сторона.", "Источник проблемы — невинный ребенок, не контролирующий свою силу.", "Решение одной проблемы немедленно порождает другую, еще более серьезную.", "Один из NPC-союзников на самом деле предатель.", "Местные жители активно мешают расследованию, защищая виновника.", "Способности игроков временно ослаблены или изменены из-за аномалии.", "Враг знает о каждом шаге игроков.", "Моральная дилемма: для победы нужно пожертвовать чем-то или кем-то важным.", "Погода или окружение становятся отдельным противником.", "Оборудование (гигаи, телефоны душ) выходит из строя в самый неподходящий момент."];
const generator = document.getElementById('bleach-gm-event-generator-v2');
const typeSpan = generator.querySelector('#gm-event-type');
const conceptSpan = generator.querySelector('#gm-event-concept');
const locationSpan = generator.querySelector('#gm-event-location');
const objectiveSpan = generator.querySelector('#gm-event-objective');
const complicationSpan = generator.querySelector('#gm-event-complication');
const button = generator.querySelector('#gm-generate-btn');
function getRandomItem(arr) { return arr[Math.floor(Math.random() * arr.length)]; }
function generateEvent() {
// Динамическая сборка Завязки
const agent = getRandomItem(agents);
const action = getRandomItem(actions);
const consequence = getRandomItem(consequences);
conceptSpan.textContent = `${agent} ${action}, ${consequence}.`;
// Динамическая сборка Цели
const verb = getRandomItem(objectiveVerbs);
const noun = getRandomItem(objectiveNouns);
const condition = getRandomItem(objectiveConditions);
objectiveSpan.textContent = `${verb} ${noun}, ${condition}.`;
// Выбор остальных компонентов
typeSpan.textContent = getRandomItem(eventTypes);
locationSpan.textContent = getRandomItem(locations);
complicationSpan.textContent = getRandomItem(complications);
}
if(button) {
button.addEventListener('click', generateEvent);
generateEvent(); // Первый запуск
}
}
</script>
</div>
<!-- Конец кода Динамического Генератора Ивентов для АМС -->[/html]
Поделиться402025-06-13 13:37:04
- Администратор
- Сообщений: 70
