Hugging Face's logo

Spaces:
astro-coder
/
deepsite-project
Running

App Files Community
astro-coder commited on
Commit
53da700
·
verified ·
1 Parent(s): f9d9ff6

use the uploaded image as background.I want a side bar with animations

Browse files
Files changed (1) hide show
  1. index.html +147 -16
index.html CHANGED
@@ -10,10 +10,13 @@
10
  <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
  <script src="https://unpkg.com/feather-icons"></script>
12
  <style>
13
- .gradient-bg {
14
- background: linear-gradient(135deg, #ec4899 0%, #8b5cf6 100%);
 
 
 
15
  }
16
- .glass-effect {
17
  background: rgba(255, 255, 255, 0.1);
18
  backdrop-filter: blur(10px);
19
  border: 1px solid rgba(255, 255, 255, 0.2);
@@ -22,26 +25,131 @@
22
  transform: translateY(-5px);
23
  transition: transform 0.3s ease;
24
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
25
  </style>
26
  </head>
27
  <body class="gradient-bg min-h-screen text-white">
28
- <!-- Navigation -->
29
- <nav class="glass-effect p-4 sticky top-0 z-50">
30
- <div class="container mx-auto flex justify-between items-center">
 
31
  <div class="flex items-center space-x-2">
32
  <i data-feather="music" class="w-8 h-8"></i>
33
  <h1 class="text-2xl font-bold">MusiQue</h1>
34
  </div>
35
- <div class="flex space-x-4">
36
- <a href="#" class="hover:text-pink-200">Home</a>
37
- <a href="#library" class="hover:text-pink-200">Library</a>
38
- <a href="#downloads" class="hover:text-pink-200">Downloads</a>
39
- <a href="#ai" class="hover:text-pink-200">AI Assistant</a>
40
- </div>
41
  </div>
42
- </nav>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
43
 
44
- <!-- Hero Section -->
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
45
  <section class="container mx-auto px-4 py-16 text-center">
46
  <h2 class="text-5xl font-bold mb-4">Stream Millions of Songs</h2>
47
  <p class="text-xl mb-8">AI-powered music discovery with offline download capabilities</p>
@@ -181,13 +289,36 @@ Generate
181
  </div>
182
  </div>
183
  </div>
184
-
185
  <script>
186
  // Initialize feather icons
187
  feather.replace();
188
 
189
- // Basic music player functionality
190
  document.addEventListener('DOMContentLoaded', function() {
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
191
  const playButtons = document.querySelectorAll('.music-card button:first-child');
192
  const audioPlayer = document.getElementById('audioPlayer');
193
 
 
10
  <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
  <script src="https://unpkg.com/feather-icons"></script>
12
  <style>
13
+ body {
14
+ background-image: url('/static/uploaded-background.jpg');
15
+ background-size: cover;
16
+ background-position: center;
17
+ background-attachment: fixed;
18
  }
19
+ .glass-effect {
20
  background: rgba(255, 255, 255, 0.1);
21
  backdrop-filter: blur(10px);
22
  border: 1px solid rgba(255, 255, 255, 0.2);
 
25
  transform: translateY(-5px);
26
  transition: transform 0.3s ease;
27
  }
28
+ .sidebar {
29
+ position: fixed;
30
+ top: 0;
31
+ left: -300px;
32
+ width: 300px;
33
+ height: 100vh;
34
+ background: rgba(139, 92, 246, 0.9);
35
+ backdrop-filter: blur(10px);
36
+ transition: left 0.4s cubic-bezier(0.4, 0, 0.2, 1);
37
+ z-index: 1000;
38
+ overflow-y: auto;
39
+ }
40
+ .sidebar.active {
41
+ left: 0;
42
+ }
43
+ .sidebar-overlay {
44
+ position: fixed;
45
+ top: 0;
46
+ left: 0;
47
+ width: 100%;
48
+ height: 100%;
49
+ background: rgba(0, 0, 0, 0.5);
50
+ z-index: 999;
51
+ opacity: 0;
52
+ visibility: hidden;
53
+ transition: all 0.3s ease;
54
+ }
55
+ .sidebar-overlay.active {
56
+ opacity: 1;
57
+ visibility: visible;
58
+ }
59
+ .sidebar-header {
60
+ padding: 2rem 1.5rem;
61
+ border-bottom: 1px solid rgba(255, 255, 255, 0.2);
62
+ }
63
+ .sidebar-menu {
64
+ padding: 1rem 0;
65
+ }
66
+ .sidebar-menu a {
67
+ display: flex;
68
+ align-items: center;
69
+ padding: 1rem 1.5rem;
70
+ color: white;
71
+ text-decoration: none;
72
+ transition: background 0.3s ease;
73
+ }
74
+ .sidebar-menu a:hover {
75
+ background: rgba(255, 255, 255, 0.1);
76
+ }
77
+ .sidebar-menu i {
78
+ margin-right: 1rem;
79
+ width: 20px;
80
+ }
81
+ .menu-toggle {
82
+ background: none;
83
+ border: none;
84
+ color: white;
85
+ cursor: pointer;
86
+ padding: 0.5rem;
87
+ }
88
  </style>
89
  </head>
90
  <body class="gradient-bg min-h-screen text-white">
91
+ <!-- Sidebar -->
92
+ <div class="sidebar-overlay" id="sidebarOverlay"></div>
93
+ <aside class="sidebar" id="sidebar">
94
+ <div class="sidebar-header">
95
  <div class="flex items-center space-x-2">
96
  <i data-feather="music" class="w-8 h-8"></i>
97
  <h1 class="text-2xl font-bold">MusiQue</h1>
98
  </div>
 
 
 
 
 
 
99
  </div>
100
+ <nav class="sidebar-menu">
101
+ <a href="#" class="active">
102
+ <i data-feather="home"></i>
103
+ <span>Home</span>
104
+ </a>
105
+ <a href="#library">
106
+ <i data-feather="headphones"></i>
107
+ <span>Library</span>
108
+ </a>
109
+ <a href="#downloads">
110
+ <i data-feather="download"></i>
111
+ <span>Downloads</span>
112
+ </a>
113
+ <a href="#ai">
114
+ <i data-feather="cpu"></i>
115
+ <span>AI Assistant</span>
116
+ </a>
117
+ <a href="#">
118
+ <i data-feather="heart"></i>
119
+ <span>Favorites</span>
120
+ </a>
121
+ <a href="#">
122
+ <i data-feather="clock"></i>
123
+ <span>Recently Played</span>
124
+ </a>
125
+ <a href="#">
126
+ <i data-feather="settings"></i>
127
+ <span>Settings</span>
128
+ </a>
129
+ </nav>
130
+ </aside>
131
 
132
+ <!-- Navigation -->
133
+ <nav class="glass-effect p-4 sticky top-0 z-50">
134
+ <div class="container mx-auto flex justify-between items-center">
135
+ <div class="flex items-center space-x-4">
136
+ <button class="menu-toggle" id="menuToggle">
137
+ <i data-feather="menu" class="w-6 h-6"></i>
138
+ </button>
139
+ <div class="flex items-center space-x-2">
140
+ <i data-feather="music" class="w-8 h-8"></i>
141
+ <h1 class="text-2xl font-bold">MusiQue</h1>
142
+ </div>
143
+ </div>
144
+ <div class="hidden md:flex space-x-4">
145
+ <a href="#" class="hover:text-pink-200">Home</a>
146
+ <a href="#library" class="hover:text-pink-200">Library</a>
147
+ <a href="#downloads" class="hover:text-pink-200">Downloads</a>
148
+ <a href="#ai" class="hover:text-pink-200">AI Assistant</a>
149
+ </div>
150
+ </div>
151
+ </nav>
152
+ <!-- Hero Section -->
153
  <section class="container mx-auto px-4 py-16 text-center">
154
  <h2 class="text-5xl font-bold mb-4">Stream Millions of Songs</h2>
155
  <p class="text-xl mb-8">AI-powered music discovery with offline download capabilities</p>
 
289
  </div>
290
  </div>
291
  </div>
 
292
  <script>
293
  // Initialize feather icons
294
  feather.replace();
295
 
296
+ // Sidebar functionality with animations
297
  document.addEventListener('DOMContentLoaded', function() {
298
+ const sidebar = document.getElementById('sidebar');
299
+ const sidebarOverlay = document.getElementById('sidebarOverlay');
300
+ const menuToggle = document.getElementById('menuToggle');
301
+
302
+ // Toggle sidebar
303
+ function toggleSidebar() {
304
+ sidebar.classList.toggle('active');
305
+ sidebarOverlay.classList.toggle('active');
306
+ }
307
+
308
+ menuToggle.addEventListener('click', toggleSidebar);
309
+ sidebarOverlay.addEventListener('click', toggleSidebar);
310
+
311
+ // Close sidebar when clicking on a link (for mobile)
312
+ const sidebarLinks = document.querySelectorAll('.sidebar-menu a');
313
+ sidebarLinks.forEach(link => {
314
+ link.addEventListener('click', function() {
315
+ if (window.innerWidth < 768) {
316
+ toggleSidebar();
317
+ }
318
+ });
319
+ });
320
+
321
+ // Basic music player functionality
322
  const playButtons = document.querySelectorAll('.music-card button:first-child');
323
  const audioPlayer = document.getElementById('audioPlayer');
324