-
Notifications
You must be signed in to change notification settings - Fork 18
/
Copy pathindex.html
97 lines (78 loc) · 3.16 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="webOS-Style HTML5 Notifications">
<meta name="author" content="Tomomi Imura @girlie_mac">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<h1>(webOS-esque) HTML5 Web Notifications</h1>
</header>
<section class="main">
<div id="intro">
<p>What is the Web Notifications API? -Read the <a href="http://www.w3.org/TR/notifications/" target='_blank'>spec</a> by W3C. </p>
<p><strong>UPDATED</strong> (March 2014): I needed to rewrite this demo using the new Web Notification API, since the spec has been modified since I initially wrote this demo 2 years ago. The <strong>new API</strong> only allows text and icon, and using HTML is now deprecated. So my demo <strong>no longer has the webOS style swipable notifications</strong>, as I created originally.</p>
<p>Supported browsers: Firefox 22+ and Chrome 32+ (<code>close()</code> fails)</p>
<p>Blog: <a href="http://girliemac.com/blog/2014/03/21/notifications/">girliemac.com</a></p>
</div>
<section class="preference">
<h2>Browser Setting</h2>
<div>
<div class="caption">Enable Notifications *</div>
<label for="permission">
<input id="permission" type="checkbox">
<div class="toggle-button">
<div class="switch"></div>
</div>
</label>
</div>
</section>
<section class="preference">
<div>
<div class="caption">Email</div>
<label for="email">
<input id="email" type="checkbox" checked>
<div class="toggle-button">
<div class="switch"></div>
</div>
</label>
</div>
<div>
<div class="caption">Calendar</div>
<label for="calendar">
<input id="calendar" type="checkbox">
<div class="toggle-button">
<div class="switch"></div>
</div>
</label>
</div>
<div>
<div class="caption">Facebook</div>
<label for="fb">
<input id="fb" type="checkbox">
<div class="toggle-button">
<div class="switch"></div>
</div>
</label>
</div>
</section>
<input type="button" id="showNotifications" value="Show Notifications">
</section>
<footer>
<p>* Actual permission setting is stored in browser. If you "deny" the permission in the first time, and want to enable it, you need to change your configuration in the browser's Preference setting.
</p>
<p>
<strong>Chrome</strong> - chrome://settings/contentExceptions#notifications
<br>
<strong>Firefox</strong> - about:permissions
</p>
<!-- Github ribbon -->
<a href="https://github.com/girliemac/html5-notifications-webOS-style"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://github-camo.global.ssl.fastly.net/365986a132ccd6a44c23a9169022c0b5c890c387/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f7265645f6161303030302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png"></a>
<script src="js/notification.js"></script>
</body>
</html>