Spaces:

samirerty
/

anycoder-1d09c912

Running

App Files Files Community

samirerty commited on Feb 21

Commit

820621b

verified ·

1 Parent(s): 8bf383d

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +1480 -19

index.html CHANGED Viewed

@@ -1,19 +1,1480 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="fa" dir="rtl">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>آنلاین شاپ | سید خوید</title>
+    <link href="https://cdn.fontcdn.ir/Font/Persian/Vazir/Vazir.css" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
+    <style>
+  :root {
+      --bg: #080810;
+      --bg-secondary: #0f0f18;
+      --card: #14141f;
+      --card-hover: #1c1c2a;
+      --border: #252535;
+      --fg: #f5f5fa;
+      --fg-muted: #7a7a95;
+      --accent: #ff5e3a;
+      --accent-hover: #ff7a5a;
+      --accent-glow: rgba(255, 94, 58, 0.35);
+      --accent-secondary: #00c9a7;
+      --accent-secondary-glow: rgba(0, 201, 167, 0.3);
+      --danger: #ff3b5c;
+      --success: #00d68f;
+      --warning: #ffaa00;
+      --glass: rgba(20, 20, 31, 0.85);
+      --radius-sm: 10px;
+      --radius-md: 16px;
+      --radius-lg: 24px;
+      --radius-xl: 32px;
+      --radius-full: 9999px;
+      --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
+      --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.25);
+      --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.3);
+      --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+      --transition-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      --transition-bounce: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
+    }
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+      font-family: 'Vazir', system-ui, sans-serif;
+    }
+    html {
+      scroll-behavior: smooth;
+    }
+    body {
+      background: var(--bg);
+      min-height: 100vh;
+      color: var(--fg);
+      overflow-x: hidden;
+      position: relative;
+    }
+    .bg-canvas {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      pointer-events: none;
+      z-index: 0;
+      overflow: hidden;
+    }
+    .bg-gradient-layer {
+      position: absolute;
+      inset: 0;
+      background:
+        radial-gradient(ellipse 80% 60% at 10% 20%, rgba(255, 94, 58, 0.12) 0%, transparent 50%),
+        radial-gradient(ellipse 70% 50% at 90% 80%, rgba(0, 201, 167, 0.08) 0%, transparent 50%),
+        radial-gradient(ellipse 60% 40% at 50% 50%, rgba(255, 94, 58, 0.05) 0%, transparent 60%);
+      animation: gradientShift 20s ease-in-out infinite;
+    }
+    @keyframes gradientShift {
+      0%, 100% { transform: scale(1) translate(0, 0); opacity: 1; }
+      33% { transform: scale(1.1) translate(-3%, 2%); opacity: 0.9; }
+      66% { transform: scale(0.95) translate(2%, -2%); opacity: 1; }
+    }
+    .floating-orb {
+      position: absolute;
+      border-radius: 50%;
+      filter: blur(80px);
+      opacity: 0.6;
+      animation: orbFloat 25s ease-in-out infinite;
+    }
+    .orb-1 {
+      width: 500px;
+      height: 500px;
+      background: linear-gradient(135deg, rgba(255, 94, 58, 0.2), rgba(255, 94, 58, 0.05));
+      top: -15%;
+      right: -10%;
+      animation-delay: 0s;
+    }
+    .orb-2 {
+      width: 400px;
+      height: 400px;
+      background: linear-gradient(135deg, rgba(0, 201, 167, 0.15), rgba(0, 201, 167, 0.03));
+      bottom: -10%;
+      left: -8%;
+      animation-delay: -8s;
+    }
+    .orb-3 {
+      width: 300px;
+      height: 300px;
+      background: linear-gradient(135deg, rgba(255, 94, 58, 0.1), transparent);
+      top: 40%;
+      left: 25%;
+      animation-delay: -16s;
+    }
+    @keyframes orbFloat {
+      0%, 100% { transform: translate(0, 0) scale(1); }
+      25% { transform: translate(40px, -30px) scale(1.05); }
+      50% { transform: translate(-30px, 40px) scale(0.95); }
+      75% { transform: translate(20px, 20px) scale(1.02); }
+    }
+    .grid-pattern {
+      position: absolute;
+      inset: 0;
+      background-image:
+        linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
+        linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
+      background-size: 60px 60px;
+      mask-image: radial-gradient(ellipse at center, black 20%, transparent 70%);
+    }
+    .container {
+      max-width: 460px;
+      width: 100%;
+      margin: 0 auto;
+      padding: 20px;
+      position: relative;
+      z-index: 1;
+    }
+    @media (min-width: 768px) {
+      .container { max-width: 700px; }
+    }
+    @media (min-width: 1024px) {
+      .container { max-width: 960px; }
+    }
+    .branding-link {
+      position: fixed;
+      top: 16px;
+      left: 16px;
+      z-index: 1000;
+      background: var(--glass);
+      backdrop-filter: blur(16px);
+      -webkit-backdrop-filter: blur(16px);
+      padding: 10px 18px;
+      border-radius: var(--radius-full);
+      border: 1px solid var(--border);
+      color: var(--fg-muted);
+      text-decoration: none;
+      font-size: 12px;
+      font-weight: 500;
+      transition: all var(--transition-smooth);
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+    .branding-link:hover {
+      color: var(--accent);
+      border-color: var(--accent);
+      transform: translateY(-2px);
+      box-shadow: 0 8px 24px var(--accent-glow);
+    }
+    .branding-link::before {
+      content: '';
+      width: 6px;
+      height: 6px;
+      background: var(--accent);
+      border-radius: 50%;
+      animation: pulse 2s ease-in-out infinite;
+    }
+    @keyframes pulse {
+      0%, 100% { opacity: 1; transform: scale(1); }
+      50% { opacity: 0.5; transform: scale(1.2); }
+    }
+    .profile-header {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      text-align: center;
+      padding: 40px 24px 32px;
+      background: linear-gradient(180deg, var(--card) 0%, transparent 100%);
+      border-radius: var(--radius-xl);
+      margin-bottom: 24px;
+      position: relative;
+      overflow: hidden;
+    }
+    .profile-header::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      height: 4px;
+      background: linear-gradient(90deg, var(--accent), var(--accent-secondary), var(--accent));
+      background-size: 200% 100%;
+      animation: shimmer 4s linear infinite;
+    }
+    .profile-header::after {
+      content: '';
+      position: absolute;
+      top: 4px;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 60%;
+      height: 1px;
+      background: linear-gradient(90deg, transparent, var(--accent-glow), transparent);
+    }
+    @keyframes shimmer {
+      0% { background-position: 200% 0; }
+      100% { background-position: -200% 0; }
+    }
+    .avatar-wrapper {
+      position: relative;
+      margin-bottom: 20px;
+    }
+    .avatar {
+      width: 110px;
+      height: 110px;
+      border-radius: 50%;
+      background: linear-gradient(135deg, var(--accent), var(--accent-secondary));
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: white;
+      font-size: 48px;
+      cursor: pointer;
+      position: relative;
+      transition: all var(--transition-smooth);
+      box-shadow: 0 8px 32px var(--accent-glow);
+    }
+    .avatar:hover {
+      transform: scale(1.05);
+      box-shadow: 0 12px 40px var(--accent-glow);
+    }
+    .avatar::before {
+      content: '';
+      position: absolute;
+      inset: -5px;
+      border-radius: 50%;
+      background: conic-gradient(from 0deg, var(--accent), var(--accent-secondary), var(--accent));
+      z-index: -1;
+      animation: avatarRing 6s linear infinite;
+    }
+    .avatar::after {
+      content: '';
+      position: absolute;
+      inset: -3px;
+      border-radius: 50%;
+      background: var(--bg);
+      z-index: -1;
+    }
+    @keyframes avatarRing {
+      from { transform: rotate(0deg); }
+      to { transform: rotate(360deg); }
+    }
+    .online-indicator {
+      position: absolute;
+      bottom: 6px;
+      right: 6px;
+      width: 24px;
+      height: 24px;
+      background: var(--success);
+      border-radius: 50%;
+      border: 4px solid var(--bg);
+      animation: onlinePulse 2s ease-in-out infinite;
+      box-shadow: 0 0 0 0 rgba(0, 214, 143, 0.4);
+    }
+    @keyframes onlinePulse {
+      0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(0, 214, 143, 0.4); }
+      50% { transform: scale(1.1); box-shadow: 0 0 0 8px rgba(0, 214, 143, 0); }
+    }
+    .name {
+      font-size: 28px;
+      font-weight: 800;
+      margin-bottom: 10px;
+      background: linear-gradient(135deg, var(--fg) 30%, var(--fg-muted));
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-clip: text;
+      letter-spacing: -0.5px;
+    }
+    .bio {
+      font-size: 14px;
+      color: var(--fg-muted);
+      line-height: 1.7;
+      max-width: 340px;
+      margin-bottom: 24px;
+    }
+    .stats {
+      display: flex;
+      gap: 40px;
+      justify-content: center;
+      margin: 24px 0;
+    }
+    .stat-item {
+      text-align: center;
+      position: relative;
+      cursor: pointer;
+      padding: 8px 16px;
+      border-radius: var(--radius-md);
+      transition: all var(--transition-fast);
+    }
+    .stat-item:hover {
+      background: var(--card-hover);
+    }
+    .stat-number {
+      font-weight: 800;
+      font-size: 22px;
+      color: var(--fg);
+      display: block;
+      transition: color var(--transition-fast);
+    }
+    .stat-item:hover .stat-number {
+      color: var(--accent);
+    }
+    .stat-label {
+      font-size: 12px;
+      color: var(--fg-muted);
+      margin-top: 4px;
+    }
+    .stat-item::after {
+      content: '';
+      position: absolute;
+      left: -20px;
+      top: 50%;
+      transform: translateY(-50%);
+      width: 1px;
+      height: 36px;
+      background: linear-gradient(180deg, transparent, var(--border), transparent);
+    }
+    .stat-item:first-child::after {
+      display: none;
+    }
+    .instagram-row {
+      display: flex;
+      align-items: center;
+      gap: 14px;
+      background: var(--card);
+      padding: 14px 24px;
+      border-radius: var(--radius-full);
+      border: 1px solid var(--border);
+      transition: all var(--transition-smooth);
+    }
+    .instagram-row:hover {
+      border-color: var(--accent);
+      transform: translateY(-2px);
+      box-shadow: var(--shadow-md);
+    }
+    .instagram-row i {
+      font-size: 24px;
+      background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-clip: text;
+    }
+    .instagram-row span {
+      font-weight: 600;
+      flex: 1;
+    }
+    .btn-primary {
+      background: linear-gradient(135deg, var(--accent), var(--accent-hover));
+      color: white;
+      border: none;
+      padding: 12px 32px;
+      border-radius: var(--radius-full);
+      font-weight: 700;
+      cursor: pointer;
+      transition: all var(--transition-smooth);
+      position: relative;
+      overflow: hidden;
+      font-size: 14px;
+    }
+    .btn-primary::before {
+      content: '';
+      position: absolute;
+      inset: 0;
+      background: linear-gradient(135deg, transparent, rgba(255, 255, 255, 0.25), transparent);
+      transform: translateX(-100%);
+      transition: transform 0.6s ease;
+    }
+    .btn-primary:hover::before {
+      transform: translateX(100%);
+    }
+    .btn-primary:hover {
+      transform: scale(1.05);
+      box-shadow: 0 8px 28px var(--accent-glow);
+    }
+    .btn-primary:active {
+      transform: scale(0.98);
+    }
+    .btn-primary.following {
+      background: var(--card-hover);
+      border: 1px solid var(--border);
+    }
+    .user-menu {
+      position: absolute;
+      top: 130px;
+      left: 10px;
+      background: var(--glass);
+      backdrop-filter: blur(20px);
+      -webkit-backdrop-filter: blur(20px);
+      border-radius: var(--radius-lg);
+      border: 1px solid var(--border);
+      width: 230px;
+      z-index: 100;
+      opacity: 0;
+      visibility: hidden;
+      transform: translateY(-10px) scale(0.95);
+      transition: all var(--transition-smooth);
+      box-shadow: var(--shadow-lg);
+      overflow: hidden;
+    }
+    .user-menu.active {
+      opacity: 1;
+      visibility: visible;
+      transform: translateY(0) scale(1);
+    }
+    .user-menu-item {
+      padding: 16px 20px;
+      border-bottom: 1px solid var(--border);
+      cursor: pointer;
+      transition: all var(--transition-fast);
+      display: flex;
+      align-items: center;
+      gap: 14px;
+      color: var(--fg);
+      font-weight: 500;
+    }
+    .user-menu-item:last-child {
+      border-bottom: none;
+    }
+    .user-menu-item:hover {
+      background: var(--card-hover);
+      padding-right: 28px;
+    }
+    .user-menu-item i {
+      width: 22px;
+      color: var(--accent);
+      font-size: 16px;
+    }
+    .user-menu-item.danger {
+      color: var(--danger);
+    }
+    .user-menu-item.danger i {
+      color: var(--danger);
+    }
+    .search-bar {
+      display: flex;
+      align-items: center;
+      background: var(--card);
+      border-radius: var(--radius-full);
+      padding: 16px 22px;
+      margin-bottom: 20px;
+      border: 1px solid var(--border);
+      transition: all var(--transition-smooth);
+      position: relative;
+    }
+    .search-bar:focus-within {
+      border-color: var(--accent);
+      box-shadow: 0 0 0 4px var(--accent-glow);
+      background: var(--card-hover);
+    }
+    .search-bar i {
+      color: var(--fg-muted);
+      margin-left: 14px;
+      transition: color var(--transition-fast);
+      font-size: 16px;
+    }
+    .search-bar:focus-within i {
+      color: var(--accent);
+    }
+    .search-bar input {
+      flex: 1;
+      border: none;
+      background: transparent;
+      outline: none;
+      font-size: 15px;
+      color: var(--fg);
+    }
+    .search-bar input::placeholder {
+      color: var(--fg-muted);
+    }
+    .search-suggestions {
+      position: absolute;
+      top: 100%;
+      left: 0;
+      right: 0;
+      background: var(--card);
+      border-radius: var(--radius-md);
+      margin-top: 8px;
+      border: 1px solid var(--border);
+      max-height: 300px;
+      overflow-y: auto;
+      z-index: 50;
+      display: none;
+    }
+    .search-suggestions.active {
+      display: block;
+    }
+    .search-suggestion-item {
+      padding: 12px 18px;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      transition: background var(--transition-fast);
+    }
+    .search-suggestion-item:hover {
+      background: var(--card-hover);
+    }
+    .search-suggestion-item i {
+      color: var(--fg-muted);
+      font-size: 14px;
+    }
+    .filter-chips {
+      display: flex;
+      gap: 10px;
+      overflow-x: auto;
+      padding: 8px 0;
+      margin-bottom: 24px;
+      scrollbar-width: none;
+    }
+    .filter-chips::-webkit-scrollbar {
+      display: none;
+    }
+    .chip {
+      background: var(--card);
+      padding: 12px 22px;
+      border-radius: var(--radius-full);
+      font-size: 13px;
+      white-space: nowrap;
+      cursor: pointer;
+      transition: all var(--transition-smooth);
+      border: 1px solid var(--border);
+      color: var(--fg-muted);
+      font-weight: 600;
+    }
+    .chip:hover {
+      border-color: var(--accent);
+      color: var(--fg);
+      background: var(--card-hover);
+    }
+    .chip.active {
+      background: linear-gradient(135deg, var(--accent), var(--accent-hover));
+      color: white;
+      border-color: transparent;
+      box-shadow: 0 4px 20px var(--accent-glow);
+    }
+    .sort-dropdown {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      margin-bottom: 20px;
+    }
+    .sort-dropdown select {
+      background: var(--card);
+      border: 1px solid var(--border);
+      border-radius: var(--radius-full);
+      padding: 10px 18px;
+      color: var(--fg);
+      font-family: inherit;
+      font-size: 13px;
+      cursor: pointer;
+      outline: none;
+      transition: all var(--transition-fast);
+    }
+    .sort-dropdown select:focus {
+      border-color: var(--accent);
+    }
+    .price-filter {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      margin-bottom: 20px;
+      padding: 16px;
+      background: var(--card);
+      border-radius: var(--radius-md);
+      border: 1px solid var(--border);
+    }
+    .price-filter input[type="range"] {
+      flex: 1;
+      height: 4px;
+      background: var(--border);
+      border-radius: 2px;
+      outline: none;
+      -webkit-appearance: none;
+    }
+    .price-filter input[type="range"]::-webkit-slider-thumb {
+      -webkit-appearance: none;
+      width: 18px;
+      height: 18px;
+      background: var(--accent);
+      border-radius: 50%;
+      cursor: pointer;
+    }
+    .price-filter span {
+      font-size: 13px;
+      color: var(--fg-muted);
+      min-width: 100px;
+    }
+    .highlights {
+      display: flex;
+      overflow-x: auto;
+      gap: 20px;
+      padding: 12px 0;
+      margin-bottom: 32px;
+      scrollbar-width: none;
+    }
+    .highlights::-webkit-scrollbar {
+      display: none;
+    }
+    .highlight-item {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      min-width: 80px;
+      cursor: pointer;
+    }
+    .highlight-circle {
+      width: 78px;
+      height: 78px;
+      border-radius: 50%;
+      background: var(--card);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 28px;
+      color: var(--accent);
+      margin-bottom: 12px;
+      border: 2px solid var(--border);
+      transition: all var(--transition-smooth);
+      position: relative;
+    }
+    .highlight-circle::before {
+      content: '';
+      position: absolute;
+      inset: -4px;
+      border-radius: 50%;
+      background: conic-gradient(from 0deg, var(--accent), var(--accent-secondary), var(--accent));
+      z-index: -1;
+      opacity: 0;
+      transition: opacity var(--transition-smooth);
+    }
+    .highlight-circle::after {
+      content: '';
+      position: absolute;
+      inset: -2px;
+      border-radius: 50%;
+      background: var(--bg);
+      z-index: -1;
+    }
+    .highlight-item:hover .highlight-circle {
+      transform: scale(1.1);
+      border-color: transparent;
+    }
+    .highlight-item:hover .highlight-circle::before {
+      opacity: 1;
+      animation: highlightRing 3s linear infinite;
+    }
+    @keyframes highlightRing {
+      from { transform: rotate(0deg); }
+      to { transform: rotate(360deg); }
+    }
+    .highlight-label {
+      font-size: 11px;
+      color: var(--fg-muted);
+      text-align: center;
+      font-weight: 500;
+      max-width: 80px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .category-section {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 20px;
+    }
+    .category-title {
+      font-weight: 800;
+      font-size: 22px;
+      color: var(--fg);
+    }
+    .category-link {
+      color: var(--accent);
+      font-size: 14px;
+      cursor: pointer;
+      font-weight: 600;
+      transition: all var(--transition-fast);
+      padding: 6px 12px;
+      border-radius: var(--radius-sm);
+    }
+    .category-link:hover {
+      background: var(--card);
+    }
+    .promo-banner {
+      background: linear-gradient(135deg, var(--accent), var(--accent-secondary));
+      border-radius: var(--radius-lg);
+      padding: 24px;
+      margin-bottom: 24px;
+      position: relative;
+      overflow: hidden;
+    }
+    .promo-banner::before {
+      content: '';
+      position: absolute;
+      top: -50%;
+      right: -50%;
+      width: 100%;
+      height: 100%;
+      background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
+    }
+    .promo-banner h3 {
+      font-size: 20px;
+      margin-bottom: 8px;
+      position: relative;
+    }
+    .promo-banner p {
+      font-size: 14px;
+      opacity: 0.9;
+      margin-bottom: 16px;
+      position: relative;
+    }
+    .promo-banner button {
+      background: white;
+      color: var(--accent);
+      border: none;
+      padding: 10px 24px;
+      border-radius: var(--radius-full);
+      font-weight: 700;
+      cursor: pointer;
+      transition: all var(--transition-fast);
+      position: relative;
+    }
+    .promo-banner button:hover {
+      transform: scale(1.05);
+    }
+    .products-grid {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      gap: 16px;
+      margin-bottom: 48px;
+    }
+    @media (min-width: 768px) {
+      .products-grid { grid-template-columns: repeat(3, 1fr); }
+    }
+    @media (min-width: 1024px) {
+      .products-grid { grid-template-columns: repeat(4, 1fr); }
+    }
+    .product-card {
+      background: var(--card);
+      border-radius: var(--radius-lg);
+      border: 1px solid var(--border);
+      overflow: hidden;
+      transition: all var(--transition-smooth);
+      cursor: pointer;
+      position: relative;
+    }
+    .product-card:hover {
+      transform: translateY(-8px);
+      border-color: var(--accent);
+      box-shadow: 0 16px 48px rgba(0, 0, 0, 0.35);
+    }
+    .discount-badge {
+      position: absolute;
+      top: 14px;
+      right: 14px;
+      background: linear-gradient(135deg, var(--danger), #ff5a6e);
+      color: white;
+      padding: 6px 14px;
+      border-radius: var(--radius-full);
+      font-size: 11px;
+      font-weight: 700;
+      z-index: 2;
+      box-shadow: 0 4px 16px rgba(255, 59, 92, 0.4);
+    }
+    .new-badge {
+      position: absolute;
+      top: 14px;
+      left: 14px;
+      background: linear-gradient(135deg, var(--success), #00e6a0);
+      color: white;
+      padding: 6px 14px;
+      border-radius: var(--radius-full);
+      font-size: 11px;
+      font-weight: 700;
+      z-index: 2;
+    }
+    .product-image {
+      width: 100%;
+      height: 150px;
+      background: linear-gradient(135deg, var(--card-hover), var(--bg-secondary));
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: var(--accent);
+      font-size: 44px;
+      position: relative;
+      overflow: hidden;
+    }
+    .product-image::before {
+      content: '';
+      position: absolute;
+      inset: 0;
+      background: linear-gradient(135deg, transparent 30%, rgba(255, 94, 58, 0.08) 100%);
+    }
+    .product-image::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: -100%;
+      width: 50%;
+      height: 100%;
+      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent);
+      transition: left 0.5s ease;
+    }
+    .product-card:hover .product-image::after {
+      left: 100%;
+    }
+    .product-info {
+      padding: 16px;
+    }
+    .product-title {
+      font-weight: 700;
+      font-size: 14px;
+      margin-bottom: 8px;
+      color: var(--fg);
+    }
+    .product-rating {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      margin-bottom: 12px;
+      font-size: 12px;
+    }
+    .product-rating .stars {
+      color: var(--warning);
+    }
+    .product-rating span {
+      color: var(--fg-muted);
+    }
+    .product-price-row {
+      display: flex;
+      align-items: center;
+      flex-wrap: wrap;
+      gap: 8px;
+      margin-bottom: 14px;
+    }
+    .product-price {
+      font-size: 16px;
+      color: var(--accent);
+      font-weight: 800;
+    }
+    .product-old-price {
+      font-size: 11px;
+      color: var(--fg-muted);
+      text-decoration: line-through;
+    }
+    .product-actions {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding-top: 14px;
+      border-top: 1px solid var(--border);
+    }
+    .action-btn {
+      background: none;
+      border: none;
+      font-size: 16px;
+      cursor: pointer;
+      color: var(--fg-muted);
+      transition: all var(--transition-fast);
+      width: 38px;
+      height: 38px;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .action-btn:hover {
+      background: var(--card-hover);
+      color: var(--fg);
+    }
+    .action-btn.liked {
+      color: var(--danger);
+    }
+    .action-btn.liked i {
+      animation: heartBeat 0.4s ease;
+    }
+    @keyframes heartBeat {
+      0%, 100% { transform: scale(1); }
+      50% { transform: scale(1.3); }
+    }
+    .action-btn.saved {
+      color: var(--warning);
+    }
+    .cart-btn {
+      background: linear-gradient(135deg, var(--accent), var(--accent-hover));
+      color: white !important;
+      width: 38px;
+      height: 38px;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border: none;
+      cursor: pointer;
+      transition: all var(--transition-smooth);
+    }
+    .cart-btn:hover {
+      transform: scale(1.15);
+      box-shadow: 0 6px 20px var(--accent-glow);
+    }
+    .cart-btn:active {
+      transform: scale(0.95);
+    }
+    .videos-section {
+      margin-bottom: 48px;
+    }
+    .section-title {
+      font-size: 24px;
+      font-weight: 800;
+      margin-bottom: 24px;
+      color: var(--fg);
+    }
+    .video-card {
+      display: flex;
+      gap: 18px;
+      background: var(--card);
+      border-radius: var(--radius-lg);
+      padding: 18px;
+      margin-bottom: 16px;
+      border: 1px solid var(--border);
+      cursor: pointer;
+      transition: all var(--transition-smooth);
+    }
+    .video-card:hover {
+      border-color: var(--accent);
+      transform: translateX(-6px);
+      box-shadow: var(--shadow-md);
+    }
+    .video-thumbnail {
+      width: 100px;
+      height: 100px;
+      background: linear-gradient(135deg, var(--accent), var(--accent-secondary));
+      border-radius: var(--radius-md);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: white;
+      font-size: 32px;
+      flex-shrink: 0;
+      position: relative;
+      overflow: hidden;
+    }
+    .video-thumbnail::before {
+      content: '';
+      position: absolute;
+      inset: 0;
+      background: rgba(0, 0, 0, 0.25);
+    }
+    .video-thumbnail i {
+      position: relative;
+      z-index: 1;
+      transition: transform var(--transition-fast);
+    }
+    .video-card:hover .video-thumbnail i {
+      transform: scale(1.2);
+    }
+    .video-details {
+      flex: 1;
+    }
+    .video-title {
+      font-weight: 700;
+      font-size: 16px;
+      margin-bottom: 8px;
+      color: var(--fg);
+    }
+    .video-subtitle {
+      font-size: 13px;
+      color: var(--fg-muted);
+      margin-bottom: 12px;
+      line-height: 1.6;
+    }
+    .video-stats {
+      display: flex;
+      gap: 18px;
+      font-size: 12px;
+      color: var(--fg-muted);
+      align-items: center;
+      flex-wrap: wrap;
+    }
+    .video-stats span {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+    }
+    .video-stats i {
+      color: var(--accent);
+    }
+    .like-comment {
+      display: flex;
+      gap: 12px;
+      margin-top: 14px;
+    }
+    .like-comment button {
+      background: var(--bg-secondary);
+      border: none;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      font-size: 12px;
+      color: var(--fg-muted);
+      cursor: pointer;
+      padding: 10px 16px;
+      border-radius: var(--radius-full);
+      transition: all var(--transition-fast);
+    }
+    .like-comment button:hover {
+      background: var(--card-hover);
+      color: var(--fg);
+    }
+    .like-comment button.liked {
+      color: var(--danger);
+      background: rgba(255, 59, 92, 0.1);
+    }
+    .like-comment button.liked i {
+      color: var(--danger);
+    }
+    .comments-section {
+      margin-top: 40px;
+      padding-top: 40px;
+      border-top: 1px solid var(--border);
+    }
+    .comment-item {
+      display: flex;
+      gap: 16px;
+      margin-bottom: 20px;
+      background: var(--card);
+      padding: 18px;
+      border-radius: var(--radius-lg);
+      border: 1px solid var(--border);
+      transition: all var(--transition-fast);
+    }
+    .comment-item:hover {
+      border-color: var(--accent);
+    }
+    .comment-avatar {
+      width: 52px;
+      height: 52px;
+      border-radius: 50%;
+      background: linear-gradient(135deg, var(--accent), var(--accent-secondary));
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: white;
+      font-size: 22px;
+      flex-shrink: 0;
+    }
+    .comment-content {
+      flex: 1;
+    }
+    .comment-author {
+      font-weight: 700;
+      font-size: 15px;
+      margin-bottom: 8px;
+      color: var(--fg);
+    }
+    .comment-text {
+      font-size: 13px;
+      color: var(--fg-muted);
+      line-height: 1.7;
+    }
+    .comment-actions {
+      display: flex;
+      gap: 18px;
+      margin-top: 14px;
+      font-size: 12px;
+    }
+    .comment-actions button {
+      background: none;
+      border: none;
+      color: var(--fg-muted);
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      transition: color var(--transition-fast);
+      font-family: inherit;
+    }
+    .comment-actions button:hover {
+      color: var(--accent);
+    }
+    .comment-input {
+      display: flex;
+      gap: 14px;
+      margin-top: 24px;
+    }
+    .comment-input input {
+      flex: 1;
+      padding: 16px 22px;
+      border: 1px solid var(--border);
+      border-radius: var(--radius-full);
+      outline: none;
+      font-size: 14px;
+      background: var(--card);
+      color: var(--fg);
+      transition: all var(--transition-fast);
+    }
+    .comment-input input:focus {
+      border-color: var(--accent);
+      box-shadow: 0 0 0 4px var(--accent-glow);
+    }
+    .comment-input input::placeholder {
+      color: var(--fg-muted);
+    }
+    .comment-input button {
+      background: linear-gradient(135deg, var(--accent), var(--accent-hover));
+      color: white;
+      border: none;
+      padding: 16px 32px;
+      border-radius: var(--radius-full);
+      font-weight: 700;
+      cursor: pointer;
+      transition: all var(--transition-smooth);
+      font-family: inherit;
+    }
+    .comment-input button:hover {
+      transform: scale(1.05);
+      box-shadow: 0 8px 28px var(--accent-glow);
+    }
+    .recently-viewed {
+      margin-bottom: 48px;
+    }
+    .recently-viewed-scroll {
+      display: flex;
+      gap: 16px;
+      overflow-x: auto;
+      padding: 8px 0;
+      scrollbar-width: none;
+    }
+    .recently-viewed-scroll::-webkit-scrollbar {
+      display: none;
+    }
+    .recent-item {
+      min-width: 140px;
+      background: var(--card);
+      border-radius: var(--radius-md);
+      padding: 12px;
+      cursor: pointer;
+      transition: all var(--transition-fast);
+      border: 1px solid var(--border);
+    }
+    .recent-item:hover {
+      border-color: var(--accent);
+      transform: translateY(-4px);
+    }
+    .recent-item-image {
+      width: 100%;
+      height: 80px;
+      background: var(--card-hover);
+      border-radius: var(--radius-sm);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: var(--accent);
+      font-size: 28px;
+      margin-bottom: 8px;
+    }
+    .recent-item-title {
+      font-size: 12px;
+      font-weight: 600;
+      color: var(--fg);
+      margin-bottom: 4px;
+    }
+    .recent-item-price {
+      font-size: 11px;
+      color: var(--accent);
+      font-weight: 700;
+    }
+    .bottom-nav {
+      display: flex;
+      justify-content: space-around;
+      margin-top: 40px;
+      padding: 18px 12px;
+      background: var(--glass);
+      backdrop-filter: blur(20px);
+      -webkit-backdrop-filter: blur(20px);
+      border-radius: var(--radius-xl);
+      border: 1px solid var(--border);
+      position: sticky;
+      bottom: 20px;
+      z-index: 100;
+      box-shadow: var(--shadow-lg);
+    }
+    .nav-item {
+      text-align: center;
+      color: var(--fg-muted);
+      font-size: 10px;
+      cursor: pointer;
+      transition: all var(--transition-fast);
+      padding: 10px 16px;
+      border-radius: var(--radius-md);
+      position: relative;
+    }
+    .nav-item i {
+      font-size: 22px;
+      display: block;
+      margin-bottom: 6px;
+      transition: transform var(--transition-bounce);
+    }
+    .nav-item:hover {
+      color: var(--fg);
+      background: var(--card-hover);
+    }
+    .nav-item.active {
+      color: var(--accent);
+    }
+    .nav-item.active i {
+      transform: scale(1.15);
+    }
+    .nav-item.active::after {
+      content: '';
+      position: absolute;
+      bottom: 0;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 4px;
+      height: 4px;
+      background: var(--accent);
+      border-radius: 50%;
+    }
+    .cart-badge {
+      position: absolute;
+      top: -4px;
+      right: -4px;
+      background: linear-gradient(135deg, var(--danger), #ff5a6e);
+      color: white;
+      border-radius: 50%;
+      width: 22px;
+      height: 22px;
+      font-size: 11px;
+      font-weight: 700;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      animation: badgePop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
+      box-shadow: 0 2px 8px rgba(255, 59, 92, 0.4);
+    }
+    @keyframes badgePop {
+      0% { transform: scale(0) rotate(-180deg); }
+      100% { transform: scale(1) rotate(0deg); }
+    }
+    .modal {
+      display: none;
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: rgba(0, 0, 0, 0.9);
+      backdrop-filter: blur(12px);
+      -webkit-backdrop-filter: blur(12px);
+      z-index: 2000;
+      justify-content: center;
+      align-items: center;
+      padding: 20px;
+      opacity: 0;
+      transition: opacity var(--transition-smooth);
+    }
+    .modal.active {
+      display: flex;
+      opacity: 1;
+    }
+    .modal-content {
+      background: var(--card);
+      border-radius: var(--radius-xl);
+      max-width: 520px;
+      width: 100%;
+      max-height: 90vh;
+      overflow-y: auto;
+      padding: 32px;
+      position: relative;
+      border: 1px solid var(--border);
+      transform: scale(0.9) translateY(20px);
+      transition: transform var(--transition-bounce);
+      box-shadow: var(--shadow-lg);
+    }
+    .modal.active .modal-content {
+      transform: scale(1) translateY(0