https://pastein.ru/t/8bJ
Загрузка данных
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>cardinparis - папа (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">
CARDINPARIS // ПАПА
</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>
<audio id="audioTrack" src="01. cardinparis - папа.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": 5.770, "end": 7.391, "text": "мне нужен нейм чтоб чисто понтоваться" },
{ "start": 7.535, "end": 8.623, "text": "жду хотябы в двадцать" },
{ "start": 8.948, "end": 11.746, "text": "эта сука хочет поебаться но я заебался" },
{ "start": 11.881, "end": 14.510, "text": "я давно не в вдохновении теперь тексты хуйня" },
{ "start": 14.672, "end": 17.586, "text": "я-я недавно подрочил, а у тя импонетция" },
{ "start": 17.749, "end": 19.251, "text": "мне нужен нейм чтоб чисто понтоваться" },
{ "start": 19.433, "end": 20.609, "text": "жду хотябы в двадцать" },
{ "start": 20.954, "end": 23.770, "text": "эта сука хочет поебаться но я заебался" },
{ "start": 23.968, "end": 26.449, "text": "я давно не в вдохновении теперь тексты хуйня" },
{ "start": 26.631, "end": 29.421, "text": "я-я недавно подрочил, а у тя импонетция" },
{ "start": 29.727, "end": 31.093, "text": "очки Balenciaga skin cat" },
{ "start": 31.209, "end": 32.696, "text": "тряпка в выхлоп у hellcat" },
{ "start": 32.858, "end": 34.371, "text": "ты несёшь ебаный бред" },
{ "start": 34.515, "end": 35.602, "text": "ты получил в еблет" },
{ "start": 35.745, "end": 37.169, "text": "су-сука че остановилась" },
{ "start": 37.313, "end": 38.501, "text": "сука че ты блять увидела" },
{ "start": 38.636, "end": 40.130, "text": "твоё сердце остановилось" },
{ "start": 40.273, "end": 42.541, "text": "да я тебе хуйню подсыпал" },
{ "start": 42.692, "end": 45.087, "text": "я-я-я блять не чувствую бит" },
{ "start": 45.455, "end": 47.382, "text": "взял щяс пистолет и минус тип" },
{ "start": 48.652, "end": 50.335, "text": "в очках словил ебаный блик" },
{ "start": 51.845, "end": 53.107, "text": "убежал второй тип" },
{ "start": 53.745, "end": 55.491, "text": "мне нужен нейм чтоб чисто понтоваться" },
{ "start": 55.634, "end": 56.698, "text": "жду хотябы в двадцать" },
{ "start": 56.849, "end": 59.466, "text": "эта сука хочет поебаться но я заебался" },
{ "start": 59.871, "end": 62.518, "text": "я давно не в вдохновении теперь тексты хуйня" },
{ "start": 62.708, "end": 65.580, "text": "я-я недавно подрочил, а у тя импонетция" },
{ "start": 65.858, "end": 67.512, "text": "мне нужен нейм чтоб чисто понтоваться" },
{ "start": 67.666, "end": 68.584, "text": "жду хотябы в двадцать" },
{ "start": 68.916, "end": 71.680, "text": "эта сука хочет поебаться но я заебался" },
{ "start": 71.850, "end": 74.532, "text": "я давно не в вдохновении теперь тексты хуйня" },
{ "start": 74.676, "end": 77.718, "text": "я-я недавно подрочил, а у тя импонетция" }
];
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>
