https://pastein.ru/t/RbJ
Загрузка данных
<!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": 0.041, "end": 1.802, "text": "Э, кхе-кхе э" },
{ "start": 1.977, "end": 4.522, "text": "Ай, а-а, кх, э а" },
{ "start": 4.850, "end": 7.594, "text": "Ай, э-э-э-э а" },
{ "start": 7.786, "end": 9.225, "text": "Я ебнул этих сук" },
{ "start": 9.441, "end": 11.266, "text": "Они со мной в аду" },
{ "start": 11.393, "end": 13.042, "text": "Теперь они со мной тут" },
{ "start": 13.178, "end": 15.026, "text": "Я больше не ебу руку" },
{ "start": 15.154, "end": 17.554, "text": "Черти готовят котлы" },
{ "start": 17.674, "end": 20.770, "text": "Съел арбуз цвета крови" },
{ "start": 20.890, "end": 22.795, "text": "Насиловал, в свои 13" },
{ "start": 23.331, "end": 25.475, "text": "Сиськи мацать, сиськи мацать" },
{ "start": 25.787, "end": 29.050, "text": "Какой Parental Advisory? Тут Pegi 21 блять" },
{ "start": 29.354, "end": 32.747, "text": "Какой процент дадите мне? Я должен заплатить бляди?" },
{ "start": 32.883, "end": 33.819, "text": "Вэуууу" },
{ "start": 34.069, "end": 37.259, "text": "Я-я готовлю печи, поплаваем в котлах" },
{ "start": 37.403, "end": 40.604, "text": "Мне похуй ты был арабский шейх или олигарх" },
{ "start": 40.764, "end": 44.076, "text": "В аду вы все мои уёбки, делаю гуала" },
{ "start": 44.236, "end": 47.739, "text": "Снимаю с ублюдков я шкуру, сожру её завтра" },
{ "start": 48.211, "end": 49.820, "text": "Я ебнул этих сук" },
{ "start": 49.972, "end": 51.764, "text": "Они со мной в аду" },
{ "start": 51.908, "end": 53.748, "text": "Теперь они со мной тут" },
{ "start": 53.884, "end": 55.677, "text": "Я больше не ебу руку" },
{ "start": 55.820, "end": 57.324, "text": "Я ебнул этих сук" },
{ "start": 57.468, "end": 59.285, "text": "Они со мной в аду" },
{ "start": 59.429, "end": 61.029, "text": "Теперь они со мной тут" },
{ "start": 61.181, "end": 62.893, "text": "Я больше не ебу руку" },
{ "start": 63.061, "end": 65.956, "text": "Моя реакция прекрасна как эррекция" },
{ "start": 66.108, "end": 69.917, "text": "А ты при жизни был словно обратной мне проэкции" },
{ "start": 70.085, "end": 73.309, "text": "Ты импотент, твоя моча это мыло" },
{ "start": 74.061, "end": 77.374, "text": "Да я ебнул твою суку так все и было" },
{ "start": 77.814, "end": 79.510, "text": "Я ебнул этих сук" },
{ "start": 79.638, "end": 81.342, "text": "Они со мной в аду" },
{ "start": 81.486, "end": 83.269, "text": "Теперь они со мной тут" },
{ "start": 83.397, "end": 85.061, "text": "Я больше не ебу руку" },
{ "start": 85.205, "end": 86.918, "text": "Я ебнул этих сук" },
{ "start": 87.078, "end": 88.678, "text": "Они со мной в аду" },
{ "start": 88.822, "end": 90.518, "text": "Теперь они со мной тут" },
{ "start": 90.654, "end": 93.462, "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>
