Spaces:

nkjoy
/

dday

Running

App Files Files Community

dday / add.html

nkjoy

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

09a8f56 verified 8 months ago

raw

history blame contribute delete

8.49 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>
	<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;
	}
	.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">
	<div class="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">
	<a href="index.html" class="text-3xl love-font text-pink-600 flex items-center">
	<i data-feather="heart" class="mr-2 text-red-500"></i>
	Sweet D-Day
	</a>
	<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>
	</header>

	<!-- Main Content -->
	<main class="flex-1 flex items-center justify-center py-12 px-6">
	<div class="bg-white bg-opacity-90 rounded-2xl p-8 shadow-lg w-full max-w-md" data-aos="zoom-in">
	<h2 class="text-3xl love-font text-center mb-6 gradient-text">
	<i data-feather="plus" class="mr-2"></i>
	새 디데이 추가
	</h2>

	<form class="space-y-6">
	<div>
	<label for="eventName" class="block text-lg love-font text-pink-600 mb-2">이벤트 이름</label>
	<input type="text" id="eventName" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-pink-500 focus:border-pink-500 count-font" placeholder="예: 첫 만남, 100일, 생일">
	</div>

	<div>
	<label for="eventDate" class="block text-lg love-font text-pink-600 mb-2">날짜 선택</label>
	<input type="date" id="eventDate" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-pink-500 focus:border-pink-500 count-font">
	</div>

	<div>
	<label class="block text-lg love-font text-pink-600 mb-2">디자인 선택</label>
	<div class="grid grid-cols-3 gap-3">
	<label class="cursor-pointer">
	<input type="radio" name="design" class="sr-only peer" checked>
	<div class="p-4 rounded-lg border-2 border-transparent peer-checked:border-pink-500 bg-pink-100 flex flex-col items-center">
	<div class="w-8 h-8 rounded-full bg-pink-500 mb-2"></div>
	<span class="count-font text-sm">핑크</span>
	</div>
	</label>
	<label class="cursor-pointer">
	<input type="radio" name="design" class="sr-only peer">
	<div class="p-4 rounded-lg border-2 border-transparent peer-checked:border-purple-500 bg-purple-100 flex flex-col items-center">
	<div class="w-8 h-8 rounded-full bg-purple-500 mb-2"></div>
	<span class="count-font text-sm">퍼플</span>
	</div>
	</label>
	<label class="cursor-pointer">
	<input type="radio" name="design" class="sr-only peer">
	<div class="p-4 rounded-lg border-2 border-transparent peer-checked:border-blue-500 bg-blue-100 flex flex-col items-center">
	<div class="w-8 h-8 rounded-full bg-blue-500 mb-2"></div>
	<span class="count-font text-sm">블루</span>
	</div>
	</label>
	<label class="cursor-pointer">
	<input type="radio" name="design" class="sr-only peer">
	<div class="p-4 rounded-lg border-2 border-transparent peer-checked:border-red-500 bg-red-100 flex flex-col items-center">
	<div class="w-8 h-8 rounded-full bg-red-500 mb-2"></div>
	<span class="count-font text-sm">레드</span>
	</div>
	</label>
	<label class="cursor-pointer">
	<input type="radio" name="design" class="sr-only peer">
	<div class="p-4 rounded-lg border-2 border-transparent peer-checked:border-green-500 bg-green-100 flex flex-col items-center">
	<div class="w-8 h-8 rounded-full bg-green-500 mb-2"></div>
	<span class="count-font text-sm">그린</span>
	</div>
	</label>
	<label class="cursor-pointer">
	<input type="radio" name="design" class="sr-only peer">
	<div class="p-4 rounded-lg border-2 border-transparent peer-checked:border-yellow-500 bg-yellow-100 flex flex-col items-center">
	<div class="w-8 h-8 rounded-full bg-yellow-500 mb-2"></div>
	<span class="count-font text-sm">옐로우</span>
	</div>
	</label>
	</div>
	</div>

	<div class="pt-4">
	<label class="inline-flex items-center">
	<input type="checkbox" class="rounded border-pink-500 text-pink-600 shadow-sm focus:border-pink-500 focus:ring focus:ring-pink-200 focus:ring-opacity-50">
	<span class="ml-2 count-font text-gray-600">프리미엄 디자인 적용</span>
	</label>
	</div>

	<div class="flex space-x-4 pt-4">
	<button type="button" onclick="window.location.href='index.html'" class="flex-1 px-4 py-3 border border-gray-300 rounded-lg count-font hover:bg-gray-100 transition">
	취소
	</button>
	<button type="submit" class="flex-1 px-4 py-3 bg-pink-500 text-white rounded-lg hover:bg-pink-600 transition count-font">
	저장하기
	</button>
	</div>
	</form>
	</div>
	</main>

	<!-- Footer -->
	<footer class="bg-white bg-opacity-80 py-6 px-6">
	<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>
	AOS.init();
	feather.replace();
	</script>
	</body>
	</html>