Spaces:
Running
Running
File size: 7,489 Bytes
cd72b81 77af377 b0bf782 cd72b81 b0bf782 cd72b81 b0bf782 cd72b81 b0bf782 cd72b81 b0bf782 cd72b81 b0bf782 cd72b81 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 | <!DOCTYPE html>
<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> |