<button class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">Primary</button>
<button class="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700">Success</button>
<button class="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700">Danger</button>
<button class="px-4 py-2 bg-yellow-500 text-white rounded-lg hover:bg-yellow-600">Warning</button>
<button class="px-4 py-2 bg-gray-600 text-white rounded-lg hover:bg-gray-700">Dark</button>
<button class="px-4 py-2 bg-white text-gray-700 border border-gray-300 rounded-lg hover:bg-gray-100 dark:bg-gray-800 dark:text-gray-200 dark:border-gray-600">Light</button>
<div>
<label for="username" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
نام کاربری یا شماره موبایل
</label>
<div class="relative">
<input
type="text"
id="username"
class="w-full ps-12 ps-4 py-3 border rounded-xl focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent dark:bg-zinc-800 dark:border-gray-600 dark:text-white"
placeholder="نام کاربری یا شماره موبایل"
required
>
<div class="absolute input-icon top-1/2 transform -translate-y-1/2 text-gray-400">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
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>
</div>
</div>
<p class="error-message hidden text-red-500 text-sm mt-1" id="username-error">
لطفا نام کاربری یا شماره موبایل معتبر وارد کنید
</p>
</div><div>
<label
for="name"
class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"
>
نام و نام خانوادگی
</label>
<input
id="name"
type="text"
placeholder="نام خود را وارد کنید"
class="w-full px-3 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent dark:bg-zinc-800 dark:border-gray-600 dark:text-white"
>
</div><div>
<label
for="commentQ"
class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"
>
نظر
</label>
<textarea
id="commentQ"
placeholder="متن نظر!"
class="w-full px-3 py-3 border border-gray-300 rounded-lg h-32 mb-4 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent dark:bg-zinc-800 dark:border-gray-600 dark:text-white"
></textarea>
</div><div class="grid sm:grid-cols-2 grid-cols-1 gap-4 mb-4">
<!-- نقاط قوت -->
<div class="w-full mx-auto">
<label class="block mb-2 font-medium text-gray-700 dark:text-white">
نقاط قوت:
</label>
<div class="tag-container flex flex-wrap gap-2 p-2 border border-gray-300 rounded-lg min-h-[50px] items-center dark:border-gray-600">
<input
type="text"
placeholder="با کلیک اینتر اضافه کنید"
class="tag-input placeholder-gray-500 flex-grow px-3 py-2 border-none outline-none min-w-[150px] bg-transparent dark:placeholder-gray-400 dark:text-white"
data-color="bg-green-200"
>
</div>
</div>
<!-- نقاط ضعف -->
<div class="w-full mx-auto">
<label class="block mb-2 font-medium text-gray-700 dark:text-white">
نقاط ضعف:
</label>
<div class="tag-container flex flex-wrap gap-2 p-2 border border-gray-300 rounded-lg min-h-[50px] items-center dark:border-gray-600">
<input
type="text"
placeholder="با کلیک اینتر اضافه کنید"
class="tag-input placeholder-gray-500 flex-grow px-3 py-2 border-none outline-none min-w-[150px] bg-transparent dark:placeholder-gray-400 dark:text-white"
data-color="#fccee8"
>
</div>
</div>
</div><div class="flex space-x-2">
<!-- Star 1 -->
<input type="radio" id="star1" name="rating" class="hidden" value="1">
<label for="star1" class="cursor-pointer">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="size-6 text-gray-400">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 17.27l6.18 3.73-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73-1.64 7.03z" />
</svg>
</label>
<!-- Star 2 -->
<input type="radio" id="star2" name="rating" class="hidden" value="2">
<label for="star2" class="cursor-pointer">
<svg ... class="size-6 text-gray-400">...</svg>
</label>
<!-- Star 3 -->
<input type="radio" id="star3" name="rating" class="hidden" value="3">
<label for="star3" class="cursor-pointer">
<svg ... class="size-6 text-gray-400">...</svg>
</label>
<!-- Star 4 -->
<input type="radio" id="star4" name="rating" class="hidden" value="4">
<label for="star4" class="cursor-pointer">
<svg ... class="size-6 text-gray-400">...</svg>
</label>
<!-- Star 5 -->
<input type="radio" id="star5" name="rating" class="hidden" value="5">
<label for="star5" class="cursor-pointer">
<svg ... class="size-6 text-gray-400">...</svg>
</label>
</div><div class="flex my-4 flex-wrap items-center space-x-3">
<!-- سبز -->
<div class="flex items-center">
<input type="radio" name="color" checked id="greenColor" class="hidden peer" />
<label
for="greenColor"
class="select-none dark:!text-white cursor-pointer flex items-center justify-center rounded-full border-2 border-gray-200 py-1 px-2 text-gray-700 transition-colors duration-200 ease-in-out peer-checked:text-gray-900 peer-checked:border-primary-500"
>
<span class="size-4 bg-green-600 rounded-full"></span>
<span class="dir-ltr ms-2">سبز</span>
</label>
</div>
<!-- آبی -->
<div class="flex items-center">
<input type="radio" name="color" id="blueColor" class="hidden peer" />
<label
for="blueColor"
class="select-none dark:!text-white cursor-pointer flex items-center justify-center rounded-full border-2 border-gray-200 py-1 px-2 text-gray-700 transition-colors duration-200 ease-in-out peer-checked:text-gray-900 peer-checked:border-primary-500"
>
<span class="size-4 bg-blue-600 rounded-full"></span>
<span class="dir-ltr ms-2">آبی</span>
</label>
</div>
</div><div class="flex space-x-1">
<div class="inline-flex items-center space-x-2 border border-gray-200 dark:border-zinc-700 rounded-lg px-4 bg-white dark:bg-zinc-800 shadow">
<!-- دکمه افزایش -->
<button class="size-10 rounded-full flex items-center justify-center text-lg dark:text-white"
onclick="increment('count1')">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"/>
</svg>
</button>
<!-- عدد شمارنده -->
<span id="count1" class="text-lg px-5 inline-block dark:text-white">1</span>
<!-- دکمه کاهش -->
<button class="size-10 rounded-full flex items-center justify-center text-lg dark:text-white"
onclick="decrement('count1')">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
<path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14"/>
</svg>
</button>
</div>
</div><a
href="#"
data-modal-target="discountModal"
class="modal-trigger bg-primary text-white py-1 px-5 cursor-pointer rounded-lg flex items-center"
>
باز کردن مدال
</a>
<div
id="discountModal"
role="dialog"
aria-modal="true"
aria-labelledby="discountModalTitle"
data-modal-id="discountModal"
class="modal hidden fixed inset-0 z-50 overflow-auto backdrop-blur bg-opacity-50"
>
<div class="relative p-4 w-full max-w-md m-auto flex items-center min-h-screen">
<div class="relative dark:bg-gray-800 border-gray-300 border bg-white rounded-lg shadow-lg w-full">
<!-- Header -->
<div class="flex justify-between items-center p-4 dark:border-b-white border-b">
<h3 id="discountModalTitle" class="text-xl dark:text-white">
وارد کردن کد تخفیف
</h3>
<button data-modal-close class="text-gray-500 hover:text-gray-700 cursor-pointer text-3xl">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6 dark:text-white">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"/>
</svg>
</button>
</div>
<!-- Content -->
<div class="p-4">
<form>
<div class="mb-4">
<label for="discountCode" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
کد تخفیف:
</label>
<input
placeholder="کد تخفیف را وارد کنید:"
type="text"
id="discountCode"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-zinc-800 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
required
>
</div>
<button class="py-1 px-3 bg-primary text-white rounded">بررسی</button>
</form>
</div>
</div>
</div>
</div>
<!-- تولتیپ بالا -->
<button class="bg-primary text-white py-2 px-4 rounded-lg relative group cursor-pointer">
تولتیپ بالا
<span class="absolute bottom-full mb-2 end-1/2 -translate-x-1/2 hidden group-hover:block bg-gray-900 text-white text-sm py-1 px-2 rounded-md shadow-lg whitespace-nowrap z-50">
این تولتیپ بالاست
<span class="absolute top-full end-1/2 -translate-x-1/2 w-0 h-0 border-x-4 border-x-transparent border-t-4 border-t-gray-900"></span>
</span>
</button>
<!-- تولتیپ پایین -->
<button class="bg-primary text-white py-2 px-4 rounded-lg relative group cursor-pointer">
تولتیپ پایین
<span class="absolute top-full mt-2 end-1/2 -translate-x-1/2 hidden group-hover:block bg-gray-900 text-white text-sm py-1 px-2 rounded-md shadow-lg whitespace-nowrap z-50">
این تولتیپ پایینه
<span class="absolute bottom-full end-1/2 -translate-x-1/2 w-0 h-0 border-x-4 border-x-transparent border-b-4 border-b-gray-900"></span>
</span>
</button>
<!-- تولتیپ چپ -->
<button class="bg-primary text-white py-2 px-4 rounded-lg relative group cursor-pointer">
تولتیپ چپ
<span class="absolute start-full ms-2 top-1/2 -translate-y-1/2 hidden group-hover:block bg-gray-900 text-white text-sm py-1 px-2 rounded-md shadow-lg whitespace-nowrap z-50">
این تولتیپ چپه
<span class="absolute end-full top-1/2 -translate-y-1/2 w-0 h-0 border-y-4 border-y-transparent border-e-4 border-e-gray-900"></span>
</span>
</button>
<!-- تولتیپ راست -->
<button class="bg-primary text-white py-2 px-4 rounded-lg relative group cursor-pointer">
تولتیپ راست
<span class="absolute end-full me-2 top-1/2 -translate-y-1/2 hidden group-hover:block bg-gray-900 text-white text-sm py-1 px-2 rounded-md shadow-lg whitespace-nowrap z-50">
این تولتیپ راسته
<span class="absolute start-full top-1/2 -translate-y-1/2 w-0 h-0 border-y-4 border-y-transparent border-s-4 border-s-gray-900"></span>
</span>
</button>
<div class="relative">
<label for="filter-rating" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
امتیاز
</label>
<select
id="filter-rating"
class="w-full appearance-none border rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent dark:bg-zinc-800 dark:border-gray-600 dark:text-white"
>
<option value="">همه امتیازها</option>
<option value="5">5 ستاره</option>
<option value="4">4 ستاره</option>
<option value="3">3 ستاره</option>
<option value="2">2 ستاره</option>
<option value="1">1 ستاره</option>
</select>
<div class="absolute inset-y-0 top-1/3 end-3 flex items-center pointer-events-none">
<svg class="w-4 h-4 text-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path>
</svg>
</div>
</div>
<div class="relative ms-3 inline-block text-end group">
<button class="flex items-center focus:outline-none">
<div class="relative">
<img class="h-8 w-8 rounded-full border-2 border-white dark:border-gray-800 shadow" src="assets/images/user/user.png" alt="پروفایل کاربر">
<span class="absolute bottom-0 start-0 w-2 h-2 rounded-full bg-green-500 dark:bg-green-400 border-2 border-white dark:border-gray-800"></span>
</div>
<span class="ms-2 text-sm font-medium text-gray-900 dark:text-white">مریم محمدی</span>
<svg class="size-4 ms-2 transition-transform group-hover:rotate-180"></svg>
</button>
<div class="absolute end-0 top-full w-48 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg z-[9999] shadow-lg hidden group-hover:block">
<a href="#" class="flex items-center px-4 py-2 text-sm text-gray-700 space-x-1 rounded-lg dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">
<svg ... class="size-6"></svg>
<span>پروفایل</span>
</a>
<a href="#" class="flex items-center px-4 py-2 text-sm text-gray-700 space-x-1 rounded-lg dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">
<svg ... class="size-6"></svg>
<span>تنظیمات</span>
</a>
<a href="#" class="flex items-center px-4 py-2 text-sm text-gray-700 space-x-1 rounded-lg dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">
<svg ... class="size-6"></svg>
<span>خروج</span>
</a>
</div>
</div>
<div class="flex space-x-1 justify-center">
<button class="px-3 py-1 border rounded-lg text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-zinc-800 hover:bg-gray-100 dark:hover:bg-gray-600 border-gray-300 dark:border-gray-600">
قبلی
</button>
<button class="px-3 py-1 border rounded-lg text-sm font-medium text-white bg-primary dark:bg-primary-dark border-primary dark:border-primary-dark">
1
</button>
<button class="px-3 py-1 border rounded-lg text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-zinc-800 hover:bg-gray-100 dark:hover:bg-gray-600 border-gray-300 dark:border-gray-600">
2
</button>
<button class="px-3 py-1 border rounded-lg text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-zinc-800 hover:bg-gray-100 dark:hover:bg-gray-600 border-gray-300 dark:border-gray-600">
3
</button>
<button class="px-3 py-1 border rounded-lg text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-zinc-800 hover:bg-gray-100 dark:hover:bg-gray-600 border-gray-300 dark:border-gray-600">
بعدی
</button>
</div>
<h3 class="font-bold text-lg mb-4 relative pb-4
before:absolute before:start-0 before:bottom-0 before:size-2 before:rounded-full before:bg-primary
after:absolute after:w-40 after:h-2 after:bottom-0 after:start-4 after:bg-primary after:rounded-lg
dark:before:bg-primary dark:after:bg-primary">
محصولات پیشنهادی برای شما
</h3>
پربازدیدترین دسته بندی ها
<div class="ps-15 section-heading before:z-10 sm:col-span-4 w-full col-span-6 relative space-y-3">
<h2 class="font-black text-2xl">
<span itemprop="name" class="dark:text-white">دسته بندی</span>
<span class="text-primary font-bold">فروشگاه</span>
</h2>
<p class="text-neutral-600 dark:text-white" itemprop="description">
پربازدیدترین دسته بندی ها
</p>
</div>
| محصول | قیمت | وضعیت | عملیات | |
|---|---|---|---|---|
گوشی موبایل
سامسونگ مدل Galaxy A23
رنگ: مشکی - حافظه:
128GB
|
8,500,000 تومان
9,200,000
تومان
|
موجود در انبار |
|
|
هدفون بی سیم مدل
WH-CH510
رنگ: سفید
|
1,250,000 تومان
|
آخرین موجودی |
|
|
شارژر بی سیم 15
وات
رنگ: سفید
|
450,000 تومان
|
ناموجود |
|
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
<thead class="bg-gray-50 dark:bg-gray-800">
... کل هدینگ جدول ...
</thead>
<tbody class="bg-white dark:bg-zinc-800 divide-y divide-gray-200 dark:divide-gray-700">
... کل ردیفها اینجاست (همین کد بالا) ...
</tbody>
</table>
</div>
| ردیف | نوع تراکنش | کارمزد | شرایط |
|---|---|---|---|
| ۱ | فروش عادی | ۱۵٪ | مبلغ کمتر از ۱۰ میلیون تومان |
| ۲ | فروش ویژه | ۱۰٪ | مبلغ بالای ۱۰ میلیون تومان |
<div class="overflow-x-auto">
<table class="w-full">
<thead class="bg-custom-light dark:bg-zinc-800">
<tr>
<th class="px-4 py-3 text-start">ردیف</th>
<th class="px-4 py-3 text-start">نوع تراکنش</th>
<th class="px-4 py-3 text-start">کارمزد</th>
<th class="px-4 py-3 text-start">شرایط</th>
</tr>
</thead>
<tbody>
<tr class="border-t border-gray-200 dark:border-gray-700">
<td class="px-4 py-3">۱</td>
<td class="px-4 py-3">فروش عادی</td>
<td class="px-4 py-3">۱۵٪</td>
<td class="px-4 py-3 text-gray-500 dark:text-gray-400">مبلغ کمتر از ۱۰ میلیون تومان</td>
</tr>
<tr class="border-t border-gray-200 dark:border-gray-700">
<td class="px-4 py-3">۲</td>
<td class="px-4 py-3">فروش ویژه</td>
<td class="px-4 py-3">۱۰٪</td>
<td class="px-4 py-3 text-gray-500 dark:text-gray-400">مبلغ بالای ۱۰ میلیون تومان</td>
</tr>
</tbody>
</table>
</div>
فرمتهای مجاز: JPG, PNG, GIF
حداکثر سایز: 2MB
<script>
// Logo upload preview
document.getElementById('store-logo').addEventListener('change', function(e) {
const preview = document.getElementById('store-logo-preview');
const file = e.target.files[0];
const reader = new FileReader();
reader.onload = function(e) {
preview.src = e.target.result;
}
if (file) {
reader.readAsDataURL(file);
}
});
// Click on logo upload button
document.querySelector('#store-logo-preview + button').addEventListener('click', function() {
document.getElementById('store-logo').click();
});
</script>
<div class="flex flex-col items-center">
<div class="relative mb-4">
<img id="store-logo-preview" class="h-32 w-32 rounded-full border-4 border-white dark:border-gray-800 shadow-lg" src="assets/images/logo/digikala.webp" alt="لوگوی فروشگاه">
<button class="absolute bottom-0 end-0 bg-primary-600 text-white p-2 rounded-full shadow-md hover:bg-primary-700">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"></path>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"></path>
</svg>
</button>
</div>
<div class="text-center">
<p class="text-sm text-gray-500 dark:text-gray-400 mb-2">فرمتهای مجاز: JPG, PNG, GIF</p>
<p class="text-sm text-gray-500 dark:text-gray-400">حداکثر سایز: 2MB</p>
</div>
<input type="file" id="store-logo" class="hidden" accept="image/*">
</div>
<label class="relative inline-flex items-center cursor-pointer">
<input type="checkbox" class="sr-only peer" checked>
<div class="w-11 h-6 bg-gray-300 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-blue-500 dark:peer-focus:ring-blue-400 rounded-full peer dark:bg-gray-600 peer-checked:bg-blue-600 transition-all duration-300"></div>
<span class="absolute end-0.5 top-0.5 w-5 h-5 bg-white dark:bg-gray-200 rounded-full transition-transform duration-300 peer-checked:translate-x-full"></span>
</label>
<!-- ================= start cart offcanvas ================= -->
<button onclick="toggleOffcanvas('offcanvas-left')" class="relative flex items-center gap-2 py-2 px-4 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-200 rounded-lg shadow hover:bg-gray-50 dark:hover:bg-gray-700 transition">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 0 0-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 0 0-16.536-1.84M7.5 14.25 5.106 5.272M6 20.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Zm12.75 0a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z" />
</svg>
<span>منوی کشویی</span>
<span class="size-5 text-xs absolute -top-2 -end-2 bg-red-500 text-white font-bold rounded-full text-center leading-5">2</span>
</button>
<div id="offcanvas-left" class="offcanvas invisible dark:bg-zinc-900 dark:text-white fixed top-0 end-0 sm:w-100 w-[80%] h-full bg-white shadow-lg transform -translate-x-full transition-transform opacity-0 z-50" role="dialog" aria-labelledby="cart-title" aria-modal="true">
...
</div>
<div class="overlay transition fixed inset-0 z-40 bg-black/70 hidden" onclick="closeOffcanvas()" role="presentation" aria-hidden="true"></div>
<!-- ================= end cart offcanvas ================= -->
