Spaces:

nkjoy
/

dday

Running

App Files Files Community

dday / index.html

nkjoy

디데이 관리 페이지 만들자. 디데이 등록하면 남은날짜 등등 알려주고 보여주자 디자인은 커플전용이니 알콩달콩 이쁘게. 프리미엄으로 - Initial Deployment

09a8f56 verified 12 months ago

Raw

History Blame Contribute Delete

14.8 kB

	<!DOCTYPE html>
	<html lang="ko">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Sweet D-Day \| 커플을 위한 특별한 디데이</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://unpkg.com/aos@2.3.1/dist/aos.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
	<script src="https://unpkg.com/feather-icons"></script>
	<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
	<style>
	@import url('https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&family=Poor+Story&display=swap');
	.love-font {
	font-family: 'Nanum Pen Script', cursive;
	}
	.count-font {
	font-family: 'Poor Story', cursive;
	}
	.heart-beat {
	animation: heartbeat 1.5s ease-in-out infinite;
	}
	@keyframes heartbeat {
	0% { transform: scale(1); }
	25% { transform: scale(1.1); }
	50% { transform: scale(1); }
	75% { transform: scale(1.1); }
	100% { transform: scale(1); }
	}
	.gradient-text {
	background: linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	}
	</style>
	</head>
	<body class="bg-pink-50">
	<!-- Vanta.js Background -->
	<div id="vanta-bg" class="fixed inset-0 z-0"></div>

	<!-- Main Content -->
	<div class="relative z-10 min-h-screen flex flex-col">
	<!-- Header -->
	<header class="bg-white bg-opacity-80 backdrop-blur-sm shadow-sm py-4 px-6">
	<div class="container mx-auto flex justify-between items-center">
	<h1 class="text-3xl love-font text-pink-600 flex items-center">
	<i data-feather="heart" class="heart-beat mr-2 text-red-500"></i>
	Sweet D-Day
	</h1>
	<div class="flex space-x-4">
	<button class="px-4 py-2 bg-pink-500 text-white rounded-full hover:bg-pink-600 transition flex items-center">
	<i data-feather="plus" class="mr-2"></i>
	새 디데이
	</button>
	<button class="px-4 py-2 bg-gradient-to-r from-pink-500 to-purple-500 text-white rounded-full hover:opacity-90 transition flex items-center">
	<i data-feather="star" class="mr-2"></i>
	프리미엄
	</button>
	</div>
	</div>
	</header>

	<!-- Hero Section -->
	<section class="py-16 px-6 text-center">
	<div class="container mx-auto max-w-4xl" data-aos="fade-up">
	<h2 class="text-5xl love-font mb-6 gradient-text">
	우리의 특별한 날을 기다리며
	</h2>
	<p class="text-xl text-gray-700 mb-8 count-font">
	사랑하는 연인과의 소중한 순간을 기억하고 기다려보세요
	</p>
	<div class="bg-white bg-opacity-80 rounded-2xl p-8 shadow-lg">
	<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
	<div class="bg-pink-100 rounded-xl p-6 flex flex-col items-center">
	<i data-feather="calendar" class="w-12 h-12 text-pink-500 mb-4"></i>
	<h3 class="text-xl love-font text-pink-600 mb-2">디데이 등록</h3>
	<p class="text-gray-600 count-font text-center">특별한 날을 등록하고 카운트다운을 시작하세요</p>
	</div>
	<div class="bg-purple-100 rounded-xl p-6 flex flex-col items-center">
	<i data-feather="clock" class="w-12 h-12 text-purple-500 mb-4"></i>
	<h3 class="text-xl love-font text-purple-600 mb-2">실시간 카운트</h3>
	<p class="text-gray-600 count-font text-center">정확한 시간 단위로 남은 시간을 확인하세요</p>
	</div>
	<div class="bg-red-100 rounded-xl p-6 flex flex-col items-center">
	<i data-feather="gift" class="w-12 h-12 text-red-500 mb-4"></i>
	<h3 class="text-xl love-font text-red-600 mb-2">추억 공유</h3>
	<p class="text-gray-600 count-font text-center">사진과 메모로 추억을 기록하고 공유하세요</p>
	</div>
	</div>
	</div>
	</div>
	</section>

	<!-- D-Day List -->
	<section class="py-12 px-6 flex-1">
	<div class="container mx-auto max-w-6xl">
	<h2 class="text-3xl love-font text-pink-600 mb-8 text-center" data-aos="fade-up">
	<i data-feather="list" class="mr-2"></i>
	우리의 디데이 목록
	</h2>

	<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
	<!-- D-Day Item 1 -->
	<div class="bg-white bg-opacity-90 rounded-2xl p-6 shadow-md hover:shadow-lg transition" data-aos="zoom-in">
	<div class="flex justify-between items-start mb-4">
	<h3 class="text-2xl love-font text-pink-600">첫 만남</h3>
	<span class="bg-pink-100 text-pink-600 px-3 py-1 rounded-full text-sm count-font">D-128</span>
	</div>
	<p class="text-gray-500 count-font mb-4">2023년 5월 20일</p>
	<div class="flex items-center mb-4">
	<div class="w-full bg-gray-200 rounded-full h-2.5">
	<div class="bg-pink-500 h-2.5 rounded-full" style="width: 45%"></div>
	</div>
	<span class="ml-2 text-sm count-font text-gray-500">45%</span>
	</div>
	<div class="grid grid-cols-3 gap-2 text-center count-font">
	<div class="bg-pink-50 p-2 rounded-lg">
	<div class="text-2xl font-bold text-pink-600">128</div>
	<div class="text-xs text-gray-500">일</div>
	</div>
	<div class="bg-pink-50 p-2 rounded-lg">
	<div class="text-2xl font-bold text-pink-600">3</div>
	<div class="text-xs text-gray-500">개월</div>
	</div>
	<div class="bg-pink-50 p-2 rounded-lg">
	<div class="text-2xl font-bold text-pink-600">18</div>
	<div class="text-xs text-gray-500">주</div>
	</div>
	</div>
	<div class="mt-4 pt-4 border-t border-gray-100 flex justify-between">
	<button class="text-pink-500 hover:text-pink-700">
	<i data-feather="edit"></i>
	</button>
	<button class="text-red-500 hover:text-red-700">
	<i data-feather="trash-2"></i>
	</button>
	</div>
	</div>

	<!-- D-Day Item 2 -->
	<div class="bg-white bg-opacity-90 rounded-2xl p-6 shadow-md hover:shadow-lg transition" data-aos="zoom-in" data-aos-delay="100">
	<div class="flex justify-between items-start mb-4">
	<h3 class="text-2xl love-font text-purple-600">100일</h3>
	<span class="bg-purple-100 text-purple-600 px-3 py-1 rounded-full text-sm count-font">D+32</span>
	</div>
	<p class="text-gray-500 count-font mb-4">2023년 8월 27일</p>
	<div class="flex items-center mb-4">
	<div class="w-full bg-gray-200 rounded-full h-2.5">
	<div class="bg-purple-500 h-2.5 rounded-full" style="width: 100%"></div>
	</div>
	<span class="ml-2 text-sm count-font text-gray-500">지난 날</span>
	</div>
	<div class="grid grid-cols-3 gap-2 text-center count-font">
	<div class="bg-purple-50 p-2 rounded-lg">
	<div class="text-2xl font-bold text-purple-600">32</div>
	<div class="text-xs text-gray-500">일</div>
	</div>
	<div class="bg-purple-50 p-2 rounded-lg">
	<div class="text-2xl font-bold text-purple-600">1</div>
	<div class="text-xs text-gray-500">개월</div>
	</div>
	<div class="bg-purple-50 p-2 rounded-lg">
	<div class="text-2xl font-bold text-purple-600">4</div>
	<div class="text-xs text-gray-500">주</div>
	</div>
	</div>
	<div class="mt-4 pt-4 border-t border-gray-100 flex justify-between">
	<button class="text-purple-500 hover:text-purple-700">
	<i data-feather="edit"></i>
	</button>
	<button class="text-red-500 hover:text-red-700">
	<i data-feather="trash-2"></i>
	</button>
	</div>
	</div>

	<!-- Premium D-Day Item -->
	<div class="bg-gradient-to-br from-pink-400 to-purple-500 rounded-2xl p-6 shadow-md hover:shadow-lg transition relative overflow-hidden" data-aos="zoom-in" data-aos-delay="200">
	<div class="absolute top-2 right-2">
	<span class="bg-yellow-100 text-yellow-800 px-2 py-1 rounded-full text-xs count-font flex items-center">
	<i data-feather="star" class="w-3 h-3 mr-1"></i>
	프리미엄
	</span>
	</div>
	<div class="flex justify-between items-start mb-4">
	<h3 class="text-2xl love-font text-white">1주년</h3>
	<span class="bg-white bg-opacity-20 text-white px-3 py-1 rounded-full text-sm count-font">D-237</span>
	</div>
	<p class="text-white text-opacity-80 count-font mb-4">2024년 5월 20일</p>
	<div class="flex items-center mb-4">
	<div class="w-full bg-white bg-opacity-30 rounded-full h-2.5">
	<div class="bg-white h-2.5 rounded-full" style="width: 35%"></div>
	</div>
	<span class="ml-2 text-sm count-font text-white text-opacity-80">35%</span>
	</div>
	<div class="grid grid-cols-3 gap-2 text-center count-font">
	<div class="bg-white bg-opacity-20 p-2 rounded-lg">
	<div class="text-2xl font-bold text-white">237</div>
	<div class="text-xs text-white text-opacity-80">일</div>
	</div>
	<div class="bg-white bg-opacity-20 p-2 rounded-lg">
	<div class="text-2xl font-bold text-white">7</div>
	<div class="text-xs text-white text-opacity-80">개월</div>
	</div>
	<div class="bg-white bg-opacity-20 p-2 rounded-lg">
	<div class="text-2xl font-bold text-white">33</div>
	<div class="text-xs text-white text-opacity-80">주</div>
	</div>
	</div>
	<div class="mt-4 pt-4 border-t border-white border-opacity-20 flex justify-between">
	<button class="text-white hover:text-white text-opacity-80 hover:text-opacity-100">
	<i data-feather="edit"></i>
	</button>
	<button class="text-white hover:text-white text-opacity-80 hover:text-opacity-100">
	<i data-feather="trash-2"></i>
	</button>
	</div>
	</div>
	</div>
	</div>
	</section>

	<!-- Add D-Day Floating Button -->
	<div class="fixed bottom-8 right-8 z-20">
	<button class="w-16 h-16 bg-pink-500 text-white rounded-full shadow-lg hover:bg-pink-600 transition flex items-center justify-center">
	<i data-feather="plus" class="w-6 h-6"></i>
	</button>
	</div>

	<!-- Footer -->
	<footer class="bg-white bg-opacity-80 py-6 px-6 mt-12">
	<div class="container mx-auto text-center">
	<p class="text-gray-600 count-font">
	<i data-feather="heart" class="inline w-4 h-4 text-red-500"></i>
	Sweet D-Day - 커플을 위한 특별한 디데이 관리 서비스
	</p>
	</div>
	</footer>
	</div>

	<script>
	// Initialize Vanta.js
	VANTA.GLOBE({
	el: "#vanta-bg",
	mouseControls: true,
	touchControls: true,
	gyroControls: false,
	minHeight: 200.00,
	minWidth: 200.00,
	scale: 1.00,
	scaleMobile: 1.00,
	color: 0xff9a9e,
	backgroundColor: 0xfff1f2,
	size: 0.8
	});

	// Initialize AOS
	AOS.init({
	duration: 800,
	easing: 'ease-in-out',
	once: true
	});

	// Initialize Feather Icons
	feather.replace();
	</script>
	</body>
	</html>