طرح اولیه صفحه آلارم در پنل مدیریت نرم افزار خدمات تعویض روغن
HTML Source code:
<!doctype html>
<html lang="ar" dir="rtl" data-bs-theme="auto">
<head><script src="<?php echo base_url(); ?>adon/js/color-modes.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="javid ahmadi - oilchange software">
<meta name="generator" content="jeyoo">
<title>مدیریت آلارم</title>
<link href="<?php echo base_url(); ?>adon/css/bootstrap.rtl.min.css" rel="stylesheet" integrity="sha384-PJsj/BTMqILvmcej7ulplguok8ag4xFTPryRq8xevL7eBYSmpXKcbNVuy+P0RMgq" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>adon/css/main.css">
<!-- Favicons -->
<meta name="theme-color" content="#fbd336">
<!-- Custom styles for this template -->
<link href="<?php echo base_url(); ?>adon/icon/font/bootstrap-icons.css" rel="stylesheet">
<!-- Custom styles for this template -->
</head>
<body>
<main>
<nav class="navbar">
<div class="container-fluid">
<a class="navbar-brand" href="<?php echo base_url();?>panel/alarm">مدیریت آلارم </a>
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="<?php echo base_url();?>main/dashboard">
<i class="bi bi-arrow-return-right"></i>
بازگشت به داشبورد</a>
</li>
</ul>
</div>
</nav>
<ul class="nav nav-tabs" id="myTab" role="tablist" style="margin-top: 20px;">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">آلارم های فعال</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">نمودار ارسال</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">بازگشت مشتری</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="archive-tab" data-bs-toggle="tab" data-bs-target="#archive" type="button" role="tab" aria-controls="archive" aria-selected="false">آرشیو</button>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th scope="col">کدآلارم</th>
<th scope="col">نام مشتری</th>
<th scope="col">خودرو</th>
<th scope="col">تاریخ آلارم</th>
<th scope="col">وضعیت</th>
<th scope="col"></th>
</tr>
</thead>
<tbody class="table-group-divider">
<tr>
<th scope="row">1000</th>
<td>صادق محمدی</td>
<td>۲۰۶ سفید</td>
<td>۱۴۰۲/۰۶/۲۰</td>
<td>
<span class="badge rounded-pill bg-success">در انتظار...</span>
</td>
<td>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
Open
</button>
</td>
</tr>
<tr>
<th scope="row">2000</th>
<td>فرهادشایان</td>
<td>سمند</td>
<td>۱۴۰۲/۰۶/۳۰</td>
<td>
<span class="badge rounded-pill bg-success">پیامک ارسال شد.</span>
</td>
<td>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
Open
</button>
</td>
</tr>
<tr>
<th scope="row">3000</th>
<td>سیماسیمین</td>
<td>@ریو</td>
<td>۱۴۰۲/۰۶/۳۰</td>
<td>
<span class="badge rounded-pill bg-success">خطا / </span>
</td>
<td>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
Open
</button>
</td>
</tr>
</tbody>
</table>
</div>
</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 class="tab-pane fade" id="archive" role="tabpanel" aria-labelledby="archive-tab">...</div>
</div>
<div>
<ul>
<li>
پیامک تحویل داده شد.
</li>
<li>
خطا / پیامک به دست گیرنده نرسید.
</li>
<li>
امکان تماس و یا پیامک از گوشی سرویس کار
</li>
<li>
امکان ارسال پیام از طریق واتساپ و تلگرام
</li>
<li>
امکان کپی پیام / امکان تماس صوتی اعتبارسنجی
</li>
</ul>
</div>
</main>
<!-- The Modal -->
<div class="modal" id="myModal">
<div class="modal-dialog modal-fullscreen">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">لاگ</h4>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<!-- Modal body -->
<div class="modal-body">
<ul>
<li>
<span class="badge rounded-pill bg-primary">Primary</span>
</li>
<li>
<span class="badge rounded-pill bg-secondary">Secondary</span>
</li>
</ul>
<span class="badge rounded-pill bg-success">Success</span>
<span class="badge rounded-pill bg-danger">Danger</span>
<span class="badge rounded-pill bg-warning">Warning</span>
<span class="badge rounded-pill bg-info">Info</span>
<span class="badge rounded-pill bg-light">Light</span>
<span class="badge rounded-pill bg-dark">Dark</span>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-bs-dismiss="modal">بستن</button>
</div>
</div>
</div>
</div>
<script src="<?php echo base_url(); ?>asset/jquery-3.5.1.min.js"></script>
<script src="<?php echo base_url(); ?>adon/js/bootstrap.bundle.min.js"></script>
<script src="<?php echo base_url(); ?>adon/js/chart.umd.min.js"></script>
</body>
</html>