https://pastein.ru/t/nbJ
Загрузка данных
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JDFLAG - RED FLAG (Premium Player)</title>
<style>
:root {
--bg-color: #020202;
--text-active: #ffffff;
--font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
user-select: none;
outline: none;
}
body, html {
width: 100%;
height: 100%;
overflow: hidden;
background-color: var(--bg-color);
font-family: var(--font-family);
color: #ffffff;
display: flex;
justify-content: center;
align-items: center;
}
/* Ambient Dynamic Blur */
.ambient-bg {
position: absolute;
top: -15%;
left: -15%;
width: 130%;
height: 130%;
background-image: url('papa.png');
background-size: cover;
background-position: center;
filter: blur(100px) saturate(230%) brightness(0.3);
z-index: 1;
transform: scale(1.02);
transition: transform 1.5s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Premium Micro-Grain Texture Overlay */
.noise {
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
background: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
opacity: 0.045;
pointer-events: none;
z-index: 2;
}
/* Layout Container */
.player-wrapper {
position: relative;
z-index: 3;
display: flex;
align-items: center;
justify-content: flex-start;
gap: 100px;
width: 100%;
max-width: 1400px;
padding: 0 60px;
}
/* Left Column: Cover Art & Progress Ring */
.artwork-container {
position: relative;
flex-shrink: 0;
width: 450px;
height: 450px;
cursor: pointer;
perspective: 1200px;
}
.artwork {
width: 100%;
height: 100%;
border-radius: 32px;
background-image: url('papa.png');
background-size: cover;
background-position: center;
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.85),
0 0 100px rgba(255, 255, 255, 0.02);
transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.8s ease;
transform-style: preserve-3d;
}
.artwork-container:hover .artwork {
transform: scale(1.04) rotateY(-4deg) rotateX(3deg);
box-shadow: 0 40px 95px rgba(0, 0, 0, 0.95),
0 0 120px rgba(255, 255, 255, 0.05);
}
/* SVG Circular Timeline */
.progress-ring-svg {
position: absolute;
top: -16px;
left: -16px;
width: 482px;
height: 482px;
pointer-events: none;
transform: rotate(-90deg);
}
.progress-ring-circle {
fill: none;
stroke: rgba(255, 255, 255, 0.04);
stroke-width: 3.5;
}
.progress-ring-circle-bar {
fill: none;
stroke: rgba(255, 255, 255, 0.5);
stroke-width: 3.5;
stroke-dasharray: 1482; /* 2 * PI * r (approx) */
stroke-dashoffset: 1482;
transition: stroke-dashoffset 0.15s linear;
stroke-linecap: round;
}
/* Right Column: High-Fidelity Lyrics Engine */
.lyrics-container {
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: center;
height: 380px;
position: relative;
}
/* Dynamic Lyric Lines Layout */
.lyric-wrapper {
position: relative;
display: flex;
flex-direction: column;
}
.lyric-line {
font-size: 38px;
font-weight: 800;
letter-spacing: -0.045em;
line-height: 1.35;
position: relative;
transform-origin: left center;
}
/* Ultra Smooth Active Line Entry Animation */
.lyric-line.active {
color: var(--text-active);
text-shadow: 0 0 40px rgba(255, 255, 255, 0.25),
0 0 15px rgba(255, 255, 255, 0.15);
margin-bottom: 28px;
animation: lineFadeIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards,
pulseGlow 3.5s ease-in-out infinite alternate;
}
/* Shimmering Dynamic Translucent State for Upcoming Line */
.lyric-line.next {
font-size: 30px;
background: linear-gradient(90deg, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0.45) 50%, rgba(255,255,255,0.28) 100%);
background-size: 200% auto;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
opacity: 0.35;
animation: shimmerEffect 4s linear infinite, lineFadeInNext 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
/* Dissolve Particle Container Layer */
.dissolve-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
/* Ghost Line Structure for Particle Scatter */
.ghost-line {
position: absolute;
font-size: 38px;
font-weight: 800;
letter-spacing: -0.045em;
line-height: 1.35;
color: #ffffff;
white-space: nowrap;
}
.ghost-line span {
display: inline-block;
transform-origin: center;
animation: particleScatter 0.85s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
/* Animations Definition */
@keyframes lineFadeIn {
0% {
opacity: 0;
transform: translateY(25px) scale(0.96);
filter: blur(12px);
}
100% {
opacity: 1;
transform: translateY(0) scale(1.01);
filter: blur(0px);
}
}
@keyframes lineFadeInNext {
0% {
opacity: 0;
transform: translateY(15px) scale(0.98);
filter: blur(6px);
}
100% {
opacity: 0.35;
transform: translateY(0) scale(1);
filter: blur(0px);
}
}
@keyframes particleScatter {
0% {
transform: translate(0, 0) rotate(0deg) scale(1);
opacity: 1;
filter: blur(0px);
}
40% {
filter: blur(2px);
}
100% {
transform: translate(var(--mx), var(--my)) rotate(var(--rot)) scale(0.75);
opacity: 0;
filter: blur(16px);
}
}
@keyframes pulseGlow {
0% { text-shadow: 0 0 30px rgba(255,255,255,0.18), 0 0 10px rgba(255,255,255,0.1); }
100% { text-shadow: 0 0 50px rgba(255,255,255,0.35), 0 0 20px rgba(255,255,255,0.2); }
}
@keyframes shimmerEffect {
0% { background-position: 0% center; }
100% { background-position: 200% center; }
}
/* Minimal Meta HUD */
.track-meta {
position: absolute;
top: 45px;
right: 60px;
font-family: monospace;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.3em;
color: rgba(255, 255, 255, 0.25);
z-index: 4;
}
.hud-controls-hint {
position: absolute;
bottom: 45px;
left: 60px;
font-family: monospace;
font-size: 10px;
letter-spacing: 0.15em;
color: rgba(255, 255, 255, 0.2);
z-index: 4;
text-transform: uppercase;
}
.play-hint {
position: absolute;
bottom: 45px;
left: 50%;
transform: translateX(-50%);
font-size: 11px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.3);
z-index: 4;
pointer-events: none;
font-weight: 600;
transition: opacity 0.4s ease, transform 0.4s ease;
}
/* State System Modifiers */
.paused .artwork {
transform: scale(0.96) !important;
box-shadow: 0 15px 45px rgba(0, 0, 0, 0.7) !important;
}
</style>
</head>
<body class="paused">
<div class="ambient-bg" id="ambientBg"></div>
<div class="noise"></div>
<div class="track-meta">
JDFLAG // RED FLAG
</div>
<div class="hud-controls-hint">
[Space] Pause • [← / →] ±15s
</div>
<div class="player-wrapper">
<div class="artwork-container" id="artContainer" onclick="togglePlay()">
<svg class="progress-ring-svg">
<circle class="progress-ring-circle" cx="241" cy="241" r="236"></circle>
<circle class="progress-ring-circle-bar" id="progressRing" cx="241" cy="241" r="236"></circle>
</svg>
<div class="artwork"></div>
</div>
<div class="lyrics-container">
<div class="dissolve-container" id="dissolveContainer"></div>
<div class="lyric-wrapper">
<div id="line-current" class="lyric-line active">Нажмите пробел или обложку</div>
<div id="line-next" class="lyric-line next">Приготовьтесь...</div>
</div>
</div>
</div>
<div class="play-hint" id="playHint">CLICK COVER OR SPACE TO PLAY</div>
<!-- Замените "track.mp3" на имя вашего аудиофайла при необходимости -->
<audio id="audioTrack" src="track.mp3" preload="auto"></audio>
<script>
const audio = document.getElementById('audioTrack');
const playHint = document.getElementById('playHint');
const currentLineEl = document.getElementById('line-current');
const nextLineEl = document.getElementById('line-next');
const progressRing = document.getElementById('progressRing');
const dissolveContainer = document.getElementById('dissolveContainer');
const ambientBg = document.getElementById('ambientBg');
const radius = progressRing.r.baseVal.value;
const circumference = 2 * Math.PI * radius;
progressRing.style.strokeDasharray = `${circumference} ${circumference}`;
progressRing.style.strokeDashoffset = circumference;
const lyrics = [
{ "start": 2.932, "end": 3.148, "text": "fle—" },
{ "start": 4.652, "end": 6.188, "text": "zenyu" },
{ "start": 6.364, "end": 7.012, "text": "Они хотели забрать мой сок (У)" },
{ "start": 7.332, "end": 8.228, "text": "Я получил этот миллион (У)" },
{ "start": 8.452, "end": 9.588, "text": "Я получил этот миллион (У)" },
{ "start": 9.852, "end": 11.037, "text": "Просто приходи на моё шоу (У)" },
{ "start": 11.381, "end": 12.221, "text": "Я привлекаю внимание ho" },
{ "start": 12.533, "end": 13.725, "text": "Пока мне делают suck, а-ё" },
{ "start": 13.965, "end": 15.148, "text": "Тихо, мне делают suck, а-ё" },
{ "start": 15.332, "end": 16.420, "text": "Чел не вытянет, в зале лорд" },
{ "start": 17.092, "end": 17.916, "text": "Bih', я red flag" },
{ "start": 18.076, "end": 19.140, "text": "Bih', bih', я red flag" },
{ "start": 19.300, "end": 20.357, "text": "Bih', bih', я red flag" },
{ "start": 20.524, "end": 21.677, "text": "Bih', bih', я, hold on" },
{ "start": 21.821, "end": 23.029, "text": "Bih', bih', я red flag" },
{ "start": 23.181, "end": 24.501, "text": "Bih', bih', я red flag" },
{ "start": 24.653, "end": 25.765, "text": "Bih', bih', я red flag" },
{ "start": 25.933, "end": 27.325, "text": "Bih', bih', я, hold on" },
{ "start": 27.469, "end": 40.102, "text": "Bih', я red flag" },
{ "start": 40.430, "end": 41.614, "text": "Bih', bih', я red flag" },
{ "start": 41.790, "end": 43.326, "text": "Bih', bih', я red flag" },
{ "start": 43.502, "end": 45.030, "text": "Bih', bih', я, hold on" },
{ "start": 45.214, "end": 46.702, "text": "Bih', bih', я red flag" },
{ "start": 46.894, "end": 48.439, "text": "Bih', bih', я red flag" },
{ "start": 48.614, "end": 50.031, "text": "Bih', bih', я red flag" },
{ "start": 50.191, "end": 51.974, "text": "Bih', bih', я, hold on" }
];
function togglePlay() {
if (audio.paused) {
audio.play().catch(e => console.log("Playback interaction deferred:", e));
document.body.classList.remove('paused');
playHint.style.opacity = '0';
playHint.style.transform = 'translate(-50%, 10px)';
} else {
audio.pause();
document.body.classList.add('paused');
playHint.innerText = "PAUSED";
playHint.style.opacity = '1';
playHint.style.transform = 'translate(-50%, 0)';
}
}
// Keyboard System Controls
window.addEventListener('keydown', (e) => {
if (e.code === 'Space') {
e.preventDefault();
togglePlay();
} else if (e.code === 'ArrowLeft') {
e.preventDefault();
audio.currentTime = Math.max(0, audio.currentTime - 15);
triggerBgFlash();
} else if (e.code === 'ArrowRight') {
e.preventDefault();
audio.currentTime = Math.min(audio.duration || 0, audio.currentTime + 15);
triggerBgFlash();
}
});
function triggerBgFlash() {
ambientBg.style.transform = 'scale(1.06)';
setTimeout(() => {
ambientBg.style.transform = 'scale(1.02)';
}, 200);
}
// High Fidelity Dissolve Particle Generator
function generateDissolve(text, targetEl) {
if (!text || text.includes("Нажмите") || text === "• • •") return;
const ghost = document.createElement('div');
ghost.className = 'ghost-line';
ghost.style.top = targetEl.offsetTop + 'px';
ghost.style.left = targetEl.offsetLeft + 'px';
// Map characters into individual physical vectors
ghost.innerHTML = text.split('').map(char => {
if (char === ' ') return '<span> </span>';
// Exploding dispersion metrics
const moveX = (Math.random() - 0.5) * 160;
const moveY = -(Math.random() * 80 + 40);
const rotate = (Math.random() - 0.5) * 80;
return `<span style="--mx: ${moveX}px; --my: ${moveY}px; --rot: ${rotate}deg;">${char}</span>`;
}).join('');
dissolveContainer.appendChild(ghost);
setTimeout(() => ghost.remove(), 900);
}
// Sync and Engine Core
let lastCurrentText = "";
let lastNextText = "";
audio.addEventListener('timeupdate', () => {
const currentTime = audio.currentTime;
if (audio.duration) {
const percent = currentTime / audio.duration;
progressRing.style.strokeDashoffset = circumference - (percent * circumference);
}
let currentIndex = -1;
// Locate current block based on timeline sequence
for (let i = 0; i < lyrics.length; i++) {
if (currentTime >= lyrics[i].start) {
currentIndex = i;
}
}
let currentStr = "";
let nextStr = "";
if (currentIndex === -1) {
// Strictly initial state before lyrics trigger
currentStr = "• • •";
nextStr = lyrics[0] ? lyrics[0].text : "";
} else {
// Active timeline logic: retains last text during gaps natively
currentStr = lyrics[currentIndex].text;
nextStr = lyrics[currentIndex + 1] ? lyrics[currentIndex + 1].text : "";
}
// Render modifications with visual cache layers
if (currentStr !== lastCurrentText) {
generateDissolve(lastCurrentText, currentLineEl);
// Re-trigger hardware-accelerated fluid CSS line introduction
currentLineEl.style.animation = 'none';
currentLineEl.offsetHeight; // Flush Pipeline DOM reflow
currentLineEl.innerText = currentStr;
currentLineEl.style.animation = 'lineFadeIn 0.65s cubic-bezier(0.16, 1, 0.3, 1) forwards, pulseGlow 3.5s ease-in-out infinite alternate';
lastCurrentText = currentStr;
}
if (nextStr !== lastNextText) {
nextLineEl.style.animation = 'none';
nextLineEl.offsetHeight;
nextLineEl.innerText = nextStr;
nextLineEl.style.animation = 'lineFadeInNext 0.65s cubic-bezier(0.16, 1, 0.3, 1) forwards, shimmerEffect 4s linear infinite';
lastNextText = nextStr;
}
});
audio.addEventListener('ended', () => {
document.body.classList.add('paused');
playHint.innerText = "REPLAY";
playHint.style.opacity = '1';
playHint.style.transform = 'translate(-50%, 0)';
progressRing.style.strokeDashoffset = circumference;
});
</script>
</body>
</html>
