<!-- light-blue - v4.0.2 - 2020-12-08 --> <!DOCTYPE html> <html> <head> <title>Light Blue - Responsive Admin Dashboard Template</title> <link href="css/application.css" rel="stylesheet"> <link rel="shortcut icon" href="img/favicon.png"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="Light Blue Dashboard - Bootstrap Admin Template"> <meta name="keywords" content="bootstrap admin template,admin template,admin dashboard,admin dashboard template,admin,dashboard,bootstrap,template"> <meta name="author" content="Flatlogic LLC"> <meta charset="utf-8"> <script> /* yeah we need this empty stylesheet here. It's cool chrome & chromium fix chrome fix https://code.google.com/p/chromium/issues/detail?id=167083 https://code.google.com/p/chromium/issues/detail?id=332189 */ </script> </head> <body> <div class="logo"> <h4><a href="index.html">Light <strong>Blue</strong></a></h4> </div> <nav id="sidebar" class="sidebar nav-collapse collapse"> <ul id="side-nav" class="side-nav"> <li class=""> <a href="index.html"><i class="fa fa-home"></i> <span class="name">Dashboard</span></a> </li> <li class=""> <a href="typography.html"><i class="fa fa-font"></i> Typography</a></li> </li> <li class=""> <a href="tables.html"><i class="fa fa-table"></i> Tables</a></li> </li> <li class="active"> <a href="notifications.html"><i class="fa fa-bell"></i> Notifications</a></li> </li> <li class="panel "> <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#side-nav" href="#elements-collapse"><i class="fa fa-magic"></i> <span class="name">Elements</span></a> <ul id="elements-collapse" class="panel-collapse collapse "> <li class=""><a href="charts.html">Charts</a></li> <li class=""><a href="icons.html">Icons</a></li> <li class=""><a href="maps.html" data-no-pjax>Maps</a></li> </ul> </li> </ul> <h5 class="sidebar-nav-title">Labels <a class="action-link" href="#"><i class="glyphicon glyphicon-plus"></i></a></h5> <!-- some styled links in sidebar. ready to use as links to email folders, projects, groups, etc --> <ul class="sidebar-labels"> <li> <a href="#"> <!-- yep, .circle again --> <i class="fa fa-circle text-success"></i> <span class="label-name">My Recent</span> </a> </li> <li> <a href="#"> <i class="fa fa-circle text-primary"></i> <span class="label-name">Starred</span> </a> </li> <li> <a href="#"> <i class="fa fa-circle text-danger"></i> <span class="label-name">Background</span> </a> </li> </ul> <h5 class="sidebar-nav-title">Projects</h5> <!-- A place for sidebar notifications & alerts --> <div class="sidebar-alerts"> <div class="alert fade in"> <a href="#" class="close" data-dismiss="alert" aria-hidden="true">×</a> <span class="text-white fw-semi-bold">Sales Report</span> <br> <div class="progress progress-xs mt-xs mb-0"> <div class="progress-bar progress-bar-gray-light" style="width: 16%"></div> </div> <small>Calculating x-axis bias... 65%</small> </div> <div class="alert fade in"> <a href="#" class="close" data-dismiss="alert" aria-hidden="true">×</a> <span class="text-white fw-semi-bold">Personal Responsibility</span> <br> <div class="progress progress-xs mt-xs mb-0"> <div class="progress-bar progress-bar-danger" style="width: 23%"></div> </div> <small>Provide required notes</small> </div> </div> </nav> <div class="wrap"> <header class="page-header"> <div class="navbar"> <ul class="nav navbar-nav navbar-right pull-right"> <li class="visible-phone-landscape"> <a href="#" id="search-toggle"> <i class="fa fa-search"></i> </a> </li> <li class="dropdown"> <a href="#" title="Messages" id="messages" class="dropdown-toggle" data-toggle="dropdown"> <i class="glyphicon glyphicon-comment"></i> </a> <ul id="messages-menu" class="dropdown-menu messages" role="menu"> <li role="presentation"> <a href="#" class="message"> <img src="img/1.png" alt=""> <div class="details"> <div class="sender">Jane Hew</div> <div class="text"> Hey, John! How is it going? ... </div> </div> </a> </li> <li role="presentation"> <a href="#" class="message"> <img src="img/2.png" alt=""> <div class="details"> <div class="sender">Alies Rumiancaŭ</div> <div class="text"> I'll definitely buy this template </div> </div> </a> </li> <li role="presentation"> <a href="#" class="message"> <img src="img/3.png" alt=""> <div class="details"> <div class="sender">Michał Rumiancaŭ</div> <div class="text"> Is it really Lore ipsum? Lore ... </div> </div> </a> </li> <li role="presentation"> <a href="#" class="text-align-center see-all"> See all messages <i class="fa fa-arrow-right"></i> </a> </li> </ul> </li> <li class="dropdown"> <a href="#" title="8 support tickets" class="dropdown-toggle" data-toggle="dropdown"> <i class="glyphicon glyphicon-globe"></i> <span class="count">8</span> </a> <ul id="support-menu" class="dropdown-menu support" role="menu"> <li role="presentation"> <a href="#" class="support-ticket"> <div class="picture"> <span class="label label-important"><i class="fa fa-bell-o"></i></span> </div> <div class="details"> Check out this awesome ticket </div> </a> </li> <li role="presentation"> <a href="#" class="support-ticket"> <div class="picture"> <span class="label label-warning"><i class="fa fa-question-circle"></i></span> </div> <div class="details"> "What is the best way to get ... </div> </a> </li> <li role="presentation"> <a href="#" class="support-ticket"> <div class="picture"> <span class="label label-success"><i class="fa fa-tag"></i></span> </div> <div class="details"> This is just a simple notification </div> </a> </li> <li role="presentation"> <a href="#" class="support-ticket"> <div class="picture"> <span class="label label-info"><i class="fa fa-info-circle"></i></span> </div> <div class="details"> 12 new orders has arrived today </div> </a> </li> <li role="presentation"> <a href="#" class="support-ticket"> <div class="picture"> <span class="label label-important"><i class="fa fa-plus"></i></span> </div> <div class="details"> One more thing that just happened </div> </a> </li> <li role="presentation"> <a href="#" class="text-align-center see-all"> See all tickets <i class="fa fa-arrow-right"></i> </a> </li> </ul> </li> <li class="divider"></li> <li class="hidden-xs"> <a href="#" id="settings" title="Settings" data-toggle="popover" data-placement="bottom"> <i class="glyphicon glyphicon-cog"></i> </a> </li> <li class="hidden-xs dropdown"> <a href="#" title="Account" id="account" class="dropdown-toggle" data-toggle="dropdown"> <i class="glyphicon glyphicon-user"></i> </a> <ul id="account-menu" class="dropdown-menu account" role="menu"> <li role="presentation" class="account-picture"> <img src="img/avatars/5.png" alt="" class="img-circle"> Philip Daineka </li> <li role="presentation"> <a href="#" class="link"> <i class="fa fa-user"></i> Profile </a> </li> <li role="presentation"> <a href="#" class="link"> <i class="fa fa-calendar"></i> Calendar </a> </li> <li role="presentation"> <a href="#" class="link"> <i class="fa fa-inbox"></i> Inbox </a> </li> </ul> </li> <li class="visible-xs"> <a href="#" class="btn-navbar" data-toggle="collapse" data-target=".sidebar" title=""> <i class="fa fa-bars"></i> </a> </li> <li class="hidden-xs"><a href="login.html"><i class="glyphicon glyphicon-off"></i></a></li> </ul> <form id="search-form" class="navbar-form pull-right" role="search"> <input type="search" class="form-control search-query" placeholder="Search..."> </form> <div class="notifications pull-right"> <div class="alert pull-right"> <a href="#" class="close ml-xs" data-dismiss="alert">×</a> <i class="fa fa-info-circle mr-xs"></i> Check out Light Blue <a id="notification-link" href="#">settings</a> on the right! </div> </div> </div> </header> <div class="content container"> <h2 class="page-title">Notifications <small>Transactional messages in your app</small></h2> <div class="row"> <div class="col-md-12"> <section class="widget"> <header> <h5> Messenger </h5> <div class="widget-controls"> <a title="Properties" href="#"><i class="glyphicon glyphicon-cog"></i></a> <a data-widgster="expand" title="Expand" href="#"><i class="glyphicon glyphicon-plus"></i></a> <a data-widgster="collapse" title="Collapse" href="#"><i class="glyphicon glyphicon-minus"></i></a> <a data-widgster="close" title="Close" href="#"><i class="glyphicon glyphicon-remove"></i></a> </div> </header> <div class="body"> <div class="row"> <div class="col-md-4"> <h4>Layout options</h4> <p>There are few position options available for notifications. You can click any of them to change notifications position:</p> <div class="location-selector"> <div class="bit top left" data-position="top left"></div> <div class="bit top right" data-position="top right"></div> <div class="bit top" data-position="top"></div> <div class="bit bottom left" data-position="bottom left"></div> <div class="bit bottom right" data-position="bottom right"></div> <div class="bit bottom" data-position="bottom"></div> </div> </div> <div class="col-md-4"> <h4>Notification Types</h4> <p>Different types of notifications for lost of use cases. Custom classes are also supported.</p> <p><a class="btn btn-info" id="show-info-message" href="#">Info Message</a></p> <p><a class="btn btn-danger" id="show-error-message" href="#">Error + Retry Message</a></p> <p><a class="btn btn-success" id="show-success-message" href="#">Success Message</a></p> </div> <div class="col-md-4"> <h4>Dead Simple Usage</h4> <p>Just few lines of code to instantiate a notifications object. Does not require passing any options:</p> <pre><code>Messenger().post("Thanks for checking out Messenger!");</code></pre> <p>More complex example:</p> <pre><code>Messenger().post({ message: 'There was an explosion while processing your request.', type: 'error', showCloseButton: true });</code></pre> </div> </div> </div> </section> </div> </div> <footer class="content-footer"> Light Blue 4.0 Ajax Version - Made by <a href="https://flatlogic.com" rel="nofollow noopener noreferrer" target="_blank">Flatlogic</a> </footer> </div> <div class="loader-wrap hiding hide"> <i class="fa fa-circle-o-notch fa-spin"></i> </div> </div> <!-- common libraries. required for every page--> <script src="lib/jquery/dist/jquery.min.js"></script> <script src="lib/jquery-pjax/jquery.pjax.js"></script> <script src="lib/bootstrap-sass/assets/javascripts/bootstrap.min.js"></script> <script src="lib/widgster/widgster.js"></script> <script src="lib/underscore/underscore.js"></script> <!-- common application js --> <script src="js/app.js"></script> <script src="js/settings.js"></script> <!-- common templates --> <script type="text/template" id="settings-template"> <div class="setting clearfix"> <div>Sidebar on the</div> <div id="sidebar-toggle" class="pull-left btn-group" data-toggle="buttons-radio"> <% onRight = sidebar == 'right'%> <button type="button" data-value="left" class="btn btn-sm btn-default <%= onRight? '' : 'active' %>">Left</button> <button type="button" data-value="right" class="btn btn-sm btn-default <%= onRight? 'active' : '' %>">Right</button> </div> </div> <div class="setting clearfix"> <div>Sidebar</div> <div id="display-sidebar-toggle" class="pull-left btn-group" data-toggle="buttons-radio"> <% display = displaySidebar%> <button type="button" data-value="true" class="btn btn-sm btn-default <%= display? 'active' : '' %>">Show</button> <button type="button" data-value="false" class="btn btn-sm btn-default <%= display? '' : 'active' %>">Hide</button> </div> </div> </script> <script type="text/template" id="sidebar-settings-template"> <% auto = sidebarState == 'auto'%> <% if (auto) {%> <button type="button" data-value="icons" class="btn-icons btn btn-transparent btn-sm">Icons</button> <button type="button" data-value="auto" class="btn-auto btn btn-transparent btn-sm">Auto</button> <%} else {%> <button type="button" data-value="auto" class="btn btn-transparent btn-sm">Auto</button> <% } %> </script> <!-- page specific scripts --> <!-- page specific libs --> <script src="lib/messenger/build/js/messenger.js"></script> <script src="lib/messenger/build/js/messenger-theme-flat.js"></script> <!-- demo-only libs --> <script src="lib/backbone/backbone.js"></script> <script src="lib/messenger/docs/welcome/javascripts/location-sel.js"></script> <!-- page application js --> <script src="js/ui-notifications.js"></script> </body> </html>