Hugging Face's logo

Spaces:
nkjoy
/
ktv
Running

App Files Community
nkjoy commited on
Commit
0ebe6e7
·
verified ·
1 Parent(s): 09ee628

이쁜 UI를 자랑하는 앱을 만들어봐 입체감도 넣어주고 ! KTV 만들자 DB연동해서 phpmyadmin 여기에 등록되여 있어 영상파일은 Server: localhost:3306 Database: karaoke Table: music_files id : filename : filepath : extension 여기 이런식으로 등록되여 있어요 이걸 불러다가 카라오케이 어플 만들자! 영상 나오는 파일들이야 ! 노래방이니 예약 시작 등등 이런 버튼들이 있어야 겠지 ? 노래 검색할수 있도록 해줘야지 ! 그리고 버튼들 한국어로 하고 버튼에는 입체감을 더해줘서 이쁘게 만들어 ! 디자인을 좀더 이쁘게 만들어봐 !! - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +373 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Ktv
3
- emoji: ⚡
4
- colorFrom: pink
5
- colorTo: pink
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: ktv
3
+ emoji: 🐳
4
+ colorFrom: red
5
+ colorTo: blue
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,373 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="ko">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>KTV 노래방</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700;900&display=swap');
11
+
12
+ body {
13
+ font-family: 'Noto Sans KR', sans-serif;
14
+ background: linear-gradient(135deg, #1a1a2e, #16213e);
15
+ color: white;
16
+ }
17
+
18
+ .neumorphic-btn {
19
+ background: linear-gradient(145deg, #2a2a3a, #1e1e2e);
20
+ box-shadow: 8px 8px 16px #0f0f17,
21
+ -8px -8px 16px #2f2f47;
22
+ transition: all 0.3s ease;
23
+ }
24
+
25
+ .neumorphic-btn:hover {
26
+ box-shadow: 4px 4px 8px #0f0f17,
27
+ -4px -4px 8px #2f2f47;
28
+ transform: translateY(2px);
29
+ }
30
+
31
+ .neumorphic-btn:active {
32
+ box-shadow: inset 4px 4px 8px #0f0f17,
33
+ inset -4px -4px 8px #2f2f47;
34
+ transform: translateY(4px);
35
+ }
36
+
37
+ .neumorphic-card {
38
+ background: linear-gradient(145deg, #2a2a3a, #1e1e2e);
39
+ box-shadow: 8px 8px 16px #0f0f17,
40
+ -8px -8px 16px #2f2f47;
41
+ border-radius: 15px;
42
+ }
43
+
44
+ .song-card {
45
+ transition: all 0.3s ease;
46
+ transform-style: preserve-3d;
47
+ }
48
+
49
+ .song-card:hover {
50
+ transform: translateY(-5px) scale(1.02);
51
+ box-shadow: 0 15px 30px rgba(0,0,0,0.3);
52
+ }
53
+
54
+ .glow-text {
55
+ text-shadow: 0 0 10px rgba(255, 255, 255, 0.7);
56
+ }
57
+
58
+ .karaoke-display {
59
+ background: linear-gradient(135deg, #000000, #1a1a2e);
60
+ border: 2px solid #4a4a6a;
61
+ box-shadow: 0 0 20px rgba(106, 90, 205, 0.5);
62
+ }
63
+
64
+ .search-input {
65
+ background: rgba(30, 30, 46, 0.7);
66
+ border: 1px solid #4a4a6a;
67
+ box-shadow: inset 4px 4px 8px rgba(0,0,0,0.2);
68
+ }
69
+
70
+ .tab-active {
71
+ background: linear-gradient(145deg, #3a3a5a, #2a2a4a);
72
+ box-shadow: inset 4px 4px 8px rgba(0,0,0,0.3);
73
+ border-bottom: 2px solid #6a5acd;
74
+ }
75
+
76
+ .mic-icon {
77
+ animation: pulse 2s infinite;
78
+ }
79
+
80
+ @keyframes pulse {
81
+ 0% { transform: scale(1); }
82
+ 50% { transform: scale(1.1); }
83
+ 100% { transform: scale(1); }
84
+ }
85
+
86
+ .marquee {
87
+ animation: marquee 20s linear infinite;
88
+ }
89
+
90
+ @keyframes marquee {
91
+ 0% { transform: translateX(100%); }
92
+ 100% { transform: translateX(-100%); }
93
+ }
94
+ </style>
95
+ </head>
96
+ <body class="min-h-screen">
97
+ <div class="container mx-auto px-4 py-8">
98
+ <!-- 헤더 -->
99
+ <header class="flex flex-col items-center mb-8">
100
+ <div class="flex items-center mb-4">
101
+ <i class="fas fa-microphone mic-icon text-4xl text-purple-400 mr-4"></i>
102
+ <h1 class="text-4xl font-bold glow-text text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-pink-600">KTV 노래방</h1>
103
+ </div>
104
+
105
+ <!-- 현재 재생 중인 노래 -->
106
+ <div class="w-full max-w-3xl karaoke-display rounded-lg p-4 mb-6">
107
+ <div class="flex items-center justify-between">
108
+ <div class="flex items-center">
109
+ <div class="w-16 h-16 bg-gray-700 rounded-lg mr-4 overflow-hidden">
110
+ <img id="current-song-thumbnail" src="https://via.placeholder.com/80" alt="노래 썸네일" class="w-full h-full object-cover">
111
+ </div>
112
+ <div>
113
+ <h3 id="current-song-title" class="font-bold text-lg">현재 재생 중인 노래가 없습니다</h3>
114
+ <p id="current-song-artist" class="text-gray-400 text-sm">노래를 선택해주세요</p>
115
+ </div>
116
+ </div>
117
+ <div class="flex items-center space-x-3">
118
+ <button class="neumorphic-btn rounded-full p-3 text-purple-400">
119
+ <i class="fas fa-step-backward"></i>
120
+ </button>
121
+ <button class="neumorphic-btn rounded-full p-4 text-pink-500">
122
+ <i class="fas fa-play"></i>
123
+ </button>
124
+ <button class="neumorphic-btn rounded-full p-3 text-purple-400">
125
+ <i class="fas fa-step-forward"></i>
126
+ </button>
127
+ </div>
128
+ </div>
129
+ <div class="mt-4 relative h-1 bg-gray-700 rounded-full overflow-hidden">
130
+ <div class="absolute top-0 left-0 h-full bg-gradient-to-r from-purple-500 to-pink-500" style="width: 30%;"></div>
131
+ </div>
132
+ </div>
133
+
134
+ <!-- 검색창 -->
135
+ <div class="w-full max-w-2xl relative mb-6">
136
+ <input type="text" id="song-search" placeholder="노래 제목 또는 가수명으로 검색"
137
+ class="search-input w-full py-3 px-5 pr-12 rounded-full text-white focus:outline-none focus:ring-2 focus:ring-purple-500">
138
+ <button class="neumorphic-btn absolute right-2 top-1/2 transform -translate-y-1/2 rounded-full p-2 text-purple-400">
139
+ <i class="fas fa-search"></i>
140
+ </button>
141
+ </div>
142
+
143
+ <!-- 탭 메뉴 -->
144
+ <div class="flex space-x-1 mb-6">
145
+ <button class="neumorphic-btn px-6 py-2 rounded-lg tab-active">인기 차트</button>
146
+ <button class="neumorphic-btn px-6 py-2 rounded-lg">최신 곡</button>
147
+ <button class="neumorphic-btn px-6 py-2 rounded-lg">장르별</button>
148
+ <button class="neumorphic-btn px-6 py-2 rounded-lg">내 리스트</button>
149
+ </div>
150
+ </header>
151
+
152
+ <!-- 메인 콘텐츠 -->
153
+ <main>
154
+ <!-- 노래 목록 -->
155
+ <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6 mb-8" id="song-list">
156
+ <!-- 노래 카드 예시 (실제 데이터는 PHP로 불러옴) -->
157
+ <div class="song-card neumorphic-card p-4 rounded-xl cursor-pointer">
158
+ <div class="relative mb-4 overflow-hidden rounded-lg" style="padding-bottom: 100%;">
159
+ <img src="https://via.placeholder.com/300" alt="노래 이미지" class="absolute w-full h-full object-cover">
160
+ <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-70"></div>
161
+ <div class="absolute bottom-2 left-2">
162
+ <span class="bg-purple-600 text-white text-xs px-2 py-1 rounded">3:45</span>
163
+ </div>
164
+ <button class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-purple-600 bg-opacity-80 rounded-full p-3 text-white">
165
+ <i class="fas fa-play"></i>
166
+ </button>
167
+ </div>
168
+ <h3 class="font-bold text-lg mb-1">노래 제목</h3>
169
+ <p class="text-gray-400 text-sm mb-3">가수 이름</p>
170
+ <div class="flex justify-between items-center">
171
+ <button class="neumorphic-btn px-3 py-1 rounded text-sm text-purple-400">담기</button>
172
+ <div class="flex items-center">
173
+ <i class="fas fa-heart text-pink-500 mr-1"></i>
174
+ <span class="text-xs">1,234</span>
175
+ </div>
176
+ </div>
177
+ </div>
178
+
179
+ <!-- 더 많은 노래 카드들... -->
180
+ <div class="song-card neumorphic-card p-4 rounded-xl cursor-pointer">
181
+ <div class="relative mb-4 overflow-hidden rounded-lg" style="padding-bottom: 100%;">
182
+ <img src="https://via.placeholder.com/300" alt="노래 이미지" class="absolute w-full h-full object-cover">
183
+ <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-70"></div>
184
+ <div class="absolute bottom-2 left-2">
185
+ <span class="bg-purple-600 text-white text-xs px-2 py-1 rounded">4:12</span>
186
+ </div>
187
+ <button class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-purple-600 bg-opacity-80 rounded-full p-3 text-white">
188
+ <i class="fas fa-play"></i>
189
+ </button>
190
+ </div>
191
+ <h3 class="font-bold text-lg mb-1">또 다른 노래</h3>
192
+ <p class="text-gray-400 text-sm mb-3">다른 가수</p>
193
+ <div class="flex justify-between items-center">
194
+ <button class="neumorphic-btn px-3 py-1 rounded text-sm text-purple-400">담기</button>
195
+ <div class="flex items-center">
196
+ <i class="fas fa-heart text-pink-500 mr-1"></i>
197
+ <span class="text-xs">987</span>
198
+ </div>
199
+ </div>
200
+ </div>
201
+
202
+ <div class="song-card neumorphic-card p-4 rounded-xl cursor-pointer">
203
+ <div class="relative mb-4 overflow-hidden rounded-lg" style="padding-bottom: 100%;">
204
+ <img src="https://via.placeholder.com/300" alt="노래 이미지" class="absolute w-full h-full object-cover">
205
+ <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-70"></div>
206
+ <div class="absolute bottom-2 left-2">
207
+ <span class="bg-purple-600 text-white text-xs px-2 py-1 rounded">3:28</span>
208
+ </div>
209
+ <button class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-purple-600 bg-opacity-80 rounded-full p-3 text-white">
210
+ <i class="fas fa-play"></i>
211
+ </button>
212
+ </div>
213
+ <h3 class="font-bold text-lg mb-1">인기 노래</h3>
214
+ <p class="text-gray-400 text-sm mb-3">유명 가수</p>
215
+ <div class="flex justify-between items-center">
216
+ <button class="neumorphic-btn px-3 py-1 rounded text-sm text-purple-400">담기</button>
217
+ <div class="flex items-center">
218
+ <i class="fas fa-heart text-pink-500 mr-1"></i>
219
+ <span class="text-xs">5,678</span>
220
+ </div>
221
+ </div>
222
+ </div>
223
+
224
+ <div class="song-card neumorphic-card p-4 rounded-xl cursor-pointer">
225
+ <div class="relative mb-4 overflow-hidden rounded-lg" style="padding-bottom: 100%;">
226
+ <img src="https://via.placeholder.com/300" alt="노래 이미지" class="absolute w-full h-full object-cover">
227
+ <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-70"></div>
228
+ <div class="absolute bottom-2 left-2">
229
+ <span class="bg-purple-600 text-white text-xs px-2 py-1 rounded">3:55</span>
230
+ </div>
231
+ <button class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-purple-600 bg-opacity-80 rounded-full p-3 text-white">
232
+ <i class="fas fa-play"></i>
233
+ </button>
234
+ </div>
235
+ <h3 class="font-bold text-lg mb-1">신곡 발표</h3>
236
+ <p class="text-gray-400 text-sm mb-3">신인 가수</p>
237
+ <div class="flex justify-between items-center">
238
+ <button class="neumorphic-btn px-3 py-1 rounded text-sm text-purple-400">담기</button>
239
+ <div class="flex items-center">
240
+ <i class="fas fa-heart text-pink-500 mr-1"></i>
241
+ <span class="text-xs">456</span>
242
+ </div>
243
+ </div>
244
+ </div>
245
+ </div>
246
+
247
+ <!-- 예약 및 기능 버튼 -->
248
+ <div class="fixed bottom-0 left-0 right-0 bg-gray-900 bg-opacity-90 backdrop-blur-sm py-4 px-6">
249
+ <div class="container mx-auto flex justify-between items-center">
250
+ <div class="flex items-center space-x-4">
251
+ <button class="neumorphic-btn px-6 py-3 rounded-lg flex items-center">
252
+ <i class="fas fa-calendar-alt mr-2 text-purple-400"></i>
253
+ <span>예약하기</span>
254
+ </button>
255
+ <button class="neumorphic-btn px-6 py-3 rounded-lg flex items-center">
256
+ <i class="fas fa-list-ol mr-2 text-purple-400"></i>
257
+ <span>대기열</span>
258
+ </button>
259
+ </div>
260
+ <div class="flex items-center space-x-4">
261
+ <button class="neumorphic-btn px-6 py-3 rounded-lg flex items-center bg-gradient-to-r from-purple-600 to-pink-600 text-white">
262
+ <i class="fas fa-microphone mr-2"></i>
263
+ <span>노래 부르기</span>
264
+ </button>
265
+ <button class="neumorphic-btn px-6 py-3 rounded-lg flex items-center">
266
+ <i class="fas fa-cog mr-2 text-purple-400"></i>
267
+ <span>설정</span>
268
+ </button>
269
+ </div>
270
+ </div>
271
+ </div>
272
+ </main>
273
+ </div>
274
+
275
+ <!-- PHP 연동을 위한 스크립트 -->
276
+ <script>
277
+ // 노래 검색 기능
278
+ document.getElementById('song-search').addEventListener('input', function(e) {
279
+ const searchTerm = e.target.value.toLowerCase();
280
+ const songCards = document.querySelectorAll('.song-card');
281
+
282
+ songCards.forEach(card => {
283
+ const title = card.querySelector('h3').textContent.toLowerCase();
284
+ const artist = card.querySelector('p').textContent.toLowerCase();
285
+
286
+ if (title.includes(searchTerm) || artist.includes(searchTerm)) {
287
+ card.style.display = 'block';
288
+ } else {
289
+ card.style.display = 'none';
290
+ }
291
+ });
292
+ });
293
+
294
+ // 노래 재생 기능
295
+ document.querySelectorAll('.song-card').forEach(card => {
296
+ card.addEventListener('click', function() {
297
+ const title = this.querySelector('h3').textContent;
298
+ const artist = this.querySelector('p').textContent;
299
+ const thumbnail = this.querySelector('img').src;
300
+
301
+ document.getElementById('current-song-title').textContent = title;
302
+ document.getElementById('current-song-artist').textContent = artist;
303
+ document.getElementById('current-song-thumbnail').src = thumbnail;
304
+
305
+ // 여기에 PHP로 노래 정보를 가져오는 AJAX 요청 추가 가능
306
+ // fetchSongDetails(title, artist);
307
+ });
308
+ });
309
+
310
+ // 실제 애플리케이션에서는 이 함수를 사용하여 PHP로부터 노래 데이터를 가져옵니다
311
+ async function fetchSongs() {
312
+ try {
313
+ const response = await fetch('get_songs.php');
314
+ const songs = await response.json();
315
+
316
+ const songList = document.getElementById('song-list');
317
+ songList.innerHTML = '';
318
+
319
+ songs.forEach(song => {
320
+ const songCard = document.createElement('div');
321
+ songCard.className = 'song-card neumorphic-card p-4 rounded-xl cursor-pointer';
322
+ songCard.innerHTML = `
323
+ <div class="relative mb-4 overflow-hidden rounded-lg" style="padding-bottom: 100%;">
324
+ <img src="${song.thumbnail || 'https://via.placeholder.com/300'}" alt="${song.title}" class="absolute w-full h-full object-cover">
325
+ <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-70"></div>
326
+ <div class="absolute bottom-2 left-2">
327
+ <span class="bg-purple-600 text-white text-xs px-2 py-1 rounded">${song.duration}</span>
328
+ </div>
329
+ <button class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-purple-600 bg-opacity-80 rounded-full p-3 text-white">
330
+ <i class="fas fa-play"></i>
331
+ </button>
332
+ </div>
333
+ <h3 class="font-bold text-lg mb-1">${song.title}</h3>
334
+ <p class="text-gray-400 text-sm mb-3">${song.artist}</p>
335
+ <div class="flex justify-between items-center">
336
+ <button class="neumorphic-btn px-3 py-1 rounded text-sm text-purple-400">담기</button>
337
+ <div class="flex items-center">
338
+ <i class="fas fa-heart text-pink-500 mr-1"></i>
339
+ <span class="text-xs">${song.likes || 0}</span>
340
+ </div>
341
+ </div>
342
+ `;
343
+ songList.appendChild(songCard);
344
+ });
345
+ } catch (error) {
346
+ console.error('노래 목록을 불러오는 중 오류 발생:', error);
347
+ }
348
+ }
349
+
350
+ // 페이지 로드 시 노래 목록 불러오기
351
+ // fetchSongs();
352
+
353
+ // 탭 전환 기능
354
+ document.querySelectorAll('.neumorphic-btn').forEach(btn => {
355
+ btn.addEventListener('click', function() {
356
+ if (this.textContent.trim() === '인기 차트' ||
357
+ this.textContent.trim() === '최신 곡' ||
358
+ this.textContent.trim() === '장르별' ||
359
+ this.textContent.trim() === '내 리스트') {
360
+
361
+ document.querySelectorAll('.neumorphic-btn').forEach(b => {
362
+ if (b !== this) b.classList.remove('tab-active');
363
+ });
364
+ this.classList.add('tab-active');
365
+
366
+ // 여기에 탭에 따른 다른 노래 목록을 불러오는 로직 추가
367
+ // 예: fetchSongsByTab(this.textContent.trim());
368
+ }
369
+ });
370
+ });
371
+ </script>
372
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=nkjoy/ktv" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
373
+ </html>