Spaces:
Running
Running
| <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> |