Spaces:

nkjoy
/

toxj

Running

App Files Files Community

toxj / sing.html

nkjoy

관리자 페이지 하나 만들어줘

5bd04d0 verified 6 months ago

raw

history blame contribute delete

18.6 kB

	<?php
	// sing.php — 노래 부르기 (그누보드/단독 실행 겸용)
	if (file_exists(__DIR__.'/_common.php')) {
	include_once __DIR__.'/_common.php';
	$g5['title'] = '노래 부르기 - 새터민들의 쉼터';
	}
	?>
	<!DOCTYPE html>
	<html lang="ko">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>노래 부르기 - 새터민들의 쉼터</title>
	<link rel="icon" type="image/x-icon" href="/static/favicon.ico" />
	<script src="https://cdn.tailwindcss.com"></script>
	<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet" />
	<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
	<style>
	.glass-effect {
	background: rgba(255, 255, 255, 0.15);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-radius: 20px;
	border: 1px solid rgba(255, 255, 255, 0.18);
	box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
	}
	.gradient-bg {
	background: linear-gradient(135deg, #ff6b6b 0%, #4ecdc4 100%);
	}
	.sparkle-btn {
	position: relative;
	overflow: hidden;
	transition: all 0.3s ease;
	}
	.sparkle-btn:hover { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(0,0,0,.3); }
	.sparkle-btn::after {
	content:""; position:absolute; top:-50%; left:-50%; width:200%; height:200%;
	background: rgba(255,255,255,0.2); transform: rotate(30deg); transition: all .3s ease;
	}
	.sparkle-btn:hover::after { left:100%; top:100%; }
	.lyrics-display {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	border-radius: 15px; padding: 30px; min-height: 300px;
	display: flex; align-items: center; justify-content: center;
	font-size: 1.2rem; line-height: 2; text-align: center;
	}
	.karaoke-mic { animation: pulse 2s infinite; }
	@keyframes pulse { 0%{transform:scale(1)} 50%{transform:scale(1.1)} 100%{transform:scale(1)} }
	.video-container { position:relative; padding-bottom:56.25%; height:0; overflow:hidden; border-radius: 15px; }
	.video-container iframe { position:absolute; top:0; left:0; width:100%; height:100%; }
	</style>
	</head>
	<body class="min-h-screen gradient-bg text-white">
	<header class="relative z-10 py-6">
	<div class="container mx-auto px-4">
	<div class="flex justify-between items-center">
	<div class="flex items-center">
	<i data-feather="home" class="mr-2"></i>
	<h1 class="text-2xl font-bold">새터민들의 쉼터</h1>
	</div>
	<nav class="hidden md:block">
	<ul class="flex space-x-8">
	<li><a href="index.php" class="hover:text-yellow-200 transition">쉼터 홈</a></li>
	<li><a href="purpose.php" class="hover:text-yellow-200 transition">설립목적</a></li>
	<li><a href="terms.php" class="hover:text-yellow-200 transition">이용약관</a></li>
	<li><a href="charter.php" class="hover:text-yellow-200 transition">정관</a></li>
	<li><a href="team.php" class="hover:text-yellow-200 transition">운영진</a></li>
	<li><a href="karaoke.php" class="hover:text-yellow-200 transition">노래방</a></li>
	<li><a href="sing.php" class="hover:text-yellow-200 transition font-bold">노래 부르기</a></li>
	</ul>
	</nav>
	<button class="md:hidden" aria-label="메뉴">
	<i data-feather="menu"></i>
	</button>
	</div>
	</div>
	</header>

	<main class="relative z-10 py-12">
	<section class="container mx-auto px-4 mb-16">
	<div class="glass-effect max-w-6xl mx-auto p-8 text-center" data-aos="fade-up">
	<div class="flex items-center justify-center mb-6">
	<i data-feather="mic" class="w-12 h-12 text-pink-400 karaoke-mic mr-4"></i>
	<h1 class="text-4xl font-bold">노래 부르기</h1>
	</div>
	<p class="text-xl mb-8">마이크를 잡고 자유롭게 노래하세요! 예약 시스템으로 편리하게 이용할 수 있습니다</p>
	</div>
	</section>

	<section class="container mx-auto px-4 mb-16">
	<div class="grid lg:grid-cols-2 gap-12">
	<!-- 노래 재생 화면 -->
	<div class="glass-effect p-8 rounded-xl" data-aos="fade-right">
	<h2 class="text-2xl font-bold mb-6 text-center">노래 재생 화면</h2>

	<div class="video-container mb-6">
	<iframe
	src="https://www.youtube.com/embed/dQw4w9WgXcQ"
	title="노래 영상"
	frameborder="0"
	allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
	referrerpolicy="strict-origin-when-cross-origin"
	allowfullscreen></iframe>
	</div>

	<div class="bg-white/10 rounded-lg p-4">
	<div class="flex justify-between items-center mb-2">
	<span class="text-sm">0:00</span>
	<span class="text-sm">3:45</span>
	</div>
	<div class="w-full bg-gray-600 rounded-full h-2">
	<div class="bg-pink-500 h-2 rounded-full" style="width: 35%"></div>
	</div>
	</div>

	<div class="flex justify-center space-x-4 mb-6">
	<button type="button" class="sparkle-btn bg-gray-600 text-white p-3 rounded-full" aria-label="이전">
	<i data-feather="skip-back" class="w-6 h-6"></i>
	</button>
	<button type="button" class="sparkle-btn bg-pink-600 text-white p-4 rounded-full" aria-label="재생">
	<i data-feather="play" class="w-8 h-8"></i>
	</button>
	<button type="button" class="sparkle-btn bg-gray-600 text-white p-3 rounded-full" aria-label="다음">
	<i data-feather="skip-forward" class="w-6 h-6"></i>
	</button>
	</div>

	<div class="bg-white/10 rounded-lg p-4">
	<div class="flex justify-between items-center mb-2">
	<span class="text-sm">0:00</span>
	<span class="text-sm">3:45</span>
	</div>
	<div class="w-full bg-gray-600 rounded-full h-2">
	<div class="bg-pink-500 h-2 rounded-full" style="width: 35%"></div>
	</div>
	</div>
	</div>

	<!-- 예약 시스템 -->
	<div class="glass-effect p-8 rounded-xl" data-aos="fade-left">
	<h2 class="text-3xl font-bold mb-6 text-center">예약 목록</h2>

	<div class="mb-8">
	<h3 class="text-xl font-semibold mb-4">예약 현황</h3>
	<div class="space-y-3">
	<div class="flex justify-between items-center bg-white/10 p-3 rounded-lg">
	<div>
	<span class="font-semibold">18:00 - 18:30</span>
	<span class="text-sm ml-2">김철수</span>
	</div>
	<span class="text-green-300">예약 완료</span>
	</div>
	<div class="flex justify-between items-center bg-white/10 p-3 rounded-lg">
	<div>
	<span class="font-semibold">18:30 - 19:00</span>
	<span class="text-sm ml-2">이영희</span>
	</div>
	<span class="text-green-300">예약 완료</span>
	</div>
	<div class="flex justify-between items-center bg-white/10 p-3 rounded-lg">
	<div>
	<span class="font-semibold">19:00 - 19:30</span>
	<span class="text-sm ml-2">-</span>
	</div>
	<span class="text-yellow-300">예약 가능</span>
	</div>
	<div class="flex justify-between items-center bg-white/10 p-3 rounded-lg">
	<div>
	<span class="font-semibold">19:30 - 20:00</span>
	<span class="text-sm ml-2">-</span>
	</div>
	<span class="text-yellow-300">예약 가능</span>
	</div>
	</div>
	</div>

	<div class="text-center">
	<button type="button" class="sparkle-btn bg-pink-500 text-white px-6 py-3 rounded-lg font-semibold">
	내 예약 확인하기
	</button>
	</div>
	</div>
	</div>
	</section>

	<section class="container mx-auto px-4">
	<div class="glass-effect p-8 rounded-xl">
	<h2 class="text-3xl font-bold text-center mb-8">노래 검색 및 선택</h2>

	<div class="mb-8">
	<div class="relative">
	<i data-feather="search" class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"></i>
	<input type="text" placeholder="노래 제목 또는 가수명으로 검색..."
	class="w-full glass-effect border border-white/20 rounded-lg pl-10 pr-4 py-3 focus:outline-none focus:ring-2 focus:ring-pink-400" />
	</div>
	</div>

	<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-4">
	<!-- 카드 1 -->
	<div class="glass-effect p-4 rounded-lg hover:bg-white/20 transition">
	<div class="flex items-start gap-3">
	<i data-feather="music" class="w-6 h-6 mt-1 text-pink-400"></i>
	<div class="flex-1">
	<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
	<div>
	<h4 class="font-semibold leading-tight">아리랑</h4>
	<p class="text-sm text-gray-300">-</p>
	</div>
	<button type="button"
	class="sparkle-btn w-full sm:w-auto inline-flex items-center justify-center gap-2 bg-red-500 text-white px-4 py-2 rounded-lg font-semibold">
	<span aria-hidden="true">🎤</span>
	<span>예약하기</span>
	</button>
	</div>
	</div>
	</div>
	</div>

	<!-- 카드 2 -->
	<div class="glass-effect p-4 rounded-lg hover:bg-white/20 transition">
	<div class="flex items-start gap-3">
	<i data-feather="music" class="w-6 h-6 mt-1 text-blue-400"></i>
	<div class="flex-1">
	<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
	<div>
	<h4 class="font-semibold leading-tight">진달래꽃</h4>
	<p class="text-sm text-gray-300">김정남</p>
	</div>
	<button type="button"
	class="sparkle-btn w-full sm:w-auto inline-flex items-center justify-center gap-2 bg-red-500 text-white px-4 py-2 rounded-lg font-semibold">
	<span aria-hidden="true">🎤</span>
	<span>예약하기</span>
	</button>
	</div>
	</div>
	</div>
	</div>

	<!-- 카드 3 -->
	<div class="glass-effect p-4 rounded-lg hover:bg-white/20 transition">
	<div class="flex items-start gap-3">
	<i data-feather="music" class="w-6 h-6 mt-1 text-green-400"></i>
	<div class="flex-1">
	<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
	<div>
	<h4 class="font-semibold leading-tight">님과 함께</h4>
	<p class="text-sm text-gray-300">김광석</p>
	</div>
	<button type="button"
	class="sparkle-btn w-full sm:w-auto inline-flex items-center justify-center gap-2 bg-red-500 text-white px-4 py-2 rounded-lg font-semibold">
	<span aria-hidden="true">🎤</span>
	<span>예약하기</span>
	</button>
	</div>
	</div>
	</div>
	</div>

	<!-- 카드 4 -->
	<div class="glass-effect p-4 rounded-lg hover:bg-white/20 transition">
	<div class="flex items-start gap-3">
	<i data-feather="music" class="w-6 h-6 mt-1 text-purple-400"></i>
	<div class="flex-1">
	<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
	<div>
	<h4 class="font-semibold leading-tight">사랑하기 때문에</h4>
	<p class="text-sm text-gray-300">유재하</p>
	</div>
	<button type="button"
	class="sparkle-btn w-full sm:w-auto inline-flex items-center justify-center gap-2 bg-red-500 text-white px-4 py-2 rounded-lg font-semibold">
	<span aria-hidden="true">🎤</span>
	<span>예약하기</span>
	</button>
	</div>
	</div>
	</div>
	</div>

	<!-- 카드 5 -->
	<div class="glass-effect p-4 rounded-lg hover:bg-white/20 transition">
	<div class="flex items-start gap-3">
	<i data-feather="music" class="w-6 h-6 mt-1 text-yellow-400"></i>
	<div class="flex-1">
	<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
	<div>
	<h4 class="font-semibold leading-tight">동백아가씨</h4>
	<p class="text-sm text-gray-300">심수봉</p>
	</div>
	<button type="button"
	class="sparkle-btn w-full sm:w-auto inline-flex items-center justify-center gap-2 bg-red-500 text-white px-4 py-2 rounded-lg font-semibold">
	<span aria-hidden="true">🎤</span>
	<span>예약하기</span>
	</button>
	</div>
	</div>
	</div>
	</div>

	<!-- 카드 6 -->
	<div class="glass-effect p-4 rounded-lg hover:bg-white/20 transition">
	<div class="flex items-start gap-3">
	<i data-feather="music" class="w-6 h-6 mt-1 text-red-400"></i>
	<div class="flex-1">
	<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
	<div>
	<h4 class="font-semibold leading-tight">비 내리는 고모령</h4>
	<p class="text-sm text-gray-300">남진</p>
	</div>
	<button type="button"
	class="sparkle-btn w-full sm:w-auto inline-flex items-center justify-center gap-2 bg-red-500 text-white px-4 py-2 rounded-lg font-semibold">
	<span aria-hidden="true">🎤</span>
	<span>예약하기</span>
	</button>
	</div>
	</div>
	</div>
	</div>
	</div>


	<div class="text-center mt-8">
	<button type="button" class="sparkle-btn bg-pink-500 text-white px-8 py-3 rounded-lg font-semibold">
	더 많은 노래 보기
	</button>
	</div>
	</div>
	</section>
	</main>

	<footer class="relative z-10 py-8 mt-16 glass-effect">
	<div class="container mx-auto px-4">
	<div class="flex flex-col md:flex-row justify-between items-center">
	<div class="mb-6 md:mb-0">
	<h2 class="text-xl font-bold flex items-center">
	<i data-feather="home" class="mr-2"></i> 새터민들의 쉼터
	</h2>
	<p class="mt-2 text-sm">함께하는 새로운 시작</p>
	</div>
	<div class="flex space-x-6">
	<a href="#" class="hover:text-yellow-200 transition" aria-label="Facebook"><i data-feather="facebook"></i></a>
	<a href="#" class="hover:text-yellow-200 transition" aria-label="Twitter"><i data-feather="twitter"></i></a>
	<a href="#" class="hover:text-yellow-200 transition" aria-label="Instagram"><i data-feather="instagram"></i></a>
	<a href="#" class="hover:text-yellow-200 transition" aria-label="Mail"><i data-feather="mail"></i></a>
	</div>
	</div>
	<div class="border-t border-gray-700 mt-8 pt-8 text-center text-sm">
	<p>© <?php echo date('Y'); ?> 새터민들의 쉼터. All rights reserved.</p>
	</div>
	</div>
	</footer>

	<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
	<script>
	document.addEventListener('DOMContentLoaded', function(){
	if (window.AOS) AOS.init({ duration: 800, easing: 'ease-in-out', once: true });
	if (window.feather) feather.replace();
	});
	</script>
	</body>
	</html>