Spaces:

dmae
/

wedding

Running

App Files Files Community

dmae commited on Apr 15, 2025

Commit

673c4ce

verified ·

1 Parent(s): 6328aca

Add 2 files

Browse files

Files changed (2) hide show

README.md +6 -4
index.html +290 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Wedding
-emoji: 🌖
 colorFrom: purple
-colorTo: yellow
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: wedding
+emoji: 🐳
 colorFrom: purple
+colorTo: blue
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,290 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!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>