1
0
mirror of https://github.com/stisla/stisla.git synced 2025-08-30 03:20:23 +02:00

re-structure path

This commit is contained in:
Muhamad Nauval Azhar
2019-02-19 18:41:00 +07:00
parent c70acb4554
commit 1c8f449126
489 changed files with 40637 additions and 41025 deletions

413
dev/rtl/blank.html Normal file
View File

@@ -0,0 +1,413 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no" name="viewport">
<title>Blank Page &mdash; Stisla</title>
<!-- General CSS Files -->
<link rel="stylesheet" href="../assets/modules/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="../assets/modules/fontawesome/css/all.min.css">
<!-- CSS Libraries -->
<link rel="stylesheet" href="../assets/modules/jqvmap/dist/jqvmap.min.css">
<link rel="stylesheet" href="../assets/modules/weather-icon/css/weather-icons.min.css">
<link rel="stylesheet" href="../assets/modules/weather-icon/css/weather-icons-wind.min.css">
<link rel="stylesheet" href="../assets/modules/summernote/summernote-bs4.css">
<!-- Template CSS -->
<link rel="stylesheet" href="../assets/css/style.css">
<link rel="stylesheet" href="../assets/css/components.css">
<link rel="stylesheet" href="../assets/css/rtl.css">
<link rel="stylesheet" href="../assets/css/rtl.css">
</head>
<body>
<div id="app">
<div class="main-wrapper main-wrapper-1">
<div class="navbar-bg"></div>
<nav class="navbar navbar-expand-lg main-navbar">
<form class="form-inline ml-auto">
<ul class="navbar-nav ml-3">
<li><a href="#" data-toggle="sidebar" class="nav-link nav-link-lg"><i class="fas fa-bars"></i></a></li>
<li><a href="#" data-toggle="search" class="nav-link nav-link-lg d-sm-none"><i class="fas fa-search"></i></a></li>
</ul>
<div class="search-element text-right">
<input class="form-control" type="search" placeholder="جستجو" aria-label="Search" data-width="250">
<button class="btn" type="submit"><i class="fas fa-search"></i></button>
<div class="search-backdrop"></div>
<div class="search-result">
<div class="search-header">
نتیجه جستجو
</div>
<div class="search-item">
<a href="#">چگونه ناسا رو هک کنیم؟</a>
<a href="#" class="search-close"><i class="fas fa-times"></i></a>
</div>
<div class="search-item">
<a href="#">Kodinger.com</a>
<a href="#" class="search-close"><i class="fas fa-times"></i></a>
</div>
<div class="search-item">
<a href="#">پنل مدیریت</a>
<a href="#" class="search-close"><i class="fas fa-times"></i></a>
</div>
<div class="search-header">
نتایج
</div>
<div class="search-item">
<a href="#">
<img class="ml-3 rounded" width="30" src="../assets/img/products/product-3-50.png" alt="product">
آیفون s9 تولید شد
</a>
</div>
<div class="search-item">
<a href="#">
<img class="ml-3 rounded" width="30" src="../assets/img/products/product-2-50.png" alt="product">
چه شادی هایی که زیر پای انسانها سرکوب شدند
</a>
</div>
<div class="search-item">
<a href="#">
<img class="ml-3 rounded" width="30" src="../assets/img/products/product-1-50.png" alt="product">
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ.
</a>
</div>
<div class="search-header">
پروژه ها
</div>
<div class="search-item">
<a href="#">
<div class="search-icon bg-danger text-white ml-3">
<i class="fas fa-code"></i>
</div>
متریال ادمین پنل
</a>
</div>
<div class="search-item">
<a href="#">
<div class="search-icon bg-primary text-white ml-3">
<i class="fas fa-laptop"></i>
</div>
ایجاد صفحه لندینگ
</a>
</div>
</div>
</div>
</form>
<ul class="navbar-nav navbar-right">
<li class="dropdown dropdown-list-toggle"><a href="#" data-toggle="dropdown" class="nav-link nav-link-lg message-toggle beep"><i class="far fa-envelope"></i></a>
<div class="dropdown-menu dropdown-list text-right dropdown-menu-left">
<div class="dropdown-header">پیام ها
<div class="float-left">
<a href="#">علامتگذاری همه بصورت خوانده شده</a>
</div>
</div>
<div class="dropdown-list-content dropdown-list-message">
<a href="#" class="dropdown-item dropdown-item-unread">
<div class="dropdown-item-avatar">
<img alt="image" src="../assets/img/avatar/avatar-1.png" class="rounded-circle">
<div class="is-online"></div>
</div>
<div class="dropdown-item-desc text-right">
<b>مهدی خانزادی</b>
<p>سلام داداچ!</p>
<div class="time">۱۰ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item dropdown-item-unread">
<div class="dropdown-item-avatar">
<img alt="image" src="../assets/img/avatar/avatar-2.png" class="rounded-circle">
</div>
<div class="dropdown-item-desc">
<b>مهیار انصاری</b>
<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ.</p>
<div class="time">۱۲ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item dropdown-item-unread">
<div class="dropdown-item-avatar">
<img alt="image" src="../assets/img/avatar/avatar-3.png" class="rounded-circle">
<div class="is-online"></div>
</div>
<div class="dropdown-item-desc">
<b>آمیتا پاچان</b>
<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ.</p>
<div class="time">۱۲ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-avatar">
<img alt="image" src="../assets/img/avatar/avatar-4.png" class="rounded-circle">
</div>
<div class="dropdown-item-desc">
<b>مهدی خانزادی</b>
<p>سلام سیستم پشتیبانی پاترونیک رو استفاده کنید</p>
<div class="time">۱۶ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-avatar">
<img alt="image" src="../assets/img/avatar/avatar-5.png" class="rounded-circle">
</div>
<div class="dropdown-item-desc">
<b>لورم ایپسوم</b>
<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ.</p>
<div class="time">دیروز</div>
</div>
</a>
</div>
<div class="dropdown-footer text-center">
<a href="#"> دیدن همه پیام ها<i class="fas fa-chevron-left"></i></a>
</div>
</div>
</li>
<li class="dropdown dropdown-list-toggle"><a href="#" data-toggle="dropdown" class="nav-link notification-toggle nav-link-lg beep"><i class="far fa-bell"></i></a>
<div class="dropdown-menu dropdown-list dropdown-menu-left">
<div class="dropdown-header text-right">نوتیفیکیشن ها
<div class="float-left">
<a href="#"> علامتگذاری همه بصورت خوانده شده</a>
</div>
</div>
<div class="dropdown-list-content dropdown-list-icons text-right">
<a href="#" class="dropdown-item dropdown-item-unread">
<div class="dropdown-item-icon bg-primary text-white">
<i class="fas fa-code"></i>
</div>
<div class="dropdown-item-desc">
قالب مدیریتی متریال اپدیت جدید داد!
<div class="time text-primary">۲ دقیقه پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-icon bg-info text-white">
<i class="far fa-user"></i>
</div>
<div class="dropdown-item-desc">
<b>شما</b> و <b>مهیار انصاری</b> هم اکنون همکار هستید.
<div class="time">۱۰ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-icon bg-success text-white">
<i class="fas fa-check"></i>
</div>
<div class="dropdown-item-desc">
<b>مهدی خانزادی</b> اطلاعات مرتبط با <b>قالب</b> را <b>آپلود کرد.</b>
<div class="time">۱۲ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-icon bg-danger text-white">
<i class="fas fa-exclamation-triangle"></i>
</div>
<div class="dropdown-item-desc">
فضای هارد دیسک پر شده است لطفا آن را خالی کنید.
<div class="time">۱۷ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-icon bg-info text-white">
<i class="fas fa-bell"></i>
</div>
<div class="dropdown-item-desc">
به قالب متریال خوش آمدید
<div class="time">دیروز</div>
</div>
</a>
</div>
<div class="dropdown-footer text-center">
<a href="#">
<span>نمایش همه</span>
<i class="fas fa-chevron-left"></i>
</a>
</div>
</div>
</li>
<li class="dropdown"><a href="#" data-toggle="dropdown" class="nav-link dropdown-toggle nav-link-lg nav-link-user">
<img alt="image" src="../assets/img/avatar/avatar-1.png" class="rounded-circle mr-1">
<div class="d-sm-none d-lg-inline-block">سلام مهدی</div></a>
<div class="dropdown-menu dropdown-menu-right text-right">
<div class="dropdown-title text-center">۵ دقیقه پیش لاگین کردین</div>
<a href="features-profile.html" class="dropdown-item has-icon">
<span>پروفایل</span>
<i class="far fa-user"></i>
</a>
<a href="features-activities.html" class="dropdown-item has-icon">
<span>فعالیت ها</span>
<i class="fas fa-bolt"></i>
</a>
<a href="features-settings.html" class="dropdown-item has-icon">
<span>تنظیمات</span>
<i class="fas fa-cog"></i>
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item has-icon text-danger">
<span>خروج</span>
<i class="fas fa-sign-out-alt"></i>
</a>
</div>
</li>
</ul>
</nav>
<div class="main-sidebar sidebar-style-2">
<aside id="sidebar-wrapper">
<div class="sidebar-brand">
<a href="index.html">مدیریت پاترونیک</a>
</div>
<div class="sidebar-brand sidebar-brand-sm">
<a href="index.html">مدیریت فروش</a>
</div>
<ul class="sidebar-menu">
<li class="menu-header">داشبورد</li>
<li class="dropdown active">
<a href="#" class="nav-link has-dropdown"><i class="fas fa-fire"></i><span>داشبورد</span></a>
<ul class="dropdown-menu">
<li class=active><a class="nav-link" href="index-0.html">داشبورد عمومی</a></li>
<li><a class="nav-link" href="index.html">داشبورد فروش محصولات</a></li>
</ul>
</li>
<li class="menu-header">امکانات بیشتر</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown" data-toggle="dropdown"><i class="fas fa-columns"></i> <span>صفحه بندی</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="layout-default.html">حالت پیش فرض</a></li>
<li><a class="nav-link" href="layout-transparent.html">سایدبار بدون رنگ</a></li>
<li><a class="nav-link" href="layout-top-navigation.html">نویگیشن بالا</a></li>
</ul>
</li>
<li><a class="nav-link" href="blank.html"><i class="far fa-square"></i> <span>صفحه خالی</span></a></li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="fas fa-th"></i> <span>بوت استرپ</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="bootstrap-alert.html">آلرت</a></li>
<li><a class="nav-link" href="bootstrap-badge.html">بدج</a></li>
<li><a class="nav-link" href="bootstrap-breadcrumb.html">بردکرامپ</a></li>
<li><a class="nav-link" href="bootstrap-buttons.html">دکمه ها</a></li>
<li><a class="nav-link" href="bootstrap-card.html">کارت</a></li>
<li><a class="nav-link" href="bootstrap-carousel.html">کروسل</a></li>
<li><a class="nav-link" href="bootstrap-collapse.html">کولاپس</a></li>
<li><a class="nav-link" href="bootstrap-dropdown.html">دراپ دون</a></li>
<li><a class="nav-link" href="bootstrap-form.html">فرم</a></li>
<li><a class="nav-link" href="bootstrap-list-group.html">لیست گروه</a></li>
<li><a class="nav-link" href="bootstrap-media-object.html">مدیا ابجکت</a></li>
<li><a class="nav-link" href="bootstrap-modal.html">مودال</a></li>
<li><a class="nav-link" href="bootstrap-nav.html">نویگیشن</a></li>
<li><a class="nav-link" href="bootstrap-navbar.html">نوبار</a></li>
<li><a class="nav-link" href="bootstrap-pagination.html">پجینیشن</a></li>
<li><a class="nav-link" href="bootstrap-popover.html">پاپ اور</a></li>
<li><a class="nav-link" href="bootstrap-progress.html">پراگرس</a></li>
<li><a class="nav-link" href="bootstrap-table.html">جدول</a></li>
<li><a class="nav-link" href="bootstrap-tooltip.html">تولتیپ</a></li>
<li><a class="nav-link" href="bootstrap-typography.html">تایپوگرافی</a></li>
</ul>
</li>
<li class="menu-header">امکانات دیگر</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="fas fa-th-large"></i> <span>کامپوننت ها</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="components-gallery.html">گالری</a></li>
<li><a class="nav-link" href="components-multiple-upload.html">مولتی آپلود</a></li>
<li><a class="nav-link" href="components-tab.html">تب</a></li>
<li><a class="nav-link" href="components-table.html">جدول</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="far fa-file-alt"></i> <span>فرم ها</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="forms-advanced-form.html">فرم پیشرفته</a></li>
<li><a class="nav-link" href="forms-editor.html">ویرایشگر</a></li>
<li><a class="nav-link" href="forms-validation.html">ولیدیشن</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="fas fa-plug"></i> <span>ماژول ها</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="modules-calendar.html">تقویم</a></li>
<li><a class="nav-link" href="modules-chartjs.html">چارت ها</a></li>
<li><a class="nav-link" href="modules-datatables.html">دیتاتیبل</a></li>
<li><a class="nav-link" href="modules-flag.html">پرچم</a></li>
<li><a class="nav-link" href="modules-font-awesome.html">فونت اوسوم</a></li>
<li><a class="nav-link" href="modules-ion-icons.html">ای او ن ایکون</a></li>
<li><a class="nav-link" href="modules-owl-carousel.html">اول کراسول</a></li>
<li><a class="nav-link" href="modules-sparkline.html">اسپارک لاین</a></li>
<li><a class="nav-link" href="modules-sweet-alert.html">سویت الرت</a></li>
<li><a class="nav-link" href="modules-toastr.html">توستر</a></li>
<li><a class="nav-link" href="modules-vector-map.html">وکتور مپ</a></li>
<li><a class="nav-link" href="modules-weather-icon.html">ایکن اب و هوا</a></li>
</ul>
</li>
<li class="menu-header">صفحات</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="far fa-user"></i> <span>ثبت نام</span></a>
<ul class="dropdown-menu">
<li><a href="auth-forgot-password.html">فراموشی کلمه عبور</a></li>
<li><a href="auth-login.html">لاگین</a></li>
<li><a href="auth-register.html">ثبت نام</a></li>
<li><a href="auth-reset-password.html">بازیابی کلمه عبور</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="fas fa-exclamation"></i> <span>خطاها</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="errors-503.html">503</a></li>
<li><a class="nav-link" href="errors-403.html">403</a></li>
<li><a class="nav-link" href="errors-404.html">404</a></li>
<li><a class="nav-link" href="errors-500.html">500</a></li>
</ul>
</li>
<li><a class="nav-link" href="credits.html"><i class="fas fa-pencil-ruler"></i> <span>سازنده ها</span></a></li>
</ul>
<div class="mt-4 mb-4 p-3 hide-sidebar-mini">
<a href="https://getstisla.com/docs" class="btn btn-primary btn-lg btn-block btn-icon-split">
<i class="fas fa-rocket"></i> مستندات قالب
</a>
</div>
</aside>
</div>
<!-- Main Content -->
<div class="main-content">
<section class="section">
<div class="section-header">
<h1>داشبورد</h1>
</div>
</section>
</div>
<footer class="main-footer">
<div class="footer-left">
Copyright &copy; 2018 <div class="bullet"></div> Design By <a href="https://nauval.in/">Muhamad Nauval Azhar</a>
</div>
<div class="footer-right">
</div>
</footer>
</div>
</div>
<!-- General JS Scripts -->
<script src="../assets/modules/jquery.min.js"></script>
<script src="../assets/modules/popper.js"></script>
<script src="../assets/modules/tooltip.js"></script>
<script src="../assets/modules/bootstrap/js/bootstrap.min.js"></script>
<script src="../assets/modules/nicescroll/jquery.nicescroll.min.js"></script>
<script src="../assets/modules/moment.min.js"></script>
<script src="../assets/js/stisla.js"></script>
<!-- JS Libraies -->
<script src="../assets/modules/simple-weather/jquery.simpleWeather.min.js"></script>
<script src="../assets/modules/chart.min.js"></script>
<script src="../assets/modules/jqvmap/dist/jquery.vmap.min.js"></script>
<script src="../assets/modules/jqvmap/dist/maps/jquery.vmap.world.js"></script>
<script src="../assets/modules/summernote/summernote-bs4.js"></script>
<script src="../assets/modules/chocolat/dist/js/jquery.chocolat.min.js"></script>
<!-- Page Specific JS File -->
<script src="../assets/js/page/index.js"></script>
<!-- Template JS File -->
<script src="../assets/js/scripts.js"></script>
<script src="../assets/js/custom.js"></script>
</body>
</html>

View File

@@ -0,0 +1,622 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no" name="viewport">
<title>Bootstrap Components &rsaquo; Alert &mdash; Stisla</title>
<!-- General CSS Files -->
<link rel="stylesheet" href="../assets/modules/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="../assets/modules/fontawesome/css/all.min.css">
<!-- CSS Libraries -->
<!-- Template CSS -->
<link rel="stylesheet" href="../assets/css/style.css">
<link rel="stylesheet" href="../assets/css/components.css">
<link rel="stylesheet" href="../assets/css/rtl.css">
</head>
<body>
<div id="app">
<div class="main-wrapper main-wrapper-1">
<div class="navbar-bg"></div>
<nav class="navbar navbar-expand-lg main-navbar">
<form class="form-inline ml-auto">
<ul class="navbar-nav ml-3">
<li><a href="#" data-toggle="sidebar" class="nav-link nav-link-lg"><i class="fas fa-bars"></i></a></li>
<li><a href="#" data-toggle="search" class="nav-link nav-link-lg d-sm-none"><i class="fas fa-search"></i></a></li>
</ul>
<div class="search-element text-right">
<input class="form-control" type="search" placeholder="جستجو" aria-label="Search" data-width="250">
<button class="btn" type="submit"><i class="fas fa-search"></i></button>
<div class="search-backdrop"></div>
<div class="search-result">
<div class="search-header">
نتیجه جستجو
</div>
<div class="search-item">
<a href="#">چگونه ناسا رو هک کنیم؟</a>
<a href="#" class="search-close"><i class="fas fa-times"></i></a>
</div>
<div class="search-item">
<a href="#">Kodinger.com</a>
<a href="#" class="search-close"><i class="fas fa-times"></i></a>
</div>
<div class="search-item">
<a href="#">پنل مدیریت</a>
<a href="#" class="search-close"><i class="fas fa-times"></i></a>
</div>
<div class="search-header">
نتایج
</div>
<div class="search-item">
<a href="#">
<img class="ml-3 rounded" width="30" src="../assets/img/products/product-3-50.png" alt="product">
آیفون s9 تولید شد
</a>
</div>
<div class="search-item">
<a href="#">
<img class="ml-3 rounded" width="30" src="../assets/img/products/product-2-50.png" alt="product">
چه شادی هایی که زیر پای انسانها سرکوب شدند
</a>
</div>
<div class="search-item">
<a href="#">
<img class="ml-3 rounded" width="30" src="../assets/img/products/product-1-50.png" alt="product">
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ.
</a>
</div>
<div class="search-header">
پروژه ها
</div>
<div class="search-item">
<a href="#">
<div class="search-icon bg-danger text-white ml-3">
<i class="fas fa-code"></i>
</div>
متریال ادمین پنل
</a>
</div>
<div class="search-item">
<a href="#">
<div class="search-icon bg-primary text-white ml-3">
<i class="fas fa-laptop"></i>
</div>
ایجاد صفحه لندینگ
</a>
</div>
</div>
</div>
</form>
<ul class="navbar-nav navbar-right">
<li class="dropdown dropdown-list-toggle"><a href="#" data-toggle="dropdown" class="nav-link nav-link-lg message-toggle beep"><i class="far fa-envelope"></i></a>
<div class="dropdown-menu dropdown-list text-right dropdown-menu-left">
<div class="dropdown-header">پیام ها
<div class="float-left">
<a href="#">علامتگذاری همه بصورت خوانده شده</a>
</div>
</div>
<div class="dropdown-list-content dropdown-list-message">
<a href="#" class="dropdown-item dropdown-item-unread">
<div class="dropdown-item-avatar">
<img alt="image" src="../assets/img/avatar/avatar-1.png" class="rounded-circle">
<div class="is-online"></div>
</div>
<div class="dropdown-item-desc text-right">
<b>مهدی خانزادی</b>
<p>سلام داداچ!</p>
<div class="time">۱۰ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item dropdown-item-unread">
<div class="dropdown-item-avatar">
<img alt="image" src="../assets/img/avatar/avatar-2.png" class="rounded-circle">
</div>
<div class="dropdown-item-desc">
<b>مهیار انصاری</b>
<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ.</p>
<div class="time">۱۲ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item dropdown-item-unread">
<div class="dropdown-item-avatar">
<img alt="image" src="../assets/img/avatar/avatar-3.png" class="rounded-circle">
<div class="is-online"></div>
</div>
<div class="dropdown-item-desc">
<b>آمیتا پاچان</b>
<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ.</p>
<div class="time">۱۲ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-avatar">
<img alt="image" src="../assets/img/avatar/avatar-4.png" class="rounded-circle">
</div>
<div class="dropdown-item-desc">
<b>مهدی خانزادی</b>
<p>سلام سیستم پشتیبانی پاترونیک رو استفاده کنید</p>
<div class="time">۱۶ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-avatar">
<img alt="image" src="../assets/img/avatar/avatar-5.png" class="rounded-circle">
</div>
<div class="dropdown-item-desc">
<b>لورم ایپسوم</b>
<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ.</p>
<div class="time">دیروز</div>
</div>
</a>
</div>
<div class="dropdown-footer text-center">
<a href="#"> دیدن همه پیام ها<i class="fas fa-chevron-left"></i></a>
</div>
</div>
</li>
<li class="dropdown dropdown-list-toggle"><a href="#" data-toggle="dropdown" class="nav-link notification-toggle nav-link-lg beep"><i class="far fa-bell"></i></a>
<div class="dropdown-menu dropdown-list dropdown-menu-left">
<div class="dropdown-header text-right">نوتیفیکیشن ها
<div class="float-left">
<a href="#"> علامتگذاری همه بصورت خوانده شده</a>
</div>
</div>
<div class="dropdown-list-content dropdown-list-icons text-right">
<a href="#" class="dropdown-item dropdown-item-unread">
<div class="dropdown-item-icon bg-primary text-white">
<i class="fas fa-code"></i>
</div>
<div class="dropdown-item-desc">
قالب مدیریتی متریال اپدیت جدید داد!
<div class="time text-primary">۲ دقیقه پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-icon bg-info text-white">
<i class="far fa-user"></i>
</div>
<div class="dropdown-item-desc">
<b>شما</b> و <b>مهیار انصاری</b> هم اکنون همکار هستید.
<div class="time">۱۰ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-icon bg-success text-white">
<i class="fas fa-check"></i>
</div>
<div class="dropdown-item-desc">
<b>مهدی خانزادی</b> اطلاعات مرتبط با <b>قالب</b> را <b>آپلود کرد.</b>
<div class="time">۱۲ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-icon bg-danger text-white">
<i class="fas fa-exclamation-triangle"></i>
</div>
<div class="dropdown-item-desc">
فضای هارد دیسک پر شده است لطفا آن را خالی کنید.
<div class="time">۱۷ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-icon bg-info text-white">
<i class="fas fa-bell"></i>
</div>
<div class="dropdown-item-desc">
به قالب متریال خوش آمدید
<div class="time">دیروز</div>
</div>
</a>
</div>
<div class="dropdown-footer text-center">
<a href="#">
<span>نمایش همه</span>
<i class="fas fa-chevron-left"></i>
</a>
</div>
</div>
</li>
<li class="dropdown"><a href="#" data-toggle="dropdown" class="nav-link dropdown-toggle nav-link-lg nav-link-user">
<img alt="image" src="../assets/img/avatar/avatar-1.png" class="rounded-circle mr-1">
<div class="d-sm-none d-lg-inline-block">سلام مهدی</div></a>
<div class="dropdown-menu dropdown-menu-right text-right">
<div class="dropdown-title text-center">۵ دقیقه پیش لاگین کردین</div>
<a href="features-profile.html" class="dropdown-item has-icon">
<span>پروفایل</span>
<i class="far fa-user"></i>
</a>
<a href="features-activities.html" class="dropdown-item has-icon">
<span>فعالیت ها</span>
<i class="fas fa-bolt"></i>
</a>
<a href="features-settings.html" class="dropdown-item has-icon">
<span>تنظیمات</span>
<i class="fas fa-cog"></i>
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item has-icon text-danger">
<span>خروج</span>
<i class="fas fa-sign-out-alt"></i>
</a>
</div>
</li>
</ul>
</nav>
<div class="main-sidebar sidebar-style-2">
<aside id="sidebar-wrapper">
<div class="sidebar-brand">
<a href="index.html">مدیریت پاترونیک</a>
</div>
<div class="sidebar-brand sidebar-brand-sm">
<a href="index.html">مدیریت فروش</a>
</div>
<ul class="sidebar-menu">
<li class="menu-header">داشبورد</li>
<li class="dropdown active">
<a href="#" class="nav-link has-dropdown"><i class="fas fa-fire"></i><span>داشبورد</span></a>
<ul class="dropdown-menu">
<li class=active><a class="nav-link" href="index-0.html">داشبورد عمومی</a></li>
<li><a class="nav-link" href="index.html">داشبورد فروش محصولات</a></li>
</ul>
</li>
<li class="menu-header">امکانات بیشتر</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown" data-toggle="dropdown"><i class="fas fa-columns"></i> <span>صفحه بندی</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="layout-default.html">حالت پیش فرض</a></li>
<li><a class="nav-link" href="layout-transparent.html">سایدبار بدون رنگ</a></li>
<li><a class="nav-link" href="layout-top-navigation.html">نویگیشن بالا</a></li>
</ul>
</li>
<li><a class="nav-link" href="blank.html"><i class="far fa-square"></i> <span>صفحه خالی</span></a></li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="fas fa-th"></i> <span>بوت استرپ</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="bootstrap-alert.html">آلرت</a></li>
<li><a class="nav-link" href="bootstrap-badge.html">بدج</a></li>
<li><a class="nav-link" href="bootstrap-breadcrumb.html">بردکرامپ</a></li>
<li><a class="nav-link" href="bootstrap-buttons.html">دکمه ها</a></li>
<li><a class="nav-link" href="bootstrap-card.html">کارت</a></li>
<li><a class="nav-link" href="bootstrap-carousel.html">کروسل</a></li>
<li><a class="nav-link" href="bootstrap-collapse.html">کولاپس</a></li>
<li><a class="nav-link" href="bootstrap-dropdown.html">دراپ دون</a></li>
<li><a class="nav-link" href="bootstrap-form.html">فرم</a></li>
<li><a class="nav-link" href="bootstrap-list-group.html">لیست گروه</a></li>
<li><a class="nav-link" href="bootstrap-media-object.html">مدیا ابجکت</a></li>
<li><a class="nav-link" href="bootstrap-modal.html">مودال</a></li>
<li><a class="nav-link" href="bootstrap-nav.html">نویگیشن</a></li>
<li><a class="nav-link" href="bootstrap-navbar.html">نوبار</a></li>
<li><a class="nav-link" href="bootstrap-pagination.html">پجینیشن</a></li>
<li><a class="nav-link" href="bootstrap-popover.html">پاپ اور</a></li>
<li><a class="nav-link" href="bootstrap-progress.html">پراگرس</a></li>
<li><a class="nav-link" href="bootstrap-table.html">جدول</a></li>
<li><a class="nav-link" href="bootstrap-tooltip.html">تولتیپ</a></li>
<li><a class="nav-link" href="bootstrap-typography.html">تایپوگرافی</a></li>
</ul>
</li>
<li class="menu-header">امکانات دیگر</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="fas fa-th-large"></i> <span>کامپوننت ها</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="components-gallery.html">گالری</a></li>
<li><a class="nav-link" href="components-multiple-upload.html">مولتی آپلود</a></li>
<li><a class="nav-link" href="components-tab.html">تب</a></li>
<li><a class="nav-link" href="components-table.html">جدول</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="far fa-file-alt"></i> <span>فرم ها</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="forms-advanced-form.html">فرم پیشرفته</a></li>
<li><a class="nav-link" href="forms-editor.html">ویرایشگر</a></li>
<li><a class="nav-link" href="forms-validation.html">ولیدیشن</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="fas fa-plug"></i> <span>ماژول ها</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="modules-calendar.html">تقویم</a></li>
<li><a class="nav-link" href="modules-chartjs.html">چارت ها</a></li>
<li><a class="nav-link" href="modules-datatables.html">دیتاتیبل</a></li>
<li><a class="nav-link" href="modules-flag.html">پرچم</a></li>
<li><a class="nav-link" href="modules-font-awesome.html">فونت اوسوم</a></li>
<li><a class="nav-link" href="modules-ion-icons.html">ای او ن ایکون</a></li>
<li><a class="nav-link" href="modules-owl-carousel.html">اول کراسول</a></li>
<li><a class="nav-link" href="modules-sparkline.html">اسپارک لاین</a></li>
<li><a class="nav-link" href="modules-sweet-alert.html">سویت الرت</a></li>
<li><a class="nav-link" href="modules-toastr.html">توستر</a></li>
<li><a class="nav-link" href="modules-vector-map.html">وکتور مپ</a></li>
<li><a class="nav-link" href="modules-weather-icon.html">ایکن اب و هوا</a></li>
</ul>
</li>
<li class="menu-header">صفحات</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="far fa-user"></i> <span>ثبت نام</span></a>
<ul class="dropdown-menu">
<li><a href="auth-forgot-password.html">فراموشی کلمه عبور</a></li>
<li><a href="auth-login.html">لاگین</a></li>
<li><a href="auth-register.html">ثبت نام</a></li>
<li><a href="auth-reset-password.html">بازیابی کلمه عبور</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="fas fa-exclamation"></i> <span>خطاها</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="errors-503.html">503</a></li>
<li><a class="nav-link" href="errors-403.html">403</a></li>
<li><a class="nav-link" href="errors-404.html">404</a></li>
<li><a class="nav-link" href="errors-500.html">500</a></li>
</ul>
</li>
<li><a class="nav-link" href="credits.html"><i class="fas fa-pencil-ruler"></i> <span>سازنده ها</span></a></li>
</ul>
<div class="mt-4 mb-4 p-3 hide-sidebar-mini">
<a href="https://getstisla.com/docs" class="btn btn-primary btn-lg btn-block btn-icon-split">
<i class="fas fa-rocket"></i> مستندات قالب
</a>
</div>
</aside>
</div>
<!-- Main Content -->
<div class="main-content">
<section class="section">
<div class="section-header">
<h1>آلرت</h1>
<div class="section-header-breadcrumb">
<div class="breadcrumb-item active"><a href="#">داشبورد</a></div>
<div class="breadcrumb-item"><a href="#">کامپوننت بوت استرپ</a></div>
<div class="breadcrumb-item">آلرت</div>
</div>
</div>
<div class="section-body text-right">
<h2 class="section-title">آلرت</h2>
<p class="section-lead">با استفاده از آلرت میتونید به کاربراتون فیدبک بدید.</p>
<div class="row">
<div class="col-12 col-md-6 col-lg-6">
<div class="card">
<div class="card-header">
<h4>حالت پیش فرض</h4>
</div>
<div class="card-body">
<div class="alert alert-primary">
آلرت پرایمری
</div>
<div class="alert alert-secondary">
آلرت سکندری
</div>
<div class="alert alert-success">
الرت موفقیت آمیز
</div>
<div class="alert alert-danger">
الرت خطرناک :|
</div>
<div class="alert alert-warning">
الرت پیام وارنینگ
</div>
<div class="alert alert-info">
الرت پیام اینو
</div>
<div class="alert alert-light">
الرت لایت
</div>
<div class="alert alert-dark">
الرت دارک
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h4>Icon</h4>
</div>
<div class="card-body">
<div class="alert alert-primary alert-has-icon">
<div class="alert-icon"><i class="far fa-lightbulb"></i></div>
<div class="alert-body">
<div class="alert-title">پرایمری</div>
آلرت پرایمری.
</div>
</div>
<div class="alert alert-secondary alert-has-icon">
<div class="alert-icon"><i class="far fa-lightbulb"></i></div>
<div class="alert-body">
<div class="alert-title">سکندری</div>
آلرت سکندری
</div>
</div>
<div class="alert alert-success alert-has-icon">
<div class="alert-icon"><i class="far fa-lightbulb"></i></div>
<div class="alert-body">
<div class="alert-title">موفقیت</div>
الرت موفقیت آمیز.
</div>
</div>
<div class="alert alert-danger alert-has-icon">
<div class="alert-icon"><i class="far fa-lightbulb"></i></div>
<div class="alert-body">
<div class="alert-title">دنجر</div>
آلرت دنجر
</div>
</div>
<div class="alert alert-warning alert-has-icon">
<div class="alert-icon"><i class="far fa-lightbulb"></i></div>
<div class="alert-body">
<div class="alert-title">وارنینگ</div>
آلرت وارنینگ
</div>
</div>
<div class="alert alert-info alert-has-icon">
<div class="alert-icon"><i class="far fa-lightbulb"></i></div>
<div class="alert-body">
<div class="alert-title">اینفو</div>
الرت اینفو
</div>
</div>
<div class="alert alert-light alert-has-icon">
<div class="alert-icon"><i class="far fa-lightbulb"></i></div>
<div class="alert-body">
<div class="alert-title">لایت</div>
الرت لایت
</div>
</div>
<div class="alert alert-dark alert-has-icon">
<div class="alert-icon"><i class="far fa-lightbulb"></i></div>
<div class="alert-body">
<div class="alert-title">دارک</div>
الرت دارک
</div>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-6">
<div class="card">
<div class="card-header">
<h4>عنوان</h4>
</div>
<div class="card-body">
<div class="alert alert-primary">
<div class="alert-title">پرایمری</div>
آلرت پرایمری
</div>
<div class="alert alert-secondary">
<div class="alert-title">سکندری</div>
آلرت سکندری
</div>
<div class="alert alert-success">
<div class="alert-title">موفقیت</div>
آلرت موفقیت آمیز
</div>
<div class="alert alert-danger">
<div class="alert-title">دنجر</div>
آلرت دنجر
</div>
<div class="alert alert-warning">
<div class="alert-title">وارنینگ</div>
آلرت وارنینگ
</div>
<div class="alert alert-info">
<div class="alert-title">اینفو</div>
آلرت اینفو
</div>
<div class="alert alert-light">
<div class="alert-title">لایت</div>
آلرت لایت
</div>
<div class="alert alert-dark">
<div class="alert-title">دارک</div>
آلرت دارک
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h4>آلرت با قابلیت بسته شدن</h4>
</div>
<div class="card-body">
<div class="alert alert-primary alert-dismissible show fade">
<div class="alert-body">
<button class="close" data-dismiss="alert">
<span>&times;</span>
</button>
آلرت پرایمری
</div>
</div>
<div class="alert alert-secondary alert-dismissible show fade">
<div class="alert-body">
<button class="close" data-dismiss="alert">
<span>&times;</span>
</button>
آلرت سکندری
</div>
</div>
<div class="alert alert-success alert-dismissible show fade">
<div class="alert-body">
<button class="close" data-dismiss="alert">
<span>&times;</span>
</button>
آلرت موفقیت آمیز
</div>
</div>
<div class="alert alert-danger alert-dismissible show fade">
<div class="alert-body">
<button class="close" data-dismiss="alert">
<span>&times;</span>
</button>
آلرت دنجر
</div>
</div>
<div class="alert alert-warning alert-dismissible show fade">
<div class="alert-body">
<button class="close" data-dismiss="alert">
<span>&times;</span>
</button>
آلرت وارنینگ
</div>
</div>
<div class="alert alert-info alert-dismissible show fade">
<div class="alert-body">
<button class="close" data-dismiss="alert">
<span>&times;</span>
</button>
آلرت اینفو
</div>
</div>
<div class="alert alert-light alert-dismissible show fade">
<div class="alert-body">
<button class="close" data-dismiss="alert">
<span>&times;</span>
</button>
آلرت لایت
</div>
</div>
<div class="alert alert-dark alert-dismissible show fade">
<div class="alert-body">
<button class="close" data-dismiss="alert">
<span>&times;</span>
</button>
آلرت دارک
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<footer class="main-footer">
<div class="footer-left">
Copyright &copy; 2018 <div class="bullet"></div> Design By <a href="https://nauval.in/">Muhamad Nauval Azhar</a>
</div>
<div class="footer-right">
</div>
</footer>
</div>
</div>
<!-- General JS Scripts -->
<script src="../assets/modules/jquery.min.js"></script>
<script src="../assets/modules/popper.js"></script>
<script src="../assets/modules/tooltip.js"></script>
<script src="../assets/modules/bootstrap/js/bootstrap.min.js"></script>
<script src="../assets/modules/nicescroll/jquery.nicescroll.min.js"></script>
<script src="../assets/modules/moment.min.js"></script>
<script src="../assets/js/stisla.js"></script>
<!-- JS Libraies -->
<!-- Page Specific JS File -->
<!-- Template JS File -->
<script src="../assets/js/scripts.js"></script>
<script src="../assets/js/custom.js"></script>
</body>
</html>

View File

@@ -0,0 +1,503 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no" name="viewport">
<title>Bootstrap Components &rsaquo; Badge &mdash; Stisla</title>
<!-- General CSS Files -->
<link rel="stylesheet" href="../assets/modules/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="../assets/modules/fontawesome/css/all.min.css">
<!-- CSS Libraries -->
<!-- Template CSS -->
<link rel="stylesheet" href="../assets/css/style.css">
<link rel="stylesheet" href="../assets/css/components.css">
<link rel="stylesheet" href="../assets/css/rtl.css">
</head>
<body>
<div id="app">
<div class="main-wrapper main-wrapper-1">
<div class="navbar-bg"></div>
<nav class="navbar navbar-expand-lg main-navbar">
<form class="form-inline ml-auto">
<ul class="navbar-nav ml-3">
<li><a href="#" data-toggle="sidebar" class="nav-link nav-link-lg"><i class="fas fa-bars"></i></a></li>
<li><a href="#" data-toggle="search" class="nav-link nav-link-lg d-sm-none"><i class="fas fa-search"></i></a></li>
</ul>
<div class="search-element text-right">
<input class="form-control" type="search" placeholder="جستجو" aria-label="Search" data-width="250">
<button class="btn" type="submit"><i class="fas fa-search"></i></button>
<div class="search-backdrop"></div>
<div class="search-result">
<div class="search-header">
نتیجه جستجو
</div>
<div class="search-item">
<a href="#">چگونه ناسا رو هک کنیم؟</a>
<a href="#" class="search-close"><i class="fas fa-times"></i></a>
</div>
<div class="search-item">
<a href="#">Kodinger.com</a>
<a href="#" class="search-close"><i class="fas fa-times"></i></a>
</div>
<div class="search-item">
<a href="#">پنل مدیریت</a>
<a href="#" class="search-close"><i class="fas fa-times"></i></a>
</div>
<div class="search-header">
نتایج
</div>
<div class="search-item">
<a href="#">
<img class="ml-3 rounded" width="30" src="../assets/img/products/product-3-50.png" alt="product">
آیفون s9 تولید شد
</a>
</div>
<div class="search-item">
<a href="#">
<img class="ml-3 rounded" width="30" src="../assets/img/products/product-2-50.png" alt="product">
چه شادی هایی که زیر پای انسانها سرکوب شدند
</a>
</div>
<div class="search-item">
<a href="#">
<img class="ml-3 rounded" width="30" src="../assets/img/products/product-1-50.png" alt="product">
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ.
</a>
</div>
<div class="search-header">
پروژه ها
</div>
<div class="search-item">
<a href="#">
<div class="search-icon bg-danger text-white ml-3">
<i class="fas fa-code"></i>
</div>
متریال ادمین پنل
</a>
</div>
<div class="search-item">
<a href="#">
<div class="search-icon bg-primary text-white ml-3">
<i class="fas fa-laptop"></i>
</div>
ایجاد صفحه لندینگ
</a>
</div>
</div>
</div>
</form>
<ul class="navbar-nav navbar-right">
<li class="dropdown dropdown-list-toggle"><a href="#" data-toggle="dropdown" class="nav-link nav-link-lg message-toggle beep"><i class="far fa-envelope"></i></a>
<div class="dropdown-menu dropdown-list text-right dropdown-menu-left">
<div class="dropdown-header">پیام ها
<div class="float-left">
<a href="#">علامتگذاری همه بصورت خوانده شده</a>
</div>
</div>
<div class="dropdown-list-content dropdown-list-message">
<a href="#" class="dropdown-item dropdown-item-unread">
<div class="dropdown-item-avatar">
<img alt="image" src="../assets/img/avatar/avatar-1.png" class="rounded-circle">
<div class="is-online"></div>
</div>
<div class="dropdown-item-desc text-right">
<b>مهدی خانزادی</b>
<p>سلام داداچ!</p>
<div class="time">۱۰ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item dropdown-item-unread">
<div class="dropdown-item-avatar">
<img alt="image" src="../assets/img/avatar/avatar-2.png" class="rounded-circle">
</div>
<div class="dropdown-item-desc">
<b>مهیار انصاری</b>
<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ.</p>
<div class="time">۱۲ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item dropdown-item-unread">
<div class="dropdown-item-avatar">
<img alt="image" src="../assets/img/avatar/avatar-3.png" class="rounded-circle">
<div class="is-online"></div>
</div>
<div class="dropdown-item-desc">
<b>آمیتا پاچان</b>
<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ.</p>
<div class="time">۱۲ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-avatar">
<img alt="image" src="../assets/img/avatar/avatar-4.png" class="rounded-circle">
</div>
<div class="dropdown-item-desc">
<b>مهدی خانزادی</b>
<p>سلام سیستم پشتیبانی پاترونیک رو استفاده کنید</p>
<div class="time">۱۶ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-avatar">
<img alt="image" src="../assets/img/avatar/avatar-5.png" class="rounded-circle">
</div>
<div class="dropdown-item-desc">
<b>لورم ایپسوم</b>
<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ.</p>
<div class="time">دیروز</div>
</div>
</a>
</div>
<div class="dropdown-footer text-center">
<a href="#"> دیدن همه پیام ها<i class="fas fa-chevron-left"></i></a>
</div>
</div>
</li>
<li class="dropdown dropdown-list-toggle"><a href="#" data-toggle="dropdown" class="nav-link notification-toggle nav-link-lg beep"><i class="far fa-bell"></i></a>
<div class="dropdown-menu dropdown-list dropdown-menu-left">
<div class="dropdown-header text-right">نوتیفیکیشن ها
<div class="float-left">
<a href="#"> علامتگذاری همه بصورت خوانده شده</a>
</div>
</div>
<div class="dropdown-list-content dropdown-list-icons text-right">
<a href="#" class="dropdown-item dropdown-item-unread">
<div class="dropdown-item-icon bg-primary text-white">
<i class="fas fa-code"></i>
</div>
<div class="dropdown-item-desc">
قالب مدیریتی متریال اپدیت جدید داد!
<div class="time text-primary">۲ دقیقه پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-icon bg-info text-white">
<i class="far fa-user"></i>
</div>
<div class="dropdown-item-desc">
<b>شما</b> و <b>مهیار انصاری</b> هم اکنون همکار هستید.
<div class="time">۱۰ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-icon bg-success text-white">
<i class="fas fa-check"></i>
</div>
<div class="dropdown-item-desc">
<b>مهدی خانزادی</b> اطلاعات مرتبط با <b>قالب</b> را <b>آپلود کرد.</b>
<div class="time">۱۲ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-icon bg-danger text-white">
<i class="fas fa-exclamation-triangle"></i>
</div>
<div class="dropdown-item-desc">
فضای هارد دیسک پر شده است لطفا آن را خالی کنید.
<div class="time">۱۷ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-icon bg-info text-white">
<i class="fas fa-bell"></i>
</div>
<div class="dropdown-item-desc">
به قالب متریال خوش آمدید
<div class="time">دیروز</div>
</div>
</a>
</div>
<div class="dropdown-footer text-center">
<a href="#">
<span>نمایش همه</span>
<i class="fas fa-chevron-left"></i>
</a>
</div>
</div>
</li>
<li class="dropdown"><a href="#" data-toggle="dropdown" class="nav-link dropdown-toggle nav-link-lg nav-link-user">
<img alt="image" src="../assets/img/avatar/avatar-1.png" class="rounded-circle mr-1">
<div class="d-sm-none d-lg-inline-block">سلام مهدی</div></a>
<div class="dropdown-menu dropdown-menu-right text-right">
<div class="dropdown-title text-center">۵ دقیقه پیش لاگین کردین</div>
<a href="features-profile.html" class="dropdown-item has-icon">
<span>پروفایل</span>
<i class="far fa-user"></i>
</a>
<a href="features-activities.html" class="dropdown-item has-icon">
<span>فعالیت ها</span>
<i class="fas fa-bolt"></i>
</a>
<a href="features-settings.html" class="dropdown-item has-icon">
<span>تنظیمات</span>
<i class="fas fa-cog"></i>
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item has-icon text-danger">
<span>خروج</span>
<i class="fas fa-sign-out-alt"></i>
</a>
</div>
</li>
</ul>
</nav>
<div class="main-sidebar sidebar-style-2">
<aside id="sidebar-wrapper">
<div class="sidebar-brand">
<a href="index.html">مدیریت پاترونیک</a>
</div>
<div class="sidebar-brand sidebar-brand-sm">
<a href="index.html">مدیریت فروش</a>
</div>
<ul class="sidebar-menu">
<li class="menu-header">داشبورد</li>
<li class="dropdown active">
<a href="#" class="nav-link has-dropdown"><i class="fas fa-fire"></i><span>داشبورد</span></a>
<ul class="dropdown-menu">
<li class=active><a class="nav-link" href="index-0.html">داشبورد عمومی</a></li>
<li><a class="nav-link" href="index.html">داشبورد فروش محصولات</a></li>
</ul>
</li>
<li class="menu-header">امکانات بیشتر</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown" data-toggle="dropdown"><i class="fas fa-columns"></i> <span>صفحه بندی</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="layout-default.html">حالت پیش فرض</a></li>
<li><a class="nav-link" href="layout-transparent.html">سایدبار بدون رنگ</a></li>
<li><a class="nav-link" href="layout-top-navigation.html">نویگیشن بالا</a></li>
</ul>
</li>
<li><a class="nav-link" href="blank.html"><i class="far fa-square"></i> <span>صفحه خالی</span></a></li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="fas fa-th"></i> <span>بوت استرپ</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="bootstrap-alert.html">آلرت</a></li>
<li><a class="nav-link" href="bootstrap-badge.html">بدج</a></li>
<li><a class="nav-link" href="bootstrap-breadcrumb.html">بردکرامپ</a></li>
<li><a class="nav-link" href="bootstrap-buttons.html">دکمه ها</a></li>
<li><a class="nav-link" href="bootstrap-card.html">کارت</a></li>
<li><a class="nav-link" href="bootstrap-carousel.html">کروسل</a></li>
<li><a class="nav-link" href="bootstrap-collapse.html">کولاپس</a></li>
<li><a class="nav-link" href="bootstrap-dropdown.html">دراپ دون</a></li>
<li><a class="nav-link" href="bootstrap-form.html">فرم</a></li>
<li><a class="nav-link" href="bootstrap-list-group.html">لیست گروه</a></li>
<li><a class="nav-link" href="bootstrap-media-object.html">مدیا ابجکت</a></li>
<li><a class="nav-link" href="bootstrap-modal.html">مودال</a></li>
<li><a class="nav-link" href="bootstrap-nav.html">نویگیشن</a></li>
<li><a class="nav-link" href="bootstrap-navbar.html">نوبار</a></li>
<li><a class="nav-link" href="bootstrap-pagination.html">پجینیشن</a></li>
<li><a class="nav-link" href="bootstrap-popover.html">پاپ اور</a></li>
<li><a class="nav-link" href="bootstrap-progress.html">پراگرس</a></li>
<li><a class="nav-link" href="bootstrap-table.html">جدول</a></li>
<li><a class="nav-link" href="bootstrap-tooltip.html">تولتیپ</a></li>
<li><a class="nav-link" href="bootstrap-typography.html">تایپوگرافی</a></li>
</ul>
</li>
<li class="menu-header">امکانات دیگر</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="fas fa-th-large"></i> <span>کامپوننت ها</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="components-gallery.html">گالری</a></li>
<li><a class="nav-link" href="components-multiple-upload.html">مولتی آپلود</a></li>
<li><a class="nav-link" href="components-tab.html">تب</a></li>
<li><a class="nav-link" href="components-table.html">جدول</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="far fa-file-alt"></i> <span>فرم ها</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="forms-advanced-form.html">فرم پیشرفته</a></li>
<li><a class="nav-link" href="forms-editor.html">ویرایشگر</a></li>
<li><a class="nav-link" href="forms-validation.html">ولیدیشن</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="fas fa-plug"></i> <span>ماژول ها</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="modules-calendar.html">تقویم</a></li>
<li><a class="nav-link" href="modules-chartjs.html">چارت ها</a></li>
<li><a class="nav-link" href="modules-datatables.html">دیتاتیبل</a></li>
<li><a class="nav-link" href="modules-flag.html">پرچم</a></li>
<li><a class="nav-link" href="modules-font-awesome.html">فونت اوسوم</a></li>
<li><a class="nav-link" href="modules-ion-icons.html">ای او ن ایکون</a></li>
<li><a class="nav-link" href="modules-owl-carousel.html">اول کراسول</a></li>
<li><a class="nav-link" href="modules-sparkline.html">اسپارک لاین</a></li>
<li><a class="nav-link" href="modules-sweet-alert.html">سویت الرت</a></li>
<li><a class="nav-link" href="modules-toastr.html">توستر</a></li>
<li><a class="nav-link" href="modules-vector-map.html">وکتور مپ</a></li>
<li><a class="nav-link" href="modules-weather-icon.html">ایکن اب و هوا</a></li>
</ul>
</li>
<li class="menu-header">صفحات</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="far fa-user"></i> <span>ثبت نام</span></a>
<ul class="dropdown-menu">
<li><a href="auth-forgot-password.html">فراموشی کلمه عبور</a></li>
<li><a href="auth-login.html">لاگین</a></li>
<li><a href="auth-register.html">ثبت نام</a></li>
<li><a href="auth-reset-password.html">بازیابی کلمه عبور</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="fas fa-exclamation"></i> <span>خطاها</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="errors-503.html">503</a></li>
<li><a class="nav-link" href="errors-403.html">403</a></li>
<li><a class="nav-link" href="errors-404.html">404</a></li>
<li><a class="nav-link" href="errors-500.html">500</a></li>
</ul>
</li>
<li><a class="nav-link" href="credits.html"><i class="fas fa-pencil-ruler"></i> <span>سازنده ها</span></a></li>
</ul>
<div class="mt-4 mb-4 p-3 hide-sidebar-mini">
<a href="https://getstisla.com/docs" class="btn btn-primary btn-lg btn-block btn-icon-split">
<i class="fas fa-rocket"></i> مستندات قالب
</a>
</div>
</aside>
</div>
<!-- Main Content -->
<div class="main-content">
<section class="section">
<div class="section-header">
<h1>بدج</h1>
<div class="section-header-breadcrumb">
<div class="breadcrumb-item active"><a href="#">داشبورد</a></div>
<div class="breadcrumb-item"><a href="#">کامپوننت بوت استرپ</a></div>
<div class="breadcrumb-item">بدج</div>
</div>
</div>
<div class="section-body text-right">
<h2 class="section-title">بدج</h2>
<p class="section-lead">بدج ها یک نوع لیبل هستن که معمولا برای اعداد یا شمارش استفاده میشن.</p>
<div class="row">
<div class="col-12 col-md-6 col-lg-6">
<div class="card">
<div class="card-header">
<h4>هدینگ</h4>
</div>
<div class="card-body">
<h1>هدینگ ۱ <span class="badge badge-secondary">جدید</span></h1>
<h2>هدینگ ۲ <span class="badge badge-secondary">جدید</span></h2>
<h3>هدینگ ۳ <span class="badge badge-secondary">جدید</span></h3>
<h4>هدینگ ۴ <span class="badge badge-secondary">جدید</span></h4>
<h5>هدینگ ۵ <span class="badge badge-secondary">جدید</span></h5>
<h6>هدینگ ۶ <span class="badge badge-secondary">جدید</span></h6>
</div>
</div>
<div class="card">
<div class="card-header">
<h4>Variation</h4>
</div>
<div class="card-body">
<div class="badges">
<span class="badge badge-primary">پرایمری</span>
<span class="badge badge-secondary">سکندری</span>
<span class="badge badge-success">موفقیت آمیز</span>
<span class="badge badge-danger">دنجر</span>
<span class="badge badge-warning">وارنینگ</span>
<span class="badge badge-info">اینفو</span>
<span class="badge badge-light">لایت</span>
<span class="badge badge-dark">دارک</span>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-6">
<div class="card">
<div class="card-header">
<h4>دکمه</h4>
</div>
<div class="card-body">
<div class="buttons">
<div class="section-title mt-0">ساده</div>
<button type="button" class="btn btn-primary">
نوتیفیکیشن ها <span class="badge badge-transparent">۴</span>
</button>
<button type="button" class="btn btn-danger">
نوتیفیکیشن ها <span class="badge badge-transparent">۴</span>
</button>
<button type="button" class="btn btn-warning">
نوتیفیکیشن ها <span class="badge badge-transparent">۴</span>
</button>
<button type="button" class="btn btn-success">
نوتیفیکیشن ها <span class="badge badge-transparent">۴</span>
</button>
<button type="button" class="btn btn-dark">
نوتیفیکیشن ها <span class="badge badge-transparent">۴</span>
</button>
<div class="section-title">آیکن ها</div>
<button type="button" class="btn btn-primary btn-icon icon-left">
<i class="fas fa-plane"></i> نوتیفیکیشن ها <span class="badge badge-transparent">۴</span>
</button>
<button type="button" class="btn btn-danger btn-icon icon-left">
<i class="fas fa-plane"></i> نوتیفیکیشن ها <span class="badge badge-transparent">۴</span>
</button>
<button type="button" class="btn btn-warning btn-icon icon-left">
<i class="fas fa-plane"></i> نوتیفیکیشن ها <span class="badge badge-transparent">۴</span>
</button>
<button type="button" class="btn btn-success btn-icon icon-left">
<i class="fas fa-plane"></i> نوتیفیکیشن ها <span class="badge badge-transparent">۴</span>
</button>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h4>لینک</h4>
</div>
<div class="card-body">
<div class="badges">
<a href="#" class="badge badge-primary">پرایمری</a>
<a href="#" class="badge badge-secondary">سکندری</a>
<a href="#" class="badge badge-success">موفقیت آمیز</a>
<a href="#" class="badge badge-danger">دنجر</a>
<a href="#" class="badge badge-warning">وارنینگ</a>
<a href="#" class="badge badge-info">اینفو</a>
<a href="#" class="badge badge-light">لایت</a>
<a href="#" class="badge badge-dark">دارک</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<footer class="main-footer">
<div class="footer-left">
Copyright &copy; 2018 <div class="bullet"></div> Design By <a href="https://nauval.in/">Muhamad Nauval Azhar</a>
</div>
<div class="footer-right">
</div>
</footer>
</div>
</div>
<!-- General JS Scripts -->
<script src="../assets/modules/jquery.min.js"></script>
<script src="../assets/modules/popper.js"></script>
<script src="../assets/modules/tooltip.js"></script>
<script src="../assets/modules/bootstrap/js/bootstrap.min.js"></script>
<script src="../assets/modules/nicescroll/jquery.nicescroll.min.js"></script>
<script src="../assets/modules/moment.min.js"></script>
<script src="../assets/js/stisla.js"></script>
<!-- JS Libraies -->
<!-- Page Specific JS File -->
<!-- Template JS File -->
<script src="../assets/js/scripts.js"></script>
<script src="../assets/js/custom.js"></script>
</body>
</html>

View File

@@ -0,0 +1,510 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no" name="viewport">
<title>Bootstrap Components &rsaquo; Breadcrumb &mdash; Stisla</title>
<!-- General CSS Files -->
<link rel="stylesheet" href="../assets/modules/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="../assets/modules/fontawesome/css/all.min.css">
<!-- CSS Libraries -->
<!-- Template CSS -->
<link rel="stylesheet" href="../assets/css/style.css">
<link rel="stylesheet" href="../assets/css/components.css">
<link rel="stylesheet" href="../assets/css/rtl.css">
</head>
<body>
<div id="app">
<div class="main-wrapper main-wrapper-1">
<div class="navbar-bg"></div>
<nav class="navbar navbar-expand-lg main-navbar">
<form class="form-inline ml-auto">
<ul class="navbar-nav ml-3">
<li><a href="#" data-toggle="sidebar" class="nav-link nav-link-lg"><i class="fas fa-bars"></i></a></li>
<li><a href="#" data-toggle="search" class="nav-link nav-link-lg d-sm-none"><i class="fas fa-search"></i></a></li>
</ul>
<div class="search-element text-right">
<input class="form-control" type="search" placeholder="جستجو" aria-label="Search" data-width="250">
<button class="btn" type="submit"><i class="fas fa-search"></i></button>
<div class="search-backdrop"></div>
<div class="search-result">
<div class="search-header">
نتیجه جستجو
</div>
<div class="search-item">
<a href="#">چگونه ناسا رو هک کنیم؟</a>
<a href="#" class="search-close"><i class="fas fa-times"></i></a>
</div>
<div class="search-item">
<a href="#">Kodinger.com</a>
<a href="#" class="search-close"><i class="fas fa-times"></i></a>
</div>
<div class="search-item">
<a href="#">پنل مدیریت</a>
<a href="#" class="search-close"><i class="fas fa-times"></i></a>
</div>
<div class="search-header">
نتایج
</div>
<div class="search-item">
<a href="#">
<img class="ml-3 rounded" width="30" src="../assets/img/products/product-3-50.png" alt="product">
آیفون s9 تولید شد
</a>
</div>
<div class="search-item">
<a href="#">
<img class="ml-3 rounded" width="30" src="../assets/img/products/product-2-50.png" alt="product">
چه شادی هایی که زیر پای انسانها سرکوب شدند
</a>
</div>
<div class="search-item">
<a href="#">
<img class="ml-3 rounded" width="30" src="../assets/img/products/product-1-50.png" alt="product">
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ.
</a>
</div>
<div class="search-header">
پروژه ها
</div>
<div class="search-item">
<a href="#">
<div class="search-icon bg-danger text-white ml-3">
<i class="fas fa-code"></i>
</div>
متریال ادمین پنل
</a>
</div>
<div class="search-item">
<a href="#">
<div class="search-icon bg-primary text-white ml-3">
<i class="fas fa-laptop"></i>
</div>
ایجاد صفحه لندینگ
</a>
</div>
</div>
</div>
</form>
<ul class="navbar-nav navbar-right">
<li class="dropdown dropdown-list-toggle"><a href="#" data-toggle="dropdown" class="nav-link nav-link-lg message-toggle beep"><i class="far fa-envelope"></i></a>
<div class="dropdown-menu dropdown-list text-right dropdown-menu-left">
<div class="dropdown-header">پیام ها
<div class="float-left">
<a href="#">علامتگذاری همه بصورت خوانده شده</a>
</div>
</div>
<div class="dropdown-list-content dropdown-list-message">
<a href="#" class="dropdown-item dropdown-item-unread">
<div class="dropdown-item-avatar">
<img alt="image" src="../assets/img/avatar/avatar-1.png" class="rounded-circle">
<div class="is-online"></div>
</div>
<div class="dropdown-item-desc text-right">
<b>مهدی خانزادی</b>
<p>سلام داداچ!</p>
<div class="time">۱۰ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item dropdown-item-unread">
<div class="dropdown-item-avatar">
<img alt="image" src="../assets/img/avatar/avatar-2.png" class="rounded-circle">
</div>
<div class="dropdown-item-desc">
<b>مهیار انصاری</b>
<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ.</p>
<div class="time">۱۲ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item dropdown-item-unread">
<div class="dropdown-item-avatar">
<img alt="image" src="../assets/img/avatar/avatar-3.png" class="rounded-circle">
<div class="is-online"></div>
</div>
<div class="dropdown-item-desc">
<b>آمیتا پاچان</b>
<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ.</p>
<div class="time">۱۲ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-avatar">
<img alt="image" src="../assets/img/avatar/avatar-4.png" class="rounded-circle">
</div>
<div class="dropdown-item-desc">
<b>مهدی خانزادی</b>
<p>سلام سیستم پشتیبانی پاترونیک رو استفاده کنید</p>
<div class="time">۱۶ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-avatar">
<img alt="image" src="../assets/img/avatar/avatar-5.png" class="rounded-circle">
</div>
<div class="dropdown-item-desc">
<b>لورم ایپسوم</b>
<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ.</p>
<div class="time">دیروز</div>
</div>
</a>
</div>
<div class="dropdown-footer text-center">
<a href="#"> دیدن همه پیام ها<i class="fas fa-chevron-left"></i></a>
</div>
</div>
</li>
<li class="dropdown dropdown-list-toggle"><a href="#" data-toggle="dropdown" class="nav-link notification-toggle nav-link-lg beep"><i class="far fa-bell"></i></a>
<div class="dropdown-menu dropdown-list dropdown-menu-left">
<div class="dropdown-header text-right">نوتیفیکیشن ها
<div class="float-left">
<a href="#"> علامتگذاری همه بصورت خوانده شده</a>
</div>
</div>
<div class="dropdown-list-content dropdown-list-icons text-right">
<a href="#" class="dropdown-item dropdown-item-unread">
<div class="dropdown-item-icon bg-primary text-white">
<i class="fas fa-code"></i>
</div>
<div class="dropdown-item-desc">
قالب مدیریتی متریال اپدیت جدید داد!
<div class="time text-primary">۲ دقیقه پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-icon bg-info text-white">
<i class="far fa-user"></i>
</div>
<div class="dropdown-item-desc">
<b>شما</b> و <b>مهیار انصاری</b> هم اکنون همکار هستید.
<div class="time">۱۰ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-icon bg-success text-white">
<i class="fas fa-check"></i>
</div>
<div class="dropdown-item-desc">
<b>مهدی خانزادی</b> اطلاعات مرتبط با <b>قالب</b> را <b>آپلود کرد.</b>
<div class="time">۱۲ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-icon bg-danger text-white">
<i class="fas fa-exclamation-triangle"></i>
</div>
<div class="dropdown-item-desc">
فضای هارد دیسک پر شده است لطفا آن را خالی کنید.
<div class="time">۱۷ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-icon bg-info text-white">
<i class="fas fa-bell"></i>
</div>
<div class="dropdown-item-desc">
به قالب متریال خوش آمدید
<div class="time">دیروز</div>
</div>
</a>
</div>
<div class="dropdown-footer text-center">
<a href="#">
<span>نمایش همه</span>
<i class="fas fa-chevron-left"></i>
</a>
</div>
</div>
</li>
<li class="dropdown"><a href="#" data-toggle="dropdown" class="nav-link dropdown-toggle nav-link-lg nav-link-user">
<img alt="image" src="../assets/img/avatar/avatar-1.png" class="rounded-circle mr-1">
<div class="d-sm-none d-lg-inline-block">سلام مهدی</div></a>
<div class="dropdown-menu dropdown-menu-right text-right">
<div class="dropdown-title text-center">۵ دقیقه پیش لاگین کردین</div>
<a href="features-profile.html" class="dropdown-item has-icon">
<span>پروفایل</span>
<i class="far fa-user"></i>
</a>
<a href="features-activities.html" class="dropdown-item has-icon">
<span>فعالیت ها</span>
<i class="fas fa-bolt"></i>
</a>
<a href="features-settings.html" class="dropdown-item has-icon">
<span>تنظیمات</span>
<i class="fas fa-cog"></i>
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item has-icon text-danger">
<span>خروج</span>
<i class="fas fa-sign-out-alt"></i>
</a>
</div>
</li>
</ul>
</nav>
<div class="main-sidebar sidebar-style-2">
<aside id="sidebar-wrapper">
<div class="sidebar-brand">
<a href="index.html">مدیریت پاترونیک</a>
</div>
<div class="sidebar-brand sidebar-brand-sm">
<a href="index.html">مدیریت فروش</a>
</div>
<ul class="sidebar-menu">
<li class="menu-header">داشبورد</li>
<li class="dropdown active">
<a href="#" class="nav-link has-dropdown"><i class="fas fa-fire"></i><span>داشبورد</span></a>
<ul class="dropdown-menu">
<li class=active><a class="nav-link" href="index-0.html">داشبورد عمومی</a></li>
<li><a class="nav-link" href="index.html">داشبورد فروش محصولات</a></li>
</ul>
</li>
<li class="menu-header">امکانات بیشتر</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown" data-toggle="dropdown"><i class="fas fa-columns"></i> <span>صفحه بندی</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="layout-default.html">حالت پیش فرض</a></li>
<li><a class="nav-link" href="layout-transparent.html">سایدبار بدون رنگ</a></li>
<li><a class="nav-link" href="layout-top-navigation.html">نویگیشن بالا</a></li>
</ul>
</li>
<li><a class="nav-link" href="blank.html"><i class="far fa-square"></i> <span>صفحه خالی</span></a></li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="fas fa-th"></i> <span>بوت استرپ</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="bootstrap-alert.html">آلرت</a></li>
<li><a class="nav-link" href="bootstrap-badge.html">بدج</a></li>
<li><a class="nav-link" href="bootstrap-breadcrumb.html">بردکرامپ</a></li>
<li><a class="nav-link" href="bootstrap-buttons.html">دکمه ها</a></li>
<li><a class="nav-link" href="bootstrap-card.html">کارت</a></li>
<li><a class="nav-link" href="bootstrap-carousel.html">کروسل</a></li>
<li><a class="nav-link" href="bootstrap-collapse.html">کولاپس</a></li>
<li><a class="nav-link" href="bootstrap-dropdown.html">دراپ دون</a></li>
<li><a class="nav-link" href="bootstrap-form.html">فرم</a></li>
<li><a class="nav-link" href="bootstrap-list-group.html">لیست گروه</a></li>
<li><a class="nav-link" href="bootstrap-media-object.html">مدیا ابجکت</a></li>
<li><a class="nav-link" href="bootstrap-modal.html">مودال</a></li>
<li><a class="nav-link" href="bootstrap-nav.html">نویگیشن</a></li>
<li><a class="nav-link" href="bootstrap-navbar.html">نوبار</a></li>
<li><a class="nav-link" href="bootstrap-pagination.html">پجینیشن</a></li>
<li><a class="nav-link" href="bootstrap-popover.html">پاپ اور</a></li>
<li><a class="nav-link" href="bootstrap-progress.html">پراگرس</a></li>
<li><a class="nav-link" href="bootstrap-table.html">جدول</a></li>
<li><a class="nav-link" href="bootstrap-tooltip.html">تولتیپ</a></li>
<li><a class="nav-link" href="bootstrap-typography.html">تایپوگرافی</a></li>
</ul>
</li>
<li class="menu-header">امکانات دیگر</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="fas fa-th-large"></i> <span>کامپوننت ها</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="components-gallery.html">گالری</a></li>
<li><a class="nav-link" href="components-multiple-upload.html">مولتی آپلود</a></li>
<li><a class="nav-link" href="components-tab.html">تب</a></li>
<li><a class="nav-link" href="components-table.html">جدول</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="far fa-file-alt"></i> <span>فرم ها</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="forms-advanced-form.html">فرم پیشرفته</a></li>
<li><a class="nav-link" href="forms-editor.html">ویرایشگر</a></li>
<li><a class="nav-link" href="forms-validation.html">ولیدیشن</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="fas fa-plug"></i> <span>ماژول ها</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="modules-calendar.html">تقویم</a></li>
<li><a class="nav-link" href="modules-chartjs.html">چارت ها</a></li>
<li><a class="nav-link" href="modules-datatables.html">دیتاتیبل</a></li>
<li><a class="nav-link" href="modules-flag.html">پرچم</a></li>
<li><a class="nav-link" href="modules-font-awesome.html">فونت اوسوم</a></li>
<li><a class="nav-link" href="modules-ion-icons.html">ای او ن ایکون</a></li>
<li><a class="nav-link" href="modules-owl-carousel.html">اول کراسول</a></li>
<li><a class="nav-link" href="modules-sparkline.html">اسپارک لاین</a></li>
<li><a class="nav-link" href="modules-sweet-alert.html">سویت الرت</a></li>
<li><a class="nav-link" href="modules-toastr.html">توستر</a></li>
<li><a class="nav-link" href="modules-vector-map.html">وکتور مپ</a></li>
<li><a class="nav-link" href="modules-weather-icon.html">ایکن اب و هوا</a></li>
</ul>
</li>
<li class="menu-header">صفحات</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="far fa-user"></i> <span>ثبت نام</span></a>
<ul class="dropdown-menu">
<li><a href="auth-forgot-password.html">فراموشی کلمه عبور</a></li>
<li><a href="auth-login.html">لاگین</a></li>
<li><a href="auth-register.html">ثبت نام</a></li>
<li><a href="auth-reset-password.html">بازیابی کلمه عبور</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="fas fa-exclamation"></i> <span>خطاها</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="errors-503.html">503</a></li>
<li><a class="nav-link" href="errors-403.html">403</a></li>
<li><a class="nav-link" href="errors-404.html">404</a></li>
<li><a class="nav-link" href="errors-500.html">500</a></li>
</ul>
</li>
<li><a class="nav-link" href="credits.html"><i class="fas fa-pencil-ruler"></i> <span>سازنده ها</span></a></li>
</ul>
<div class="mt-4 mb-4 p-3 hide-sidebar-mini">
<a href="https://getstisla.com/docs" class="btn btn-primary btn-lg btn-block btn-icon-split">
<i class="fas fa-rocket"></i> مستندات قالب
</a>
</div>
</aside>
</div>
<!-- Main Content -->
<div class="main-content">
<section class="section">
<div class="section-header">
<h1>برد کرامپ</h1>
<div class="section-header-breadcrumb">
<div class="breadcrumb-item active"><a href="#">داشبورد</a></div>
<div class="breadcrumb-item"><a href="#">کامپوننت بوت استرپ</a></div>
<div class="breadcrumb-item">برد کرامپ</div>
</div>
</div>
<div class="section-body text-right">
<h2 class="section-title">برد کرامپ</h2>
<p class="section-lead">بردکرامپ برای مکانیابی و مشخص کردن آدرس جایی که هستیم استفاده میشه.</p>
<div class="row">
<div class="col-12 col-md-6 col-lg-6">
<div class="card">
<div class="card-header">
<h4>دیفالت</h4>
</div>
<div class="card-body">
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item active" aria-current="page">خانه</li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">خانه</a></li>
<li class="breadcrumb-item"><a href="#">کتابخانه</a></li>
<li class="breadcrumb-item active" aria-current="page">دیتا</li>
</ol>
</nav>
</div>
</div>
<div class="card">
<div class="card-header">
<h4>آیکن</h4>
</div>
<div class="card-body">
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item active"><i class="fas fa-tachometer-alt"></i> خانه </li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#"><i class="fas fa-tachometer-alt"></i> خانه </a></li>
<li class="breadcrumb-item"><a href="#"><i class="far fa-file"></i> کتابخانه </a></li>
<li class="breadcrumb-item active" aria-current="page"><i class="fas fa-list"></i> دیتا </li>
</ol>
</nav>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-6">
<div class="card">
<div class="card-header">
<h4>بکگراند</h4>
</div>
<div class="card-body">
<nav aria-label="breadcrumb">
<ol class="breadcrumb bg-primary text-white-all">
<li class="breadcrumb-item"><a href="#"><i class="fas fa-tachometer-alt"></i> خانه </a></li>
<li class="breadcrumb-item"><a href="#"><i class="far fa-file"></i> کتابخانه </a></li>
<li class="breadcrumb-item active" aria-current="page"><i class="fas fa-list"></i> دیتا </li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb bg-warning text-white-all">
<li class="breadcrumb-item"><a href="#"><i class="fas fa-tachometer-alt"></i> خانه </a></li>
<li class="breadcrumb-item"><a href="#"><i class="far fa-file"></i> کتابخانه </a></li>
<li class="breadcrumb-item active" aria-current="page"><i class="fas fa-list"></i> دیتا </li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb bg-success text-white-all">
<li class="breadcrumb-item"><a href="#"><i class="fas fa-tachometer-alt"></i> خانه </a></li>
<li class="breadcrumb-item"><a href="#"><i class="far fa-file"></i> کتابخانه </a></li>
<li class="breadcrumb-item active" aria-current="page"><i class="fas fa-list"></i> دیتا </li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb bg-danger text-white-all">
<li class="breadcrumb-item"><a href="#"><i class="fas fa-tachometer-alt"></i> خانه </a></li>
<li class="breadcrumb-item"><a href="#"><i class="far fa-file"></i> کتابخانه </a></li>
<li class="breadcrumb-item active" aria-current="page"><i class="fas fa-list"></i> دیتا </li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb bg-secondary text-white-all">
<li class="breadcrumb-item"><a href="#"><i class="fas fa-tachometer-alt"></i> خانه</a></li>
<li class="breadcrumb-item"><a href="#"><i class="far fa-file"></i> کتابخانه </a></li>
<li class="breadcrumb-item active" aria-current="page"><i class="fas fa-list"></i> دیتا </li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb bg-dark text-white-all">
<li class="breadcrumb-item"><a href="#"><i class="fas fa-tachometer-alt"></i> خانه </a></li>
<li class="breadcrumb-item"><a href="#"><i class="far fa-file"></i> کتابخانه </a></li>
<li class="breadcrumb-item active" aria-current="page"><i class="fas fa-list"></i> دیتا </li>
</ol>
</nav>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<footer class="main-footer">
<div class="footer-left">
Copyright &copy; 2018 <div class="bullet"></div> Design By <a href="https://nauval.in/">Muhamad Nauval Azhar</a>
</div>
<div class="footer-right">
</div>
</footer>
</div>
</div>
<!-- General JS Scripts -->
<script src="../assets/modules/jquery.min.js"></script>
<script src="../assets/modules/popper.js"></script>
<script src="../assets/modules/tooltip.js"></script>
<script src="../assets/modules/bootstrap/js/bootstrap.min.js"></script>
<script src="../assets/modules/nicescroll/jquery.nicescroll.min.js"></script>
<script src="../assets/modules/moment.min.js"></script>
<script src="../assets/js/stisla.js"></script>
<!-- JS Libraies -->
<!-- Page Specific JS File -->
<!-- Template JS File -->
<script src="../assets/js/scripts.js"></script>
<script src="../assets/js/custom.js"></script>
</body>
</html>

View File

@@ -0,0 +1,583 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no" name="viewport">
<title>Bootstrap Components &rsaquo; Buttons &mdash; Stisla</title>
<!-- General CSS Files -->
<link rel="stylesheet" href="../assets/modules/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="../assets/modules/fontawesome/css/all.min.css">
<!-- CSS Libraries -->
<!-- Template CSS -->
<link rel="stylesheet" href="../assets/css/style.css">
<link rel="stylesheet" href="../assets/css/components.css">
<link rel="stylesheet" href="../assets/css/rtl.css">
</head>
<body>
<div id="app">
<div class="main-wrapper main-wrapper-1">
<div class="navbar-bg"></div>
<nav class="navbar navbar-expand-lg main-navbar">
<form class="form-inline ml-auto">
<ul class="navbar-nav ml-3">
<li><a href="#" data-toggle="sidebar" class="nav-link nav-link-lg"><i class="fas fa-bars"></i></a></li>
<li><a href="#" data-toggle="search" class="nav-link nav-link-lg d-sm-none"><i class="fas fa-search"></i></a></li>
</ul>
<div class="search-element text-right">
<input class="form-control" type="search" placeholder="جستجو" aria-label="Search" data-width="250">
<button class="btn" type="submit"><i class="fas fa-search"></i></button>
<div class="search-backdrop"></div>
<div class="search-result">
<div class="search-header">
نتیجه جستجو
</div>
<div class="search-item">
<a href="#">چگونه ناسا رو هک کنیم؟</a>
<a href="#" class="search-close"><i class="fas fa-times"></i></a>
</div>
<div class="search-item">
<a href="#">Kodinger.com</a>
<a href="#" class="search-close"><i class="fas fa-times"></i></a>
</div>
<div class="search-item">
<a href="#">پنل مدیریت</a>
<a href="#" class="search-close"><i class="fas fa-times"></i></a>
</div>
<div class="search-header">
نتایج
</div>
<div class="search-item">
<a href="#">
<img class="ml-3 rounded" width="30" src="../assets/img/products/product-3-50.png" alt="product">
آیفون s9 تولید شد
</a>
</div>
<div class="search-item">
<a href="#">
<img class="ml-3 rounded" width="30" src="../assets/img/products/product-2-50.png" alt="product">
چه شادی هایی که زیر پای انسانها سرکوب شدند
</a>
</div>
<div class="search-item">
<a href="#">
<img class="ml-3 rounded" width="30" src="../assets/img/products/product-1-50.png" alt="product">
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ.
</a>
</div>
<div class="search-header">
پروژه ها
</div>
<div class="search-item">
<a href="#">
<div class="search-icon bg-danger text-white ml-3">
<i class="fas fa-code"></i>
</div>
متریال ادمین پنل
</a>
</div>
<div class="search-item">
<a href="#">
<div class="search-icon bg-primary text-white ml-3">
<i class="fas fa-laptop"></i>
</div>
ایجاد صفحه لندینگ
</a>
</div>
</div>
</div>
</form>
<ul class="navbar-nav navbar-right">
<li class="dropdown dropdown-list-toggle"><a href="#" data-toggle="dropdown" class="nav-link nav-link-lg message-toggle beep"><i class="far fa-envelope"></i></a>
<div class="dropdown-menu dropdown-list text-right dropdown-menu-left">
<div class="dropdown-header">پیام ها
<div class="float-left">
<a href="#">علامتگذاری همه بصورت خوانده شده</a>
</div>
</div>
<div class="dropdown-list-content dropdown-list-message">
<a href="#" class="dropdown-item dropdown-item-unread">
<div class="dropdown-item-avatar">
<img alt="image" src="../assets/img/avatar/avatar-1.png" class="rounded-circle">
<div class="is-online"></div>
</div>
<div class="dropdown-item-desc text-right">
<b>مهدی خانزادی</b>
<p>سلام داداچ!</p>
<div class="time">۱۰ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item dropdown-item-unread">
<div class="dropdown-item-avatar">
<img alt="image" src="../assets/img/avatar/avatar-2.png" class="rounded-circle">
</div>
<div class="dropdown-item-desc">
<b>مهیار انصاری</b>
<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ.</p>
<div class="time">۱۲ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item dropdown-item-unread">
<div class="dropdown-item-avatar">
<img alt="image" src="../assets/img/avatar/avatar-3.png" class="rounded-circle">
<div class="is-online"></div>
</div>
<div class="dropdown-item-desc">
<b>آمیتا پاچان</b>
<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ.</p>
<div class="time">۱۲ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-avatar">
<img alt="image" src="../assets/img/avatar/avatar-4.png" class="rounded-circle">
</div>
<div class="dropdown-item-desc">
<b>مهدی خانزادی</b>
<p>سلام سیستم پشتیبانی پاترونیک رو استفاده کنید</p>
<div class="time">۱۶ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-avatar">
<img alt="image" src="../assets/img/avatar/avatar-5.png" class="rounded-circle">
</div>
<div class="dropdown-item-desc">
<b>لورم ایپسوم</b>
<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ.</p>
<div class="time">دیروز</div>
</div>
</a>
</div>
<div class="dropdown-footer text-center">
<a href="#"> دیدن همه پیام ها<i class="fas fa-chevron-left"></i></a>
</div>
</div>
</li>
<li class="dropdown dropdown-list-toggle"><a href="#" data-toggle="dropdown" class="nav-link notification-toggle nav-link-lg beep"><i class="far fa-bell"></i></a>
<div class="dropdown-menu dropdown-list dropdown-menu-left">
<div class="dropdown-header text-right">نوتیفیکیشن ها
<div class="float-left">
<a href="#"> علامتگذاری همه بصورت خوانده شده</a>
</div>
</div>
<div class="dropdown-list-content dropdown-list-icons text-right">
<a href="#" class="dropdown-item dropdown-item-unread">
<div class="dropdown-item-icon bg-primary text-white">
<i class="fas fa-code"></i>
</div>
<div class="dropdown-item-desc">
قالب مدیریتی متریال اپدیت جدید داد!
<div class="time text-primary">۲ دقیقه پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-icon bg-info text-white">
<i class="far fa-user"></i>
</div>
<div class="dropdown-item-desc">
<b>شما</b> و <b>مهیار انصاری</b> هم اکنون همکار هستید.
<div class="time">۱۰ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-icon bg-success text-white">
<i class="fas fa-check"></i>
</div>
<div class="dropdown-item-desc">
<b>مهدی خانزادی</b> اطلاعات مرتبط با <b>قالب</b> را <b>آپلود کرد.</b>
<div class="time">۱۲ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-icon bg-danger text-white">
<i class="fas fa-exclamation-triangle"></i>
</div>
<div class="dropdown-item-desc">
فضای هارد دیسک پر شده است لطفا آن را خالی کنید.
<div class="time">۱۷ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-icon bg-info text-white">
<i class="fas fa-bell"></i>
</div>
<div class="dropdown-item-desc">
به قالب متریال خوش آمدید
<div class="time">دیروز</div>
</div>
</a>
</div>
<div class="dropdown-footer text-center">
<a href="#">
<span>نمایش همه</span>
<i class="fas fa-chevron-left"></i>
</a>
</div>
</div>
</li>
<li class="dropdown"><a href="#" data-toggle="dropdown" class="nav-link dropdown-toggle nav-link-lg nav-link-user">
<img alt="image" src="../assets/img/avatar/avatar-1.png" class="rounded-circle mr-1">
<div class="d-sm-none d-lg-inline-block">سلام مهدی</div></a>
<div class="dropdown-menu dropdown-menu-right text-right">
<div class="dropdown-title text-center">۵ دقیقه پیش لاگین کردین</div>
<a href="features-profile.html" class="dropdown-item has-icon">
<span>پروفایل</span>
<i class="far fa-user"></i>
</a>
<a href="features-activities.html" class="dropdown-item has-icon">
<span>فعالیت ها</span>
<i class="fas fa-bolt"></i>
</a>
<a href="features-settings.html" class="dropdown-item has-icon">
<span>تنظیمات</span>
<i class="fas fa-cog"></i>
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item has-icon text-danger">
<span>خروج</span>
<i class="fas fa-sign-out-alt"></i>
</a>
</div>
</li>
</ul>
</nav>
<div class="main-sidebar sidebar-style-2">
<aside id="sidebar-wrapper">
<div class="sidebar-brand">
<a href="index.html">مدیریت پاترونیک</a>
</div>
<div class="sidebar-brand sidebar-brand-sm">
<a href="index.html">مدیریت فروش</a>
</div>
<ul class="sidebar-menu">
<li class="menu-header">داشبورد</li>
<li class="dropdown active">
<a href="#" class="nav-link has-dropdown"><i class="fas fa-fire"></i><span>داشبورد</span></a>
<ul class="dropdown-menu">
<li class=active><a class="nav-link" href="index-0.html">داشبورد عمومی</a></li>
<li><a class="nav-link" href="index.html">داشبورد فروش محصولات</a></li>
</ul>
</li>
<li class="menu-header">امکانات بیشتر</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown" data-toggle="dropdown"><i class="fas fa-columns"></i> <span>صفحه بندی</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="layout-default.html">حالت پیش فرض</a></li>
<li><a class="nav-link" href="layout-transparent.html">سایدبار بدون رنگ</a></li>
<li><a class="nav-link" href="layout-top-navigation.html">نویگیشن بالا</a></li>
</ul>
</li>
<li><a class="nav-link" href="blank.html"><i class="far fa-square"></i> <span>صفحه خالی</span></a></li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="fas fa-th"></i> <span>بوت استرپ</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="bootstrap-alert.html">آلرت</a></li>
<li><a class="nav-link" href="bootstrap-badge.html">بدج</a></li>
<li><a class="nav-link" href="bootstrap-breadcrumb.html">بردکرامپ</a></li>
<li><a class="nav-link" href="bootstrap-buttons.html">دکمه ها</a></li>
<li><a class="nav-link" href="bootstrap-card.html">کارت</a></li>
<li><a class="nav-link" href="bootstrap-carousel.html">کروسل</a></li>
<li><a class="nav-link" href="bootstrap-collapse.html">کولاپس</a></li>
<li><a class="nav-link" href="bootstrap-dropdown.html">دراپ دون</a></li>
<li><a class="nav-link" href="bootstrap-form.html">فرم</a></li>
<li><a class="nav-link" href="bootstrap-list-group.html">لیست گروه</a></li>
<li><a class="nav-link" href="bootstrap-media-object.html">مدیا ابجکت</a></li>
<li><a class="nav-link" href="bootstrap-modal.html">مودال</a></li>
<li><a class="nav-link" href="bootstrap-nav.html">نویگیشن</a></li>
<li><a class="nav-link" href="bootstrap-navbar.html">نوبار</a></li>
<li><a class="nav-link" href="bootstrap-pagination.html">پجینیشن</a></li>
<li><a class="nav-link" href="bootstrap-popover.html">پاپ اور</a></li>
<li><a class="nav-link" href="bootstrap-progress.html">پراگرس</a></li>
<li><a class="nav-link" href="bootstrap-table.html">جدول</a></li>
<li><a class="nav-link" href="bootstrap-tooltip.html">تولتیپ</a></li>
<li><a class="nav-link" href="bootstrap-typography.html">تایپوگرافی</a></li>
</ul>
</li>
<li class="menu-header">امکانات دیگر</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="fas fa-th-large"></i> <span>کامپوننت ها</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="components-gallery.html">گالری</a></li>
<li><a class="nav-link" href="components-multiple-upload.html">مولتی آپلود</a></li>
<li><a class="nav-link" href="components-tab.html">تب</a></li>
<li><a class="nav-link" href="components-table.html">جدول</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="far fa-file-alt"></i> <span>فرم ها</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="forms-advanced-form.html">فرم پیشرفته</a></li>
<li><a class="nav-link" href="forms-editor.html">ویرایشگر</a></li>
<li><a class="nav-link" href="forms-validation.html">ولیدیشن</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="fas fa-plug"></i> <span>ماژول ها</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="modules-calendar.html">تقویم</a></li>
<li><a class="nav-link" href="modules-chartjs.html">چارت ها</a></li>
<li><a class="nav-link" href="modules-datatables.html">دیتاتیبل</a></li>
<li><a class="nav-link" href="modules-flag.html">پرچم</a></li>
<li><a class="nav-link" href="modules-font-awesome.html">فونت اوسوم</a></li>
<li><a class="nav-link" href="modules-ion-icons.html">ای او ن ایکون</a></li>
<li><a class="nav-link" href="modules-owl-carousel.html">اول کراسول</a></li>
<li><a class="nav-link" href="modules-sparkline.html">اسپارک لاین</a></li>
<li><a class="nav-link" href="modules-sweet-alert.html">سویت الرت</a></li>
<li><a class="nav-link" href="modules-toastr.html">توستر</a></li>
<li><a class="nav-link" href="modules-vector-map.html">وکتور مپ</a></li>
<li><a class="nav-link" href="modules-weather-icon.html">ایکن اب و هوا</a></li>
</ul>
</li>
<li class="menu-header">صفحات</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="far fa-user"></i> <span>ثبت نام</span></a>
<ul class="dropdown-menu">
<li><a href="auth-forgot-password.html">فراموشی کلمه عبور</a></li>
<li><a href="auth-login.html">لاگین</a></li>
<li><a href="auth-register.html">ثبت نام</a></li>
<li><a href="auth-reset-password.html">بازیابی کلمه عبور</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="fas fa-exclamation"></i> <span>خطاها</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="errors-503.html">503</a></li>
<li><a class="nav-link" href="errors-403.html">403</a></li>
<li><a class="nav-link" href="errors-404.html">404</a></li>
<li><a class="nav-link" href="errors-500.html">500</a></li>
</ul>
</li>
<li><a class="nav-link" href="credits.html"><i class="fas fa-pencil-ruler"></i> <span>سازنده ها</span></a></li>
</ul>
<div class="mt-4 mb-4 p-3 hide-sidebar-mini">
<a href="https://getstisla.com/docs" class="btn btn-primary btn-lg btn-block btn-icon-split">
<i class="fas fa-rocket"></i> مستندات قالب
</a>
</div>
</aside>
</div>
<!-- Main Content -->
<div class="main-content">
<section class="section">
<div class="section-header">
<h1>دکمه</h1>
<div class="section-header-breadcrumb">
<div class="breadcrumb-item active"><a href="#">داشبورد</a></div>
<div class="breadcrumb-item"><a href="#">کامپوننت بوت استرپ</a></div>
<div class="breadcrumb-item">دکمه</div>
</div>
</div>
<div class="section-body text-right">
<h2 class="section-title">دکمه</h2>
<p class="section-lead">دکمه ها نوع های مختلفی دارن و میشه ازشون توی فرم ها استفاده کرد.</p>
<div class="row">
<div class="col-12 col-md-6 col-lg-6">
<div class="card">
<div class="card-header">
<h4>Basic</h4>
</div>
<div class="card-body">
<p class="text-muted">برای ایجاد دکمه از کلاس های <code>.btn .btn-{color}</code> استفاده کنید.</p>
<div class="buttons">
<a href="#" class="btn btn-primary">Primary</a>
<a href="#" class="btn btn-secondary">Secondary</a>
<a href="#" class="btn btn-info">Info</a>
<a href="#" class="btn btn-warning">Warning</a>
<a href="#" class="btn btn-danger">Danger</a>
<a href="#" class="btn btn-success">Success</a>
<a href="#" class="btn btn-light">Light</a>
<a href="#" class="btn btn-dark">Dark</a>
<a href="#" class="btn">Link</a>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-6">
<div class="card">
<div class="card-header">
<h4>دکمه ها <code>.btn-outline</code></h4>
</div>
<div class="card-body">
<p class="text-muted">از کلاس های <code>.btn .btn-outline-{color}</code> استفاده کنید.</p>
<div class="buttons">
<a href="#" class="btn btn-outline-primary">Primary</a>
<a href="#" class="btn btn-outline-secondary">Secondary</a>
<a href="#" class="btn btn-outline-info">Info</a>
<a href="#" class="btn btn-outline-warning">Warning</a>
<a href="#" class="btn btn-outline-danger">Danger</a>
<a href="#" class="btn btn-outline-success">Success</a>
<a href="#" class="btn btn-outline-light">Light</a>
<a href="#" class="btn btn-outline-dark">Dark</a>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12 col-md-6 col-lg-6">
<div class="card">
<div class="card-header">
<h4>سایزهای مختلف دکمه</h4>
</div>
<div class="card-body">
<p class="text-muted">از کلاس های <code>.btn-lg</code> یا <code>.btn-sm</code> استفاده کنید.</p>
<div class="buttons">
<a href="#" class="btn btn-sm btn-warning">Small</a>
<a href="#" class="btn btn-danger">Normal</a>
<a href="#" class="btn btn-lg btn-dark">Large</a>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-6">
<div class="card">
<div class="card-header">
<h4>حالت های مختلف دکمه</h4>
</div>
<div class="card-body">
<p class="text-muted">از کلاس <code>.disabled</code> یا <code>.btn-progress</code> استفاده کنید.</p>
<div class="buttons">
<a href="#" class="btn btn-primary">Normal</a>
<a href="#" class="btn disabled btn-primary">Disabled</a>
<a href="#" class="btn disabled btn-primary btn-progress">Progress</a>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12 col-md-6 col-lg-6">
<div class="card">
<div class="card-header">
<h4>دکمه های همراه با آیکن</h4>
</div>
<div class="card-body">
<p class="text-muted">از کلاس <code>.btn-icon</code> و <code>.icon-left</code> استفاده کنید.</p>
<div class="buttons">
<a href="#" class="btn btn-icon icon-left"><i class="far fa-user"></i> Default</a>
<a href="#" class="btn btn-icon icon-left btn-primary"><i class="far fa-edit"></i> Primary</a>
<a href="#" class="btn btn-icon icon-left btn-secondary"><i class="far fa-user"></i> Secondary</a>
<a href="#" class="btn btn-icon icon-left btn-info"><i class="fas fa-info-circle"></i> Info</a>
<a href="#" class="btn btn-icon icon-left btn-warning"><i class="fas fa-exclamation-triangle"></i> Warning</a>
<a href="#" class="btn btn-icon icon-left btn-danger"><i class="fas fa-times"></i> Danger</a>
<a href="#" class="btn btn-icon icon-left btn-success"><i class="fas fa-check"></i> Success</a>
<a href="#" class="btn btn-icon icon-left btn-light"><i class="fas fa-star"></i> Light</a>
<a href="#" class="btn btn-icon icon-left btn-dark"><i class="far fa-file"></i> Dark</a>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-6">
<div class="card">
<div class="card-header">
<h4>دکمه های آیکن</h4>
</div>
<div class="card-body">
<p class="text-muted">از کلاس <code>.btn-icon</code> استفاده کنید.</p>
<div class="buttons">
<a href="#" class="btn btn-icon btn-primary"><i class="far fa-edit"></i></a>
<a href="#" class="btn btn-icon btn-secondary"><i class="far fa-user"></i></a>
<a href="#" class="btn btn-icon btn-info"><i class="fas fa-info-circle"></i></a>
<a href="#" class="btn btn-icon btn-warning"><i class="fas fa-exclamation-triangle"></i></a>
<a href="#" class="btn btn-icon btn-danger"><i class="fas fa-times"></i></a>
<a href="#" class="btn btn-icon btn-success"><i class="fas fa-check"></i></a>
<a href="#" class="btn btn-icon btn-light"><i class="fas fa-star"></i></a>
<a href="#" class="btn btn-icon btn-dark"><i class="far fa-file"></i></a>
</div>
<p class="text-muted mt-2">Sizes.</p>
<div class="buttons">
<a href="#" class="btn btn-icon btn-sm btn-warning"><i class="fas fa-exclamation-triangle"></i></a>
<a href="#" class="btn btn-icon btn-danger"><i class="fas fa-times"></i></a>
<a href="#" class="btn btn-icon btn-lg btn-success"><i class="fas fa-check"></i></a>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12 col-md-6 col-lg-6">
<div class="card">
<div class="card-header">
<h4>دکمه های گروهی</h4>
</div>
<div class="card-body">
<div class="btn-group mb-3" role="group" aria-label="Basic example">
<button type="button" class="btn btn-secondary">Left</button>
<button type="button" class="btn btn-secondary">Middle</button>
<button type="button" class="btn btn-secondary">Right</button>
</div>
<div class="btn-group mb-3" role="group" aria-label="Basic example">
<button type="button" class="btn btn-danger">Left</button>
<button type="button" class="btn btn-warning">Middle</button>
<button type="button" class="btn btn-success">Right</button>
</div>
<div class="btn-group mb-3 btn-group-sm" role="group" aria-label="Basic example">
<button type="button" class="btn btn-primary">Left</button>
<button type="button" class="btn btn-primary">Middle</button>
<button type="button" class="btn btn-primary">Right</button>
</div>
<div class="clearfix"></div>
<div class="btn-group btn-group-lg" role="group" aria-label="Basic example">
<button type="button" class="btn btn-danger">Left</button>
<button type="button" class="btn btn-danger">Middle</button>
<button type="button" class="btn btn-danger">Right</button>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-6">
<div class="card">
<div class="card-header">
<h4>دکمه های عمودی</h4>
</div>
<div class="card-body">
<div class="btn-group-vertical" role="group" aria-label="Basic example">
<button type="button" class="btn btn-secondary">Left</button>
<button type="button" class="btn btn-secondary">Middle</button>
<button type="button" class="btn btn-secondary">Right</button>
<button type="button" class="btn btn-secondary">Justify</button>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<footer class="main-footer">
<div class="footer-left">
Copyright &copy; 2018 <div class="bullet"></div> Design By <a href="https://nauval.in/">Muhamad Nauval Azhar</a>
</div>
<div class="footer-right">
</div>
</footer>
</div>
</div>
<!-- General JS Scripts -->
<script src="../assets/modules/jquery.min.js"></script>
<script src="../assets/modules/popper.js"></script>
<script src="../assets/modules/tooltip.js"></script>
<script src="../assets/modules/bootstrap/js/bootstrap.min.js"></script>
<script src="../assets/modules/nicescroll/jquery.nicescroll.min.js"></script>
<script src="../assets/modules/moment.min.js"></script>
<script src="../assets/js/stisla.js"></script>
<!-- JS Libraies -->
<!-- Page Specific JS File -->
<!-- Template JS File -->
<script src="../assets/js/scripts.js"></script>
<script src="../assets/js/custom.js"></script>
</body>
</html>

801
dev/rtl/bootstrap-card.html Normal file
View File

@@ -0,0 +1,801 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no" name="viewport">
<title>Bootstrap Components &rsaquo; Card &mdash; Stisla</title>
<!-- General CSS Files -->
<link rel="stylesheet" href="../assets/modules/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="../assets/modules/fontawesome/css/all.min.css">
<!-- CSS Libraries -->
<link rel="stylesheet" href="../assets/modules/chocolat/dist/css/chocolat.css">
<!-- Template CSS -->
<link rel="stylesheet" href="../assets/css/style.css">
<link rel="stylesheet" href="../assets/css/components.css">
<link rel="stylesheet" href="../assets/css/rtl.css">
</head>
<body>
<div id="app">
<div class="main-wrapper main-wrapper-1">
<div class="navbar-bg"></div>
<nav class="navbar navbar-expand-lg main-navbar">
<form class="form-inline ml-auto">
<ul class="navbar-nav ml-3">
<li><a href="#" data-toggle="sidebar" class="nav-link nav-link-lg"><i class="fas fa-bars"></i></a></li>
<li><a href="#" data-toggle="search" class="nav-link nav-link-lg d-sm-none"><i class="fas fa-search"></i></a></li>
</ul>
<div class="search-element text-right">
<input class="form-control" type="search" placeholder="جستجو" aria-label="Search" data-width="250">
<button class="btn" type="submit"><i class="fas fa-search"></i></button>
<div class="search-backdrop"></div>
<div class="search-result">
<div class="search-header">
نتیجه جستجو
</div>
<div class="search-item">
<a href="#">چگونه ناسا رو هک کنیم؟</a>
<a href="#" class="search-close"><i class="fas fa-times"></i></a>
</div>
<div class="search-item">
<a href="#">Kodinger.com</a>
<a href="#" class="search-close"><i class="fas fa-times"></i></a>
</div>
<div class="search-item">
<a href="#">پنل مدیریت</a>
<a href="#" class="search-close"><i class="fas fa-times"></i></a>
</div>
<div class="search-header">
نتایج
</div>
<div class="search-item">
<a href="#">
<img class="ml-3 rounded" width="30" src="../assets/img/products/product-3-50.png" alt="product">
آیفون s9 تولید شد
</a>
</div>
<div class="search-item">
<a href="#">
<img class="ml-3 rounded" width="30" src="../assets/img/products/product-2-50.png" alt="product">
چه شادی هایی که زیر پای انسانها سرکوب شدند
</a>
</div>
<div class="search-item">
<a href="#">
<img class="ml-3 rounded" width="30" src="../assets/img/products/product-1-50.png" alt="product">
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ.
</a>
</div>
<div class="search-header">
پروژه ها
</div>
<div class="search-item">
<a href="#">
<div class="search-icon bg-danger text-white ml-3">
<i class="fas fa-code"></i>
</div>
متریال ادمین پنل
</a>
</div>
<div class="search-item">
<a href="#">
<div class="search-icon bg-primary text-white ml-3">
<i class="fas fa-laptop"></i>
</div>
ایجاد صفحه لندینگ
</a>
</div>
</div>
</div>
</form>
<ul class="navbar-nav navbar-right">
<li class="dropdown dropdown-list-toggle"><a href="#" data-toggle="dropdown" class="nav-link nav-link-lg message-toggle beep"><i class="far fa-envelope"></i></a>
<div class="dropdown-menu dropdown-list text-right dropdown-menu-left">
<div class="dropdown-header">پیام ها
<div class="float-left">
<a href="#">علامتگذاری همه بصورت خوانده شده</a>
</div>
</div>
<div class="dropdown-list-content dropdown-list-message">
<a href="#" class="dropdown-item dropdown-item-unread">
<div class="dropdown-item-avatar">
<img alt="image" src="../assets/img/avatar/avatar-1.png" class="rounded-circle">
<div class="is-online"></div>
</div>
<div class="dropdown-item-desc text-right">
<b>مهدی خانزادی</b>
<p>سلام داداچ!</p>
<div class="time">۱۰ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item dropdown-item-unread">
<div class="dropdown-item-avatar">
<img alt="image" src="../assets/img/avatar/avatar-2.png" class="rounded-circle">
</div>
<div class="dropdown-item-desc">
<b>مهیار انصاری</b>
<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ.</p>
<div class="time">۱۲ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item dropdown-item-unread">
<div class="dropdown-item-avatar">
<img alt="image" src="../assets/img/avatar/avatar-3.png" class="rounded-circle">
<div class="is-online"></div>
</div>
<div class="dropdown-item-desc">
<b>آمیتا پاچان</b>
<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ.</p>
<div class="time">۱۲ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-avatar">
<img alt="image" src="../assets/img/avatar/avatar-4.png" class="rounded-circle">
</div>
<div class="dropdown-item-desc">
<b>مهدی خانزادی</b>
<p>سلام سیستم پشتیبانی پاترونیک رو استفاده کنید</p>
<div class="time">۱۶ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-avatar">
<img alt="image" src="../assets/img/avatar/avatar-5.png" class="rounded-circle">
</div>
<div class="dropdown-item-desc">
<b>لورم ایپسوم</b>
<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ.</p>
<div class="time">دیروز</div>
</div>
</a>
</div>
<div class="dropdown-footer text-center">
<a href="#"> دیدن همه پیام ها<i class="fas fa-chevron-left"></i></a>
</div>
</div>
</li>
<li class="dropdown dropdown-list-toggle"><a href="#" data-toggle="dropdown" class="nav-link notification-toggle nav-link-lg beep"><i class="far fa-bell"></i></a>
<div class="dropdown-menu dropdown-list dropdown-menu-left">
<div class="dropdown-header text-right">نوتیفیکیشن ها
<div class="float-left">
<a href="#"> علامتگذاری همه بصورت خوانده شده</a>
</div>
</div>
<div class="dropdown-list-content dropdown-list-icons text-right">
<a href="#" class="dropdown-item dropdown-item-unread">
<div class="dropdown-item-icon bg-primary text-white">
<i class="fas fa-code"></i>
</div>
<div class="dropdown-item-desc">
قالب مدیریتی متریال اپدیت جدید داد!
<div class="time text-primary">۲ دقیقه پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-icon bg-info text-white">
<i class="far fa-user"></i>
</div>
<div class="dropdown-item-desc">
<b>شما</b> و <b>مهیار انصاری</b> هم اکنون همکار هستید.
<div class="time">۱۰ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-icon bg-success text-white">
<i class="fas fa-check"></i>
</div>
<div class="dropdown-item-desc">
<b>مهدی خانزادی</b> اطلاعات مرتبط با <b>قالب</b> را <b>آپلود کرد.</b>
<div class="time">۱۲ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-icon bg-danger text-white">
<i class="fas fa-exclamation-triangle"></i>
</div>
<div class="dropdown-item-desc">
فضای هارد دیسک پر شده است لطفا آن را خالی کنید.
<div class="time">۱۷ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-icon bg-info text-white">
<i class="fas fa-bell"></i>
</div>
<div class="dropdown-item-desc">
به قالب متریال خوش آمدید
<div class="time">دیروز</div>
</div>
</a>
</div>
<div class="dropdown-footer text-center">
<a href="#">
<span>نمایش همه</span>
<i class="fas fa-chevron-left"></i>
</a>
</div>
</div>
</li>
<li class="dropdown"><a href="#" data-toggle="dropdown" class="nav-link dropdown-toggle nav-link-lg nav-link-user">
<img alt="image" src="../assets/img/avatar/avatar-1.png" class="rounded-circle mr-1">
<div class="d-sm-none d-lg-inline-block">سلام مهدی</div></a>
<div class="dropdown-menu dropdown-menu-right text-right">
<div class="dropdown-title text-center">۵ دقیقه پیش لاگین کردین</div>
<a href="features-profile.html" class="dropdown-item has-icon">
<span>پروفایل</span>
<i class="far fa-user"></i>
</a>
<a href="features-activities.html" class="dropdown-item has-icon">
<span>فعالیت ها</span>
<i class="fas fa-bolt"></i>
</a>
<a href="features-settings.html" class="dropdown-item has-icon">
<span>تنظیمات</span>
<i class="fas fa-cog"></i>
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item has-icon text-danger">
<span>خروج</span>
<i class="fas fa-sign-out-alt"></i>
</a>
</div>
</li>
</ul>
</nav>
<div class="main-sidebar sidebar-style-2">
<aside id="sidebar-wrapper">
<div class="sidebar-brand">
<a href="index.html">مدیریت پاترونیک</a>
</div>
<div class="sidebar-brand sidebar-brand-sm">
<a href="index.html">مدیریت فروش</a>
</div>
<ul class="sidebar-menu">
<li class="menu-header">داشبورد</li>
<li class="dropdown active">
<a href="#" class="nav-link has-dropdown"><i class="fas fa-fire"></i><span>داشبورد</span></a>
<ul class="dropdown-menu">
<li class=active><a class="nav-link" href="index-0.html">داشبورد عمومی</a></li>
<li><a class="nav-link" href="index.html">داشبورد فروش محصولات</a></li>
</ul>
</li>
<li class="menu-header">امکانات بیشتر</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown" data-toggle="dropdown"><i class="fas fa-columns"></i> <span>صفحه بندی</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="layout-default.html">حالت پیش فرض</a></li>
<li><a class="nav-link" href="layout-transparent.html">سایدبار بدون رنگ</a></li>
<li><a class="nav-link" href="layout-top-navigation.html">نویگیشن بالا</a></li>
</ul>
</li>
<li><a class="nav-link" href="blank.html"><i class="far fa-square"></i> <span>صفحه خالی</span></a></li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="fas fa-th"></i> <span>بوت استرپ</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="bootstrap-alert.html">آلرت</a></li>
<li><a class="nav-link" href="bootstrap-badge.html">بدج</a></li>
<li><a class="nav-link" href="bootstrap-breadcrumb.html">بردکرامپ</a></li>
<li><a class="nav-link" href="bootstrap-buttons.html">دکمه ها</a></li>
<li><a class="nav-link" href="bootstrap-card.html">کارت</a></li>
<li><a class="nav-link" href="bootstrap-carousel.html">کروسل</a></li>
<li><a class="nav-link" href="bootstrap-collapse.html">کولاپس</a></li>
<li><a class="nav-link" href="bootstrap-dropdown.html">دراپ دون</a></li>
<li><a class="nav-link" href="bootstrap-form.html">فرم</a></li>
<li><a class="nav-link" href="bootstrap-list-group.html">لیست گروه</a></li>
<li><a class="nav-link" href="bootstrap-media-object.html">مدیا ابجکت</a></li>
<li><a class="nav-link" href="bootstrap-modal.html">مودال</a></li>
<li><a class="nav-link" href="bootstrap-nav.html">نویگیشن</a></li>
<li><a class="nav-link" href="bootstrap-navbar.html">نوبار</a></li>
<li><a class="nav-link" href="bootstrap-pagination.html">پجینیشن</a></li>
<li><a class="nav-link" href="bootstrap-popover.html">پاپ اور</a></li>
<li><a class="nav-link" href="bootstrap-progress.html">پراگرس</a></li>
<li><a class="nav-link" href="bootstrap-table.html">جدول</a></li>
<li><a class="nav-link" href="bootstrap-tooltip.html">تولتیپ</a></li>
<li><a class="nav-link" href="bootstrap-typography.html">تایپوگرافی</a></li>
</ul>
</li>
<li class="menu-header">امکانات دیگر</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="fas fa-th-large"></i> <span>کامپوننت ها</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="components-gallery.html">گالری</a></li>
<li><a class="nav-link" href="components-multiple-upload.html">مولتی آپلود</a></li>
<li><a class="nav-link" href="components-tab.html">تب</a></li>
<li><a class="nav-link" href="components-table.html">جدول</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="far fa-file-alt"></i> <span>فرم ها</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="forms-advanced-form.html">فرم پیشرفته</a></li>
<li><a class="nav-link" href="forms-editor.html">ویرایشگر</a></li>
<li><a class="nav-link" href="forms-validation.html">ولیدیشن</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="fas fa-plug"></i> <span>ماژول ها</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="modules-calendar.html">تقویم</a></li>
<li><a class="nav-link" href="modules-chartjs.html">چارت ها</a></li>
<li><a class="nav-link" href="modules-datatables.html">دیتاتیبل</a></li>
<li><a class="nav-link" href="modules-flag.html">پرچم</a></li>
<li><a class="nav-link" href="modules-font-awesome.html">فونت اوسوم</a></li>
<li><a class="nav-link" href="modules-ion-icons.html">ای او ن ایکون</a></li>
<li><a class="nav-link" href="modules-owl-carousel.html">اول کراسول</a></li>
<li><a class="nav-link" href="modules-sparkline.html">اسپارک لاین</a></li>
<li><a class="nav-link" href="modules-sweet-alert.html">سویت الرت</a></li>
<li><a class="nav-link" href="modules-toastr.html">توستر</a></li>
<li><a class="nav-link" href="modules-vector-map.html">وکتور مپ</a></li>
<li><a class="nav-link" href="modules-weather-icon.html">ایکن اب و هوا</a></li>
</ul>
</li>
<li class="menu-header">صفحات</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="far fa-user"></i> <span>ثبت نام</span></a>
<ul class="dropdown-menu">
<li><a href="auth-forgot-password.html">فراموشی کلمه عبور</a></li>
<li><a href="auth-login.html">لاگین</a></li>
<li><a href="auth-register.html">ثبت نام</a></li>
<li><a href="auth-reset-password.html">بازیابی کلمه عبور</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="fas fa-exclamation"></i> <span>خطاها</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="errors-503.html">503</a></li>
<li><a class="nav-link" href="errors-403.html">403</a></li>
<li><a class="nav-link" href="errors-404.html">404</a></li>
<li><a class="nav-link" href="errors-500.html">500</a></li>
</ul>
</li>
<li><a class="nav-link" href="credits.html"><i class="fas fa-pencil-ruler"></i> <span>سازنده ها</span></a></li>
</ul>
<div class="mt-4 mb-4 p-3 hide-sidebar-mini">
<a href="https://getstisla.com/docs" class="btn btn-primary btn-lg btn-block btn-icon-split">
<i class="fas fa-rocket"></i> مستندات قالب
</a>
</div>
</aside>
</div>
<!-- Main Content -->
<div class="main-content">
<section class="section">
<div class="section-header">
<h1>کارد</h1>
<div class="section-header-breadcrumb">
<div class="breadcrumb-item active"><a href="#">داشبورد</a></div>
<div class="breadcrumb-item"><a href="#">کامپوننت بوت استرپ</a></div>
<div class="breadcrumb-item">کارد</div>
</div>
</div>
<div class="section-body text-right">
<h2 class="section-title">کارد</h2>
<p class="section-lead">از کارد برای نمایش داده ها استفاده میشه.</p>
<div class="row">
<div class="col-12 col-md-6 col-lg-6">
<div class="card">
<div class="card-header">
<h4>عنوان کارت</h4>
</div>
<div class="card-body">
محتوای مربوط به کارت.
</div>
<div class="card-footer">
فوتر کارت
</div>
</div>
<div class="card">
<div class="card-header">
<h4>Card Action Button</h4>
</div>
<div class="card-body">
محتوای مربوط به کارت.
</div>
<div class="card-footer text-right">
<button class="btn btn-primary">Submit</button>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-6">
<div class="card">
<div class="card-header">
<h4 class="card-title">عنوان کارت</h4>
</div>
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>
<div class="card">
<div class="card-header">
<h4>Footer <code>bg-whitesmoke</code></h4>
</div>
<div class="card-body">
محتوای مربوط به کارت.
</div>
<div class="card-footer bg-whitesmoke">
فوتر کارت
</div>
</div>
</div>
</div>
<h2 class="section-title">Card Variants</h2>
<p class="section-lead">
Basically, the Bootstrap card can be given a color variant.
</p>
<div class="row">
<div class="col-12 col-md-6 col-lg-3">
<div class="card card-primary">
<div class="card-header">
<h4>هدر کارت</h4>
</div>
<div class="card-body">
<p>Card <code>.card-primary</code></p>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-3">
<div class="card card-secondary">
<div class="card-header">
<h4>هدر کارت</h4>
</div>
<div class="card-body">
<p>Card <code>.card-secondary</code></p>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-3">
<div class="card card-danger">
<div class="card-header">
<h4>هدر کارت</h4>
</div>
<div class="card-body">
<p>Card <code>.card-danger</code></p>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-3">
<div class="card card-warning">
<div class="card-header">
<h4>هدر کارت</h4>
</div>
<div class="card-body">
<p>Card <code>.card-warning</code></p>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-3">
<div class="card card-info">
<div class="card-header">
<h4>هدر کارت</h4>
</div>
<div class="card-body">
<p>Card <code>.card-info</code></p>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-3">
<div class="card card-success">
<div class="card-header">
<h4>هدر کارت</h4>
</div>
<div class="card-body">
<p>Card <code>.card-success</code></p>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-3">
<div class="card card-light">
<div class="card-header">
<h4>هدر کارت</h4>
</div>
<div class="card-body">
<p>Card <code>.card-light</code></p>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-3">
<div class="card card-dark">
<div class="card-header">
<h4>هدر کارت</h4>
</div>
<div class="card-body">
<p>Card <code>.card-dark</code></p>
</div>
</div>
</div>
</div>
<h2 class="section-title">Card Button &amp; Input</h2>
<p class="section-lead">
Also, you can give a button or input on the card header.
</p>
<div class="row">
<div class="col-12 col-md-6 col-lg-6">
<div class="card card-primary">
<div class="card-header">
<h4>هدر کارت</h4>
<div class="card-header-action">
<a href="#" class="btn btn-primary">
View All
</a>
</div>
</div>
<div class="card-body">
<p>Write something here</p>
</div>
</div>
<div class="card card-primary">
<div class="card-header">
<h4>Button Group</h4>
<div class="card-header-action">
<div class="btn-group">
<a href="#" class="btn btn-primary">Home</a>
<a href="#" class="btn btn-primary">Profile</a>
<a href="#" class="btn btn-primary">Setting</a>
</div>
</div>
</div>
<div class="card-body">
<p>Write something here</p>
</div>
</div>
<div class="card card-success">
<div class="card-header">
<h4>Input Text</h4>
<form class="card-header-form">
<input type="text" name="search" class="form-control" placeholder="Search">
</form>
</div>
<div class="card-body">
<p>Write something here</p>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-6">
<div class="card card-secondary">
<div class="card-header">
<h4>هدر کارت</h4>
<div class="card-header-action">
<a href="#" class="btn btn-primary">View All</a>
<a href="#" class="btn btn-danger">Delete All</a>
</div>
</div>
<div class="card-body">
<p>Write something here</p>
</div>
</div>
<div class="card card-danger">
<div class="card-header">
<h4>Dropdown Button</h4>
<div class="card-header-action">
<a href="#" class="btn btn-primary">View All</a>
<div class="dropdown">
<a href="#" data-toggle="dropdown" class="btn btn-warning dropdown-toggle">Options</a>
<div class="dropdown-menu">
<a href="#" class="dropdown-item has-icon"><i class="fas fa-eye"></i> View</a>
<a href="#" class="dropdown-item has-icon"><i class="far fa-edit"></i> Edit</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item has-icon text-danger"><i class="far fa-trash-alt"></i> Delete</a>
</div>
</div>
</div>
</div>
<div class="card-body">
<p>Write something here</p>
</div>
</div>
<div class="card card-warning">
<div class="card-header">
<h4>Input Button</h4>
<form class="card-header-form">
<div class="input-group">
<input type="text" name="search" class="form-control" placeholder="Search">
<div class="input-group-btn">
<button class="btn btn-primary btn-icon"><i class="fas fa-search"></i></button>
</div>
</div>
</form>
</div>
<div class="card-body">
<p>Write something here</p>
</div>
</div>
</div>
</div>
<h2 class="section-title">Functionality Card</h2>
<p class="section-lead">
You can provide functionality on the card.
</p>
<div class="row">
<div class="col-12 col-sm-6 col-lg-6">
<div class="card">
<div class="card-header">
<h4>Show/Hide</h4>
<div class="card-header-action">
<a data-collapse="#mycard-collapse" class="btn btn-icon btn-info" href="#"><i class="fas fa-minus"></i></a>
</div>
</div>
<div class="collapse show" id="mycard-collapse">
<div class="card-body">
You can show or hide this card.
</div>
<div class="card-footer">
Card Footer
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h4>My Picture</h4>
<div class="card-header-action">
<a href="#" class="btn btn-primary">View All</a>
</div>
</div>
<div class="card-body">
<div class="mb-2 text-muted">Click the picture below to see the magic!</div>
<div class="chocolat-parent">
<a href="../assets/img/example-image.jpg" class="chocolat-image" title="Just an example">
<div data-crop-image="285">
<img alt="image" src="../assets/img/example-image.jpg" class="img-fluid">
</div>
</a>
</div>
</div>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-6">
<div class="card" id="mycard-dimiss">
<div class="card-header">
<h4>Dismiss</h4>
<div class="card-header-action">
<a data-dismiss="#mycard-dimiss" class="btn btn-icon btn-danger" href="#"><i class="fas fa-times"></i></a>
</div>
</div>
<div class="card-body">
You can dimiss this card.
</div>
<div class="card-footer">
Card Footer
</div>
</div>
<div class="card" id="sample-login">
<form>
<div class="card-header">
<h4>لاگین</h4>
</div>
<div class="card-body pb-0">
<p class="text-muted">روی دکمه لاگین کلیک کنید تا کارت به حالت پراگرس تغییر کنه.</p>
<div class="form-group">
<label>نام کاربری</label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">
<i class="fas fa-envelope"></i>
</div>
</div>
<input type="text" class="form-control" placeholder="Email">
</div>
</div>
<div class="form-group">
<label>کلمه عبور</label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">
<i class="fas fa-lock"></i>
</div>
</div>
<input type="password" class="form-control" placeholder="Password">
</div>
</div>
<div class="form-group mb-0">
<div class="custom-control custom-checkbox">
<label class="custom-control-label" for="remember-me">من رو به یاد داشته باش</label>
<input type="checkbox" name="remember" class="custom-control-input" id="remember-me">
</div>
</div>
</div>
<div class="card-footer pt-">
<button type="submit" onclick="$.cardProgress('#sample-login', {dismiss: true,onDismiss: function() {alert('Dismissed :)')}});return false;" class="btn btn-primary">Login</button>
<a href="#" class="mr-2">حساب کاربری نداری؟</a>
</div>
</form>
</div>
</div>
</div>
<h2 class="section-title">کارتهای با قابلیت درگ دراپ</h2>
<p class="section-lead">
برای مرتب سازی کارتها میتونید آنها رو درگ دراپ کنید و بچینید.
</p>
<div class="row sortable-card">
<div class="col-12 col-md-6 col-lg-3">
<div class="card card-primary">
<div class="card-header">
<h4>هدر کارت</h4>
</div>
<div class="card-body">
<p>Card <code>.card-primary</code></p>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-3">
<div class="card card-secondary">
<div class="card-header">
<h4>هدر کارت</h4>
</div>
<div class="card-body">
<p>Card <code>.card-secondary</code></p>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-3">
<div class="card card-danger">
<div class="card-header">
<h4>هدر کارت</h4>
</div>
<div class="card-body">
<p>Card <code>.card-danger</code></p>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-3">
<div class="card card-warning">
<div class="card-header">
<h4>هدر کارت</h4>
</div>
<div class="card-body">
<p>Card <code>.card-warning</code></p>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<footer class="main-footer">
<div class="footer-left">
Copyright &copy; 2018 <div class="bullet"></div> Design By <a href="https://nauval.in/">Muhamad Nauval Azhar</a>
</div>
<div class="footer-right">
</div>
</footer>
</div>
</div>
<!-- General JS Scripts -->
<script src="../assets/modules/jquery.min.js"></script>
<script src="../assets/modules/popper.js"></script>
<script src="../assets/modules/tooltip.js"></script>
<script src="../assets/modules/bootstrap/js/bootstrap.min.js"></script>
<script src="../assets/modules/nicescroll/jquery.nicescroll.min.js"></script>
<script src="../assets/modules/moment.min.js"></script>
<script src="../assets/js/stisla.js"></script>
<!-- JS Libraies -->
<script src="../assets/modules/chocolat/dist/js/jquery.chocolat.min.js"></script>
<script src="../assets/modules/jquery-ui/jquery-ui.min.js"></script>
<!-- Page Specific JS File -->
<!-- Template JS File -->
<script src="../assets/js/scripts.js"></script>
<script src="../assets/js/custom.js"></script>
</body>
</html>

View File

@@ -0,0 +1,547 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no" name="viewport">
<title>Bootstrap Components &rsaquo; Carousel &mdash; Stisla</title>
<!-- General CSS Files -->
<link rel="stylesheet" href="../assets/modules/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="../assets/modules/fontawesome/css/all.min.css">
<!-- CSS Libraries -->
<!-- Template CSS -->
<link rel="stylesheet" href="../assets/css/style.css">
<link rel="stylesheet" href="../assets/css/components.css">
<link rel="stylesheet" href="../assets/css/rtl.css">
</head>
<body>
<div id="app">
<div class="main-wrapper main-wrapper-1">
<div class="navbar-bg"></div>
<nav class="navbar navbar-expand-lg main-navbar">
<form class="form-inline ml-auto">
<ul class="navbar-nav ml-3">
<li><a href="#" data-toggle="sidebar" class="nav-link nav-link-lg"><i class="fas fa-bars"></i></a></li>
<li><a href="#" data-toggle="search" class="nav-link nav-link-lg d-sm-none"><i class="fas fa-search"></i></a></li>
</ul>
<div class="search-element text-right">
<input class="form-control" type="search" placeholder="جستجو" aria-label="Search" data-width="250">
<button class="btn" type="submit"><i class="fas fa-search"></i></button>
<div class="search-backdrop"></div>
<div class="search-result">
<div class="search-header">
نتیجه جستجو
</div>
<div class="search-item">
<a href="#">چگونه ناسا رو هک کنیم؟</a>
<a href="#" class="search-close"><i class="fas fa-times"></i></a>
</div>
<div class="search-item">
<a href="#">Kodinger.com</a>
<a href="#" class="search-close"><i class="fas fa-times"></i></a>
</div>
<div class="search-item">
<a href="#">پنل مدیریت</a>
<a href="#" class="search-close"><i class="fas fa-times"></i></a>
</div>
<div class="search-header">
نتایج
</div>
<div class="search-item">
<a href="#">
<img class="ml-3 rounded" width="30" src="../assets/img/products/product-3-50.png" alt="product">
آیفون s9 تولید شد
</a>
</div>
<div class="search-item">
<a href="#">
<img class="ml-3 rounded" width="30" src="../assets/img/products/product-2-50.png" alt="product">
چه شادی هایی که زیر پای انسانها سرکوب شدند
</a>
</div>
<div class="search-item">
<a href="#">
<img class="ml-3 rounded" width="30" src="../assets/img/products/product-1-50.png" alt="product">
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ.
</a>
</div>
<div class="search-header">
پروژه ها
</div>
<div class="search-item">
<a href="#">
<div class="search-icon bg-danger text-white ml-3">
<i class="fas fa-code"></i>
</div>
متریال ادمین پنل
</a>
</div>
<div class="search-item">
<a href="#">
<div class="search-icon bg-primary text-white ml-3">
<i class="fas fa-laptop"></i>
</div>
ایجاد صفحه لندینگ
</a>
</div>
</div>
</div>
</form>
<ul class="navbar-nav navbar-right">
<li class="dropdown dropdown-list-toggle"><a href="#" data-toggle="dropdown" class="nav-link nav-link-lg message-toggle beep"><i class="far fa-envelope"></i></a>
<div class="dropdown-menu dropdown-list text-right dropdown-menu-left">
<div class="dropdown-header">پیام ها
<div class="float-left">
<a href="#">علامتگذاری همه بصورت خوانده شده</a>
</div>
</div>
<div class="dropdown-list-content dropdown-list-message">
<a href="#" class="dropdown-item dropdown-item-unread">
<div class="dropdown-item-avatar">
<img alt="image" src="../assets/img/avatar/avatar-1.png" class="rounded-circle">
<div class="is-online"></div>
</div>
<div class="dropdown-item-desc text-right">
<b>مهدی خانزادی</b>
<p>سلام داداچ!</p>
<div class="time">۱۰ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item dropdown-item-unread">
<div class="dropdown-item-avatar">
<img alt="image" src="../assets/img/avatar/avatar-2.png" class="rounded-circle">
</div>
<div class="dropdown-item-desc">
<b>مهیار انصاری</b>
<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ.</p>
<div class="time">۱۲ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item dropdown-item-unread">
<div class="dropdown-item-avatar">
<img alt="image" src="../assets/img/avatar/avatar-3.png" class="rounded-circle">
<div class="is-online"></div>
</div>
<div class="dropdown-item-desc">
<b>آمیتا پاچان</b>
<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ.</p>
<div class="time">۱۲ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-avatar">
<img alt="image" src="../assets/img/avatar/avatar-4.png" class="rounded-circle">
</div>
<div class="dropdown-item-desc">
<b>مهدی خانزادی</b>
<p>سلام سیستم پشتیبانی پاترونیک رو استفاده کنید</p>
<div class="time">۱۶ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-avatar">
<img alt="image" src="../assets/img/avatar/avatar-5.png" class="rounded-circle">
</div>
<div class="dropdown-item-desc">
<b>لورم ایپسوم</b>
<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ.</p>
<div class="time">دیروز</div>
</div>
</a>
</div>
<div class="dropdown-footer text-center">
<a href="#"> دیدن همه پیام ها<i class="fas fa-chevron-left"></i></a>
</div>
</div>
</li>
<li class="dropdown dropdown-list-toggle"><a href="#" data-toggle="dropdown" class="nav-link notification-toggle nav-link-lg beep"><i class="far fa-bell"></i></a>
<div class="dropdown-menu dropdown-list dropdown-menu-left">
<div class="dropdown-header text-right">نوتیفیکیشن ها
<div class="float-left">
<a href="#"> علامتگذاری همه بصورت خوانده شده</a>
</div>
</div>
<div class="dropdown-list-content dropdown-list-icons text-right">
<a href="#" class="dropdown-item dropdown-item-unread">
<div class="dropdown-item-icon bg-primary text-white">
<i class="fas fa-code"></i>
</div>
<div class="dropdown-item-desc">
قالب مدیریتی متریال اپدیت جدید داد!
<div class="time text-primary">۲ دقیقه پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-icon bg-info text-white">
<i class="far fa-user"></i>
</div>
<div class="dropdown-item-desc">
<b>شما</b> و <b>مهیار انصاری</b> هم اکنون همکار هستید.
<div class="time">۱۰ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-icon bg-success text-white">
<i class="fas fa-check"></i>
</div>
<div class="dropdown-item-desc">
<b>مهدی خانزادی</b> اطلاعات مرتبط با <b>قالب</b> را <b>آپلود کرد.</b>
<div class="time">۱۲ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-icon bg-danger text-white">
<i class="fas fa-exclamation-triangle"></i>
</div>
<div class="dropdown-item-desc">
فضای هارد دیسک پر شده است لطفا آن را خالی کنید.
<div class="time">۱۷ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-icon bg-info text-white">
<i class="fas fa-bell"></i>
</div>
<div class="dropdown-item-desc">
به قالب متریال خوش آمدید
<div class="time">دیروز</div>
</div>
</a>
</div>
<div class="dropdown-footer text-center">
<a href="#">
<span>نمایش همه</span>
<i class="fas fa-chevron-left"></i>
</a>
</div>
</div>
</li>
<li class="dropdown"><a href="#" data-toggle="dropdown" class="nav-link dropdown-toggle nav-link-lg nav-link-user">
<img alt="image" src="../assets/img/avatar/avatar-1.png" class="rounded-circle mr-1">
<div class="d-sm-none d-lg-inline-block">سلام مهدی</div></a>
<div class="dropdown-menu dropdown-menu-right text-right">
<div class="dropdown-title text-center">۵ دقیقه پیش لاگین کردین</div>
<a href="features-profile.html" class="dropdown-item has-icon">
<span>پروفایل</span>
<i class="far fa-user"></i>
</a>
<a href="features-activities.html" class="dropdown-item has-icon">
<span>فعالیت ها</span>
<i class="fas fa-bolt"></i>
</a>
<a href="features-settings.html" class="dropdown-item has-icon">
<span>تنظیمات</span>
<i class="fas fa-cog"></i>
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item has-icon text-danger">
<span>خروج</span>
<i class="fas fa-sign-out-alt"></i>
</a>
</div>
</li>
</ul>
</nav>
<div class="main-sidebar sidebar-style-2">
<aside id="sidebar-wrapper">
<div class="sidebar-brand">
<a href="index.html">مدیریت پاترونیک</a>
</div>
<div class="sidebar-brand sidebar-brand-sm">
<a href="index.html">مدیریت فروش</a>
</div>
<ul class="sidebar-menu">
<li class="menu-header">داشبورد</li>
<li class="dropdown active">
<a href="#" class="nav-link has-dropdown"><i class="fas fa-fire"></i><span>داشبورد</span></a>
<ul class="dropdown-menu">
<li class=active><a class="nav-link" href="index-0.html">داشبورد عمومی</a></li>
<li><a class="nav-link" href="index.html">داشبورد فروش محصولات</a></li>
</ul>
</li>
<li class="menu-header">امکانات بیشتر</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown" data-toggle="dropdown"><i class="fas fa-columns"></i> <span>صفحه بندی</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="layout-default.html">حالت پیش فرض</a></li>
<li><a class="nav-link" href="layout-transparent.html">سایدبار بدون رنگ</a></li>
<li><a class="nav-link" href="layout-top-navigation.html">نویگیشن بالا</a></li>
</ul>
</li>
<li><a class="nav-link" href="blank.html"><i class="far fa-square"></i> <span>صفحه خالی</span></a></li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="fas fa-th"></i> <span>بوت استرپ</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="bootstrap-alert.html">آلرت</a></li>
<li><a class="nav-link" href="bootstrap-badge.html">بدج</a></li>
<li><a class="nav-link" href="bootstrap-breadcrumb.html">بردکرامپ</a></li>
<li><a class="nav-link" href="bootstrap-buttons.html">دکمه ها</a></li>
<li><a class="nav-link" href="bootstrap-card.html">کارت</a></li>
<li><a class="nav-link" href="bootstrap-carousel.html">کروسل</a></li>
<li><a class="nav-link" href="bootstrap-collapse.html">کولاپس</a></li>
<li><a class="nav-link" href="bootstrap-dropdown.html">دراپ دون</a></li>
<li><a class="nav-link" href="bootstrap-form.html">فرم</a></li>
<li><a class="nav-link" href="bootstrap-list-group.html">لیست گروه</a></li>
<li><a class="nav-link" href="bootstrap-media-object.html">مدیا ابجکت</a></li>
<li><a class="nav-link" href="bootstrap-modal.html">مودال</a></li>
<li><a class="nav-link" href="bootstrap-nav.html">نویگیشن</a></li>
<li><a class="nav-link" href="bootstrap-navbar.html">نوبار</a></li>
<li><a class="nav-link" href="bootstrap-pagination.html">پجینیشن</a></li>
<li><a class="nav-link" href="bootstrap-popover.html">پاپ اور</a></li>
<li><a class="nav-link" href="bootstrap-progress.html">پراگرس</a></li>
<li><a class="nav-link" href="bootstrap-table.html">جدول</a></li>
<li><a class="nav-link" href="bootstrap-tooltip.html">تولتیپ</a></li>
<li><a class="nav-link" href="bootstrap-typography.html">تایپوگرافی</a></li>
</ul>
</li>
<li class="menu-header">امکانات دیگر</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="fas fa-th-large"></i> <span>کامپوننت ها</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="components-gallery.html">گالری</a></li>
<li><a class="nav-link" href="components-multiple-upload.html">مولتی آپلود</a></li>
<li><a class="nav-link" href="components-tab.html">تب</a></li>
<li><a class="nav-link" href="components-table.html">جدول</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="far fa-file-alt"></i> <span>فرم ها</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="forms-advanced-form.html">فرم پیشرفته</a></li>
<li><a class="nav-link" href="forms-editor.html">ویرایشگر</a></li>
<li><a class="nav-link" href="forms-validation.html">ولیدیشن</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="fas fa-plug"></i> <span>ماژول ها</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="modules-calendar.html">تقویم</a></li>
<li><a class="nav-link" href="modules-chartjs.html">چارت ها</a></li>
<li><a class="nav-link" href="modules-datatables.html">دیتاتیبل</a></li>
<li><a class="nav-link" href="modules-flag.html">پرچم</a></li>
<li><a class="nav-link" href="modules-font-awesome.html">فونت اوسوم</a></li>
<li><a class="nav-link" href="modules-ion-icons.html">ای او ن ایکون</a></li>
<li><a class="nav-link" href="modules-owl-carousel.html">اول کراسول</a></li>
<li><a class="nav-link" href="modules-sparkline.html">اسپارک لاین</a></li>
<li><a class="nav-link" href="modules-sweet-alert.html">سویت الرت</a></li>
<li><a class="nav-link" href="modules-toastr.html">توستر</a></li>
<li><a class="nav-link" href="modules-vector-map.html">وکتور مپ</a></li>
<li><a class="nav-link" href="modules-weather-icon.html">ایکن اب و هوا</a></li>
</ul>
</li>
<li class="menu-header">صفحات</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="far fa-user"></i> <span>ثبت نام</span></a>
<ul class="dropdown-menu">
<li><a href="auth-forgot-password.html">فراموشی کلمه عبور</a></li>
<li><a href="auth-login.html">لاگین</a></li>
<li><a href="auth-register.html">ثبت نام</a></li>
<li><a href="auth-reset-password.html">بازیابی کلمه عبور</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="fas fa-exclamation"></i> <span>خطاها</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="errors-503.html">503</a></li>
<li><a class="nav-link" href="errors-403.html">403</a></li>
<li><a class="nav-link" href="errors-404.html">404</a></li>
<li><a class="nav-link" href="errors-500.html">500</a></li>
</ul>
</li>
<li><a class="nav-link" href="credits.html"><i class="fas fa-pencil-ruler"></i> <span>سازنده ها</span></a></li>
</ul>
<div class="mt-4 mb-4 p-3 hide-sidebar-mini">
<a href="https://getstisla.com/docs" class="btn btn-primary btn-lg btn-block btn-icon-split">
<i class="fas fa-rocket"></i> مستندات قالب
</a>
</div>
</aside>
</div>
<!-- Main Content -->
<div class="main-content">
<section class="section">
<div class="section-header">
<h1>کاروسل</h1>
<div class="section-header-breadcrumb">
<div class="breadcrumb-item active"><a href="#">داشبورد</a></div>
<div class="breadcrumb-item"><a href="#">کامپوننت بوت استرپ</a></div>
<div class="breadcrumb-item">کاروسل</div>
</div>
</div>
<div class="section-body text-right">
<h2 class="section-title">کاروسل</h2>
<p class="section-lead">کاروسل برای ساخت اسلاید استفاده میشه. همچنین قابلیت تاچ کردن نیز داره.</p>
<div class="row">
<div class="col-12 col-md-6 col-lg-6">
<div class="card">
<div class="card-header">
<h4>Simple</h4>
</div>
<div class="card-body">
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="../assets/img/news/img01.jpg" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="../assets/img/news/img07.jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="../assets/img/news/img08.jpg" alt="Third slide">
</div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h4>Navigation &amp; Indicator</h4>
</div>
<div class="card-body">
<div id="carouselExampleIndicators3" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators3" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators3" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators3" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="../assets/img/news/img01.jpg" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="../assets/img/news/img07.jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="../assets/img/news/img08.jpg" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators3" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators3" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-6">
<div class="card">
<div class="card-header">
<h4>Caption</h4>
</div>
<div class="card-body">
<div id="carouselExampleIndicators2" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators2" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators2" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators2" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="../assets/img/news/img01.jpg" alt="First slide">
<div class="carousel-caption d-none d-md-block">
<h5>Heading</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="../assets/img/news/img07.jpg" alt="Second slide">
<div class="carousel-caption d-none d-md-block">
<h5>Heading</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="../assets/img/news/img08.jpg" alt="Third slide">
<div class="carousel-caption d-none d-md-block">
<h5>Heading</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators2" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators2" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h4>Crossfade</h4>
</div>
<div class="card-body">
<div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="../assets/img/news/img01.jpg" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="../assets/img/news/img07.jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="../assets/img/news/img08.jpg" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleFade" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleFade" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<footer class="main-footer">
<div class="footer-left">
Copyright &copy; 2018 <div class="bullet"></div> Design By <a href="https://nauval.in/">Muhamad Nauval Azhar</a>
</div>
<div class="footer-right">
</div>
</footer>
</div>
</div>
<!-- General JS Scripts -->
<script src="../assets/modules/jquery.min.js"></script>
<script src="../assets/modules/popper.js"></script>
<script src="../assets/modules/tooltip.js"></script>
<script src="../assets/modules/bootstrap/js/bootstrap.min.js"></script>
<script src="../assets/modules/nicescroll/jquery.nicescroll.min.js"></script>
<script src="../assets/modules/moment.min.js"></script>
<script src="../assets/js/stisla.js"></script>
<!-- JS Libraies -->
<!-- Page Specific JS File -->
<!-- Template JS File -->
<script src="../assets/js/scripts.js"></script>
<script src="../assets/js/custom.js"></script>
</body>
</html>

View File

@@ -0,0 +1,523 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no" name="viewport">
<title>Bootstrap Components &rsaquo; Collapse &mdash; Stisla</title>
<!-- General CSS Files -->
<link rel="stylesheet" href="../assets/modules/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="../assets/modules/fontawesome/css/all.min.css">
<!-- CSS Libraries -->
<!-- Template CSS -->
<link rel="stylesheet" href="../assets/css/style.css">
<link rel="stylesheet" href="../assets/css/components.css">
<link rel="stylesheet" href="../assets/css/rtl.css">
</head>
<body>
<div id="app">
<div class="main-wrapper main-wrapper-1">
<div class="navbar-bg"></div>
<nav class="navbar navbar-expand-lg main-navbar">
<form class="form-inline ml-auto">
<ul class="navbar-nav ml-3">
<li><a href="#" data-toggle="sidebar" class="nav-link nav-link-lg"><i class="fas fa-bars"></i></a></li>
<li><a href="#" data-toggle="search" class="nav-link nav-link-lg d-sm-none"><i class="fas fa-search"></i></a></li>
</ul>
<div class="search-element text-right">
<input class="form-control" type="search" placeholder="جستجو" aria-label="Search" data-width="250">
<button class="btn" type="submit"><i class="fas fa-search"></i></button>
<div class="search-backdrop"></div>
<div class="search-result">
<div class="search-header">
نتیجه جستجو
</div>
<div class="search-item">
<a href="#">چگونه ناسا رو هک کنیم؟</a>
<a href="#" class="search-close"><i class="fas fa-times"></i></a>
</div>
<div class="search-item">
<a href="#">Kodinger.com</a>
<a href="#" class="search-close"><i class="fas fa-times"></i></a>
</div>
<div class="search-item">
<a href="#">پنل مدیریت</a>
<a href="#" class="search-close"><i class="fas fa-times"></i></a>
</div>
<div class="search-header">
نتایج
</div>
<div class="search-item">
<a href="#">
<img class="ml-3 rounded" width="30" src="../assets/img/products/product-3-50.png" alt="product">
آیفون s9 تولید شد
</a>
</div>
<div class="search-item">
<a href="#">
<img class="ml-3 rounded" width="30" src="../assets/img/products/product-2-50.png" alt="product">
چه شادی هایی که زیر پای انسانها سرکوب شدند
</a>
</div>
<div class="search-item">
<a href="#">
<img class="ml-3 rounded" width="30" src="../assets/img/products/product-1-50.png" alt="product">
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ.
</a>
</div>
<div class="search-header">
پروژه ها
</div>
<div class="search-item">
<a href="#">
<div class="search-icon bg-danger text-white ml-3">
<i class="fas fa-code"></i>
</div>
متریال ادمین پنل
</a>
</div>
<div class="search-item">
<a href="#">
<div class="search-icon bg-primary text-white ml-3">
<i class="fas fa-laptop"></i>
</div>
ایجاد صفحه لندینگ
</a>
</div>
</div>
</div>
</form>
<ul class="navbar-nav navbar-right">
<li class="dropdown dropdown-list-toggle"><a href="#" data-toggle="dropdown" class="nav-link nav-link-lg message-toggle beep"><i class="far fa-envelope"></i></a>
<div class="dropdown-menu dropdown-list text-right dropdown-menu-left">
<div class="dropdown-header">پیام ها
<div class="float-left">
<a href="#">علامتگذاری همه بصورت خوانده شده</a>
</div>
</div>
<div class="dropdown-list-content dropdown-list-message">
<a href="#" class="dropdown-item dropdown-item-unread">
<div class="dropdown-item-avatar">
<img alt="image" src="../assets/img/avatar/avatar-1.png" class="rounded-circle">
<div class="is-online"></div>
</div>
<div class="dropdown-item-desc text-right">
<b>مهدی خانزادی</b>
<p>سلام داداچ!</p>
<div class="time">۱۰ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item dropdown-item-unread">
<div class="dropdown-item-avatar">
<img alt="image" src="../assets/img/avatar/avatar-2.png" class="rounded-circle">
</div>
<div class="dropdown-item-desc">
<b>مهیار انصاری</b>
<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ.</p>
<div class="time">۱۲ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item dropdown-item-unread">
<div class="dropdown-item-avatar">
<img alt="image" src="../assets/img/avatar/avatar-3.png" class="rounded-circle">
<div class="is-online"></div>
</div>
<div class="dropdown-item-desc">
<b>آمیتا پاچان</b>
<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ.</p>
<div class="time">۱۲ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-avatar">
<img alt="image" src="../assets/img/avatar/avatar-4.png" class="rounded-circle">
</div>
<div class="dropdown-item-desc">
<b>مهدی خانزادی</b>
<p>سلام سیستم پشتیبانی پاترونیک رو استفاده کنید</p>
<div class="time">۱۶ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-avatar">
<img alt="image" src="../assets/img/avatar/avatar-5.png" class="rounded-circle">
</div>
<div class="dropdown-item-desc">
<b>لورم ایپسوم</b>
<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ.</p>
<div class="time">دیروز</div>
</div>
</a>
</div>
<div class="dropdown-footer text-center">
<a href="#"> دیدن همه پیام ها<i class="fas fa-chevron-left"></i></a>
</div>
</div>
</li>
<li class="dropdown dropdown-list-toggle"><a href="#" data-toggle="dropdown" class="nav-link notification-toggle nav-link-lg beep"><i class="far fa-bell"></i></a>
<div class="dropdown-menu dropdown-list dropdown-menu-left">
<div class="dropdown-header text-right">نوتیفیکیشن ها
<div class="float-left">
<a href="#"> علامتگذاری همه بصورت خوانده شده</a>
</div>
</div>
<div class="dropdown-list-content dropdown-list-icons text-right">
<a href="#" class="dropdown-item dropdown-item-unread">
<div class="dropdown-item-icon bg-primary text-white">
<i class="fas fa-code"></i>
</div>
<div class="dropdown-item-desc">
قالب مدیریتی متریال اپدیت جدید داد!
<div class="time text-primary">۲ دقیقه پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-icon bg-info text-white">
<i class="far fa-user"></i>
</div>
<div class="dropdown-item-desc">
<b>شما</b> و <b>مهیار انصاری</b> هم اکنون همکار هستید.
<div class="time">۱۰ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-icon bg-success text-white">
<i class="fas fa-check"></i>
</div>
<div class="dropdown-item-desc">
<b>مهدی خانزادی</b> اطلاعات مرتبط با <b>قالب</b> را <b>آپلود کرد.</b>
<div class="time">۱۲ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-icon bg-danger text-white">
<i class="fas fa-exclamation-triangle"></i>
</div>
<div class="dropdown-item-desc">
فضای هارد دیسک پر شده است لطفا آن را خالی کنید.
<div class="time">۱۷ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-icon bg-info text-white">
<i class="fas fa-bell"></i>
</div>
<div class="dropdown-item-desc">
به قالب متریال خوش آمدید
<div class="time">دیروز</div>
</div>
</a>
</div>
<div class="dropdown-footer text-center">
<a href="#">
<span>نمایش همه</span>
<i class="fas fa-chevron-left"></i>
</a>
</div>
</div>
</li>
<li class="dropdown"><a href="#" data-toggle="dropdown" class="nav-link dropdown-toggle nav-link-lg nav-link-user">
<img alt="image" src="../assets/img/avatar/avatar-1.png" class="rounded-circle mr-1">
<div class="d-sm-none d-lg-inline-block">سلام مهدی</div></a>
<div class="dropdown-menu dropdown-menu-right text-right">
<div class="dropdown-title text-center">۵ دقیقه پیش لاگین کردین</div>
<a href="features-profile.html" class="dropdown-item has-icon">
<span>پروفایل</span>
<i class="far fa-user"></i>
</a>
<a href="features-activities.html" class="dropdown-item has-icon">
<span>فعالیت ها</span>
<i class="fas fa-bolt"></i>
</a>
<a href="features-settings.html" class="dropdown-item has-icon">
<span>تنظیمات</span>
<i class="fas fa-cog"></i>
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item has-icon text-danger">
<span>خروج</span>
<i class="fas fa-sign-out-alt"></i>
</a>
</div>
</li>
</ul>
</nav>
<div class="main-sidebar sidebar-style-2">
<aside id="sidebar-wrapper">
<div class="sidebar-brand">
<a href="index.html">مدیریت پاترونیک</a>
</div>
<div class="sidebar-brand sidebar-brand-sm">
<a href="index.html">مدیریت فروش</a>
</div>
<ul class="sidebar-menu">
<li class="menu-header">داشبورد</li>
<li class="dropdown active">
<a href="#" class="nav-link has-dropdown"><i class="fas fa-fire"></i><span>داشبورد</span></a>
<ul class="dropdown-menu">
<li class=active><a class="nav-link" href="index-0.html">داشبورد عمومی</a></li>
<li><a class="nav-link" href="index.html">داشبورد فروش محصولات</a></li>
</ul>
</li>
<li class="menu-header">امکانات بیشتر</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown" data-toggle="dropdown"><i class="fas fa-columns"></i> <span>صفحه بندی</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="layout-default.html">حالت پیش فرض</a></li>
<li><a class="nav-link" href="layout-transparent.html">سایدبار بدون رنگ</a></li>
<li><a class="nav-link" href="layout-top-navigation.html">نویگیشن بالا</a></li>
</ul>
</li>
<li><a class="nav-link" href="blank.html"><i class="far fa-square"></i> <span>صفحه خالی</span></a></li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="fas fa-th"></i> <span>بوت استرپ</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="bootstrap-alert.html">آلرت</a></li>
<li><a class="nav-link" href="bootstrap-badge.html">بدج</a></li>
<li><a class="nav-link" href="bootstrap-breadcrumb.html">بردکرامپ</a></li>
<li><a class="nav-link" href="bootstrap-buttons.html">دکمه ها</a></li>
<li><a class="nav-link" href="bootstrap-card.html">کارت</a></li>
<li><a class="nav-link" href="bootstrap-carousel.html">کروسل</a></li>
<li><a class="nav-link" href="bootstrap-collapse.html">کولاپس</a></li>
<li><a class="nav-link" href="bootstrap-dropdown.html">دراپ دون</a></li>
<li><a class="nav-link" href="bootstrap-form.html">فرم</a></li>
<li><a class="nav-link" href="bootstrap-list-group.html">لیست گروه</a></li>
<li><a class="nav-link" href="bootstrap-media-object.html">مدیا ابجکت</a></li>
<li><a class="nav-link" href="bootstrap-modal.html">مودال</a></li>
<li><a class="nav-link" href="bootstrap-nav.html">نویگیشن</a></li>
<li><a class="nav-link" href="bootstrap-navbar.html">نوبار</a></li>
<li><a class="nav-link" href="bootstrap-pagination.html">پجینیشن</a></li>
<li><a class="nav-link" href="bootstrap-popover.html">پاپ اور</a></li>
<li><a class="nav-link" href="bootstrap-progress.html">پراگرس</a></li>
<li><a class="nav-link" href="bootstrap-table.html">جدول</a></li>
<li><a class="nav-link" href="bootstrap-tooltip.html">تولتیپ</a></li>
<li><a class="nav-link" href="bootstrap-typography.html">تایپوگرافی</a></li>
</ul>
</li>
<li class="menu-header">امکانات دیگر</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="fas fa-th-large"></i> <span>کامپوننت ها</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="components-gallery.html">گالری</a></li>
<li><a class="nav-link" href="components-multiple-upload.html">مولتی آپلود</a></li>
<li><a class="nav-link" href="components-tab.html">تب</a></li>
<li><a class="nav-link" href="components-table.html">جدول</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="far fa-file-alt"></i> <span>فرم ها</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="forms-advanced-form.html">فرم پیشرفته</a></li>
<li><a class="nav-link" href="forms-editor.html">ویرایشگر</a></li>
<li><a class="nav-link" href="forms-validation.html">ولیدیشن</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="fas fa-plug"></i> <span>ماژول ها</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="modules-calendar.html">تقویم</a></li>
<li><a class="nav-link" href="modules-chartjs.html">چارت ها</a></li>
<li><a class="nav-link" href="modules-datatables.html">دیتاتیبل</a></li>
<li><a class="nav-link" href="modules-flag.html">پرچم</a></li>
<li><a class="nav-link" href="modules-font-awesome.html">فونت اوسوم</a></li>
<li><a class="nav-link" href="modules-ion-icons.html">ای او ن ایکون</a></li>
<li><a class="nav-link" href="modules-owl-carousel.html">اول کراسول</a></li>
<li><a class="nav-link" href="modules-sparkline.html">اسپارک لاین</a></li>
<li><a class="nav-link" href="modules-sweet-alert.html">سویت الرت</a></li>
<li><a class="nav-link" href="modules-toastr.html">توستر</a></li>
<li><a class="nav-link" href="modules-vector-map.html">وکتور مپ</a></li>
<li><a class="nav-link" href="modules-weather-icon.html">ایکن اب و هوا</a></li>
</ul>
</li>
<li class="menu-header">صفحات</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="far fa-user"></i> <span>ثبت نام</span></a>
<ul class="dropdown-menu">
<li><a href="auth-forgot-password.html">فراموشی کلمه عبور</a></li>
<li><a href="auth-login.html">لاگین</a></li>
<li><a href="auth-register.html">ثبت نام</a></li>
<li><a href="auth-reset-password.html">بازیابی کلمه عبور</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="fas fa-exclamation"></i> <span>خطاها</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="errors-503.html">503</a></li>
<li><a class="nav-link" href="errors-403.html">403</a></li>
<li><a class="nav-link" href="errors-404.html">404</a></li>
<li><a class="nav-link" href="errors-500.html">500</a></li>
</ul>
</li>
<li><a class="nav-link" href="credits.html"><i class="fas fa-pencil-ruler"></i> <span>سازنده ها</span></a></li>
</ul>
<div class="mt-4 mb-4 p-3 hide-sidebar-mini">
<a href="https://getstisla.com/docs" class="btn btn-primary btn-lg btn-block btn-icon-split">
<i class="fas fa-rocket"></i> مستندات قالب
</a>
</div>
</aside>
</div>
<!-- Main Content -->
<div class="main-content">
<section class="section">
<div class="section-header">
<h1>کالپس</h1>
<div class="section-header-breadcrumb">
<div class="breadcrumb-item active"><a href="#">داشبورد</a></div>
<div class="breadcrumb-item"><a href="#">کامپوننت بوت استرپ</a></div>
<div class="breadcrumb-item">کالپس</div>
</div>
</div>
<div class="section-body text-right">
<h2 class="section-title">کالپس</h2>
<p class="section-lead">اینجا کالپس رو میتونید ببینید</p>
<div class="row">
<div class="col-12 col-md-6 col-lg-6">
<div class="card">
<div class="card-header">
<h4>Simple</h4>
</div>
<div class="card-body">
<p>
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
Link with href
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Button with data-target
</button>
</p>
<div class="collapse" id="collapseExample">
<p>
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
</p>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h4>Multiple Targets</h4>
</div>
<div class="card-body">
<p class="buttons">
<a class="btn btn-primary" data-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements</button>
</p>
<div class="row">
<div class="col">
<div class="collapse multi-collapse" id="multiCollapseExample1">
<p>
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
</p>
</div>
</div>
<div class="col">
<div class="collapse multi-collapse" id="multiCollapseExample2">
<p>
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-6">
<div class="card">
<div class="card-header">
<h4>Accordion</h4>
</div>
<div class="card-body">
<div id="accordion">
<div class="accordion">
<div class="accordion-header" role="button" data-toggle="collapse" data-target="#panel-body-1" aria-expanded="true">
<h4>Panel 1</h4>
</div>
<div class="accordion-body collapse show" id="panel-body-1" data-parent="#accordion">
<p class="mb-0">لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با
استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون
و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف
بهبود ابزارهای کاربردی می باشد. کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده
شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای
طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد.
در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و
شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و
جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.</p>
</div>
</div>
<div class="accordion">
<div class="accordion-header" role="button" data-toggle="collapse" data-target="#panel-body-2">
<h4>Panel 2</h4>
</div>
<div class="accordion-body collapse" id="panel-body-2" data-parent="#accordion">
<p class="mb-0">لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با
استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون
و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف
بهبود ابزارهای کاربردی می باشد. کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده
شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای
طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد.
در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و
شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و
جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.</p>
</div>
</div>
<div class="accordion">
<div class="accordion-header" role="button" data-toggle="collapse" data-target="#panel-body-3">
<h4>Panel 3</h4>
</div>
<div class="accordion-body collapse" id="panel-body-3" data-parent="#accordion">
<p class="mb-0">لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با
استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون
و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف
بهبود ابزارهای کاربردی می باشد. کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده
شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای
طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد.
در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و
شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و
جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<footer class="main-footer">
<div class="footer-left">
Copyright &copy; 2018 <div class="bullet"></div> Design By <a href="https://nauval.in/">Muhamad Nauval Azhar</a>
</div>
<div class="footer-right">
</div>
</footer>
</div>
</div>
<!-- General JS Scripts -->
<script src="../assets/modules/jquery.min.js"></script>
<script src="../assets/modules/popper.js"></script>
<script src="../assets/modules/tooltip.js"></script>
<script src="../assets/modules/bootstrap/js/bootstrap.min.js"></script>
<script src="../assets/modules/nicescroll/jquery.nicescroll.min.js"></script>
<script src="../assets/modules/moment.min.js"></script>
<script src="../assets/js/stisla.js"></script>
<!-- JS Libraies -->
<!-- Page Specific JS File -->
<!-- Template JS File -->
<script src="../assets/js/scripts.js"></script>
<script src="../assets/js/custom.js"></script>
</body>
</html>

View File

@@ -0,0 +1,598 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no" name="viewport">
<title>Bootstrap Components &rsaquo; Dropdown &mdash; Stisla</title>
<!-- General CSS Files -->
<link rel="stylesheet" href="../assets/modules/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="../assets/modules/fontawesome/css/all.min.css">
<!-- CSS Libraries -->
<!-- Template CSS -->
<link rel="stylesheet" href="../assets/css/style.css">
<link rel="stylesheet" href="../assets/css/components.css">
<link rel="stylesheet" href="../assets/css/rtl.css">
</head>
<body>
<div id="app">
<div class="main-wrapper main-wrapper-1">
<div class="navbar-bg"></div>
<nav class="navbar navbar-expand-lg main-navbar">
<form class="form-inline ml-auto">
<ul class="navbar-nav ml-3">
<li><a href="#" data-toggle="sidebar" class="nav-link nav-link-lg"><i class="fas fa-bars"></i></a></li>
<li><a href="#" data-toggle="search" class="nav-link nav-link-lg d-sm-none"><i class="fas fa-search"></i></a></li>
</ul>
<div class="search-element text-right">
<input class="form-control" type="search" placeholder="جستجو" aria-label="Search" data-width="250">
<button class="btn" type="submit"><i class="fas fa-search"></i></button>
<div class="search-backdrop"></div>
<div class="search-result">
<div class="search-header">
نتیجه جستجو
</div>
<div class="search-item">
<a href="#">چگونه ناسا رو هک کنیم؟</a>
<a href="#" class="search-close"><i class="fas fa-times"></i></a>
</div>
<div class="search-item">
<a href="#">Kodinger.com</a>
<a href="#" class="search-close"><i class="fas fa-times"></i></a>
</div>
<div class="search-item">
<a href="#">پنل مدیریت</a>
<a href="#" class="search-close"><i class="fas fa-times"></i></a>
</div>
<div class="search-header">
نتایج
</div>
<div class="search-item">
<a href="#">
<img class="ml-3 rounded" width="30" src="../assets/img/products/product-3-50.png" alt="product">
آیفون s9 تولید شد
</a>
</div>
<div class="search-item">
<a href="#">
<img class="ml-3 rounded" width="30" src="../assets/img/products/product-2-50.png" alt="product">
چه شادی هایی که زیر پای انسانها سرکوب شدند
</a>
</div>
<div class="search-item">
<a href="#">
<img class="ml-3 rounded" width="30" src="../assets/img/products/product-1-50.png" alt="product">
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ.
</a>
</div>
<div class="search-header">
پروژه ها
</div>
<div class="search-item">
<a href="#">
<div class="search-icon bg-danger text-white ml-3">
<i class="fas fa-code"></i>
</div>
متریال ادمین پنل
</a>
</div>
<div class="search-item">
<a href="#">
<div class="search-icon bg-primary text-white ml-3">
<i class="fas fa-laptop"></i>
</div>
ایجاد صفحه لندینگ
</a>
</div>
</div>
</div>
</form>
<ul class="navbar-nav navbar-right">
<li class="dropdown dropdown-list-toggle"><a href="#" data-toggle="dropdown" class="nav-link nav-link-lg message-toggle beep"><i class="far fa-envelope"></i></a>
<div class="dropdown-menu dropdown-list text-right dropdown-menu-left">
<div class="dropdown-header">پیام ها
<div class="float-left">
<a href="#">علامتگذاری همه بصورت خوانده شده</a>
</div>
</div>
<div class="dropdown-list-content dropdown-list-message">
<a href="#" class="dropdown-item dropdown-item-unread">
<div class="dropdown-item-avatar">
<img alt="image" src="../assets/img/avatar/avatar-1.png" class="rounded-circle">
<div class="is-online"></div>
</div>
<div class="dropdown-item-desc text-right">
<b>مهدی خانزادی</b>
<p>سلام داداچ!</p>
<div class="time">۱۰ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item dropdown-item-unread">
<div class="dropdown-item-avatar">
<img alt="image" src="../assets/img/avatar/avatar-2.png" class="rounded-circle">
</div>
<div class="dropdown-item-desc">
<b>مهیار انصاری</b>
<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ.</p>
<div class="time">۱۲ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item dropdown-item-unread">
<div class="dropdown-item-avatar">
<img alt="image" src="../assets/img/avatar/avatar-3.png" class="rounded-circle">
<div class="is-online"></div>
</div>
<div class="dropdown-item-desc">
<b>آمیتا پاچان</b>
<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ.</p>
<div class="time">۱۲ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-avatar">
<img alt="image" src="../assets/img/avatar/avatar-4.png" class="rounded-circle">
</div>
<div class="dropdown-item-desc">
<b>مهدی خانزادی</b>
<p>سلام سیستم پشتیبانی پاترونیک رو استفاده کنید</p>
<div class="time">۱۶ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-avatar">
<img alt="image" src="../assets/img/avatar/avatar-5.png" class="rounded-circle">
</div>
<div class="dropdown-item-desc">
<b>لورم ایپسوم</b>
<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ.</p>
<div class="time">دیروز</div>
</div>
</a>
</div>
<div class="dropdown-footer text-center">
<a href="#"> دیدن همه پیام ها<i class="fas fa-chevron-left"></i></a>
</div>
</div>
</li>
<li class="dropdown dropdown-list-toggle"><a href="#" data-toggle="dropdown" class="nav-link notification-toggle nav-link-lg beep"><i class="far fa-bell"></i></a>
<div class="dropdown-menu dropdown-list dropdown-menu-left">
<div class="dropdown-header text-right">نوتیفیکیشن ها
<div class="float-left">
<a href="#"> علامتگذاری همه بصورت خوانده شده</a>
</div>
</div>
<div class="dropdown-list-content dropdown-list-icons text-right">
<a href="#" class="dropdown-item dropdown-item-unread">
<div class="dropdown-item-icon bg-primary text-white">
<i class="fas fa-code"></i>
</div>
<div class="dropdown-item-desc">
قالب مدیریتی متریال اپدیت جدید داد!
<div class="time text-primary">۲ دقیقه پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-icon bg-info text-white">
<i class="far fa-user"></i>
</div>
<div class="dropdown-item-desc">
<b>شما</b> و <b>مهیار انصاری</b> هم اکنون همکار هستید.
<div class="time">۱۰ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-icon bg-success text-white">
<i class="fas fa-check"></i>
</div>
<div class="dropdown-item-desc">
<b>مهدی خانزادی</b> اطلاعات مرتبط با <b>قالب</b> را <b>آپلود کرد.</b>
<div class="time">۱۲ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-icon bg-danger text-white">
<i class="fas fa-exclamation-triangle"></i>
</div>
<div class="dropdown-item-desc">
فضای هارد دیسک پر شده است لطفا آن را خالی کنید.
<div class="time">۱۷ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-icon bg-info text-white">
<i class="fas fa-bell"></i>
</div>
<div class="dropdown-item-desc">
به قالب متریال خوش آمدید
<div class="time">دیروز</div>
</div>
</a>
</div>
<div class="dropdown-footer text-center">
<a href="#">
<span>نمایش همه</span>
<i class="fas fa-chevron-left"></i>
</a>
</div>
</div>
</li>
<li class="dropdown"><a href="#" data-toggle="dropdown" class="nav-link dropdown-toggle nav-link-lg nav-link-user">
<img alt="image" src="../assets/img/avatar/avatar-1.png" class="rounded-circle mr-1">
<div class="d-sm-none d-lg-inline-block">سلام مهدی</div></a>
<div class="dropdown-menu dropdown-menu-right text-right">
<div class="dropdown-title text-center">۵ دقیقه پیش لاگین کردین</div>
<a href="features-profile.html" class="dropdown-item has-icon">
<span>پروفایل</span>
<i class="far fa-user"></i>
</a>
<a href="features-activities.html" class="dropdown-item has-icon">
<span>فعالیت ها</span>
<i class="fas fa-bolt"></i>
</a>
<a href="features-settings.html" class="dropdown-item has-icon">
<span>تنظیمات</span>
<i class="fas fa-cog"></i>
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item has-icon text-danger">
<span>خروج</span>
<i class="fas fa-sign-out-alt"></i>
</a>
</div>
</li>
</ul>
</nav>
<div class="main-sidebar sidebar-style-2">
<aside id="sidebar-wrapper">
<div class="sidebar-brand">
<a href="index.html">مدیریت پاترونیک</a>
</div>
<div class="sidebar-brand sidebar-brand-sm">
<a href="index.html">مدیریت فروش</a>
</div>
<ul class="sidebar-menu">
<li class="menu-header">داشبورد</li>
<li class="dropdown active">
<a href="#" class="nav-link has-dropdown"><i class="fas fa-fire"></i><span>داشبورد</span></a>
<ul class="dropdown-menu">
<li class=active><a class="nav-link" href="index-0.html">داشبورد عمومی</a></li>
<li><a class="nav-link" href="index.html">داشبورد فروش محصولات</a></li>
</ul>
</li>
<li class="menu-header">امکانات بیشتر</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown" data-toggle="dropdown"><i class="fas fa-columns"></i> <span>صفحه بندی</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="layout-default.html">حالت پیش فرض</a></li>
<li><a class="nav-link" href="layout-transparent.html">سایدبار بدون رنگ</a></li>
<li><a class="nav-link" href="layout-top-navigation.html">نویگیشن بالا</a></li>
</ul>
</li>
<li><a class="nav-link" href="blank.html"><i class="far fa-square"></i> <span>صفحه خالی</span></a></li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="fas fa-th"></i> <span>بوت استرپ</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="bootstrap-alert.html">آلرت</a></li>
<li><a class="nav-link" href="bootstrap-badge.html">بدج</a></li>
<li><a class="nav-link" href="bootstrap-breadcrumb.html">بردکرامپ</a></li>
<li><a class="nav-link" href="bootstrap-buttons.html">دکمه ها</a></li>
<li><a class="nav-link" href="bootstrap-card.html">کارت</a></li>
<li><a class="nav-link" href="bootstrap-carousel.html">کروسل</a></li>
<li><a class="nav-link" href="bootstrap-collapse.html">کولاپس</a></li>
<li><a class="nav-link" href="bootstrap-dropdown.html">دراپ دون</a></li>
<li><a class="nav-link" href="bootstrap-form.html">فرم</a></li>
<li><a class="nav-link" href="bootstrap-list-group.html">لیست گروه</a></li>
<li><a class="nav-link" href="bootstrap-media-object.html">مدیا ابجکت</a></li>
<li><a class="nav-link" href="bootstrap-modal.html">مودال</a></li>
<li><a class="nav-link" href="bootstrap-nav.html">نویگیشن</a></li>
<li><a class="nav-link" href="bootstrap-navbar.html">نوبار</a></li>
<li><a class="nav-link" href="bootstrap-pagination.html">پجینیشن</a></li>
<li><a class="nav-link" href="bootstrap-popover.html">پاپ اور</a></li>
<li><a class="nav-link" href="bootstrap-progress.html">پراگرس</a></li>
<li><a class="nav-link" href="bootstrap-table.html">جدول</a></li>
<li><a class="nav-link" href="bootstrap-tooltip.html">تولتیپ</a></li>
<li><a class="nav-link" href="bootstrap-typography.html">تایپوگرافی</a></li>
</ul>
</li>
<li class="menu-header">امکانات دیگر</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="fas fa-th-large"></i> <span>کامپوننت ها</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="components-gallery.html">گالری</a></li>
<li><a class="nav-link" href="components-multiple-upload.html">مولتی آپلود</a></li>
<li><a class="nav-link" href="components-tab.html">تب</a></li>
<li><a class="nav-link" href="components-table.html">جدول</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="far fa-file-alt"></i> <span>فرم ها</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="forms-advanced-form.html">فرم پیشرفته</a></li>
<li><a class="nav-link" href="forms-editor.html">ویرایشگر</a></li>
<li><a class="nav-link" href="forms-validation.html">ولیدیشن</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="fas fa-plug"></i> <span>ماژول ها</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="modules-calendar.html">تقویم</a></li>
<li><a class="nav-link" href="modules-chartjs.html">چارت ها</a></li>
<li><a class="nav-link" href="modules-datatables.html">دیتاتیبل</a></li>
<li><a class="nav-link" href="modules-flag.html">پرچم</a></li>
<li><a class="nav-link" href="modules-font-awesome.html">فونت اوسوم</a></li>
<li><a class="nav-link" href="modules-ion-icons.html">ای او ن ایکون</a></li>
<li><a class="nav-link" href="modules-owl-carousel.html">اول کراسول</a></li>
<li><a class="nav-link" href="modules-sparkline.html">اسپارک لاین</a></li>
<li><a class="nav-link" href="modules-sweet-alert.html">سویت الرت</a></li>
<li><a class="nav-link" href="modules-toastr.html">توستر</a></li>
<li><a class="nav-link" href="modules-vector-map.html">وکتور مپ</a></li>
<li><a class="nav-link" href="modules-weather-icon.html">ایکن اب و هوا</a></li>
</ul>
</li>
<li class="menu-header">صفحات</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="far fa-user"></i> <span>ثبت نام</span></a>
<ul class="dropdown-menu">
<li><a href="auth-forgot-password.html">فراموشی کلمه عبور</a></li>
<li><a href="auth-login.html">لاگین</a></li>
<li><a href="auth-register.html">ثبت نام</a></li>
<li><a href="auth-reset-password.html">بازیابی کلمه عبور</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="fas fa-exclamation"></i> <span>خطاها</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="errors-503.html">503</a></li>
<li><a class="nav-link" href="errors-403.html">403</a></li>
<li><a class="nav-link" href="errors-404.html">404</a></li>
<li><a class="nav-link" href="errors-500.html">500</a></li>
</ul>
</li>
<li><a class="nav-link" href="credits.html"><i class="fas fa-pencil-ruler"></i> <span>سازنده ها</span></a></li>
</ul>
<div class="mt-4 mb-4 p-3 hide-sidebar-mini">
<a href="https://getstisla.com/docs" class="btn btn-primary btn-lg btn-block btn-icon-split">
<i class="fas fa-rocket"></i> مستندات قالب
</a>
</div>
</aside>
</div>
<!-- Main Content -->
<div class="main-content">
<section class="section">
<div class="section-header">
<h1>دراپ دون</h1>
<div class="section-header-breadcrumb">
<div class="breadcrumb-item active"><a href="#">داشبورد</a></div>
<div class="breadcrumb-item"><a href="#">کامپوننت بوت استرپ</a></div>
<div class="breadcrumb-item">دراپ دون</div>
</div>
</div>
<div class="section-body text-right">
<h2 class="section-title">دراپ دون</h2>
<p class="section-lead">دراپ دون برای ساخت منو استفاده میشه.</p>
<div class="row">
<div class="col-12 col-md-6 col-lg-6">
<div class="card">
<div class="card-header">
<h4>Simple</h4>
</div>
<div class="card-body">
<div class="dropdown d-inline mr-2">
<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Easy Dropdown
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<div class="dropdown d-inline mr-2">
<button class="btn btn-success dropdown-toggle" type="button" id="dropdownMenuButton3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Easy Dropdown
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<div class="dropdown d-inline">
<button class="btn btn-dark dropdown-toggle" type="button" id="dropdownMenuButton4" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Easy Dropdown
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h4>Split</h4>
</div>
<div class="card-body">
<div class="btn-group">
<button type="button" class="btn btn-danger">Split Dropdown</button>
<button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h4>Direction</h4>
</div>
<div class="card-body">
<div class="btn-group dropup">
<button type="button" class="btn btn-dark dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropup
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
<div class="btn-group dropright">
<button type="button" class="btn btn-dark dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropright
</button>
<div class="dropdown-menu dropright">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
<div class="btn-group dropleft">
<button type="button" class="btn btn-dark dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropleft
</button>
<div class="dropdown-menu dropleft">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-6">
<div class="card">
<div class="card-header">
<h4>Icon</h4>
</div>
<div class="card-body">
<div class="dropdown d-inline">
<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
With Icon
</button>
<div class="dropdown-menu">
<a class="dropdown-item has-icon" href="#"><i class="far fa-heart"></i> Action</a>
<a class="dropdown-item has-icon" href="#"><i class="far fa-file"></i> Another action</a>
<a class="dropdown-item has-icon" href="#"><i class="far fa-clock"></i> Something else here</a>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h4>Size</h4>
</div>
<div class="card-body">
<div class="btn-group mb-2">
<button class="btn btn-info btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Small button
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
<div class="btn-group mb-2">
<button class="btn btn-danger dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Normal button
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
<div class="btn-group mb-2">
<button class="btn btn-warning btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Large button
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h4>Title</h4>
</div>
<div class="card-body">
<div class="btn-group">
<button class="btn btn-success dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Options
</button>
<div class="dropdown-menu">
<div class="dropdown-title">Hi, John!</div>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<footer class="main-footer">
<div class="footer-left">
Copyright &copy; 2018 <div class="bullet"></div> Design By <a href="https://nauval.in/">Muhamad Nauval Azhar</a>
</div>
<div class="footer-right">
</div>
</footer>
</div>
</div>
<!-- General JS Scripts -->
<script src="../assets/modules/jquery.min.js"></script>
<script src="../assets/modules/popper.js"></script>
<script src="../assets/modules/tooltip.js"></script>
<script src="../assets/modules/bootstrap/js/bootstrap.min.js"></script>
<script src="../assets/modules/nicescroll/jquery.nicescroll.min.js"></script>
<script src="../assets/modules/moment.min.js"></script>
<script src="../assets/js/stisla.js"></script>
<!-- JS Libraies -->
<!-- Page Specific JS File -->
<!-- Template JS File -->
<script src="../assets/js/scripts.js"></script>
<script src="../assets/js/custom.js"></script>
</body>
</html>

992
dev/rtl/bootstrap-form.html Normal file
View File

@@ -0,0 +1,992 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no" name="viewport">
<title>Bootstrap Components &rsaquo; Form &mdash; Stisla</title>
<!-- General CSS Files -->
<link rel="stylesheet" href="../assets/modules/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="../assets/modules/fontawesome/css/all.min.css">
<!-- CSS Libraries -->
<!-- Template CSS -->
<link rel="stylesheet" href="../assets/css/style.css">
<link rel="stylesheet" href="../assets/css/components.css">
<link rel="stylesheet" href="../assets/css/rtl.css">
</head>
<body>
<div id="app">
<div class="main-wrapper main-wrapper-1">
<div class="navbar-bg"></div>
<nav class="navbar navbar-expand-lg main-navbar">
<form class="form-inline ml-auto">
<ul class="navbar-nav ml-3">
<li><a href="#" data-toggle="sidebar" class="nav-link nav-link-lg"><i class="fas fa-bars"></i></a></li>
<li><a href="#" data-toggle="search" class="nav-link nav-link-lg d-sm-none"><i class="fas fa-search"></i></a></li>
</ul>
<div class="search-element text-right">
<input class="form-control" type="search" placeholder="جستجو" aria-label="Search" data-width="250">
<button class="btn" type="submit"><i class="fas fa-search"></i></button>
<div class="search-backdrop"></div>
<div class="search-result">
<div class="search-header">
نتیجه جستجو
</div>
<div class="search-item">
<a href="#">چگونه ناسا رو هک کنیم؟</a>
<a href="#" class="search-close"><i class="fas fa-times"></i></a>
</div>
<div class="search-item">
<a href="#">Kodinger.com</a>
<a href="#" class="search-close"><i class="fas fa-times"></i></a>
</div>
<div class="search-item">
<a href="#">پنل مدیریت</a>
<a href="#" class="search-close"><i class="fas fa-times"></i></a>
</div>
<div class="search-header">
نتایج
</div>
<div class="search-item">
<a href="#">
<img class="ml-3 rounded" width="30" src="../assets/img/products/product-3-50.png" alt="product">
آیفون s9 تولید شد
</a>
</div>
<div class="search-item">
<a href="#">
<img class="ml-3 rounded" width="30" src="../assets/img/products/product-2-50.png" alt="product">
چه شادی هایی که زیر پای انسانها سرکوب شدند
</a>
</div>
<div class="search-item">
<a href="#">
<img class="ml-3 rounded" width="30" src="../assets/img/products/product-1-50.png" alt="product">
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ.
</a>
</div>
<div class="search-header">
پروژه ها
</div>
<div class="search-item">
<a href="#">
<div class="search-icon bg-danger text-white ml-3">
<i class="fas fa-code"></i>
</div>
متریال ادمین پنل
</a>
</div>
<div class="search-item">
<a href="#">
<div class="search-icon bg-primary text-white ml-3">
<i class="fas fa-laptop"></i>
</div>
ایجاد صفحه لندینگ
</a>
</div>
</div>
</div>
</form>
<ul class="navbar-nav navbar-right">
<li class="dropdown dropdown-list-toggle"><a href="#" data-toggle="dropdown" class="nav-link nav-link-lg message-toggle beep"><i class="far fa-envelope"></i></a>
<div class="dropdown-menu dropdown-list text-right dropdown-menu-left">
<div class="dropdown-header">پیام ها
<div class="float-left">
<a href="#">علامتگذاری همه بصورت خوانده شده</a>
</div>
</div>
<div class="dropdown-list-content dropdown-list-message">
<a href="#" class="dropdown-item dropdown-item-unread">
<div class="dropdown-item-avatar">
<img alt="image" src="../assets/img/avatar/avatar-1.png" class="rounded-circle">
<div class="is-online"></div>
</div>
<div class="dropdown-item-desc text-right">
<b>مهدی خانزادی</b>
<p>سلام داداچ!</p>
<div class="time">۱۰ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item dropdown-item-unread">
<div class="dropdown-item-avatar">
<img alt="image" src="../assets/img/avatar/avatar-2.png" class="rounded-circle">
</div>
<div class="dropdown-item-desc">
<b>مهیار انصاری</b>
<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ.</p>
<div class="time">۱۲ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item dropdown-item-unread">
<div class="dropdown-item-avatar">
<img alt="image" src="../assets/img/avatar/avatar-3.png" class="rounded-circle">
<div class="is-online"></div>
</div>
<div class="dropdown-item-desc">
<b>آمیتا پاچان</b>
<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ.</p>
<div class="time">۱۲ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-avatar">
<img alt="image" src="../assets/img/avatar/avatar-4.png" class="rounded-circle">
</div>
<div class="dropdown-item-desc">
<b>مهدی خانزادی</b>
<p>سلام سیستم پشتیبانی پاترونیک رو استفاده کنید</p>
<div class="time">۱۶ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-avatar">
<img alt="image" src="../assets/img/avatar/avatar-5.png" class="rounded-circle">
</div>
<div class="dropdown-item-desc">
<b>لورم ایپسوم</b>
<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ.</p>
<div class="time">دیروز</div>
</div>
</a>
</div>
<div class="dropdown-footer text-center">
<a href="#"> دیدن همه پیام ها<i class="fas fa-chevron-left"></i></a>
</div>
</div>
</li>
<li class="dropdown dropdown-list-toggle"><a href="#" data-toggle="dropdown" class="nav-link notification-toggle nav-link-lg beep"><i class="far fa-bell"></i></a>
<div class="dropdown-menu dropdown-list dropdown-menu-left">
<div class="dropdown-header text-right">نوتیفیکیشن ها
<div class="float-left">
<a href="#"> علامتگذاری همه بصورت خوانده شده</a>
</div>
</div>
<div class="dropdown-list-content dropdown-list-icons text-right">
<a href="#" class="dropdown-item dropdown-item-unread">
<div class="dropdown-item-icon bg-primary text-white">
<i class="fas fa-code"></i>
</div>
<div class="dropdown-item-desc">
قالب مدیریتی متریال اپدیت جدید داد!
<div class="time text-primary">۲ دقیقه پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-icon bg-info text-white">
<i class="far fa-user"></i>
</div>
<div class="dropdown-item-desc">
<b>شما</b> و <b>مهیار انصاری</b> هم اکنون همکار هستید.
<div class="time">۱۰ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-icon bg-success text-white">
<i class="fas fa-check"></i>
</div>
<div class="dropdown-item-desc">
<b>مهدی خانزادی</b> اطلاعات مرتبط با <b>قالب</b> را <b>آپلود کرد.</b>
<div class="time">۱۲ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-icon bg-danger text-white">
<i class="fas fa-exclamation-triangle"></i>
</div>
<div class="dropdown-item-desc">
فضای هارد دیسک پر شده است لطفا آن را خالی کنید.
<div class="time">۱۷ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-icon bg-info text-white">
<i class="fas fa-bell"></i>
</div>
<div class="dropdown-item-desc">
به قالب متریال خوش آمدید
<div class="time">دیروز</div>
</div>
</a>
</div>
<div class="dropdown-footer text-center">
<a href="#">
<span>نمایش همه</span>
<i class="fas fa-chevron-left"></i>
</a>
</div>
</div>
</li>
<li class="dropdown"><a href="#" data-toggle="dropdown" class="nav-link dropdown-toggle nav-link-lg nav-link-user">
<img alt="image" src="../assets/img/avatar/avatar-1.png" class="rounded-circle mr-1">
<div class="d-sm-none d-lg-inline-block">سلام مهدی</div></a>
<div class="dropdown-menu dropdown-menu-right text-right">
<div class="dropdown-title text-center">۵ دقیقه پیش لاگین کردین</div>
<a href="features-profile.html" class="dropdown-item has-icon">
<span>پروفایل</span>
<i class="far fa-user"></i>
</a>
<a href="features-activities.html" class="dropdown-item has-icon">
<span>فعالیت ها</span>
<i class="fas fa-bolt"></i>
</a>
<a href="features-settings.html" class="dropdown-item has-icon">
<span>تنظیمات</span>
<i class="fas fa-cog"></i>
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item has-icon text-danger">
<span>خروج</span>
<i class="fas fa-sign-out-alt"></i>
</a>
</div>
</li>
</ul>
</nav>
<div class="main-sidebar sidebar-style-2">
<aside id="sidebar-wrapper">
<div class="sidebar-brand">
<a href="index.html">مدیریت پاترونیک</a>
</div>
<div class="sidebar-brand sidebar-brand-sm">
<a href="index.html">مدیریت فروش</a>
</div>
<ul class="sidebar-menu">
<li class="menu-header">داشبورد</li>
<li class="dropdown active">
<a href="#" class="nav-link has-dropdown"><i class="fas fa-fire"></i><span>داشبورد</span></a>
<ul class="dropdown-menu">
<li class=active><a class="nav-link" href="index-0.html">داشبورد عمومی</a></li>
<li><a class="nav-link" href="index.html">داشبورد فروش محصولات</a></li>
</ul>
</li>
<li class="menu-header">امکانات بیشتر</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown" data-toggle="dropdown"><i class="fas fa-columns"></i> <span>صفحه بندی</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="layout-default.html">حالت پیش فرض</a></li>
<li><a class="nav-link" href="layout-transparent.html">سایدبار بدون رنگ</a></li>
<li><a class="nav-link" href="layout-top-navigation.html">نویگیشن بالا</a></li>
</ul>
</li>
<li><a class="nav-link" href="blank.html"><i class="far fa-square"></i> <span>صفحه خالی</span></a></li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="fas fa-th"></i> <span>بوت استرپ</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="bootstrap-alert.html">آلرت</a></li>
<li><a class="nav-link" href="bootstrap-badge.html">بدج</a></li>
<li><a class="nav-link" href="bootstrap-breadcrumb.html">بردکرامپ</a></li>
<li><a class="nav-link" href="bootstrap-buttons.html">دکمه ها</a></li>
<li><a class="nav-link" href="bootstrap-card.html">کارت</a></li>
<li><a class="nav-link" href="bootstrap-carousel.html">کروسل</a></li>
<li><a class="nav-link" href="bootstrap-collapse.html">کولاپس</a></li>
<li><a class="nav-link" href="bootstrap-dropdown.html">دراپ دون</a></li>
<li><a class="nav-link" href="bootstrap-form.html">فرم</a></li>
<li><a class="nav-link" href="bootstrap-list-group.html">لیست گروه</a></li>
<li><a class="nav-link" href="bootstrap-media-object.html">مدیا ابجکت</a></li>
<li><a class="nav-link" href="bootstrap-modal.html">مودال</a></li>
<li><a class="nav-link" href="bootstrap-nav.html">نویگیشن</a></li>
<li><a class="nav-link" href="bootstrap-navbar.html">نوبار</a></li>
<li><a class="nav-link" href="bootstrap-pagination.html">پجینیشن</a></li>
<li><a class="nav-link" href="bootstrap-popover.html">پاپ اور</a></li>
<li><a class="nav-link" href="bootstrap-progress.html">پراگرس</a></li>
<li><a class="nav-link" href="bootstrap-table.html">جدول</a></li>
<li><a class="nav-link" href="bootstrap-tooltip.html">تولتیپ</a></li>
<li><a class="nav-link" href="bootstrap-typography.html">تایپوگرافی</a></li>
</ul>
</li>
<li class="menu-header">امکانات دیگر</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="fas fa-th-large"></i> <span>کامپوننت ها</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="components-gallery.html">گالری</a></li>
<li><a class="nav-link" href="components-multiple-upload.html">مولتی آپلود</a></li>
<li><a class="nav-link" href="components-tab.html">تب</a></li>
<li><a class="nav-link" href="components-table.html">جدول</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="far fa-file-alt"></i> <span>فرم ها</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="forms-advanced-form.html">فرم پیشرفته</a></li>
<li><a class="nav-link" href="forms-editor.html">ویرایشگر</a></li>
<li><a class="nav-link" href="forms-validation.html">ولیدیشن</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="fas fa-plug"></i> <span>ماژول ها</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="modules-calendar.html">تقویم</a></li>
<li><a class="nav-link" href="modules-chartjs.html">چارت ها</a></li>
<li><a class="nav-link" href="modules-datatables.html">دیتاتیبل</a></li>
<li><a class="nav-link" href="modules-flag.html">پرچم</a></li>
<li><a class="nav-link" href="modules-font-awesome.html">فونت اوسوم</a></li>
<li><a class="nav-link" href="modules-ion-icons.html">ای او ن ایکون</a></li>
<li><a class="nav-link" href="modules-owl-carousel.html">اول کراسول</a></li>
<li><a class="nav-link" href="modules-sparkline.html">اسپارک لاین</a></li>
<li><a class="nav-link" href="modules-sweet-alert.html">سویت الرت</a></li>
<li><a class="nav-link" href="modules-toastr.html">توستر</a></li>
<li><a class="nav-link" href="modules-vector-map.html">وکتور مپ</a></li>
<li><a class="nav-link" href="modules-weather-icon.html">ایکن اب و هوا</a></li>
</ul>
</li>
<li class="menu-header">صفحات</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="far fa-user"></i> <span>ثبت نام</span></a>
<ul class="dropdown-menu">
<li><a href="auth-forgot-password.html">فراموشی کلمه عبور</a></li>
<li><a href="auth-login.html">لاگین</a></li>
<li><a href="auth-register.html">ثبت نام</a></li>
<li><a href="auth-reset-password.html">بازیابی کلمه عبور</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="fas fa-exclamation"></i> <span>خطاها</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="errors-503.html">503</a></li>
<li><a class="nav-link" href="errors-403.html">403</a></li>
<li><a class="nav-link" href="errors-404.html">404</a></li>
<li><a class="nav-link" href="errors-500.html">500</a></li>
</ul>
</li>
<li><a class="nav-link" href="credits.html"><i class="fas fa-pencil-ruler"></i> <span>سازنده ها</span></a></li>
</ul>
<div class="mt-4 mb-4 p-3 hide-sidebar-mini">
<a href="https://getstisla.com/docs" class="btn btn-primary btn-lg btn-block btn-icon-split">
<i class="fas fa-rocket"></i> مستندات قالب
</a>
</div>
</aside>
</div>
<!-- Main Content -->
<div class="main-content">
<section class="section">
<div class="section-header">
<h1>فرم</h1>
<div class="section-header-breadcrumb">
<div class="breadcrumb-item active"><a href="#">داشبورد</a></div>
<div class="breadcrumb-item"><a href="#">کامپوننت بوت استرپ</a></div>
<div class="breadcrumb-item">فرم</div>
</div>
</div>
<div class="section-body text-right">
<h2 class="section-title">فرم</h2>
<p class="section-lead">هرجا که نیاز دارید تا یک سری اطلاعات رو از کاربر دریافت کنید میتونید از فرم ها کمک بگیرید.</p>
<div class="row">
<div class="col-12 col-md-6 col-lg-6">
<div class="card">
<div class="card-header">
<h4>HTML5 Form Basic</h4>
</div>
<div class="card-body">
<div class="alert alert-info">
<b>Note!</b> Not all browsers support HTML5 type input.
</div>
<div class="form-group">
<label>Text</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>Select</label>
<select class="form-control">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</div>
<div class="form-group">
<label>Select Multiple</label>
<select class="form-control" multiple="" data-height="100%">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 3</option>
</select>
</div>
<div class="form-group">
<label>Textarea</label>
<textarea class="form-control"></textarea>
</div>
<div class="form-group">
<label class="d-block">Checkbox</label>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="defaultCheck1">
<label class="form-check-label" for="defaultCheck1">
Checkbox 1
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="defaultCheck3">
<label class="form-check-label" for="defaultCheck3">
Checkbox 2
</label>
</div>
</div>
<div class="form-group">
<label>Color</label>
<input type="color" class="form-control">
</div>
<div class="form-group">
<label>Date</label>
<input type="date" class="form-control">
</div>
<div class="form-group">
<label>Datetime Local</label>
<input type="datetime-local" class="form-control">
</div>
<div class="form-group">
<label>Email</label>
<input type="email" class="form-control">
</div>
<div class="form-group">
<label>File</label>
<input type="file" class="form-control">
</div>
<div class="form-group">
<label>Month</label>
<input type="month" class="form-control">
</div>
<div class="form-group">
<label>Password</label>
<input type="password" class="form-control">
</div>
<div class="form-group">
<label class="d-block">Radio</label>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" checked>
<label class="form-check-label" for="exampleRadios1">
Radio 1
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" checked>
<label class="form-check-label" for="exampleRadios2">
Radio 2
</label>
</div>
</div>
<div class="form-group">
<label>Range</label>
<input type="range" class="form-control">
</div>
<div class="form-group">
<label>Search</label>
<input type="search" class="form-control">
</div>
<div class="form-group">
<label>Tel</label>
<input type="tel" class="form-control">
</div>
<div class="form-group">
<label>Time</label>
<input type="time" class="form-control">
</div>
<div class="form-group">
<label>Url</label>
<input type="url" class="form-control">
</div>
<div class="form-group mb-0">
<label>Week</label>
<input type="week" class="form-control">
</div>
</div>
<div class="card-footer text-right">
<button class="btn btn-primary mr-1" type="submit">Submit</button>
<button class="btn btn-secondary" type="reset">Reset</button>
</div>
</div>
<div class="card">
<div class="card-header">
<h4>Inline Forms</h4>
</div>
<div class="card-body">
<form class="form-inline">
<label class="sr-only" for="inlineFormInputName2">Name</label>
<input type="text" class="form-control mb-2 mr-sm-2" id="inlineFormInputName2" placeholder="Jane Doe">
<label class="sr-only" for="inlineFormInputGroupUsername2">Username</label>
<div class="input-group mb-2 mr-sm-2">
<input type="text" class="form-control" id="inlineFormInputGroupUsername2" placeholder="Username">
</div>
</form>
</div>
</div>
<div class="card">
<div class="card-header">
<h4>Help Text</h4>
</div>
<div class="card-body">
<div class="form-group">
<label for="inputPassword5">Password</label>
<input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock">
<small id="passwordHelpBlock" class="form-text text-muted">
Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
</small>
</div>
<div class="form-inline">
<div class="form-group">
<label for="inputPassword6">Password</label>
<input type="password" id="inputPassword6" class="form-control mx-sm-3" aria-describedby="passwordHelpInline">
<small id="passwordHelpInline" class="text-muted">
Must be 8-20 characters long.
</small>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h4>Custom Forms #2</h4>
</div>
<div class="card-body">
<div class="section-title mt-0">Select</div>
<div class="form-group">
<label>Choose One</label>
<select class="custom-select">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<div class="section-title">File Browser</div>
<div class="custom-file">
<input type="file" class="custom-file-input" id="customFile">
<label class="custom-file-label" for="customFile">Choose file</label>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h4>Input Group Text</h4>
</div>
<div class="card-body">
<div class="form-group">
<div class="input-group mb-2">
<div class="input-group-prepend">
<div class="input-group-text">@</div>
</div>
<input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Username">
</div>
</div>
<div class="form-group">
<div class="input-group mb-2">
<input type="text" class="form-control text-right" id="inlineFormInputGroup2" placeholder="Your URL">
<div class="input-group-append">
<div class="input-group-text">.com</div>
</div>
</div>
</div>
<div class="form-group">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">$</span>
</div>
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
<div class="input-group-append">
<span class="input-group-text">.00</span>
</div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h4>Input Group #2</h4>
</div>
<div class="card-body">
<div class="section-title mt-0">Multiple Addons</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">First and last name</span>
</div>
<input type="text" class="form-control">
<input type="text" class="form-control">
</div>
</div>
<div class="section-title">Button</div>
<div class="form-group">
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="" aria-label="">
<div class="input-group-append">
<button class="btn btn-primary" type="button">Button</button>
</div>
</div>
</div>
<div class="section-title">Select With Button</div>
<div class="form-group">
<div class="input-group">
<select class="custom-select" id="inputGroupSelect04">
<option selected>Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<div class="input-group-append">
<button class="btn btn-primary" type="button">Button</button>
</div>
</div>
</div>
<div class="section-title">Select, Button &amp; Input</div>
<div class="form-group">
<div class="input-group">
<select class="custom-select" id="inputGroupSelect05">
<option selected>Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<input type="text" class="form-control">
<div class="input-group-append">
<button class="btn btn-primary" type="button">Button</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-6">
<div class="card">
<div class="card-header">
<h4>Sizing</h4>
</div>
<div class="card-body">
<div class="section-title mt-0">Text</div>
<div class="form-group">
<label>Text <code>.form-control-sm</code></label>
<input type="text" class="form-control form-control-sm">
</div>
<div class="form-group">
<label>Text</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>Text <code>.form-control-lg</code></label>
<input type="text" class="form-control form-control-lg">
</div>
<div class="section-title">Select</div>
<div class="form-group">
<label>Select <code>.form-control-sm</code></label>
<select class="form-control form-control-sm">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</div>
<div class="form-group">
<label>Select</label>
<select class="form-control">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</div>
<div class="form-group">
<label>Select <code>.form-control-lg</code></label>
<select class="form-control form-control-lg">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h4>Disabled &amp; Read Only</h4>
</div>
<div class="card-body">
<div class="section-title mt-0">Text</div>
<div class="form-group">
<label>Readonly</label>
<input type="text" class="form-control" readonly="">
</div>
<div class="form-group">
<label>Readonly Plain Text</label>
<input type="text" class="form-control-plaintext" readonly="" value="Hello!">
</div>
<div class="section-title">Select</div>
<div class="form-group">
<label>Select Disabled</label>
<select class="form-control" disabled="">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</div>
<div class="section-title">Checkbox</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck2" disabled>
<label class="form-check-label" for="defaultCheck2">
Disabled checkbox
</label>
</div>
</div>
<div class="section-title">Radio</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="radio" value="" id="radioDisabled" disabled>
<label class="form-check-label" for="radioDisabled">
Disabled radio
</label>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h4>Inline</h4>
</div>
<div class="card-body">
<div class="form-group">
<label class="d-block">Inline Checkbox</label>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
<label class="form-check-label" for="inlineCheckbox1">1</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
<label class="form-check-label" for="inlineCheckbox2">2</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled>
<label class="form-check-label" for="inlineCheckbox3">3 (disabled)</label>
</div>
</div>
<div class="form-group">
<label class="d-block">Inline Radio</label>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" id="inlineradio1" value="option1">
<label class="form-check-label" for="inlineradio1">1</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" id="inlineradio2" value="option2">
<label class="form-check-label" for="inlineradio2">2</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" id="inlineradio3" value="option3" disabled>
<label class="form-check-label" for="inlineCheckbox3">3 (disabled)</label>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h4>Horizontal Form</h4>
</div>
<div class="card-body">
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputEmail4">Email</label>
<input type="email" class="form-control" id="inputEmail4" placeholder="Email">
</div>
<div class="form-group col-md-6">
<label for="inputPassword4">Password</label>
<input type="password" class="form-control" id="inputPassword4" placeholder="Password">
</div>
</div>
<div class="form-group">
<label for="inputAddress">Address</label>
<input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
</div>
<div class="form-group">
<label for="inputAddress2">Address 2</label>
<input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputCity">City</label>
<input type="text" class="form-control" id="inputCity">
</div>
<div class="form-group col-md-4">
<label for="inputState">State</label>
<select id="inputState" class="form-control">
<option selected>Choose...</option>
<option>...</option>
</select>
</div>
<div class="form-group col-md-2">
<label for="inputZip">Zip</label>
<input type="text" class="form-control" id="inputZip">
</div>
</div>
<div class="form-group mb-0">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="gridCheck">
<label class="form-check-label" for="gridCheck">
Check me out
</label>
</div>
</div>
</div>
<div class="card-footer">
<button class="btn btn-primary">Submit</button>
</div>
</div>
<div class="card">
<div class="card-header">
<h4>Horizontal Form</h4>
</div>
<div class="card-body">
<div class="form-group row">
<label for="inputEmail3" class="col-sm-3 col-form-label">Email</label>
<div class="col-sm-9">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group row">
<label for="inputPassword3" class="col-sm-3 col-form-label">Password</label>
<div class="col-sm-9">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<fieldset class="form-group">
<div class="row">
<div class="col-form-label col-sm-3 pt-0">Radios</div>
<div class="col-sm-9">
<div class="form-check">
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
<label class="form-check-label" for="gridRadios1">
First radio
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
<label class="form-check-label" for="gridRadios2">
Second radio
</label>
</div>
<div class="form-check disabled">
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled>
<label class="form-check-label" for="gridRadios3">
Third disabled radio
</label>
</div>
</div>
</div>
</fieldset>
<div class="form-group row">
<div class="col-sm-3">Checkbox</div>
<div class="col-sm-9">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="gridCheck1">
<label class="form-check-label" for="gridCheck1">
Example checkbox
</label>
</div>
</div>
</div>
</div>
<div class="card-footer">
<button type="submit" class="btn btn-primary">Sign in</button>
</div>
</div>
<div class="card">
<div class="card-header">
<h4>Custom Forms</h4>
</div>
<div class="card-body">
<div class="section-title mt-0">Checkbox</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck1">
<label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>
</div>
<div class="section-title">Checkbox</div>
<div class="custom-control custom-radio">
<input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
<label class="custom-control-label" for="customRadio1">Toggle this custom radio</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" id="customRadio2" name="customRadio" class="custom-control-input">
<label class="custom-control-label" for="customRadio2">Or toggle this other custom radio</label>
</div>
<div class="section-title">Inline</div>
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" id="customRadioInline1" name="customRadioInline1" class="custom-control-input">
<label class="custom-control-label" for="customRadioInline1">Toggle this custom radio</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" id="customRadioInline2" name="customRadioInline1" class="custom-control-input">
<label class="custom-control-label" for="customRadioInline2">Or toggle this other custom radio</label>
</div>
<div class="section-title">Disabled</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheckDisabled" disabled>
<label class="custom-control-label" for="customCheckDisabled">Check this custom checkbox</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" name="radioDisabled" class="custom-control-input" disabled>
<label class="custom-control-label">Toggle this custom radio</label>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h4>Learn More</h4>
</div>
<div class="card-body">
<div class="jumbotron text-center">
<h2>Learn More</h2>
<p class="lead text-muted mt-3">All the above form elements are the default of bootstrap and you can learn them on the official documentation provided by Bootstrap.</p>
<a class="btn btn-primary mt-3" href="https://getbootstrap.com/docs/4.0/components/forms/" target="_blank" role="button">Learn more</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<footer class="main-footer">
<div class="footer-left">
Copyright &copy; 2018 <div class="bullet"></div> Design By <a href="https://nauval.in/">Muhamad Nauval Azhar</a>
</div>
<div class="footer-right">
</div>
</footer>
</div>
</div>
<!-- General JS Scripts -->
<script src="../assets/modules/jquery.min.js"></script>
<script src="../assets/modules/popper.js"></script>
<script src="../assets/modules/tooltip.js"></script>
<script src="../assets/modules/bootstrap/js/bootstrap.min.js"></script>
<script src="../assets/modules/nicescroll/jquery.nicescroll.min.js"></script>
<script src="../assets/modules/moment.min.js"></script>
<script src="../assets/js/stisla.js"></script>
<!-- JS Libraies -->
<!-- Page Specific JS File -->
<!-- Template JS File -->
<script src="../assets/js/scripts.js"></script>
<script src="../assets/js/custom.js"></script>
</body>
</html>

View File

@@ -0,0 +1,599 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no" name="viewport">
<title>Bootstrap Components &rsaquo; List Group &mdash; Stisla</title>
<!-- General CSS Files -->
<link rel="stylesheet" href="../assets/modules/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="../assets/modules/fontawesome/css/all.min.css">
<!-- CSS Libraries -->
<!-- Template CSS -->
<link rel="stylesheet" href="../assets/css/style.css">
<link rel="stylesheet" href="../assets/css/components.css">
<link rel="stylesheet" href="../assets/css/rtl.css">
</head>
<body>
<div id="app">
<div class="main-wrapper main-wrapper-1">
<div class="navbar-bg"></div>
<nav class="navbar navbar-expand-lg main-navbar">
<form class="form-inline ml-auto">
<ul class="navbar-nav ml-3">
<li><a href="#" data-toggle="sidebar" class="nav-link nav-link-lg"><i class="fas fa-bars"></i></a></li>
<li><a href="#" data-toggle="search" class="nav-link nav-link-lg d-sm-none"><i class="fas fa-search"></i></a></li>
</ul>
<div class="search-element text-right">
<input class="form-control" type="search" placeholder="جستجو" aria-label="Search" data-width="250">
<button class="btn" type="submit"><i class="fas fa-search"></i></button>
<div class="search-backdrop"></div>
<div class="search-result">
<div class="search-header">
نتیجه جستجو
</div>
<div class="search-item">
<a href="#">چگونه ناسا رو هک کنیم؟</a>
<a href="#" class="search-close"><i class="fas fa-times"></i></a>
</div>
<div class="search-item">
<a href="#">Kodinger.com</a>
<a href="#" class="search-close"><i class="fas fa-times"></i></a>
</div>
<div class="search-item">
<a href="#">پنل مدیریت</a>
<a href="#" class="search-close"><i class="fas fa-times"></i></a>
</div>
<div class="search-header">
نتایج
</div>
<div class="search-item">
<a href="#">
<img class="ml-3 rounded" width="30" src="../assets/img/products/product-3-50.png" alt="product">
آیفون s9 تولید شد
</a>
</div>
<div class="search-item">
<a href="#">
<img class="ml-3 rounded" width="30" src="../assets/img/products/product-2-50.png" alt="product">
چه شادی هایی که زیر پای انسانها سرکوب شدند
</a>
</div>
<div class="search-item">
<a href="#">
<img class="ml-3 rounded" width="30" src="../assets/img/products/product-1-50.png" alt="product">
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ.
</a>
</div>
<div class="search-header">
پروژه ها
</div>
<div class="search-item">
<a href="#">
<div class="search-icon bg-danger text-white ml-3">
<i class="fas fa-code"></i>
</div>
متریال ادمین پنل
</a>
</div>
<div class="search-item">
<a href="#">
<div class="search-icon bg-primary text-white ml-3">
<i class="fas fa-laptop"></i>
</div>
ایجاد صفحه لندینگ
</a>
</div>
</div>
</div>
</form>
<ul class="navbar-nav navbar-right">
<li class="dropdown dropdown-list-toggle"><a href="#" data-toggle="dropdown" class="nav-link nav-link-lg message-toggle beep"><i class="far fa-envelope"></i></a>
<div class="dropdown-menu dropdown-list text-right dropdown-menu-left">
<div class="dropdown-header">پیام ها
<div class="float-left">
<a href="#">علامتگذاری همه بصورت خوانده شده</a>
</div>
</div>
<div class="dropdown-list-content dropdown-list-message">
<a href="#" class="dropdown-item dropdown-item-unread">
<div class="dropdown-item-avatar">
<img alt="image" src="../assets/img/avatar/avatar-1.png" class="rounded-circle">
<div class="is-online"></div>
</div>
<div class="dropdown-item-desc text-right">
<b>مهدی خانزادی</b>
<p>سلام داداچ!</p>
<div class="time">۱۰ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item dropdown-item-unread">
<div class="dropdown-item-avatar">
<img alt="image" src="../assets/img/avatar/avatar-2.png" class="rounded-circle">
</div>
<div class="dropdown-item-desc">
<b>مهیار انصاری</b>
<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ.</p>
<div class="time">۱۲ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item dropdown-item-unread">
<div class="dropdown-item-avatar">
<img alt="image" src="../assets/img/avatar/avatar-3.png" class="rounded-circle">
<div class="is-online"></div>
</div>
<div class="dropdown-item-desc">
<b>آمیتا پاچان</b>
<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ.</p>
<div class="time">۱۲ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-avatar">
<img alt="image" src="../assets/img/avatar/avatar-4.png" class="rounded-circle">
</div>
<div class="dropdown-item-desc">
<b>مهدی خانزادی</b>
<p>سلام سیستم پشتیبانی پاترونیک رو استفاده کنید</p>
<div class="time">۱۶ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-avatar">
<img alt="image" src="../assets/img/avatar/avatar-5.png" class="rounded-circle">
</div>
<div class="dropdown-item-desc">
<b>لورم ایپسوم</b>
<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ.</p>
<div class="time">دیروز</div>
</div>
</a>
</div>
<div class="dropdown-footer text-center">
<a href="#"> دیدن همه پیام ها<i class="fas fa-chevron-left"></i></a>
</div>
</div>
</li>
<li class="dropdown dropdown-list-toggle"><a href="#" data-toggle="dropdown" class="nav-link notification-toggle nav-link-lg beep"><i class="far fa-bell"></i></a>
<div class="dropdown-menu dropdown-list dropdown-menu-left">
<div class="dropdown-header text-right">نوتیفیکیشن ها
<div class="float-left">
<a href="#"> علامتگذاری همه بصورت خوانده شده</a>
</div>
</div>
<div class="dropdown-list-content dropdown-list-icons text-right">
<a href="#" class="dropdown-item dropdown-item-unread">
<div class="dropdown-item-icon bg-primary text-white">
<i class="fas fa-code"></i>
</div>
<div class="dropdown-item-desc">
قالب مدیریتی متریال اپدیت جدید داد!
<div class="time text-primary">۲ دقیقه پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-icon bg-info text-white">
<i class="far fa-user"></i>
</div>
<div class="dropdown-item-desc">
<b>شما</b> و <b>مهیار انصاری</b> هم اکنون همکار هستید.
<div class="time">۱۰ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-icon bg-success text-white">
<i class="fas fa-check"></i>
</div>
<div class="dropdown-item-desc">
<b>مهدی خانزادی</b> اطلاعات مرتبط با <b>قالب</b> را <b>آپلود کرد.</b>
<div class="time">۱۲ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-icon bg-danger text-white">
<i class="fas fa-exclamation-triangle"></i>
</div>
<div class="dropdown-item-desc">
فضای هارد دیسک پر شده است لطفا آن را خالی کنید.
<div class="time">۱۷ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-icon bg-info text-white">
<i class="fas fa-bell"></i>
</div>
<div class="dropdown-item-desc">
به قالب متریال خوش آمدید
<div class="time">دیروز</div>
</div>
</a>
</div>
<div class="dropdown-footer text-center">
<a href="#">
<span>نمایش همه</span>
<i class="fas fa-chevron-left"></i>
</a>
</div>
</div>
</li>
<li class="dropdown"><a href="#" data-toggle="dropdown" class="nav-link dropdown-toggle nav-link-lg nav-link-user">
<img alt="image" src="../assets/img/avatar/avatar-1.png" class="rounded-circle mr-1">
<div class="d-sm-none d-lg-inline-block">سلام مهدی</div></a>
<div class="dropdown-menu dropdown-menu-right text-right">
<div class="dropdown-title text-center">۵ دقیقه پیش لاگین کردین</div>
<a href="features-profile.html" class="dropdown-item has-icon">
<span>پروفایل</span>
<i class="far fa-user"></i>
</a>
<a href="features-activities.html" class="dropdown-item has-icon">
<span>فعالیت ها</span>
<i class="fas fa-bolt"></i>
</a>
<a href="features-settings.html" class="dropdown-item has-icon">
<span>تنظیمات</span>
<i class="fas fa-cog"></i>
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item has-icon text-danger">
<span>خروج</span>
<i class="fas fa-sign-out-alt"></i>
</a>
</div>
</li>
</ul>
</nav>
<div class="main-sidebar sidebar-style-2">
<aside id="sidebar-wrapper">
<div class="sidebar-brand">
<a href="index.html">مدیریت پاترونیک</a>
</div>
<div class="sidebar-brand sidebar-brand-sm">
<a href="index.html">مدیریت فروش</a>
</div>
<ul class="sidebar-menu">
<li class="menu-header">داشبورد</li>
<li class="dropdown active">
<a href="#" class="nav-link has-dropdown"><i class="fas fa-fire"></i><span>داشبورد</span></a>
<ul class="dropdown-menu">
<li class=active><a class="nav-link" href="index-0.html">داشبورد عمومی</a></li>
<li><a class="nav-link" href="index.html">داشبورد فروش محصولات</a></li>
</ul>
</li>
<li class="menu-header">امکانات بیشتر</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown" data-toggle="dropdown"><i class="fas fa-columns"></i> <span>صفحه بندی</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="layout-default.html">حالت پیش فرض</a></li>
<li><a class="nav-link" href="layout-transparent.html">سایدبار بدون رنگ</a></li>
<li><a class="nav-link" href="layout-top-navigation.html">نویگیشن بالا</a></li>
</ul>
</li>
<li><a class="nav-link" href="blank.html"><i class="far fa-square"></i> <span>صفحه خالی</span></a></li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="fas fa-th"></i> <span>بوت استرپ</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="bootstrap-alert.html">آلرت</a></li>
<li><a class="nav-link" href="bootstrap-badge.html">بدج</a></li>
<li><a class="nav-link" href="bootstrap-breadcrumb.html">بردکرامپ</a></li>
<li><a class="nav-link" href="bootstrap-buttons.html">دکمه ها</a></li>
<li><a class="nav-link" href="bootstrap-card.html">کارت</a></li>
<li><a class="nav-link" href="bootstrap-carousel.html">کروسل</a></li>
<li><a class="nav-link" href="bootstrap-collapse.html">کولاپس</a></li>
<li><a class="nav-link" href="bootstrap-dropdown.html">دراپ دون</a></li>
<li><a class="nav-link" href="bootstrap-form.html">فرم</a></li>
<li><a class="nav-link" href="bootstrap-list-group.html">لیست گروه</a></li>
<li><a class="nav-link" href="bootstrap-media-object.html">مدیا ابجکت</a></li>
<li><a class="nav-link" href="bootstrap-modal.html">مودال</a></li>
<li><a class="nav-link" href="bootstrap-nav.html">نویگیشن</a></li>
<li><a class="nav-link" href="bootstrap-navbar.html">نوبار</a></li>
<li><a class="nav-link" href="bootstrap-pagination.html">پجینیشن</a></li>
<li><a class="nav-link" href="bootstrap-popover.html">پاپ اور</a></li>
<li><a class="nav-link" href="bootstrap-progress.html">پراگرس</a></li>
<li><a class="nav-link" href="bootstrap-table.html">جدول</a></li>
<li><a class="nav-link" href="bootstrap-tooltip.html">تولتیپ</a></li>
<li><a class="nav-link" href="bootstrap-typography.html">تایپوگرافی</a></li>
</ul>
</li>
<li class="menu-header">امکانات دیگر</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="fas fa-th-large"></i> <span>کامپوننت ها</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="components-gallery.html">گالری</a></li>
<li><a class="nav-link" href="components-multiple-upload.html">مولتی آپلود</a></li>
<li><a class="nav-link" href="components-tab.html">تب</a></li>
<li><a class="nav-link" href="components-table.html">جدول</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="far fa-file-alt"></i> <span>فرم ها</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="forms-advanced-form.html">فرم پیشرفته</a></li>
<li><a class="nav-link" href="forms-editor.html">ویرایشگر</a></li>
<li><a class="nav-link" href="forms-validation.html">ولیدیشن</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="fas fa-plug"></i> <span>ماژول ها</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="modules-calendar.html">تقویم</a></li>
<li><a class="nav-link" href="modules-chartjs.html">چارت ها</a></li>
<li><a class="nav-link" href="modules-datatables.html">دیتاتیبل</a></li>
<li><a class="nav-link" href="modules-flag.html">پرچم</a></li>
<li><a class="nav-link" href="modules-font-awesome.html">فونت اوسوم</a></li>
<li><a class="nav-link" href="modules-ion-icons.html">ای او ن ایکون</a></li>
<li><a class="nav-link" href="modules-owl-carousel.html">اول کراسول</a></li>
<li><a class="nav-link" href="modules-sparkline.html">اسپارک لاین</a></li>
<li><a class="nav-link" href="modules-sweet-alert.html">سویت الرت</a></li>
<li><a class="nav-link" href="modules-toastr.html">توستر</a></li>
<li><a class="nav-link" href="modules-vector-map.html">وکتور مپ</a></li>
<li><a class="nav-link" href="modules-weather-icon.html">ایکن اب و هوا</a></li>
</ul>
</li>
<li class="menu-header">صفحات</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="far fa-user"></i> <span>ثبت نام</span></a>
<ul class="dropdown-menu">
<li><a href="auth-forgot-password.html">فراموشی کلمه عبور</a></li>
<li><a href="auth-login.html">لاگین</a></li>
<li><a href="auth-register.html">ثبت نام</a></li>
<li><a href="auth-reset-password.html">بازیابی کلمه عبور</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="fas fa-exclamation"></i> <span>خطاها</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="errors-503.html">503</a></li>
<li><a class="nav-link" href="errors-403.html">403</a></li>
<li><a class="nav-link" href="errors-404.html">404</a></li>
<li><a class="nav-link" href="errors-500.html">500</a></li>
</ul>
</li>
<li><a class="nav-link" href="credits.html"><i class="fas fa-pencil-ruler"></i> <span>سازنده ها</span></a></li>
</ul>
<div class="mt-4 mb-4 p-3 hide-sidebar-mini">
<a href="https://getstisla.com/docs" class="btn btn-primary btn-lg btn-block btn-icon-split">
<i class="fas fa-rocket"></i> مستندات قالب
</a>
</div>
</aside>
</div>
<!-- Main Content -->
<div class="main-content">
<section class="section">
<div class="section-header">
<h1>لیست گروپ</h1>
<div class="section-header-breadcrumb">
<div class="breadcrumb-item active"><a href="#">داشبورد</a></div>
<div class="breadcrumb-item"><a href="#">کامپوننت بوت استرپ</a></div>
<div class="breadcrumb-item">لیست گروپ</div>
</div>
</div>
<div class="section-body text-right">
<h2 class="section-title">لیست گروپ</h2>
<p class="section-lead">لیست گروپ ها برای نمایش داده ها در گروه های مختلف مورد استفاده قرار میگیرن.</p>
<div class="row">
<div class="col-12 col-md-6 col-lg-6">
<div class="card">
<div class="card-header">
<h4>Basic</h4>
</div>
<div class="card-body">
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
</div>
</div>
<div class="card">
<div class="card-header">
<h4>Disabled</h4>
</div>
<div class="card-body">
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item disabled">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
</div>
</div>
<div class="card">
<div class="card-header">
<h4>Flush</h4>
</div>
<div class="card-body">
<ul class="list-group list-group-flush">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
</div>
</div>
<div class="card">
<div class="card-header">
<h4>Badges</h4>
</div>
<div class="card-body">
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center">
Cras justo odio
<span class="badge badge-primary badge-pill">14</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Dapibus ac facilisis in
<span class="badge badge-primary badge-pill">2</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Morbi leo risus
<span class="badge badge-primary badge-pill">1</span>
</li>
</ul>
</div>
</div>
<div class="card">
<div class="card-header">
<h4>JavaScript Behavior</h4>
</div>
<div class="card-body">
<div class="row">
<div class="col-4">
<div class="list-group" id="list-tab" role="tablist">
<a class="list-group-item list-group-item-action active" id="list-home-list" data-toggle="list" href="#list-home" role="tab">Home</a>
<a class="list-group-item list-group-item-action" id="list-profile-list" data-toggle="list" href="#list-profile" role="tab">Profile</a>
<a class="list-group-item list-group-item-action" id="list-messages-list" data-toggle="list" href="#list-messages" role="tab">Messages</a>
<a class="list-group-item list-group-item-action" id="list-settings-list" data-toggle="list" href="#list-settings" role="tab">Settings</a>
</div>
</div>
<div class="col-8">
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="list-home" role="tabpanel" aria-labelledby="list-home-list">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non.
</div>
<div class="tab-pane fade" id="list-profile" role="tabpanel" aria-labelledby="list-profile-list">
Deserunt cupidatat anim ullamco ut dolor anim sint nulla amet incididunt tempor ad ut pariatur officia culpa laboris occaecat. Dolor in nisi aliquip in non magna amet nisi sed commodo proident anim deserunt nulla veniam occaecat reprehenderit esse ut eu culpa fugiat nostrud pariatur adipisicing incididunt consequat nisi non amet.
</div>
<div class="tab-pane fade" id="list-messages" role="tabpanel" aria-labelledby="list-messages-list">
In quis non esse eiusmod sunt fugiat magna pariatur officia anim ex officia nostrud amet nisi pariatur eu est id ut exercitation ex ad reprehenderit dolore nostrud sit ut culpa consequat magna ad labore proident ad qui et tempor exercitation in aute veniam et velit dolore irure qui ex magna ex culpa enim anim ea mollit consequat ullamco exercitation in.
</div>
<div class="tab-pane fade" id="list-settings" role="tabpanel" aria-labelledby="list-settings-list">
Lorem ipsum culpa in ad velit dolore anim labore incididunt do aliqua sit veniam commodo elit dolore do labore occaecat laborum sed quis proident fugiat sunt pariatur. Cupidatat ut fugiat anim ut dolore excepteur ut voluptate dolore excepteur mollit commodo.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-6">
<div class="card">
<div class="card-header">
<h4>Active</h4>
</div>
<div class="card-body">
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item active">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
</div>
</div>
<div class="card">
<div class="card-header">
<h4>Link</h4>
</div>
<div class="card-body">
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action active">
Cras justo odio
</a>
<a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item list-group-item-action">Morbi leo risus</a>
<a href="#" class="list-group-item list-group-item-action">Porta ac consectetur ac</a>
<a href="#" class="list-group-item list-group-item-action disabled">Vestibulum at eros</a>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h4>Contextual Classes</h4>
</div>
<div class="card-body">
<ul class="list-group">
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item list-group-item-primary">A simple primary list group item</li>
<li class="list-group-item list-group-item-secondary">A simple secondary list group item</li>
<li class="list-group-item list-group-item-success">A simple success list group item</li>
<li class="list-group-item list-group-item-danger">A simple danger list group item</li>
<li class="list-group-item list-group-item-warning">A simple warning list group item</li>
<li class="list-group-item list-group-item-info">A simple info list group item</li>
<li class="list-group-item list-group-item-light">A simple light list group item</li>
<li class="list-group-item list-group-item-dark">A simple dark list group item</li>
</ul>
</div>
</div>
<div class="card">
<div class="card-header">
<h4>Custom Content</h4>
</div>
<div class="card-body">
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action flex-column align-items-start active">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">List group item heading</h5>
<small>3 days ago</small>
</div>
<p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
<small>Donec id elit non mi porta.</small>
</a>
<a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">List group item heading</h5>
<small class="text-muted">3 days ago</small>
</div>
<p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
<small class="text-muted">Donec id elit non mi porta.</small>
</a>
<a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">List group item heading</h5>
<small class="text-muted">3 days ago</small>
</div>
<p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
<small class="text-muted">Donec id elit non mi porta.</small>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<footer class="main-footer">
<div class="footer-left">
Copyright &copy; 2018 <div class="bullet"></div> Design By <a href="https://nauval.in/">Muhamad Nauval Azhar</a>
</div>
<div class="footer-right">
</div>
</footer>
</div>
</div>
<!-- General JS Scripts -->
<script src="../assets/modules/jquery.min.js"></script>
<script src="../assets/modules/popper.js"></script>
<script src="../assets/modules/tooltip.js"></script>
<script src="../assets/modules/bootstrap/js/bootstrap.min.js"></script>
<script src="../assets/modules/nicescroll/jquery.nicescroll.min.js"></script>
<script src="../assets/modules/moment.min.js"></script>
<script src="../assets/js/stisla.js"></script>
<!-- JS Libraies -->
<!-- Page Specific JS File -->
<!-- Template JS File -->
<script src="../assets/js/scripts.js"></script>
<script src="../assets/js/custom.js"></script>
</body>
</html>

View File

@@ -0,0 +1,500 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no" name="viewport">
<title>Bootstrap Components &rsaquo; Media Object &mdash; Stisla</title>
<!-- General CSS Files -->
<link rel="stylesheet" href="../assets/modules/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="../assets/modules/fontawesome/css/all.min.css">
<!-- CSS Libraries -->
<!-- Template CSS -->
<link rel="stylesheet" href="../assets/css/style.css">
<link rel="stylesheet" href="../assets/css/components.css">
<link rel="stylesheet" href="../assets/css/rtl.css">
</head>
<body>
<div id="app">
<div class="main-wrapper main-wrapper-1">
<div class="navbar-bg"></div>
<nav class="navbar navbar-expand-lg main-navbar">
<form class="form-inline ml-auto">
<ul class="navbar-nav ml-3">
<li><a href="#" data-toggle="sidebar" class="nav-link nav-link-lg"><i class="fas fa-bars"></i></a></li>
<li><a href="#" data-toggle="search" class="nav-link nav-link-lg d-sm-none"><i class="fas fa-search"></i></a></li>
</ul>
<div class="search-element text-right">
<input class="form-control" type="search" placeholder="جستجو" aria-label="Search" data-width="250">
<button class="btn" type="submit"><i class="fas fa-search"></i></button>
<div class="search-backdrop"></div>
<div class="search-result">
<div class="search-header">
نتیجه جستجو
</div>
<div class="search-item">
<a href="#">چگونه ناسا رو هک کنیم؟</a>
<a href="#" class="search-close"><i class="fas fa-times"></i></a>
</div>
<div class="search-item">
<a href="#">Kodinger.com</a>
<a href="#" class="search-close"><i class="fas fa-times"></i></a>
</div>
<div class="search-item">
<a href="#">پنل مدیریت</a>
<a href="#" class="search-close"><i class="fas fa-times"></i></a>
</div>
<div class="search-header">
نتایج
</div>
<div class="search-item">
<a href="#">
<img class="ml-3 rounded" width="30" src="../assets/img/products/product-3-50.png" alt="product">
آیفون s9 تولید شد
</a>
</div>
<div class="search-item">
<a href="#">
<img class="ml-3 rounded" width="30" src="../assets/img/products/product-2-50.png" alt="product">
چه شادی هایی که زیر پای انسانها سرکوب شدند
</a>
</div>
<div class="search-item">
<a href="#">
<img class="ml-3 rounded" width="30" src="../assets/img/products/product-1-50.png" alt="product">
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ.
</a>
</div>
<div class="search-header">
پروژه ها
</div>
<div class="search-item">
<a href="#">
<div class="search-icon bg-danger text-white ml-3">
<i class="fas fa-code"></i>
</div>
متریال ادمین پنل
</a>
</div>
<div class="search-item">
<a href="#">
<div class="search-icon bg-primary text-white ml-3">
<i class="fas fa-laptop"></i>
</div>
ایجاد صفحه لندینگ
</a>
</div>
</div>
</div>
</form>
<ul class="navbar-nav navbar-right">
<li class="dropdown dropdown-list-toggle"><a href="#" data-toggle="dropdown" class="nav-link nav-link-lg message-toggle beep"><i class="far fa-envelope"></i></a>
<div class="dropdown-menu dropdown-list text-right dropdown-menu-left">
<div class="dropdown-header">پیام ها
<div class="float-left">
<a href="#">علامتگذاری همه بصورت خوانده شده</a>
</div>
</div>
<div class="dropdown-list-content dropdown-list-message">
<a href="#" class="dropdown-item dropdown-item-unread">
<div class="dropdown-item-avatar">
<img alt="image" src="../assets/img/avatar/avatar-1.png" class="rounded-circle">
<div class="is-online"></div>
</div>
<div class="dropdown-item-desc text-right">
<b>مهدی خانزادی</b>
<p>سلام داداچ!</p>
<div class="time">۱۰ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item dropdown-item-unread">
<div class="dropdown-item-avatar">
<img alt="image" src="../assets/img/avatar/avatar-2.png" class="rounded-circle">
</div>
<div class="dropdown-item-desc">
<b>مهیار انصاری</b>
<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ.</p>
<div class="time">۱۲ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item dropdown-item-unread">
<div class="dropdown-item-avatar">
<img alt="image" src="../assets/img/avatar/avatar-3.png" class="rounded-circle">
<div class="is-online"></div>
</div>
<div class="dropdown-item-desc">
<b>آمیتا پاچان</b>
<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ.</p>
<div class="time">۱۲ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-avatar">
<img alt="image" src="../assets/img/avatar/avatar-4.png" class="rounded-circle">
</div>
<div class="dropdown-item-desc">
<b>مهدی خانزادی</b>
<p>سلام سیستم پشتیبانی پاترونیک رو استفاده کنید</p>
<div class="time">۱۶ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-avatar">
<img alt="image" src="../assets/img/avatar/avatar-5.png" class="rounded-circle">
</div>
<div class="dropdown-item-desc">
<b>لورم ایپسوم</b>
<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ.</p>
<div class="time">دیروز</div>
</div>
</a>
</div>
<div class="dropdown-footer text-center">
<a href="#"> دیدن همه پیام ها<i class="fas fa-chevron-left"></i></a>
</div>
</div>
</li>
<li class="dropdown dropdown-list-toggle"><a href="#" data-toggle="dropdown" class="nav-link notification-toggle nav-link-lg beep"><i class="far fa-bell"></i></a>
<div class="dropdown-menu dropdown-list dropdown-menu-left">
<div class="dropdown-header text-right">نوتیفیکیشن ها
<div class="float-left">
<a href="#"> علامتگذاری همه بصورت خوانده شده</a>
</div>
</div>
<div class="dropdown-list-content dropdown-list-icons text-right">
<a href="#" class="dropdown-item dropdown-item-unread">
<div class="dropdown-item-icon bg-primary text-white">
<i class="fas fa-code"></i>
</div>
<div class="dropdown-item-desc">
قالب مدیریتی متریال اپدیت جدید داد!
<div class="time text-primary">۲ دقیقه پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-icon bg-info text-white">
<i class="far fa-user"></i>
</div>
<div class="dropdown-item-desc">
<b>شما</b> و <b>مهیار انصاری</b> هم اکنون همکار هستید.
<div class="time">۱۰ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-icon bg-success text-white">
<i class="fas fa-check"></i>
</div>
<div class="dropdown-item-desc">
<b>مهدی خانزادی</b> اطلاعات مرتبط با <b>قالب</b> را <b>آپلود کرد.</b>
<div class="time">۱۲ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-icon bg-danger text-white">
<i class="fas fa-exclamation-triangle"></i>
</div>
<div class="dropdown-item-desc">
فضای هارد دیسک پر شده است لطفا آن را خالی کنید.
<div class="time">۱۷ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-icon bg-info text-white">
<i class="fas fa-bell"></i>
</div>
<div class="dropdown-item-desc">
به قالب متریال خوش آمدید
<div class="time">دیروز</div>
</div>
</a>
</div>
<div class="dropdown-footer text-center">
<a href="#">
<span>نمایش همه</span>
<i class="fas fa-chevron-left"></i>
</a>
</div>
</div>
</li>
<li class="dropdown"><a href="#" data-toggle="dropdown" class="nav-link dropdown-toggle nav-link-lg nav-link-user">
<img alt="image" src="../assets/img/avatar/avatar-1.png" class="rounded-circle mr-1">
<div class="d-sm-none d-lg-inline-block">سلام مهدی</div></a>
<div class="dropdown-menu dropdown-menu-right text-right">
<div class="dropdown-title text-center">۵ دقیقه پیش لاگین کردین</div>
<a href="features-profile.html" class="dropdown-item has-icon">
<span>پروفایل</span>
<i class="far fa-user"></i>
</a>
<a href="features-activities.html" class="dropdown-item has-icon">
<span>فعالیت ها</span>
<i class="fas fa-bolt"></i>
</a>
<a href="features-settings.html" class="dropdown-item has-icon">
<span>تنظیمات</span>
<i class="fas fa-cog"></i>
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item has-icon text-danger">
<span>خروج</span>
<i class="fas fa-sign-out-alt"></i>
</a>
</div>
</li>
</ul>
</nav>
<div class="main-sidebar sidebar-style-2">
<aside id="sidebar-wrapper">
<div class="sidebar-brand">
<a href="index.html">مدیریت پاترونیک</a>
</div>
<div class="sidebar-brand sidebar-brand-sm">
<a href="index.html">مدیریت فروش</a>
</div>
<ul class="sidebar-menu">
<li class="menu-header">داشبورد</li>
<li class="dropdown active">
<a href="#" class="nav-link has-dropdown"><i class="fas fa-fire"></i><span>داشبورد</span></a>
<ul class="dropdown-menu">
<li class=active><a class="nav-link" href="index-0.html">داشبورد عمومی</a></li>
<li><a class="nav-link" href="index.html">داشبورد فروش محصولات</a></li>
</ul>
</li>
<li class="menu-header">امکانات بیشتر</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown" data-toggle="dropdown"><i class="fas fa-columns"></i> <span>صفحه بندی</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="layout-default.html">حالت پیش فرض</a></li>
<li><a class="nav-link" href="layout-transparent.html">سایدبار بدون رنگ</a></li>
<li><a class="nav-link" href="layout-top-navigation.html">نویگیشن بالا</a></li>
</ul>
</li>
<li><a class="nav-link" href="blank.html"><i class="far fa-square"></i> <span>صفحه خالی</span></a></li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="fas fa-th"></i> <span>بوت استرپ</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="bootstrap-alert.html">آلرت</a></li>
<li><a class="nav-link" href="bootstrap-badge.html">بدج</a></li>
<li><a class="nav-link" href="bootstrap-breadcrumb.html">بردکرامپ</a></li>
<li><a class="nav-link" href="bootstrap-buttons.html">دکمه ها</a></li>
<li><a class="nav-link" href="bootstrap-card.html">کارت</a></li>
<li><a class="nav-link" href="bootstrap-carousel.html">کروسل</a></li>
<li><a class="nav-link" href="bootstrap-collapse.html">کولاپس</a></li>
<li><a class="nav-link" href="bootstrap-dropdown.html">دراپ دون</a></li>
<li><a class="nav-link" href="bootstrap-form.html">فرم</a></li>
<li><a class="nav-link" href="bootstrap-list-group.html">لیست گروه</a></li>
<li><a class="nav-link" href="bootstrap-media-object.html">مدیا ابجکت</a></li>
<li><a class="nav-link" href="bootstrap-modal.html">مودال</a></li>
<li><a class="nav-link" href="bootstrap-nav.html">نویگیشن</a></li>
<li><a class="nav-link" href="bootstrap-navbar.html">نوبار</a></li>
<li><a class="nav-link" href="bootstrap-pagination.html">پجینیشن</a></li>
<li><a class="nav-link" href="bootstrap-popover.html">پاپ اور</a></li>
<li><a class="nav-link" href="bootstrap-progress.html">پراگرس</a></li>
<li><a class="nav-link" href="bootstrap-table.html">جدول</a></li>
<li><a class="nav-link" href="bootstrap-tooltip.html">تولتیپ</a></li>
<li><a class="nav-link" href="bootstrap-typography.html">تایپوگرافی</a></li>
</ul>
</li>
<li class="menu-header">امکانات دیگر</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="fas fa-th-large"></i> <span>کامپوننت ها</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="components-gallery.html">گالری</a></li>
<li><a class="nav-link" href="components-multiple-upload.html">مولتی آپلود</a></li>
<li><a class="nav-link" href="components-tab.html">تب</a></li>
<li><a class="nav-link" href="components-table.html">جدول</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="far fa-file-alt"></i> <span>فرم ها</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="forms-advanced-form.html">فرم پیشرفته</a></li>
<li><a class="nav-link" href="forms-editor.html">ویرایشگر</a></li>
<li><a class="nav-link" href="forms-validation.html">ولیدیشن</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="fas fa-plug"></i> <span>ماژول ها</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="modules-calendar.html">تقویم</a></li>
<li><a class="nav-link" href="modules-chartjs.html">چارت ها</a></li>
<li><a class="nav-link" href="modules-datatables.html">دیتاتیبل</a></li>
<li><a class="nav-link" href="modules-flag.html">پرچم</a></li>
<li><a class="nav-link" href="modules-font-awesome.html">فونت اوسوم</a></li>
<li><a class="nav-link" href="modules-ion-icons.html">ای او ن ایکون</a></li>
<li><a class="nav-link" href="modules-owl-carousel.html">اول کراسول</a></li>
<li><a class="nav-link" href="modules-sparkline.html">اسپارک لاین</a></li>
<li><a class="nav-link" href="modules-sweet-alert.html">سویت الرت</a></li>
<li><a class="nav-link" href="modules-toastr.html">توستر</a></li>
<li><a class="nav-link" href="modules-vector-map.html">وکتور مپ</a></li>
<li><a class="nav-link" href="modules-weather-icon.html">ایکن اب و هوا</a></li>
</ul>
</li>
<li class="menu-header">صفحات</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="far fa-user"></i> <span>ثبت نام</span></a>
<ul class="dropdown-menu">
<li><a href="auth-forgot-password.html">فراموشی کلمه عبور</a></li>
<li><a href="auth-login.html">لاگین</a></li>
<li><a href="auth-register.html">ثبت نام</a></li>
<li><a href="auth-reset-password.html">بازیابی کلمه عبور</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="fas fa-exclamation"></i> <span>خطاها</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="errors-503.html">503</a></li>
<li><a class="nav-link" href="errors-403.html">403</a></li>
<li><a class="nav-link" href="errors-404.html">404</a></li>
<li><a class="nav-link" href="errors-500.html">500</a></li>
</ul>
</li>
<li><a class="nav-link" href="credits.html"><i class="fas fa-pencil-ruler"></i> <span>سازنده ها</span></a></li>
</ul>
<div class="mt-4 mb-4 p-3 hide-sidebar-mini">
<a href="https://getstisla.com/docs" class="btn btn-primary btn-lg btn-block btn-icon-split">
<i class="fas fa-rocket"></i> مستندات قالب
</a>
</div>
</aside>
</div>
<!-- Main Content -->
<div class="main-content">
<section class="section">
<div class="section-header">
<h1>مدیا ابجکت</h1>
<div class="section-header-breadcrumb">
<div class="breadcrumb-item active"><a href="#">داشبورد</a></div>
<div class="breadcrumb-item"><a href="#">کامپوننت بوت استرپ</a></div>
<div class="breadcrumb-item">مدیا ابجکت</div>
</div>
</div>
<div class="section-body text-right">
<h2 class="section-title">مدیا ابجکت</h2>
<p class="section-lead">مدیا آبجکت ها برای نمایش مالتی مدیا استفاده میشن</p>
<div class="row">
<div class="col-12 col-md-6 col-lg-6">
<div class="card">
<div class="card-header">
<h4>ساختار ساده</h4>
</div>
<div class="card-body">
<div class="media">
<img class="ml-3" src="../assets/img/example-image-50.jpg" alt="Generic placeholder image">
<div class="media-body">
<h5 class="mt-0">مدیا هدینگ</h5>
<p class="mb-0">لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه مجله در ستون و سطر آنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای.</p>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h4>لیست</h4>
</div>
<div class="card-body">
<ul class="list-unstyled">
<li class="media">
<img class="ml-3" src="../assets/img/example-image-50.jpg" alt="Generic placeholder image">
<div class="media-body">
<h5 class="mt-0 mb-1">مدیا آبجکت براساس لیست</h5>
<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه مجله در ستون و سطر آنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای.</p>
</div>
</li>
<li class="media my-4">
<img class="ml-3" src="../assets/img/example-image-50.jpg" alt="Generic placeholder image">
<div class="media-body">
<h5 class="mt-0 mb-1">مدیا آبجکت براساس لیست</h5>
<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه مجله در ستون و سطر آنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای.</p>
</div>
</li>
<li class="media">
<img class="ml-3" src="../assets/img/example-image-50.jpg" alt="Generic placeholder image">
<div class="media-body">
<h5 class="mt-0 mb-1">مدیا آبجکت براساس لیست</h5>
<p class="mb-0">لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه مجله در ستون و سطر آنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای.</p>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-6">
<div class="card">
<div class="card-header">
<h4>ساختار تودرتو</h4>
</div>
<div class="card-body">
<div class="media">
<img class="ml-3" src="../assets/img/example-image-50.jpg" alt="Generic placeholder image">
<div class="media-body">
<h5 class="mt-0">مدیا هدینگ</h5>
<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه مجله در ستون و سطر آنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای.</p>
<div class="media mt-3">
<a class="pl-3" href="#">
<img src="../assets/img/example-image-50.jpg" alt="Generic placeholder image">
</a>
<div class="media-body">
<h5 class="mt-0">مدیا هدینگ</h5>
<p class="mb-0">لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه مجله در ستون و سطر آنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h4>Order</h4>
</div>
<div class="card-body">
<div class="media">
<div class="media-body">
<h5 class="mt-0 mb-1">مدیا آبجکت</h5>
<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه مجله در ستون و سطر آنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای.</p>
</div>
<img class="mr-3" src="../assets/img/example-image-50.jpg" alt="Generic placeholder image">
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<footer class="main-footer">
<div class="footer-left">
Copyright &copy; 2018 <div class="bullet"></div> Design By <a href="https://nauval.in/">Muhamad Nauval Azhar</a>
</div>
<div class="footer-right">
</div>
</footer>
</div>
</div>
<!-- General JS Scripts -->
<script src="../assets/modules/jquery.min.js"></script>
<script src="../assets/modules/popper.js"></script>
<script src="../assets/modules/tooltip.js"></script>
<script src="../assets/modules/bootstrap/js/bootstrap.min.js"></script>
<script src="../assets/modules/nicescroll/jquery.nicescroll.min.js"></script>
<script src="../assets/modules/moment.min.js"></script>
<script src="../assets/js/stisla.js"></script>
<!-- JS Libraies -->
<!-- Page Specific JS File -->
<!-- Template JS File -->
<script src="../assets/js/scripts.js"></script>
<script src="../assets/js/custom.js"></script>
</body>
</html>

View File

@@ -0,0 +1,540 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no" name="viewport">
<title>Bootstrap Components &rsaquo; Modal &mdash; Stisla</title>
<!-- General CSS Files -->
<link rel="stylesheet" href="../assets/modules/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="../assets/modules/fontawesome/css/all.min.css">
<!-- CSS Libraries -->
<link rel="stylesheet" href="../assets/modules/prism/prism.css">
<!-- Template CSS -->
<link rel="stylesheet" href="../assets/css/style.css">
<link rel="stylesheet" href="../assets/css/components.css">
<link rel="stylesheet" href="../assets/css/rtl.css">
</head>
<body>
<div id="app">
<div class="main-wrapper main-wrapper-1">
<div class="navbar-bg"></div>
<nav class="navbar navbar-expand-lg main-navbar">
<form class="form-inline ml-auto">
<ul class="navbar-nav ml-3">
<li><a href="#" data-toggle="sidebar" class="nav-link nav-link-lg"><i class="fas fa-bars"></i></a></li>
<li><a href="#" data-toggle="search" class="nav-link nav-link-lg d-sm-none"><i class="fas fa-search"></i></a></li>
</ul>
<div class="search-element text-right">
<input class="form-control" type="search" placeholder="جستجو" aria-label="Search" data-width="250">
<button class="btn" type="submit"><i class="fas fa-search"></i></button>
<div class="search-backdrop"></div>
<div class="search-result">
<div class="search-header">
نتیجه جستجو
</div>
<div class="search-item">
<a href="#">چگونه ناسا رو هک کنیم؟</a>
<a href="#" class="search-close"><i class="fas fa-times"></i></a>
</div>
<div class="search-item">
<a href="#">Kodinger.com</a>
<a href="#" class="search-close"><i class="fas fa-times"></i></a>
</div>
<div class="search-item">
<a href="#">پنل مدیریت</a>
<a href="#" class="search-close"><i class="fas fa-times"></i></a>
</div>
<div class="search-header">
نتایج
</div>
<div class="search-item">
<a href="#">
<img class="ml-3 rounded" width="30" src="../assets/img/products/product-3-50.png" alt="product">
آیفون s9 تولید شد
</a>
</div>
<div class="search-item">
<a href="#">
<img class="ml-3 rounded" width="30" src="../assets/img/products/product-2-50.png" alt="product">
چه شادی هایی که زیر پای انسانها سرکوب شدند
</a>
</div>
<div class="search-item">
<a href="#">
<img class="ml-3 rounded" width="30" src="../assets/img/products/product-1-50.png" alt="product">
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ.
</a>
</div>
<div class="search-header">
پروژه ها
</div>
<div class="search-item">
<a href="#">
<div class="search-icon bg-danger text-white ml-3">
<i class="fas fa-code"></i>
</div>
متریال ادمین پنل
</a>
</div>
<div class="search-item">
<a href="#">
<div class="search-icon bg-primary text-white ml-3">
<i class="fas fa-laptop"></i>
</div>
ایجاد صفحه لندینگ
</a>
</div>
</div>
</div>
</form>
<ul class="navbar-nav navbar-right">
<li class="dropdown dropdown-list-toggle"><a href="#" data-toggle="dropdown" class="nav-link nav-link-lg message-toggle beep"><i class="far fa-envelope"></i></a>
<div class="dropdown-menu dropdown-list text-right dropdown-menu-left">
<div class="dropdown-header">پیام ها
<div class="float-left">
<a href="#">علامتگذاری همه بصورت خوانده شده</a>
</div>
</div>
<div class="dropdown-list-content dropdown-list-message">
<a href="#" class="dropdown-item dropdown-item-unread">
<div class="dropdown-item-avatar">
<img alt="image" src="../assets/img/avatar/avatar-1.png" class="rounded-circle">
<div class="is-online"></div>
</div>
<div class="dropdown-item-desc text-right">
<b>مهدی خانزادی</b>
<p>سلام داداچ!</p>
<div class="time">۱۰ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item dropdown-item-unread">
<div class="dropdown-item-avatar">
<img alt="image" src="../assets/img/avatar/avatar-2.png" class="rounded-circle">
</div>
<div class="dropdown-item-desc">
<b>مهیار انصاری</b>
<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ.</p>
<div class="time">۱۲ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item dropdown-item-unread">
<div class="dropdown-item-avatar">
<img alt="image" src="../assets/img/avatar/avatar-3.png" class="rounded-circle">
<div class="is-online"></div>
</div>
<div class="dropdown-item-desc">
<b>آمیتا پاچان</b>
<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ.</p>
<div class="time">۱۲ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-avatar">
<img alt="image" src="../assets/img/avatar/avatar-4.png" class="rounded-circle">
</div>
<div class="dropdown-item-desc">
<b>مهدی خانزادی</b>
<p>سلام سیستم پشتیبانی پاترونیک رو استفاده کنید</p>
<div class="time">۱۶ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-avatar">
<img alt="image" src="../assets/img/avatar/avatar-5.png" class="rounded-circle">
</div>
<div class="dropdown-item-desc">
<b>لورم ایپسوم</b>
<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ.</p>
<div class="time">دیروز</div>
</div>
</a>
</div>
<div class="dropdown-footer text-center">
<a href="#"> دیدن همه پیام ها<i class="fas fa-chevron-left"></i></a>
</div>
</div>
</li>
<li class="dropdown dropdown-list-toggle"><a href="#" data-toggle="dropdown" class="nav-link notification-toggle nav-link-lg beep"><i class="far fa-bell"></i></a>
<div class="dropdown-menu dropdown-list dropdown-menu-left">
<div class="dropdown-header text-right">نوتیفیکیشن ها
<div class="float-left">
<a href="#"> علامتگذاری همه بصورت خوانده شده</a>
</div>
</div>
<div class="dropdown-list-content dropdown-list-icons text-right">
<a href="#" class="dropdown-item dropdown-item-unread">
<div class="dropdown-item-icon bg-primary text-white">
<i class="fas fa-code"></i>
</div>
<div class="dropdown-item-desc">
قالب مدیریتی متریال اپدیت جدید داد!
<div class="time text-primary">۲ دقیقه پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-icon bg-info text-white">
<i class="far fa-user"></i>
</div>
<div class="dropdown-item-desc">
<b>شما</b> و <b>مهیار انصاری</b> هم اکنون همکار هستید.
<div class="time">۱۰ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-icon bg-success text-white">
<i class="fas fa-check"></i>
</div>
<div class="dropdown-item-desc">
<b>مهدی خانزادی</b> اطلاعات مرتبط با <b>قالب</b> را <b>آپلود کرد.</b>
<div class="time">۱۲ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-icon bg-danger text-white">
<i class="fas fa-exclamation-triangle"></i>
</div>
<div class="dropdown-item-desc">
فضای هارد دیسک پر شده است لطفا آن را خالی کنید.
<div class="time">۱۷ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-icon bg-info text-white">
<i class="fas fa-bell"></i>
</div>
<div class="dropdown-item-desc">
به قالب متریال خوش آمدید
<div class="time">دیروز</div>
</div>
</a>
</div>
<div class="dropdown-footer text-center">
<a href="#">
<span>نمایش همه</span>
<i class="fas fa-chevron-left"></i>
</a>
</div>
</div>
</li>
<li class="dropdown"><a href="#" data-toggle="dropdown" class="nav-link dropdown-toggle nav-link-lg nav-link-user">
<img alt="image" src="../assets/img/avatar/avatar-1.png" class="rounded-circle mr-1">
<div class="d-sm-none d-lg-inline-block">سلام مهدی</div></a>
<div class="dropdown-menu dropdown-menu-right text-right">
<div class="dropdown-title text-center">۵ دقیقه پیش لاگین کردین</div>
<a href="features-profile.html" class="dropdown-item has-icon">
<span>پروفایل</span>
<i class="far fa-user"></i>
</a>
<a href="features-activities.html" class="dropdown-item has-icon">
<span>فعالیت ها</span>
<i class="fas fa-bolt"></i>
</a>
<a href="features-settings.html" class="dropdown-item has-icon">
<span>تنظیمات</span>
<i class="fas fa-cog"></i>
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item has-icon text-danger">
<span>خروج</span>
<i class="fas fa-sign-out-alt"></i>
</a>
</div>
</li>
</ul>
</nav>
<div class="main-sidebar sidebar-style-2">
<aside id="sidebar-wrapper">
<div class="sidebar-brand">
<a href="index.html">مدیریت پاترونیک</a>
</div>
<div class="sidebar-brand sidebar-brand-sm">
<a href="index.html">مدیریت فروش</a>
</div>
<ul class="sidebar-menu">
<li class="menu-header">داشبورد</li>
<li class="dropdown active">
<a href="#" class="nav-link has-dropdown"><i class="fas fa-fire"></i><span>داشبورد</span></a>
<ul class="dropdown-menu">
<li class=active><a class="nav-link" href="index-0.html">داشبورد عمومی</a></li>
<li><a class="nav-link" href="index.html">داشبورد فروش محصولات</a></li>
</ul>
</li>
<li class="menu-header">امکانات بیشتر</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown" data-toggle="dropdown"><i class="fas fa-columns"></i> <span>صفحه بندی</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="layout-default.html">حالت پیش فرض</a></li>
<li><a class="nav-link" href="layout-transparent.html">سایدبار بدون رنگ</a></li>
<li><a class="nav-link" href="layout-top-navigation.html">نویگیشن بالا</a></li>
</ul>
</li>
<li><a class="nav-link" href="blank.html"><i class="far fa-square"></i> <span>صفحه خالی</span></a></li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="fas fa-th"></i> <span>بوت استرپ</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="bootstrap-alert.html">آلرت</a></li>
<li><a class="nav-link" href="bootstrap-badge.html">بدج</a></li>
<li><a class="nav-link" href="bootstrap-breadcrumb.html">بردکرامپ</a></li>
<li><a class="nav-link" href="bootstrap-buttons.html">دکمه ها</a></li>
<li><a class="nav-link" href="bootstrap-card.html">کارت</a></li>
<li><a class="nav-link" href="bootstrap-carousel.html">کروسل</a></li>
<li><a class="nav-link" href="bootstrap-collapse.html">کولاپس</a></li>
<li><a class="nav-link" href="bootstrap-dropdown.html">دراپ دون</a></li>
<li><a class="nav-link" href="bootstrap-form.html">فرم</a></li>
<li><a class="nav-link" href="bootstrap-list-group.html">لیست گروه</a></li>
<li><a class="nav-link" href="bootstrap-media-object.html">مدیا ابجکت</a></li>
<li><a class="nav-link" href="bootstrap-modal.html">مودال</a></li>
<li><a class="nav-link" href="bootstrap-nav.html">نویگیشن</a></li>
<li><a class="nav-link" href="bootstrap-navbar.html">نوبار</a></li>
<li><a class="nav-link" href="bootstrap-pagination.html">پجینیشن</a></li>
<li><a class="nav-link" href="bootstrap-popover.html">پاپ اور</a></li>
<li><a class="nav-link" href="bootstrap-progress.html">پراگرس</a></li>
<li><a class="nav-link" href="bootstrap-table.html">جدول</a></li>
<li><a class="nav-link" href="bootstrap-tooltip.html">تولتیپ</a></li>
<li><a class="nav-link" href="bootstrap-typography.html">تایپوگرافی</a></li>
</ul>
</li>
<li class="menu-header">امکانات دیگر</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="fas fa-th-large"></i> <span>کامپوننت ها</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="components-gallery.html">گالری</a></li>
<li><a class="nav-link" href="components-multiple-upload.html">مولتی آپلود</a></li>
<li><a class="nav-link" href="components-tab.html">تب</a></li>
<li><a class="nav-link" href="components-table.html">جدول</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="far fa-file-alt"></i> <span>فرم ها</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="forms-advanced-form.html">فرم پیشرفته</a></li>
<li><a class="nav-link" href="forms-editor.html">ویرایشگر</a></li>
<li><a class="nav-link" href="forms-validation.html">ولیدیشن</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="fas fa-plug"></i> <span>ماژول ها</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="modules-calendar.html">تقویم</a></li>
<li><a class="nav-link" href="modules-chartjs.html">چارت ها</a></li>
<li><a class="nav-link" href="modules-datatables.html">دیتاتیبل</a></li>
<li><a class="nav-link" href="modules-flag.html">پرچم</a></li>
<li><a class="nav-link" href="modules-font-awesome.html">فونت اوسوم</a></li>
<li><a class="nav-link" href="modules-ion-icons.html">ای او ن ایکون</a></li>
<li><a class="nav-link" href="modules-owl-carousel.html">اول کراسول</a></li>
<li><a class="nav-link" href="modules-sparkline.html">اسپارک لاین</a></li>
<li><a class="nav-link" href="modules-sweet-alert.html">سویت الرت</a></li>
<li><a class="nav-link" href="modules-toastr.html">توستر</a></li>
<li><a class="nav-link" href="modules-vector-map.html">وکتور مپ</a></li>
<li><a class="nav-link" href="modules-weather-icon.html">ایکن اب و هوا</a></li>
</ul>
</li>
<li class="menu-header">صفحات</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="far fa-user"></i> <span>ثبت نام</span></a>
<ul class="dropdown-menu">
<li><a href="auth-forgot-password.html">فراموشی کلمه عبور</a></li>
<li><a href="auth-login.html">لاگین</a></li>
<li><a href="auth-register.html">ثبت نام</a></li>
<li><a href="auth-reset-password.html">بازیابی کلمه عبور</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="fas fa-exclamation"></i> <span>خطاها</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="errors-503.html">503</a></li>
<li><a class="nav-link" href="errors-403.html">403</a></li>
<li><a class="nav-link" href="errors-404.html">404</a></li>
<li><a class="nav-link" href="errors-500.html">500</a></li>
</ul>
</li>
<li><a class="nav-link" href="credits.html"><i class="fas fa-pencil-ruler"></i> <span>سازنده ها</span></a></li>
</ul>
<div class="mt-4 mb-4 p-3 hide-sidebar-mini">
<a href="https://getstisla.com/docs" class="btn btn-primary btn-lg btn-block btn-icon-split">
<i class="fas fa-rocket"></i> مستندات قالب
</a>
</div>
</aside>
</div>
<!-- Main Content -->
<div class="main-content">
<section class="section">
<div class="section-header">
<h1>مودال</h1>
<div class="section-header-breadcrumb">
<div class="breadcrumb-item active"><a href="#">داشبورد</a></div>
<div class="breadcrumb-item"><a href="#">کامپوننت بوت استرپ</a></div>
<div class="breadcrumb-item">مودال</div>
</div>
</div>
<div class="section-body text-right">
<h2 class="section-title">مودال</h2>
<p class="section-lead">مودال ها برای نمایش سریع داده ها میتونن مورد استفاده قرار بگیرن.</p>
<div class="row">
<div class="col-12 col-md-6 col-lg-6">
<div class="modal-dialog m-0" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal Template</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Save changes</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
<div class="card card-mt">
<div class="card-header">
<h4>Modal Confirm</h4>
</div>
<div class="card-body">
<p class="mb-2">You can easily change the default browser confirmation box with a bootstrap modal.</p>
<button class="btn btn-danger" data-confirm="Realy?|Do you want to continue?" data-confirm-yes="alert('Deleted :)');">Delete</button>
</div>
</div>
<div class="card">
<div class="card-header">
<h4>The Bootstrap Way</h4>
</div>
<div class="card-body">
<p class="mb-2">Use the Bootstrap method to create modal. You need to create an HTML structure for modal and the following button will trigger it.</p>
<button class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">Aw, yeah!</button>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-6">
<div class="card">
<div class="card-header">
<h4>Modal Demo</h4>
</div>
<div class="card-body">
<p class="mb-2">We've created a plugin to easily create a bootstrap modal.</p>
<button class="btn btn-primary" id="modal-1">Launch Modal</button>
</div>
</div>
<div class="card">
<div class="card-header">
<h4>Modal Center</h4>
</div>
<div class="card-body">
<p class="mb-2">You can change the modal position to center.</p>
<button class="btn btn-primary" id="modal-2">Launch Modal</button>
</div>
</div>
<div class="card">
<div class="card-header">
<h4>The Others</h4>
</div>
<div class="card-body">
<p class="mb-2">Check the <code>modal.js</code> code in the <code>dist/js/page</code> folder to get the source code.</p>
<div class="buttons">
<button class="btn btn-primary" id="modal-3">Buttons</button>
<button class="btn btn-primary" id="modal-4">Footer Background</button>
<button class="btn btn-primary" id="modal-5">Login</button>
<button class="btn btn-primary" id="modal-6">Something in the Footer</button>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<form class="modal-part" id="modal-login-part">
<p>This login form is taken from elements with <code>#modal-login-part</code> id.</p>
<div class="form-group">
<label>Username</label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">
<i class="fas fa-envelope"></i>
</div>
</div>
<input type="text" class="form-control" placeholder="Email" name="email">
</div>
</div>
<div class="form-group">
<label>Password</label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">
<i class="fas fa-lock"></i>
</div>
</div>
<input type="password" class="form-control" placeholder="Password" name="password">
</div>
</div>
<div class="form-group mb-0">
<div class="custom-control custom-checkbox">
<input type="checkbox" name="remember" class="custom-control-input" id="remember-me">
<label class="custom-control-label" for="remember-me">Remember Me</label>
</div>
</div>
</form>
<div class="modal fade" tabindex="-1" role="dialog" id="exampleModal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer bg-whitesmoke br">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
<footer class="main-footer">
<div class="footer-left">
Copyright &copy; 2018 <div class="bullet"></div> Design By <a href="https://nauval.in/">Muhamad Nauval Azhar</a>
</div>
<div class="footer-right">
</div>
</footer>
</div>
</div>
<!-- General JS Scripts -->
<script src="../assets/modules/jquery.min.js"></script>
<script src="../assets/modules/popper.js"></script>
<script src="../assets/modules/tooltip.js"></script>
<script src="../assets/modules/bootstrap/js/bootstrap.min.js"></script>
<script src="../assets/modules/nicescroll/jquery.nicescroll.min.js"></script>
<script src="../assets/modules/moment.min.js"></script>
<script src="../assets/js/stisla.js"></script>
<!-- JS Libraies -->
<script src="../assets/modules/prism/prism.js"></script>
<!-- Page Specific JS File -->
<script src="../assets/js/page/bootstrap-modal.js"></script>
<!-- Template JS File -->
<script src="../assets/js/scripts.js"></script>
<script src="../assets/js/custom.js"></script>
</body>
</html>

515
dev/rtl/bootstrap-nav.html Normal file
View File

@@ -0,0 +1,515 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no" name="viewport">
<title>Bootstrap Components &rsaquo; Nav &mdash; Stisla</title>
<!-- General CSS Files -->
<link rel="stylesheet" href="../assets/modules/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="../assets/modules/fontawesome/css/all.min.css">
<!-- CSS Libraries -->
<!-- Template CSS -->
<link rel="stylesheet" href="../assets/css/style.css">
<link rel="stylesheet" href="../assets/css/components.css">
<link rel="stylesheet" href="../assets/css/rtl.css">
</head>
<body>
<div id="app">
<div class="main-wrapper main-wrapper-1">
<div class="navbar-bg"></div>
<nav class="navbar navbar-expand-lg main-navbar">
<form class="form-inline ml-auto">
<ul class="navbar-nav ml-3">
<li><a href="#" data-toggle="sidebar" class="nav-link nav-link-lg"><i class="fas fa-bars"></i></a></li>
<li><a href="#" data-toggle="search" class="nav-link nav-link-lg d-sm-none"><i class="fas fa-search"></i></a></li>
</ul>
<div class="search-element text-right">
<input class="form-control" type="search" placeholder="جستجو" aria-label="Search" data-width="250">
<button class="btn" type="submit"><i class="fas fa-search"></i></button>
<div class="search-backdrop"></div>
<div class="search-result">
<div class="search-header">
نتیجه جستجو
</div>
<div class="search-item">
<a href="#">چگونه ناسا رو هک کنیم؟</a>
<a href="#" class="search-close"><i class="fas fa-times"></i></a>
</div>
<div class="search-item">
<a href="#">Kodinger.com</a>
<a href="#" class="search-close"><i class="fas fa-times"></i></a>
</div>
<div class="search-item">
<a href="#">پنل مدیریت</a>
<a href="#" class="search-close"><i class="fas fa-times"></i></a>
</div>
<div class="search-header">
نتایج
</div>
<div class="search-item">
<a href="#">
<img class="ml-3 rounded" width="30" src="../assets/img/products/product-3-50.png" alt="product">
آیفون s9 تولید شد
</a>
</div>
<div class="search-item">
<a href="#">
<img class="ml-3 rounded" width="30" src="../assets/img/products/product-2-50.png" alt="product">
چه شادی هایی که زیر پای انسانها سرکوب شدند
</a>
</div>
<div class="search-item">
<a href="#">
<img class="ml-3 rounded" width="30" src="../assets/img/products/product-1-50.png" alt="product">
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ.
</a>
</div>
<div class="search-header">
پروژه ها
</div>
<div class="search-item">
<a href="#">
<div class="search-icon bg-danger text-white ml-3">
<i class="fas fa-code"></i>
</div>
متریال ادمین پنل
</a>
</div>
<div class="search-item">
<a href="#">
<div class="search-icon bg-primary text-white ml-3">
<i class="fas fa-laptop"></i>
</div>
ایجاد صفحه لندینگ
</a>
</div>
</div>
</div>
</form>
<ul class="navbar-nav navbar-right">
<li class="dropdown dropdown-list-toggle"><a href="#" data-toggle="dropdown" class="nav-link nav-link-lg message-toggle beep"><i class="far fa-envelope"></i></a>
<div class="dropdown-menu dropdown-list text-right dropdown-menu-left">
<div class="dropdown-header">پیام ها
<div class="float-left">
<a href="#">علامتگذاری همه بصورت خوانده شده</a>
</div>
</div>
<div class="dropdown-list-content dropdown-list-message">
<a href="#" class="dropdown-item dropdown-item-unread">
<div class="dropdown-item-avatar">
<img alt="image" src="../assets/img/avatar/avatar-1.png" class="rounded-circle">
<div class="is-online"></div>
</div>
<div class="dropdown-item-desc text-right">
<b>مهدی خانزادی</b>
<p>سلام داداچ!</p>
<div class="time">۱۰ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item dropdown-item-unread">
<div class="dropdown-item-avatar">
<img alt="image" src="../assets/img/avatar/avatar-2.png" class="rounded-circle">
</div>
<div class="dropdown-item-desc">
<b>مهیار انصاری</b>
<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ.</p>
<div class="time">۱۲ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item dropdown-item-unread">
<div class="dropdown-item-avatar">
<img alt="image" src="../assets/img/avatar/avatar-3.png" class="rounded-circle">
<div class="is-online"></div>
</div>
<div class="dropdown-item-desc">
<b>آمیتا پاچان</b>
<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ.</p>
<div class="time">۱۲ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-avatar">
<img alt="image" src="../assets/img/avatar/avatar-4.png" class="rounded-circle">
</div>
<div class="dropdown-item-desc">
<b>مهدی خانزادی</b>
<p>سلام سیستم پشتیبانی پاترونیک رو استفاده کنید</p>
<div class="time">۱۶ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-avatar">
<img alt="image" src="../assets/img/avatar/avatar-5.png" class="rounded-circle">
</div>
<div class="dropdown-item-desc">
<b>لورم ایپسوم</b>
<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ.</p>
<div class="time">دیروز</div>
</div>
</a>
</div>
<div class="dropdown-footer text-center">
<a href="#"> دیدن همه پیام ها<i class="fas fa-chevron-left"></i></a>
</div>
</div>
</li>
<li class="dropdown dropdown-list-toggle"><a href="#" data-toggle="dropdown" class="nav-link notification-toggle nav-link-lg beep"><i class="far fa-bell"></i></a>
<div class="dropdown-menu dropdown-list dropdown-menu-left">
<div class="dropdown-header text-right">نوتیفیکیشن ها
<div class="float-left">
<a href="#"> علامتگذاری همه بصورت خوانده شده</a>
</div>
</div>
<div class="dropdown-list-content dropdown-list-icons text-right">
<a href="#" class="dropdown-item dropdown-item-unread">
<div class="dropdown-item-icon bg-primary text-white">
<i class="fas fa-code"></i>
</div>
<div class="dropdown-item-desc">
قالب مدیریتی متریال اپدیت جدید داد!
<div class="time text-primary">۲ دقیقه پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-icon bg-info text-white">
<i class="far fa-user"></i>
</div>
<div class="dropdown-item-desc">
<b>شما</b> و <b>مهیار انصاری</b> هم اکنون همکار هستید.
<div class="time">۱۰ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-icon bg-success text-white">
<i class="fas fa-check"></i>
</div>
<div class="dropdown-item-desc">
<b>مهدی خانزادی</b> اطلاعات مرتبط با <b>قالب</b> را <b>آپلود کرد.</b>
<div class="time">۱۲ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-icon bg-danger text-white">
<i class="fas fa-exclamation-triangle"></i>
</div>
<div class="dropdown-item-desc">
فضای هارد دیسک پر شده است لطفا آن را خالی کنید.
<div class="time">۱۷ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-icon bg-info text-white">
<i class="fas fa-bell"></i>
</div>
<div class="dropdown-item-desc">
به قالب متریال خوش آمدید
<div class="time">دیروز</div>
</div>
</a>
</div>
<div class="dropdown-footer text-center">
<a href="#">
<span>نمایش همه</span>
<i class="fas fa-chevron-left"></i>
</a>
</div>
</div>
</li>
<li class="dropdown"><a href="#" data-toggle="dropdown" class="nav-link dropdown-toggle nav-link-lg nav-link-user">
<img alt="image" src="../assets/img/avatar/avatar-1.png" class="rounded-circle mr-1">
<div class="d-sm-none d-lg-inline-block">سلام مهدی</div></a>
<div class="dropdown-menu dropdown-menu-right text-right">
<div class="dropdown-title text-center">۵ دقیقه پیش لاگین کردین</div>
<a href="features-profile.html" class="dropdown-item has-icon">
<span>پروفایل</span>
<i class="far fa-user"></i>
</a>
<a href="features-activities.html" class="dropdown-item has-icon">
<span>فعالیت ها</span>
<i class="fas fa-bolt"></i>
</a>
<a href="features-settings.html" class="dropdown-item has-icon">
<span>تنظیمات</span>
<i class="fas fa-cog"></i>
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item has-icon text-danger">
<span>خروج</span>
<i class="fas fa-sign-out-alt"></i>
</a>
</div>
</li>
</ul>
</nav>
<div class="main-sidebar sidebar-style-2">
<aside id="sidebar-wrapper">
<div class="sidebar-brand">
<a href="index.html">مدیریت پاترونیک</a>
</div>
<div class="sidebar-brand sidebar-brand-sm">
<a href="index.html">مدیریت فروش</a>
</div>
<ul class="sidebar-menu">
<li class="menu-header">داشبورد</li>
<li class="dropdown active">
<a href="#" class="nav-link has-dropdown"><i class="fas fa-fire"></i><span>داشبورد</span></a>
<ul class="dropdown-menu">
<li class=active><a class="nav-link" href="index-0.html">داشبورد عمومی</a></li>
<li><a class="nav-link" href="index.html">داشبورد فروش محصولات</a></li>
</ul>
</li>
<li class="menu-header">امکانات بیشتر</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown" data-toggle="dropdown"><i class="fas fa-columns"></i> <span>صفحه بندی</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="layout-default.html">حالت پیش فرض</a></li>
<li><a class="nav-link" href="layout-transparent.html">سایدبار بدون رنگ</a></li>
<li><a class="nav-link" href="layout-top-navigation.html">نویگیشن بالا</a></li>
</ul>
</li>
<li><a class="nav-link" href="blank.html"><i class="far fa-square"></i> <span>صفحه خالی</span></a></li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="fas fa-th"></i> <span>بوت استرپ</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="bootstrap-alert.html">آلرت</a></li>
<li><a class="nav-link" href="bootstrap-badge.html">بدج</a></li>
<li><a class="nav-link" href="bootstrap-breadcrumb.html">بردکرامپ</a></li>
<li><a class="nav-link" href="bootstrap-buttons.html">دکمه ها</a></li>
<li><a class="nav-link" href="bootstrap-card.html">کارت</a></li>
<li><a class="nav-link" href="bootstrap-carousel.html">کروسل</a></li>
<li><a class="nav-link" href="bootstrap-collapse.html">کولاپس</a></li>
<li><a class="nav-link" href="bootstrap-dropdown.html">دراپ دون</a></li>
<li><a class="nav-link" href="bootstrap-form.html">فرم</a></li>
<li><a class="nav-link" href="bootstrap-list-group.html">لیست گروه</a></li>
<li><a class="nav-link" href="bootstrap-media-object.html">مدیا ابجکت</a></li>
<li><a class="nav-link" href="bootstrap-modal.html">مودال</a></li>
<li><a class="nav-link" href="bootstrap-nav.html">نویگیشن</a></li>
<li><a class="nav-link" href="bootstrap-navbar.html">نوبار</a></li>
<li><a class="nav-link" href="bootstrap-pagination.html">پجینیشن</a></li>
<li><a class="nav-link" href="bootstrap-popover.html">پاپ اور</a></li>
<li><a class="nav-link" href="bootstrap-progress.html">پراگرس</a></li>
<li><a class="nav-link" href="bootstrap-table.html">جدول</a></li>
<li><a class="nav-link" href="bootstrap-tooltip.html">تولتیپ</a></li>
<li><a class="nav-link" href="bootstrap-typography.html">تایپوگرافی</a></li>
</ul>
</li>
<li class="menu-header">امکانات دیگر</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="fas fa-th-large"></i> <span>کامپوننت ها</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="components-gallery.html">گالری</a></li>
<li><a class="nav-link" href="components-multiple-upload.html">مولتی آپلود</a></li>
<li><a class="nav-link" href="components-tab.html">تب</a></li>
<li><a class="nav-link" href="components-table.html">جدول</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="far fa-file-alt"></i> <span>فرم ها</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="forms-advanced-form.html">فرم پیشرفته</a></li>
<li><a class="nav-link" href="forms-editor.html">ویرایشگر</a></li>
<li><a class="nav-link" href="forms-validation.html">ولیدیشن</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="fas fa-plug"></i> <span>ماژول ها</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="modules-calendar.html">تقویم</a></li>
<li><a class="nav-link" href="modules-chartjs.html">چارت ها</a></li>
<li><a class="nav-link" href="modules-datatables.html">دیتاتیبل</a></li>
<li><a class="nav-link" href="modules-flag.html">پرچم</a></li>
<li><a class="nav-link" href="modules-font-awesome.html">فونت اوسوم</a></li>
<li><a class="nav-link" href="modules-ion-icons.html">ای او ن ایکون</a></li>
<li><a class="nav-link" href="modules-owl-carousel.html">اول کراسول</a></li>
<li><a class="nav-link" href="modules-sparkline.html">اسپارک لاین</a></li>
<li><a class="nav-link" href="modules-sweet-alert.html">سویت الرت</a></li>
<li><a class="nav-link" href="modules-toastr.html">توستر</a></li>
<li><a class="nav-link" href="modules-vector-map.html">وکتور مپ</a></li>
<li><a class="nav-link" href="modules-weather-icon.html">ایکن اب و هوا</a></li>
</ul>
</li>
<li class="menu-header">صفحات</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="far fa-user"></i> <span>ثبت نام</span></a>
<ul class="dropdown-menu">
<li><a href="auth-forgot-password.html">فراموشی کلمه عبور</a></li>
<li><a href="auth-login.html">لاگین</a></li>
<li><a href="auth-register.html">ثبت نام</a></li>
<li><a href="auth-reset-password.html">بازیابی کلمه عبور</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="fas fa-exclamation"></i> <span>خطاها</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="errors-503.html">503</a></li>
<li><a class="nav-link" href="errors-403.html">403</a></li>
<li><a class="nav-link" href="errors-404.html">404</a></li>
<li><a class="nav-link" href="errors-500.html">500</a></li>
</ul>
</li>
<li><a class="nav-link" href="credits.html"><i class="fas fa-pencil-ruler"></i> <span>سازنده ها</span></a></li>
</ul>
<div class="mt-4 mb-4 p-3 hide-sidebar-mini">
<a href="https://getstisla.com/docs" class="btn btn-primary btn-lg btn-block btn-icon-split">
<i class="fas fa-rocket"></i> مستندات قالب
</a>
</div>
</aside>
</div>
<!-- Main Content -->
<div class="main-content">
<section class="section">
<div class="section-header">
<h1>نویگیشن</h1>
<div class="section-header-breadcrumb">
<div class="breadcrumb-item active"><a href="#">داشبورد</a></div>
<div class="breadcrumb-item"><a href="#">کامپوننت بوت استرپ</a></div>
<div class="breadcrumb-item">نویگیشن</div>
</div>
</div>
<div class="section-body text-right">
<h2 class="section-title">نویگیشن</h2>
<p class="section-lead">اینجا میتونید نویگیشن ها رو ببینید.</p>
<div class="row">
<div class="col-12 col-md-6 col-lg-6">
<div class="card">
<div class="card-header">
<h4>Base Nav</h4>
</div>
<div class="card-body">
<ul class="nav">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</div>
<div class="card">
<div class="card-header">
<h4>Vertical</h4>
</div>
<div class="card-body">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-6">
<div class="card">
<div class="card-header">
<h4>Tabs</h4>
</div>
<div class="card-body">
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</div>
<div class="card">
<div class="card-header">
<h4>Pills</h4>
</div>
<div class="card-body">
<div class="section-title mt-0">Simple</div>
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<div class="section-title">Icon</div>
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" href="#"><i class="fas fa-home"></i> Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="fas fa-user"></i> Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="fas fa-cog"></i> Setting</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<footer class="main-footer">
<div class="footer-left">
Copyright &copy; 2018 <div class="bullet"></div> Design By <a href="https://nauval.in/">Muhamad Nauval Azhar</a>
</div>
<div class="footer-right">
</div>
</footer>
</div>
</div>
<!-- General JS Scripts -->
<script src="../assets/modules/jquery.min.js"></script>
<script src="../assets/modules/popper.js"></script>
<script src="../assets/modules/tooltip.js"></script>
<script src="../assets/modules/bootstrap/js/bootstrap.min.js"></script>
<script src="../assets/modules/nicescroll/jquery.nicescroll.min.js"></script>
<script src="../assets/modules/moment.min.js"></script>
<script src="../assets/js/stisla.js"></script>
<!-- JS Libraies -->
<!-- Page Specific JS File -->
<!-- Template JS File -->
<script src="../assets/js/scripts.js"></script>
<script src="../assets/js/custom.js"></script>
</body>
</html>

View File

@@ -0,0 +1,501 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no" name="viewport">
<meta content="patronic admin panel, patronic, patronic group, Kodinger.com" name="keywords">
<title>Bootstrap Components &rsaquo; Navbar &mdash; Stisla</title>
<!-- General CSS Files -->
<link rel="stylesheet" href="../assets/modules/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="../assets/modules/fontawesome/css/all.min.css">
<!-- CSS Libraries -->
<!-- Template CSS -->
<link rel="stylesheet" href="../assets/css/style.css">
<link rel="stylesheet" href="../assets/css/components.css">
<link rel="stylesheet" href="../assets/css/rtl.css">
</head>
<body>
<div id="app">
<div class="main-wrapper main-wrapper-1">
<div class="navbar-bg"></div>
<nav class="navbar navbar-expand-lg main-navbar">
<form class="form-inline ml-auto">
<ul class="navbar-nav ml-3">
<li><a href="#" data-toggle="sidebar" class="nav-link nav-link-lg"><i class="fas fa-bars"></i></a></li>
<li><a href="#" data-toggle="search" class="nav-link nav-link-lg d-sm-none"><i class="fas fa-search"></i></a></li>
</ul>
<div class="search-element text-right">
<input class="form-control" type="search" placeholder="جستجو" aria-label="Search" data-width="250">
<button class="btn" type="submit"><i class="fas fa-search"></i></button>
<div class="search-backdrop"></div>
<div class="search-result">
<div class="search-header">
نتیجه جستجو
</div>
<div class="search-item">
<a href="#">چگونه ناسا رو هک کنیم؟</a>
<a href="#" class="search-close"><i class="fas fa-times"></i></a>
</div>
<div class="search-item">
<a href="#">Kodinger.com</a>
<a href="#" class="search-close"><i class="fas fa-times"></i></a>
</div>
<div class="search-item">
<a href="#">پنل مدیریت</a>
<a href="#" class="search-close"><i class="fas fa-times"></i></a>
</div>
<div class="search-header">
نتایج
</div>
<div class="search-item">
<a href="#">
<img class="ml-3 rounded" width="30" src="../assets/img/products/product-3-50.png" alt="product">
آیفون s9 تولید شد
</a>
</div>
<div class="search-item">
<a href="#">
<img class="ml-3 rounded" width="30" src="../assets/img/products/product-2-50.png" alt="product">
چه شادی هایی که زیر پای انسانها سرکوب شدند
</a>
</div>
<div class="search-item">
<a href="#">
<img class="ml-3 rounded" width="30" src="../assets/img/products/product-1-50.png" alt="product">
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ.
</a>
</div>
<div class="search-header">
پروژه ها
</div>
<div class="search-item">
<a href="#">
<div class="search-icon bg-danger text-white ml-3">
<i class="fas fa-code"></i>
</div>
متریال ادمین پنل
</a>
</div>
<div class="search-item">
<a href="#">
<div class="search-icon bg-primary text-white ml-3">
<i class="fas fa-laptop"></i>
</div>
ایجاد صفحه لندینگ
</a>
</div>
</div>
</div>
</form>
<ul class="navbar-nav navbar-right">
<li class="dropdown dropdown-list-toggle"><a href="#" data-toggle="dropdown" class="nav-link nav-link-lg message-toggle beep"><i class="far fa-envelope"></i></a>
<div class="dropdown-menu dropdown-list text-right dropdown-menu-left">
<div class="dropdown-header">پیام ها
<div class="float-left">
<a href="#">علامتگذاری همه بصورت خوانده شده</a>
</div>
</div>
<div class="dropdown-list-content dropdown-list-message">
<a href="#" class="dropdown-item dropdown-item-unread">
<div class="dropdown-item-avatar">
<img alt="image" src="../assets/img/avatar/avatar-1.png" class="rounded-circle">
<div class="is-online"></div>
</div>
<div class="dropdown-item-desc text-right">
<b>مهدی خانزادی</b>
<p>سلام داداچ!</p>
<div class="time">۱۰ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item dropdown-item-unread">
<div class="dropdown-item-avatar">
<img alt="image" src="../assets/img/avatar/avatar-2.png" class="rounded-circle">
</div>
<div class="dropdown-item-desc">
<b>مهیار انصاری</b>
<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ.</p>
<div class="time">۱۲ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item dropdown-item-unread">
<div class="dropdown-item-avatar">
<img alt="image" src="../assets/img/avatar/avatar-3.png" class="rounded-circle">
<div class="is-online"></div>
</div>
<div class="dropdown-item-desc">
<b>آمیتا پاچان</b>
<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ.</p>
<div class="time">۱۲ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-avatar">
<img alt="image" src="../assets/img/avatar/avatar-4.png" class="rounded-circle">
</div>
<div class="dropdown-item-desc">
<b>مهدی خانزادی</b>
<p>سلام سیستم پشتیبانی پاترونیک رو استفاده کنید</p>
<div class="time">۱۶ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-avatar">
<img alt="image" src="../assets/img/avatar/avatar-5.png" class="rounded-circle">
</div>
<div class="dropdown-item-desc">
<b>لورم ایپسوم</b>
<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ.</p>
<div class="time">دیروز</div>
</div>
</a>
</div>
<div class="dropdown-footer text-center">
<a href="#"> دیدن همه پیام ها<i class="fas fa-chevron-left"></i></a>
</div>
</div>
</li>
<li class="dropdown dropdown-list-toggle"><a href="#" data-toggle="dropdown" class="nav-link notification-toggle nav-link-lg beep"><i class="far fa-bell"></i></a>
<div class="dropdown-menu dropdown-list dropdown-menu-left">
<div class="dropdown-header text-right">نوتیفیکیشن ها
<div class="float-left">
<a href="#"> علامتگذاری همه بصورت خوانده شده</a>
</div>
</div>
<div class="dropdown-list-content dropdown-list-icons text-right">
<a href="#" class="dropdown-item dropdown-item-unread">
<div class="dropdown-item-icon bg-primary text-white">
<i class="fas fa-code"></i>
</div>
<div class="dropdown-item-desc">
قالب مدیریتی متریال اپدیت جدید داد!
<div class="time text-primary">۲ دقیقه پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-icon bg-info text-white">
<i class="far fa-user"></i>
</div>
<div class="dropdown-item-desc">
<b>شما</b> و <b>مهیار انصاری</b> هم اکنون همکار هستید.
<div class="time">۱۰ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-icon bg-success text-white">
<i class="fas fa-check"></i>
</div>
<div class="dropdown-item-desc">
<b>مهدی خانزادی</b> اطلاعات مرتبط با <b>قالب</b> را <b>آپلود کرد.</b>
<div class="time">۱۲ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-icon bg-danger text-white">
<i class="fas fa-exclamation-triangle"></i>
</div>
<div class="dropdown-item-desc">
فضای هارد دیسک پر شده است لطفا آن را خالی کنید.
<div class="time">۱۷ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-icon bg-info text-white">
<i class="fas fa-bell"></i>
</div>
<div class="dropdown-item-desc">
به قالب متریال خوش آمدید
<div class="time">دیروز</div>
</div>
</a>
</div>
<div class="dropdown-footer text-center">
<a href="#">
<span>نمایش همه</span>
<i class="fas fa-chevron-left"></i>
</a>
</div>
</div>
</li>
<li class="dropdown"><a href="#" data-toggle="dropdown" class="nav-link dropdown-toggle nav-link-lg nav-link-user">
<img alt="image" src="../assets/img/avatar/avatar-1.png" class="rounded-circle mr-1">
<div class="d-sm-none d-lg-inline-block">سلام مهدی</div></a>
<div class="dropdown-menu dropdown-menu-right text-right">
<div class="dropdown-title text-center">۵ دقیقه پیش لاگین کردین</div>
<a href="features-profile.html" class="dropdown-item has-icon">
<span>پروفایل</span>
<i class="far fa-user"></i>
</a>
<a href="features-activities.html" class="dropdown-item has-icon">
<span>فعالیت ها</span>
<i class="fas fa-bolt"></i>
</a>
<a href="features-settings.html" class="dropdown-item has-icon">
<span>تنظیمات</span>
<i class="fas fa-cog"></i>
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item has-icon text-danger">
<span>خروج</span>
<i class="fas fa-sign-out-alt"></i>
</a>
</div>
</li>
</ul>
</nav>
<div class="main-sidebar sidebar-style-2">
<aside id="sidebar-wrapper">
<div class="sidebar-brand">
<a href="index.html">مدیریت پاترونیک</a>
</div>
<div class="sidebar-brand sidebar-brand-sm">
<a href="index.html">مدیریت فروش</a>
</div>
<ul class="sidebar-menu">
<li class="menu-header">داشبورد</li>
<li class="dropdown active">
<a href="#" class="nav-link has-dropdown"><i class="fas fa-fire"></i><span>داشبورد</span></a>
<ul class="dropdown-menu">
<li class=active><a class="nav-link" href="index-0.html">داشبورد عمومی</a></li>
<li><a class="nav-link" href="index.html">داشبورد فروش محصولات</a></li>
</ul>
</li>
<li class="menu-header">امکانات بیشتر</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown" data-toggle="dropdown"><i class="fas fa-columns"></i> <span>صفحه بندی</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="layout-default.html">حالت پیش فرض</a></li>
<li><a class="nav-link" href="layout-transparent.html">سایدبار بدون رنگ</a></li>
<li><a class="nav-link" href="layout-top-navigation.html">نویگیشن بالا</a></li>
</ul>
</li>
<li><a class="nav-link" href="blank.html"><i class="far fa-square"></i> <span>صفحه خالی</span></a></li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="fas fa-th"></i> <span>بوت استرپ</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="bootstrap-alert.html">آلرت</a></li>
<li><a class="nav-link" href="bootstrap-badge.html">بدج</a></li>
<li><a class="nav-link" href="bootstrap-breadcrumb.html">بردکرامپ</a></li>
<li><a class="nav-link" href="bootstrap-buttons.html">دکمه ها</a></li>
<li><a class="nav-link" href="bootstrap-card.html">کارت</a></li>
<li><a class="nav-link" href="bootstrap-carousel.html">کروسل</a></li>
<li><a class="nav-link" href="bootstrap-collapse.html">کولاپس</a></li>
<li><a class="nav-link" href="bootstrap-dropdown.html">دراپ دون</a></li>
<li><a class="nav-link" href="bootstrap-form.html">فرم</a></li>
<li><a class="nav-link" href="bootstrap-list-group.html">لیست گروه</a></li>
<li><a class="nav-link" href="bootstrap-media-object.html">مدیا ابجکت</a></li>
<li><a class="nav-link" href="bootstrap-modal.html">مودال</a></li>
<li><a class="nav-link" href="bootstrap-nav.html">نویگیشن</a></li>
<li><a class="nav-link" href="bootstrap-navbar.html">نوبار</a></li>
<li><a class="nav-link" href="bootstrap-pagination.html">پجینیشن</a></li>
<li><a class="nav-link" href="bootstrap-popover.html">پاپ اور</a></li>
<li><a class="nav-link" href="bootstrap-progress.html">پراگرس</a></li>
<li><a class="nav-link" href="bootstrap-table.html">جدول</a></li>
<li><a class="nav-link" href="bootstrap-tooltip.html">تولتیپ</a></li>
<li><a class="nav-link" href="bootstrap-typography.html">تایپوگرافی</a></li>
</ul>
</li>
<li class="menu-header">امکانات دیگر</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="fas fa-th-large"></i> <span>کامپوننت ها</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="components-gallery.html">گالری</a></li>
<li><a class="nav-link" href="components-multiple-upload.html">مولتی آپلود</a></li>
<li><a class="nav-link" href="components-tab.html">تب</a></li>
<li><a class="nav-link" href="components-table.html">جدول</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="far fa-file-alt"></i> <span>فرم ها</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="forms-advanced-form.html">فرم پیشرفته</a></li>
<li><a class="nav-link" href="forms-editor.html">ویرایشگر</a></li>
<li><a class="nav-link" href="forms-validation.html">ولیدیشن</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="fas fa-plug"></i> <span>ماژول ها</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="modules-calendar.html">تقویم</a></li>
<li><a class="nav-link" href="modules-chartjs.html">چارت ها</a></li>
<li><a class="nav-link" href="modules-datatables.html">دیتاتیبل</a></li>
<li><a class="nav-link" href="modules-flag.html">پرچم</a></li>
<li><a class="nav-link" href="modules-font-awesome.html">فونت اوسوم</a></li>
<li><a class="nav-link" href="modules-ion-icons.html">ای او ن ایکون</a></li>
<li><a class="nav-link" href="modules-owl-carousel.html">اول کراسول</a></li>
<li><a class="nav-link" href="modules-sparkline.html">اسپارک لاین</a></li>
<li><a class="nav-link" href="modules-sweet-alert.html">سویت الرت</a></li>
<li><a class="nav-link" href="modules-toastr.html">توستر</a></li>
<li><a class="nav-link" href="modules-vector-map.html">وکتور مپ</a></li>
<li><a class="nav-link" href="modules-weather-icon.html">ایکن اب و هوا</a></li>
</ul>
</li>
<li class="menu-header">صفحات</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="far fa-user"></i> <span>ثبت نام</span></a>
<ul class="dropdown-menu">
<li><a href="auth-forgot-password.html">فراموشی کلمه عبور</a></li>
<li><a href="auth-login.html">لاگین</a></li>
<li><a href="auth-register.html">ثبت نام</a></li>
<li><a href="auth-reset-password.html">بازیابی کلمه عبور</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="fas fa-exclamation"></i> <span>خطاها</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="errors-503.html">503</a></li>
<li><a class="nav-link" href="errors-403.html">403</a></li>
<li><a class="nav-link" href="errors-404.html">404</a></li>
<li><a class="nav-link" href="errors-500.html">500</a></li>
</ul>
</li>
<li><a class="nav-link" href="credits.html"><i class="fas fa-pencil-ruler"></i> <span>سازنده ها</span></a></li>
</ul>
<div class="mt-4 mb-4 p-3 hide-sidebar-mini">
<a href="https://getstisla.com/docs" class="btn btn-primary btn-lg btn-block btn-icon-split">
<i class="fas fa-rocket"></i> مستندات قالب
</a>
</div>
</aside>
</div>
<!-- Main Content -->
<div class="main-content">
<section class="section">
<div class="section-header">
<h1>نوبار</h1>
<div class="section-header-breadcrumb">
<div class="breadcrumb-item active"><a href="#">داشبورد</a></div>
<div class="breadcrumb-item"><a href="#">کامپوننت بوت استرپ</a></div>
<div class="breadcrumb-item">نوبار</div>
</div>
</div>
<div class="section-body text-right">
<h2 class="section-title">نوبار</h2>
<p class="section-lead">اینجا میتونید نوبار رو ببینید.</p>
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header">
<h4>Brand</h4>
</div>
<div class="card-body">
<nav class="navbar bg-primary">
<a class="navbar-brand" href="#">My App</a>
</nav>
</div>
</div>
<div class="card">
<div class="card-header">
<h4>Items</h4>
</div>
<div class="card-body">
<nav class="navbar navbar-expand-lg bg-primary">
<a class="navbar-brand" href="#">My App</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
<div class="col-12">
<div class="card">
<div class="card-header">
<h4>Form</h4>
</div>
<div class="card-body">
<nav class="navbar bg-primary">
<a class="navbar-brand" href="#">My App</a>
<form class="form-inline">
<input class="form-control" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-dark" type="submit">Search</button>
</form>
</nav>
</div>
</div>
<div class="card">
<div class="card-header">
<h4>Text</h4>
</div>
<div class="card-body">
<nav class="navbar navbar-expand-lg bg-primary">
<a class="navbar-brand" href="#">My App</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
</ul>
<span class="navbar-text">
Navbar text with an inline element
</span>
</div>
</nav>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<footer class="main-footer">
<div class="footer-left">
Copyright &copy; 2018 <div class="bullet"></div> Design By <a href="https://nauval.in/">Muhamad Nauval Azhar</a>
</div>
<div class="footer-right">
</div>
</footer>
</div>
</div>
<!-- General JS Scripts -->
<script src="../assets/modules/jquery.min.js"></script>
<script src="../assets/modules/popper.js"></script>
<script src="../assets/modules/tooltip.js"></script>
<script src="../assets/modules/bootstrap/js/bootstrap.min.js"></script>
<script src="../assets/modules/nicescroll/jquery.nicescroll.min.js"></script>
<script src="../assets/modules/moment.min.js"></script>
<script src="../assets/js/stisla.js"></script>
<!-- JS Libraies -->
<!-- Page Specific JS File -->
<!-- Template JS File -->
<script src="../assets/js/scripts.js"></script>
<script src="../assets/js/custom.js"></script>
</body>
</html>

View File

@@ -0,0 +1,510 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no" name="viewport">
<meta content="patronic admin panel, patronic, patronic group, Kodinger.com" name="keywords">
<title>Bootstrap Components &rsaquo; Pagination &mdash; Stisla</title>
<!-- General CSS Files -->
<link rel="stylesheet" href="../assets/modules/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="../assets/modules/fontawesome/css/all.min.css">
<!-- CSS Libraries -->
<!-- Template CSS -->
<link rel="stylesheet" href="../assets/css/style.css">
<link rel="stylesheet" href="../assets/css/components.css">
<link rel="stylesheet" href="../assets/css/rtl.css">
</head>
<body>
<div id="app">
<div class="main-wrapper main-wrapper-1">
<div class="navbar-bg"></div>
<nav class="navbar navbar-expand-lg main-navbar">
<form class="form-inline ml-auto">
<ul class="navbar-nav ml-3">
<li><a href="#" data-toggle="sidebar" class="nav-link nav-link-lg"><i class="fas fa-bars"></i></a></li>
<li><a href="#" data-toggle="search" class="nav-link nav-link-lg d-sm-none"><i class="fas fa-search"></i></a></li>
</ul>
<div class="search-element text-right">
<input class="form-control" type="search" placeholder="جستجو" aria-label="Search" data-width="250">
<button class="btn" type="submit"><i class="fas fa-search"></i></button>
<div class="search-backdrop"></div>
<div class="search-result">
<div class="search-header">
نتیجه جستجو
</div>
<div class="search-item">
<a href="#">چگونه ناسا رو هک کنیم؟</a>
<a href="#" class="search-close"><i class="fas fa-times"></i></a>
</div>
<div class="search-item">
<a href="#">Kodinger.com</a>
<a href="#" class="search-close"><i class="fas fa-times"></i></a>
</div>
<div class="search-item">
<a href="#">پنل مدیریت</a>
<a href="#" class="search-close"><i class="fas fa-times"></i></a>
</div>
<div class="search-header">
نتایج
</div>
<div class="search-item">
<a href="#">
<img class="ml-3 rounded" width="30" src="../assets/img/products/product-3-50.png" alt="product">
آیفون s9 تولید شد
</a>
</div>
<div class="search-item">
<a href="#">
<img class="ml-3 rounded" width="30" src="../assets/img/products/product-2-50.png" alt="product">
چه شادی هایی که زیر پای انسانها سرکوب شدند
</a>
</div>
<div class="search-item">
<a href="#">
<img class="ml-3 rounded" width="30" src="../assets/img/products/product-1-50.png" alt="product">
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ.
</a>
</div>
<div class="search-header">
پروژه ها
</div>
<div class="search-item">
<a href="#">
<div class="search-icon bg-danger text-white ml-3">
<i class="fas fa-code"></i>
</div>
متریال ادمین پنل
</a>
</div>
<div class="search-item">
<a href="#">
<div class="search-icon bg-primary text-white ml-3">
<i class="fas fa-laptop"></i>
</div>
ایجاد صفحه لندینگ
</a>
</div>
</div>
</div>
</form>
<ul class="navbar-nav navbar-right">
<li class="dropdown dropdown-list-toggle"><a href="#" data-toggle="dropdown" class="nav-link nav-link-lg message-toggle beep"><i class="far fa-envelope"></i></a>
<div class="dropdown-menu dropdown-list text-right dropdown-menu-left">
<div class="dropdown-header">پیام ها
<div class="float-left">
<a href="#">علامتگذاری همه بصورت خوانده شده</a>
</div>
</div>
<div class="dropdown-list-content dropdown-list-message">
<a href="#" class="dropdown-item dropdown-item-unread">
<div class="dropdown-item-avatar">
<img alt="image" src="../assets/img/avatar/avatar-1.png" class="rounded-circle">
<div class="is-online"></div>
</div>
<div class="dropdown-item-desc text-right">
<b>مهدی خانزادی</b>
<p>سلام داداچ!</p>
<div class="time">۱۰ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item dropdown-item-unread">
<div class="dropdown-item-avatar">
<img alt="image" src="../assets/img/avatar/avatar-2.png" class="rounded-circle">
</div>
<div class="dropdown-item-desc">
<b>مهیار انصاری</b>
<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ.</p>
<div class="time">۱۲ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item dropdown-item-unread">
<div class="dropdown-item-avatar">
<img alt="image" src="../assets/img/avatar/avatar-3.png" class="rounded-circle">
<div class="is-online"></div>
</div>
<div class="dropdown-item-desc">
<b>آمیتا پاچان</b>
<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ.</p>
<div class="time">۱۲ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-avatar">
<img alt="image" src="../assets/img/avatar/avatar-4.png" class="rounded-circle">
</div>
<div class="dropdown-item-desc">
<b>مهدی خانزادی</b>
<p>سلام سیستم پشتیبانی پاترونیک رو استفاده کنید</p>
<div class="time">۱۶ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-avatar">
<img alt="image" src="../assets/img/avatar/avatar-5.png" class="rounded-circle">
</div>
<div class="dropdown-item-desc">
<b>لورم ایپسوم</b>
<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ.</p>
<div class="time">دیروز</div>
</div>
</a>
</div>
<div class="dropdown-footer text-center">
<a href="#"> دیدن همه پیام ها<i class="fas fa-chevron-left"></i></a>
</div>
</div>
</li>
<li class="dropdown dropdown-list-toggle"><a href="#" data-toggle="dropdown" class="nav-link notification-toggle nav-link-lg beep"><i class="far fa-bell"></i></a>
<div class="dropdown-menu dropdown-list dropdown-menu-left">
<div class="dropdown-header text-right">نوتیفیکیشن ها
<div class="float-left">
<a href="#"> علامتگذاری همه بصورت خوانده شده</a>
</div>
</div>
<div class="dropdown-list-content dropdown-list-icons text-right">
<a href="#" class="dropdown-item dropdown-item-unread">
<div class="dropdown-item-icon bg-primary text-white">
<i class="fas fa-code"></i>
</div>
<div class="dropdown-item-desc">
قالب مدیریتی متریال اپدیت جدید داد!
<div class="time text-primary">۲ دقیقه پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-icon bg-info text-white">
<i class="far fa-user"></i>
</div>
<div class="dropdown-item-desc">
<b>شما</b> و <b>مهیار انصاری</b> هم اکنون همکار هستید.
<div class="time">۱۰ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-icon bg-success text-white">
<i class="fas fa-check"></i>
</div>
<div class="dropdown-item-desc">
<b>مهدی خانزادی</b> اطلاعات مرتبط با <b>قالب</b> را <b>آپلود کرد.</b>
<div class="time">۱۲ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-icon bg-danger text-white">
<i class="fas fa-exclamation-triangle"></i>
</div>
<div class="dropdown-item-desc">
فضای هارد دیسک پر شده است لطفا آن را خالی کنید.
<div class="time">۱۷ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-icon bg-info text-white">
<i class="fas fa-bell"></i>
</div>
<div class="dropdown-item-desc">
به قالب متریال خوش آمدید
<div class="time">دیروز</div>
</div>
</a>
</div>
<div class="dropdown-footer text-center">
<a href="#">
<span>نمایش همه</span>
<i class="fas fa-chevron-left"></i>
</a>
</div>
</div>
</li>
<li class="dropdown"><a href="#" data-toggle="dropdown" class="nav-link dropdown-toggle nav-link-lg nav-link-user">
<img alt="image" src="../assets/img/avatar/avatar-1.png" class="rounded-circle mr-1">
<div class="d-sm-none d-lg-inline-block">سلام مهدی</div></a>
<div class="dropdown-menu dropdown-menu-right text-right">
<div class="dropdown-title text-center">۵ دقیقه پیش لاگین کردین</div>
<a href="features-profile.html" class="dropdown-item has-icon">
<span>پروفایل</span>
<i class="far fa-user"></i>
</a>
<a href="features-activities.html" class="dropdown-item has-icon">
<span>فعالیت ها</span>
<i class="fas fa-bolt"></i>
</a>
<a href="features-settings.html" class="dropdown-item has-icon">
<span>تنظیمات</span>
<i class="fas fa-cog"></i>
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item has-icon text-danger">
<span>خروج</span>
<i class="fas fa-sign-out-alt"></i>
</a>
</div>
</li>
</ul>
</nav>
<div class="main-sidebar sidebar-style-2">
<aside id="sidebar-wrapper">
<div class="sidebar-brand">
<a href="index.html">مدیریت پاترونیک</a>
</div>
<div class="sidebar-brand sidebar-brand-sm">
<a href="index.html">مدیریت فروش</a>
</div>
<ul class="sidebar-menu">
<li class="menu-header">داشبورد</li>
<li class="dropdown active">
<a href="#" class="nav-link has-dropdown"><i class="fas fa-fire"></i><span>داشبورد</span></a>
<ul class="dropdown-menu">
<li class=active><a class="nav-link" href="index-0.html">داشبورد عمومی</a></li>
<li><a class="nav-link" href="index.html">داشبورد فروش محصولات</a></li>
</ul>
</li>
<li class="menu-header">امکانات بیشتر</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown" data-toggle="dropdown"><i class="fas fa-columns"></i> <span>صفحه بندی</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="layout-default.html">حالت پیش فرض</a></li>
<li><a class="nav-link" href="layout-transparent.html">سایدبار بدون رنگ</a></li>
<li><a class="nav-link" href="layout-top-navigation.html">نویگیشن بالا</a></li>
</ul>
</li>
<li><a class="nav-link" href="blank.html"><i class="far fa-square"></i> <span>صفحه خالی</span></a></li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="fas fa-th"></i> <span>بوت استرپ</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="bootstrap-alert.html">آلرت</a></li>
<li><a class="nav-link" href="bootstrap-badge.html">بدج</a></li>
<li><a class="nav-link" href="bootstrap-breadcrumb.html">بردکرامپ</a></li>
<li><a class="nav-link" href="bootstrap-buttons.html">دکمه ها</a></li>
<li><a class="nav-link" href="bootstrap-card.html">کارت</a></li>
<li><a class="nav-link" href="bootstrap-carousel.html">کروسل</a></li>
<li><a class="nav-link" href="bootstrap-collapse.html">کولاپس</a></li>
<li><a class="nav-link" href="bootstrap-dropdown.html">دراپ دون</a></li>
<li><a class="nav-link" href="bootstrap-form.html">فرم</a></li>
<li><a class="nav-link" href="bootstrap-list-group.html">لیست گروه</a></li>
<li><a class="nav-link" href="bootstrap-media-object.html">مدیا ابجکت</a></li>
<li><a class="nav-link" href="bootstrap-modal.html">مودال</a></li>
<li><a class="nav-link" href="bootstrap-nav.html">نویگیشن</a></li>
<li><a class="nav-link" href="bootstrap-navbar.html">نوبار</a></li>
<li><a class="nav-link" href="bootstrap-pagination.html">پجینیشن</a></li>
<li><a class="nav-link" href="bootstrap-popover.html">پاپ اور</a></li>
<li><a class="nav-link" href="bootstrap-progress.html">پراگرس</a></li>
<li><a class="nav-link" href="bootstrap-table.html">جدول</a></li>
<li><a class="nav-link" href="bootstrap-tooltip.html">تولتیپ</a></li>
<li><a class="nav-link" href="bootstrap-typography.html">تایپوگرافی</a></li>
</ul>
</li>
<li class="menu-header">امکانات دیگر</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="fas fa-th-large"></i> <span>کامپوننت ها</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="components-gallery.html">گالری</a></li>
<li><a class="nav-link" href="components-multiple-upload.html">مولتی آپلود</a></li>
<li><a class="nav-link" href="components-tab.html">تب</a></li>
<li><a class="nav-link" href="components-table.html">جدول</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="far fa-file-alt"></i> <span>فرم ها</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="forms-advanced-form.html">فرم پیشرفته</a></li>
<li><a class="nav-link" href="forms-editor.html">ویرایشگر</a></li>
<li><a class="nav-link" href="forms-validation.html">ولیدیشن</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="fas fa-plug"></i> <span>ماژول ها</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="modules-calendar.html">تقویم</a></li>
<li><a class="nav-link" href="modules-chartjs.html">چارت ها</a></li>
<li><a class="nav-link" href="modules-datatables.html">دیتاتیبل</a></li>
<li><a class="nav-link" href="modules-flag.html">پرچم</a></li>
<li><a class="nav-link" href="modules-font-awesome.html">فونت اوسوم</a></li>
<li><a class="nav-link" href="modules-ion-icons.html">ای او ن ایکون</a></li>
<li><a class="nav-link" href="modules-owl-carousel.html">اول کراسول</a></li>
<li><a class="nav-link" href="modules-sparkline.html">اسپارک لاین</a></li>
<li><a class="nav-link" href="modules-sweet-alert.html">سویت الرت</a></li>
<li><a class="nav-link" href="modules-toastr.html">توستر</a></li>
<li><a class="nav-link" href="modules-vector-map.html">وکتور مپ</a></li>
<li><a class="nav-link" href="modules-weather-icon.html">ایکن اب و هوا</a></li>
</ul>
</li>
<li class="menu-header">صفحات</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="far fa-user"></i> <span>ثبت نام</span></a>
<ul class="dropdown-menu">
<li><a href="auth-forgot-password.html">فراموشی کلمه عبور</a></li>
<li><a href="auth-login.html">لاگین</a></li>
<li><a href="auth-register.html">ثبت نام</a></li>
<li><a href="auth-reset-password.html">بازیابی کلمه عبور</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="fas fa-exclamation"></i> <span>خطاها</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="errors-503.html">503</a></li>
<li><a class="nav-link" href="errors-403.html">403</a></li>
<li><a class="nav-link" href="errors-404.html">404</a></li>
<li><a class="nav-link" href="errors-500.html">500</a></li>
</ul>
</li>
<li><a class="nav-link" href="credits.html"><i class="fas fa-pencil-ruler"></i> <span>سازنده ها</span></a></li>
</ul>
<div class="mt-4 mb-4 p-3 hide-sidebar-mini">
<a href="https://getstisla.com/docs" class="btn btn-primary btn-lg btn-block btn-icon-split">
<i class="fas fa-rocket"></i> مستندات قالب
</a>
</div>
</aside>
</div>
<!-- Main Content -->
<div class="main-content">
<section class="section">
<div class="section-header">
<h1>پجینیشن</h1>
<div class="section-header-breadcrumb">
<div class="breadcrumb-item active"><a href="#">داشبورد</a></div>
<div class="breadcrumb-item"><a href="#">کامپوننت بوت استرپ</a></div>
<div class="breadcrumb-item">پجینیشن</div>
</div>
</div>
<div class="section-body text-right">
<h2 class="section-title">پجینیشن</h2>
<p class="section-lead">پجینیشن برای ایجاد صفحه بندی مورد استفاده قرار میگیره</p>
<div class="row">
<div class="col-12 col-md-6 col-lg-6">
<div class="card">
<div class="card-header">
<h4>Pagination</h4>
</div>
<div class="card-body">
<nav aria-label="Page navigation example">
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">Previous</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="#">Next</a></li>
</ul>
</nav>
</div>
</div>
<div class="card">
<div class="card-header">
<h4>Disabled &amp; Active State</h4>
</div>
<div class="card-body">
<nav aria-label="...">
<ul class="pagination">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1">Previous</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item active">
<a class="page-link" href="#">2 <span class="sr-only">(current)</span></a>
</li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#">Next</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-6">
<div class="card">
<div class="card-header">
<h4>Icon</h4>
</div>
<div class="card-body">
<div class="buttons">
<nav aria-label="Page navigation example">
<ul class="pagination">
<li class="page-item">
<a class="page-link" href="#" aria-label="Previous">
<span aria-hidden="true">&laquo;</span>
<span class="sr-only">Previous</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>
<span class="sr-only">Next</span>
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h4>Sizing</h4>
</div>
<div class="card-body">
<nav aria-label="...">
<ul class="pagination pagination-sm">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1">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>
</ul>
</nav>
<nav aria-label="...">
<ul class="pagination pagination-lg">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1">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>
</ul>
</nav>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<footer class="main-footer">
<div class="footer-left">
Copyright &copy; 2018 <div class="bullet"></div> Design By <a href="https://nauval.in/">Muhamad Nauval Azhar</a>
</div>
<div class="footer-right">
</div>
</footer>
</div>
</div>
<!-- General JS Scripts -->
<script src="../assets/modules/jquery.min.js"></script>
<script src="../assets/modules/popper.js"></script>
<script src="../assets/modules/tooltip.js"></script>
<script src="../assets/modules/bootstrap/js/bootstrap.min.js"></script>
<script src="../assets/modules/nicescroll/jquery.nicescroll.min.js"></script>
<script src="../assets/modules/moment.min.js"></script>
<script src="../assets/js/stisla.js"></script>
<!-- JS Libraies -->
<!-- Page Specific JS File -->
<!-- Template JS File -->
<script src="../assets/js/scripts.js"></script>
<script src="../assets/js/custom.js"></script>
</body>
</html>

View File

@@ -0,0 +1,470 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no" name="viewport">
<title>Bootstrap Components &rsaquo; Popover &mdash; Stisla</title>
<!-- General CSS Files -->
<link rel="stylesheet" href="../assets/modules/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="../assets/modules/fontawesome/css/all.min.css">
<!-- CSS Libraries -->
<!-- Template CSS -->
<link rel="stylesheet" href="../assets/css/style.css">
<link rel="stylesheet" href="../assets/css/components.css">
<link rel="stylesheet" href="../assets/css/rtl.css">
</head>
<body>
<div id="app">
<div class="main-wrapper main-wrapper-1">
<div class="navbar-bg"></div>
<nav class="navbar navbar-expand-lg main-navbar">
<form class="form-inline ml-auto">
<ul class="navbar-nav ml-3">
<li><a href="#" data-toggle="sidebar" class="nav-link nav-link-lg"><i class="fas fa-bars"></i></a></li>
<li><a href="#" data-toggle="search" class="nav-link nav-link-lg d-sm-none"><i class="fas fa-search"></i></a></li>
</ul>
<div class="search-element text-right">
<input class="form-control" type="search" placeholder="جستجو" aria-label="Search" data-width="250">
<button class="btn" type="submit"><i class="fas fa-search"></i></button>
<div class="search-backdrop"></div>
<div class="search-result">
<div class="search-header">
نتیجه جستجو
</div>
<div class="search-item">
<a href="#">چگونه ناسا رو هک کنیم؟</a>
<a href="#" class="search-close"><i class="fas fa-times"></i></a>
</div>
<div class="search-item">
<a href="#">Kodinger.com</a>
<a href="#" class="search-close"><i class="fas fa-times"></i></a>
</div>
<div class="search-item">
<a href="#">پنل مدیریت</a>
<a href="#" class="search-close"><i class="fas fa-times"></i></a>
</div>
<div class="search-header">
نتایج
</div>
<div class="search-item">
<a href="#">
<img class="ml-3 rounded" width="30" src="../assets/img/products/product-3-50.png" alt="product">
آیفون s9 تولید شد
</a>
</div>
<div class="search-item">
<a href="#">
<img class="ml-3 rounded" width="30" src="../assets/img/products/product-2-50.png" alt="product">
چه شادی هایی که زیر پای انسانها سرکوب شدند
</a>
</div>
<div class="search-item">
<a href="#">
<img class="ml-3 rounded" width="30" src="../assets/img/products/product-1-50.png" alt="product">
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ.
</a>
</div>
<div class="search-header">
پروژه ها
</div>
<div class="search-item">
<a href="#">
<div class="search-icon bg-danger text-white ml-3">
<i class="fas fa-code"></i>
</div>
متریال ادمین پنل
</a>
</div>
<div class="search-item">
<a href="#">
<div class="search-icon bg-primary text-white ml-3">
<i class="fas fa-laptop"></i>
</div>
ایجاد صفحه لندینگ
</a>
</div>
</div>
</div>
</form>
<ul class="navbar-nav navbar-right">
<li class="dropdown dropdown-list-toggle"><a href="#" data-toggle="dropdown" class="nav-link nav-link-lg message-toggle beep"><i class="far fa-envelope"></i></a>
<div class="dropdown-menu dropdown-list text-right dropdown-menu-left">
<div class="dropdown-header">پیام ها
<div class="float-left">
<a href="#">علامتگذاری همه بصورت خوانده شده</a>
</div>
</div>
<div class="dropdown-list-content dropdown-list-message">
<a href="#" class="dropdown-item dropdown-item-unread">
<div class="dropdown-item-avatar">
<img alt="image" src="../assets/img/avatar/avatar-1.png" class="rounded-circle">
<div class="is-online"></div>
</div>
<div class="dropdown-item-desc text-right">
<b>مهدی خانزادی</b>
<p>سلام داداچ!</p>
<div class="time">۱۰ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item dropdown-item-unread">
<div class="dropdown-item-avatar">
<img alt="image" src="../assets/img/avatar/avatar-2.png" class="rounded-circle">
</div>
<div class="dropdown-item-desc">
<b>مهیار انصاری</b>
<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ.</p>
<div class="time">۱۲ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item dropdown-item-unread">
<div class="dropdown-item-avatar">
<img alt="image" src="../assets/img/avatar/avatar-3.png" class="rounded-circle">
<div class="is-online"></div>
</div>
<div class="dropdown-item-desc">
<b>آمیتا پاچان</b>
<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ.</p>
<div class="time">۱۲ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-avatar">
<img alt="image" src="../assets/img/avatar/avatar-4.png" class="rounded-circle">
</div>
<div class="dropdown-item-desc">
<b>مهدی خانزادی</b>
<p>سلام سیستم پشتیبانی پاترونیک رو استفاده کنید</p>
<div class="time">۱۶ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-avatar">
<img alt="image" src="../assets/img/avatar/avatar-5.png" class="rounded-circle">
</div>
<div class="dropdown-item-desc">
<b>لورم ایپسوم</b>
<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ.</p>
<div class="time">دیروز</div>
</div>
</a>
</div>
<div class="dropdown-footer text-center">
<a href="#"> دیدن همه پیام ها<i class="fas fa-chevron-left"></i></a>
</div>
</div>
</li>
<li class="dropdown dropdown-list-toggle"><a href="#" data-toggle="dropdown" class="nav-link notification-toggle nav-link-lg beep"><i class="far fa-bell"></i></a>
<div class="dropdown-menu dropdown-list dropdown-menu-left">
<div class="dropdown-header text-right">نوتیفیکیشن ها
<div class="float-left">
<a href="#"> علامتگذاری همه بصورت خوانده شده</a>
</div>
</div>
<div class="dropdown-list-content dropdown-list-icons text-right">
<a href="#" class="dropdown-item dropdown-item-unread">
<div class="dropdown-item-icon bg-primary text-white">
<i class="fas fa-code"></i>
</div>
<div class="dropdown-item-desc">
قالب مدیریتی متریال اپدیت جدید داد!
<div class="time text-primary">۲ دقیقه پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-icon bg-info text-white">
<i class="far fa-user"></i>
</div>
<div class="dropdown-item-desc">
<b>شما</b> و <b>مهیار انصاری</b> هم اکنون همکار هستید.
<div class="time">۱۰ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-icon bg-success text-white">
<i class="fas fa-check"></i>
</div>
<div class="dropdown-item-desc">
<b>مهدی خانزادی</b> اطلاعات مرتبط با <b>قالب</b> را <b>آپلود کرد.</b>
<div class="time">۱۲ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-icon bg-danger text-white">
<i class="fas fa-exclamation-triangle"></i>
</div>
<div class="dropdown-item-desc">
فضای هارد دیسک پر شده است لطفا آن را خالی کنید.
<div class="time">۱۷ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-icon bg-info text-white">
<i class="fas fa-bell"></i>
</div>
<div class="dropdown-item-desc">
به قالب متریال خوش آمدید
<div class="time">دیروز</div>
</div>
</a>
</div>
<div class="dropdown-footer text-center">
<a href="#">
<span>نمایش همه</span>
<i class="fas fa-chevron-left"></i>
</a>
</div>
</div>
</li>
<li class="dropdown"><a href="#" data-toggle="dropdown" class="nav-link dropdown-toggle nav-link-lg nav-link-user">
<img alt="image" src="../assets/img/avatar/avatar-1.png" class="rounded-circle mr-1">
<div class="d-sm-none d-lg-inline-block">سلام مهدی</div></a>
<div class="dropdown-menu dropdown-menu-right text-right">
<div class="dropdown-title text-center">۵ دقیقه پیش لاگین کردین</div>
<a href="features-profile.html" class="dropdown-item has-icon">
<span>پروفایل</span>
<i class="far fa-user"></i>
</a>
<a href="features-activities.html" class="dropdown-item has-icon">
<span>فعالیت ها</span>
<i class="fas fa-bolt"></i>
</a>
<a href="features-settings.html" class="dropdown-item has-icon">
<span>تنظیمات</span>
<i class="fas fa-cog"></i>
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item has-icon text-danger">
<span>خروج</span>
<i class="fas fa-sign-out-alt"></i>
</a>
</div>
</li>
</ul>
</nav>
<div class="main-sidebar sidebar-style-2">
<aside id="sidebar-wrapper">
<div class="sidebar-brand">
<a href="index.html">مدیریت پاترونیک</a>
</div>
<div class="sidebar-brand sidebar-brand-sm">
<a href="index.html">مدیریت فروش</a>
</div>
<ul class="sidebar-menu">
<li class="menu-header">داشبورد</li>
<li class="dropdown active">
<a href="#" class="nav-link has-dropdown"><i class="fas fa-fire"></i><span>داشبورد</span></a>
<ul class="dropdown-menu">
<li class=active><a class="nav-link" href="index-0.html">داشبورد عمومی</a></li>
<li><a class="nav-link" href="index.html">داشبورد فروش محصولات</a></li>
</ul>
</li>
<li class="menu-header">امکانات بیشتر</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown" data-toggle="dropdown"><i class="fas fa-columns"></i> <span>صفحه بندی</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="layout-default.html">حالت پیش فرض</a></li>
<li><a class="nav-link" href="layout-transparent.html">سایدبار بدون رنگ</a></li>
<li><a class="nav-link" href="layout-top-navigation.html">نویگیشن بالا</a></li>
</ul>
</li>
<li><a class="nav-link" href="blank.html"><i class="far fa-square"></i> <span>صفحه خالی</span></a></li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="fas fa-th"></i> <span>بوت استرپ</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="bootstrap-alert.html">آلرت</a></li>
<li><a class="nav-link" href="bootstrap-badge.html">بدج</a></li>
<li><a class="nav-link" href="bootstrap-breadcrumb.html">بردکرامپ</a></li>
<li><a class="nav-link" href="bootstrap-buttons.html">دکمه ها</a></li>
<li><a class="nav-link" href="bootstrap-card.html">کارت</a></li>
<li><a class="nav-link" href="bootstrap-carousel.html">کروسل</a></li>
<li><a class="nav-link" href="bootstrap-collapse.html">کولاپس</a></li>
<li><a class="nav-link" href="bootstrap-dropdown.html">دراپ دون</a></li>
<li><a class="nav-link" href="bootstrap-form.html">فرم</a></li>
<li><a class="nav-link" href="bootstrap-list-group.html">لیست گروه</a></li>
<li><a class="nav-link" href="bootstrap-media-object.html">مدیا ابجکت</a></li>
<li><a class="nav-link" href="bootstrap-modal.html">مودال</a></li>
<li><a class="nav-link" href="bootstrap-nav.html">نویگیشن</a></li>
<li><a class="nav-link" href="bootstrap-navbar.html">نوبار</a></li>
<li><a class="nav-link" href="bootstrap-pagination.html">پجینیشن</a></li>
<li><a class="nav-link" href="bootstrap-popover.html">پاپ اور</a></li>
<li><a class="nav-link" href="bootstrap-progress.html">پراگرس</a></li>
<li><a class="nav-link" href="bootstrap-table.html">جدول</a></li>
<li><a class="nav-link" href="bootstrap-tooltip.html">تولتیپ</a></li>
<li><a class="nav-link" href="bootstrap-typography.html">تایپوگرافی</a></li>
</ul>
</li>
<li class="menu-header">امکانات دیگر</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="fas fa-th-large"></i> <span>کامپوننت ها</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="components-gallery.html">گالری</a></li>
<li><a class="nav-link" href="components-multiple-upload.html">مولتی آپلود</a></li>
<li><a class="nav-link" href="components-tab.html">تب</a></li>
<li><a class="nav-link" href="components-table.html">جدول</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="far fa-file-alt"></i> <span>فرم ها</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="forms-advanced-form.html">فرم پیشرفته</a></li>
<li><a class="nav-link" href="forms-editor.html">ویرایشگر</a></li>
<li><a class="nav-link" href="forms-validation.html">ولیدیشن</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="fas fa-plug"></i> <span>ماژول ها</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="modules-calendar.html">تقویم</a></li>
<li><a class="nav-link" href="modules-chartjs.html">چارت ها</a></li>
<li><a class="nav-link" href="modules-datatables.html">دیتاتیبل</a></li>
<li><a class="nav-link" href="modules-flag.html">پرچم</a></li>
<li><a class="nav-link" href="modules-font-awesome.html">فونت اوسوم</a></li>
<li><a class="nav-link" href="modules-ion-icons.html">ای او ن ایکون</a></li>
<li><a class="nav-link" href="modules-owl-carousel.html">اول کراسول</a></li>
<li><a class="nav-link" href="modules-sparkline.html">اسپارک لاین</a></li>
<li><a class="nav-link" href="modules-sweet-alert.html">سویت الرت</a></li>
<li><a class="nav-link" href="modules-toastr.html">توستر</a></li>
<li><a class="nav-link" href="modules-vector-map.html">وکتور مپ</a></li>
<li><a class="nav-link" href="modules-weather-icon.html">ایکن اب و هوا</a></li>
</ul>
</li>
<li class="menu-header">صفحات</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="far fa-user"></i> <span>ثبت نام</span></a>
<ul class="dropdown-menu">
<li><a href="auth-forgot-password.html">فراموشی کلمه عبور</a></li>
<li><a href="auth-login.html">لاگین</a></li>
<li><a href="auth-register.html">ثبت نام</a></li>
<li><a href="auth-reset-password.html">بازیابی کلمه عبور</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="fas fa-exclamation"></i> <span>خطاها</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="errors-503.html">503</a></li>
<li><a class="nav-link" href="errors-403.html">403</a></li>
<li><a class="nav-link" href="errors-404.html">404</a></li>
<li><a class="nav-link" href="errors-500.html">500</a></li>
</ul>
</li>
<li><a class="nav-link" href="credits.html"><i class="fas fa-pencil-ruler"></i> <span>سازنده ها</span></a></li>
</ul>
<div class="mt-4 mb-4 p-3 hide-sidebar-mini">
<a href="https://getstisla.com/docs" class="btn btn-primary btn-lg btn-block btn-icon-split">
<i class="fas fa-rocket"></i> مستندات قالب
</a>
</div>
</aside>
</div>
<!-- Main Content -->
<div class="main-content">
<section class="section">
<div class="section-header">
<h1>پاپ اور</h1>
<div class="section-header-breadcrumb">
<div class="breadcrumb-item active"><a href="#">داشبورد</a></div>
<div class="breadcrumb-item"><a href="#">کامپوننت بوت استرپ</a></div>
<div class="breadcrumb-item">پاپ اور</div>
</div>
</div>
<div class="section-body text-right">
<h2 class="section-title">پاپ اور</h2>
<p class="section-lead">اینجا میتونید پاپ اورها رو ببینید.</p>
<div class="row">
<div class="col-12 col-md-6 col-lg-6">
<div class="card">
<div class="card-header">
<h4>Directions</h4>
</div>
<div class="card-body">
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
On top
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
On right
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">
On bottom
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
On left
</button>
</div>
</div>
<div class="card">
<div class="card-header">
<h4>Disabled Popover</h4>
</div>
<div class="card-body">
<span class="d-inline-block" data-toggle="popover" data-content="Disabled popover">
<button class="btn btn-primary pe-none" type="button" disabled>Disabled button</button>
</span>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-6">
<div class="card">
<div class="card-header">
<h4>Dismiss</h4>
</div>
<div class="card-body">
<a tabindex="0" class="btn btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>
</div>
</div>
<div class="card">
<div class="card-header">
<h4>Link</h4>
</div>
<div class="card-body">
<div class="buttons">
<p>Lorem ipsum dolor sit amet, consectetur <a href="javascript:;" data-toggle="popover" title="Popover Title" data-content="Hello, this is link." data-trigger="focus">adipisicing elit</a>, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<footer class="main-footer">
<div class="footer-left">
Copyright &copy; 2018 <div class="bullet"></div> Design By <a href="https://nauval.in/">Muhamad Nauval Azhar</a>
</div>
<div class="footer-right">
</div>
</footer>
</div>
</div>
<!-- General JS Scripts -->
<script src="../assets/modules/jquery.min.js"></script>
<script src="../assets/modules/popper.js"></script>
<script src="../assets/modules/tooltip.js"></script>
<script src="../assets/modules/bootstrap/js/bootstrap.min.js"></script>
<script src="../assets/modules/nicescroll/jquery.nicescroll.min.js"></script>
<script src="../assets/modules/moment.min.js"></script>
<script src="../assets/js/stisla.js"></script>
<!-- JS Libraies -->
<!-- Page Specific JS File -->
<!-- Template JS File -->
<script src="../assets/js/scripts.js"></script>
<script src="../assets/js/custom.js"></script>
</body>
</html>

View File

@@ -0,0 +1,506 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no" name="viewport">
<title>Bootstrap Components &rsaquo; Progress &mdash; Stisla</title>
<!-- General CSS Files -->
<link rel="stylesheet" href="../assets/modules/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="../assets/modules/fontawesome/css/all.min.css">
<!-- CSS Libraries -->
<!-- Template CSS -->
<link rel="stylesheet" href="../assets/css/style.css">
<link rel="stylesheet" href="../assets/css/components.css">
<link rel="stylesheet" href="../assets/css/rtl.css">
</head>
<body>
<div id="app">
<div class="main-wrapper main-wrapper-1">
<div class="navbar-bg"></div>
<nav class="navbar navbar-expand-lg main-navbar">
<form class="form-inline ml-auto">
<ul class="navbar-nav ml-3">
<li><a href="#" data-toggle="sidebar" class="nav-link nav-link-lg"><i class="fas fa-bars"></i></a></li>
<li><a href="#" data-toggle="search" class="nav-link nav-link-lg d-sm-none"><i class="fas fa-search"></i></a></li>
</ul>
<div class="search-element text-right">
<input class="form-control" type="search" placeholder="جستجو" aria-label="Search" data-width="250">
<button class="btn" type="submit"><i class="fas fa-search"></i></button>
<div class="search-backdrop"></div>
<div class="search-result">
<div class="search-header">
نتیجه جستجو
</div>
<div class="search-item">
<a href="#">چگونه ناسا رو هک کنیم؟</a>
<a href="#" class="search-close"><i class="fas fa-times"></i></a>
</div>
<div class="search-item">
<a href="#">Kodinger.com</a>
<a href="#" class="search-close"><i class="fas fa-times"></i></a>
</div>
<div class="search-item">
<a href="#">پنل مدیریت</a>
<a href="#" class="search-close"><i class="fas fa-times"></i></a>
</div>
<div class="search-header">
نتایج
</div>
<div class="search-item">
<a href="#">
<img class="ml-3 rounded" width="30" src="../assets/img/products/product-3-50.png" alt="product">
آیفون s9 تولید شد
</a>
</div>
<div class="search-item">
<a href="#">
<img class="ml-3 rounded" width="30" src="../assets/img/products/product-2-50.png" alt="product">
چه شادی هایی که زیر پای انسانها سرکوب شدند
</a>
</div>
<div class="search-item">
<a href="#">
<img class="ml-3 rounded" width="30" src="../assets/img/products/product-1-50.png" alt="product">
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ.
</a>
</div>
<div class="search-header">
پروژه ها
</div>
<div class="search-item">
<a href="#">
<div class="search-icon bg-danger text-white ml-3">
<i class="fas fa-code"></i>
</div>
متریال ادمین پنل
</a>
</div>
<div class="search-item">
<a href="#">
<div class="search-icon bg-primary text-white ml-3">
<i class="fas fa-laptop"></i>
</div>
ایجاد صفحه لندینگ
</a>
</div>
</div>
</div>
</form>
<ul class="navbar-nav navbar-right">
<li class="dropdown dropdown-list-toggle"><a href="#" data-toggle="dropdown" class="nav-link nav-link-lg message-toggle beep"><i class="far fa-envelope"></i></a>
<div class="dropdown-menu dropdown-list text-right dropdown-menu-left">
<div class="dropdown-header">پیام ها
<div class="float-left">
<a href="#">علامتگذاری همه بصورت خوانده شده</a>
</div>
</div>
<div class="dropdown-list-content dropdown-list-message">
<a href="#" class="dropdown-item dropdown-item-unread">
<div class="dropdown-item-avatar">
<img alt="image" src="../assets/img/avatar/avatar-1.png" class="rounded-circle">
<div class="is-online"></div>
</div>
<div class="dropdown-item-desc text-right">
<b>مهدی خانزادی</b>
<p>سلام داداچ!</p>
<div class="time">۱۰ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item dropdown-item-unread">
<div class="dropdown-item-avatar">
<img alt="image" src="../assets/img/avatar/avatar-2.png" class="rounded-circle">
</div>
<div class="dropdown-item-desc">
<b>مهیار انصاری</b>
<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ.</p>
<div class="time">۱۲ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item dropdown-item-unread">
<div class="dropdown-item-avatar">
<img alt="image" src="../assets/img/avatar/avatar-3.png" class="rounded-circle">
<div class="is-online"></div>
</div>
<div class="dropdown-item-desc">
<b>آمیتا پاچان</b>
<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ.</p>
<div class="time">۱۲ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-avatar">
<img alt="image" src="../assets/img/avatar/avatar-4.png" class="rounded-circle">
</div>
<div class="dropdown-item-desc">
<b>مهدی خانزادی</b>
<p>سلام سیستم پشتیبانی پاترونیک رو استفاده کنید</p>
<div class="time">۱۶ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-avatar">
<img alt="image" src="../assets/img/avatar/avatar-5.png" class="rounded-circle">
</div>
<div class="dropdown-item-desc">
<b>لورم ایپسوم</b>
<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ.</p>
<div class="time">دیروز</div>
</div>
</a>
</div>
<div class="dropdown-footer text-center">
<a href="#"> دیدن همه پیام ها<i class="fas fa-chevron-left"></i></a>
</div>
</div>
</li>
<li class="dropdown dropdown-list-toggle"><a href="#" data-toggle="dropdown" class="nav-link notification-toggle nav-link-lg beep"><i class="far fa-bell"></i></a>
<div class="dropdown-menu dropdown-list dropdown-menu-left">
<div class="dropdown-header text-right">نوتیفیکیشن ها
<div class="float-left">
<a href="#"> علامتگذاری همه بصورت خوانده شده</a>
</div>
</div>
<div class="dropdown-list-content dropdown-list-icons text-right">
<a href="#" class="dropdown-item dropdown-item-unread">
<div class="dropdown-item-icon bg-primary text-white">
<i class="fas fa-code"></i>
</div>
<div class="dropdown-item-desc">
قالب مدیریتی متریال اپدیت جدید داد!
<div class="time text-primary">۲ دقیقه پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-icon bg-info text-white">
<i class="far fa-user"></i>
</div>
<div class="dropdown-item-desc">
<b>شما</b> و <b>مهیار انصاری</b> هم اکنون همکار هستید.
<div class="time">۱۰ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-icon bg-success text-white">
<i class="fas fa-check"></i>
</div>
<div class="dropdown-item-desc">
<b>مهدی خانزادی</b> اطلاعات مرتبط با <b>قالب</b> را <b>آپلود کرد.</b>
<div class="time">۱۲ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-icon bg-danger text-white">
<i class="fas fa-exclamation-triangle"></i>
</div>
<div class="dropdown-item-desc">
فضای هارد دیسک پر شده است لطفا آن را خالی کنید.
<div class="time">۱۷ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-icon bg-info text-white">
<i class="fas fa-bell"></i>
</div>
<div class="dropdown-item-desc">
به قالب متریال خوش آمدید
<div class="time">دیروز</div>
</div>
</a>
</div>
<div class="dropdown-footer text-center">
<a href="#">
<span>نمایش همه</span>
<i class="fas fa-chevron-left"></i>
</a>
</div>
</div>
</li>
<li class="dropdown"><a href="#" data-toggle="dropdown" class="nav-link dropdown-toggle nav-link-lg nav-link-user">
<img alt="image" src="../assets/img/avatar/avatar-1.png" class="rounded-circle mr-1">
<div class="d-sm-none d-lg-inline-block">سلام مهدی</div></a>
<div class="dropdown-menu dropdown-menu-right text-right">
<div class="dropdown-title text-center">۵ دقیقه پیش لاگین کردین</div>
<a href="features-profile.html" class="dropdown-item has-icon">
<span>پروفایل</span>
<i class="far fa-user"></i>
</a>
<a href="features-activities.html" class="dropdown-item has-icon">
<span>فعالیت ها</span>
<i class="fas fa-bolt"></i>
</a>
<a href="features-settings.html" class="dropdown-item has-icon">
<span>تنظیمات</span>
<i class="fas fa-cog"></i>
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item has-icon text-danger">
<span>خروج</span>
<i class="fas fa-sign-out-alt"></i>
</a>
</div>
</li>
</ul>
</nav>
<div class="main-sidebar sidebar-style-2">
<aside id="sidebar-wrapper">
<div class="sidebar-brand">
<a href="index.html">مدیریت پاترونیک</a>
</div>
<div class="sidebar-brand sidebar-brand-sm">
<a href="index.html">مدیریت فروش</a>
</div>
<ul class="sidebar-menu">
<li class="menu-header">داشبورد</li>
<li class="dropdown active">
<a href="#" class="nav-link has-dropdown"><i class="fas fa-fire"></i><span>داشبورد</span></a>
<ul class="dropdown-menu">
<li class=active><a class="nav-link" href="index-0.html">داشبورد عمومی</a></li>
<li><a class="nav-link" href="index.html">داشبورد فروش محصولات</a></li>
</ul>
</li>
<li class="menu-header">امکانات بیشتر</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown" data-toggle="dropdown"><i class="fas fa-columns"></i> <span>صفحه بندی</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="layout-default.html">حالت پیش فرض</a></li>
<li><a class="nav-link" href="layout-transparent.html">سایدبار بدون رنگ</a></li>
<li><a class="nav-link" href="layout-top-navigation.html">نویگیشن بالا</a></li>
</ul>
</li>
<li><a class="nav-link" href="blank.html"><i class="far fa-square"></i> <span>صفحه خالی</span></a></li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="fas fa-th"></i> <span>بوت استرپ</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="bootstrap-alert.html">آلرت</a></li>
<li><a class="nav-link" href="bootstrap-badge.html">بدج</a></li>
<li><a class="nav-link" href="bootstrap-breadcrumb.html">بردکرامپ</a></li>
<li><a class="nav-link" href="bootstrap-buttons.html">دکمه ها</a></li>
<li><a class="nav-link" href="bootstrap-card.html">کارت</a></li>
<li><a class="nav-link" href="bootstrap-carousel.html">کروسل</a></li>
<li><a class="nav-link" href="bootstrap-collapse.html">کولاپس</a></li>
<li><a class="nav-link" href="bootstrap-dropdown.html">دراپ دون</a></li>
<li><a class="nav-link" href="bootstrap-form.html">فرم</a></li>
<li><a class="nav-link" href="bootstrap-list-group.html">لیست گروه</a></li>
<li><a class="nav-link" href="bootstrap-media-object.html">مدیا ابجکت</a></li>
<li><a class="nav-link" href="bootstrap-modal.html">مودال</a></li>
<li><a class="nav-link" href="bootstrap-nav.html">نویگیشن</a></li>
<li><a class="nav-link" href="bootstrap-navbar.html">نوبار</a></li>
<li><a class="nav-link" href="bootstrap-pagination.html">پجینیشن</a></li>
<li><a class="nav-link" href="bootstrap-popover.html">پاپ اور</a></li>
<li><a class="nav-link" href="bootstrap-progress.html">پراگرس</a></li>
<li><a class="nav-link" href="bootstrap-table.html">جدول</a></li>
<li><a class="nav-link" href="bootstrap-tooltip.html">تولتیپ</a></li>
<li><a class="nav-link" href="bootstrap-typography.html">تایپوگرافی</a></li>
</ul>
</li>
<li class="menu-header">امکانات دیگر</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="fas fa-th-large"></i> <span>کامپوننت ها</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="components-gallery.html">گالری</a></li>
<li><a class="nav-link" href="components-multiple-upload.html">مولتی آپلود</a></li>
<li><a class="nav-link" href="components-tab.html">تب</a></li>
<li><a class="nav-link" href="components-table.html">جدول</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="far fa-file-alt"></i> <span>فرم ها</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="forms-advanced-form.html">فرم پیشرفته</a></li>
<li><a class="nav-link" href="forms-editor.html">ویرایشگر</a></li>
<li><a class="nav-link" href="forms-validation.html">ولیدیشن</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="fas fa-plug"></i> <span>ماژول ها</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="modules-calendar.html">تقویم</a></li>
<li><a class="nav-link" href="modules-chartjs.html">چارت ها</a></li>
<li><a class="nav-link" href="modules-datatables.html">دیتاتیبل</a></li>
<li><a class="nav-link" href="modules-flag.html">پرچم</a></li>
<li><a class="nav-link" href="modules-font-awesome.html">فونت اوسوم</a></li>
<li><a class="nav-link" href="modules-ion-icons.html">ای او ن ایکون</a></li>
<li><a class="nav-link" href="modules-owl-carousel.html">اول کراسول</a></li>
<li><a class="nav-link" href="modules-sparkline.html">اسپارک لاین</a></li>
<li><a class="nav-link" href="modules-sweet-alert.html">سویت الرت</a></li>
<li><a class="nav-link" href="modules-toastr.html">توستر</a></li>
<li><a class="nav-link" href="modules-vector-map.html">وکتور مپ</a></li>
<li><a class="nav-link" href="modules-weather-icon.html">ایکن اب و هوا</a></li>
</ul>
</li>
<li class="menu-header">صفحات</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="far fa-user"></i> <span>ثبت نام</span></a>
<ul class="dropdown-menu">
<li><a href="auth-forgot-password.html">فراموشی کلمه عبور</a></li>
<li><a href="auth-login.html">لاگین</a></li>
<li><a href="auth-register.html">ثبت نام</a></li>
<li><a href="auth-reset-password.html">بازیابی کلمه عبور</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="fas fa-exclamation"></i> <span>خطاها</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="errors-503.html">503</a></li>
<li><a class="nav-link" href="errors-403.html">403</a></li>
<li><a class="nav-link" href="errors-404.html">404</a></li>
<li><a class="nav-link" href="errors-500.html">500</a></li>
</ul>
</li>
<li><a class="nav-link" href="credits.html"><i class="fas fa-pencil-ruler"></i> <span>سازنده ها</span></a></li>
</ul>
<div class="mt-4 mb-4 p-3 hide-sidebar-mini">
<a href="https://getstisla.com/docs" class="btn btn-primary btn-lg btn-block btn-icon-split">
<i class="fas fa-rocket"></i> مستندات قالب
</a>
</div>
</aside>
</div>
<!-- Main Content -->
<div class="main-content">
<section class="section">
<div class="section-header">
<h1>پراگرس</h1>
<div class="section-header-breadcrumb">
<div class="breadcrumb-item active"><a href="#">داشبورد</a></div>
<div class="breadcrumb-item"><a href="#">کامپوننت بوت استرپ</a></div>
<div class="breadcrumb-item">پراگرس</div>
</div>
</div>
<div class="section-body text-right">
<h2 class="section-title">پراگرس</h2>
<p class="section-lead">با استفاده از پراگرس ها میتونید میزان پیشرفت در انجام یک کار یا پروسه رو نمایش بدید.</p>
<div class="row">
<div class="col-12 col-md-6 col-lg-6">
<div class="card">
<div class="card-header">
<h4>Simple</h4>
</div>
<div class="card-body">
<div class="progress mb-3">
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress mb-3">
<div class="progress-bar" role="progressbar" data-width="25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress mb-3">
<div class="progress-bar" role="progressbar" data-width="50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress mb-3">
<div class="progress-bar" role="progressbar" data-width="75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress mb-3">
<div class="progress-bar" role="progressbar" data-width="100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h4>Label</h4>
</div>
<div class="card-body">
<div class="progress mb-3">
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0</div>
</div>
<div class="progress mb-3">
<div class="progress-bar" role="progressbar" data-width="25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
</div>
<div class="progress mb-3">
<div class="progress-bar" role="progressbar" data-width="50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">50%</div>
</div>
<div class="progress mb-3">
<div class="progress-bar" role="progressbar" data-width="75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">75%</div>
</div>
<div class="progress mb-3">
<div class="progress-bar" role="progressbar" data-width="100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">100%</div>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-6">
<div class="card">
<div class="card-header">
<h4>Height</h4>
</div>
<div class="card-body">
<div class="progress mb-3" data-height="5">
<div class="progress-bar" role="progressbar" data-width="25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress mb-3" data-height="10">
<div class="progress-bar" role="progressbar" data-width="25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress mb-3" data-height="15">
<div class="progress-bar" role="progressbar" data-width="25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress mb-3" data-height="20">
<div class="progress-bar" role="progressbar" data-width="25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress mb-3" data-height="25">
<div class="progress-bar" role="progressbar" data-width="25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h4>Background</h4>
</div>
<div class="card-body">
<div class="progress mb-3">
<div class="progress-bar bg-success" role="progressbar" data-width="25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress mb-3">
<div class="progress-bar bg-info" role="progressbar" data-width="50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress mb-3">
<div class="progress-bar bg-warning" role="progressbar" data-width="75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress mb-3">
<div class="progress-bar bg-danger" role="progressbar" data-width="100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress mb-3">
<div class="progress-bar bg-info" role="progressbar" data-width="100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<footer class="main-footer">
<div class="footer-left">
Copyright &copy; 2018 <div class="bullet"></div> Design By <a href="https://nauval.in/">Muhamad Nauval Azhar</a>
</div>
<div class="footer-right">
</div>
</footer>
</div>
</div>
<!-- General JS Scripts -->
<script src="../assets/modules/jquery.min.js"></script>
<script src="../assets/modules/popper.js"></script>
<script src="../assets/modules/tooltip.js"></script>
<script src="../assets/modules/bootstrap/js/bootstrap.min.js"></script>
<script src="../assets/modules/nicescroll/jquery.nicescroll.min.js"></script>
<script src="../assets/modules/moment.min.js"></script>
<script src="../assets/js/stisla.js"></script>
<!-- JS Libraies -->
<!-- Page Specific JS File -->
<!-- Template JS File -->
<script src="../assets/js/scripts.js"></script>
<script src="../assets/js/custom.js"></script>
</body>
</html>

1008
dev/rtl/bootstrap-table.html Normal file

File diff suppressed because it is too large Load Diff

View File

@@ -0,0 +1,470 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no" name="viewport">
<title>Bootstrap Components &rsaquo; Tooltip &mdash; Stisla</title>
<!-- General CSS Files -->
<link rel="stylesheet" href="../assets/modules/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="../assets/modules/fontawesome/css/all.min.css">
<!-- CSS Libraries -->
<!-- Template CSS -->
<link rel="stylesheet" href="../assets/css/style.css">
<link rel="stylesheet" href="../assets/css/components.css">
<link rel="stylesheet" href="../assets/css/rtl.css">
</head>
<body>
<div id="app">
<div class="main-wrapper main-wrapper-1">
<div class="navbar-bg"></div>
<nav class="navbar navbar-expand-lg main-navbar">
<form class="form-inline ml-auto">
<ul class="navbar-nav ml-3">
<li><a href="#" data-toggle="sidebar" class="nav-link nav-link-lg"><i class="fas fa-bars"></i></a></li>
<li><a href="#" data-toggle="search" class="nav-link nav-link-lg d-sm-none"><i class="fas fa-search"></i></a></li>
</ul>
<div class="search-element text-right">
<input class="form-control" type="search" placeholder="جستجو" aria-label="Search" data-width="250">
<button class="btn" type="submit"><i class="fas fa-search"></i></button>
<div class="search-backdrop"></div>
<div class="search-result">
<div class="search-header">
نتیجه جستجو
</div>
<div class="search-item">
<a href="#">چگونه ناسا رو هک کنیم؟</a>
<a href="#" class="search-close"><i class="fas fa-times"></i></a>
</div>
<div class="search-item">
<a href="#">Kodinger.com</a>
<a href="#" class="search-close"><i class="fas fa-times"></i></a>
</div>
<div class="search-item">
<a href="#">پنل مدیریت</a>
<a href="#" class="search-close"><i class="fas fa-times"></i></a>
</div>
<div class="search-header">
نتایج
</div>
<div class="search-item">
<a href="#">
<img class="ml-3 rounded" width="30" src="../assets/img/products/product-3-50.png" alt="product">
آیفون s9 تولید شد
</a>
</div>
<div class="search-item">
<a href="#">
<img class="ml-3 rounded" width="30" src="../assets/img/products/product-2-50.png" alt="product">
چه شادی هایی که زیر پای انسانها سرکوب شدند
</a>
</div>
<div class="search-item">
<a href="#">
<img class="ml-3 rounded" width="30" src="../assets/img/products/product-1-50.png" alt="product">
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ.
</a>
</div>
<div class="search-header">
پروژه ها
</div>
<div class="search-item">
<a href="#">
<div class="search-icon bg-danger text-white ml-3">
<i class="fas fa-code"></i>
</div>
متریال ادمین پنل
</a>
</div>
<div class="search-item">
<a href="#">
<div class="search-icon bg-primary text-white ml-3">
<i class="fas fa-laptop"></i>
</div>
ایجاد صفحه لندینگ
</a>
</div>
</div>
</div>
</form>
<ul class="navbar-nav navbar-right">
<li class="dropdown dropdown-list-toggle"><a href="#" data-toggle="dropdown" class="nav-link nav-link-lg message-toggle beep"><i class="far fa-envelope"></i></a>
<div class="dropdown-menu dropdown-list text-right dropdown-menu-left">
<div class="dropdown-header">پیام ها
<div class="float-left">
<a href="#">علامتگذاری همه بصورت خوانده شده</a>
</div>
</div>
<div class="dropdown-list-content dropdown-list-message">
<a href="#" class="dropdown-item dropdown-item-unread">
<div class="dropdown-item-avatar">
<img alt="image" src="../assets/img/avatar/avatar-1.png" class="rounded-circle">
<div class="is-online"></div>
</div>
<div class="dropdown-item-desc text-right">
<b>مهدی خانزادی</b>
<p>سلام داداچ!</p>
<div class="time">۱۰ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item dropdown-item-unread">
<div class="dropdown-item-avatar">
<img alt="image" src="../assets/img/avatar/avatar-2.png" class="rounded-circle">
</div>
<div class="dropdown-item-desc">
<b>مهیار انصاری</b>
<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ.</p>
<div class="time">۱۲ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item dropdown-item-unread">
<div class="dropdown-item-avatar">
<img alt="image" src="../assets/img/avatar/avatar-3.png" class="rounded-circle">
<div class="is-online"></div>
</div>
<div class="dropdown-item-desc">
<b>آمیتا پاچان</b>
<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ.</p>
<div class="time">۱۲ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-avatar">
<img alt="image" src="../assets/img/avatar/avatar-4.png" class="rounded-circle">
</div>
<div class="dropdown-item-desc">
<b>مهدی خانزادی</b>
<p>سلام سیستم پشتیبانی پاترونیک رو استفاده کنید</p>
<div class="time">۱۶ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-avatar">
<img alt="image" src="../assets/img/avatar/avatar-5.png" class="rounded-circle">
</div>
<div class="dropdown-item-desc">
<b>لورم ایپسوم</b>
<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ.</p>
<div class="time">دیروز</div>
</div>
</a>
</div>
<div class="dropdown-footer text-center">
<a href="#"> دیدن همه پیام ها<i class="fas fa-chevron-left"></i></a>
</div>
</div>
</li>
<li class="dropdown dropdown-list-toggle"><a href="#" data-toggle="dropdown" class="nav-link notification-toggle nav-link-lg beep"><i class="far fa-bell"></i></a>
<div class="dropdown-menu dropdown-list dropdown-menu-left">
<div class="dropdown-header text-right">نوتیفیکیشن ها
<div class="float-left">
<a href="#"> علامتگذاری همه بصورت خوانده شده</a>
</div>
</div>
<div class="dropdown-list-content dropdown-list-icons text-right">
<a href="#" class="dropdown-item dropdown-item-unread">
<div class="dropdown-item-icon bg-primary text-white">
<i class="fas fa-code"></i>
</div>
<div class="dropdown-item-desc">
قالب مدیریتی متریال اپدیت جدید داد!
<div class="time text-primary">۲ دقیقه پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-icon bg-info text-white">
<i class="far fa-user"></i>
</div>
<div class="dropdown-item-desc">
<b>شما</b> و <b>مهیار انصاری</b> هم اکنون همکار هستید.
<div class="time">۱۰ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-icon bg-success text-white">
<i class="fas fa-check"></i>
</div>
<div class="dropdown-item-desc">
<b>مهدی خانزادی</b> اطلاعات مرتبط با <b>قالب</b> را <b>آپلود کرد.</b>
<div class="time">۱۲ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-icon bg-danger text-white">
<i class="fas fa-exclamation-triangle"></i>
</div>
<div class="dropdown-item-desc">
فضای هارد دیسک پر شده است لطفا آن را خالی کنید.
<div class="time">۱۷ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-icon bg-info text-white">
<i class="fas fa-bell"></i>
</div>
<div class="dropdown-item-desc">
به قالب متریال خوش آمدید
<div class="time">دیروز</div>
</div>
</a>
</div>
<div class="dropdown-footer text-center">
<a href="#">
<span>نمایش همه</span>
<i class="fas fa-chevron-left"></i>
</a>
</div>
</div>
</li>
<li class="dropdown"><a href="#" data-toggle="dropdown" class="nav-link dropdown-toggle nav-link-lg nav-link-user">
<img alt="image" src="../assets/img/avatar/avatar-1.png" class="rounded-circle mr-1">
<div class="d-sm-none d-lg-inline-block">سلام مهدی</div></a>
<div class="dropdown-menu dropdown-menu-right text-right">
<div class="dropdown-title text-center">۵ دقیقه پیش لاگین کردین</div>
<a href="features-profile.html" class="dropdown-item has-icon">
<span>پروفایل</span>
<i class="far fa-user"></i>
</a>
<a href="features-activities.html" class="dropdown-item has-icon">
<span>فعالیت ها</span>
<i class="fas fa-bolt"></i>
</a>
<a href="features-settings.html" class="dropdown-item has-icon">
<span>تنظیمات</span>
<i class="fas fa-cog"></i>
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item has-icon text-danger">
<span>خروج</span>
<i class="fas fa-sign-out-alt"></i>
</a>
</div>
</li>
</ul>
</nav>
<div class="main-sidebar sidebar-style-2">
<aside id="sidebar-wrapper">
<div class="sidebar-brand">
<a href="index.html">مدیریت پاترونیک</a>
</div>
<div class="sidebar-brand sidebar-brand-sm">
<a href="index.html">مدیریت فروش</a>
</div>
<ul class="sidebar-menu">
<li class="menu-header">داشبورد</li>
<li class="dropdown active">
<a href="#" class="nav-link has-dropdown"><i class="fas fa-fire"></i><span>داشبورد</span></a>
<ul class="dropdown-menu">
<li class=active><a class="nav-link" href="index-0.html">داشبورد عمومی</a></li>
<li><a class="nav-link" href="index.html">داشبورد فروش محصولات</a></li>
</ul>
</li>
<li class="menu-header">امکانات بیشتر</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown" data-toggle="dropdown"><i class="fas fa-columns"></i> <span>صفحه بندی</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="layout-default.html">حالت پیش فرض</a></li>
<li><a class="nav-link" href="layout-transparent.html">سایدبار بدون رنگ</a></li>
<li><a class="nav-link" href="layout-top-navigation.html">نویگیشن بالا</a></li>
</ul>
</li>
<li><a class="nav-link" href="blank.html"><i class="far fa-square"></i> <span>صفحه خالی</span></a></li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="fas fa-th"></i> <span>بوت استرپ</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="bootstrap-alert.html">آلرت</a></li>
<li><a class="nav-link" href="bootstrap-badge.html">بدج</a></li>
<li><a class="nav-link" href="bootstrap-breadcrumb.html">بردکرامپ</a></li>
<li><a class="nav-link" href="bootstrap-buttons.html">دکمه ها</a></li>
<li><a class="nav-link" href="bootstrap-card.html">کارت</a></li>
<li><a class="nav-link" href="bootstrap-carousel.html">کروسل</a></li>
<li><a class="nav-link" href="bootstrap-collapse.html">کولاپس</a></li>
<li><a class="nav-link" href="bootstrap-dropdown.html">دراپ دون</a></li>
<li><a class="nav-link" href="bootstrap-form.html">فرم</a></li>
<li><a class="nav-link" href="bootstrap-list-group.html">لیست گروه</a></li>
<li><a class="nav-link" href="bootstrap-media-object.html">مدیا ابجکت</a></li>
<li><a class="nav-link" href="bootstrap-modal.html">مودال</a></li>
<li><a class="nav-link" href="bootstrap-nav.html">نویگیشن</a></li>
<li><a class="nav-link" href="bootstrap-navbar.html">نوبار</a></li>
<li><a class="nav-link" href="bootstrap-pagination.html">پجینیشن</a></li>
<li><a class="nav-link" href="bootstrap-popover.html">پاپ اور</a></li>
<li><a class="nav-link" href="bootstrap-progress.html">پراگرس</a></li>
<li><a class="nav-link" href="bootstrap-table.html">جدول</a></li>
<li><a class="nav-link" href="bootstrap-tooltip.html">تولتیپ</a></li>
<li><a class="nav-link" href="bootstrap-typography.html">تایپوگرافی</a></li>
</ul>
</li>
<li class="menu-header">امکانات دیگر</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="fas fa-th-large"></i> <span>کامپوننت ها</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="components-gallery.html">گالری</a></li>
<li><a class="nav-link" href="components-multiple-upload.html">مولتی آپلود</a></li>
<li><a class="nav-link" href="components-tab.html">تب</a></li>
<li><a class="nav-link" href="components-table.html">جدول</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="far fa-file-alt"></i> <span>فرم ها</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="forms-advanced-form.html">فرم پیشرفته</a></li>
<li><a class="nav-link" href="forms-editor.html">ویرایشگر</a></li>
<li><a class="nav-link" href="forms-validation.html">ولیدیشن</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="fas fa-plug"></i> <span>ماژول ها</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="modules-calendar.html">تقویم</a></li>
<li><a class="nav-link" href="modules-chartjs.html">چارت ها</a></li>
<li><a class="nav-link" href="modules-datatables.html">دیتاتیبل</a></li>
<li><a class="nav-link" href="modules-flag.html">پرچم</a></li>
<li><a class="nav-link" href="modules-font-awesome.html">فونت اوسوم</a></li>
<li><a class="nav-link" href="modules-ion-icons.html">ای او ن ایکون</a></li>
<li><a class="nav-link" href="modules-owl-carousel.html">اول کراسول</a></li>
<li><a class="nav-link" href="modules-sparkline.html">اسپارک لاین</a></li>
<li><a class="nav-link" href="modules-sweet-alert.html">سویت الرت</a></li>
<li><a class="nav-link" href="modules-toastr.html">توستر</a></li>
<li><a class="nav-link" href="modules-vector-map.html">وکتور مپ</a></li>
<li><a class="nav-link" href="modules-weather-icon.html">ایکن اب و هوا</a></li>
</ul>
</li>
<li class="menu-header">صفحات</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="far fa-user"></i> <span>ثبت نام</span></a>
<ul class="dropdown-menu">
<li><a href="auth-forgot-password.html">فراموشی کلمه عبور</a></li>
<li><a href="auth-login.html">لاگین</a></li>
<li><a href="auth-register.html">ثبت نام</a></li>
<li><a href="auth-reset-password.html">بازیابی کلمه عبور</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="fas fa-exclamation"></i> <span>خطاها</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="errors-503.html">503</a></li>
<li><a class="nav-link" href="errors-403.html">403</a></li>
<li><a class="nav-link" href="errors-404.html">404</a></li>
<li><a class="nav-link" href="errors-500.html">500</a></li>
</ul>
</li>
<li><a class="nav-link" href="credits.html"><i class="fas fa-pencil-ruler"></i> <span>سازنده ها</span></a></li>
</ul>
<div class="mt-4 mb-4 p-3 hide-sidebar-mini">
<a href="https://getstisla.com/docs" class="btn btn-primary btn-lg btn-block btn-icon-split">
<i class="fas fa-rocket"></i> مستندات قالب
</a>
</div>
</aside>
</div>
<!-- Main Content -->
<div class="main-content">
<section class="section">
<div class="section-header">
<h1>تولتیپ</h1>
<div class="section-header-breadcrumb">
<div class="breadcrumb-item active"><a href="#">داشبورد</a></div>
<div class="breadcrumb-item"><a href="#">کامپوننت بوت استرپ</a></div>
<div class="breadcrumb-item">تولتیپ</div>
</div>
</div>
<div class="section-body text-right">
<h2 class="section-title">تولتیپ</h2>
<p class="section-lead">تولتیپ میتونه برای نمایش خلاصه دستورالعمل در مورد قسمت های برنامه مورد استفاده قرار بگیره.</p>
<div class="row">
<div class="col-12 col-md-6 col-lg-6">
<div class="card">
<div class="card-header">
<h4>Directions</h4>
</div>
<div class="card-body">
<button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
On top
</button>
<button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="right" title="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
On right
</button>
<button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="bottom" title="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">
On bottom
</button>
<button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="left" title="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
On left
</button>
</div>
</div>
<div class="card">
<div class="card-header">
<h4>Disabled Tooltip</h4>
</div>
<div class="card-body">
<span class="d-inline-block" data-toggle="tooltip" data-title="Disabled tooltip">
<button class="btn btn-primary pe-none" type="button" disabled>Disabled button</button>
</span>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-6">
<div class="card">
<div class="card-header">
<h4>Link</h4>
</div>
<div class="card-body">
<a href="#" data-toggle="tooltip" title="Tooltip, bro!">Hover me!</a>
</div>
</div>
<div class="card">
<div class="card-header">
<h4>Paragraph</h4>
</div>
<div class="card-body">
<div class="buttons">
<p>Lorem ipsum dolor sit amet, consectetur <b data-toggle="tooltip" title="Hello, this is tooltip.">adipisicing elit</b>, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<footer class="main-footer">
<div class="footer-left">
Copyright &copy; 2018 <div class="bullet"></div> Design By <a href="https://nauval.in/">Muhamad Nauval Azhar</a>
</div>
<div class="footer-right">
</div>
</footer>
</div>
</div>
<!-- General JS Scripts -->
<script src="../assets/modules/jquery.min.js"></script>
<script src="../assets/modules/popper.js"></script>
<script src="../assets/modules/tooltip.js"></script>
<script src="../assets/modules/bootstrap/js/bootstrap.min.js"></script>
<script src="../assets/modules/nicescroll/jquery.nicescroll.min.js"></script>
<script src="../assets/modules/moment.min.js"></script>
<script src="../assets/js/stisla.js"></script>
<!-- JS Libraies -->
<!-- Page Specific JS File -->
<!-- Template JS File -->
<script src="../assets/js/scripts.js"></script>
<script src="../assets/js/custom.js"></script>
</body>
</html>

View File

@@ -0,0 +1,583 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no" name="viewport">
<title>Bootstrap Components &rsaquo; Typography &mdash; Stisla</title>
<!-- General CSS Files -->
<link rel="stylesheet" href="../assets/modules/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="../assets/modules/fontawesome/css/all.min.css">
<!-- CSS Libraries -->
<link rel="stylesheet" href="../assets/modules/prism/prism.css">
<!-- Template CSS -->
<link rel="stylesheet" href="../assets/css/style.css">
<link rel="stylesheet" href="../assets/css/components.css">
<link rel="stylesheet" href="../assets/css/rtl.css">
</head>
<body>
<div id="app">
<div class="main-wrapper main-wrapper-1">
<div class="navbar-bg"></div>
<nav class="navbar navbar-expand-lg main-navbar">
<form class="form-inline ml-auto">
<ul class="navbar-nav ml-3">
<li><a href="#" data-toggle="sidebar" class="nav-link nav-link-lg"><i class="fas fa-bars"></i></a></li>
<li><a href="#" data-toggle="search" class="nav-link nav-link-lg d-sm-none"><i class="fas fa-search"></i></a></li>
</ul>
<div class="search-element text-right">
<input class="form-control" type="search" placeholder="جستجو" aria-label="Search" data-width="250">
<button class="btn" type="submit"><i class="fas fa-search"></i></button>
<div class="search-backdrop"></div>
<div class="search-result">
<div class="search-header">
نتیجه جستجو
</div>
<div class="search-item">
<a href="#">چگونه ناسا رو هک کنیم؟</a>
<a href="#" class="search-close"><i class="fas fa-times"></i></a>
</div>
<div class="search-item">
<a href="#">Kodinger.com</a>
<a href="#" class="search-close"><i class="fas fa-times"></i></a>
</div>
<div class="search-item">
<a href="#">پنل مدیریت</a>
<a href="#" class="search-close"><i class="fas fa-times"></i></a>
</div>
<div class="search-header">
نتایج
</div>
<div class="search-item">
<a href="#">
<img class="ml-3 rounded" width="30" src="../assets/img/products/product-3-50.png" alt="product">
آیفون s9 تولید شد
</a>
</div>
<div class="search-item">
<a href="#">
<img class="ml-3 rounded" width="30" src="../assets/img/products/product-2-50.png" alt="product">
چه شادی هایی که زیر پای انسانها سرکوب شدند
</a>
</div>
<div class="search-item">
<a href="#">
<img class="ml-3 rounded" width="30" src="../assets/img/products/product-1-50.png" alt="product">
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ.
</a>
</div>
<div class="search-header">
پروژه ها
</div>
<div class="search-item">
<a href="#">
<div class="search-icon bg-danger text-white ml-3">
<i class="fas fa-code"></i>
</div>
متریال ادمین پنل
</a>
</div>
<div class="search-item">
<a href="#">
<div class="search-icon bg-primary text-white ml-3">
<i class="fas fa-laptop"></i>
</div>
ایجاد صفحه لندینگ
</a>
</div>
</div>
</div>
</form>
<ul class="navbar-nav navbar-right">
<li class="dropdown dropdown-list-toggle"><a href="#" data-toggle="dropdown" class="nav-link nav-link-lg message-toggle beep"><i class="far fa-envelope"></i></a>
<div class="dropdown-menu dropdown-list text-right dropdown-menu-left">
<div class="dropdown-header">پیام ها
<div class="float-left">
<a href="#">علامتگذاری همه بصورت خوانده شده</a>
</div>
</div>
<div class="dropdown-list-content dropdown-list-message">
<a href="#" class="dropdown-item dropdown-item-unread">
<div class="dropdown-item-avatar">
<img alt="image" src="../assets/img/avatar/avatar-1.png" class="rounded-circle">
<div class="is-online"></div>
</div>
<div class="dropdown-item-desc text-right">
<b>مهدی خانزادی</b>
<p>سلام داداچ!</p>
<div class="time">۱۰ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item dropdown-item-unread">
<div class="dropdown-item-avatar">
<img alt="image" src="../assets/img/avatar/avatar-2.png" class="rounded-circle">
</div>
<div class="dropdown-item-desc">
<b>مهیار انصاری</b>
<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ.</p>
<div class="time">۱۲ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item dropdown-item-unread">
<div class="dropdown-item-avatar">
<img alt="image" src="../assets/img/avatar/avatar-3.png" class="rounded-circle">
<div class="is-online"></div>
</div>
<div class="dropdown-item-desc">
<b>آمیتا پاچان</b>
<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ.</p>
<div class="time">۱۲ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-avatar">
<img alt="image" src="../assets/img/avatar/avatar-4.png" class="rounded-circle">
</div>
<div class="dropdown-item-desc">
<b>مهدی خانزادی</b>
<p>سلام سیستم پشتیبانی پاترونیک رو استفاده کنید</p>
<div class="time">۱۶ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-avatar">
<img alt="image" src="../assets/img/avatar/avatar-5.png" class="rounded-circle">
</div>
<div class="dropdown-item-desc">
<b>لورم ایپسوم</b>
<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ.</p>
<div class="time">دیروز</div>
</div>
</a>
</div>
<div class="dropdown-footer text-center">
<a href="#"> دیدن همه پیام ها<i class="fas fa-chevron-left"></i></a>
</div>
</div>
</li>
<li class="dropdown dropdown-list-toggle"><a href="#" data-toggle="dropdown" class="nav-link notification-toggle nav-link-lg beep"><i class="far fa-bell"></i></a>
<div class="dropdown-menu dropdown-list dropdown-menu-left">
<div class="dropdown-header text-right">نوتیفیکیشن ها
<div class="float-left">
<a href="#"> علامتگذاری همه بصورت خوانده شده</a>
</div>
</div>
<div class="dropdown-list-content dropdown-list-icons text-right">
<a href="#" class="dropdown-item dropdown-item-unread">
<div class="dropdown-item-icon bg-primary text-white">
<i class="fas fa-code"></i>
</div>
<div class="dropdown-item-desc">
قالب مدیریتی متریال اپدیت جدید داد!
<div class="time text-primary">۲ دقیقه پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-icon bg-info text-white">
<i class="far fa-user"></i>
</div>
<div class="dropdown-item-desc">
<b>شما</b> و <b>مهیار انصاری</b> هم اکنون همکار هستید.
<div class="time">۱۰ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-icon bg-success text-white">
<i class="fas fa-check"></i>
</div>
<div class="dropdown-item-desc">
<b>مهدی خانزادی</b> اطلاعات مرتبط با <b>قالب</b> را <b>آپلود کرد.</b>
<div class="time">۱۲ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-icon bg-danger text-white">
<i class="fas fa-exclamation-triangle"></i>
</div>
<div class="dropdown-item-desc">
فضای هارد دیسک پر شده است لطفا آن را خالی کنید.
<div class="time">۱۷ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-icon bg-info text-white">
<i class="fas fa-bell"></i>
</div>
<div class="dropdown-item-desc">
به قالب متریال خوش آمدید
<div class="time">دیروز</div>
</div>
</a>
</div>
<div class="dropdown-footer text-center">
<a href="#">
<span>نمایش همه</span>
<i class="fas fa-chevron-left"></i>
</a>
</div>
</div>
</li>
<li class="dropdown"><a href="#" data-toggle="dropdown" class="nav-link dropdown-toggle nav-link-lg nav-link-user">
<img alt="image" src="../assets/img/avatar/avatar-1.png" class="rounded-circle mr-1">
<div class="d-sm-none d-lg-inline-block">سلام مهدی</div></a>
<div class="dropdown-menu dropdown-menu-right text-right">
<div class="dropdown-title text-center">۵ دقیقه پیش لاگین کردین</div>
<a href="features-profile.html" class="dropdown-item has-icon">
<span>پروفایل</span>
<i class="far fa-user"></i>
</a>
<a href="features-activities.html" class="dropdown-item has-icon">
<span>فعالیت ها</span>
<i class="fas fa-bolt"></i>
</a>
<a href="features-settings.html" class="dropdown-item has-icon">
<span>تنظیمات</span>
<i class="fas fa-cog"></i>
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item has-icon text-danger">
<span>خروج</span>
<i class="fas fa-sign-out-alt"></i>
</a>
</div>
</li>
</ul>
</nav>
<div class="main-sidebar sidebar-style-2">
<aside id="sidebar-wrapper">
<div class="sidebar-brand">
<a href="index.html">مدیریت پاترونیک</a>
</div>
<div class="sidebar-brand sidebar-brand-sm">
<a href="index.html">مدیریت فروش</a>
</div>
<ul class="sidebar-menu">
<li class="menu-header">داشبورد</li>
<li class="dropdown active">
<a href="#" class="nav-link has-dropdown"><i class="fas fa-fire"></i><span>داشبورد</span></a>
<ul class="dropdown-menu">
<li class=active><a class="nav-link" href="index-0.html">داشبورد عمومی</a></li>
<li><a class="nav-link" href="index.html">داشبورد فروش محصولات</a></li>
</ul>
</li>
<li class="menu-header">امکانات بیشتر</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown" data-toggle="dropdown"><i class="fas fa-columns"></i> <span>صفحه بندی</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="layout-default.html">حالت پیش فرض</a></li>
<li><a class="nav-link" href="layout-transparent.html">سایدبار بدون رنگ</a></li>
<li><a class="nav-link" href="layout-top-navigation.html">نویگیشن بالا</a></li>
</ul>
</li>
<li><a class="nav-link" href="blank.html"><i class="far fa-square"></i> <span>صفحه خالی</span></a></li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="fas fa-th"></i> <span>بوت استرپ</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="bootstrap-alert.html">آلرت</a></li>
<li><a class="nav-link" href="bootstrap-badge.html">بدج</a></li>
<li><a class="nav-link" href="bootstrap-breadcrumb.html">بردکرامپ</a></li>
<li><a class="nav-link" href="bootstrap-buttons.html">دکمه ها</a></li>
<li><a class="nav-link" href="bootstrap-card.html">کارت</a></li>
<li><a class="nav-link" href="bootstrap-carousel.html">کروسل</a></li>
<li><a class="nav-link" href="bootstrap-collapse.html">کولاپس</a></li>
<li><a class="nav-link" href="bootstrap-dropdown.html">دراپ دون</a></li>
<li><a class="nav-link" href="bootstrap-form.html">فرم</a></li>
<li><a class="nav-link" href="bootstrap-list-group.html">لیست گروه</a></li>
<li><a class="nav-link" href="bootstrap-media-object.html">مدیا ابجکت</a></li>
<li><a class="nav-link" href="bootstrap-modal.html">مودال</a></li>
<li><a class="nav-link" href="bootstrap-nav.html">نویگیشن</a></li>
<li><a class="nav-link" href="bootstrap-navbar.html">نوبار</a></li>
<li><a class="nav-link" href="bootstrap-pagination.html">پجینیشن</a></li>
<li><a class="nav-link" href="bootstrap-popover.html">پاپ اور</a></li>
<li><a class="nav-link" href="bootstrap-progress.html">پراگرس</a></li>
<li><a class="nav-link" href="bootstrap-table.html">جدول</a></li>
<li><a class="nav-link" href="bootstrap-tooltip.html">تولتیپ</a></li>
<li><a class="nav-link" href="bootstrap-typography.html">تایپوگرافی</a></li>
</ul>
</li>
<li class="menu-header">امکانات دیگر</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="fas fa-th-large"></i> <span>کامپوننت ها</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="components-gallery.html">گالری</a></li>
<li><a class="nav-link" href="components-multiple-upload.html">مولتی آپلود</a></li>
<li><a class="nav-link" href="components-tab.html">تب</a></li>
<li><a class="nav-link" href="components-table.html">جدول</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="far fa-file-alt"></i> <span>فرم ها</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="forms-advanced-form.html">فرم پیشرفته</a></li>
<li><a class="nav-link" href="forms-editor.html">ویرایشگر</a></li>
<li><a class="nav-link" href="forms-validation.html">ولیدیشن</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="fas fa-plug"></i> <span>ماژول ها</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="modules-calendar.html">تقویم</a></li>
<li><a class="nav-link" href="modules-chartjs.html">چارت ها</a></li>
<li><a class="nav-link" href="modules-datatables.html">دیتاتیبل</a></li>
<li><a class="nav-link" href="modules-flag.html">پرچم</a></li>
<li><a class="nav-link" href="modules-font-awesome.html">فونت اوسوم</a></li>
<li><a class="nav-link" href="modules-ion-icons.html">ای او ن ایکون</a></li>
<li><a class="nav-link" href="modules-owl-carousel.html">اول کراسول</a></li>
<li><a class="nav-link" href="modules-sparkline.html">اسپارک لاین</a></li>
<li><a class="nav-link" href="modules-sweet-alert.html">سویت الرت</a></li>
<li><a class="nav-link" href="modules-toastr.html">توستر</a></li>
<li><a class="nav-link" href="modules-vector-map.html">وکتور مپ</a></li>
<li><a class="nav-link" href="modules-weather-icon.html">ایکن اب و هوا</a></li>
</ul>
</li>
<li class="menu-header">صفحات</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="far fa-user"></i> <span>ثبت نام</span></a>
<ul class="dropdown-menu">
<li><a href="auth-forgot-password.html">فراموشی کلمه عبور</a></li>
<li><a href="auth-login.html">لاگین</a></li>
<li><a href="auth-register.html">ثبت نام</a></li>
<li><a href="auth-reset-password.html">بازیابی کلمه عبور</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="fas fa-exclamation"></i> <span>خطاها</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="errors-503.html">503</a></li>
<li><a class="nav-link" href="errors-403.html">403</a></li>
<li><a class="nav-link" href="errors-404.html">404</a></li>
<li><a class="nav-link" href="errors-500.html">500</a></li>
</ul>
</li>
<li><a class="nav-link" href="credits.html"><i class="fas fa-pencil-ruler"></i> <span>سازنده ها</span></a></li>
</ul>
<div class="mt-4 mb-4 p-3 hide-sidebar-mini">
<a href="https://getstisla.com/docs" class="btn btn-primary btn-lg btn-block btn-icon-split">
<i class="fas fa-rocket"></i> مستندات قالب
</a>
</div>
</aside>
</div>
<!-- Main Content -->
<div class="main-content">
<section class="section">
<div class="section-header">
<h1>تایپوگرافی</h1>
<div class="section-header-breadcrumb">
<div class="breadcrumb-item active"><a href="#">داشبورد</a></div>
<div class="breadcrumb-item"><a href="#">کامپوننت بوت استرپ</a></div>
<div class="breadcrumb-item">تایپوگرافی</div>
</div>
</div>
<div class="section-body text-right">
<h2 class="section-title">تایپوگرافی</h2>
<p class="section-lead">اینجا میتونید تایپوگرافی رو ببینید.</p>
<div class="row">
<div class="col-12 col-md-6 col-lg-6">
<div class="card">
<div class="card-header">
<h4>Text</h4>
</div>
<div class="card-body">
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<h3 class="mt-4">
Fancy display heading
<small class="text-muted">With faded secondary text</small>
</h3>
<p class="lead mt-4">
Lead &mdash; Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
</p>
<p class="mt-4 mb-4">Paragraph &mdash; Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
<a href="#">You can click me!</a>
</div>
</div>
<div class="card">
<div class="card-header">
<h4>Text Colors</h4>
</div>
<div class="card-body">
<div class="text-primary mb-2">Text Primary</div>
<div class="text-secondary mb-2">Text Secondary</div>
<div class="text-success mb-2">Text Success</div>
<div class="text-info mb-2">Text Info</div>
<div class="text-warning mb-2">Text Warning</div>
<div class="text-light mb-2">Text Light</div>
<div class="text-dark mb-2">Text Dark</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h4>Inline Text Element</h4>
</div>
<div class="card-body">
<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>
</div>
</div>
<div class="card">
<div class="card-header">
<h4>Abbreviations</h4>
</div>
<div class="card-body">
<p><abbr title="attribute">attr</abbr></p>
<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-6">
<div class="card">
<div class="card-header">
<h4>Color</h4>
</div>
<div class="card-body">
<div class="colors">
<div class="color bg-primary text-white"><div>Primary</div></div>
<div class="color bg-secondary text-white"><div>Secondary</div></div>
<div class="color bg-success text-white"><div>Success</div></div>
<div class="color bg-info text-white"><div>Info</div></div>
<div class="color bg-warning text-white"><div>Warning</div></div>
<div class="color bg-danger text-white"><div>Danger</div></div>
<div class="color bg-light"><div>Light</div></div>
<div class="color bg-dark text-white"><div>Dark</div></div>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h4>Text Block</h4>
</div>
<div class="card-body">
<div class="section-title mt-0">Blockquote</div>
<blockquote>
patronic made with hand
</blockquote>
<div class="section-title">Inline Code</div>
<p>Lorem ipsum dolor sit amet, <code>consectetur</code> adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud <code>exercitation</code> ullamco laboris nisi ut aliquip ex ea commodo
consequat.</p>
<div class="section-title">Code Block</div>
<p>We use PrismJS to do this, you can adjust themes, syntax and more. <a href="http://prismjs.com">Visit their documentation</a>.</p>
<pre class="language-javascript"><code>var code = 'Hello';</code></pre>
</div>
</div>
<div class="card">
<div class="card-header">
<h4>Display</h4>
</div>
<div class="card-body">
<div class="display-1">Display 1</div>
<hr>
<div class="display-2">Display 2</div>
<hr>
<div class="display-3">Display 3</div>
<hr>
<div class="display-4">Display 4</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h4>Naming a Source</h4>
</div>
<div class="card-body">
<blockquote class="blockquote">
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
</div>
</div>
</div>
</div>
<h2 class="section-title">List</h2>
<div class="row">
<div class="col-12 col-md-6 col-lg-6">
<div class="card">
<div class="card-header">
<h4>Unordered List</h4>
</div>
<div class="card-body">
<p>Sunt in culpa qui officia deserunt mollit anim id est laborum:</p>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</li>
<li>tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,</li>
<li>quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo</li>
<li>consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse</li>
<li>cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non</li>
<li>proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li>
</ul>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-6">
<div class="card">
<div class="card-header">
<h4>Ordered List</h4>
</div>
<div class="card-body">
<p>Sunt in culpa qui officia deserunt mollit anim id est laborum:</p>
<ol>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</li>
<li>tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,</li>
<li>quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo</li>
<li>consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse</li>
<li>cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non</li>
<li>proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li>
<li>consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse</li>
</ol>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<footer class="main-footer">
<div class="footer-left">
Copyright &copy; 2018 <div class="bullet"></div> Design By <a href="https://nauval.in/">Muhamad Nauval Azhar</a>
</div>
<div class="footer-right">
</div>
</footer>
</div>
</div>
<!-- General JS Scripts -->
<script src="../assets/modules/jquery.min.js"></script>
<script src="../assets/modules/popper.js"></script>
<script src="../assets/modules/tooltip.js"></script>
<script src="../assets/modules/bootstrap/js/bootstrap.min.js"></script>
<script src="../assets/modules/nicescroll/jquery.nicescroll.min.js"></script>
<script src="../assets/modules/moment.min.js"></script>
<script src="../assets/js/stisla.js"></script>
<!-- JS Libraies -->
<script src="../assets/modules/prism/prism.js"></script>
<!-- Page Specific JS File -->
<!-- Template JS File -->
<script src="../assets/js/scripts.js"></script>
<script src="../assets/js/custom.js"></script>
</body>
</html>

View File

@@ -0,0 +1,503 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no" name="viewport">
<title>Bootstrap Components &rsaquo; Gallery &mdash; Stisla</title>
<!-- General CSS Files -->
<link rel="stylesheet" href="../assets/modules/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="../assets/modules/fontawesome/css/all.min.css">
<!-- CSS Libraries -->
<link rel="stylesheet" href="../assets/modules/chocolat/dist/css/chocolat.css">
<!-- Template CSS -->
<link rel="stylesheet" href="../assets/css/style.css">
<link rel="stylesheet" href="../assets/css/components.css">
<link rel="stylesheet" href="../assets/css/rtl.css">
</head>
<body>
<div id="app">
<div class="main-wrapper main-wrapper-1">
<div class="navbar-bg"></div>
<nav class="navbar navbar-expand-lg main-navbar">
<form class="form-inline ml-auto">
<ul class="navbar-nav ml-3">
<li><a href="#" data-toggle="sidebar" class="nav-link nav-link-lg"><i class="fas fa-bars"></i></a></li>
<li><a href="#" data-toggle="search" class="nav-link nav-link-lg d-sm-none"><i class="fas fa-search"></i></a></li>
</ul>
<div class="search-element text-right">
<input class="form-control" type="search" placeholder="جستجو" aria-label="Search" data-width="250">
<button class="btn" type="submit"><i class="fas fa-search"></i></button>
<div class="search-backdrop"></div>
<div class="search-result">
<div class="search-header">
نتیجه جستجو
</div>
<div class="search-item">
<a href="#">چگونه ناسا رو هک کنیم؟</a>
<a href="#" class="search-close"><i class="fas fa-times"></i></a>
</div>
<div class="search-item">
<a href="#">Kodinger.com</a>
<a href="#" class="search-close"><i class="fas fa-times"></i></a>
</div>
<div class="search-item">
<a href="#">پنل مدیریت</a>
<a href="#" class="search-close"><i class="fas fa-times"></i></a>
</div>
<div class="search-header">
نتایج
</div>
<div class="search-item">
<a href="#">
<img class="ml-3 rounded" width="30" src="../assets/img/products/product-3-50.png" alt="product">
آیفون s9 تولید شد
</a>
</div>
<div class="search-item">
<a href="#">
<img class="ml-3 rounded" width="30" src="../assets/img/products/product-2-50.png" alt="product">
چه شادی هایی که زیر پای انسانها سرکوب شدند
</a>
</div>
<div class="search-item">
<a href="#">
<img class="ml-3 rounded" width="30" src="../assets/img/products/product-1-50.png" alt="product">
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ.
</a>
</div>
<div class="search-header">
پروژه ها
</div>
<div class="search-item">
<a href="#">
<div class="search-icon bg-danger text-white ml-3">
<i class="fas fa-code"></i>
</div>
متریال ادمین پنل
</a>
</div>
<div class="search-item">
<a href="#">
<div class="search-icon bg-primary text-white ml-3">
<i class="fas fa-laptop"></i>
</div>
ایجاد صفحه لندینگ
</a>
</div>
</div>
</div>
</form>
<ul class="navbar-nav navbar-right">
<li class="dropdown dropdown-list-toggle"><a href="#" data-toggle="dropdown" class="nav-link nav-link-lg message-toggle beep"><i class="far fa-envelope"></i></a>
<div class="dropdown-menu dropdown-list text-right dropdown-menu-left">
<div class="dropdown-header">پیام ها
<div class="float-left">
<a href="#">علامتگذاری همه بصورت خوانده شده</a>
</div>
</div>
<div class="dropdown-list-content dropdown-list-message">
<a href="#" class="dropdown-item dropdown-item-unread">
<div class="dropdown-item-avatar">
<img alt="image" src="../assets/img/avatar/avatar-1.png" class="rounded-circle">
<div class="is-online"></div>
</div>
<div class="dropdown-item-desc text-right">
<b>مهدی خانزادی</b>
<p>سلام داداچ!</p>
<div class="time">۱۰ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item dropdown-item-unread">
<div class="dropdown-item-avatar">
<img alt="image" src="../assets/img/avatar/avatar-2.png" class="rounded-circle">
</div>
<div class="dropdown-item-desc">
<b>مهیار انصاری</b>
<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ.</p>
<div class="time">۱۲ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item dropdown-item-unread">
<div class="dropdown-item-avatar">
<img alt="image" src="../assets/img/avatar/avatar-3.png" class="rounded-circle">
<div class="is-online"></div>
</div>
<div class="dropdown-item-desc">
<b>آمیتا پاچان</b>
<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ.</p>
<div class="time">۱۲ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-avatar">
<img alt="image" src="../assets/img/avatar/avatar-4.png" class="rounded-circle">
</div>
<div class="dropdown-item-desc">
<b>مهدی خانزادی</b>
<p>سلام سیستم پشتیبانی پاترونیک رو استفاده کنید</p>
<div class="time">۱۶ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-avatar">
<img alt="image" src="../assets/img/avatar/avatar-5.png" class="rounded-circle">
</div>
<div class="dropdown-item-desc">
<b>لورم ایپسوم</b>
<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ.</p>
<div class="time">دیروز</div>
</div>
</a>
</div>
<div class="dropdown-footer text-center">
<a href="#"> دیدن همه پیام ها<i class="fas fa-chevron-left"></i></a>
</div>
</div>
</li>
<li class="dropdown dropdown-list-toggle"><a href="#" data-toggle="dropdown" class="nav-link notification-toggle nav-link-lg beep"><i class="far fa-bell"></i></a>
<div class="dropdown-menu dropdown-list dropdown-menu-left">
<div class="dropdown-header text-right">نوتیفیکیشن ها
<div class="float-left">
<a href="#"> علامتگذاری همه بصورت خوانده شده</a>
</div>
</div>
<div class="dropdown-list-content dropdown-list-icons text-right">
<a href="#" class="dropdown-item dropdown-item-unread">
<div class="dropdown-item-icon bg-primary text-white">
<i class="fas fa-code"></i>
</div>
<div class="dropdown-item-desc">
قالب مدیریتی متریال اپدیت جدید داد!
<div class="time text-primary">۲ دقیقه پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-icon bg-info text-white">
<i class="far fa-user"></i>
</div>
<div class="dropdown-item-desc">
<b>شما</b> و <b>مهیار انصاری</b> هم اکنون همکار هستید.
<div class="time">۱۰ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-icon bg-success text-white">
<i class="fas fa-check"></i>
</div>
<div class="dropdown-item-desc">
<b>مهدی خانزادی</b> اطلاعات مرتبط با <b>قالب</b> را <b>آپلود کرد.</b>
<div class="time">۱۲ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-icon bg-danger text-white">
<i class="fas fa-exclamation-triangle"></i>
</div>
<div class="dropdown-item-desc">
فضای هارد دیسک پر شده است لطفا آن را خالی کنید.
<div class="time">۱۷ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-icon bg-info text-white">
<i class="fas fa-bell"></i>
</div>
<div class="dropdown-item-desc">
به قالب متریال خوش آمدید
<div class="time">دیروز</div>
</div>
</a>
</div>
<div class="dropdown-footer text-center">
<a href="#">
<span>نمایش همه</span>
<i class="fas fa-chevron-left"></i>
</a>
</div>
</div>
</li>
<li class="dropdown"><a href="#" data-toggle="dropdown" class="nav-link dropdown-toggle nav-link-lg nav-link-user">
<img alt="image" src="../assets/img/avatar/avatar-1.png" class="rounded-circle mr-1">
<div class="d-sm-none d-lg-inline-block">سلام مهدی</div></a>
<div class="dropdown-menu dropdown-menu-right text-right">
<div class="dropdown-title text-center">۵ دقیقه پیش لاگین کردین</div>
<a href="features-profile.html" class="dropdown-item has-icon">
<span>پروفایل</span>
<i class="far fa-user"></i>
</a>
<a href="features-activities.html" class="dropdown-item has-icon">
<span>فعالیت ها</span>
<i class="fas fa-bolt"></i>
</a>
<a href="features-settings.html" class="dropdown-item has-icon">
<span>تنظیمات</span>
<i class="fas fa-cog"></i>
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item has-icon text-danger">
<span>خروج</span>
<i class="fas fa-sign-out-alt"></i>
</a>
</div>
</li>
</ul>
</nav>
<div class="main-sidebar sidebar-style-2">
<aside id="sidebar-wrapper">
<div class="sidebar-brand">
<a href="index.html">مدیریت پاترونیک</a>
</div>
<div class="sidebar-brand sidebar-brand-sm">
<a href="index.html">مدیریت فروش</a>
</div>
<ul class="sidebar-menu">
<li class="menu-header">داشبورد</li>
<li class="dropdown active">
<a href="#" class="nav-link has-dropdown"><i class="fas fa-fire"></i><span>داشبورد</span></a>
<ul class="dropdown-menu">
<li class=active><a class="nav-link" href="index-0.html">داشبورد عمومی</a></li>
<li><a class="nav-link" href="index.html">داشبورد فروش محصولات</a></li>
</ul>
</li>
<li class="menu-header">امکانات بیشتر</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown" data-toggle="dropdown"><i class="fas fa-columns"></i> <span>صفحه بندی</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="layout-default.html">حالت پیش فرض</a></li>
<li><a class="nav-link" href="layout-transparent.html">سایدبار بدون رنگ</a></li>
<li><a class="nav-link" href="layout-top-navigation.html">نویگیشن بالا</a></li>
</ul>
</li>
<li><a class="nav-link" href="blank.html"><i class="far fa-square"></i> <span>صفحه خالی</span></a></li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="fas fa-th"></i> <span>بوت استرپ</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="bootstrap-alert.html">آلرت</a></li>
<li><a class="nav-link" href="bootstrap-badge.html">بدج</a></li>
<li><a class="nav-link" href="bootstrap-breadcrumb.html">بردکرامپ</a></li>
<li><a class="nav-link" href="bootstrap-buttons.html">دکمه ها</a></li>
<li><a class="nav-link" href="bootstrap-card.html">کارت</a></li>
<li><a class="nav-link" href="bootstrap-carousel.html">کروسل</a></li>
<li><a class="nav-link" href="bootstrap-collapse.html">کولاپس</a></li>
<li><a class="nav-link" href="bootstrap-dropdown.html">دراپ دون</a></li>
<li><a class="nav-link" href="bootstrap-form.html">فرم</a></li>
<li><a class="nav-link" href="bootstrap-list-group.html">لیست گروه</a></li>
<li><a class="nav-link" href="bootstrap-media-object.html">مدیا ابجکت</a></li>
<li><a class="nav-link" href="bootstrap-modal.html">مودال</a></li>
<li><a class="nav-link" href="bootstrap-nav.html">نویگیشن</a></li>
<li><a class="nav-link" href="bootstrap-navbar.html">نوبار</a></li>
<li><a class="nav-link" href="bootstrap-pagination.html">پجینیشن</a></li>
<li><a class="nav-link" href="bootstrap-popover.html">پاپ اور</a></li>
<li><a class="nav-link" href="bootstrap-progress.html">پراگرس</a></li>
<li><a class="nav-link" href="bootstrap-table.html">جدول</a></li>
<li><a class="nav-link" href="bootstrap-tooltip.html">تولتیپ</a></li>
<li><a class="nav-link" href="bootstrap-typography.html">تایپوگرافی</a></li>
</ul>
</li>
<li class="menu-header">امکانات دیگر</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="fas fa-th-large"></i> <span>کامپوننت ها</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="components-gallery.html">گالری</a></li>
<li><a class="nav-link" href="components-multiple-upload.html">مولتی آپلود</a></li>
<li><a class="nav-link" href="components-tab.html">تب</a></li>
<li><a class="nav-link" href="components-table.html">جدول</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="far fa-file-alt"></i> <span>فرم ها</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="forms-advanced-form.html">فرم پیشرفته</a></li>
<li><a class="nav-link" href="forms-editor.html">ویرایشگر</a></li>
<li><a class="nav-link" href="forms-validation.html">ولیدیشن</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="fas fa-plug"></i> <span>ماژول ها</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="modules-calendar.html">تقویم</a></li>
<li><a class="nav-link" href="modules-chartjs.html">چارت ها</a></li>
<li><a class="nav-link" href="modules-datatables.html">دیتاتیبل</a></li>
<li><a class="nav-link" href="modules-flag.html">پرچم</a></li>
<li><a class="nav-link" href="modules-font-awesome.html">فونت اوسوم</a></li>
<li><a class="nav-link" href="modules-ion-icons.html">ای او ن ایکون</a></li>
<li><a class="nav-link" href="modules-owl-carousel.html">اول کراسول</a></li>
<li><a class="nav-link" href="modules-sparkline.html">اسپارک لاین</a></li>
<li><a class="nav-link" href="modules-sweet-alert.html">سویت الرت</a></li>
<li><a class="nav-link" href="modules-toastr.html">توستر</a></li>
<li><a class="nav-link" href="modules-vector-map.html">وکتور مپ</a></li>
<li><a class="nav-link" href="modules-weather-icon.html">ایکن اب و هوا</a></li>
</ul>
</li>
<li class="menu-header">صفحات</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="far fa-user"></i> <span>ثبت نام</span></a>
<ul class="dropdown-menu">
<li><a href="auth-forgot-password.html">فراموشی کلمه عبور</a></li>
<li><a href="auth-login.html">لاگین</a></li>
<li><a href="auth-register.html">ثبت نام</a></li>
<li><a href="auth-reset-password.html">بازیابی کلمه عبور</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="fas fa-exclamation"></i> <span>خطاها</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="errors-503.html">503</a></li>
<li><a class="nav-link" href="errors-403.html">403</a></li>
<li><a class="nav-link" href="errors-404.html">404</a></li>
<li><a class="nav-link" href="errors-500.html">500</a></li>
</ul>
</li>
<li><a class="nav-link" href="credits.html"><i class="fas fa-pencil-ruler"></i> <span>سازنده ها</span></a></li>
</ul>
<div class="mt-4 mb-4 p-3 hide-sidebar-mini">
<a href="https://getstisla.com/docs" class="btn btn-primary btn-lg btn-block btn-icon-split">
<i class="fas fa-rocket"></i> مستندات قالب
</a>
</div>
</aside>
</div>
<!-- Main Content -->
<div class="main-content">
<section class="section">
<div class="section-header">
<h1>Gallery</h1>
<div class="section-header-breadcrumb">
<div class="breadcrumb-item active"><a href="#">Dashboard</a></div>
<div class="breadcrumb-item"><a href="#">Components</a></div>
<div class="breadcrumb-item">Gallery</div>
</div>
</div>
<div class="section-body text-right">
<h2 class="section-title">گالری</h2>
<p class="section-lead">گروه بندی چندتا عکس توی دسته بندی های مختلف.</p>
<div class="row">
<div class="col-12 col-sm-12 col-lg-4">
<div class="row">
<div class="col-12 col-sm-6 col-lg-12">
<div class="card">
<div class="card-header">
<h4>گالری</h4>
</div>
<div class="card-body">
<div class="gallery text-center">
<div class="gallery-item" data-image="../assets/img/news/img01.jpg" data-title="Image 1"></div>
<div class="gallery-item" data-image="../assets/img/news/img02.jpg" data-title="Image 2"></div>
<div class="gallery-item" data-image="../assets/img/news/img03.jpg" data-title="Image 3"></div>
<div class="gallery-item" data-image="../assets/img/news/img04.jpg" data-title="Image 4"></div>
<div class="gallery-item" data-image="../assets/img/news/img05.jpg" data-title="Image 5"></div>
<div class="gallery-item" data-image="../assets/img/news/img06.jpg" data-title="Image 6"></div>
<div class="gallery-item" data-image="../assets/img/news/img07.jpg" data-title="Image 7"></div>
<div class="gallery-item" data-image="../assets/img/news/img08.jpg" data-title="Image 8"></div>
</div>
</div>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-12">
<div class="card">
<div class="card-header">
<h4>گالری</h4>
</div>
<div class="card-body">
<div class="gallery">
<div class="gallery-item" data-image="../assets/img/news/img05.jpg" data-title="Image 1"></div>
<div class="gallery-item" data-image="../assets/img/news/img08.jpg" data-title="Image 2"></div>
<div class="gallery-item" data-image="../assets/img/news/img04.jpg" data-title="Image 3"></div>
<div class="gallery-item" data-image="../assets/img/news/img11.jpg" data-title="Image 4"></div>
<div class="gallery-item" data-image="../assets/img/news/img02.jpg" data-title="Image 5"></div>
<div class="gallery-item" data-image="../assets/img/news/img05.jpg" data-title="Image 6"></div>
<div class="gallery-item" data-image="../assets/img/news/img03.jpg" data-title="Image 7"></div>
<div class="gallery-item gallery-more" data-image="../assets/img/news/img02.jpg" data-title="Image 8">
<div>+2</div>
</div>
<div class="gallery-item gallery-hide" data-image="../assets/img/news/img11.jpg" data-title="Image 9"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-4">
<div class="card">
<div class="card-header">
<h4>گالری <code>.gallery-md</code></h4>
</div>
<div class="card-body">
<div class="gallery gallery-md">
<div class="gallery-item" data-image="../assets/img/news/img03.jpg" data-title="Image 1"></div>
<div class="gallery-item" data-image="../assets/img/news/img14.jpg" data-title="Image 2"></div>
<div class="gallery-item" data-image="../assets/img/news/img08.jpg" data-title="Image 3"></div>
<div class="gallery-item" data-image="../assets/img/news/img05.jpg" data-title="Image 4"></div>
<div class="gallery-item" data-image="../assets/img/news/img11.jpg" data-title="Image 5"></div>
<div class="gallery-item" data-image="../assets/img/news/img09.jpg" data-title="Image 6"></div>
<div class="gallery-item" data-image="../assets/img/news/img12.jpg" data-title="Image 8"></div>
<div class="gallery-item" data-image="../assets/img/news/img13.jpg" data-title="Image 9"></div>
<div class="gallery-item" data-image="../assets/img/news/img14.jpg" data-title="Image 10"></div>
<div class="gallery-item" data-image="../assets/img/news/img15.jpg" data-title="Image 11"></div>
<div class="gallery-item gallery-more" data-image="../assets/img/news/img08.jpg" data-title="Image 12">
<div>+2</div>
</div>
<div class="gallery-item gallery-hide" data-image="../assets/img/news/img01.jpg" data-title="Image 9"></div>
</div>
</div>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-4">
<div class="card">
<div class="card-header">
<h4>گالری <code>.gallery-fw</code></h4>
</div>
<div class="card-body">
<div class="gallery gallery-fw" data-item-height="100">
<div class="gallery-item" data-image="../assets/img/news/img09.jpg" data-title="Image 1"></div>
<div class="gallery-item" data-image="../assets/img/news/img10.jpg" data-title="Image 2"></div>
<div class="gallery-item gallery-more" data-image="../assets/img/news/img08.jpg" data-title="Image 3">
<div>+2</div>
</div>
<div class="gallery-item gallery-hide" data-image="../assets/img/news/img01.jpg" data-title="Image 4"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<footer class="main-footer">
<div class="footer-left">
Copyright &copy; 2018 <div class="bullet"></div> Design By <a href="https://nauval.in/">Muhamad Nauval Azhar</a>
</div>
<div class="footer-right">
</div>
</footer>
</div>
</div>
<!-- General JS Scripts -->
<script src="../assets/modules/jquery.min.js"></script>
<script src="../assets/modules/popper.js"></script>
<script src="../assets/modules/tooltip.js"></script>
<script src="../assets/modules/bootstrap/js/bootstrap.min.js"></script>
<script src="../assets/modules/nicescroll/jquery.nicescroll.min.js"></script>
<script src="../assets/modules/moment.min.js"></script>
<script src="../assets/js/stisla.js"></script>
<!-- JS Libraies -->
<script src="../assets/modules/chocolat/dist/js/jquery.chocolat.min.js"></script>
<!-- Page Specific JS File -->
<!-- Template JS File -->
<script src="../assets/js/scripts.js"></script>
<script src="../assets/js/custom.js"></script>
</body>
</html>

View File

@@ -0,0 +1,431 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no" name="viewport">
<title>Bootstrap Components &rsaquo; Multiple Upload &mdash; Stisla</title>
<!-- General CSS Files -->
<link rel="stylesheet" href="../assets/modules/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="../assets/modules/fontawesome/css/all.min.css">
<!-- CSS Libraries -->
<link rel="stylesheet" href="../assets/modules/dropzonejs/dropzone.css">
<!-- Template CSS -->
<link rel="stylesheet" href="../assets/css/style.css">
<link rel="stylesheet" href="../assets/css/components.css">
<link rel="stylesheet" href="../assets/css/rtl.css">
</head>
<body>
<div id="app">
<div class="main-wrapper main-wrapper-1">
<div class="navbar-bg"></div>
<nav class="navbar navbar-expand-lg main-navbar">
<form class="form-inline ml-auto">
<ul class="navbar-nav ml-3">
<li><a href="#" data-toggle="sidebar" class="nav-link nav-link-lg"><i class="fas fa-bars"></i></a></li>
<li><a href="#" data-toggle="search" class="nav-link nav-link-lg d-sm-none"><i class="fas fa-search"></i></a></li>
</ul>
<div class="search-element text-right">
<input class="form-control" type="search" placeholder="جستجو" aria-label="Search" data-width="250">
<button class="btn" type="submit"><i class="fas fa-search"></i></button>
<div class="search-backdrop"></div>
<div class="search-result">
<div class="search-header">
نتیجه جستجو
</div>
<div class="search-item">
<a href="#">چگونه ناسا رو هک کنیم؟</a>
<a href="#" class="search-close"><i class="fas fa-times"></i></a>
</div>
<div class="search-item">
<a href="#">Kodinger.com</a>
<a href="#" class="search-close"><i class="fas fa-times"></i></a>
</div>
<div class="search-item">
<a href="#">پنل مدیریت</a>
<a href="#" class="search-close"><i class="fas fa-times"></i></a>
</div>
<div class="search-header">
نتایج
</div>
<div class="search-item">
<a href="#">
<img class="ml-3 rounded" width="30" src="../assets/img/products/product-3-50.png" alt="product">
آیفون s9 تولید شد
</a>
</div>
<div class="search-item">
<a href="#">
<img class="ml-3 rounded" width="30" src="../assets/img/products/product-2-50.png" alt="product">
چه شادی هایی که زیر پای انسانها سرکوب شدند
</a>
</div>
<div class="search-item">
<a href="#">
<img class="ml-3 rounded" width="30" src="../assets/img/products/product-1-50.png" alt="product">
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ.
</a>
</div>
<div class="search-header">
پروژه ها
</div>
<div class="search-item">
<a href="#">
<div class="search-icon bg-danger text-white ml-3">
<i class="fas fa-code"></i>
</div>
متریال ادمین پنل
</a>
</div>
<div class="search-item">
<a href="#">
<div class="search-icon bg-primary text-white ml-3">
<i class="fas fa-laptop"></i>
</div>
ایجاد صفحه لندینگ
</a>
</div>
</div>
</div>
</form>
<ul class="navbar-nav navbar-right">
<li class="dropdown dropdown-list-toggle"><a href="#" data-toggle="dropdown" class="nav-link nav-link-lg message-toggle beep"><i class="far fa-envelope"></i></a>
<div class="dropdown-menu dropdown-list text-right dropdown-menu-left">
<div class="dropdown-header">پیام ها
<div class="float-left">
<a href="#">علامتگذاری همه بصورت خوانده شده</a>
</div>
</div>
<div class="dropdown-list-content dropdown-list-message">
<a href="#" class="dropdown-item dropdown-item-unread">
<div class="dropdown-item-avatar">
<img alt="image" src="../assets/img/avatar/avatar-1.png" class="rounded-circle">
<div class="is-online"></div>
</div>
<div class="dropdown-item-desc text-right">
<b>مهدی خانزادی</b>
<p>سلام داداچ!</p>
<div class="time">۱۰ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item dropdown-item-unread">
<div class="dropdown-item-avatar">
<img alt="image" src="../assets/img/avatar/avatar-2.png" class="rounded-circle">
</div>
<div class="dropdown-item-desc">
<b>مهیار انصاری</b>
<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ.</p>
<div class="time">۱۲ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item dropdown-item-unread">
<div class="dropdown-item-avatar">
<img alt="image" src="../assets/img/avatar/avatar-3.png" class="rounded-circle">
<div class="is-online"></div>
</div>
<div class="dropdown-item-desc">
<b>آمیتا پاچان</b>
<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ.</p>
<div class="time">۱۲ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-avatar">
<img alt="image" src="../assets/img/avatar/avatar-4.png" class="rounded-circle">
</div>
<div class="dropdown-item-desc">
<b>مهدی خانزادی</b>
<p>سلام سیستم پشتیبانی پاترونیک رو استفاده کنید</p>
<div class="time">۱۶ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-avatar">
<img alt="image" src="../assets/img/avatar/avatar-5.png" class="rounded-circle">
</div>
<div class="dropdown-item-desc">
<b>لورم ایپسوم</b>
<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ.</p>
<div class="time">دیروز</div>
</div>
</a>
</div>
<div class="dropdown-footer text-center">
<a href="#"> دیدن همه پیام ها<i class="fas fa-chevron-left"></i></a>
</div>
</div>
</li>
<li class="dropdown dropdown-list-toggle"><a href="#" data-toggle="dropdown" class="nav-link notification-toggle nav-link-lg beep"><i class="far fa-bell"></i></a>
<div class="dropdown-menu dropdown-list dropdown-menu-left">
<div class="dropdown-header text-right">نوتیفیکیشن ها
<div class="float-left">
<a href="#"> علامتگذاری همه بصورت خوانده شده</a>
</div>
</div>
<div class="dropdown-list-content dropdown-list-icons text-right">
<a href="#" class="dropdown-item dropdown-item-unread">
<div class="dropdown-item-icon bg-primary text-white">
<i class="fas fa-code"></i>
</div>
<div class="dropdown-item-desc">
قالب مدیریتی متریال اپدیت جدید داد!
<div class="time text-primary">۲ دقیقه پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-icon bg-info text-white">
<i class="far fa-user"></i>
</div>
<div class="dropdown-item-desc">
<b>شما</b> و <b>مهیار انصاری</b> هم اکنون همکار هستید.
<div class="time">۱۰ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-icon bg-success text-white">
<i class="fas fa-check"></i>
</div>
<div class="dropdown-item-desc">
<b>مهدی خانزادی</b> اطلاعات مرتبط با <b>قالب</b> را <b>آپلود کرد.</b>
<div class="time">۱۲ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-icon bg-danger text-white">
<i class="fas fa-exclamation-triangle"></i>
</div>
<div class="dropdown-item-desc">
فضای هارد دیسک پر شده است لطفا آن را خالی کنید.
<div class="time">۱۷ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-icon bg-info text-white">
<i class="fas fa-bell"></i>
</div>
<div class="dropdown-item-desc">
به قالب متریال خوش آمدید
<div class="time">دیروز</div>
</div>
</a>
</div>
<div class="dropdown-footer text-center">
<a href="#">
<span>نمایش همه</span>
<i class="fas fa-chevron-left"></i>
</a>
</div>
</div>
</li>
<li class="dropdown"><a href="#" data-toggle="dropdown" class="nav-link dropdown-toggle nav-link-lg nav-link-user">
<img alt="image" src="../assets/img/avatar/avatar-1.png" class="rounded-circle mr-1">
<div class="d-sm-none d-lg-inline-block">سلام مهدی</div></a>
<div class="dropdown-menu dropdown-menu-right text-right">
<div class="dropdown-title text-center">۵ دقیقه پیش لاگین کردین</div>
<a href="features-profile.html" class="dropdown-item has-icon">
<span>پروفایل</span>
<i class="far fa-user"></i>
</a>
<a href="features-activities.html" class="dropdown-item has-icon">
<span>فعالیت ها</span>
<i class="fas fa-bolt"></i>
</a>
<a href="features-settings.html" class="dropdown-item has-icon">
<span>تنظیمات</span>
<i class="fas fa-cog"></i>
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item has-icon text-danger">
<span>خروج</span>
<i class="fas fa-sign-out-alt"></i>
</a>
</div>
</li>
</ul>
</nav>
<div class="main-sidebar sidebar-style-2">
<aside id="sidebar-wrapper">
<div class="sidebar-brand">
<a href="index.html">مدیریت پاترونیک</a>
</div>
<div class="sidebar-brand sidebar-brand-sm">
<a href="index.html">مدیریت فروش</a>
</div>
<ul class="sidebar-menu">
<li class="menu-header">داشبورد</li>
<li class="dropdown active">
<a href="#" class="nav-link has-dropdown"><i class="fas fa-fire"></i><span>داشبورد</span></a>
<ul class="dropdown-menu">
<li class=active><a class="nav-link" href="index-0.html">داشبورد عمومی</a></li>
<li><a class="nav-link" href="index.html">داشبورد فروش محصولات</a></li>
</ul>
</li>
<li class="menu-header">امکانات بیشتر</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown" data-toggle="dropdown"><i class="fas fa-columns"></i> <span>صفحه بندی</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="layout-default.html">حالت پیش فرض</a></li>
<li><a class="nav-link" href="layout-transparent.html">سایدبار بدون رنگ</a></li>
<li><a class="nav-link" href="layout-top-navigation.html">نویگیشن بالا</a></li>
</ul>
</li>
<li><a class="nav-link" href="blank.html"><i class="far fa-square"></i> <span>صفحه خالی</span></a></li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="fas fa-th"></i> <span>بوت استرپ</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="bootstrap-alert.html">آلرت</a></li>
<li><a class="nav-link" href="bootstrap-badge.html">بدج</a></li>
<li><a class="nav-link" href="bootstrap-breadcrumb.html">بردکرامپ</a></li>
<li><a class="nav-link" href="bootstrap-buttons.html">دکمه ها</a></li>
<li><a class="nav-link" href="bootstrap-card.html">کارت</a></li>
<li><a class="nav-link" href="bootstrap-carousel.html">کروسل</a></li>
<li><a class="nav-link" href="bootstrap-collapse.html">کولاپس</a></li>
<li><a class="nav-link" href="bootstrap-dropdown.html">دراپ دون</a></li>
<li><a class="nav-link" href="bootstrap-form.html">فرم</a></li>
<li><a class="nav-link" href="bootstrap-list-group.html">لیست گروه</a></li>
<li><a class="nav-link" href="bootstrap-media-object.html">مدیا ابجکت</a></li>
<li><a class="nav-link" href="bootstrap-modal.html">مودال</a></li>
<li><a class="nav-link" href="bootstrap-nav.html">نویگیشن</a></li>
<li><a class="nav-link" href="bootstrap-navbar.html">نوبار</a></li>
<li><a class="nav-link" href="bootstrap-pagination.html">پجینیشن</a></li>
<li><a class="nav-link" href="bootstrap-popover.html">پاپ اور</a></li>
<li><a class="nav-link" href="bootstrap-progress.html">پراگرس</a></li>
<li><a class="nav-link" href="bootstrap-table.html">جدول</a></li>
<li><a class="nav-link" href="bootstrap-tooltip.html">تولتیپ</a></li>
<li><a class="nav-link" href="bootstrap-typography.html">تایپوگرافی</a></li>
</ul>
</li>
<li class="menu-header">امکانات دیگر</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="fas fa-th-large"></i> <span>کامپوننت ها</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="components-gallery.html">گالری</a></li>
<li><a class="nav-link" href="components-multiple-upload.html">مولتی آپلود</a></li>
<li><a class="nav-link" href="components-tab.html">تب</a></li>
<li><a class="nav-link" href="components-table.html">جدول</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="far fa-file-alt"></i> <span>فرم ها</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="forms-advanced-form.html">فرم پیشرفته</a></li>
<li><a class="nav-link" href="forms-editor.html">ویرایشگر</a></li>
<li><a class="nav-link" href="forms-validation.html">ولیدیشن</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="fas fa-plug"></i> <span>ماژول ها</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="modules-calendar.html">تقویم</a></li>
<li><a class="nav-link" href="modules-chartjs.html">چارت ها</a></li>
<li><a class="nav-link" href="modules-datatables.html">دیتاتیبل</a></li>
<li><a class="nav-link" href="modules-flag.html">پرچم</a></li>
<li><a class="nav-link" href="modules-font-awesome.html">فونت اوسوم</a></li>
<li><a class="nav-link" href="modules-ion-icons.html">ای او ن ایکون</a></li>
<li><a class="nav-link" href="modules-owl-carousel.html">اول کراسول</a></li>
<li><a class="nav-link" href="modules-sparkline.html">اسپارک لاین</a></li>
<li><a class="nav-link" href="modules-sweet-alert.html">سویت الرت</a></li>
<li><a class="nav-link" href="modules-toastr.html">توستر</a></li>
<li><a class="nav-link" href="modules-vector-map.html">وکتور مپ</a></li>
<li><a class="nav-link" href="modules-weather-icon.html">ایکن اب و هوا</a></li>
</ul>
</li>
<li class="menu-header">صفحات</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="far fa-user"></i> <span>ثبت نام</span></a>
<ul class="dropdown-menu">
<li><a href="auth-forgot-password.html">فراموشی کلمه عبور</a></li>
<li><a href="auth-login.html">لاگین</a></li>
<li><a href="auth-register.html">ثبت نام</a></li>
<li><a href="auth-reset-password.html">بازیابی کلمه عبور</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="fas fa-exclamation"></i> <span>خطاها</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="errors-503.html">503</a></li>
<li><a class="nav-link" href="errors-403.html">403</a></li>
<li><a class="nav-link" href="errors-404.html">404</a></li>
<li><a class="nav-link" href="errors-500.html">500</a></li>
</ul>
</li>
<li><a class="nav-link" href="credits.html"><i class="fas fa-pencil-ruler"></i> <span>سازنده ها</span></a></li>
</ul>
<div class="mt-4 mb-4 p-3 hide-sidebar-mini">
<a href="https://getstisla.com/docs" class="btn btn-primary btn-lg btn-block btn-icon-split">
<i class="fas fa-rocket"></i> مستندات قالب
</a>
</div>
</aside>
</div>
<!-- Main Content -->
<div class="main-content">
<section class="section">
<div class="section-header">
<h1>مولتیپل آپلود</h1>
<div class="section-header-breadcrumb">
<div class="breadcrumb-item active"><a href="#">داشبورد</a></div>
<div class="breadcrumb-item"><a href="#">کامپوننت بوت استرپ</a></div>
<div class="breadcrumb-item">مولتیپل آپلود</div>
</div>
</div>
<div class="section-body text-right">
<h2 class="section-title">مولتیپل آپلود</h2>
<p class="section-lead">مولتیپل آپلود امکان اپلود چندین فایل به صورت یکجا رو به شما میده.</p>
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header">
<h4>آپلود چندفایل به صورت همزمان</h4>
</div>
<div class="card-body">
<form action="#" class="dropzone" id="mydropzone">
<div class="fallback">
<input name="file" type="file" multiple />
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<footer class="main-footer">
<div class="footer-left">
Copyright &copy; 2018 <div class="bullet"></div> Design By <a href="https://nauval.in/">Muhamad Nauval Azhar</a>
</div>
<div class="footer-right">
</div>
</footer>
</div>
</div>
<!-- General JS Scripts -->
<script src="../assets/modules/jquery.min.js"></script>
<script src="../assets/modules/popper.js"></script>
<script src="../assets/modules/tooltip.js"></script>
<script src="../assets/modules/bootstrap/js/bootstrap.min.js"></script>
<script src="../assets/modules/nicescroll/jquery.nicescroll.min.js"></script>
<script src="../assets/modules/moment.min.js"></script>
<script src="../assets/js/stisla.js"></script>
<!-- JS Libraies -->
<script src="../assets/modules/dropzonejs/min/dropzone.min.js"></script>
<!-- Page Specific JS File -->
<script src="../assets/js/page/components-multiple-upload.js"></script>
<!-- Template JS File -->
<script src="../assets/js/scripts.js"></script>
<script src="../assets/js/custom.js"></script>
</body>
</html>

580
dev/rtl/components-tab.html Normal file
View File

@@ -0,0 +1,580 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no" name="viewport">
<title>Bootstrap Components &rsaquo; Tab &mdash; Stisla</title>
<!-- General CSS Files -->
<link rel="stylesheet" href="../assets/modules/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="../assets/modules/fontawesome/css/all.min.css">
<!-- CSS Libraries -->
<!-- Template CSS -->
<link rel="stylesheet" href="../assets/css/style.css">
<link rel="stylesheet" href="../assets/css/components.css">
<link rel="stylesheet" href="../assets/css/rtl.css">
</head>
<body>
<div id="app">
<div class="main-wrapper main-wrapper-1">
<div class="navbar-bg"></div>
<nav class="navbar navbar-expand-lg main-navbar">
<form class="form-inline ml-auto">
<ul class="navbar-nav ml-3">
<li><a href="#" data-toggle="sidebar" class="nav-link nav-link-lg"><i class="fas fa-bars"></i></a></li>
<li><a href="#" data-toggle="search" class="nav-link nav-link-lg d-sm-none"><i class="fas fa-search"></i></a></li>
</ul>
<div class="search-element text-right">
<input class="form-control" type="search" placeholder="جستجو" aria-label="Search" data-width="250">
<button class="btn" type="submit"><i class="fas fa-search"></i></button>
<div class="search-backdrop"></div>
<div class="search-result">
<div class="search-header">
نتیجه جستجو
</div>
<div class="search-item">
<a href="#">چگونه ناسا رو هک کنیم؟</a>
<a href="#" class="search-close"><i class="fas fa-times"></i></a>
</div>
<div class="search-item">
<a href="#">Kodinger.com</a>
<a href="#" class="search-close"><i class="fas fa-times"></i></a>
</div>
<div class="search-item">
<a href="#">پنل مدیریت</a>
<a href="#" class="search-close"><i class="fas fa-times"></i></a>
</div>
<div class="search-header">
نتایج
</div>
<div class="search-item">
<a href="#">
<img class="ml-3 rounded" width="30" src="../assets/img/products/product-3-50.png" alt="product">
آیفون s9 تولید شد
</a>
</div>
<div class="search-item">
<a href="#">
<img class="ml-3 rounded" width="30" src="../assets/img/products/product-2-50.png" alt="product">
چه شادی هایی که زیر پای انسانها سرکوب شدند
</a>
</div>
<div class="search-item">
<a href="#">
<img class="ml-3 rounded" width="30" src="../assets/img/products/product-1-50.png" alt="product">
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ.
</a>
</div>
<div class="search-header">
پروژه ها
</div>
<div class="search-item">
<a href="#">
<div class="search-icon bg-danger text-white ml-3">
<i class="fas fa-code"></i>
</div>
متریال ادمین پنل
</a>
</div>
<div class="search-item">
<a href="#">
<div class="search-icon bg-primary text-white ml-3">
<i class="fas fa-laptop"></i>
</div>
ایجاد صفحه لندینگ
</a>
</div>
</div>
</div>
</form>
<ul class="navbar-nav navbar-right">
<li class="dropdown dropdown-list-toggle"><a href="#" data-toggle="dropdown" class="nav-link nav-link-lg message-toggle beep"><i class="far fa-envelope"></i></a>
<div class="dropdown-menu dropdown-list text-right dropdown-menu-left">
<div class="dropdown-header">پیام ها
<div class="float-left">
<a href="#">علامتگذاری همه بصورت خوانده شده</a>
</div>
</div>
<div class="dropdown-list-content dropdown-list-message">
<a href="#" class="dropdown-item dropdown-item-unread">
<div class="dropdown-item-avatar">
<img alt="image" src="../assets/img/avatar/avatar-1.png" class="rounded-circle">
<div class="is-online"></div>
</div>
<div class="dropdown-item-desc text-right">
<b>مهدی خانزادی</b>
<p>سلام داداچ!</p>
<div class="time">۱۰ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item dropdown-item-unread">
<div class="dropdown-item-avatar">
<img alt="image" src="../assets/img/avatar/avatar-2.png" class="rounded-circle">
</div>
<div class="dropdown-item-desc">
<b>مهیار انصاری</b>
<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ.</p>
<div class="time">۱۲ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item dropdown-item-unread">
<div class="dropdown-item-avatar">
<img alt="image" src="../assets/img/avatar/avatar-3.png" class="rounded-circle">
<div class="is-online"></div>
</div>
<div class="dropdown-item-desc">
<b>آمیتا پاچان</b>
<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ.</p>
<div class="time">۱۲ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-avatar">
<img alt="image" src="../assets/img/avatar/avatar-4.png" class="rounded-circle">
</div>
<div class="dropdown-item-desc">
<b>مهدی خانزادی</b>
<p>سلام سیستم پشتیبانی پاترونیک رو استفاده کنید</p>
<div class="time">۱۶ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-avatar">
<img alt="image" src="../assets/img/avatar/avatar-5.png" class="rounded-circle">
</div>
<div class="dropdown-item-desc">
<b>لورم ایپسوم</b>
<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ.</p>
<div class="time">دیروز</div>
</div>
</a>
</div>
<div class="dropdown-footer text-center">
<a href="#"> دیدن همه پیام ها<i class="fas fa-chevron-left"></i></a>
</div>
</div>
</li>
<li class="dropdown dropdown-list-toggle"><a href="#" data-toggle="dropdown" class="nav-link notification-toggle nav-link-lg beep"><i class="far fa-bell"></i></a>
<div class="dropdown-menu dropdown-list dropdown-menu-left">
<div class="dropdown-header text-right">نوتیفیکیشن ها
<div class="float-left">
<a href="#"> علامتگذاری همه بصورت خوانده شده</a>
</div>
</div>
<div class="dropdown-list-content dropdown-list-icons text-right">
<a href="#" class="dropdown-item dropdown-item-unread">
<div class="dropdown-item-icon bg-primary text-white">
<i class="fas fa-code"></i>
</div>
<div class="dropdown-item-desc">
قالب مدیریتی متریال اپدیت جدید داد!
<div class="time text-primary">۲ دقیقه پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-icon bg-info text-white">
<i class="far fa-user"></i>
</div>
<div class="dropdown-item-desc">
<b>شما</b> و <b>مهیار انصاری</b> هم اکنون همکار هستید.
<div class="time">۱۰ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-icon bg-success text-white">
<i class="fas fa-check"></i>
</div>
<div class="dropdown-item-desc">
<b>مهدی خانزادی</b> اطلاعات مرتبط با <b>قالب</b> را <b>آپلود کرد.</b>
<div class="time">۱۲ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-icon bg-danger text-white">
<i class="fas fa-exclamation-triangle"></i>
</div>
<div class="dropdown-item-desc">
فضای هارد دیسک پر شده است لطفا آن را خالی کنید.
<div class="time">۱۷ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-icon bg-info text-white">
<i class="fas fa-bell"></i>
</div>
<div class="dropdown-item-desc">
به قالب متریال خوش آمدید
<div class="time">دیروز</div>
</div>
</a>
</div>
<div class="dropdown-footer text-center">
<a href="#">
<span>نمایش همه</span>
<i class="fas fa-chevron-left"></i>
</a>
</div>
</div>
</li>
<li class="dropdown"><a href="#" data-toggle="dropdown" class="nav-link dropdown-toggle nav-link-lg nav-link-user">
<img alt="image" src="../assets/img/avatar/avatar-1.png" class="rounded-circle mr-1">
<div class="d-sm-none d-lg-inline-block">سلام مهدی</div></a>
<div class="dropdown-menu dropdown-menu-right text-right">
<div class="dropdown-title text-center">۵ دقیقه پیش لاگین کردین</div>
<a href="features-profile.html" class="dropdown-item has-icon">
<span>پروفایل</span>
<i class="far fa-user"></i>
</a>
<a href="features-activities.html" class="dropdown-item has-icon">
<span>فعالیت ها</span>
<i class="fas fa-bolt"></i>
</a>
<a href="features-settings.html" class="dropdown-item has-icon">
<span>تنظیمات</span>
<i class="fas fa-cog"></i>
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item has-icon text-danger">
<span>خروج</span>
<i class="fas fa-sign-out-alt"></i>
</a>
</div>
</li>
</ul>
</nav>
<div class="main-sidebar sidebar-style-2">
<aside id="sidebar-wrapper">
<div class="sidebar-brand">
<a href="index.html">مدیریت پاترونیک</a>
</div>
<div class="sidebar-brand sidebar-brand-sm">
<a href="index.html">مدیریت فروش</a>
</div>
<ul class="sidebar-menu">
<li class="menu-header">داشبورد</li>
<li class="dropdown active">
<a href="#" class="nav-link has-dropdown"><i class="fas fa-fire"></i><span>داشبورد</span></a>
<ul class="dropdown-menu">
<li class=active><a class="nav-link" href="index-0.html">داشبورد عمومی</a></li>
<li><a class="nav-link" href="index.html">داشبورد فروش محصولات</a></li>
</ul>
</li>
<li class="menu-header">امکانات بیشتر</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown" data-toggle="dropdown"><i class="fas fa-columns"></i> <span>صفحه بندی</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="layout-default.html">حالت پیش فرض</a></li>
<li><a class="nav-link" href="layout-transparent.html">سایدبار بدون رنگ</a></li>
<li><a class="nav-link" href="layout-top-navigation.html">نویگیشن بالا</a></li>
</ul>
</li>
<li><a class="nav-link" href="blank.html"><i class="far fa-square"></i> <span>صفحه خالی</span></a></li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="fas fa-th"></i> <span>بوت استرپ</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="bootstrap-alert.html">آلرت</a></li>
<li><a class="nav-link" href="bootstrap-badge.html">بدج</a></li>
<li><a class="nav-link" href="bootstrap-breadcrumb.html">بردکرامپ</a></li>
<li><a class="nav-link" href="bootstrap-buttons.html">دکمه ها</a></li>
<li><a class="nav-link" href="bootstrap-card.html">کارت</a></li>
<li><a class="nav-link" href="bootstrap-carousel.html">کروسل</a></li>
<li><a class="nav-link" href="bootstrap-collapse.html">کولاپس</a></li>
<li><a class="nav-link" href="bootstrap-dropdown.html">دراپ دون</a></li>
<li><a class="nav-link" href="bootstrap-form.html">فرم</a></li>
<li><a class="nav-link" href="bootstrap-list-group.html">لیست گروه</a></li>
<li><a class="nav-link" href="bootstrap-media-object.html">مدیا ابجکت</a></li>
<li><a class="nav-link" href="bootstrap-modal.html">مودال</a></li>
<li><a class="nav-link" href="bootstrap-nav.html">نویگیشن</a></li>
<li><a class="nav-link" href="bootstrap-navbar.html">نوبار</a></li>
<li><a class="nav-link" href="bootstrap-pagination.html">پجینیشن</a></li>
<li><a class="nav-link" href="bootstrap-popover.html">پاپ اور</a></li>
<li><a class="nav-link" href="bootstrap-progress.html">پراگرس</a></li>
<li><a class="nav-link" href="bootstrap-table.html">جدول</a></li>
<li><a class="nav-link" href="bootstrap-tooltip.html">تولتیپ</a></li>
<li><a class="nav-link" href="bootstrap-typography.html">تایپوگرافی</a></li>
</ul>
</li>
<li class="menu-header">امکانات دیگر</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="fas fa-th-large"></i> <span>کامپوننت ها</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="components-gallery.html">گالری</a></li>
<li><a class="nav-link" href="components-multiple-upload.html">مولتی آپلود</a></li>
<li><a class="nav-link" href="components-tab.html">تب</a></li>
<li><a class="nav-link" href="components-table.html">جدول</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="far fa-file-alt"></i> <span>فرم ها</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="forms-advanced-form.html">فرم پیشرفته</a></li>
<li><a class="nav-link" href="forms-editor.html">ویرایشگر</a></li>
<li><a class="nav-link" href="forms-validation.html">ولیدیشن</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="fas fa-plug"></i> <span>ماژول ها</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="modules-calendar.html">تقویم</a></li>
<li><a class="nav-link" href="modules-chartjs.html">چارت ها</a></li>
<li><a class="nav-link" href="modules-datatables.html">دیتاتیبل</a></li>
<li><a class="nav-link" href="modules-flag.html">پرچم</a></li>
<li><a class="nav-link" href="modules-font-awesome.html">فونت اوسوم</a></li>
<li><a class="nav-link" href="modules-ion-icons.html">ای او ن ایکون</a></li>
<li><a class="nav-link" href="modules-owl-carousel.html">اول کراسول</a></li>
<li><a class="nav-link" href="modules-sparkline.html">اسپارک لاین</a></li>
<li><a class="nav-link" href="modules-sweet-alert.html">سویت الرت</a></li>
<li><a class="nav-link" href="modules-toastr.html">توستر</a></li>
<li><a class="nav-link" href="modules-vector-map.html">وکتور مپ</a></li>
<li><a class="nav-link" href="modules-weather-icon.html">ایکن اب و هوا</a></li>
</ul>
</li>
<li class="menu-header">صفحات</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="far fa-user"></i> <span>ثبت نام</span></a>
<ul class="dropdown-menu">
<li><a href="auth-forgot-password.html">فراموشی کلمه عبور</a></li>
<li><a href="auth-login.html">لاگین</a></li>
<li><a href="auth-register.html">ثبت نام</a></li>
<li><a href="auth-reset-password.html">بازیابی کلمه عبور</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="fas fa-exclamation"></i> <span>خطاها</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="errors-503.html">503</a></li>
<li><a class="nav-link" href="errors-403.html">403</a></li>
<li><a class="nav-link" href="errors-404.html">404</a></li>
<li><a class="nav-link" href="errors-500.html">500</a></li>
</ul>
</li>
<li><a class="nav-link" href="credits.html"><i class="fas fa-pencil-ruler"></i> <span>سازنده ها</span></a></li>
</ul>
<div class="mt-4 mb-4 p-3 hide-sidebar-mini">
<a href="https://getstisla.com/docs" class="btn btn-primary btn-lg btn-block btn-icon-split">
<i class="fas fa-rocket"></i> مستندات قالب
</a>
</div>
</aside>
</div>
<!-- Main Content -->
<div class="main-content">
<section class="section">
<div class="section-header">
<h1>تب</h1>
<div class="section-header-breadcrumb">
<div class="breadcrumb-item active"><a href="#">داشبورد</a></div>
<div class="breadcrumb-item"><a href="#">کامپوننت بوت استرپ</a></div>
<div class="breadcrumb-item">تب</div>
</div>
</div>
<div class="section-body text-right">
<h2 class="section-title">تب</h2>
<p class="section-lead">با استفاده از تب میتوانید بین داده های مختلف جابه جا بشید.</p>
<div class="row">
<div class="col-12 col-sm-6 col-lg-6">
<div class="card">
<div class="card-header">
<h4>تب پیشفرض</h4>
</div>
<div class="card-body">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">خانه</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">پروفایل</a>
</li>
<li class="nav-item">
<a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">تماس با ما</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ
و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ
و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه
مجله در ستون و سطر آنچنان که لازم است و برای شرایط فعلی
تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای.
مجله در ستون و سطر آنچنان که لازم است و برای شرایط فعلی
تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای.
</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ
و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه
مجله در ستون و سطر آنچنان که لازم است و برای شرایط فعلی
تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای.
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ
</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ
تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای.
</div>
</div>
</div>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-6">
<div class="card">
<div class="card-header">
<h4>تب همراه بوردر</h4>
</div>
<div class="card-body">
<ul class="nav nav-tabs" id="myTab2" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="home-tab2" data-toggle="tab" href="#home2" role="tab" aria-controls="home" aria-selected="true">خانه</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab2" data-toggle="tab" href="#profile2" role="tab" aria-controls="profile" aria-selected="false">پروفایل</a>
</li>
<li class="nav-item">
<a class="nav-link" id="contact-tab2" data-toggle="tab" href="#contact2" role="tab" aria-controls="contact" aria-selected="false">تماس با ما</a>
</li>
</ul>
<div class="tab-content tab-bordered" id="myTab3Content">
<div class="tab-pane fade show active" id="home2" role="tabpanel" aria-labelledby="home-tab2">
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ
و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ
و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه
مجله در ستون و سطر آنچنان که لازم است و برای شرایط فعلی
تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای.
مجله در ستون و سطر آنچنان که لازم است و برای شرایط فعلی
تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای.
</div>
<div class="tab-pane fade" id="profile2" role="tabpanel" aria-labelledby="profile-tab2">
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ
و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ
مجله در ستون و سطر آنچنان که لازم است و برای شرایط فعلی
تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای.
</div>
<div class="tab-pane fade" id="contact2" role="tabpanel" aria-labelledby="contact-tab2">
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ
و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12 col-sm-5 col-lg-5">
<div class="card">
<div class="card-header">
<h4>Tab <code>.nav-pills</code></h4>
</div>
<div class="card-body">
<ul class="nav nav-pills" id="myTab3" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="home-tab3" data-toggle="tab" href="#home3" role="tab" aria-controls="home" aria-selected="true">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab3" data-toggle="tab" href="#profile3" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" id="contact-tab3" data-toggle="tab" href="#contact3" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
</li>
</ul>
<div class="tab-content" id="myTabContent2">
<div class="tab-pane fade show active" id="home3" role="tabpanel" aria-labelledby="home-tab3">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur.
</div>
<div class="tab-pane fade" id="profile3" role="tabpanel" aria-labelledby="profile-tab3">
Sed sed metus vel lacus hendrerit tempus. Sed efficitur velit tortor, ac efficitur est lobortis quis. Nullam lacinia metus erat, sed fermentum justo rutrum ultrices. Proin quis iaculis tellus. Etiam ac vehicula eros, pharetra consectetur dui.
</div>
<div class="tab-pane fade" id="contact3" role="tabpanel" aria-labelledby="contact-tab3">
Vestibulum imperdiet odio sed neque ultricies, ut dapibus mi maximus. Proin ligula massa, gravida in lacinia efficitur, hendrerit eget mauris. Pellentesque fermentum, sem interdum molestie finibus, nulla diam varius leo, nec varius lectus elit id dolor.
</div>
</div>
</div>
</div>
</div>
<div class="col-12 col-sm-7 col-lg-7">
<div class="card">
<div class="card-header">
<h4>2 Column</h4>
</div>
<div class="card-body">
<div class="row">
<div class="col-12 col-sm-12 col-md-4">
<ul class="nav nav-pills flex-column" id="myTab4" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="home-tab4" data-toggle="tab" href="#home4" role="tab" aria-controls="home" aria-selected="true">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab4" data-toggle="tab" href="#profile4" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" id="contact-tab4" data-toggle="tab" href="#contact4" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
</li>
</ul>
</div>
<div class="col-12 col-sm-12 col-md-8">
<div class="tab-content no-padding" id="myTab2Content">
<div class="tab-pane fade show active" id="home4" role="tabpanel" aria-labelledby="home-tab4">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="tab-pane fade" id="profile4" role="tabpanel" aria-labelledby="profile-tab4">
Sed sed metus vel lacus hendrerit tempus. Sed efficitur velit tortor, ac efficitur est lobortis quis. Nullam lacinia metus erat, sed fermentum justo rutrum ultrices. Proin quis iaculis tellus. Etiam ac vehicula eros, pharetra consectetur dui. Aliquam convallis neque eget tellus efficitur, eget maximus massa imperdiet. Morbi a mattis velit. Donec hendrerit venenatis justo, eget scelerisque tellus pharetra a.
</div>
<div class="tab-pane fade" id="contact4" role="tabpanel" aria-labelledby="contact-tab4">
Vestibulum imperdiet odio sed neque ultricies, ut dapibus mi maximus. Proin ligula massa, gravida in lacinia efficitur, hendrerit eget mauris. Pellentesque fermentum, sem interdum molestie finibus, nulla diam varius leo, nec varius lectus elit id dolor. Nam malesuada orci non ornare vulputate. Ut ut sollicitudin magna. Vestibulum eget ligula ut ipsum venenatis ultrices. Proin bibendum bibendum augue ut luctus.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<footer class="main-footer">
<div class="footer-left">
Copyright &copy; 2018 <div class="bullet"></div> Design By <a href="https://nauval.in/">Muhamad Nauval Azhar</a>
</div>
<div class="footer-right">
</div>
</footer>
</div>
</div>
<!-- General JS Scripts -->
<script src="../assets/modules/jquery.min.js"></script>
<script src="../assets/modules/popper.js"></script>
<script src="../assets/modules/tooltip.js"></script>
<script src="../assets/modules/bootstrap/js/bootstrap.min.js"></script>
<script src="../assets/modules/nicescroll/jquery.nicescroll.min.js"></script>
<script src="../assets/modules/moment.min.js"></script>
<script src="../assets/js/stisla.js"></script>
<!-- JS Libraies -->
<!-- Page Specific JS File -->
<!-- Template JS File -->
<script src="../assets/js/scripts.js"></script>
<script src="../assets/js/custom.js"></script>
</body>
</html>

View File

@@ -0,0 +1,800 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no" name="viewport">
<title>Bootstrap Components &rsaquo; Components &mdash; Stisla</title>
<!-- General CSS Files -->
<link rel="stylesheet" href="../assets/modules/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="../assets/modules/fontawesome/css/all.min.css">
<!-- CSS Libraries -->
<!-- Template CSS -->
<link rel="stylesheet" href="../assets/css/style.css">
<link rel="stylesheet" href="../assets/css/components.css">
<link rel="stylesheet" href="../assets/css/rtl.css">
</head>
<body>
<div id="app">
<div class="main-wrapper main-wrapper-1">
<div class="navbar-bg"></div>
<nav class="navbar navbar-expand-lg main-navbar">
<form class="form-inline ml-auto">
<ul class="navbar-nav ml-3">
<li><a href="#" data-toggle="sidebar" class="nav-link nav-link-lg"><i class="fas fa-bars"></i></a></li>
<li><a href="#" data-toggle="search" class="nav-link nav-link-lg d-sm-none"><i class="fas fa-search"></i></a></li>
</ul>
<div class="search-element text-right">
<input class="form-control" type="search" placeholder="جستجو" aria-label="Search" data-width="250">
<button class="btn" type="submit"><i class="fas fa-search"></i></button>
<div class="search-backdrop"></div>
<div class="search-result">
<div class="search-header">
نتیجه جستجو
</div>
<div class="search-item">
<a href="#">چگونه ناسا رو هک کنیم؟</a>
<a href="#" class="search-close"><i class="fas fa-times"></i></a>
</div>
<div class="search-item">
<a href="#">Kodinger.com</a>
<a href="#" class="search-close"><i class="fas fa-times"></i></a>
</div>
<div class="search-item">
<a href="#">پنل مدیریت</a>
<a href="#" class="search-close"><i class="fas fa-times"></i></a>
</div>
<div class="search-header">
نتایج
</div>
<div class="search-item">
<a href="#">
<img class="ml-3 rounded" width="30" src="../assets/img/products/product-3-50.png" alt="product">
آیفون s9 تولید شد
</a>
</div>
<div class="search-item">
<a href="#">
<img class="ml-3 rounded" width="30" src="../assets/img/products/product-2-50.png" alt="product">
چه شادی هایی که زیر پای انسانها سرکوب شدند
</a>
</div>
<div class="search-item">
<a href="#">
<img class="ml-3 rounded" width="30" src="../assets/img/products/product-1-50.png" alt="product">
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ.
</a>
</div>
<div class="search-header">
پروژه ها
</div>
<div class="search-item">
<a href="#">
<div class="search-icon bg-danger text-white ml-3">
<i class="fas fa-code"></i>
</div>
متریال ادمین پنل
</a>
</div>
<div class="search-item">
<a href="#">
<div class="search-icon bg-primary text-white ml-3">
<i class="fas fa-laptop"></i>
</div>
ایجاد صفحه لندینگ
</a>
</div>
</div>
</div>
</form>
<ul class="navbar-nav navbar-right">
<li class="dropdown dropdown-list-toggle"><a href="#" data-toggle="dropdown" class="nav-link nav-link-lg message-toggle beep"><i class="far fa-envelope"></i></a>
<div class="dropdown-menu dropdown-list text-right dropdown-menu-left">
<div class="dropdown-header">پیام ها
<div class="float-left">
<a href="#">علامتگذاری همه بصورت خوانده شده</a>
</div>
</div>
<div class="dropdown-list-content dropdown-list-message">
<a href="#" class="dropdown-item dropdown-item-unread">
<div class="dropdown-item-avatar">
<img alt="image" src="../assets/img/avatar/avatar-1.png" class="rounded-circle">
<div class="is-online"></div>
</div>
<div class="dropdown-item-desc text-right">
<b>مهدی خانزادی</b>
<p>سلام داداچ!</p>
<div class="time">۱۰ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item dropdown-item-unread">
<div class="dropdown-item-avatar">
<img alt="image" src="../assets/img/avatar/avatar-2.png" class="rounded-circle">
</div>
<div class="dropdown-item-desc">
<b>مهیار انصاری</b>
<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ.</p>
<div class="time">۱۲ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item dropdown-item-unread">
<div class="dropdown-item-avatar">
<img alt="image" src="../assets/img/avatar/avatar-3.png" class="rounded-circle">
<div class="is-online"></div>
</div>
<div class="dropdown-item-desc">
<b>آمیتا پاچان</b>
<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ.</p>
<div class="time">۱۲ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-avatar">
<img alt="image" src="../assets/img/avatar/avatar-4.png" class="rounded-circle">
</div>
<div class="dropdown-item-desc">
<b>مهدی خانزادی</b>
<p>سلام سیستم پشتیبانی پاترونیک رو استفاده کنید</p>
<div class="time">۱۶ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-avatar">
<img alt="image" src="../assets/img/avatar/avatar-5.png" class="rounded-circle">
</div>
<div class="dropdown-item-desc">
<b>لورم ایپسوم</b>
<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ.</p>
<div class="time">دیروز</div>
</div>
</a>
</div>
<div class="dropdown-footer text-center">
<a href="#"> دیدن همه پیام ها<i class="fas fa-chevron-left"></i></a>
</div>
</div>
</li>
<li class="dropdown dropdown-list-toggle"><a href="#" data-toggle="dropdown" class="nav-link notification-toggle nav-link-lg beep"><i class="far fa-bell"></i></a>
<div class="dropdown-menu dropdown-list dropdown-menu-left">
<div class="dropdown-header text-right">نوتیفیکیشن ها
<div class="float-left">
<a href="#"> علامتگذاری همه بصورت خوانده شده</a>
</div>
</div>
<div class="dropdown-list-content dropdown-list-icons text-right">
<a href="#" class="dropdown-item dropdown-item-unread">
<div class="dropdown-item-icon bg-primary text-white">
<i class="fas fa-code"></i>
</div>
<div class="dropdown-item-desc">
قالب مدیریتی متریال اپدیت جدید داد!
<div class="time text-primary">۲ دقیقه پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-icon bg-info text-white">
<i class="far fa-user"></i>
</div>
<div class="dropdown-item-desc">
<b>شما</b> و <b>مهیار انصاری</b> هم اکنون همکار هستید.
<div class="time">۱۰ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-icon bg-success text-white">
<i class="fas fa-check"></i>
</div>
<div class="dropdown-item-desc">
<b>مهدی خانزادی</b> اطلاعات مرتبط با <b>قالب</b> را <b>آپلود کرد.</b>
<div class="time">۱۲ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-icon bg-danger text-white">
<i class="fas fa-exclamation-triangle"></i>
</div>
<div class="dropdown-item-desc">
فضای هارد دیسک پر شده است لطفا آن را خالی کنید.
<div class="time">۱۷ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-icon bg-info text-white">
<i class="fas fa-bell"></i>
</div>
<div class="dropdown-item-desc">
به قالب متریال خوش آمدید
<div class="time">دیروز</div>
</div>
</a>
</div>
<div class="dropdown-footer text-center">
<a href="#">
<span>نمایش همه</span>
<i class="fas fa-chevron-left"></i>
</a>
</div>
</div>
</li>
<li class="dropdown"><a href="#" data-toggle="dropdown" class="nav-link dropdown-toggle nav-link-lg nav-link-user">
<img alt="image" src="../assets/img/avatar/avatar-1.png" class="rounded-circle mr-1">
<div class="d-sm-none d-lg-inline-block">سلام مهدی</div></a>
<div class="dropdown-menu dropdown-menu-right text-right">
<div class="dropdown-title text-center">۵ دقیقه پیش لاگین کردین</div>
<a href="features-profile.html" class="dropdown-item has-icon">
<span>پروفایل</span>
<i class="far fa-user"></i>
</a>
<a href="features-activities.html" class="dropdown-item has-icon">
<span>فعالیت ها</span>
<i class="fas fa-bolt"></i>
</a>
<a href="features-settings.html" class="dropdown-item has-icon">
<span>تنظیمات</span>
<i class="fas fa-cog"></i>
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item has-icon text-danger">
<span>خروج</span>
<i class="fas fa-sign-out-alt"></i>
</a>
</div>
</li>
</ul>
</nav>
<div class="main-sidebar sidebar-style-2">
<aside id="sidebar-wrapper">
<div class="sidebar-brand">
<a href="index.html">مدیریت پاترونیک</a>
</div>
<div class="sidebar-brand sidebar-brand-sm">
<a href="index.html">مدیریت فروش</a>
</div>
<ul class="sidebar-menu">
<li class="menu-header">داشبورد</li>
<li class="dropdown active">
<a href="#" class="nav-link has-dropdown"><i class="fas fa-fire"></i><span>داشبورد</span></a>
<ul class="dropdown-menu">
<li class=active><a class="nav-link" href="index-0.html">داشبورد عمومی</a></li>
<li><a class="nav-link" href="index.html">داشبورد فروش محصولات</a></li>
</ul>
</li>
<li class="menu-header">امکانات بیشتر</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown" data-toggle="dropdown"><i class="fas fa-columns"></i> <span>صفحه بندی</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="layout-default.html">حالت پیش فرض</a></li>
<li><a class="nav-link" href="layout-transparent.html">سایدبار بدون رنگ</a></li>
<li><a class="nav-link" href="layout-top-navigation.html">نویگیشن بالا</a></li>
</ul>
</li>
<li><a class="nav-link" href="blank.html"><i class="far fa-square"></i> <span>صفحه خالی</span></a></li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="fas fa-th"></i> <span>بوت استرپ</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="bootstrap-alert.html">آلرت</a></li>
<li><a class="nav-link" href="bootstrap-badge.html">بدج</a></li>
<li><a class="nav-link" href="bootstrap-breadcrumb.html">بردکرامپ</a></li>
<li><a class="nav-link" href="bootstrap-buttons.html">دکمه ها</a></li>
<li><a class="nav-link" href="bootstrap-card.html">کارت</a></li>
<li><a class="nav-link" href="bootstrap-carousel.html">کروسل</a></li>
<li><a class="nav-link" href="bootstrap-collapse.html">کولاپس</a></li>
<li><a class="nav-link" href="bootstrap-dropdown.html">دراپ دون</a></li>
<li><a class="nav-link" href="bootstrap-form.html">فرم</a></li>
<li><a class="nav-link" href="bootstrap-list-group.html">لیست گروه</a></li>
<li><a class="nav-link" href="bootstrap-media-object.html">مدیا ابجکت</a></li>
<li><a class="nav-link" href="bootstrap-modal.html">مودال</a></li>
<li><a class="nav-link" href="bootstrap-nav.html">نویگیشن</a></li>
<li><a class="nav-link" href="bootstrap-navbar.html">نوبار</a></li>
<li><a class="nav-link" href="bootstrap-pagination.html">پجینیشن</a></li>
<li><a class="nav-link" href="bootstrap-popover.html">پاپ اور</a></li>
<li><a class="nav-link" href="bootstrap-progress.html">پراگرس</a></li>
<li><a class="nav-link" href="bootstrap-table.html">جدول</a></li>
<li><a class="nav-link" href="bootstrap-tooltip.html">تولتیپ</a></li>
<li><a class="nav-link" href="bootstrap-typography.html">تایپوگرافی</a></li>
</ul>
</li>
<li class="menu-header">امکانات دیگر</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="fas fa-th-large"></i> <span>کامپوننت ها</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="components-gallery.html">گالری</a></li>
<li><a class="nav-link" href="components-multiple-upload.html">مولتی آپلود</a></li>
<li><a class="nav-link" href="components-tab.html">تب</a></li>
<li><a class="nav-link" href="components-table.html">جدول</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="far fa-file-alt"></i> <span>فرم ها</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="forms-advanced-form.html">فرم پیشرفته</a></li>
<li><a class="nav-link" href="forms-editor.html">ویرایشگر</a></li>
<li><a class="nav-link" href="forms-validation.html">ولیدیشن</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="fas fa-plug"></i> <span>ماژول ها</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="modules-calendar.html">تقویم</a></li>
<li><a class="nav-link" href="modules-chartjs.html">چارت ها</a></li>
<li><a class="nav-link" href="modules-datatables.html">دیتاتیبل</a></li>
<li><a class="nav-link" href="modules-flag.html">پرچم</a></li>
<li><a class="nav-link" href="modules-font-awesome.html">فونت اوسوم</a></li>
<li><a class="nav-link" href="modules-ion-icons.html">ای او ن ایکون</a></li>
<li><a class="nav-link" href="modules-owl-carousel.html">اول کراسول</a></li>
<li><a class="nav-link" href="modules-sparkline.html">اسپارک لاین</a></li>
<li><a class="nav-link" href="modules-sweet-alert.html">سویت الرت</a></li>
<li><a class="nav-link" href="modules-toastr.html">توستر</a></li>
<li><a class="nav-link" href="modules-vector-map.html">وکتور مپ</a></li>
<li><a class="nav-link" href="modules-weather-icon.html">ایکن اب و هوا</a></li>
</ul>
</li>
<li class="menu-header">صفحات</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="far fa-user"></i> <span>ثبت نام</span></a>
<ul class="dropdown-menu">
<li><a href="auth-forgot-password.html">فراموشی کلمه عبور</a></li>
<li><a href="auth-login.html">لاگین</a></li>
<li><a href="auth-register.html">ثبت نام</a></li>
<li><a href="auth-reset-password.html">بازیابی کلمه عبور</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="fas fa-exclamation"></i> <span>خطاها</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="errors-503.html">503</a></li>
<li><a class="nav-link" href="errors-403.html">403</a></li>
<li><a class="nav-link" href="errors-404.html">404</a></li>
<li><a class="nav-link" href="errors-500.html">500</a></li>
</ul>
</li>
<li><a class="nav-link" href="credits.html"><i class="fas fa-pencil-ruler"></i> <span>سازنده ها</span></a></li>
</ul>
<div class="mt-4 mb-4 p-3 hide-sidebar-mini">
<a href="https://getstisla.com/docs" class="btn btn-primary btn-lg btn-block btn-icon-split">
<i class="fas fa-rocket"></i> مستندات قالب
</a>
</div>
</aside>
</div>
<!-- Main Content -->
<div class="main-content">
<section class="section">
<div class="section-header">
<h1>جدول</h1>
<div class="section-header-breadcrumb">
<div class="breadcrumb-item active"><a href="#">داشبورد</a></div>
<div class="breadcrumb-item"><a href="#">کامپوننت بوت استرپ</a></div>
<div class="breadcrumb-item">جدول</div>
</div>
</div>
<div class="section-body text-right">
<h2 class="section-title">جدول</h2>
<p class="section-lead">جدول برای نمایش داده های مختلف میتونه سودمند باشه.</p>
<div class="row">
<div class="col-12 col-md-6 col-lg-6">
<div class="card">
<div class="card-header">
<h4>Simple Table</h4>
</div>
<div class="card-body">
<div class="table-responsive">
<table class="table table-bordered table-md">
<tr>
<th>#</th>
<th>Name</th>
<th>Created At</th>
<th>Status</th>
<th>Action</th>
</tr>
<tr>
<td>1</td>
<td>Irwansyah Saputra</td>
<td>2017-01-09</td>
<td><div class="badge badge-success">Active</div></td>
<td><a href="#" class="btn btn-secondary">Detail</a></td>
</tr>
<tr>
<td>2</td>
<td>Hasan Basri</td>
<td>2017-01-09</td>
<td><div class="badge badge-success">Active</div></td>
<td><a href="#" class="btn btn-secondary">Detail</a></td>
</tr>
<tr>
<td>3</td>
<td>Mahyar Ansary</td>
<td>2017-01-11</td>
<td><div class="badge badge-danger">Not Active</div></td>
<td><a href="#" class="btn btn-secondary">Detail</a></td>
</tr>
<tr>
<td>4</td>
<td>Rizal Fakhri</td>
<td>2017-01-11</td>
<td><div class="badge badge-success">Active</div></td>
<td><a href="#" class="btn btn-secondary">Detail</a></td>
</tr>
</table>
</div>
</div>
<div class="card-footer text-right">
<nav class="d-inline-block">
<ul class="pagination mb-0">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1"><i class="fas fa-chevron-left"></i></a>
</li>
<li class="page-item active"><a class="page-link" href="#">1 <span class="sr-only">(current)</span></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="#"><i class="fas fa-chevron-right"></i></a>
</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-6">
<div class="card">
<div class="card-header">
<h4>Full Width</h4>
</div>
<div class="card-body p-0">
<div class="table-responsive">
<table class="table table-striped table-md">
<tr>
<th>#</th>
<th>Name</th>
<th>Created At</th>
<th>Status</th>
<th>Action</th>
</tr>
<tr>
<td>1</td>
<td>Irwansyah Saputra</td>
<td>2017-01-09</td>
<td><div class="badge badge-success">Active</div></td>
<td><a href="#" class="btn btn-secondary">Detail</a></td>
</tr>
<tr>
<td>2</td>
<td>Hasan Basri</td>
<td>2017-01-09</td>
<td><div class="badge badge-success">Active</div></td>
<td><a href="#" class="btn btn-secondary">Detail</a></td>
</tr>
<tr>
<td>3</td>
<td>Mahyar Ansary</td>
<td>2017-01-11</td>
<td><div class="badge badge-danger">Not Active</div></td>
<td><a href="#" class="btn btn-secondary">Detail</a></td>
</tr>
<tr>
<td>4</td>
<td>Rizal Fakhri</td>
<td>2017-01-11</td>
<td><div class="badge badge-success">Active</div></td>
<td><a href="#" class="btn btn-secondary">Detail</a></td>
</tr>
<tr>
<td>5</td>
<td>Isnap Kiswandi</td>
<td>2017-01-17</td>
<td><div class="badge badge-success">Active</div></td>
<td><a href="#" class="btn btn-secondary">Detail</a></td>
</tr>
</table>
</div>
</div>
<div class="card-footer text-right">
<nav class="d-inline-block">
<ul class="pagination mb-0">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1"><i class="fas fa-chevron-left"></i></a>
</li>
<li class="page-item active"><a class="page-link" href="#">1 <span class="sr-only">(current)</span></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="#"><i class="fas fa-chevron-right"></i></a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header">
<h4>Advanced Table</h4>
<div class="card-header-form">
<form>
<div class="input-group">
<input type="text" class="form-control" placeholder="Search">
<div class="input-group-btn">
<button class="btn btn-primary"><i class="fas fa-search"></i></button>
</div>
</div>
</form>
</div>
</div>
<div class="card-body p-0">
<div class="table-responsive">
<table class="table table-striped">
<tr>
<th>
<div class="custom-checkbox custom-control">
<input type="checkbox" data-checkboxes="mygroup" data-checkbox-role="dad" class="custom-control-input" id="checkbox-all">
<label for="checkbox-all" class="custom-control-label">&nbsp;</label>
</div>
</th>
<th>Task Name</th>
<th>Progress</th>
<th>Members</th>
<th>Due Date</th>
<th>Status</th>
<th>Action</th>
</tr>
<tr>
<td class="p-0 text-center">
<div class="custom-checkbox custom-control">
<input type="checkbox" data-checkboxes="mygroup" class="custom-control-input" id="checkbox-1">
<label for="checkbox-1" class="custom-control-label">&nbsp;</label>
</div>
</td>
<td>Create a mobile app</td>
<td class="align-middle">
<div class="progress" data-height="4" data-toggle="tooltip" title="100%">
<div class="progress-bar bg-success" data-width="100"></div>
</div>
</td>
<td>
<img alt="image" src="../assets/img/avatar/avatar-5.png" class="rounded-circle" width="35" data-toggle="tooltip" title="Wildan Ahdian">
</td>
<td>2018-01-20</td>
<td><div class="badge badge-success">Completed</div></td>
<td><a href="#" class="btn btn-secondary">Detail</a></td>
</tr>
<tr>
<td class="p-0 text-center">
<div class="custom-checkbox custom-control">
<input type="checkbox" data-checkboxes="mygroup" class="custom-control-input" id="checkbox-2">
<label for="checkbox-2" class="custom-control-label">&nbsp;</label>
</div>
</td>
<td>Redesign homepage</td>
<td class="align-middle">
<div class="progress" data-height="4" data-toggle="tooltip" title="0%">
<div class="progress-bar" data-width="0"></div>
</div>
</td>
<td>
<img alt="image" src="../assets/img/avatar/avatar-1.png" class="rounded-circle" width="35" data-toggle="tooltip" title="Nur Alpiana">
<img alt="image" src="../assets/img/avatar/avatar-3.png" class="rounded-circle" width="35" data-toggle="tooltip" title="Hariono Yusup">
<img alt="image" src="../assets/img/avatar/avatar-4.png" class="rounded-circle" width="35" data-toggle="tooltip" title="Bagus Dwi Cahya">
</td>
<td>2018-04-10</td>
<td><div class="badge badge-info">Todo</div></td>
<td><a href="#" class="btn btn-secondary">Detail</a></td>
</tr>
<tr>
<td class="p-0 text-center">
<div class="custom-checkbox custom-control">
<input type="checkbox" data-checkboxes="mygroup" class="custom-control-input" id="checkbox-3">
<label for="checkbox-3" class="custom-control-label">&nbsp;</label>
</div>
</td>
<td>Backup database</td>
<td class="align-middle">
<div class="progress" data-height="4" data-toggle="tooltip" title="70%">
<div class="progress-bar bg-warning" data-width="70"></div>
</div>
</td>
<td>
<img alt="image" src="../assets/img/avatar/avatar-1.png" class="rounded-circle" width="35" data-toggle="tooltip" title="Rizal Fakhri">
<img alt="image" src="../assets/img/avatar/avatar-2.png" class="rounded-circle" width="35" data-toggle="tooltip" title="Hasan Basri">
</td>
<td>2018-01-29</td>
<td><div class="badge badge-warning">In Progress</div></td>
<td><a href="#" class="btn btn-secondary">Detail</a></td>
</tr>
<tr>
<td class="p-0 text-center">
<div class="custom-checkbox custom-control">
<input type="checkbox" data-checkboxes="mygroup" class="custom-control-input" id="checkbox-4">
<label for="checkbox-4" class="custom-control-label">&nbsp;</label>
</div>
</td>
<td>Input data</td>
<td class="align-middle">
<div class="progress" data-height="4" data-toggle="tooltip" title="100%">
<div class="progress-bar bg-success" data-width="100"></div>
</div>
</td>
<td>
<img alt="image" src="../assets/img/avatar/avatar-2.png" class="rounded-circle" width="35" data-toggle="tooltip" title="Rizal Fakhri">
<img alt="image" src="../assets/img/avatar/avatar-5.png" class="rounded-circle" width="35" data-toggle="tooltip" title="Isnap Kiswandi">
<img alt="image" src="../assets/img/avatar/avatar-4.png" class="rounded-circle" width="35" data-toggle="tooltip" title="Yudi Nawawi">
<img alt="image" src="../assets/img/avatar/avatar-1.png" class="rounded-circle" width="35" data-toggle="tooltip" title="Khaerul Anwar">
</td>
<td>2018-01-16</td>
<td><div class="badge badge-success">Completed</div></td>
<td><a href="#" class="btn btn-secondary">Detail</a></td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header">
<h4>Sortable Table</h4>
<div class="card-header-action">
<form>
<div class="input-group">
<input type="text" class="form-control" placeholder="Search">
<div class="input-group-btn">
<button class="btn btn-primary"><i class="fas fa-search"></i></button>
</div>
</div>
</form>
</div>
</div>
<div class="card-body p-0">
<div class="table-responsive">
<table class="table table-striped" id="sortable-table">
<thead>
<tr>
<th class="text-center">
<i class="fas fa-th"></i>
</th>
<th>Task Name</th>
<th>Progress</th>
<th>Members</th>
<th>Due Date</th>
<th>Status</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="sort-handler">
<i class="fas fa-th"></i>
</div>
</td>
<td>Create a mobile app</td>
<td class="align-middle">
<div class="progress" data-height="4" data-toggle="tooltip" title="100%">
<div class="progress-bar bg-success" data-width="100"></div>
</div>
</td>
<td>
<img alt="image" src="../assets/img/avatar/avatar-5.png" class="rounded-circle" width="35" data-toggle="tooltip" title="Wildan Ahdian">
</td>
<td>2018-01-20</td>
<td><div class="badge badge-success">Completed</div></td>
<td><a href="#" class="btn btn-secondary">Detail</a></td>
</tr>
<tr>
<td>
<div class="sort-handler">
<i class="fas fa-th"></i>
</div>
</td>
<td>Redesign homepage</td>
<td class="align-middle">
<div class="progress" data-height="4" data-toggle="tooltip" title="0%">
<div class="progress-bar" data-width="0"></div>
</div>
</td>
<td>
<img alt="image" src="../assets/img/avatar/avatar-1.png" class="rounded-circle" width="35" data-toggle="tooltip" title="Nur Alpiana">
<img alt="image" src="../assets/img/avatar/avatar-3.png" class="rounded-circle" width="35" data-toggle="tooltip" title="Hariono Yusup">
<img alt="image" src="../assets/img/avatar/avatar-4.png" class="rounded-circle" width="35" data-toggle="tooltip" title="Bagus Dwi Cahya">
</td>
<td>2018-04-10</td>
<td><div class="badge badge-info">Todo</div></td>
<td><a href="#" class="btn btn-secondary">Detail</a></td>
</tr>
<tr>
<td>
<div class="sort-handler">
<i class="fas fa-th"></i>
</div>
</td>
<td>Backup database</td>
<td class="align-middle">
<div class="progress" data-height="4" data-toggle="tooltip" title="70%">
<div class="progress-bar bg-warning" data-width="70"></div>
</div>
</td>
<td>
<img alt="image" src="../assets/img/avatar/avatar-1.png" class="rounded-circle" width="35" data-toggle="tooltip" title="Rizal Fakhri">
<img alt="image" src="../assets/img/avatar/avatar-2.png" class="rounded-circle" width="35" data-toggle="tooltip" title="Hasan Basri">
</td>
<td>2018-01-29</td>
<td><div class="badge badge-warning">In Progress</div></td>
<td><a href="#" class="btn btn-secondary">Detail</a></td>
</tr>
<tr>
<td>
<div class="sort-handler">
<i class="fas fa-th"></i>
</div>
</td>
<td>Input data</td>
<td class="align-middle">
<div class="progress" data-height="4" data-toggle="tooltip" title="100%">
<div class="progress-bar bg-success" data-width="100"></div>
</div>
</td>
<td>
<img alt="image" src="../assets/img/avatar/avatar-2.png" class="rounded-circle" width="35" data-toggle="tooltip" title="Rizal Fakhri">
<img alt="image" src="../assets/img/avatar/avatar-5.png" class="rounded-circle" width="35" data-toggle="tooltip" title="Isnap Kiswandi">
<img alt="image" src="../assets/img/avatar/avatar-4.png" class="rounded-circle" width="35" data-toggle="tooltip" title="Yudi Nawawi">
<img alt="image" src="../assets/img/avatar/avatar-1.png" class="rounded-circle" width="35" data-toggle="tooltip" title="Khaerul Anwar">
</td>
<td>2018-01-16</td>
<td><div class="badge badge-success">Completed</div></td>
<td><a href="#" class="btn btn-secondary">Detail</a></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<footer class="main-footer">
<div class="footer-left">
Copyright &copy; 2018 <div class="bullet"></div> Design By <a href="https://nauval.in/">Muhamad Nauval Azhar</a>
</div>
<div class="footer-right">
</div>
</footer>
</div>
</div>
<!-- General JS Scripts -->
<script src="../assets/modules/jquery.min.js"></script>
<script src="../assets/modules/popper.js"></script>
<script src="../assets/modules/tooltip.js"></script>
<script src="../assets/modules/bootstrap/js/bootstrap.min.js"></script>
<script src="../assets/modules/nicescroll/jquery.nicescroll.min.js"></script>
<script src="../assets/modules/moment.min.js"></script>
<script src="../assets/js/stisla.js"></script>
<!-- JS Libraies -->
<script src="../assets/modules/jquery-ui/jquery-ui.min.js"></script>
<!-- Page Specific JS File -->
<script src="../assets/js/page/components-table.js"></script>
<!-- Template JS File -->
<script src="../assets/js/scripts.js"></script>
<script src="../assets/js/custom.js"></script>
</body>
</html>

986
dev/rtl/index-0.html Normal file
View File

@@ -0,0 +1,986 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no" name="viewport">
<title>General Dashboard &mdash; Stisla</title>
<!-- General CSS Files -->
<link rel="stylesheet" href="../assets/modules/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="../assets/modules/fontawesome/css/all.min.css">
<!-- CSS Libraries -->
<link rel="stylesheet" href="../assets/modules/jqvmap/dist/jqvmap.min.css">
<link rel="stylesheet" href="../assets/modules/weather-icon/css/weather-icons.min.css">
<link rel="stylesheet" href="../assets/modules/weather-icon/css/weather-icons-wind.min.css">
<link rel="stylesheet" href="../assets/modules/summernote/summernote-bs4.css">
<!-- Template CSS -->
<link rel="stylesheet" href="../assets/css/style.css">
<link rel="stylesheet" href="../assets/css/components.css">
<link rel="stylesheet" href="../assets/css/rtl.css">
<link rel="stylesheet" href="../assets/css/rtl.css">
</head>
<body>
<div id="app">
<div class="main-wrapper main-wrapper-1">
<div class="navbar-bg"></div>
<nav class="navbar navbar-expand-lg main-navbar">
<form class="form-inline ml-auto">
<ul class="navbar-nav ml-3">
<li><a href="#" data-toggle="sidebar" class="nav-link nav-link-lg"><i class="fas fa-bars"></i></a></li>
<li><a href="#" data-toggle="search" class="nav-link nav-link-lg d-sm-none"><i class="fas fa-search"></i></a></li>
</ul>
<div class="search-element text-right">
<input class="form-control" type="search" placeholder="جستجو" aria-label="Search" data-width="250">
<button class="btn" type="submit"><i class="fas fa-search"></i></button>
<div class="search-backdrop"></div>
<div class="search-result">
<div class="search-header">
نتیجه جستجو
</div>
<div class="search-item">
<a href="#">چگونه ناسا رو هک کنیم؟</a>
<a href="#" class="search-close"><i class="fas fa-times"></i></a>
</div>
<div class="search-item">
<a href="#">Kodinger.com</a>
<a href="#" class="search-close"><i class="fas fa-times"></i></a>
</div>
<div class="search-item">
<a href="#">پنل مدیریت</a>
<a href="#" class="search-close"><i class="fas fa-times"></i></a>
</div>
<div class="search-header">
نتایج
</div>
<div class="search-item">
<a href="#">
<img class="ml-3 rounded" width="30" src="../assets/img/products/product-3-50.png" alt="product">
آیفون s9 تولید شد
</a>
</div>
<div class="search-item">
<a href="#">
<img class="ml-3 rounded" width="30" src="../assets/img/products/product-2-50.png" alt="product">
چه شادی هایی که زیر پای انسانها سرکوب شدند
</a>
</div>
<div class="search-item">
<a href="#">
<img class="ml-3 rounded" width="30" src="../assets/img/products/product-1-50.png" alt="product">
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ.
</a>
</div>
<div class="search-header">
پروژه ها
</div>
<div class="search-item">
<a href="#">
<div class="search-icon bg-danger text-white ml-3">
<i class="fas fa-code"></i>
</div>
متریال ادمین پنل
</a>
</div>
<div class="search-item">
<a href="#">
<div class="search-icon bg-primary text-white ml-3">
<i class="fas fa-laptop"></i>
</div>
ایجاد صفحه لندینگ
</a>
</div>
</div>
</div>
</form>
<ul class="navbar-nav navbar-right">
<li class="dropdown dropdown-list-toggle"><a href="#" data-toggle="dropdown" class="nav-link nav-link-lg message-toggle beep"><i class="far fa-envelope"></i></a>
<div class="dropdown-menu dropdown-list text-right dropdown-menu-left">
<div class="dropdown-header">پیام ها
<div class="float-left">
<a href="#">علامتگذاری همه بصورت خوانده شده</a>
</div>
</div>
<div class="dropdown-list-content dropdown-list-message">
<a href="#" class="dropdown-item dropdown-item-unread">
<div class="dropdown-item-avatar">
<img alt="image" src="../assets/img/avatar/avatar-1.png" class="rounded-circle">
<div class="is-online"></div>
</div>
<div class="dropdown-item-desc text-right">
<b>مهدی خانزادی</b>
<p>سلام داداچ!</p>
<div class="time">۱۰ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item dropdown-item-unread">
<div class="dropdown-item-avatar">
<img alt="image" src="../assets/img/avatar/avatar-2.png" class="rounded-circle">
</div>
<div class="dropdown-item-desc">
<b>مهیار انصاری</b>
<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ.</p>
<div class="time">۱۲ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item dropdown-item-unread">
<div class="dropdown-item-avatar">
<img alt="image" src="../assets/img/avatar/avatar-3.png" class="rounded-circle">
<div class="is-online"></div>
</div>
<div class="dropdown-item-desc">
<b>آمیتا پاچان</b>
<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ.</p>
<div class="time">۱۲ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-avatar">
<img alt="image" src="../assets/img/avatar/avatar-4.png" class="rounded-circle">
</div>
<div class="dropdown-item-desc">
<b>مهدی خانزادی</b>
<p>سلام سیستم پشتیبانی پاترونیک رو استفاده کنید</p>
<div class="time">۱۶ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-avatar">
<img alt="image" src="../assets/img/avatar/avatar-5.png" class="rounded-circle">
</div>
<div class="dropdown-item-desc">
<b>لورم ایپسوم</b>
<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ.</p>
<div class="time">دیروز</div>
</div>
</a>
</div>
<div class="dropdown-footer text-center">
<a href="#"> دیدن همه پیام ها<i class="fas fa-chevron-left"></i></a>
</div>
</div>
</li>
<li class="dropdown dropdown-list-toggle"><a href="#" data-toggle="dropdown" class="nav-link notification-toggle nav-link-lg beep"><i class="far fa-bell"></i></a>
<div class="dropdown-menu dropdown-list dropdown-menu-left">
<div class="dropdown-header text-right">نوتیفیکیشن ها
<div class="float-left">
<a href="#"> علامتگذاری همه بصورت خوانده شده</a>
</div>
</div>
<div class="dropdown-list-content dropdown-list-icons text-right">
<a href="#" class="dropdown-item dropdown-item-unread">
<div class="dropdown-item-icon bg-primary text-white">
<i class="fas fa-code"></i>
</div>
<div class="dropdown-item-desc">
قالب مدیریتی متریال اپدیت جدید داد!
<div class="time text-primary">۲ دقیقه پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-icon bg-info text-white">
<i class="far fa-user"></i>
</div>
<div class="dropdown-item-desc">
<b>شما</b> و <b>مهیار انصاری</b> هم اکنون همکار هستید.
<div class="time">۱۰ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-icon bg-success text-white">
<i class="fas fa-check"></i>
</div>
<div class="dropdown-item-desc">
<b>مهدی خانزادی</b> اطلاعات مرتبط با <b>قالب</b> را <b>آپلود کرد.</b>
<div class="time">۱۲ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-icon bg-danger text-white">
<i class="fas fa-exclamation-triangle"></i>
</div>
<div class="dropdown-item-desc">
فضای هارد دیسک پر شده است لطفا آن را خالی کنید.
<div class="time">۱۷ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-icon bg-info text-white">
<i class="fas fa-bell"></i>
</div>
<div class="dropdown-item-desc">
به قالب متریال خوش آمدید
<div class="time">دیروز</div>
</div>
</a>
</div>
<div class="dropdown-footer text-center">
<a href="#">
<span>نمایش همه</span>
<i class="fas fa-chevron-left"></i>
</a>
</div>
</div>
</li>
<li class="dropdown"><a href="#" data-toggle="dropdown" class="nav-link dropdown-toggle nav-link-lg nav-link-user">
<img alt="image" src="../assets/img/avatar/avatar-1.png" class="rounded-circle mr-1">
<div class="d-sm-none d-lg-inline-block">سلام مهدی</div></a>
<div class="dropdown-menu dropdown-menu-right text-right">
<div class="dropdown-title text-center">۵ دقیقه پیش لاگین کردین</div>
<a href="features-profile.html" class="dropdown-item has-icon">
<span>پروفایل</span>
<i class="far fa-user"></i>
</a>
<a href="features-activities.html" class="dropdown-item has-icon">
<span>فعالیت ها</span>
<i class="fas fa-bolt"></i>
</a>
<a href="features-settings.html" class="dropdown-item has-icon">
<span>تنظیمات</span>
<i class="fas fa-cog"></i>
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item has-icon text-danger">
<span>خروج</span>
<i class="fas fa-sign-out-alt"></i>
</a>
</div>
</li>
</ul>
</nav>
<div class="main-sidebar sidebar-style-2">
<aside id="sidebar-wrapper">
<div class="sidebar-brand">
<a href="index.html">مدیریت پاترونیک</a>
</div>
<div class="sidebar-brand sidebar-brand-sm">
<a href="index.html">مدیریت فروش</a>
</div>
<ul class="sidebar-menu">
<li class="menu-header">داشبورد</li>
<li class="dropdown active">
<a href="#" class="nav-link has-dropdown"><i class="fas fa-fire"></i><span>داشبورد</span></a>
<ul class="dropdown-menu">
<li class=active><a class="nav-link" href="index-0.html">داشبورد عمومی</a></li>
<li><a class="nav-link" href="index.html">داشبورد فروش محصولات</a></li>
</ul>
</li>
<li class="menu-header">امکانات بیشتر</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown" data-toggle="dropdown"><i class="fas fa-columns"></i> <span>صفحه بندی</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="layout-default.html">حالت پیش فرض</a></li>
<li><a class="nav-link" href="layout-transparent.html">سایدبار بدون رنگ</a></li>
<li><a class="nav-link" href="layout-top-navigation.html">نویگیشن بالا</a></li>
</ul>
</li>
<li><a class="nav-link" href="blank.html"><i class="far fa-square"></i> <span>صفحه خالی</span></a></li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="fas fa-th"></i> <span>بوت استرپ</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="bootstrap-alert.html">آلرت</a></li>
<li><a class="nav-link" href="bootstrap-badge.html">بدج</a></li>
<li><a class="nav-link" href="bootstrap-breadcrumb.html">بردکرامپ</a></li>
<li><a class="nav-link" href="bootstrap-buttons.html">دکمه ها</a></li>
<li><a class="nav-link" href="bootstrap-card.html">کارت</a></li>
<li><a class="nav-link" href="bootstrap-carousel.html">کروسل</a></li>
<li><a class="nav-link" href="bootstrap-collapse.html">کولاپس</a></li>
<li><a class="nav-link" href="bootstrap-dropdown.html">دراپ دون</a></li>
<li><a class="nav-link" href="bootstrap-form.html">فرم</a></li>
<li><a class="nav-link" href="bootstrap-list-group.html">لیست گروه</a></li>
<li><a class="nav-link" href="bootstrap-media-object.html">مدیا ابجکت</a></li>
<li><a class="nav-link" href="bootstrap-modal.html">مودال</a></li>
<li><a class="nav-link" href="bootstrap-nav.html">نویگیشن</a></li>
<li><a class="nav-link" href="bootstrap-navbar.html">نوبار</a></li>
<li><a class="nav-link" href="bootstrap-pagination.html">پجینیشن</a></li>
<li><a class="nav-link" href="bootstrap-popover.html">پاپ اور</a></li>
<li><a class="nav-link" href="bootstrap-progress.html">پراگرس</a></li>
<li><a class="nav-link" href="bootstrap-table.html">جدول</a></li>
<li><a class="nav-link" href="bootstrap-tooltip.html">تولتیپ</a></li>
<li><a class="nav-link" href="bootstrap-typography.html">تایپوگرافی</a></li>
</ul>
</li>
<li class="menu-header">امکانات دیگر</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="fas fa-th-large"></i> <span>کامپوننت ها</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="components-gallery.html">گالری</a></li>
<li><a class="nav-link" href="components-multiple-upload.html">مولتی آپلود</a></li>
<li><a class="nav-link" href="components-tab.html">تب</a></li>
<li><a class="nav-link" href="components-table.html">جدول</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="far fa-file-alt"></i> <span>فرم ها</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="forms-advanced-form.html">فرم پیشرفته</a></li>
<li><a class="nav-link" href="forms-editor.html">ویرایشگر</a></li>
<li><a class="nav-link" href="forms-validation.html">ولیدیشن</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="fas fa-plug"></i> <span>ماژول ها</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="modules-calendar.html">تقویم</a></li>
<li><a class="nav-link" href="modules-chartjs.html">چارت ها</a></li>
<li><a class="nav-link" href="modules-datatables.html">دیتاتیبل</a></li>
<li><a class="nav-link" href="modules-flag.html">پرچم</a></li>
<li><a class="nav-link" href="modules-font-awesome.html">فونت اوسوم</a></li>
<li><a class="nav-link" href="modules-ion-icons.html">ای او ن ایکون</a></li>
<li><a class="nav-link" href="modules-owl-carousel.html">اول کراسول</a></li>
<li><a class="nav-link" href="modules-sparkline.html">اسپارک لاین</a></li>
<li><a class="nav-link" href="modules-sweet-alert.html">سویت الرت</a></li>
<li><a class="nav-link" href="modules-toastr.html">توستر</a></li>
<li><a class="nav-link" href="modules-vector-map.html">وکتور مپ</a></li>
<li><a class="nav-link" href="modules-weather-icon.html">ایکن اب و هوا</a></li>
</ul>
</li>
<li class="menu-header">صفحات</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="far fa-user"></i> <span>ثبت نام</span></a>
<ul class="dropdown-menu">
<li><a href="auth-forgot-password.html">فراموشی کلمه عبور</a></li>
<li><a href="auth-login.html">لاگین</a></li>
<li><a href="auth-register.html">ثبت نام</a></li>
<li><a href="auth-reset-password.html">بازیابی کلمه عبور</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="fas fa-exclamation"></i> <span>خطاها</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="errors-503.html">503</a></li>
<li><a class="nav-link" href="errors-403.html">403</a></li>
<li><a class="nav-link" href="errors-404.html">404</a></li>
<li><a class="nav-link" href="errors-500.html">500</a></li>
</ul>
</li>
<li><a class="nav-link" href="credits.html"><i class="fas fa-pencil-ruler"></i> <span>سازنده ها</span></a></li>
</ul>
<div class="mt-4 mb-4 p-3 hide-sidebar-mini">
<a href="https://getstisla.com/docs" class="btn btn-primary btn-lg btn-block btn-icon-split">
<i class="fas fa-rocket"></i> مستندات قالب
</a>
</div>
</aside>
</div>
<!-- Main Content -->
<div class="main-content">
<section class="section">
<div class="section-header">
<h1>داشبورد</h1>
</div>
<div class="row">
<div class="col-lg-3 col-md-6 col-sm-6 col-12">
<div class="card card-statistic-1 text-right">
<div class="card-icon bg-primary">
<i class="far fa-user"></i>
</div>
<div class="card-wrap">
<div class="card-header">
<h4>تعداد مدیران</h4>
</div>
<div class="card-body">
10
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 col-12">
<div class="card card-statistic-1 text-right">
<div class="card-icon bg-danger">
<i class="far fa-newspaper"></i>
</div>
<div class="card-wrap">
<div class="card-header">
<h4>اخبار</h4>
</div>
<div class="card-body">
42
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 col-12">
<div class="card card-statistic-1 text-right">
<div class="card-icon bg-warning">
<i class="far fa-file"></i>
</div>
<div class="card-wrap">
<div class="card-header">
<h4>گزارش ها</h4>
</div>
<div class="card-body">
1,201
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 col-12">
<div class="card card-statistic-1 text-right">
<div class="card-icon bg-success">
<i class="fas fa-circle"></i>
</div>
<div class="card-wrap">
<div class="card-header">
<h4>کاربران آنلاین</h4>
</div>
<div class="card-body">
47
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-8 col-md-12 col-12 col-sm-12">
<div class="card">
<div class="card-header">
<h4>آمار بازدید</h4>
<div class="card-header-action">
<div class="btn-group">
<a href="#" class="btn btn-primary">هفتگی</a>
<a href="#" class="btn">ماهانه</a>
</div>
</div>
</div>
<div class="card-body">
<canvas id="myChart" height="182"></canvas>
<div class="statistic-details mt-sm-4">
<div class="statistic-details-item">
<span class="text-muted"><span class="text-primary"><i class="fas fa-caret-up"></i></span> 7%</span>
<div class="detail-value">$243</div>
<div class="detail-name">فروش امروز</div>
</div>
<div class="statistic-details-item">
<span class="text-muted"><span class="text-danger"><i class="fas fa-caret-down"></i></span> 23%</span>
<div class="detail-value">$2,902</div>
<div class="detail-name">فروش این هفته</div>
</div>
<div class="statistic-details-item">
<span class="text-muted"><span class="text-primary"><i class="fas fa-caret-up"></i></span>9%</span>
<div class="detail-value">$12,821</div>
<div class="detail-name">فروش این ماه</div>
</div>
<div class="statistic-details-item">
<span class="text-muted"><span class="text-primary"><i class="fas fa-caret-up"></i></span> 19%</span>
<div class="detail-value">$92,142</div>
<div class="detail-name">فروش امسال</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-12 col-12 col-sm-12">
<div class="card">
<div class="card-header">
<h4>فعالیت های اخیر</h4>
</div>
<div class="card-body">
<ul class="list-unstyled text-right p-0 list-unstyled-border">
<li class="media">
<img class="ml-3 rounded-circle" width="50" src="../assets/img/avatar/avatar-1.png" alt="avatar">
<div class="media-body">
<div class="float-left text-primary">همین الان</div>
<div class="media-title">مهدی خانزادی</div>
<span class="text-small text-muted">لورم اپسوم در فرهنگ چاپ شناخت بیشتری را برای طراحان رایانه ای...</span>
</div>
</li>
<li class="media">
<img class="ml-3 rounded-circle" width="50" src="../assets/img/avatar/avatar-2.png" alt="avatar">
<div class="media-body">
<div class="float-left">۱۲ دقیقه پیش</div>
<div class="media-title">مهیار انصاری</div>
<span class="text-small text-muted">لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ.</span>
</div>
</li>
<li class="media">
<img class="ml-3 rounded-circle" width="50" src="../assets/img/avatar/avatar-3.png" alt="avatar">
<div class="media-body">
<div class="float-left">۱۷ دقیقه پیش</div>
<div class="media-title">رضا اکبری</div>
<span class="text-small text-muted">لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ است.</span>
</div>
</li>
<li class="media">
<img class="ml-3 rounded-circle" width="50" src="../assets/img/avatar/avatar-4.png" alt="avatar">
<div class="media-body">
<div class="float-left">۲۱ دقیقه پیش</div>
<div class="media-title">امیتا پاچان</div>
<span class="text-small text-muted">حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد</span>
</div>
</li>
</ul>
<div class="text-center pt-1 pb-1">
<a href="#" class="btn btn-primary btn-lg btn-round">
نمایش همه
</a>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-md-12 col-12 col-sm-12">
<div class="card">
<div class="card-body pt-2 pb-2">
<div id="myWeather">لطفا صبر کنید</div>
</div>
</div>
</div>
<div class="col-lg-6 col-md-12 col-12 col-sm-12">
<div class="card">
<div class="card-header">
<h4>نویسنده ها</h4>
</div>
<div class="card-body">
<div class="row pb-2">
<div class="col-6 col-sm-3 col-lg-3 mb-4 mb-md-0">
<div class="avatar-item mb-0">
<img alt="image" src="../assets/img/avatar/avatar-5.png" class="img-fluid" data-toggle="tooltip" title="مهدی خانزادی">
<div class="avatar-badge" title="ویراستار" data-toggle="tooltip"><i class="fas fa-wrench"></i></div>
</div>
</div>
<div class="col-6 col-sm-3 col-lg-3 mb-4 mb-md-0">
<div class="avatar-item mb-0">
<img alt="image" src="../assets/img/avatar/avatar-4.png" class="img-fluid" data-toggle="tooltip" title="آمیتا پاچان">
<div class="avatar-badge" title="ادمین" data-toggle="tooltip"><i class="fas fa-cog"></i></div>
</div>
</div>
<div class="col-6 col-sm-3 col-lg-3 mb-4 mb-md-0">
<div class="avatar-item mb-0">
<img alt="image" src="../assets/img/avatar/avatar-1.png" class="img-fluid" data-toggle="tooltip" title="مهیار انصاری">
<div class="avatar-badge" title="نویسنده" data-toggle="tooltip"><i class="fas fa-pencil-alt"></i></div>
</div>
</div>
<div class="col-6 col-sm-3 col-lg-3 mb-4 mb-md-0">
<div class="avatar-item mb-0">
<img alt="image" src="../assets/img/avatar/avatar-2.png" class="img-fluid" data-toggle="tooltip" title="علی نظری">
<div class="avatar-badge" title="ادمین" data-toggle="tooltip"><i class="fas fa-cog"></i></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-md-6 col-12">
<div class="card">
<div class="card-header">
<h4>بازدید کننده ها از کجا اومدن؟</h4>
</div>
<div class="card-body text-right">
<div class="mb-4">
<div class="text-small float-left font-weight-bold text-muted">۲,۱۰۰</div>
<div class="font-weight-bold mb-1">گوگل</div>
<div class="progress" data-height="3">
<div class="progress-bar" role="progressbar" data-width="80%" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="mb-4">
<div class="text-small float-left font-weight-bold text-muted">۱,۸۸۰</div>
<div class="font-weight-bold mb-1">فیسبوک</div>
<div class="progress" data-height="3">
<div class="progress-bar" role="progressbar" data-width="67%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="mb-4">
<div class="text-small float-left font-weight-bold text-muted">۱,۵۲۱</div>
<div class="font-weight-bold mb-1">بینگ</div>
<div class="progress" data-height="3">
<div class="progress-bar" role="progressbar" data-width="58%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="mb-4">
<div class="text-small float-left font-weight-bold text-muted">۸۸۴</div>
<div class="font-weight-bold mb-1">یاهو</div>
<div class="progress" data-height="3">
<div class="progress-bar" role="progressbar" data-width="36%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="mb-4">
<div class="text-small float-left font-weight-bold text-muted">۴۷۳</div>
<div class="font-weight-bold mb-1">یاندکس</div>
<div class="progress" data-height="3">
<div class="progress-bar" role="progressbar" data-width="28%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="mb-4">
<div class="text-small float-left font-weight-bold text-muted">418</div>
<div class="font-weight-bold mb-1">طرح چه</div>
<div class="progress" data-height="3">
<div class="progress-bar" role="progressbar" data-width="20%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h4>محبوبترین مرورگرها</h4>
</div>
<div class="card-body">
<div class="row">
<div class="col text-center">
<div class="browser browser-chrome"></div>
<div class="mt-2 font-weight-bold">کروم</div>
<div class="text-muted text-small"><span class="text-primary"><i class="fas fa-caret-up"></i></span> 48%</div>
</div>
<div class="col text-center">
<div class="browser browser-firefox"></div>
<div class="mt-2 font-weight-bold">فایرفاکس</div>
<div class="text-muted text-small"><span class="text-primary"><i class="fas fa-caret-up"></i></span> 26%</div>
</div>
<div class="col text-center">
<div class="browser browser-safari"></div>
<div class="mt-2 font-weight-bold">سافاری</div>
<div class="text-muted text-small"><span class="text-danger"><i class="fas fa-caret-down"></i></span> 14%</div>
</div>
<div class="col text-center">
<div class="browser browser-opera"></div>
<div class="mt-2 font-weight-bold">اپرا</div>
<div class="text-muted text-small">7%</div>
</div>
<div class="col text-center">
<div class="browser browser-internet-explorer"></div>
<div class="mt-2 font-weight-bold">اینترنت اکسپلورر</div>
<div class="text-muted text-small"><span class="text-primary"><i class="fas fa-caret-up"></i></span> 5%</div>
</div>
</div>
</div>
</div>
<div class="card mt-sm-5 mt-md-0">
<div class="card-header">
<h4>بازدیدکنندگان</h4>
</div>
<div class="card-body">
<div id="visitorMap"></div>
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-12">
<div class="card">
<div class="card-header">
<h4>آمار فعالیت های این هفته</h4>
<div class="card-header-action">
<div class="dropdown">
<a href="#" class="dropdown-toggle btn btn-primary" data-toggle="dropdown">فیلتر</a>
<div class="dropdown-menu dropdown-menu-right text-right">
<a href="#" class="dropdown-item has-icon"><i class="far fa-circle"></i> الکتریک </a>
<a href="#" class="dropdown-item has-icon"><i class="far fa-circle"></i> تیشرت </a>
<a href="#" class="dropdown-item has-icon"><i class="far fa-circle"></i> کلاه </a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item text-center">نمایش همه موارد</a>
</div>
</div>
</div>
</div>
<div class="card-body">
<div class="summary">
<div class="summary-info">
<h4>$۱۰۵۳</h4>
<div class="text-muted">۳ محصول به ۲ خریدار فروخته شد</div>
<div class="d-block mt-2">
<a href="#">نمایش همه موارد</a>
</div>
</div>
<div class="summary-item text-right">
<h6>ایتم های لیست <span class="text-muted">(۳ مورد)</span></h6>
<ul class="list-unstyled p-0 list-unstyled-border">
<li class="media">
<a href="#">
<img class="ml-3 rounded" width="50" src="../assets/img/products/product-1-50.png" alt="product">
</a>
<div class="media-body">
<div class="media-left">$۴۰۵</div>
<div class="media-title"><a href="#">پلی استیشن ۹</a></div>
<div class="text-muted text-small"> دوشنبه <div class="bullet"></div> توسط <a href="#">مهدی خانزادی</a></div>
</div>
</li>
<li class="media">
<a href="#">
<img class="ml-3 rounded" width="50" src="../assets/img/products/product-2-50.png" alt="product">
</a>
<div class="media-body">
<div class="media-left">$۴۹۹</div>
<div class="media-title"><a href="#">راکت</a></div>
<div class="text-muted text-small"> دوشنبه <div class="bullet"></div> توسط <a href="#">محمدرضا ملک</a></div>
</div>
</li>
<li class="media">
<a href="#">
<img class="ml-3 rounded" width="50" src="../assets/img/products/product-3-50.png" alt="product">
</a>
<div class="media-body">
<div class="media-left">$۱۴۹</div>
<div class="media-title"><a href="#">شیائومی</a></div>
<div class="text-muted text-small"> جمعه <div class="bullet"></div> توسط <a href="#">حسن بصری</a></div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h4 class="d-inline">کارها</h4>
<div class="card-header-action">
<a href="#" class="btn btn-primary">نمایش همه موارد</a>
</div>
</div>
<div class="card-body">
<ul class="list-unstyled p-0 text-right list-unstyled-border">
<li class="media">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="cbx-1">
<label class="custom-control-label" for="cbx-1"></label>
</div>
<img class="ml-3 rounded-circle" width="50" src="../assets/img/avatar/avatar-4.png" alt="avatar">
<div class="media-body">
<div class="badge badge-pill badge-danger mb-1 float-left">تکمیل نشده</div>
<h6 class="media-title"><a href="#">طراحی قالب پاترونیک</a></h6>
<div class="text-small text-muted"><span class="text-primary">همین الان</span> <div class="bullet"></div> مهدی خانزادی </div>
</div>
</li>
<li class="media">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="cbx-2" checked="">
<label class="custom-control-label" for="cbx-2"></label>
</div>
<img class="ml-3 rounded-circle" width="50" src="../assets/img/avatar/avatar-5.png" alt="avatar">
<div class="media-body">
<div class="badge badge-pill badge-primary mb-1 float-left">تکمیل شده</div>
<h6 class="media-title"><a href="#">افزودن کامپوننت جدید</a></h6>
<div class="text-small text-muted">۴ دقیقه پیش <div class="bullet"></div> مهدی خانزادی </div>
</div>
</li>
<li class="media">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="cbx-3" >
<label class="custom-control-label" for="cbx-3"></label>
</div>
<img class="ml-3 rounded-circle" width="50" src="../assets/img/avatar/avatar-2.png" alt="avatar">
<div class="media-body">
<div class="badge badge-pill badge-warning mb-1 float-left">در حال انجام</div>
<h6 class="media-title"><a href="#">دیباگ کردن سیستم تیکتینگ</a></h6>
<div class="text-small text-muted">۸ دقیقه پیش <div class="bullet"></div> مهدی خانزادی </div>
</div>
</li>
<li class="media">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="cbx-4">
<label class="custom-control-label" for="cbx-4"></label>
</div>
<img class="ml-3 rounded-circle" width="50" src="../assets/img/avatar/avatar-1.png" alt="avatar">
<div class="media-body">
<div class="badge badge-pill badge-danger mb-1 float-left">تکمیل نشده</div>
<h6 class="media-title"><a href="#">افزودن روتر به پروژه دانشگاه آزاد</a></h6>
<div class="text-small text-muted">۲۱ دقیقه پیش <div class="bullet"></div> علی نظری </div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-5 col-md-12 col-12 col-sm-12">
<form method="post" class="needs-validation" novalidate="">
<div class="card text-right">
<div class="card-header">
<h4>پیشنویس سریع</h4>
</div>
<div class="card-body pb-0">
<div class="form-group">
<label>عنوان</label>
<input type="text" name="title" class="form-control" required>
<div class="invalid-feedback">
لطفا فیلد عنوان را تکمیل کنید
</div>
</div>
<div class="form-group">
<label>محتوا</label>
<textarea class="summernote-simple"></textarea>
</div>
</div>
<div class="card-footer pt-0">
<button class="btn btn-primary">ذخیره پیشنویس</button>
</div>
</div>
</form>
</div>
<div class="col-lg-7 col-md-12 col-12 col-sm-12">
<div class="card text-right">
<div class="card-header">
<h4>آخرین مطالب</h4>
<div class="card-header-action">
<a href="#" class="btn btn-primary">نمایش همه</a>
</div>
</div>
<div class="card-body p-0">
<div class="table-responsive">
<table class="table table-striped mb-0">
<thead>
<tr>
<th>عنوان</th>
<th>نویسنده</th>
<th>فعالیت</th>
</tr>
</thead>
<tbody>
<tr>
<td>
معرفی لاراول ۶
<div class="table-links">
<a href="#">نمایش</a>
<div class="bullet"></div>
در دسته بندی <a href="#">توسعه وب</a>
</div>
</td>
<td>
<a href="#" class="font-weight-600"><img src="../assets/img/avatar/avatar-1.png" alt="avatar" width="30" class="rounded-circle ml-1"> مهدی خانزادی </a>
</td>
<td>
<a class="btn btn-primary btn-action ml-1" data-toggle="tooltip" title="Edit"><i class="fas fa-pencil-alt"></i></a>
<a class="btn btn-danger btn-action" data-toggle="tooltip" title="Delete" data-confirm="مطمئن هستی؟|داداش این حذف بشه دیگه نمیشه برگردوندش! پاک بشه؟" data-confirm-yes="alert('حذف شد')"><i class="fas fa-trash"></i></a>
</td>
</tr>
<tr>
<td>
آموزش لاراول ۵ - نصب و راه اندازی
<div class="table-links">
<a href="#">نمایش</a>
<div class="bullet"></div>
در دسته بندی <a href="#">برنامه نویسی</a>
</div>
</td>
<td>
<a href="#" class="font-weight-600"><img src="../assets/img/avatar/avatar-1.png" alt="avatar" width="30" class="rounded-circle ml-1"> مهدی خانزادی </a>
</td>
<td>
<a class="btn btn-primary btn-action ml-1" data-toggle="tooltip" title="Edit"><i class="fas fa-pencil-alt"></i></a>
<a class="btn btn-danger btn-action" data-toggle="tooltip" title="Delete" data-confirm="مطمئن هستی؟|داداش این حذف بشه دیگه نمیشه برگردوندش! پاک بشه؟" data-confirm-yes="alert('حذف شد')"><i class="fas fa-trash"></i></a>
</td>
</tr>
<tr>
<td>
آموزش لاراول - مدل MVC
<div class="table-links">
<a href="#">نمایش</a>
<div class="bullet"></div>
در دسته بندی <a href="#">برنامه نویسی</a>
</div>
</td>
<td>
<a href="#" class="font-weight-600"><img src="../assets/img/avatar/avatar-1.png" alt="avatar" width="30" class="rounded-circle ml-1"> علی نظری </a>
</td>
<td>
<a class="btn btn-primary btn-action ml-1" data-toggle="tooltip" title="Edit"><i class="fas fa-pencil-alt"></i></a>
<a class="btn btn-danger btn-action" data-toggle="tooltip" title="Delete" data-confirm="مطمئن هستی؟|داداش این حذف بشه دیگه نمیشه برگردوندش! پاک بشه؟" data-confirm-yes="alert('حذف شد')"><i class="fas fa-trash"></i></a>
</td>
</tr>
<tr>
<td>
آموزش لاراول - مایگرشن ها
<div class="table-links">
<a href="#">نمایش</a>
<div class="bullet"></div>
در دسته بندی <a href="#">برنامه نویسی وب</a>
</div>
</td>
<td>
<a href="#" class="font-weight-600"><img src="../assets/img/avatar/avatar-1.png" alt="avatar" width="30" class="rounded-circle ml-1"> مهدی خانزادی </a>
</td>
<td>
<a class="btn btn-primary btn-action ml-1" data-toggle="tooltip" title="Edit"><i class="fas fa-pencil-alt"></i></a>
<a class="btn btn-danger btn-action" data-toggle="tooltip" title="Delete" data-confirm="مطمئن هستی؟|داداش این حذف بشه دیگه نمیشه برگردوندش! پاک بشه؟" data-confirm-yes="alert('حذف شد')"><i class="fas fa-trash"></i></a>
</td>
</tr>
<tr>
<td>
آموزش لاراول - Deploy
<div class="table-links">
<a href="#">نمایش</a>
<div class="bullet"></div>
در دسته بندی <a href="#">برنامه نویسی</a>
</div>
</td>
<td>
<a href="#" class="font-weight-600"><img src="../assets/img/avatar/avatar-1.png" alt="avatar" width="30" class="rounded-circle ml-1"> مهدی خانزادی </a>
</td>
<td>
<a class="btn btn-primary btn-action ml-1" data-toggle="tooltip" title="Edit"><i class="fas fa-pencil-alt"></i></a>
<a class="btn btn-danger btn-action" data-toggle="tooltip" title="Delete" data-confirm="مطمئن هستی؟|داداش این حذف بشه دیگه نمیشه برگردوندش! پاک بشه؟" data-confirm-yes="alert('حذف شد')"><i class="fas fa-trash"></i></a>
</td>
</tr>
<tr>
<td>
آموزش لاراول - Closing
<div class="table-links">
<a href="#">View</a>
<div class="bullet"></div>
در دسته بندی<a href="#">توسه وب</a>
</div>
</td>
<td>
<a href="#" class="font-weight-600"><img src="../assets/img/avatar/avatar-1.png" alt="avatar" width="30" class="rounded-circle mr-1"> هاشم مقدری </a>
</td>
<td>
<a class="btn btn-primary btn-action ml-1" data-toggle="tooltip" title="Edit"><i class="fas fa-pencil-alt"></i></a>
<a class="btn btn-danger btn-action" data-toggle="tooltip" title="Delete" data-confirm="مطمئن هستی؟|داداش این حذف بشه دیگه نمیشه برگردوندش! پاک بشه؟" data-confirm-yes="alert('حذف شد')"><i class="fas fa-trash"></i></a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<footer class="main-footer">
<div class="footer-left">
Copyright &copy; 2018 <div class="bullet"></div> Design By <a href="https://nauval.in/">Muhamad Nauval Azhar</a>
</div>
<div class="footer-right">
</div>
</footer>
</div>
</div>
<!-- General JS Scripts -->
<script src="../assets/modules/jquery.min.js"></script>
<script src="../assets/modules/popper.js"></script>
<script src="../assets/modules/tooltip.js"></script>
<script src="../assets/modules/bootstrap/js/bootstrap.min.js"></script>
<script src="../assets/modules/nicescroll/jquery.nicescroll.min.js"></script>
<script src="../assets/modules/moment.min.js"></script>
<script src="../assets/js/stisla.js"></script>
<!-- JS Libraies -->
<script src="../assets/modules/simple-weather/jquery.simpleWeather.min.js"></script>
<script src="../assets/modules/chart.min.js"></script>
<script src="../assets/modules/jqvmap/dist/jquery.vmap.min.js"></script>
<script src="../assets/modules/jqvmap/dist/maps/jquery.vmap.world.js"></script>
<script src="../assets/modules/summernote/summernote-bs4.js"></script>
<script src="../assets/modules/chocolat/dist/js/jquery.chocolat.min.js"></script>
<!-- Page Specific JS File -->
<script src="../assets/js/page/index-0.js"></script>
<!-- Template JS File -->
<script src="../assets/js/scripts.js"></script>
<script src="../assets/js/custom.js"></script>
</body>
</html>

882
dev/rtl/index.html Normal file
View File

@@ -0,0 +1,882 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no" name="viewport">
<title>Ecommerce Dashboard &mdash; Stisla</title>
<!-- General CSS Files -->
<link rel="stylesheet" href="../assets/modules/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="../assets/modules/fontawesome/css/all.min.css">
<!-- CSS Libraries -->
<link rel="stylesheet" href="../assets/modules/jqvmap/dist/jqvmap.min.css">
<link rel="stylesheet" href="../assets/modules/summernote/summernote-bs4.css">
<link rel="stylesheet" href="../assets/modules/owlcarousel2/dist/assets/owl.carousel.min.css">
<link rel="stylesheet" href="../assets/modules/owlcarousel2/dist/assets/owl.theme.default.min.css">
<!-- Template CSS -->
<link rel="stylesheet" href="../assets/css/style.css">
<link rel="stylesheet" href="../assets/css/components.css">
<link rel="stylesheet" href="../assets/css/rtl.css">
</head>
<body>
<div id="app">
<div class="main-wrapper main-wrapper-1">
<div class="navbar-bg"></div>
<nav class="navbar navbar-expand-lg main-navbar">
<form class="form-inline ml-auto">
<ul class="navbar-nav ml-3">
<li><a href="#" data-toggle="sidebar" class="nav-link nav-link-lg"><i class="fas fa-bars"></i></a></li>
<li><a href="#" data-toggle="search" class="nav-link nav-link-lg d-sm-none"><i class="fas fa-search"></i></a></li>
</ul>
<div class="search-element text-right">
<input class="form-control" type="search" placeholder="جستجو" aria-label="Search" data-width="250">
<button class="btn" type="submit"><i class="fas fa-search"></i></button>
<div class="search-backdrop"></div>
<div class="search-result">
<div class="search-header">
نتیجه جستجو
</div>
<div class="search-item">
<a href="#">چگونه ناسا رو هک کنیم؟</a>
<a href="#" class="search-close"><i class="fas fa-times"></i></a>
</div>
<div class="search-item">
<a href="#">Kodinger.com</a>
<a href="#" class="search-close"><i class="fas fa-times"></i></a>
</div>
<div class="search-item">
<a href="#">پنل مدیریت</a>
<a href="#" class="search-close"><i class="fas fa-times"></i></a>
</div>
<div class="search-header">
نتایج
</div>
<div class="search-item">
<a href="#">
<img class="ml-3 rounded" width="30" src="../assets/img/products/product-3-50.png" alt="product">
آیفون s9 تولید شد
</a>
</div>
<div class="search-item">
<a href="#">
<img class="ml-3 rounded" width="30" src="../assets/img/products/product-2-50.png" alt="product">
چه شادی هایی که زیر پای انسانها سرکوب شدند
</a>
</div>
<div class="search-item">
<a href="#">
<img class="ml-3 rounded" width="30" src="../assets/img/products/product-1-50.png" alt="product">
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ.
</a>
</div>
<div class="search-header">
پروژه ها
</div>
<div class="search-item">
<a href="#">
<div class="search-icon bg-danger text-white ml-3">
<i class="fas fa-code"></i>
</div>
متریال ادمین پنل
</a>
</div>
<div class="search-item">
<a href="#">
<div class="search-icon bg-primary text-white ml-3">
<i class="fas fa-laptop"></i>
</div>
ایجاد صفحه لندینگ
</a>
</div>
</div>
</div>
</form>
<ul class="navbar-nav navbar-right">
<li class="dropdown dropdown-list-toggle"><a href="#" data-toggle="dropdown" class="nav-link nav-link-lg message-toggle beep"><i class="far fa-envelope"></i></a>
<div class="dropdown-menu dropdown-list text-right dropdown-menu-left">
<div class="dropdown-header">پیام ها
<div class="float-left">
<a href="#">علامتگذاری همه بصورت خوانده شده</a>
</div>
</div>
<div class="dropdown-list-content dropdown-list-message">
<a href="#" class="dropdown-item dropdown-item-unread">
<div class="dropdown-item-avatar">
<img alt="image" src="../assets/img/avatar/avatar-1.png" class="rounded-circle">
<div class="is-online"></div>
</div>
<div class="dropdown-item-desc text-right">
<b>مهدی خانزادی</b>
<p>سلام داداچ!</p>
<div class="time">۱۰ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item dropdown-item-unread">
<div class="dropdown-item-avatar">
<img alt="image" src="../assets/img/avatar/avatar-2.png" class="rounded-circle">
</div>
<div class="dropdown-item-desc">
<b>مهیار انصاری</b>
<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ.</p>
<div class="time">۱۲ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item dropdown-item-unread">
<div class="dropdown-item-avatar">
<img alt="image" src="../assets/img/avatar/avatar-3.png" class="rounded-circle">
<div class="is-online"></div>
</div>
<div class="dropdown-item-desc">
<b>آمیتا پاچان</b>
<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ.</p>
<div class="time">۱۲ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-avatar">
<img alt="image" src="../assets/img/avatar/avatar-4.png" class="rounded-circle">
</div>
<div class="dropdown-item-desc">
<b>مهدی خانزادی</b>
<p>سلام سیستم پشتیبانی پاترونیک رو استفاده کنید</p>
<div class="time">۱۶ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-avatar">
<img alt="image" src="../assets/img/avatar/avatar-5.png" class="rounded-circle">
</div>
<div class="dropdown-item-desc">
<b>لورم ایپسوم</b>
<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ.</p>
<div class="time">دیروز</div>
</div>
</a>
</div>
<div class="dropdown-footer text-center">
<a href="#"> دیدن همه پیام ها<i class="fas fa-chevron-left"></i></a>
</div>
</div>
</li>
<li class="dropdown dropdown-list-toggle"><a href="#" data-toggle="dropdown" class="nav-link notification-toggle nav-link-lg beep"><i class="far fa-bell"></i></a>
<div class="dropdown-menu dropdown-list dropdown-menu-left">
<div class="dropdown-header text-right">نوتیفیکیشن ها
<div class="float-left">
<a href="#"> علامتگذاری همه بصورت خوانده شده</a>
</div>
</div>
<div class="dropdown-list-content dropdown-list-icons text-right">
<a href="#" class="dropdown-item dropdown-item-unread">
<div class="dropdown-item-icon bg-primary text-white">
<i class="fas fa-code"></i>
</div>
<div class="dropdown-item-desc">
قالب مدیریتی متریال اپدیت جدید داد!
<div class="time text-primary">۲ دقیقه پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-icon bg-info text-white">
<i class="far fa-user"></i>
</div>
<div class="dropdown-item-desc">
<b>شما</b> و <b>مهیار انصاری</b> هم اکنون همکار هستید.
<div class="time">۱۰ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-icon bg-success text-white">
<i class="fas fa-check"></i>
</div>
<div class="dropdown-item-desc">
<b>مهدی خانزادی</b> اطلاعات مرتبط با <b>قالب</b> را <b>آپلود کرد.</b>
<div class="time">۱۲ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-icon bg-danger text-white">
<i class="fas fa-exclamation-triangle"></i>
</div>
<div class="dropdown-item-desc">
فضای هارد دیسک پر شده است لطفا آن را خالی کنید.
<div class="time">۱۷ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-icon bg-info text-white">
<i class="fas fa-bell"></i>
</div>
<div class="dropdown-item-desc">
به قالب متریال خوش آمدید
<div class="time">دیروز</div>
</div>
</a>
</div>
<div class="dropdown-footer text-center">
<a href="#">
<span>نمایش همه</span>
<i class="fas fa-chevron-left"></i>
</a>
</div>
</div>
</li>
<li class="dropdown"><a href="#" data-toggle="dropdown" class="nav-link dropdown-toggle nav-link-lg nav-link-user">
<img alt="image" src="../assets/img/avatar/avatar-1.png" class="rounded-circle mr-1">
<div class="d-sm-none d-lg-inline-block">سلام مهدی</div></a>
<div class="dropdown-menu dropdown-menu-right text-right">
<div class="dropdown-title text-center">۵ دقیقه پیش لاگین کردین</div>
<a href="features-profile.html" class="dropdown-item has-icon">
<span>پروفایل</span>
<i class="far fa-user"></i>
</a>
<a href="features-activities.html" class="dropdown-item has-icon">
<span>فعالیت ها</span>
<i class="fas fa-bolt"></i>
</a>
<a href="features-settings.html" class="dropdown-item has-icon">
<span>تنظیمات</span>
<i class="fas fa-cog"></i>
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item has-icon text-danger">
<span>خروج</span>
<i class="fas fa-sign-out-alt"></i>
</a>
</div>
</li>
</ul>
</nav>
<div class="main-sidebar sidebar-style-2">
<aside id="sidebar-wrapper">
<div class="sidebar-brand">
<a href="index.html">مدیریت پاترونیک</a>
</div>
<div class="sidebar-brand sidebar-brand-sm">
<a href="index.html">مدیریت فروش</a>
</div>
<ul class="sidebar-menu">
<li class="menu-header">داشبورد</li>
<li class="dropdown active">
<a href="#" class="nav-link has-dropdown"><i class="fas fa-fire"></i><span>داشبورد</span></a>
<ul class="dropdown-menu">
<li class=active><a class="nav-link" href="index-0.html">داشبورد عمومی</a></li>
<li><a class="nav-link" href="index.html">داشبورد فروش محصولات</a></li>
</ul>
</li>
<li class="menu-header">امکانات بیشتر</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown" data-toggle="dropdown"><i class="fas fa-columns"></i> <span>صفحه بندی</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="layout-default.html">حالت پیش فرض</a></li>
<li><a class="nav-link" href="layout-transparent.html">سایدبار بدون رنگ</a></li>
<li><a class="nav-link" href="layout-top-navigation.html">نویگیشن بالا</a></li>
</ul>
</li>
<li><a class="nav-link" href="blank.html"><i class="far fa-square"></i> <span>صفحه خالی</span></a></li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="fas fa-th"></i> <span>بوت استرپ</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="bootstrap-alert.html">آلرت</a></li>
<li><a class="nav-link" href="bootstrap-badge.html">بدج</a></li>
<li><a class="nav-link" href="bootstrap-breadcrumb.html">بردکرامپ</a></li>
<li><a class="nav-link" href="bootstrap-buttons.html">دکمه ها</a></li>
<li><a class="nav-link" href="bootstrap-card.html">کارت</a></li>
<li><a class="nav-link" href="bootstrap-carousel.html">کروسل</a></li>
<li><a class="nav-link" href="bootstrap-collapse.html">کولاپس</a></li>
<li><a class="nav-link" href="bootstrap-dropdown.html">دراپ دون</a></li>
<li><a class="nav-link" href="bootstrap-form.html">فرم</a></li>
<li><a class="nav-link" href="bootstrap-list-group.html">لیست گروه</a></li>
<li><a class="nav-link" href="bootstrap-media-object.html">مدیا ابجکت</a></li>
<li><a class="nav-link" href="bootstrap-modal.html">مودال</a></li>
<li><a class="nav-link" href="bootstrap-nav.html">نویگیشن</a></li>
<li><a class="nav-link" href="bootstrap-navbar.html">نوبار</a></li>
<li><a class="nav-link" href="bootstrap-pagination.html">پجینیشن</a></li>
<li><a class="nav-link" href="bootstrap-popover.html">پاپ اور</a></li>
<li><a class="nav-link" href="bootstrap-progress.html">پراگرس</a></li>
<li><a class="nav-link" href="bootstrap-table.html">جدول</a></li>
<li><a class="nav-link" href="bootstrap-tooltip.html">تولتیپ</a></li>
<li><a class="nav-link" href="bootstrap-typography.html">تایپوگرافی</a></li>
</ul>
</li>
<li class="menu-header">امکانات دیگر</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="fas fa-th-large"></i> <span>کامپوننت ها</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="components-gallery.html">گالری</a></li>
<li><a class="nav-link" href="components-multiple-upload.html">مولتی آپلود</a></li>
<li><a class="nav-link" href="components-tab.html">تب</a></li>
<li><a class="nav-link" href="components-table.html">جدول</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="far fa-file-alt"></i> <span>فرم ها</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="forms-advanced-form.html">فرم پیشرفته</a></li>
<li><a class="nav-link" href="forms-editor.html">ویرایشگر</a></li>
<li><a class="nav-link" href="forms-validation.html">ولیدیشن</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="fas fa-plug"></i> <span>ماژول ها</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="modules-calendar.html">تقویم</a></li>
<li><a class="nav-link" href="modules-chartjs.html">چارت ها</a></li>
<li><a class="nav-link" href="modules-datatables.html">دیتاتیبل</a></li>
<li><a class="nav-link" href="modules-flag.html">پرچم</a></li>
<li><a class="nav-link" href="modules-font-awesome.html">فونت اوسوم</a></li>
<li><a class="nav-link" href="modules-ion-icons.html">ای او ن ایکون</a></li>
<li><a class="nav-link" href="modules-owl-carousel.html">اول کراسول</a></li>
<li><a class="nav-link" href="modules-sparkline.html">اسپارک لاین</a></li>
<li><a class="nav-link" href="modules-sweet-alert.html">سویت الرت</a></li>
<li><a class="nav-link" href="modules-toastr.html">توستر</a></li>
<li><a class="nav-link" href="modules-vector-map.html">وکتور مپ</a></li>
<li><a class="nav-link" href="modules-weather-icon.html">ایکن اب و هوا</a></li>
</ul>
</li>
<li class="menu-header">صفحات</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="far fa-user"></i> <span>ثبت نام</span></a>
<ul class="dropdown-menu">
<li><a href="auth-forgot-password.html">فراموشی کلمه عبور</a></li>
<li><a href="auth-login.html">لاگین</a></li>
<li><a href="auth-register.html">ثبت نام</a></li>
<li><a href="auth-reset-password.html">بازیابی کلمه عبور</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="fas fa-exclamation"></i> <span>خطاها</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="errors-503.html">503</a></li>
<li><a class="nav-link" href="errors-403.html">403</a></li>
<li><a class="nav-link" href="errors-404.html">404</a></li>
<li><a class="nav-link" href="errors-500.html">500</a></li>
</ul>
</li>
<li><a class="nav-link" href="credits.html"><i class="fas fa-pencil-ruler"></i> <span>سازنده ها</span></a></li>
</ul>
<div class="mt-4 mb-4 p-3 hide-sidebar-mini">
<a href="https://getstisla.com/docs" class="btn btn-primary btn-lg btn-block btn-icon-split">
<i class="fas fa-rocket"></i> مستندات قالب
</a>
</div>
</aside>
</div>
<!-- Main Content -->
<div class="main-content">
<section class="section">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-12">
<div class="card card-statistic-2">
<div class="card-stats text-right">
<div class="card-stats-title">آمار سفارش -
<div class="dropdown d-inline">
<a class="font-weight-600 dropdown-toggle" data-toggle="dropdown" href="#" id="orders-month">فروردین</a>
<ul class="dropdown-menu dropdown-menu-right p-0 dropdown-menu-sm text-right">
<li class="dropdown-title">انتخاب ماه</li>
<li><a href="#" class="dropdown-item">فروردین</a></li>
<li><a href="#" class="dropdown-item">اردیبهشت</a></li>
<li><a href="#" class="dropdown-item">خرداد</a></li>
<li><a href="#" class="dropdown-item">تیر</a></li>
<li><a href="#" class="dropdown-item">مرداد</a></li>
<li><a href="#" class="dropdown-item">شهریور</a></li>
<li><a href="#" class="dropdown-item">مهر</a></li>
<li><a href="#" class="dropdown-item active">آبان</a></li>
<li><a href="#" class="dropdown-item">آذر</a></li>
<li><a href="#" class="dropdown-item">دی</a></li>
<li><a href="#" class="dropdown-item">بهمن</a></li>
<li><a href="#" class="dropdown-item">اسفند</a></li>
</ul>
</div>
</div>
<div class="card-stats-items">
<div class="card-stats-item">
<div class="card-stats-item-count">24</div>
<div class="card-stats-item-label">جدید</div>
</div>
<div class="card-stats-item">
<div class="card-stats-item-count">12</div>
<div class="card-stats-item-label">در انبار</div>
</div>
<div class="card-stats-item">
<div class="card-stats-item-count">23</div>
<div class="card-stats-item-label">ارسال شده</div>
</div>
</div>
</div>
<div class="card-icon shadow-primary bg-primary">
<i class="fas fa-archive"></i>
</div>
<div class="card-wrap text-right">
<div class="card-header">
<h4>تعداد کل سفارش ها</h4>
</div>
<div class="card-body">
۵۹
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-12">
<div class="card card-statistic-2">
<div class="card-chart">
<canvas id="balance-chart" height="80"></canvas>
</div>
<div class="card-icon shadow-primary bg-primary">
<i class="fas fa-dollar-sign"></i>
</div>
<div class="card-wrap">
<div class="card-header">
<h4>آمار برگشت کالا</h4>
</div>
<div class="card-body">
$۱۸۷,۱۳
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-12">
<div class="card card-statistic-2">
<div class="card-chart">
<canvas id="sales-chart" height="80"></canvas>
</div>
<div class="card-icon shadow-primary bg-primary">
<i class="fas fa-shopping-bag"></i>
</div>
<div class="card-wrap">
<div class="card-header">
<h4>فروش</h4>
</div>
<div class="card-body">
۴,۷۵۸
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-8">
<div class="card">
<div class="card-header">
<h4>مقایسه کالاهای فروخته و برگشت داده شده</h4>
</div>
<div class="card-body">
<canvas id="myChart" height="158"></canvas>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="card gradient-bottom">
<div class="card-header">
<h4>۵ تا از برترین کالاها</h4>
<div class="card-header-action dropdown">
<a href="#" data-toggle="dropdown" class="btn btn-danger dropdown-toggle">ماهانه</a>
<ul class="dropdown-menu dropdown-menu-sm dropdown-menu-left text-center p-0">
<li class="dropdown-title">انتخاب بازه زمانی</li>
<li><a href="#" class="dropdown-item">روز</a></li>
<li><a href="#" class="dropdown-item">هفته</a></li>
<li><a href="#" class="dropdown-item active">ماه</a></li>
<li><a href="#" class="dropdown-item">امسال</a></li>
</ul>
</div>
</div>
<div class="card-body" id="top-5-scroll">
<ul class="list-unstyled list-unstyled-border text-right p-0">
<li class="media">
<img class="ml-3 rounded" width="55" src="../assets/img/products/product-3-50.png" alt="product">
<div class="media-body">
<div class="float-left"><div class="font-weight-600 text-muted text-small">۸۶ فروش</div></div>
<div class="media-title">آیفون S9 پلاس</div>
<div class="mt-1">
<div class="budget-price">
<div class="budget-price-square bg-primary" data-width="64%"></div>
<div class="budget-price-label">$۶۸,۷۱۴</div>
</div>
<div class="budget-price">
<div class="budget-price-square bg-danger" data-width="43%"></div>
<div class="budget-price-label">$۳۸,۷۰۰</div>
</div>
</div>
</div>
</li>
<li class="media">
<img class="ml-3 rounded" width="55" src="../assets/img/products/product-4-50.png" alt="product">
<div class="media-body">
<div class="float-left"><div class="font-weight-600 text-muted text-small">۶۷ فروش</div></div>
<div class="media-title">iBook Pro 2019</div>
<div class="mt-1">
<div class="budget-price">
<div class="budget-price-square bg-primary" data-width="84%"></div>
<div class="budget-price-label">$۱۰۷,۱۳۵</div>
</div>
<div class="budget-price">
<div class="budget-price-square bg-danger" data-width="60%"></div>
<div class="budget-price-label">$۹۱,۴۵۵</div>
</div>
</div>
</div>
</li>
<li class="media">
<img class="ml-3 rounded" width="55" src="../assets/img/products/product-1-50.png" alt="product">
<div class="media-body">
<div class="float-left"><div class="font-weight-600 text-muted text-small">۶۳ فروش</div></div>
<div class="media-title">هدفون Beats</div>
<div class="mt-1">
<div class="budget-price">
<div class="budget-price-square bg-primary" data-width="34%"></div>
<div class="budget-price-label">$۳,۷۱۷</div>
</div>
<div class="budget-price">
<div class="budget-price-square bg-danger" data-width="28%"></div>
<div class="budget-price-label">$۲,۸۳۵</div>
</div>
</div>
</div>
</li>
<li class="media">
<img class="ml-3 rounded" width="55" src="../assets/img/products/product-3-50.png" alt="product">
<div class="media-body">
<div class="float-left"><div class="font-weight-600 text-muted text-small">28 Sales</div></div>
<div class="media-title">آیفون لایت</div>
<div class="mt-1">
<div class="budget-price">
<div class="budget-price-square bg-primary" data-width="45%"></div>
<div class="budget-price-label">$۱۳,۹۷۲</div>
</div>
<div class="budget-price">
<div class="budget-price-square bg-danger" data-width="30%"></div>
<div class="budget-price-label">$۹,۶۶۰</div>
</div>
</div>
</div>
</li>
<li class="media">
<img class="ml-3 rounded" width="55" src="../assets/img/products/product-5-50.png" alt="product">
<div class="media-body">
<div class="float-left"><div class="font-weight-600 text-muted text-small">19 Sales</div></div>
<div class="media-title">دوربین عکاسی</div>
<div class="mt-1">
<div class="budget-price">
<div class="budget-price-square bg-primary" data-width="35%"></div>
<div class="budget-price-label">$۷,۳۹۱</div>
</div>
<div class="budget-price">
<div class="budget-price-square bg-danger" data-width="28%"></div>
<div class="budget-price-label">$۵,۴۷۲</div>
</div>
</div>
</div>
</li>
</ul>
</div>
<div class="card-footer pt-3 d-flex justify-content-center">
<div class="budget-price justify-content-center">
<div class="budget-price-square bg-primary" data-width="20"></div>
<div class="budget-price-label">مبلغ فروش</div>
</div>
<div class="budget-price justify-content-center">
<div class="budget-price-square bg-danger" data-width="20"></div>
<div class="budget-price-label">ضرر برگشت کالا</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="card">
<div class="card-header">
<h4>بهترین محصولات</h4>
</div>
<div class="card-body">
<div class="owl-carousel owl-theme" id="products-carousel">
<div>
<div class="product-item pb-3">
<div class="product-image">
<img alt="image" src="../assets/img/products/product-4-50.png" class="img-fluid">
</div>
<div class="product-details">
<div class="product-name">مک بوک ۲۰۱۹</div>
<div class="product-review">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
<div class="text-muted text-small">۶۷ فروش</div>
<div class="product-cta">
<a href="#" class="btn btn-primary">جزئیات</a>
</div>
</div>
</div>
</div>
<div>
<div class="product-item">
<div class="product-image">
<img alt="image" src="../assets/img/products/product-3-50.png" class="img-fluid">
</div>
<div class="product-details">
<div class="product-name">آیفون 5S</div>
<div class="product-review">
<i class="fas fa-star-half"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
<div class="text-muted text-small">۸۶ فروش</div>
<div class="product-cta">
<a href="#" class="btn btn-primary">توضیحات</a>
</div>
</div>
</div>
</div>
<div>
<div class="product-item">
<div class="product-image">
<img alt="image" src="../assets/img/products/product-1-50.png" class="img-fluid">
</div>
<div class="product-details">
<div class="product-name">هدفون Beats</div>
<div class="product-review">
<i class="far fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
<div class="text-muted text-small">۶۳ فروش</div>
<div class="product-cta">
<a href="#" class="btn btn-primary">توضیحات</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card">
<div class="card-header">
<h4>کشورهای برتر</h4>
</div>
<div class="card-body text-right">
<div class="row">
<div class="col-sm-6">
<div class="text-title mb-2">مرداد</div>
<ul class="list-unstyled list-unstyled-border list-unstyled-noborder mb-0 p-0">
<li class="media">
<img class="img-fluid mt-1 img-shadow" src="../assets/modules/flag-icon-css/flags/4x3/id.svg" alt="image" width="40">
<div class="media-body mr-3">
<div class="media-title">اندونزی</div>
<div class="text-small text-muted">۳,۲۸۶ <i class="fas fa-caret-down text-danger"></i></div>
</div>
</li>
<li class="media">
<img class="img-fluid mt-1 img-shadow" src="../assets/modules/flag-icon-css/flags/4x3/my.svg" alt="image" width="40">
<div class="media-body mr-3">
<div class="media-title">مالزی</div>
<div class="text-small text-muted">۵,۶۴۸ <i class="fas fa-caret-down text-danger"></i></div>
</div>
</li>
<li class="media">
<img class="img-fluid mt-1 img-shadow" src="../assets/modules/flag-icon-css/flags/4x3/us.svg" alt="image" width="40">
<div class="media-body mr-3">
<div class="media-title">ایالات متحده</div>
<div class="text-small text-muted">۱,۵۷۶ <i class="fas fa-caret-up text-success"></i></div>
</div>
</li>
</ul>
</div>
<div class="col-sm-6 mt-sm-0 mt-4">
<div class="text-title mb-2">شهریور</div>
<ul class="list-unstyled list-unstyled-border list-unstyled-noborder mb-0 p-0">
<li class="media">
<img class="img-fluid mt-1 img-shadow" src="../assets/modules/flag-icon-css/flags/4x3/id.svg" alt="image" width="40">
<div class="media-body mr-3">
<div class="media-title">اندونزی</div>
<div class="text-small text-muted">۱,۴۸۶ <i class="fas fa-caret-up text-success"></i></div>
</div>
</li>
<li class="media">
<img class="img-fluid mt-1 img-shadow" src="../assets/modules/flag-icon-css/flags/4x3/ps.svg" alt="image" width="40">
<div class="media-body mr-3">
<div class="media-title">ایران</div>
<div class="text-small text-muted">۳,۱۸۲ <i class="fas fa-caret-up text-success"></i></div>
</div>
</li>
<li class="media">
<img class="img-fluid mt-1 img-shadow" src="../assets/modules/flag-icon-css/flags/4x3/de.svg" alt="image" width="40">
<div class="media-body mr-3">
<div class="media-title">آلمان</div>
<div class="text-small text-muted">۵,۶۵۴ <i class="fas fa-caret-down text-danger"></i></div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-8">
<div class="card">
<div class="card-header">
<h4>صورتحساب ها</h4>
<div class="card-header-action">
<a href="#" class="btn btn-danger"> مشاهده همه <i class="fas fa-chevron-left"></i></a>
</div>
</div>
<div class="card-body p-0">
<div class="table-responsive table-invoice text-right">
<table class="table table-striped">
<tr>
<th>شماره صورتحساب</th>
<th>مشتری</th>
<th>وضعیت</th>
<th>تاریخ سررسید</th>
<th>عملیات</th>
</tr>
<tr>
<td><a href="#">BMI-87239</a></td>
<td class="font-weight-600">مهدی خانزادی</td>
<td><div class="badge badge-warning">پرداخت نشده</div></td>
<td>۱۹ مرداد, ۱۳۹۸</td>
<td>
<a href="#" class="btn btn-primary">مشاهده جزئیات</a>
</td>
</tr>
<tr>
<td><a href="#">BMI-48574</a></td>
<td class="font-weight-600">مهیار انصاری</td>
<td><div class="badge badge-success">پرداخت شده</div></td>
<td>۲۵ مرداد, ۱۳۹۸</td>
<td>
<a href="#" class="btn btn-primary">مشاهده جزئیات</a>
</td>
</tr>
<tr>
<td><a href="#">BMI-76824</a></td>
<td class="font-weight-600">هاشم مقدری</td>
<td><div class="badge badge-warning">پرداخت نشده</div></td>
<td>۲۵ فروردین, ۱۳۹۸</td>
<td>
<a href="#" class="btn btn-primary">مشاهده جزئیات</a>
</td>
</tr>
<tr>
<td><a href="#">BMI-84990</a></td>
<td class="font-weight-600">علی نظری</td>
<td><div class="badge badge-warning">پرداخت شده</div></td>
<td>۲۵ مرداد, ۱۳۹۸</td>
<td>
<a href="#" class="btn btn-primary">مشاهده جزئیات</a>
</td>
</tr>
<tr>
<td><a href="#">BMI-87320</a></td>
<td class="font-weight-600">محمدرضا ملک</td>
<td><div class="badge badge-success">پرداخت نشده</div></td>
<td>۲۵ مرداد, ۱۳۹۸</td>
<td>
<a href="#" class="btn btn-primary">مشاهده جزئیات</a>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card card-hero">
<div class="card-header text-right">
<div class="card-icon">
<i class="far fa-question-circle"></i>
</div>
<h4>۱۴</h4>
<div class="card-description">تیکت های ارسال شده</div>
</div>
<div class="card-body p-0 text-right">
<div class="tickets-list">
<a href="#" class="ticket-item">
<div class="ticket-title">
<h4>سفارش من هنوز ارسال نشده؟</h4>
</div>
<div class="ticket-info">
<div>علی عباسی</div>
<div class="bullet"></div>
<div class="text-primary">۱ دقیقه قبل</div>
</div>
</a>
<a href="#" class="ticket-item">
<div class="ticket-title">
<h4>لطفا سفارش من رو لغو کنید</h4>
</div>
<div class="ticket-info">
<div>عاطفه سویضی</div>
<div class="bullet"></div>
<div>دو ساعت پیش</div>
</div>
</a>
<a href="#" class="ticket-item">
<div class="ticket-title">
<h4>فشارسنجی که فرستادید شکسته بود</h4>
</div>
<div class="ticket-info">
<div>هاشم مقدری</div>
<div class="bullet"></div>
<div>۶ ساعت پیش</div>
</div>
</a>
<a href="features-tickets.html" class="ticket-item ticket-more">
نمایش همه <i class="fas fa-chevron-left"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<footer class="main-footer">
<div class="footer-left">
Copyright &copy; 2018 <div class="bullet"></div> Design By <a href="https://nauval.in/">Muhamad Nauval Azhar</a>
</div>
<div class="footer-right">
</div>
</footer>
</div>
</div>
<!-- General JS Scripts -->
<script src="../assets/modules/jquery.min.js"></script>
<script src="../assets/modules/popper.js"></script>
<script src="../assets/modules/tooltip.js"></script>
<script src="../assets/modules/bootstrap/js/bootstrap.min.js"></script>
<script src="../assets/modules/nicescroll/jquery.nicescroll.min.js"></script>
<script src="../assets/modules/moment.min.js"></script>
<script src="../assets/js/stisla.js"></script>
<!-- JS Libraies -->
<script src="../assets/modules/jquery.sparkline.min.js"></script>
<script src="../assets/modules/chart.min.js"></script>
<script src="../assets/modules/owlcarousel2/dist/owl.carousel.min.js"></script>
<script src="../assets/modules/summernote/summernote-bs4.js"></script>
<script src="../assets/modules/chocolat/dist/js/jquery.chocolat.min.js"></script>
<!-- Page Specific JS File -->
<script src="../assets/js/page/index.js"></script>
<!-- Template JS File -->
<script src="../assets/js/scripts.js"></script>
<script src="../assets/js/custom.js"></script>
</body>
</html>

441
dev/rtl/layout-default.html Normal file
View File

@@ -0,0 +1,441 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no" name="viewport">
<title>Layout &rsaquo; Default &mdash; Stisla</title>
<!-- General CSS Files -->
<link rel="stylesheet" href="../assets/modules/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="../assets/modules/fontawesome/css/all.min.css">
<!-- CSS Libraries -->
<!-- Template CSS -->
<link rel="stylesheet" href="../assets/css/style.css">
<link rel="stylesheet" href="../assets/css/components.css">
<link rel="stylesheet" href="../assets/css/rtl.css">
</head>
<body>
<div id="app">
<div class="main-wrapper main-wrapper-1">
<div class="navbar-bg"></div>
<nav class="navbar navbar-expand-lg main-navbar">
<form class="form-inline ml-auto">
<ul class="navbar-nav ml-3">
<li><a href="#" data-toggle="sidebar" class="nav-link nav-link-lg"><i class="fas fa-bars"></i></a></li>
<li><a href="#" data-toggle="search" class="nav-link nav-link-lg d-sm-none"><i class="fas fa-search"></i></a></li>
</ul>
<div class="search-element text-right">
<input class="form-control" type="search" placeholder="جستجو" aria-label="Search" data-width="250">
<button class="btn" type="submit"><i class="fas fa-search"></i></button>
<div class="search-backdrop"></div>
<div class="search-result">
<div class="search-header">
نتیجه جستجو
</div>
<div class="search-item">
<a href="#">چگونه ناسا رو هک کنیم؟</a>
<a href="#" class="search-close"><i class="fas fa-times"></i></a>
</div>
<div class="search-item">
<a href="#">Kodinger.com</a>
<a href="#" class="search-close"><i class="fas fa-times"></i></a>
</div>
<div class="search-item">
<a href="#">پنل مدیریت</a>
<a href="#" class="search-close"><i class="fas fa-times"></i></a>
</div>
<div class="search-header">
نتایج
</div>
<div class="search-item">
<a href="#">
<img class="ml-3 rounded" width="30" src="../assets/img/products/product-3-50.png" alt="product">
آیفون s9 تولید شد
</a>
</div>
<div class="search-item">
<a href="#">
<img class="ml-3 rounded" width="30" src="../assets/img/products/product-2-50.png" alt="product">
چه شادی هایی که زیر پای انسانها سرکوب شدند
</a>
</div>
<div class="search-item">
<a href="#">
<img class="ml-3 rounded" width="30" src="../assets/img/products/product-1-50.png" alt="product">
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ.
</a>
</div>
<div class="search-header">
پروژه ها
</div>
<div class="search-item">
<a href="#">
<div class="search-icon bg-danger text-white ml-3">
<i class="fas fa-code"></i>
</div>
متریال ادمین پنل
</a>
</div>
<div class="search-item">
<a href="#">
<div class="search-icon bg-primary text-white ml-3">
<i class="fas fa-laptop"></i>
</div>
ایجاد صفحه لندینگ
</a>
</div>
</div>
</div>
</form>
<ul class="navbar-nav navbar-right">
<li class="dropdown dropdown-list-toggle"><a href="#" data-toggle="dropdown" class="nav-link nav-link-lg message-toggle beep"><i class="far fa-envelope"></i></a>
<div class="dropdown-menu dropdown-list text-right dropdown-menu-left">
<div class="dropdown-header">پیام ها
<div class="float-left">
<a href="#">علامتگذاری همه بصورت خوانده شده</a>
</div>
</div>
<div class="dropdown-list-content dropdown-list-message">
<a href="#" class="dropdown-item dropdown-item-unread">
<div class="dropdown-item-avatar">
<img alt="image" src="../assets/img/avatar/avatar-1.png" class="rounded-circle">
<div class="is-online"></div>
</div>
<div class="dropdown-item-desc text-right">
<b>مهدی خانزادی</b>
<p>سلام داداچ!</p>
<div class="time">۱۰ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item dropdown-item-unread">
<div class="dropdown-item-avatar">
<img alt="image" src="../assets/img/avatar/avatar-2.png" class="rounded-circle">
</div>
<div class="dropdown-item-desc">
<b>مهیار انصاری</b>
<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ.</p>
<div class="time">۱۲ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item dropdown-item-unread">
<div class="dropdown-item-avatar">
<img alt="image" src="../assets/img/avatar/avatar-3.png" class="rounded-circle">
<div class="is-online"></div>
</div>
<div class="dropdown-item-desc">
<b>آمیتا پاچان</b>
<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ.</p>
<div class="time">۱۲ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-avatar">
<img alt="image" src="../assets/img/avatar/avatar-4.png" class="rounded-circle">
</div>
<div class="dropdown-item-desc">
<b>مهدی خانزادی</b>
<p>سلام سیستم پشتیبانی پاترونیک رو استفاده کنید</p>
<div class="time">۱۶ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-avatar">
<img alt="image" src="../assets/img/avatar/avatar-5.png" class="rounded-circle">
</div>
<div class="dropdown-item-desc">
<b>لورم ایپسوم</b>
<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ.</p>
<div class="time">دیروز</div>
</div>
</a>
</div>
<div class="dropdown-footer text-center">
<a href="#"> دیدن همه پیام ها<i class="fas fa-chevron-left"></i></a>
</div>
</div>
</li>
<li class="dropdown dropdown-list-toggle"><a href="#" data-toggle="dropdown" class="nav-link notification-toggle nav-link-lg beep"><i class="far fa-bell"></i></a>
<div class="dropdown-menu dropdown-list dropdown-menu-left">
<div class="dropdown-header text-right">نوتیفیکیشن ها
<div class="float-left">
<a href="#"> علامتگذاری همه بصورت خوانده شده</a>
</div>
</div>
<div class="dropdown-list-content dropdown-list-icons text-right">
<a href="#" class="dropdown-item dropdown-item-unread">
<div class="dropdown-item-icon bg-primary text-white">
<i class="fas fa-code"></i>
</div>
<div class="dropdown-item-desc">
قالب مدیریتی متریال اپدیت جدید داد!
<div class="time text-primary">۲ دقیقه پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-icon bg-info text-white">
<i class="far fa-user"></i>
</div>
<div class="dropdown-item-desc">
<b>شما</b> و <b>مهیار انصاری</b> هم اکنون همکار هستید.
<div class="time">۱۰ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-icon bg-success text-white">
<i class="fas fa-check"></i>
</div>
<div class="dropdown-item-desc">
<b>مهدی خانزادی</b> اطلاعات مرتبط با <b>قالب</b> را <b>آپلود کرد.</b>
<div class="time">۱۲ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-icon bg-danger text-white">
<i class="fas fa-exclamation-triangle"></i>
</div>
<div class="dropdown-item-desc">
فضای هارد دیسک پر شده است لطفا آن را خالی کنید.
<div class="time">۱۷ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-icon bg-info text-white">
<i class="fas fa-bell"></i>
</div>
<div class="dropdown-item-desc">
به قالب متریال خوش آمدید
<div class="time">دیروز</div>
</div>
</a>
</div>
<div class="dropdown-footer text-center">
<a href="#">
<span>نمایش همه</span>
<i class="fas fa-chevron-left"></i>
</a>
</div>
</div>
</li>
<li class="dropdown"><a href="#" data-toggle="dropdown" class="nav-link dropdown-toggle nav-link-lg nav-link-user">
<img alt="image" src="../assets/img/avatar/avatar-1.png" class="rounded-circle mr-1">
<div class="d-sm-none d-lg-inline-block">سلام مهدی</div></a>
<div class="dropdown-menu dropdown-menu-right text-right">
<div class="dropdown-title text-center">۵ دقیقه پیش لاگین کردین</div>
<a href="features-profile.html" class="dropdown-item has-icon">
<span>پروفایل</span>
<i class="far fa-user"></i>
</a>
<a href="features-activities.html" class="dropdown-item has-icon">
<span>فعالیت ها</span>
<i class="fas fa-bolt"></i>
</a>
<a href="features-settings.html" class="dropdown-item has-icon">
<span>تنظیمات</span>
<i class="fas fa-cog"></i>
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item has-icon text-danger">
<span>خروج</span>
<i class="fas fa-sign-out-alt"></i>
</a>
</div>
</li>
</ul>
</nav>
<div class="main-sidebar sidebar-style-2">
<aside id="sidebar-wrapper">
<div class="sidebar-brand">
<a href="index.html">مدیریت پاترونیک</a>
</div>
<div class="sidebar-brand sidebar-brand-sm">
<a href="index.html">مدیریت فروش</a>
</div>
<ul class="sidebar-menu">
<li class="menu-header">داشبورد</li>
<li class="dropdown active">
<a href="#" class="nav-link has-dropdown"><i class="fas fa-fire"></i><span>داشبورد</span></a>
<ul class="dropdown-menu">
<li class=active><a class="nav-link" href="index-0.html">داشبورد عمومی</a></li>
<li><a class="nav-link" href="index.html">داشبورد فروش محصولات</a></li>
</ul>
</li>
<li class="menu-header">امکانات بیشتر</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown" data-toggle="dropdown"><i class="fas fa-columns"></i> <span>صفحه بندی</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="layout-default.html">حالت پیش فرض</a></li>
<li><a class="nav-link" href="layout-transparent.html">سایدبار بدون رنگ</a></li>
<li><a class="nav-link" href="layout-top-navigation.html">نویگیشن بالا</a></li>
</ul>
</li>
<li><a class="nav-link" href="blank.html"><i class="far fa-square"></i> <span>صفحه خالی</span></a></li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="fas fa-th"></i> <span>بوت استرپ</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="bootstrap-alert.html">آلرت</a></li>
<li><a class="nav-link" href="bootstrap-badge.html">بدج</a></li>
<li><a class="nav-link" href="bootstrap-breadcrumb.html">بردکرامپ</a></li>
<li><a class="nav-link" href="bootstrap-buttons.html">دکمه ها</a></li>
<li><a class="nav-link" href="bootstrap-card.html">کارت</a></li>
<li><a class="nav-link" href="bootstrap-carousel.html">کروسل</a></li>
<li><a class="nav-link" href="bootstrap-collapse.html">کولاپس</a></li>
<li><a class="nav-link" href="bootstrap-dropdown.html">دراپ دون</a></li>
<li><a class="nav-link" href="bootstrap-form.html">فرم</a></li>
<li><a class="nav-link" href="bootstrap-list-group.html">لیست گروه</a></li>
<li><a class="nav-link" href="bootstrap-media-object.html">مدیا ابجکت</a></li>
<li><a class="nav-link" href="bootstrap-modal.html">مودال</a></li>
<li><a class="nav-link" href="bootstrap-nav.html">نویگیشن</a></li>
<li><a class="nav-link" href="bootstrap-navbar.html">نوبار</a></li>
<li><a class="nav-link" href="bootstrap-pagination.html">پجینیشن</a></li>
<li><a class="nav-link" href="bootstrap-popover.html">پاپ اور</a></li>
<li><a class="nav-link" href="bootstrap-progress.html">پراگرس</a></li>
<li><a class="nav-link" href="bootstrap-table.html">جدول</a></li>
<li><a class="nav-link" href="bootstrap-tooltip.html">تولتیپ</a></li>
<li><a class="nav-link" href="bootstrap-typography.html">تایپوگرافی</a></li>
</ul>
</li>
<li class="menu-header">امکانات دیگر</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="fas fa-th-large"></i> <span>کامپوننت ها</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="components-gallery.html">گالری</a></li>
<li><a class="nav-link" href="components-multiple-upload.html">مولتی آپلود</a></li>
<li><a class="nav-link" href="components-tab.html">تب</a></li>
<li><a class="nav-link" href="components-table.html">جدول</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="far fa-file-alt"></i> <span>فرم ها</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="forms-advanced-form.html">فرم پیشرفته</a></li>
<li><a class="nav-link" href="forms-editor.html">ویرایشگر</a></li>
<li><a class="nav-link" href="forms-validation.html">ولیدیشن</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="fas fa-plug"></i> <span>ماژول ها</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="modules-calendar.html">تقویم</a></li>
<li><a class="nav-link" href="modules-chartjs.html">چارت ها</a></li>
<li><a class="nav-link" href="modules-datatables.html">دیتاتیبل</a></li>
<li><a class="nav-link" href="modules-flag.html">پرچم</a></li>
<li><a class="nav-link" href="modules-font-awesome.html">فونت اوسوم</a></li>
<li><a class="nav-link" href="modules-ion-icons.html">ای او ن ایکون</a></li>
<li><a class="nav-link" href="modules-owl-carousel.html">اول کراسول</a></li>
<li><a class="nav-link" href="modules-sparkline.html">اسپارک لاین</a></li>
<li><a class="nav-link" href="modules-sweet-alert.html">سویت الرت</a></li>
<li><a class="nav-link" href="modules-toastr.html">توستر</a></li>
<li><a class="nav-link" href="modules-vector-map.html">وکتور مپ</a></li>
<li><a class="nav-link" href="modules-weather-icon.html">ایکن اب و هوا</a></li>
</ul>
</li>
<li class="menu-header">صفحات</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="far fa-user"></i> <span>ثبت نام</span></a>
<ul class="dropdown-menu">
<li><a href="auth-forgot-password.html">فراموشی کلمه عبور</a></li>
<li><a href="auth-login.html">لاگین</a></li>
<li><a href="auth-register.html">ثبت نام</a></li>
<li><a href="auth-reset-password.html">بازیابی کلمه عبور</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="fas fa-exclamation"></i> <span>خطاها</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="errors-503.html">503</a></li>
<li><a class="nav-link" href="errors-403.html">403</a></li>
<li><a class="nav-link" href="errors-404.html">404</a></li>
<li><a class="nav-link" href="errors-500.html">500</a></li>
</ul>
</li>
<li><a class="nav-link" href="credits.html"><i class="fas fa-pencil-ruler"></i> <span>سازنده ها</span></a></li>
</ul>
<div class="mt-4 mb-4 p-3 hide-sidebar-mini">
<a href="https://getstisla.com/docs" class="btn btn-primary btn-lg btn-block btn-icon-split">
<i class="fas fa-rocket"></i> مستندات قالب
</a>
</div>
</aside>
</div>
<!-- Main Content -->
<div class="main-content">
<section class="section">
<div class="section-header">
<h1>حالت پیش فرض</h1>
<div class="section-header-breadcrumb">
<div class="breadcrumb-item active"><a href="#">داشبورد</a></div>
<div class="breadcrumb-item"><a href="#">صفحه بندی</a></div>
<div class="breadcrumb-item">حالت پیش فرض</div>
</div>
</div>
<div class="section-body text-right">
<h2 class="section-title">این یک نمونه صفحه است</h2>
<p class="section-lead">این یک صفحه نمونه است تا بتوانید صفحه ی مورد نظر خودتون رو باهاش بسازید.</p>
<div class="card">
<div class="card-header">
<h4>کارت نمونه</h4>
</div>
<div class="card-body">
<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ
هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی در
شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و
متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای
طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان
فارسی ایجاد کرد. در این صورت می توان امید داشت که تمام و دشواری
موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد و زمان مورد
نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل
دنیای موجود طراحی اساسا مورد استفاده قرار گیرد. لورم ایپسوم
متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده
از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در
ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد
نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان
جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را
برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در
زبان فارسی ایجاد کرد. در این صورت می توان امید داشت که تمام و
دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد
و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات
پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد. </p>
</div>
<div class="card-footer bg-whitesmoke">
خعلی خب اینم از فوتر کارت
</div>
</div>
</div>
</section>
</div>
<footer class="main-footer">
<div class="footer-left">
Copyright &copy; 2018 <div class="bullet"></div> Design By <a href="https://nauval.in/">Muhamad Nauval Azhar</a>
</div>
<div class="footer-right">
</div>
</footer>
</div>
</div>
<!-- General JS Scripts -->
<script src="../assets/modules/jquery.min.js"></script>
<script src="../assets/modules/popper.js"></script>
<script src="../assets/modules/tooltip.js"></script>
<script src="../assets/modules/bootstrap/js/bootstrap.min.js"></script>
<script src="../assets/modules/nicescroll/jquery.nicescroll.min.js"></script>
<script src="../assets/modules/moment.min.js"></script>
<script src="../assets/js/stisla.js"></script>
<!-- JS Libraies -->
<!-- Page Specific JS File -->
<!-- Template JS File -->
<script src="../assets/js/scripts.js"></script>
<script src="../assets/js/custom.js"></script>
</body>
</html>

View File

@@ -0,0 +1,373 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no" name="viewport">
<title>Layout &rsaquo; Top Navigation &mdash; Stisla</title>
<!-- General CSS Files -->
<link rel="stylesheet" href="../assets/modules/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="../assets/modules/fontawesome/css/all.min.css">
<!-- CSS Libraries -->
<!-- Template CSS -->
<link rel="stylesheet" href="../assets/css/style.css">
<link rel="stylesheet" href="../assets/css/components.css">
<link rel="stylesheet" href="../assets/css/rtl.css">
</head>
<body class="layout-3">
<div id="app">
<div class="main-wrapper container">
<div class="navbar-bg"></div>
<nav class="navbar navbar-expand-lg main-navbar">
<a href="index-0.html" class="navbar-brand sidebar-gone-hide">پاترونیک</a>
<a href="#" class="nav-link sidebar-gone-show" data-toggle="sidebar"><i class="fas fa-bars"></i></a>
<div class="nav-collapse">
<a class="sidebar-gone-show nav-collapse-toggle nav-link" href="#">
<i class="fas fa-ellipsis-v"></i>
</a>
<ul class="navbar-nav">
<li class="nav-item active"><a href="#" class="nav-link">اپلیکیشن</a></li>
<li class="nav-item"><a href="#" class="nav-link">گزارش خطا</a></li>
<li class="nav-item"><a href="#" class="nav-link">وضعیت سرور</a></li>
</ul>
</div>
<form class="form-inline mr-auto">
<ul class="navbar-nav">
<li><a href="#" data-toggle="search" class="nav-link nav-link-lg d-sm-none"><i class="fas fa-search"></i></a></li>
</ul>
<div class="search-element text-right">
<input class="form-control" type="search" placeholder="جستجو" aria-label="Search" data-width="250" style="width: 250px;">
<button class="btn" type="submit"><i class="fas fa-search"></i></button>
<div class="search-backdrop"></div>
<div class="search-result">
<div class="search-header">
نتیجه جستجو
</div>
<div class="search-item">
<a href="#">چگونه ناسا رو هک کنیم؟</a>
<a href="#" class="search-close"><i class="fas fa-times"></i></a>
</div>
<div class="search-item">
<a href="#">Kodinger.com</a>
<a href="#" class="search-close"><i class="fas fa-times"></i></a>
</div>
<div class="search-item">
<a href="#">پنل مدیریت</a>
<a href="#" class="search-close"><i class="fas fa-times"></i></a>
</div>
<div class="search-header">
نتایج
</div>
<div class="search-item">
<a href="#">
<img class="ml-3 rounded" width="30" src="../assets/img/products/product-3-50.png" alt="product">
آیفون s9 تولید شد
</a>
</div>
<div class="search-item">
<a href="#">
<img class="ml-3 rounded" width="30" src="../assets/img/products/product-2-50.png" alt="product">
چه شادی هایی که زیر پای انسانها سرکوب شدند
</a>
</div>
<div class="search-item">
<a href="#">
<img class="ml-3 rounded" width="30" src="../assets/img/products/product-1-50.png" alt="product">
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ.
</a>
</div>
<div class="search-header">
پروژه ها
</div>
<div class="search-item">
<a href="#">
<div class="search-icon bg-danger text-white ml-3">
<i class="fas fa-code"></i>
</div>
متریال ادمین پنل
</a>
</div>
<div class="search-item">
<a href="#">
<div class="search-icon bg-primary text-white ml-3">
<i class="fas fa-laptop"></i>
</div>
ایجاد صفحه لندینگ
</a>
</div>
</div>
</div>
</form>
<ul class="navbar-nav navbar-right">
<li class="dropdown dropdown-list-toggle"><a href="#" data-toggle="dropdown" class="nav-link nav-link-lg message-toggle beep"><i class="far fa-envelope"></i></a>
<div class="dropdown-menu dropdown-list dropdown-menu-right text-right">
<div class="dropdown-header">پیام ها
<div class="float-left">
<a href="#">علامتگذاری همه بصورت خوانده شده</a>
</div>
</div>
<div class="dropdown-list-content dropdown-list-message">
<a href="#" class="dropdown-item dropdown-item-unread">
<div class="dropdown-item-avatar">
<img alt="image" src="../assets/img/avatar/avatar-1.png" class="rounded-circle">
<div class="is-online"></div>
</div>
<div class="dropdown-item-desc text-right">
<b>مهدی خانزادی</b>
<p>سلام داداچ!</p>
<div class="time">۱۰ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item dropdown-item-unread">
<div class="dropdown-item-avatar">
<img alt="image" src="../assets/img/avatar/avatar-2.png" class="rounded-circle">
</div>
<div class="dropdown-item-desc">
<b>مهیار انصاری</b>
<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ.</p>
<div class="time">۱۲ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item dropdown-item-unread">
<div class="dropdown-item-avatar">
<img alt="image" src="../assets/img/avatar/avatar-3.png" class="rounded-circle">
<div class="is-online"></div>
</div>
<div class="dropdown-item-desc">
<b>آمیتا پاچان</b>
<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ.</p>
<div class="time">۱۲ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-avatar">
<img alt="image" src="../assets/img/avatar/avatar-4.png" class="rounded-circle">
</div>
<div class="dropdown-item-desc">
<b>مهدی خانزادی</b>
<p>سلام سیستم پشتیبانی پاترونیک رو استفاده کنید</p>
<div class="time">۱۶ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-avatar">
<img alt="image" src="../assets/img/avatar/avatar-5.png" class="rounded-circle">
</div>
<div class="dropdown-item-desc">
<b>لورم ایپسوم</b>
<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ.</p>
<div class="time">دیروز</div>
</div>
</a>
</div>
<div class="dropdown-footer text-center">
<a href="#"> دیدن همه پیام ها<i class="fas fa-chevron-left"></i></a>
</div>
</div>
</li>
<li class="dropdown dropdown-list-toggle"><a href="#" data-toggle="dropdown" class="nav-link notification-toggle nav-link-lg beep"><i class="far fa-bell"></i></a>
<div class="dropdown-menu dropdown-list dropdown-menu-right">
<div class="dropdown-header text-right">نوتیفیکیشن ها
<div class="float-left">
<a href="#"> علامتگذاری همه بصورت خوانده شده</a>
</div>
</div>
<div class="dropdown-list-content dropdown-list-icons text-right">
<a href="#" class="dropdown-item dropdown-item-unread">
<div class="dropdown-item-icon bg-primary text-white">
<i class="fas fa-code"></i>
</div>
<div class="dropdown-item-desc">
قالب مدیریتی متریال اپدیت جدید داد!
<div class="time text-primary">۲ دقیقه پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-icon bg-info text-white">
<i class="far fa-user"></i>
</div>
<div class="dropdown-item-desc">
<b>شما</b> و <b>مهیار انصاری</b> هم اکنون همکار هستید.
<div class="time">۱۰ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-icon bg-success text-white">
<i class="fas fa-check"></i>
</div>
<div class="dropdown-item-desc">
<b>مهدی خانزادی</b> اطلاعات مرتبط با <b>قالب</b> را <b>آپلود کرد.</b>
<div class="time">۱۲ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-icon bg-danger text-white">
<i class="fas fa-exclamation-triangle"></i>
</div>
<div class="dropdown-item-desc">
فضای هارد دیسک پر شده است لطفا آن را خالی کنید.
<div class="time">۱۷ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-icon bg-info text-white">
<i class="fas fa-bell"></i>
</div>
<div class="dropdown-item-desc">
به قالب متریال خوش آمدید
<div class="time">دیروز</div>
</div>
</a>
</div>
<div class="dropdown-footer text-center">
<a href="#">
<span>نمایش همه</span>
<i class="fas fa-chevron-left"></i>
</a>
</div>
</div>
</li>
<li class="dropdown"><a href="#" data-toggle="dropdown" class="nav-link dropdown-toggle nav-link-lg nav-link-user">
<img alt="image" src="../assets/img/avatar/avatar-1.png" class="rounded-circle mr-1">
<div class="d-sm-none d-lg-inline-block">سلام مهدی</div></a>
<div class="dropdown-menu dropdown-menu-right text-right">
<div class="dropdown-title text-center">۵ دقیقه پیش لاگین کردین</div>
<a href="features-profile.html" class="dropdown-item has-icon">
<span>پروفایل</span>
<i class="far fa-user"></i>
</a>
<a href="features-activities.html" class="dropdown-item has-icon">
<span>فعالیت ها</span>
<i class="fas fa-bolt"></i>
</a>
<a href="features-settings.html" class="dropdown-item has-icon">
<span>تنظیمات</span>
<i class="fas fa-cog"></i>
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item has-icon text-danger">
<span>خروج</span>
<i class="fas fa-sign-out-alt"></i>
</a>
</div>
</li>
</ul>
</nav>
<nav class="navbar navbar-secondary navbar-expand-lg">
<div class="container">
<ul class="navbar-nav text-right">
<li class="nav-item dropdown">
<a href="#" data-toggle="dropdown" class="nav-link has-dropdown"><i class="fas fa-fire"></i><span>داشبورد</span></a>
<ul class="dropdown-menu dropdown-menu-left text-right">
<li class="nav-item"><a href="index-0.html" class="nav-link">داشبورد عمومی</a></li>
<li class="nav-item"><a href="index.html" class="nav-link">داشبورد تجاری</a></li>
</ul>
</li>
<li class="nav-item active">
<a href="#" class="nav-link"><i class="far fa-heart"></i><span>تاپ نویگیشن</span></a>
</li>
<li class="nav-item dropdown">
<a href="#" data-toggle="dropdown" class="nav-link has-dropdown"><i class="far fa-clone"></i><span>منوی دراپ دان</span></a>
<ul class="dropdown-menu dropdown-menu-left text-right">
<li class="nav-item"><a href="#" class="nav-link">یه لینک ساده</a></li>
<li class="nav-item dropdown"><a href="#" class="nav-link has-dropdown">زیر منو دارم!</a>
<ul class="dropdown-menu dropdown-menu-left text-right">
<li class="nav-item"><a href="#" class="nav-link">لینک</a></li>
<li class="nav-item dropdown"><a href="#" class="nav-link has-dropdown">بازم زیر منو!</a>
<ul class="dropdown-menu dropdown-menu-left text-right">
<li class="nav-item"><a href="#" class="nav-link">لینک</a></li>
<li class="nav-item"><a href="#" class="nav-link">دوباره لینک</a></li>
<li class="nav-item"><a href="#" class="nav-link">بازم لینک</a></li>
</ul>
</li>
<li class="nav-item"><a href="#" class="nav-link">لینک</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</nav>
<!-- Main Content -->
<div class="main-content">
<section class="section">
<div class="section-header">
<h1>حالت پیش فرض</h1>
<div class="section-header-breadcrumb">
<div class="breadcrumb-item active"><a href="#">داشبورد</a></div>
<div class="breadcrumb-item"><a href="#">صفحه بندی</a></div>
<div class="breadcrumb-item">حالت پیش فرض</div>
</div>
</div>
<div class="section-body text-right">
<h2 class="section-title">این یک نمونه صفحه است</h2>
<p class="section-lead">این یک صفحه نمونه است تا بتوانید صفحه ی مورد نظر خودتون رو باهاش بسازید.</p>
<div class="card">
<div class="card-header">
<h4>کارت نمونه</h4>
</div>
<div class="card-body">
<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ
هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی در
شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و
متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای
طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان
فارسی ایجاد کرد. در این صورت می توان امید داشت که تمام و دشواری
موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد و زمان مورد
نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل
دنیای موجود طراحی اساسا مورد استفاده قرار گیرد. لورم ایپسوم
متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده
از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در
ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد
نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان
جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را
برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در
زبان فارسی ایجاد کرد. در این صورت می توان امید داشت که تمام و
دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد
و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات
پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد. </p>
</div>
<div class="card-footer bg-whitesmoke">
خعلی خب اینم از فوتر کارت
</div>
</div>
</div>
</section>
</div>
<footer class="main-footer">
<div class="footer-left">
Copyright &copy; 2018 <div class="bullet"></div> Design By <a href="https://nauval.in/">Muhamad Nauval Azhar</a>
</div>
<div class="footer-right">
</div>
</footer>
</div>
</div>
<!-- General JS Scripts -->
<script src="../assets/modules/jquery.min.js"></script>
<script src="../assets/modules/popper.js"></script>
<script src="../assets/modules/tooltip.js"></script>
<script src="../assets/modules/bootstrap/js/bootstrap.min.js"></script>
<script src="../assets/modules/nicescroll/jquery.nicescroll.min.js"></script>
<script src="../assets/modules/moment.min.js"></script>
<script src="../assets/js/stisla.js"></script>
<!-- JS Libraies -->
<!-- Page Specific JS File -->
<!-- Template JS File -->
<script src="../assets/js/scripts.js"></script>
<script src="../assets/js/custom.js"></script>
</body>
</html>

View File

@@ -0,0 +1,455 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no" name="viewport">
<title>Layout &rsaquo; Transparent &mdash; Stisla</title>
<!-- General CSS Files -->
<link rel="stylesheet" href="../assets/modules/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="../assets/modules/fontawesome/css/all.min.css">
<!-- CSS Libraries -->
<!-- Template CSS -->
<link rel="stylesheet" href="../assets/css/style.css">
<link rel="stylesheet" href="../assets/css/components.css">
<link rel="stylesheet" href="../assets/css/rtl.css">
</head>
<body class="layout-2">
<div id="app">
<div class="main-wrapper">
<div class="navbar-bg"></div>
<nav class="navbar navbar-expand-lg main-navbar">
<a href="index-0.html" class="navbar-brand sidebar-gone-hide">پاترونیک</a>
<a href="#" class="nav-link sidebar-gone-show" data-toggle="sidebar"><i class="fas fa-bars"></i></a>
<div class="nav-collapse">
<a class="sidebar-gone-show nav-collapse-toggle nav-link" href="#">
<i class="fas fa-ellipsis-v"></i>
</a>
<ul class="navbar-nav">
<li class="nav-item active"><a href="#" class="nav-link">پنل مدیریت</a></li>
<li class="nav-item"><a href="#" class="nav-link">گزارش خطا</a></li>
<li class="nav-item"><a href="#" class="nav-link">وضعیت سرور</a></li>
</ul>
</div>
<form class="form-inline mr-auto ml-3">
<ul class="navbar-nav ml-3">
<li><a href="#" data-toggle="search" class="nav-link nav-link-lg d-sm-none"><i class="fas fa-search"></i></a></li>
</ul>
<div class="search-element text-right">
<input class="form-control" type="search" placeholder="جستجو" aria-label="Search" data-width="250">
<button class="btn" type="submit"><i class="fas fa-search"></i></button>
<div class="search-backdrop"></div>
<div class="search-result">
<div class="search-header">
نتیجه جستجو
</div>
<div class="search-item">
<a href="#">چگونه ناسا رو هک کنیم؟</a>
<a href="#" class="search-close"><i class="fas fa-times"></i></a>
</div>
<div class="search-item">
<a href="#">Kodinger.com</a>
<a href="#" class="search-close"><i class="fas fa-times"></i></a>
</div>
<div class="search-item">
<a href="#">پنل مدیریت</a>
<a href="#" class="search-close"><i class="fas fa-times"></i></a>
</div>
<div class="search-header">
نتایج
</div>
<div class="search-item">
<a href="#">
<img class="ml-3 rounded" width="30" src="../assets/img/products/product-3-50.png" alt="product">
آیفون s9 تولید شد
</a>
</div>
<div class="search-item">
<a href="#">
<img class="ml-3 rounded" width="30" src="../assets/img/products/product-2-50.png" alt="product">
چه شادی هایی که زیر پای انسانها سرکوب شدند
</a>
</div>
<div class="search-item">
<a href="#">
<img class="ml-3 rounded" width="30" src="../assets/img/products/product-1-50.png" alt="product">
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ.
</a>
</div>
<div class="search-header">
پروژه ها
</div>
<div class="search-item">
<a href="#">
<div class="search-icon bg-danger text-white ml-3">
<i class="fas fa-code"></i>
</div>
متریال ادمین پنل
</a>
</div>
<div class="search-item">
<a href="#">
<div class="search-icon bg-primary text-white ml-3">
<i class="fas fa-laptop"></i>
</div>
ایجاد صفحه لندینگ
</a>
</div>
</div>
</div>
</form>
<ul class="navbar-nav navbar-right">
<li class="dropdown dropdown-list-toggle"><a href="#" data-toggle="dropdown" class="nav-link nav-link-lg message-toggle beep"><i class="far fa-envelope"></i></a>
<div class="dropdown-menu dropdown-list text-right dropdown-menu-left">
<div class="dropdown-header">پیام ها
<div class="float-left">
<a href="#">علامتگذاری همه بصورت خوانده شده</a>
</div>
</div>
<div class="dropdown-list-content dropdown-list-message">
<a href="#" class="dropdown-item dropdown-item-unread">
<div class="dropdown-item-avatar">
<img alt="image" src="../assets/img/avatar/avatar-1.png" class="rounded-circle">
<div class="is-online"></div>
</div>
<div class="dropdown-item-desc text-right">
<b>مهدی خانزادی</b>
<p>سلام داداچ!</p>
<div class="time">۱۰ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item dropdown-item-unread">
<div class="dropdown-item-avatar">
<img alt="image" src="../assets/img/avatar/avatar-2.png" class="rounded-circle">
</div>
<div class="dropdown-item-desc">
<b>مهیار انصاری</b>
<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ.</p>
<div class="time">۱۲ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item dropdown-item-unread">
<div class="dropdown-item-avatar">
<img alt="image" src="../assets/img/avatar/avatar-3.png" class="rounded-circle">
<div class="is-online"></div>
</div>
<div class="dropdown-item-desc">
<b>آمیتا پاچان</b>
<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ.</p>
<div class="time">۱۲ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-avatar">
<img alt="image" src="../assets/img/avatar/avatar-4.png" class="rounded-circle">
</div>
<div class="dropdown-item-desc">
<b>مهدی خانزادی</b>
<p>سلام سیستم پشتیبانی پاترونیک رو استفاده کنید</p>
<div class="time">۱۶ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-avatar">
<img alt="image" src="../assets/img/avatar/avatar-5.png" class="rounded-circle">
</div>
<div class="dropdown-item-desc">
<b>لورم ایپسوم</b>
<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ.</p>
<div class="time">دیروز</div>
</div>
</a>
</div>
<div class="dropdown-footer text-center">
<a href="#"> دیدن همه پیام ها<i class="fas fa-chevron-left"></i></a>
</div>
</div>
</li>
<li class="dropdown dropdown-list-toggle"><a href="#" data-toggle="dropdown" class="nav-link notification-toggle nav-link-lg beep"><i class="far fa-bell"></i></a>
<div class="dropdown-menu dropdown-list dropdown-menu-left">
<div class="dropdown-header text-right">نوتیفیکیشن ها
<div class="float-left">
<a href="#"> علامتگذاری همه بصورت خوانده شده</a>
</div>
</div>
<div class="dropdown-list-content dropdown-list-icons text-right">
<a href="#" class="dropdown-item dropdown-item-unread">
<div class="dropdown-item-icon bg-primary text-white">
<i class="fas fa-code"></i>
</div>
<div class="dropdown-item-desc">
قالب مدیریتی متریال اپدیت جدید داد!
<div class="time text-primary">۲ دقیقه پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-icon bg-info text-white">
<i class="far fa-user"></i>
</div>
<div class="dropdown-item-desc">
<b>شما</b> و <b>مهیار انصاری</b> هم اکنون همکار هستید.
<div class="time">۱۰ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-icon bg-success text-white">
<i class="fas fa-check"></i>
</div>
<div class="dropdown-item-desc">
<b>مهدی خانزادی</b> اطلاعات مرتبط با <b>قالب</b> را <b>آپلود کرد.</b>
<div class="time">۱۲ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-icon bg-danger text-white">
<i class="fas fa-exclamation-triangle"></i>
</div>
<div class="dropdown-item-desc">
فضای هارد دیسک پر شده است لطفا آن را خالی کنید.
<div class="time">۱۷ ساعت پیش</div>
</div>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-item-icon bg-info text-white">
<i class="fas fa-bell"></i>
</div>
<div class="dropdown-item-desc">
به قالب متریال خوش آمدید
<div class="time">دیروز</div>
</div>
</a>
</div>
<div class="dropdown-footer text-center">
<a href="#">
<span>نمایش همه</span>
<i class="fas fa-chevron-left"></i>
</a>
</div>
</div>
</li>
<li class="dropdown"><a href="#" data-toggle="dropdown" class="nav-link dropdown-toggle nav-link-lg nav-link-user">
<img alt="image" src="../assets/img/avatar/avatar-1.png" class="rounded-circle mr-1">
<div class="d-sm-none d-lg-inline-block">سلام مهدی</div></a>
<div class="dropdown-menu dropdown-menu-right text-right">
<div class="dropdown-title text-center">۵ دقیقه پیش لاگین کردین</div>
<a href="features-profile.html" class="dropdown-item has-icon">
<span>پروفایل</span>
<i class="far fa-user"></i>
</a>
<a href="features-activities.html" class="dropdown-item has-icon">
<span>فعالیت ها</span>
<i class="fas fa-bolt"></i>
</a>
<a href="features-settings.html" class="dropdown-item has-icon">
<span>تنظیمات</span>
<i class="fas fa-cog"></i>
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item has-icon text-danger">
<span>خروج</span>
<i class="fas fa-sign-out-alt"></i>
</a>
</div>
</li>
</ul>
</nav>
<div class="main-sidebar">
<aside id="sidebar-wrapper">
<div class="sidebar-brand">
<a href="index.html">مدیریت پاترونیک</a>
</div>
<div class="sidebar-brand sidebar-brand-sm">
<a href="index.html">مدیریت فروش</a>
</div>
<ul class="sidebar-menu">
<li class="menu-header">داشبورد</li>
<li class="dropdown active">
<a href="#" class="nav-link has-dropdown"><i class="fas fa-fire"></i><span>داشبورد</span></a>
<ul class="dropdown-menu">
<li class=active><a class="nav-link" href="index-0.html">داشبورد عمومی</a></li>
<li><a class="nav-link" href="index.html">داشبورد فروش محصولات</a></li>
</ul>
</li>
<li class="menu-header">امکانات بیشتر</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown" data-toggle="dropdown"><i class="fas fa-columns"></i> <span>صفحه بندی</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="layout-default.html">حالت پیش فرض</a></li>
<li><a class="nav-link" href="layout-transparent.html">سایدبار بدون رنگ</a></li>
<li><a class="nav-link" href="layout-top-navigation.html">نویگیشن بالا</a></li>
</ul>
</li>
<li><a class="nav-link" href="blank.html"><i class="far fa-square"></i> <span>صفحه خالی</span></a></li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="fas fa-th"></i> <span>بوت استرپ</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="bootstrap-alert.html">آلرت</a></li>
<li><a class="nav-link" href="bootstrap-badge.html">بدج</a></li>
<li><a class="nav-link" href="bootstrap-breadcrumb.html">بردکرامپ</a></li>
<li><a class="nav-link" href="bootstrap-buttons.html">دکمه ها</a></li>
<li><a class="nav-link" href="bootstrap-card.html">کارت</a></li>
<li><a class="nav-link" href="bootstrap-carousel.html">کروسل</a></li>
<li><a class="nav-link" href="bootstrap-collapse.html">کولاپس</a></li>
<li><a class="nav-link" href="bootstrap-dropdown.html">دراپ دون</a></li>
<li><a class="nav-link" href="bootstrap-form.html">فرم</a></li>
<li><a class="nav-link" href="bootstrap-list-group.html">لیست گروه</a></li>
<li><a class="nav-link" href="bootstrap-media-object.html">مدیا ابجکت</a></li>
<li><a class="nav-link" href="bootstrap-modal.html">مودال</a></li>
<li><a class="nav-link" href="bootstrap-nav.html">نویگیشن</a></li>
<li><a class="nav-link" href="bootstrap-navbar.html">نوبار</a></li>
<li><a class="nav-link" href="bootstrap-pagination.html">پجینیشن</a></li>
<li><a class="nav-link" href="bootstrap-popover.html">پاپ اور</a></li>
<li><a class="nav-link" href="bootstrap-progress.html">پراگرس</a></li>
<li><a class="nav-link" href="bootstrap-table.html">جدول</a></li>
<li><a class="nav-link" href="bootstrap-tooltip.html">تولتیپ</a></li>
<li><a class="nav-link" href="bootstrap-typography.html">تایپوگرافی</a></li>
</ul>
</li>
<li class="menu-header">امکانات دیگر</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="fas fa-th-large"></i> <span>کامپوننت ها</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="components-gallery.html">گالری</a></li>
<li><a class="nav-link" href="components-multiple-upload.html">مولتی آپلود</a></li>
<li><a class="nav-link" href="components-tab.html">تب</a></li>
<li><a class="nav-link" href="components-table.html">جدول</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="far fa-file-alt"></i> <span>فرم ها</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="forms-advanced-form.html">فرم پیشرفته</a></li>
<li><a class="nav-link" href="forms-editor.html">ویرایشگر</a></li>
<li><a class="nav-link" href="forms-validation.html">ولیدیشن</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="fas fa-plug"></i> <span>ماژول ها</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="modules-calendar.html">تقویم</a></li>
<li><a class="nav-link" href="modules-chartjs.html">چارت ها</a></li>
<li><a class="nav-link" href="modules-datatables.html">دیتاتیبل</a></li>
<li><a class="nav-link" href="modules-flag.html">پرچم</a></li>
<li><a class="nav-link" href="modules-font-awesome.html">فونت اوسوم</a></li>
<li><a class="nav-link" href="modules-ion-icons.html">ای او ن ایکون</a></li>
<li><a class="nav-link" href="modules-owl-carousel.html">اول کراسول</a></li>
<li><a class="nav-link" href="modules-sparkline.html">اسپارک لاین</a></li>
<li><a class="nav-link" href="modules-sweet-alert.html">سویت الرت</a></li>
<li><a class="nav-link" href="modules-toastr.html">توستر</a></li>
<li><a class="nav-link" href="modules-vector-map.html">وکتور مپ</a></li>
<li><a class="nav-link" href="modules-weather-icon.html">ایکن اب و هوا</a></li>
</ul>
</li>
<li class="menu-header">صفحات</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="far fa-user"></i> <span>ثبت نام</span></a>
<ul class="dropdown-menu">
<li><a href="auth-forgot-password.html">فراموشی کلمه عبور</a></li>
<li><a href="auth-login.html">لاگین</a></li>
<li><a href="auth-register.html">ثبت نام</a></li>
<li><a href="auth-reset-password.html">بازیابی کلمه عبور</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown"><i class="fas fa-exclamation"></i> <span>خطاها</span></a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="errors-503.html">503</a></li>
<li><a class="nav-link" href="errors-403.html">403</a></li>
<li><a class="nav-link" href="errors-404.html">404</a></li>
<li><a class="nav-link" href="errors-500.html">500</a></li>
</ul>
</li>
<li><a class="nav-link" href="credits.html"><i class="fas fa-pencil-ruler"></i> <span>سازنده ها</span></a></li>
</ul>
<div class="mt-4 mb-4 p-3 hide-sidebar-mini">
<a href="https://getstisla.com/docs" class="btn btn-primary btn-lg btn-block btn-icon-split">
<i class="fas fa-rocket"></i> مستندات قالب
</a>
</div>
</aside>
</div>
<!-- Main Content -->
<div class="main-content">
<section class="section">
<div class="section-header">
<h1>حالت پیش فرض</h1>
<div class="section-header-breadcrumb">
<div class="breadcrumb-item active"><a href="#">داشبورد</a></div>
<div class="breadcrumb-item"><a href="#">صفحه بندی</a></div>
<div class="breadcrumb-item">حالت پیش فرض</div>
</div>
</div>
<div class="section-body text-right">
<h2 class="section-title">این یک نمونه صفحه است</h2>
<p class="section-lead">این یک صفحه نمونه است تا بتوانید صفحه ی مورد نظر خودتون رو باهاش بسازید.</p>
<div class="card">
<div class="card-header">
<h4>کارت نمونه</h4>
</div>
<div class="card-body">
<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ
هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی در
شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و
متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای
طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان
فارسی ایجاد کرد. در این صورت می توان امید داشت که تمام و دشواری
موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد و زمان مورد
نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل
دنیای موجود طراحی اساسا مورد استفاده قرار گیرد. لورم ایپسوم
متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده
از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در
ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد
نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان
جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را
برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در
زبان فارسی ایجاد کرد. در این صورت می توان امید داشت که تمام و
دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد
و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات
پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد. </p>
</div>
<div class="card-footer bg-whitesmoke">
خعلی خب اینم از فوتر کارت
</div>
</div>
</div>
</section>
</div>
<footer class="main-footer">
<div class="footer-left">
Copyright &copy; 2018 <div class="bullet"></div> Design By <a href="https://nauval.in/">Muhamad Nauval Azhar</a>
</div>
<div class="footer-right">
</div>
</footer>
</div>
</div>
<!-- General JS Scripts -->
<script src="../assets/modules/jquery.min.js"></script>
<script src="../assets/modules/popper.js"></script>
<script src="../assets/modules/tooltip.js"></script>
<script src="../assets/modules/bootstrap/js/bootstrap.min.js"></script>
<script src="../assets/modules/nicescroll/jquery.nicescroll.min.js"></script>
<script src="../assets/modules/moment.min.js"></script>
<script src="../assets/js/stisla.js"></script>
<!-- JS Libraies -->
<script src="../assets/modules/sticky-kit.js"></script>
<!-- Page Specific JS File -->
<!-- Template JS File -->
<script src="../assets/js/scripts.js"></script>
<script src="../assets/js/custom.js"></script>
</body>
</html>