You've already forked gentelella
1081 lines
59 KiB
HTML
Executable File
1081 lines
59 KiB
HTML
Executable File
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
|
<!-- Meta, title, CSS, favicons, etc. -->
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
|
<title>Gentelella Alela! | </title> <!-- Compiled CSS (includes Bootstrap, Font Awesome, and all vendor styles) -->
|
|
<script type="module" src="/src/main-minimal-modern.js"></script>
|
|
</head>
|
|
|
|
<body class="nav-md page-general-elements">
|
|
<div class="container body">
|
|
<div class="main_container">
|
|
<div class="col-md-3 left_col">
|
|
<div class="left_col scroll-view">
|
|
<div class="navbar nav_title" style="border: 0;">
|
|
<a href="index.html" class="site_title"><img src="images/logo.svg" alt="Gentelella Alela!" class="logo-full" style="height: 40px;"><img src="images/logo-icon.svg" alt="Gentelella" class="logo-icon" style="height: 30px; display: none;"></a>
|
|
</div>
|
|
|
|
<div class="clearfix"></div>
|
|
|
|
<!-- menu profile quick info -->
|
|
<div class="profile clearfix">
|
|
<div class="profile_pic">
|
|
<img src="images/img.jpg" alt="..." class="img-circle profile_img">
|
|
</div>
|
|
<div class="profile_info">
|
|
<span>Welcome,</span>
|
|
<h4>John Doe</h4>
|
|
</div>
|
|
</div>
|
|
<!-- /menu profile quick info -->
|
|
|
|
<br />
|
|
|
|
<!-- sidebar menu -->
|
|
<div id="sidebar-menu" class="main_menu_side hidden-print main_menu">
|
|
<div class="menu_section">
|
|
<h3>General</h3>
|
|
<ul class="nav side-menu">
|
|
<li><a><i class="fas fa-home"></i> Home <span class="fas fa-chevron-down"></span></a>
|
|
<ul class="nav child_menu">
|
|
<li><a href="index.html">Dashboard 1</a></li>
|
|
<li><a href="index2.html">Dashboard 2</a></li>
|
|
<li><a href="index3.html">Dashboard 3</a></li><li><a href="index4.html">Dashboard 4</a></li>
|
|
<li><a href="index3.html">Dashboard 3</a></li>
|
|
</ul>
|
|
<li><a><i class="fas fa-edit"></i> Forms <span class="fas fa-chevron-down"></span></a>
|
|
<ul class="nav child_menu">
|
|
<li><a href="form.html">General Form</a></li>
|
|
<li><a href="form_advanced.html">Advanced Components</a></li>
|
|
<li><a href="form_validation.html">Form Validation</a></li>
|
|
<li><a href="form_wizards.html">Form Wizard</a></li>
|
|
<li><a href="form_upload.html">Form Upload</a></li>
|
|
<li><a href="form_buttons.html">Form Buttons</a></li>
|
|
</ul>
|
|
<li><a><i class="fas fa-desktop"></i> UI Elements <span class="fas fa-chevron-down"></span></a>
|
|
<ul class="nav child_menu">
|
|
<li><a href="general_elements.html">General Elements</a></li>
|
|
<li><a href="media_gallery.html">Media Gallery</a></li>
|
|
<li><a href="typography.html">Typography</a></li>
|
|
<li><a href="icons.html">Icons</a></li>
|
|
|
|
<li><a href="widgets.html">Widgets</a></li>
|
|
<li><a href="invoice.html">Invoice</a></li>
|
|
<li><a href="inbox.html">Inbox</a></li>
|
|
<li><a href="calendar.html">Calendar</a></li>
|
|
</ul>
|
|
<li><a><i class="fas fa-table"></i> Tables <span class="fas fa-chevron-down"></span></a>
|
|
<ul class="nav child_menu">
|
|
<li><a href="tables.html">Tables</a></li>
|
|
<li><a href="tables_dynamic.html">Table Dynamic</a></li>
|
|
</ul>
|
|
<li><a><i class="fas fa-chart-column"></i> Data Presentation <span class="fas fa-chevron-down"></span></a>
|
|
<ul class="nav child_menu">
|
|
<li><a href="chartjs.html">Chart JS</a></li>
|
|
<li><a href="chartjs2.html">Chart JS2</a></li>
|
|
<li><a href="chart3.html">Chart JS3</a></li>
|
|
<li><a href="echarts.html">ECharts</a></li>
|
|
<li><a href="other_charts.html">Other Charts</a></li>
|
|
</ul>
|
|
<li><a><i class="fas fa-clone"></i>Layouts <span class="fas fa-chevron-down"></span></a>
|
|
<ul class="nav child_menu">
|
|
<li><a href="fixed_sidebar.html">Fixed Sidebar</a></li>
|
|
<li><a href="fixed_footer.html">Fixed Footer</a></li>
|
|
</ul>
|
|
</ul>
|
|
</div>
|
|
<div class="menu_section">
|
|
<h3>Live On</h3>
|
|
<ul class="nav side-menu">
|
|
<li><a><i class="fas fa-bug"></i> Additional Pages <span class="fas fa-chevron-down"></span></a>
|
|
<ul class="nav child_menu">
|
|
<li><a href="e_commerce.html">E-commerce</a></li>
|
|
<li><a href="projects.html">Projects</a></li>
|
|
<li><a href="project_detail.html">Project Detail</a></li>
|
|
<li><a href="contacts.html">Contacts</a></li>
|
|
<li><a href="profile.html">Profile</a></li>
|
|
</ul>
|
|
<li><a><i class="fas fa-window-restore"></i> Extras <span class="fas fa-chevron-down"></span></a>
|
|
<ul class="nav child_menu">
|
|
<li><a href="page_403.html">403 Error</a></li>
|
|
<li><a href="page_404.html">404 Error</a></li>
|
|
<li><a href="page_500.html">500 Error</a></li>
|
|
<li><a href="plain_page.html">Plain Page</a></li>
|
|
<li><a href="login.html">Login Page</a></li>
|
|
<li><a href="pricing_tables.html">Pricing Tables</a></li>
|
|
</ul>
|
|
<li><a><i class="fas fa-sitemap"></i> Multilevel Menu <span class="fas fa-chevron-down"></span></a>
|
|
<ul class="nav child_menu">
|
|
<li><a href="#level1_1">Level One</a></li>
|
|
<li><a>Level One<span class="fas fa-chevron-down"></span></a>
|
|
<ul class="nav child_menu">
|
|
<li class="sub_menu"><a href="level2.html">Level Two</a>
|
|
<li><a href="#level2_1">Level Two</a>
|
|
<li><a href="#level2_2">Level Two</a>
|
|
</ul>
|
|
<li><a href="#level1_2">Level One</a></li>
|
|
</ul>
|
|
<li><a href="landing.html"><i class="fas fa-laptop"></i> Landing Page</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
<!-- /sidebar menu -->
|
|
|
|
<!-- /menu footer buttons -->
|
|
<div class="sidebar-footer hidden-small">
|
|
<a data-bs-toggle="tooltip" data-bs-placement="top" title="Settings">
|
|
<span class="fas fa-cog" aria-hidden="true"></span>
|
|
</a>
|
|
<a data-bs-toggle="tooltip" data-bs-placement="top" title="FullScreen">
|
|
<span class="fas fa-expand" aria-hidden="true"></span>
|
|
</a>
|
|
<a data-bs-toggle="tooltip" data-bs-placement="top" title="Lock">
|
|
<span class="fas fa-eye-slash" aria-hidden="true"></span>
|
|
</a>
|
|
<a data-bs-toggle="tooltip" data-bs-placement="top" title="Logout" href="login.html">
|
|
<span class="fas fa-power-off" aria-hidden="true"></span>
|
|
</a>
|
|
</div>
|
|
<!-- /menu footer buttons -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- top navigation -->
|
|
<div class="top_nav">
|
|
<div class="nav_menu">
|
|
<div class="nav toggle">
|
|
<a id="menu_toggle"><i class="fas fa-bars"></i></a>
|
|
</div>
|
|
<nav class="nav navbar-nav">
|
|
<ul class="navbar-right">
|
|
<li class="nav-item dropdown open" style="padding-left: 15px;">
|
|
<a href="javascript:;" class="user-profile dropdown-toggle" aria-haspopup="true" id="navbarDropdown" data-bs-toggle="dropdown" aria-expanded="false">
|
|
<img src="images/img.jpg" alt="">John Doe
|
|
</a>
|
|
<div class="dropdown-menu dropdown-usermenu float-end" aria-labelledby="navbarDropdown">
|
|
<a class="dropdown-item" href="javascript:;"> Profile</a>
|
|
<a class="dropdown-item" href="javascript:;">
|
|
<span class="badge bg-red float-end">50%</span>
|
|
<span>Settings</span>
|
|
</a>
|
|
<a class="dropdown-item" href="javascript:;">Help</a>
|
|
<a class="dropdown-item" href="login.html"><i class="fas fa-sign-out-alt float-end"></i> Log Out</a>
|
|
</div>
|
|
|
|
<li role="presentation" class="nav-item dropdown open">
|
|
<a href="javascript:;" class="dropdown-toggle info-number" id="navbarDropdown1" data-bs-toggle="dropdown" aria-expanded="false">
|
|
<i class="fas fa-envelope"></i>
|
|
<span class="badge bg-green">6</span>
|
|
</a>
|
|
<ul class="dropdown-menu list-unstyled msg_list" role="menu" aria-labelledby="navbarDropdown1">
|
|
<li class="nav-item">
|
|
<a class="dropdown-item">
|
|
<span class="image"><img src="images/img.jpg" alt="Profile Image" /></span>
|
|
<span>
|
|
<span>John Smith</span>
|
|
<span class="time">3 mins ago</span>
|
|
</span>
|
|
<span class="message">
|
|
Film festivals used to be do-or-die moments for movie makers. They were where...
|
|
</span>
|
|
</a>
|
|
<li class="nav-item">
|
|
<a class="dropdown-item">
|
|
<span class="image"><img src="images/img.jpg" alt="Profile Image" /></span>
|
|
<span>
|
|
<span>John Smith</span>
|
|
<span class="time">3 mins ago</span>
|
|
</span>
|
|
<span class="message">
|
|
Film festivals used to be do-or-die moments for movie makers. They were where...
|
|
</span>
|
|
</a>
|
|
<li class="nav-item">
|
|
<a class="dropdown-item">
|
|
<span class="image"><img src="images/img.jpg" alt="Profile Image" /></span>
|
|
<span>
|
|
<span>John Smith</span>
|
|
<span class="time">3 mins ago</span>
|
|
</span>
|
|
<span class="message">
|
|
Film festivals used to be do-or-die moments for movie makers. They were where...
|
|
</span>
|
|
</a>
|
|
<li class="nav-item">
|
|
<a class="dropdown-item">
|
|
<span class="image"><img src="images/img.jpg" alt="Profile Image" /></span>
|
|
<span>
|
|
<span>John Smith</span>
|
|
<span class="time">3 mins ago</span>
|
|
</span>
|
|
<span class="message">
|
|
Film festivals used to be do-or-die moments for movie makers. They were where...
|
|
</span>
|
|
</a>
|
|
<li class="nav-item">
|
|
<div class="text-center">
|
|
<a class="dropdown-item">
|
|
<strong>See All Alerts</strong>
|
|
<i class="fas fa-angle-right"></i>
|
|
</a>
|
|
</div>
|
|
</ul>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
<!-- /top navigation -->
|
|
|
|
<!-- page content -->
|
|
<div class="right_col" role="main">
|
|
<div class="">
|
|
<div class="page-title">
|
|
<div class="title_left">
|
|
<h3>General Elements</h3>
|
|
</div>
|
|
|
|
<div class="title_right">
|
|
<div class="col-md-5 col-sm-5 mb-3 float-end top_search">
|
|
<div class="input-group search-bar-fix">
|
|
<input type="text" class="form-control" placeholder="Search for...">
|
|
<button class="btn btn-outline-secondary" type="button">
|
|
<i class="fas fa-search"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="clearfix"></div>
|
|
|
|
<div class="">
|
|
<div class="col-md-6 col-sm-6">
|
|
<div class="x_panel">
|
|
<div class="x_title">
|
|
<h2><i class="fas fa-bars"></i> Tabs <small>Float left</small></h4>
|
|
<ul class="nav navbar-right panel_toolbox">
|
|
<li><a class="collapse-link"><i class="fas fa-chevron-up"></i></a>
|
|
<li class="dropdown">
|
|
<a href="#" class="dropdown-toggle" data-bs-toggle="dropdown" role="button" aria-expanded="false"><i class="fas fa-wrench"></i></a>
|
|
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
|
|
<a class="dropdown-item" href="#">Settings 1</a>
|
|
<a class="dropdown-item" href="#">Settings 2</a>
|
|
</div>
|
|
<li><a class="btn-btn-close-link"><i class="fas fa-times"></i></a>
|
|
</ul>
|
|
<div class="clearfix"></div>
|
|
</div>
|
|
<div class="x_content">
|
|
|
|
<ul class="nav nav-tabs bar_tabs" id="myTab" role="tablist">
|
|
<li class="nav-item">
|
|
<a class="nav-link active" id="home-tab" data-bs-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
|
|
<li class="nav-item">
|
|
<a class="nav-link" id="profile-tab" data-bs-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
|
|
<li class="nav-item">
|
|
<a class="nav-link" id="contact-tab" data-bs-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
|
|
</ul>
|
|
<div class="tab-content" id="myTabContent">
|
|
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
|
|
Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher
|
|
synth. Cosby sweater eu banh mi, qui irure terr.
|
|
</div>
|
|
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
|
|
Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo
|
|
booth letterpress, commodo enim craft beer mlkshk aliquip
|
|
</div>
|
|
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
|
|
xxFood truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo
|
|
booth letterpress, commodo enim craft beer mlkshk
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="col-md-6 col-sm-6">
|
|
<div class="x_panel">
|
|
<div class="x_title">
|
|
<h2><i class="fas fa-bars"></i> Tabs <small>Float right</small></h4>
|
|
<ul class="nav navbar-right panel_toolbox">
|
|
<li><a class="collapse-link"><i class="fas fa-chevron-up"></i></a>
|
|
<li class="dropdown">
|
|
<a href="#" class="dropdown-toggle" data-bs-toggle="dropdown" role="button" aria-expanded="false"><i class="fas fa-wrench"></i></a>
|
|
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
|
|
<a class="dropdown-item" href="#">Settings 1</a>
|
|
<a class="dropdown-item" href="#">Settings 2</a>
|
|
</div>
|
|
<li><a class="btn-btn-close-link"><i class="fas fa-times"></i></a>
|
|
</ul>
|
|
<div class="clearfix"></div>
|
|
</div>
|
|
<div class="x_content">
|
|
|
|
<ul class="nav nav-tabs justify-content-end bar_tabs" id="myTab" role="tablist">
|
|
<li class="nav-item">
|
|
<a class="nav-link active" id="home-tab" data-bs-toggle="tab" href="#home1" role="tab" aria-controls="home" aria-selected="true">Home</a>
|
|
<li class="nav-item">
|
|
<a class="nav-link" id="profile-tab" data-bs-toggle="tab" href="#profile1" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
|
|
<li class="nav-item">
|
|
<a class="nav-link" id="contact-tab" data-bs-toggle="tab" href="#contact1" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
|
|
</ul>
|
|
<div class="tab-content" id="myTabContent">
|
|
<div class="tab-pane fade show active" id="home1" role="tabpanel" aria-labelledby="home-tab">
|
|
Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher
|
|
synth. Cosby sweater eu banh mi, qui irure terr.
|
|
</div>
|
|
<div class="tab-pane fade" id="profile1" role="tabpanel" aria-labelledby="profile-tab">
|
|
Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo
|
|
booth letterpress, commodo enim craft beer mlkshk aliquip
|
|
</div>
|
|
<div class="tab-pane fade" id="contact1" role="tabpanel" aria-labelledby="contact-tab">
|
|
xxFood truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo
|
|
booth letterpress, commodo enim craft beer mlkshk
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="clearfix"></div>
|
|
|
|
|
|
<div class="col-md-6 col-sm-6">
|
|
<div class="x_panel">
|
|
<div class="x_title">
|
|
<h2><i class="fas fa-bars"></i> Vertical Tabs <small>Float left</small></h4>
|
|
<ul class="nav navbar-right panel_toolbox">
|
|
<li><a class="collapse-link"><i class="fas fa-chevron-up"></i></a>
|
|
<li class="dropdown">
|
|
<a href="#" class="dropdown-toggle" data-bs-toggle="dropdown" role="button" aria-expanded="false"><i class="fas fa-wrench"></i></a>
|
|
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
|
|
<a class="dropdown-item" href="#">Settings 1</a>
|
|
<a class="dropdown-item" href="#">Settings 2</a>
|
|
</div>
|
|
<li><a class="btn-btn-close-link"><i class="fas fa-times"></i></a>
|
|
</ul>
|
|
<div class="clearfix"></div>
|
|
</div>
|
|
<div class="x_content">
|
|
|
|
<div class="col-xs-3">
|
|
<!-- required for floating -->
|
|
<!-- Nav tabs -->
|
|
<div class="nav nav-tabs flex-column bar_tabs" id="v-pills-tab" role="tablist" aria-orientation="vertical">
|
|
<a class="nav-link active" id="v-pills-home-tab" data-bs-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</a>
|
|
<a class="nav-link" id="v-pills-profile-tab" data-bs-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</a>
|
|
<a class="nav-link" id="v-pills-messages-tab" data-bs-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</a>
|
|
<a class="nav-link" id="v-pills-settings-tab" data-bs-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</a>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="col-xs-9">
|
|
<!-- Tab panes -->
|
|
|
|
<div class="tab-content" id="v-pills-tabContent">
|
|
<div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">Home Tab</div>
|
|
<div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">... content</div>
|
|
<div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">...content</div>
|
|
<div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">...content</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="clearfix"></div>
|
|
|
|
</div>
|
|
</div>
|
|
</div><div class="col-md-6 col-sm-6">
|
|
<div class="x_panel">
|
|
<div class="x_title">
|
|
<h2><i class="fas fa-bars"></i> Vertical Tabs <small>Float left</small></h4>
|
|
<ul class="nav navbar-right panel_toolbox">
|
|
<li><a class="collapse-link"><i class="fas fa-chevron-up"></i></a>
|
|
<li class="dropdown">
|
|
<a href="#" class="dropdown-toggle" data-bs-toggle="dropdown" role="button" aria-expanded="false"><i class="fas fa-wrench"></i></a>
|
|
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
|
|
<a class="dropdown-item" href="#">Settings 1</a>
|
|
<a class="dropdown-item" href="#">Settings 2</a>
|
|
</div>
|
|
<li><a class="btn-btn-close-link"><i class="fas fa-times"></i></a>
|
|
</ul>
|
|
<div class="clearfix"></div>
|
|
</div>
|
|
<div class="x_content">
|
|
|
|
<div class="col-xs-3">
|
|
<!-- required for floating -->
|
|
<!-- Nav tabs -->
|
|
<div class="nav nav-tabs flex-column bar_tabs" id="v-pills-tab" role="tablist" aria-orientation="vertical">
|
|
<a class="nav-link active" id="v-pills-home-tab" data-bs-toggle="pill" href="#v-pills-home1" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</a>
|
|
<a class="nav-link" id="v-pills-profile-tab" data-bs-toggle="pill" href="#v-pills-profile1" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</a>
|
|
<a class="nav-link" id="v-pills-messages-tab" data-bs-toggle="pill" href="#v-pills-messages1" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</a>
|
|
<a class="nav-link" id="v-pills-settings-tab" data-bs-toggle="pill" href="#v-pills-settings1" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</a>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="col-xs-9">
|
|
<!-- Tab panes -->
|
|
|
|
<div class="tab-content" id="v-pills-tabContent">
|
|
<div class="tab-pane fade show active" id="v-pills-home1" role="tabpanel" aria-labelledby="v-pills-home-tab">Home Tab</div>
|
|
<div class="tab-pane fade" id="v-pills-profile1" role="tabpanel" aria-labelledby="v-pills-profile-tab">... content</div>
|
|
<div class="tab-pane fade" id="v-pills-messages1" role="tabpanel" aria-labelledby="v-pills-messages-tab">...content</div>
|
|
<div class="tab-pane fade" id="v-pills-settings1" role="tabpanel" aria-labelledby="v-pills-settings-tab">...content</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="clearfix"></div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="clearfix"></div>
|
|
|
|
|
|
<div class="col-md-6 col-sm-6">
|
|
<div class="x_panel">
|
|
<div class="x_title">
|
|
<h2><i class="fas fa-align-left"></i> Collapsible / Accordion <small>Sessions</small></h4>
|
|
<ul class="nav navbar-right panel_toolbox">
|
|
<li><a class="collapse-link"><i class="fas fa-chevron-up"></i></a>
|
|
<li class="dropdown">
|
|
<a href="#" class="dropdown-toggle" data-bs-toggle="dropdown" role="button" aria-expanded="false"><i class="fas fa-wrench"></i></a>
|
|
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
|
|
<a class="dropdown-item" href="#">Settings 1</a>
|
|
<a class="dropdown-item" href="#">Settings 2</a>
|
|
</div>
|
|
<li><a class="btn-btn-close-link"><i class="fas fa-times"></i></a>
|
|
</ul>
|
|
<div class="clearfix"></div>
|
|
</div>
|
|
<div class="x_content">
|
|
|
|
<!-- start accordion -->
|
|
<div class="accordion" id="accordion" role="tablist" aria-multiselectable="true">
|
|
<div class="panel">
|
|
<a class="panel-heading" role="tab" id="headingOne" data-bs-toggle="collapse" data-bs-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
|
|
<h4 class="panel-title">Collapsible Group Items #1</h4>
|
|
</a>
|
|
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
|
|
<div class="panel-body">
|
|
<table class="table table-bordered">
|
|
<thead>
|
|
<tr>
|
|
<th>#</th>
|
|
<th>First Name</th>
|
|
<th>Last Name</th>
|
|
<th>Username</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<th scope="row">1</th>
|
|
<td>Mark</td>
|
|
<td>Otto</td>
|
|
<td>@mdo</td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">2</th>
|
|
<td>Jacob</td>
|
|
<td>Thornton</td>
|
|
<td>@fat</td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">3</th>
|
|
<td>Larry</td>
|
|
<td>the Bird</td>
|
|
<td>@twitter</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="panel">
|
|
<a class="panel-heading collapsed" role="tab" id="headingTwo" data-bs-toggle="collapse" data-bs-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
|
|
<h4 class="panel-title">Collapsible Group Items #2</h4>
|
|
</a>
|
|
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
|
|
<div class="panel-body">
|
|
<p><strong>Collapsible Item 2 data</strong>
|
|
</p>
|
|
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor,
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="panel">
|
|
<a class="panel-heading collapsed" role="tab" id="headingThree" data-bs-toggle="collapse" data-bs-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
|
|
<h4 class="panel-title">Collapsible Group Items #3</h4>
|
|
</a>
|
|
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
|
|
<div class="panel-body">
|
|
<p><strong>Collapsible Item 3 data</strong>
|
|
</p>
|
|
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- end of accordion -->
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="col-md-6 col-sm-6">
|
|
<div class="x_panel">
|
|
<div class="x_title">
|
|
<h2><i class="fas fa-align-left"></i> Collapsible / Accordion <small>Sessions</small></h4>
|
|
<ul class="nav navbar-right panel_toolbox">
|
|
<li><a class="collapse-link"><i class="fas fa-chevron-up"></i></a>
|
|
<li class="dropdown">
|
|
<a href="#" class="dropdown-toggle" data-bs-toggle="dropdown" role="button" aria-expanded="false"><i class="fas fa-wrench"></i></a>
|
|
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
|
|
<a class="dropdown-item" href="#">Settings 1</a>
|
|
<a class="dropdown-item" href="#">Settings 2</a>
|
|
</div>
|
|
<li><a class="btn-btn-close-link"><i class="fas fa-times"></i></a>
|
|
</ul>
|
|
<div class="clearfix"></div>
|
|
</div>
|
|
<div class="x_content">
|
|
|
|
<!-- start accordion -->
|
|
<div class="accordion" id="accordion1" role="tablist" aria-multiselectable="true">
|
|
<div class="panel">
|
|
<a class="panel-heading" role="tab" id="headingOne1" data-bs-toggle="collapse" data-bs-parent="#accordion1" href="#collapseOne1" aria-expanded="true" aria-controls="collapseOne">
|
|
<h4 class="panel-title">Collapsible Group Item #1</h4>
|
|
</a>
|
|
<div id="collapseOne1" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
|
|
<div class="panel-body">
|
|
<table class="table table-striped">
|
|
<thead>
|
|
<tr>
|
|
<th>#</th>
|
|
<th>First Name</th>
|
|
<th>Last Name</th>
|
|
<th>Username</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<th scope="row">1</th>
|
|
<td>Mark</td>
|
|
<td>Otto</td>
|
|
<td>@mdo</td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">2</th>
|
|
<td>Jacob</td>
|
|
<td>Thornton</td>
|
|
<td>@fat</td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">3</th>
|
|
<td>Larry</td>
|
|
<td>the Bird</td>
|
|
<td>@twitter</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="panel">
|
|
<a class="panel-heading collapsed" role="tab" id="headingTwo1" data-bs-toggle="collapse" data-bs-parent="#accordion1" href="#collapseTwo1" aria-expanded="false" aria-controls="collapseTwo">
|
|
<h4 class="panel-title">Collapsible Group Item #2</h4>
|
|
</a>
|
|
<div id="collapseTwo1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
|
|
<div class="panel-body">
|
|
<p><strong>Collapsible Item 2 data</strong>
|
|
</p>
|
|
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor,
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="panel">
|
|
<a class="panel-heading collapsed" role="tab" id="headingThree1" data-bs-toggle="collapse" data-bs-parent="#accordion1" href="#collapseThree1" aria-expanded="false" aria-controls="collapseThree">
|
|
<h4 class="panel-title">Collapsible Group Item #3</h4>
|
|
</a>
|
|
<div id="collapseThree1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
|
|
<div class="panel-body">
|
|
<p><strong>Collapsible Item 3 data</strong>
|
|
</p>
|
|
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- end of accordion -->
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="clearfix"></div>
|
|
|
|
<div class="">
|
|
|
|
<div class="col-md-6 col-sm-6">
|
|
<div class="x_panel">
|
|
<div class="x_title">
|
|
<h4>Tooltips <small>Hover to view</small></h4>
|
|
<ul class="nav navbar-right panel_toolbox">
|
|
<li><a class="collapse-link"><i class="fas fa-chevron-up"></i></a>
|
|
<li class="dropdown">
|
|
<a href="#" class="dropdown-toggle" data-bs-toggle="dropdown" role="button" aria-expanded="false"><i class="fas fa-wrench"></i></a>
|
|
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
|
|
<a class="dropdown-item" href="#">Settings 1</a>
|
|
<a class="dropdown-item" href="#">Settings 2</a>
|
|
</div>
|
|
<li><a class="btn-btn-close-link"><i class="fas fa-times"></i></a>
|
|
</ul>
|
|
<div class="clearfix"></div>
|
|
</div>
|
|
<div class="x_content">
|
|
|
|
<p>Add small overlays of content for housing secondary information.</p>
|
|
<!-- start pop-over -->
|
|
<div class="bs-example-popovers">
|
|
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on left">Left</button>
|
|
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">Top</button>
|
|
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom">Bottom</button>
|
|
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right">Right</button>
|
|
</div>
|
|
<!-- end pop-over -->
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="col-md-6 col-sm-6">
|
|
<div class="x_panel">
|
|
<div class="x_title">
|
|
<h4>Tooltips <small>Hover to view</small></h4>
|
|
<ul class="nav navbar-right panel_toolbox">
|
|
<li><a class="collapse-link"><i class="fas fa-chevron-up"></i></a>
|
|
<li class="dropdown">
|
|
<a href="#" class="dropdown-toggle" data-bs-toggle="dropdown" role="button" aria-expanded="false"><i class="fas fa-wrench"></i></a>
|
|
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
|
|
<a class="dropdown-item" href="#">Settings 1</a>
|
|
<a class="dropdown-item" href="#">Settings 2</a>
|
|
</div>
|
|
<li><a class="btn-btn-close-link"><i class="fas fa-times"></i></a>
|
|
</ul>
|
|
<div class="clearfix"></div>
|
|
</div>
|
|
<div class="x_content">
|
|
|
|
<p>Hover over the links below to see tooltips:</p>
|
|
|
|
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on left">Tooltip left</button>
|
|
|
|
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">Tooltip top</button>
|
|
|
|
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom">Tooltip bottom</button>
|
|
|
|
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right">Tooltip right</button>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-6 col-sm-6">
|
|
<div class="x_panel">
|
|
<div class="x_title">
|
|
<h4>Toast Notifications <small>Click to demo</small></h4>
|
|
<ul class="nav navbar-right panel_toolbox">
|
|
<li><a class="collapse-link"><i class="fas fa-chevron-up"></i></a>
|
|
<li class="dropdown">
|
|
<a href="#" class="dropdown-toggle" data-bs-toggle="dropdown" role="button" aria-expanded="false"><i class="fas fa-wrench"></i></a>
|
|
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
|
|
<a class="dropdown-item" href="#">Settings 1</a>
|
|
<a class="dropdown-item" href="#">Settings 2</a>
|
|
</div>
|
|
<li><a class="btn-btn-close-link"><i class="fas fa-times"></i></a>
|
|
</ul>
|
|
<div class="clearfix"></div>
|
|
</div>
|
|
<div class="x_content">
|
|
<p>Click the buttons below to display Bootstrap 5 toast notifications:</p>
|
|
<div class="row">
|
|
<div class="col-md-6 mb-2">
|
|
<button type="button" id="toast-success-btn" class="btn btn-success btn-sm w-100">
|
|
<i class="fas fa-check"></i> Success Toast
|
|
</button>
|
|
</div>
|
|
<div class="col-md-6 mb-2">
|
|
<button type="button" id="toast-error-btn" class="btn btn-danger btn-sm w-100">
|
|
<i class="fas fa-times"></i> Error Toast
|
|
</button>
|
|
</div>
|
|
<div class="col-md-6 mb-2">
|
|
<button type="button" id="toast-info-btn" class="btn btn-info btn-sm w-100">
|
|
<i class="fas fa-info"></i> Info Toast
|
|
</button>
|
|
</div>
|
|
<div class="col-md-6 mb-2">
|
|
<button type="button" id="toast-warning-btn" class="btn btn-warning btn-sm w-100">
|
|
<i class="fas fa-exclamation-triangle"></i> Warning Toast
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-6 col-sm-6">
|
|
<div class="x_panel">
|
|
<div class="x_title">
|
|
<h4>Modals <small>Click to demo</small></h4>
|
|
<ul class="nav navbar-right panel_toolbox">
|
|
<li><a class="collapse-link"><i class="fas fa-chevron-up"></i></a>
|
|
<li class="dropdown">
|
|
<a href="#" class="dropdown-toggle" data-bs-toggle="dropdown" role="button" aria-expanded="false"><i class="fas fa-wrench"></i></a>
|
|
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
|
|
<a class="dropdown-item" href="#">Settings 1</a>
|
|
<a class="dropdown-item" href="#">Settings 2</a>
|
|
</div>
|
|
<li><a class="btn-btn-close-link"><i class="fas fa-times"></i></a>
|
|
</ul>
|
|
<div class="clearfix"></div>
|
|
</div>
|
|
<div class="x_content">
|
|
<p>Click the buttons below to launch Bootstrap 5 modals:</p>
|
|
<div class="row">
|
|
<div class="col-md-6 mb-2">
|
|
<button type="button" class="btn btn-primary btn-sm w-100" data-bs-toggle="modal" data-bs-target="#demoModal">
|
|
<i class="fas fa-window-maximize"></i> Standard Modal
|
|
</button>
|
|
</div>
|
|
<div class="col-md-6 mb-2">
|
|
<button type="button" class="btn btn-secondary btn-sm w-100" data-bs-toggle="modal" data-bs-target="#largeDemoModal">
|
|
<i class="fas fa-expand"></i> Large Modal
|
|
</button>
|
|
</div>
|
|
<div class="col-md-6 mb-2">
|
|
<button type="button" class="btn btn-outline-primary btn-sm w-100" data-bs-toggle="modal" data-bs-target="#smallDemoModal">
|
|
<i class="fas fa-compress"></i> Small Modal
|
|
</button>
|
|
</div>
|
|
<div class="col-md-6 mb-2">
|
|
<button type="button" class="btn btn-outline-secondary btn-sm w-100" data-bs-toggle="popover" data-bs-placement="top" title="Popover Title" data-bs-content="This is a sample popover content triggered by clicking this button.">
|
|
<i class="fas fa-comment"></i> Popover Demo
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-6 col-sm-6">
|
|
<div class="x_panel">
|
|
<div class="x_title">
|
|
<h4>Daily active users <small>Sessions</small></h4>
|
|
<ul class="nav navbar-right panel_toolbox">
|
|
<li><a class="collapse-link"><i class="fas fa-chevron-up"></i></a>
|
|
<li class="dropdown">
|
|
<a href="#" class="dropdown-toggle" data-bs-toggle="dropdown" role="button" aria-expanded="false"><i class="fas fa-wrench"></i></a>
|
|
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
|
|
<a class="dropdown-item" href="#">Settings 1</a>
|
|
<a class="dropdown-item" href="#">Settings 2</a>
|
|
</div>
|
|
<li><a class="btn-btn-close-link"><i class="fas fa-times"></i></a>
|
|
</ul>
|
|
<div class="clearfix"></div>
|
|
</div>
|
|
<div class="x_content">
|
|
<ul class="list-unstyled timeline">
|
|
<li>
|
|
<div class="block">
|
|
<div class="tags">
|
|
<a href="" class="tag">
|
|
<span>Entertainment</span>
|
|
</a>
|
|
</div>
|
|
<div class="block_content">
|
|
<h2 class="title">
|
|
<a>Who Needs Sundance When You've Got Crowdfunding?</a>
|
|
</h4>
|
|
<div class="byline">
|
|
<span>13 hours ago</span> by <a>Jane Smith</a>
|
|
</div>
|
|
<p class="excerpt">Film festivals used to be do-or-die moments for movie makers. They were where you met the producers that could fund your project, and if the buyers liked your flick, they'd pay to Fast-forward and… <a>Read More</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<li>
|
|
<div class="block">
|
|
<div class="tags">
|
|
<a href="" class="tag">
|
|
<span>Entertainment</span>
|
|
</a>
|
|
</div>
|
|
<div class="block_content">
|
|
<h2 class="title">
|
|
<a>Who Needs Sundance When You've Got Crowdfunding?</a>
|
|
</h4>
|
|
<div class="byline">
|
|
<span>13 hours ago</span> by <a>Jane Smith</a>
|
|
</div>
|
|
<p class="excerpt">Film festivals used to be do-or-die moments for movie makers. They were where you met the producers that could fund your project, and if the buyers liked your flick, they'd pay to Fast-forward and… <a>Read More</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<li>
|
|
<div class="block">
|
|
<div class="tags">
|
|
<a href="" class="tag">
|
|
<span>Entertainment</span>
|
|
</a>
|
|
</div>
|
|
<div class="block_content">
|
|
<h2 class="title">
|
|
<a>Who Needs Sundance When You've Got Crowdfunding?</a>
|
|
</h4>
|
|
<div class="byline">
|
|
<span>13 hours ago</span> by <a>Jane Smith</a>
|
|
</div>
|
|
<p class="excerpt">Film festivals used to be do-or-die moments for movie makers. They were where you met the producers that could fund your project, and if the buyers liked your flick, they'd pay to Fast-forward and… <a>Read More</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</ul>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-6 col-sm-6">
|
|
<div class="x_panel">
|
|
<div class="x_title">
|
|
<h4>Daily active users <small>Sessions</small></h4>
|
|
<ul class="nav navbar-right panel_toolbox">
|
|
<li><a class="collapse-link"><i class="fas fa-chevron-up"></i></a>
|
|
<li class="dropdown">
|
|
<a href="#" class="dropdown-toggle" data-bs-toggle="dropdown" role="button" aria-expanded="false"><i class="fas fa-wrench"></i></a>
|
|
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
|
|
<a class="dropdown-item" href="#">Settings 1</a>
|
|
<a class="dropdown-item" href="#">Settings 2</a>
|
|
</div>
|
|
<li><a class="btn-btn-close-link"><i class="fas fa-times"></i></a>
|
|
</ul>
|
|
<div class="clearfix"></div>
|
|
</div>
|
|
<div class="x_content">
|
|
<ul class="list-unstyled msg_list">
|
|
<li>
|
|
<a>
|
|
<span class="image">
|
|
<img src="images/img.jpg" alt="img" />
|
|
</span>
|
|
<span>
|
|
<span>John Smith</span>
|
|
<span class="time">3 mins ago</span>
|
|
</span>
|
|
<span class="message">
|
|
Film festivals used to be do-or-die moments for movie makers. They were where you met the producers that
|
|
</span>
|
|
</a>
|
|
<li>
|
|
<a>
|
|
<span class="image">
|
|
<img src="images/img.jpg" alt="img" />
|
|
</span>
|
|
<span>
|
|
<span>John Smith</span>
|
|
<span class="time">3 mins ago</span>
|
|
</span>
|
|
<span class="message">
|
|
Film festivals used to be do-or-die moments for movie makers. They were where you met the producers that
|
|
</span>
|
|
</a>
|
|
<li>
|
|
<a>
|
|
<span class="image">
|
|
<img src="images/img.jpg" alt="img" />
|
|
</span>
|
|
<span>
|
|
<span>John Smith</span>
|
|
<span class="time">3 mins ago</span>
|
|
</span>
|
|
<span class="message">
|
|
Film festivals used to be do-or-die moments for movie makers. They were where you met the producers that
|
|
</span>
|
|
</a>
|
|
<li>
|
|
<a>
|
|
<span class="image">
|
|
<img src="images/img.jpg" alt="img" />
|
|
</span>
|
|
<span>
|
|
<span>John Smith</span>
|
|
<span class="time">3 mins ago</span>
|
|
</span>
|
|
<span class="message">
|
|
Film festivals used to be do-or-die moments for movie makers. They were where you met the producers that
|
|
</span>
|
|
</a>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="clearfix"></div>
|
|
</div>
|
|
<!-- /page content -->
|
|
|
|
<!-- footer content -->
|
|
<footer>
|
|
<div class="float-end">
|
|
Gentelella - Bootstrap Admin Template by <a href="https://colorlib.com">Colorlib</a>
|
|
</div>
|
|
<div class="clearfix"></div>
|
|
</footer>
|
|
<!-- /footer content -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Demo Modals -->
|
|
<!-- Standard Modal -->
|
|
<div class="modal fade" id="demoModal" tabindex="-1" aria-labelledby="demoModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="demoModalLabel">Demo Modal</h5>
|
|
<button type="button" class="btn-btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p>This is a standard Bootstrap 5 modal example. You can include any content here including forms, images, or other components.</p>
|
|
<p>Modal content is fully responsive and will adapt to different screen sizes.</p>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
|
|
<button type="button" class="btn btn-primary">Save changes</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Large Modal -->
|
|
<div class="modal fade" id="largeDemoModal" tabindex="-1" aria-labelledby="largeDemoModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-lg">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="largeDemoModalLabel">Large Modal</h5>
|
|
<button type="button" class="btn-btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<h6>Left Column</h6>
|
|
<p>This is a large modal that provides more space for content. You can use the grid system inside modals.</p>
|
|
<ul>
|
|
<li>More content space</li>
|
|
<li>Better for complex forms</li>
|
|
<li>Responsive design</li>
|
|
</ul>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<h6>Right Column</h6>
|
|
<p>The large modal is perfect for displaying detailed information or more complex interfaces.</p>
|
|
<div class="mb-3">
|
|
<label for="exampleInput">Example Input</label>
|
|
<input type="text" class="form-control" id="exampleInput" placeholder="Example input">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
|
|
<button type="button" class="btn btn-primary">Confirm</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Small Modal -->
|
|
<div class="modal fade" id="smallDemoModal" tabindex="-1" aria-labelledby="smallDemoModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-sm">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="smallDemoModalLabel">Small Modal</h5>
|
|
<button type="button" class="btn-btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p>This is a small modal for quick confirmations or simple messages.</p>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">No</button>
|
|
<button type="button" class="btn btn-sm btn-primary">Yes</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Toast Container -->
|
|
<div class="toast-container position-fixed bottom-0 end-0 p-3" style="z-index: 1080">
|
|
<!-- Toasts will be appended here -->
|
|
</div>
|
|
|
|
<div id="custom_notifications" class="custom-notifications dsp_none">
|
|
<ul class="list-unstyled notifications clearfix" data-tabbed_notifications="notif-group">
|
|
</ul>
|
|
<div class="clearfix"></div>
|
|
<div id="notif-group" class="tabbed_notifications"></div>
|
|
</div> <!-- Compiled JavaScript (includes jQuery, Bootstrap, and all vendor scripts) -->
|
|
|
|
|
|
</body>
|
|
</html>
|
|
|
|
<script type="module">
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
// Enable tooltips
|
|
const tooltipTriggerList = Array.from(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
|
|
tooltipTriggerList.forEach(el => new bootstrap.Tooltip(el));
|
|
|
|
// Enable popovers
|
|
const popoverTriggerList = Array.from(document.querySelectorAll('[data-bs-toggle="popover"]'));
|
|
popoverTriggerList.forEach(el => new bootstrap.Popover(el));
|
|
|
|
// Toast factory
|
|
const toastContainer = document.querySelector('.toast-container');
|
|
const showToast = (variant, message) => {
|
|
const toastEl = document.createElement('div');
|
|
toastEl.className = `toast align-items-center text-bg-${variant} border-0`;
|
|
toastEl.role = 'alert';
|
|
toastEl.innerHTML = `
|
|
<div class="d-flex">
|
|
<div class="toast-body">${message}</div>
|
|
<button type="button" class="btn-btn-close btn-btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
|
|
</div>`;
|
|
toastContainer.appendChild(toastEl);
|
|
const toastObj = new bootstrap.Toast(toastEl, { delay: 3000 });
|
|
toastObj.show();
|
|
toastEl.addEventListener('hidden.bs.toast', () => toastEl.remove());
|
|
};
|
|
|
|
document.getElementById('toast-success-btn')?.addEventListener('click', () => showToast('success', 'Success toast'));
|
|
document.getElementById('toast-error-btn')?.addEventListener('click', () => showToast('danger', 'Error toast'));
|
|
document.getElementById('toast-info-btn')?.addEventListener('click', () => showToast('info', 'Info toast'));
|
|
document.getElementById('toast-warning-btn')?.addEventListener('click', () => showToast('warning', 'Warning toast'));
|
|
});
|
|
</script> |