-
-
Notifications
You must be signed in to change notification settings - Fork 11
/
Copy pathindex.html
135 lines (130 loc) · 4.38 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Keep Alive App</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f5f5f5; /* Offwhite */
color: #333;
display: flex;
flex-direction: column;
align-items: center;
}
header {
text-align: center;
padding: 20px;
width: 100%;
background-color: #2c2c2c; /* Dark gray */
color: #f5f5f5; /* Offwhite */
}
header img {
width: 100px;
}
.flex-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
width: 80%;
max-width: 1000px;
margin: auto;
}
.flex-item, .centered-flex-item {
background-color: #f5f5f5; /* Offwhite */
padding: 10px;
border: 2px solid #2c2c2c; /* Dark gray */
border-radius: 10px;
text-align: center;
flex-basis: calc(33.333% - 20px); /* Adjust for 3 items per row minus gap */
box-sizing: border-box;
}
.centered-flex-container {
width: 100%;
display: flex;
justify-content: center;
gap: 10px;
}
h2 {
color: #2c2c2c; /* Dark gray */
}
.footer {
width: 100%;
padding: 20px;
text-align: center;
background-color: #f5f5f5; /* Offwhite */
border-top: 2px solid #2c2c2c; /* Dark gray */
}
a {
color: #2c2c2c; /* Dark gray */
}
button {
background-color: #2c2c2c; /* Dark gray */
color: #f5f5f5; /* Offwhite */
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<header>
<img src="KeepAlive_logo.png" alt="Keep Alive Logo">
<h1>Keep Alive</h1>
</header>
<br/><br/>
<div style="text-align: center; max-width: 960px; margin: auto;">
<h3>Android app to notify friends or loved ones if you haven't used your device in a given period of time</h3>
<a href="https://play.google.com/store/apps/details?id=io.keepalive.android"><img src="https://play.google.com/intl/en_us/badges/static/images/badges/en_badge_web_generic.png" height="80"/></a>
<a href="https://f-droid.org/packages/io.keepalive.android/"><img src="https://fdroid.gitlab.io/artwork/badge/get-it-on.png" height="80"/></a>
</div>
<br/><br/>
<div class="flex-container">
<div class="flex-item">
<h2>100% Device-Based</h2>
<p>No cloud services or accounts required</p>
</div>
<div class="flex-item">
<h2>Free to Use</h2>
<p>No advertisements or trackers</p>
</div>
<div class="flex-item">
<h2>Minimal Battery Usage</h2>
<p>Designed to have minimal impact on battery life</p>
</div>
<div class="flex-item">
<h2>Multiple SMS Recipients</h2>
<p>Send Alert messages to multiple recipients</p>
</div>
<div class="flex-item">
<h2>Custom Alert Message</h2>
<p>Personalize the alert message(s)</p>
</div>
<div class="flex-item">
<h2>Open Source</h2>
<p>Code available on <a href="https://github.com/keepalivedev/KeepAlive" target="_blank">Github</a> </p>
</div>
<div class="centered-flex-container">
<div class="centered-flex-item">
<h2>Optional<br/> Location Information</h2>
<p>Include your location in the Alert SMS</p>
</div>
<div class="centered-flex-item">
<h2>Optional<br/>Alert Phone Call</h2>
<p>Place a phone call with speakerphone enabled</p>
</div>
</div>
</div>
<br/><br/>
<div class="footer">
<h2>Privacy & Contact</h2>
<p><a href="privacy">Privacy Policy</a></p>
<p>Contact: <a href="mailto:[email protected]">[email protected]</a></p>
</div>
</body>
</html>