Browse Source

Add to home screen button

master
Lewis Hemens 5 years ago
parent
commit
0be2009186
3 changed files with 242 additions and 0 deletions
  1. 234
    0
      addtohomescreen.css
  2. 2
    0
      addtohomescreen.min.js
  3. 6
    0
      index.html

+ 234
- 0
addtohomescreen.css View File

@@ -0,0 +1,234 @@
1
+.ath-viewport * {
2
+	-webkit-box-sizing: border-box;
3
+	-moz-box-sizing: border-box;
4
+	box-sizing: border-box;
5
+}
6
+
7
+.ath-viewport {
8
+	position: relative;
9
+	z-index: 2147483641;
10
+	pointer-events: none;
11
+
12
+	-webkit-tap-highlight-color: rgba(0,0,0,0);
13
+	-webkit-touch-callout: none;
14
+	-webkit-user-select: none;
15
+	-moz-user-select: none;
16
+	-ms-user-select: none;
17
+	user-select: none;
18
+	-webkit-text-size-adjust: none;
19
+	-moz-text-size-adjust: none;
20
+	-ms-text-size-adjust: none;
21
+	-o-text-size-adjust: none;
22
+	text-size-adjust: none;
23
+}
24
+
25
+.ath-modal {
26
+	pointer-events: auto !important;
27
+	background: rgba(0,0,0,0.6);
28
+}
29
+
30
+.ath-mandatory {
31
+	background: #000;
32
+}
33
+
34
+.ath-container {
35
+	pointer-events: auto !important;
36
+	position: absolute;
37
+	z-index: 2147483641;
38
+	padding: 0.7em 0.6em;
39
+	width: 18em;
40
+
41
+	background: #eee;
42
+	background-size: 100% auto;
43
+
44
+	box-shadow: 0 0.2em 0 #d1d1d1;
45
+
46
+	font-family: sans-serif;
47
+	font-size: 15px;
48
+	line-height: 1.5em;
49
+	text-align: center;
50
+}
51
+
52
+.ath-ios.ath-phone {
53
+	bottom: 1.8em;
54
+	left: 50%;
55
+	margin-left: -9em;
56
+}
57
+
58
+.ath-ios7.ath-tablet {
59
+	left: 0.7em;
60
+	top: 1.8em;
61
+}
62
+
63
+.ath-ios6.ath-tablet {
64
+	left: 5em;
65
+	top: 1.8em;
66
+}
67
+
68
+.ath-android {
69
+	right: 1.5em;
70
+	top: 1.8em;
71
+}
72
+
73
+/* close icon */
74
+.ath-container:before {
75
+	content: '';
76
+	position: relative;
77
+	display: block;
78
+	float: right;
79
+	margin: -0.7em -0.6em 0 0.5em;
80
+	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIQAAACECAMAAABmmnOVAAAAA3NCSVQICAjb4U/gAAAACXBIWXMAAAeHAAAHhwFd+hRDAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAHVQTFRFAAAAOTk5MzMzOzs7Nzc3QUFBQEBAPz8/Pj4+QUFBQEBAPz8/Pj4+QUFBQEBAPz8/QUFBPj4+Pz8/Pz8/Pj4+Pz8/Pz8/Pz8/Pj4+Pz8/Pj4+Pz8/Pz8/Pz8/Pz8/Pz8/Pj4+Pz8/Pz8/Pz8/Pz8/QEBAPz8/n3QmjwAAACZ0Uk5TAAkKDQ4zODk6OzxBQkNERUusrbG0tba7vL3Excbu8fL19fb3+PgucqJgAAACqklEQVR42sXc23LCIBAGYKy2pgft0WpP2vTA+z9i0+goCZAs7O7P3oWZTL5ZYAh7sca0MXmYG3jM7yfu4/TV1jdow01tX6cdg4UrGoN1FNM3a+GK1nBSzPYGrOJgsPZt1hrerYUrjoa9wjHgFI7B2veZWVk3tpCdWm07H30y8+4AIhedPFj7cW7wioABrggawIqIAaroGbYXzlGCUvQNnc0IUgwaQIoRA0QxagAoCAZ1BcmgrCAaVBVkg6IiwaCmSDIoKRINKopkg4IiwyCuyDIIKzINoopsg6CCYRBTsAxCCqZBRLGo2RcrtkLAwFaIGJgKIQNLIWZgKAQN2QpRg1dKoCmEDVkKcUOGQsGQrFAxJCqUDEkKNUOCQtFAVqgaiAplg69YFDAQFADDqAJiGFGADI1iF1XADAOKvqHSLApHFFBDRAE2BBVwQ0BRwOApfn8LGDxFEcOQAmeIK5CGmAJrCCvQBq8A8r9Zrw08qp6irvAGs/zpIr4XBQxf3nQsyhvwipABrQgbsIqYAamIG3CKnqH+LKDoGXbVwD84zDB4E4AZ4IqgAayIGKCKqMGYS5RiwOArlgUMnuJrWcAAUYwaAAqCQV1BMigriAZVBdmgqEgwqCmSDEqKRIOKItmgoMgwiCv6hkvaa6KKTIOoItsgqGAYxBQsg5CCaRBRsA0CCgEDWyFiYCqEDCyFmIGhEDRkK0QNmQphQ5ZC3JChUDAkK1QMiQolQ5JCzZCguNUzkBV3P4oGokLZQFKoGwgKgGFUATGMKECGQQXMYMxVTAE0RBVQQ0QBNgQVcENI8QwoBo8cUiszWYPz4OVi3bQ9cBQoQ0exblsvTDZwg6PYHNo/tE0XmvVwa4BxWBentgtnL+A8HHPxcnYaaBRoQ6twDY3iEW5oFI8Hwx/QxSE448b+MwAAAABJRU5ErkJggg==);
81
+	background-color: rgba(255,255,255,0.8);
82
+	background-size: 50%;
83
+	background-repeat: no-repeat;
84
+	background-position: 50%;
85
+	width: 2.7em;
86
+	height: 2.7em;
87
+	text-align: center;
88
+	overflow: hidden;
89
+	color: #a33;
90
+	z-index: 2147483642;
91
+}
92
+
93
+.ath-container.ath-icon:before {
94
+	position: absolute;
95
+	top: 0;
96
+	right: 0;
97
+	margin: 0;
98
+	float: none;
99
+}
100
+
101
+.ath-mandatory .ath-container:before {
102
+	display: none;
103
+}
104
+
105
+.ath-container.ath-android:before {
106
+	float: left;
107
+	margin: -0.7em 0.5em 0 -0.6em;
108
+}
109
+
110
+.ath-container.ath-android.ath-icon:before {
111
+	position: absolute;
112
+	right: auto;
113
+	left: 0;
114
+	margin: 0;
115
+	float: none;
116
+}
117
+
118
+
119
+/* applied only if the application icon is shown */
120
+.ath-container.ath-icon {
121
+
122
+}
123
+
124
+.ath-action-icon {
125
+	display: inline-block;
126
+	vertical-align: middle;
127
+	background-position: 50%;
128
+	background-repeat: no-repeat;
129
+	text-indent: -9999em;
130
+	overflow: hidden;
131
+}
132
+
133
+.ath-android .ath-action-icon {
134
+	width: 1.2em;
135
+	height: 1.8em;
136
+	background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADUAAADcBAMAAAAig/QJAAAAA3NCSVQICAjb4U/gAAAACXBIWXMAAFtDAABbQwH5xg68AAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAB5QTFRFAAAA////cXFxaWlp////ZmZmnJycoaGhpqam////1D9b6wAAAAV0Uk5TAAgJERExZxYzAAAAYklEQVRYw+3WoQ2AUBAE0SsBOiBUQEIDCArA4FFoHBaJxNItFYz/x5+xz282VmwJTdM0rRzbsS1e7Pm9zdgUVn491rkFmqZpSezEjqo/Sos1HoAEjdjgFmiapiWxG7tq/igfnYteFlnOWZEAAAAASUVORK5CYII=);
137
+	background-size: auto 100%;
138
+}
139
+
140
+.ath-ios7 .ath-action-icon {
141
+	width: 1.6em;
142
+	height: 1.6em;
143
+	background-image:url(data:image/png;base64,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);
144
+	margin-top: -0.3em;
145
+	background-size: auto 100%;
146
+}
147
+
148
+.ath-ios6 .ath-action-icon {
149
+	width: 1.8em;
150
+	height: 1.8em;
151
+	background-image:url(data:image/png;base64,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);
152
+	margin-bottom: 0.4em;
153
+	background-size: 100% auto;
154
+}
155
+
156
+.ath-container p {
157
+	margin: 0;
158
+	padding: 0;
159
+	position: relative;
160
+	z-index: 2147483642;
161
+	text-shadow: 0 0.1em 0 #fff;
162
+	font-size: 1.1em;
163
+}
164
+
165
+.ath-ios.ath-phone:after {
166
+	content: '';
167
+	background: #eee;
168
+	position: absolute;
169
+	width: 2em;
170
+	height: 2em;
171
+	bottom: -0.9em;
172
+	left: 50%;
173
+	margin-left: -1em;
174
+	-webkit-transform: scaleX(0.9) rotate(45deg);
175
+	transform: scaleX(0.9) rotate(45deg);
176
+	box-shadow: 0.2em 0.2em 0 #d1d1d1;
177
+}
178
+
179
+.ath-ios.ath-tablet:after {
180
+	content: '';
181
+	background: #eee;
182
+	position: absolute;
183
+	width: 2em;
184
+	height: 2em;
185
+	top: -0.9em;
186
+	left: 50%;
187
+	margin-left: -1em;
188
+	-webkit-transform: scaleX(0.9) rotate(45deg);
189
+	transform: scaleX(0.9) rotate(45deg);
190
+	z-index: 2147483641;
191
+}
192
+
193
+.ath-android:after {
194
+	content: '';
195
+	background: #eee;
196
+	background: -webkit-linear-gradient(-45deg, rgba(238,238,238,0) 0%,rgba(238,238,238,0) 50%,rgba(238,238,238,1) 50%,rgba(238,238,238,1) 100%);
197
+	position: absolute;
198
+	width: 2em;
199
+	height: 2em;
200
+	top: -1.5em;
201
+	right: 0;
202
+}
203
+
204
+.ath-application-icon {
205
+	position: relative;
206
+	padding: 0;
207
+	border: 0;
208
+	margin: 0 auto 0.2em auto;
209
+	height: 6em;
210
+	width: 6em;
211
+	z-index: 2147483642;
212
+}
213
+
214
+/* OS specific classes */
215
+.ath-container.ath-ios .ath-application-icon {
216
+	border-radius: 1em;
217
+	box-shadow: 0 0.2em 0.4em rgba(0,0,0,0.3),
218
+		inset 0 0.07em 0 rgba(255,255,255,0.5);
219
+	margin: 0 auto 0.4em auto;
220
+}
221
+
222
+@media only screen and (orientation: landscape) {
223
+	.ath-container.ath-phone {
224
+		width: 24em;
225
+	}
226
+
227
+	.ath-ios.ath-phone {
228
+		margin-left: -12em;
229
+	}
230
+
231
+	.ath-ios6:after {
232
+		left: 39%;
233
+	}
234
+}

+ 2
- 0
addtohomescreen.min.js
File diff suppressed because it is too large
View File


+ 6
- 0
index.html View File

@@ -612,8 +612,14 @@ if (width > 750) {
612 612
 
613 613
 </script>
614 614
 
615
+<link rel="stylesheet" type="text/css" href="addtohomescreen.css">
616
+<script src="addtohomescreen.min.js"></script>
617
+
615 618
 <script>
616 619
 window.setTimeout(function() { $('#logo-interstitial').hide(); }, 3000);
620
+addToHomescreen({
621
+   startDelay: 6
622
+});
617 623
 </script>
618 624
 
619 625
 </body>

Loading…
Cancel
Save