-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
247 lines (223 loc) · 20 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
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<title>Daily Mood Board</title>
<meta name="description" content="Mood Board with a daily word, a daily palette of colors and in the future also daily images for art/design/fashion inspiration and more.">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="canonical" href="https://reyashey.github.io/DailyMoodBoard/">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="var(--body-bg)">
<link rel="preload" as="style" href="https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700&display=swap" onload="this.onload=null; this.rel='stylesheet'"> <!-- ! Select only the weight used -->
<noscript><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700&display=swap"></noscript>
<link rel="stylesheet" href="./css/globals.css">
<link rel="stylesheet" href="./css/generals.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js" defer></script>
<script src="./js/apis.js" defer></script>
<script src="./js/switches.js" defer></script>
<script src="./js/dropDownIndex.js" defer></script>
<script src="./debug/debug.js" defer></script>
<script src="./js/analytics.js" defer></script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-DC5KFZZ9EV"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-DC5KFZZ9EV');
gtag('consent', 'default', {
'ad_storage': 'granted',
'analytics_storage': 'granted'
});
</script>
</head>
<body onload="setElements()">
<header class="topPadding">
<div style="display: flex; flex-direction: column; align-items: center; justify-content: center;">
<!-- Main Header -->
<!-- Center on Desktop, then Right side in Mobile -->
<div style="display: flex; flex-direction: row; align-items: center; width: 100%; justify-content: center;">
<!-- Light/Dark Switch -->
<div style="height: fit-content; display: flex; flex-direction: row; z-index: 5;">
<!-- Sun Svg -->
<svg id="LightSwitch" onclick="lightMode()" style="fill: var(--switch-fill); padding-bottom: 2vh; cursor: pointer; height: 5.5vh;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><title>Light Mode</title><circle cx="255.9" cy="253" r="111.1"/><path d="M406.6 270.5h71.3c9.7 0 17.5-7.8 17.5-17.5s-7.8-17.5-17.5-17.5h-71.3c-9.7 0-17.5 7.8-17.5 17.5s7.8 17.5 17.5 17.5m-372.5 0h71.3c9.7 0 17.5-7.8 17.5-17.5s-7.8-17.5-17.5-17.5H34.1c-9.7 0-17.5 7.8-17.5 17.5s7.9 17.5 17.5 17.5m239.3-168.1V31.1c0-9.7-7.8-17.5-17.5-17.5s-17.5 7.8-17.5 17.5v71.3c0 9.7 7.8 17.5 17.5 17.5s17.5-7.8 17.5-17.5m0 372.5v-71.3c0-9.7-7.8-17.5-17.5-17.5s-17.5 7.8-17.5 17.5v71.3c0 9.7 7.8 17.5 17.5 17.5s17.5-7.9 17.5-17.5"/><path d="M374.8 158.9l50.4-50.4c6.8-6.8 6.8-17.9 0-24.7s-17.9-6.8-24.7 0l-50.4 50.4c-6.8 6.8-6.8 17.9 0 24.7s17.9 6.8 24.7 0M111.5 422.3l50.3-50.4c6.8-6.8 6.8-17.9 0-24.7s-17.9-6.8-24.7 0l-50.3 50.4c-6.8 6.8-6.8 17.9 0 24.7s17.9 6.8 24.7 0m238.6-50.4l50.4 50.4c6.8 6.8 17.9 6.8 24.7 0s6.8-17.9 0-24.7l-50.4-50.4c-6.8-6.8-17.9-6.8-24.7 0-6.9 6.7-6.9 17.8 0 24.7M86.7 108.5l50.3 50.4c6.8 6.8 17.9 6.9 24.7 0 6.8-6.8 6.9-17.9 0-24.7l-50.3-50.4c-6.8-6.8-17.9-6.9-24.7 0-6.8 6.7-6.8 17.8 0 24.7"/></svg>
<!-- Separator Line -->
<div style="background-color: var(--switch-fill); transform: rotate(30deg); width: 0.25vh; height: 6vh; margin-right: 0.5vh;"></div>
<!-- Moon Svg -->
<svg id="DarkSwitch" onclick="darkMode()" style="fill: var(--switch-fill); padding-top: 2.5vh; cursor: pointer; height: 5.5vh;" xmlns="http://www.w3.org/2000/svg" viewBox="30 20 410 470"><title>Dark Mode</title><path d="M32 256c0-123.8 100.3-224 223.8-224c11.36 0 29.7 1.668 40.9 3.746c9.616 1.777 11.75 14.63 3.279 19.44C245 86.5 211.2 144.6 211.2 207.8c0 109.7 99.71 193 208.3 172.3c9.561-1.805 16.28 9.324 10.11 16.95C387.9 448.6 324.8 480 255.8 480C132.1 480 32 379.6 32 256z"/></svg>
</div>
<!-- Header Text-->
<h1>Daily <br> Mood Board</h1>
<!-- Information -->
<button class="infoBtn" onclick="toggleInfo()">
<svg id="infoSvg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" style="height: 5.5vh; fill: var(--switch-fill);"><title>Info Section</title><path d="M256 0C114.6 0 0 114.6 0 256s114.6 256 256 256s256-114.6 256-256S397.4 0 256 0zM256 400c-18 0-32-14-32-32s13.1-32 32-32c17.1 0 32 14 32 32S273.1 400 256 400zM325.1 258L280 286V288c0 13-11 24-24 24S232 301 232 288V272c0-8 4-16 12-21l57-34C308 213 312 206 312 198C312 186 301.1 176 289.1 176h-51.1C225.1 176 216 186 216 198c0 13-11 24-24 24s-24-11-24-24C168 159 199 128 237.1 128h51.1C329 128 360 159 360 198C360 222 347 245 325.1 258z"/></svg>
</button>
<aside id="infoOverlay" class="infoOverlay">
<!-- Opque background -->
<div class="infoBG" onclick="toggleInfo()"></div>
<main class="infoPopup">
<!-- White banner put behind the h1 on top of the info aside -->
<div class="infoCoverBanner"></div>
<!-- ! TODO: Change svg when open -->
<!-- General Information -->
<header id="generalDetails" class="generalDetails">
<p>Welcome to your Daily Mood Board,</p>
<p>In this moodboard you'll find a daily word, a daily palette of colors and in the future also daily images for art/design/fashion inspiration and more.</p>
</header>
<hr>
<!-- Who would use this site and what is it for? -->
<div>
<header class="infoHeader">
<h2 class="infoH2">Who would use this site and what is it for?</h2>
<button onclick="toggleDetails('usageDetails')" style="display: inline; height: clamp(1.5rem, 2.11vw, 15rem); cursor: pointer;">
<svg style="height: 100%; fill: var(--switch-fill);" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
<path d="M192 384c-8.188 0-16.38-3.125-22.62-9.375l-160-160c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L192 306.8l137.4-137.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-160 160C208.4 380.9 200.2 384 192 384z"/>
</svg>
</button>
</header>
<!-- Details -->
<div id="usageDetails" style="display: none;">
<p>Anybody can freely use this site (up to a certain amount of people per hour).</p>
<p>And this site was created with a simple idea in mind, to jostle creativity in moments of creative draught.</p>
<p>Althought it can be useful to learn new words, give color to your day and even just to get inspired daily.</p>
</div>
</div>
<hr>
<!-- Why is some content not loading? -->
<div>
<header class="infoHeader">
<h2 class="infoH2">Why is some content not loading?</h2>
<button onclick="toggleDetails('errorDetails')" style="display: inline; height: clamp(1.5rem, 2.11vw, 15rem); cursor: pointer;">
<svg style="height: 100%; fill: var(--switch-fill);" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
<path d="M192 384c-8.188 0-16.38-3.125-22.62-9.375l-160-160c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L192 306.8l137.4-137.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-160 160C208.4 380.9 200.2 384 192 384z"/>
</svg>
</button>
</header>
<div id="errorDetails" style="display: none;">
<p>It usually takes a couple of seconds to fetch all the information from the APIs.</p>
<p>But if it still is not loaded after that, it might mean that our free hourly number of calls to the<br>
APIs has been used all up, I might consider upgrading if this site turns useful for enough people.<br>
For now you can try again in the next hour.
</p>
</div>
</div>
<hr>
<!-- Cookie Policy -->
<div>
<header class="infoHeader">
<h2 class="infoH2">Cookie Policy</h2>
<button onclick="toggleDetails('cookieDetails')" style="display: inline; height: clamp(1.5rem, 2.11vw, 15rem); cursor: pointer;">
<svg style="height: 100%; fill: var(--switch-fill);" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
<path d="M192 384c-8.188 0-16.38-3.125-22.62-9.375l-160-160c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L192 306.8l137.4-137.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-160 160C208.4 380.9 200.2 384 192 384z"/>
</svg>
</button>
</header>
<div id="cookieDetails" style="display: none;">
<p>We use cookies to make sure that every user can get the best possible experience.</p>
<p>By continuing to use our services you agree to continue using our cookies.</p>
</div>
</div>
<hr>
<!-- Contacts & Socials -->
<div>
<h2 class="infoH2">Contacts & Socials</h2>
<div id="contactsDetail" style="display: block;">
<a href="mailto:[email protected]">[email protected]</a>
<a href="https://reyashey.github.io/FrontEndPortfolio/" target="_blank" style="text-decoration: underline;">Personal Portfolio</a>
<div class="socialLinks">
<!-- Twitter icon -->
<a href="https://twitter.com/reyashey" target="_blank">
<svg style="height: 5vh; fill: var(--switch-fill)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<title>Twitter</title>
<path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"/>
</svg>
</a>
<!-- Github icon -->
<a href="https://github.com/ReyasHey" target="_blank">
<svg style="height: 5vh; fill: var(--switch-fill)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512">
<title>Github</title>
<path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/>
</svg>
</a>
</div>
</div>
</div>
</main>
</aside>
</div>
<!-- Sub-Header -->
<p style="text-shadow: 0 0 0.2vw rgba(238, 238, 238, 0.420);"> Mood Board to jostle mood and inspire creative juices <br> That refreshes daily</p>
</div>
</header>
<main class="body">
<!-- Word of the Day -->
<article id="WODPost" class="post WODPost">
<h2>Word of the Day</h2>
<div style="display: flex; flex-direction: row;">
<h3 id="WOD">Word</h3>
<h3 id="WODPhonetic"> • /wɜːd/</h3>
</div>
<div style="display: flex; flex-direction: row; align-items: baseline; width: 100%; justify-content: center;">
<span id="WODDefinition1no" style="font-size: 0.85em">1. </span>
<span id="WODDefinition1">Words</span>
</div>
<div style="display: flex; flex-direction: row; align-items: baseline; width: 100%; justify-content: center;">
<p id="WODDefinition2no" style="font-size: 0.85em">2. </p>
<p id="WODDefinition2">Words</p>
</div>
</article>
<!-- Colors of the Day -->
<article id="CODPost" class="post CODPost">
<div class="CODText">
<!-- Invisible element to have the next div centered -->
<svg style="visibility: hidden; height: 5vh; margin-left: auto; margin-right: 1vw;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M384 64C490 64 576 149.1 576 256C576 362 490 448 384 448H192C85.96 448 0 362 0 256C0 149.1 85.96 64 192 64H384zM384 352C437 352 480 309 480 256C480 202.1 437 160 384 160C330.1 160 288 202.1 288 256C288 309 330.1 352 384 352z"/></svg>
<header class="CODHeader" style="padding: 0;">
<h2>Colors of the Day</h2>
<h3 id="CODTitle">"Title"</h3>
</header>
<svg id="hexViewSwitch" onclick="hexSwitch()" style="height: 5vh; fill: var(--switch-fill); cursor: pointer; margin-left: auto; margin-right: 1vw; transform: rotate(90deg);" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><title>Show HEX</title><path d="M384 64C490 64 576 149.1 576 256C576 362 490 448 384 448H192C85.96 448 0 362 0 256C0 149.1 85.96 64 192 64H384zM384 352C437 352 480 309 480 256C480 202.1 437 160 384 160C330.1 160 288 202.1 288 256C288 309 330.1 352 384 352z"/></svg>
</div>
<!-- Colors in a row -->
<div class="CODColors" id="colors">
<div id="color1" class="color-main color-hover"></div>
<div id="color2" class="color-main color-hover"></div>
<div id="color3" class="color-main color-hover"></div>
<div id="color4" class="color-main color-hover"></div>
<div id="color5" class="color-main color-hover"></div>
</div>
</article>
<!-- Just spacer at the bottom of the page -->
<div style="height: 10%;"></div>
</main>
<!-- Footer -->
<footer>
<a href="https://www.wordnik.com/" target="_blank">
<img src="./imgs/logos/Wordnik.png" alt="Wordnik Logo" class="WordnikCredits">
</a>
<a href="https://www.colourlovers.com/" target="_blank">
<img src="./imgs/logos/ColourLovers.png" alt="ColourLovers Logo" class="ColourLoversCredits">
</a>
</footer>
<aside id="cookies-Popup" class="cookiesPopup">
<p>We use cookies to improve user experience and analyze website traffic.</p>
<p>By clicking "Accept", you agree to our website's cookie use as described in our Cookie Policy.</p>
<p>We're working on a preferences section where you'll be able to change your preference in the soon future.</p>
<div style="display: flex; flex-direction: row; width: 50%; margin: auto; justify-content: space-evenly;">
<button class="btn cookies-button" onclick="acceptCookies(), hidePopup()">Accept</button>
<button class="btn cookies-button" onclick="denyCookies(), hidePopup()" style="opacity: 0.5;">Decline</button>
</div>
</aside>
<!-- DEBUG -->
<div id="debug" style="display: none; text-align: center; width: max-content; position: absolute; left: 2vw; top: 50%; left: 3%;">
<h2><Debugging></h2>
<div style="display: flex; flex-direction: row; width: 100%; justify-content: space-evenly; margin: 1vw 0;">
<button onmousedown="setElements()">Call Wordnik API</button>
<button onmousedown="getCOD()">Call ColourLover API</button>
<button onmousedown="simpleDef()">Call Definition Clear</button>
</div>
<button onmousedown="clearStorage()">Clear Storage</button>
</div>
<!-- DEBUG -->
</body>
</html>