��

2

mybb@mybb.ru (nagibator ��) — Tue, 13 Jan 2026 13:54:35 +0300

123

��

mybb@mybb.ru (nagibator ��) — Fri, 26 Dec 2025 22:23:45 +0300

[html]<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<style>
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;700&family=Roboto+Condensed:wght@400;700&display=swap');

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
background: #0a0a0c;
background-image: radial-gradient(circle at center, #1a1a2e 0%, #0a0a0c 100%);
color: #e0e0e0;
font-family: 'Roboto Condensed', sans-serif;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}

.game-container {
display: grid;
grid-template-columns: 300px 1fr;
gap: 25px;
max-width: 1100px;
width: 100%;
background: rgba(0, 0, 0, 0.6);
padding: 30px;
border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.05);
box-shadow: 0 20px 50px rgba(0,0,0,0.5);
backdrop-filter: blur(10px);
}

/* --- �� --- */
.sidebar { display: flex; flex-direction: column; gap: 20px; }

.panel {
background: rgba(255, 255, 255, 0.03);
border-left: 3px solid #ff4655;
padding: 15px;
border-radius: 4px;
}

.panel-h {
font-family: 'Oswald', sans-serif;
font-size: 14px;
letter-spacing: 2px;
color: #ff4655;
margin-bottom: 12px;
text-transform: uppercase;
}

.stat-row {
display: flex;
justify-content: space-between;
padding: 6px 0;
border-bottom: 1px solid rgba(255,255,255,0.05);
font-size: 14px;
}

.record-info {
display: flex;
flex-direction: column;
gap: 4px;
}

.record-player {
color: #aaa;
font-size: 12px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 180px;
}

.log-container {
font-size: 13px;
height: 200px;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: #ff4655 transparent;
}

.log-entry {
padding: 4px 0;
color: #aaa;
border-bottom: 1px solid rgba(255,255,255,0.02);
}

.log-entry b { color: #ff4655; }

/* --- �� --- */
.main-content { display: flex; flex-direction: column; gap: 20px; }

.boss-frame {
position: relative;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 0 30px rgba(255, 70, 85, 0.2);
border: 1px solid rgba(255, 70, 85, 0.3);
transition: transform 0.1s;
}

.boss-img {
width: 100%;
height: 450px;
object-fit: cover;
display: block;
}

.boss-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 40px 20px 20px;
background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, transparent 100%);
}

.boss-info {
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-bottom: 8px;
}

.boss-name {
font-family: 'Oswald', sans-serif;
font-size: 32px;
font-weight: 700;
color: #fff;
}

.hp-text { font-family: 'Oswald', sans-serif; color: #ff4655; font-size: 18px; }

.hp-bar-bg {
height: 12px;
background: rgba(255,255,255,0.1);
border-radius: 6px;
overflow: hidden;
}

.hp-bar-fill {
height: 100%;
background: #ff4655; /* �� */
background: linear-gradient(90deg, #ff4655, #ff8a71);
box-shadow: 0 0 15px #ff4655;
width: 100%;
transition: width 0.4s ease-out;
}

/* --- �� --- */
.controls {
display: grid;
grid-template-columns: 1fr 200px;
gap: 15px;
}

.game-input {
width: 100%;
height: 60px;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 8px;
padding: 0 20px;
color: #fff;
font-size: 16px;
outline: none;
}

.btn-attack {
height: 60px;
background: #ff4655;
color: #fff;
border: none;
border-radius: 8px;
font-family: 'Oswald', sans-serif;
font-size: 20px;
font-weight: 700;
cursor: pointer;
text-transform: uppercase;
transition: 0.2s;
}

.btn-attack:hover:not(:disabled) { background: #ff5e6a; transform: translateY(-2px); }
.btn-attack:disabled { background: #333; cursor: not-allowed; }

.damage-popup {
text-align: center;
font-family: 'Oswald', sans-serif;
font-size: 24px;
color: #ff4655;
height: 30px;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="game-container">
<aside class="sidebar">
<div class="panel">
<div class="panel-h">🏆 ��</div>
<div id="topList"></div>
</div>
<div class="panel">
<div class="panel-h">🎯 ��</div>
<div class="stat-row">
<span>��. ��</span>
<div class="record-info">
<b id="maxDmg" style="color:#ff4655">-</b>
<div id="maxPlayer" class="record-player">-</div>
</div>
</div>
<div class="stat-row">
<span>��. ��</span>
<div class="record-info">
<b id="minDmg" style="color:#fff">-</b>
<div id="minPlayer" class="record-player">-</div>
</div>
</div>
</div>
<div class="panel" style="flex-grow: 1;">
<div class="panel-h">📜 �� </div>
<div id="logs" class="log-container"></div>
</div>
</aside>

async function updateUI() {
try {
const [game, top, logs] = await Promise.all([
send("getGameData"),
send("getTopPlayers"),
send("getRecentLogs")
]);

// ��
const currentHp = game.boss.currentHealth;
const maxHp = game.boss.maxHealth;
const hpPct = Math.max(0, (currentHp / maxHp) * 100);

const bar = document.getElementById('hpBar');
bar.style.width = hpPct + '%';

document.getElementById('hpText').textContent = `${currentHp} / ${maxHp}`;
document.getElementById('atkBtn').disabled = currentHp <= 0;

// ��
document.getElementById('topList').innerHTML = top.slice(0, 5).map(p =>
`<div class="stat-row"><span>${p.nickname}</span><b>${p.totalDamage}</b></div>`
).join('') || '�� ';

// ��
document.getElementById('logs').innerHTML = logs.slice(-20).reverse().map(l => {
const parts = l.split(' �� ');
return `<div class="log-entry"><b>${parts[0] || '��'}</b> �� ${parts[1] || ''}</div>`;
}).join('');

// ��
const damageEntries = logs.map(l => {
const match = l.match(/(.+?) �� (\d+) ��/);
return match ? { name: match[1], val: parseInt(match[2]) } : null;
}).filter(x => x);

if (damageEntries.length > 0) {
const max = damageEntries.reduce((prev, curr) => (curr.val > prev.val) ? curr : prev);
const min = damageEntries.reduce((prev, curr) => (curr.val < prev.val) ? curr : prev);

// ��
document.getElementById('maxDmg').textContent = `${max.val}`;
document.getElementById('maxPlayer').textContent = max.name;

// ��
document.getElementById('minDmg').textContent = `${min.val}`;
document.getElementById('minPlayer').textContent = min.name;
} else {
// �� , ��
document.getElementById('maxDmg').textContent = '-';
document.getElementById('maxPlayer').textContent = '-';
document.getElementById('minDmg').textContent = '-';
document.getElementById('minPlayer').textContent = '-';
}
} catch (e) { console.error("UI Update Error:", e); }
}

setInterval(updateUI, 4000);
updateUI();
</script>
</body>
</html>[/html]

��-��

mybb@mybb.ru (nagibator ��) — Mon, 15 Dec 2025 00:43:33 +0300

[html]<style>
/* === �� === */
#paintContainer {
position: relative;
display: block;
width: 100%;
max-width: 100%;
}

#overlayImage {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: auto;
pointer-events: none;
user-select: none;
z-index: 2;
}

#paintCanvas {
width: 100%;
height: auto;
border: 1px solid #ccc;
display: block;
z-index: 1;
cursor: crosshair;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0);
border-radius: 0px;
}

/* === �� (Toolbar) === */
.toolbar {
margin-top: 20px;
padding: 15px;
background: #afafaf;
border-radius: 0px;
box-shadow: 0 6px 15px rgba(0, 0, 0, 0);
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: center;
font-family: Arial, sans-serif;
}

/* === �� === */
.layers-panel {
width: 300px;
background: #f5f5f5;
border-radius: 8px;
padding: 15px;
margin-top: 20px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
max-height: 400px;
overflow-y: auto;
}

.layers-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
padding-bottom: 10px;
border-bottom: 1px solid #ddd;
}

.layers-header h3 {
margin: 0;
color: #333;
font-size: 16px;
}

.layer-controls {
display: flex;
gap: 8px;
}

.layers-list {
display: flex;
flex-direction: column;
gap: 8px;
}

.layer-item {
display: flex;
align-items: center;
padding: 10px;
background: white;
border-radius: 6px;
border: 2px solid transparent;
cursor: pointer;
transition: all 0.2s;
}

.layer-item:hover {
background: #f0f0f0;
}

.layer-item.active {
border-color: #4a90e2;
background: #e8f2ff;
}

.layer-item.locked {
opacity: 0.6;
cursor: not-allowed;
}

.layer-visibility {
margin-right: 10px;
cursor: pointer;
}

.layer-name {
flex-grow: 1;
font-size: 14px;
color: #333;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.layer-name.editing {
background: white;
border: 1px solid #4a90e2;
padding: 2px 5px;
border-radius: 3px;
width: 150px;
}

.layer-actions {
display: flex;
gap: 5px;
margin-left: 10px;
}

.layer-btn {
background: none;
border: none;
cursor: pointer;
padding: 2px 6px;
border-radius: 3px;
font-size: 12px;
}

.layer-btn:hover {
background: #e0e0e0;
}

.layer-btn.delete {
color: #e74c3c;
}

/* === �� === */
.palette {
display: flex;
flex-wrap: wrap;
gap: 6px;
padding: 5px 0;
}

.color {
width: 26px;
height: 26px;
border-radius: 50%;
border: 2px solid transparent;
cursor: pointer;
transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.color:hover {
transform: scale(1.1);
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
}

.color.active {
border-color: #333;
transform: scale(1.15);
}

/* === �� === */
button {
padding: 8px 15px;
border-radius: 8px;
border: none;
background: #ffffff;
color: #333;
font-weight: 600;
cursor: pointer;
transition: background-color 0.2s, transform 0.1s, box-shadow 0.2s;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
display: flex;
align-items: center;
gap: 5px;
}

button:hover {
background: #e0e0e0;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

button:active {
transform: scale(0.98);
}

button:disabled {
opacity: 0.5;
cursor: not-allowed;
}

.small-btn {
padding: 5px 10px;
font-size: 12px;
}

/* === �� === */
#customColor {
width: 30px;
height: 30px;
padding: 0;
border: 2px solid #ccc;
border-radius: 50%;
cursor: pointer;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}

#customColor::-webkit-color-swatch {
border-radius: 50%;
border: none;
}

#customColor::-moz-color-swatch {
border-radius: 50%;
border: none;
}

.toolbar label {
display: flex;
align-items: center;
gap: 10px;
font-weight: 500;
white-space: nowrap;
}

#brushSize {
width: 120px;
cursor: pointer;
}

/* === �� === */
.hidden {
display: none;
}
</style>

// === �� ===
class Layer {
constructor(name = "�� ", isVisible = true) {
this.id = Date.now() + Math.random();
this.name = name;
this.isVisible = isVisible;
this.isLocked = false;
this.canvas = document.createElement('canvas');
this.ctx = this.canvas.getContext('2d');
this.history = [];
this.maxHistory = 10;
}

clear() {
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
}

saveToHistory() {
const imageData = this.ctx.getImageData(0, 0, this.canvas.width, this.canvas.height);
this.history.push(imageData);

if (this.history.length > this.maxHistory) {
this.history.shift();
}
}

undo() {
if (this.history.length > 0) {
this.history.pop();

this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);

if (this.history.length > 0) {
const prevState = this.history[this.history.length - 1];
this.ctx.putImageData(prevState, 0, 0);
}
}
}

resize(width, height) {
const oldCanvas = this.canvas;
const oldCtx = this.ctx;
const oldImageData = oldCtx.getImageData(0, 0, oldCanvas.width, oldCanvas.height);

this.canvas = document.createElement('canvas');
this.ctx = this.canvas.getContext('2d');
this.canvas.width = width;
this.canvas.height = height;

this.ctx.putImageData(oldImageData, 0, 0);
}
}

let layers = [];
let activeLayerIndex = 0;
let painting = false;
let brushType = "hard";
let currentColor = customColorInput.value;
let erasing = false;

// === �� ===
function initLayers() {
layers = [];
const baseLayer = new Layer("�� ");
layers.push(baseLayer);
activeLayerIndex = 0;
updateLayersList();
}

// === �� UI ===
function updateLayersList() {
layersList.innerHTML = '';

// �� (�� - ��)
[...layers].reverse().forEach((layer, index) => {
const displayIndex = layers.length - 1 - index;
const isActive = displayIndex === activeLayerIndex;

const layerElement = document.createElement('div');
layerElement.className = `layer-item ${isActive ? 'active' : ''} ${layer.isLocked ? 'locked' : ''}`;
layerElement.dataset.index = displayIndex;

layerElement.innerHTML = `
<div class="layer-visibility" data-action="toggle-visibility">
${layer.isVisible ? '👁️' : '👁️‍🗨️'}
</div>
<div class="layer-name" data-action="rename">${layer.name}</div>
<div class="layer-actions">
<button class="layer-btn" data-action="move-up" title="��">↑</button>
<button class="layer-btn" data-action="move-down" title="��">↓</button>
<button class="layer-btn ${layer.isLocked ? 'lock' : 'unlock'}" data-action="toggle-lock" title="${layer.isLocked ? '��' : '��'}">
${layer.isLocked ? '🔒' : '🔓'}
</button>
<button class="layer-btn delete" data-action="delete" title="��">✕</button>
</div>
`;

layersList.appendChild(layerElement);
});

attachLayerEvents();
updateUndoButton();
}

function setActiveLayer(index) {
activeLayerIndex = index;
updateLayersList();
updateUndoButton();
}

function toggleLayerVisibility(index) {
layers[index].isVisible = !layers[index].isVisible;
updateLayersList();
renderAllLayers();
}

function addNewLayer() {
const newLayer = new Layer(`�� ${layers.length + 1}`);
newLayer.canvas.width = canvas.width;
newLayer.canvas.height = canvas.height;
layers.push(newLayer);
activeLayerIndex = layers.length - 1;
updateLayersList();
}

// === �� ===
function renderAllLayers() {
ctx.clearRect(0, 0, canvas.width, canvas.height);

// ��
layers.forEach((layer, index) => {
if (layer.isVisible && layer.canvas) {
ctx.drawImage(layer.canvas, 0, 0);
}
});

saveProgress();
}

// === �� ===
function setActiveColor(targetColor) {
document.querySelectorAll('.color').forEach(el => el.classList.remove('active'));
currentColor = targetColor;
erasing = false;
}

function setActivePaletteColor(el, color) {
setActiveColor(color);
el.classList.add('active');
customColorInput.value = color;
}

// === �� ===
const colors = [
"#000000", "#ffffff", "#9b3a3a", "#7e9b3a", "#3a759b", "#ffff00", "#ff00ff", "#74d2ca",
"#808080", "#804000", "#ff8000", "#8000ff", "#0080ff", "#80ff00", "#ff0080", "#008080",
"#404040", "#c0c0c0", "#d53403", "#add8e6"
];

const palette = document.getElementById("palette");
colors.forEach(c => {
const el = document.createElement("div");
el.className = "color";
el.style.backgroundColor = c;
el.onclick = () => setActivePaletteColor(el, c);
palette.appendChild(el);
});

if (palette.firstChild) {
palette.firstChild.classList.add('active');
}

customColorInput.oninput = e => setActiveColor(e.target.value);

// === �� ===
document.getElementById("hardBrush").onclick = () => {
brushType = "hard";
erasing = false;
setActiveColor(customColorInput.value);
};

document.getElementById("softBrush").onclick = () => {
brushType = "soft";
erasing = false;
setActiveColor(customColorInput.value);
};

document.getElementById("eraser").onclick = () => {
erasing = true;
document.querySelectorAll('.color').forEach(el => el.classList.remove('active'));
};

// === �� ===
toggleLayersBtn.addEventListener('click', () => {
layersPanel.classList.toggle('hidden');
});

addLayerBtn.addEventListener('click', addNewLayer);
mergeLayersBtn.addEventListener('click', mergeLayers);

// === �� ===
document.getElementById("clearCanvas").onclick = () => {
const activeLayer = layers[activeLayerIndex];
if (!activeLayer.isLocked) {
activeLayer.saveToHistory();
activeLayer.clear();
renderAllLayers();
}
};

document.getElementById("saveProgress").onclick = () => {
saveAllLayersProgress();
alert("✅ �� !");
};

document.getElementById("undoButton").onclick = undoLastAction;

// === �� ===
function updateUndoButton() {
const activeLayer = layers[activeLayerIndex];
undoButton.disabled = !activeLayer || activeLayer.history.length === 0 || activeLayer.isLocked;
}

function undoLastAction() {
const activeLayer = layers[activeLayerIndex];
if (activeLayer && !activeLayer.isLocked) {
activeLayer.undo();
renderAllLayers();
updateUndoButton();
}
}

// === �� ===
function resizeCanvas() {
if (img.naturalWidth === 0) return;

const ratio = img.naturalWidth / img.naturalHeight;
const container = document.getElementById("paintContainer");
const clientWidth = container.clientWidth;

canvas.width = clientWidth;
canvas.height = clientWidth / ratio;

// ��
layers.forEach(layer => {
layer.resize(canvas.width, canvas.height);
});

restoreProgress();
}

img.onload = () => {
resizeCanvas();
initLayers();
renderAllLayers();
};

window.onresize = resizeCanvas;

if (img.complete) {
resizeCanvas();
initLayers();
renderAllLayers();
}

// === �� ===
function startDraw(e) {
const activeLayer = layers[activeLayerIndex];
if (activeLayer.isLocked) return;

painting = true;
activeLayer.saveToHistory();
draw(e);
}

function endDraw() {
painting = false;
const activeLayer = layers[activeLayerIndex];
if (activeLayer) {
activeLayer.ctx.beginPath();
}
saveProgress();
}

function draw(e) {
const activeLayer = layers[activeLayerIndex];
if (!painting || !activeLayer || activeLayer.isLocked) return;

const rect = canvas.getBoundingClientRect();
const clientX = e.clientX || e.touches?.[0]?.clientX;
const clientY = e.clientY || e.touches?.[0]?.clientY;

if (clientX === undefined || clientY === undefined) return;

const x = clientX - rect.left;
const y = clientY - rect.top;

const brushSize = brushSizeInput.value;

if (brushType === "soft") {
softStroke(activeLayer.ctx, x, y, brushSize);
} else if (erasing) {
activeLayer.ctx.globalCompositeOperation = "destination-out";
activeLayer.ctx.beginPath();
activeLayer.ctx.arc(x, y, brushSize / 2, 0, Math.PI * 2);
activeLayer.ctx.fill();
activeLayer.ctx.beginPath();
} else {
activeLayer.ctx.globalCompositeOperation = "source-over";
activeLayer.ctx.lineWidth = brushSize;
activeLayer.ctx.lineCap = "round";
activeLayer.ctx.strokeStyle = currentColor;
activeLayer.ctx.globalAlpha = 1;
activeLayer.ctx.lineTo(x, y);
activeLayer.ctx.stroke();
activeLayer.ctx.beginPath();
activeLayer.ctx.moveTo(x, y);
}

renderAllLayers();
}

// === �� ===
function softStroke(context, x, y, size) {
const hexToRgb = hex => {
const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
hex = hex.replace(shorthandRegex, (m, r, g, b) => r + r + g + g + b + b);
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
return result ? `${parseInt(result[1], 16)},${parseInt(result[2], 16)},${parseInt(result[3], 16)}` : '0,0,0';
};

const rgbColor = hexToRgb(erasing ? '#ffffff' : currentColor);

const grd = context.createRadialGradient(x, y, 0, x, y, size / 2);
grd.addColorStop(0, `rgba(${rgbColor}, 0.8)`);
grd.addColorStop(1, `rgba(${rgbColor}, 0)`);

context.globalCompositeOperation = erasing ? 'destination-out' : 'source-over';
context.globalAlpha = 0.4;
context.fillStyle = grd;
context.beginPath();
context.arc(x, y, size / 2, 0, Math.PI * 2);
context.fill();
context.beginPath();
}

// === ��/�� ===
function saveAllLayersProgress() {
const layersData = layers.map(layer => ({
name: layer.name,
isVisible: layer.isVisible,
isLocked: layer.isLocked,
data: layer.canvas.toDataURL()
}));
localStorage.setItem("coloringLayers", JSON.stringify(layersData));
localStorage.setItem("activeLayerIndex", activeLayerIndex);
}

function saveProgress() {
saveAllLayersProgress();
}

// === �� ===
canvas.addEventListener("mousedown", startDraw);
canvas.addEventListener("mouseup", endDraw);
canvas.addEventListener("mouseout", endDraw);
canvas.addEventListener("mousemove", draw);
canvas.addEventListener("touchstart", startDraw);
canvas.addEventListener("touchend", endDraw);
canvas.addEventListener("touchcancel", endDraw);
canvas.addEventListener("touchmove", draw);
})();
</script>[/html]

[hideprofile]

��-��

mybb@mybb.ru (nagibator ��) — Mon, 08 Dec 2025 01:07:19 +0300

[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>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
color: #fff;
}

.unified-container {
display: flex;
width: 100%;
max-width: 1200px;
background: rgba(30, 30, 46, 0.9);
border-radius: 20px;
border: 3px solid #4a4a6d;
box-shadow: 0 0 40px rgba(0, 0, 0, 0.7);
overflow: hidden;
}

.top-players {
flex: 0 0 250px;
background: rgba(40, 40, 60, 0.9);
padding: 15px;
overflow-y: auto;
border-right: 2px solid #5a5a80;
}

.top-players h2 {
position: sticky;
top: 0;
background: rgba(40, 40, 60, 0.95);
padding-bottom: 10px;
z-index: 10;
}

.player-list { list-style: none; padding-top: 5px; }
.player-item { display: flex; justify-content: space-between; padding: 10px 5px; margin-bottom: 5px; background: rgba(50, 50, 70, 0.6); border-radius: 6px; border-left: 3px solid #ffd700; font-size: 14px; transition: background 0.2s; }
.player-item:hover { background: rgba(60, 60, 80, 0.7); }
.player-item.user-highlight { border-left: 3px solid #4CAF50; background: rgba(76, 175, 80, 0.1); }

.right-section {
flex-grow: 1;
display: flex;
flex-direction: column;
padding: 20px;
align-items: center;
}

.slot-machine-container {
width: 100%;
max-width: 500px;
display: flex;
flex-direction: column;
align-items: center;
}

.header-controls {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
margin-bottom: 15px;
gap: 15px;
}

.coins-display {
display: flex;
align-items: center;
gap: 10px;
background: rgba(30, 30, 46, 0.8);
padding: 10px 15px;
border-radius: 10px;
border: 2px solid #FFD700;
box-shadow: 0 0 15px rgba(255, 215, 0, 0.3);
flex: 1;
}

.coins-info {
display: flex;
flex-direction: column;
gap: 5px;
}

.coins-count {
font-size: 24px;
font-weight: bold;
color: #FFD700;
text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

.coins-label {
font-size: 14px;
color: #aaa;
}

.daily-coins-btn {
background: linear-gradient(145deg, #FFD700, #FFA500);
color: #000;
border: none;
border-radius: 8px;
padding: 8px 15px;
font-size: 14px;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease;
white-space: nowrap;
}

.daily-coins-btn:hover:not(:disabled) {
background: linear-gradient(145deg, #FFA500, #FFD700);
transform: scale(1.05);
}

.daily-coins-btn:disabled {
background: #4a4a6d;
color: #888;
cursor: not-allowed;
}

.timer-container {
background: rgba(30, 30, 46, 0.8);
padding: 10px 15px;
border-radius: 10px;
border: 2px solid #4a4a6d;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.4);
flex: 1;
text-align: center;
}

#slot-timer {
font-size: 16px;
color: #ffdd8a;
font-weight: bold;
text-shadow: 0 0 5px rgba(255, 221, 138, 0.7);
}

.spin-controls {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 15px;
gap: 10px;
}

.checkbox-container {
padding: 8px 12px;
align-self: flex-start;
margin-left: 20px;
}

#slot-spin {
width: 90%;
max-width: 300px;
height: 60px;
font-size: 28px;
font-weight: bold;
color: #fff;
background: linear-gradient(145deg, #ff416c, #ff4b2b);
border: none;
border-radius: 12px;
cursor: pointer;
box-shadow: 0 10px 20px rgba(255, 75, 43, 0.6), 0 0 0 4px #ffc107;
transition: all 0.2s ease;
text-transform: uppercase;
}

#slot-spin:hover:not(:disabled) {
background: linear-gradient(145deg, #ff4b2b, #ff416c);
transform: scale(1.03);
box-shadow: 0 12px 25px rgba(255, 75, 43, 0.8), 0 0 0 6px #ffd700;
}

#slot-spin:disabled {
background: #4a4a6d;
cursor: not-allowed;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
opacity: 0.7;
}

#toggle-stats-btn {
background: linear-gradient(to right, #4a4a6d, #5a5a80);
color: #fff;
border: none;
border-radius: 8px;
padding: 10px 15px;
font-size: 14px;
cursor: pointer;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
transition: background 0.3s ease, transform 0.2s ease;
margin-top: 20px;
display: flex;
align-items: center;
gap: 8px;
width: 90%;
max-width: 500px;
justify-content: center;
}

#toggle-stats-btn:hover {
background: linear-gradient(to right, #5a5a80, #6a6a90);
transform: translateY(-2px);
}

.player-info {
background: rgba(30, 30, 46, 0.8);
border-radius: 15px;
padding: 15px;
border: 2px solid #6a6a90;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
width: 90%;
max-width: 500px;
max-height: 0;
overflow: hidden;
opacity: 0;
padding-top: 0;
padding-bottom: 0;
margin-top: 10px;
transition: max-height 0.5s ease-in-out, opacity 0.4s ease, padding 0.5s ease;
}

.player-info.open {
max-height: 500px;
opacity: 1;
padding-top: 15px;
padding-bottom: 15px;
}

.top-players h2, .player-info h2 {
text-align: center; margin-bottom: 15px; color: #ffd700; text-shadow: 0 0 10px rgba(255, 215, 0, 0.5); font-size: 20px;
}
.player-name { font-weight: bold; }
.player-amount { color: #4CAF50; font-weight: bold; }

.slot-machine { width: 100%; padding: 15px; background: rgba(40, 40, 60, 0.9); border-radius: 10px; text-align: center; color: #fff; border: 2px solid #5a5a80; box-shadow: 0 0 25px rgba(0, 0, 0, 0.4); position: relative; }
.result-display { padding: 10px; margin-bottom: 15px; font-size: 16px; min-height: 50px; display: flex; align-items: center; justify-content: center; transition: all 0.5s ease; }
.win-result { background: rgba(76, 175, 80, 0.2); color: #4CAF50; border: 2px solid #4CAF50; box-shadow: 0 0 15px rgba(76, 175, 80, 0.5); text-shadow: 0 0 5px rgba(76, 175, 80, 0.7); }
.lose-result { background: rgba(244, 67, 54, 0.2); color: #f44336; border: 2px solid #f44336; box-shadow: 0 0 15px rgba(244, 67, 54, 0.3); }
.slot-window { display: flex; justify-content: space-around; margin-bottom: 15px; padding: 10px; border-radius: 10px; border: 2px solid #555; background: rgba(20, 20, 35, 0.8);}
.slot-reel { width: 80px; height: 80px; overflow: hidden; border-radius: 8px; background: #000; border: 2px solid #555; position: relative; box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.7); }
.slot-reel img { width: 100%; height: 100%; object-fit: contain; top: 0; transition: top 0.15s linear; }

.current-player {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px;
background: rgba(40, 40, 60, 0.7);
border-radius: 10px;
border-left: 4px solid #4CAF50;
margin-bottom: 15px;
}

.player-resources {
display: flex;
flex-direction: column;
gap: 5px;
align-items: flex-end;
}

.player-coins {
color: #FFD700;
font-weight: bold;
font-size: 18px;
}

.player-stats { display: flex; flex-direction: column; gap: 10px; }
.stat-item { display: flex; justify-content: space-between; padding: 10px 12px; background: rgba(50, 50, 70, 0.5); border-radius: 6px; }
.stat-label { color: #ccc; }
.stat-value { color: #ffd700; font-weight: bold; }
.last-spin-result {
background: rgba(90, 90, 128, 0.3);
border: 1px solid #6a6a90;
border-radius: 8px;
padding: 10px;
margin-bottom: 10px;
font-size: 14px;
}
.last-spin-win { color: #4CAF50; border-color: #4CAF50; background: rgba(76, 175, 80, 0.1); }
.last-spin-lose { color: #f44336; border-color: #f44336; background: rgba(244, 67, 54, 0.1); }

.daily-coins-timer {
font-size: 12px;
margin-top: 5px;
padding: 4px 8px;
border-radius: 4px;
font-weight: bold;
text-align: center;
}

.daily-coins-timer.available {
background: rgba(76, 175, 80, 0.2);
color: #4CAF50;
border: 1px solid #4CAF50;
}

.daily-coins-timer.cooldown {
background: rgba(244, 67, 54, 0.2);
color: #f44336;
border: 1px solid #f44336;
}

.coins-section {
display: flex;
flex-direction: column;
gap: 5px;
}

@media (max-width: 850px) {
.unified-container {
flex-direction: column;
max-width: 550px;
}

.top-players {
flex: none;
width: 100%;
max-height: 250px;
border-right: none;
border-bottom: 2px solid #5a5a80;
border-radius: 20px 20px 0 0;
}

.right-section {
padding: 15px;
}

.top-players h2 {
position: static;
background: none;
}

.slot-machine-container {
max-width: none;
}

.player-info {
max-width: none;
}

#toggle-stats-btn {
max-width: none;
}

.current-player {
flex-direction: column;
gap: 10px;
align-items: stretch;
}

.player-resources {
align-items: stretch;
}

.header-controls {
flex-direction: column;
}

.coins-display, .timer-container {
width: 100%;
}
}
</style>
</head>
<body>
<div class="unified-container">
<div class="top-players">
<h2>�� </h2>
<ul class="player-list" id="top-players-list">
<li class="player-item"><span class="player-name">��...</span><span class="player-amount">0$</span></li>
</ul>
</div>

toggleBtn.addEventListener('click', () => {
statsBlock.classList.toggle('open');
});

console.log('🎮 Frame script starting...');

// ��
const EVERYDAY_COINS = 1; // �� , ��
const COINS_PER_SPIN = 1; // ��

// �� - �� (wildcard)
function sendToParent(data) {
try {
console.log('📤 Sending to parent:', data.type);
// '*' �� origin ��
window.parent.postMessage(data, '*');
return true;
} catch (e) {
console.error('❌ Send failed:', e);
return false;
}
}

// ��
function sendStorageRequest(action, data = {}) {
return new Promise((resolve, reject) => {
const requestId = Date.now() + '_' + Math.random().toString(36).substr(2, 9);

const message = {
_slotMachine: true,
type: "storageRequest",
requestId: requestId,
action: action,
...data
};

const responseHandler = (event) => {
// �� origin (�� )
const response = event.data;
if (response && response._slotMachine === true &&
response.type === "storageResponse" &&
response.requestId === requestId) {

console.log('📨 Received response from parent:', action);
window.removeEventListener("message", responseHandler);
clearTimeout(timeout);

if (response.error) {
reject(new Error(response.error));
} else {
resolve(response.data);
}
}
};

window.addEventListener("message", responseHandler);

const timeout = setTimeout(() => {
window.removeEventListener("message", responseHandler);
console.error('⏰ Timeout for action:', action);
reject(new Error(`Timeout: ${action}`));
}, 8000);

if (!sendToParent(message)) {
window.removeEventListener("message", responseHandler);
clearTimeout(timeout);
reject(new Error("Failed to send message to parent"));
}
});
}

// ��
async function loadUserData() {
try {
console.log('👤 Loading user data...');
const userData = await sendStorageRequest("getUserData");

console.log('📊 User data received:', userData);

if (!userData) {
throw new Error("�� ");
}

// ��
return {
userId: userData.userId || "unknown",
nickname: userData.nickname || "��",
balance: typeof userData.balance === 'number' ? userData.balance : 0,
coins: typeof userData.coins === 'number' ? userData.coins : 0, // ��
lastDailyCoins: userData.lastDailyCoins || null, // ��
totalGames: userData.totalGames || 0,
wins: userData.wins || 0,
totalWinnings: userData.totalWinnings || 0,
maxWin: userData.maxWin || 0,
currentStreak: userData.currentStreak || 0,
bestStreak: userData.bestStreak || 0,
lastSpin: userData.lastSpin || null,
lastSpinResult: userData.lastSpinResult || null
};
} catch (error) {
console.error("❌ Error loading user data:", error);
return {
userId: "unknown",
nickname: "��",
balance: 0,
coins: 0,
lastDailyCoins: null,
totalGames: 0,
wins: 0,
totalWinnings: 0,
maxWin: 0,
currentStreak: 0,
bestStreak: 0,
lastSpin: null,
lastSpinResult: null
};
}
}

// ��
async function saveUserData(userData) {
try {
console.log('💾 Saving user data...');
await sendStorageRequest("saveUserData", { userData });
console.log('✅ User data saved');
} catch (error) {
console.error("❌ Error saving user data:", error);
}
}

// ��
async function claimDailyCoins() {
try {
console.log('🪙 Claiming daily coins...');
const result = await sendStorageRequest("claimDailyCoins", {
coinsAmount: EVERYDAY_COINS
});
console.log('✅ Daily coins claimed:', result);
return result;
} catch (error) {
console.error("❌ Error claiming daily coins:", error);
throw error;
}
}

// ��
async function loadTopPlayers() {
try {
console.log('🏆 Loading top players...');
const topPlayers = await sendStorageRequest("getTopPlayers");
console.log('📊 Top players received:', topPlayers?.length || 0, 'players');
return topPlayers || [];
} catch (error) {
console.error("❌ Error loading top players:", error);
return [];
}
}

// ��
async function updateTopPlayers() {
try {
const topPlayers = await loadTopPlayers();
const topList = document.getElementById('top-players-list');

if (!topList) return;

if (topPlayers.length === 0) {
topList.innerHTML = '<li class="player-item"><span class="player-name">�� </span><span class="player-amount">0$</span></li>';
return;
}

topList.innerHTML = '';

topPlayers.forEach((player, index) => {
const li = document.createElement('li');
li.className = 'player-item';

if (userData && player.userId === userData.userId) {
li.classList.add('user-highlight');
}

li.innerHTML = `
<span class="player-name">${index + 1}. ${player.nickname || '��'}</span>
<span class="player-amount">${player.totalWinnings || 0}$</span>
`;

topList.appendChild(li);
});
} catch (error) {
console.error('❌ Error updating top players:', error);
}
}

// ��
const TIMER_HOURS = 0;
const TIMER_MINUTES = 0;
const COOLDOWN = (TIMER_HOURS*60 + TIMER_MINUTES)*60*1000;

const symbols = [
{name:"Tikva", url:"https://upforme.ru/uploads/001c/52/b6/2/605998.png"},
{name:"Cherep", url:"https://upforme.ru/uploads/001c/52/b6/2/319417.png"},
{name:"Potion", url:"https://upforme.ru/uploads/001c/52/b6/2/610070.png"}
];

const winningCombos = {
"Tikva,Tikva,Tikva": 100,
"Cherep,Cherep,Cherep": 150,
"Tikva,Cherep,Tikva": 200,
"Potion,Potion,Cherep": 250,
"Potion,Potion,Potion": 300,
"Tikva,Cherep,Potion": 500
};

const reels = document.querySelectorAll(".slot-reel img");
const spinBtn = document.getElementById("slot-spin");
const timerEl = document.getElementById("slot-timer");
const resultDisplay = document.getElementById("result-display");
const confirmBet = document.getElementById("confirm-bet");
const coinsCountEl = document.getElementById("coins-count");
const dailyCoinsBtn = document.getElementById("daily-coins-btn");
const dailyCoinsTimerEl = document.getElementById("daily-coins-timer");

let userData = null;
let debugMode = false; // ��

// �� (UTC+3)
function getMoscowTime() {
const now = new Date();
// �� UTC+3
return new Date(now.getTime() + (3 * 60 * 60 * 1000));
}

// �� (00:00)
function getStartOfTodayMoscow() {
const moscowTime = getMoscowTime();
return new Date(moscowTime.getFullYear(), moscowTime.getMonth(), moscowTime.getDate()).getTime();
}

// ��, ��
function canClaimDailyCoins() {
if (!userData || !userData.lastDailyCoins) return true;

const lastClaimTime = userData.lastDailyCoins;
const todayStart = getStartOfTodayMoscow();

return lastClaimTime < todayStart;
}

// ��
function getTimeUntilNextClaim() {
if (!userData || !userData.lastDailyCoins) return null;

const moscowTime = getMoscowTime();
const nextClaim = new Date(moscowTime.getFullYear(), moscowTime.getMonth(), moscowTime.getDate() + 1).getTime();

return nextClaim - moscowTime.getTime();
}

// ��
function updateUserInfo() {
if (!userData) {
if (debugMode) console.log('⚠️ No user data to update UI');
return;
}

if (debugMode) console.log('🔄 Updating UI with balance:', userData.balance, 'coins:', userData.coins);

const playerNickname = document.getElementById('player-nickname');
const playerBalance = document.getElementById('player-balance');
const playerCoins = document.getElementById('player-coins');
const totalGames = document.getElementById('total-games');
const wins = document.getElementById('wins');
const totalWinnings = document.getElementById('total-winnings');
const winRate = document.getElementById('win-rate');
const currentStreak = document.getElementById('current-streak');
const bestStreak = document.getElementById('best-streak');
const lastSpinEl = document.getElementById('last-spin-result');

// ��
if (playerNickname) playerNickname.textContent = userData.nickname;
if (playerBalance) playerBalance.textContent = userData.balance + '$';
if (playerCoins) playerCoins.textContent = userData.coins + ' 🪙';
if (coinsCountEl) coinsCountEl.textContent = userData.coins + ' 🪙';

// ��
if (totalGames) totalGames.textContent = userData.totalGames;
if (wins) wins.textContent = userData.wins;
if (totalWinnings) totalWinnings.textContent = userData.totalWinnings + '$';
if (winRate) {
winRate.textContent = userData.totalGames > 0 ?
Math.round((userData.wins / userData.totalGames) * 100) + '%' : '0%';
}
if (currentStreak) currentStreak.textContent = userData.currentStreak;
if (bestStreak) bestStreak.textContent = userData.bestStreak;

// ��
if (lastSpinEl) {
if (userData.lastSpinResult) {
lastSpinEl.textContent = `�� : ${userData.lastSpinResult}`;
lastSpinEl.className = userData.lastSpinResult.includes('��') ?
'last-spin-result last-spin-win' : 'last-spin-result last-spin-lose';
} else {
lastSpinEl.textContent = '�� : �� ';
lastSpinEl.className = 'last-spin-result';
}
}

// ��
updateDailyCoinsUI();

if (debugMode) console.log('✅ UI updated, balance:', userData.balance + '$, coins:', userData.coins);
}

// �� UI ��
function updateDailyCoinsUI() {
if (!dailyCoinsBtn || !dailyCoinsTimerEl) return;

const canClaim = canClaimDailyCoins();
dailyCoinsBtn.disabled = !canClaim;

if (canClaim) {
dailyCoinsBtn.title = `�� ${EVERYDAY_COINS} ��${EVERYDAY_COINS > 1 ? '�' : ''}`;
dailyCoinsTimerEl.textContent = '�� !';
dailyCoinsTimerEl.className = 'daily-coins-timer available';
} else {
const timeLeft = getTimeUntilNextClaim();
if (timeLeft) {
const hours = Math.floor(timeLeft / (1000 * 60 * 60));
const minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((timeLeft % (1000 * 60)) / 1000);
dailyCoinsTimerEl.textContent = `�� ${hours}� ${minutes}�`;
dailyCoinsTimerEl.className = 'daily-coins-timer cooldown';
dailyCoinsBtn.title = `�� ${hours}� ${minutes}�`;
}
}
}

// �� (�� )
function updateSpinButton() {
if (!userData || !confirmBet || !spinBtn) {
if (debugMode) console.log('⚠️ Missing elements for spin button update');
return;
}

const hasCooldown = userData.lastSpin && (Date.now() - userData.lastSpin < COOLDOWN);
const hasCoins = userData.coins >= COINS_PER_SPIN;
spinBtn.disabled = !confirmBet.checked || hasCooldown || !hasCoins;

// ��
if (spinBtn) {
if (!hasCoins) {
spinBtn.textContent = `�� ${COINS_PER_SPIN} ��${COINS_PER_SPIN > 1 ? '�' : ''}`;
} else if (hasCooldown) {
spinBtn.textContent = "��";
} else {
spinBtn.textContent = `SPIN (${COINS_PER_SPIN} ��${COINS_PER_SPIN > 1 ? '�' : ''})`;
}
}

// �� debug ��
if (debugMode) {
console.log('🎮 Spin button state:', {
checked: confirmBet.checked,
hasCooldown: hasCooldown,
hasCoins: hasCoins,
coins: userData.coins,
disabled: spinBtn.disabled
});
}
}

// ��
function updateTimer() {
if (!userData || !timerEl) return;

if (!userData.lastSpin) {
timerEl.textContent = "�� ! ✅";
updateSpinButton();
return;
}

let diff = COOLDOWN - (Date.now() - userData.lastSpin);
if(diff <= 0){
timerEl.textContent = "�� ! ✅";
updateSpinButton();
} else {
let h=Math.floor(diff/3600000),
m=Math.floor((diff%3600000)/60000),
s=Math.floor((diff%60000)/1000);
timerEl.textContent = `${h}� ${m}� ${s}�`;
updateSpinButton();
}
}

// ��
function updateDailyCoinsTimer() {
updateDailyCoinsUI();
}

// �� HTML ��
function createSlotResultHTML(resultSymbols, isWin, winAmount, resultMessage) {
const symbolsHTML = resultSymbols.map(symbolName => {
const symbol = symbols.find(s => s.name === symbolName);
if (symbol) {
return `<div style="width:80px;height:80px;border-radius:10px;border:2px solid #555;background:#000;overflow:hidden;box-shadow:0 0 10px rgba(0,0,0,0.5);margin:0 5px;"><img src="${symbol.url}" alt="${symbolName}" style="width:100%;height:100%;object-fit:contain;"></div>`;
}
return '';
}).join('');

const winStyle = isWin ?
"background:rgba(76,175,80,0.2);color:#4CAF50;border:2px solid #4CAF50;box-shadow:0 0 20px rgba(76,175,80,0.5);text-shadow:0 0 5px rgba(76,175,80,0.7)" :
"background:rgba(244,67,54,0.2);color:#f44336;border:2px solid #f44336;box-shadow:0 0 20px rgba(244,67,54,0.3)";

return `
<div style="background:rgba(30,30,46,0.95);border:2px solid #5a5a80;border-radius:15px;padding:15px;margin:10px 0;max-width:500px;box-shadow:0 0 25px rgba(0,0,0,0.6);">
<div style="text-align:center;margin-bottom:15px;color:#ffd700;text-shadow:0 0 10px rgba(255,215,0,0.5);font-size:20px;border-bottom:2px solid #4a4a6d;padding-bottom:10px;">
🎰 ��
</div>
<div style="display:flex;flex-direction:column;align-items:center;gap:15px;">
<div style="display:flex;justify-content:center;gap:15px;margin-bottom:15px;">
${symbolsHTML}
</div>
<div style="text-align:center;padding:12px;border-radius:10px;font-size:18px;font-weight:bold;width:100%;${winStyle}">
${resultMessage}
</div>
<div style="text-align:center;margin-top:10px;font-size:14px;color:#aaa;border-top:1px solid #4a4a6d;padding-top:10px;">
��: <strong style="color:#ffd700;">${userData.nickname}</strong> |
��: <strong style="color:#4CAF50;">${userData.balance}$</strong> |
��: <strong style="color:#FFD700;">${userData.coins} 🪙</strong>
</div>
</div>
</div>`;
}

// ��
async function spinReels() {
if(!userData || !confirmBet || !resultDisplay || !spinBtn) {
console.error('❌ Missing elements for spin');
return;
}

if(!confirmBet.checked) {
resultDisplay.textContent = "�� !";
resultDisplay.className = "result-display lose-result";
return;
}

if(userData.lastSpin && Date.now() - userData.lastSpin < COOLDOWN){
const timeLeft = COOLDOWN - (Date.now() - userData.lastSpin);
const minutes = Math.floor(timeLeft / 60000);
const seconds = Math.floor((timeLeft % 60000) / 1000);
resultDisplay.textContent = `�� ${minutes}� ${seconds}�!`;
resultDisplay.className = "result-display lose-result";
return;
}

if(userData.coins < COINS_PER_SPIN) {
resultDisplay.textContent = `�� ! �� ${COINS_PER_SPIN}`;
resultDisplay.className = "result-display lose-result";
return;
}

spinBtn.disabled=true;
resultDisplay.textContent = "��...";
resultDisplay.className = "result-display";

// ��
userData.coins -= COINS_PER_SPIN;
console.log(`🪙 Spent ${COINS_PER_SPIN} coin(s), remaining: ${userData.coins}`);

let results=[];
let durations=[1000, 1300, 1600];

reels.forEach((img,index)=>{
let cycles = 12 + Math.floor(Math.random()*8);
let finalSymbol = symbols[Math.floor(Math.random()*symbols.length)];
results.push(finalSymbol.name);

let step=0;
let interval = setInterval(()=>{
let sym = symbols[Math.floor(Math.random()*symbols.length)];
img.style.top="-100%";
img.src = sym.url;

setTimeout(()=>{
img.style.top="0";
}, 10);

step++;
if(step>=cycles){
img.src = finalSymbol.url;
img.style.top="0";
clearInterval(interval);
}
}, durations[index]/cycles);
});

setTimeout(async () => {
let reward = 0;
const key = results.join(",");
console.log('🎯 Spin result:', key);

for(let combo in winningCombos){
if(key === combo) {
reward = winningCombos[combo];
console.log('🎉 Winning combo found:', combo, 'reward:', reward);
}
}

let resultMessage = "";
let isWin = false;

if(reward > 0) {
isWin = true;
resultMessage = `��! �� ${reward}$`;
resultDisplay.textContent = resultMessage;
resultDisplay.className = "result-display win-result";

userData.balance += reward;
userData.totalGames += 1;
userData.wins += 1;
userData.totalWinnings += reward;
userData.currentStreak += 1;
if (userData.currentStreak > userData.bestStreak) {
userData.bestStreak = userData.currentStreak;
}
if (reward > userData.maxWin) {
userData.maxWin = reward;
}
} else {
resultMessage = "��! �� .";
resultDisplay.textContent = resultMessage;
resultDisplay.className = "result-display lose-result";

userData.totalGames += 1;
userData.currentStreak = 0;
}

userData.lastSpin = Date.now();
userData.lastSpinResult = resultMessage;

console.log('📊 Updated user data after spin:', {
balance: userData.balance,
coins: userData.coins,
totalGames: userData.totalGames,
wins: userData.wins,
totalWinnings: userData.totalWinnings
});

// ��
await saveUserData(userData);

// ��
updateUserInfo();
await updateTopPlayers();

// �� HTML ��
const messageHTML = createSlotResultHTML(results, isWin, reward, resultMessage);
const encoded = btoa(unescape(encodeURIComponent(messageHTML)));

// ��
sendToParent({
_slotMachine: true,
type: "slotResult",
payload: {
html: encoded,
userId: userData.userId,
nickname: userData.nickname,
result: resultMessage,
reward: reward,
balance: userData.balance,
coins: userData.coins,
timestamp: Date.now()
}
});

// �� UI
updateSpinButton();
updateTimer();

}, Math.max(...durations));
}

// ��
async function claimDailyCoinsHandler() {
if (!dailyCoinsBtn || !resultDisplay) return;

if (!canClaimDailyCoins()) {
resultDisplay.textContent = "�� !";
resultDisplay.className = "result-display lose-result";
return;
}

try {
dailyCoinsBtn.disabled = true;
resultDisplay.textContent = "�� ...";
resultDisplay.className = "result-display";

const result = await claimDailyCoins();

if (result.success) {
// ��
userData.coins = result.coins;
userData.lastDailyCoins = result.lastDailyCoins;

resultDisplay.textContent = `🎉 �� ${result.coinsAdded} ��${result.coinsAdded > 1 ? '�' : ''}! ��: ${result.coins} 🪙`;
resultDisplay.className = "result-display win-result";

// ��
await saveUserData(userData);

// ��
updateUserInfo();
updateSpinButton();
updateDailyCoinsUI();
}
} catch (error) {
console.error('❌ Error claiming daily coins:', error);
resultDisplay.textContent = error.message || "�� ";
resultDisplay.className = "result-display lose-result";
updateDailyCoinsUI();
}
}

// ��
async function init() {
console.log('🎮 Initializing slot machine...');

try {
// �� ping/pong
console.log('🔗 Testing connection with parent...');
const pingId = Date.now();
let pingReceived = false;

const pingHandler = (event) => {
const response = event.data;
if (response && response._slotMachine === true &&
response.type === "pong" && response.pingId === pingId) {
pingReceived = true;
console.log('✅ Ping received from parent');
window.removeEventListener("message", pingHandler);
}
};

window.addEventListener("message", pingHandler);

sendToParent({
_slotMachine: true,
type: "ping",
pingId: pingId
});

// ��
await new Promise(resolve => setTimeout(resolve, 1000));

if (!pingReceived) {
console.warn('⚠️ No ping response, but continuing anyway');
}

// ��
userData = await loadUserData();

console.log('👤 User data loaded:', userData);
console.log('💰 Current balance:', userData.balance);
console.log('🪙 Current coins:', userData.coins);
console.log('📅 Last daily coins:', userData.lastDailyCoins ? new Date(userData.lastDailyCoins).toLocaleString() : 'never');

// ��
updateUserInfo();
await updateTopPlayers();

// ��
if (confirmBet) {
confirmBet.addEventListener("change", updateSpinButton);
updateSpinButton();
}

if (spinBtn) {
spinBtn.addEventListener("click", spinReels);
}

// ��
if (dailyCoinsBtn) {
dailyCoinsBtn.addEventListener("click", claimDailyCoinsHandler);
}

// ��
updateTimer();
updateDailyCoinsTimer();

const timerInterval = setInterval(updateTimer, 1000);
const dailyTimerInterval = setInterval(updateDailyCoinsTimer, 1000);

// ��
const topPlayersInterval = setInterval(async () => {
await updateTopPlayers();
}, 30000);

console.log("✅ ��-�� !");

// �� /��
window.toggleSlotDebug = function() {
debugMode = !debugMode;
console.log(`🎮 Debug mode ${debugMode ? 'enabled' : 'disabled'}`);
};

} catch (error) {
console.error("❌ �� :", error);
if (resultDisplay) {
resultDisplay.textContent = "�� . �� .";
resultDisplay.className = "result-display lose-result";
}
}
}

// ��
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', init);
} else {
init();
}
})();
</script>
</body>
</html>[/html]
[hideprofile]

��-��

mybb@mybb.ru (nagibator ��) — Mon, 08 Dec 2025 00:11:46 +0300

body {
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
color: #fff;
}

.top-players h2 {
position: sticky;
top: 0;
background: rgba(40, 40, 60, 0.95);
padding-bottom: 10px;
z-index: 10;
}

.right-section {
flex-grow: 1;
display: flex;
flex-direction: column;
padding: 20px;
align-items: center;
}

.slot-machine-container {
width: 100%;
max-width: 500px;
display: flex;
flex-direction: column;
align-items: center;
}

.header-controls {
display: flex;
justify-content: flex-start;
align-items: center;
width: 100%;
margin-bottom: 15px;
gap: 15px;
}

.coins-display {
display: flex;
align-items: center;
gap: 10px;
background: rgba(30, 30, 46, 0.8);
padding: 10px 15px;
border-radius: 10px;
border: 2px solid #FFD700;
box-shadow: 0 0 15px rgba(255, 215, 0, 0.3);
}

.coins-info {
display: flex;
flex-direction: column;
gap: 5px;
}

.coins-count {
font-size: 24px;
font-weight: bold;
color: #FFD700;
text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

.coins-label {
font-size: 14px;
color: #aaa;
}

.daily-coins-btn {
background: linear-gradient(145deg, #FFD700, #FFA500);
color: #000;
border: none;
border-radius: 8px;
padding: 8px 15px;
font-size: 14px;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease;
white-space: nowrap;
}

.daily-coins-btn:hover:not(:disabled) {
background: linear-gradient(145deg, #FFA500, #FFD700);
transform: scale(1.05);
}

.daily-coins-btn:disabled {
background: #4a4a6d;
color: #888;
cursor: not-allowed;
opacity: 0.7;
}

.spin-controls {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 15px;
gap: 10px;
}

#toggle-stats-btn:hover {
background: linear-gradient(to right, #5a5a80, #6a6a90);
transform: translateY(-2px);
}

.daily-coins-timer.available {
background: rgba(76, 175, 80, 0.2);
color: #4CAF50;
border: 1px solid #4CAF50;
}

.daily-coins-timer.cooldown {
background: rgba(244, 67, 54, 0.2);
color: #f44336;
border: 1px solid #f44336;
}

.coins-section {
display: flex;
flex-direction: column;
gap: 5px;
}

@media (max-width: 850px) {
.unified-container {
flex-direction: column;
max-width: 550px;
}

.top-players {
flex: none;
width: 100%;
max-height: 250px;
border-right: none;
border-bottom: 2px solid #5a5a80;
border-radius: 20px 20px 0 0;
}

.right-section {
padding: 15px;
}

.top-players h2 {
position: static;
background: none;
}

.slot-machine-container {
max-width: none;
}

.player-info {
max-width: none;
}

#toggle-stats-btn {
max-width: none;
}

.current-player {
flex-direction: column;
gap: 10px;
align-items: stretch;
}

.player-resources {
align-items: stretch;
}

.header-controls {
flex-direction: column;
}

.coins-display {
width: 100%;
}
}
</style>
</head>
<body>
<div class="unified-container">
<div class="top-players">
<h2>�� </h2>
<ul class="player-list" id="top-players-list">
<li class="player-item"><span class="player-name">��...</span><span class="player-amount">0$</span></li>
</ul>
</div>

toggleBtn.addEventListener('click', () => {
statsBlock.classList.toggle('open');
});

console.log('🎮 Frame script starting...');

// ��
const EVERYDAY_COINS = 1;
const COINS_PER_SPIN = 1;
const DAILY_COINS_COOLDOWN_HOURS = 24;
const DAILY_COINS_COOLDOWN_MS = DAILY_COINS_COOLDOWN_HOURS * 60 * 60 * 1000;

// ��
function sendToParent(data) {
try {
console.log('📤 Sending to parent:', data.type);
window.parent.postMessage(data, '*');
return true;
} catch (e) {
console.error('❌ Send failed:', e);
return false;
}
}

// ��
function sendStorageRequest(action, data = {}) {
return new Promise((resolve, reject) => {
const requestId = Date.now() + '_' + Math.random().toString(36).substr(2, 9);

const message = {
_slotMachine: true,
type: "storageRequest",
requestId: requestId,
action: action,
...data
};

const responseHandler = (event) => {
const response = event.data;
if (response && response._slotMachine === true &&
response.type === "storageResponse" &&
response.requestId === requestId) {

console.log('📨 Received response from parent:', action);
window.removeEventListener("message", responseHandler);
clearTimeout(timeout);

if (response.error) {
reject(new Error(response.error));
} else {
resolve(response.data);
}
}
};

window.addEventListener("message", responseHandler);

const timeout = setTimeout(() => {
window.removeEventListener("message", responseHandler);
console.error('⏰ Timeout for action:', action);
reject(new Error(`Timeout: ${action}`));
}, 8000);

if (!sendToParent(message)) {
window.removeEventListener("message", responseHandler);
clearTimeout(timeout);
reject(new Error("Failed to send message to parent"));
}
});
}

// ��
async function loadUserData() {
try {
console.log('👤 Loading user data...');
const userData = await sendStorageRequest("getUserData");

if (!userData) {
throw new Error("�� ");
}

return {
userId: userData.userId || "unknown",
nickname: userData.nickname || "��",
balance: typeof userData.balance === 'number' ? userData.balance : 0,
coins: typeof userData.coins === 'number' ? userData.coins : 0,
lastDailyCoins: userData.lastDailyCoins || null,
totalGames: userData.totalGames || 0,
wins: userData.wins || 0,
totalWinnings: userData.totalWinnings || 0,
maxWin: userData.maxWin || 0,
currentStreak: userData.currentStreak || 0,
bestStreak: userData.bestStreak || 0,
lastSpinResult: userData.lastSpinResult || null
};
} catch (error) {
console.error("❌ Error loading user data:", error);
return {
userId: "unknown",
nickname: "��",
balance: 0,
coins: 0,
lastDailyCoins: null,
totalGames: 0,
wins: 0,
totalWinnings: 0,
maxWin: 0,
currentStreak: 0,
bestStreak: 0,
lastSpinResult: null
};
}
}

// ��
async function saveUserData(userData) {
try {
console.log('💾 Saving user data...');
await sendStorageRequest("saveUserData", { userData });
console.log('✅ User data saved');
} catch (error) {
console.error("❌ Error saving user data:", error);
}
}

// ��
async function loadTopPlayers() {
try {
console.log('🏆 Loading top players...');
const topPlayers = await sendStorageRequest("getTopPlayers");
return topPlayers || [];
} catch (error) {
console.error("❌ Error loading top players:", error);
return [];
}
}

// ��
const symbols = [
{name:"Tikva", url:"https://upforme.ru/uploads/001c/52/b6/2/605998.png"},
{name:"Cherep", url:"https://upforme.ru/uploads/001c/52/b6/2/319417.png"},
{name:"Potion", url:"https://upforme.ru/uploads/001c/52/b6/2/610070.png"}
];

const winningCombos = {
"Tikva,Tikva,Tikva": 100,
"Cherep,Cherep,Cherep": 150,
"Tikva,Cherep,Tikva": 200,
"Potion,Potion,Cherep": 250,
"Potion,Potion,Potion": 300,
"Tikva,Cherep,Potion": 500
};

const reels = document.querySelectorAll(".slot-reel img");
const spinBtn = document.getElementById("slot-spin");
const resultDisplay = document.getElementById("result-display");
const confirmBet = document.getElementById("confirm-bet");
const coinsCountEl = document.getElementById("coins-count");
const dailyCoinsBtn = document.getElementById("daily-coins-btn");
const dailyCoinsTimerEl = document.getElementById("daily-coins-timer");

let userData = null;

// ��, ��
function canClaimDailyCoins() {
if (!userData || !userData.lastDailyCoins) {
return true;
}

const now = Date.now();
const timeSinceLastClaim = now - userData.lastDailyCoins;
return timeSinceLastClaim >= DAILY_COINS_COOLDOWN_MS;
}

// ��
function getTimeUntilNextClaim() {
if (!userData || !userData.lastDailyCoins) {
return 0;
}

const now = Date.now();
const timeSinceLastClaim = now - userData.lastDailyCoins;

if (timeSinceLastClaim >= DAILY_COINS_COOLDOWN_MS) {
return 0;
}

return DAILY_COINS_COOLDOWN_MS - timeSinceLastClaim;
}

// ��
function formatTimeUntilNextClaim(timeLeft) {
if (!timeLeft || timeLeft <= 0) {
return "�� !";
}

const hours = Math.floor(timeLeft / (1000 * 60 * 60));
const minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((timeLeft % (1000 * 60)) / 1000);

if (hours > 0) {
return `${hours}� ${minutes.toString().padStart(2, '0')}� ${seconds.toString().padStart(2, '0')}�`;
} else if (minutes > 0) {
return `${minutes}� ${seconds.toString().padStart(2, '0')}�`;
} else {
return `${seconds}�`;
}
}

// ��
function updateUserInfo() {
if (!userData) return;

const playerNickname = document.getElementById('player-nickname');
const playerBalance = document.getElementById('player-balance');
const playerCoins = document.getElementById('player-coins');
const totalGames = document.getElementById('total-games');
const wins = document.getElementById('wins');
const totalWinnings = document.getElementById('total-winnings');
const winRate = document.getElementById('win-rate');
const currentStreak = document.getElementById('current-streak');
const bestStreak = document.getElementById('best-streak');
const lastSpinEl = document.getElementById('last-spin-result');

// ��
if (playerNickname) playerNickname.textContent = userData.nickname;
if (playerBalance) playerBalance.textContent = userData.balance + '$';
if (playerCoins) playerCoins.textContent = userData.coins + ' 🪙';
if (coinsCountEl) coinsCountEl.textContent = userData.coins + ' 🪙';

// ��
if (totalGames) totalGames.textContent = userData.totalGames;
if (wins) wins.textContent = userData.wins;
if (totalWinnings) totalWinnings.textContent = userData.totalWinnings + '$';
if (winRate) {
winRate.textContent = userData.totalGames > 0 ?
Math.round((userData.wins / userData.totalGames) * 100) + '%' : '0%';
}
if (currentStreak) currentStreak.textContent = userData.currentStreak;
if (bestStreak) bestStreak.textContent = userData.bestStreak;

// ��
if (lastSpinEl) {
if (userData.lastSpinResult) {
lastSpinEl.textContent = `�� : ${userData.lastSpinResult}`;
lastSpinEl.className = userData.lastSpinResult.includes('��') ?
'last-spin-result last-spin-win' : 'last-spin-result last-spin-lose';
} else {
lastSpinEl.textContent = '�� : �� ';
lastSpinEl.className = 'last-spin-result';
}
}

// ��
updateDailyCoinsUI();
}

// �� UI ��
function updateDailyCoinsUI() {
if (!dailyCoinsBtn || !dailyCoinsTimerEl) return;

const canClaim = canClaimDailyCoins();
const timeLeft = getTimeUntilNextClaim();
const formattedTime = formatTimeUntilNextClaim(timeLeft);

dailyCoinsBtn.disabled = !canClaim;

if (canClaim) {
dailyCoinsBtn.title = `�� ${EVERYDAY_COINS} ��`;
dailyCoinsTimerEl.textContent = '�� !';
dailyCoinsTimerEl.className = 'daily-coins-timer available';
} else {
dailyCoinsBtn.title = `�� ${formattedTime}`;
dailyCoinsTimerEl.textContent = formattedTime;
dailyCoinsTimerEl.className = 'daily-coins-timer cooldown';
}
}

// ��
function updateSpinButton() {
if (!userData || !confirmBet || !spinBtn) return;

const hasCoins = userData.coins >= COINS_PER_SPIN;
spinBtn.disabled = !confirmBet.checked || !hasCoins;

if (spinBtn) {
if (!hasCoins) {
spinBtn.textContent = `�� ${COINS_PER_SPIN} ��`;
} else {
spinBtn.textContent = `SPIN (${COINS_PER_SPIN} ��)`;
}
}
}

// ��
function updateDailyCoinsTimer() {
updateDailyCoinsUI();
}

// �� HTML ��
function createSlotResultHTML(resultSymbols, isWin, winAmount, resultMessage) {
const symbolsHTML = resultSymbols.map(symbolName => {
const symbol = symbols.find(s => s.name === symbolName);
if (symbol) {
return `<div style="width:80px;height:80px;border-radius:10px;border:2px solid #555;background:#000;overflow:hidden;box-shadow:0 0 10px rgba(0,0,0,0.5);margin:0 5px;"><img src="${symbol.url}" alt="${symbolName}" style="width:100%;height:100%;object-fit:contain;"></div>`;
}
return '';
}).join('');

const winStyle = isWin ?
"background:rgba(76,175,80,0.2);color:#4CAF50;border:2px solid #4CAF50;box-shadow:0 0 20px rgba(76,175,80,0.5);text-shadow:0 0 5px rgba(76,175,80,0.7)" :
"background:rgba(244,67,54,0.2);color:#f44336;border:2px solid #f44336;box-shadow:0 0 20px rgba(244,67,54,0.3)";

return `
<div style="background:rgba(30,30,46,0.95);border:2px solid #5a5a80;border-radius:15px;padding:15px;margin:10px 0;max-width:500px;box-shadow:0 0 25px rgba(0,0,0,0.6);">
<div style="text-align:center;margin-bottom:15px;color:#ffd700;text-shadow:0 0 10px rgba(255,215,0,0.5);font-size:20px;border-bottom:2px solid #4a4a6d;padding-bottom:10px;">
🎰 ��
</div>
<div style="display:flex;flex-direction:column;align-items:center;gap:15px;">
<div style="display:flex;justify-content:center;gap:15px;margin-bottom:15px;">
${symbolsHTML}
</div>
<div style="text-align:center;padding:12px;border-radius:10px;font-size:18px;font-weight:bold;width:100%;${winStyle}">
${resultMessage}
</div>
<div style="text-align:center;margin-top:10px;font-size:14px;color:#aaa;border-top:1px solid #4a4a6d;padding-top:10px;">
��: <strong style="color:#ffd700;">${userData.nickname}</strong> |
��: <strong style="color:#4CAF50;">${userData.balance}$</strong> |
��: <strong style="color:#FFD700;">${userData.coins} 🪙</strong>
</div>
</div>
</div>`;
}

// ��
async function spinReels() {
if(!userData || !confirmBet || !resultDisplay || !spinBtn) {
console.error('❌ Missing elements for spin');
return;
}

if(!confirmBet.checked) {
resultDisplay.textContent = "�� !";
resultDisplay.className = "result-display lose-result";
return;
}

if(userData.coins < COINS_PER_SPIN) {
resultDisplay.textContent = `�� ! �� ${COINS_PER_SPIN}`;
resultDisplay.className = "result-display lose-result";
return;
}

spinBtn.disabled=true;
resultDisplay.textContent = "��...";
resultDisplay.className = "result-display";

// ��
userData.coins -= COINS_PER_SPIN;
console.log(`🪙 Spent ${COINS_PER_SPIN} coin(s), remaining: ${userData.coins}`);

let results=[];
let durations=[1000, 1300, 1600];

reels.forEach((img,index)=>{
let cycles = 12 + Math.floor(Math.random()*8);
let finalSymbol = symbols[Math.floor(Math.random()*symbols.length)];
results.push(finalSymbol.name);

let step=0;
let interval = setInterval(()=>{
let sym = symbols[Math.floor(Math.random()*symbols.length)];
img.style.top="-100%";
img.src = sym.url;

setTimeout(()=>{
img.style.top="0";
}, 10);

step++;
if(step>=cycles){
img.src = finalSymbol.url;
img.style.top="0";
clearInterval(interval);
}
}, durations[index]/cycles);
});

setTimeout(async () => {
let reward = 0;
const key = results.join(",");

for(let combo in winningCombos){
if(key === combo) {
reward = winningCombos[combo];
}
}

let resultMessage = "";
let isWin = false;

if(reward > 0) {
isWin = true;
resultMessage = `��! �� ${reward}$`;
resultDisplay.textContent = resultMessage;
resultDisplay.className = "result-display win-result";

userData.balance += reward;
userData.totalGames += 1;
userData.wins += 1;
userData.totalWinnings += reward;
userData.currentStreak += 1;
if (userData.currentStreak > userData.bestStreak) {
userData.bestStreak = userData.currentStreak;
}
if (reward > userData.maxWin) {
userData.maxWin = reward;
}
} else {
resultMessage = "��! �� .";
resultDisplay.textContent = resultMessage;
resultDisplay.className = "result-display lose-result";

userData.totalGames += 1;
userData.currentStreak = 0;
}

userData.lastSpinResult = resultMessage;

// ��
await saveUserData(userData);

// ��
updateUserInfo();
await updateTopPlayers();

// �� HTML ��
const messageHTML = createSlotResultHTML(results, isWin, reward, resultMessage);
const encoded = btoa(unescape(encodeURIComponent(messageHTML)));

// ��
sendToParent({
_slotMachine: true,
type: "slotResult",
payload: {
html: encoded,
userId: userData.userId,
nickname: userData.nickname,
result: resultMessage,
reward: reward,
balance: userData.balance,
coins: userData.coins,
timestamp: Date.now()
}
});

// �� UI
updateSpinButton();

}, Math.max(...durations));
}

// ��
async function claimDailyCoinsHandler() {
if (!dailyCoinsBtn || !resultDisplay) return;

try {
dailyCoinsBtn.disabled = true;
resultDisplay.textContent = "�� ...";
resultDisplay.className = "result-display";

const result = await claimDailyCoins();

if (result.success) {
// ��
userData.coins = result.coins;
userData.lastDailyCoins = result.lastDailyCoins;

resultDisplay.textContent = `🎉 �� ${result.coinsAdded} ��! ��: ${result.coins} 🪙`;
resultDisplay.className = "result-display win-result";

// ��
await saveUserData(userData);

// ��
updateUserInfo();
updateSpinButton();
updateDailyCoinsUI();

} else {
resultDisplay.textContent = "�� ";
resultDisplay.className = "result-display lose-result";
updateDailyCoinsUI();
}
} catch (error) {
console.error('❌ Error claiming daily coins:', error);
resultDisplay.textContent = error.message || "�� ";
resultDisplay.className = "result-display lose-result";
updateDailyCoinsUI();
}
}

// ��
async function init() {
console.log('🎮 Initializing slot machine...');

try {
// ��
userData = await loadUserData();

console.log('👤 User data loaded:', userData);
console.log('💰 Current balance:', userData.balance);
console.log('🪙 Current coins:', userData.coins);
console.log('📅 Last daily coins:', userData.lastDailyCoins ?
new Date(userData.lastDailyCoins).toLocaleString() : 'never');

// ��
updateUserInfo();
await updateTopPlayers();

// ��
if (confirmBet) {
confirmBet.addEventListener("change", updateSpinButton);
updateSpinButton();
}

if (spinBtn) {
spinBtn.addEventListener("click", spinReels);
}

// ��
if (dailyCoinsBtn) {
dailyCoinsBtn.addEventListener("click", claimDailyCoinsHandler);
}

// ��
updateDailyCoinsUI();

// ��
const dailyTimerInterval = setInterval(updateDailyCoinsTimer, 1000);

// ��
const topPlayersInterval = setInterval(async () => {
await updateTopPlayers();
}, 30000);

console.log("✅ ��-�� !");

} catch (error) {
console.error("❌ �� :", error);
if (resultDisplay) {
resultDisplay.textContent = "�� . �� .";
resultDisplay.className = "result-display lose-result";
}
}
}

// ��
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', init);
} else {
init();
}
})();
</script>
</body>
</html>[/html]

��

mybb@mybb.ru (nagibator ��) — Sun, 23 Nov 2025 18:41:21 +0300

�� : �� ! �� ID: 3.

��

mybb@mybb.ru (nagibator ��) — Wed, 19 Nov 2025 14:39:48 +0300

[html]<style>
/* === �� === */
#paintContainer {
position: relative;
display: block;
width: 100%;
max-width: 100%;
}

#overlayImage {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: auto;
pointer-events: none;
user-select: none;
z-index: 2;
}

#paintCanvas {
width: 100%;
height: auto;
border: 1px solid #ccc; /* �� */
display: block;
z-index: 1;
cursor: crosshair; /* �� */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* �� */
border-radius: 8px;
}

/* === �� (Toolbar) === */
.toolbar {
margin-top: 20px;
padding: 15px;
background: #f4f4f4; /* �� */
border-radius: 12px; /* �� */
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1); /* �� */
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: center;
font-family: Arial, sans-serif;
}

/* === �� === */
.palette {
display: flex;
flex-wrap: wrap;
gap: 6px;
padding: 5px 0;
}

.color {
width: 26px; /* �� */
height: 26px;
border-radius: 50%;
border: 2px solid transparent; /* �� */
cursor: pointer;
transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.color:hover {
transform: scale(1.1);
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
}

.color.active {
border-color: #333; /* �� */
transform: scale(1.15);
}

button:hover {
background: #e0e0e0;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

button:active {
transform: scale(0.98);
}

#customColor::-webkit-color-swatch {
border-radius: 50%;
border: none;
}

#customColor::-moz-color-swatch {
border-radius: 50%;
border: none;
}

.toolbar label {
display: flex;
align-items: center;
gap: 10px;
font-weight: 500;
white-space: nowrap;
}

#brushSize {
width: 120px;
cursor: pointer;
}
</style>

let painting = false;
let brushType = "hard";
let currentColor = customColorInput.value;
let erasing = false;

// --- �� ---
function setActiveColor(targetColor) {
document.querySelectorAll('.color').forEach(el => el.classList.remove('active'));
currentColor = targetColor;
erasing = false;
}

function setActivePaletteColor(el, color) {
setActiveColor(color);
el.classList.add('active');
customColorInput.value = color; // ��
}

// === �� ===
const colors = [
"#000000", "#ffffff", "#ff0000", "#00ff00", "#0000ff", "#ffff00", "#ff00ff", "#00ffff",
"#808080", "#804000", "#ff8000", "#8000ff", "#0080ff", "#80ff00", "#ff0080", "#008080",
"#404040", "#c0c0c0", "#a52a2a", "#add8e6"
];

// �� (��)
if (palette.firstChild) {
palette.firstChild.classList.add('active');
}

customColorInput.oninput = e => setActiveColor(e.target.value);

// === �� ===
document.getElementById("hardBrush").onclick = () => { brushType = "hard"; erasing = false; setActiveColor(customColorInput.value); };
document.getElementById("softBrush").onclick = () => { brushType = "soft"; erasing = false; setActiveColor(customColorInput.value); };
document.getElementById("eraser").onclick = () => { erasing = true; document.querySelectorAll('.color').forEach(el => el.classList.remove('active')); };

document.getElementById("clearCanvas").onclick = () => {
ctx.clearRect(0, 0, canvas.width, canvas.height);
localStorage.removeItem("coloringProgress");
};
document.getElementById("saveProgress").onclick = () => {
localStorage.setItem("coloringProgress", canvas.toDataURL());
alert("✅ �� !");
};
// �� showCode � copyCode ��.

// === �� ===
function resizeCanvas() {
if (img.naturalWidth === 0) return;

const ratio = img.naturalWidth / img.naturalHeight;
const container = document.getElementById("paintContainer");
const clientWidth = container.clientWidth;

canvas.width = clientWidth;
canvas.height = clientWidth / ratio;
restoreProgress();
}
img.onload = resizeCanvas;
window.onresize = resizeCanvas;
if (img.complete) {
resizeCanvas();
}

// === �� ===
function startDraw(e) { painting = true; draw(e); }
function endDraw() { painting = false; ctx.beginPath(); saveProgress(); }

function draw(e) {
if (!painting) return;
const rect = canvas.getBoundingClientRect();
const clientX = e.clientX || e.touches?.[0]?.clientX;
const clientY = e.clientY || e.touches?.[0]?.clientY;

if (clientX === undefined || clientY === undefined) return;

const x = clientX - rect.left;
const y = clientY - rect.top;

const brushSize = brushSizeInput.value;

if (brushType === "soft") {
softStroke(x, y, brushSize);
} else if (erasing) {
ctx.globalCompositeOperation = "destination-out";
ctx.beginPath();
ctx.arc(x, y, brushSize / 2, 0, Math.PI * 2);
ctx.fill();
ctx.beginPath();
} else {
ctx.globalCompositeOperation = "source-over";
ctx.lineWidth = brushSize;
ctx.lineCap = "round";
ctx.strokeStyle = currentColor;
ctx.globalAlpha = 1;
ctx.lineTo(x, y);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(x, y);
}
}

// === �� ===
function softStroke(x, y, size) {
const hexToRgb = hex => {
const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
hex = hex.replace(shorthandRegex, (m, r, g, b) => r + r + g + g + b + b);
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
return result ? `${parseInt(result[1], 16)},${parseInt(result[2], 16)},${parseInt(result[3], 16)}` : '0,0,0';
};
const rgbColor = hexToRgb(erasing ? '#ffffff' : currentColor);

const grd = ctx.createRadialGradient(x, y, 0, x, y, size / 2);
grd.addColorStop(0, `rgba(${rgbColor}, 0.8)`);
grd.addColorStop(1, `rgba(${rgbColor}, 0)`);

ctx.globalCompositeOperation = erasing ? 'destination-out' : 'source-over';
ctx.globalAlpha = 0.4;
ctx.fillStyle = grd;
ctx.beginPath();
ctx.arc(x, y, size / 2, 0, Math.PI * 2);
ctx.fill();
ctx.beginPath();
}

// === ��/�� ===
function saveProgress() {
localStorage.setItem("coloringProgress", canvas.toDataURL());
}

function restoreProgress() {
const saved = localStorage.getItem("coloringProgress");
if (saved) {
const imgData = new Image();
imgData.onload = () => ctx.drawImage(imgData, 0, 0, canvas.width, canvas.height);
imgData.src = saved;
}
}

��

mybb@mybb.ru (nagibator ��) — Mon, 17 Nov 2025 23:12:04 +0300

�� 
[html]
<style>
.usr_inv {display: grid;gap: 10px;margin-top: 10px;grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));}
.inv_item {background: ;border: 1px solid #ddd;border-radius: 4px;padding: 10px;text-align: center;}
.item-image {height: 50px;object-fit: cover;border-radius: 4px;}
.item-description {display: none;}
#detailed-view-mi4ufaigpze4hj202e:checked ~ .usr_inv {grid-template-columns: 1fr;}
#detailed-view-mi4ufaigpze4hj202e:checked ~ .usr_inv .inv_item {display: flex;align-items: center;text-align: left;gap: 15px;padding: 15px;}
#detailed-view-mi4ufaigpze4hj202e:checked ~ .usr_inv .item-image {width: 50px;height: 50px;flex-shrink: 0;}
#detailed-view-mi4ufaigpze4hj202e:checked ~ .usr_inv .item-description {display: block;flex: 1;}
</style>

<div>
<input type="checkbox" id="detailed-view-mi4ufaigpze4hj202e">
<label for="detailed-view-mi4ufaigpze4hj202e" class="view-toggle">�� </label>
<div class="usr_inv">
<div class="inv_item">
<img src="https://upforme.ru/uploads/001c/80/ee/3/850554.png?sec=DQ0+QTpQQEYODCoPDDhkGhE0Xx9nIyZRRDg0IkkWbFhRICk8HGA1NkMqUXwKKytfRDw/a1phKyklCBoGSiUZGC8MQRcpKz5EESRrRmAFKBsoBBhHFjY6UC9EKFYkHjEIP1BmWCELORIkK2cIOhkjHmEHMF09GkBO" title="��" alt="��" class="item-image">
<div class="item-description">
<h3>��</h3>
<p>��. �� , �� </p>
<div>
<p><strong>��:</strong> nagibator �� (ID: 3)</p>
<p><strong>��:</strong> <a href="https://lalamo.rusff.me/viewtopic.php?id=10" target="_blank">��</a></p>
<p><strong>�� :</strong> 17.11.2025, 23:11:59</p>
</div>
</div>
</div><div class="inv_item">
<img src="https://upforme.ru/uploads/001c/80/ee/3/385664.png?sec=DQ0+QTpQQEYODCoPDDhkGhE0Xx9nIyZRRDg0IkkWbFhRICk8HGA1NkMqUXwKKytfRDw/a1phKyklCBoGSiUZGC8MQRcpKz5EESRrRmAFKBsoBBhHFjY6UC9EKFYkHjEIP1BmWCELORIkK2cIOhkjH2EHIFs9GkBO" title="��" alt="��" class="item-image">
<div class="item-description">
<h3>��</h3>
<p>��, �� , �� </p>
<div>
<p><strong>��:</strong> nagibator �� (ID: 3)</p>
<p><strong>��:</strong> <a href="https://lalamo.rusff.me/viewtopic.php?id=10#p248" target="_blank">��</a></p>
<p><strong>�� :</strong> 17.11.2025, 23:12:17</p>
</div>
</div>
</div><div class="inv_item">
<img src="https://upforme.ru/uploads/001c/80/ee/3/850554.png?sec=DQ0+QTpQQEYODCoPDDhkGhE0Xx9nIyZRRDg0IkkWbFhRICk8HGA1NkMqUXwKKytfRDw/a1phKyklCBoGSiUZGC8MQRcpKz5EESRrRmAFKBsoBBhHFjY6UC9EKFYkHjEIP1BmWCELORIkK2cIOhkjH2EHKFs9GkBO" title="��" alt="��" class="item-image">
<div class="item-description">
<h3>��</h3>
<p>��. �� , �� </p>
<div>
<p><strong>��:</strong> nagibator �� (ID: 3)</p>
<p><strong>��:</strong> <a href="https://lalamo.rusff.me/viewtopic.php?id=10#p248" target="_blank">��</a></p>
<p><strong>�� :</strong> 17.11.2025, 23:12:37</p>
</div>
</div>
</div><div class="inv_item">
<img src="https://upforme.ru/uploads/001c/80/ee/3/83614.png?sec=DQ0+QTpQQEYODCoPDDhkGhE0Xx9nIyZRRDg0IkkWbFhRICk8HGA1NkMqUXwKKytfRDw/a1phKyklCBoGSiUZGC8MQRcpKz5EESRrRmAFKBsoBBhHFjY6UC9EKFYkHjEIP1BmWCELORIkK2cIOhkjH2EHMBI9GkBO" title="��" alt="��" class="item-image">
<div class="item-description">
<h3>��</h3>
<p>�� . �� </p>
<div>
<p><strong>��:</strong> nagibator �� (ID: 3)</p>
<p><strong>��:</strong> <a href="https://lalamo.rusff.me/viewtopic.php?id=10#p248" target="_blank">��</a></p>
<p><strong>�� :</strong> 17.11.2025, 23:12:53</p>
</div>
</div>
</div><div class="inv_item">
<img src="https://upforme.ru/uploads/001c/80/ee/3/698249.png?sec=DQ0+QTpQQEYODCoPDDhkGhE0Xx9nIyZRRDg0IkkWbFhRICk8HGA1NkMqUXwKKytfRDw/a1phKyklCBoGSiUZGC8MQRcpKz5EESRrRmAFKBsoBBhHFjY6UC9EKFYkHjEIP1BmWCELORIkK2cIOhkjHGEHJFw9GkBO" title="��" alt="��" class="item-image">
<div class="item-description">
<h3>��</h3>
<p>�� : �� , �� , �� </p>
<div>
<p><strong>��:</strong> nagibator �� (ID: 3)</p>
<p><strong>��:</strong> <a href="https://lalamo.rusff.me/viewtopic.php?id=10#p248" target="_blank">��</a></p>
<p><strong>�� :</strong> 17.11.2025, 23:13:08</p>
</div>
</div>
</div><div class="inv_item">
<img src="https://upforme.ru/uploads/001c/80/ee/3/926120.png?sec=DQ0+QTpQQEYODCoPDDhkGhE0Xx9nIyZRRDg0IkkWbFhRICk8HGA1NkMqUXwKKytfRDw/a1phKyklCBoGSiUZGC8MQRcpKz5EESRrRmAFKBsoBBhHFjY6UC9EKFYkHjEIP1BmWCELORIkK2cIOhkjHGEHKBA9GkBO" title="��" alt="��" class="item-image">
<div class="item-description">
<h3>��</h3>
<p>�� . �� !</p>
<div>
<p><strong>��:</strong> nagibator �� (ID: 3)</p>
<p><strong>��:</strong> <a href="https://lalamo.rusff.me/viewtopic.php?id=10#p248" target="_blank">��</a></p>
<p><strong>�� :</strong> 17.11.2025, 23:13:31</p>
</div>
</div>
</div><div class="inv_item">
<img src="https://upforme.ru/uploads/001c/80/ee/3/591683.png?sec=DQ0+QTpQQEYODCoPDDhkGhE0Xx9nIyZRRDg0IkkWbFhRICk8HGA1NkMqUXwKKytfRDw/a1phKyklCBoGSiUZGC8MQRcpKz5EESRrRmAFKBsoBBhHFjY6UC9EKFYkHjEIP1BmWCELORIkK2cIOhkjHGEHMFk9GkBO" title="��" alt="��" class="item-image">
<div class="item-description">
<h3>��</h3>
<p>�� , �� </p>
<div>
<p><strong>��:</strong> nagibator �� (ID: 3)</p>
<p><strong>��:</strong> <a href="https://lalamo.rusff.me/viewtopic.php?id=10#p248" target="_blank">��</a></p>
<p><strong>�� :</strong> 17.11.2025, 23:13:55</p>
</div>
</div>
</div><div class="inv_item">
<img src="https://upforme.ru/uploads/001c/80/ee/3/681990.png?sec=DQ0+QTpQQEYODCoPDDhkGhE0Xx9nIyZRRDg0IkkWbFhRICk8HGA1NkMqUXwKKytfRDw/a1phKyklCBoGSiUZGC8MQRcpKz5EESRrRmAFKBsoBBhHFjY6UC9EKFYkHjEIP1BmWCELORIkK2cIOhkjVmEHIBE9GkBO" title="��" alt="��" class="item-image">
<div class="item-description">
<h3>��</h3>
<p>��, �� . �� … �� </p>
<div>
<p><strong>��:</strong> nagibator �� (ID: 3)</p>
<p><strong>��:</strong> <a href="https://lalamo.rusff.me/viewtopic.php?id=10#p248" target="_blank">��</a></p>
<p><strong>�� :</strong> 17.11.2025, 23:14:12</p>
</div>
</div>
</div><div class="inv_item">
<img src="https://upforme.ru/uploads/001c/80/ee/3/51634.png?sec=DQ0+QTpQQEYODCoPDDhkGhE0Xx9nIyZRRDg0IkkWbFhRICk8HGA1NkMqUXwKKytfRDw/a1phKyklCBoGSiUZGC8MQRcpKz5EESRrRmAFKBsoBBhHFjY6UC9EKFYkHjEIP1BmWCELORIkK2cIOhkjVmEHLF09GkBO" title="��" alt="��" class="item-image">
<div class="item-description">
<h3>��</h3>
<p>��, �� . �� </p>
<div>
<p><strong>��:</strong> nagibator �� (ID: 3)</p>
<p><strong>��:</strong> <a href="https://lalamo.rusff.me/viewtopic.php?id=10#p248" target="_blank">��</a></p>
<p><strong>�� :</strong> 17.11.2025, 23:14:29</p>
</div>
</div>
</div><div class="inv_item">
<img src="https://upforme.ru/uploads/001c/80/ee/3/83614.png?sec=DQ0+QTpQQEYODCoPDDhkGhE0Xx9nIyZRRDg0IkkWbFhRICk8HGA1NkMqUXwKKytfRDw/a1phKyklCBoGSiUZGC8MQRcpKz5EESRrRmAFKBsoBBhHFjY6UC9EKFYkHjEIP1BmWCELORIkK2cIOhkjVmEHNFk9GkBO" title="��" alt="��" class="item-image">
<div class="item-description">
<h3>��</h3>
<p>�� . �� </p>
<div>
<p><strong>��:</strong> nagibator �� (ID: 3)</p>
<p><strong>��:</strong> <a href="https://lalamo.rusff.me/viewtopic.php?id=10#p248" target="_blank">��</a></p>
<p><strong>�� :</strong> 17.11.2025, 23:14:45</p>
</div>
</div>
</div><div class="inv_item">
<img src="https://upforme.ru/uploads/001c/80/ee/3/385664.png?sec=DQ0+QTpQQEYODCoPDDhkGhE0Xx9nIyZRRDg0IkkWbFhRICk8HGA1NkMqUXwKKytfRDw/a1phKyklCBoGSiUZGC8MQRcpKz5EESRrRmAFKBsoBBhHFjY6UC9EKFYkHjEIP1BmWCELORIkK2cIOhkjV2EHJFs9GkBO" title="��" alt="��" class="item-image">
<div class="item-description">
<h3>��</h3>
<p>��, �� , �� </p>
<div>
<p><strong>��:</strong> nagibator �� (ID: 3)</p>
<p><strong>��:</strong> <a href="https://lalamo.rusff.me/viewtopic.php?id=10#p248" target="_blank">��</a></p>
<p><strong>�� :</strong> 17.11.2025, 23:15:07</p>
</div>
</div>
</div><div class="inv_item">
<img src="https://upforme.ru/uploads/001c/80/ee/3/364128.png?sec=DQ0+QTpQQEYODCoPDDhkGhE0Xx9nIyZRRDg0IkkWbFhRICk8HGA1NkMqUXwKKytfRDw/a1phKyklCBoGSiUZGC8MQRcpKz5EESRrRmAFKBsoBBhHFjY6UC9EKFYkHjEIP1BmWCELORIkK2cIOhkjV2EHLFo9GkBO" title="��" alt="��" class="item-image">
<div class="item-description">
<h3>��</h3>
<p>�� , �� </p>
<div>
<p><strong>��:</strong> nagibator �� (ID: 3)</p>
<p><strong>��:</strong> <a href="https://lalamo.rusff.me/viewtopic.php?id=10#p248" target="_blank">��</a></p>
<p><strong>�� :</strong> 17.11.2025, 23:15:26</p>
</div>
</div>
</div><div class="inv_item">
<img src="https://upforme.ru/uploads/001c/80/ee/3/926120.png?sec=DQ0+QTpQQEYODCoPDDhkGhE0Xx9nIyZRRDg0IkkWbFhRICk8HGA1NkMqUXwKKytfRDw/a1phKyklCBoGSiUZGC8MQRcpKz5EESRrRmAFKBsoBBhHFjY6UC9EKFYkHjEIP1BmWCELORIkK2cIOhkjV2EHNBA9GkBO" title="��" alt="��" class="item-image">
<div class="item-description">
<h3>��</h3>
<p>�� . �� !</p>
<div>
<p><strong>��:</strong> nagibator �� (ID: 3)</p>
<p><strong>��:</strong> <a href="https://lalamo.rusff.me/viewtopic.php?id=10#p248" target="_blank">��</a></p>
<p><strong>�� :</strong> 17.11.2025, 23:15:41</p>
</div>
</div>
</div><div class="inv_item">
<img src="https://upforme.ru/uploads/001c/80/ee/3/51634.png?sec=DQ0+QTpQQEYODCoPDDhkGhE0Xx9nIyZRRDg0IkkWbFhRICk8HGA1NkMqUXwKKytfRDw/a1phKyklCBoGSiUZGC8MQRcpKz5EESRrRmAFKBsoBBhHFjY6UC9EKFYkHjEIP1BmWCELORIkK2cIOhkjV2EHMFs9GkBO" title="��" alt="��" class="item-image">
<div class="item-description">
<h3>��</h3>
<p>��, �� . �� </p>
<div>
<p><strong>��:</strong> nagibator �� (ID: 3)</p>
<p><strong>��:</strong> <a href="https://lalamo.rusff.me/viewtopic.php?id=10#p248" target="_blank">��</a></p>
<p><strong>�� :</strong> 17.11.2025, 23:15:57</p>
</div>
</div>
</div><div class="inv_item">
<img src="https://upforme.ru/uploads/001c/80/ee/3/681990.png?sec=DQ0+QTpQQEYODCoPDDhkGhE0Xx9nIyZRRDg0IkkWbFhRICk8HGA1NkMqUXwKKytfRDw/a1phKyklCBoGSiUZGC8MQRcpKz5EESRrRmAFKBsoBBhHFjY6UC9EKFYkHjEIP1BmWCELORIkK2cIOhkjVGEHIBI9GkBO" title="��" alt="��" class="item-image">
<div class="item-description">
<h3>��</h3>
<p>��, �� . �� … �� </p>
<div>
<p><strong>��:</strong> nagibator �� (ID: 3)</p>
<p><strong>��:</strong> <a href="https://lalamo.rusff.me/viewtopic.php?id=10#p248" target="_blank">��</a></p>
<p><strong>�� :</strong> 17.11.2025, 23:16:13</p>
</div>
</div>
</div><div class="inv_item">
<img src="https://upforme.ru/uploads/001c/80/ee/3/590147.png?sec=DQ0+QTpQQEYODCoPDDhkGhE0Xx9nIyZRRDg0IkkWbFhRICk8HGA1NkMqUXwKKytfRDw/a1phKyklCBoGSiUZGC8MQRcpKz5EESRrRmAFKBsoBBhHFjY6UC9EKFYkHjEIP1BmWCELORIkK2cIOhkjVGEHLF09GkBO" title="��" alt="��" class="item-image">
<div class="item-description">
<h3>��</h3>
<p>�� . �� </p>
<div>
<p><strong>��:</strong> nagibator �� (ID: 3)</p>
<p><strong>��:</strong> <a href="https://lalamo.rusff.me/viewtopic.php?id=10#p248" target="_blank">��</a></p>
<p><strong>�� :</strong> 17.11.2025, 23:16:29</p>
</div>
</div>
</div><div class="inv_item">
<img src="https://upforme.ru/uploads/001c/80/ee/3/681990.png?sec=DQ0+QTpQQEYODCoPDDhkGhE0Xx9nIyZRRDg0IkkWbFhRICk8HGA1NkMqUXwKKytfRDw/a1phKyklCBoGSiUZGC8MQRcpKz5EESRrRmAFKBsoBBhHFjY6UC9EKFYkHjEIP1BmWCELORIkK2cIOhkjVGEHNFs9GkBO" title="��" alt="��" class="item-image">
<div class="item-description">
<h3>��</h3>
<p>��, �� . �� … �� </p>
<div>
<p><strong>��:</strong> nagibator �� (ID: 3)</p>
<p><strong>��:</strong> <a href="https://lalamo.rusff.me/viewtopic.php?id=10#p248" target="_blank">��</a></p>
<p><strong>�� :</strong> 17.11.2025, 23:16:47</p>
</div>
</div>
</div><div class="inv_item">
<img src="https://upforme.ru/uploads/001c/80/ee/3/97468.png?sec=DQ0+QTpQQEYODCoPDDhkGhE0Xx9nIyZRRDg0IkkWbFhRICk8HGA1NkMqUXwKKytfRDw/a1phKyklCBoGSiUZGC8MQRcpKz5EESRrRmAFKBsoBBhHFjY6UC9EKFYkHjEIP1BmWCELORIkK2cIOhkjVWEHJBI9GkBO" title="��" alt="��" class="item-image">
<div class="item-description">
<h3>��</h3>
<p>�� , �� </p>
<div>
<p><strong>��:</strong> nagibator �� (ID: 3)</p>
<p><strong>��:</strong> <a href="https://lalamo.rusff.me/viewtopic.php?id=10#p248" target="_blank">��</a></p>
<p><strong>�� :</strong> 17.11.2025, 23:17:03</p>
</div>
</div>
</div><div class="inv_item">
<img src="https://upforme.ru/uploads/001c/80/ee/3/448461.png?sec=DQ0+QTpQQEYODCoPDDhkGhE0Xx9nIyZRRDg0IkkWbFhRICk8HGA1NkMqUXwKKytfRDw/a1phKyklCBoGSiUZGC8MQRcpKz5EESRrRmAFKBsoBBhHFjY6UC9EKFYkHjEIP1BmWCELORIkK2cIOhkjVWEHLFw9GkBO" title="��" alt="��" class="item-image">
<div class="item-description">
<h3>��</h3>
<p>�� </p>
<div>
<p><strong>��:</strong> nagibator �� (ID: 3)</p>
<p><strong>��:</strong> <a href="https://lalamo.rusff.me/viewtopic.php?id=10#p248" target="_blank">��</a></p>
<p><strong>�� :</strong> 17.11.2025, 23:17:28</p>
</div>
</div>
</div><div class="inv_item">
<img src="https://upforme.ru/uploads/001c/80/ee/3/681990.png?sec=DQ0+QTpQQEYODCoPDDhkGhE0Xx9nIyZRRDg0IkkWbFhRICk8HGA1NkMqUXwKKytfRDw/a1phKyklCBoGSiUZGC8MQRcpKz5EESRrRmAFKBsoBBhHFjY6UC9EKFYkHjEIP1BmWCELORIkK2cIOhkjVWEHNFg9GkBO" title="��" alt="��" class="item-image">
<div class="item-description">
<h3>��</h3>
<p>��, �� . �� … �� </p>
<div>
<p><strong>��:</strong> nagibator �� (ID: 3)</p>
<p><strong>��:</strong> <a href="https://lalamo.rusff.me/viewtopic.php?id=10#p248" target="_blank">��</a></p>
<p><strong>�� :</strong> 17.11.2025, 23:17:44</p>
</div>
</div>
</div><div class="inv_item">
<img src="https://upforme.ru/uploads/001c/80/ee/3/926120.png?sec=DQ0+QTpQQEYODCoPDDhkGhE0Xx9nIyZRRDg0IkkWbFhRICk8HGA1NkMqUXwKKytfRDw/a1phKyklCBoGSiUZGC8MQRcpKz5EESRrRmAFKBsoBBhHFjY6UC9EKFYkHjEIP1BmWCELORIkK2cIOhkvEWEHLFg9GkBO" title="��" alt="��" class="item-image">
<div class="item-description">
<h3>��</h3>
<p>�� . �� !</p>
<div>
<p><strong>��:</strong> nagibator �� (ID: 3)</p>
<p><strong>��:</strong> <a href="https://lalamo.rusff.me/viewtopic.php?id=10#p248" target="_blank">��</a></p>
<p><strong>�� :</strong> 17.11.2025, 23:20:24</p>
</div>
</div>
</div><div class="inv_item">
<img src="https://upforme.ru/uploads/001c/80/ee/3/97468.png?sec=DQ0+QTpQQEYODCoPDDhkGhE0Xx9nIyZRRDg0IkkWbFhRICk8HGA1NkMqUXwKKytfRDw/a1phKyklCBoGSiUZGC8MQRcpKz5EESRrRmAFKBsoBBhHFjY6UC9EKFEkHjEIP1BmWCELORIkK28FOhkzH2EHNFs9GkBO" title="��" alt="��" class="item-image">
<div class="item-description">
<h3>��</h3>
<p>�� , �� </p>
<div>
<p><strong>��:</strong> nagibator �� (ID: 3)</p>
<p><strong>��:</strong> <a href="https://lalamo.rusff.me/viewtopic.php?id=10#p248" target="_blank">��</a></p>
<p><strong>�� :</strong> 18.11.2025, 00:52:47</p>
</div>
</div>
</div><div class="inv_item">
<img src="https://upforme.ru/uploads/001c/80/ee/3/591683.png?sec=DQ0+QTpQQEYODCoPDDhkGhE0Xx9nIyZRRDg0IkkWbFhRICk8HGA1NkMqUXwKKytfRDw/a1phKyklCBoGSiUZGC8MQRcpKz5EESRrRmAFKBsoBBhHFjY6UC9EKFEkHjEIP1BmWCELORIkK28FOhkzVmEHLFo9GkBO" title="��" alt="��" class="item-image">
<div class="item-description">
<h3>��</h3>
<p>�� , �� </p>
<div>
<p><strong>��:</strong> nagibator �� (ID: 3)</p>
<p><strong>��:</strong> <a href="https://lalamo.rusff.me/viewtopic.php?id=10#p248" target="_blank">��</a></p>
<p><strong>�� :</strong> 18.11.2025, 00:54:26</p>
</div>
</div>
</div><div class="inv_item">
<img src="https://upforme.ru/uploads/001c/80/ee/3/385664.png?sec=DQ0+QTpQQEYODCoPDDhkGhE0Xx9nIyZRRDg0IkkWbFhRICk8HGA1NkMqUXwKKytfRDw/a1phKyklCBoGSiUZGC8MQRcpKz5EESRrRmAFKBsoBBhHFjY6UC9EKFEkHjEIP1BmWCELORIkK28FOhkzVmEHNFw9GkBO" title="��" alt="��" class="item-image">
<div class="item-description">
<h3>��</h3>
<p>��, �� , �� </p>
<div>
<p><strong>��:</strong> nagibator �� (ID: 3)</p>
<p><strong>��:</strong> <a href="https://lalamo.rusff.me/viewtopic.php?id=10#p248" target="_blank">��</a></p>
<p><strong>�� :</strong> 18.11.2025, 00:54:48</p>
</div>
</div>
</div><div class="inv_item">
<img src="https://upforme.ru/uploads/001c/80/ee/3/385664.png?sec=DQ0+QTpQQEYODCoPDDhkGhE0Xx9nIyZRRDg0IkkWbFhRICk8HGA1NkMqUXwKKytfRDw/a1phKyklCBoGSiUZGC8MQRcpKz5EESRrRmAFKBsoBBhHFjY6UC9EKFEkHjEIP1BmWCELORIkK28FOhkzV2EHJFo9GkBO" title="��" alt="��" class="item-image">
<div class="item-description">
<h3>��</h3>
<p>��, �� , �� </p>
<div>
<p><strong>��:</strong> nagibator �� (ID: 3)</p>
<p><strong>��:</strong> <a href="https://lalamo.rusff.me/viewtopic.php?id=10#p248" target="_blank">��</a></p>
<p><strong>�� :</strong> 18.11.2025, 00:55:06</p>
</div>
</div>
</div><div class="inv_item">
<img src="https://upforme.ru/uploads/001c/80/ee/3/448461.png?sec=DQ0+QTpQQEYODCoPDDhkGhE0Xx9nIyZRRDg0IkkWbFhRICk8HGA1NkMqUXwKKytfRDw/a1phKyklCBoGSiUZGC8MQRcpKz5EESRrRmAFKBsoBBhHFjY6UC9EKFEkHjEIP1BmWCELORIkK28FOhkzV2EHKBA9GkBO" title="��" alt="��" class="item-image">
<div class="item-description">
<h3>��</h3>
<p>�� </p>
<div>
<p><strong>��:</strong> nagibator �� (ID: 3)</p>
<p><strong>��:</strong> <a href="https://lalamo.rusff.me/viewtopic.php?id=10#p248" target="_blank">��</a></p>
<p><strong>�� :</strong> 18.11.2025, 00:55:31</p>
</div>
</div>
</div><div class="inv_item">
<img src="https://upforme.ru/uploads/001c/80/ee/3/448461.png?sec=DQ0+QTpQQEYODCoPDDhkGhE0Xx9nIyZRRDg0IkkWbFhRICk8HGA1NkMqUXwKKytfRDw/a1phKyklCBoGSiUZGC8MQRcpKz5EESRrRmAFKBsoBBhHFjY6UC9EKFEkHjEIP1BmWCELORIkK28FOhkzV2EHNF09GkBO" title="��" alt="��" class="item-image">
<div class="item-description">
<h3>��</h3>
<p>�� </p>
<div>
<p><strong>��:</strong> nagibator �� (ID: 3)</p>
<p><strong>��:</strong> <a href="https://lalamo.rusff.me/viewtopic.php?id=10#p248" target="_blank">��</a></p>
<p><strong>�� :</strong> 18.11.2025, 00:55:49</p>
</div>
</div>
</div><div class="inv_item">
<img src="https://upforme.ru/uploads/001c/80/ee/3/377536.png?sec=DQ0+QTpQQEYODCoPDDhkGhE0Xx9nIyZRRDg0IkkWbFhRICk8HGA1NkMqUXwKKytfRDw/a1phKyklCBoGSiUZGC8MQRcpKz5EESRrRmAFKBsoBBhHFjY6UC9EKFEkHjEIP1BmWCELORIkK28FOhkzVGEHIBA9GkBO" title="�� " alt="�� " class="item-image">
<div class="item-description">
<h3>�� </h3>
<p>“�� ” � �� . �� </p>
<div>
<p><strong>��:</strong> nagibator �� (ID: 3)</p>
<p><strong>��:</strong> <a href="https://lalamo.rusff.me/viewtopic.php?id=10#p248" target="_blank">��</a></p>
<p><strong>�� :</strong> 18.11.2025, 00:56:11</p>
</div>
</div>
</div><div class="inv_item">
<img src="https://upforme.ru/uploads/001c/84/76/2/743422.png?sec=DQ0+QTpQQEYODCoPDDhkGhE0Xx9nIyZRRDg0IkkWbFhRICk8HGA1NkMqUXwKKytfRDw/a1phKyklCBoGSiUZGC8MQRcpKz5EESRrRmAFKBsoBBhHFjY6UC9EKFEkHjEIP1BmWCELORIkK2tCOhkrVWEHMFo9GkBO" title="��" alt="��" class="item-image">
<div class="item-description">
<h3>��</h3>
<p>��. �� , �� </p>
<div>
<p><strong>��:</strong> nagibator �� (ID: 3)</p>
<p><strong>��:</strong> <a href="https://lalamo.rusff.me/viewtopic.php?id=10#p248" target="_blank">��</a></p>
<p><strong>�� :</strong> 18.11.2025, 14:37:56</p>
</div>
</div>
</div><div class="inv_item">
<img src="https://upforme.ru/uploads/001c/84/76/2/309137.png?sec=DQ0+QTpQQEYODCoPDDhkGhE0Xx9nIyZRRDg0IkkWbFhRICk8HGA1NkMqUXwKKytfRDw/a1phKyklCBoGSiUZGC8MQRcpKz5EESRrRmAFKBsoBBhHFjY6UC9EKFEkHjEIP1BmWCELORIkK2tAOhkrVWEHMFw9GkBO" title="��" alt="��" class="item-image">
<div class="item-description">
<h3>��</h3>
<p>�� . �� </p>
<div>
<p><strong>��:</strong> nagibator �� (ID: 3)</p>
<p><strong>��:</strong> <a href="https://lalamo.rusff.me/viewtopic.php?id=10#p248" target="_blank">��</a></p>
<p><strong>�� :</strong> 18.11.2025, 16:37:58</p>
</div>
</div>
</div><div class="inv_item">
<img src="https://upforme.ru/uploads/001c/84/76/2/743422.png?sec=DQ0+QTpQQEYODCoPDDhkGhE0Xx9nIyZRRDg0IkkWbFhRICk8HGA1NkMqUXwKKytfRDw/a1phKyklCBoGSiUZGC8MQRcpKz5EESRrRmAFKBsoBBhHFjY6UC9EKFEkHjEIP1BmWCELORIkK2tAOhkrUmEHLF09GkBO" title="��" alt="��" class="item-image">
<div class="item-description">
<h3>��</h3>
<p>��. �� , �� </p>
<div>
<p><strong>��:</strong> nagibator �� (ID: 3)</p>
<p><strong>��:</strong> <a href="https://lalamo.rusff.me/viewtopic.php?id=10#p248" target="_blank">��</a></p>
<p><strong>�� :</strong> 18.11.2025, 16:38:29</p>
</div>
</div>
</div>
<div class="inv_item">
<img src="https://upforme.ru/uploads/001c/84/76/2/469943.png?sec=DQ0+QTpQQEYODCoPDDhkGhE0Xx9nIyZRRDg0IkkWbFhRICk8HGA1NkMqUXwKKytfRDw/a1phKyklCBoGSiUZGC8MQRcpKz5EESRrRmAFKBsoBBhHFjY6UC9EKFEkHjEIP1BmWCELORIkK2cFOhkvVmEHIFg9GkBO" title="��" alt="��" class="item-image">
<div class="item-description">
<h3>��</h3>
<p>�� . �� !</p>
<div>
<p><strong>��:</strong> nagibator �� (ID: 3)</p>
<p><strong>��:</strong> <a href="https://lalamo.rusff.me/viewtopic.php?id=10#p248" target="_blank">��</a></p>
<p><strong>�� :</strong> 18.11.2025, 20:24:14</p>
</div>
</div>
</div>

</div>
</div>
[/html]
�� : 18.11.2025, 20:24:18

� ��

mybb@mybb.ru (nagibator ��) — Fri, 14 Nov 2025 10:44:52 +0300

��

mybb@mybb.ru (nagibator ��) — Wed, 12 Nov 2025 15:06:18 +0300

��

mybb@mybb.ru (nagibator ��) — Sun, 02 Nov 2025 20:00:41 +0300

[html]<strong>�� :</strong>
� �� /�� 1 × 100 = 100
� �� 1 × 600 = 600
� �� 100 �� 1 × 100 = 100
<strong>�� :</strong> 800[/html]

��

mybb@mybb.ru (��) — Sat, 01 Nov 2025 10:44:09 +0300

��

��:

/* ----- calendar --------------------- */

.art-page {
    display:flex;
    }

.art-box {
    margin:0px 10px 15px 0px!important;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0;
    }

.art-list {
    display: flex;
    min-width: 0;
    height: 350px;
    background: #dddfe14a;
    padding: 20px 15px 20px 20px;
    border: 1px solid #a9a6a6;
    line-height: 18px;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: flex-start;
overflow: auto;
    }

div.art-title {
    display: block;
    margin-top: 5px !important;
    margin-bottom: 10px !important;
    margin-left: 0px !important;
    border-radius: 5px;
    text-align: center;
    font: 900 13px Code Pro;
    color: #c4c1c1;
    line-height: 20px;
    background: #343633;
    }

.art-list div.art-icon {
    width: 32px;
    height: 32px;
    background-size: cover !important;
    border: 2px solid #b4b1b1;
    border-radius: 5px;
    margin: 8px;
    cursor: pointer;
    }
.art-list div.art-icon .op div.mini {
    width:100px;
    height:100px;
    background-size:cover!important;
    margin:30px 0 15px 185px;
    }
.art-list div.art-icon.sun, div.art-icon.sun .op div.mini {
    background:url(https://i.ibb.co/mRhQRn1/1.png);
    }
.art-list div.art-icon.cloudy, div.art-icon.cloudy .op div.mini {
    background:url(https://forumstatic.ru/files/001c/0f/f1/61826.png?v=1);
    }
.art-list div.art-icon.windy, div.art-icon.windy .op div.mini {
    background:url(https://i.ibb.co/88TG901/3.png);
    }
.art-list div.art-icon.hurricane, div.art-icon.hurricane .op div.mini {
    background:url(https://i.ibb.co/7b95LB4/2.png);
    }
.art-list div.art-icon.storm, div.art-icon.storm .op div.mini {
    background:url(https://i.ibb.co/kmYXv7P/5.png);
    }
.art-list div.art-icon.cloudy2, div.art-icon.cloudy2 .op div.mini {
    background:url(https://i.ibb.co/7SjndPd/6.png);
    }
.art-list div.art-icon.rain, div.art-icon.rain .op div.mini {
    background:url(https://i.ibb.co/BBSgMbs/4.png);
    }
.art-list div.art-icon.rain2, div.art-icon.rain2 .op div.mini {
    background:url(https://i.ibb.co/dG7DVXW/7.png);
    }
.art-list div.art-icon.rain3, div.art-icon.rain3 .op div.mini {
    background:url(https://i.ibb.co/18sSqTB/11.png);
    }
.art-list div.art-icon.snow, div.art-icon.snow .op div.mini {
    background:url(https://i.ibb.co/q9pf30V/13.png);
    }
.art-list div.art-icon.snow2, div.art-icon.snow2 .op div.mini {
    background:url(https://i.ibb.co/3d8kqV6/9.png);
    }
.art-list div.art-icon.snow3, div.art-icon.snow3 .op div.mini {
    background:url(https://i.ibb.co/8N5pjjg/8.png);
    }
.art-list div.art-icon.snow4, div.art-icon.snow4 .op div.mini {
    background:url(https://i.ibb.co/HFzs5sH/10.png);
    }
.art-list div.art-icon.dust, div.art-icon.dust .op div.mini {
    background:url(https://i.ibb.co/WD6BrKJ/14.png);
    }
.art-list div.art-icon.high, div.art-icon.high .op div.mini {
    background:url(https://i.ibb.co/zS91c2F/15.png);
    }
.art-list div.art-icon.low, div.art-icon.low .op div.mini {
    background:url(https://i.ibb.co/tJ3bnVP/16.png);
    }
.art-list div.art-icon.hell, div.art-icon.hell .op div.mini {
    background:url(https://upforme.ru/uploads/001c/0f/f1/77/422815.png);
    }
.art-list div.art-icon.newyear, div.art-icon.newyear .op div.mini {
    background:url(https://upforme.ru/uploads/001c/0f/f1/3/740942.png);
    }
.art-list div.art-icon.active {
    border:2px solid #5c751e;
    }
.art-list div.art-icon.active2 {
    border:2px solid #751e1e;
    }
.art-list div.art-icon.active3 {
    border:2px solid #066ba1;
    }

.art-list div.art-icon n {
    display: block;
    position: relative;
    width: 32px;
    height: 10px;
    background: #99958d;
    border-radius: 5px;
    margin: -13px 0 0 0;
    text-align: center;
    font: 8px Code Pro;
    line-height: 10px;
    }

div.art-icon .op {
    position: absolute;
    display: none;
    width: 458px;
    height: 375px;
    margin: -40px 0 0 59px !important;
    padding-right: 10px;
    border: 1px solid #979388;
    background: rgb(var(--light100));
    z-index: 99999;
    }

div.art-icon .op name {
    display: block;
    margin: 0 20px 0 30px;
    border-radius: 10px;
    font: 13px Code Pro;
    text-transform: uppercase;
    text-align: center;
    background: #6f695c;
    color: #dbd9d6;
    line-height: 25px;
    }
div.art-icon .op name b {margin-right:7px;}

div.art-icon .op img {
    display:block;
    width:250px;
    height:250px;
    margin-top:25px;
    margin-bottom:5px;
    margin-left:102px;
    }

div.art-icon .op p {
    display: block;
    width: 97%;
    height: 135px;
    font: 12px Arial !important;
    line-height: 16px !important;
    padding: 0px 15px 20px 30px !important;
    margin-top: 25px !important;
    overflow-y: auto;
    }
div.art-icon .op p1 {
    display: block;
    width: 398px;
    height: 45px;
    font: 10px Arial;
    padding: 0px 15px 0px 30px !important;
    margin-top: 20px !important;
    overflow-y: scroll;
    }

div.art-icon .op p a.aname {
    display: inline-block;
    padding: 0px 15px 0 0px;
    margin-bottom: 10px;
    background: #89857a;
    border-radius: 0 10px 10px 0;
    font: 10px Code Pro;
    text-transform: uppercase;
    color: #dbd9d6;
    line-height: 20px;
    }
div.art-icon .op p a.aname data {
    display: inline-block;
    padding-right: 10px;
    border-radius: 0 20px 20px 0;
    font-weight: bold;
    margin-right: 10px;
    background: #a9a69f;
    color: #000;
    line-height: 20px;
    }

.art-icon > input {
    display: none;
    }
.art-icon label {
    cursor: pointer;
    font-size:60px;
    color:transparent;
    }
.art-icon > input ~ label::after {
    content: "o";
    }
.art-icon > input:checked ~ label::after {
    content: "o";
    }
.art-icon > input:checked ~ .op {
    display: block;
    }

��

mybb@mybb.ru (��) — Wed, 22 Oct 2025 11:45:20 +0300

[hideprofile][html]

container4 {
background-color: #222;
font-family: Lato, sans-serif;
color: rgba(255, 255, 255, 0.75);
text-align: center;
display: flex;
flex-wrap: wrap;
flex-direction: column;
align-content: center;
}

/* �� */
#fullscreenBtn, #exitFullscreenBtn {
font-family: Lato, sans-serif;
font-size: 1.2rem;
padding: 0.5em 1em;
margin-right: 10px;
cursor: pointer;
}

#c {
display: block;
width: 970px;
height: 77%;
margin: 1% 4%;
border-bottom: 1px solid;
}

#score {
font-size: 5rem;
font-weight: 900;
}

#restart {
margin: 1rem;
border: 1px solid;
border-radius: 0.5rem;
padding: 0.25em 0.3em 0.25em 0.5em;
font-family: inherit;
font-size: 2rem;
font-weight: 300;
color: inherit;
text-transform: uppercase;
letter-spacing: 0.2em;
background: transparent;
transition: background-color 0.2s ease;

&:hover {
background: rgba(255, 255, 255, 0.25);
}

&:focus {
outline: 1px dotted;
outline-offset: 2px;
}
}
</style>
<script>
var TILE_SIZE = 64;
var TILE_PADDING = 8;

var canvas = document.getElementById('c');
var scoreCounter = document.getElementById('score');
var restartButton = document.getElementById('restart');
var ctx = canvas.getContext('2d');

// off-screen canvas for tile prerendering
var osc = document.createElement('canvas');
osc.width = 4 * TILE_SIZE;
osc.height = TILE_SIZE;

var canvasW = canvas.width;
var canvasH = canvas.height;
var boardW = Math.floor(canvasW / TILE_SIZE);
var boardH = Math.floor(canvasH / TILE_SIZE);

var clickable = true;
var score = 0;
var board = [];

function resetBoard() {
score = 0;
clickable = true;
scoreCounter.innerHTML = score;

for (var i = 0; i < boardW * boardH; ++i) {
board[i] = 1 + Math.floor(Math.random() * 4);
}
}

function prerenderTiles() {
var ctx = osc.getContext('2d');
ctx.lineWidth = 3;
ctx.lineJoin = 'bevel';
var colors = [
'red',
'white',
'green',
'royalblue'
];

for (var color = 0; color < 4; ++color) {
ctx.strokeStyle = colors[color];
ctx.fillStyle = 'rgba(127, 127, 255, 0.1)';
ctx.save(); {
ctx.translate(color * TILE_SIZE, 0);
if (color > 1) ctx.translate(0, TILE_SIZE);
if (color && color < 3) ctx.translate(TILE_SIZE, 0);
ctx.rotate(color * Math.PI / 2);

ctx.beginPath();
ctx.moveTo(TILE_PADDING, TILE_PADDING);
ctx.lineTo(TILE_SIZE - TILE_PADDING, 1.5 * TILE_PADDING);
ctx.lineTo(TILE_SIZE - TILE_PADDING, TILE_SIZE / 2);
ctx.lineTo(TILE_SIZE / 2, TILE_SIZE - TILE_PADDING);
ctx.lineTo(1.5 * TILE_PADDING, TILE_SIZE - TILE_PADDING);
ctx.closePath();
ctx.stroke();
ctx.fill();

ctx.beginPath();
ctx.moveTo(1.5 * TILE_PADDING, TILE_SIZE - TILE_PADDING);
ctx.lineTo(3 * TILE_PADDING, TILE_SIZE - 3 * TILE_PADDING);
ctx.lineTo(TILE_PADDING, TILE_PADDING);
ctx.lineTo(TILE_SIZE - 3 * TILE_PADDING, 3 * TILE_PADDING);
ctx.lineTo(TILE_SIZE - TILE_PADDING, 1.5 * TILE_PADDING);
ctx.moveTo(TILE_SIZE - TILE_PADDING, TILE_SIZE / 2);
ctx.lineTo(TILE_SIZE - 3 * TILE_PADDING, 3 * TILE_PADDING);
ctx.lineTo(TILE_SIZE * 0.75 - TILE_PADDING / 2, TILE_SIZE * 0.75 - TILE_PADDING / 2);
ctx.lineTo(3 * TILE_PADDING, TILE_SIZE - 3 * TILE_PADDING);
ctx.lineTo(TILE_SIZE / 2, TILE_SIZE - TILE_PADDING);
ctx.moveTo(TILE_SIZE - 3 * TILE_PADDING, 3 * TILE_PADDING);
ctx.lineTo(3 * TILE_PADDING, TILE_SIZE - 3 * TILE_PADDING);
ctx.stroke();
}
ctx.restore();
}
}

function drawTile(x, y, color) {
if (!color) return;
ctx.drawImage(osc, (color - 1) * TILE_SIZE, 0, TILE_SIZE, TILE_SIZE, x, y, TILE_SIZE, TILE_SIZE);
}

function drawBoard() {
ctx.clearRect(0, 0, canvasW, canvasH);
for (var i = 0; i < boardW; ++i) {
for (var j = 0; j < boardH; ++j) {
drawTile(i * TILE_SIZE, j * TILE_SIZE, board[j * boardW + i]);
}
}

window.requestAnimationFrame(drawBoard);
}

function handleClick(e) {
var rect = canvas.getBoundingClientRect();
var scaleX = canvasW / rect.width / TILE_SIZE;
var scaleY = canvasH / rect.height / TILE_SIZE;
var i = Math.floor((e.clientX - rect.left) * scaleX);
var j = Math.floor((e.clientY - rect.top) * scaleY);
if (clickable) floodRemove(i, j);
}

function shouldRemove(i, j, color, removed) {
if (i < 0 || i >= boardW) return false;
if (j < 0 || j >= boardH) return false;
if (board[j * boardW + i] !== color) return false;
return removed.indexOf(j * boardW + i) < 0;
}

function swapTiles(a, b) {
var tmp = board[a];
board[a] = board[b];
board[b] = tmp;
}

function swapColumns(a, b) {
for (var j = 0; j < boardH; ++j) {
swapTiles(j * boardW + a, j * boardW + b);
}
}

prerenderTiles();
resetBoard();

canvas.addEventListener('click', handleClick);
restartButton.addEventListener('click', resetBoard);
window.requestAnimationFrame(drawBoard);
</script>
<script>
const fullscreenBtn = document.getElementById('fullscreenBtn');
const exitFullscreenBtn = document.getElementById('exitFullscreenBtn');

const gameContainer = document.querySelector('container4'); // �� -��

fullscreenBtn.addEventListener('click', () => {
// ��
if (gameContainer.requestFullscreen) {
gameContainer.requestFullscreen();
} else if (gameContainer.webkitRequestFullscreen) { // �� Safari
gameContainer.webkitRequestFullscreen();
} else if (gameContainer.msRequestFullscreen) { // �� IE/Edge
gameContainer.msRequestFullscreen();
}
});

exitFullscreenBtn.addEventListener('click', () => {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitExitFullscreen) { // �� Safari
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) { // �� IE/Edge
document.msExitFullscreen();
}
});

// ��
document.addEventListener('fullscreenchange', () => {
if (document.fullscreenElement) {
// ��
fullscreenBtn.style.display = 'none';
exitFullscreenBtn.style.display = 'inline-block';
} else {
// ��
fullscreenBtn.style.display = 'inline-block';
exitFullscreenBtn.style.display = 'none';
}
});
</script>
<container4>
<div style="margin-bottom: 10px;">
<button id="fullscreenBtn">�� </button>
<button id="exitFullscreenBtn" style="display:none;">�� </button>
</div>
<canvas id="c" width="1600" height="1260"></canvas>
<div id="score">0</div>
<button id="restart" type="button">Play again</button>
</container4>
[/html]

��

mybb@mybb.ru (��) — Fri, 26 Sep 2025 09:37:26 +0300

[html]<div class="retro-player" style="width: 300px; margin: 0 auto; text-align: center; background: url('https://upforme.ru/uploads/001b/ff/2a/1336/682636.jpg'); padding: 20px; border: none; border-radius: 10px; box-shadow: 0 0 10px rgba(0,0,0,0.2);">
<img src="https://upforme.ru/uploads/001c/8d/7e/3/165633.png" class="disk" style="width: 200px; height: 200px; animation: spin 4s linear infinite;">
<iframe frameborder="0" style="border:none; width:100%; height:180px; border-radius:16px; margin-top: 10px;" width="100%" height="180" src="https://music.yandex.ru/iframe/album/34191976/track/133378538">�� <a href="https://music.yandex.ru/track/133378538?utm_source=web&utm_medium=copy_link">Body Talk</a> � <a href="https://music.yandex.ru/artist/1033565">Alok</a> �� </iframe>
<style>
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
</div>[/html]

��

mybb@mybb.ru (nagibator ��) — Sat, 13 Sep 2025 19:10:28 +0300

5530 - 11

���� ����������

2

�������� ���������

�����-��������� � �������� ���������

����-������

����-������ � �������������

��

���������

������

� ���� �������� ������

������� ���

����

���������

������

���

������ ����� � ������

��

��

��-��

��-��

��-��

��

��

� ��

��

��

��

��

��

��