Tryag File Manager
Home
||
Turbo Force
||
B-F Config_Cpanel
Current Path :
/
home
/
nongapp.eemo.co.kr
/
public_html
/
www
/
Or
Select Your Path :
Upload File :
New :
File
Dir
/home/nongapp.eemo.co.kr/public_html/www/component-panels.html
<!doctype html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, viewport-fit=cover" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> <meta name="theme-color" content="#000000"> <title>Mobilekit Mobile UI Kit</title> <meta name="description" content="Mobilekit HTML Mobile UI Kit"> <meta name="keywords" content="bootstrap 4, mobile template, cordova, phonegap, mobile, html" /> <link rel="icon" type="image/png" href="assets/img/favicon.png" sizes="32x32"> <link rel="apple-touch-icon" sizes="180x180" href="assets/img/icon/192x192.png"> <link rel="stylesheet" href="assets/css/style.css"> <link rel="manifest" href="__manifest.json"> </head> <body> <!-- loader --> <div id="loader"> <div class="spinner-border text-primary" role="status"></div> </div> <!-- * loader --> <!-- App Header --> <div class="appHeader bg-primary text-light"> <div class="left"> <a href="javascript:;" class="headerButton goBack"> <ion-icon name="chevron-back-outline"></ion-icon> </a> </div> <div class="pageTitle">Panels</div> <div class="right"></div> </div> <!-- * App Header --> <!-- App Capsule --> <div id="appCapsule" class="full-height"> <div class="section full mt-1"> <div class="section-title">Left Panel</div> <div class="wide-block pt-2 pb-2"> <a href="#" class="btn btn-secondary" data-toggle="modal" data-target="#PanelLeft">Open Left Panel</a> </div> </div> <!-- Panel Left --> <div class="modal fade panelbox panelbox-left" id="PanelLeft" tabindex="-1" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title">Panel Title</h4> <a href="javascript:;" data-dismiss="modal" class="panel-close"> <ion-icon name="close-outline"></ion-icon> </a> </div> <div class="modal-body"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur at magna porttitor lorem mollis ornare. Fusce varius varius massa. Vivamus nec odio tempus, condimentum ex eget, varius diam. Ut id fermentum nisi. In hac habitasse platea dictumst. Praesent ornare eget neque ut cursus. Nunc efficitur laoreet vulputate. Curabitur mi ligula, aliquet commodo leo in, consectetur venenatis tellus. Maecenas quis vehicula erat, vitae finibus tellus. Cras rhoncus ipsum quis lacus aliquam, quis euismod ligula varius. Phasellus ac odio rhoncus, aliquet nisl lobortis, commodo orci. Quisque bibendum est ut pellentesque hendrerit. Duis tempor ligula odio. Integer ac posuere metus, et mollis diam. Suspendisse in erat accumsan, rhoncus neque non, ultrices enim. </p> </div> </div> </div> </div> <!-- * Panel Left --> <div class="section full mt-1"> <div class="section-title">Right Panel</div> <div class="wide-block pt-2 pb-2"> <a href="#" class="btn btn-secondary" data-toggle="modal" data-target="#PanelRight">Open Right Panel</a> </div> </div> <!-- Panel Right --> <div class="modal fade panelbox panelbox-right" id="PanelRight" tabindex="-1" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title">Panel Title</h4> <a href="javascript:;" data-dismiss="modal" class="panel-close"> <ion-icon name="close-outline"></ion-icon> </a> </div> <div class="modal-body"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur at magna porttitor lorem mollis ornare. Fusce varius varius massa. Vivamus nec odio tempus, condimentum ex eget, varius diam. Ut id fermentum nisi. In hac habitasse platea dictumst. Praesent ornare eget neque ut cursus. Nunc efficitur laoreet vulputate. Curabitur mi ligula, aliquet commodo leo in, consectetur venenatis tellus. Maecenas quis vehicula erat, vitae finibus tellus. Cras rhoncus ipsum quis lacus aliquam, quis euismod ligula varius. Phasellus ac odio rhoncus, aliquet nisl lobortis, commodo orci. Quisque bibendum est ut pellentesque hendrerit. Duis tempor ligula odio. Integer ac posuere metus, et mollis diam. Suspendisse in erat accumsan, rhoncus neque non, ultrices enim. </p> </div> </div> </div> </div> <!-- * Panel Right --> </div> <!-- * App Capsule --> <!-- App Bottom Menu --> <div class="appBottomMenu"> <a href="index.html" class="item"> <div class="col"> <ion-icon name="home-outline"></ion-icon> </div> </a> <a href="app-components.html" class="item"> <div class="col"> <ion-icon name="cube-outline"></ion-icon> </div> </a> <a href="page-chat.html" class="item"> <div class="col"> <ion-icon name="chatbubble-ellipses-outline"></ion-icon> <span class="badge badge-danger">5</span> </div> </a> <a href="app-pages.html" class="item"> <div class="col"> <ion-icon name="layers-outline"></ion-icon> </div> </a> <a href="javascript:;" class="item" data-toggle="modal" data-target="#sidebarPanel"> <div class="col"> <ion-icon name="menu-outline"></ion-icon> </div> </a> </div> <!-- * App Bottom Menu --> <!-- App Sidebar --> <div class="modal fade panelbox panelbox-left" id="sidebarPanel" tabindex="-1" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-body p-0"> <!-- profile box --> <div class="profileBox"> <div class="image-wrapper"> <img src="assets/img/sample/avatar/avatar1.jpg" alt="image" class="imaged rounded"> </div> <div class="in"> <strong>Julian Gruber</strong> <div class="text-muted"> <ion-icon name="location"></ion-icon> California </div> </div> <a href="javascript:;" class="close-sidebar-button" data-dismiss="modal"> <ion-icon name="close"></ion-icon> </a> </div> <!-- * profile box --> <ul class="listview flush transparent no-line image-listview mt-2"> <li> <a href="index.html" class="item"> <div class="icon-box bg-primary"> <ion-icon name="home-outline"></ion-icon> </div> <div class="in"> Discover </div> </a> </li> <li> <a href="app-components.html" class="item"> <div class="icon-box bg-primary"> <ion-icon name="cube-outline"></ion-icon> </div> <div class="in"> Components </div> </a> </li> <li> <a href="app-pages.html" class="item"> <div class="icon-box bg-primary"> <ion-icon name="layers-outline"></ion-icon> </div> <div class="in"> <div>Pages</div> </div> </a> </li> <li> <a href="page-chat.html" class="item"> <div class="icon-box bg-primary"> <ion-icon name="chatbubble-ellipses-outline"></ion-icon> </div> <div class="in"> <div>Chat</div> <span class="badge badge-danger">5</span> </div> </a> </li> <li> <div class="item"> <div class="icon-box bg-primary"> <ion-icon name="moon-outline"></ion-icon> </div> <div class="in"> <div>Dark Mode</div> <div class="custom-control custom-switch"> <input type="checkbox" class="custom-control-input dark-mode-switch" id="darkmodesidebar"> <label class="custom-control-label" for="darkmodesidebar"></label> </div> </div> </div> </li> </ul> <div class="listview-title mt-2 mb-1"> <span>Friends</span> </div> <ul class="listview image-listview flush transparent no-line"> <li> <a href="page-chat.html" class="item"> <img src="assets/img/sample/avatar/avatar7.jpg" alt="image" class="image"> <div class="in"> <div>Sophie Asveld</div> </div> </a> </li> <li> <a href="page-chat.html" class="item"> <img src="assets/img/sample/avatar/avatar3.jpg" alt="image" class="image"> <div class="in"> <div>Sebastian Bennett</div> <span class="badge badge-danger">6</span> </div> </a> </li> <li> <a href="page-chat.html" class="item"> <img src="assets/img/sample/avatar/avatar10.jpg" alt="image" class="image"> <div class="in"> <div>Beth Murphy</div> </div> </a> </li> <li> <a href="page-chat.html" class="item"> <img src="assets/img/sample/avatar/avatar2.jpg" alt="image" class="image"> <div class="in"> <div>Amelia Cabal</div> </div> </a> </li> <li> <a href="page-chat.html" class="item"> <img src="assets/img/sample/avatar/avatar5.jpg" alt="image" class="image"> <div class="in"> <div>Henry Doe</div> </div> </a> </li> </ul> </div> <!-- sidebar buttons --> <div class="sidebar-buttons"> <a href="javascript:;" class="button"> <ion-icon name="person-outline"></ion-icon> </a> <a href="javascript:;" class="button"> <ion-icon name="archive-outline"></ion-icon> </a> <a href="javascript:;" class="button"> <ion-icon name="settings-outline"></ion-icon> </a> <a href="javascript:;" class="button"> <ion-icon name="log-out-outline"></ion-icon> </a> </div> <!-- * sidebar buttons --> </div> </div> </div> <!-- * App Sidebar --> <!-- ///////////// Js Files //////////////////// --> <!-- Jquery --> <script src="assets/js/lib/jquery-3.4.1.min.js"></script> <!-- Bootstrap--> <script src="assets/js/lib/popper.min.js"></script> <script src="assets/js/lib/bootstrap.min.js"></script> <!-- Ionicons --> <script src="https://unpkg.com/ionicons@5.0.0/dist/ionicons.js"></script> <!-- Owl Carousel --> <script src="assets/js/plugins/owl-carousel/owl.carousel.min.js"></script> <!-- Base Js File --> <script src="assets/js/base.js"></script> </body> </html>