Hugging Face's logo

Spaces:
dmae
/
wedding
Running

App Files Community
wedding / index.html
dmae's picture
dmae
Add 2 files
673c4ce verified
raw
history blame contribute delete
13.6 kB
<!DOCTYPE html>
<html lang="ko">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>유근빈 ❀ μ „μ°¬μš° κ²°ν˜Όμ‹ 청첩μž₯</title>
 <script src="https://cdn.tailwindcss.com"></script>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
 <style>
 @import url('https://fonts.googleapis.com/css2?family=Nanum+Myeongjo:wght@400;700;800&family=Noto+Serif+KR:wght@300;400;500;600;700&display=swap');
body {
 font-family: 'Noto Serif KR', serif;
 background-color: #faf6f2;
 color: #5a4a3f;
 overflow-x: hidden;
 }
.title-font {
 font-family: 'Nanum Myeongjo', serif;
 }
.heart-animation {
 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); }
 }
.floating {
 animation: floating 3s ease-in-out infinite;
 }
@keyframes floating {
 0% { transform: translateY(0px); }
 50% { transform: translateY(-15px); }
 100% { transform: translateY(0px); }
 }
.petal {
 position: absolute;
 background-size: contain;
 background-repeat: no-repeat;
 opacity: 0.7;
 animation: falling linear infinite;
 z-index: 0;
 }
@keyframes falling {
 0% {
 transform: translate(0, -10vh) rotate(0deg);
 opacity: 0;
 }
 10% {
 opacity: 1;
 }
 90% {
 opacity: 1;
 }
 100% {
 transform: translate(calc(var(--random-x) * 1vw), 100vh) rotate(360deg);
 opacity: 0;
 }
 }
.envelope {
 position: relative;
 background: #f8e8e0;
 border-radius: 8px;
 box-shadow: 0 10px 30px rgba(0,0,0,0.1);
 transition: all 0.3s ease;
 }
.envelope:before {
 content: '';
 position: absolute;
 top: 0;
 right: 0;
 border-width: 0 40px 40px 0;
 border-style: solid;
 border-color: #e8d5cc transparent;
 border-radius: 0 8px 0 0;
 }
.envelope:hover {
 transform: translateY(-5px);
 box-shadow: 0 15px 35px rgba(0,0,0,0.15);
 }
.gold-text {
 background: linear-gradient(to right, #d4af37, #f9d423, #d4af37);
 -webkit-background-clip: text;
 background-clip: text;
 color: transparent;
 }
 </style>
</head>
<body class="relative overflow-x-hidden">
 <!-- νŽ˜νƒˆ μ• λ‹ˆλ©”μ΄μ…˜ -->
 <div id="petals-container"></div>
<!-- 메인 μ»¨ν…Œμ΄λ„ˆ -->
 <div class="max-w-md mx-auto px-4 py-8 relative z-10">
 <!-- 헀더 -->
 <div class="text-center mb-12">
 <div class="text-sm gold-text font-medium mb-2">WEDDING INVITATION</div>
 <h1 class="title-font text-4xl font-bold mb-4 text-rose-800">유근빈 & μ „μ°¬μš°</h1>
 <div class="flex justify-center items-center">
 <div class="w-16 h-px bg-rose-300"></div>
 <div class="mx-4 text-rose-500 heart-animation"><i class="fas fa-heart"></i></div>
 <div class="w-16 h-px bg-rose-300"></div>
 </div>
 <p class="mt-4 text-sm">2025λ…„ 4μ›” 16일 μ˜€ν›„ 1μ‹œ 30λΆ„</p>
 <p class="text-sm">κ·Έλžœλ“œ 힐튼 ν˜Έν…” 3μΈ΅ ν¬λ¦¬μŠ€νƒˆ λ³Όλ£Έ</p>
 </div>
<!-- 메인 이미지 -->
 <div class="relative mb-12 rounded-xl overflow-hidden shadow-lg">
 <div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent z-10"></div>
 <img src="https://images.unsplash.com/photo-1519225421980-715cb0215aed?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="μ»€ν”Œ 사진" class="w-full h-80 object-cover">
 <div class="absolute bottom-0 left-0 right-0 p-6 z-20 text-white text-center">
 <p class="text-sm mb-1">μ„œλ‘œλ₯Ό λ§Œλ‚œ 지 1,825일째</p>
 <h2 class="title-font text-2xl font-bold">우리의 μ‚¬λž‘μ΄ κ½ƒν”ΌλŠ” λ‚ </h2>
 </div>
 </div>
<!-- 인사말 -->
 <div class="envelope p-8 mb-12">
 <h3 class="title-font text-xl font-bold mb-6 text-center text-rose-700">μ΄ˆλŒ€μ˜ 말씀</h3>
 <div class="text-sm leading-relaxed text-center">
 <p class="mb-4">μ‚¬λž‘ν•˜λŠ” κ°€μ‘±κ³Ό 친ꡬ μ—¬λŸ¬λΆ„</p>
 <p class="mb-4">저희 두 μ‚¬λžŒμ΄ μ„œλ‘œμ˜ λ§ˆμŒμ„ ν™•μΈν•˜κ³ <br>ν•¨κ»˜ 인생을 κ±Έμ–΄κ°€κΈ°λ‘œ κ²°μ‹¬ν–ˆμŠ΅λ‹ˆλ‹€.</p>
 <p class="mb-4">였랜 μ‹œκ°„ 저희λ₯Ό μ•„κ»΄μ£Όμ‹œκ³  μ‚¬λž‘ν•΄μ£Όμ‹  μ—¬λŸ¬λΆ„κ»˜<br>이 μ†Œμ€‘ν•œ 자리λ₯Ό ν•¨κ»˜ ν•˜μ‹œμ–΄<br>μ €ν¬μ˜ μƒˆλ‘œμš΄ μΆœλ°œμ„ 좕볡해 μ£Όμ‹œλ©΄ κ°μ‚¬ν•˜κ² μŠ΅λ‹ˆλ‹€.</p>
 <p>유근빈 Β· μ „μ°¬μš° λ“œλ¦Ό</p>
 </div>
 </div>
<!-- κ²°ν˜Όμ‹ 정보 -->
 <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-12">
 <div class="envelope p-6 text-center">
 <div class="text-rose-600 mb-3"><i class="fas fa-calendar-alt text-2xl"></i></div>
 <h4 class="title-font font-bold mb-2">λ‚ μ§œμ™€ μ‹œκ°„</h4>
 <p class="text-sm">2025λ…„ 4μ›” 16일</p>
 <p class="text-sm">μ˜€ν›„ 1μ‹œ 30λΆ„</p>
 </div>
<div class="envelope p-6 text-center">
 <div class="text-rose-600 mb-3"><i class="fas fa-map-marker-alt text-2xl"></i></div>
 <h4 class="title-font font-bold mb-2">μž₯μ†Œ</h4>
 <p class="text-sm">κ·Έλžœλ“œ 힐튼 ν˜Έν…”</p>
 <p class="text-sm">3μΈ΅ ν¬λ¦¬μŠ€νƒˆ λ³Όλ£Έ</p>
 <button onclick="openMap()" class="mt-2 text-xs text-rose-500 underline">지도 보기</button>
 </div>
 </div>
<!-- 가러리 -->
 <div class="mb-12">
 <h3 class="title-font text-xl font-bold mb-6 text-center text-rose-700">우리의 μΆ”μ–΅</h3>
 <div class="grid grid-cols-3 gap-2">
 <div class="rounded-lg overflow-hidden h-24 bg-rose-100 flex items-center justify-center">
 <i class="fas fa-image text-rose-300 text-xl"></i>
 </div>
 <div class="rounded-lg overflow-hidden h-24 bg-amber-100 flex items-center justify-center">
 <i class="fas fa-image text-amber-300 text-xl"></i>
 </div>
 <div class="rounded-lg overflow-hidden h-24 bg-sky-100 flex items-center justify-center">
 <i class="fas fa-image text-sky-300 text-xl"></i>
 </div>
 <div class="rounded-lg overflow-hidden h-24 bg-emerald-100 flex items-center justify-center">
 <i class="fas fa-image text-emerald-300 text-xl"></i>
 </div>
 <div class="rounded-lg overflow-hidden h-24 bg-violet-100 flex items-center justify-center">
 <i class="fas fa-image text-violet-300 text-xl"></i>
 </div>
 <div class="rounded-lg overflow-hidden h-24 bg-pink-100 flex items-center justify-center">
 <i class="fas fa-image text-pink-300 text-xl"></i>
 </div>
 </div>
 </div>
<!-- 참석 μ˜μ‚¬ -->
 <div class="envelope p-8 mb-12">
 <h3 class="title-font text-xl font-bold mb-6 text-center text-rose-700">참석 μ˜μ‚¬ 전달</h3>
 <div class="flex justify-center space-x-4">
 <button onclick="rsvp(true)" class="px-6 py-2 bg-rose-600 text-white rounded-full text-sm hover:bg-rose-700 transition">μ°Έμ„ν•©λ‹ˆλ‹€</button>
 <button onclick="rsvp(false)" class="px-6 py-2 bg-gray-300 text-gray-700 rounded-full text-sm hover:bg-gray-400 transition">λΆˆμ°Έν•©λ‹ˆλ‹€</button>
 </div>
 </div>
<!-- μΆ•ν•˜ λ©”μ‹œμ§€ -->
 <div class="envelope p-8 mb-12">
 <h3 class="title-font text-xl font-bold mb-6 text-center text-rose-700">μΆ•ν•˜ λ©”μ‹œμ§€</h3>
 <textarea class="w-full p-3 border border-rose-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-rose-300 mb-4" rows="3" placeholder="μ‹ λž‘ μ‹ λΆ€μ—κ²Œ μΆ•ν•˜μ˜ 말을 λ‚¨κ²¨μ£Όμ„Έμš”"></textarea>
 <button class="w-full py-2 bg-rose-600 text-white rounded-lg text-sm hover:bg-rose-700 transition">λ©”μ‹œμ§€ 보내기</button>
 </div>
<!-- 마무리 -->
 <div class="text-center mb-12">
 <div class="floating inline-block mb-6">
 <img src="https://cdn-icons-png.flaticon.com/512/7437/7437891.png" alt="웨딩 벨" class="w-16 h-16">
 </div>
 <h3 class="title-font text-2xl font-bold mb-4 gold-text">ν•¨κ»˜ν•΄ μ£Όμ…”μ„œ κ°μ‚¬ν•©λ‹ˆλ‹€</h3>
 <p class="text-sm">μ—¬λŸ¬λΆ„μ˜ λ”°λœ»ν•œ 좕볡이<br>μ €ν¬μ˜ μ•žλ‚ μ„ λ”μš± λΉ›λ‚˜κ²Œ ν•  κ²ƒμž…λ‹ˆλ‹€.</p>
 </div>
 </div>
<!-- ν”Œλ‘œνŒ… λ²„νŠΌ -->
 <div class="fixed bottom-6 right-6 z-20">
 <button onclick="playMusic()" class="w-12 h-12 rounded-full bg-rose-600 text-white shadow-lg flex items-center justify-center hover:bg-rose-700 transition">
 <i id="music-icon" class="fas fa-music"></i>
 </button>
 </div>
<script>
 // νŽ˜νƒˆ μ• λ‹ˆλ©”μ΄μ…˜ 생성
 function createPetals() {
 const container = document.getElementById('petals-container');
 const petalCount = 15;
for (let i = 0; i < petalCount; i++) {
 const petal = document.createElement('div');
 petal.className = 'petal';
// λžœλ€ν•œ νŽ˜νƒˆ 이미지 선택 (μ‹€μ œ κ΅¬ν˜„μ—μ„œλŠ” 이미지 URL둜 λ³€κ²½)
 const petalTypes = ['🌸', '🌹', '🌺', '🌻', '🌼', '🏡️'];
 const randomPetal = petalTypes[Math.floor(Math.random() * petalTypes.length)];
 petal.textContent = randomPetal;
// 랜덀 μœ„μΉ˜ 및 μ• λ‹ˆλ©”μ΄μ…˜ μ„€μ •
 const size = Math.random() * 20 + 10;
 petal.style.fontSize = `${size}px`;
 petal.style.left = `${Math.random() * 100}vw`;
 petal.style.top = `-${size}px`;
 petal.style.setProperty('--random-x', Math.random() * 20 - 10);
 petal.style.animationDuration = `${Math.random() * 5 + 5}s`;
 petal.style.animationDelay = `${Math.random() * 5}s`;
container.appendChild(petal);
 }
 }
// 지도 μ—΄κΈ°
 function openMap() {
 alert("지도 앱이 μ—΄λ¦½λ‹ˆλ‹€. κ·Έλžœλ“œ 힐튼 ν˜Έν…” μœ„μΉ˜λ₯Ό ν‘œμ‹œν•©λ‹ˆλ‹€.");
 // μ‹€μ œ κ΅¬ν˜„μ—μ„œλŠ” window.location.href = "지도링크"; 둜 λ³€κ²½
 }
// 참석 μ˜μ‚¬ 처리
 function rsvp(attending) {
 if (attending) {
 alert("참석 μ˜μ‚¬λ₯Ό μ•Œλ €μ£Όμ…”μ„œ κ°μ‚¬ν•©λ‹ˆλ‹€! 기쁜 마음으둜 κΈ°λ‹€λ¦¬κ² μŠ΅λ‹ˆλ‹€.");
 } else {
 alert("μ•„μ‰½μ§€λ§Œ λ‹€μŒμ— κΌ­ 롐 수 있기λ₯Ό λ°”λžλ‹ˆλ‹€. κ°μ‚¬ν•©λ‹ˆλ‹€.");
 }
 }
// μŒμ•… μž¬μƒ
 let isPlaying = false;
 function playMusic() {
 isPlaying = !isPlaying;
 const icon = document.getElementById('music-icon');
if (isPlaying) {
 icon.classList.remove('fa-music');
 icon.classList.add('fa-pause');
 alert("웨딩 μŒμ•…μ΄ μž¬μƒλ©λ‹ˆλ‹€. (μ‹€μ œ κ΅¬ν˜„μ—μ„œλŠ” μ˜€λ””μ˜€ μž¬μƒ μ½”λ“œλ‘œ λ³€κ²½)");
 } else {
 icon.classList.remove('fa-pause');
 icon.classList.add('fa-music');
 alert("μŒμ•…μ΄ μ •μ§€λ˜μ—ˆμŠ΅λ‹ˆλ‹€.");
 }
 }
// νŽ˜μ΄μ§€ λ‘œλ“œ μ‹œ νŽ˜νƒˆ 생성
 window.onload = function() {
 createPetals();
// 3초 후에 μžλ™μœΌλ‘œ νŽ˜νƒˆ μΆ”κ°€ 생성
 setTimeout(() => {
 createPetals();
 }, 3000);
 };
 </script>
<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=dmae/wedding" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>