Правда! Он был безумен. Но почему вы так стремитесь произнести это слово, словно оно закрывает дверь? Безумие не закрывает ничего. Оно лишь распахивает окна, и в них, как я убедился, дует куда сильнее, чем в окна здоровых людей.Я наблюдал его долго. Я видел его в палате под номером двадцать девять, где стены были мягки, как совесть тех, кто его туда поместил, и видел на скамье подсудимых, где он улыбался так, как улыбаются на похоронах собственного врага. Он называл себя Его Величеством Шутом, Королём Соломенных Душ. | [html]<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Reaper Player</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; }
html, body { background: transparent; width: 120px; height: 120px; overflow: hidden; }
/* ─── ОБЁРТКА ПЛЕЕРА 120×120 ──────────────────────── */ .player { position: relative; width: 120px; height: 120px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; overflow: visible; }
/* ─── ФОНОВЫЕ БЛИКИ серый + фиолетовый ───────────── */ .bg-glow { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 140px; height: 140px; pointer-events: none; z-index: 0; } .bg-glow::before { content: ''; position: absolute; top: 20%; left: 10%; width: 80px; height: 80px; background: radial-gradient(ellipse, rgba(120,80,180,0.22) 0%, transparent 70%); border-radius: 50%; animation: drift1 5s ease-in-out infinite; } .bg-glow::after { content: ''; position: absolute; top: 30%; right: 5%; width: 60px; height: 60px; background: radial-gradient(ellipse, rgba(160,160,180,0.14) 0%, transparent 70%); border-radius: 50%; animation: drift2 6s ease-in-out infinite; } @keyframes drift1 { 0%,100% { transform: translate(0,0) scale(1); opacity:0.7; } 50% { transform: translate(6px,-8px) scale(1.1); opacity:1; } } @keyframes drift2 { 0%,100% { transform: translate(0,0) scale(1); opacity:0.5; } 50% { transform: translate(-5px,6px) scale(1.08); opacity:0.9; } }
/* ─── КАРТИНКА СМЕРТИ ─────────────────────────────── */ /* ↓↓↓ ВСТАВЬТЕ URL КАРТИНКИ В src="" НИЖЕ ↓↓↓ */ .reaper { width: 80px; height: 80px; object-fit: contain; position: relative; z-index: 5; cursor: pointer; animation: hover-float 4s ease-in-out infinite; filter: drop-shadow(0 0 8px rgba(100,50,200,0.55)) drop-shadow(0 2px 12px rgba(80,80,120,0.4)); transition: filter 0.3s; } .reaper.playing { animation: hover-float 2.5s ease-in-out infinite, soul-pulse 2s ease-in-out infinite; } @keyframes hover-float { 0%,100% { transform: translateY(0px) rotate(0deg); } 33% { transform: translateY(-5px) rotate(-1deg); } 66% { transform: translateY(-2px) rotate(1deg); } } @keyframes soul-pulse { 0%,100% { filter: drop-shadow(0 0 8px rgba(100,50,200,0.55)) drop-shadow(0 2px 12px rgba(80,80,120,0.4)); } 50% { filter: drop-shadow(0 0 18px rgba(140,60,255,0.9)) drop-shadow(0 0 28px rgba(100,80,200,0.6)); } }
/* ─── КНОПКА PLAY — синефиолетовый огонёк 16×16 ──── */ .play-btn { position: absolute; bottom: 80px; left: 53%; transform: translateX(-50%); width: 16px; height: 16px; background: none; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 10; padding: 0; filter: drop-shadow(0 0 5px rgba(140,60,255,0.95)); animation: soul-flicker 1.6s ease-in-out infinite; transition: transform 0.15s; } .play-btn:hover { transform: translateX(-50%) scale(1.3); filter: drop-shadow(0 0 10px rgba(180,80,255,1)); } .play-btn:active { transform: translateX(-50%) scale(0.88); }
@keyframes soul-flicker { 0%,100% { filter: drop-shadow(0 0 5px rgba(120,50,230,0.9)); transform: translateX(-50%) scaleX(1) scaleY(1); } 20% { filter: drop-shadow(0 0 8px rgba(160,80,255,1.0)); transform: translateX(-50%) scaleX(0.90) scaleY(1.08); } 45% { filter: drop-shadow(0 0 12px rgba(80,40,200,1.0)); transform: translateX(-50%) scaleX(1.08) scaleY(0.93); } 70% { filter: drop-shadow(0 0 7px rgba(140,60,240,0.95)); transform: translateX(-50%) scaleX(0.94) scaleY(1.05); } }
.flame-svg { width: 16px; height: 16px; display: block; }
/* Пауза — две синефиолетовые полоски-огня */ .pause-flame { display: flex; gap: 3px; align-items: flex-end; } .pause-flame-bar { width: 4px; height: 14px; background: linear-gradient(to top, #3300cc, #7722ff, #bb88ff, #eeddff); border-radius: 2px 2px 1px 1px; box-shadow: 0 0 5px rgba(120,50,255,0.9); }
/* ─── ТУМАН / ДЫМКА ПОД СМЕРТЬЮ ──────────────────── */ .mist-base { position: absolute; bottom: 34рх; left: 50%; transform: translateX(-50%); width: 130px; height: 1px; z-index: 3; pointer-events: none; }
/* ─── ПОЛЗУНОК ГРОМКОСТИ 80×20 ───────────────────── */ .vol-wrap { position: absolute; bottom: 34px; left: 50%; transform: translateX(-50%); width: 80px; height: 20px; display: flex; align-items: center; gap: 3px; z-index: 20; } .vol-icon { font-size: 8px; color: #9966cc; min-width: 9px; text-align: center; line-height: 1; text-shadow: 0 0 6px rgba(120,50,200,0.8); user-select: none; } .vol-slider { -webkit-appearance: none; appearance: none; width: 62px; height: 3px; border-radius: 2px; background: linear-gradient(to right, rgba(140,60,220,0.9) 0%, rgba(140,60,220,0.9) var(--val,80%), rgba(100,80,140,0.2) var(--val,80%), rgba(100,80,140,0.2) 100%); outline: none; cursor: pointer; flex-shrink: 0; } .vol-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #cc99ff, #6622cc); box-shadow: 0 0 6px rgba(130,50,220,0.9); cursor: pointer; transition: transform 0.15s; } .vol-slider::-webkit-slider-thumb:hover { transform: scale(1.3); } .vol-slider::-moz-range-thumb { width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #cc99ff, #6622cc); border: none; cursor: pointer; } .vol-slider { background: linear-gradient(to right, ...); box-shadow: none; ← добавь эту строку } /* ─── ЧАСТИЦЫ ДУШ ─────────────────────────────────── */ .soul { position: absolute; border-radius: 50%; background: radial-gradient(circle, rgba(180,100,255,0.9), rgba(80,40,200,0.3)); box-shadow: 0 0 4px rgba(140,60,255,0.8); animation: soul-rise var(--d) ease-out infinite var(--dl); opacity: 0; bottom: 36px; left: var(--x); width: var(--s); height: var(--s); } @keyframes soul-rise { 0% { opacity: 0; transform: translate(0,0) scale(1); } 15% { opacity: 0.8; } 60% { opacity: 0.4; } 100% { opacity: 0; transform: translate(var(--dr),-90px) scale(0.05); } } </style> </head> <body>
<div class="player" id="player">
<!-- Фоновые блики --> <div class="bg-glow"></div>
<!-- ══════════════════════════════════════════════════ ↓↓↓ ВСТАВЬТЕ URL КАРТИНКИ СМЕРТИ СЮДА ↓↓↓ ══════════════════════════════════════════════════ --> <img id="reaperImg" class="reaper" src="https://upforme.ru/uploads/001c/95/36/184/920302.png" alt="Reaper" onclick="togglePlay()" > <!-- Пример: src="https://i.imgur.com/AbCdEf.png" src="reaper.png" (файл рядом с html) -->
<!-- Кнопка play/pause — синефиолетовый огонёк 16×16 --> <button class="play-btn" id="playBtn" onclick="togglePlay()" aria-label="Play / Pause"> <svg class="flame-svg" id="playIcon" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"> <defs> <linearGradient id="sfg" x1="0%" y1="100%" x2="40%" y2="0%"> <stop offset="0%" stop-color="#1a00aa"/> <stop offset="30%" stop-color="#5500dd"/> <stop offset="65%" stop-color="#9933ff"/> <stop offset="85%" stop-color="#cc88ff"/> <stop offset="100%" stop-color="#eeccff"/> </linearGradient> <linearGradient id="sfg2" x1="0%" y1="100%" x2="50%" y2="0%"> <stop offset="0%" stop-color="#3300bb"/> <stop offset="55%" stop-color="#8844ee"/> <stop offset="100%" stop-color="#ddaaff"/> </linearGradient> <filter id="sfglow"><feGaussianBlur stdDeviation="0.6" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge></filter> </defs> <!-- Основной язык пламени --> <path d="M8,15 C4,15 2,12 2.5,9 C3,6.5 4.5,7 5,5.5 C5.2,4.8 5,3.5 4.5,2.5 C6,3.5 6.8,5 6.5,6.5 C8,5 8.5,3 8,1 C10,3 11,5.5 9.5,7.5 C10.5,7 11.5,6.5 12,5.5 C12.5,7.5 12,10 11,11.5 C13,10 13.5,8 13,6.5 C14.5,8.5 14,12 12,13.5 C11,14.5 9.5,15 8,15 Z" fill="url(#sfg)" filter="url(#sfglow)"/> <!-- Внутреннее ядро --> <path d="M8,13.5 C6,13.5 5,11.5 5.5,9.5 C6,8 7,8.5 7,7.5 C7.5,8.5 7,10 8,10.5 C8.5,9.5 8.5,8.5 9.5,8 C10,9 9.5,11 9,12 C10.5,10.5 10.5,9 10,8 C11,9.5 11,11.5 10,12.5 C9.5,13.2 8.8,13.5 8,13.5 Z" fill="url(#sfg2)" opacity="0.9"/> <!-- Бликовая точка --> <ellipse cx="7" cy="5.5" rx="0.7" ry="1.1" fill="rgba(220,180,255,0.6)" transform="rotate(-15,7,5.5)"/> </svg> </button>
<!-- Туман/дымка SVG под фигурой --> <div class="mist-base"> <svg viewBox="0 0 130 42" xmlns="http://www.w3.org/2000/svg" style="width:100%;height:100%"> <defs> <radialGradient id="mg" cx="50%" cy="65%" r="55%"> <stop offset="0%" stop-color="#7722bb" stop-opacity="0.45"/> <stop offset="30%" stop-color="#441188" stop-opacity="0.22"/> <stop offset="65%" stop-color="#221144" stop-opacity="0.10"/> <stop offset="100%" stop-color="#110022" stop-opacity="0"/> </radialGradient> <radialGradient id="mg2" cx="50%" cy="60%" r="50%"> <stop offset="0%" stop-color="#888899" stop-opacity="0.28"/> <stop offset="60%" stop-color="#444466" stop-opacity="0.10"/> <stop offset="100%" stop-color="#222233" stop-opacity="0"/> </radialGradient> <filter id="mf"><feGaussianBlur stdDeviation="6"/></filter> <filter id="mf2"><feGaussianBlur stdDeviation="4"/></filter> </defs> <!-- Серый туман --> <ellipse cx="65" cy="32" rx="62" ry="17" fill="url(#mg2)" filter="url(#mf)"/> <!-- Фиолетовое ядро --> <ellipse cx="65" cy="35" rx="44" ry="11" fill="url(#mg)" filter="url(#mf2)"/> <!-- Завитки тумана --> <path d="M25,28 Q40,10 58,24 Q68,8 82,24 Q98,10 108,28" stroke="rgba(120,60,200,0.22)" stroke-width="7" fill="none" filter="url(#mf)" stroke-linecap="round"/> <!-- Лёгкий серый слой --> <ellipse cx="55" cy="30" rx="30" ry="8" fill="rgba(150,140,170,0.12)" filter="url(#mf2)"/> <ellipse cx="78" cy="33" rx="22" ry="6" fill="rgba(130,100,160,0.10)" filter="url(#mf2)"/> </svg> </div>
<!-- Ползунок громкости --> <div class="vol-wrap"> <span class="vol-icon" id="volIcon">💀</span> <input type="range" class="vol-slider" id="volSlider" min="0" max="100" value="80" step="1" oninput="setVolume(this.value)" style="--val:80%"> </div>
<!-- Частицы душ --> <div id="souls" style="position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;overflow:visible;"></div>
</div>
<!-- ══════════════════════════════════════════════════════════ AUDIO — ВСТАВЬТЕ ПРЯМУЮ ССЫЛКУ НА MP3 СЮДА ══════════════════════════════════════════════════════════ --> <audio id="audio" preload="auto"> <source src="https://www.dropbox.com/scl/fi/h6l180v9nihulf8vy12qk/Forever-Yours-Obsessive-Dark-Romance-Jester-Song-VILLAIN-IN-LOVE-darkromance-darkrnb-music.mp3?rlkey=meri9acjrq7bwq5spmwpuldhl&st=mu7n2r41&dl=1" type="audio/mpeg"> <!-- Пример: <source src="https://example.com/dark-ambient.mp3" type="audio/mpeg"> Ссылка должна оканчиваться на .mp3 / .ogg / .wav Сервер должен разрешать CORS --> </audio>
<script> const audio = document.getElementById('audio'); const playBtn = document.getElementById('playBtn'); const reaperImg = document.getElementById('reaperImg'); const volSlider = document.getElementById('volSlider');
let playing = false;
/* ── Огонёк play SVG ──────────────────────────────── */ const flameSVG = `<svg class="flame-svg" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"> <defs> <linearGradient id="sfg" x1="0%" y1="100%" x2="40%" y2="0%"> <stop offset="0%" stop-color="#1a00aa"/> <stop offset="0%" stop-color="#5500dd"/> <stop offset="0%" stop-color="#9933ff"/> <stop offset="0%" stop-color="#cc88ff"/> <stop offset="0%" stop-color="#eeccff"/> </linearGradient> <linearGradient id="sfg2" x1="0%" y1="100%" x2="50%" y2="0%"> <stop offset="0%" stop-color="#3300bb"/> <stop offset="0%" stop-color="#8844ee"/> <stop offset="0%" stop-color="#ddaaff"/> </linearGradient> <filter id="sfglow"><feGaussianBlur stdDeviation="0.6" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge></filter> </defs> <path d="M8,15 C4,15 2,12 2.5,9 C3,6.5 4.5,7 5,5.5 C5.2,4.8 5,3.5 4.5,2.5 C6,3.5 6.8,5 6.5,6.5 C8,5 8.5,3 8,1 C10,3 11,5.5 9.5,7.5 C10.5,7 11.5,6.5 12,5.5 C12.5,7.5 12,10 11,11.5 C13,10 13.5,8 13,6.5 C14.5,8.5 14,12 12,13.5 C11,14.5 9.5,15 8,15 Z" fill="url(#sfg)" filter="url(#sfglow)"/> <path d="M8,13.5 C6,13.5 5,11.5 5.5,9.5 C6,8 7,8.5 7,7.5 C7.5,8.5 7,10 8,10.5 C8.5,9.5 8.5,8.5 9.5,8 C10,9 9.5,11 9,12 C10.5,10.5 10.5,9 10,8 C11,9.5 11,11.5 10,12.5 C9.5,13.2 8.8,13.5 8,13.5 Z" fill="url(#sfg2)" opacity="0.9"/> <ellipse cx="7" cy="5.5" rx="0.7" ry="1.1" fill="rgba(220,180,255,0.6)" transform="rotate(-15,7,5.5)"/> </svg>`;
const pauseHTML = `<div class="pause-flame"><div class="pause-flame-bar"></div><div class="pause-flame-bar"></div></div>`;
/* ── Play / Pause ─────────────────────────────────── */ function togglePlay() { if (playing) { audio.pause(); playBtn.innerHTML = flameSVG; reaperImg.classList.remove('playing'); } else { audio.volume = volSlider.value / 100; audio.play().catch(e => console.warn('Audio:', e)); playBtn.innerHTML = pauseHTML; reaperImg.classList.add('playing'); } playing = !playing; }
audio.addEventListener('ended', () => { playing = false; playBtn.innerHTML = flameSVG; reaperImg.classList.remove('playing'); });
/* ── Громкость ────────────────────────────────────── */ function setVolume(v) { audio.volume = v / 100; volSlider.style.setProperty('--val', v + '%'); const ic = document.getElementById('volIcon'); if (v == 0) ic.textContent = '💀'; else if (v < 40) ic.textContent = '💀'; else if (v < 75) ic.textContent = '💀'; else ic.textContent = '💀'; }
/* ── Частицы душ ──────────────────────────────────── */ (function spawnSouls() { const c = document.getElementById('souls'); for (let i = 0; i < 14; i++) { const s = document.createElement('div'); s.className = 'soul'; const x = 18 + Math.random() * 84; const dr = (Math.random() - 0.5) * 44; const d = (1.8 + Math.random() * 2.6).toFixed(2); const dl = (Math.random() * 3.5).toFixed(2); const sz = (1.2 + Math.random() * 2.8).toFixed(1); s.style.setProperty('--x', x + 'px'); s.style.setProperty('--dr', dr + 'px'); s.style.setProperty('--d', d + 's'); s.style.setProperty('--dl', dl + 's'); s.style.setProperty('--s', sz + 'px'); c.appendChild(s); } })(); </script> </body> </html>[/html] |