You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

364 lines
24 KiB

<!DOCTYPE html>
<html lang="en">
<head>
<title>Portal - Bootstrap 5 Admin Dashboard Template For Developers</title>
<!-- Meta -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Portal - Bootstrap 5 Admin Dashboard Template For Developers">
<meta name="author" content="Celestino Rey" >
<link rel="shortcut icon" href="favicon.ico">
<!-- FontAwesome JS-->
<script defer src="assets/plugins/fontawesome/js/all.min.js"></script>
<!-- App CSS -->
<link id="theme-style" rel="stylesheet" href="assets/css/portal.css">
</head>
<body class="app">
<header class="app-header fixed-top">
<div class="app-header-inner">
<div class="container-fluid py-2">
<div class="app-header-content">
<div class="row justify-content-between align-items-center">
<div class="col-auto">
<a id="sidepanel-toggler" class="sidepanel-toggler d-inline-block d-xl-none" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg>
</a>
</div><!--//col-->
<div class="search-mobile-trigger d-sm-none col">
<i class="search-mobile-trigger-icon fa-solid fa-magnifying-glass"></i>
</div><!--//col-->
<div class="app-search-box col">
<form class="app-search-form">
<input type="text" placeholder="Search..." name="search" class="form-control search-input">
<button type="submit" class="btn search-btn btn-primary" value="Search"><i class="fa-solid fa-magnifying-glass"></i></button>
</form>
</div><!--//app-search-box-->
<div class="app-utilities col-auto">
<div class="app-utility-item app-notifications-dropdown dropdown">
<a class="dropdown-toggle no-toggle-arrow" id="notifications-dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false" title="Notifications">
<!--//Bootstrap Icons: https://icons.getbootstrap.com/ -->
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-bell icon" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M8 16a2 2 0 0 0 2-2H6a2 2 0 0 0 2 2z"/>
<path fill-rule="evenodd" d="M8 1.918l-.797.161A4.002 4.002 0 0 0 4 6c0 .628-.134 2.197-.459 3.742-.16.767-.376 1.566-.663 2.258h10.244c-.287-.692-.502-1.49-.663-2.258C12.134 8.197 12 6.628 12 6a4.002 4.002 0 0 0-3.203-3.92L8 1.917zM14.22 12c.223.447.481.801.78 1H1c.299-.199.557-.553.78-1C2.68 10.2 3 6.88 3 6c0-2.42 1.72-4.44 4.005-4.901a1 1 0 1 1 1.99 0A5.002 5.002 0 0 1 13 6c0 .88.32 4.2 1.22 6z"/>
</svg>
<span class="icon-badge">3</span>
</a><!--//dropdown-toggle-->
<div class="dropdown-menu p-0" aria-labelledby="notifications-dropdown-toggle">
<div class="dropdown-menu-header p-3">
<h5 class="dropdown-menu-title mb-0">Notifications</h5>
</div><!--//dropdown-menu-title-->
<div class="dropdown-menu-content">
<div class="item p-3">
<div class="row gx-2 justify-content-between align-items-center">
<div class="col-auto">
<img class="profile-image" src="assets/images/profiles/profile-1.png" alt="">
</div><!--//col-->
<div class="col">
<div class="info">
<div class="desc">Amy shared a file with you. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div>
<div class="meta"> 2 hrs ago</div>
</div>
</div><!--//col-->
</div><!--//row-->
<a class="link-mask" href="notifications.html"></a>
</div><!--//item-->
<div class="item p-3">
<div class="row gx-2 justify-content-between align-items-center">
<div class="col-auto">
<div class="app-icon-holder">
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-receipt" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M1.92.506a.5.5 0 0 1 .434.14L3 1.293l.646-.647a.5.5 0 0 1 .708 0L5 1.293l.646-.647a.5.5 0 0 1 .708 0L7 1.293l.646-.647a.5.5 0 0 1 .708 0L9 1.293l.646-.647a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 0 1 .801.13l.5 1A.5.5 0 0 1 15 2v12a.5.5 0 0 1-.053.224l-.5 1a.5.5 0 0 1-.8.13L13 14.707l-.646.647a.5.5 0 0 1-.708 0L11 14.707l-.646.647a.5.5 0 0 1-.708 0L9 14.707l-.646.647a.5.5 0 0 1-.708 0L7 14.707l-.646.647a.5.5 0 0 1-.708 0L5 14.707l-.646.647a.5.5 0 0 1-.708 0L3 14.707l-.646.647a.5.5 0 0 1-.801-.13l-.5-1A.5.5 0 0 1 1 14V2a.5.5 0 0 1 .053-.224l.5-1a.5.5 0 0 1 .367-.27zm.217 1.338L2 2.118v11.764l.137.274.51-.51a.5.5 0 0 1 .707 0l.646.647.646-.646a.5.5 0 0 1 .708 0l.646.646.646-.646a.5.5 0 0 1 .708 0l.646.646.646-.646a.5.5 0 0 1 .708 0l.646.646.646-.646a.5.5 0 0 1 .708 0l.646.646.646-.646a.5.5 0 0 1 .708 0l.509.509.137-.274V2.118l-.137-.274-.51.51a.5.5 0 0 1-.707 0L12 1.707l-.646.647a.5.5 0 0 1-.708 0L10 1.707l-.646.647a.5.5 0 0 1-.708 0L8 1.707l-.646.647a.5.5 0 0 1-.708 0L6 1.707l-.646.647a.5.5 0 0 1-.708 0L4 1.707l-.646.647a.5.5 0 0 1-.708 0l-.509-.51z"/>
<path fill-rule="evenodd" d="M3 4.5a.5.5 0 0 1 .5-.5h6a.5.5 0 1 1 0 1h-6a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h6a.5.5 0 1 1 0 1h-6a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h6a.5.5 0 1 1 0 1h-6a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5zm8-6a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5z"/>
</svg>
</div>
</div><!--//col-->
<div class="col">
<div class="info">
<div class="desc">You have a new invoice. Proin venenatis interdum est.</div>
<div class="meta"> 1 day ago</div>
</div>
</div><!--//col-->
</div><!--//row-->
<a class="link-mask" href="notifications.html"></a>
</div><!--//item-->
<div class="item p-3">
<div class="row gx-2 justify-content-between align-items-center">
<div class="col-auto">
<div class="app-icon-holder icon-holder-mono">
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-bar-chart-line" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M11 2a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v12h.5a.5.5 0 0 1 0 1H.5a.5.5 0 0 1 0-1H1v-3a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v3h1V7a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v7h1V2zm1 12h2V2h-2v12zm-3 0V7H7v7h2zm-5 0v-3H2v3h2z"/>
</svg>
</div>
</div><!--//col-->
<div class="col">
<div class="info">
<div class="desc">Your report is ready. Proin venenatis interdum est.</div>
<div class="meta"> 3 days ago</div>
</div>
</div><!--//col-->
</div><!--//row-->
<a class="link-mask" href="notifications.html"></a>
</div><!--//item-->
<div class="item p-3">
<div class="row gx-2 justify-content-between align-items-center">
<div class="col-auto">
<img class="profile-image" src="assets/images/profiles/profile-2.png" alt="">
</div><!--//col-->
<div class="col">
<div class="info">
<div class="desc">James sent you a new message.</div>
<div class="meta"> 7 days ago</div>
</div>
</div><!--//col-->
</div><!--//row-->
<a class="link-mask" href="#"></a>
</div><!--//item-->
</div><!--//dropdown-menu-content-->
<div class="dropdown-menu-footer p-2 text-center">
<a href="notifications.html">View all</a>
</div>
</div><!--//dropdown-menu-->
</div><!--//app-utility-item-->
<div class="app-utility-item">
<a href="settings.html" title="Settings">
<!--//Bootstrap Icons: https://icons.getbootstrap.com/ -->
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-gear icon" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M8.837 1.626c-.246-.835-1.428-.835-1.674 0l-.094.319A1.873 1.873 0 0 1 4.377 3.06l-.292-.16c-.764-.415-1.6.42-1.184 1.185l.159.292a1.873 1.873 0 0 1-1.115 2.692l-.319.094c-.835.246-.835 1.428 0 1.674l.319.094a1.873 1.873 0 0 1 1.115 2.693l-.16.291c-.415.764.42 1.6 1.185 1.184l.292-.159a1.873 1.873 0 0 1 2.692 1.116l.094.318c.246.835 1.428.835 1.674 0l.094-.319a1.873 1.873 0 0 1 2.693-1.115l.291.16c.764.415 1.6-.42 1.184-1.185l-.159-.291a1.873 1.873 0 0 1 1.116-2.693l.318-.094c.835-.246.835-1.428 0-1.674l-.319-.094a1.873 1.873 0 0 1-1.115-2.692l.16-.292c.415-.764-.42-1.6-1.185-1.184l-.291.159A1.873 1.873 0 0 1 8.93 1.945l-.094-.319zm-2.633-.283c.527-1.79 3.065-1.79 3.592 0l.094.319a.873.873 0 0 0 1.255.52l.292-.16c1.64-.892 3.434.901 2.54 2.541l-.159.292a.873.873 0 0 0 .52 1.255l.319.094c1.79.527 1.79 3.065 0 3.592l-.319.094a.873.873 0 0 0-.52 1.255l.16.292c.893 1.64-.902 3.434-2.541 2.54l-.292-.159a.873.873 0 0 0-1.255.52l-.094.319c-.527 1.79-3.065 1.79-3.592 0l-.094-.319a.873.873 0 0 0-1.255-.52l-.292.16c-1.64.893-3.433-.902-2.54-2.541l.159-.292a.873.873 0 0 0-.52-1.255l-.319-.094c-1.79-.527-1.79-3.065 0-3.592l.319-.094a.873.873 0 0 0 .52-1.255l-.16-.292c-.892-1.64.902-3.433 2.541-2.54l.292.159a.873.873 0 0 0 1.255-.52l.094-.319z"/>
<path fill-rule="evenodd" d="M8 5.754a2.246 2.246 0 1 0 0 4.492 2.246 2.246 0 0 0 0-4.492zM4.754 8a3.246 3.246 0 1 1 6.492 0 3.246 3.246 0 0 1-6.492 0z"/>
</svg>
</a>
</div><!--//app-utility-item-->
<div class="app-utility-item app-user-dropdown dropdown">
<a class="dropdown-toggle" id="user-dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false"><img src="assets/images/user.png" alt="user profile"></a>
<ul class="dropdown-menu" aria-labelledby="user-dropdown-toggle">
<li><a class="dropdown-item" href="account.html">Account</a></li>
<li><a class="dropdown-item" href="settings.html">Settings</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="login.html">Log Out</a></li>
</ul>
</div><!--//app-user-dropdown-->
</div><!--//app-utilities-->
</div><!--//row-->
</div><!--//app-header-content-->
</div><!--//container-fluid-->
</div><!--//app-header-inner-->
<?php include './templates/panel.php';?>
</header><!--//app-header-->
<div class="app-wrapper">
<div class="app-content pt-3 p-md-3 p-lg-4">
<div class="container-xl">
<div class="position-relative mb-3">
<div class="row g-3 justify-content-between">
<div class="col-auto">
<h1 class="app-page-title mb-0">Notifications</h1>
</div>
<div class="col-auto">
<div class="page-utilities">
<select class="form-select form-select-sm w-auto" >
<option selected value="option-1">All</option>
<option value="option-2">News</option>
<option value="option-3">Product</option>
<option value="option-4">Project</option>
<option value="option-4">Billing</option>
</select>
</div><!--//page-utilities-->
</div>
</div>
</div>
<div class="app-card app-card-notification shadow-sm mb-4">
<div class="app-card-header px-4 py-3">
<div class="row g-3 align-items-center">
<div class="col-12 col-lg-auto text-center text-lg-start">
<img class="profile-image" src="assets/images/profiles/profile-1.png" alt="">
</div><!--//col-->
<div class="col-12 col-lg-auto text-center text-lg-start">
<div class="notification-type mb-2"><span class="badge bg-info">Project</span></div>
<h4 class="notification-title mb-1">Notification Heading Lorem Ipsum</h4>
<ul class="notification-meta list-inline mb-0">
<li class="list-inline-item">2 hrs ago</li>
<li class="list-inline-item">|</li>
<li class="list-inline-item">Amy Doe</li>
</ul>
</div><!--//col-->
</div><!--//row-->
</div><!--//app-card-header-->
<div class="app-card-body p-4">
<div class="notification-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed ultrices dolor, ac maximus ligula. Donec ex orci, mollis ac purus vel, tempor pulvinar justo. Praesent nibh massa, posuere non mollis vel, molestie non mauris. Aenean consequat facilisis orci, sed sagittis mauris interdum at.</div>
</div><!--//app-card-body-->
<div class="app-card-footer px-4 py-3">
<a class="action-link" href="#">View all<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-arrow-right ms-2" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"/>
</svg></a>
</div><!--//app-card-footer-->
</div><!--//app-card-->
<div class="app-card app-card-notification shadow-sm mb-4">
<div class="app-card-header px-4 py-3">
<div class="row g-3 align-items-center">
<div class="col-12 col-lg-auto text-center text-lg-start">
<div class="app-icon-holder">
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-receipt" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M1.92.506a.5.5 0 0 1 .434.14L3 1.293l.646-.647a.5.5 0 0 1 .708 0L5 1.293l.646-.647a.5.5 0 0 1 .708 0L7 1.293l.646-.647a.5.5 0 0 1 .708 0L9 1.293l.646-.647a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 0 1 .801.13l.5 1A.5.5 0 0 1 15 2v12a.5.5 0 0 1-.053.224l-.5 1a.5.5 0 0 1-.8.13L13 14.707l-.646.647a.5.5 0 0 1-.708 0L11 14.707l-.646.647a.5.5 0 0 1-.708 0L9 14.707l-.646.647a.5.5 0 0 1-.708 0L7 14.707l-.646.647a.5.5 0 0 1-.708 0L5 14.707l-.646.647a.5.5 0 0 1-.708 0L3 14.707l-.646.647a.5.5 0 0 1-.801-.13l-.5-1A.5.5 0 0 1 1 14V2a.5.5 0 0 1 .053-.224l.5-1a.5.5 0 0 1 .367-.27zm.217 1.338L2 2.118v11.764l.137.274.51-.51a.5.5 0 0 1 .707 0l.646.647.646-.646a.5.5 0 0 1 .708 0l.646.646.646-.646a.5.5 0 0 1 .708 0l.646.646.646-.646a.5.5 0 0 1 .708 0l.646.646.646-.646a.5.5 0 0 1 .708 0l.646.646.646-.646a.5.5 0 0 1 .708 0l.509.509.137-.274V2.118l-.137-.274-.51.51a.5.5 0 0 1-.707 0L12 1.707l-.646.647a.5.5 0 0 1-.708 0L10 1.707l-.646.647a.5.5 0 0 1-.708 0L8 1.707l-.646.647a.5.5 0 0 1-.708 0L6 1.707l-.646.647a.5.5 0 0 1-.708 0L4 1.707l-.646.647a.5.5 0 0 1-.708 0l-.509-.51z"/>
<path fill-rule="evenodd" d="M3 4.5a.5.5 0 0 1 .5-.5h6a.5.5 0 1 1 0 1h-6a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h6a.5.5 0 1 1 0 1h-6a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h6a.5.5 0 1 1 0 1h-6a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5zm8-6a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5z"/>
</svg>
</div><!--//app-icon-holder-->
</div><!--//col-->
<div class="col-12 col-lg-auto text-center text-lg-start">
<div class="notification-type mb-2"><span class="badge bg-warning">Billing</span></div>
<h4 class="notification-title mb-1">Notification Heading Lorem Ipsum</h4>
<ul class="notification-meta list-inline mb-0">
<li class="list-inline-item">1 day ago</li>
<li class="list-inline-item">|</li>
<li class="list-inline-item">System</li>
</ul>
</div><!--//col-->
</div><!--//row-->
</div><!--//app-card-header-->
<div class="app-card-body p-4">
<div class="notification-content">Praesent nibh massa, posuere non mollis vel, molestie non mauris. Aenean consequat facilisis orci, sed sagittis mauris interdum at.</div>
</div><!--//app-card-body-->
<div class="app-card-footer px-4 py-3">
<a class="action-link" href="#">View invoice<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-arrow-right ms-2" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"/>
</svg></a>
</div><!--//app-card-footer-->
</div><!--//app-card-->
<div class="app-card app-card-notification shadow-sm mb-4">
<div class="app-card-header px-4 py-3">
<div class="row g-3 align-items-center">
<div class="col-12 col-lg-auto text-center text-lg-start">
<div class="app-icon-holder icon-holder-mono">
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-bar-chart-line" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M11 2a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v12h.5a.5.5 0 0 1 0 1H.5a.5.5 0 0 1 0-1H1v-3a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v3h1V7a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v7h1V2zm1 12h2V2h-2v12zm-3 0V7H7v7h2zm-5 0v-3H2v3h2z"/>
</svg>
</div><!--//app-icon-holder-->
</div><!--//col-->
<div class="col-12 col-lg-auto text-center text-lg-start">
<div class="notification-type mb-2"><span class="badge bg-info">Project</span></div>
<h4 class="notification-title mb-1">Notification Heading Lorem Ipsum</h4>
<ul class="notification-meta list-inline mb-0">
<li class="list-inline-item">3 days ago</li>
<li class="list-inline-item">|</li>
<li class="list-inline-item">System</li>
</ul>
</div><!--//col-->
</div><!--//row-->
</div><!--//app-card-header-->
<div class="app-card-body p-4">
<div class="notification-content">Proin a magna sit amet mauris mollis mattis in at dui. Fusce laoreet metus et nunc lobortis, suscipit sollicitudin augue pellentesque. Maecenas maximus iaculis scelerisque.</div>
</div><!--//app-card-body-->
<div class="app-card-footer px-4 py-3">
<a class="action-link" href="#">View invoice<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-arrow-right ms-2" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"/>
</svg></a>
</div><!--//app-card-footer-->
</div><!--//app-card-->
<div class="app-card app-card-notification shadow-sm mb-4">
<div class="app-card-header px-4 py-3">
<div class="row g-3 align-items-center">
<div class="col-12 col-lg-auto text-center text-lg-start">
<img class="profile-image" src="assets/images/profiles/profile-2.png" alt="">
</div><!--//col-->
<div class="col-12 col-lg-auto text-center text-lg-start">
<div class="notification-type mb-2"><span class="badge bg-secondary">Product</span></div>
<h4 class="notification-title mb-1">Notification Heading Lorem Ipsum</h4>
<ul class="notification-meta list-inline mb-0">
<li class="list-inline-item">7 days ago</li>
<li class="list-inline-item">|</li>
<li class="list-inline-item">James Smith</li>
</ul>
</div><!--//col-->
</div><!--//row-->
</div><!--//app-card-header-->
<div class="app-card-body p-4">
<div class="notification-content">Sed tempor faucibus arcu, nec tristique erat congue sed. Pellentesque auctor ut elit vel feugiat. Sed a mauris tempor, tempor lacus vel, tristique metus. Nulla interdum felis id metus fermentum laoreet.</div>
</div><!--//app-card-body-->
<div class="app-card-footer px-4 py-3">
<a class="action-link" href="#">View all<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-arrow-right ms-2" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"/>
</svg></a>
</div><!--//app-card-footer-->
</div><!--//app-card-->
<div class="app-card app-card-notification shadow-sm mb-4">
<div class="app-card-header px-4 py-3">
<div class="row g-3 align-items-center">
<div class="col-12 col-lg-auto text-center text-lg-start">
<img class="profile-image" src="assets/images/profiles/profile-3.png" alt="">
</div><!--//col-->
<div class="col-12 col-lg-auto text-center text-lg-start">
<div class="notification-type mb-2"><span class="badge bg-success">News</span></div>
<h4 class="notification-title mb-1">Notification Heading Lorem Ipsum</h4>
<ul class="notification-meta list-inline mb-0">
<li class="list-inline-item">7 days ago</li>
<li class="list-inline-item">|</li>
<li class="list-inline-item">Kate Sanders</li>
</ul>
</div><!--//col-->
</div><!--//row-->
</div><!--//app-card-header-->
<div class="app-card-body p-4">
<div class="notification-content">Sed tempor faucibus arcu, nec tristique erat congue sed. Pellentesque auctor ut elit vel feugiat. Sed a mauris tempor, tempor lacus vel, tristique metus. Nulla interdum felis id metus fermentum laoreet.</div>
</div><!--//app-card-body-->
<div class="app-card-footer px-4 py-3">
<a class="action-link" href="#">Read more<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-arrow-right ms-2" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"/>
</svg></a>
</div><!--//app-card-footer-->
</div><!--//app-card-->
<div class="text-center mt-4"><a class="btn app-btn-secondary" href="#">Load more notifications</a></div>
</div><!--//container-fluid-->
</div><!--//app-content-->
<?php include './templates/footer.php';?>
</div><!--//app-wrapper-->
<!-- Javascript -->
<script src="assets/plugins/popper.min.js"></script>
<script src="assets/plugins/bootstrap/js/bootstrap.min.js"></script>
<!-- Page Specific JS -->
<script src="assets/js/app.js"></script>
</body>
</html>