-
Notifications
You must be signed in to change notification settings - Fork 0
/
home.html
128 lines (112 loc) · 3.82 KB
/
home.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
<!DOCTYPE html>
<html>
<head>
<link rel="shortcut icon" type="image/x-icon" href="icon.ico" />
<title>Document</title>
<style>
@import url(https://fonts.googleapis.com/css?family=Khula:700);
#button {
background-color:#111;
border-radius: 5px;
color: #fff;
cursor: pointer;
padding: 8px 20px;
font-family: 'Khula';
font-size: 25px;
font-weight: bold;
transition-duration: 0.4s;
}
#button:hover {
background-color: aliceblue;
color:rgb(1, 1, 1);
}
body {
background: #111;
overflow: hidden;
}
.hidden {
opacity:0;
}
.console-container {
font-family: "San Francisco";
font-size:4em;
text-align:center;
height:20%;
width:100%;
display:block;
position:absolute;
color:white;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
}
.console-underscore {
display:inline-block;
position:relative;
top:-0.14em;
left:10px;
}
</style>
</head>
<body>
<div class='console-container'>
These Lyrics Do Not Exist
<br><br><br>
<a href="main.html">
<button id="button" >START</button>
</a>
<br><br>
<div style="font-size: 40px;bottom: 0;position: relative;">
Made with <span id='text'></span><div class='console-underscore' id='console'>_</div></div></div>
<script>
consoleText(['PyTorch', 'Fastai', 'GPT-2'], 'text',['rebeccapurple','tomato','lightblue']);
function consoleText(words, id, colors) {
if (colors === undefined) colors = ['#fff'];
var visible = true;
var console = document.getElementById('console');
var letterCount = 2;
var x = 1;
var waiting = false;
var target = document.getElementById(id)
target.setAttribute('style', 'color:' + colors[0])
window.setInterval(function() {
if (letterCount === 0 && waiting === false) {
waiting = true;
target.innerHTML = words[0].substring(0, letterCount)
window.setTimeout(function() {
var usdcolr = colors.shift();
colors.push(usdcolr);
var usdwrd = words.shift();
words.push(usdwrd);
x = 1;
target.setAttribute('style', 'color:' + colors[0])
letterCount += x;
waiting = false;
}, 1000)
} else if (letterCount === words[0].length + 1 && waiting === false) {
waiting = true;
window.setTimeout(function() {
x = -1;
letterCount += x;
waiting = false;
}, 1000)
} else if (waiting === false) {
target.innerHTML = words[0].substring(0, letterCount)
letterCount += x;
}
}, 120)
window.setInterval(function() {
if (visible === true) {
console.className = 'console-underscore hidden'
visible = false;
} else {
console.className = 'console-underscore'
visible = true;
}
}, 400)
}
</script>
</body>
</html>