Spaces:

SaitBurak
/

simalsaitwedding

Running

App Files Files

xet

Community

SaitBurak commited on Aug 19

Commit

5e1be77

verified ·

1 Parent(s): 48f39f7

undefined - Initial Deployment

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +1141 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Simalsaitwedding
-emoji: 🐨
-colorFrom: pink
-colorTo: green
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: simalsaitwedding
+emoji: 🐳
+colorFrom: blue
+colorTo: red
 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,1141 @@
-<!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="tr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>💕 Düğünümüz 💕</title>
+    <!-- EmailJS CDN REMOVED - Not needed anymore -->
+    <!-- <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@emailjs/browser@4/dist/email.min.js"></script> -->
+    <!-- Google Fonts -->
+    <link href="https://fonts.googleapis.com/css2?family=Great+Vibes&family=Playfair+Display:wght@400;600;700&family=Inter:wght@300;400;500&display=swap" rel="stylesheet">
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        body {
+            font-family: 'Inter', sans-serif;
+            background:
+                radial-gradient(circle at 20% 50%, rgba(255, 182, 193, 0.3) 0%, transparent 50%),
+                radial-gradient(circle at 80% 20%, rgba(255, 192, 203, 0.3) 0%, transparent 50%),
+                radial-gradient(circle at 40% 80%, rgba(221, 160, 221, 0.2) 0%, transparent 50%),
+                linear-gradient(135deg, #ffeef8 0%, #f8f0ff 25%, #fff0f5 50%, #faf0e6 75%, #f0f8ff 100%);
+            min-height: 100vh;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            position: relative;
+            overflow-x: hidden;
+        }
+        /* Floating hearts animation */
+        .floating-hearts {
+            position: fixed;
+            width: 100%;
+            height: 100%;
+            overflow: hidden;
+            pointer-events: none;
+            z-index: 1;
+        }
+        .heart {
+            position: absolute;
+            font-size: 20px;
+            color: rgba(255, 182, 193, 0.4);
+            animation: float 8s infinite linear;
+        }
+        @keyframes float {
+            0% {
+                transform: translateY(100vh) rotate(0deg);
+                opacity: 0;
+            }
+            10% {
+                opacity: 1;
+            }
+            90% {
+                opacity: 1;
+            }
+            100% {
+                transform: translateY(-100px) rotate(360deg);
+                opacity: 0;
+            }
+        }
+        .container {
+            background: rgba(255, 255, 255, 0.95);
+            backdrop-filter: blur(20px);
+            border-radius: 30px;
+            box-shadow:
+                0 25px 50px rgba(0,0,0,0.1),
+                0 0 0 1px rgba(255,255,255,0.2);
+            max-width: 650px;
+            width: 90%;
+            padding: 60px 50px;
+            text-align: center;
+            position: relative;
+            z-index: 10;
+            border: 2px solid rgba(255, 192, 203, 0.2);
+        }
+        .container::before {
+            content: '';
+            position: absolute;
+            top: -2px;
+            left: -2px;
+            right: -2px;
+            bottom: -2px;
+            background: linear-gradient(45deg, #ff69b4, #dda0dd, #ffc0cb, #f0e68c);
+            border-radius: 32px;
+            z-index: -1;
+        }
+        .main-title {
+            font-family: 'Great Vibes', cursive;
+            color: #d4395b;
+            margin-bottom: 20px;
+            font-size: 4rem;
+            font-weight: 400;
+            text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
+            position: relative;
+        }
+        .subtitle {
+            font-family: 'Playfair Display', serif;
+            color: #8b4b7a;
+            margin-bottom: 40px;
+            font-size: 1.3rem;
+            font-weight: 400;
+            letter-spacing: 2px;
+        }
+        .decorative-line {
+            width: 200px;
+            height: 2px;
+            background: linear-gradient(90deg, transparent, #dda0dd, transparent);
+            margin: 20px auto;
+            position: relative;
+        }
+        .decorative-line::before,
+        .decorative-line::after {
+            content: '🌸';
+            position: absolute;
+            top: -10px;
+            font-size: 20px;
+        }
+        .decorative-line::before {
+            left: -15px;
+        }
+        .decorative-line::after {
+            right: -15px;
+        }
+        .main-options {
+            display: flex;
+            flex-direction: column;
+            gap: 25px;
+            margin: 40px 0;
+        }
+        .option-btn {
+            background: linear-gradient(135deg, #ff69b4 0%, #dda0dd 50%, #ffc0cb 100%);
+            color: white;
+            border: none;
+            padding: 25px 30px;
+            border-radius: 20px;
+            font-family: 'Playfair Display', serif;
+            font-size: 1.3rem;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+            position: relative;
+            overflow: hidden;
+            box-shadow: 0 8px 25px rgba(255, 105, 180, 0.3);
+            text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
+        }
+        .option-btn::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: -100%;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
+            transition: left 0.6s;
+        }
+        .option-btn:hover::before {
+            left: 100%;
+        }
+        .option-btn:hover {
+            transform: translateY(-8px);
+            box-shadow: 0 15px 35px rgba(255, 105, 180, 0.4);
+            background: linear-gradient(135deg, #ff1493 0%, #ba55d3 50%, #ff69b4 100%);
+        }
+        .attendance-section, .memory-section, .media-section {
+            display: none;
+            animation: slideIn 0.6s ease;
+        }
+        @keyframes slideIn {
+            from {
+                opacity: 0;
+                transform: translateY(30px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+        .section-title {
+            font-family: 'Playfair Display', serif;
+            color: #d4395b;
+            font-size: 2.2rem;
+            font-weight: 600;
+            margin-bottom: 30px;
+            position: relative;
+        }
+        .attendance-options {
+            display: flex;
+            flex-direction: column;
+            gap: 20px;
+            margin: 30px 0;
+        }
+        .attendance-btn {
+            background: rgba(255, 255, 255, 0.9);
+            border: 3px solid transparent;
+            background-clip: padding-box;
+            color: #8b4b7a;
+            padding: 20px 25px;
+            border-radius: 15px;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            font-family: 'Playfair Display', serif;
+            font-size: 1.2rem;
+            font-weight: 500;
+            position: relative;
+            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
+        }
+        .attendance-btn::before {
+            content: '';
+            position: absolute;
+            top: -3px;
+            left: -3px;
+            right: -3px;
+            bottom: -3px;
+            background: linear-gradient(45deg, #ff69b4, #dda0dd, #ffc0cb);
+            border-radius: 18px;
+            z-index: -1;
+            opacity: 0;
+            transition: opacity 0.3s ease;
+        }
+        .attendance-btn:hover::before,
+        .attendance-btn.selected::before {
+            opacity: 1;
+        }
+        .attendance-btn:hover,
+        .attendance-btn.selected {
+            color: white;
+            background: linear-gradient(135deg, #ff69b4, #dda0dd);
+            transform: translateY(-3px);
+            box-shadow: 0 10px 25px rgba(255, 105, 180, 0.3);
+        }
+        .form-section {
+            display: none;
+            margin-top: 30px;
+            animation: fadeInUp 0.5s ease;
+        }
+        .form-section.show {
+            display: block;
+        }
+        @keyframes fadeInUp {
+            from {
+                opacity: 0;
+                transform: translateY(20px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+        .form-group {
+            margin: 25px 0;
+            text-align: left;
+        }
+        .form-group label {
+            display: block;
+            margin-bottom: 8px;
+            color: #8b4b7a;
+            font-family: 'Playfair Display', serif;
+            font-weight: 600;
+            font-size: 1.1rem;
+        }
+        .form-group input, .form-group textarea {
+            width: 100%;
+            padding: 15px 20px;
+            border: 2px solid #f0c2d4;
+            border-radius: 12px;
+            font-size: 1rem;
+            font-family: 'Inter', sans-serif;
+            background: rgba(255, 255, 255, 0.8);
+            transition: all 0.3s ease;
+            resize: vertical;
+        }
+        .form-group textarea {
+            min-height: 120px;
+            line-height: 1.6;
+        }
+        .form-group input:focus, .form-group textarea:focus {
+            outline: none;
+            border-color: #ff69b4;
+            background: rgba(255, 255, 255, 1);
+            box-shadow: 0 0 20px rgba(255, 105, 180, 0.2);
+        }
+        /* Media Upload Styles */
+        .media-intro {
+            background: linear-gradient(135deg, #e3f2fd, #f3e5f5);
+            padding: 25px;
+            border-radius: 15px;
+            margin: 25px 0;
+            border: 2px solid rgba(63, 81, 181, 0.2);
+            text-align: left;
+        }
+        .media-intro h4 {
+            color: #1565c0;
+            font-family: 'Playfair Display', serif;
+            font-size: 1.3rem;
+            margin-bottom: 10px;
+        }
+        .media-intro p {
+            color: #1565c0;
+            font-size: 1rem;
+            line-height: 1.5;
+            margin-bottom: 10px;
+        }
+        .file-upload-area {
+            border: 3px dashed #dda0dd;
+            border-radius: 15px;
+            padding: 40px;
+            text-align: center;
+            background: rgba(221, 160, 221, 0.05);
+            transition: all 0.3s ease;
+            cursor: pointer;
+            position: relative;
+            margin: 25px 0;
+        }
+        .file-upload-area:hover {
+            border-color: #ff69b4;
+            background: rgba(255, 105, 180, 0.1);
+            transform: translateY(-2px);
+        }
+        .file-upload-area.dragover {
+            border-color: #ff69b4;
+            background: rgba(255, 105, 180, 0.1);
+            transform: scale(1.02);
+        }
+        #fileInput {
+            display: none;
+        }
+        .upload-icon {
+            font-size: 4rem;
+            color: #dda0dd;
+            margin-bottom: 20px;
+        }
+        .upload-text {
+            font-family: 'Playfair Display', serif;
+            font-size: 1.3rem;
+            color: #8b4b7a;
+            margin-bottom: 10px;
+        }
+        .upload-subtext {
+            color: #8b4b7a;
+            font-size: 1rem;
+            opacity: 0.8;
+        }
+        .file-preview-container {
+            display: none;
+            margin: 25px 0;
+            text-align: left;
+        }
+        .file-preview-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+            gap: 15px;
+            margin: 20px 0;
+        }
+        .file-preview-item {
+            position: relative;
+            border-radius: 12px;
+            overflow: hidden;
+            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
+            background: white;
+        }
+        .file-preview-item img, .file-preview-item video {
+            width: 100%;
+            height: 120px;
+            object-fit: cover;
+            border-radius: 8px;
+        }
+        .file-preview-item .file-info {
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.7);
+            color: white;
+            padding: 8px;
+            font-size: 0.8rem;
+        }
+        .remove-file {
+            position: absolute;
+            top: 5px;
+            right: 5px;
+            background: rgba(220, 53, 69, 0.9);
+            color: white;
+            border: none;
+            border-radius: 50%;
+            width: 25px;
+            height: 25px;
+            font-size: 12px;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+        .file-size-info {
+            background: linear-gradient(135deg, #fff3cd, #ffeaa7);
+            border: 2px solid #ffc107;
+            padding: 15px;
+            border-radius: 10px;
+            margin: 20px 0;
+            color: #856404;
+            font-size: 0.9rem;
+        }
+        .submit-btn {
+            background: linear-gradient(135deg, #28a745, #20c997, #17a2b8);
+            color: white;
+            border: none;
+            padding: 18px 40px;
+            border-radius: 15px;
+            font-family: 'Playfair Display', serif;
+            font-size: 1.2rem;
+            font-weight: 600;
+            cursor: pointer;
+            margin-top: 30px;
+            transition: all 0.3s ease;
+            box-shadow: 0 8px 20px rgba(40, 167, 69, 0.3);
+        }
+        .submit-btn:hover {
+            transform: translateY(-3px);
+            box-shadow: 0 12px 30px rgba(40, 167, 69, 0.4);
+            background: linear-gradient(135deg, #218838, #17a2b8, #138496);
+        }
+        .submit-btn:disabled {
+            background: #d6d8db;
+            cursor: not-allowed;
+            transform: none;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+        }
+        .back-btn {
+            background: rgba(108, 117, 125, 0.1);
+            color: #6c757d;
+            border: 2px solid #dee2e6;
+            padding: 12px 25px;
+            border-radius: 10px;
+            cursor: pointer;
+            margin-top: 25px;
+            font-family: 'Inter', sans-serif;
+            font-weight: 500;
+            transition: all 0.3s ease;
+        }
+        .back-btn:hover {
+            background: #6c757d;
+            color: white;
+            border-color: #6c757d;
+        }
+        .loading {
+            display: none;
+            margin-top: 20px;
+        }
+        .spinner {
+            border: 4px solid rgba(255, 105, 180, 0.2);
+            border-top: 4px solid #ff69b4;
+            border-radius: 50%;
+            width: 40px;
+            height: 40px;
+            animation: spin 1s linear infinite;
+            margin: 0 auto 15px;
+        }
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+        .loading p {
+            color: #8b4b7a;
+            font-family: 'Playfair Display', serif;
+            font-style: italic;
+        }
+        .success-message {
+            display: none;
+            background: linear-gradient(135deg, #d4edda, #c3e6cb);
+            color: #155724;
+            padding: 30px;
+            border-radius: 20px;
+            margin-top: 20px;
+            border: 2px solid #c3e6cb;
+            animation: celebrationPulse 0.6s ease;
+        }
+        .error-message {
+            display: none;
+            background: linear-gradient(135deg, #f8d7da, #f1b0b7);
+            color: #721c24;
+            padding: 30px;
+            border-radius: 20px;
+            margin-top: 20px;
+            border: 2px solid #f1b0b7;
+        }
+        .message-title {
+            font-family: 'Playfair Display', serif;
+            font-size: 1.5rem;
+            font-weight: 600;
+            margin-bottom: 10px;
+        }
+        @keyframes celebrationPulse {
+            0%, 100% { transform: scale(1); }
+            50% { transform: scale(1.05); }
+        }
+        .memory-intro {
+            background: linear-gradient(135deg, #e8f5e8, #f0fff0);
+            padding: 25px;
+            border-radius: 15px;
+            margin: 25px 0;
+            border: 2px solid rgba(40, 167, 69, 0.2);
+            text-align: left;
+        }
+        .memory-intro h4 {
+            color: #155724;
+            font-family: 'Playfair Display', serif;
+            font-size: 1.3rem;
+            margin-bottom: 10px;
+        }
+        .memory-intro p {
+            color: #155724;
+            font-size: 1rem;
+            line-height: 1.5;
+        }
+        @media (max-width: 768px) {
+            .container {
+                padding: 40px 30px;
+                margin: 20px;
+            }
+            .main-title {
+                font-size: 3rem;
+            }
+            .subtitle {
+                font-size: 1.1rem;
+                letter-spacing: 1px;
+            }
+            .option-btn {
+                font-size: 1.1rem;
+                padding: 20px 25px;
+            }
+            .section-title {
+                font-size: 1.8rem;
+            }
+            .file-upload-area {
+                padding: 30px 20px;
+            }
+            .upload-icon {
+                font-size: 3rem;
+            }
+        }
+        @media (max-width: 480px) {
+            .main-title {
+                font-size: 2.5rem;
+            }
+            .container {
+                padding: 30px 20px;
+            }
+            .file-preview-grid {
+                grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
+            }
+            .file-preview-item img, .file-preview-item video {
+                height: 80px;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="floating-hearts" id="hearts"></div>
+    <div class="container">
+        <h1 class="main-title">Düğünümüz</h1>
+        <p class="subtitle">Özel Günümüzü Paylaşın</p>
+        <div class="decorative-line"></div>
+        <div id="mainMenu" class="main-options">
+            <button class="option-btn" onclick="showAttendance()">
+                💌 Katılım Bildireceğim
+            </button>
+            <button class="option-btn" onclick="showMediaUpload()">
+                📷 Foto/Video Yükleyeceğim
+            </button>
+            <button class="option-btn" onclick="showMemories()">
+                💝 Anı Bırakacağım
+            </button>
+        </div>
+        <!-- Attendance Section -->
+        <div id="attendanceSection" class="attendance-section">
+            <h2 class="section-title">💕 Katılım Durumunuz</h2>
+            <div class="attendance-options">
+                <button class="attendance-btn" onclick="selectAttendance('attending')">
+                    ✨ Katılacağım
+                </button>
+                <button class="attendance-btn" onclick="selectAttendance('not-attending')">
+                    💔 Maalesef gelemeyeceğim
+                </button>
+            </div>
+            <div id="attendingForm" class="form-section">
+                <div class="form-group">
+                    <label for="guestName">💫 Adınız Soyadınız:</label>
+                    <input type="text" id="guestName" placeholder="Adınızı ve soyadınızı yazın..." required>
+                </div>
+                <div class="form-group">
+                    <label for="guestCount">👥 Kaç kişi katılacaksınız?</label>
+                    <input type="number" id="guestCount" min="1" max="10" value="1" required>
+                </div>
+            </div>
+            <div id="submitSection" class="form-section">
+                <button class="submit-btn" onclick="submitAttendance()" id="submitBtn">
+                    💌 Gönder
+                </button>
+                <div class="loading" id="loading">
+                    <div class="spinner"></div>
+                    <p>Mesajınız gönderiliyor...</p>
+                </div>
+            </div>
+            <button class="back-btn" onclick="goBack()">← Ana Menüye Dön</button>
+        </div>
+        <!-- Media Upload Section -->
+        <div id="mediaSection" class="media-section">
+            <h2 class="section-title">📷 Foto/Video Paylaşın</h2>
+            <div class="media-intro">
+                <h4>📸 Anılarınızı Bizimle Paylaşın</h4>
+                <p>Birlikte çektiğimiz fotoğrafları, videolar ve özel anları bizimle paylaşabilirsiniz! Düğün albümümüze katkıda bulunun. 💕</p>
+                <p><strong>⚠️ Dosya Limitleri:</strong> Fotoğraflar max 5MB, videolar max 25MB. JPEG, PNG, MP4, MOV formatları desteklenir.</p>
+            </div>
+            <div class="form-section show">
+                <div class="form-group">
+                    <label for="mediaCaption">💫 Fotoğraf/Video Açıklaması (İsteğe bağlı):</label>
+                    <textarea
+                        id="mediaCaption"
+                        placeholder="Bu fotoğraf/video hakkında kısa bir açıklama yazabilirsiniz..."
+                        maxlength="500"
+                    ></textarea>
+                    <small style="color: #8b4b7a; font-style: italic;">En fazla 500 karakter</small>
+                </div>
+                <div class="file-upload-area" onclick="document.getElementById('fileInput').click()">
+                    <div class="upload-icon">📷</div>
+                    <div class="upload-text">Dosya Seç veya Buraya Sürükle</div>
+                    <div class="upload-subtext">Fotoğraf: JPEG, PNG (max 5MB)<br>Video: MP4, MOV (max 25MB)</div>
+                    <input
+                        type="file"
+                        id="fileInput"
+                        accept="image/jpeg,image/png,video/mp4,video/quicktime"
+                        multiple
+                    >
+                </div>
+                <div class="file-size-info">
+                    <!-- Updated message -->
+                    <strong>📋 Bilgi:</strong> Form artık dosyaları doğrudan sunucuya göndermektedir.
+                </div>
+                <div id="filePreviewContainer" class="file-preview-container">
+                    <h4>📁 Seçilen Dosyalar:</h4>
+                    <div id="filePreviewGrid" class="file-preview-grid"></div>
+                </div>
+                <button class="submit-btn" onclick="submitMedia()" id="mediaSubmitBtn">
+                    📷 Dosyaları Gönder
+                </button>
+                <div class="loading" id="mediaLoading">
+                    <div class="spinner"></div>
+                    <p>Dosyalarınız gönderiliyor...</p>
+                </div>
+            </div>
+            <button class="back-btn" onclick="goBackFromMedia()">← Ana Menüye Dön</button>
+        </div>
+        <!-- Memory Section - GÜNCELLENMİŞ -->
+        <div id="memorySection" class="memory-section">
+            <h2 class="section-title">💝 Anı Bırakın</h2>
+            <div class="memory-intro">
+                <h4>✨ Özel Anılarınızı Paylaşın</h4>
+                <p>Bu özel günümüzde, sizinle paylaştığımız güzel anıları, iyi dileklerinizi veya bizim için yazdığınız özel mesajları bırakabilirsiniz. Her anınız bizim için değerli! 💕</p>
+            </div>
+            <div class="form-section show">
+                <!-- YENİ: İsim alanı eklendi -->
+                <div class="form-group">
+                    <label for="memoryName">💫 Adınız:</label>
+                    <input type="text" id="memoryName" placeholder="Adınızı yazın..." required maxlength="100">
+                </div>
+                <div class="form-group">
+                    <label for="memoryText">💭 Anınızı, dileğinizi veya mesajınızı yazın:</label>
+                    <textarea
+                        id="memoryText"
+                        placeholder="Sizinle paylaştığımız güzel anıları, iyi dileklerinizi veya özel mesajınızı buraya yazabilirsiniz..."
+                        required
+                        maxlength="1000"
+                    ></textarea>
+                    <small style="color: #8b4b7a; font-style: italic;">En fazla 1000 karakter</small>
+                </div>
+                <button class="submit-btn" onclick="submitMemory()" id="memorySubmitBtn">
+                    💝 Anımı Gönder
+                </button>
+                <div class="loading" id="memoryLoading">
+                    <div class="spinner"></div>
+                    <p>Anınız gönderiliyor...</p>
+                </div>
+            </div>
+            <button class="back-btn" onclick="goBackFromMemory()">← Ana Menüye Dön</button>
+        </div>
+        <div id="successMessage" class="success-message">
+            <h3 class="message-title">🎉 Harika! Teşekkürler!</h3>
+            <p>Bilgileriniz başarıyla gönderildi. Düğün detayları için yakında sizinle iletişime geçeceğiz. Özel günümüzde yanımızda olacağınız için çok mutluyuz! 💕</p>
+        </div>
+        <div id="memorySuccessMessage" class="success-message">
+            <h3 class="message-title">💝 Çok Teşekkürler!</h3>
+            <p>Güzel anınız ve mesajınız bizlere ulaştı! Bu özel paylaşımınız için çok teşekkür ederiz. Düğünümüzde anılarınızı sizinle birlikte kutlayacağız! ✨💕</p>
+        </div>
+        <div id="mediaSuccessMessage" class="success-message">
+            <h3 class="message-title">📷 Harika!</h3>
+            <p>Fotoğraf ve videolarınız başarıyla gönderildi! Bu özel anıları bizimle paylaştığınız için çok teşekkür ederiz. Düğün albümümüzü daha da güzel yaptınız! 🎉💕</p>
+        </div>
+        <div id="errorMessage" class="error-message">
+            <h3 class="message-title">😔 Bir Hata Oluştu</h3>
+            <p>Mesajınız gönderilirken bir sorun yaşandı. Lütfen tekrar deneyiniz veya bizimle doğrudan iletişime geçin.</p>
+        </div>
+    </div>
+    <script>
+        // EmailJS initialization REMOVED
+        // emailjs.init({
+        //     publicKey: '6QyIx9pDuv0DaUy39', // Your EmailJS public key
+        // });
+        let selectedAttendance = null;
+        let selectedFiles = [];
+        // Create floating hearts
+        function createHearts() {
+            const heartsContainer = document.getElementById('hearts');
+            const heartSymbols = ['💕', '💖', '💗', '🌸', '🌺', '🦋'];
+            setInterval(() => {
+                const heart = document.createElement('div');
+                heart.className = 'heart';
+                heart.innerHTML = heartSymbols[Math.floor(Math.random() * heartSymbols.length)];
+                heart.style.left = Math.random() * 100 + 'vw';
+                heart.style.animationDuration = Math.random() * 3 + 6 + 's';
+                heart.style.opacity = Math.random() * 0.5 + 0.2;
+                heartsContainer.appendChild(heart);
+                setTimeout(() => {
+                    heart.remove();
+                }, 9000);
+            }, 2000);
+        }
+        function showAttendance() {
+            hideAllSections();
+            document.getElementById('attendanceSection').style.display = 'block';
+        }
+        function showMediaUpload() {
+            hideAllSections();
+            document.getElementById('mediaSection').style.display = 'block';
+        }
+        function showMemories() {
+            hideAllSections();
+            document.getElementById('memorySection').style.display = 'block';
+        }
+        function hideAllSections() {
+            document.getElementById('mainMenu').style.display = 'none';
+            document.getElementById('attendanceSection').style.display = 'none';
+            document.getElementById('memorySection').style.display = 'none';
+            document.getElementById('mediaSection').style.display = 'none';
+            // Hide all messages
+            document.getElementById('successMessage').style.display = 'none';
+            document.getElementById('memorySuccessMessage').style.display = 'none';
+            document.getElementById('mediaSuccessMessage').style.display = 'none';
+            document.getElementById('errorMessage').style.display = 'none';
+        }
+        // File Upload Functionality
+        function setupFileUpload() {
+            const fileInput = document.getElementById('fileInput');
+            const fileUploadArea = document.querySelector('.file-upload-area');
+            // File input change event
+            fileInput.addEventListener('change', handleFileSelect);
+            // Drag and drop events
+            fileUploadArea.addEventListener('dragover', (e) => {
+                e.preventDefault();
+                fileUploadArea.classList.add('dragover');
+            });
+            fileUploadArea.addEventListener('dragleave', () => {
+                fileUploadArea.classList.remove('dragover');
+            });
+            fileUploadArea.addEventListener('drop', (e) => {
+                e.preventDefault();
+                fileUploadArea.classList.remove('dragover');
+                const files = Array.from(e.dataTransfer.files);
+                handleFiles(files);
+            });
+        }
+        function handleFileSelect(e) {
+            const files = Array.from(e.target.files);
+            handleFiles(files);
+        }
+        function handleFiles(files) {
+            for (let file of files) {
+                if (validateFile(file)) {
+                    selectedFiles.push(file);
+                }
+            }
+            updateFilePreview();
+        }
+        function validateFile(file) {
+            const allowedImageTypes = ['image/jpeg', 'image/png'];
+            const allowedVideoTypes = ['video/mp4', 'video/quicktime'];
+            const maxImageSize = 5 * 1024 * 1024; // 5MB
+            const maxVideoSize = 25 * 1024 * 1024; // 25MB
+            if (allowedImageTypes.includes(file.type)) {
+                if (file.size > maxImageSize) {
+                    alert(`📸 ${file.name} dosyası çok büyük! Fotoğraflar maximum 5MB olabilir.`);
+                    return false;
+                }
+            } else if (allowedVideoTypes.includes(file.type)) {
+                if (file.size > maxVideoSize) {
+                    alert(`🎥 ${file.name} dosyası çok büyük! Videolar maximum 25MB olabilir.`);
+                    return false;
+                }
+            } else {
+                alert(`❌ ${file.name} desteklenmeyen dosya formatı! Sadece JPEG, PNG, MP4, MOV dosyaları kabul edilir.`);
+                return false;
+            }
+            return true;
+        }
+        function updateFilePreview() {
+            const previewContainer = document.getElementById('filePreviewContainer');
+            const previewGrid = document.getElementById('filePreviewGrid');
+            if (selectedFiles.length === 0) {
+                previewContainer.style.display = 'none';
+                return;
+            }
+            previewContainer.style.display = 'block';
+            previewGrid.innerHTML = '';
+            selectedFiles.forEach((file, index) => {
+                const previewItem = document.createElement('div');
+                previewItem.className = 'file-preview-item';
+                if (file.type.startsWith('image/')) {
+                    const img = document.createElement('img');
+                    img.src = URL.createObjectURL(file);
+                    previewItem.appendChild(img);
+                } else if (file.type.startsWith('video/')) {
+                    const video = document.createElement('video');
+                    video.src = URL.createObjectURL(file);
+                    video.muted = true;
+                    previewItem.appendChild(video);
+                }
+                const fileInfo = document.createElement('div');
+                fileInfo.className = 'file-info';
+                fileInfo.innerHTML = `${file.name}<br>${(file.size / 1024 / 1024).toFixed(2)} MB`;
+                previewItem.appendChild(fileInfo);
+                const removeBtn = document.createElement('button');
+                removeBtn.className = 'remove-file';
+                removeBtn.innerHTML = '×';
+                removeBtn.onclick = () => removeFile(index);
+                previewItem.appendChild(removeBtn);
+                previewGrid.appendChild(previewItem);
+            });
+        }
+        function removeFile(index) {
+            selectedFiles.splice(index, 1);
+            updateFilePreview();
+        }
+        // --- UPDATED SUBMIT FUNCTIONS ---
+        // --- IMPORTANT: Change this URL to your deployed backend URL when you deploy ---
+        // const BACKEND_URL = 'http://localhost:8000'; // For local testing
+        const BACKEND_URL = 'https://weddingapp-vhr5.onrender.com'; // Change to your backend URL
+        async function submitMedia() {
+            const submitBtn = document.getElementById('mediaSubmitBtn');
+            const loading = document.getElementById('mediaLoading');
+            const successMessage = document.getElementById('mediaSuccessMessage');
+            const errorMessage = document.getElementById('errorMessage');
+            const mediaCaption = document.getElementById('mediaCaption').value.trim();
+            if (selectedFiles.length === 0) {
+                alert('📷 Lütfen en az bir dosya seçin.');
+                return;
+            }
+            // Show loading state
+            submitBtn.disabled = true;
+            submitBtn.textContent = '📷 Gönderiliyor...';
+            loading.style.display = 'block';
+            try {
+                // Create FormData object to send files and text data
+                const formData = new FormData();
+                if (mediaCaption) { // Only append caption if it exists
+                    formData.append('caption', mediaCaption); // Append text data
+                }
+                selectedFiles.forEach(file => {
+                    formData.append('mediaFiles', file); // Append each file
+                });
+                const response = await fetch(`${BACKEND_URL}/api/media`, {
+                    method: 'POST',
+                    body: formData // Send FormData (automatically sets Content-Type: multipart/form-data)
+                    // DO NOT set Content-Type header manually when sending FormData
+                });
+                const result = await response.json();
+                if (response.ok) {
+                    console.log('✅ Media uploaded successfully:', result);
+                    // Check if all uploads were successful based on backend response
+                    if (result.failed_uploads && result.failed_uploads.length > 0) {
+                        console.warn('Some files failed to upload:', result.failed_uploads);
+                        // You might want to show a partial success message or retry failed ones
+                        // For now, we'll treat the overall request as successful if it returns 200
+                    }
+                    // Hide media section and show success message
+                    hideAllSections();
+                    successMessage.style.display = 'block';
+                    // Add celebration effect
+                    createCelebrationHearts();
+                    // Reset after 5 seconds
+                    setTimeout(() => {
+                        successMessage.style.display = 'none';
+                        document.getElementById('mainMenu').style.display = 'block';
+                        resetMediaForm();
+                    }, 5000);
+                } else {
+                    // Handle non-2xx responses (e.g., 400, 500)
+                    throw new Error(result.detail || result.message || 'Upload failed');
+                }
+            } catch (error) {
+                console.error('❌ Media upload failed:', error);
+                // Show error message
+                errorMessage.style.display = 'block';
+                // Hide error after 4 seconds
+                setTimeout(() => {
+                    errorMessage.style.display = 'none';
+                }, 4000);
+            } finally {
+                // Reset loading state
+                submitBtn.disabled = false;
+                submitBtn.textContent = '📷 Dosyaları Gönder';
+                loading.style.display = 'none';
+            }
+        }
+        function selectAttendance(type) {
+            selectedAttendance = type;
+            // Remove selected class from all buttons
+            document.querySelectorAll('.attendance-btn').forEach(btn => {
+                btn.classList.remove('selected');
+            });
+            // Add selected class to clicked button
+            event.target.classList.add('selected');
+            const attendingForm = document.getElementById('attendingForm');
+            const submitSection = document.getElementById('submitSection');
+            if (type === 'attending') {
+                attendingForm.style.display = 'block';
+            } else {
+                attendingForm.style.display = 'none';
+            }
+            submitSection.style.display = 'block';
+        }
+        async function submitAttendance() {
+            const submitBtn = document.getElementById('submitBtn');
+            const loading = document.getElementById('loading');
+            const successMessage = document.getElementById('successMessage');
+            const errorMessage = document.getElementById('errorMessage');
+            // Get form values
+            const guestName = document.getElementById('guestName').value.trim();
+            const guestCount = document.getElementById('guestCount').value;
+            if (!selectedAttendance) {
+                alert('Lütfen katılım durumunuzu seçin.');
+                return;
+            }
+            if (selectedAttendance === 'attending' && (!guestName || !guestCount)) {
+                alert('💫 Lütfen adınızı ve katılımcı sayısını girin.');
+                return;
+            }
+            // Show loading state
+            submitBtn.disabled = true;
+            submitBtn.textContent = '💌 Gönderiliyor...';
+            loading.style.display = 'block';
+            try {
+                // Prepare data to send as JSON
+                let requestData = { status: selectedAttendance };
+                if (selectedAttendance === 'attending') {
+                    requestData.name = guestName;
+                    requestData.number = guestCount;
+                }
+                const response = await fetch(`${BACKEND_URL}/api/attendance`, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json' // Sending JSON data
+                    },
+                    body: JSON.stringify(requestData) // Convert data to JSON string
+                });
+                const result = await response.json();
+                if (response.ok) {
+                    console.log('✅ Attendance submitted successfully:', result);
+                    // Hide attendance section and show success message
+                    hideAllSections();
+                    successMessage.style.display = 'block';
+                    // Add celebration effect
+                    createCelebrationHearts();
+                    // Reset after 5 seconds
+                    setTimeout(() => {
+                        successMessage.style.display = 'none';
+                        document.getElementById('mainMenu').style.display = 'block';
+                        resetAttendanceForm();
+                    }, 5000);
+                } else {
+                    // Handle non-2xx responses (e.g., 400, 500)
+                    throw new Error(result.detail || result.message || 'Submission failed');
+                }
+            } catch (error) {
+                console.error('❌ Attendance submission failed:', error);
+                // Show error message
+                errorMessage.style.display = 'block';
+                // Hide error after 4 seconds
+                setTimeout(() => {
+                    errorMessage.style.display = 'none';
+                }, 4000);
+            } finally {
+                // Reset loading state
+                submitBtn.disabled = false;
+                submitBtn.textContent = '💌 Gönder';
+                loading.style.display = 'none';
+            }
+        }
+        // GÜNCELLENMİŞ submitMemory fonksiyonu
+        async function submitMemory() {
+            const submitBtn = document.getElementById('memorySubmitBtn');
+            const loading = document.getElementById('memoryLoading');
+            const successMessage = document.getElementById('memorySuccessMessage');
+            const errorMessage = document.getElementById('errorMessage');
+            // YENİ: İsim alanını al
+            const memoryName = document.getElementById('memoryName').value.trim();
+            const memoryText = document.getElementById('memoryText').value.trim();
+            // YENİ: İsim alanını kontrol et
+            if (!memoryName) {
+                alert('💫 Lütfen adınızı yazın.');
+                return;
+            }
+            if (!memoryText) {
+                alert('💭 Lütfen anınızı veya mesajınızı yazın.');
+                return;
+            }
+            if (memoryText.length > 1000) {
+                alert('📝 Mesajınız 1000 karakterden uzun olamaz.');
+                return;
+            }
+            // Show loading state
+            submitBtn.disabled = true;
+            submitBtn.textContent = '💝 Gönderiliyor...';
+            loading.style.display = 'block';
+            try {
+                // GÜNCELLENMİŞ: name alanını ekledik
+                const requestData = {
+                    name: memoryName, // <-- YENİ
+                    memo: memoryText
+                };
+                const response = await fetch(`${BACKEND_URL}/api/memory`, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify(requestData)
+                });
+                const result = await response.json();
+                if (response.ok) {
+                    console.log('✅ Memory submitted successfully:', result);
+                    // Hide memory section and show success message
+                    hideAllSections();
+                    successMessage.style.display = 'block';
+                    // Add celebration effect
+                    createCelebrationHearts();
+                    // Reset after 5 seconds
+                    setTimeout(() => {
+                        successMessage.style.display = 'none';
+                        document.getElementById('mainMenu').style.display = 'block';
+                        resetMemoryForm();
+                    }, 5000);
+                } else {
+                    throw new Error(result.detail || result.message || 'Submission failed');
+                }
+            } catch (error) {
+                console.error('❌ Memory submission failed:', error);
+                errorMessage.style.display = 'block';
+                setTimeout(() => {
+                    errorMessage.style.display = 'none';
+                }, 4000);
+            } finally {
+                submitBtn.disabled = false;
+                submitBtn.textContent = '💝 Anımı Gönder';
+                loading.style.display = 'none';
+            }
+        }
+        // --- END OF UPDATED SUBMIT FUNCTIONS ---
+        function createCelebrationHearts() {
+            const container = document.querySelector('.container');
+            for (let i = 0; i < 20; i++) {
+                const heart = document.createElement('div');
+                heart.innerHTML = '💖';
+                heart.style.position = 'absolute';
+                heart.style.left = Math.random() * 100 + '%';
+                heart.style.top = Math.random() * 100 + '%';
+                heart.style.fontSize = '24px';
+                heart.style.pointerEvents = 'none';
+                heart.style.animation = 'celebrationPulse 1s ease';
+                container.appendChild(heart);
+                setTimeout(() => heart.remove(), 1000);
+            }
+        }
+        function goBack() {
+            hideAllSections();
+            document.getElementById('mainMenu').style.display = 'block';
+            resetAttendanceForm();
+        }
+        function goBackFromMemory() {
+            hideAllSections();
+            document.getElementById('mainMenu').style.display = 'block';
+            resetMemoryForm();
+        }
+        function goBackFromMedia() {
+            hideAllSections();
+            document.getElementById('mainMenu').style.display = 'block';
+            resetMediaForm();
+        }
+        function resetAttendanceForm() {
+            selectedAttendance = null;
+            document.getElementById('guestName').value = '';
+            document.getElementById('guestCount').value = '1';
+            document.getElementById('attendingForm').style.display = 'none';
+            document.getElementById('submitSection').style.display = 'none';
+            document.querySelectorAll('.attendance-btn').forEach(btn => {
+                btn.classList.remove('selected');
+            });
+        }
+        // GÜNCELLENMİŞ resetMemoryForm fonksiyonu
+        function resetMemoryForm() {
+            document.getElementById('memoryName').value = ''; // YENİ
+            document.getElementById('memoryText').value = '';
+        }
+        function resetMediaForm() {
+            selectedFiles = [];
+            document.getElementById('mediaCaption').value = '';
+            document.getElementById('fileInput').value = '';
+            updateFilePreview();
+        }
+        // Initialize everything when page loads
+        document.addEventListener('DOMContentLoaded', function() {
+            createHearts();
+            setupFileUpload();
+        });
+        // Add fade out animation for coming soon messages
+        const style = document.createElement('style');
+        style.textContent = `
+            @keyframes fadeOut {
+                from { opacity: 1; transform: translateY(0); }
+                to { opacity: 0; transform: translateY(-20px); }
+            }
+        `;
+        document.head.appendChild(style);
+    </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=SaitBurak/simalsaitwedding" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>