-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
186 lines (181 loc) · 5.59 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
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Sunset to Sunset Test</title>
<link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
<script type="module" src="../js/sunset-to-sunset.ts"></script>
<style>
.test-container {
height: 100vh;
}
.bg-red {
background-color: red;
}
.bg-blue {
background-color: blue;
}
.hidden {
display: none;
}
</style>
</head>
<body>
<div class="test-container bg-red"></div>
<div class="test-container bg-blue"></div>
<div class="test-container"></div>
<div
id="sts-settings"
data-settings='{
"location": {
"lat": "35.76893917474924",
"long": "-87.48950029440782"
},
"bannerDuration": {
"hours": "0",
"minutes": "180"
},
"guardDuration": {
"hours": "0",
"minutes": "90"
},
"debug": true,
"simulateTime": "banner-up"
}'
data-days='{ "closing": "5", "opening": "6" }'
></div>
<div id="sts-banner-template-" class="hidden">
<div class="sts-banner YOUR-CUSTOM-CLASSES-HERE">
Our store will be closing at
<span class="sts-closing-time"></span>
<span>and will re-open on</span>
<span class="sts-opening-time"></span>
</div>
</div>
<div id="sts-banner-template-" class="hidden">
<div class="sts-banner">
Our store will be closing at
<ul>
<li>Default Formatting: <span class="sts-closing-time"></span></li>
<li>
User-defined Locale:
<span
class="sts-closing-time"
data-format-locale='{
"hour": "numeric",
"minute": "numeric",
"timeZoneName": "short"
}'
></span>
</li>
<li>
User-defined Token:
<span
class="sts-closing-time"
data-format-token="cccc 'at' h:mm a ZZZZ"
></span>
</li>
<li>
User-defined Locale and Token (token wins):
<span
class="sts-closing-time"
data-format-locale='{
"hour": "numeric",
"minute": "numeric",
"timeZoneName": "short"
}'
data-format-token="LLLL d 'at' h:mm a ZZZZ"
></span>
</li>
</ul>
<span>and will re-open on</span>
<ul>
<li>Default Formatting: <span class="sts-opening-time"></span></li>
<li>
User-defined Locale:
<span
class="sts-opening-time"
data-format-locale='{
"hour": "numeric",
"minute": "numeric",
"timeZoneName": "short"
}'
></span>
</li>
<li>
User-defined Token:
<span
class="sts-opening-time"
data-format-token="cccc 'at' h:mm a ZZZZ"
></span>
</li>
<li>
User-defined Locale and Token (token wins):
<span
class="sts-opening-time"
data-format-locale='{
"hour": "numeric",
"minute": "numeric",
"timeZoneName": "short"
}'
data-format-token="LLLL d 'at' h:mm a ZZZZ"
></span>
</li>
</ul>
</div>
</div>
<div id="sts-message-template--" class="hidden">
<p>
In a world that seems to be spinning faster every day, we choose to stop
and rest every Sabbath (Saturday). It’s a day for us to relax, refresh,
refocus and worship; worship a God who loved us so much that He built a
day of rest into Creation week and then commanded us to keep it (knowing
we probably wouldn’t do it otherwise—even though it is for our best
good).
<a class="underline" href="https://www.adventist.org/the-sabbath/"
>Learn more about the Sabbath</a
>
</p>
</div>
<div id="sts-full-message-template--" class="hidden">
<div class="sts-full-message__container">
<div class="sts-layout sts-modal">
<div class="sts-layout__item sts-message-area relative">
<h1 class="sts-full-message__heading">Sabbath</h1>
</div>
<div class="sts-layout__item sts-time-area">
<p>
Hello We will re-open on
<strong><span class="sts-opening-time"></span>.</strong>
</p>
</div>
</div>
</div>
</div>
<div id="sts-full-message-template--" class="hidden">
<div class="your-custom-layout-class">
<div class="your-message-area">
<h1 class="your-message__heading">Sabbath</h1>
<p>Message here</p>
</div>
<div class="your-custom-time-area">
<p>
We will re-open on
<strong><span class="sts-opening-time"></span>.</strong>
</p>
</div>
<div style="background-color: orange; height: 100vh">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Tenetur
illum quasi, nemo eum nam vero dolore amet ipsa, perferendis et quos
laudantium temporibus corrupti eveniet iure cumque ab, suscipit iste?
</div>
<div style="background-color: yellow; height: 100vh">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Tenetur
illum quasi, nemo eum nam vero dolore amet ipsa, perferendis et quos
laudantium temporibus corrupti eveniet iure cumque ab, suscipit iste?
</div>
</div>
</div>
</body>
</html>