-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
150 lines (145 loc) · 4.41 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
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Mail Bell</title>
<link rel="shortcut icon" href="bell.svg">
<link href="https://fonts.googleapis.com/css?family=Crimson+Text&display=swap" rel="stylesheet">
<style>
body {
padding: 0;
margin: 0;
font-size: 16px;
background-color: #ffde56;
}
.invisible {
opacity: 0;
}
main {
width: 796px;
margin: auto;
transition: opacity .34s ease-out;
}
header {
display: flex;
flex-direction: row;
align-items: center;
padding: 4rem 0;
}
header img {
width: 6rem;
}
header h1, header h2, article h3 {
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica Neue, Arial, sans-serif;
margin: 0 0 0 2rem;
}
header h1 {
font-weight: 100;
font-size: 4rem;
}
header h2 {
font-weight: 200;
font-size: 1.2rem;
}
article {
font-family: 'Crimson Text', Georgia, Serif;
font-size: 2rem;
margin-bottom: 16rem;
}
article a {
color: #558dff;
text-decoration: none;
}
article > * {
margin-bottom: 2rem;
line-height: 1.5;
}
article h3 {
font-size: 2.5rem;
margin: 3rem 0 1rem 0;
font-weight: 100;
}
article p.col {
display: flex;
flex-direction: row;
align-items: flex-start;
}
article p.left img {
margin-right: 2rem;
}
article p.right img {
margin-left: 2rem;
}
article .notif img {
width: 8rem;
}
article .ui img, article .op img {
width: 19rem;
}
article .op img {
margin-top: -5rem;
}
article .perm img {
width: 100%;
margin: 2rem 0;
}
</style>
</head>
<body>
<main class="invisible">
<header>
<img alt="Mail Bell logo" src="bell.svg">
<section>
<h1>Mail Bell</h1>
<h2>Minimalist email notifier. Simple, sharp and sweet.</h2>
</section>
</header>
<article>
<summary>
Mail Bell is an unintrusive, minimalist email notifier for Google Chrome and Microsoft Edge. When new emails arrive at your inbox, Mail Bell rings so you don't miss them. Moreover, it empowers you to complete common email tasks without interrupting your browsing experience.
</summary>
<h3>Notification</h3>
<p class="notif col right">
With real time email notification, you will always be on top of your inbox.
<img alt="Mail Bell notification icon" src="notif.svg"/>
</p>
<h3>Interface</h3>
<p class="ui col left">
<img alt="Mail Bell user interface" src="ui.png"/>
Clear, freshening, intuitive user interface.<br><br>
Mail Bell doesn't try to be a full-fledged email client, it complements tools offered by email providers.
</p>
<h3>Convenience</h3>
<p class="op col right">
Common message operations are built into the interface seamlessly. You can manage emails without switching windows or tabs.
<img alt="Mail Bell email operations" src="op.png"/>
</p>
<h3>Minimum Permission & Maximum Privacy</h3>
<section class="perm">
<p>
Mail Bell only requires the least possible permissions to operate. You are in control of additional permissions.
<img alt="Mail Bell requesting optional permissions" src="perm.png">
Upon installation, it will ask for permission to access your email account. Rest assured, this process is between you and your email provider, Mail Bell will not get your password, neither will it send your personal data to anyone. It all stays within your browser. If you have a moment, take a look at our <a href="privacy.html">Privacy Policy</a>, it's simple and easy to understand.
</p>
<p>
Mail Bell uses Google APIs to access Gmail data, the use of information received from Google APIs will adhere to <a noopener noreferrer target="_blank" href="https://developers.google.com/terms/api-services-user-data-policy#additional_requirements_for_specific_api_scopes">Google API Services User Data Policy</a>, including the Limited Use requirements.
</p>
</section>
<h3>Supported Email Services</h3>
<p class="vendors">
Currently Mail Bell works with Google Gmail. Support for Yahoo Mail and Outlook is in the work.
</p>
</article>
<footer>
</footer>
</main>
<script>
window.onload = function() {
var els = document.getElementsByClassName('invisible');
for (var i = 0; i < els.length; ++i) {
els[i].classList.remove('invisible');
}
}
</script>
</body>
</html>