Spaces:
Sleeping
Sleeping
File size: 12,891 Bytes
0bb49b0 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 | {% extends 'base.html' %}
{% load static %}
{% load i18n %}
{% block title %}{% trans "Your Recommendations - Virtual Fitting System" %}{% endblock %}
{% block content %}
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
<!-- ===== SUCCESS HEADER ===== -->
<div class="text-center mb-12">
<div
class="inline-flex items-center justify-center w-20 h-20 bg-gradient-to-br from-green-400 to-emerald-500 rounded-full mb-4 shadow-lg">
<svg class="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7"></path>
</svg>
</div>
<h1 class="text-4xl font-extrabold text-gray-900 mb-2">{% trans "Scan Complete!" %}</h1>
<p class="text-xl text-gray-500">{% trans "Here are your personalised results" %}</p>
</div>
<!-- ===== AI RESULTS: SIZE + SKIN TONE ===== -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-10">
<!-- Recommended Size -->
<div
class="relative overflow-hidden bg-gradient-to-br from-[#1B3A6B] via-[#2E5FA3] to-[#5B8FC9] rounded-3xl p-8 text-white shadow-2xl">
<div class="absolute -top-6 -right-6 w-32 h-32 bg-white/10 rounded-full"></div>
<div class="absolute -bottom-8 -left-8 w-40 h-40 bg-white/5 rounded-full"></div>
<div class="relative z-10">
<div class="flex items-center gap-3 mb-4">
<div class="w-10 h-10 bg-white/20 rounded-xl flex items-center justify-center">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z">
</path>
</svg>
</div>
<span class="text-lg font-semibold text-white/80">{% trans "AI Recommended Size" %}</span>
</div>
<p class="text-8xl font-black tracking-tight leading-none mb-3">{{ recommended_size }}</p>
<p class="text-white/70 text-sm">{% trans "Based on your body measurements analysed by YOLO + LLM" %}
</p>
</div>
</div>
<!-- Skin Tone -->
<div
class="relative overflow-hidden bg-gradient-to-br from-amber-500 via-orange-500 to-rose-500 rounded-3xl p-8 text-white shadow-2xl">
<div class="absolute -top-6 -right-6 w-32 h-32 bg-white/10 rounded-full"></div>
<div class="absolute -bottom-8 -left-8 w-40 h-40 bg-white/5 rounded-full"></div>
<div class="relative z-10">
<div class="flex items-center gap-3 mb-4">
<div class="w-10 h-10 bg-white/20 rounded-xl flex items-center justify-center">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01">
</path>
</svg>
</div>
<span class="text-lg font-semibold text-white/80">{% trans "Detected Skin Tone" %}</span>
</div>
<!-- Skin tone visual indicator -->
<div class="flex items-center gap-4 mb-3">
<div class="w-16 h-16 rounded-2xl shadow-inner border-4 border-white/30
{% if body_scan.skin_tone == 'very_light' %}bg-[#f5e6d3]
{% elif body_scan.skin_tone == 'light' %}bg-[#e8c9a0]
{% elif body_scan.skin_tone == 'intermediate' %}bg-[#c8956c]
{% elif body_scan.skin_tone == 'tan' %}bg-[#a0694a]
{% else %}bg-[#6b3a2a]{% endif %}">
</div>
<div>
<p class="text-4xl font-black">{{ skin_tone_display }}</p>
<p class="text-white/70 text-sm capitalize">{{ undertone_display }} {% trans "undertone" %}</p>
</div>
</div>
<p class="text-white/70 text-sm">{% trans "Detected from your face selfie using colour analysis" %}</p>
</div>
</div>
</div>
<!-- ===== MATCHING PRODUCTS ===== -->
<div class="bg-white rounded-3xl shadow-xl p-8 mb-8">
<div class="flex items-center gap-3 mb-2">
<span class="text-3xl">🛍️</span>
<h2 class="text-2xl font-bold text-gray-900">{% trans "Products That Fit You" %}</h2>
</div>
<p class="text-gray-500 mb-6">
{% trans "All items below are available in your size" %}
<span class="inline-block px-3 py-1 bg-[#EAF3F8] text-[#1B3A6B] font-bold rounded-full text-sm ml-1">{{ recommended_size }}</span>
</p>
{% if matching_products %}
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{% for item in matching_products %}
<div
class="border-2 border-[#7DB8D8]/40 bg-gradient-to-br from-white to-[#EAF3F8]/30 rounded-2xl overflow-hidden hover:shadow-2xl hover:-translate-y-1 transition-all duration-300">
<!-- Size badge -->
<div
class="bg-gradient-to-r from-[#1B3A6B] to-[#2E5FA3] text-white text-center py-2 text-sm font-bold flex items-center justify-center gap-2">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
{% trans "Your Size" %}: {{ item.recommended_size }}
</div>
<!-- Product image: Priority to uploaded image, then fallback to static defaults -->
<div class="aspect-square bg-gradient-to-br from-gray-50 to-gray-100 relative overflow-hidden">
{% if item.product.image %}
<img src="{{ item.product.image.url }}" alt="{{ item.product_name }}"
class="w-full h-full object-cover">
{% elif item.product.category == 'shirt' and item.product.gender == 'men' %}
<img src="{% static 'images/products/mens_shirt.png' %}" alt="{{ item.product_name }}"
class="w-full h-full object-cover">
{% elif item.product.category == 'shirt' and item.product.gender == 'women' %}
<img src="{% static 'images/products/blouse.png' %}" alt="{{ item.product_name }}"
class="w-full h-full object-cover">
{% elif item.product.category == 'pants' or item.product.category == 'jeans' %}
<img src="{% static 'images/products/jeans.png' %}" alt="{{ item.product_name }}"
class="w-full h-full object-cover">
{% elif item.product.category == 'dress' %}
<img src="{% static 'images/products/womens_dress.png' %}" alt="{{ item.product_name }}"
class="w-full h-full object-cover">
{% elif item.product.category == 'jacket' %}
<img src="{% static 'images/products/jacket.png' %}" alt="{{ item.product_name }}"
class="w-full h-full object-cover">
{% else %}
<img src="{% static 'images/products/mens_shirt.png' %}" alt="{{ item.product_name }}"
class="w-full h-full object-cover">
{% endif %}
<!-- Category badge -->
<div class="absolute top-3 right-3">
<span
class="px-3 py-1 bg-white/90 backdrop-blur-sm text-[#1B3A6B] text-xs font-semibold rounded-full shadow capitalize">
{{ item.category_label }}
</span>
</div>
</div>
<!-- Product info -->
<div class="p-5">
<h3 class="font-bold text-lg text-gray-900 mb-4">{{ item.product_name }}</h3>
<!-- Size -->
<div class="flex items-center gap-3 mb-3">
<div class="w-10 h-10 bg-[#EAF3F8] rounded-full flex items-center justify-center flex-shrink-0">
<svg class="w-5 h-5 text-[#1B3A6B]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M5 13l4 4L19 7"></path>
</svg>
</div>
<div>
<span class="text-xs text-gray-500 uppercase tracking-wide">{% trans "Your Size" %}</span>
<p class="font-extrabold text-[#1B3A6B] text-2xl leading-tight">{{ item.recommended_size }}
</p>
</div>
</div>
<!-- Price -->
<div
class="text-3xl font-extrabold bg-gradient-to-r from-[#1B3A6B] to-[#2E5FA3] bg-clip-text text-transparent mb-4">
YER {{ item.product.price }}
</div>
<!-- CTA -->
<a href="{% url 'fitting_system:product_detail' item.product.id %}"
class="block w-full bg-gradient-to-r from-[#1B3A6B] to-[#2E5FA3] text-white text-center py-3 rounded-xl font-bold hover:shadow-lg transition transform hover:scale-105">
{% trans "View Product Details" %}
</a>
</div>
</div>
{% endfor %}
</div>
{% else %}
<div class="text-center py-16 bg-[#EAF3F8] rounded-2xl">
<svg class="w-20 h-20 text-[#7DB8D8] mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4">
</path>
</svg>
<p class="text-gray-600 text-lg font-medium">{% trans "No products in size" %} <strong>{{ recommended_size
}}</strong> {% trans "in stock right now" %}</p>
<p class="text-gray-400 mt-2">{% trans "Check back later or browse our full catalogue" %}</p>
</div>
{% endif %}
</div>
<!-- ===== ACTION BUTTONS ===== -->
<div class="flex gap-4 justify-center flex-wrap">
<a href="{% url 'fitting_system:store' %}"
class="bg-gradient-to-r from-[#1B3A6B] to-[#2E5FA3] text-white px-8 py-4 rounded-xl font-bold text-lg hover:shadow-xl transition transform hover:scale-105">
{% trans "Browse All Products" %}
</a>
<a href="{% url 'fitting_system:avatar' body_scan.session_id %}"
class="bg-gradient-to-r from-purple-600 to-indigo-600 text-white px-8 py-4 rounded-xl font-bold text-lg hover:shadow-xl transition transform hover:scale-105 flex items-center gap-2">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
</svg>
{% trans "View Your 3D Avatar" %}
</a>
<a href="{% url 'fitting_system:scan' %}"
class="bg-gray-700 text-white px-8 py-4 rounded-xl font-bold text-lg hover:bg-gray-800 hover:shadow-lg transition">
{% trans "Scan Another Customer" %}
</a>
</div>
</div>
{% endblock %}
|