Spaces:
Running
Running
میخوام بعد از اینکه طرح رو از کاربر گرفت ، دقیقا ایده با خلاقیت هوش مصنوعی روی خود لباس پیاده بشه - Initial Deployment
8fe58c9
verified
| <html lang="en"> | |
| <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> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #fff0f6 0%, #ffdeeb 100%); | |
| } | |
| .fabric-pattern { | |
| background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2IiBoZWlnaHQ9IjYiPgo8cmVjdCB3aWR0aD0iNiIgaGVpZ2h0PSI2IiBmaWxsPSIjZmZmIj48L3JlY3Q+CjxwYXRoIGQ9Ik0wIDBMNiA2IiBzdHJva2U9IiNjY2MiIHN0cm9rZS13aWR0aD0iMC41Ij48L3BhdGg+CjxwYXRoIGQ9Ik02IDBMMCA2IiBzdHJva2U9IiNjY2MiIHN0cm9rZS13aWR0aD0iMC41Ij48L3BhdGg+Cjwvc3ZnPg=='); | |
| } | |
| .dress-display { | |
| box-shadow: 0 15px 30px rgba(0,0,0,0.1); | |
| transition: all 0.3s ease; | |
| } | |
| .dress-display:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 40px rgba(0,0,0,0.15); | |
| } | |
| .color-option { | |
| width: 30px; | |
| height: 30px; | |
| border-radius: 50%; | |
| cursor: pointer; | |
| transition: transform 0.2s; | |
| } | |
| .color-option:hover { | |
| transform: scale(1.2); | |
| } | |
| .color-option.selected { | |
| transform: scale(1.3); | |
| box-shadow: 0 0 0 2px white, 0 0 0 4px #4f46e5; | |
| } | |
| .pattern-option { | |
| width: 50px; | |
| height: 50px; | |
| cursor: pointer; | |
| transition: all 0.2s; | |
| background-size: cover; | |
| } | |
| .pattern-option:hover { | |
| transform: scale(1.1); | |
| } | |
| .pattern-option.selected { | |
| transform: scale(1.15); | |
| box-shadow: 0 0 0 2px white, 0 0 0 4px #4f46e5; | |
| } | |
| .loading-spinner { | |
| animation: spin 1s linear infinite; | |
| } | |
| @keyframes spin { | |
| 0% { transform: rotate(0deg); } | |
| 100% { transform: rotate(360deg); } | |
| } | |
| </style> | |
| </head> | |
| <body class="gradient-bg min-h-screen font-sans"> | |
| <div class="container mx-auto px-4 py-8"> | |
| <!-- Header --> | |
| <header class="flex flex-col md:flex-row justify-between items-center mb-12"> | |
| <div class="flex items-center mb-4 md:mb-0"> | |
| <i class="fas fa-tshirt text-4xl text-pink-500 mr-3"></i> | |
| <h1 class="text-3xl font-bold text-gray-800">استودیو مد هوش مصنوعی</h1> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <button class="bg-pink-500 hover:bg-pink-600 text-white px-4 py-2 rounded-lg flex items-center"> | |
| <i class="fas fa-user-circle mr-2"></i> طرحهای من | |
| </button> | |
| <button class="bg-white hover:bg-gray-100 text-pink-500 px-4 py-2 rounded-lg border border-pink-500 flex items-center"> | |
| <i class="fas fa-shopping-cart mr-2"></i> سبد خرید | |
| </button> | |
| </div> | |
| </header> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-8"> | |
| <!-- Left Panel - Design Controls --> | |
| <div class="bg-white rounded-xl shadow-lg p-6 lg:col-span-1"> | |
| <h2 class="text-2xl font-semibold text-gray-800 mb-6">لباس خود را طراحی کنید</h2> | |
| <!-- Style Selection --> | |
| <div class="mb-8"> | |
| <h3 class="text-lg font-medium text-gray-700 mb-3">انتخاب سبک</h3> | |
| <div class="grid grid-cols-2 gap-3"> | |
| <button class="style-btn bg-gray-100 hover:bg-pink-50 text-gray-800 py-2 px-3 rounded-lg border border-gray-200 flex items-center justify-center" data-style="casual"> | |
| <i class="fas fa-tshirt mr-2"></i> معمولی | |
| </button> | |
| <button class="style-btn bg-gray-100 hover:bg-indigo-50 text-gray-800 py-2 px-3 rounded-lg border border-gray-200 flex items-center justify-center" data-style="formal"> | |
| <i class="fas fa-user-tie mr-2"></i> رسمی | |
| </button> | |
| <button class="style-btn bg-gray-100 hover:bg-indigo-50 text-gray-800 py-2 px-3 rounded-lg border border-gray-200 flex items-center justify-center" data-style="party"> | |
| <i class="fas fa-glass-cheers mr-2"></i> مهمانی | |
| </button> | |
| <button class="style-btn bg-gray-100 hover:bg-indigo-50 text-gray-800 py-2 px-3 rounded-lg border border-gray-200 flex items-center justify-center" data-style="sport"> | |
| <i class="fas fa-running mr-2"></i> ورزشی | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Color Selection --> | |
| <div class="mb-8"> | |
| <h3 class="text-lg font-medium text-gray-700 mb-3">انتخاب رنگ</h3> | |
| <div class="flex flex-wrap gap-3"> | |
| <div class="color-option bg-red-500 selected" data-color="#ef4444"></div> | |
| <div class="color-option bg-pink-500" data-color="#ec4899"></div> | |
| <div class="color-option bg-purple-500" data-color="#a855f7"></div> | |
| <div class="color-option bg-indigo-500" data-color="#6366f1"></div> | |
| <div class="color-option bg-blue-500" data-color="#3b82f6"></div> | |
| <div class="color-option bg-green-500" data-color="#10b981"></div> | |
| <div class="color-option bg-yellow-500" data-color="#f59e0b"></div> | |
| <div class="color-option bg-gray-500" data-color="#6b7280"></div> | |
| <div class="color-option bg-black" data-color="#000000"></div> | |
| <div class="color-option bg-white border border-gray-300" data-color="#ffffff"></div> | |
| </div> | |
| <div class="mt-3"> | |
| <label for="custom-color" class="block text-sm font-medium text-gray-700 mb-1">یا رنگ دلخواه انتخاب کنید:</label> | |
| <input type="color" id="custom-color" value="#ef4444" class="w-full h-10 cursor-pointer"> | |
| </div> | |
| </div> | |
| <!-- Pattern Selection --> | |
| <div class="mb-8"> | |
| <h3 class="text-lg font-medium text-gray-700 mb-3">انتخاب طرح</h3> | |
| <div class="flex flex-wrap gap-3"> | |
| <div class="pattern-option selected" data-pattern="solid" style="background-color: #ef4444;"></div> | |
| <div class="pattern-option" data-pattern="stripes" style="background: linear-gradient(45deg, #ef4444 25%, #ffffff 25%, #ffffff 50%, #ef4444 50%, #ef4444 75%, #ffffff 75%, #ffffff 100%); background-size: 14.14px 14.14px;"></div> | |
| <div class="pattern-option" data-pattern="polka" style="background: radial-gradient(circle, #ef4444 20%, transparent 20%), #ffffff; background-size: 10px 10px;"></div> | |
| <div class="pattern-option" data-pattern="floral" style="background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCI+PHBhdGggZD0iTTQwIDBDMjAgMTAgMTAgMzAgMTAgNTBjMCAyMCAxMCA0MCAzMCA1MCAyMC0xMCAzMC0zMCAzMC01MEM3MCAzMCA2MCAxMCA0MCAweiIgZmlsbD0iI2VmNDQ0NCIvPjwvc3ZnPg==');"></div> | |
| <div class="pattern-option" data-pattern="geometric" style="background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCI+PHBhdGggZD0iTTAgMEg1MFY1MEgweiIgZmlsbD0iI2VmNDQ0NCIvPjxwYXRoIGQ9Ik01MCA1MEgxMDBWMTAwSDUweiIgZmlsbD0iI2VmNDQ0NCIvPjwvc3ZnPg==');"></div> | |
| </div> | |
| </div> | |
| <!-- AI Suggestions --> | |
| <div class="mb-8"> | |
| <h3 class="text-lg font-medium text-gray-700 mb-3">پیشنهادهای هوش مصنوعی</h3> | |
| <div class="bg-pink-50 rounded-lg p-4"> | |
| <p class="text-pink-800 mb-3">"بر اساس ترندهای فعلی، پیشنهاد میکنیم طرح گلدار با رنگهای پاستلی برای ظاهری بهاری امتحان کنید."</p> | |
| <button class="ai-suggestion-btn bg-pink-100 hover:bg-pink-200 text-pink-800 py-1 px-3 rounded-full text-sm flex items-center"> | |
| <i class="fas fa-magic mr-1"></i> اعمال پیشنهاد | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Size Selection --> | |
| <div class="mb-8"> | |
| <h3 class="text-lg font-medium text-gray-700 mb-3">انتخاب سایز</h3> | |
| <div class="grid grid-cols-5 gap-2"> | |
| <button class="size-btn bg-gray-100 hover:bg-indigo-50 text-gray-800 py-2 rounded-lg border border-gray-200" data-size="XS">XS</button> | |
| <button class="size-btn bg-gray-100 hover:bg-indigo-50 text-gray-800 py-2 rounded-lg border border-gray-200" data-size="S">S</button> | |
| <button class="size-btn bg-pink-100 border-pink-500 text-pink-700 py-2 rounded-lg border-2" data-size="M">M</button> | |
| <button class="size-btn bg-gray-100 hover:bg-indigo-50 text-gray-800 py-2 rounded-lg border border-gray-200" data-size="L">L</button> | |
| <button class="size-btn bg-gray-100 hover:bg-indigo-50 text-gray-800 py-2 rounded-lg border border-gray-200" data-size="XL">XL</button> | |
| </div> | |
| </div> | |
| <!-- Custom Text --> | |
| <div class="mb-8"> | |
| <h3 class="text-lg font-medium text-gray-700 mb-3">افزودن متن سفارشی</h3> | |
| <input type="text" placeholder="متن خود را اینجا وارد کنید" class="custom-text w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"> | |
| <div class="mt-2 flex items-center"> | |
| <label for="text-color" class="mr-2 text-sm text-gray-700">رنگ:</label> | |
| <input type="color" id="text-color" value="#000000" class="h-6 w-6 cursor-pointer"> | |
| <button class="ml-auto text-sm bg-gray-100 hover:bg-gray-200 px-2 py-1 rounded">افزودن متن</button> | |
| </div> | |
| </div> | |
| <!-- Action Buttons --> | |
| <div class="flex flex-col space-y-3"> | |
| <button id="generate-btn" class="bg-pink-500 hover:bg-pink-600 text-white py-3 rounded-lg font-medium flex items-center justify-center"> | |
| <i class="fas fa-robot mr-2"></i> تولید با هوش مصنوعی | |
| </button> | |
| <button class="bg-white hover:bg-gray-100 text-pink-500 py-3 rounded-lg border-2 border-pink-500 font-medium flex items-center justify-center"> | |
| <i class="fas fa-save mr-2"></i> ذخیره طرح | |
| </button> | |
| <button class="bg-white hover:bg-gray-100 text-gray-800 py-3 rounded-lg border border-gray-300 font-medium flex items-center justify-center"> | |
| <i class="fas fa-shopping-bag mr-2"></i> افزودن به سبد | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Center Panel - Dress Display --> | |
| <div class="lg:col-span-2"> | |
| <div class="bg-white rounded-xl shadow-lg p-6 mb-6"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h2 class="text-2xl font-semibold text-gray-800">طراحی سفارشی شما</h2> | |
| <div class="flex space-x-2"> | |
| <button class="view-btn bg-gray-100 hover:bg-gray-200 text-gray-800 p-2 rounded-full" data-view="front"> | |
| <i class="fas fa-user"></i> | |
| </button> | |
| <button class="view-btn bg-pink-100 text-pink-700 p-2 rounded-full" data-view="back"> | |
| <i class="fas fa-user-alt"></i> | |
| </button> | |
| <button class="view-btn bg-gray-100 hover:bg-gray-200 text-gray-800 p-2 rounded-full" data-view="side"> | |
| <i class="fas fa-user-friends"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="dress-display fabric-pattern rounded-xl overflow-hidden relative" style="height: 500px; background-color: #ef4444;"> | |
| <!-- Dress will be displayed here --> | |
| <div id="dress-container" class="h-full flex items-center justify-center"> | |
| <div class="text-center"> | |
| <i class="fas fa-tshirt text-6xl text-white opacity-50 mb-3"></i> | |
| <p class="text-white opacity-70">با استفاده از کنترلها لباس خود را سفارشی کنید</p> | |
| </div> | |
| </div> | |
| <!-- Loading overlay --> | |
| <div id="loading-overlay" class="hidden absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center"> | |
| <div class="text-white text-center"> | |
| <i class="fas fa-spinner loading-spinner text-4xl mb-2"></i> | |
| <p>هوش مصنوعی در حال تولید طرح شماست...</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-4 flex justify-between items-center"> | |
| <div> | |
| <p class="text-gray-600">سبک فعلی: <span class="font-medium" id="current-style">معمولی</span></p> | |
| <p class="text-gray-600">رنگ: <span class="font-medium" id="current-color">قرمز</span></p> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="zoom-btn bg-gray-100 hover:bg-gray-200 text-gray-800 p-2 rounded-full"> | |
| <i class="fas fa-search-plus"></i> | |
| </button> | |
| <button class="zoom-btn bg-gray-100 hover:bg-gray-200 text-gray-800 p-2 rounded-full"> | |
| <i class="fas fa-search-minus"></i> | |
| </button> | |
| <button class="rotate-btn bg-gray-100 hover:bg-gray-200 text-gray-800 p-2 rounded-full"> | |
| <i class="fas fa-sync-alt"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- AI Recommendations --> | |
| <div class="bg-white rounded-xl shadow-lg p-6"> | |
| <h2 class="text-2xl font-semibold text-gray-800 mb-4">پیشنهادهای هوش مصنوعی</h2> | |
| <p class="text-gray-600 mb-4">هوش مصنوعی ما با تحلیل ترندهای مد و ترجیحات شما این موارد تکمیلی را پیشنهاد میکند:</p> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-4"> | |
| <div class="bg-gray-50 rounded-lg p-3 text-center"> | |
| <div class="bg-gray-200 h-24 mb-2 rounded-lg flex items-center justify-center"> | |
| <i class="fas fa-shoe-prints text-3xl text-gray-400"></i> | |
| </div> | |
| <p class="font-medium">کفش هماهنگ</p> | |
| <p class="text-sm text-gray-500">$79.99</p> | |
| <button class="mt-2 text-xs bg-indigo-600 hover:bg-indigo-700 text-white px-2 py-1 rounded">افزودن</button> | |
| </div> | |
| <div class="bg-gray-50 rounded-lg p-3 text-center"> | |
| <div class="bg-gray-200 h-24 mb-2 rounded-lg flex items-center justify-center"> | |
| <i class="fas fa-ring text-3xl text-gray-400"></i> | |
| </div> | |
| <p class="font-medium">گردنبند طلا</p> | |
| <p class="text-sm text-gray-500">$129.99</p> | |
| <button class="mt-2 text-xs bg-indigo-600 hover:bg-indigo-700 text-white px-2 py-1 rounded">Add</button> | |
| </div> | |
| <div class="bg-gray-50 rounded-lg p-3 text-center"> | |
| <div class="bg-gray-200 h-24 mb-2 rounded-lg flex items-center justify-center"> | |
| <i class="fas fa-hat-cowboy text-3xl text-gray-400"></i> | |
| </div> | |
| <p class="font-medium">کلاه تابستانی</p> | |
| <p class="text-sm text-gray-500">$39.99</p> | |
| <button class="mt-2 text-xs bg-indigo-600 hover:bg-indigo-700 text-white px-2 py-1 rounded">Add</button> | |
| </div> | |
| <div class="bg-gray-50 rounded-lg p-3 text-center"> | |
| <div class="bg-gray-200 h-24 mb-2 rounded-lg flex items-center justify-center"> | |
| <i class="fas fa-bag-shopping text-3xl text-gray-400"></i> | |
| </div> | |
| <p class="font-medium">کیف چرمی</p> | |
| <p class="text-sm text-gray-500">$89.99</p> | |
| <button class="mt-2 text-xs bg-indigo-600 hover:bg-indigo-700 text-white px-2 py-1 rounded">Add</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Current design state | |
| const designState = { | |
| style: 'casual', | |
| color: '#ef4444', | |
| pattern: 'solid', | |
| size: 'M', | |
| view: 'front', | |
| customText: '', | |
| textColor: '#000000' | |
| }; | |
| // Color name mapping | |
| const colorNames = { | |
| '#ef4444': 'قرمز', | |
| '#ec4899': 'صورتی', | |
| '#a855f7': 'بنفش', | |
| '#6366f1': 'نیلی', | |
| '#3b82f6': 'آبی', | |
| '#10b981': 'سبز', | |
| '#f59e0b': 'زرد', | |
| '#6b7280': 'خاکستری', | |
| '#000000': 'مشکی', | |
| '#ffffff': 'سفید' | |
| }; | |
| // Style name mapping | |
| const styleNames = { | |
| 'casual': 'معمولی', | |
| 'formal': 'رسمی', | |
| 'party': 'مهمانی', | |
| 'sport': 'ورزشی' | |
| }; | |
| // DOM elements | |
| const colorOptions = document.querySelectorAll('.color-option'); | |
| const patternOptions = document.querySelectorAll('.pattern-option'); | |
| const styleButtons = document.querySelectorAll('.style-btn'); | |
| const sizeButtons = document.querySelectorAll('.size-btn'); | |
| const viewButtons = document.querySelectorAll('.view-btn'); | |
| const customColorInput = document.getElementById('custom-color'); | |
| const customTextInput = document.querySelector('.custom-text'); | |
| const textColorInput = document.getElementById('text-color'); | |
| const generateBtn = document.getElementById('generate-btn'); | |
| const loadingOverlay = document.getElementById('loading-overlay'); | |
| const currentStyleElement = document.getElementById('current-style'); | |
| const currentColorElement = document.getElementById('current-color'); | |
| const dressContainer = document.getElementById('dress-container'); | |
| const aiSuggestionBtn = document.querySelector('.ai-suggestion-btn'); | |
| // Initialize | |
| updateDisplay(); | |
| // Event listeners | |
| colorOptions.forEach(option => { | |
| option.addEventListener('click', function() { | |
| // Remove selected class from all options | |
| colorOptions.forEach(opt => opt.classList.remove('selected')); | |
| // Add selected class to clicked option | |
| this.classList.add('selected'); | |
| // Update design state | |
| designState.color = this.getAttribute('data-color'); | |
| // Update custom color picker | |
| customColorInput.value = designState.color; | |
| // Update display | |
| updateDisplay(); | |
| }); | |
| }); | |
| patternOptions.forEach(option => { | |
| option.addEventListener('click', function() { | |
| // Remove selected class from all options | |
| patternOptions.forEach(opt => opt.classList.remove('selected')); | |
| // Add selected class to clicked option | |
| this.classList.add('selected'); | |
| // Update design state | |
| designState.pattern = this.getAttribute('data-pattern'); | |
| // Update display | |
| updateDisplay(); | |
| }); | |
| }); | |
| styleButtons.forEach(button => { | |
| button.addEventListener('click', function() { | |
| // Update design state | |
| designState.style = this.getAttribute('data-style'); | |
| // Update display | |
| updateDisplay(); | |
| }); | |
| }); | |
| sizeButtons.forEach(button => { | |
| button.addEventListener('click', function() { | |
| // Remove selected styling from all buttons | |
| sizeButtons.forEach(btn => { | |
| btn.classList.remove('bg-indigo-100', 'border-indigo-500', 'text-indigo-700', 'border-2'); | |
| btn.classList.add('bg-gray-100', 'border-gray-200', 'text-gray-800'); | |
| }); | |
| // Add selected styling to clicked button | |
| this.classList.remove('bg-gray-100', 'border-gray-200', 'text-gray-800'); | |
| this.classList.add('bg-indigo-100', 'border-indigo-500', 'text-indigo-700', 'border-2'); | |
| // Update design state | |
| designState.size = this.getAttribute('data-size'); | |
| }); | |
| }); | |
| viewButtons.forEach(button => { | |
| button.addEventListener('click', function() { | |
| // Remove selected styling from all buttons | |
| viewButtons.forEach(btn => { | |
| btn.classList.remove('bg-indigo-100', 'text-indigo-700'); | |
| btn.classList.add('bg-gray-100', 'text-gray-800'); | |
| }); | |
| // Add selected styling to clicked button | |
| this.classList.remove('bg-gray-100', 'text-gray-800'); | |
| this.classList.add('bg-indigo-100', 'text-indigo-700'); | |
| // Update design state | |
| designState.view = this.getAttribute('data-view'); | |
| // Update display | |
| updateDisplay(); | |
| }); | |
| }); | |
| customColorInput.addEventListener('input', function() { | |
| // Update design state | |
| designState.color = this.value; | |
| // Find matching color option if exists | |
| let matchingOption = null; | |
| colorOptions.forEach(option => { | |
| if (option.getAttribute('data-color').toLowerCase() === this.value.toLowerCase()) { | |
| matchingOption = option; | |
| } | |
| }); | |
| // Update selected color option | |
| colorOptions.forEach(opt => opt.classList.remove('selected')); | |
| if (matchingOption) { | |
| matchingOption.classList.add('selected'); | |
| } else { | |
| // If custom color doesn't match any option, select the custom color | |
| // (in a real app, you might add a new option dynamically) | |
| } | |
| // Update display | |
| updateDisplay(); | |
| }); | |
| customTextInput.addEventListener('input', function() { | |
| designState.customText = this.value; | |
| }); | |
| textColorInput.addEventListener('input', function() { | |
| designState.textColor = this.value; | |
| }); | |
| generateBtn.addEventListener('click', function() { | |
| // Show loading overlay | |
| loadingOverlay.classList.remove('hidden'); | |
| // Simulate AI generation (in a real app, this would call an API) | |
| setTimeout(() => { | |
| // Hide loading overlay | |
| loadingOverlay.classList.add('hidden'); | |
| // Update display with "AI-generated" design | |
| updateDisplay(true); | |
| // Show success message | |
| alert('هوش مصنوعی یک طرح جدید بر اساس ترجیحات شما تولید کرد!'); | |
| }, 2000); | |
| }); | |
| aiSuggestionBtn.addEventListener('click', function() { | |
| // Apply AI suggestion | |
| designState.color = '#a855f7'; // Purple | |
| designState.pattern = 'floral'; | |
| // Update UI to match new state | |
| colorOptions.forEach(opt => opt.classList.remove('selected')); | |
| document.querySelector('.color-option[data-color="#a855f7"]').classList.add('selected'); | |
| patternOptions.forEach(opt => opt.classList.remove('selected')); | |
| document.querySelector('.pattern-option[data-pattern="floral"]').classList.add('selected'); | |
| customColorInput.value = designState.color; | |
| // Update display | |
| updateDisplay(); | |
| // Show message | |
| alert('پیشنهاد هوش مصنوعی اعمال شد!'); | |
| }); | |
| // Update the dress display | |
| function updateDisplay(isAIGenerated = false) { | |
| // Update info text | |
| currentStyleElement.textContent = styleNames[designState.style]; | |
| currentColorElement.textContent = colorNames[designState.color] || 'سفارشی'; | |
| const dressDisplay = document.querySelector('.dress-display'); | |
| const initialPrompt = document.getElementById('initial-prompt'); | |
| const aiDesign = document.getElementById('ai-design'); | |
| if (isAIGenerated) { | |
| initialPrompt.classList.add('hidden'); | |
| aiDesign.classList.remove('hidden'); | |
| // Generate AI-enhanced design | |
| const designElements = { | |
| casual: ['fas fa-tshirt', 'طرح روزمره'], | |
| formal: ['fas fa-user-tie', 'طراحی رسمی'], | |
| party: ['fas fa-glass-cheers', 'طرح مهمانی'], | |
| sport: ['fas fa-running', 'طراحی ورزشی'] | |
| }; | |
| const [icon, title] = designElements[designState.style]; | |
| const colorName = colorNames[designState.color] || 'سفارشی'; | |
| aiDesign.innerHTML = ` | |
| <div class="text-center p-4 bg-white bg-opacity-20 rounded-xl"> | |
| <i class="${icon} text-6xl text-white mb-3"></i> | |
| <h3 class="text-xl font-bold text-white">${title}</h3> | |
| <p class="text-white">رنگ: ${colorName}</p> | |
| <p class="text-white">طرح: ${designState.pattern}</p> | |
| <div class="mt-4 w-full h-1 bg-white bg-opacity-50"></div> | |
| <p class="text-white mt-2 text-sm">طراحی شده با هوش مصنوعی</p> | |
| </div> | |
| `; | |
| // Apply creative pattern based on user selection | |
| dressDisplay.style.background = getAIPattern(designState.pattern, designState.color); | |
| } else { | |
| initialPrompt.classList.remove('hidden'); | |
| aiDesign.classList.add('hidden'); | |
| dressDisplay.style.background = getBasicPattern(designState.pattern, designState.color); | |
| } | |
| } | |
| function getBasicPattern(pattern, color) { | |
| switch(pattern) { | |
| case 'solid': return color; | |
| case 'stripes': | |
| return `linear-gradient(45deg, ${color} 25%, #ffffff 25%, #ffffff 50%, ${color} 50%, ${color} 75%, #ffffff 75%, #ffffff 100%)`; | |
| case 'polka': | |
| return `radial-gradient(circle, ${color} 20%, transparent 20%), #ffffff`; | |
| case 'floral': | |
| return `url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCI+PHBhdGggZD0iTTQwIDBDMjAgMTAgMTAgMzAgMTAgNTBjMCAyMCAxMCA0MCAzMCA1MCAyMC0xMCAzMC0zMCAzMC01MEM3MCAzMCA2MCAxMCA0MCB6IiBmaWxsPSJ${color.substring(1)}Ii8+PC9zdmc+')`; | |
| case 'geometric': | |
| return `url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCI+PHBhdGggZD0iTTAgMEg1MFY1MEgweiIgZmlsbD0i${color.substring(1)}Ii8+PHBhdGggZD0iTTUwIDBIMTAwVjUwSDUweiIgZmlsbD0i${color.substring(1)}Ii8+PC9zdmc+')`; | |
| default: return color; | |
| } | |
| } | |
| function getAIPattern(pattern, color) { | |
| // More creative patterns for AI version | |
| switch(pattern) { | |
| case 'solid': | |
| return `linear-gradient(135deg, ${color} 0%, ${shadeColor(color, -20)} 100%)`; | |
| case 'stripes': | |
| return `repeating-linear-gradient(45deg, ${color}, ${color} 10px, ${shadeColor(color, -30)} 10px, ${shadeColor(color, -30)} 20px)`; | |
| case 'polka': | |
| return `radial-gradient(circle at 10px 10px, ${color} 2px, transparent 2px), | |
| radial-gradient(circle at 10px 10px, ${color} 2px, transparent 2px) ${shadeColor(color, 20)}; | |
| background-size: 20px 20px`; | |
| case 'floral': | |
| return `url('data:image/svg+xml;base64,${btoa(` | |
| <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"> | |
| <path d="M50 0C30 15 15 30 0 50c15 20 30 35 50 50 20-15 35-30 50-50C85 30 70 15 50 0z" | |
| fill="${color}"/> | |
| <path d="M30 20C15 30 5 45 0 60c10 15 25 25 40 30-5-15-5-30 0-45-5 5-10 10-10 15z" | |
| fill="${shadeColor(color, 20)}"/> | |
| </svg>`)}')`; | |
| case 'geometric': | |
| return `url('data:image/svg+xml;base64,${btoa(` | |
| <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"> | |
| <polygon points="0,0 50,0 0,50" fill="${color}"/> | |
| <polygon points="50,0 100,0 100,50" fill="${shadeColor(color, -20)}"/> | |
| <polygon points="0,50 0,100 50,100" fill="${shadeColor(color, 20)}"/> | |
| <polygon points="50,100 100,100 100,50" fill="${shadeColor(color, -30)}"/> | |
| </svg>`)}')`; | |
| default: | |
| return `linear-gradient(135deg, ${color} 0%, ${shadeColor(color, -20)} 100%)`; | |
| } | |
| } | |
| function shadeColor(color, percent) { | |
| let R = parseInt(color.substring(1,3), 16); | |
| let G = parseInt(color.substring(3,5), 16); | |
| let B = parseInt(color.substring(5,7), 16); | |
| R = parseInt(R * (100 + percent) / 100); | |
| G = parseInt(G * (100 + percent) / 100); | |
| B = parseInt(B * (100 + percent) / 100); | |
| R = (R<255)?R:255; | |
| G = (G<255)?G:255; | |
| B = (B<255)?B:255; | |
| R = Math.round(R); | |
| G = Math.round(G); | |
| B = Math.round(B); | |
| const RR = ((R.toString(16).length==1)?"0"+R.toString(16):R.toString(16)); | |
| const GG = ((G.toString(16).length==1)?"0"+G.toString(16):G.toString(16)); | |
| const BB = ((B.toString(16).length==1)?"0"+B.toString(16):B.toString(16)); | |
| return "#"+RR+GG+BB; | |
| } | |
| }); | |
| </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=mahdirahdar/first" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |