Spaces:

samirerty
/

anycoder-ca4f61d4

Running

App Files Files Community

samirerty commited on Feb 22

Commit

153e8ab

verified ·

1 Parent(s): 2a58158

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +329 -1216

index.html CHANGED Viewed

@@ -3,1292 +3,405 @@
 <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="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
     <style>
         :root {
-            --bg-primary: #0f0f0f;
-            --bg-secondary: #1a1a1a;
-            --bg-card: #242424;
-            --accent: #e8b4b8;
-            --accent-hover: #d49a9f;
-            --text-primary: #f5f5f5;
-            --text-secondary: #a0a0a0;
-            --border: #333333;
-            --gradient-start: #e8b4b8;
-            --gradient-end: #a88b8e;
-        }
         * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        body {
             font-family: 'Vazirmatn', sans-serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            min-height: 100vh;
-            overflow-x: hidden;
-        }
-        /* Animated Background */
-        .bg-pattern {
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            pointer-events: none;
-            z-index: 0;
-            opacity: 0.4;
-        }
-        .bg-orb {
-            position: absolute;
-            border-radius: 50%;
-            filter: blur(80px);
-            animation: float 20s ease-in-out infinite;
-        }
-        .bg-orb-1 {
-            width: 400px;
-            height: 400px;
-            background: linear-gradient(135deg, var(--accent) 0%, transparent 70%);
-            top: -100px;
-            right: -100px;
-            animation-delay: 0s;
-        }
-        .bg-orb-2 {
-            width: 300px;
-            height: 300px;
-            background: linear-gradient(135deg, #8b7a7d 0%, transparent 70%);
-            bottom: 20%;
-            left: -50px;
-            animation-delay: -7s;
-        }
-        .bg-orb-3 {
-            width: 250px;
-            height: 250px;
-            background: linear-gradient(135deg, #6b5a5d 0%, transparent 70%);
-            top: 50%;
-            right: 10%;
-            animation-delay: -14s;
-        }
-        @keyframes float {
-            0%, 100% { transform: translate(0, 0) scale(1); }
-            33% { transform: translate(30px, -30px) scale(1.1); }
-            66% { transform: translate(-20px, 20px) scale(0.9); }
-        }
-        /* Header */
-        .header {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            z-index: 100;
-            background: rgba(15, 15, 15, 0.8);
-            backdrop-filter: blur(20px);
-            border-bottom: 1px solid var(--border);
-            padding: 1rem 1.5rem;
-        }
-        .header-content {
-            max-width: 1200px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        .logo {
-            font-size: 1.5rem;
-            font-weight: 800;
-            background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-        }
-        .header-actions {
-            display: flex;
-            gap: 0.75rem;
-        }
-        .icon-btn {
-            width: 44px;
-            height: 44px;
-            border-radius: 12px;
-            background: var(--bg-card);
-            border: 1px solid var(--border);
-            color: var(--text-primary);
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            cursor: pointer;
-            transition: all 0.3s ease;
-        }
-        .icon-btn:hover {
-            background: var(--accent);
-            color: var(--bg-primary);
-            transform: translateY(-2px);
-        }
-        /* Main Content */
-        .main-content {
-            position: relative;
-            z-index: 1;
-            padding-top: 80px;
-            max-width: 1200px;
-            margin: 0 auto;
-        }
-        /* Profile Section */
-        .profile-section {
-            padding: 2rem 1.5rem;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            gap: 1.5rem;
-        }
-        @media (min-width: 768px) {
-            .profile-section {
-                flex-direction: row;
-                align-items: flex-start;
-                gap: 3rem;
-            }
-        }
-        .profile-image-container {
-            position: relative;
-            flex-shrink: 0;
-        }
-        .profile-image {
-            width: 120px;
-            height: 120px;
-            border-radius: 50%;
-            background: linear-gradient(135deg, var(--accent), var(--gradient-end));
-            padding: 4px;
-            animation: pulse-ring 3s ease-in-out infinite;
-        }
-        @keyframes pulse-ring {
-            0%, 100% { box-shadow: 0 0 0 0 rgba(232, 180, 184, 0.4); }
-            50% { box-shadow: 0 0 0 15px rgba(232, 180, 184, 0); }
-        }
-        .profile-image img {
-            width: 100%;
-            height: 100%;
-            border-radius: 50%;
-            object-fit: cover;
-            background: var(--bg-secondary);
-        }
-        .profile-badge {
-            position: absolute;
-            bottom: 5px;
-            right: 5px;
-            width: 28px;
-            height: 28px;
-            background: var(--accent);
-            border-radius: 50%;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            border: 3px solid var(--bg-primary);
-        }
-        .profile-info {
-            flex: 1;
-            text-align: center;
-        }
-        @media (min-width: 768px) {
-            .profile-info {
-                text-align: right;
-            }
-        }
-        .profile-name {
-            font-size: 1.25rem;
-            font-weight: 700;
-            margin-bottom: 0.25rem;
-        }
-        .profile-username {
-            color: var(--text-secondary);
-            font-size: 0.9rem;
-            margin-bottom: 1rem;
-        }
-        .profile-bio {
-            color: var(--text-secondary);
-            font-size: 0.875rem;
-            line-height: 1.6;
-            margin-bottom: 1rem;
-            max-width: 400px;
-        }
-        @media (min-width: 768px) {
-            .profile-bio {
-                margin-left: auto;
-                margin-right: 0;
-            }
-        }
-        .profile-stats {
-            display: flex;
-            justify-content: center;
-            gap: 2.5rem;
-            margin-bottom: 1.5rem;
-        }
-        @media (min-width: 768px) {
-            .profile-stats {
-                justify-content: flex-start;
-            }
-        }
-        .stat-item {
-            text-align: center;
-        }
-        .stat-number {
-            font-size: 1.25rem;
-            font-weight: 700;
-            display: block;
-        }
-        .stat-label {
-            font-size: 0.8rem;
-            color: var(--text-secondary);
-        }
-        .profile-actions {
-            display: flex;
-            gap: 0.75rem;
-            justify-content: center;
-            flex-wrap: wrap;
-        }
-        @media (min-width: 768px) {
-            .profile-actions {
-                justify-content: flex-start;
-            }
-        }
-        .btn {
-            padding: 0.625rem 1.5rem;
-            border-radius: 10px;
-            font-size: 0.875rem;
-            font-weight: 600;
-            cursor: pointer;
-            transition: all 0.3s ease;
-            border: none;
-            font-family: inherit;
-        }
-        .btn-primary {
-            background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
-            color: var(--bg-primary);
-        }
-        .btn-primary:hover {
-            transform: translateY(-2px);
-            box-shadow: 0 8px 25px rgba(232, 180, 184, 0.3);
-        }
-        .btn-secondary {
-            background: var(--bg-card);
-            color: var(--text-primary);
-            border: 1px solid var(--border);
-        }
-        .btn-secondary:hover {
-            background: var(--bg-secondary);
-            border-color: var(--accent);
-        }
-        /* Stories Highlights */
-        .stories-section {
-            padding: 1.5rem;
-            border-bottom: 1px solid var(--border);
-        }
-        .stories-container {
-            display: flex;
-            gap: 1.25rem;
-            overflow-x: auto;
-            padding: 0.5rem 0;
-            scrollbar-width: none;
-        }
-        .stories-container::-webkit-scrollbar {
-            display: none;
         }
-        .story-item {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            gap: 0.5rem;
-            cursor: pointer;
-            flex-shrink: 0;
         }
         .story-ring {
-            width: 72px;
-            height: 72px;
-            border-radius: 50%;
-            background: linear-gradient(135deg, var(--accent), #c4a3a6);
-            padding: 3px;
-            transition: transform 0.3s ease;
-        }
-        .story-item:hover .story-ring {
-            transform: scale(1.1);
-        }
-        .story-content {
-            width: 100%;
-            height: 100%;
-            border-radius: 50%;
-            background: var(--bg-card);
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            overflow: hidden;
-        }
-        .story-content img {
-            width: 100%;
-            height: 100%;
-            object-fit: cover;
-        }
-        .story-title {
-            font-size: 0.75rem;
-            color: var(--text-secondary);
-            max-width: 70px;
-            text-align: center;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-        }
-        .story-add {
-            border: 2px dashed var(--border);
-            background: transparent;
-        }
-        /* Tabs Navigation */
-        .tabs-nav {
-            display: flex;
-            justify-content: center;
-            border-bottom: 1px solid var(--border);
-            position: sticky;
-            top: 80px;
-            background: rgba(15, 15, 15, 0.95);
-            backdrop-filter: blur(20px);
-            z-index: 50;
-        }
-        .tab-btn {
-            flex: 1;
-            max-width: 200px;
-            padding: 1rem;
-            background: transparent;
-            border: none;
-            color: var(--text-secondary);
-            font-size: 0.875rem;
-            font-weight: 600;
-            cursor: pointer;
-            position: relative;
-            font-family: inherit;
-            transition: color 0.3s ease;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            gap: 0.5rem;
-        }
-        .tab-btn.active {
-            color: var(--text-primary);
-        }
-        .tab-btn::after {
-            content: '';
-            position: absolute;
-            bottom: 0;
-            left: 50%;
-            transform: translateX(-50%) scaleX(0);
-            width: 80%;
-            height: 2px;
-            background: var(--accent);
-            transition: transform 0.3s ease;
-        }
-        .tab-btn.active::after {
-            transform: translateX(-50%) scaleX(1);
-        }
-        .tab-btn:hover {
-            color: var(--text-primary);
-        }
-        /* Tab Content */
-        .tab-content {
-            display: none;
-            animation: fadeIn 0.5s ease;
-        }
-        .tab-content.active {
-            display: block;
-        }
-        @keyframes fadeIn {
-            from { opacity: 0; transform: translateY(10px); }
-            to { opacity: 1; transform: translateY(0); }
-        }
-        /* Products Grid */
-        .products-grid {
-            display: grid;
-            grid-template-columns: repeat(3, 1fr);
-            gap: 3px;
-            padding: 3px;
-        }
-        .product-item {
-            aspect-ratio: 1;
-            position: relative;
-            overflow: hidden;
-            cursor: pointer;
-            background: var(--bg-card);
-        }
-        .product-item img {
-            width: 100%;
-            height: 100%;
-            object-fit: cover;
-            transition: transform 0.5s ease;
-        }
-        .product-item:hover img {
-            transform: scale(1.1);
-        }
-        .product-overlay {
-            position: absolute;
-            inset: 0;
-            background: rgba(0, 0, 0, 0.5);
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            gap: 1.5rem;
-            opacity: 0;
-            transition: opacity 0.3s ease;
-        }
-        .product-item:hover .product-overlay {
-            opacity: 1;
-        }
-        .overlay-stat {
-            display: flex;
-            align-items: center;
-            gap: 0.5rem;
-            color: white;
-            font-weight: 600;
-            font-size: 0.9rem;
-        }
-        .product-badge {
-            position: absolute;
-            top: 10px;
-            right: 10px;
-            background: var(--accent);
-            color: var(--bg-primary);
-            padding: 0.25rem 0.75rem;
-            border-radius: 20px;
-            font-size: 0.7rem;
-            font-weight: 700;
-        }
-        /* Videos Grid */
-        .videos-grid {
-            display: grid;
-            grid-template-columns: repeat(3, 1fr);
-            gap: 3px;
             padding: 3px;
-        }
-        .video-item {
-            aspect-ratio: 9/16;
-            position: relative;
-            overflow: hidden;
-            cursor: pointer;
-            background: var(--bg-card);
-        }
-        .video-item img {
-            width: 100%;
-            height: 100%;
-            object-fit: cover;
-            transition: transform 0.5s ease;
-        }
-        .video-item:hover img {
-            transform: scale(1.05);
-        }
-        .video-play-icon {
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            width: 50px;
-            height: 50px;
-            background: rgba(255, 255, 255, 0.2);
-            backdrop-filter: blur(10px);
             border-radius: 50%;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            transition: all 0.3s ease;
-        }
-        .video-item:hover .video-play-icon {
-            background: rgba(255, 255, 255, 0.3);
-            transform: translate(-50%, -50%) scale(1.1);
-        }
-        .video-stats {
-            position: absolute;
-            bottom: 10px;
-            right: 10px;
-            display: flex;
-            align-items: center;
-            gap: 0.25rem;
-            color: white;
-            font-size: 0.8rem;
-            font-weight: 600;
-        }
-        /* Stories Page */
-        .stories-page {
-            padding: 1.5rem;
-        }
-        .stories-grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
-            gap: 1rem;
-        }
-        .story-card {
-            background: var(--bg-card);
-            border-radius: 16px;
-            overflow: hidden;
-            cursor: pointer;
-            transition: all 0.3s ease;
-            border: 1px solid var(--border);
-        }
-        .story-card:hover {
-            transform: translateY(-5px);
-            border-color: var(--accent);
-            box-shadow: 0 15px 40px rgba(232, 180, 184, 0.1);
-        }
-        .story-card-image {
-            aspect-ratio: 9/16;
-            overflow: hidden;
-        }
-        .story-card-image img {
-            width: 100%;
-            height: 100%;
-            object-fit: cover;
-            transition: transform 0.5s ease;
-        }
-        .story-card:hover .story-card-image img {
-            transform: scale(1.1);
-        }
-        .story-card-info {
-            padding: 0.75rem;
-        }
-        .story-card-title {
-            font-size: 0.85rem;
-            font-weight: 600;
-            margin-bottom: 0.25rem;
-        }
-        .story-card-views {
-            font-size: 0.75rem;
-            color: var(--text-secondary);
-        }
-        /* Settings Menu */
-        .settings-menu {
-            position: fixed;
-            top: 0;
-            right: -100%;
-            width: 100%;
-            max-width: 320px;
-            height: 100%;
-            background: var(--bg-secondary);
-            z-index: 200;
-            transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-            border-left: 1px solid var(--border);
-            overflow-y: auto;
-        }
-        .settings-menu.open {
-            right: 0;
         }
-        .settings-overlay {
-            position: fixed;
-            inset: 0;
-            background: rgba(0, 0, 0, 0.5);
-            z-index: 150;
-            opacity: 0;
-            visibility: hidden;
-            transition: all 0.3s ease;
-        }
-        .settings-overlay.open {
-            opacity: 1;
-            visibility: visible;
-        }
-        .settings-header {
-            padding: 1.5rem;
-            border-bottom: 1px solid var(--border);
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-        }
-        .settings-title {
-            font-size: 1.25rem;
-            font-weight: 700;
-        }
-        .settings-close {
-            width: 36px;
-            height: 36px;
-            border-radius: 50%;
-            background: var(--bg-card);
-            border: none;
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            transition: all 0.3s ease;
-        }
-        .settings-close:hover {
-            background: var(--accent);
-            color: var(--bg-primary);
-        }
-        .settings-content {
-            padding: 1rem;
-        }
-        .settings-section {
-            margin-bottom: 1.5rem;
-        }
-        .settings-section-title {
-            font-size: 0.75rem;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 0.1em;
-            margin-bottom: 0.75rem;
-            padding: 0 0.5rem;
-        }
-        .settings-item {
-            display: flex;
-            align-items: center;
-            gap: 1rem;
-            padding: 1rem;
-            border-radius: 12px;
-            cursor: pointer;
-            transition: all 0.3s ease;
-            background: transparent;
-            border: none;
-            width: 100%;
-            text-align: right;
-            color: var(--text-primary);
-            font-family: inherit;
-            font-size: 0.95rem;
-        }
-        .settings-item:hover {
-            background: var(--bg-card);
-        }
-        .settings-item-icon {
-            width: 40px;
-            height: 40px;
-            border-radius: 10px;
-            background: var(--bg-card);
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            color: var(--accent);
-        }
-        .settings-item:hover .settings-item-icon {
-            background: var(--accent);
-            color: var(--bg-primary);
         }
-        /* Product Modal */
-        .product-modal {
-            position: fixed;
-            inset: 0;
-            z-index: 300;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            padding: 1rem;
             opacity: 0;
-            visibility: hidden;
-            transition: all 0.3s ease;
         }
-        .product-modal.open {
-            opacity: 1;
-            visibility: visible;
-        }
-        .product-modal-overlay {
-            position: absolute;
-            inset: 0;
-            background: rgba(0, 0, 0, 0.8);
-        }
-        .product-modal-content {
-            position: relative;
-            background: var(--bg-secondary);
-            border-radius: 20px;
-            max-width: 900px;
-            width: 100%;
-            max-height: 90vh;
-            overflow: hidden;
-            display: flex;
-            flex-direction: column;
-            transform: scale(0.9);
-            transition: transform 0.3s ease;
-        }
-        .product-modal.open .product-modal-content {
-            transform: scale(1);
-        }
-        @media (min-width: 768px) {
-            .product-modal-content {
-                flex-direction: row;
             }
         }
-        .product-modal-image {
-            flex: 1;
-            aspect-ratio: 1;
-            background: var(--bg-card);
-            position: relative;
-        }
-        .product-modal-image img {
-            width: 100%;
-            height: 100%;
-            object-fit: cover;
-        }
-        .product-modal-close {
-            position: absolute;
-            top: 1rem;
-            left: 1rem;
-            width: 40px;
-            height: 40px;
-            border-radius: 50%;
-            background: rgba(0, 0, 0, 0.5);
-            backdrop-filter: blur(10px);
-            border: none;
-            color: white;
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            transition: all 0.3s ease;
-        }
-        .product-modal-close:hover {
-            background: var(--accent);
-        }
-        .product-modal-details {
-            flex: 1;
-            padding: 1.5rem;
-            overflow-y: auto;
         }
-        .product-modal-title {
-            font-size: 1.25rem;
-            font-weight: 700;
-            margin-bottom: 0.5rem;
         }
-        .product-modal-price {
-            font-size: 1.5rem;
-            font-weight: 800;
             color: var(--accent);
-            margin-bottom: 1rem;
-        }
-        .product-modal-description {
-            color: var(--text-secondary);
-            font-size: 0.9rem;
-            line-height: 1.7;
-            margin-bottom: 1.5rem;
-        }
-        .product-modal-actions {
-            display: flex;
-            gap: 0.75rem;
-        }
-        .quantity-selector {
-            display: flex;
-            align-items: center;
-            gap: 0.75rem;
-            margin-bottom: 1rem;
         }
-        .quantity-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--bg-card);
-            border: 1px solid var(--border);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 1.25rem;
-            transition: all 0.3s ease;
         }
-        .quantity-btn:hover {
-            background: var(--accent);
-            color: var(--bg-primary);
         }
-        .quantity-value {
-            font-size: 1.125rem;
-            font-weight: 600;
-            min-width: 30px;
-            text-align: center;
-        }
-        /* Story Viewer */
-        .story-viewer {
-            position: fixed;
-            inset: 0;
-            z-index: 400;
-            background: black;
-            display: flex;
-            align-items: center;
-            justify-content: center;
             opacity: 0;
             visibility: hidden;
-            transition: all 0.3s ease;
         }
-        .story-viewer.open {
             opacity: 1;
             visibility: visible;
         }
-        .story-viewer-content {
-            position: relative;
-            width: 100%;
-            max-width: 400px;
-            height: 100%;
-            max-height: 700px;
-        }
-        .story-viewer-image {
-            width: 100%;
-            height: 100%;
-            object-fit: cover;
-            border-radius: 20px;
-        }
-        .story-progress {
-            position: absolute;
-            top: 1rem;
-            left: 1rem;
-            right: 1rem;
-            height: 3px;
-            background: rgba(255, 255, 255, 0.3);
-            border-radius: 3px;
-            overflow: hidden;
-        }
-        .story-progress-bar {
-            height: 100%;
-            background: white;
-            width: 0%;
-            transition: width 0.1s linear;
-        }
-        .story-viewer-close {
-            position: absolute;
-            top: 2rem;
-            left: 1rem;
-            width: 36px;
-            height: 36px;
-            border-radius: 50%;
-            background: rgba(0, 0, 0, 0.3);
-            border: none;
-            color: white;
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-        }
-        .story-viewer-info {
-            position: absolute;
-            bottom: 2rem;
-            left: 1rem;
-            right: 1rem;
-            color: white;
-        }
-        .story-viewer-title {
-            font-size: 1.125rem;
-            font-weight: 700;
-            margin-bottom: 0.25rem;
-        }
-        .story-viewer-time {
-            font-size: 0.8rem;
-            opacity: 0.7;
-        }
-        /* Animations */
-        .fade-in {
-            animation: fadeIn 0.6s ease forwards;
-        }
-        .slide-up {
-            animation: slideUp 0.6s ease forwards;
-        }
-        @keyframes slideUp {
-            from { opacity: 0; transform: translateY(30px); }
-            to { opacity: 1; transform: translateY(0); }
-        }
-        .stagger-1 { animation-delay: 0.1s; }
-        .stagger-2 { animation-delay: 0.2s; }
-        .stagger-3 { animation-delay: 0.3s; }
-        .stagger-4 { animation-delay: 0.4s; }
-        .stagger-5 { animation-delay: 0.5s; }
-        /* Footer */
-        .footer {
-            text-align: center;
-            padding: 2rem;
-            color: var(--text-secondary);
-            font-size: 0.8rem;
-        }
-        .footer a {
-            color: var(--accent);
-            text-decoration: none;
-        }
-        /* Reduced Motion */
         @media (prefers-reduced-motion: reduce) {
-            *, *::before, *::after {
-                animation-duration: 0.01ms !important;
-                animation-iteration-count: 1 !important;
-                transition-duration: 0.01ms !important;
             }
         }
-        /* Custom Scrollbar */
         ::-webkit-scrollbar {
-            width: 8px;
-        }
-        ::-webkit-scrollbar-track {
-            background: var(--bg-primary);
         }
         ::-webkit-scrollbar-thumb {
-            background: var(--border);
-            border-radius: 4px;
-        }
-        ::-webkit-scrollbar-thumb:hover {
             background: var(--accent);
         }
     </style>
 </head>
-<body>
-    <!-- Background Pattern -->
-    <div class="bg-pattern">
-        <div class="bg-orb bg-orb-1"></div>
-        <div class="bg-orb bg-orb-2"></div>
-        <div class="bg-orb bg-orb-3"></div>
-    </div>
     <!-- Header -->
-    <header class="header">
-        <div class="header-content">
-            <div class="logo">فروشگاه من</div>
-            <div class="header-actions">
-                <button class="icon-btn" aria-label="جستجو">
-                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                        <circle cx="11" cy="11" r="8"></circle>
-                        <path d="m21 21-4.3-4.3"></path>
-                    </svg>
-                </button>
-                <button class="icon-btn" aria-label="سبد خرید">
-                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                        <path d="M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"></path>
-                        <line x1="3" y1="6" x2="21" y2="6"></line>
-                        <path d="M16 10a4 4 0 0 1-8 0"></path>
-                    </svg>
-                </button>
-                <button class="icon-btn" id="settingsBtn" aria-label="تنظیمات">
-                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                        <line x1="4" y1="21" x2="4" y2="14"></line>
-                        <line x1="4" y1="10" x2="4" y2="3"></line>
-                        <line x1="12" y1="21" x2="12" y2="12"></line>
-                        <line x1="12" y1="8" x2="12" y2="3"></line>
-                        <line x1="20" y1="21" x2="20" y2="16"></line>
-                        <line x1="20" y1="12" x2="20" y2="3"></line>
-                        <line x1="1" y1="14" x2="7" y2="14"></line>
-                        <line x1="9" y1="8" x2="15" y2="8"></line>
-                        <line x1="17" y1="16" x2="23" y2="16"></line>
-                    </svg>
-                </button>
-            </div>
         </div>
     </header>
-    <!-- Main Content -->
-    <main class="main-content">
         <!-- Profile Section -->
-        <section class="profile-section">
-            <div class="profile-image-container fade-in">
-                <div class="profile-image">
-                    <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=200&h=200&fit=crop&crop=face" alt="تصویر پروفایل">
                 </div>
-                <div class="profile-badge">
-                    <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
-                        <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>
-                    </svg>
                 </div>
             </div>
-            <div class="profile-info">
-                <h1 class="profile-name slide-up stagger-1">سارا احمدی</h1>
-                <p class="profile-username slide-up stagger-2">@sara.ahmadi.shop</p>
-                <p class="profile-bio slide-up stagger-3">فروشگاه آنلاین پوشاک و اکسسوری | ارسال به سراسر کشور | ضمانت اصالت کالا | پشتیبانی ۲۴ ساعته</p>
-                <div class="profile-stats slide-up stagger-4">
-                    <div class="stat-item">
-                        <span class="stat-number" data-count="156">0</span>
-                        <span class="stat-label">محصول</span>
                     </div>
-                    <div class="stat-item">
-                        <span class="stat-number" data-count="12400">0</span>
-                        <span class="stat-label">دنبال‌کننده</span>
                     </div>
-                    <div class="stat-item">
-                        <span class="stat-number" data-count="89">0</span>
-                        <span class="stat-label">دنبال‌شونده</span>
                     </div>
                 </div>
-                <div class="profile-actions slide-up stagger-5">
-                    <button class="btn btn-primary">دنبال کردن</button>
-                    <button class="btn btn-secondary">پیام</button>
-                    <button class="btn btn-secondary">اشتراک‌گذاری</button>
                 </div>
             </div>
         </section>
-        <!-- Stories Highlights -->
-        <section class="stories-section">
-            <div class="stories-container" id="storiesContainer">
-                <!-- Stories will be rendered here -->
-            </div>
-        </section>
-        <!-- Tabs Navigation -->
-        <nav class="tabs-nav">
-            <button class="tab-btn active" data-tab="products">
-                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                    <rect x="3" y="3" width="7" height="7"></rect>
-                    <rect x="14" y="3" width="7" height="7"></rect>
-                    <rect x="14" y="14" width="7" height="7"></rect>
-                    <rect x="3" y="14" width="7" height="7"></rect>
                 </svg>
-                محصولات
             </button>
-            <button class="tab-btn" data-tab="videos">
-                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                    <polygon points="5 3 19 12 5 21 5 3"></polygon>
                 </svg>
-                ویدیوها
             </button>
-            <button class="tab-btn" data-tab="stories">
-                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                    <circle cx="12" cy="12" r="10"></circle>
-                    <polygon points="10 8 16 12 10 16 10 8"></polygon>
                 </svg>
-                استوری‌ها
             </button>
         </nav>
-        <!-- Products Tab -->
-        <div class="tab-content active" id="products-tab">
-            <div class="products-grid" id="productsGrid">
-                <!-- Products will be rendered here -->
-            </div>
-        </div>
-        <!-- Videos Tab -->
-        <div class="tab-content" id="videos-tab">
-            <div class="videos-grid" id="videosGrid">
-                <!-- Videos will be rendered here -->
-            </div>
-        </div>
-        <!-- Stories Tab -->
-        <div class="tab-content" id="stories-tab">
-            <div class="stories-page">
-                <div class="stories-grid" id="storiesGrid">
-                    <!-- Stories will be rendered here -->
-                </div>
             </div>
-        </div>
-        <!-- Footer -->
-        <footer class="footer">
-            <p>Built with <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">anycoder</a></p>
-        </footer>
     </main>
-    <!-- Settings Menu -->
-    <div class="settings-overlay" id="settingsOverlay"></div>
-    <aside class="settings-menu" id="settingsMenu">
-        <div class="settings-header">
-            <h2 class="settings-title">تنظیمات</h2>
-            <button class="settings-close" id="settingsClose" aria-label="بستن">
-                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                    <line x1="18" y1="6" x2="6" y2="18"></line>
-                    <line x1="6" y1="6" x2="18" y2="18"></line>
-                </svg>
-            </button>
-        </div>
-        <div class="settings-content">
-            <div class="settings-section">
-                <h3 class="settings-section-title">حساب کاربری</h3>
-                <button class="settings-item">
-                    <div class="settings-item-icon">
-                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                            <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
-                            <circle cx="12" cy="7" r="4"></circle>
-                        </svg>
-                    </div>
-                    ویرایش پروفایل
-                </button>
-                <button class="settings-item">
-                    <div class="settings-item-icon">
-                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                            <rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
-                            <path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
-                        </svg>
-                    </div>
-                    امنیت و رمز عبور
-                </button>
-                <button class="settings-item">
-                    <div class="settings-item-icon">
-                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                            <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
-                            <polyline points="22,6 12,13 2,6"></polyline>
-                        </svg>
-                    </div>
-                    ایمیل و تماس
-                </button>
-            </div>
-            <div class="settings-section">
-                <h3 class="settings-section-title">فروشگاه</h3>
-                <button class="settings-item">
-                    <div class="settings-item-icon">
-                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                            <path d="M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"></path>
-                            <line x1="3" y1="6" x2="21" y2="6"></line>
-                            <path d="M16 10a4 4 0 0 1-8 0"></path>
-                        </svg>
-                    </div>
-                    مدیریت محصولات
-                </button>
-                <button class="settings-item">
-                    <div class="settings-item-icon">
-                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                            <line x1="12" y1="1" x2="12" y2="23"></line>
-                            <path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path>
-                        </svg>
                     </div>
-                    قیمت‌گذاری
-                </button>
-                <button class="settings-item">
-                    <div class="settings-item-icon">
-                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                            <rect x="1" y="3" width="15" height="13"></rect>
-                            <polygon points="16 8 20 8 23 11 23 16 16 16 16 8"></polygon>
-                            <circle cx="5.5" cy="18.5" r="2.5"></circle>
-                            <circle cx="18.5" cy="18.5" r="2.5"></circle>
                         </svg>
                     </div>
-                    روش‌های ارسال
-                </button>
-                <button class="settings-item">
-                    <div class="settings-item-icon">
-                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                            <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
-                            <polyline points="14 2 14 8 20 8"></polyline>
-                            <line x1="16" y1="13" x2="8" y2="13"></line>
-                            <line x1="16" y1="17" x2="8" y2

 <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>