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-notification.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">Notifications</div> <div class="right"></div> </div> <!-- * App Header --> <!-- App Capsule --> <div id="appCapsule"> <div class="section full mt-2 mb-2"> <div class="section-title">Android Style</div> <div class="wide-block pt-2 pb-1"> <button type="button" class="btn btn-secondary mr-05 mb-1" onclick="notification('notification-1')">Default</button> <!-- android style --> <div id="notification-1" class="notification-box"> <div class="notification-dialog android-style"> <div class="notification-header"> <div class="in"> <img src="assets/img/sample/avatar/avatar1.jpg" alt="image" class="imaged w24 rounded"> <strong>Pablo Cambeiro</strong> <span>just now</span> </div> <a href="#" class="close-button"> <ion-icon name="close"></ion-icon> </a> </div> <div class="notification-content"> <div class="in"> <h3 class="subtitle">Hello There</h3> <div class="text"> This is a simple android style notification. </div> </div> </div> </div> </div> <!-- * android style --> <button type="button" class="btn btn-secondary mr-05 mb-1" onclick="notification('notification-2')">Tap to close</button> <!-- android style --> <div id="notification-2" class="notification-box tap-to-close"> <div class="notification-dialog android-style"> <div class="notification-header"> <div class="in"> <img src="assets/img/sample/avatar/avatar5.jpg" alt="image" class="imaged w24 rounded"> <strong>Notification</strong> <span>just now</span> </div> </div> <div class="notification-content"> <div class="in"> <h3 class="subtitle">Tap to close</h3> <div class="text"> Click on this notification to close. </div> </div> </div> </div> </div> <!-- * android style --> <button type="button" class="btn btn-secondary mr-05 mb-1" onclick="notification('notification-3')">Media</button> <!-- android style --> <div id="notification-3" class="notification-box"> <div class="notification-dialog android-style"> <div class="notification-header"> <div class="in"> <img src="assets/img/sample/avatar/avatar6.jpg" alt="image" class="imaged w24 rounded"> <strong>Notification</strong> <span>just now</span> </div> <a href="#" class="close-button"> <ion-icon name="close"></ion-icon> </a> </div> <div class="notification-content"> <div class="in"> <h3 class="subtitle">Photo Uploaded</h3> <div class="text"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec cursus egestas tellus vel rutrum. </div> </div> <img src="assets/img/sample/photo/1.jpg" alt="image" class="imaged w64"> </div> </div> </div> <!-- * android style --> <button type="button" class="btn btn-secondary mr-05 mb-1" onclick="notification('notification-4')">Iconed</button> <!-- android style --> <div id="notification-4" class="notification-box"> <div class="notification-dialog android-style"> <div class="notification-header"> <div class="in"> <img src="assets/img/sample/avatar/avatar6.jpg" alt="image" class="imaged w24 rounded"> <strong>Notification</strong> <span>just now</span> </div> <a href="#" class="close-button"> <ion-icon name="close"></ion-icon> </a> </div> <div class="notification-content"> <div class="in"> <h3 class="subtitle">File Uploaded!</h3> <div class="text"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div> </div> <div class="icon-box text-success"> <ion-icon name="checkmark-circle-outline"></ion-icon> </div> </div> </div> </div> <!-- * android style --> <button type="button" class="btn btn-secondary mr-05 mb-1" onclick="notification('notification-5')">with Button</button> <!-- android style--> <div id="notification-5" class="notification-box"> <div class="notification-dialog android-style"> <div class="notification-header"> <div class="in"> <img src="assets/img/sample/avatar/avatar6.jpg" alt="image" class="imaged w24 rounded"> <strong>Notification</strong> <span>just now</span> </div> <a href="#" class="close-button"> <ion-icon name="close"></ion-icon> </a> </div> <div class="notification-content"> <div class="in"> <h3 class="subtitle">File Uploaded!</h3> <div class="text"> Lorem ipsum dolor sit amet. </div> </div> </div> <div class="notification-footer"> <a href="#" class="notification-button"> <ion-icon name="arrow-down-circle"></ion-icon> Download </a> <a href="#" class="notification-button"> <ion-icon name="cloud"></ion-icon> Save to Cloud </a> </div> </div> </div> <!-- * android style --> <button type="button" class="btn btn-secondary mr-05 mb-1" onclick="notification('notification-6' , 3000)">Auto Close (3s)</button> <!-- android style --> <div id="notification-6" class="notification-box"> <div class="notification-dialog android-style"> <div class="notification-header"> <div class="in"> <img src="assets/img/sample/avatar/avatar6.jpg" alt="image" class="imaged w24 rounded"> <strong>Notification</strong> <span>just now</span> </div> <a href="#" class="close-button"> <ion-icon name="close"></ion-icon> </a> </div> <div class="notification-content"> <div class="in"> <h3 class="subtitle">Auto close in 3 seconds.</h3> <div class="text"> Lorem ipsum dolor sit amet. </div> </div> </div> </div> </div> <!-- * android style --> </div> </div> <div class="section full mt-2 mb-2"> <div class="section-title">iOS Style</div> <div class="wide-block pt-2 pb-1"> <button type="button" class="btn btn-secondary mr-05 mb-1" onclick="notification('notification-7')"> Default</button> <!-- ios style--> <div id="notification-7" class="notification-box"> <div class="notification-dialog ios-style"> <div class="notification-header"> <div class="in"> <img src="assets/img/sample/avatar/avatar3.jpg" alt="image" class="imaged w24 rounded"> <strong>Pablo Cambeiro</strong> </div> <div class="right"> <span>just now</span> <a href="#" class="close-button"> <ion-icon name="close-circle"></ion-icon> </a> </div> </div> <div class="notification-content"> <div class="in"> <h3 class="subtitle">Hello There</h3> <div class="text"> This is a simple iOS style notification. </div> </div> </div> </div> </div> <!-- * ios style --> <button type="button" class="btn btn-secondary mr-05 mb-1" onclick="notification('notification-8')"> Tap to close</button> <!-- ios style--> <div id="notification-8" class="notification-box tap-to-close"> <div class="notification-dialog ios-style"> <div class="notification-header"> <div class="in"> <img src="assets/img/sample/avatar/avatar3.jpg" alt="image" class="imaged w24 rounded"> <strong>Pablo Cambeiro</strong> </div> <div class="right"> <span>just now</span> </div> </div> <div class="notification-content"> <div class="in"> <h3 class="subtitle">Tap to close</h3> <div class="text"> Click on this notification to close. </div> </div> </div> </div> </div> <!-- * ios style --> <button type="button" class="btn btn-secondary mr-05 mb-1" onclick="notification('notification-9')"> Media</button> <!-- ios style--> <div id="notification-9" class="notification-box tap-to-close"> <div class="notification-dialog ios-style"> <div class="notification-header"> <div class="in"> <img src="assets/img/sample/avatar/avatar3.jpg" alt="image" class="imaged w24 rounded"> <strong>Pablo Cambeiro</strong> </div> <div class="right"> <span>just now</span> </div> </div> <div class="notification-content"> <div class="in"> <h3 class="subtitle">Hello There</h3> <div class="text"> This is a simple iOS style notification. </div> </div> <img src="assets/img/sample/photo/1.jpg" alt="image" class="imaged w64"> </div> </div> </div> <!-- * ios style --> <button type="button" class="btn btn-secondary mr-05 mb-1" onclick="notification('notification-10')"> Iconed</button> <!-- ios style--> <div id="notification-10" class="notification-box"> <div class="notification-dialog ios-style"> <div class="notification-header"> <div class="in"> <img src="assets/img/sample/avatar/avatar3.jpg" alt="image" class="imaged w24 rounded"> <strong>Pablo Cambeiro</strong> </div> <div class="right"> <span>just now</span> <a href="#" class="close-button"> <ion-icon name="close-circle"></ion-icon> </a> </div> </div> <div class="notification-content"> <div class="in"> <h3 class="subtitle">Hello There</h3> <div class="text"> This is a simple iOS style notification. </div> </div> <div class="icon-box text-success"> <ion-icon name="checkmark-circle-outline"></ion-icon> </div> </div> </div> </div> <!-- * ios style --> <button type="button" class="btn btn-secondary mr-05 mb-1" onclick="notification('notification-11')"> with Button</button> <!-- ios style--> <div id="notification-11" class="notification-box"> <div class="notification-dialog ios-style"> <div class="notification-header"> <div class="in"> <img src="assets/img/sample/avatar/avatar3.jpg" alt="image" class="imaged w24 rounded"> <strong>Pablo Cambeiro</strong> </div> <div class="right"> <span>just now</span> <a href="#" class="close-button"> <ion-icon name="close-circle"></ion-icon> </a> </div> </div> <div class="notification-content"> <div class="in"> <h3 class="subtitle">Hello There</h3> <div class="text"> This is a simple iOS style notification. </div> </div> </div> <div class="notification-footer"> <a href="#" class="notification-button"> <ion-icon name="arrow-down-circle"></ion-icon> Download </a> <a href="#" class="notification-button"> <ion-icon name="cloud"></ion-icon> Save to Cloud </a> </div> </div> </div> <!-- * ios style --> <button type="button" class="btn btn-secondary mr-05 mb-1" onclick="notification('notification-12', 3000)"> Auto Close(3s)</button> <!-- ios style--> <div id="notification-12" class="notification-box"> <div class="notification-dialog ios-style"> <div class="notification-header"> <div class="in"> <img src="assets/img/sample/avatar/avatar3.jpg" alt="image" class="imaged w24 rounded"> <strong>Pablo Cambeiro</strong> </div> <div class="right"> <span>just now</span> <a href="#" class="close-button"> <ion-icon name="close-circle"></ion-icon> </a> </div> </div> <div class="notification-content"> <div class="in"> <h3 class="subtitle">Auto close in 3 seconds.</h3> <div class="text"> Lorem ipsum dolor sit amet. </div> </div> </div> </div> </div> <!-- * ios style --> </div> </div> <div class="section full mt-2 mb-2"> <div class="section-title">Colors</div> <div class="wide-block pt-2 pb-1"> <p>You can color the notification boxes by adding color classes.</p> <button type="button" class="btn btn-primary mr-05 mb-1" onclick="notification('notification-13')"> Primary</button> <!-- ios style--> <div id="notification-13" class="notification-box"> <div class="notification-dialog ios-style bg-primary"> <div class="notification-header"> <div class="in"> <img src="assets/img/sample/avatar/avatar3.jpg" alt="image" class="imaged w24 rounded"> <strong>Pablo Cambeiro</strong> </div> <div class="right"> <span>just now</span> <a href="#" class="close-button"> <ion-icon name="close-circle"></ion-icon> </a> </div> </div> <div class="notification-content"> <div class="in"> <h3 class="subtitle">Primary Color</h3> <div class="text"> Lorem ipsum dolor sit amet. </div> </div> </div> </div> </div> <!-- * ios style --> <button type="button" class="btn btn-secondary mr-05 mb-1" onclick="notification('notification-14')"> Secondary</button> <!-- ios style--> <div id="notification-14" class="notification-box"> <div class="notification-dialog ios-style bg-secondary"> <div class="notification-header"> <div class="in"> <img src="assets/img/sample/avatar/avatar3.jpg" alt="image" class="imaged w24 rounded"> <strong>Pablo Cambeiro</strong> </div> <div class="right"> <span>just now</span> <a href="#" class="close-button"> <ion-icon name="close-circle"></ion-icon> </a> </div> </div> <div class="notification-content"> <div class="in"> <h3 class="subtitle">Secondary Color</h3> <div class="text"> Lorem ipsum dolor sit amet. </div> </div> </div> </div> </div> <!-- * ios style --> <button type="button" class="btn btn-success mr-05 mb-1" onclick="notification('notification-15')"> Success</button> <!-- ios style--> <div id="notification-15" class="notification-box"> <div class="notification-dialog ios-style bg-success"> <div class="notification-header"> <div class="in"> <img src="assets/img/sample/avatar/avatar3.jpg" alt="image" class="imaged w24 rounded"> <strong>Pablo Cambeiro</strong> </div> <div class="right"> <span>just now</span> <a href="#" class="close-button"> <ion-icon name="close-circle"></ion-icon> </a> </div> </div> <div class="notification-content"> <div class="in"> <h3 class="subtitle">Success Color</h3> <div class="text"> Lorem ipsum dolor sit amet. </div> </div> </div> </div> </div> <!-- * ios style --> <button type="button" class="btn btn-danger mr-05 mb-1" onclick="notification('notification-16')"> Danger</button> <!-- ios style--> <div id="notification-16" class="notification-box"> <div class="notification-dialog ios-style bg-danger"> <div class="notification-header"> <div class="in"> <img src="assets/img/sample/avatar/avatar3.jpg" alt="image" class="imaged w24 rounded"> <strong>Pablo Cambeiro</strong> </div> <div class="right"> <span>just now</span> <a href="#" class="close-button"> <ion-icon name="close-circle"></ion-icon> </a> </div> </div> <div class="notification-content"> <div class="in"> <h3 class="subtitle">Danger Color</h3> <div class="text"> Lorem ipsum dolor sit amet. </div> </div> </div> </div> </div> <!-- * ios style --> <button type="button" class="btn btn-warning mr-05 mb-1" onclick="notification('notification-17')"> Warning</button> <!-- ios style--> <div id="notification-17" class="notification-box"> <div class="notification-dialog ios-style bg-warning"> <div class="notification-header"> <div class="in"> <img src="assets/img/sample/avatar/avatar3.jpg" alt="image" class="imaged w24 rounded"> <strong>Pablo Cambeiro</strong> </div> <div class="right"> <span>just now</span> <a href="#" class="close-button"> <ion-icon name="close-circle"></ion-icon> </a> </div> </div> <div class="notification-content"> <div class="in"> <h3 class="subtitle">Warning Color</h3> <div class="text"> Lorem ipsum dolor sit amet. </div> </div> </div> </div> </div> <!-- * ios style --> <button type="button" class="btn btn-info mr-05 mb-1" onclick="notification('notification-18')"> Info</button> <!-- ios style--> <div id="notification-18" class="notification-box"> <div class="notification-dialog ios-style bg-info"> <div class="notification-header"> <div class="in"> <img src="assets/img/sample/avatar/avatar3.jpg" alt="image" class="imaged w24 rounded"> <strong>Pablo Cambeiro</strong> </div> <div class="right"> <span>just now</span> <a href="#" class="close-button"> <ion-icon name="close-circle"></ion-icon> </a> </div> </div> <div class="notification-content"> <div class="in"> <h3 class="subtitle">Info Color</h3> <div class="text"> Lorem ipsum dolor sit amet. </div> </div> </div> </div> </div> <!-- * ios style --> </div> </div> <div class="section full mt-2 mb-2"> <div class="wide-block pt-2 pb-2"> <h4>Usage</h4> <p> <code>notification('notificationID')</code> </p> <h4>Auto Close</h4> <strong>Example : </strong> Auto close in 3 seconds.<br> <code>notification('notificationID', 3000)</code> </div> </div> </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>