perso
/
IA64
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

feat: add splash animation at launch

This commit is contained in:
root 2022-08-16 20:06:18 +02:00
parent fdca504d20
commit c855c1838e
2 changed files with 78 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@ -61,7 +61,7 @@
setTimeout(function() { showSession("session-5"); }, 1500); setTimeout(function() { showSession("session-5"); }, 1500);
setTimeout(function() { showSession("session-6"); }, 1900); setTimeout(function() { showSession("session-6"); }, 1900);
setTimeout(function() { showSession("session-7"); }, 2200); setTimeout(function() { showSession("session-7"); }, 2200);
setTimeout(function() { location.href="/main.html" }, 2500); setTimeout(function() { location.href="/splash.html" }, 2500);
}; };
function showSession(id) { function showSession(id) {
const session = document.getElementById(id); const session = document.getElementById(id);

77
splash.html Normal file
View File

@ -0,0 +1,77 @@
<!DOCTYPE html>
<html lang="en" class="no-tui-scroll">
<head>
<meta charset="UTF-8">
<title>IA86 Debugger</title>
<script src="../dist/tuicss.min.js"></script>
<script src="../dist/jquery-2.2.0.min.js"></script>
<link rel="stylesheet" href="../dist/tuicss.min.css">
</head>
<body style="height: 100vh;">
<style>
.zoom {
animation: zoom-in-zoom-out 3.5s ease;
}
@keyframes zoom-in-zoom-out {
0%
{
transform: scale(0.1, 0.1);
}
50%
{
transform: scale(1.2, 1.2);
}
100%
{
transform: scale(1, 1);
}
}
.typewriter {
overflow: hidden;
border-right: .15em solid orange;
animation:
typing 3.5s steps(40, end),
blink-caret .75s step-end infinite;
}
@keyframes typing {
from { width: 0 }
to { width: 100% }
}
@keyframes blink-caret {
from, to { border-color: transparent }
50% { border-color: orange; }
}
</style>
<div class="tui-screen bordered tui-bg-blue-black" style="height: 100vh;">
<div class="tui-window full-width tui-no-shadow" style="height:100%">
<fieldset class="tui-fieldset" style="height:100%; display: flex; align-items: center; vertical-align: middle; justify-content: center;">
<div><pre class="typewriter">
█████ █████████ ████████ ████████
░░███ ███░░░░░███ ███░░░░███ ███░░░░███
░███ ░███ ░███ ░███ ░███ ░███ ░░░
░███ ░███████████ ░░████████ ░█████████
░███ ░███░░░░░███ ███░░░░███ ░███░░░░███
░███ ░███ ░███ ░███ ░███ ░███ ░███
█████ █████ █████░░████████ ░░████████
░░░░░ ░░░░░ ░░░░░ ░░░░░░░░ ░░░░░░░░
THE EVEN MORE PEDAGOGICAL SYSTEM !!
</pre>
<pre class="zoom">
Episode 1 : learn x86 assembly language.
</pre></div>
</fieldset>
</div>
</div>
</body>
<script>
window.onload = function() {
setTimeout(function() { location.href="/main.html" }, 4500);
}
</script>
</html>