anycoder-7d104f79 / index.html
Milad56902857's picture
Upload folder using huggingface_hub
4643e5c verified
Raw History Blame Contribute Delete
34.4 kB
<!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>
<!-- Font Awesome for icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--primary-color: #6366f1;
--secondary-color: #8b5cf6;
--accent-color: #ec4899;
--dark-bg: #0f172a;
--light-bg: #1e293b;
--card-bg: #334155;
--text-primary: #f1f5f9;
--text-secondary: #94a3b8;
--success: #10b981;
--warning: #f59e0b;
--danger: #ef4444;
--gradient: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
--shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.3);
--shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.4);
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
color: var(--text-primary);
min-height: 100vh;
overflow-x: hidden;
}
/* Animated Background */
.bg-animation {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -1;
opacity: 0.1;
background-image:
radial-gradient(circle at 20% 50%, var(--primary-color) 0%, transparent 50%),
radial-gradient(circle at 80% 80%, var(--secondary-color) 0%, transparent 50%),
radial-gradient(circle at 40% 20%, var(--accent-color) 0%, transparent 50%);
animation: bgMove 20s ease infinite;
}
@keyframes bgMove {
0%, 100% { transform: translate(0, 0) rotate(0deg); }
33% { transform: translate(-20px, -20px) rotate(120deg); }
66% { transform: translate(20px, -10px) rotate(240deg); }
}
/* Header */
header {
background: rgba(15, 23, 42, 0.9);
backdrop-filter: blur(10px);
border-bottom: 1px solid rgba(148, 163, 184, 0.1);
padding: 1rem 2rem;
position: sticky;
top: 0;
z-index: 1000;
box-shadow: var(--shadow-lg);
}
.header-content {
max-width: 1400px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
display: flex;
align-items: center;
gap: 1rem;
font-size: 1.5rem;
font-weight: bold;
background: var(--gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.logo i {
font-size: 2rem;
-webkit-text-fill-color: var(--primary-color);
}
.header-actions {
display: flex;
gap: 1.5rem;
align-items: center;
}
.search-box {
position: relative;
display: flex;
align-items: center;
}
.search-box input {
background: var(--light-bg);
border: 1px solid rgba(148, 163, 184, 0.2);
border-radius: 50px;
padding: 0.5rem 2.5rem 0.5rem 1rem;
color: var(--text-primary);
width: 250px;
transition: all 0.3s ease;
}
.search-box input:focus {
outline: none;
border-color: var(--primary-color);
width: 300px;
box-shadow: 0 0 20px rgba(99, 102, 241, 0.3);
}
.search-box i {
position: absolute;
left: 1rem;
color: var(--text-secondary);
}
.notification-icon {
position: relative;
cursor: pointer;
padding: 0.5rem;
border-radius: 50%;
transition: all 0.3s ease;
}
.notification-icon:hover {
background: var(--light-bg);
transform: scale(1.1);
}
.notification-badge {
position: absolute;
top: 0;
right: 0;
background: var(--danger);
color: white;
font-size: 0.7rem;
padding: 0.1rem 0.3rem;
border-radius: 50px;
}
.user-menu {
display: flex;
align-items: center;
gap: 1rem;
cursor: pointer;
padding: 0.5rem 1rem;
border-radius: 50px;
transition: all 0.3s ease;
}
.user-menu:hover {
background: var(--light-bg);
}
.user-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--gradient);
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
}
/* Sidebar */
.sidebar {
position: fixed;
right: 0;
top: 80px;
bottom: 0;
width: 280px;
background: rgba(30, 41, 59, 0.9);
backdrop-filter: blur(10px);
border-left: 1px solid rgba(148, 163, 184, 0.1);
padding: 2rem 1rem;
overflow-y: auto;
transition: transform 0.3s ease;
z-index: 999;
}
.sidebar-item {
display: flex;
align-items: center;
gap: 1rem;
padding: 1rem;
margin-bottom: 0.5rem;
border-radius: 12px;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.sidebar-item::before {
content: '';
position: absolute;
top: 0;
right: -100%;
width: 100%;
height: 100%;
background: var(--gradient);
transition: right 0.3s ease;
opacity: 0.1;
}
.sidebar-item:hover::before,
.sidebar-item.active::before {
right: 0;
}
.sidebar-item:hover,
.sidebar-item.active {
transform: translateX(-5px);
background: rgba(99, 102, 241, 0.1);
}
.sidebar-item i {
font-size: 1.2rem;
width: 24px;
text-align: center;
}
.sidebar-item.active i {
color: var(--primary-color);
}
/* Main Content */
.main-content {
margin-right: 280px;
padding: 2rem;
min-height: calc(100vh - 80px);
}
.content-section {
display: none;
animation: fadeInUp 0.5s ease;
}
.content-section.active {
display: block;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Dashboard Cards */
.dashboard-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;
margin-bottom: 2rem;
}
.stat-card {
background: linear-gradient(135deg, var(--card-bg), rgba(51, 65, 85, 0.5));
border: 1px solid rgba(148, 163, 184, 0.1);
border-radius: 16px;
padding: 1.5rem;
position: relative;
overflow: hidden;
transition: all 0.3s ease;
}
.stat-card::after {
content: '';
position: absolute;
top: -50%;
right: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, var(--primary-color), transparent);
opacity: 0;
transition: opacity 0.3s ease;
}
.stat-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-xl);
}
.stat-card:hover::after {
opacity: 0.05;
}
.stat-icon {
width: 50px;
height: 50px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
margin-bottom: 1rem;
}
.stat-value {
font-size: 2rem;
font-weight: bold;
margin-bottom: 0.5rem;
}
.stat-label {
color: var(--text-secondary);
font-size: 0.9rem;
}
/* Product Grid */
.product-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1.5rem;
margin-top: 2rem;
}
.product-card {
background: var(--card-bg);
border-radius: 16px;
overflow: hidden;
transition: all 0.3s ease;
cursor: pointer;
position: relative;
}
.product-card:hover {
transform: translateY(-10px) scale(1.02);
box-shadow: var(--shadow-xl);
}
.product-image {
width: 100%;
height: 200px;
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
display: flex;
align-items: center;
justify-content: center;
font-size: 3rem;
position: relative;
overflow: hidden;
}
.product-badge {
position: absolute;
top: 1rem;
left: 1rem;
background: var(--danger);
color: white;
padding: 0.3rem 0.8rem;
border-radius: 50px;
font-size: 0.8rem;
}
.product-info {
padding: 1.5rem;
}
.product-title {
font-size: 1.1rem;
margin-bottom: 0.5rem;
}
.product-price {
font-size: 1.5rem;
font-weight: bold;
color: var(--primary-color);
margin-bottom: 1rem;
}
.product-actions {
display: flex;
gap: 0.5rem;
}
.btn {
padding: 0.6rem 1.2rem;
border: none;
border-radius: 8px;
cursor: pointer;
font-size: 0.9rem;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.btn-primary {
background: var(--gradient);
color: white;
}
.btn-primary:hover {
transform: scale(1.05);
box-shadow: 0 5px 20px rgba(99, 102, 241, 0.4);
}
.btn-secondary {
background: var(--light-bg);
color: var(--text-primary);
}
.btn-secondary:hover {
background: var(--card-bg);
}
/* Order Table */
.table-container {
background: var(--card-bg);
border-radius: 16px;
padding: 1.5rem;
overflow-x: auto;
}
table {
width: 100%;
border-collapse: collapse;
}
th {
text-align: right;
padding: 1rem;
border-bottom: 2px solid rgba(148, 163, 184, 0.1);
color: var(--text-secondary);
font-weight: 500;
}
td {
padding: 1rem;
border-bottom: 1px solid rgba(148, 163, 184, 0.05);
}
tr:hover {
background: rgba(99, 102, 241, 0.05);
}
.status-badge {
padding: 0.3rem 0.8rem;
border-radius: 50px;
font-size: 0.85rem;
display: inline-block;
}
.status-pending {
background: rgba(245, 158, 11, 0.2);
color: var(--warning);
}
.status-processing {
background: rgba(99, 102, 241, 0.2);
color: var(--primary-color);
}
.status-delivered {
background: rgba(16, 185, 129, 0.2);
color: var(--success);
}
/* Floating Action Button */
.fab {
position: fixed;
bottom: 2rem;
left: 2rem;
width: 60px;
height: 60px;
border-radius: 50%;
background: var(--gradient);
color: white;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
box-shadow: var(--shadow-xl);
transition: all 0.3s ease;
z-index: 1000;
}
.fab:hover {
transform: scale(1.1) rotate(90deg);
}
/* Cart Sidebar */
.cart-sidebar {
position: fixed;
left: -400px;
top: 80px;
bottom: 0;
width: 400px;
background: rgba(30, 41, 59, 0.95);
backdrop-filter: blur(10px);
border-right: 1px solid rgba(148, 163, 184, 0.1);
padding: 2rem;
transition: left 0.3s ease;
z-index: 998;
overflow-y: auto;
}
.cart-sidebar.open {
left: 0;
}
.cart-item {
display: flex;
gap: 1rem;
padding: 1rem;
background: var(--card-bg);
border-radius: 12px;
margin-bottom: 1rem;
animation: slideIn 0.3s ease;
}
@keyframes slideIn {
from {
opacity: 0;
transform: translateX(-20px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
/* Loading Spinner */
.spinner {
width: 40px;
height: 40px;
border: 4px solid rgba(99, 102, 241, 0.2);
border-top-color: var(--primary-color);
border-radius: 50%;
animation: spin 1s linear infinite;
margin: 2rem auto;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
/* Toast Notification */
.toast {
position: fixed;
top: 100px;
left: 50%;
transform: translateX(-50%) translateY(-100px);
background: var(--card-bg);
padding: 1rem 2rem;
border-radius: 12px;
box-shadow: var(--shadow-xl);
display: flex;
align-items: center;
gap: 1rem;
opacity: 0;
transition: all 0.3s ease;
z-index: 2000;
}
.toast.show {
transform: translateX(-50%) translateY(0);
opacity: 1;
}
.toast.success {
border-right: 4px solid var(--success);
}
.toast.error {
border-right: 4px solid var(--danger);
}
.toast.info {
border-right: 4px solid var(--primary-color);
}
/* Mobile Responsive */
.mobile-menu-toggle {
display: none;
background: none;
border: none;
color: var(--text-primary);
font-size: 1.5rem;
cursor: pointer;
}
@media (max-width: 1024px) {
.sidebar {
transform: translateX(100%);
}
.sidebar.open {
transform: translateX(0);
}
.main-content {
margin-right: 0;
}
.mobile-menu-toggle {
display: block;
}
.search-box input {
width: 150px;
}
.search-box input:focus {
width: 200px;
}
}
@media (max-width: 640px) {
.header-content {
padding: 0 1rem;
}
.cart-sidebar {
width: 100%;
left: -100%;
}
.dashboard-grid {
grid-template-columns: 1fr;
}
.product-grid {
grid-template-columns: 1fr;
}
.table-container {
padding: 1rem;
}
th, td {
padding: 0.5rem;
font-size: 0.9rem;
}
}
/* Special Effects */
.glow {
animation: glow 2s ease-in-out infinite alternate;
}
@keyframes glow {
from {
box-shadow: 0 0 10px rgba(99, 102, 241, 0.5);
}
to {
box-shadow: 0 0 20px rgba(99, 102, 241, 0.8), 0 0 30px rgba(139, 92, 246, 0.5);
}
}
.pulse {
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes pulse {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.5;
}
}
</style>
</head>
<body>
<div class="bg-animation"></div>
<header>
<div class="header-content">
<div style="display: flex; align-items: center; gap: 1rem;">
<button class="mobile-menu-toggle" onclick="toggleSidebar()">
<i class="fas fa-bars"></i>
</button>
<div class="logo">
<i class="fas fa-home"></i>
<span>لوازم خانگی مدرن</span>
</div>
<a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" style="color: var(--text-secondary); text-decoration: none; font-size: 0.9rem;">
Built with anycoder
</a>
</div>
<div class="header-actions">
<div class="search-box">
<input type="text" placeholder="جستجو محصولات..." id="searchInput">
<i class="fas fa-search"></i>
</div>
<div class="notification-icon" onclick="showNotifications()">
<i class="fas fa-bell"></i>
<span class="notification-badge">3</span>
</div>
<div class="user-menu" onclick="toggleUserMenu()">
<div class="user-avatar">ع</div>
<span>علی احمدی</span>
<i class="fas fa-chevron-down"></i>
</div>
</div>
</div>
</header>
<aside class="sidebar" id="sidebar">
<div class="sidebar-item active" onclick="navigateTo('dashboard')">
<i class="fas fa-tachometer-alt"></i>
<span>داشبورد</span>
</div>
<div class="sidebar-item" onclick="navigateTo('products')">
<i class="fas fa-shopping-bag"></i>
<span>محصولات</span>
</div>
<div class="sidebar-item" onclick="navigateTo('orders')">
<i class="fas fa-receipt"></i>
<span>سفارشات</span>
</div>
<div class="sidebar-item" onclick="navigateTo('wishlist')">
<i class="fas fa-heart"></i>
<span>علاقه‌مندی‌ها</span>
</div>
<div class="sidebar-item" onclick="navigateTo('profile')">
<i class="fas fa-user"></i>
<span>پروفایل</span>
</div>
<div class="sidebar-item" onclick="navigateTo('support')">
<i class="fas fa-headset"></i>
<span>پشتیبانی</span>
</div>
<div class="sidebar-item" onclick="navigateTo('settings')">
<i class="fas fa-cog"></i>
<span>تنظیمات</span>
</div>
</aside>
<main class="main-content">
<!-- Dashboard Section -->
<section id="dashboard" class="content-section active">
<h1 style="margin-bottom: 2rem; font-size: 2rem;">به پنل کاربری خود خوش آمدید!</h1>
<div class="dashboard-grid">
<div class="stat-card glow">
<div class="stat-icon" style="background: rgba(99, 102, 241, 0.2); color: var(--primary-color);">
<i class="fas fa-shopping-cart"></i>
</div>
<div class="stat-value">12</div>
<div class="stat-label">سفارش فعال</div>
</div>
<div class="stat-card">
<div class="stat-icon" style="background: rgba(16, 185, 129, 0.2); color: var(--success);">
<i class="fas fa-check-circle"></i>
</div>
<div class="stat-value">48</div>
<div class="stat-label">سفارش تحویل شده</div>
</div>
<div class="stat-card">
<div class="stat-icon" style="background: rgba(236, 72, 153, 0.2); color: var(--accent-color);">
<i class="fas fa-heart"></i>
</div>
<div class="stat-value">24</div>
<div class="stat-label">محصول مورد علاقه</div>
</div>
<div class="stat-card">
<div class="stat-icon" style="background: rgba(245, 158, 11, 0.2); color: var(--warning);">
<i class="fas fa-coins"></i>
</div>
<div class="stat-value">850,000</div>
<div class="stat-label">تومان اعتبار</div>
</div>
</div>
<h2 style="margin: 2rem 0 1rem;">پیشنهادات ویژه برای شما</h2>
<div class="product-grid">
<div class="product-card" onclick="addToCart('یخچال دو درب', 8500000)">
<div class="product-image">
<i class="fas fa-snowflake"></i>
<span class="product-badge">%20 تخفیف</span>
</div>
<div class="product-info">
<h3 class="product-title">یخچال دو درب مدرن</h3>
<div class="product-price">۸,۵۰۰,۰۰۰ تومان</div>
<div class="product-actions">
<button class="btn btn-primary">
<i class="fas fa-cart-plus"></i>
افزودن به سبد
</button>
<button class="btn btn-secondary">
<i class="fas fa-heart"></i>
</button>
</div>
</div>
</div>
<div class="product-card" onclick="addToCart('ماشین لباسشویی', 6500000)">
<div class="product-image" style="background: linear-gradient(135deg, var(--secondary-color), var(--accent-color));">
<i class="fas fa-tshirt"></i>
</div>
<div class="product-info">
<h3 class="product-title">ماشین لباسشویی هوشمند</h3>
<div class="product-price">۶,۵۰۰,۰۰۰ تومان</div>
<div class="product-actions">
<button class="btn btn-primary">
<i class="fas fa-cart-plus"></i>
افزودن به سبد
</button>
<button class="btn btn-secondary">
<i class="fas fa-heart"></i>
</button>
</div>
</div>
</div>
<div class="product-card" onclick="addToCart('ظرفشویی', 4500000)">
<div class="product-image" style="background: linear-gradient(135deg, var(--accent-color), var(--warning));">
<i class="fas fa-utensils"></i>
</div>
<div class="product-info">
<h3 class="product-title">ماشین ظرفشویی</h3>
<div class="product-price">۴,۵۰۰,۰۰۰ تومان</div>
<div class="product-actions">
<button class="btn btn-primary">
<i class="fas fa-cart-plus"></i>
افزودن به سبد
</button>
<button class="btn btn-secondary">
<i class="fas fa-heart"></i>
</button>
</div>
</div>
</div>
</div>
</section>
<!-- Products Section -->
<section id="products" class="content-section">
<h1 style="margin-bottom: 2rem;">همه محصولات</h1>
<div style="display: flex; gap: 1rem; margin-bottom: 2rem; flex-wrap: wrap;">
<button class="btn btn-primary" onclick="filterProducts('all')">همه</button>
<button class="btn btn-secondary" onclick="filterProducts('fridge')">یخچال</button>
<button class="btn btn-secondary" onclick="filterProducts('washer')">لباسشویی</button>
<button class="btn btn-secondary" onclick="filterProducts('dishwasher')">ظرفشویی</button>
<button class="btn btn-secondary" onclick="filterProducts('oven')">فر و اجاق گاز</button>
</div>
<div class="product-grid" id="productsGrid">
<!-- Products will be loaded here -->
</div>
</section>
<!-- Orders Section -->
<section id="orders" class="content-section">
<h1 style="margin-bottom: 2rem;">سفارشات من</h1>
<div class="table-container">
<table>
<thead>
<tr>
<th>شماره سفارش</th>
<th>تاریخ</th>
<th>محصولات</th>
<th>مبلغ کل</th>
<th>وضعیت</th>
<th>عملیات</th>
</tr>
</thead>
<tbody id="ordersTable">
<tr>
<td>#12345</td>
<td>۱۴۰۲/۱۰/۱۵</td>
<td>یخچال دو درب</td>
<td>۸,۵۰۰,۰۰۰ تومان</td>
<td><span class="status-badge status-delivered">تحویل داده شده</span></td>
<td>
<button class="btn btn-primary" onclick="viewOrderDetails('12345')">مشاهده</button>
</td>
</tr>
<tr>
<td>#12346</td>
<td>۱۴۰۲/۱۰/۱۸</td>
<td>ماشین لباسشویی</td>
<td>۶,۵۰۰,۰۰۰ تومان</td>
<td><span class="status-badge status-processing">در حال پردازش</span></td>
<td>
<button class="btn btn-primary" onclick="viewOrderDetails('12346')">مشاهده</button>
</td>
</tr>
<tr>
<td>#12347</td>
<td>۱۴۰۲/۱۰/۲۰</td>
<td>ظرفشویی + مایکروویو</td>
<td>۷,۲۰۰,۰۰۰ تومان</td>
<td><span class="status-badge status-pending">در انتظار پرداخت</span></td>
<td>
<button class="btn btn-primary" onclick="viewOrderDetails('12347')">مشاهده</button>
</td>
</tr>
</tbody>
</table>
</div>
</section>
<!-- Wishlist Section -->
<section id="wishlist" class="content-section">
<h1 style="margin-bottom: 2rem;">علاقه‌مندی‌های من</h1>
<div class="product-grid" id="wishlistGrid">
<!-- Wishlist items will be loaded here -->
</div>
</section>
<!-- Profile Section -->
<section id="profile" class="content-section">
<h1 style="margin-bottom: 2rem;">پروفایل کاربری</h1>
<div style="display: grid; grid-template-columns: 1fr 2fr; gap: 2rem;">
<div class="stat-card" style="text-align: center;">
<div class="user-avatar" style="width: 100px; height: 100px; font-size: 2rem; margin: 0 auto 1rem;">ع</div>
<h3>علی احمدی</h3>
<p style="color: var(--text-secondary); margin-top: 0.5rem;">ali.ahmadi@example.com</p>
<button class="btn btn-primary" style="margin-top: 1rem;">تغییر تصویر</button>
</div>
<div class="stat-card">
<h3 style="margin-bottom: 1.5rem;">اطلاعات شخصی</h3>
<div style="display: grid; gap: 1rem;">
<div>
<label style="display: block; margin-bottom: 0.5rem; color: var(--text-secondary);">نام کامل</label>
<input type="text" value="علی احمدی" style="width: 100%; padding: 0.8rem; background: var(--light-bg); border: 1px solid rgba(148, 163, 184, 0.2); border-radius: 8px; color: var(--text-primary);">
</div>
<div>
<label style="display: block; margin-bottom: 0.5rem; color: var(--text-secondary);">شماره تماس</label>
<input type="tel" value="۰۹۱۲۳۴۵۶۷۸۹" style="width: 100%; padding: 0.8rem; background: var(--light-bg); border: 1px solid rgba(148, 163, 184, 0.2); border-radius: 8px; color: var(--text-primary);">
</div>
<div>
<label style="display: block; margin-bottom: 0.5rem; color: var(--text-secondary);">آدرس</label>
<textarea style="width: 100%; padding: 0.8rem; background: var(--light-bg); border: 1px solid rgba(148, 163, 184, 0.2); border-radius: 8px; color: var(--text-primary); min-height: 100px;">تهران، خیابان ولیعصر، پلاک ۱۲۳</textarea>
</div>
<button class="btn btn-primary" onclick="updateProfile()">ذخیره تغییرات</button>
</div>
</div>
</div>
</section>
<!-- Support Section -->
<section id="support" class="content-section">
<h1 style="margin-bottom: 2rem;">پشتیبانی</h1>
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem;">
<div class="stat-card">
<div class="stat-icon" style="background: rgba(99, 102, 241, 0.2); color: var(--primary-color);">
<i class="fas fa-phone"></i>
</div>
<h3 style="margin: 1rem 0;">تماس تلفنی</h3>
<p style="color: var(--text-secondary); margin-bottom: 1rem;">۰۲۱-۸۸۰۰۰۰۰۰</p>
<p style="font-size: 0.9rem; color: var(--text-secondary);">شنبه تا چهارشنبه: ۹ الی ۱۸</p>
</div>
<div class="stat-card">
<div class="stat-icon" style="background: rgba(16, 185, 129, 0.2); color: var(--success);">
<i class="fas fa-comments"></i>
</div>
<h3 style="margin: 1rem 0;">چت آنلاین</h3>
<p style="color: var(--text-secondary); margin-bottom: 1rem;">۲۴ ساعته پاسخگوی شما هستیم</p>
<button class="btn btn-primary">شروع چت</button>
</div>
<div class="stat-card">
<div class="stat-icon" style="background: rgba(236, 72, 153, 0.2); color: var(--accent-color);">
<i class="fas fa-envelope"></i>
</div>
<h3 style="margin: 1rem 0;">ایمیل</h3>
<p style="color: var(--text-secondary); margin-bottom: 1rem;">support@modernhome.com</p>
<p style="font-size: 0.9rem; color: var(--text-secondary);">ظرف ۲۴ ساعت پاسخ داده می‌شود</p>
</div>
</div>
<div style="margin-top: 2rem;">
<h2 style="margin-bottom: 1rem;">ارسال تیکت جدید</h2>
<div class="stat-card">
<div style