Spaces:
Running
Running
| {% load static %} | |
| {% load i18n %} | |
| {% load i18n_helpers %} | |
| <html lang="{{ LANGUAGE_CODE }}" dir="{% if LANGUAGE_BIDI %}rtl{% else %}ltr{% endif %}"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>{% block title %}{% trans "Virtual Fitting System" %}{% endblock %}</title> | |
| <!-- Tailwind CSS --> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <!-- Custom Tailwind Config --> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#1B3A6B', | |
| secondary: '#2E5FA3', | |
| accent: '#5B8FC9', | |
| surface: '#7DB8D8', | |
| background: '#EAF3F8', | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <!-- Google Fonts --> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" | |
| rel="stylesheet"> | |
| <style> | |
| * { | |
| scroll-behavior: smooth; | |
| } | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #1B3A6B 0%, #2E5FA3 50%, #5B8FC9 100%); | |
| } | |
| /* Glassmorphism Effects */ | |
| .glass-effect { | |
| background: rgba(255, 255, 255, 0.1); | |
| backdrop-filter: blur(10px); | |
| border: 1px solid rgba(255, 255, 255, 0.2); | |
| } | |
| .glass-card { | |
| background: rgba(255, 255, 255, 0.95); | |
| backdrop-filter: blur(20px) saturate(180%); | |
| border: 1px solid rgba(255, 255, 255, 0.3); | |
| } | |
| .glass-filter { | |
| background: linear-gradient(135deg, rgba(27, 58, 107, 0.08) 0%, rgba(46, 95, 163, 0.08) 100%); | |
| backdrop-filter: blur(16px) saturate(180%); | |
| border: 1px solid rgba(255, 255, 255, 0.2); | |
| } | |
| /* Hover Effects */ | |
| .hover-lift { | |
| transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), | |
| box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| .hover-lift:hover { | |
| transform: translateY(-8px) scale(1.02); | |
| box-shadow: 0 25px 50px rgba(27, 58, 107, 0.25); | |
| } | |
| .hover-glow { | |
| transition: all 0.3s ease; | |
| position: relative; | |
| } | |
| .hover-glow:hover { | |
| box-shadow: 0 0 30px rgba(91, 143, 201, 0.4), | |
| 0 0 60px rgba(46, 95, 163, 0.2); | |
| } | |
| /* Gradient Overlays */ | |
| .gradient-overlay { | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .gradient-overlay::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: linear-gradient(135deg, rgba(27, 58, 107, 0.08) 0%, rgba(91, 143, 201, 0.08) 100%); | |
| opacity: 0; | |
| transition: opacity 0.3s ease; | |
| } | |
| .gradient-overlay:hover::before { | |
| opacity: 1; | |
| } | |
| /* Animations */ | |
| .pulse-animation { | |
| animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; | |
| } | |
| @keyframes pulse { | |
| 0%, | |
| 100% { | |
| opacity: 1; | |
| } | |
| 50% { | |
| opacity: .7; | |
| } | |
| } | |
| .fade-in { | |
| animation: fadeIn 0.6s ease-out forwards; | |
| } | |
| @keyframes fadeIn { | |
| from { | |
| opacity: 0; | |
| transform: translateY(20px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| .slide-up { | |
| animation: slideUp 0.5s ease-out forwards; | |
| } | |
| @keyframes slideUp { | |
| from { | |
| opacity: 0; | |
| transform: translateY(30px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| .scale-in { | |
| animation: scaleIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards; | |
| } | |
| @keyframes scaleIn { | |
| from { | |
| opacity: 0; | |
| transform: scale(0.9); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: scale(1); | |
| } | |
| } | |
| /* Stagger animation delays */ | |
| .stagger-1 { | |
| animation-delay: 0.1s; | |
| } | |
| .stagger-2 { | |
| animation-delay: 0.2s; | |
| } | |
| .stagger-3 { | |
| animation-delay: 0.3s; | |
| } | |
| .stagger-4 { | |
| animation-delay: 0.4s; | |
| } | |
| /* Image zoom effect */ | |
| .image-zoom { | |
| overflow: hidden; | |
| } | |
| .image-zoom img { | |
| transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| .image-zoom:hover img { | |
| transform: scale(1.1); | |
| } | |
| /* Floating badge */ | |
| .floating-badge { | |
| animation: float 3s ease-in-out infinite; | |
| } | |
| @keyframes float { | |
| 0%, | |
| 100% { | |
| transform: translateY(0px); | |
| } | |
| 50% { | |
| transform: translateY(-5px); | |
| } | |
| } | |
| /* Shimmer effect */ | |
| .shimmer { | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .shimmer::after { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: -100%; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent); | |
| animation: shimmer 2s infinite; | |
| } | |
| @keyframes shimmer { | |
| 0% { | |
| left: -100%; | |
| } | |
| 100% { | |
| left: 100%; | |
| } | |
| } | |
| /* RTL support for Arabic */ | |
| [dir="rtl"] body { | |
| text-align: right; | |
| } | |
| [dir="rtl"] .space-x-6 > * + * { | |
| margin-left: 0; | |
| margin-right: 1.5rem; | |
| } | |
| [dir="rtl"] .space-y-2 > * + * { | |
| margin-top: 0.5rem; | |
| } | |
| [dir="rtl"] .text-left { | |
| text-align: right; | |
| } | |
| [dir="rtl"] .text-right { | |
| text-align: left; | |
| } | |
| </style> | |
| {% block extra_css %}{% endblock %} | |
| </head> | |
| <body class="bg-[#EAF3F8] min-h-screen"> | |
| <!-- Navigation --> | |
| <nav class="bg-white shadow-lg sticky top-0 z-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between items-center h-16"> | |
| <div class="flex items-center" style="margin-left: -1rem;"> | |
| <a href="{% url 'fitting_system:index' %}" class="flex items-center"> | |
| <img src="{% static 'images/products/Gemini_Generated_Image_k8jh4tk8jh4tk8jh.png' %}" | |
| alt="HRT Logo" class="h-14 w-auto"> | |
| </a> | |
| </div> | |
| <div class="hidden md:flex items-center gap-6"> | |
| <a href="{% url 'fitting_system:index' %}" | |
| class="text-gray-700 hover:text-[#2E5FA3] font-medium transition">{% trans "Home" %}</a> | |
| <a href="{% url 'fitting_system:store' %}" | |
| class="text-gray-700 hover:text-[#2E5FA3] font-medium transition">{% trans "Store" %}</a> | |
| <a href="{% url 'fitting_system:scan' %}" | |
| class="bg-gradient-to-r from-[#1B3A6B] to-[#2E5FA3] text-white px-6 py-2 rounded-lg hover:shadow-lg transition transform hover:scale-105"> | |
| {% trans "Try Virtual Fitting" %} | |
| </a> | |
| <a href="{% url 'fitting_system:inventory' %}" | |
| class="text-gray-700 hover:text-[#2E5FA3] font-medium transition">{% trans "Inventory" %}</a> | |
| <form id="language-form" action="{% url 'set_language' %}" method="post" class="inline-flex items-center gap-2"> | |
| {% csrf_token %} | |
| <input name="next" type="hidden" id="lang-next" value=""> | |
| <select name="language" id="lang-select" class="rounded border border-gray-300 px-2 py-1 text-sm focus:ring-[#2E5FA3] focus:border-[#2E5FA3]"> | |
| {% get_current_language as CURRENT_LANG %} | |
| {% for code, name in LANGUAGES %} | |
| <option value="{{ code }}" data-next="{% path_for_lang code %}" {% if code == CURRENT_LANG %}selected{% endif %}>{{ name }}</option> | |
| {% endfor %} | |
| </select> | |
| </form> | |
| </div> | |
| <!-- Mobile menu button --> | |
| <div class="md:hidden"> | |
| <button id="mobile-menu-button" class="text-gray-700 hover:text-[#2E5FA3]"> | |
| <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" | |
| d="M4 6h16M4 12h16M4 18h16"></path> | |
| </svg> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mobile menu --> | |
| <div id="mobile-menu" class="hidden md:hidden bg-white border-t"> | |
| <div class="px-4 py-3 space-y-2"> | |
| <a href="{% url 'fitting_system:index' %}" | |
| class="block text-gray-700 hover:text-[#2E5FA3] font-medium py-2">{% trans "Home" %}</a> | |
| <a href="{% url 'fitting_system:store' %}" | |
| class="block text-gray-700 hover:text-[#2E5FA3] font-medium py-2">{% trans "Store" %}</a> | |
| <a href="{% url 'fitting_system:scan' %}" | |
| class="block bg-gradient-to-r from-[#1B3A6B] to-[#2E5FA3] text-white px-6 py-2 rounded-lg text-center">{% trans "Try Virtual Fitting" %}</a> | |
| <a href="{% url 'fitting_system:inventory' %}" | |
| class="block text-gray-700 hover:text-[#2E5FA3] font-medium py-2">{% trans "Inventory" %}</a> | |
| <form id="language-form-mobile" action="{% url 'set_language' %}" method="post" class="pt-2"> | |
| {% csrf_token %} | |
| <input name="next" type="hidden" id="lang-next-mobile" value=""> | |
| <select name="language" id="lang-select-mobile" class="w-full rounded border border-gray-300 px-2 py-1 text-sm"> | |
| {% get_current_language as CURRENT_LANG %} | |
| {% for code, name in LANGUAGES %} | |
| <option value="{{ code }}" data-next="{% path_for_lang code %}" {% if code == CURRENT_LANG %}selected{% endif %}>{{ name }}</option> | |
| {% endfor %} | |
| </select> | |
| </form> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Main Content --> | |
| <main> | |
| {% block content %}{% endblock %} | |
| </main> | |
| <!-- Footer --> | |
| <footer class="bg-[#1B3A6B] text-white mt-20"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12"> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div> | |
| <h3 class="text-lg font-bold mb-4">{% trans "Virtual Fitting System" %}</h3> | |
| <p class="text-[#7DB8D8]">{% trans "AI-powered virtual fitting for the perfect size and style." %}</p> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-bold mb-4">{% trans "Quick Links" %}</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="{% url 'fitting_system:index' %}" | |
| class="text-[#7DB8D8] hover:text-white transition">{% trans "Home" %}</a></li> | |
| <li><a href="{% url 'fitting_system:store' %}" | |
| class="text-[#7DB8D8] hover:text-white transition">{% trans "Store" %}</a></li> | |
| <li><a href="{% url 'fitting_system:scan' %}" | |
| class="text-[#7DB8D8] hover:text-white transition">{% trans "Virtual Fitting" %}</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-bold mb-4">{% trans "Contact" %}</h3> | |
| <p class="text-[#7DB8D8]">{% trans "In-store system prototype" %}</p> | |
| <p class="text-[#7DB8D8] mt-2">© 2026 {% trans "Virtual Fitting System" %}</p> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Mobile menu toggle script --> | |
| <script> | |
| document.getElementById('mobile-menu-button').addEventListener('click', function () { | |
| const menu = document.getElementById('mobile-menu'); | |
| menu.classList.toggle('hidden'); | |
| }); | |
| function initLanguageForm(formId, nextId, selectId) { | |
| var form = document.getElementById(formId); | |
| var nextInput = document.getElementById(nextId); | |
| var select = document.getElementById(selectId); | |
| if (form && nextInput && select) { | |
| select.addEventListener('change', function() { | |
| var opt = select.options[select.selectedIndex]; | |
| nextInput.value = opt.getAttribute('data-next') || opt.value; | |
| form.submit(); | |
| }); | |
| var opt = select.options[select.selectedIndex]; | |
| nextInput.value = opt.getAttribute('data-next') || opt.value; | |
| } | |
| } | |
| initLanguageForm('language-form', 'lang-next', 'lang-select'); | |
| initLanguageForm('language-form-mobile', 'lang-next-mobile', 'lang-select-mobile'); | |
| </script> | |
| {% block extra_js %}{% endblock %} | |
| </body> | |
| </html> | |