-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathindex.html
165 lines (128 loc) · 3.96 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
<!DOCTYPE html>
<html lang="">
<head>
<title></title>
<style>
@import url('https://fonts.googleapis.com/css?family=Coda+Caption:800');
html, body { background: hsl(220, 70%, 30%); }
html { height: 100%; display: flex; }
body { margin: auto; }
/*
You can adjust the
* rotation (rotateX),
* vertical stretch (scaleY),
* projection (perspective) and
* layer depth (--layer-depth)
*/
:root {
--line-index: 0; /* Set a default value */
--word-total:2;
--layer-depth:0.32 em;
--min-font-size:0;
--max-font-size:0;
}
.title {
text-align: center;
font-family: 'Coda Caption', sans-serif;
font-weight: 800;
font-size: calc(20vw/ var(--word-total) ); /* Overriden below for fluid typography test */
line-height: 1.0;
letter-spacing: -0.03em;
transform: perspective(300px) scaleY(1.5) rotateX(-40deg);
transform-style: preserve-3d; /* Important for establishing a shared 3D space for all the layers */
--layer-depth: 0.32em;
}
/* The front layer are yellow words with a thick black stroke outline */
.title .word {
position: relative;
display: inline-block;
color: yellow;
font-size: calc(((var(--line-index) + 1) * 25%) + 50%); /* We skew font-sizes to avoid emphasize on the top, due to perspective rotation */
text-shadow: 0.06em 0 black, 0.06em 0.06em black, 0 0.06em black, -0.06em 0.06em black, -0.06em 0 black, -0.06em -0.06em black, 0 -0.06em black, 0.06em -0.06em black;
transform-style: preserve-3d; /* Important as above, we need to make sure the pseudos share the same 3D space */
}
/* The back layers are two pseudos, we pull content through via Splitting.js! */
.title .word::before,
.title .word::after {
content: attr(data-word);
position: absolute;
top: auto;
left: 0;
bottom: 0;
display: block;
pointer-events: none;
}
/* Red layer immediately behind the yellow, thinner stroke outline */
.title .word::before {
color: red;
text-shadow: 0.02em 0 black, 0.02em 0.02em black, 0 0.02em black, -0.02em 0.02em black, -0.02em 0 black, -0.02em -0.02em black, 0 -0.02em black, 0.02em -0.02em black;
transform: translateZ(calc(var(--layer-depth) * -0.5));
}
/* Furthest layer, just simple black lettering with no outline */
.title .word::after {
color: black;
text-shadow: none;
transform: translateZ(calc(var(--layer-depth) * -1));
}
/* Testing Fluid Typography with CSS Variables – Broke on Safari though? */
.title {
--min-font-size: 64;
--max-font-size: 128;
font-size: calc(var(--min-font-size) * 1px);
}
@media screen and (min-width: 320px) {
.title {
font-size: calc(var(--min-font-size) * 1px + (var(--max-font-size) - var(--min-font-size)) * ((100vw - 320px) / 680));
}
}
@media screen and (min-width: 1000px) {
.title {
font-size: calc(var(--max-font-size) * 1px);
}
}
.button-container {
text-align: center;
margin-top: 30px; /* Adjust this value to control the distance between the text and the button */
}
.action-button {
font-family: 'Coda Caption', sans-serif;
padding: 10px 20px;
background-color: white; /* Adjust button styles as needed */
color: red;
border: none;
border-radius: 5px;
cursor: pointer;
}
.action-button:hover{
background-color: yellow; /* Adjust button styles as needed */
color: blue;
}
</style>
</head>
<div class="title" data-splitting="lines">
MAZE<br/>
LEARNER
</div>
<script src="https://unpkg.com/splitting/dist/splitting.min.js">
</script>
<script>
window.addEventListener('load', function() {
Splitting();
});
</script>
<div class="button-container">
<button class="action-button" onclick="runPythonScript()">Click to Proceed</button>
</div>
<!-- <script>
function runPythonScript() {
fetch('/run_script', { method: 'POST' })
.then(response => {
console.log('Python script executed.');
// Additional handling if needed
})
.catch(error => {
console.error('Error:', error);
});
}
</script> -->
</html>