| | <!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> |
