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/app-components.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 class="bg-white"> <!-- loader --> <div id="loader"> <div class="spinner-border text-primary" role="status"></div> </div> <!-- * loader --> <!-- App Header --> <div class="appHeader bg-primary scrolled"> <div class="left"> <a href="#" class="headerButton" data-toggle="modal" data-target="#sidebarPanel"> <ion-icon name="menu-outline"></ion-icon> </a> </div> <div class="pageTitle"> Components </div> <div class="right"> <a href="javascript:;" class="headerButton toggle-searchbox"> <ion-icon name="search-outline"></ion-icon> </a> </div> </div> <!-- * App Header --> <!-- Search Component --> <div id="search" class="appHeader"> <form class="search-form"> <div class="form-group searchbox"> <input type="text" class="form-control" placeholder="Search..."> <i class="input-icon"> <ion-icon name="search-outline"></ion-icon> </i> <a href="javascript:;" class="ml-1 close toggle-searchbox"> <ion-icon name="close-circle"></ion-icon> </a> </div> </form> </div> <!-- * Search Component --> <!-- App Capsule --> <div id="appCapsule"> <div class="header-large-title"> <h1 class="title">Components</h1> </div> <div class="listview-title mt-2">Navigation</div> <ul class="listview image-listview flush transparent"> <li> <a href="component-appbottommenu.html" class="item"> <div class="icon-box bg-primary"> <ion-icon name="albums-outline"></ion-icon> </div> <div class="in"> Bottom Menu </div> </a> </li> <li> <a href="component-appheader.html" class="item"> <div class="icon-box bg-primary"> <ion-icon name="chevron-back-outline"></ion-icon> </div> <div class="in"> Header </div> </a> </li> <li> <a href="component-animated-header.html" class="item"> <div class="icon-box bg-primary"> <ion-icon name="arrow-down-outline"></ion-icon> </div> <div class="in"> Animated Header </div> </a> </li> <li> <a href="component-appheader-tab.html" class="item"> <div class="icon-box bg-primary"> <ion-icon name="ellipsis-horizontal"></ion-icon> </div> <div class="in"> Header with Tab </div> </a> </li> <li> <a href="#" class="item" data-toggle="modal" data-target="#sidebarPanel"> <div class="icon-box bg-primary"> <ion-icon name="menu-outline"></ion-icon> </div> <div class="in"> Sidebar </div> </a> </li> </ul> <div class="listview-title mt-2">Alerts</div> <ul class="listview image-listview flush transparent mb-1"> <li> <a href="component-notification.html" class="item"> <div class="icon-box bg-danger"> <ion-icon name="notifications-outline"></ion-icon> </div> <div class="in"> Notifications </div> </a> </li> <li> <a href="component-toast.html" class="item"> <div class="icon-box bg-danger"> <ion-icon name="disc-outline"></ion-icon> </div> <div class="in"> Toast </div> </a> </li> <li> <a href="component-dialog.html" class="item"> <div class="icon-box bg-danger"> <ion-icon name="albums-outline"></ion-icon> </div> <div class="in"> Dialog Box </div> </a> </li> <li> <a href="component-alert.html" class="item"> <div class="icon-box bg-danger"> <ion-icon name="alert-outline"></ion-icon> </div> <div class="in"> Alert Box </div> </a> </li> <li> <a href="component-error-page.html" class="item"> <div class="icon-box bg-danger"> <ion-icon name="checkmark-outline"></ion-icon> </div> <div class="in"> Error Page </div> </a> </li> <li> <a href="component-online-detection.html" class="item"> <div class="icon-box bg-danger"> <ion-icon name="wifi-outline"></ion-icon> </div> <div class="in"> Online / Offline Detection </div> </a> </li> </ul> <div class="listview-title mt-2">Action Modals</div> <ul class="listview image-listview flush transparent"> <li> <a href="component-action-sheet.html" class="item"> <div class="icon-box bg-success"> <ion-icon name="browsers-outline"></ion-icon> </div> <div class="in"> Action Sheet </div> </a> </li> <li> <a href="component-add-to-home.html" class="item"> <div class="icon-box bg-success"> <ion-icon name="add-outline"></ion-icon> </div> <div class="in"> Add to Home </div> </a> </li> <li> <a href="component-modal.html" class="item"> <div class="icon-box bg-success"> <ion-icon name="layers-outline"></ion-icon> </div> <div class="in"> Modal </div> </a> </li> <li> <a href="component-panels.html" class="item"> <div class="icon-box bg-success"> <ion-icon name="tablet-portrait-outline"></ion-icon> </div> <div class="in"> Panels </div> </a> </li> </ul> <div class="listview-title mt-2">List Groups</div> <ul class="listview image-listview flush transparent"> <li> <a href="component-listview.html" class="item"> <div class="icon-box bg-warning"> <ion-icon name="list-outline"></ion-icon> </div> <div class="in"> Listview </div> </a> </li> <li> <a href="component-accordion.html" class="item"> <div class="icon-box bg-warning"> <ion-icon name="chevron-down-outline"></ion-icon> </div> <div class="in"> Accordion </div> </a> </li> <li> <a href="component-timeline.html" class="item"> <div class="icon-box bg-warning"> <ion-icon name="hourglass-outline"></ion-icon> </div> <div class="in"> Timeline </div> </a> </li> <li> <a href="component-comment-boxes.html" class="item"> <div class="icon-box bg-warning"> <ion-icon name="chatbox-ellipses-outline"></ion-icon> </div> <div class="in"> Comment Boxes </div> </a> </li> </ul> <div class="listview-title mt-2">Form Elements</div> <ul class="listview image-listview flush transparent"> <li> <a href="component-inputs.html" class="item"> <div class="icon-box bg-primary"> <ion-icon name="pencil-outline"></ion-icon> </div> <div class="in"> Inputs </div> </a> </li> <li> <a href="component-checkbox.html" class="item"> <div class="icon-box bg-primary"> <ion-icon name="checkbox-outline"></ion-icon> </div> <div class="in"> Checkbox </div> </a> </li> <li> <a href="component-toggle.html" class="item"> <div class="icon-box bg-primary"> <ion-icon name="toggle"></ion-icon> </div> <div class="in"> Toggle </div> </a> </li> <li> <a href="component-radio.html" class="item"> <div class="icon-box bg-primary"> <ion-icon name="radio-button-on-outline"></ion-icon> </div> <div class="in"> Radio </div> </a> </li> <li> <a href="component-form-validation.html" class="item"> <div class="icon-box bg-primary"> <ion-icon name="checkmark-done"></ion-icon> </div> <div class="in"> Form Validation </div> </a> </li> <li> <a href="component-form-wizard.html" class="item"> <div class="icon-box bg-primary"> <ion-icon name="book-outline"></ion-icon> </div> <div class="in"> Form Wizard </div> </a> </li> <li> <a href="component-search.html" class="item"> <div class="icon-box bg-primary"> <ion-icon name="search-outline"></ion-icon> </div> <div class="in"> Search </div> </a> </li> </ul> <div class="listview-title mt-2">UI Elements</div> <ul class="listview image-listview flush transparent"> <li> <a href="component-badge.html" class="item"> <div class="icon-box bg-danger"> <ion-icon name="radio-button-off-outline"></ion-icon> </div> <div class="in"> Badges </div> </a> </li> <li> <a href="component-button.html" class="item"> <div class="icon-box bg-danger"> <ion-icon name="tablet-landscape-outline"></ion-icon> </div> <div class="in"> Buttons </div> </a> </li> <li> <a href="component-card.html" class="item"> <div class="icon-box bg-danger"> <ion-icon name="browsers-outline"></ion-icon> </div> <div class="in"> Cards </div> </a> </li> <li> <a href="component-carousel.html" class="item"> <div class="icon-box bg-danger"> <ion-icon name="albums-outline"></ion-icon> </div> <div class="in"> Carousel </div> </a> </li> <li> <a href="component-chips.html" class="item"> <div class="icon-box bg-danger"> <ion-icon name="flash-outline"></ion-icon> </div> <div class="in"> Chips </div> </a> </li> <li> <a href="component-dropdown.html" class="item"> <div class="icon-box bg-danger"> <ion-icon name="caret-down-outline"></ion-icon> </div> <div class="in"> Dropdown </div> </a> </li> <li> <a href="component-fab-button.html" class="item"> <div class="icon-box bg-danger"> <ion-icon name="add-circle-outline"></ion-icon> </div> <div class="in"> Fab Button </div> </a> </li> <li> <a href="component-icons.html" class="item"> <div class="icon-box bg-danger"> <ion-icon name="leaf-outline"></ion-icon> </div> <div class="in"> Icons </div> </a> </li> <li> <a href="component-images.html" class="item"> <div class="icon-box bg-danger"> <ion-icon name="images-outline"></ion-icon> </div> <div class="in"> Images </div> </a> </li> <li> <a href="component-pagination.html" class="item"> <div class="icon-box bg-danger"> <ion-icon name="ellipsis-horizontal-outline"></ion-icon> </div> <div class="in"> Pagination </div> </a> </li> <li> <a href="component-preloader.html" class="item"> <div class="icon-box bg-danger"> <ion-icon name="refresh-outline"></ion-icon> </div> <div class="in"> Preloader </div> </a> </li> <li> <a href="component-progressbar.html" class="item"> <div class="icon-box bg-danger"> <ion-icon name="flame-outline"></ion-icon> </div> <div class="in"> Progress bar </div> </a> </li> <li> <a href="component-table.html" class="item"> <div class="icon-box bg-danger"> <ion-icon name="apps-outline"></ion-icon> </div> <div class="in"> Table </div> </a> </li> <li> <a href="component-tabs.html" class="item"> <div class="icon-box bg-danger"> <ion-icon name="ellipsis-horizontal"></ion-icon> </div> <div class="in"> Tabs </div> </a> </li> <li> <a href="component-tooltips.html" class="item"> <div class="icon-box bg-danger"> <ion-icon name="chatbox-outline"></ion-icon> </div> <div class="in"> Tooltips </div> </a> </li> </ul> <div class="listview-title mt-2">Others</div> <ul class="listview image-listview flush transparent mb-2"> <li> <a href="component-os-detection.html" class="item"> <div class="icon-box bg-secondary"> <ion-icon name="phone-portrait-outline"></ion-icon> </div> <div class="in"> OS Detection </div> </a> </li> <li> <a href="component-contentbox.html" class="item"> <div class="icon-box bg-secondary"> <ion-icon name="grid-outline"></ion-icon> </div> <div class="in"> Content Boxes </div> </a> </li> <li> <a href="component-divider.html" class="item"> <div class="icon-box bg-secondary"> <ion-icon name="filter-outline"></ion-icon> </div> <div class="in"> Divider </div> </a> </li> <li> <a href="component-go-to-top.html" class="item"> <div class="icon-box bg-secondary"> <ion-icon name="arrow-up-outline"></ion-icon> </div> <div class="in"> Go to Top </div> </a> </li> <li> <a href="component-adboxes.html" class="item"> <div class="icon-box bg-secondary"> <ion-icon name="easel-outline"></ion-icon> </div> <div class="in"> Ad Boxes </div> </a> </li> <li> <a href="component-typography.html" class="item"> <div class="icon-box bg-secondary"> <ion-icon name="text-outline"></ion-icon> </div> <div class="in"> Typography </div> </a> </li> <li> <a href="component-grid.html" class="item"> <div class="icon-box bg-secondary"> <ion-icon name="grid-outline"></ion-icon> </div> <div class="in"> Grid </div> </a> </li> </ul> <!-- app footer --> <div class="appFooter"> <img src="assets/img/logo.png" alt="icon" class="footer-logo mb-2"> <div class="footer-title"> Copyright © Mobilekit 2020. All Rights Reserved. </div> <div>Mobilekit is PWA ready Mobile UI Kit Template.</div> Great way to start your mobile websites and pwa projects. <div class="mt-2"> <a href="javascript:;" class="btn btn-icon btn-sm btn-facebook"> <ion-icon name="logo-facebook"></ion-icon> </a> <a href="javascript:;" class="btn btn-icon btn-sm btn-twitter"> <ion-icon name="logo-twitter"></ion-icon> </a> <a href="javascript:;" class="btn btn-icon btn-sm btn-linkedin"> <ion-icon name="logo-linkedin"></ion-icon> </a> <a href="javascript:;" class="btn btn-icon btn-sm btn-instagram"> <ion-icon name="logo-instagram"></ion-icon> </a> <a href="javascript:;" class="btn btn-icon btn-sm btn-whatsapp"> <ion-icon name="logo-whatsapp"></ion-icon> </a> <a href="#" class="btn btn-icon btn-sm btn-secondary goTop"> <ion-icon name="arrow-up-outline"></ion-icon> </a> </div> </div> <!-- * app footer --> </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 active"> <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 --> <!-- iOS Add to Home Action Sheet --> <div class="modal inset fade action-sheet ios-add-to-home" id="ios-add-to-home-screen" tabindex="-1" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Add to Home Screen</h5> <a href="javascript:;" class="close-button" data-dismiss="modal"> <ion-icon name="close"></ion-icon> </a> </div> <div class="modal-body"> <div class="action-sheet-content text-center"> <div class="mb-1"><img src="assets/img/icon/192x192.png" alt="image" class="imaged w48"> </div> <h4>Mobilekit</h4> <div> Install Mobilekit on your iPhone's home screen. </div> <div> Tap <ion-icon name="share-outline"></ion-icon> and Add to homescreen. </div> </div> </div> </div> </div> </div> <!-- * iOS Add to Home Action Sheet --> <!-- Android Add to Home Action Sheet --> <div class="modal inset fade action-sheet android-add-to-home" id="android-add-to-home-screen" tabindex="-1" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Add to Home Screen</h5> <a href="javascript:;" class="close-button" data-dismiss="modal"> <ion-icon name="close"></ion-icon> </a> </div> <div class="modal-body"> <div class="action-sheet-content text-center"> <div class="mb-1"><img src="assets/img/icon/192x192.png" alt="image" class="imaged w48"> </div> <h4>Mobilekit</h4> <div> Install Mobilekit on your Android's home screen. </div> <div> Tap <ion-icon name="ellipsis-vertical"></ion-icon> and Add to homescreen. </div> </div> </div> </div> </div> </div> <!-- * Android Add to Home Action Sheet --> <!-- ///////////// 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> <script> // Toggle Add to Home Button with 3 seconds delay. // Toggle only once AddtoHome("3000", "once"); </script> </body> </html>