From bf0e99aaf623450e38e5f2a0e0635b3e4c225603 Mon Sep 17 00:00:00 2001
From: MotiFed <motimatty@gmail.com>
Date: Wed, 4 Nov 2026 16:25:54 +0330
Subject: [PATCH] set tab for menu

---
 AmaroMenu.Web/wwwroot/amaro/index.html      | 314 +++++++++++++++++---
 AmaroMenu.Web/wwwroot/amaro/index.html.back | 172 +++++++++++
 2 files changed, 445 insertions(+), 41 deletions(-)
 create mode 100644 AmaroMenu.Web/wwwroot/amaro/index.html.back

diff --git a/AmaroMenu.Web/wwwroot/amaro/index.html b/AmaroMenu.Web/wwwroot/amaro/index.html
index 1ed2b7e..a0f955c 100644
--- a/AmaroMenu.Web/wwwroot/amaro/index.html
+++ b/AmaroMenu.Web/wwwroot/amaro/index.html
@@ -2,8 +2,8 @@
 <html lang="fa" dir="rtl">
 
 <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta charset="UTF-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
     <title>کافه آمارو</title>
 
     <style>
@@ -27,6 +27,8 @@
             color: var(--text);
         }
 
+        /* Header */
+
         header {
             padding: 32px 16px;
             text-align: center;
@@ -45,24 +47,83 @@
             font-size: 0.95rem;
         }
 
+        /* Container */
+
         .container {
             max-width: 1100px;
             margin: auto;
             padding: 24px 16px 48px;
         }
 
+        /* Tabs */
+
+        .tabs {
+            display: flex;
+            gap: 12px;
+            margin-bottom: 24px;
+            border-bottom: 1px solid #333;
+        }
+
+        .tab {
+            padding: 14px 24px;
+            border: none;
+            background: transparent;
+            color: var(--muted);
+            font-size: 1rem;
+            cursor: pointer;
+            border-bottom: 3px solid transparent;
+            transition: all 0.2s ease;
+        }
+
+        .tab:hover {
+            color: var(--primary);
+        }
+
+        .tab.active {
+            color: var(--primary);
+            border-bottom-color: var(--primary);
+            font-weight: bold;
+        }
+
+        /* Menu Sections */
+
+        .menu-section {
+            display: none;
+        }
+
+        .menu-section.active {
+            display: block;
+            animation: fadeIn 0.3s ease;
+        }
+
+        @keyframes fadeIn {
+            from {
+                opacity: 0;
+                transform: translateY(8px);
+            }
+
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+
         .menu-title {
             font-size: 1.4rem;
             margin-bottom: 16px;
             color: var(--primary);
         }
 
+        /* Products Grid */
+
         .grid {
             display: grid;
             grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
             gap: 20px;
         }
 
+        /* Product Card */
+
         .card {
             background: var(--card);
             border-radius: var(--radius);
@@ -79,6 +140,7 @@
             width: 100%;
             height: 180px;
             object-fit: cover;
+            display: block;
         }
 
         .card-content {
@@ -94,6 +156,7 @@
             margin: 0;
             font-size: 0.9rem;
             color: var(--muted);
+            line-height: 1.8;
         }
 
         .price {
@@ -102,6 +165,8 @@
             color: var(--primary);
         }
 
+        /* Footer */
+
         footer {
             text-align: center;
             padding: 24px;
@@ -109,64 +174,231 @@
             color: var(--muted);
             border-top: 1px solid #222;
         }
+
+        /* Mobile */
+
+        @media (max-width: 600px) {
+            header {
+                padding: 24px 12px;
+            }
+
+            header h1 {
+                font-size: 1.6rem;
+            }
+
+            .container {
+                padding: 20px 12px 36px;
+            }
+
+            .tabs {
+                gap: 4px;
+            }
+
+            .tab {
+                flex: 1;
+                padding: 12px 8px;
+                font-size: 0.9rem;
+            }
+
+            .grid {
+                grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+                gap: 12px;
+            }
+
+            .card img {
+                height: 140px;
+            }
+
+            .card-content {
+                padding: 12px;
+            }
+
+            .card-content h3 {
+                font-size: 1rem;
+            }
+
+            .card-content p {
+                font-size: 0.8rem;
+            }
+        }
     </style>
 </head>
 
 <body>
 
+<!-- Header -->
+
 <header>
-    <h1>☕ کافه لیا</h1>
+    <h1>☕ کافه آمارو</h1>
     <p>قهوه‌ی تازه، لحظه‌های موندگار</p>
 </header>
 
 <div class="container">
-    <div class="menu-title">نوشیدنی‌های قهوه</div>
 
-    <div class="grid">
+    <!-- Tabs -->
 
-        <div class="card">
-            <img src="https://images.unsplash.com/photo-1511920170033-f8396924c348" alt="Espresso">
-            <div class="card-content">
-                <h3>اسپرسو</h3>
-                <p>قهوه خالص با طعمی قوی و عمیق</p>
-                <div class="price">85,000 تومان</div>
-            </div>
-        </div>
+    <div class="tabs" role="tablist" aria-label="دسته‌بندی منو">
 
-        <div class="card">
-            <img src="https://images.unsplash.com/photo-1509042239860-f550ce710b93" alt="Cappuccino">
-            <div class="card-content">
-                <h3>کاپوچینو</h3>
-                <p>ترکیب اسپرسو، شیر داغ و فوم نرم</p>
-                <div class="price">110,000 تومان</div>
-            </div>
-        </div>
+        <button
+                class="tab active"
+                id="coffee-tab"
+                role="tab"
+                aria-selected="true"
+                aria-controls="coffee"
+                onclick="showTab('coffee', this)">
+            ☕ نوشیدنی‌های قهوه
+        </button>
 
-        <div class="card">
-            <img src="https://images.unsplash.com/photo-1521305916504-4a1121188589" alt="Latte">
-            <div class="card-content">
-                <h3>لاته</h3>
-                <p>ملایم، خامه‌ای و مناسب هر سلیقه</p>
-                <div class="price">120,000 تومان</div>
-            </div>
-        </div>
-
-        <div class="card">
-            <img src="https://images.unsplash.com/photo-1514432324607-a09d9b4aefdd" alt="Mocha">
-            <div class="card-content">
-                <h3>موکا</h3>
-                <p>قهوه با شکلات، شیرین و خاص</p>
-                <div class="price">135,000 تومان</div>
-            </div>
-        </div>
+        <button
+                class="tab"
+                id="breakfast-tab"
+                role="tab"
+                aria-selected="false"
+                aria-controls="breakfast"
+                onclick="showTab('breakfast', this)">
+            🍳 صبحانه
+        </button>
 
     </div>
+
+    <!-- Coffee Section -->
+
+    <section
+            id="coffee"
+            class="menu-section active"
+            role="tabpanel"
+            aria-labelledby="coffee-tab">
+
+        <div class="menu-title">
+            نوشیدنی‌های قهوه
+        </div>
+
+        <div class="grid">
+
+            <div class="card">
+                <img
+                        src="https://images.unsplash.com/photo-1511920170033-f8396924c348"
+                        alt="اسپرسو">
+
+                <div class="card-content">
+                    <h3>اسپرسو</h3>
+                    <p>قهوه خالص با طعمی قوی و عمیق</p>
+                    <div class="price">85,000 تومان</div>
+                </div>
+            </div>
+
+            <div class="card">
+                <img
+                        src="https://images.unsplash.com/photo-1509042239860-f550ce710b93"
+                        alt="کاپوچینو">
+
+                <div class="card-content">
+                    <h3>کاپوچینو</h3>
+                    <p>ترکیب اسپرسو، شیر داغ و فوم نرم</p>
+                    <div class="price">110,000 تومان</div>
+                </div>
+            </div>
+
+            <div class="card">
+                <img
+                        src="https://images.unsplash.com/photo-1521305916504-4a1121188589"
+                        alt="لاته">
+
+                <div class="card-content">
+                    <h3>لاته</h3>
+                    <p>ملایم، خامه‌ای و مناسب هر سلیقه</p>
+                    <div class="price">120,000 تومان</div>
+                </div>
+            </div>
+
+            <div class="card">
+                <img
+                        src="https://images.unsplash.com/photo-1514432324607-a09d9b4aefdd"
+                        alt="موکا">
+
+                <div class="card-content">
+                    <h3>موکا</h3>
+                    <p>قهوه با شکلات، شیرین و خاص</p>
+                    <div class="price">135,000 تومان</div>
+                </div>
+            </div>
+
+        </div>
+    </section>
+
+    <!-- Breakfast Section -->
+
+    <section
+            id="breakfast"
+            class="menu-section"
+            role="tabpanel"
+            aria-labelledby="breakfast-tab">
+
+        <div class="menu-title">
+            منوی صبحانه
+        </div>
+
+        <div class="grid">
+
+            <div class="card">
+                <img
+                        src="https://images.unsplash.com/photo-1533089860892-a7c6f0a88666"
+                        alt="صبحانه">
+
+                <div class="card-content">
+                    <h3>صبحانه انگلیسی</h3>
+                    <p>تخم مرغ، سوسیس، لوبیا و نان تست</p>
+                    <div class="price">250,000 تومان</div>
+                </div>
+            </div>
+
+            <div class="card">
+                <img
+                        src="https://images.unsplash.com/photo-1525351484163-7529414344d8"
+                        alt="املت">
+
+                <div class="card-content">
+                    <h3>املت</h3>
+                    <p>املت گوجه با نان تازه</p>
+                    <div class="price">120,000 تومان</div>
+                </div>
+            </div>
+
+        </div>
+    </section>
+
 </div>
 
+<!-- Footer -->
+
 <footer>
-    © 2025 کافه لیا — اسکن کن، انتخاب کن، لذت ببر
+    © 2026 کافه آمارو — اسکن کن، انتخاب کن، لذت ببر
 </footer>
 
-</body>
+<!-- JavaScript -->
 
-</html>
\ No newline at end of file
+<script>
+    function showTab(tabId, button) {
+
+        // Hide all sections
+        document.querySelectorAll('.menu-section').forEach(section => {
+            section.classList.remove('active');
+        });
+
+        // Deactivate all tabs
+        document.querySelectorAll('.tab').forEach(tab => {
+            tab.classList.remove('active');
+            tab.setAttribute('aria-selected', 'false');
+        });
+
+        // Activate selected section
+        document.getElementById(tabId).classList.add('active');
+
+        // Activate selected tab
+        button.classList.add('active');
+        button.setAttribute('aria-selected', 'true');
+    }
+</script>
+
+</body>
+</html>
diff --git a/AmaroMenu.Web/wwwroot/amaro/index.html.back b/AmaroMenu.Web/wwwroot/amaro/index.html.back
new file mode 100644
index 0000000..1ed2b7e
--- /dev/null
+++ b/AmaroMenu.Web/wwwroot/amaro/index.html.back
@@ -0,0 +1,172 @@
+<!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>
+
+    <style>
+        :root {
+            --bg: #0f0f0f;
+            --card: #1c1c1c;
+            --primary: #c59d5f;
+            --text: #f5f5f5;
+            --muted: #aaaaaa;
+            --radius: 16px;
+        }
+
+        * {
+            box-sizing: border-box;
+            font-family: "Segoe UI", Tahoma, sans-serif;
+        }
+
+        body {
+            margin: 0;
+            background: var(--bg);
+            color: var(--text);
+        }
+
+        header {
+            padding: 32px 16px;
+            text-align: center;
+            background: linear-gradient(135deg, #1a1a1a, #000);
+        }
+
+        header h1 {
+            margin: 0;
+            font-size: 2rem;
+            color: var(--primary);
+        }
+
+        header p {
+            margin-top: 8px;
+            color: var(--muted);
+            font-size: 0.95rem;
+        }
+
+        .container {
+            max-width: 1100px;
+            margin: auto;
+            padding: 24px 16px 48px;
+        }
+
+        .menu-title {
+            font-size: 1.4rem;
+            margin-bottom: 16px;
+            color: var(--primary);
+        }
+
+        .grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+            gap: 20px;
+        }
+
+        .card {
+            background: var(--card);
+            border-radius: var(--radius);
+            overflow: hidden;
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
+            transition: transform 0.3s ease;
+        }
+
+        .card:hover {
+            transform: translateY(-6px);
+        }
+
+        .card img {
+            width: 100%;
+            height: 180px;
+            object-fit: cover;
+        }
+
+        .card-content {
+            padding: 16px;
+        }
+
+        .card-content h3 {
+            margin: 0 0 6px;
+            font-size: 1.1rem;
+        }
+
+        .card-content p {
+            margin: 0;
+            font-size: 0.9rem;
+            color: var(--muted);
+        }
+
+        .price {
+            margin-top: 12px;
+            font-weight: bold;
+            color: var(--primary);
+        }
+
+        footer {
+            text-align: center;
+            padding: 24px;
+            font-size: 0.8rem;
+            color: var(--muted);
+            border-top: 1px solid #222;
+        }
+    </style>
+</head>
+
+<body>
+
+<header>
+    <h1>☕ کافه لیا</h1>
+    <p>قهوه‌ی تازه، لحظه‌های موندگار</p>
+</header>
+
+<div class="container">
+    <div class="menu-title">نوشیدنی‌های قهوه</div>
+
+    <div class="grid">
+
+        <div class="card">
+            <img src="https://images.unsplash.com/photo-1511920170033-f8396924c348" alt="Espresso">
+            <div class="card-content">
+                <h3>اسپرسو</h3>
+                <p>قهوه خالص با طعمی قوی و عمیق</p>
+                <div class="price">85,000 تومان</div>
+            </div>
+        </div>
+
+        <div class="card">
+            <img src="https://images.unsplash.com/photo-1509042239860-f550ce710b93" alt="Cappuccino">
+            <div class="card-content">
+                <h3>کاپوچینو</h3>
+                <p>ترکیب اسپرسو، شیر داغ و فوم نرم</p>
+                <div class="price">110,000 تومان</div>
+            </div>
+        </div>
+
+        <div class="card">
+            <img src="https://images.unsplash.com/photo-1521305916504-4a1121188589" alt="Latte">
+            <div class="card-content">
+                <h3>لاته</h3>
+                <p>ملایم، خامه‌ای و مناسب هر سلیقه</p>
+                <div class="price">120,000 تومان</div>
+            </div>
+        </div>
+
+        <div class="card">
+            <img src="https://images.unsplash.com/photo-1514432324607-a09d9b4aefdd" alt="Mocha">
+            <div class="card-content">
+                <h3>موکا</h3>
+                <p>قهوه با شکلات، شیرین و خاص</p>
+                <div class="price">135,000 تومان</div>
+            </div>
+        </div>
+
+    </div>
+</div>
+
+<footer>
+    © 2025 کافه لیا — اسکن کن، انتخاب کن، لذت ببر
+</footer>
+
+</body>
+
+</html>
\ No newline at end of file