| <!DOCTYPE html> |
| <html lang="ar" dir="rtl"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>خزانة الملابس الرقمية</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <style> |
| .outfit-option { |
| transition: all 0.3s ease; |
| } |
| .outfit-option:hover { |
| transform: scale(1.05); |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); |
| } |
| #previewCanvas { |
| border: 2px dashed #cbd5e0; |
| } |
| .gender-btn.active { |
| background-color: #4f46e5; |
| color: white; |
| } |
| </style> |
| </head> |
| <body class="bg-gray-100 font-tajawal"> |
| <div class="container mx-auto px-4 py-8"> |
| <header class="text-center mb-12"> |
| <h1 class="text-4xl font-bold text-indigo-800 mb-2">خزانة الملابس الرقمية</h1> |
| <p class="text-gray-600 text-lg">جرّب ملابس مختلفة على صورتك بطريقة افتراضية</p> |
| </header> |
|
|
| <div class="flex flex-col lg:flex-row gap-8"> |
| |
| <div class="w-full lg:w-1/3 bg-white p-6 rounded-xl shadow-md"> |
| <h2 class="text-2xl font-semibold text-gray-800 mb-6">تحميل الصورة</h2> |
| |
| <div class="mb-6"> |
| <label class="block text-gray-700 mb-2">نوع الملابس:</label> |
| <div class="flex gap-4 mb-4"> |
| <button id="menBtn" class="gender-btn active px-4 py-2 rounded-lg border border-indigo-300">رجالي</button> |
| <button id="womenBtn" class="gender-btn px-4 py-2 rounded-lg border border-indigo-300">نسائي</button> |
| </div> |
| </div> |
| |
| <div class="border-2 border-dashed border-gray-300 rounded-lg p-4 mb-6 text-center"> |
| <input type="file" id="imageUpload" accept="image/*" class="hidden"> |
| <label for="imageUpload" class="cursor-pointer"> |
| <div class="flex flex-col items-center justify-center py-8"> |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-indigo-500 mb-2" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" /> |
| </svg> |
| <p class="text-gray-600">انقر لرفع صورتك</p> |
| <p class="text-xs text-gray-500 mt-2">JPG, PNG، أو GIF بحد أقصى 5MB</p> |
| </div> |
| </label> |
| </div> |
| |
| <div class="text-center"> |
| <canvas id="previewCanvas" width="300" height="400" class="mx-auto bg-gray-50 rounded-lg mb-4"></canvas> |
| <p class="text-gray-600 text-sm">ستظهر صورتك هنا بعد الرفع</p> |
| </div> |
| </div> |
| |
| |
| <div class="w-full lg:w-2/3 bg-white p-6 rounded-xl shadow-md"> |
| <h2 class="text-2xl font-semibold text-gray-800 mb-6">اختر ملابسك</h2> |
| |
| <div class="mb-8"> |
| <h3 class="text-xl font-medium text-gray-700 mb-4">قمصان وبلوزات</h3> |
| <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4"> |
| <div class="outfit-option bg-gray-50 p-3 rounded-lg cursor-pointer hover:border-indigo-400 border border-transparent" onclick="applyOutfit('shirt1')"> |
| <img src="https://via.placeholder.com/150x200?text=قميص+أبيض" alt="قميص أبيض" class="w-full h-32 object-cover rounded-md mb-2"> |
| <p class="text-center text-gray-700">قميص أبيض</p> |
| </div> |
| <div class="outfit-option bg-gray-50 p-3 rounded-lg cursor-pointer hover:border-indigo-400 border border-transparent" onclick="applyOutfit('shirt2')"> |
| <img src="https://via.placeholder.com/150x200?text=قميص+أزرق" alt="قميص أزرق" class="w-full h-32 object-cover rounded-md mb-2"> |
| <p class="text-center text-gray-700">قميص أزرق</p> |
| </div> |
| <div class="outfit-option bg-gray-50 p-3 rounded-lg cursor-pointer hover:border-indigo-400 border border-transparent" onclick="applyOutfit('shirt3')"> |
| <img src="https://via.placeholder.com/150x200?text=بلوزة+سوداء" alt="بلوزة سوداء" class="w-full h-32 object-cover rounded-md mb-2"> |
| <p class="text-center text-gray-700">بلوزة سوداء</p> |
| </div> |
| <div class="outfit-option bg-gray-50 p-3 rounded-lg cursor-pointer hover:border-indigo-400 border border-transparent" onclick="applyOutfit('shirt4')"> |
| <img src="https://via.placeholder.com/150x200?text=تيشيرت+رمادي" alt="تيشيرت رمادي" class="w-full h-32 object-cover rounded-md mb-2"> |
| <p class="text-center text-gray-700">تيشيرت رمادي</p> |
| </div> |
| </div> |
| </div> |
| |
| <div class="mb-8"> |
| <h3 class="text-xl font-medium text-gray-700 mb-4">بناطيل</h3> |
| <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4"> |
| <div class="outfit-option bg-gray-50 p-3 rounded-lg cursor-pointer hover:border-indigo-400 border border-transparent" onclick="applyOutfit('pants1')"> |
| <img src="https://via.placeholder.com/150x200?text=بنطال+جينز" alt="بنطال جينز" class="w-full h-32 object-cover rounded-md mb-2"> |
| <p class="text-center text-gray-700">بنطال جينز</p> |
| </div> |
| <div class="outfit-option bg-gray-50 p-3 rounded-lg cursor-pointer hover:border-indigo-400 border border-transparent" onclick="applyOutfit('pants2')"> |
| <img src="https://via.placeholder.com/150x200?text=بنطال+أسود" alt="بنطال أسود" class="w-full h-32 object-cover rounded-md mb-2"> |
| <p class="text-center text-gray-700">بنطال أسود</p> |
| </div> |
| <div class="outfit-option bg-gray-50 p-3 rounded-lg cursor-pointer hover:border-indigo-400 border border-transparent" onclick="applyOutfit('pants3')"> |
| <img src="https://via.placeholder.com/150x200?text=بنطال+رياضي" alt="بنطال رياضي" class="w-full h-32 object-cover rounded-md mb-2"> |
| <p class="text-center text-gray-700">بنطال رياضي</p> |
| </div> |
| <div class="outfit-option bg-gray-50 p-3 rounded-lg cursor-pointer hover:border-indigo-400 border border-transparent" onclick="applyOutfit('pants4')"> |
| <img src="https://via.placeholder.com/150x200?text=تنورة+سوداء" alt="تنورة سوداء" class="w-full h-32 object-cover rounded-md mb-2"> |
| <p class="text-center text-gray-700">تنورة سوداء</p> |
| </div> |
| </div> |
| </div> |
| |
| <div class="mb-8 text-center"> |
| <button id="saveBtn" class="bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-2 px-6 rounded-lg inline-flex items-center disabled:opacity-50" disabled> |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-2" viewBox="0 0 20 20" fill="currentColor"> |
| <path fill-rule="evenodd" d="M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm3.293-7.707a1 1 0 011.414 0L9 10.586V3a1 1 0 112 0v7.586l1.293-1.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd" /> |
| </svg> |
| حفظ الصورة |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <script> |
| |
| const menBtn = document.getElementById('menBtn'); |
| const womenBtn = document.getElementById('womenBtn'); |
| |
| menBtn.addEventListener('click', () => { |
| menBtn.classList.add('active'); |
| womenBtn.classList.remove('active'); |
| updateOutfits('men'); |
| }); |
| |
| womenBtn.addEventListener('click', () => { |
| womenBtn.classList.add('active'); |
| menBtn.classList.remove('active'); |
| updateOutfits('women'); |
| }); |
| |
| function updateOutfits(gender) { |
| |
| console.log(`Updating outfits for ${gender}`); |
| } |
| |
| |
| const imageUpload = document.getElementById('imageUpload'); |
| const previewCanvas = document.getElementById('previewCanvas'); |
| const ctx = previewCanvas.getContext('2d'); |
| const saveBtn = document.getElementById('saveBtn'); |
| |
| let uploadedImage = null; |
| |
| imageUpload.addEventListener('change', (e) => { |
| const file = e.target.files[0]; |
| if (file) { |
| const reader = new FileReader(); |
| reader.onload = (event) => { |
| uploadedImage = new Image(); |
| uploadedImage.onload = () => { |
| |
| const ratio = Math.min( |
| previewCanvas.width / uploadedImage.width, |
| previewCanvas.height / uploadedImage.height |
| ); |
| const newWidth = uploadedImage.width * ratio; |
| const newHeight = uploadedImage.height * ratio; |
| |
| ctx.clearRect(0, 0, previewCanvas.width, previewCanvas.height); |
| ctx.drawImage( |
| uploadedImage, |
| (previewCanvas.width - newWidth) / 2, |
| (previewCanvas.height - newHeight) / 2, |
| newWidth, |
| newHeight |
| ); |
| |
| saveBtn.disabled = false; |
| }; |
| uploadedImage.src = event.target.result; |
| }; |
| reader.readAsDataURL(file); |
| } |
| }); |
| |
| |
| function applyOutfit(outfitId) { |
| if (!uploadedImage) { |
| alert('الرجاء رفع صورتك أولاً'); |
| return; |
| } |
| |
| |
| console.log(`Applying outfit: ${outfitId}`); |
| |
| |
| alert(`تم تطبيق ${outfitId} على صورتك. في التطبيق الحقيقي، سترى الملابس على صورتك.`); |
| } |
| |
| |
| saveBtn.addEventListener('click', () => { |
| if (!uploadedImage) { |
| alert('لا يوجد صورة لحفظها'); |
| return; |
| } |
| |
| |
| const link = document.createElement('a'); |
| link.download = 'outfit-preview.png'; |
| link.href = previewCanvas.toDataURL('image/png'); |
| document.body.appendChild(link); |
| link.click(); |
| document.body.removeChild(link); |
| |
| alert('تم حفظ الصورة بنجاح'); |
| }); |
| </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=hader1890/gh2" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
