notus
Version:
Yet another pop-up notification library for the web, strictly without jQuery
340 lines (323 loc) • 16.3 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Notus - Better Popup Notifications</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="prism.css" charset="utf-8">
<link rel="stylesheet" href="//cdn.rawgit.com/kushalpandya/notus/master/src/notus.css" charset="utf-8">
<link rel="stylesheet" href="//cdn.rawgit.com/kushalpandya/notus/master/src/animate.css" charset="utf-8">
<script src="//cdn.rawgit.com/kushalpandya/notus/master/src/notus.js" charset="utf-8"></script>
<style media="screen">
body {
background-color: #FAFAFA ;
}
.header {
margin-bottom: 30px;
border-bottom: 1px solid #e5e5e5;
}
.container .jumbotron {
text-align: center;
}
.features .col-lg-6 {
min-height: 150px;
}
.features .col-lg-6 h4 span {
margin-left: 10px;
}
.container .jumbotron.notus-demo-block,
.jumbotron input[type="text"],
.jumbotron textarea {
border-radius: 0;
}
.jumbotron p,
.jumbotron th,
.jumbotron td,
.jumbotron input[type="text"],
.jumbotron textarea {
font-family: monospace;
}
.jumbotron th {
font-size: 1.2em;
}
.form-group label {
float: left;
}
.footer {
min-height: 100px;
margin-top: 20px;
padding-top: 10px;
border-top: 1px solid #e5e5e5;
}
.configure-notus th {
text-align: center;
}
.notus-types {
margin-top: 10px;
}
.notus-types label {
font-size: 1.5em;
line-height: 1em;
}
.notus-options {
margin-top: 15px;
}
.sample-config {
margin-bottom: 25px;
}
.sample-config pre {
height: 200px;
}
</style>
</head>
<body>
<a href="https://github.com/kushalpandya/notus" target="_blank">
<img style="position: fixed; top: 0; right: 0; border: 0;"
src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67"
alt="Fork me on GitHub"
data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png">
</a>
<div class="container">
<div class="header clearfix">
<h1 class="text-muted">Notus</h1>
</div>
<div class="jumbotron notus-demo-block">
<h2><b>Notus</b> - Web Notifications Widget</h2>
<p class="lead text-muted">Yet another non-blocking pop-up notification library for the web, strictly <i>without</i> jQuery.</p>
<div class="configure-notus">
<div class="form-group">
<label for="notusMessage">Title</label>
<input id="notusTitle" type="text" class="form-control" placeholder="Title..." value="Notus">
</div>
<div class="form-group">
<label for="notusMessage">Message</label>
<textarea id="notusMessage" class="form-control" rows="3" placeholder="Message...">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas!</textarea>
</div>
<div class="row notus-types">
<div class="col-xs-6 col-sm-4">
<label class="radio-inline">
<input type="radio" name="notusType" value="popup" checked="checked">
Popup
</label>
</div>
<div class="col-xs-6 col-sm-4">
<label class="radio-inline">
<input type="radio" name="notusType" value="toast">
Toast
</label>
</div>
<div class="col-xs-6 col-sm-4">
<label class="radio-inline">
<input type="radio" name="notusType" value="snackbar">
Snackbar
</label>
</div>
</div>
<div class="table-responsive notus-options">
<table class="table">
<tr>
<th><i class="glyphicon glyphicon-move"></i> Position</th>
<th><i class="glyphicon glyphicon-warning-sign"></i> Alert Type</th>
<th><i class="glyphicon glyphicon-flash"></i> Behavior</th>
<th><i class="glyphicon glyphicon-dashboard"></i> Animation Type</th>
</tr>
<tr>
<td>
<div class="radio">
<label>
<input type="radio" name="notusPosition" value="top" data-supported="ts" disabled>
Top
</label>
</div>
</td>
<td>
<div class="radio">
<label>
<input type="radio" name="alertType" checked="checked" value="none">
None
</label>
</div>
</td>
<td>
<div class="checkbox">
<label>
<input type="checkbox" name="closable" checked="checked">
Closable
</label>
</div>
</td>
<td>
<div class="radio">
<label>
<input type="radio" name="animationType" value="slide" checked="checked">
Slide
</label>
</div>
</td>
</tr>
<tr>
<td>
<div class="radio">
<label>
<input type="radio" name="notusPosition" value="bottom" data-supported="ts" disabled>
Bottom
</label>
</div>
</td>
<td>
<div class="radio">
<label>
<input type="radio" name="alertType" value="success">
Success
</label>
</div>
</td>
<td>
<div class="checkbox">
<label>
<input type="checkbox" name="autoClose" checked="checked">
Auto-close
</label>
</div>
</td>
<td>
<div class="radio">
<label>
<input type="radio" name="animationType" value="fade">
Fade
</label>
</div>
</td>
</tr>
<tr>
<td>
<div class="radio">
<label>
<input type="radio" name="notusPosition" value="top-left" data-supported="p" checked="checked">
Top-left
</label>
</div>
</td>
<td>
<div class="radio">
<label>
<input type="radio" name="alertType" value="failure">
Failure
</label>
</div>
</td>
<td>
<div class="checkbox">
<label>
<input type="checkbox" name="animate" checked="checked">
Animate
</label>
</div>
</td>
<td>
<div class="checkbox">
<label>
<input type="radio" name="animationType" value="custom">
Custom
</label>
</div>
</td>
</tr>
<tr colspan="4">
<td>
<div class="radio">
<label>
<input type="radio" name="notusPosition" value="top-right" data-supported="p">
Top-right
</label>
</div>
</td>
<td rowspan="3">
<div class="radio">
<label>
<input type="radio" name="alertType" value="warning">
Warning
</label>
</div>
</td>
<td rowspan="3">
<div class="checkbox">
<label>
<input type="checkbox" name="actionable">
Actionable
</label>
</div>
</td>
</tr>
<tr colspan="4">
<td>
<div class="radio">
<label>
<input type="radio" name="notusPosition" value="bottom-left" data-supported="p">
Bottom-left
</label>
</div>
</td>
</tr>
<tr colspan="4">
<td>
<div class="radio">
<label>
<input type="radio" name="notusPosition" value="bottom-right" data-supported="p">
Bottom-right
</label>
</div>
</td>
</tr>
</table>
</div>
</div>
<h3>Configuration</h3>
<div class="sample-config"><pre><code id="example-source" class="language-javascript">{
title: "Notus",
message: "Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas!",
autoCloseDuration: 5000,
notusPosition: "top-left",
htmlString: true
}</code></pre></div>
<p><button class="btn btn-lg btn-primary" id="btnNotify"><i class="glyphicon glyphicon-play"></i> Ping Notus!</button></p>
<p>or</p>
<p><a class="btn btn-lg btn-success" id="btnDownload" href="https://github.com/kushalpandya/notus/releases" target="_blank"><i class="glyphicon glyphicon-download-alt"></i> Download</a></p>
</div>
<div class="row features">
<div class="col-lg-6">
<h4><i class="glyphicon glyphicon-ok-circle"></i><span>No Dependencies</span></h4>
<p>There are ton of Notification widgets out there but they either depend on jQuery or they are too heavy to include in your already large project, <b>Notus has no dependencies</b> and is super-small to blend in your existing project. Honourable mentions; <a href="https://notifyjs.com/" target="_blank">Notify.js</a> & <a href="http://alertifyjs.com/notifier.html" target="_blank">AlertifyJS</a></p>
</div>
<div class="col-lg-6">
<h4><i class="glyphicon glyphicon-leaf"></i><span>Light Weight</span></h4>
<p>Notus is less than 4 KB (2 KB for JS & little over 1 KB for CSS) minified and gzipped.</p>
</div>
<div class="col-lg-6">
<h4><i class="glyphicon glyphicon-wrench"></i><span>Fully Flexible</span></h4>
<p>Notus is fully customizable and supports several ways to show notifications (Popup, Toast & Snackbar) as well as custom styling using <code>themeClass</code> config.</p>
</div>
<div class="col-lg-6">
<h4><i class="glyphicon glyphicon-send"></i><span>Pure CSS3 Animations</span></h4>
<p>Notus provides basic Slide and Fade animations which are entirely CSS driven. It even allows custom easing function (with <code>animationFunction</code>) and animation duration (with <code>animationDuration</code>) in config.</p>
</div>
<div class="col-lg-6">
<h4><i class="glyphicon glyphicon-globe"></i><span>Works with Browsers, NodeJS & TypeScript</span></h4>
<p>Notus supports web browsers as well as Desktop platforms like <a href="http://electron.atom.io/" target="_blank">Electron</a> or <a href="http://nwjs.io/" target="_blank">NW.js</a>. It also supports TypeScript Type Definitions starting <a href="https://github.com/kushalpandya/notus/releases/tag/v0.3.1" target="_blank">v0.3.1</a>.</p>
</div>
<div class="col-lg-6">
<h4><i class="glyphicon glyphicon-heart"></i><span>Latest Browser Support</span></h4>
<p>Notus supports latest Chrome, Firefox, Safari & IE11+.</p>
</div>
</div>
<footer class="footer">
<p class="pull-left"><a href="https://doublslash.com/" target="_blank">Kushal Pandya</a></p>
<p class="pull-right"><a href="https://raw.githubusercontent.com/kushalpandya/notus/master/LICENSE" target="_blank">MIT License</a></p>
</footer>
</div>
<script src="prism.js" charset="utf-8"></script>
<script src="//cdn.rawgit.com/beautify-web/js-beautify/v1.6.3/js/lib/beautify.js" charset="utf-8"></script>
<script src="script.js" charset="utf-8"></script>
</body>
</html>