Source identity
| Field | Recorded value |
|---|---|
| Source type | archive member |
| Original record | index.html |
| Date | Not specified in source |
| Path or archive member | archives/libsrc-1c3f88063121/NETLIFY_AI_RECOVERY_2026-10-14_21-10-49/sites/janady13__ai-music-dashboard-v1__962a3331-f258-4cf4-afad-5dd3a17ec37f/originals/deploy_69810e4f231da6a782da326e/index.html |
| Original SHA-256 | ea1a76beac43aed2329961a1e8d090cea995c390028de3a717bfdc8019bea095 |
| Reading-copy SHA-256 | ea1a76beac43aed2329961a1e8d090cea995c390028de3a717bfdc8019bea095 |
| Archive source | {"sourceId": "libsrc-1c3f88063121", "member": "NETLIFY_AI_RECOVERY_2026-10-14_21-10-49/sites/janady13__ai-music-dashboard-v1__962a3331-f258-4cf4-afad-5dd3a17ec37f/originals/deploy_69810e4f231da6a782da326e/index.html"} |
Every recorded occurrence
These 4 records contain identical original source bytes. Their paths and revisions remain part of the archive.
| Original record | Branch or archive | Revision / identifier | Original location |
|---|---|---|---|
| index.html | {"sourceId": "libsrc-1c3f88063121", "member": "NETLIFY_AI_RECOVERY_2026-10-14_21-10-49/sites/janady13__ai-music-dashboard-v1__962a3331-f258-4cf4-afad-5dd3a17ec37f/originals/deploy_69810e4f231da6a782da326e/index.html"} | libsrc-a40f49c27510 | archives/libsrc-1c3f88063121/NETLIFY_AI_RECOVERY_2026-10-14_21-10-49/sites/janady13__ai-music-dashboard-v1__962a3331-f258-4cf4-afad-5dd3a17ec37f/originals/deploy_69810e4f231da6a782da326e/index.html |
| index.html | {"sourceId": "libsrc-1c3f88063121", "member": "NETLIFY_AI_RECOVERY_2026-10-14_21-10-49/sites/janady13__ai-music-dashboard-v2__f77a6886-8957-4363-8c56-32dbc6836513/originals/deploy_69810e5c15fd93ee7317c06a/index.html"} | libsrc-ed4bcabd5683 | archives/libsrc-1c3f88063121/NETLIFY_AI_RECOVERY_2026-10-14_21-10-49/sites/janady13__ai-music-dashboard-v2__f77a6886-8957-4363-8c56-32dbc6836513/originals/deploy_69810e5c15fd93ee7317c06a/index.html |
| 190a1206108b3e1f0f9335ae18c029dc59fd4890 | {"sourceId": "libsrc-1c3f88063121", "member": "NETLIFY_AI_RECOVERY_2026-10-14_21-10-49/sites/janady13__ai-music-dashboard-v1__962a3331-f258-4cf4-afad-5dd3a17ec37f/originals/.content_store/19/190a1206108b3e1f0f9335ae18c029dc59fd4890"} | libsrc-31498889f009 | archives/libsrc-1c3f88063121/NETLIFY_AI_RECOVERY_2026-10-14_21-10-49/sites/janady13__ai-music-dashboard-v1__962a3331-f258-4cf4-afad-5dd3a17ec37f/originals/.content_store/19/190a1206108b3e1f0f9335ae18c029dc59fd4890 |
| 190a1206108b3e1f0f9335ae18c029dc59fd4890 | {"sourceId": "libsrc-1c3f88063121", "member": "NETLIFY_AI_RECOVERY_2026-10-14_21-10-49/sites/janady13__ai-music-dashboard-v2__f77a6886-8957-4363-8c56-32dbc6836513/originals/.content_store/19/190a1206108b3e1f0f9335ae18c029dc59fd4890"} | libsrc-55a6a955c76c | archives/libsrc-1c3f88063121/NETLIFY_AI_RECOVERY_2026-10-14_21-10-49/sites/janady13__ai-music-dashboard-v2__f77a6886-8957-4363-8c56-32dbc6836513/originals/.content_store/19/190a1206108b3e1f0f9335ae18c029dc59fd4890 |
Recovered source transcript
Download complete source text ↓1,108 lines · 35.9 KB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI Music Dashboard | Discover & Chat</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--bg-primary: #000000;
--bg-secondary: #0a0a0a;
--accent: #00fff5;
--accent-dim: rgba(0, 255, 245, 0.1);
--accent-glow: rgba(0, 255, 245, 0.3);
--text-primary: #ffffff;
--text-secondary: #888888;
--glass-bg: rgba(255, 255, 255, 0.05);
--glass-border: rgba(255, 255, 255, 0.1);
}
body {
font-family: 'Inter', sans-serif;
background: var(--bg-primary);
color: var(--text-primary);
min-height: 100vh;
overflow-x: hidden;
}
/* Floating Orbs Animation */
.orbs-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
overflow: hidden;
z-index: 0;
}
.orb {
position: absolute;
border-radius: 50%;
filter: blur(80px);
opacity: 0.4;
animation: float 20s infinite ease-in-out;
}
.orb-1 {
width: 400px;
height: 400px;
background: radial-gradient(circle, var(--accent) 0%, transparent 70%);
top: -100px;
left: -100px;
animation-delay: 0s;
}
.orb-2 {
width: 300px;
height: 300px;
background: radial-gradient(circle, #ff00ff 0%, transparent 70%);
top: 50%;
right: -100px;
animation-delay: -5s;
}
.orb-3 {
width: 350px;
height: 350px;
background: radial-gradient(circle, #00ff88 0%, transparent 70%);
bottom: -100px;
left: 30%;
animation-delay: -10s;
}
@keyframes float {
0%, 100% { transform: translate(0, 0) scale(1); }
25% { transform: translate(50px, 50px) scale(1.1); }
50% { transform: translate(0, 100px) scale(0.9); }
75% { transform: translate(-50px, 50px) scale(1.05); }
}
/* Header */
.header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
padding: 1rem 2rem;
background: rgba(0, 0, 0, 0.8);
backdrop-filter: blur(20px);
border-bottom: 1px solid var(--glass-border);
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
display: flex;
align-items: center;
gap: 0.75rem;
}
.logo-icon {
width: 40px;
height: 40px;
background: linear-gradient(135deg, var(--accent), #00ff88);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 1.2rem;
color: #000;
}
.logo-text {
font-size: 1.5rem;
font-weight: 700;
background: linear-gradient(135deg, var(--accent), #ffffff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.clock {
font-size: 1.1rem;
font-weight: 500;
color: var(--accent);
font-variant-numeric: tabular-nums;
}
/* Main Container */
.main-container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
padding: 6rem 2rem 2rem;
min-height: 100vh;
position: relative;
z-index: 1;
}
/* Trends Section */
.trends-section {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.section-header {
display: flex;
justify-content: space-between;
align-items: center;
}
.section-title {
font-size: 1.75rem;
font-weight: 700;
display: flex;
align-items: center;
gap: 0.75rem;
}
.section-title::before {
content: '';
width: 4px;
height: 24px;
background: var(--accent);
border-radius: 2px;
}
/* Equalizer */
.equalizer {
display: flex;
align-items: flex-end;
gap: 3px;
height: 30px;
}
.eq-bar {
width: 4px;
background: linear-gradient(to top, var(--accent), #00ff88);
border-radius: 2px;
animation: equalize 0.8s infinite ease-in-out;
}
.eq-bar:nth-child(1) { animation-delay: 0s; }
.eq-bar:nth-child(2) { animation-delay: 0.1s; }
.eq-bar:nth-child(3) { animation-delay: 0.2s; }
.eq-bar:nth-child(4) { animation-delay: 0.3s; }
.eq-bar:nth-child(5) { animation-delay: 0.4s; }
@keyframes equalize {
0%, 100% { height: 8px; }
50% { height: 28px; }
}
/* Genre Pills */
.genre-filters {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
.genre-pill {
padding: 0.5rem 1rem;
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: 50px;
font-size: 0.85rem;
cursor: pointer;
transition: all 0.3s ease;
}
.genre-pill:hover, .genre-pill.active {
background: var(--accent);
color: #000;
border-color: var(--accent);
box-shadow: 0 0 20px var(--accent-glow);
}
/* Mood Selector */
.mood-selector {
display: flex;
gap: 0.75rem;
padding: 1rem;
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: 16px;
backdrop-filter: blur(10px);
}
.mood-btn {
width: 48px;
height: 48px;
background: var(--bg-secondary);
border: 2px solid transparent;
border-radius: 12px;
font-size: 1.5rem;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
}
.mood-btn:hover, .mood-btn.active {
border-color: var(--accent);
transform: scale(1.1);
box-shadow: 0 0 20px var(--accent-glow);
}
/* Trend Cards */
.trends-list {
display: flex;
flex-direction: column;
gap: 1rem;
overflow-y: auto;
max-height: calc(100vh - 350px);
padding-right: 0.5rem;
}
.trends-list::-webkit-scrollbar {
width: 6px;
}
.trends-list::-webkit-scrollbar-track {
background: var(--bg-secondary);
border-radius: 3px;
}
.trends-list::-webkit-scrollbar-thumb {
background: var(--accent);
border-radius: 3px;
}
.trend-card {
display: flex;
align-items: center;
gap: 1rem;
padding: 1rem;
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: 16px;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.trend-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, var(--accent-dim), transparent);
opacity: 0;
transition: opacity 0.3s ease;
}
.trend-card:hover {
transform: translateX(8px);
border-color: var(--accent);
box-shadow: 0 10px 40px rgba(0, 255, 245, 0.1);
}
.trend-card:hover::before {
opacity: 1;
}
.trend-rank {
font-size: 1.5rem;
font-weight: 700;
color: var(--accent);
min-width: 30px;
position: relative;
z-index: 1;
}
.trend-album {
width: 60px;
height: 60px;
border-radius: 12px;
position: relative;
z-index: 1;
overflow: hidden;
}
.album-gradient-1 { background: linear-gradient(135deg, #ff6b6b, #feca57); }
.album-gradient-2 { background: linear-gradient(135deg, #5f27cd, #00d2d3); }
.album-gradient-3 { background: linear-gradient(135deg, #ff9ff3, #54a0ff); }
.album-gradient-4 { background: linear-gradient(135deg, #00b894, #fdcb6e); }
.album-gradient-5 { background: linear-gradient(135deg, #6c5ce7, #fd79a8); }
.album-gradient-6 { background: linear-gradient(135deg, #00cec9, #0984e3); }
.album-gradient-7 { background: linear-gradient(135deg, #e17055, #d63031); }
.album-gradient-8 { background: linear-gradient(135deg, #a29bfe, #74b9ff); }
.trend-info {
flex: 1;
position: relative;
z-index: 1;
}
.trend-title {
font-weight: 600;
margin-bottom: 0.25rem;
}
.trend-artist {
font-size: 0.85rem;
color: var(--text-secondary);
}
.trend-stats {
text-align: right;
position: relative;
z-index: 1;
}
.trend-plays {
font-weight: 600;
color: var(--accent);
}
.trend-change {
font-size: 0.8rem;
color: #00ff88;
}
.trend-change.down {
color: #ff6b6b;
}
/* Chat Section */
.chat-section {
display: flex;
flex-direction: column;
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: 24px;
backdrop-filter: blur(20px);
overflow: hidden;
height: calc(100vh - 8rem);
}
.chat-header {
padding: 1.5rem;
border-bottom: 1px solid var(--glass-border);
display: flex;
align-items: center;
gap: 1rem;
}
.ai-avatar {
width: 50px;
height: 50px;
background: linear-gradient(135deg, var(--accent), #ff00ff);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
animation: pulse 2s infinite;
}
@keyframes pulse {
0%, 100% { box-shadow: 0 0 0 0 var(--accent-glow); }
50% { box-shadow: 0 0 20px 10px transparent; }
}
.ai-info h3 {
font-weight: 600;
}
.ai-status {
font-size: 0.85rem;
color: #00ff88;
display: flex;
align-items: center;
gap: 0.5rem;
}
.ai-status::before {
content: '';
width: 8px;
height: 8px;
background: #00ff88;
border-radius: 50%;
animation: blink 1s infinite;
}
@keyframes blink {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
/* Chat Messages */
.chat-messages {
flex: 1;
padding: 1.5rem;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 1rem;
}
.chat-messages::-webkit-scrollbar {
width: 6px;
}
.chat-messages::-webkit-scrollbar-track {
background: transparent;
}
.chat-messages::-webkit-scrollbar-thumb {
background: var(--glass-border);
border-radius: 3px;
}
.message {
max-width: 80%;
padding: 1rem 1.25rem;
border-radius: 20px;
animation: messageIn 0.4s ease;
}
@keyframes messageIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.message.ai {
align-self: flex-start;
background: linear-gradient(135deg, rgba(0, 255, 245, 0.15), rgba(0, 255, 136, 0.05));
border: 1px solid var(--accent-dim);
border-bottom-left-radius: 4px;
}
.message.user {
align-self: flex-end;
background: linear-gradient(135deg, #1a1a1a, #0a0a0a);
border: 1px solid var(--glass-border);
border-bottom-right-radius: 4px;
}
.message-content {
line-height: 1.5;
}
.message-time {
font-size: 0.75rem;
color: var(--text-secondary);
margin-top: 0.5rem;
}
/* Typing Indicator */
.typing-indicator {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 1rem 1.25rem;
background: linear-gradient(135deg, rgba(0, 255, 245, 0.15), rgba(0, 255, 136, 0.05));
border: 1px solid var(--accent-dim);
border-radius: 20px;
border-bottom-left-radius: 4px;
max-width: 80%;
align-self: flex-start;
}
.typing-dot {
width: 8px;
height: 8px;
background: var(--accent);
border-radius: 50%;
animation: typingBounce 1.4s infinite ease-in-out;
}
.typing-dot:nth-child(1) { animation-delay: 0s; }
.typing-dot:nth-child(2) { animation-delay: 0.2s; }
.typing-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes typingBounce {
0%, 60%, 100% { transform: translateY(0); }
30% { transform: translateY(-8px); }
}
/* Chat Input */
.chat-input-container {
padding: 1.5rem;
border-top: 1px solid var(--glass-border);
}
.chat-input-wrapper {
display: flex;
gap: 1rem;
align-items: center;
}
.chat-input {
flex: 1;
padding: 1rem 1.5rem;
background: var(--bg-secondary);
border: 1px solid var(--glass-border);
border-radius: 50px;
color: var(--text-primary);
font-family: inherit;
font-size: 1rem;
outline: none;
transition: all 0.3s ease;
}
.chat-input::placeholder {
color: var(--text-secondary);
}
.chat-input:focus {
border-color: var(--accent);
box-shadow: 0 0 20px var(--accent-glow);
}
.send-btn {
width: 50px;
height: 50px;
background: linear-gradient(135deg, var(--accent), #00ff88);
border: none;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.send-btn:hover {
transform: scale(1.1);
box-shadow: 0 0 30px var(--accent-glow);
}
.send-btn svg {
width: 24px;
height: 24px;
fill: #000;
}
/* Quick Actions */
.quick-actions {
display: flex;
gap: 0.5rem;
margin-top: 1rem;
flex-wrap: wrap;
}
.quick-action {
padding: 0.5rem 1rem;
background: transparent;
border: 1px solid var(--glass-border);
border-radius: 50px;
color: var(--text-secondary);
font-size: 0.85rem;
cursor: pointer;
transition: all 0.3s ease;
}
.quick-action:hover {
border-color: var(--accent);
color: var(--accent);
}
/* Responsive */
@media (max-width: 1024px) {
.main-container {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.chat-section {
height: 70vh;
}
.trends-list {
max-height: 400px;
}
}
@media (max-width: 640px) {
.header {
padding: 1rem;
}
.main-container {
padding: 5rem 1rem 1rem;
}
.mood-selector {
flex-wrap: wrap;
justify-content: center;
}
}
/* Song Recommendation Card */
.song-recommendation {
background: linear-gradient(135deg, rgba(0, 255, 245, 0.1), rgba(255, 0, 255, 0.05));
border: 1px solid var(--accent-dim);
border-radius: 16px;
padding: 1rem;
margin-top: 0.75rem;
}
.song-rec-header {
font-size: 0.75rem;
color: var(--accent);
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 0.75rem;
}
.song-rec-item {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.5rem;
border-radius: 8px;
transition: background 0.3s ease;
}
.song-rec-item:hover {
background: rgba(255, 255, 255, 0.05);
}
.song-rec-cover {
width: 40px;
height: 40px;
border-radius: 8px;
}
.song-rec-info {
flex: 1;
}
.song-rec-title {
font-weight: 500;
font-size: 0.9rem;
}
.song-rec-artist {
font-size: 0.8rem;
color: var(--text-secondary);
}
.play-btn-small {
width: 32px;
height: 32px;
background: var(--accent);
border: none;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.3s ease;
}
.play-btn-small:hover {
transform: scale(1.1);
}
.play-btn-small svg {
width: 14px;
height: 14px;
fill: #000;
margin-left: 2px;
}
</style>
</head>
<body>
<!-- Floating Orbs -->
<div class="orbs-container">
<div class="orb orb-1"></div>
<div class="orb orb-2"></div>
<div class="orb orb-3"></div>
</div>
<!-- Header -->
<header class="header">
<div class="logo">
<div class="logo-icon">AI</div>
<span class="logo-text">SoundMind</span>
</div>
<div class="equalizer">
<div class="eq-bar"></div>
<div class="eq-bar"></div>
<div class="eq-bar"></div>
<div class="eq-bar"></div>
<div class="eq-bar"></div>
</div>
<div class="clock" id="clock">00:00:00</div>
</header>
<!-- Main Content -->
<main class="main-container">
<!-- Trends Section -->
<section class="trends-section">
<div class="section-header">
<h2 class="section-title">Trending Now</h2>
</div>
<!-- Genre Filters -->
<div class="genre-filters">
<button class="genre-pill active">All</button>
<button class="genre-pill">Pop</button>
<button class="genre-pill">Hip-Hop</button>
<button class="genre-pill">Electronic</button>
<button class="genre-pill">R&B</button>
<button class="genre-pill">Rock</button>
<button class="genre-pill">Jazz</button>
<button class="genre-pill">Classical</button>
</div>
<!-- Mood Selector -->
<div class="mood-selector">
<button class="mood-btn active" title="Happy">😊</button>
<button class="mood-btn" title="Energetic">⚡</button>
<button class="mood-btn" title="Chill">😌</button>
<button class="mood-btn" title="Romantic">💕</button>
<button class="mood-btn" title="Sad">😢</button>
<button class="mood-btn" title="Focus">🎯</button>
<button class="mood-btn" title="Party">🎉</button>
</div>
<!-- Trends List -->
<div class="trends-list">
<div class="trend-card">
<span class="trend-rank">1</span>
<div class="trend-album album-gradient-1"></div>
<div class="trend-info">
<div class="trend-title">Neon Dreams</div>
<div class="trend-artist">Aurora Synth</div>
</div>
<div class="trend-stats">
<div class="trend-plays">2.4M</div>
<div class="trend-change">+15%</div>
</div>
</div>
<div class="trend-card">
<span class="trend-rank">2</span>
<div class="trend-album album-gradient-2"></div>
<div class="trend-info">
<div class="trend-title">Midnight Protocol</div>
<div class="trend-artist">Digital Ghost</div>
</div>
<div class="trend-stats">
<div class="trend-plays">1.8M</div>
<div class="trend-change">+23%</div>
</div>
</div>
<div class="trend-card">
<span class="trend-rank">3</span>
<div class="trend-album album-gradient-3"></div>
<div class="trend-info">
<div class="trend-title">Crystal Waves</div>
<div class="trend-artist">Luna Eclipse</div>
</div>
<div class="trend-stats">
<div class="trend-plays">1.5M</div>
<div class="trend-change">+8%</div>
</div>
</div>
<div class="trend-card">
<span class="trend-rank">4</span>
<div class="trend-album album-gradient-4"></div>
<div class="trend-info">
<div class="trend-title">Euphoria State</div>
<div class="trend-artist">Velvet Code</div>
</div>
<div class="trend-stats">
<div class="trend-plays">1.2M</div>
<div class="trend-change down">-3%</div>
</div>
</div>
<div class="trend-card">
<span class="trend-rank">5</span>
<div class="trend-album album-gradient-5"></div>
<div class="trend-info">
<div class="trend-title">Binary Sunset</div>
<div class="trend-artist">Quantum Beat</div>
</div>
<div class="trend-stats">
<div class="trend-plays">980K</div>
<div class="trend-change">+31%</div>
</div>
</div>
<div class="trend-card">
<span class="trend-rank">6</span>
<div class="trend-album album-gradient-6"></div>
<div class="trend-info">
<div class="trend-title">Electric Soul</div>
<div class="trend-artist">Neon Pulse</div>
</div>
<div class="trend-stats">
<div class="trend-plays">870K</div>
<div class="trend-change">+12%</div>
</div>
</div>
<div class="trend-card">
<span class="trend-rank">7</span>
<div class="trend-album album-gradient-7"></div>
<div class="trend-info">
<div class="trend-title">Vapor Memory</div>
<div class="trend-artist">Retro Future</div>
</div>
<div class="trend-stats">
<div class="trend-plays">750K</div>
<div class="trend-change down">-7%</div>
</div>
</div>
<div class="trend-card">
<span class="trend-rank">8</span>
<div class="trend-album album-gradient-8"></div>
<div class="trend-info">
<div class="trend-title">Cosmic Drift</div>
<div class="trend-artist">Stellar Wave</div>
</div>
<div class="trend-stats">
<div class="trend-plays">620K</div>
<div class="trend-change">+45%</div>
</div>
</div>
</div>
</section>
<!-- Chat Section -->
<section class="chat-section">
<div class="chat-header">
<div class="ai-avatar">🎵</div>
<div class="ai-info">
<h3>SoundMind AI</h3>
<div class="ai-status">Online - Ready to help</div>
</div>
</div>
<div class="chat-messages" id="chatMessages">
<div class="message ai">
<div class="message-content">
Hey there! 👋 I'm SoundMind, your personal AI music curator. I can recommend tracks based on your mood, discover new artists, or chat about music trends. What are you in the mood for today?
</div>
<div class="message-time">2:30 PM</div>
</div>
<div class="message user">
<div class="message-content">
I'm looking for some chill electronic music to focus while working
</div>
<div class="message-time">2:31 PM</div>
</div>
<div class="message ai">
<div class="message-content">
Perfect choice! For focus-friendly electronic vibes, I've curated these tracks that blend ambient textures with subtle beats:
<div class="song-recommendation">
<div class="song-rec-header">Recommended for You</div>
<div class="song-rec-item">
<div class="song-rec-cover album-gradient-2"></div>
<div class="song-rec-info">
<div class="song-rec-title">Flow State</div>
<div class="song-rec-artist">Ambient Collective</div>
</div>
<button class="play-btn-small">
<svg viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
</button>
</div>
<div class="song-rec-item">
<div class="song-rec-cover album-gradient-6"></div>
<div class="song-rec-info">
<div class="song-rec-title">Deep Focus</div>
<div class="song-rec-artist">Neural Beats</div>
</div>
<button class="play-btn-small">
<svg viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
</button>
</div>
</div>
</div>
<div class="message-time">2:31 PM</div>
</div>
<div class="message user">
<div class="message-content">
These are great! Can you tell me more about the Neon Dreams track that's trending?
</div>
<div class="message-time">2:33 PM</div>
</div>
<div class="message ai">
<div class="message-content">
Absolutely! "Neon Dreams" by Aurora Synth is currently dominating the charts. 🚀<br><br>
It's a synthwave masterpiece that blends nostalgic 80s vibes with modern production. The track features lush analog synths, driving arpeggios, and an infectious bassline that's been resonating with listeners worldwide.<br><br>
Fun fact: Aurora Synth produced this entirely using AI-assisted composition tools, making it a groundbreaking release in the AI music space!
</div>
<div class="message-time">2:34 PM</div>
</div>
<div class="typing-indicator" id="typingIndicator" style="display: none;">
<div class="typing-dot"></div>
<div class="typing-dot"></div>
<div class="typing-dot"></div>
</div>
</div>
<div class="chat-input-container">
<div class="chat-input-wrapper">
<input type="text" class="chat-input" id="chatInput" placeholder="Ask me about music...">
<button class="send-btn" id="sendBtn">
<svg viewBox="0 0 24 24">
<path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/>
</svg>
</button>
</div>
<div class="quick-actions">
<button class="quick-action">🎧 Recommend playlist</button>
<button class="quick-action">🔥 What's hot?</button>
<button class="quick-action">🎤 New releases</button>
<button class="quick-action">💿 Similar artists</button>
</div>
</div>
</section>
</main>
<script>
// Real-time Clock
function updateClock() {
const now = new Date();
const hours = String(now.getHours()).padStart(2, '0');
const minutes = String(now.getMinutes()).padStart(2, '0');
const seconds = String(now.getSeconds()).padStart(2, '0');
document.getElementById('clock').textContent = `${hours}:${minutes}:${seconds}`;
}
setInterval(updateClock, 1000);
updateClock();
// Genre Pills Interaction
const genrePills = document.querySelectorAll('.genre-pill');
genrePills.forEach(pill => {
pill.addEventListener('click', () => {
genrePills.forEach(p => p.classList.remove('active'));
pill.classList.add('active');
});
});
// Mood Selector Interaction
const moodBtns = document.querySelectorAll('.mood-btn');
moodBtns.forEach(btn => {
btn.addEventListener('click', () => {
moodBtns.forEach(b => b.classList.remove('active'));
btn.classList.add('active');
});
});
// Chat Functionality
const chatInput = document.getElementById('chatInput');
const sendBtn = document.getElementById('sendBtn');
const chatMessages = document.getElementById('chatMessages');
const typingIndicator = document.getElementById('typingIndicator');
const aiResponses = [
"I love that choice! Based on your taste, you might also enjoy tracks from Midnight Protocol. They have a similar vibe but with more atmospheric elements.",
"Great question! The electronic music scene is evolving rapidly with AI-assisted production tools. Artists are now able to create complex soundscapes that were previously impossible.",
"I've analyzed your listening patterns and noticed you gravitate towards melodic electronic music. Would you like me to create a personalized playlist?",
"That artist has been on fire lately! Their latest album broke several streaming records. The production quality is exceptional.",
"Music discovery is my specialty! Let me find some hidden gems that match your mood perfectly. Give me a second to scan the latest releases...",
"Interesting fact: The track you mentioned uses a unique synthesis technique that blends granular and wavetable synthesis. It's what gives it that ethereal quality!"
];
function addMessage(content, isUser = false) {
const message = document.createElement('div');
message.className = `message ${isUser ? 'user' : 'ai'}`;
const now = new Date();
const time = `${now.getHours()}:${String(now.getMinutes()).padStart(2, '0')} ${now.getHours() >= 12 ? 'PM' : 'AM'}`;
message.innerHTML = `
<div class="message-content">${content}</div>
<div class="message-time">${time}</div>
`;
chatMessages.insertBefore(message, typingIndicator);
chatMessages.scrollTop = chatMessages.scrollHeight;
}
function showTyping() {
typingIndicator.style.display = 'flex';
chatMessages.scrollTop = chatMessages.scrollHeight;
}
function hideTyping() {
typingIndicator.style.display = 'none';
}
function sendMessage() {
const text = chatInput.value.trim();
if (!text) return;
addMessage(text, true);
chatInput.value = '';
showTyping();
setTimeout(() => {
hideTyping();
const randomResponse = aiResponses[Math.floor(Math.random() * aiResponses.length)];
addMessage(randomResponse);
}, 1500 + Math.random() * 1000);
}
sendBtn.addEventListener('click', sendMessage);
chatInput.addEventListener('keypress', (e) => {
if (e.key === 'Enter') sendMessage();
});
// Quick Actions
const quickActions = document.querySelectorAll('.quick-action');
quickActions.forEach(action => {
action.addEventListener('click', () => {
const text = action.textContent.trim();
chatInput.value = text.slice(2); // Remove emoji
sendMessage();
});
});
// Trend Card Hover Sound Effect (Visual feedback)
const trendCards = document.querySelectorAll('.trend-card');
trendCards.forEach(card => {
card.addEventListener('mouseenter', () => {
card.style.transform = 'translateX(8px) scale(1.02)';
});
card.addEventListener('mouseleave', () => {
card.style.transform = '';
});
});
// Initialize chat scroll
chatMessages.scrollTop = chatMessages.scrollHeight;
</script>
</body>
</html>