motimat/MenuShop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

set tab for menu

Browse Source
This commit is contained in:
MotiFed
2026-11-04 16:25:54 +03:30
parent 91a0206f4e
commit bf0e99aaf6
2 changed files with 445 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
AmaroMenu.Web/wwwroot/amaro/index.html
+273 -41
View File
@@ -2,8 +2,8 @@
<html lang="fa" dir="rtl"> <html lang="fa" dir="rtl">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>کافه آمارو</title> <title>کافه آمارو</title>
<style> <style>
@@ -27,6 +27,8 @@
color: var(--text); color: var(--text);
} }
/* Header */
header { header {
padding: 32px 16px; padding: 32px 16px;
text-align: center; text-align: center;
@@ -45,24 +47,83 @@
font-size: 0.95rem; font-size: 0.95rem;
} }
/* Container */
.container { .container {
max-width: 1100px; max-width: 1100px;
margin: auto; margin: auto;
padding: 24px 16px 48px; 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 { .menu-title {
font-size: 1.4rem; font-size: 1.4rem;
margin-bottom: 16px; margin-bottom: 16px;
color: var(--primary); color: var(--primary);
} }
/* Products Grid */
.grid { .grid {
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 20px; gap: 20px;
} }
/* Product Card */
.card { .card {
background: var(--card); background: var(--card);
border-radius: var(--radius); border-radius: var(--radius);
@@ -79,6 +140,7 @@
width: 100%; width: 100%;
height: 180px; height: 180px;
object-fit: cover; object-fit: cover;
display: block;
} }
.card-content { .card-content {
@@ -94,6 +156,7 @@
margin: 0; margin: 0;
font-size: 0.9rem; font-size: 0.9rem;
color: var(--muted); color: var(--muted);
line-height: 1.8;
} }
.price { .price {
@@ -102,6 +165,8 @@
color: var(--primary); color: var(--primary);
} }
/* Footer */
footer { footer {
text-align: center; text-align: center;
padding: 24px; padding: 24px;
@@ -109,64 +174,231 @@
color: var(--muted); color: var(--muted);
border-top: 1px solid #222; 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> </style>
</head> </head>
<body> <body>
<!-- Header -->
<header> <header>
<h1>☕ کافه لیا</h1> <h1>☕ کافه آمارو</h1>
<p>قهوه‌ی تازه، لحظه‌های موندگار</p> <p>قهوه‌ی تازه، لحظه‌های موندگار</p>
</header> </header>
<div class="container"> <div class="container">
<div class="menu-title">نوشیدنی‌های قهوه</div>
<div class="grid"> <!-- Tabs -->
<div class="card"> <div class="tabs" role="tablist" aria-label="دسته‌بندی منو">
<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"> <button
<img src="https://images.unsplash.com/photo-1509042239860-f550ce710b93" alt="Cappuccino"> class="tab active"
<div class="card-content"> id="coffee-tab"
<h3>کاپوچینو</h3> role="tab"
<p>ترکیب اسپرسو، شیر داغ و فوم نرم</p> aria-selected="true"
<div class="price">110,000 تومان</div> aria-controls="coffee"
</div> onclick="showTab('coffee', this)">
</div> ☕ نوشیدنی‌های قهوه
</button>
<div class="card"> <button
<img src="https://images.unsplash.com/photo-1521305916504-4a1121188589" alt="Latte"> class="tab"
<div class="card-content"> id="breakfast-tab"
<h3>لاته</h3> role="tab"
<p>ملایم، خامه‌ای و مناسب هر سلیقه</p> aria-selected="false"
<div class="price">120,000 تومان</div> aria-controls="breakfast"
</div> onclick="showTab('breakfast', this)">
</div> 🍳 صبحانه
</button>
<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>
<!-- 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> </div>
<!-- Footer -->
<footer> <footer>
© 2025 کافه لیا — اسکن کن، انتخاب کن، لذت ببر © 2026 کافه آمارو — اسکن کن، انتخاب کن، لذت ببر
</footer> </footer>
</body> <!-- JavaScript -->
</html> <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>
AmaroMenu.Web/wwwroot/amaro/index.html.back
+172
View File
@@ -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>