products_index.html

<!DOCTYPE html>
<html lang="fa" dir="rtl">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.rtl.min.css"
        integrity="sha384-beJoAY4VI2Q+5IPXjI207/ntOuaz06QYCdpWfWRv4lSFDyUSqsM0W+wiAMr2I185" crossorigin="anonymous">

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">

    <link rel="stylesheet" href="./css/main.css">

    <title>webprog.io</title>
</head>

<body>

    <section x-data="toggleSidebar">
        <section x-cloak class="sidebar" :class="open || 'inactive'">
            <div class="d-flex align-items-center justify-content-between justify-content-lg-center">
                <h4 class="fw-bold">webprog.io</h4>
                <i @click="toggle" class="d-lg-none fs-1 bi bi-x"></i>
            </div>
            <div class="mt-4">
                <ul class="list-unstyled">
                    <li class="sidebar-item active">
                        <a class="sidebar-link" href="./index.html">
                            <i class="me-2 bi bi-grid-fill"></i>
                            <span>داشبورد</span>
                        </a>
                    </li>

                    <li x-data="dropdown" class="sidebar-item">
                        <div @click="toggle" class="sidebar-link">
                            <i class="me-2 bi bi-shop"></i>
                            <span>فروشگاه</span>
                            <i class="ms-auto bi bi-chevron-down"></i>
                        </div>
                        <ul x-show="open" x-transition class="submenu">
                            <li class="submenu-item">
                                <a href="#">لیست فروشگاه ها</a>
                            </li>
                            <li class="submenu-item">
                                <a href="#">ایجاد فروشگاه</a>
                            </li>
                            <li class="submenu-item">
                                <a href="#">ویرایش فروشگاه</a>
                            </li>
                        </ul>
                    </li>

                    <li x-data="dropdown" class="sidebar-item">
                        <div @click="toggle" class="sidebar-link">
                            <i class="me-2 bi bi-box-seam"></i>
                            <span>محصولات</span>
                            <i class="ms-auto bi bi-chevron-down"></i>
                        </div>
                        <ul x-show="open" x-transition class="submenu">
                            <li class="submenu-item">
                                <a href="#">لیست محصولات</a>
                            </li>
                            <li class="submenu-item">
                                <a href="#">ایجاد محصول</a>
                            </li>
                            <li class="submenu-item">
                                <a href="#">ویرایش محصول</a>
                            </li>
                        </ul>
                    </li>

                    <li x-data="dropdown" class="sidebar-item">
                        <div @click="toggle" class="sidebar-link">
                            <i class="me-2 bi bi-basket-fill"></i>
                            <span>سفارشات</span>
                            <i class="ms-auto bi bi-chevron-down"></i>
                        </div>
                        <ul x-show="open" x-transition class="submenu">
                            <li class="submenu-item">
                                <a href="#">لیست سفارشات</a>
                            </li>
                            <li class="submenu-item">
                                <a href="#">سفارشات تایید شده</a>
                            </li>
                            <li class="submenu-item">
                                <a href="#">سفارشات تایید نشده</a>
                            </li>
                        </ul>
                    </li>

                    <li class="sidebar-item">
                        <a class="sidebar-link" href="#">
                            <i class="me-2 bi bi-percent"></i>
                            <span>تخفیف ها</span>
                        </a>
                    </li>

                    <li class="sidebar-item">
                        <a class="sidebar-link" href="#">
                            <i class="me-2 bi bi-chat-right-dots-fill"></i>
                            <span>تیکت</span>
                        </a>
                    </li>

                    <li x-data="dropdown" class="sidebar-item">
                        <div @click="toggle" class="sidebar-link">
                            <i class="me-2 bi bi-people-fill"></i>
                            <span>کاربران</span>
                            <i class="ms-auto bi bi-chevron-down"></i>
                        </div>
                        <ul x-show="open" x-transition class="submenu">
                            <li class="submenu-item">
                                <a href="#">لیست کاربران</a>
                            </li>
                            <li class="submenu-item">
                                <a href="#">ایجاد کاربران</a>
                            </li>
                            <li class="submenu-item">
                                <a href="#">ویرایش کاربران</a>
                            </li>
                        </ul>
                    </li>

                    <li x-data="dropdown" class="sidebar-item">
                        <div @click="toggle" class="sidebar-link">
                            <i class="me-2 bi bi-chat-dots-fill"></i>
                            <span>کامنت ها</span>
                            <i class="ms-auto bi bi-chevron-down"></i>
                        </div>
                        <ul x-show="open" x-transition class="submenu">
                            <li class="submenu-item">
                                <a href="#">لیست کامنت ها</a>
                            </li>
                            <li class="submenu-item">
                                <a href="#">کامنت های تایید شده</a>
                            </li>
                            <li class="submenu-item">
                                <a href="#">کامنت های تایید نشده</a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </section>

        <section class="main" :class="open || 'active'">
            <header class="header d-flex justify-content-between p-3 align-items-center">
                <div>
                    <a href="#">
                        <i @click="toggle" class="toggle-sidebar-icon bi bi-justify fs-3"></i>
                    </a>
                </div>

                <div class="d-flex align-items-center">
                    <div class="dropdown">
                        <div class="dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                            <span class="position-absolute top-0 end-50 translate-middle badge rounded-pill bg-red">
                                9
                            </span>
                            <i class="bi bi-envelope fs-4 text-gray-600"></i>
                        </div>
                        <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
                            <li><a class="dropdown-item fs-7" href="#"> لورم ایپسوم </a></li>
                            <li><a class="dropdown-item fs-7" href="#"> لورم ایپسوم متن </a></li>
                            <li><a class="dropdown-item fs-7" href="#"> لورم ایپسوم متن ساختگی </a></li>
                        </ul>
                    </div>

                    <div class="dropdown mx-4">
                        <div class="dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                            <i class="bi bi-bell fs-4 text-gray-600"></i>
                        </div>
                        <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
                            <li><a class="dropdown-item fs-7" href="#"> لورم ایپسوم </a></li>
                            <li><a class="dropdown-item fs-7" href="#"> لورم ایپسوم متن </a></li>
                            <li><a class="dropdown-item fs-7" href="#"> لورم ایپسوم متن ساختگی </a></li>
                        </ul>
                    </div>

                    <div class="dropdown">
                        <div class="dropdown-toggle profile d-flex align-items-center" data-bs-toggle="dropdown"
                            aria-expanded="false">
                            <img width="45" class="img-fluid rounded-circle me-2" src="./images/7.jpg" alt="">
                            <div>
                                <h6 class="fs-6 fw-bold text-gray-600 mb-0">علی شیخ</h6>
                                <p class="fs-8 text-gray-600 mb-0">سوپر ادمین</p>
                            </div>
                        </div>
                        <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
                            <li>
                                <a class="dropdown-item fs-7" href="#">
                                    <i class="bi bi-person fs-5 me-1"></i>
                                    پروفایل
                                </a>
                            </li>
                            <li>
                                <a class="dropdown-item fs-7" href="#">
                                    <i class="bi bi-gear fs-6 me-1"></i>
                                    تنظیمات
                                </a>
                            </li>
                            <li>
                                <a class="dropdown-item fs-7" href="#">
                                    <i class="bi bi-wallet fs-6 me-1"></i>
                                    حساب کاربری
                                </a>
                            </li>
                            <li>
                                <hr class="dropdown-divider">
                            </li>
                            <li>
                                <a class="dropdown-item fs-7" href="#">
                                    <i class="bi bi-box-arrow-left fs-5 me-1"></i>
                                    خروج
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </header>

            <div class="content p-2 p-lg-4">
                <div class="container-fluid">
                    <div class="row">
                        <nav aria-label="breadcrumb">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item"><a href="./index.html">داشبورد</a></li>
                                <li class="breadcrumb-item active" aria-current="page">لیست محصولات</li>
                            </ol>
                        </nav>
                    </div>

                    <div class="row">
                        <div class="card">
                            <div class="card-header text-end">
                                <button class="btn btn-light-primary" data-bs-toggle="modal"
                                    data-bs-target="#exampleModal">
                                    <i class="bi bi-funnel-fill"></i>
                                    فیلتر
                                </button>
                            </div>
                            <div class="card-body">
                                <div class="table-responsive">
                                    <table class="table table-hover align-middle">
                                        <thead>
                                            <tr>
                                                <th>#</th>
                                                <th>نام محصول</th>
                                                <th>موجودی</th>
                                                <th>قیمت</th>
                                                <th>وضعیت</th>
                                                <th>عملیات</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td>1</td>
                                                <td class="text-muted">محصول اول</td>
                                                <td class="text-muted">3</td>
                                                <td class="text-muted"> 30,000 </td>
                                                <td class="text-muted"> تایید شده </td>
                                                <td>
                                                    <div class="dropdown">
                                                        <button class="btn btn-light-primary dropdown-toggle"
                                                            type="button" id="dropdownMenuButton1"
                                                            data-bs-toggle="dropdown" aria-expanded="false">
                                                            عملیات
                                                        </button>
                                                        <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
                                                            <li><a class="dropdown-item" href="#">نمایش</a></li>
                                                            <li><a class="dropdown-item" href="#">ویرایش</a>
                                                            </li>
                                                            <li><a class="dropdown-item" href="#">حذف</a></li>
                                                        </ul>
                                                    </div>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    2
                                                </td>
                                                <td class="text-muted">
                                                    محصول دوم
                                                </td>
                                                <td class="text-muted">
                                                    5
                                                </td>
                                                <td class="text-muted">
                                                    70,000
                                                </td>
                                                <td class="text-muted">
                                                    تایید نشده
                                                </td>
                                                <td>
                                                    <div class="dropdown">
                                                        <button class="btn btn-light-primary dropdown-toggle"
                                                            type="button" id="dropdownMenuButton1"
                                                            data-bs-toggle="dropdown" aria-expanded="false">
                                                            عملیات
                                                        </button>
                                                        <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
                                                            <li><a class="dropdown-item" href="#">نمایش</a></li>
                                                            <li><a class="dropdown-item" href="#">ویرایش</a></li>
                                                            <li><a class="dropdown-item" href="#">حذف</a></li>
                                                        </ul>
                                                    </div>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    3
                                                </td>
                                                <td class="text-muted">
                                                    محصول سوم
                                                </td>
                                                <td class="text-muted">
                                                    10
                                                </td>
                                                <td class="text-muted">
                                                    130,000
                                                </td>
                                                <td class="text-muted">
                                                    تایید شده
                                                </td>
                                                <td>
                                                    <div class="dropdown">
                                                        <button class="btn btn-light-primary dropdown-toggle"
                                                            type="button" id="dropdownMenuButton1"
                                                            data-bs-toggle="dropdown" aria-expanded="false">
                                                            عملیات
                                                        </button>
                                                        <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
                                                            <li><a class="dropdown-item" href="#">نمایش</a></li>
                                                            <li><a class="dropdown-item" href="#">ویرایش</a></li>
                                                            <li><a class="dropdown-item" href="#">حذف</a></li>
                                                        </ul>
                                                    </div>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    4
                                                </td>
                                                <td class="text-muted">
                                                    محصول چهارم
                                                </td>
                                                <td class="text-muted">
                                                    8
                                                </td>
                                                <td class="text-muted">
                                                    50,000
                                                </td>
                                                <td class="text-muted">
                                                    تایید نشده
                                                </td>
                                                <td>
                                                    <div class="dropdown">
                                                        <button class="btn btn-light-primary dropdown-toggle"
                                                            type="button" id="dropdownMenuButton1"
                                                            data-bs-toggle="dropdown" aria-expanded="false">
                                                            عملیات
                                                        </button>
                                                        <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
                                                            <li><a class="dropdown-item" href="#">نمایش</a></li>
                                                            <li><a class="dropdown-item" href="#">ویرایش</a></li>
                                                            <li><a class="dropdown-item" href="#">حذف</a></li>
                                                        </ul>
                                                    </div>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    5
                                                </td>
                                                <td class="text-muted">
                                                    محصول پنجم
                                                </td>
                                                <td class="text-muted">
                                                    11
                                                </td>
                                                <td class="text-muted">
                                                    30,000
                                                </td>
                                                <td class="text-muted">
                                                    تایید شده
                                                </td>
                                                <td>
                                                    <div class="dropdown">
                                                        <button class="btn btn-light-primary dropdown-toggle"
                                                            type="button" id="dropdownMenuButton1"
                                                            data-bs-toggle="dropdown" aria-expanded="false">
                                                            عملیات
                                                        </button>
                                                        <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
                                                            <li><a class="dropdown-item" href="#">نمایش</a></li>
                                                            <li><a class="dropdown-item" href="#">ویرایش</a></li>
                                                            <li><a class="dropdown-item" href="#">حذف</a></li>
                                                        </ul>
                                                    </div>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    6
                                                </td>
                                                <td class="text-muted">
                                                    محصول ششم
                                                </td>
                                                <td class="text-muted">
                                                    15
                                                </td>
                                                <td class="text-muted">
                                                    45,000
                                                </td>
                                                <td class="text-muted">
                                                    تایید شده
                                                </td>
                                                <td>
                                                    <div class="dropdown">
                                                        <button class="btn btn-light-primary dropdown-toggle"
                                                            type="button" id="dropdownMenuButton1"
                                                            data-bs-toggle="dropdown" aria-expanded="false">
                                                            عملیات
                                                        </button>
                                                        <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
                                                            <li><a class="dropdown-item" href="#">نمایش</a></li>
                                                            <li><a class="dropdown-item" href="#">ویرایش</a></li>
                                                            <li><a class="dropdown-item" href="#">حذف</a></li>
                                                        </ul>
                                                    </div>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    7
                                                </td>
                                                <td class="text-muted">
                                                    محصول هفتم
                                                </td>
                                                <td class="text-muted">
                                                    9
                                                </td>
                                                <td class="text-muted">
                                                    30,000
                                                </td>
                                                <td class="text-muted">
                                                    تایید نشده
                                                </td>
                                                <td>
                                                    <div class="dropdown">
                                                        <button class="btn btn-light-primary dropdown-toggle"
                                                            type="button" id="dropdownMenuButton1"
                                                            data-bs-toggle="dropdown" aria-expanded="false">
                                                            عملیات
                                                        </button>
                                                        <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
                                                            <li><a class="dropdown-item" href="#">نمایش</a></li>
                                                            <li><a class="dropdown-item" href="#">ویرایش</a></li>
                                                            <li><a class="dropdown-item" href="#">حذف</a></li>
                                                        </ul>
                                                    </div>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>

                                <nav class="mt-4" aria-label="Page navigation example">
                                    <ul class="pagination justify-content-center">
                                        <li class="page-item">
                                            <a class="page-link" href="#" aria-label="Previous">
                                                <span aria-hidden="true">&laquo;</span>
                                            </a>
                                        </li>
                                        <li class="page-item"><a class="page-link" href="#">1</a></li>
                                        <li class="page-item"><a class="page-link" href="#">2</a></li>
                                        <li class="page-item"><a class="page-link" href="#">3</a></li>
                                        <li class="page-item">
                                            <a class="page-link" href="#" aria-label="Next">
                                                <span aria-hidden="true">&raquo;</span>
                                            </a>
                                        </li>
                                    </ul>
                                </nav>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </section>


    <!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <form action="#">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">فیلتر محصولات</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">

                        <div class="mb-3">
                            <label for="exampleInputEmail1" class="form-label">نام محصول</label>
                            <input type="text" class="form-control">
                        </div>

                        <div class="mb-3">
                            <label class="form-label">وضعیت محصول</label>
                            <select class="form-select">
                                <option value="1">تایید شده</option>
                                <option value="2">تایید نشده</option>
                            </select>
                        </div>

                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">کنسل</button>
                        <button type="submit" class="btn btn-light-primary">فیلتر</button>
                    </div>
                </form>
            </div>
        </div>
    </div>




    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous">
        </script>

    <script src="https://cdn.jsdelivr.net/npm/@srexi/purecounterjs/dist/purecounter_vanilla.js"></script>

    <script defer src="https://unpkg.com/alpinejs@3.3.4/dist/cdn.min.js"></script>

    <!-- Resources -->
    <script src="https://cdn.amcharts.com/lib/4/core.js"></script>
    <script src="https://cdn.amcharts.com/lib/4/charts.js"></script>
    <script src="https://cdn.amcharts.com/lib/4/themes/animated.js"></script>

    <script src="./js/charts/chart1.js"></script>
    <script src="./js/charts/chart2.js"></script>
    <script src="./js/alpineComponents.js"></script>
</body>

</html>