|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Düğünümüz İçin Anı Bırakma Platformu</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=Playfair+Display:wght@400;500;600;700&family=Montserrat:wght@300;400;500;600&display=swap'); |
|
|
|
|
|
body { |
|
|
font-family: 'Montserrat', sans-serif; |
|
|
background-color: #faf7f2; |
|
|
color: #333; |
|
|
} |
|
|
|
|
|
.heading-font { |
|
|
font-family: 'Playfair Display', serif; |
|
|
} |
|
|
|
|
|
.hero-pattern { |
|
|
background-image: radial-gradient(#f3e8e8 1px, transparent 1px); |
|
|
background-size: 20px 20px; |
|
|
} |
|
|
|
|
|
.upload-area { |
|
|
border: 2px dashed #d1a6a6; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.upload-area:hover { |
|
|
border-color: #b5838d; |
|
|
background-color: rgba(245, 235, 235, 0.5); |
|
|
} |
|
|
|
|
|
.gallery-item { |
|
|
transition: transform 0.3s ease; |
|
|
} |
|
|
|
|
|
.gallery-item:hover { |
|
|
transform: scale(1.03); |
|
|
} |
|
|
|
|
|
|
|
|
@keyframes float { |
|
|
0% { transform: translateY(0px); } |
|
|
50% { transform: translateY(-10px); } |
|
|
100% { transform: translateY(0px); } |
|
|
} |
|
|
|
|
|
.floating-heart { |
|
|
animation: float 3s ease-in-out infinite; |
|
|
} |
|
|
|
|
|
.delay-1 { animation-delay: 0.5s; } |
|
|
.delay-2 { animation-delay: 1s; } |
|
|
.delay-3 { animation-delay: 1.5s; } |
|
|
</style> |
|
|
</head> |
|
|
<body class="min-h-screen"> |
|
|
|
|
|
|
|
|
|
|
|
<div class="relative z-10"> |
|
|
|
|
|
<header class="hero-pattern py-20 px-4 text-center"> |
|
|
<div class="max-w-4xl mx-auto"> |
|
|
<h1 class="heading-font text-4xl md:text-6xl font-bold text-pink-700 mb-4">Düğünümüz İçin Anı Bırakma Platformu</h1> |
|
|
<p class="text-xl md:text-2xl text-pink-600 mb-8">Düğünümüzdeki güzel anılarınızı paylaşın</p> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<section id="share" class="py-16 px-4 max-w-4xl mx-auto"> |
|
|
<h2 class="heading-font text-3xl md:text-4xl font-bold text-center text-pink-700 mb-12">Düğünümüz İçin Anı Bırak</h2> |
|
|
<p class="text-center text-gray-700 mb-8 max-w-2xl mx-auto">Düğünümüzdeki güzel anılarınızı paylaşın</p> |
|
|
|
|
|
<div class="bg-white p-6 rounded-lg shadow-sm"> |
|
|
<div id="upload-container" class="upload-area p-8 rounded-lg text-center cursor-pointer mb-6"> |
|
|
<div class="text-pink-500 text-5xl mb-4"> |
|
|
<i class="fas fa-cloud-upload-alt"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-medium text-gray-800 mb-2">Fotoğraf veya Video Yükle</h3> |
|
|
<p class="text-gray-600 mb-4">Dosyaları buraya sürükleyin veya seçmek için tıklayın</p> |
|
|
<input type="file" id="file-input" class="hidden" multiple accept="image/*,video/*"> |
|
|
<button id="browse-btn" class="bg-pink-100 hover:bg-pink-200 text-pink-700 font-medium py-2 px-6 rounded-full transition duration-300">Dosya Seç</button> |
|
|
</div> |
|
|
|
|
|
<div id="preview-container" class="hidden mb-6"> |
|
|
<h4 class="font-medium text-gray-800 mb-3">Seçilen Dosyalar:</h4> |
|
|
<div id="file-previews" class="grid grid-cols-2 md:grid-cols-3 gap-3"></div> |
|
|
</div> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<label for="message" class="block text-gray-800 font-medium mb-2">Mesajınız (İsteğe Bağlı)</label> |
|
|
<textarea id="message" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-pink-300 focus:border-pink-300" placeholder="Mesajınızı buraya yazın..."></textarea> |
|
|
</div> |
|
|
|
|
|
<div class="mb-4"> |
|
|
<label for="name" class="block text-gray-800 font-medium mb-2">Adınız</label> |
|
|
<input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-pink-300 focus:border-pink-300" placeholder="Adınızı girin"> |
|
|
</div> |
|
|
|
|
|
<button id="submit-btn" class="w-full bg-pink-600 hover:bg-pink-700 text-white font-medium py-3 px-4 rounded-lg transition duration-300 flex items-center justify-center"> |
|
|
<i class="fas fa-paper-plane mr-2"></i> Paylaş |
|
|
</button> |
|
|
|
|
|
<div id="success-message" class="hidden mt-4 p-4 bg-green-100 text-green-800 rounded-lg text-center"> |
|
|
<i class="fas fa-check-circle mr-2"></i> Teşekkürler! Anılarınız çiftle paylaşıldı. |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
|
|
|
<footer class="py-12 bg-pink-800 text-white text-center"> |
|
|
<div class="max-w-4xl mx-auto px-4"> |
|
|
<h2 class="heading-font text-2xl md:text-3xl font-bold mb-6">Düğünümüz İçin Anı Bırakma Platformu</h2> |
|
|
<p class="mb-8 max-w-2xl mx-auto">Düğünümüzdeki güzel anılarınızı paylaşın</p> |
|
|
|
|
|
<p class="text-pink-200 text-sm">© 2024 Düğünümüz İçin Anı Bırakma Platformu. Tüm hakları saklıdır.</p> |
|
|
</div> |
|
|
</footer> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
|
|
|
const uploadContainer = document.getElementById('upload-container'); |
|
|
const fileInput = document.getElementById('file-input'); |
|
|
const browseBtn = document.getElementById('browse-btn'); |
|
|
const previewContainer = document.getElementById('preview-container'); |
|
|
const filePreviews = document.getElementById('file-previews'); |
|
|
const submitBtn = document.getElementById('submit-btn'); |
|
|
const successMessage = document.getElementById('success-message'); |
|
|
|
|
|
|
|
|
uploadContainer.addEventListener('click', function() { |
|
|
fileInput.click(); |
|
|
}); |
|
|
|
|
|
browseBtn.addEventListener('click', function(e) { |
|
|
e.stopPropagation(); |
|
|
fileInput.click(); |
|
|
}); |
|
|
|
|
|
|
|
|
let allFiles = []; |
|
|
|
|
|
|
|
|
fileInput.addEventListener('change', function() { |
|
|
|
|
|
const newFiles = Array.from(fileInput.files); |
|
|
allFiles = allFiles.concat(newFiles); |
|
|
|
|
|
if (allFiles.length > 0) { |
|
|
filePreviews.innerHTML = ''; |
|
|
previewContainer.classList.remove('hidden'); |
|
|
|
|
|
allFiles.forEach((file, index) => { |
|
|
const previewDiv = document.createElement('div'); |
|
|
previewDiv.className = 'bg-gray-100 rounded-lg p-2 relative'; |
|
|
previewDiv.dataset.fileIndex = index; |
|
|
|
|
|
if (file.type.startsWith('image/')) { |
|
|
const reader = new FileReader(); |
|
|
reader.onload = function(e) { |
|
|
const img = document.createElement('img'); |
|
|
img.src = e.target.result; |
|
|
img.className = 'w-full h-24 object-cover rounded'; |
|
|
previewDiv.appendChild(img); |
|
|
|
|
|
const removeBtn = document.createElement('button'); |
|
|
removeBtn.innerHTML = '<i class="fas fa-times"></i>'; |
|
|
removeBtn.className = 'absolute -top-2 -right-2 bg-red-500 text-white rounded-full w-6 h-6 flex items-center justify-center text-xs'; |
|
|
removeBtn.addEventListener('click', function(e) { |
|
|
e.stopPropagation(); |
|
|
|
|
|
allFiles.splice(index, 1); |
|
|
previewDiv.remove(); |
|
|
|
|
|
|
|
|
updateFileInput(); |
|
|
|
|
|
if (filePreviews.children.length === 0) { |
|
|
previewContainer.classList.add('hidden'); |
|
|
} |
|
|
}); |
|
|
previewDiv.appendChild(removeBtn); |
|
|
}; |
|
|
reader.readAsDataURL(file); |
|
|
} else if (file.type.startsWith('video/')) { |
|
|
previewDiv.innerHTML = ` |
|
|
<div class="bg-gray-200 h-24 flex items-center justify-center rounded"> |
|
|
<i class="fas fa-video text-3xl text-pink-500"></i> |
|
|
</div> |
|
|
<button class="absolute -top-2 -right-2 bg-red-500 text-white rounded-full w-6 h-6 flex items-center justify-center text-xs"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
`; |
|
|
previewDiv.querySelector('button').addEventListener('click', function(e) { |
|
|
e.stopPropagation(); |
|
|
|
|
|
allFiles.splice(index, 1); |
|
|
previewDiv.remove(); |
|
|
|
|
|
|
|
|
updateFileInput(); |
|
|
|
|
|
if (filePreviews.children.length === 0) { |
|
|
previewContainer.classList.add('hidden'); |
|
|
} |
|
|
}); |
|
|
} |
|
|
|
|
|
filePreviews.appendChild(previewDiv); |
|
|
}); |
|
|
} else { |
|
|
previewContainer.classList.add('hidden'); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
function updateFileInput() { |
|
|
|
|
|
const dt = new DataTransfer(); |
|
|
allFiles.forEach(file => dt.items.add(file)); |
|
|
fileInput.files = dt.files; |
|
|
} |
|
|
|
|
|
|
|
|
['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => { |
|
|
uploadContainer.addEventListener(eventName, preventDefaults, false); |
|
|
}); |
|
|
|
|
|
function preventDefaults(e) { |
|
|
e.preventDefault(); |
|
|
e.stopPropagation(); |
|
|
} |
|
|
|
|
|
['dragenter', 'dragover'].forEach(eventName => { |
|
|
uploadContainer.addEventListener(eventName, highlight, false); |
|
|
}); |
|
|
|
|
|
['dragleave', 'drop'].forEach(eventName => { |
|
|
uploadContainer.addEventListener(eventName, unhighlight, false); |
|
|
}); |
|
|
|
|
|
function highlight() { |
|
|
uploadContainer.classList.add('border-pink-500', 'bg-pink-50'); |
|
|
} |
|
|
|
|
|
function unhighlight() { |
|
|
uploadContainer.classList.remove('border-pink-500', 'bg-pink-50'); |
|
|
} |
|
|
|
|
|
uploadContainer.addEventListener('drop', handleDrop, false); |
|
|
|
|
|
function handleDrop(e) { |
|
|
const dt = e.dataTransfer; |
|
|
const files = dt.files; |
|
|
|
|
|
|
|
|
const existingFiles = Array.from(fileInput.files); |
|
|
const newFiles = Array.from(files); |
|
|
const combinedFiles = new FileListItems(existingFiles.concat(newFiles)); |
|
|
|
|
|
|
|
|
Object.defineProperty(fileInput, 'files', { |
|
|
value: combinedFiles, |
|
|
writable: false |
|
|
}); |
|
|
|
|
|
const event = new Event('change'); |
|
|
fileInput.dispatchEvent(event); |
|
|
} |
|
|
|
|
|
|
|
|
function FileListItems(files) { |
|
|
const b = new ClipboardEvent("").clipboardData || new DataTransfer(); |
|
|
for (let i = 0, len = files.length; i < len; i++) { |
|
|
b.items.add(files[i]); |
|
|
} |
|
|
return b.files; |
|
|
} |
|
|
|
|
|
|
|
|
submitBtn.addEventListener('click', function() { |
|
|
const name = document.getElementById('name').value.trim(); |
|
|
const message = document.getElementById('message').value.trim(); |
|
|
const files = fileInput.files; |
|
|
|
|
|
if (files.length === 0 && message === '') { |
|
|
alert('Lütfen en az bir fotoğraf/video veya mesaj ekleyin.'); |
|
|
return; |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
submitBtn.disabled = true; |
|
|
submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Gönderiliyor...'; |
|
|
|
|
|
setTimeout(function() { |
|
|
successMessage.classList.remove('hidden'); |
|
|
submitBtn.disabled = false; |
|
|
submitBtn.innerHTML = '<i class="fas fa-paper-plane mr-2"></i> Paylaş'; |
|
|
|
|
|
|
|
|
fileInput.value = ''; |
|
|
document.getElementById('name').value = ''; |
|
|
document.getElementById('message').value = ''; |
|
|
filePreviews.innerHTML = ''; |
|
|
previewContainer.classList.add('hidden'); |
|
|
|
|
|
|
|
|
setTimeout(function() { |
|
|
successMessage.classList.add('hidden'); |
|
|
}, 5000); |
|
|
}, 1500); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
|
|
anchor.addEventListener('click', function(e) { |
|
|
e.preventDefault(); |
|
|
const targetId = this.getAttribute('href'); |
|
|
const targetElement = document.querySelector(targetId); |
|
|
|
|
|
if (targetElement) { |
|
|
window.scrollTo({ |
|
|
top: targetElement.offsetTop - 80, |
|
|
behavior: 'smooth' |
|
|
}); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
}); |
|
|
</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/wedding-image-uploader-v1" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
