Spaces:
Running
Running
| <html lang="hi"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>नई पोस्ट डालें | InstaChatFeed</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| </head> | |
| <body class="bg-gray-100"> | |
| <div class="max-w-md mx-auto bg-white min-h-screen"> | |
| <!-- Header --> | |
| <header class="p-4 border-b flex justify-between items-center"> | |
| <button class="text-red-500 font-bold">रद्द करें</button> | |
| <h1 class="text-lg font-semibold">नई पोस्ट डालें</h1> | |
| <button class="text-blue-500 font-bold">आगे</button> | |
| </header> | |
| <!-- Upload Tabs --> | |
| <div class="border-b"> | |
| <div class="flex"> | |
| <button class="flex-1 py-3 font-medium border-b-2 border-blue-500 text-blue-500">फोटो</button> | |
| <button class="flex-1 py-3 font-medium text-gray-500">वीडियो</button> | |
| </div> | |
| </div> | |
| <!-- Upload Content --> | |
| <main class="p-4 hovered-element"> | |
| <div class="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center hovered-element" id="dropZone"> | |
| <i class="fas fa-cloud-upload-alt text-4xl text-gray-400 mb-2"></i> | |
| <p class="font-medium mb-1">ड्रेग करके अपलोड करें</p> | |
| <p class="text-gray-500 text-sm mb-4">या</p> | |
| <input type="file" id="fileInput" class="hidden" accept="image/*,video/*"> | |
| <button onclick="document.getElementById('fileInput').click()" class="bg-gradient-to-r from-purple-500 to-pink-500 text-white px-6 py-3 rounded-full font-bold shadow-md hover:scale-105 transition-transform"> | |
| गैलरी से चुनें | |
| </button> | |
| </div> | |
| <div id="fileInfo" class="hidden mt-4 p-3 bg-gray-100 rounded-lg"> | |
| <p class="font-medium">चयनित फाइल: <span id="fileName"></span></p> | |
| <p class="text-sm text-gray-600">साइज: <span id="fileSize"></span></p> | |
| </div> | |
| <script> | |
| const fileInput = document.getElementById('fileInput'); | |
| const dropZone = document.getElementById('dropZone'); | |
| const fileInfo = document.getElementById('fileInfo'); | |
| const fileName = document.getElementById('fileName'); | |
| const fileSize = document.getElementById('fileSize'); | |
| fileInput.addEventListener('change', handleFileSelect); | |
| dropZone.addEventListener('dragover', (e) => { | |
| e.preventDefault(); | |
| dropZone.classList.add('border-blue-500'); | |
| }); | |
| dropZone.addEventListener('dragleave', () => { | |
| dropZone.classList.remove('border-blue-500'); | |
| }); | |
| dropZone.addEventListener('drop', (e) => { | |
| e.preventDefault(); | |
| dropZone.classList.remove('border-blue-500'); | |
| fileInput.files = e.dataTransfer.files; | |
| handleFileSelect(); | |
| }); | |
| function handleFileSelect() { | |
| if (fileInput.files.length > 0) { | |
| const file = fileInput.files[0]; | |
| fileName.textContent = file.name; | |
| fileSize.textContent = formatFileSize(file.size); | |
| fileInfo.classList.remove('hidden'); | |
| // Validate file | |
| if (!validateFile(file)) { | |
| alert('कृपया वैध फाइल चुनें (JPG, PNG, HEIC, MP4, अधिकतम साइज 100MB)'); | |
| fileInput.value = ''; | |
| fileInfo.classList.add('hidden'); | |
| } | |
| } | |
| } | |
| function validateFile(file) { | |
| const validTypes = ['image/jpeg', 'image/png', 'image/heic', 'video/mp4']; | |
| const maxSize = 100 * 1024 * 1024; // 100MB | |
| return validTypes.includes(file.type) && file.size <= maxSize; | |
| } | |
| function formatFileSize(bytes) { | |
| if (bytes < 1024) return bytes + ' bytes'; | |
| else if (bytes < 1048576) return (bytes / 1024).toFixed(1) + ' KB'; | |
| else return (bytes / 1048576).toFixed(1) + ' MB'; | |
| } | |
| </script> | |
| <div class="mt-6"> | |
| <label class="block text-gray-700 mb-2">कैप्शन जोड़ें</label> | |
| <textarea class="w-full border rounded-md p-2" rows="3" placeholder="अपनी पोस्ट के बारे में लिखें..."></textarea> | |
| </div> | |
| <div class="mt-4"> | |
| <label class="block text-gray-700 mb-2">स्थान जोड़ें</label> | |
| <input type="text" class="w-full border rounded-md p-2" placeholder="स्थान टैग करें"> | |
| </div> | |
| <div class="mt-6"> | |
| <button id="postBtn" class="w-full bg-blue-500 text-white py-3 rounded-md font-bold disabled:opacity-50" disabled> | |
| पोस्ट करें | |
| </button> | |
| </div> | |
| <script> | |
| fileInput.addEventListener('change', () => { | |
| document.getElementById('postBtn').disabled = fileInput.files.length === 0; | |
| }); | |
| document.getElementById('postBtn').addEventListener('click', async () => { | |
| if (fileInput.files.length === 0) return; | |
| const file = fileInput.files[0]; | |
| const formData = new FormData(); | |
| formData.append('file', file); | |
| formData.append('caption', document.querySelector('textarea').value); | |
| formData.append('location', document.querySelector('input[type="text"]').value); | |
| try { | |
| // Simulate upload | |
| document.getElementById('postBtn').disabled = true; | |
| document.getElementById('postBtn').innerHTML = '<i class="fas fa-spinner fa-spin"></i> अपलोड हो रहा है...'; | |
| await new Promise(resolve => setTimeout(resolve, 2000)); // Simulate network delay | |
| alert('पोस्ट सफलतापूर्वक अपलोड हो गई!'); | |
| window.location.href = 'index.html'; | |
| } catch (error) { | |
| alert('अपलोड में त्रुटि: ' + error.message); | |
| document.getElementById('postBtn').disabled = false; | |
| document.getElementById('postBtn').textContent = 'पोस्ट करें'; | |
| } | |
| }); | |
| </script> | |
| </main> | |
| </div> | |
| </body> | |
| </html> |