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.
337 lines
20 KiB
337 lines
20 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="notifications.html"></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">
|
|
<h1 class="app-page-title">Settings</h1>
|
|
<hr class="mb-4">
|
|
<div class="row g-4 settings-section">
|
|
<div class="col-12 col-md-4">
|
|
<h3 class="section-title">General</h3>
|
|
<div class="section-intro">Settings section intro goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="help.html">Learn more</a></div>
|
|
</div>
|
|
<div class="col-12 col-md-8">
|
|
<div class="app-card app-card-settings shadow-sm p-4">
|
|
|
|
<div class="app-card-body">
|
|
<form class="settings-form">
|
|
<div class="mb-3">
|
|
<label for="setting-input-1" class="form-label">Business Name<span class="ms-2" data-bs-container="body" data-bs-toggle="popover" data-bs-trigger="hover focus" data-bs-placement="top" data-bs-content="This is a Bootstrap popover example. You can use popover to provide extra info."><svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-info-circle" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
|
|
<path fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
|
|
<path d="M8.93 6.588l-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588z"/>
|
|
<circle cx="8" cy="4.5" r="1"/>
|
|
</svg></span></label>
|
|
<input type="text" class="form-control" id="setting-input-1" value="Lorem Ipsum Ltd." required>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="setting-input-2" class="form-label">Contact Name</label>
|
|
<input type="text" class="form-control" id="setting-input-2" value="Steve Doe" required>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="setting-input-3" class="form-label">Business Email Address</label>
|
|
<input type="email" class="form-control" id="setting-input-3" value="hello@companywebsite.com">
|
|
</div>
|
|
<button type="submit" class="btn app-btn-primary" >Save Changes</button>
|
|
</form>
|
|
</div><!--//app-card-body-->
|
|
|
|
</div><!--//app-card-->
|
|
</div>
|
|
</div><!--//row-->
|
|
<hr class="my-4">
|
|
<div class="row g-4 settings-section">
|
|
<div class="col-12 col-md-4">
|
|
<h3 class="section-title">Plan</h3>
|
|
<div class="section-intro">Settings section intro goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="help.html">Learn more</a></div>
|
|
</div>
|
|
<div class="col-12 col-md-8">
|
|
<div class="app-card app-card-settings shadow-sm p-4">
|
|
|
|
<div class="app-card-body">
|
|
<div class="mb-2"><strong>Current Plan:</strong> Pro</div>
|
|
<div class="mb-2"><strong>Status:</strong> <span class="badge bg-success">Active</span></div>
|
|
<div class="mb-2"><strong>Expires:</strong> 2030-09-24</div>
|
|
<div class="mb-4"><strong>Invoices:</strong> <a href="#">view</a></div>
|
|
<div class="row justify-content-between">
|
|
<div class="col-auto">
|
|
<a class="btn app-btn-primary" href="#">Upgrade Plan</a>
|
|
</div>
|
|
<div class="col-auto">
|
|
<a class="btn app-btn-secondary" href="#">Cancel Plan</a>
|
|
</div>
|
|
</div>
|
|
|
|
</div><!--//app-card-body-->
|
|
|
|
</div><!--//app-card-->
|
|
</div>
|
|
</div><!--//row-->
|
|
<hr class="my-4">
|
|
<div class="row g-4 settings-section">
|
|
<div class="col-12 col-md-4">
|
|
<h3 class="section-title">Data & Privacy</h3>
|
|
<div class="section-intro">Settings section intro goes here. Morbi vehicula, est eget fermentum ornare. </div>
|
|
</div>
|
|
<div class="col-12 col-md-8">
|
|
<div class="app-card app-card-settings shadow-sm p-4">
|
|
<div class="app-card-body">
|
|
<form class="settings-form">
|
|
<div class="form-check mb-3">
|
|
<input class="form-check-input" type="checkbox" value="" id="settings-checkbox-1" checked>
|
|
<label class="form-check-label" for="settings-checkbox-1">
|
|
Keep user app activity history
|
|
</label>
|
|
</div><!--//form-check-->
|
|
<div class="form-check mb-3">
|
|
<input class="form-check-input" type="checkbox" value="" id="settings-checkbox-2" checked>
|
|
<label class="form-check-label" for="settings-checkbox-2">
|
|
Keep user app preferences
|
|
</label>
|
|
</div>
|
|
<div class="form-check mb-3">
|
|
<input class="form-check-input" type="checkbox" value="" id="settings-checkbox-3">
|
|
<label class="form-check-label" for="settings-checkbox-3">
|
|
Keep user app search history
|
|
</label>
|
|
</div>
|
|
<div class="form-check mb-3">
|
|
<input class="form-check-input" type="checkbox" value="" id="settings-checkbox-4">
|
|
<label class="form-check-label" for="settings-checkbox-4">
|
|
Lorem ipsum dolor sit amet
|
|
</label>
|
|
</div>
|
|
<div class="form-check mb-3">
|
|
<input class="form-check-input" type="checkbox" value="" id="settings-checkbox-5">
|
|
<label class="form-check-label" for="settings-checkbox-5">
|
|
Aenean quis pharetra metus
|
|
</label>
|
|
</div>
|
|
<div class="mt-3">
|
|
<button type="submit" class="btn app-btn-primary" >Save Changes</button>
|
|
</div>
|
|
</form>
|
|
</div><!--//app-card-body-->
|
|
</div><!--//app-card-->
|
|
</div>
|
|
</div><!--//row-->
|
|
<hr class="my-4">
|
|
<div class="row g-4 settings-section">
|
|
<div class="col-12 col-md-4">
|
|
<h3 class="section-title">Notifications</h3>
|
|
<div class="section-intro">Settings section intro goes here. Duis velit massa, faucibus non hendrerit eget.</div>
|
|
</div>
|
|
<div class="col-12 col-md-8">
|
|
<div class="app-card app-card-settings shadow-sm p-4">
|
|
<div class="app-card-body">
|
|
<form class="settings-form">
|
|
<div class="form-check form-switch mb-3">
|
|
<input class="form-check-input" type="checkbox" id="settings-switch-1" checked>
|
|
<label class="form-check-label" for="settings-switch-1">Project notifications</label>
|
|
</div>
|
|
<div class="form-check form-switch mb-3">
|
|
<input class="form-check-input" type="checkbox" id="settings-switch-2">
|
|
<label class="form-check-label" for="settings-switch-2">Web browser push notifications</label>
|
|
</div>
|
|
<div class="form-check form-switch mb-3">
|
|
<input class="form-check-input" type="checkbox" id="settings-switch-3" checked>
|
|
<label class="form-check-label" for="settings-switch-3">Mobile push notifications</label>
|
|
</div>
|
|
<div class="form-check form-switch mb-3">
|
|
<input class="form-check-input" type="checkbox" id="settings-switch-4">
|
|
<label class="form-check-label" for="settings-switch-4">Lorem ipsum notifications</label>
|
|
</div>
|
|
<div class="form-check form-switch mb-3">
|
|
<input class="form-check-input" type="checkbox" id="settings-switch-5">
|
|
<label class="form-check-label" for="settings-switch-5">Lorem ipsum notifications</label>
|
|
</div>
|
|
<div class="mt-3">
|
|
<button type="submit" class="btn app-btn-primary" >Save Changes</button>
|
|
</div>
|
|
</form>
|
|
</div><!--//app-card-body-->
|
|
</div><!--//app-card-->
|
|
</div>
|
|
</div><!--//row-->
|
|
<hr class="my-4">
|
|
</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>
|
|
|