Spaces:

ammar101
/

virtualaidressing

Sleeping

File size: 14,204 Bytes

0bb49b0

{% load static %}
{% load i18n %}
{% load i18n_helpers %}
<!DOCTYPE html>
<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>