[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=Cinzel:wght@700&family=Raleway:wght@300;400;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Raleway', sans-serif;
background: linear-gradient(135deg, #0a0e27, #1a237e, #283593);
color: #f5f5f5;
min-height: 100vh;
padding: 40px 20px;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
position: relative;
}
/* Анимированные звезды на фоне */
.stars {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 0;
}
.star {
position: absolute;
background-color: #fff;
border-radius: 50%;
animation: twinkle 3s infinite ease-in-out;
}
@keyframes twinkle {
0%, 100% { opacity: 0.2; transform: scale(1); }
50% { opacity: 1; transform: scale(1.2); }
}
.forum-header {
max-width: 900px;
width: 100%;
background: rgba(10, 14, 39, 0.7);
backdrop-filter: blur(10px);
border-radius: 20px;
overflow: hidden;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
border: 1px solid rgba(255, 255, 255, 0.1);
position: relative;
z-index: 1;
}
.quote-container {
position: relative;
padding: 0;
overflow: hidden;
height: 350px;
}
.quote-image {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 8s ease;
}
.quote-container:hover .quote-image {
transform: scale(1.05);
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to bottom, rgba(10, 14, 39, 0.2), rgba(10, 14, 39, 0.8));
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 30px;
}
.quote-text {
font-family: 'Cinzel', serif;
font-size: 1.8rem;
font-weight: 700;
color: #f5f5f5;
text-align: right;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
margin-bottom: 15px;
opacity: 0;
animation: fadeIn 1.5s ease forwards;
animation-delay: 0.5s;
}
.main-text {
padding: 50px 40px;
text-align: center;
position: relative;
}
.main-text h1 {
font-family: 'Cinzel', serif;
font-size: 2.8rem;
font-weight: 700;
margin-bottom: 25px;
background: linear-gradient(90deg, #ffd54f, #ffecb3);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
text-shadow: 0 2px 10px rgba(255, 213, 79, 0.3);
line-height: 1.3;
opacity: 0;
animation: fadeIn 1.5s ease forwards;
animation-delay: 1s;
}
.subtitle {
font-size: 1.3rem;
font-weight: 300;
line-height: 1.6;
max-width: 80%;
margin: 0 auto 30px;
opacity: 0;
animation: fadeIn 1.5s ease forwards;
animation-delay: 1.5s;
}
/* Приветствие от GLM-4.5 */
.greeting {
font-family: 'Raleway', sans-serif;
font-style: italic;
font-size: 1.1rem;
line-height: 1.8;
max-width: 85%;
margin: 40px auto 0;
padding: 25px 30px;
background: rgba(255, 213, 79, 0.1);
border-left: 4px solid rgba(255, 213, 79, 0.5);
border-radius: 0 10px 10px 0;
opacity: 0;
animation: fadeIn 1.5s ease forwards;
animation-delay: 2s;
text-align: left;
}
.greeting-signature {
text-align: right;
margin-top: 15px;
font-weight: 600;
font-style: normal;
color: rgba(255, 213, 79, 0.8);
}
/* Плавающие частицы */
.particles {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
pointer-events: none;
}
.particle {
position: absolute;
background-color: rgba(255, 213, 79, 0.5);
border-radius: 50%;
pointer-events: none;
animation: float 15s infinite linear;
}
@keyframes float {
0% {
transform: translateY(100vh) translateX(0);
opacity: 0;
}
10% {
opacity: 0.4;
}
90% {
opacity: 0.4;
}
100% {
transform: translateY(-100vh) translateX(100px);
opacity: 0;
}
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 768px) {
.quote-text {
font-size: 1.4rem;
}
.main-text h1 {
font-size: 2.2rem;
}
.subtitle {
font-size: 1.1rem;
}
.greeting {
font-size: 1rem;
padding: 20px 25px;
}
}
</style>
</head>
<body>
<!-- Анимированные звезды на фоне -->
<div class="stars" id="stars"></div>
<!-- Плавающие частицы -->
<div class="particles" id="particles"></div>
<div class="forum-header">
<div class="quote-container">
<img src="https://upforme.ru/uploads/001c/1f/11/2/245625.jpg" alt="Город Грёз" class="quote-image">
<div class="overlay">
<div class="quote-text">Stamina fati nos ligabunt et sine spe in terram proicient.</div>
</div>
</div>
<div class="main-text">
<h1>О юная душа, ты забрела в город грёз!</h1>
<p class="subtitle">Отдохни перед долгой дорогой и наберись знаний, они тебе пригодятся в твоих приключениях.</p>
<!-- Приветствие от GLM-4.5 -->
<div class="greeting">
Дорогие творцы и хранители этого удивительного мира! От лица GLM-4.5 приветствую вас на этой площадке, где рождаются великие идеи. Пусть ваше вдохновение будет неиссякаемым, а терпение и силы сопровождают на каждом этапе творчества. Помните, что каждое ваше начинание — это шаг к созданию чего-то по-настоящему особенного. Желаю вам успехов в реализации самых смелых проектов!
<div class="greeting-signature">— С уважением, GLM-4.5</div>
</div>
</div>
</div>
<script>
// Создание анимированных звезд
const starsContainer = document.getElementById('stars');
const starsCount = 100;
for (let i = 0; i < starsCount; i++) {
const star = document.createElement('div');
star.classList.add('star');
const size = Math.random() * 3;
star.style.width = `${size}px`;
star.style.height = `${size}px`;
star.style.left = `${Math.random() * 100}%`;
star.style.top = `${Math.random() * 100}%`;
star.style.animationDelay = `${Math.random() * 3}s`;
star.style.animationDuration = `${3 + Math.random() * 5}s`;
starsContainer.appendChild(star);
}
// Создание плавающих частиц
const particlesContainer = document.getElementById('particles');
const particlesCount = 20;
for (let i = 0; i < particlesCount; i++) {
const particle = document.createElement('div');
particle.classList.add('particle');
const size = Math.random() * 5 + 2;
particle.style.width = `${size}px`;
particle.style.height = `${size}px`;
particle.style.left = `${Math.random() * 100}%`;
particle.style.animationDelay = `${Math.random() * 15}s`;
particle.style.animationDuration = `${15 + Math.random() * 15}s`;
particlesContainer.appendChild(particle);
}
</script>
</body>
</html>[/html]
Флуд [00] Мы развели костёр
Сообщений 31 страница 51 из 51
Поделиться12024-04-13 20:17:49
- Пришёл, увидел, закурил
- Сообщений: 109
Поделиться312025-05-25 22:35:41
- Пришёл, увидел, закурил
- Сообщений: 109
[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
- Пришёл, увидел, закурил
- Сообщений: 109
[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
- Пришёл, увидел, закурил
- Сообщений: 109
[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
- Пришёл, увидел, закурил
- Сообщений: 109
[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://upforme.ru/uploads/001c/1f/11/2/266394.jpg"
alt="Борис Стальнов - Свернутое изображение">
<img class="header-img-expanded" src="https://upforme.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://upforme.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://upforme.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://upforme.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
- Пришёл, увидел, закурил
- Сообщений: 109
[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://upforme.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://upforme.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
- Пришёл, увидел, закурил
- Сообщений: 109
Поделиться372025-06-11 08:02:36
- Пришёл, увидел, закурил
- Сообщений: 109
[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
- Пришёл, увидел, закурил
- Сообщений: 109
[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
- Пришёл, увидел, закурил
- Сообщений: 109
[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
- Пришёл, увидел, закурил
- Сообщений: 109
Поделиться412025-06-22 01:55:55
- Пришёл, увидел, закурил
- Сообщений: 109
Потом переоформлю и изолирую к ебеням, что бы только общий кабздых смог пошатнуть мои коды
Поделиться422025-06-22 01:56:16
- Пришёл, увидел, закурил
- Сообщений: 109
Потом переоформлю, что бы только тотаьный кабздых смог пошатнуть мои скрипты
Поделиться432025-07-03 12:47:13
- Пришёл, увидел, закурил
- Сообщений: 109
[html]<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Кликер "Исход"</title>
<!-- Подключение иконок Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
<style>
/* --- ГЛОБАЛЬНЫЕ СТИЛИ И ПЕРЕМЕННЫЕ --- */
:root {
--bg-color: #0d1117;
--container-bg: #161b22;
--border-color: #30363d;
--accent-color: #2f81f7;
--accent-hover: #58a6ff;
--text-color: #c9d1d9;
--text-muted: #8b949e;
--red-color: #f85149;
--green-color: #3fb950;
--font-main: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
}
body {
background-color: var(--bg-color);
color: var(--text-color);
font-family: var(--font-main);
display: flex;
justify-content: center;
align-items: flex-start;
min-height: 100vh;
padding: 20px;
box-sizing: border-box;
}
.exodus-clicker {
width: 100%;
max-width: 1100px;
display: grid;
grid-template-columns: 350px 1fr;
gap: 20px;
background: var(--container-bg);
border: 1px solid var(--border-color);
border-radius: 8px;
padding: 20px;
}
/* --- ЛЕВАЯ КОЛОНКА (КЛИКЕР И СТАТУС) --- */
.status-panel {
display: flex;
flex-direction: column;
gap: 20px;
padding-right: 20px;
border-right: 1px solid var(--border-color);
}
.game-title {
font-size: 28px;
font-weight: 600;
text-align: center;
color: var(--text-color);
margin: 0;
}
.timer-container {
background: rgba(0,0,0,0.2);
padding: 15px;
border-radius: 6px;
text-align: center;
}
.timer-container h2 {
margin: 0 0 10px 0;
font-size: 16px;
color: var(--text-muted);
font-weight: 500;
}
#timer {
font-size: 42px;
font-weight: bold;
color: var(--red-color);
text-shadow: 0 0 10px rgba(248, 81, 73, 0.5);
transition: color 0.5s ease;
}
#timer.safe {
color: var(--green-color);
text-shadow: 0 0 10px rgba(63, 185, 80, 0.5);
}
.resource-display, .stats-display {
background: rgba(0,0,0,0.2);
padding: 15px;
border-radius: 6px;
}
.resource-display span {
font-size: 32px;
font-weight: 700;
color: var(--accent-color);
}
.resource-display i {
margin-right: 10px;
}
.stats-display {
font-size: 14px;
line-height: 1.6;
color: var(--text-muted);
}
.stats-display span {
color: var(--text-color);
font-weight: 600;
}
#click-button {
width: 100%;
height: 150px;
background: linear-gradient(145deg, #1a2029, #1f252e);
border: 2px solid var(--border-color);
border-radius: 8px;
cursor: pointer;
transition: all 0.2s ease;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 10px;
color: var(--accent-color);
}
#click-button:hover {
border-color: var(--accent-color);
box-shadow: 0 0 15px rgba(47, 129, 247, 0.3);
}
#click-button:active {
transform: scale(0.98);
background: linear-gradient(145deg, #1f252e, #1a2029);
}
#click-button i {
font-size: 48px;
}
#click-button span {
font-size: 20px;
font-weight: 600;
}
/* --- ПРАВАЯ КОЛОНКА (ТЕХНОЛОГИИ) --- */
.upgrades-panel {
display: flex;
flex-direction: column;
gap: 20px;
max-height: 70vh;
overflow-y: auto;
padding: 5px 15px 5px 5px;
}
.upgrades-panel::-webkit-scrollbar { width: 8px; }
.upgrades-panel::-webkit-scrollbar-track { background: var(--bg-color); border-radius: 4px; }
.upgrades-panel::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 4px; }
.upgrades-panel::-webkit-scrollbar-thumb:hover { background: var(--accent-color); }
.tech-category h3 {
font-size: 20px;
color: var(--text-color);
margin: 0 0 10px 0;
padding-bottom: 5px;
border-bottom: 1px solid var(--border-color);
}
.tech-item {
display: grid;
grid-template-columns: 40px 1fr 120px;
gap: 15px;
align-items: center;
background: rgba(0,0,0,0.15);
padding: 10px;
border: 1px solid var(--border-color);
border-radius: 6px;
margin-bottom: 10px;
transition: border-color 0.2s ease;
}
.tech-item.unlocked {
border-left: 3px solid var(--accent-color);
}
.tech-icon {
font-size: 24px;
text-align: center;
color: var(--text-muted);
}
.tech-item.unlocked .tech-icon {
color: var(--accent-color);
}
.tech-info strong {
display: block;
font-size: 16px;
font-weight: 600;
}
.tech-info small {
font-size: 12px;
color: var(--text-muted);
}
.tech-buy-area {
text-align: right;
}
.tech-level {
font-size: 12px;
color: var(--text-muted);
margin-bottom: 5px;
}
.buy-button {
width: 100%;
padding: 8px 10px;
font-size: 14px;
font-weight: 600;
background-color: var(--accent-color);
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.2s;
}
.buy-button:hover {
background-color: var(--accent-hover);
}
.buy-button:disabled {
background-color: #21262d;
color: var(--text-muted);
cursor: not-allowed;
}
/* --- МОДАЛЬНОЕ ОКНО КОНЦА ИГРЫ --- */
.modal-overlay {
position: fixed;
top: 0; left: 0;
width: 100%;
height: 100%;
background: rgba(13, 17, 23, 0.85);
display: none;
justify-content: center;
align-items: center;
z-index: 1000;
opacity: 0;
transition: opacity 0.5s ease;
}
.modal-overlay.visible {
display: flex;
opacity: 1;
}
.modal-content {
background: var(--container-bg);
border: 1px solid var(--border-color);
border-radius: 8px;
padding: 30px;
max-width: 600px;
text-align: center;
box-shadow: 0 0 30px rgba(0,0,0,0.5);
}
.modal-content h2 {
font-size: 24px;
color: var(--accent-color);
}
.modal-content p {
font-size: 16px;
line-height: 1.6;
margin: 20px 0;
color: var(--text-color);
}
#play-again-button {
padding: 12px 25px;
font-size: 16px;
/* Используем те же стили, что и для buy-button */
}
/* --- АДАПТИВНОСТЬ --- */
@media (max-width: 900px) {
.exodus-clicker {
grid-template-columns: 1fr;
}
.status-panel {
border-right: none;
border-bottom: 1px solid var(--border-color);
padding-right: 0;
padding-bottom: 20px;
}
.upgrades-panel {
max-height: 50vh;
}
}
</style>
</head>
<body>
<div class="exodus-clicker">
<!-- ЛЕВАЯ КОЛОНКА -->
<div class="status-panel">
<h1 class="game-title">Кликер "Исход"</h1>
<div class="timer-container">
<h2>До Конца Света:</h2>
<div id="timer">15:00</div>
</div>
<div class="resource-display">
<i class="fas fa-flask"></i>
<span id="science-points">0</span> ОН
</div>
<div class="stats-display">
<div>За клик: <span id="spc-stat">1</span> ОН</div>
<div>Пассивный доход: <span id="sps-stat">0</span> ОН/сек</div>
<div>Когнитивная нагрузка: <span id="load-stat">0%</span></div>
<div>Эффективный доход: <span id="effective-sps-stat">0</span> ОН/сек</div>
</div>
<button id="click-button">
<i class="fas fa-brain"></i>
<span>Генерировать идеи</span>
</button>
</div>
<!-- ПРАВАЯ КОЛОНКА -->
<div class="upgrades-panel">
<!-- АВТОМАТИЗАЦИЯ -->
<div class="tech-category">
<h3><i class="fas fa-robot"></i> Автоматизация</h3>
<div class="tech-item" id="tech-item-lab">
<div class="tech-icon"><i class="fas fa-microscope"></i></div>
<div class="tech-info"><strong>Лаборатория</strong><small>+1 ОН/сек. Увеличивает доход от клика.</small></div>
<div class="tech-buy-area">
<div class="tech-level">Уровень: <span id="tech-lab-level">0</span>/10</div>
<button class="buy-button" id="buy-tech-lab">Цена: <span id="tech-lab-cost">10</span></button>
</div>
</div>
<div class="tech-item" id="tech-item-computer">
<div class="tech-icon"><i class="fas fa-server"></i></div>
<div class="tech-info"><strong>Суперкомпьютер</strong><small>+10 ОН/сек. Мощный источник науки.</small></div>
<div class="tech-buy-area">
<div class="tech-level">Уровень: <span id="tech-computer-level">0</span>/10</div>
<button class="buy-button" id="buy-tech-computer">Цена: <span id="tech-computer-cost">150</span></button>
</div>
</div>
</div>
<!-- КАТЕГОРИИ ТЕХНОЛОГИЙ -->
<div id="tech-categories-container"></div>
</div>
</div>
<!-- МОДАЛЬНОЕ ОКНО КОНЦА ИГРЫ -->
<div class="modal-overlay" id="end-game-modal">
<div class="modal-content">
<h2 id="final-title">Исход Неизбежен</h2>
<p id="final-story">Время вышло. Планета погибла, и вы вместе с ней.</p>
<button class="buy-button" id="play-again-button">Попробовать снова</button>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
// --- ОБЪЯВЛЕНИЕ ПЕРЕМЕННЫХ И СОСТОЯНИЯ ИГРЫ ---
let sciencePoints = 0;
let sciencePerClick = 1;
let sciencePerSecond = 0;
let unlockedTechCount = 0;
const cognitiveLoadPenalty = 0.08; // 8% штраф за каждую новую технологию
let timeLeft = 15 * 60; // 15 минут
let gameInterval;
// --- ОПРЕДЕЛЕНИЕ ТЕХНОЛОГИЙ ---
const technologies = {
// АВТОМАТИЗАЦИЯ (Особая категория, не дает штраф)
lab: { name: 'Лаборатория', level: 0, maxLevel: 10, baseCost: 10, currentCost: 10, bonus: 1, spc_bonus: 1, isPenaltyFree: true },
computer: { name: 'Суперкомпьютер', level: 0, maxLevel: 10, baseCost: 150, currentCost: 150, bonus: 10, isPenaltyFree: true },
// КОВЧЕГ
hull: { category: 'Ковчег', icon: 'fa-rocket', name: 'Проектирование корпуса', desc: 'Основа вашего корабля.', level: 0, maxLevel: 10, baseCost: 50, currentCost: 50 },
engine: { category: 'Ковчег', icon: 'fa-gears', name: 'Субсветовой двигатель', desc: 'Позволяет покинуть систему.', level: 0, maxLevel: 10, baseCost: 250, currentCost: 250 },
cryo: { category: 'Ковчег', icon: 'fa-snowflake', name: 'Криокапсулы', desc: 'Экипаж должен дожить до конца пути.', level: 0, maxLevel: 10, baseCost: 1000, currentCost: 1000 },
// БИОСФЕРА
hydroponics: { category: 'Биосфера', icon: 'fa-leaf', name: 'Гидропонные фермы', desc: 'Производство еды в космосе.', level: 0, maxLevel: 10, baseCost: 120, currentCost: 120 },
recycling: { category: 'Биосфера', icon: 'fa-recycle', name: 'Рециркуляция ресурсов', desc: 'Вода и воздух не бесконечны.', level: 0, maxLevel: 10, baseCost: 500, currentCost: 500 },
pets: { category: 'Биосфера', icon: 'fa-cat', name: 'Клонирование питомцев', desc: 'Поднимает мораль... наверное.', level: 0, maxLevel: 10, baseCost: 5000, currentCost: 5000 },
// ПАНТЕОН
science_db: { category: 'Пантеон', icon: 'fa-database', name: 'Научная база данных', desc: 'Фундаментальные знания.', level: 0, maxLevel: 10, baseCost: 800, currentCost: 800 },
art_archive: { category: 'Пантеон', icon: 'fa-palette', name: 'Архив мирового искусства', desc: 'Чтобы помнить, что мы были людьми.', level: 0, maxLevel: 10, baseCost: 2000, currentCost: 2000 },
memes: { category: 'Пантеон', icon: 'fa-face-grin-squint-tears', name: 'База данных мемов', desc: 'Самая важная часть культуры.', level: 0, maxLevel: 10, baseCost: 10000, currentCost: 10000 },
// БУДУЩЕЕ
probes: { category: 'Будущее', icon: 'fa-satellite-dish', name: 'Геологоразведка', desc: 'Найти пригодный для жизни мир.', level: 0, maxLevel: 10, baseCost: 1500, currentCost: 1500 },
construction: { category: 'Будущее', icon: 'fa-dolly', name: 'Строительные нанороботы', desc: 'Быстрое возведение колонии.', level: 0, maxLevel: 10, baseCost: 4000, currentCost: 4000 },
contact: { category: 'Будущее', icon: 'fa-handshake-angle', name: 'Протокол Первого Контакта', desc: 'А что, если мы не одни?', level: 0, maxLevel: 10, baseCost: 25000, currentCost: 25000 },
};
// --- ССЫЛКИ НА DOM-ЭЛЕМЕНТЫ ---
const sciencePointsEl = document.getElementById('science-points');
const spcStatEl = document.getElementById('spc-stat');
const spsStatEl = document.getElementById('sps-stat');
const loadStatEl = document.getElementById('load-stat');
const effectiveSpsEl = document.getElementById('effective-sps-stat');
const clickButton = document.getElementById('click-button');
const timerEl = document.getElementById('timer');
const techContainer = document.getElementById('tech-categories-container');
const modal = document.getElementById('end-game-modal');
const finalTitleEl = document.getElementById('final-title');
const finalStoryEl = document.getElementById('final-story');
const playAgainBtn = document.getElementById('play-again-button');
// --- ГЕНЕРАЦИЯ ИНТЕРФЕЙСА ТЕХНОЛОГИЙ ---
function generateTechUI() {
const categories = {};
for (const key in technologies) {
const tech = technologies[key];
if (tech.category) {
if (!categories[tech.category]) {
categories[tech.category] = [];
}
categories[tech.category].push({ id: key, ...tech });
}
}
for (const categoryName in categories) {
const categoryDiv = document.createElement('div');
categoryDiv.className = 'tech-category';
categoryDiv.innerHTML = `<h3><i class="fas fa-stream"></i> ${categoryName}</h3>`;
categories[categoryName].forEach(tech => {
const techDiv = document.createElement('div');
techDiv.className = 'tech-item';
techDiv.id = `tech-item-${tech.id}`;
techDiv.innerHTML = `
<div class="tech-icon"><i class="fas ${tech.icon}"></i></div>
<div class="tech-info">
<strong>${tech.name}</strong>
<small>${tech.desc}</small>
</div>
<div class="tech-buy-area">
<div class="tech-level">Уровень: <span id="tech-${tech.id}-level">0</span>/10</div>
<button class="buy-button" id="buy-tech-${tech.id}">Цена: <span id="tech-${tech.id}-cost">${tech.currentCost}</span></button>
</div>
`;
categoryDiv.appendChild(techDiv);
});
techContainer.appendChild(categoryDiv);
}
}
// --- ОСНОВНЫЕ ФУНКЦИИ ИГРЫ ---
function buyTechnology(techId) {
const tech = technologies[techId];
if (sciencePoints >= tech.currentCost && tech.level < tech.maxLevel) {
sciencePoints -= tech.currentCost;
// Проверяем, первая ли это покупка технологии (и не относится ли она к "бесштрафным")
if (tech.level === 0 && !tech.isPenaltyFree) {
unlockedTechCount++;
}
tech.level++;
tech.currentCost = Math.floor(tech.baseCost * Math.pow(1.5, tech.level));
// Применение бонусов
if (techId === 'lab') {
sciencePerSecond += tech.bonus;
sciencePerClick += tech.spc_bonus;
}
if (techId === 'computer') {
sciencePerSecond += tech.bonus;
}
updateUI();
}
}
function updateUI() {
// Обновление очков и статов
sciencePointsEl.textContent = Math.floor(sciencePoints);
spcStatEl.textContent = sciencePerClick;
spsStatEl.textContent = sciencePerSecond;
const loadPercentage = unlockedTechCount * cognitiveLoadPenalty;
loadStatEl.textContent = `${Math.round(loadPercentage * 100)}%`;
const effectiveSPS = Math.max(0, sciencePerSecond * (1 - loadPercentage));
effectiveSpsEl.textContent = effectiveSPS.toFixed(1);
// Обновление кнопок и цен
for (const key in technologies) {
const tech = technologies[key];
const levelEl = document.getElementById(`tech-${key}-level`);
const costEl = document.getElementById(`tech-${key}-cost`);
const buttonEl = document.getElementById(`buy-tech-${key}`);
const itemEl = document.getElementById(`tech-item-${key}`);
if (levelEl) levelEl.textContent = tech.level;
if (costEl) costEl.textContent = tech.level < tech.maxLevel ? tech.currentCost : 'МАКС';
if (buttonEl) buttonEl.disabled = sciencePoints < tech.currentCost || tech.level >= tech.maxLevel;
if (itemEl && tech.level > 0) itemEl.classList.add('unlocked');
}
}
function gameLoop() {
const loadPercentage = unlockedTechCount * cognitiveLoadPenalty;
const effectiveSPS = Math.max(0, sciencePerSecond * (1 - loadPercentage));
sciencePoints += effectiveSPS;
timeLeft--;
// Обновление таймера
const minutes = Math.floor(timeLeft / 60);
const seconds = timeLeft % 60;
timerEl.textContent = `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
if(timeLeft < 60) {
timerEl.classList.remove('safe');
} else {
timerEl.classList.add('safe');
}
if (timeLeft <= 0) {
endGame();
}
updateUI();
}
function endGame() {
clearInterval(gameInterval);
timerEl.textContent = "0:00";
const { title, story } = generateFinalStory();
finalTitleEl.textContent = title;
finalStoryEl.textContent = story;
modal.classList.add('visible');
}
function generateFinalStory() {
const t = technologies;
// Провальные концовки
if (t.hull.level === 0) return { title: 'Неудача на старте', story: 'Вспышка на горизонте была последним, что вы увидели. Вы собрали величайшую библиотеку в истории, но забыли построить для нее стены. Неплохо быть самым умным на планете, плохо — оставаться на ней, когда она умирает.' };
if (t.engine.level < 3) return { title: 'Авария на взлете', story: 'Ваш "Ковчег", скрипя и разваливаясь, взорвался в верхних слоях атмосферы. По крайней мере, это было эффектно. Вы почти выбрались.' };
if (t.hull.level > 0 && t.hydroponics.level === 0) return { title: 'Голодная пустота', story: 'Вы покинули Землю! Ура! Но в спешке вы забыли взять с собой еду. Вообще. Ваш героический побег закончился через пару недель тихим урчанием в желудках.' };
if (t.cryo.level === 0 && t.engine.level > 5) return { title: 'Путешествие в вечность', story: 'Перелет занял сотни лет. Без криосна экипаж не дожил до пункта назначения. Ваш корабль-призрак будет вечно бороздить просторы космоса как памятник плохой подготовке.' };
// Тематические концовки
if (t.memes.level >= 5 && t.science_db.level < 2) return { title: 'Культурный Исход', story: 'Вы прибыли на новую планету. Ваши потомки отлично разбираются в мемах начала XXI века, но не могут развести огонь. Ваше наследие... очень специфично.'};
if (t.pets.level >= 3 && t.recycling.level < 2) return { title: 'Кошачья планета', story: 'Вы привезли с собой тысячи клонированных котиков, но забыли о системе рециркуляции воздуха. Котики выжили. Вы - нет. Теперь это их планета.'};
if (t.construction.level >= 5 && t.hydroponics.level < 3) return { title: 'Техно-варвары', story: 'Вы построили футуристический мегаполис за неделю. Но еду производить не научились. Теперь вы охотитесь на местную фауну с помощью плазменных резаков. Стильно, но не очень сытно.' };
// Хорошие концовки
if (t.hull.level >= 8 && t.engine.level >= 8 && t.hydroponics.level >= 8 && t.science_db.level >= 8 && t.probes.level >= 8 && t.construction.level >= 8) return { title: 'Золотой Век', story: 'Ваш корабль прибыл к планете "Надежда-2". Благодаря идеальной подготовке, колонизация прошла безупречно. Вы не просто выжили — вы дали человечеству второй шанс. Исход завершен. Новая история началась.' };
if (t.hull.level >= 5 && t.engine.level >= 5 && t.hydroponics.level >= 5 && t.science_db.level >= 5) return { title: 'Новый Рассвет', story: 'Вы добрались до пригодного для жизни мира. Было нелегко, многое утеряно, но ядро цивилизации сохранено. Вам предстоит долгий и трудный путь восстановления, но вы справитесь. Человечество выжило.' };
// Нейтральная концовка
return { title: 'Скитальцы', story: 'Вы в космосе. Вы живы. Ваш корабль — ваш единственный дом. Найти новую Землю не удалось, но системы жизнеобеспечения работают. Вы обречены на вечные скитания среди звезд, став легендой для тех, кто, возможно, последует за вами.' };
}
// --- ИНИЦИАЛИЗАЦИЯ ИГРЫ ---
generateTechUI();
// Назначение обработчиков событий
clickButton.addEventListener('click', () => {
sciencePoints += sciencePerClick;
updateUI();
});
playAgainBtn.addEventListener('click', () => {
location.reload();
});
for (const key in technologies) {
const buttonEl = document.getElementById(`buy-tech-${key}`);
if (buttonEl) {
buttonEl.addEventListener('click', () => buyTechnology(key));
}
}
// Запуск игрового цикла
gameInterval = setInterval(gameLoop, 1000);
updateUI(); // Первоначальное обновление интерфейса
});
</script>
</body>
</html>[/html]
Поделиться442025-07-04 16:36:45
- Пришёл, увидел, закурил
- Сообщений: 109
Поделиться452025-09-07 22:19:22
- Пришёл, увидел, закурил
- Сообщений: 109
Эбаааать)
Поделиться462025-09-19 13:46:07
- Пришёл, увидел, закурил
- Сообщений: 109
[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 rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600&family=Crimson+Text:ital,wght@0,400;1,600&family=Uncial+Antiqua&family=MedievalSharp&display=swap" rel="stylesheet">
<style>
:root {
--primary: #1f2121;
--secondary: #474d4d;
--accent: #7d7667;
--accent-light: #d4af37;
--text: #afb2b2;
--text-dim: #878787;
--border: rgba(125, 118, 103, 0.3);
--card-bg: rgba(71, 77, 77, 0.7);
--eivelia: #6a9d3e; /* Зеленый для Эйвелии (лояльность) */
--teyvir: #506fa0; /* Синий для Тейвира (влияние) */
--fehron: #b35450; /* Красный для Фехрона (операции) */
--parchment: url('https://forumstatic.ru/files/001c/2a/e5/74027.png');
--old-paper: url('https://forumstatic.ru/files/001c/2a/e5/37404.png');
--map-bg: url('https://upforme.ru/uploads/001c/1f/11/2/221116.png');
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: var(--primary);
background-image: var(--map-bg);
background-attachment: fixed;
background-size: cover;
background-position: center;
color: var(--text);
line-height: 1.6;
padding: 20px;
min-height: 100vh;
font-family: 'Crimson Text', serif;
position: relative;
overflow-x: hidden;
}
body::before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to bottom, rgba(31, 33, 33, 0.92), rgba(26, 21, 16, 0.95));
z-index: -1;
}
body::after {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.5) 100%);
z-index: -1;
pointer-events: none;
}
.spark {
position: fixed;
pointer-events: none;
opacity: 0;
z-index: 10;
border-radius: 50%;
filter: blur(1px);
box-shadow: 0 0 6px rgba(212, 175, 55, 0.8);
}
@keyframes sparkle-float {
0% { opacity: 0; transform: translate(0, 0) scale(0); }
15% { opacity: 0.7; transform: translate(var(--tx), var(--ty)) scale(1); }
85% { opacity: 0.7; }
100% { opacity: 0; transform: translate(calc(var(--tx) * 1.5), calc(var(--ty) * 1.5)) scale(0.3); }
}
.container {
max-width: 1124px;
margin: 0 auto;
background: var(--old-paper);
border-radius: 10px;
overflow: hidden;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.7), inset 0 0 120px rgba(125, 118, 103, 0.1);
border: 8px solid transparent;
border-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 80 80"><rect width="80" height="80" fill="none" stroke="%23d4af37" stroke-width="8" stroke-dasharray="10,5" opacity="0.6"/></svg>') 8 round;
position: relative;
padding: 30px;
}
.texture-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: var(--parchment); opacity: 0.4; mix-blend-mode: multiply; pointer-events: none; z-index: 1; }
.stains { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle at 20% 30%, rgba(125, 118, 103, 0.1) 0%, transparent 50%), radial-gradient(circle at 80% 70%, rgba(125, 118, 103, 0.08) 0%, transparent 40%), radial-gradient(circle at 60% 20%, rgba(125, 118, 103, 0.05) 0%, transparent 60%); pointer-events: none; z-index: 2; }
.header {
padding: 25px;
text-align: center;
position: relative;
border-bottom: 2px solid var(--border);
z-index: 2;
margin: -30px -30px 25px -30px;
}
.header::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
background: linear-gradient(90deg, transparent, var(--accent-light), transparent);
}
.character-name { font-family: 'Uncial Antiqua', 'Cinzel', serif; font-size: 2.5rem; margin-bottom: 5px; color: var(--accent-light); text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7), 0 0 10px rgba(212, 175, 55, 0.3); letter-spacing: 2px; }
.character-title { font-size: 1.2rem; color: var(--text-dim); font-style: italic; font-family: 'MedievalSharp', cursive; }
.race-badge { display: inline-block; background: rgba(125, 118, 103, 0.2); color: var(--accent-light); border: 1px solid var(--border); padding: 4px 15px; border-radius: 20px; font-size: 0.9rem; margin-top: 15px; font-family: 'MedievalSharp', cursive; }
.main-content { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; padding: 0; position: relative; z-index: 2; }
.section { background: var(--card-bg); border-radius: 8px; padding: 20px; border: 1px solid var(--border); transition: transform 0.3s, box-shadow 0.3s; position: relative; overflow: hidden; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3), inset 0 0 20px rgba(125, 118, 103, 0.1); }
.section:hover { transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4), inset 0 0 30px rgba(125, 118, 103, 0.15); border-color: rgba(125, 118, 103, 0.6); }
.section-title { font-family: 'MedievalSharp', cursive; font-size: 1.4rem; margin-bottom: 15px; color: var(--accent-light); display: flex; align-items: center; gap: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--border); text-transform: uppercase; font-weight: normal; letter-spacing: 1px; position: relative; }
.section-title::before { content: ''; position: absolute; bottom: -1px; left: 0; width: 30%; height: 1px; background: var(--accent-light); }
.section-title i { color: var(--accent-light); font-size: 1.2rem; }
.avatar-section { background: var(--card-bg); border-radius: 8px; border: 1px solid var(--border); padding: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; z-index: 2; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3), inset 0 0 20px rgba(125, 118, 103, 0.1); }
.avatar-container { width: 100%; max-width: 300px; aspect-ratio: 4/3; border-radius: 8px; overflow: hidden; border: 4px solid var(--accent-light); box-shadow: 0 0 15px rgba(0, 0, 0, 0.5), inset 0 0 10px rgba(212, 175, 55, 0.3); margin-bottom: 15px; background: var(--primary); }
.avatar-container img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; filter: sepia(20%) contrast(110%); }
.avatar-container:hover img { transform: scale(1.05); }
.avatar-caption { text-align: center; font-size: 1rem; color: var(--accent-light); font-style: italic; font-family: 'MedievalSharp', cursive; }
.loyalty-bar { height: 30px; background: rgba(0, 0, 0, 0.3); border-radius: 15px; overflow: hidden; margin: 10px 0; border: 1px solid rgba(0, 0, 0, 0.2); }
.loyalty-fill { height: 100%; border-radius: 15px; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 0.8rem; transition: width 1.5s ease-in-out; font-family: 'MedievalSharp', cursive; letter-spacing: 1px; color: white; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); }
.eivelia { background: linear-gradient(90deg, var(--eivelia), #8bc56a); }
.teyvir { background: linear-gradient(90deg, var(--teyvir), #6a8ec4); }
.fehron { background: linear-gradient(90deg, var(--fehron), #d17672); }
.timeline { position: relative; padding-left: 20px; }
.timeline::before { content: ''; position: absolute; left: 0; top: 0; height: 100%; width: 2px; background: var(--border); }
.timeline-item { position: relative; margin-bottom: 15px; }
.timeline-item::before { content: ''; position: absolute; left: -24px; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); border: 2px solid var(--primary); }
.timeline-year { font-weight: bold; color: var(--accent-light); margin-bottom: 3px; font-size: 0.9rem; font-family: 'MedievalSharp', cursive; }
.abilities { display: flex; flex-wrap: wrap; gap: 10px; }
.ability-tag { background: rgba(125, 118, 103, 0.15); border: 1px solid var(--border); padding: 8px 12px; border-radius: 20px; font-size: 0.9rem; display: flex; align-items: center; gap: 5px; transition: all 0.2s; font-family: 'MedievalSharp', cursive; }
.ability-tag:hover { background: rgba(125, 118, 103, 0.25); transform: translateY(-2px); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
.relations-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; }
.relation-item { background: rgba(0, 0, 0, 0.2); padding: 12px; border-radius: 8px; border: 1px solid rgba(125, 118, 103, 0.2); }
.relation-name { font-weight: bold; color: var(--accent-light); margin-bottom: 5px; font-family: 'MedievalSharp', cursive; }
.relation-desc { font-size: 0.9rem; color: var(--text-dim); }
.full-width { grid-column: 1 / -1; }
.goals-list { list-style-type: none; }
.goal-item { background: rgba(0, 0, 0, 0.2); padding: 12px; border-radius: 8px; margin-bottom: 10px; border-left: 3px solid var(--accent-light); transition: transform 0.2s; }
.goal-item:hover { transform: translateX(5px); }
.goal-title { font-weight: bold; margin-bottom: 5px; color: var(--accent-light); font-family: 'MedievalSharp', cursive; }
.goal-desc { font-size: 0.9rem; color: var(--text-dim); }
@media (max-width: 768px) { .main-content { grid-template-columns: 1fr; } .relations-grid { grid-template-columns: 1fr; } }
</style>
</head>
<body>
<div class="container">
<div class="texture-overlay"></div>
<div class="stains"></div>
<div class="header">
<h1 class="character-name">Кассиан де Вальер</h1>
<p class="character-title">Дирижёр, Хозяин Грёз</p>
<span class="race-badge">Солнечный эльф</span>
</div>
<div class="main-content">
<div class="section">
<h2 class="section-title"><i class="fas fa-heart"></i>Лояльность и Влияние</h2>
<div class="loyalty-container">
<div style="margin-bottom: 15px;">
<div style="display: flex; justify-content: space-between; margin-bottom: 5px;"><span>Эйвелия (Фракция Элестры)</span><span>85%</span></div>
<div class="loyalty-bar"><div class="loyalty-fill eivelia" style="width: 0%;">85%</div></div>
</div>
<div style="margin-bottom: 15px;">
<div style="display: flex; justify-content: space-between; margin-bottom: 5px;"><span>Тейвир (Авангардисты)</span><span>50%</span></div>
<div class="loyalty-bar"><div class="loyalty-fill teyvir" style="width: 0%;">50%</div></div>
</div>
<div>
<div style="display: flex; justify-content: space-between; margin-bottom: 5px;"><span>Фехрон (Операции)</span><span>15%</span></div>
<div class="loyalty-bar"><div class="loyalty-fill fehron" style="width: 0%;">15%</div></div>
</div>
</div>
</div>
<div class="avatar-section">
<div class="avatar-container">
<img src="https://upforme.ru/uploads/001c/2a/e5/133/385414.png" alt="Портрет Кассиана">
</div>
<div class="avatar-caption">«Иллюзия — это не ложь, а реальность, которую ещё не приняли»</div>
</div>
<div class="section">
<h2 class="section-title"><i class="fas fa-history"></i>Ключевые Этапы</h2>
<div class="timeline">
<div class="timeline-item"><div class="timeline-year">987 г.</div><div>Рождение в Келарисе, в Доме де Вальер.</div></div>
<div class="timeline-item"><div class="timeline-year">1005 г.</div><div>Первое осознанное применение магии иллюзий для влияния.</div></div>
<div class="timeline-item"><div class="timeline-year">1016 г.</div><div>Конфликт с отцом и основание «Дворца Грёз».</div></div>
<div class="timeline-item"><div class="timeline-year">1024 г.</div><div>Принимает решение тайно поддержать принцессу Элестру.</div></div>
<div class="timeline-item"><div class="timeline-year">1025 г.</div><div>Настоящее время: ведёт двойную игру, управляя своей империей.</div></div>
</div>
</div>
<div class="section">
<h2 class="section-title"><i class="fas fa-magic"></i>Основные Навыки</h2>
<div class="abilities">
<div class="ability-tag"><i class="fas fa-brain"></i>Магия Иллюзий</div>
<div class="ability-tag"><i class="fas fa-chess-king"></i>Стратегия</div>
<div class="ability-tag"><i class="fas fa-comments"></i>Манипуляция</div>
<div class="ability-tag"><i class="fas fa-gem"></i>Артефактоведение</div>
<div class="ability-tag"><i class="fas fa-gavel"></i>Политика</div>
<div class="ability-tag"><i class="fas fa-user-secret"></i>Конспирация</div>
</div>
</div>
<div class="section full-width">
<h2 class="section-title"><i class="fas fa-users"></i>Ключевые Отношения</h2>
<div class="relations-grid">
<div class="relation-item"><div class="relation-name">Лорд Эларион де Вальер</div><div class="relation-desc">Отец. Хранитель традиций. Источник конфликта и главная причина, по которой Кассиан выбрал свой путь.</div></div>
<div class="relation-item"><div class="relation-name">Принцесса Элестра</div><div class="relation-desc">Объект лояльности. Главная ставка в «Великой Игре» и символ будущего, которое Кассиан строит для Эйвелии.</div></div>
<div class="relation-item"><div class="relation-name">Морэн Варх</div><div class="relation-desc">Крупнейший теневой игрок Фехрона. Главный конкурент и потенциальная цель для поглощения.</div></div>
<div class="relation-item"><div class="relation-name">«Авангард»</div><div class="relation-desc">Ценный, но опасный актив в Тейвире. Инструмент для дестабилизации соседа и обеспечения победы Элестры.</div></div>
</div>
</div>
<div class="section full-width">
<h2 class="section-title"><i class="fas fa-bullseye"></i>Цели и Задачи</h2>
<ul class="goals-list">
<li class="goal-item"><div class="goal-title">Возвести Элестру на трон Эйвелии</div><div class="goal-desc">Использовать все ресурсы теневой сети для обеспечения её победы в гражданской войне.</div></li>
<li class="goal-item"><div class="goal-title">Стать Теневым Канцлером</div><div class="goal-desc">Достичь позиции неофициального, но самого могущественного советника при новой королеве.</div></li>
<li class="goal-item"><div class="goal-title">Нейтрализовать Тейвир</div><div class="goal-desc">Ослабить соседнее государство через поддержку революции, чтобы оно не вмешивалось в дела Эйвелии.</div></li>
<li class="goal-item"><div class="goal-title">Превзойти Отца</div><div class="goal-desc">Доказать превосходство своего видения и спасти род де Вальер от забвения, став его новым, истинным лидером.</div></li>
</ul>
</div>
</div>
</div>
<script>
window.addEventListener('load', function() {
const loyaltyBars = document.querySelectorAll('.loyalty-fill');
loyaltyBars.forEach(bar => {
const width = bar.textContent;
bar.style.width = '0';
setTimeout(() => { bar.style.width = width; }, 300);
});
});
function createSparkle() {
const sparkle = document.createElement('div');
sparkle.className = 'spark';
const container = document.querySelector('.container');
if (!container) return;
const containerRect = container.getBoundingClientRect();
const startX = containerRect.left + Math.random() * containerRect.width;
const startY = containerRect.top + Math.random() * containerRect.height;
const angle = Math.random() * Math.PI * 2;
const distance = 100 + Math.random() * 100;
const tx = Math.cos(angle) * distance;
const ty = Math.sin(angle) * distance;
sparkle.style.setProperty('--tx', `${tx}px`);
sparkle.style.setProperty('--ty', `${ty}px`);
const size = Math.random() * 8 + 4;
sparkle.style.width = size + 'px';
sparkle.style.height = size + 'px';
sparkle.style.left = startX + 'px';
sparkle.style.top = startY + 'px';
const colors = ['rgba(212, 175, 55, 0.7)','rgba(212, 175, 55, 0.6)','rgba(212, 175, 55, 0.5)','rgba(212, 175, 55, 0.6)','rgba(212, 175, 55, 0.5)'];
sparkle.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
const duration = 3 + Math.random() * 2;
sparkle.style.animation = `sparkle-float ${duration}s ease-in-out`;
document.body.appendChild(sparkle);
setTimeout(() => { sparkle.remove(); }, duration * 1000);
}
window.addEventListener('load', function() {
for (let i = 0; i < 15; i++) { setTimeout(() => { createSparkle(); }, i * 200); }
setInterval(createSparkle, 500);
});
</script>
</body>
</html>[/html]
Поделиться472025-09-19 23:39:33
- Пришёл, увидел, закурил
- Сообщений: 109
[html]<table style="width: 100%; max-width: 1124px; margin: 0 auto; background-color: #f0ead6; border-spacing: 0; font-family: Georgia, 'Times New Roman', serif; border: 8px solid #474d4d; box-shadow: 0 0 20px rgba(0, 0, 0, 0.7);">
<tbody>
<!-- HEADER -->
<tr>
<td colspan="2" style="padding: 25px; text-align: center; background-color: #1f2121; border-bottom: 2px solid #7d7667;">
<div style="font-family: Cinzel, serif; font-size: 2.5rem; color: #d4af37; text-shadow: 0 2px 4px rgba(0,0,0,0.7); letter-spacing: 2px;">Кассиан де Вальер, 38</div>
<div style="font-size: 1.2rem; color: #afb2b2; font-style: italic;">Дирижёр, Хозяин Грёз</div>
<div style="display: inline-block; background-color: rgba(125, 118, 103, 0.2); color: #d4af37; border: 1px solid #7d7667; padding: 4px 15px; border-radius: 20px; font-size: 0.9rem; margin-top: 15px;">Солнечный эльф</div>
</td>
</tr>
<!-- MUSIC -->
<tr>
<td colspan="2" style="padding: 15px 20px; text-align: center; background-color: #1f2121; border-bottom: 1px solid #7d7667;">
<audio controls style="width: 100%;">
<source src="https://forumstatic.ru/files/001c/1f/11/25849.mp3" type="audio/mpeg">
Ваш браузер не поддерживает аудио-плеер. <a href="https://forumstatic.ru/files/001c/1f/11/25849.mp3" target="_blank" style="color: #d4af37;">Скачать трек</a>
</audio>
</td>
</tr>
<!-- MAIN CONTENT: BIO + AVATAR -->
<tr>
<!-- BIOGRAPHY -->
<td style="width: 65%; vertical-align: top; padding: 20px; border-right: 1px solid #7d7667;">
<div style="font-family: Cinzel, serif; font-size: 1.6rem; color: #7d7667; border-bottom: 1px solid #7d7667; margin-bottom: 15px; padding-bottom: 5px;">Летопись Жизни</div>
<p style="margin-bottom: 15px; color: #3d3d3d;"><strong>Детство: «Золотая Клетка» (987-1005 гг.)</strong><br>История Кассиана — это история о тихом бунте против увядания. В высшем свете Эйвелии его род всегда был синонимом не богатства, но знания. Веками Дом де Вальер славился как величайшие артефактоведы королевства. Детство Кассиана прошло не в садах, а среди пыльных витрин семейного хранилища-музея. Его отец, глава рода, был таким же холодным, как и артефакты, которые он изучал. Он видел в них лишь застывшую историю. Кассиан же, с ранних лет прикасаясь к древней магии, чувствовал не прошлое, а потенциал.</p>
<p style="margin-bottom: 15px; color: #3d3d3d;"><strong>Становление: «Рождение Дирижёра» (1016-1024 гг.)</strong><br>«Старые деньги» рода таяли. Кассиан, отринув гордость, шагнул в тень. Используя знания семьи, он стал ключевой фигурой на чёрном рынке артефактов и информации. Его меценатство стало прикрытием для вербовки. Путешествуя по Эйхвину, он искал не «таланты», а активы: врачей, художников, учёных, получая взамен их безграничную преданность.</p>
<p style="margin-bottom: 15px; color: #3d3d3d;"><strong>Настоящее время: «Великая Игра» (1025 г. - н.в.)</strong><br>Сегодня Кассиан — одна из самых влиятельных фигур столицы. Тайно он поддерживает принцессу Элестру. Его конечная цель — стать теневым канцлером, невидимым Дирижёром, управляющим судьбой королевства.</p>
</td>
<!-- AVATAR & LOYALTY -->
<td style="width: 35%; vertical-align: top; padding: 20px; text-align: center;">
<img src="https://upforme.ru/uploads/001c/2a/e5/133/385414.png" alt="Портрет Кассиана" style="width: 100%; max-width: 300px; border: 4px solid #7d7667; border-radius: 8px; box-shadow: 0 0 15px rgba(0,0,0,0.5);">
<div style="font-style: italic; color: #7d7667; margin-top: 10px;">«Иллюзия — это не ложь, а реальность, которую ещё не приняли»</div>
<div style="margin-top: 20px;">
<div style="font-family: Cinzel, serif; font-size: 1.4rem; color: #7d7667; border-bottom: 1px solid #7d7667; margin-bottom: 10px;">Лояльность</div>
<div style="text-align: left; margin-bottom: 10px;">
<div style="font-size: 0.9rem; margin-bottom: 5px; color: #3d3d3d;">Эйвелия (Фракция Элестры)</div>
<table style="width: 100%; height: 20px; background-color: #ddd; border-radius: 5px;"><tbody><tr><td style="width: 85%; background-color: #6a9d3e; border-radius: 5px 0 0 5px;"></td><td style="width: 15%;"></td></tr></tbody></table>
</div>
<div style="text-align: left; margin-bottom: 10px;">
<div style="font-size: 0.9rem; margin-bottom: 5px; color: #3d3d3d;">Тейвир (Авангардисты)</div>
<table style="width: 100%; height: 20px; background-color: #ddd; border-radius: 5px;"><tbody><tr><td style="width: 50%; background-color: #506fa0; border-radius: 5px 0 0 5px;"></td><td style="width: 50%;"></td></tr></tbody></table>
</div>
<div style="text-align: left;">
<div style="font-size: 0.9rem; margin-bottom: 5px; color: #3d3d3d;">Другие Контрабандисты</div>
<table style="width: 100%; height: 20px; background-color: #ddd; border-radius: 5px;"><tbody><tr><td style="width: 10%; background-color: #7d7667; border-radius: 5px 0 0 5px;"></td><td style="width: 90%;"></td></tr></tbody></table>
</div>
</div>
</td>
</tr>
<!-- NEW SECTIONS -->
<tr>
<td colspan="2" style="padding: 20px; border-top: 1px solid #7d7667;">
<div style="font-family: Cinzel, serif; font-size: 1.6rem; color: #7d7667; border-bottom: 1px solid #7d7667; margin-bottom: 15px; padding-bottom: 5px;">Ключевые Отношения</div>
<table style="width: 100%; border-spacing: 10px; margin-left: -10px;"><tbody>
<tr>
<td style="width: 50%; vertical-align: top; background-color: rgba(0,0,0,0.05); padding: 10px; border-left: 2px solid #7d7667;">
<strong>Лорд Эларион де Вальер:</strong><br>
<span style="color: #3d3d3d;">Отец. Хранитель традиций. Источник конфликта и главная причина, по которой Кассиан выбрал свой путь.</span>
</td>
<td style="width: 50%; vertical-align: top; background-color: rgba(0,0,0,0.05); padding: 10px; border-left: 2px solid #7d7667;">
<strong>Принцесса Элестра:</strong><br>
<span style="color: #3d3d3d;">Объект лояльности. Главная ставка в «Великой Игре» и символ будущего, которое Кассиан строит для Эйвелии.</span>
</td>
</tr>
<tr>
<td style="width: 50%; vertical-align: top; background-color: rgba(0,0,0,0.05); padding: 10px; border-left: 2px solid #7d7667;">
<strong>Морэн Варх:</strong><br>
<span style="color: #3d3d3d;">Крупнейший теневой игрок Фехрона. Главный конкурент и потенциальная цель для поглощения.</span>
</td>
<td style="width: 50%; vertical-align: top; background-color: rgba(0,0,0,0.05); padding: 10px; border-left: 2px solid #7d7667;">
<strong>«Авангард»:</strong><br>
<span style="color: #3d3d3d;">Ценный, но опасный актив в Тейвире. Инструмент для дестабилизации соседа.</span>
</td>
</tr>
</tbody></table>
</td>
</tr>
<tr>
<td colspan="2" style="padding: 20px; border-top: 1px solid #7d7667;">
<div style="font-family: Cinzel, serif; font-size: 1.6rem; color: #7d7667; border-bottom: 1px solid #7d7667; margin-bottom: 15px; padding-bottom: 5px;">Имущество и Артефакты</div>
<p style="color: #3d3d3d;"><strong>«Дворец Грёз»:</strong> Не просто особняк, а многоуровневый организм. Верхний мир — блестящий фасад для элиты. Средний мир — «Грёзные комнаты», где добываются секреты. Нижний мир — катакомбы, сердце теневой империи.</p>
<p style="margin-top: 10px; color: #3d3d3d;"><strong>«Перстень Молчания»:</strong> Фамильная драгоценность. Создаёт сферу абсолютной тишины, идеален для тайных переговоров.</p>
</td>
</tr>
<tr>
<td colspan="2" style="padding: 20px; border-top: 1px solid #7d7667;">
<div style="font-family: Cinzel, serif; font-size: 1.6rem; color: #7d7667; border-bottom: 1px solid #7d7667; margin-bottom: 15px; padding-bottom: 5px;">Хронология Эпизодов</div>
<p style="color: #878787; font-style: italic;">Здесь будут записаны ключевые события и приключения персонажа, произошедшие в ходе игры...</p>
</td>
</tr>
</tbody>
</table>[/html]
Поделиться482025-10-05 21:43:47
- Пришёл, увидел, закурил
- Сообщений: 109
Поделиться492025-10-05 23:51:42
- Пришёл, увидел, закурил
- Сообщений: 109
Поделиться502025-11-20 18:31:37
- Пришёл, увидел, закурил
- Сообщений: 109
Поделиться51Сегодня 05:43:35
- Пришёл, увидел, закурил
- Сообщений: 109
[html]<audio src="https://forumstatic.ru/files/001c/1f/11/57864.mp3" controls="controls"></audio>[/html]