-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
109 lines (98 loc) · 3.16 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
<!doctype html>
<html>
<head>
<style>
/* Cooked by Chef Excellence */
html, body, #excellentContainerDiv {
height: 100%;
margin: 0;
}
body {
background: #fc0;
}
#floater {
height: 14.5%;
width: 100%;
}
#excellentImageTagline {
clear: both;
height: 70%;
}
#excellentText {
font-family: 'Arial';
opacity: 0;
text-transform: capitalize;
text-align: center;
font-size: 40px;
font-style: italic;
color: rgb(0, 0, 0);
-webkit-animation: excellentFade 2.5s;
animation: excellentFade 2.5s;
-webkit-animation-play-state: paused;
animation-play-state: paused;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
#excellentSource {
position: fixed;
top: 10px;
right: 10px;
opacity: 0.1;
transition: opacity .5s ease-out;
-moz-transition: opacity .5s ease-out;
-webkit-transition: opacity .5s ease-out;
}
#excellentSource:hover {
opacity: 1;
}
#excellentChef {
display: block;
height: 80%;
padding-bottom: 40px;
margin: auto;
}
@-webkit-keyframes excellentFade {
from {opacity: 0;}
to {opacity: 1;}
}
@keyframes excellentFade {
from {opacity: 0;}
to {opacity: 1;}
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>'An Excellent Chef Excellence Simulator'</title>
</head>
<body>
<audio id="excellentSFX" preload="preload">
<source src="/excellentAssets/excellentJingle.ogg" type="audio/ogg">
<source src="/excellentAssets/excellentJingle.mp3" type="audio/mpeg">
</audio>
<a href="https://github.com/excellentorg/excellentrepo" title="An Excellent Source">
<img id="excellentSource" width="32" src="/excellentAssets/excellentOctocat.png">
</a>
<div id="excellentContainerDiv">
<div id="floater"></div>
<div id="excellentImageTagline">
<img id="excellentChef" src="/excellentAssets/TheFaceOfExcellence.png"/>
<div id="excellentText">'An Excellent <span id="excellentPhrase"></span>'</div>
</div>
</div>
<script type="text/javascript">
window.onload = function() {
var excellentPath = location.pathname;
var excellentIntPhrase = excellentPath.substring(1).split('/');
var excellentPhrase = decodeURI(excellentIntPhrase.join(" "));
var excellentSFX = document.getElementById("excellentSFX");
var excellentTag = document.getElementById("excellentText");
var excellentElement = document.getElementById("excellentPhrase");
if (excellentPhrase === "") { excellentPhrase = "Website"; }
var excellentPhraseNode = document.createTextNode(excellentPhrase);
excellentElement.appendChild(excellentPhraseNode);
excellentSFX.play();
excellentTag.style.WebkitAnimationPlayState = "running";
excellentTag.style.animationPlayState = "running";
};
</script>
</body>
</html>