-
Notifications
You must be signed in to change notification settings - Fork 0
/
quotes.html
77 lines (58 loc) · 2.06 KB
/
quotes.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Quote</title>
<style>
.widget {
padding: 5px 5px ;
color: #d4d4d4;
text-align: center;
max-width: 95%;
margin: auto;
font-variant-caps: petite-caps;
font-size: 2em;
}
div {
width: 95%;
min-height: 100px;
background:
linear-gradient(to right, black 4px, transparent 4px) 0 0,
linear-gradient(to right, black 4px, transparent 4px) 0 100%,
linear-gradient(to left, black 4px, transparent 4px) 100% 0,
linear-gradient(to left, black 4px, transparent 4px) 100% 100%,
linear-gradient(to bottom, black 4px, transparent 4px) 0 0,
linear-gradient(to bottom, black 4px, transparent 4px) 100% 0,
linear-gradient(to top, black 4px, transparent 4px) 0 100%,
linear-gradient(to top, black 4px, transparent 4px) 100% 100%;
background-repeat: no-repeat;
background-size: 20px 20px;
}
</style>
</head>
<body>
<div class="widget" id="widget"></div>
<script>
quotes=[
"You may want to integrate yourself with others, but what's more important is how you differentiate yourself from the rest",
"Indeed the function of life has its relative minimums and maximums. Remember that they are all relative",
"Lock in at life's critical points, for they are where your graph will either peak or plunge"
];
const INTERVAL = 86400;
function dispalyQuote(){
document.getElementById('widget').innerHTML =quotes[0];
quotes.forEach((quote, i) => {
setTimeout(() => {
document.getElementById('widget').innerHTML =quote;
}, i * INTERVAL);
});
}
function dispalyWidget() {
dispalyQuote();
setTimeout(dispalyWidget, quotes.length*INTERVAL);
}
dispalyWidget()
</script>
</body>
</html>