Spaces:
Running
Running
1. Overall App Vibe / Branding Prompt
Browse filesDesign a sleek, modern social media app for artists and musicians with a dark grey and pastel green color scheme. The app should feel futuristic, inspired by matrix-style aesthetics, with blurred glassmorphism panels. The vibe should be minimalistic yet energetic, emphasizing creativity and collaboration among musicians (singers, producers, songwriters, engineers). Include subtle animation cues, glowing accents, and dynamic layouts to make the interface feel alive. The design should feel intuitive for both casual users and professional creators.
2. Home Page / Feed Prompt
Create a home feed for a music-focused social media app where users can post music tracks, beats, or text updates ("tweets"). Posts can be public or for followers only (blurred for non-followers). Each post should have options to like, comment, share, and play music directly. Include a visually clear way to connect producers with vocalists, engineers, or other artists—such as tags, match suggestions, or collaborative prompts. The feed should prioritize trending posts and show audio waveform previews. Use a dark grey background with pastel green accents and frosted glass panels. Include smooth hover or tap animations for interactive elements.
3. Profile Page Prompt
Design a user profile page for a music social media app. Features include:
- Profile photo and header image.
- Option to set a song in the bio that autoplays when the profile is opened (with a toggle to turn autoplay off).
- Tabs for Posts, Vault, Followers, Following.
- Posts section shows public posts or blurred restricted content for non-followers.
- Vault section acts as a private cloud storage for unreleased music with strong visual separation from public posts.
- Include a clean, modern layout with blurred glassmorphism panels, matrix-inspired neon accents, and a dark grey + pastel green color scheme.
- Smooth micro-interactions for uploading music, editing profile, or toggling settings.
4. Charts Section Prompt
Design a "Charts" section for a music social media app where users can see trending tracks or beats posted by the community. Include daily, weekly, and monthly ranking tabs. Each chart entry should show the song title, artist, cover art, play button, likes, and comments. Use frosted glass panels, matrix-style neon lines, and a dark grey + pastel green color palette. Allow easy filtering and quick previews of tracks without leaving the chart view. Include subtle animations for rank changes and trending highlights.
5. Explore / Discovery Page Prompt
Create an Explore page for a social media app for musicians. Features should include:
- Personalized recommendations for collaborations (vocalists, producers, engineers).
- Trending music, beats, or posts from users around the world.
- Search bar for artists, songs, genres, and hashtags.
- Interactive cards that show snippets of audio or visuals with blurred glassmorphism overlays.
- Dark grey background with pastel green accents, glowing neon highlights, and futuristic matrix-inspired aesthetics.
- Include hover animations for quick actions like follow, like, or send collaboration request.
6. Bottom Taskbar Prompt
Design a modern bottom navigation bar for a music social media app. Buttons: Home, Charts, Explore, Profile. Include minimal icons with pastel green highlights on dark grey background. The bar should feel integrated into the app’s matrix-inspired aesthetic with subtle neon glow and smooth tap animations. Consider micro-interactions that make navigation feel responsive and futuristic.
7. Music Vault Feature Prompt
Design a private 'Vault' feature for a music social media app where users can securely store unreleased tracks. Include options to upload, download, organize by folder, and manage sharing permissions. Use blurred glassmorphism panels, a dark grey background, pastel green accents, and subtle neon effects. Ensure the interface communicates security and privacy while maintaining a sleek, modern matrix-inspired look.
- README.md +9 -5
- charts.html +277 -0
- explore.html +231 -0
- index.html +258 -19
- profile.html +281 -0
README.md
CHANGED
|
@@ -1,10 +1,14 @@
|
|
| 1 |
---
|
| 2 |
-
title: Harmonic Nexus
|
| 3 |
-
|
| 4 |
-
|
| 5 |
-
|
| 6 |
sdk: static
|
| 7 |
pinned: false
|
|
|
|
|
|
|
| 8 |
---
|
| 9 |
|
| 10 |
-
|
|
|
|
|
|
|
|
|
| 1 |
---
|
| 2 |
+
title: Harmonic Nexus 🎶
|
| 3 |
+
colorFrom: yellow
|
| 4 |
+
colorTo: gray
|
| 5 |
+
emoji: 🐳
|
| 6 |
sdk: static
|
| 7 |
pinned: false
|
| 8 |
+
tags:
|
| 9 |
+
- deepsite-v3
|
| 10 |
---
|
| 11 |
|
| 12 |
+
# Welcome to your new DeepSite project!
|
| 13 |
+
This project was created with [DeepSite](https://deepsite.hf.co).
|
| 14 |
+
|
charts.html
ADDED
|
@@ -0,0 +1,277 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8">
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
+
<title>Harmonic Nexus | Charts</title>
|
| 7 |
+
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
|
| 8 |
+
<script src="https://cdn.tailwindcss.com"></script>
|
| 9 |
+
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
|
| 10 |
+
<script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.iife.min.js"></script>
|
| 11 |
+
<script>
|
| 12 |
+
tailwind.config = {
|
| 13 |
+
theme: {
|
| 14 |
+
extend: {
|
| 15 |
+
colors: {
|
| 16 |
+
primary: '#22272E',
|
| 17 |
+
secondary: '#A1E5AB',
|
| 18 |
+
accent: '#2F3742',
|
| 19 |
+
},
|
| 20 |
+
backdropBlur: {
|
| 21 |
+
xs: '2px',
|
| 22 |
+
},
|
| 23 |
+
}
|
| 24 |
+
}
|
| 25 |
+
}
|
| 26 |
+
</script>
|
| 27 |
+
<style>
|
| 28 |
+
.glass-panel {
|
| 29 |
+
background: rgba(34, 39, 46, 0.7);
|
| 30 |
+
backdrop-filter: blur(8px);
|
| 31 |
+
border: 1px solid rgba(161, 229, 171, 0.2);
|
| 32 |
+
}
|
| 33 |
+
.glow-effect {
|
| 34 |
+
box-shadow: 0 0 10px rgba(161, 229, 171, 0.3);
|
| 35 |
+
}
|
| 36 |
+
.waveform {
|
| 37 |
+
background: linear-gradient(90deg, #A1E5AB, #A1E5AB00);
|
| 38 |
+
}
|
| 39 |
+
.rank-up {
|
| 40 |
+
color: #A1E5AB;
|
| 41 |
+
}
|
| 42 |
+
.rank-down {
|
| 43 |
+
color: #FF6B6B;
|
| 44 |
+
}
|
| 45 |
+
.rank-same {
|
| 46 |
+
color: #D1D5DB;
|
| 47 |
+
}
|
| 48 |
+
</style>
|
| 49 |
+
</head>
|
| 50 |
+
<body class="bg-primary text-white min-h-screen pb-16">
|
| 51 |
+
<div class="container mx-auto px-4">
|
| 52 |
+
<header class="py-6 flex justify-between items-center border-b border-accent">
|
| 53 |
+
<h1 class="text-3xl font-bold text-secondary">Harmonic Nexus <span class="text-xs opacity-70">🎶</span></h1>
|
| 54 |
+
<div class="flex space-x-4">
|
| 55 |
+
<button class="glass-panel p-2 rounded-full hover:glow-effect">
|
| 56 |
+
<i data-feather="search"></i>
|
| 57 |
+
</button>
|
| 58 |
+
<button class="glass-panel p-2 rounded-full hover:glow-effect">
|
| 59 |
+
<i data-feather="filter"></i>
|
| 60 |
+
</button>
|
| 61 |
+
</div>
|
| 62 |
+
</header>
|
| 63 |
+
|
| 64 |
+
<main>
|
| 65 |
+
<div class="flex justify-between items-center my-6">
|
| 66 |
+
<h2 class="text-2xl font-bold">Trending Charts</h2>
|
| 67 |
+
<div class="flex space-x-2 glass-panel rounded-full p-1">
|
| 68 |
+
<button class="px-3 py-1 rounded-full bg-accent">Daily</button>
|
| 69 |
+
<button class="px-3 py-1 rounded-full hover:bg-accent">Weekly</button>
|
| 70 |
+
<button class="px-3 py-1 rounded-full hover:bg-accent">Monthly</button>
|
| 71 |
+
</div>
|
| 72 |
+
</div>
|
| 73 |
+
|
| 74 |
+
<div class="glass-panel rounded-xl p-6 mb-6">
|
| 75 |
+
<div class="flex justify-between mb-4">
|
| 76 |
+
<h3 class="font-bold text-lg">Top Beats</h3>
|
| 77 |
+
<button class="text-sm text-secondary flex items-center">
|
| 78 |
+
<i data-feather="sliders" class="mr-1"></i> Filter
|
| 79 |
+
</button>
|
| 80 |
+
</div>
|
| 81 |
+
|
| 82 |
+
<div class="space-y-4">
|
| 83 |
+
<!-- Chart Item 1 -->
|
| 84 |
+
<div class="flex items-center space-x-4 p-3 hover:bg-accent rounded-lg transition-all">
|
| 85 |
+
<span class="text-xl font-bold w-6 text-center">1</span>
|
| 86 |
+
<img src="http://static.photos/music/200x200/20" class="w-12 h-12 rounded">
|
| 87 |
+
<div class="flex-1 min-w-0">
|
| 88 |
+
<h4 class="font-medium truncate">Midnight Dreams</h4>
|
| 89 |
+
<p class="text-xs opacity-70 truncate">ProducerPro</p>
|
| 90 |
+
</div>
|
| 91 |
+
<div class="flex items-center space-x-1 rank-up">
|
| 92 |
+
<i data-feather="trending-up"></i>
|
| 93 |
+
<span class="text-xs">+2</span>
|
| 94 |
+
</div>
|
| 95 |
+
<button class="bg-secondary text-primary p-2 rounded-full">
|
| 96 |
+
<i data-feather="play"></i>
|
| 97 |
+
</button>
|
| 98 |
+
</div>
|
| 99 |
+
|
| 100 |
+
<!-- Chart Item 2 -->
|
| 101 |
+
<div class="flex items-center space-x-4 p-3 hover:bg-accent rounded-lg transition-all">
|
| 102 |
+
<span class="text-xl font-bold w-6 text-center">2</span>
|
| 103 |
+
<img src="http://static.photos/music/200x200/21" class="w-12 h-12 rounded">
|
| 104 |
+
<div class="flex-1 min-w-0">
|
| 105 |
+
<h4 class="font-medium truncate">City Lights</h4>
|
| 106 |
+
<p class="text-xs opacity-70 truncate">UrbanVibes</p>
|
| 107 |
+
</div>
|
| 108 |
+
<div class="flex items-center space-x-1 rank-down">
|
| 109 |
+
<i data-feather="trending-down"></i>
|
| 110 |
+
<span class="text-xs">-1</span>
|
| 111 |
+
</div>
|
| 112 |
+
<button class="bg-secondary text-primary p-2 rounded-full">
|
| 113 |
+
<i data-feather="play"></i>
|
| 114 |
+
</button>
|
| 115 |
+
</div>
|
| 116 |
+
|
| 117 |
+
<!-- Chart Item 3 -->
|
| 118 |
+
<div class="flex items-center space-x-4 p-3 hover:bg-accent rounded-lg transition-all">
|
| 119 |
+
<span class="text-xl font-bold w-6 text-center">3</span>
|
| 120 |
+
<img src="http://static.photos/music/200x200/22" class="w-12 h-12 rounded">
|
| 121 |
+
<div class="flex-1 min-w-0">
|
| 122 |
+
<h4 class="font-medium truncate">Electric Dreams</h4>
|
| 123 |
+
<p class="text-xs opacity-70 truncate">SynthMaster</p>
|
| 124 |
+
</div>
|
| 125 |
+
<div class="flex items-center space-x-1 rank-same">
|
| 126 |
+
<i data-feather="minus"></i>
|
| 127 |
+
</div>
|
| 128 |
+
<button class="bg-secondary text-primary p-2 rounded-full">
|
| 129 |
+
<i data-feather="play"></i>
|
| 130 |
+
</button>
|
| 131 |
+
</div>
|
| 132 |
+
|
| 133 |
+
<!-- Chart Item 4 -->
|
| 134 |
+
<div class="flex items-center space-x-4 p-3 hover:bg-accent rounded-lg transition-all">
|
| 135 |
+
<span class="text-xl font-bold w-6 text-center">4</span>
|
| 136 |
+
<img src="http://static.photos/music/200x200/23" class="w-12 h-12 rounded">
|
| 137 |
+
<div class="flex-1 min-w-0">
|
| 138 |
+
<h4 class="font-medium truncate">Ocean Breeze</h4>
|
| 139 |
+
<p class="text-xs opacity-70 truncate">WaveMaker</p>
|
| 140 |
+
</div>
|
| 141 |
+
<div class="flex items-center space-x-1 rank-up">
|
| 142 |
+
<i data-feather="trending-up"></i>
|
| 143 |
+
<span class="text-xs">+3</span>
|
| 144 |
+
</div>
|
| 145 |
+
<button class="bg-secondary text-primary p-2 rounded-full">
|
| 146 |
+
<i data-feather="play"></i>
|
| 147 |
+
</button>
|
| 148 |
+
</div>
|
| 149 |
+
|
| 150 |
+
<!-- Chart Item 5 -->
|
| 151 |
+
<div class="flex items-center space-x-4 p-3 hover:bg-accent rounded-lg transition-all">
|
| 152 |
+
<span class="text-xl font-bold w-6 text-center">5</span>
|
| 153 |
+
<img src="http://static.photos/music/200x200/24" class="w-12 h-12 rounded">
|
| 154 |
+
<div class="flex-1 min-w-0">
|
| 155 |
+
<h4 class="font-medium truncate">Neon Nights</h4>
|
| 156 |
+
<p class="text-xs opacity-70 truncate">RetroFuture</p>
|
| 157 |
+
</div>
|
| 158 |
+
<div class="flex items-center space-x-1 rank-up">
|
| 159 |
+
<i data-feather="trending-up"></i>
|
| 160 |
+
<span class="text-xs">+5</span>
|
| 161 |
+
</div>
|
| 162 |
+
<button class="bg-secondary text-primary p-2 rounded-full">
|
| 163 |
+
<i data-feather="play"></i>
|
| 164 |
+
</button>
|
| 165 |
+
</div>
|
| 166 |
+
</div>
|
| 167 |
+
</div>
|
| 168 |
+
|
| 169 |
+
<div class="glass-panel rounded-xl p-6">
|
| 170 |
+
<div class="flex justify-between mb-4">
|
| 171 |
+
<h3 class="font-bold text-lg">Top Vocals</h3>
|
| 172 |
+
<button class="text-sm text-secondary flex items-center">
|
| 173 |
+
<i data-feather="sliders" class="mr-1"></i> Filter
|
| 174 |
+
</button>
|
| 175 |
+
</div>
|
| 176 |
+
|
| 177 |
+
<div class="space-y-4">
|
| 178 |
+
<!-- Chart Item 1 -->
|
| 179 |
+
<div class="flex items-center space-x-4 p-3 hover:bg-accent rounded-lg transition-all">
|
| 180 |
+
<span class="text-xl font-bold w-6 text-center">1</span>
|
| 181 |
+
<img src="http://static.photos/music/200x200/25" class="w-12 h-12 rounded">
|
| 182 |
+
<div class="flex-1 min-w-0">
|
| 183 |
+
<h4 class="font-medium truncate">Midnight Melodies</h4>
|
| 184 |
+
<p class="text-xs opacity-70 truncate">VocalVibes</p>
|
| 185 |
+
</div>
|
| 186 |
+
<div class="flex items-center space-x-1 rank-up">
|
| 187 |
+
<i data-feather="trending-up"></i>
|
| 188 |
+
<span class="text-xs">+1</span>
|
| 189 |
+
</div>
|
| 190 |
+
<button class="bg-secondary text-primary p-2 rounded-full">
|
| 191 |
+
<i data-feather="play"></i>
|
| 192 |
+
</button>
|
| 193 |
+
</div>
|
| 194 |
+
|
| 195 |
+
<!-- Chart Item 2 -->
|
| 196 |
+
<div class="flex items-center space-x-4 p-3 hover:bg-accent rounded-lg transition-all">
|
| 197 |
+
<span class="text-xl font-bold w-6 text-center">2</span>
|
| 198 |
+
<img src="http://static.photos/music/200x200/26" class="w-12 h-12 rounded">
|
| 199 |
+
<div class="flex-1 min-w-0">
|
| 200 |
+
<h4 class="font-medium truncate">City Soul</h4>
|
| 201 |
+
<p class="text-xs opacity-70 truncate">UrbanPoet</p>
|
| 202 |
+
</div>
|
| 203 |
+
<div class="flex items-center space-x-1 rank-same">
|
| 204 |
+
<i data-feather="minus"></i>
|
| 205 |
+
</div>
|
| 206 |
+
<button class="bg-secondary text-primary p-2 rounded-full">
|
| 207 |
+
<i data-feather="play"></i>
|
| 208 |
+
</button>
|
| 209 |
+
</div>
|
| 210 |
+
|
| 211 |
+
<!-- Chart Item 3 -->
|
| 212 |
+
<div class="flex items-center space-x-4 p-3 hover:bg-accent rounded-lg transition-all">
|
| 213 |
+
<span class="text-xl font-bold w-6 text-center">3</span>
|
| 214 |
+
<img src="http://static.photos/music/200x200/27" class="w-12 h-12 rounded">
|
| 215 |
+
<div class="flex-1 min-w-0">
|
| 216 |
+
<h4 class="font-medium truncate">Electric Feel</h4>
|
| 217 |
+
<p class="text-xs opacity-70 truncate">SynthSinger</p>
|
| 218 |
+
</div>
|
| 219 |
+
<div class="flex items-center space-x-1 rank-down">
|
| 220 |
+
<i data-feather="trending-down"></i>
|
| 221 |
+
<span class="text-xs">-2</span>
|
| 222 |
+
</div>
|
| 223 |
+
<button class="bg-secondary text-primary p-2 rounded-full">
|
| 224 |
+
<i data-feather="play"></i>
|
| 225 |
+
</button>
|
| 226 |
+
</div>
|
| 227 |
+
</div>
|
| 228 |
+
</div>
|
| 229 |
+
</main>
|
| 230 |
+
</div>
|
| 231 |
+
|
| 232 |
+
<!-- Bottom Navigation -->
|
| 233 |
+
<div class="fixed bottom-0 left-0 right-0 bg-primary border-t border-accent">
|
| 234 |
+
<div class="container mx-auto px-4 py-3">
|
| 235 |
+
<div class="flex justify-around">
|
| 236 |
+
<a href="index.html" class="flex flex-col items-center opacity-70 hover:opacity-100">
|
| 237 |
+
<i data-feather="home"></i>
|
| 238 |
+
<span class="text-xs mt-1">Home</span>
|
| 239 |
+
</a>
|
| 240 |
+
<a href="#" class="flex flex-col items-center text-secondary">
|
| 241 |
+
<i data-feather="trending-up"></i>
|
| 242 |
+
<span class="text-xs mt-1">Charts</span>
|
| 243 |
+
</a>
|
| 244 |
+
<a href="explore.html" class="flex flex-col items-center opacity-70 hover:opacity-100">
|
| 245 |
+
<i data-feather="compass"></i>
|
| 246 |
+
<span class="text-xs mt-1">Explore</span>
|
| 247 |
+
</a>
|
| 248 |
+
<a href="profile.html" class="flex flex-col items-center opacity-70 hover:opacity-100">
|
| 249 |
+
<i data-feather="user"></i>
|
| 250 |
+
<span class="text-xs mt-1">Profile</span>
|
| 251 |
+
</a>
|
| 252 |
+
</div>
|
| 253 |
+
</div>
|
| 254 |
+
</div>
|
| 255 |
+
|
| 256 |
+
<script>
|
| 257 |
+
feather.replace();
|
| 258 |
+
anime({
|
| 259 |
+
targets: '.rank-up',
|
| 260 |
+
translateY: [-5, 0],
|
| 261 |
+
opacity: [0, 1],
|
| 262 |
+
easing: 'easeOutQuad',
|
| 263 |
+
duration: 1000,
|
| 264 |
+
delay: anime.stagger(100)
|
| 265 |
+
});
|
| 266 |
+
|
| 267 |
+
anime({
|
| 268 |
+
targets: '.rank-down',
|
| 269 |
+
translateY: [5, 0],
|
| 270 |
+
opacity: [0, 1],
|
| 271 |
+
easing: 'easeOutQuad',
|
| 272 |
+
duration: 1000,
|
| 273 |
+
delay: anime.stagger(100)
|
| 274 |
+
});
|
| 275 |
+
</script>
|
| 276 |
+
</body>
|
| 277 |
+
</html>
|
explore.html
ADDED
|
@@ -0,0 +1,231 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8">
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
+
<title>Harmonic Nexus | Explore</title>
|
| 7 |
+
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
|
| 8 |
+
<script src="https://cdn.tailwindcss.com"></script>
|
| 9 |
+
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
|
| 10 |
+
<script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.iife.min.js"></script>
|
| 11 |
+
<script>
|
| 12 |
+
tailwind.config = {
|
| 13 |
+
theme: {
|
| 14 |
+
extend: {
|
| 15 |
+
colors: {
|
| 16 |
+
primary: '#22272E',
|
| 17 |
+
secondary: '#A1E5AB',
|
| 18 |
+
accent: '#2F3742',
|
| 19 |
+
},
|
| 20 |
+
backdropBlur: {
|
| 21 |
+
xs: '2px',
|
| 22 |
+
},
|
| 23 |
+
}
|
| 24 |
+
}
|
| 25 |
+
}
|
| 26 |
+
</script>
|
| 27 |
+
<style>
|
| 28 |
+
.glass-panel {
|
| 29 |
+
background: rgba(34, 39, 46, 0.7);
|
| 30 |
+
backdrop-filter: blur(8px);
|
| 31 |
+
border: 1px solid rgba(161, 229, 171, 0.2);
|
| 32 |
+
}
|
| 33 |
+
.glow-effect {
|
| 34 |
+
box-shadow: 0 0 10px rgba(161, 229, 171, 0.3);
|
| 35 |
+
}
|
| 36 |
+
.waveform {
|
| 37 |
+
background: linear-gradient(90deg, #A1E5AB, #A1E5AB00);
|
| 38 |
+
}
|
| 39 |
+
.explore-card {
|
| 40 |
+
transition: all 0.3s ease;
|
| 41 |
+
}
|
| 42 |
+
.explore-card:hover {
|
| 43 |
+
transform: translateY(-5px);
|
| 44 |
+
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
|
| 45 |
+
}
|
| 46 |
+
</style>
|
| 47 |
+
</head>
|
| 48 |
+
<body class="bg-primary text-white min-h-screen pb-16">
|
| 49 |
+
<div class="container mx-auto px-4">
|
| 50 |
+
<header class="py-6 flex justify-between items-center border-b border-accent">
|
| 51 |
+
<h1 class="text-3xl font-bold text-secondary">Harmonic Nexus <span class="text-xs opacity-70">🎶</span></h1>
|
| 52 |
+
<button class="glass-panel p-2 rounded-full hover:glow-effect">
|
| 53 |
+
<i data-feather="bell"></i>
|
| 54 |
+
</button>
|
| 55 |
+
</header>
|
| 56 |
+
|
| 57 |
+
<main>
|
| 58 |
+
<!-- Search Bar -->
|
| 59 |
+
<div class="glass-panel rounded-full p-3 my-6 flex items-center">
|
| 60 |
+
<i data-feather="search" class="text-secondary mr-3"></i>
|
| 61 |
+
<input type="text" placeholder="Search artists, songs, genres..." class="bg-transparent flex-1 focus:outline-none">
|
| 62 |
+
</div>
|
| 63 |
+
|
| 64 |
+
<!-- Categories -->
|
| 65 |
+
<div class="mb-6">
|
| 66 |
+
<h2 class="text-xl font-bold mb-4">Categories</h2>
|
| 67 |
+
<div class="flex space-x-3 overflow-x-auto pb-2">
|
| 68 |
+
<button class="glass-panel px-4 py-2 rounded-full whitespace-nowrap hover:glow-effect">Hip Hop</button>
|
| 69 |
+
<button class="glass-panel px-4 py-2 rounded-full whitespace-nowrap hover:glow-effect">Electronic</button>
|
| 70 |
+
<button class="glass-panel px-4 py-2 rounded-full whitespace-nowrap hover:glow-effect">R&B</button>
|
| 71 |
+
<button class="glass-panel px-4 py-2 rounded-full whitespace-nowrap hover:glow-effect">Pop</button>
|
| 72 |
+
<button class="glass-panel px-4 py-2 rounded-full whitespace-nowrap hover:glow-effect">Rock</button>
|
| 73 |
+
<button class="glass-panel px-4 py-2 rounded-full whitespace-nowrap hover:glow-effect">Lo-Fi</button>
|
| 74 |
+
</div>
|
| 75 |
+
</div>
|
| 76 |
+
|
| 77 |
+
<!-- Recommended Collaborations -->
|
| 78 |
+
<div class="mb-8">
|
| 79 |
+
<div class="flex justify-between items-center mb-4">
|
| 80 |
+
<h2 class="text-xl font-bold">Recommended Collaborations</h2>
|
| 81 |
+
<button class="text-secondary text-sm">See All</button>
|
| 82 |
+
</div>
|
| 83 |
+
|
| 84 |
+
<div class="grid grid-cols-2 gap-4">
|
| 85 |
+
<!-- Collab Card 1 -->
|
| 86 |
+
<div class="glass-panel explore-card rounded-xl p-4 hover:glow-effect">
|
| 87 |
+
<div class="relative mb-3">
|
| 88 |
+
<img src="http://static.photos/music/320x240/30" class="w-full h-32 rounded-lg object-cover">
|
| 89 |
+
<div class="absolute inset-0 bg-gradient-to-t from-primary to-transparent opacity-80 rounded-lg"></div>
|
| 90 |
+
<div class="absolute bottom-2 left-2">
|
| 91 |
+
<h3 class="font-bold">Producer</h3>
|
| 92 |
+
<p class="text-xs">Needs vocalist</p>
|
| 93 |
+
</div>
|
| 94 |
+
</div>
|
| 95 |
+
<button class="w-full bg-secondary text-primary py-2 rounded-full text-sm font-medium">Connect</button>
|
| 96 |
+
</div>
|
| 97 |
+
|
| 98 |
+
<!-- Collab Card 2 -->
|
| 99 |
+
<div class="glass-panel explore-card rounded-xl p-4 hover:glow-effect">
|
| 100 |
+
<div class="relative mb-3">
|
| 101 |
+
<img src="http://static.photos/music/320x240/31" class="w-full h-32 rounded-lg object-cover">
|
| 102 |
+
<div class="absolute inset-0 bg-gradient-to-t from-primary to-transparent opacity-80 rounded-lg"></div>
|
| 103 |
+
<div class="absolute bottom-2 left-2">
|
| 104 |
+
<h3 class="font-bold">Vocalist</h3>
|
| 105 |
+
<p class="text-xs">Needs producer</p>
|
| 106 |
+
</div>
|
| 107 |
+
</div>
|
| 108 |
+
<button class="w-full bg-secondary text-primary py-2 rounded-full text-sm font-medium">Connect</button>
|
| 109 |
+
</div>
|
| 110 |
+
</div>
|
| 111 |
+
</div>
|
| 112 |
+
|
| 113 |
+
<!-- Trending Now -->
|
| 114 |
+
<div class="mb-8">
|
| 115 |
+
<div class="flex justify-between items-center mb-4">
|
| 116 |
+
<h2 class="text-xl font-bold">Trending Now</h2>
|
| 117 |
+
<button class="text-secondary text-sm">See All</button>
|
| 118 |
+
</div>
|
| 119 |
+
|
| 120 |
+
<div class="grid grid-cols-2 gap-4">
|
| 121 |
+
<!-- Trend Card 1 -->
|
| 122 |
+
<div class="glass-panel explore-card rounded-xl overflow-hidden hover:glow-effect">
|
| 123 |
+
<img src="http://static.photos/music/320x240/32" class="w-full h-32 object-cover">
|
| 124 |
+
<div class="p-3">
|
| 125 |
+
<h3 class="font-medium truncate">Midnight Dreams</h3>
|
| 126 |
+
<p class="text-xs opacity-70 truncate">ProducerPro</p>
|
| 127 |
+
<div class="flex justify-between items-center mt-2">
|
| 128 |
+
<div class="flex items-center space-x-1">
|
| 129 |
+
<i data-feather="heart" class="w-3 h-3"></i>
|
| 130 |
+
<span class="text-xs">1.2K</span>
|
| 131 |
+
</div>
|
| 132 |
+
<button class="bg-secondary text-primary p-1 rounded-full">
|
| 133 |
+
<i data-feather="play" class="w-3 h-3"></i>
|
| 134 |
+
</button>
|
| 135 |
+
</div>
|
| 136 |
+
</div>
|
| 137 |
+
</div>
|
| 138 |
+
|
| 139 |
+
<!-- Trend Card 2 -->
|
| 140 |
+
<div class="glass-panel explore-card rounded-xl overflow-hidden hover:glow-effect">
|
| 141 |
+
<img src="http://static.photos/music/320x240/33" class="w-full h-32 object-cover">
|
| 142 |
+
<div class="p-3">
|
| 143 |
+
<h3 class="font-medium truncate">Electric Feel</h3>
|
| 144 |
+
<p class="text-xs opacity-70 truncate">SynthMaster</p>
|
| 145 |
+
<div class="flex justify-between items-center mt-2">
|
| 146 |
+
<div class="flex items-center space-x-1">
|
| 147 |
+
<i data-feather="heart" class="w-3 h-3"></i>
|
| 148 |
+
<span class="text-xs">987</span>
|
| 149 |
+
</div>
|
| 150 |
+
<button class="bg-secondary text-primary p-1 rounded-full">
|
| 151 |
+
<i data-feather="play" class="w-3 h-3"></i>
|
| 152 |
+
</button>
|
| 153 |
+
</div>
|
| 154 |
+
</div>
|
| 155 |
+
</div>
|
| 156 |
+
</div>
|
| 157 |
+
</div>
|
| 158 |
+
|
| 159 |
+
<!-- New Releases -->
|
| 160 |
+
<div class="mb-8">
|
| 161 |
+
<div class="flex justify-between items-center mb-4">
|
| 162 |
+
<h2 class="text-xl font-bold">New Releases</h2>
|
| 163 |
+
<button class="text-secondary text-sm">See All</button>
|
| 164 |
+
</div>
|
| 165 |
+
|
| 166 |
+
<div class="space-y-4">
|
| 167 |
+
<!-- Release 1 -->
|
| 168 |
+
<div class="glass-panel explore-card rounded-lg p-3 flex items-center hover:glow-effect">
|
| 169 |
+
<img src="http://static.photos/music/200x200/34" class="w-12 h-12 rounded-lg mr-3">
|
| 170 |
+
<div class="flex-1 min-w-0">
|
| 171 |
+
<h3 class="font-medium truncate">Ocean Breeze</h3>
|
| 172 |
+
<p class="text-xs opacity-70 truncate">WaveMaker • 2 hours ago</p>
|
| 173 |
+
</div>
|
| 174 |
+
<button class="bg-secondary text-primary p-2 rounded-full">
|
| 175 |
+
<i data-feather="play"></i>
|
| 176 |
+
</button>
|
| 177 |
+
</div>
|
| 178 |
+
|
| 179 |
+
<!-- Release 2 -->
|
| 180 |
+
<div class="glass-panel explore-card rounded-lg p-3 flex items-center hover:glow-effect">
|
| 181 |
+
<img src="http://static.photos/music/200x200/35" class="w-12 h-12 rounded-lg mr-3">
|
| 182 |
+
<div class="flex-1 min-w-0">
|
| 183 |
+
<h3 class="font-medium truncate">City Soul</h3>
|
| 184 |
+
<p class="text-xs opacity-70 truncate">UrbanPoet • 5 hours ago</p>
|
| 185 |
+
</div>
|
| 186 |
+
<button class="bg-secondary text-primary p-2 rounded-full">
|
| 187 |
+
<i data-feather="play"></i>
|
| 188 |
+
</button>
|
| 189 |
+
</div>
|
| 190 |
+
</div>
|
| 191 |
+
</div>
|
| 192 |
+
</main>
|
| 193 |
+
</div>
|
| 194 |
+
|
| 195 |
+
<!-- Bottom Navigation -->
|
| 196 |
+
<div class="fixed bottom-0 left-0 right-0 bg-primary border-t border-accent">
|
| 197 |
+
<div class="container mx-auto px-4 py-3">
|
| 198 |
+
<div class="flex justify-around">
|
| 199 |
+
<a href="index.html" class="flex flex-col items-center opacity-70 hover:opacity-100">
|
| 200 |
+
<i data-feather="home"></i>
|
| 201 |
+
<span class="text-xs mt-1">Home</span>
|
| 202 |
+
</a>
|
| 203 |
+
<a href="charts.html" class="flex flex-col items-center opacity-70 hover:opacity-100">
|
| 204 |
+
<i data-feather="trending-up"></i>
|
| 205 |
+
<span class="text-xs mt-1">Charts</span>
|
| 206 |
+
</a>
|
| 207 |
+
<a href="#" class="flex flex-col items-center text-secondary">
|
| 208 |
+
<i data-feather="compass"></i>
|
| 209 |
+
<span class="text-xs mt-1">Explore</span>
|
| 210 |
+
</a>
|
| 211 |
+
<a href="profile.html" class="flex flex-col items-center opacity-70 hover:opacity-100">
|
| 212 |
+
<i data-feather="user"></i>
|
| 213 |
+
<span class="text-xs mt-1">Profile</span>
|
| 214 |
+
</a>
|
| 215 |
+
</div>
|
| 216 |
+
</div>
|
| 217 |
+
</div>
|
| 218 |
+
|
| 219 |
+
<script>
|
| 220 |
+
feather.replace();
|
| 221 |
+
anime({
|
| 222 |
+
targets: '.explore-card',
|
| 223 |
+
opacity: [0, 1],
|
| 224 |
+
translateY: [20, 0],
|
| 225 |
+
easing: 'easeOutQuad',
|
| 226 |
+
duration: 800,
|
| 227 |
+
delay: anime.stagger(100)
|
| 228 |
+
});
|
| 229 |
+
</script>
|
| 230 |
+
</body>
|
| 231 |
+
</html>
|
index.html
CHANGED
|
@@ -1,19 +1,258 @@
|
|
| 1 |
-
<!
|
| 2 |
-
<html>
|
| 3 |
-
|
| 4 |
-
|
| 5 |
-
|
| 6 |
-
|
| 7 |
-
|
| 8 |
-
|
| 9 |
-
|
| 10 |
-
|
| 11 |
-
|
| 12 |
-
|
| 13 |
-
|
| 14 |
-
|
| 15 |
-
|
| 16 |
-
|
| 17 |
-
|
| 18 |
-
|
| 19 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8">
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
+
<title>Harmonic Nexus | Home</title>
|
| 7 |
+
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
|
| 8 |
+
<script src="https://cdn.tailwindcss.com"></script>
|
| 9 |
+
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
|
| 10 |
+
<script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.iife.min.js"></script>
|
| 11 |
+
<script>
|
| 12 |
+
tailwind.config = {
|
| 13 |
+
theme: {
|
| 14 |
+
extend: {
|
| 15 |
+
colors: {
|
| 16 |
+
primary: '#22272E',
|
| 17 |
+
secondary: '#A1E5AB',
|
| 18 |
+
accent: '#2F3742',
|
| 19 |
+
},
|
| 20 |
+
backdropBlur: {
|
| 21 |
+
xs: '2px',
|
| 22 |
+
},
|
| 23 |
+
}
|
| 24 |
+
}
|
| 25 |
+
}
|
| 26 |
+
</script>
|
| 27 |
+
<style>
|
| 28 |
+
.glass-panel {
|
| 29 |
+
background: rgba(34, 39, 46, 0.7);
|
| 30 |
+
backdrop-filter: blur(8px);
|
| 31 |
+
border: 1px solid rgba(161, 229, 171, 0.2);
|
| 32 |
+
}
|
| 33 |
+
.glow-effect {
|
| 34 |
+
box-shadow: 0 0 10px rgba(161, 229, 171, 0.3);
|
| 35 |
+
}
|
| 36 |
+
.waveform {
|
| 37 |
+
background: linear-gradient(90deg, #A1E5AB, #A1E5AB00);
|
| 38 |
+
}
|
| 39 |
+
</style>
|
| 40 |
+
</head>
|
| 41 |
+
<body class="bg-primary text-white min-h-screen">
|
| 42 |
+
<div class="container mx-auto px-4">
|
| 43 |
+
<header class="py-6 flex justify-between items-center border-b border-accent">
|
| 44 |
+
<h1 class="text-3xl font-bold text-secondary">Harmonic Nexus <span class="text-xs opacity-70">🎶</span></h1>
|
| 45 |
+
<div class="flex space-x-4">
|
| 46 |
+
<button class="glass-panel px-4 py-2 rounded-full hover:glow-effect transition-all">Sign In</button>
|
| 47 |
+
<button class="bg-secondary text-primary px-4 py-2 rounded-full hover:glow-effect transition-all">Sign Up</button>
|
| 48 |
+
</div>
|
| 49 |
+
</header>
|
| 50 |
+
|
| 51 |
+
<main class="grid grid-cols-1 lg:grid-cols-3 gap-6 my-8">
|
| 52 |
+
<div class="lg:col-span-2 space-y-6">
|
| 53 |
+
<!-- Post Feed -->
|
| 54 |
+
<div class="glass-panel rounded-xl p-6">
|
| 55 |
+
<div class="flex items-center space-x-4 mb-4">
|
| 56 |
+
<img src="http://static.photos/music/200x200/1" class="w-12 h-12 rounded-full object-cover">
|
| 57 |
+
<textarea class="flex-1 bg-accent rounded-lg p-3 resize-none" placeholder="Share your latest track or idea..."></textarea>
|
| 58 |
+
</div>
|
| 59 |
+
<div class="flex justify-between items-center">
|
| 60 |
+
<div class="flex space-x-2">
|
| 61 |
+
<button class="p-2 rounded-full hover:bg-accent">
|
| 62 |
+
<i data-feather="music"></i>
|
| 63 |
+
</button>
|
| 64 |
+
<button class="p-2 rounded-full hover:bg-accent">
|
| 65 |
+
<i data-feather="image"></i>
|
| 66 |
+
</button>
|
| 67 |
+
</div>
|
| 68 |
+
<button class="bg-secondary text-primary px-4 py-2 rounded-full hover:glow-effect">Post</button>
|
| 69 |
+
</div>
|
| 70 |
+
</div>
|
| 71 |
+
|
| 72 |
+
<!-- Feed Items -->
|
| 73 |
+
<div class="space-y-6">
|
| 74 |
+
<!-- Post Example 1 -->
|
| 75 |
+
<div class="glass-panel rounded-xl p-6 hover:glow-effect transition-all">
|
| 76 |
+
<div class="flex items-center justify-between mb-4">
|
| 77 |
+
<div class="flex items-center space-x-3">
|
| 78 |
+
<img src="http://static.photos/music/200x200/2" class="w-10 h-10 rounded-full object-cover">
|
| 79 |
+
<div>
|
| 80 |
+
<h3 class="font-medium">ProducerPro</h3>
|
| 81 |
+
<p class="text-xs opacity-70">2 hours ago</p>
|
| 82 |
+
</div>
|
| 83 |
+
</div>
|
| 84 |
+
<button class="text-secondary">
|
| 85 |
+
<i data-feather="more-horizontal"></i>
|
| 86 |
+
</button>
|
| 87 |
+
</div>
|
| 88 |
+
|
| 89 |
+
<p class="mb-4">Just finished this new beat - looking for a vocalist to collaborate! #HipHop #NeedVocals</p>
|
| 90 |
+
|
| 91 |
+
<div class="mb-4">
|
| 92 |
+
<div class="waveform h-8 rounded mb-2"></div>
|
| 93 |
+
<div class="flex justify-between text-xs opacity-70">
|
| 94 |
+
<span>0:30</span>
|
| 95 |
+
<span>2:14</span>
|
| 96 |
+
</div>
|
| 97 |
+
</div>
|
| 98 |
+
|
| 99 |
+
<div class="flex justify-between">
|
| 100 |
+
<button class="flex items-center space-x-1 hover:text-secondary">
|
| 101 |
+
<i data-feather="heart"></i>
|
| 102 |
+
<span>24</span>
|
| 103 |
+
</button>
|
| 104 |
+
<button class="flex items-center space-x-1 hover:text-secondary">
|
| 105 |
+
<i data-feather="message-circle"></i>
|
| 106 |
+
<span>8</span>
|
| 107 |
+
</button>
|
| 108 |
+
<button class="flex items-center space-x-1 hover:text-secondary">
|
| 109 |
+
<i data-feather="share-2"></i>
|
| 110 |
+
<span>3</span>
|
| 111 |
+
</button>
|
| 112 |
+
<button class="flex items-center space-x-1 hover:text-secondary">
|
| 113 |
+
<i data-feather="collaborate"></i>
|
| 114 |
+
<span>Collab</span>
|
| 115 |
+
</button>
|
| 116 |
+
</div>
|
| 117 |
+
</div>
|
| 118 |
+
|
| 119 |
+
<!-- Post Example 2 -->
|
| 120 |
+
<div class="glass-panel rounded-xl p-6 hover:glow-effect transition-all">
|
| 121 |
+
<div class="flex items-center justify-between mb-4">
|
| 122 |
+
<div class="flex items-center space-x-3">
|
| 123 |
+
<img src="http://static.photos/music/200x200/3" class="w-10 h-10 rounded-full object-cover">
|
| 124 |
+
<div>
|
| 125 |
+
<h3 class="font-medium">VocalVibes</h3>
|
| 126 |
+
<p class="text-xs opacity-70">4 hours ago</p>
|
| 127 |
+
</div>
|
| 128 |
+
</div>
|
| 129 |
+
<button class="text-secondary">
|
| 130 |
+
<i data-feather="more-horizontal"></i>
|
| 131 |
+
</button>
|
| 132 |
+
</div>
|
| 133 |
+
|
| 134 |
+
<p class="mb-4">Looking for producers who specialize in melodic rap beats. Check my profile for samples of my voice!</p>
|
| 135 |
+
|
| 136 |
+
<div class="mb-4">
|
| 137 |
+
<div class="waveform h-8 rounded mb-2"></div>
|
| 138 |
+
<div class="flex justify-between text-xs opacity-70">
|
| 139 |
+
<span>0:00</span>
|
| 140 |
+
<span>0:45</span>
|
| 141 |
+
</div>
|
| 142 |
+
</div>
|
| 143 |
+
|
| 144 |
+
<div class="flex justify-between">
|
| 145 |
+
<button class="flex items-center space-x-1 hover:text-secondary">
|
| 146 |
+
<i data-feather="heart"></i>
|
| 147 |
+
<span>42</span>
|
| 148 |
+
</button>
|
| 149 |
+
<button class="flex items-center space-x-1 hover:text-secondary">
|
| 150 |
+
<i data-feather="message-circle"></i>
|
| 151 |
+
<span>15</span>
|
| 152 |
+
</button>
|
| 153 |
+
<button class="flex items-center space-x-1 hover:text-secondary">
|
| 154 |
+
<i data-feather="share-2"></i>
|
| 155 |
+
<span>7</span>
|
| 156 |
+
</button>
|
| 157 |
+
<button class="flex items-center space-x-1 hover:text-secondary">
|
| 158 |
+
<i data-feather="collaborate"></i>
|
| 159 |
+
<span>Collab</span>
|
| 160 |
+
</button>
|
| 161 |
+
</div>
|
| 162 |
+
</div>
|
| 163 |
+
</div>
|
| 164 |
+
</div>
|
| 165 |
+
|
| 166 |
+
<!-- Sidebar -->
|
| 167 |
+
<div class="space-y-6">
|
| 168 |
+
<div class="glass-panel rounded-xl p-6">
|
| 169 |
+
<h2 class="text-xl font-bold mb-4 text-secondary">Trending Now</h2>
|
| 170 |
+
<div class="space-y-4">
|
| 171 |
+
<div class="flex items-center space-x-3">
|
| 172 |
+
<span class="text-secondary font-bold">1</span>
|
| 173 |
+
<img src="http://static.photos/music/200x200/4" class="w-10 h-10 rounded">
|
| 174 |
+
<div>
|
| 175 |
+
<h3 class="font-medium">Midnight Dreams</h3>
|
| 176 |
+
<p class="text-xs opacity-70">BeatMakerX</p>
|
| 177 |
+
</div>
|
| 178 |
+
</div>
|
| 179 |
+
<div class="flex items-center space-x-3">
|
| 180 |
+
<span class="text-secondary font-bold">2</span>
|
| 181 |
+
<img src="http://static.photos/music/200x200/5" class="w-10 h-10 rounded">
|
| 182 |
+
<div>
|
| 183 |
+
<h3 class="font-medium">City Lights</h3>
|
| 184 |
+
<p class="text-xs opacity-70">UrbanVibes</p>
|
| 185 |
+
</div>
|
| 186 |
+
</div>
|
| 187 |
+
<div class="flex items-center space-x-3">
|
| 188 |
+
<span class="text-secondary font-bold">3</span>
|
| 189 |
+
<img src="http://static.photos/music/200x200/6" class="w-10 h-10 rounded">
|
| 190 |
+
<div>
|
| 191 |
+
<h3 class="font-medium">Electric Dreams</h3>
|
| 192 |
+
<p class="text-xs opacity-70">SynthMaster</p>
|
| 193 |
+
</div>
|
| 194 |
+
</div>
|
| 195 |
+
</div>
|
| 196 |
+
</div>
|
| 197 |
+
|
| 198 |
+
<div class="glass-panel rounded-xl p-6">
|
| 199 |
+
<h2 class="text-xl font-bold mb-4 text-secondary">Suggested Collaborations</h2>
|
| 200 |
+
<div class="space-y-4">
|
| 201 |
+
<div class="flex items-center space-x-3">
|
| 202 |
+
<img src="http://static.photos/music/200x200/7" class="w-10 h-10 rounded-full">
|
| 203 |
+
<div>
|
| 204 |
+
<h3 class="font-medium">GuitarGenius</h3>
|
| 205 |
+
<p class="text-xs opacity-70">Looking for vocalists</p>
|
| 206 |
+
</div>
|
| 207 |
+
<button class="ml-auto bg-secondary text-primary px-3 py-1 rounded-full text-sm">Connect</button>
|
| 208 |
+
</div>
|
| 209 |
+
<div class="flex items-center space-x-3">
|
| 210 |
+
<img src="http://static.photos/music/200x200/8" class="w-10 h-10 rounded-full">
|
| 211 |
+
<div>
|
| 212 |
+
<h3 class="font-medium">BassQueen</h3>
|
| 213 |
+
<p class="text-xs opacity-70">Need mixing engineer</p>
|
| 214 |
+
</div>
|
| 215 |
+
<button class="ml-auto bg-secondary text-primary px-3 py-1 rounded-full text-sm">Connect</button>
|
| 216 |
+
</div>
|
| 217 |
+
</div>
|
| 218 |
+
</div>
|
| 219 |
+
</div>
|
| 220 |
+
</main>
|
| 221 |
+
|
| 222 |
+
<!-- Bottom Navigation -->
|
| 223 |
+
<div class="fixed bottom-0 left-0 right-0 bg-primary border-t border-accent">
|
| 224 |
+
<div class="container mx-auto px-4 py-3">
|
| 225 |
+
<div class="flex justify-around">
|
| 226 |
+
<a href="#" class="flex flex-col items-center text-secondary">
|
| 227 |
+
<i data-feather="home"></i>
|
| 228 |
+
<span class="text-xs mt-1">Home</span>
|
| 229 |
+
</a>
|
| 230 |
+
<a href="charts.html" class="flex flex-col items-center opacity-70 hover:opacity-100">
|
| 231 |
+
<i data-feather="trending-up"></i>
|
| 232 |
+
<span class="text-xs mt-1">Charts</span>
|
| 233 |
+
</a>
|
| 234 |
+
<a href="explore.html" class="flex flex-col items-center opacity-70 hover:opacity-100">
|
| 235 |
+
<i data-feather="compass"></i>
|
| 236 |
+
<span class="text-xs mt-1">Explore</span>
|
| 237 |
+
</a>
|
| 238 |
+
<a href="profile.html" class="flex flex-col items-center opacity-70 hover:opacity-100">
|
| 239 |
+
<i data-feather="user"></i>
|
| 240 |
+
<span class="text-xs mt-1">Profile</span>
|
| 241 |
+
</a>
|
| 242 |
+
</div>
|
| 243 |
+
</div>
|
| 244 |
+
</div>
|
| 245 |
+
</div>
|
| 246 |
+
|
| 247 |
+
<script>
|
| 248 |
+
feather.replace();
|
| 249 |
+
anime({
|
| 250 |
+
targets: '.waveform',
|
| 251 |
+
scaleX: [0, 1],
|
| 252 |
+
easing: 'easeOutQuad',
|
| 253 |
+
duration: 1000,
|
| 254 |
+
delay: anime.stagger(100)
|
| 255 |
+
});
|
| 256 |
+
</script>
|
| 257 |
+
</body>
|
| 258 |
+
</html>
|
profile.html
ADDED
|
@@ -0,0 +1,281 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8">
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
+
<title>Harmonic Nexus | Profile</title>
|
| 7 |
+
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
|
| 8 |
+
<script src="https://cdn.tailwindcss.com"></script>
|
| 9 |
+
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
|
| 10 |
+
<script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.iife.min.js"></script>
|
| 11 |
+
<script>
|
| 12 |
+
tailwind.config = {
|
| 13 |
+
theme: {
|
| 14 |
+
extend: {
|
| 15 |
+
colors: {
|
| 16 |
+
primary: '#22272E',
|
| 17 |
+
secondary: '#A1E5AB',
|
| 18 |
+
accent: '#2F3742',
|
| 19 |
+
},
|
| 20 |
+
backdropBlur: {
|
| 21 |
+
xs: '2px',
|
| 22 |
+
},
|
| 23 |
+
}
|
| 24 |
+
}
|
| 25 |
+
}
|
| 26 |
+
</script>
|
| 27 |
+
<style>
|
| 28 |
+
.glass-panel {
|
| 29 |
+
background: rgba(34, 39, 46, 0.7);
|
| 30 |
+
backdrop-filter: blur(8px);
|
| 31 |
+
border: 1px solid rgba(161, 229, 171, 0.2);
|
| 32 |
+
}
|
| 33 |
+
.glow-effect {
|
| 34 |
+
box-shadow: 0 0 10px rgba(161, 229, 171, 0.3);
|
| 35 |
+
}
|
| 36 |
+
.waveform {
|
| 37 |
+
background: linear-gradient(90deg, #A1E5AB, #A1E5AB00);
|
| 38 |
+
}
|
| 39 |
+
.vault-item {
|
| 40 |
+
background: linear-gradient(90deg, rgba(34, 39, 46, 0.5), rgba(47, 55, 66, 0.7));
|
| 41 |
+
}
|
| 42 |
+
</style>
|
| 43 |
+
</head>
|
| 44 |
+
<body class="bg-primary text-white min-h-screen pb-16">
|
| 45 |
+
<div class="container mx-auto px-4">
|
| 46 |
+
<header class="py-6 flex justify-between items-center border-b border-accent">
|
| 47 |
+
<h1 class="text-3xl font-bold text-secondary">Harmonic Nexus <span class="text-xs opacity-70">🎶</span></h1>
|
| 48 |
+
<button class="glass-panel p-2 rounded-full hover:glow-effect">
|
| 49 |
+
<i data-feather="settings"></i>
|
| 50 |
+
</button>
|
| 51 |
+
</header>
|
| 52 |
+
|
| 53 |
+
<div class="relative mb-16">
|
| 54 |
+
<!-- Cover Photo -->
|
| 55 |
+
<div class="h-48 w-full bg-accent rounded-xl overflow-hidden">
|
| 56 |
+
<img src="http://static.photos/music/1200x630/10" class="w-full h-full object-cover">
|
| 57 |
+
</div>
|
| 58 |
+
|
| 59 |
+
<!-- Profile Picture -->
|
| 60 |
+
<div class="absolute -bottom-12 left-6 border-4 border-primary rounded-full">
|
| 61 |
+
<img src="http://static.photos/music/200x200/11" class="w-24 h-24 rounded-full object-cover">
|
| 62 |
+
</div>
|
| 63 |
+
|
| 64 |
+
<!-- Edit Profile Button -->
|
| 65 |
+
<button class="absolute bottom-4 right-6 bg-secondary text-primary px-4 py-2 rounded-full hover:glow-effect">
|
| 66 |
+
Edit Profile
|
| 67 |
+
</button>
|
| 68 |
+
</div>
|
| 69 |
+
|
| 70 |
+
<!-- Profile Info -->
|
| 71 |
+
<div class="glass-panel rounded-xl p-6 mb-6">
|
| 72 |
+
<div class="flex justify-between items-start mb-4">
|
| 73 |
+
<div>
|
| 74 |
+
<h2 class="text-2xl font-bold">MusicMaker42</h2>
|
| 75 |
+
<p class="text-secondary">Producer • Vocalist • Engineer</p>
|
| 76 |
+
</div>
|
| 77 |
+
<div class="flex space-x-2">
|
| 78 |
+
<button class="glass-panel p-2 rounded-full hover:glow-effect">
|
| 79 |
+
<i data-feather="share-2"></i>
|
| 80 |
+
</button>
|
| 81 |
+
</div>
|
| 82 |
+
</div>
|
| 83 |
+
|
| 84 |
+
<p class="mb-6">Creating beats and melodies since 2018. Specializing in hip-hop and electronic music. Open to collaborations!</p>
|
| 85 |
+
|
| 86 |
+
<div class="flex justify-between mb-6">
|
| 87 |
+
<div class="text-center">
|
| 88 |
+
<p class="font-bold">128</p>
|
| 89 |
+
<p class="text-xs opacity-70">Posts</p>
|
| 90 |
+
</div>
|
| 91 |
+
<div class="text-center">
|
| 92 |
+
<p class="font-bold">1.2K</p>
|
| 93 |
+
<p class="text-xs opacity-70">Followers</p>
|
| 94 |
+
</div>
|
| 95 |
+
<div class="text-center">
|
| 96 |
+
<p class="font-bold">843</p>
|
| 97 |
+
<p class="text-xs opacity-70">Following</p>
|
| 98 |
+
</div>
|
| 99 |
+
<div class="text-center">
|
| 100 |
+
<p class="font-bold">24</p>
|
| 101 |
+
<p class="text-xs opacity-70">Collabs</p>
|
| 102 |
+
</div>
|
| 103 |
+
</div>
|
| 104 |
+
|
| 105 |
+
<!-- Audio Player in Bio -->
|
| 106 |
+
<div class="glass-panel rounded-lg p-4 mb-4">
|
| 107 |
+
<div class="flex items-center justify-between mb-2">
|
| 108 |
+
<div class="flex items-center space-x-3">
|
| 109 |
+
<button class="bg-secondary text-primary p-2 rounded-full">
|
| 110 |
+
<i data-feather="play"></i>
|
| 111 |
+
</button>
|
| 112 |
+
<div>
|
| 113 |
+
<h3 class="font-medium">Current Project</h3>
|
| 114 |
+
<p class="text-xs opacity-70">Untitled Beat #42</p>
|
| 115 |
+
</div>
|
| 116 |
+
</div>
|
| 117 |
+
<button class="text-xs opacity-70 hover:text-secondary">
|
| 118 |
+
<i data-feather="volume-2"></i>
|
| 119 |
+
</button>
|
| 120 |
+
</div>
|
| 121 |
+
<div class="waveform h-4 rounded mb-1"></div>
|
| 122 |
+
<div class="flex justify-between text-xs opacity-70">
|
| 123 |
+
<span>0:45</span>
|
| 124 |
+
<span>3:22</span>
|
| 125 |
+
</div>
|
| 126 |
+
</div>
|
| 127 |
+
</div>
|
| 128 |
+
|
| 129 |
+
<!-- Profile Tabs -->
|
| 130 |
+
<div class="flex border-b border-accent mb-6">
|
| 131 |
+
<button class="flex-1 py-3 border-b-2 border-secondary font-medium">Posts</button>
|
| 132 |
+
<button class="flex-1 py-3 opacity-70 hover:opacity-100">Vault</button>
|
| 133 |
+
<button class="flex-1 py-3 opacity-70 hover:opacity-100">Followers</button>
|
| 134 |
+
<button class="flex-1 py-3 opacity-70 hover:opacity-100">Following</button>
|
| 135 |
+
</div>
|
| 136 |
+
|
| 137 |
+
<!-- Posts Section -->
|
| 138 |
+
<div class="space-y-6">
|
| 139 |
+
<!-- Post Example 1 -->
|
| 140 |
+
<div class="glass-panel rounded-xl p-6 hover:glow-effect transition-all">
|
| 141 |
+
<div class="flex items-center justify-between mb-4">
|
| 142 |
+
<div class="flex items-center space-x-3">
|
| 143 |
+
<img src="http://static.photos/music/200x200/11" class="w-10 h-10 rounded-full object-cover">
|
| 144 |
+
<div>
|
| 145 |
+
<h3 class="font-medium">MusicMaker42</h3>
|
| 146 |
+
<p class="text-xs opacity-70">1 day ago</p>
|
| 147 |
+
</div>
|
| 148 |
+
</div>
|
| 149 |
+
<button class="text-secondary">
|
| 150 |
+
<i data-feather="more-horizontal"></i>
|
| 151 |
+
</button>
|
| 152 |
+
</div>
|
| 153 |
+
|
| 154 |
+
<p class="mb-4">Just dropped this new beat tape - check it out! #HipHop #Instrumentals</p>
|
| 155 |
+
|
| 156 |
+
<div class="mb-4">
|
| 157 |
+
<div class="waveform h-8 rounded mb-2"></div>
|
| 158 |
+
<div class="flex justify-between text-xs opacity-70">
|
| 159 |
+
<span>0:00</span>
|
| 160 |
+
<span>4:32</span>
|
| 161 |
+
</div>
|
| 162 |
+
</div>
|
| 163 |
+
|
| 164 |
+
<div class="flex justify-between">
|
| 165 |
+
<button class="flex items-center space-x-1 hover:text-secondary">
|
| 166 |
+
<i data-feather="heart"></i>
|
| 167 |
+
<span>87</span>
|
| 168 |
+
</button>
|
| 169 |
+
<button class="flex items-center space-x-1 hover:text-secondary">
|
| 170 |
+
<i data-feather="message-circle"></i>
|
| 171 |
+
<span>23</span>
|
| 172 |
+
</button>
|
| 173 |
+
<button class="flex items-center space-x-1 hover:text-secondary">
|
| 174 |
+
<i data-feather="share-2"></i>
|
| 175 |
+
<span>12</span>
|
| 176 |
+
</button>
|
| 177 |
+
</div>
|
| 178 |
+
</div>
|
| 179 |
+
|
| 180 |
+
<!-- Vault Section (hidden by default) -->
|
| 181 |
+
<div class="hidden">
|
| 182 |
+
<div class="glass-panel rounded-xl p-6 mb-4">
|
| 183 |
+
<div class="flex justify-between items-center mb-6">
|
| 184 |
+
<h2 class="text-xl font-bold">Your Vault</h2>
|
| 185 |
+
<button class="bg-secondary text-primary px-3 py-1 rounded-full text-sm flex items-center">
|
| 186 |
+
<i data-feather="plus" class="mr-1"></i> Upload
|
| 187 |
+
</button>
|
| 188 |
+
</div>
|
| 189 |
+
|
| 190 |
+
<div class="space-y-3">
|
| 191 |
+
<div class="vault-item rounded-lg p-4 flex items-center justify-between">
|
| 192 |
+
<div class="flex items-center space-x-3">
|
| 193 |
+
<i data-feather="music" class="text-secondary"></i>
|
| 194 |
+
<div>
|
| 195 |
+
<h3 class="font-medium">Project_Alpha.wav</h3>
|
| 196 |
+
<p class="text-xs opacity-70">Last modified: 2 days ago</p>
|
| 197 |
+
</div>
|
| 198 |
+
</div>
|
| 199 |
+
<button class="opacity-70 hover:opacity-100">
|
| 200 |
+
<i data-feather="more-vertical"></i>
|
| 201 |
+
</button>
|
| 202 |
+
</div>
|
| 203 |
+
<div class="vault-item rounded-lg p-4 flex items-center justify-between">
|
| 204 |
+
<div class="flex items-center space-x-3">
|
| 205 |
+
<i data-feather="music" class="text-secondary"></i>
|
| 206 |
+
<div>
|
| 207 |
+
<h3 class="font-medium">Summer_Vibes.mp3</h3>
|
| 208 |
+
<p class="text-xs opacity-70">Last modified: 1 week ago</p>
|
| 209 |
+
</div>
|
| 210 |
+
</div>
|
| 211 |
+
<button class="opacity-70 hover:opacity-100">
|
| 212 |
+
<i data-feather="more-vertical"></i>
|
| 213 |
+
</button>
|
| 214 |
+
</div>
|
| 215 |
+
<div class="vault-item rounded-lg p-4 flex items-center justify-between">
|
| 216 |
+
<div class="flex items-center space-x-3">
|
| 217 |
+
<i data-feather="file-text" class="text-secondary"></i>
|
| 218 |
+
<div>
|
| 219 |
+
<h3 class="font-medium">Lyrics_Draft.txt</h3>
|
| 220 |
+
<p class="text-xs opacity-70">Last modified: 3 days ago</p>
|
| 221 |
+
</div>
|
| 222 |
+
</div>
|
| 223 |
+
<button class="opacity-70 hover:opacity-100">
|
| 224 |
+
<i data-feather="more-vertical"></i>
|
| 225 |
+
</button>
|
| 226 |
+
</div>
|
| 227 |
+
</div>
|
| 228 |
+
</div>
|
| 229 |
+
</div>
|
| 230 |
+
</div>
|
| 231 |
+
</div>
|
| 232 |
+
|
| 233 |
+
<!-- Bottom Navigation -->
|
| 234 |
+
<div class="fixed bottom-0 left-0 right-0 bg-primary border-t border-accent">
|
| 235 |
+
<div class="container mx-auto px-4 py-3">
|
| 236 |
+
<div class="flex justify-around">
|
| 237 |
+
<a href="index.html" class="flex flex-col items-center opacity-70 hover:opacity-100">
|
| 238 |
+
<i data-feather="home"></i>
|
| 239 |
+
<span class="text-xs mt-1">Home</span>
|
| 240 |
+
</a>
|
| 241 |
+
<a href="charts.html" class="flex flex-col items-center opacity-70 hover:opacity-100">
|
| 242 |
+
<i data-feather="trending-up"></i>
|
| 243 |
+
<span class="text-xs mt-1">Charts</span>
|
| 244 |
+
</a>
|
| 245 |
+
<a href="explore.html" class="flex flex-col items-center opacity-70 hover:opacity-100">
|
| 246 |
+
<i data-feather="compass"></i>
|
| 247 |
+
<span class="text-xs mt-1">Explore</span>
|
| 248 |
+
</a>
|
| 249 |
+
<a href="#" class="flex flex-col items-center text-secondary">
|
| 250 |
+
<i data-feather="user"></i>
|
| 251 |
+
<span class="text-xs mt-1">Profile</span>
|
| 252 |
+
</a>
|
| 253 |
+
</div>
|
| 254 |
+
</div>
|
| 255 |
+
</div>
|
| 256 |
+
|
| 257 |
+
<script>
|
| 258 |
+
feather.replace();
|
| 259 |
+
anime({
|
| 260 |
+
targets: '.waveform',
|
| 261 |
+
scaleX: [0, 1],
|
| 262 |
+
easing: 'easeOutQuad',
|
| 263 |
+
duration: 1000,
|
| 264 |
+
delay: anime.stagger(100)
|
| 265 |
+
});
|
| 266 |
+
|
| 267 |
+
// Tab switching functionality
|
| 268 |
+
const tabs = document.querySelectorAll('.flex button');
|
| 269 |
+
tabs.forEach(tab => {
|
| 270 |
+
tab.addEventListener('click', () => {
|
| 271 |
+
tabs.forEach(t => t.classList.remove('border-b-2', 'border-secondary', 'font-medium'));
|
| 272 |
+
tabs.forEach(t => t.classList.add('opacity-70', 'hover:opacity-100'));
|
| 273 |
+
tab.classList.add('border-b-2', 'border-secondary', 'font-medium');
|
| 274 |
+
tab.classList.remove('opacity-70');
|
| 275 |
+
|
| 276 |
+
// Here you would show/hide the appropriate content sections
|
| 277 |
+
});
|
| 278 |
+
});
|
| 279 |
+
</script>
|
| 280 |
+
</body>
|
| 281 |
+
</html>
|