Spaces:
Running
Running
| <html lang="fa" 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> | |
| <link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@200;400;600;800&display=swap" rel="stylesheet"> | |
| <style> | |
| :root { | |
| --bg: #faf8f5; | |
| --fg: #2d2a26; | |
| --muted: #8a847a; | |
| --accent: #c4704b; | |
| --card: #ffffff; | |
| --border: #e8e4de; | |
| } | |
| * { | |
| font-family: 'Vazirmatn', sans-serif; | |
| } | |
| body { | |
| background: var(--bg); | |
| color: var(--fg); | |
| } | |
| .story-ring { | |
| background: linear-gradient(135deg, #c4704b, #e8a87c, #c4704b); | |
| padding: 3px; | |
| border-radius: 50%; | |
| } | |
| .story-ring.viewed { | |
| background: var(--border); | |
| } | |
| .product-card { | |
| break-inside: avoid; | |
| animation: fadeUp 0.5s ease forwards; | |
| opacity: 0; | |
| } | |
| @keyframes fadeUp { | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| from { | |
| opacity: 0; | |
| transform: translateY(20px); | |
| } | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { transform: scale(1); } | |
| 50% { transform: scale(1.05); } | |
| } | |
| .story-item:hover .story-ring { | |
| animation: pulse 0.6s ease; | |
| } | |
| .tab-active { | |
| color: var(--accent); | |
| border-bottom: 2px solid var(--accent); | |
| } | |
| .video-card { | |
| aspect-ratio: 9/16; | |
| background: linear-gradient(180deg, #2d2a26 0%, #4a4540 100%); | |
| } | |
| .overlay-gradient { | |
| background: linear-gradient(0deg, rgba(0,0,0,0.7) 0%, transparent 50%); | |
| } | |
| .settings-menu { | |
| transform: translateY(-10px); | |
| opacity: 0; | |
| visibility: hidden; | |
| transition: all 0.2s ease; | |
| } | |
| .settings-menu.active { | |
| transform: translateY(0); | |
| opacity: 1; | |
| visibility: visible; | |
| } | |
| @media (prefers-reduced-motion: reduce) { | |
| .product-card, .story-item:hover .story-ring { | |
| animation: none; | |
| opacity: 1; | |
| } | |
| } | |
| ::-webkit-scrollbar { | |
| width: 4px; | |
| height: 4px; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: var(--accent); | |
| border-radius: 10px; | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen pb-20"> | |
| <!-- Header --> | |
| <header class="sticky top-0 z-50 bg-white/80 backdrop-blur-lg border-b border-[var(--border)]"> | |
| <div class="max-w-lg mx-auto px-4 py-3 flex items-center justify-between"> | |
| <button id="settingsBtn" class="p-2 hover:bg-[var(--border)] rounded-xl transition-colors" aria-label="تنظیمات"> | |
| <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 6h16M4 12h16M4 18h16"/> | |
| </svg> | |
| </button> | |
| <h1 class="text-lg font-semibold">گالری استایل</h1> | |
| <button class="p-2 hover:bg-[var(--border)] rounded-xl transition-colors relative" aria-label="سبد خرید"> | |
| <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"/> | |
| </svg> | |
| <span class="absolute -top-1 -left-1 w-5 h-5 bg-[var(--accent)] text-white text-xs rounded-full flex items-center justify-center">3</span> | |
| </button> | |
| </div> | |
| <!-- Settings Dropdown --> | |
| <div id="settingsMenu" class="settings-menu absolute top-full left-4 w-56 bg-white rounded-2xl shadow-xl border border-[var(--border)] p-2 z-50"> | |
| <a href="#" class="flex items-center gap-3 px-4 py-3 hover:bg-[var(--bg)] rounded-xl transition-colors"> | |
| <svg class="w-5 h-5 text-[var(--muted)]" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/> | |
| </svg> | |
| <span>ویرایش پروفایل</span> | |
| </a> | |
| <a href="#" class="flex items-center gap-3 px-4 py-3 hover:bg-[var(--bg)] rounded-xl transition-colors"> | |
| <svg class="w-5 h-5 text-[var(--muted)]" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/> | |
| </svg> | |
| <span>تنظیمات حساب</span> | |
| </a> | |
| <a href="#" class="flex items-center gap-3 px-4 py-3 hover:bg-[var(--bg)] rounded-xl transition-colors"> | |
| <svg class="w-5 h-5 text-[var(--muted)]" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/> | |
| </svg> | |
| <span>سفارشهای من</span> | |
| </a> | |
| <a href="#" class="flex items-center gap-3 px-4 py-3 hover:bg-[var(--bg)] rounded-xl transition-colors"> | |
| <svg class="w-5 h-5 text-[var(--muted)]" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"/> | |
| </svg> | |
| <span>علاقهمندیها</span> | |
| </a> | |
| <hr class="my-2 border-[var(--border)]"> | |
| <a href="#" class="flex items-center gap-3 px-4 py-3 text-red-500 hover:bg-red-50 rounded-xl transition-colors"> | |
| <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"/> | |
| </svg> | |
| <span>خروج</span> | |
| </a> | |
| </div> | |
| </header> | |
| <main class="max-w-lg mx-auto px-4"> | |
| <!-- Profile Section --> | |
| <section class="py-6"> | |
| <div class="flex items-center gap-6"> | |
| <div class="story-ring shrink-0"> | |
| <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=150&h=150&fit=crop" | |
| alt="پروفایل" | |
| class="w-20 h-20 rounded-full object-cover border-2 border-white"> | |
| </div> | |
| <div class="flex-1 text-center"> | |
| <div class="grid grid-cols-3 gap-4"> | |
| <div> | |
| <span class="block text-xl font-bold">۱۲۸</span> | |
| <span class="text-sm text-[var(--muted)]">محصول</span> | |
| </div> | |
| <div> | |
| <span class="block text-xl font-bold">۱۲.۵K</span> | |
| <span class="text-sm text-[var(--muted)]">دنبالکننده</span> | |
| </div> | |
| <div> | |
| <span class="block text-xl font-bold">۸۹۲</span> | |
| <span class="text-sm text-[var(--muted)]">دنبالشده</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <h2 class="font-semibold text-lg">گالری استایل</h2> | |
| <p class="text-[var(--muted)] text-sm mt-1">فروشگاه آنلاین پوشاک و اکسسوری</p> | |
| <p class="text-sm mt-2">ارسال به سراسر ایران | ضمانت اصالت کالا</p> | |
| </div> | |
| <div class="flex gap-2 mt-4"> | |
| <button class="flex-1 py-2 bg-[var(--fg)] text-white rounded-xl font-medium hover:opacity-90 transition-opacity"> | |
| دنبال کردن | |
| </button> | |
| <button class="flex-1 py-2 border border-[var(--border)] rounded-xl font-medium hover:bg-[var(--border)] transition-colors"> | |
| پیام | |
| </button> | |
| <button class="py-2 px-4 border border-[var(--border)] rounded-xl hover:bg-[var(--border)] transition-colors" aria-label="اشتراکگذاری"> | |
| <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z"/> | |
| </svg> | |
| </button> | |
| </div> | |
| </section> | |
| <!-- Stories --> | |
| <section class="py-4 border-y border-[var(--border)]"> | |
| <div class="flex gap-4 overflow-x-auto pb-2 scrollbar-hide"> | |
| <div class="story-item shrink-0 text-center cursor-pointer"> | |
| <div class="w-16 h-16 rounded-full border-2 border-dashed border-[var(--accent)] flex items-center justify-center mb-1"> | |
| <svg class="w-6 h-6 text-[var(--accent)]" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/> | |
| </svg> | |
| </div> | |
| <span class="text-xs">جدید</span> | |
| </div> | |
| <div class="story-item shrink-0 text-center cursor-pointer"> | |
| <div class="story-ring mb-1"> | |
| <img src="https://images.unsplash.com/photo-1441986300917-64674bd600d8?w=100&h=100&fit=crop" | |
| alt="استوری" class="w-16 h-16 rounded-full object-cover border-2 border-white"> | |
| </div> | |
| <span class="text-xs">تخفیف</span> | |
| </div> | |
| <div class="story-item shrink-0 text-center cursor-pointer"> | |
| <div class="story-ring mb-1"> | |
| <img src="https://images.unsplash.com/photo-1445205170230-053b83016050?w=100&h=100&fit=crop" | |
| alt="استوری" class="w-16 h-16 rounded-full object-cover border-2 border-white"> | |
| </div> | |
| <span class="text-xs">جدید</span> | |
| </div> | |
| <div class="story-item shrink-0 text-center cursor-pointer"> | |
| <div class="story-ring viewed mb-1"> | |
| <img src="https://images.unsplash.com/photo-1490481651871-ab68de25d43d?w=100&h=100&fit=crop" | |
| alt="استوری" class="w-16 h-16 rounded-full object-cover border-2 border-white"> | |
| </div> | |
| <span class="text-xs text-[var(--muted)]">پوشاک</span> | |
| </div> | |
| <div class="story-item shrink-0 text-center cursor-pointer"> | |
| <div class="story-ring viewed mb-1"> | |
| <img src="https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=100&h=100&fit=crop" | |
| alt="استوری" class="w-16 h-16 rounded-full object-cover border-2 border-white"> | |
| </div> | |
| <span class="text-xs text-[var(--muted)]">اکسسوری</span> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Tabs --> | |
| <nav class="flex border-b border-[var(--border)]"> | |
| <button class="tab-btn flex-1 py-4 flex justify-center tab-active" data-tab="products" aria-label="محصولات"> | |
| <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"/> | |
| </svg> | |
| </button> | |
| <button class="tab-btn flex-1 py-4 flex justify-center text-[var(--muted)]" data-tab="videos" aria-label="ویدیوها"> | |
| <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"/> | |
| </svg> | |
| </button> | |
| <button class="tab-btn flex-1 py-4 flex justify-center text-[var(--muted)]" data-tab="tagged" aria-label="تگ شده"> | |
| <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"/> | |
| </svg> | |
| </button> | |
| </nav> | |
| <!-- Products Grid --> | |
| <section id="productsTab" class="tab-content py-4"> | |
| <div class="grid grid-cols-3 gap-1" id="productsGrid"></div> | |
| </section> | |
| <!-- Videos Grid --> | |
| <section id="videosTab" class="tab-content hidden py-4"> | |
| <div class="grid grid-cols-2 gap-2" id="videosGrid"></div> | |
| </section> | |
| <!-- Tagged Grid --> | |
| <section id="taggedTab" class="tab-content hidden py-4"> | |
| <div class="text-center py-12 text-[var(--muted)]"> | |
| <svg class="w-16 h-16 mx-auto mb-4 opacity-50" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"/> | |
| </svg> | |
| <p>هنوز محصول تگ شدهای ندارید</p> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- Built with anycoder --> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" | |
| target="_blank" | |
| class="fixed bottom-4 left-4 text-xs text-[var(--muted)] hover:text-[var(--accent)] transition-colors"> | |
| Built with anycoder | |
| </a> | |
| <script> | |
| // Data | |
| const products = [ | |
| { id: 1, image: 'https://images.unsplash.com/photo-1434389677669-e08b4cac3105?w=400&h=500&fit=crop', price: '۴۵۰,۰۰۰', likes: 234 }, | |
| { id: 2, image: 'https://images.unsplash.com/photo-1525507119028-ed4c629a60a3?w=400&h=400&fit=crop', price: '۳۲۰,۰۰۰', likes: 189 }, | |
| { id: 3, image: 'https://images.unsplash.com/photo-1591047139829-d91aecb6caea?w=400&h=600&fit=crop', price: '۵۸۰,۰۰۰', likes: 312 }, | |
| { id: 4, image: 'https://images.unsplash.com/photo-1551028719-00167b16eac5?w=400&h=450&fit=crop', price: '۲۹۰,۰۰۰', likes: 156 }, | |
| { id: 5, image: 'https://images.unsplash.com/photo-1560243563-062bfc001d68?w=400&h=500&fit=crop', price: '۴۱۵,۰۰۰', likes: 278 }, | |
| { id: 6, image: 'https://images.unsplash.com/photo-1515886657613-9f3515b0c78f?w=400&h=550&fit=crop', price: '۶۲۰,۰۰۰', likes: 421 }, | |
| { id: 7, image: 'https://images.unsplash.com/photo-1509631179647-0177331693ae?w=400&h=400&fit=crop', price: '۳۵۵,۰۰۰', likes: 198 }, | |
| { id: 8, image: 'https://images.unsplash.com/photo-1485968579580-b6d095142e6e?w=400&h=480&fit=crop', price: '۴۷۰,۰۰۰', likes: 267 }, | |
| { id: 9, image: 'https://images.unsplash.com/photo-1469334031218-e382a71b716b?w=400&h=520&fit=crop', price: '۵۳۵,۰۰۰', likes: 345 }, | |
| { id: 10, image: 'https://images.unsplash.com/photo-1483985988355-763728e1935b?w=400&h=450&fit=crop', price: '۳۸۰,۰۰۰', likes: 213 }, | |
| { id: 11, image: 'https://images.unsplash.com/photo-1475180098004-ca77a66827be?w=400&h=500&fit=crop', price: '۴۹۵,۰۰۰', likes: 289 }, | |
| { id: 12, image: 'https://images.unsplash.com/photo-1433659156656-69a8e5c76d77?w=400&h=420&fit=crop', price: '۲۷۵,۰۰۰', likes: 167 } | |
| ]; | |
| const videos = [ | |
| { id: 1, image: 'https://images.unsplash.com/photo-1509631179647-0177331693ae?w=300&h=500&fit=crop', views: '۱۲.۵K' }, | |
| { id: 2, image: 'https://images.unsplash.com/photo-1515886657613-9f3515b0c78f?w=300&h=500&fit=crop', views: '۸.۳K' }, | |
| { id: 3, image: 'https://images.unsplash.com/photo-1525507119028-ed4c629a60a3?w=300&h=500&fit=crop', views: '۱۵.۲K' }, | |
| { id: 4, image: 'https://images.unsplash.com/photo-1469334031218-e382a71b716b?w=300&h=500&fit=crop', views: '۶.۷K' } | |
| ]; | |
| // DOM Elements | |
| const settingsBtn = document.getElementById('settingsBtn'); | |
| const settingsMenu = document.getElementById('settingsMenu'); | |
| const tabBtns = document.querySelectorAll('.tab-btn'); | |
| const productsGrid = document.getElementById('productsGrid'); | |
| const videosGrid = document.getElementById('videosGrid'); | |
| // Settings Menu Toggle | |
| settingsBtn.addEventListener('click', (e) => { | |
| e.stopPropagation(); | |
| settingsMenu.classList.toggle('active'); | |
| }); | |
| document.addEventListener('click', () => { | |
| settingsMenu.classList.remove('active'); | |
| }); | |
| // Tab Switching | |
| tabBtns.forEach(btn => { | |
| btn.addEventListener('click', () => { | |
| tabBtns.forEach(b => { | |
| b.classList.remove('tab-active'); | |
| b.classList.add('text-[var(--muted)]'); | |
| }); | |
| btn.classList.add('tab-active'); | |
| btn.classList.remove('text-[var(--muted)]'); | |
| document.querySelectorAll('.tab-content').forEach(content => { | |
| content.classList.add('hidden'); | |
| }); | |
| document.getElementById(`${btn.dataset.tab}Tab`).classList.remove('hidden'); | |
| }); | |
| }); | |
| // Render Products | |
| function renderProducts() { | |
| productsGrid.innerHTML = products.map((product, index) => ` | |
| <div class="product-card relative aspect-square overflow-hidden cursor-pointer group" style="animation-delay: ${index * 50}ms"> | |
| <img src="${product.image}" alt="محصول" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"> | |
| <div class="absolute inset-0 bg-black/0 group-hover:bg-black/30 transition-colors flex items-center justify-center opacity-0 group-hover:opacity-100"> | |
| <div class="flex items-center gap-3 text-white text-sm"> | |
| <span class="flex items-center gap-1"> | |
| <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"> | |
| <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/> | |
| </svg> | |
| ${product.likes} | |
| </span> | |
| <span class="font-bold">${product.price} ت</span> | |
| </div> | |
| </div> | |
| </div> | |
| `).join(''); | |
| } | |
| // Render Videos | |
| function renderVideos() { | |
| videosGrid.innerHTML = videos.map((video, index) => ` | |
| <div class="video-card relative rounded-2xl overflow-hidden cursor-pointer group" style="animation-delay: ${index * 100}ms"> | |
| <img src="${video.image}" alt="ویدیو" class="w-full h-full object-cover"> | |
| <div class="absolute inset-0 overlay-gradient"></div> | |
| <div class="absolute bottom-3 right-3 flex items-center gap-1 text-white text-sm"> | |
| <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"> | |
| <path d="M8 5v14l11-7z"/> | |
| </svg> | |
| ${video.views} | |
| </div> | |
| </div> | |
| `).join(''); | |
| } | |
| // Initialize | |
| renderProducts(); | |
| renderVideos(); | |
| </script> | |
| </body> | |
| </html> |