mirror of
https://github.com/Xevion/history-of-robotics.git
synced 2026-01-31 04:24:36 -06:00
add changed js files that I forgot to upload
This commit is contained in:
Xevion
+222
-183
@@ -1,194 +1,233 @@
|
||||
<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><link rel=icon href=/history-of-robotics/favicon.ico><title>History of Robotics - Spirit & Sojourner</title><style>@import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@700&display=swap');
|
||||
<!DOCTYPE html>
|
||||
<html lang=en>
|
||||
<head>
|
||||
<meta charset=utf-8>
|
||||
<meta http-equiv=X-UA-Compatible content="IE=edge">
|
||||
<meta name=viewport content="width=device-width,initial-scale=1">
|
||||
<link rel=icon href=/history-of-robotics/favicon.ico>
|
||||
<title>History of Robotics - Spirit & Sojourner</title>
|
||||
<style>@import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@700&display=swap');
|
||||
|
||||
/* Shamelessly stolen from Tim Hazledine */
|
||||
/* Source: https://codepen.io/tomhazledine/pen/dvKZLg */
|
||||
/* Shamelessly stolen from Tim Hazledine */
|
||||
/* Source: https://codepen.io/tomhazledine/pen/dvKZLg */
|
||||
|
||||
.logo {
|
||||
position: fixed;
|
||||
width: 10em;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
.logo {
|
||||
position: fixed;
|
||||
width: 10em;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.swoosh {
|
||||
display: block;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.swoosh-1 {
|
||||
top: 3.5em;
|
||||
width: 5em;
|
||||
height: 3em;
|
||||
border-top: 0.5em solid #ee2c3e;
|
||||
border-top-left-radius: 10em 2em;
|
||||
z-index: 3;
|
||||
transform: rotate(-10deg);
|
||||
}
|
||||
|
||||
.swoosh-2 {
|
||||
top: -.3em;
|
||||
left: 4em;
|
||||
width: 6em;
|
||||
height: 3em;
|
||||
border-bottom: 0.5em solid #ee2c3e;
|
||||
border-bottom-right-radius: 10em 4em;
|
||||
z-index: 1;
|
||||
transform: rotate(-10deg);
|
||||
}
|
||||
|
||||
.swoosh-3 {
|
||||
top: .8em;
|
||||
left: 5em;
|
||||
width: 5em;
|
||||
height: 2em;
|
||||
transform: rotate(-30deg);
|
||||
border-bottom: 0.2em solid #ee2c3e;
|
||||
border-bottom-right-radius: 10em 2em;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.swoosh-4 {
|
||||
top: 4.7em;
|
||||
left: 2em;
|
||||
width: 6em;
|
||||
height: 4em;
|
||||
border-top: 0.2em solid #ee2c3e;
|
||||
border-top-left-radius: 10em 3em;
|
||||
z-index: 5;
|
||||
transform: rotate(-30deg);
|
||||
}
|
||||
|
||||
.text {
|
||||
position: absolute;
|
||||
z-index: 4;
|
||||
top: 35px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 20em;
|
||||
text-align: center;
|
||||
display: block;
|
||||
color: #ffffff;
|
||||
line-height: .8;
|
||||
font-size: 47px;
|
||||
}
|
||||
|
||||
.orbit-outer {
|
||||
position: relative;
|
||||
width: 8em;
|
||||
height: 8em;
|
||||
margin-left: 0;
|
||||
perspective: 10em;
|
||||
transform: rotate(45deg);
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.orbit-wrapper {
|
||||
font-size: 2em;
|
||||
margin: 0 auto;
|
||||
transform: rotateX(-60deg) translateZ(0);
|
||||
transform-style: preserve-3d;
|
||||
width: 4em;
|
||||
height: 4em;
|
||||
}
|
||||
|
||||
.orbit {
|
||||
width: 4em;
|
||||
height: 4em;
|
||||
border-radius: 50%;
|
||||
border: .1rem solid white;
|
||||
border-left-width: 0;
|
||||
position: relative;
|
||||
animation: spin 2s infinite linear;
|
||||
}
|
||||
|
||||
.orbit:after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -.05rem;
|
||||
border-radius: 2em 0 0 0;
|
||||
border-left: .4rem solid white;
|
||||
width: 2em;
|
||||
height: 2em;
|
||||
transform: rotate(15deg);
|
||||
transform-origin: 100% 100%;
|
||||
}
|
||||
|
||||
.orbit:before {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: 2.3em;
|
||||
left: 0;
|
||||
background: white;
|
||||
transform: rotate(15deg);
|
||||
width: .5rem;
|
||||
height: .8rem;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% {
|
||||
transform: rotate(0);
|
||||
}
|
||||
|
||||
.swoosh {
|
||||
display: block;
|
||||
position: absolute;
|
||||
100% {
|
||||
transform: rotate(-360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.swoosh-1 {
|
||||
top: 3.5em;
|
||||
width: 5em;
|
||||
height: 3em;
|
||||
border-top: 0.5em solid #ee2c3e;
|
||||
border-top-left-radius: 10em 2em;
|
||||
z-index: 3;
|
||||
transform: rotate(-10deg);
|
||||
}
|
||||
.stars {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 9em;
|
||||
font-size: .2em;
|
||||
width: .5em;
|
||||
height: .5em;
|
||||
background: white;
|
||||
border-radius: 50%;
|
||||
box-shadow: white 2em 0 0 -.1em, white 1em 1em 0 -.1em, white 1.4em -1em 0 -.2em, white -1em -.3em 0 -.1em, white -.1em 1.2em 0 -.2em, white -2em 1.5em 0 -.2em, white .5em 1.8em 0 -.1em, white 1em 2em 0 -.2em, white 2em 2.5em 0 -.2em, white 2.3em 2.1em 0 -.2em;
|
||||
}
|
||||
|
||||
.swoosh-2 {
|
||||
top: -.3em;
|
||||
left: 4em;
|
||||
width: 6em;
|
||||
height: 3em;
|
||||
border-bottom: 0.5em solid #ee2c3e;
|
||||
border-bottom-right-radius: 10em 4em;
|
||||
z-index: 1;
|
||||
transform: rotate(-10deg);
|
||||
}
|
||||
.stars.stars-2 {
|
||||
top: 11em;
|
||||
left: 12em;
|
||||
transform: rotate(-40deg);
|
||||
}
|
||||
|
||||
.swoosh-3 {
|
||||
top: .8em;
|
||||
left: 5em;
|
||||
width: 5em;
|
||||
height: 2em;
|
||||
transform: rotate(-30deg);
|
||||
border-bottom: 0.2em solid #ee2c3e;
|
||||
border-bottom-right-radius: 10em 2em;
|
||||
z-index: 5;
|
||||
}
|
||||
.stars.stars-3 {
|
||||
top: 9em;
|
||||
left: 0;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.swoosh-4 {
|
||||
top: 4.7em;
|
||||
left: 2em;
|
||||
width: 6em;
|
||||
height: 4em;
|
||||
border-top: 0.2em solid #ee2c3e;
|
||||
border-top-left-radius: 10em 3em;
|
||||
z-index: 5;
|
||||
transform: rotate(-30deg);
|
||||
}
|
||||
#loader {
|
||||
z-index: 100;
|
||||
background: #1a1a1a;
|
||||
padding: 0;
|
||||
font-family: 'Exo 2', sans-serif;
|
||||
text-transform: uppercase;
|
||||
overflow: hidden;
|
||||
min-height: calc(100vh - 60px);
|
||||
}
|
||||
|
||||
.text {
|
||||
position: absolute;
|
||||
z-index: 4;
|
||||
top: 35px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 20em;
|
||||
text-align: center;
|
||||
display: block;
|
||||
color: #ffffff;
|
||||
line-height: .8;
|
||||
font-size: 47px;
|
||||
}
|
||||
body, html {
|
||||
font-size: 15px;
|
||||
background: #edf0f6;
|
||||
margin: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.orbit-outer {
|
||||
position: relative;
|
||||
width: 8em;
|
||||
height: 8em;
|
||||
margin-left: 0;
|
||||
perspective: 10em;
|
||||
transform: rotate(45deg);
|
||||
z-index: 2;
|
||||
}
|
||||
#app, #loader {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.orbit-wrapper {
|
||||
font-size: 2em;
|
||||
margin: 0 auto;
|
||||
transform: rotateX(-60deg) translateZ(0);
|
||||
transform-style: preserve-3d;
|
||||
width: 4em;
|
||||
height: 4em;
|
||||
}
|
||||
|
||||
.orbit {
|
||||
width: 4em;
|
||||
height: 4em;
|
||||
border-radius: 50%;
|
||||
border: .1rem solid white;
|
||||
border-left-width: 0;
|
||||
position: relative;
|
||||
animation: spin 2s infinite linear;
|
||||
}
|
||||
|
||||
.orbit:after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -.05rem;
|
||||
border-radius: 2em 0 0 0;
|
||||
border-left: .4rem solid white;
|
||||
width: 2em;
|
||||
height: 2em;
|
||||
transform: rotate(15deg);
|
||||
transform-origin: 100% 100%;
|
||||
}
|
||||
|
||||
.orbit:before {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: 2.3em;
|
||||
left: 0;
|
||||
background: white;
|
||||
transform: rotate(15deg);
|
||||
width: .5rem;
|
||||
height: .8rem;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% {
|
||||
transform: rotate(0);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(-360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.stars {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 9em;
|
||||
font-size: .2em;
|
||||
width: .5em;
|
||||
height: .5em;
|
||||
background: white;
|
||||
border-radius: 50%;
|
||||
box-shadow: white 2em 0 0 -.1em, white 1em 1em 0 -.1em, white 1.4em -1em 0 -.2em, white -1em -.3em 0 -.1em, white -.1em 1.2em 0 -.2em, white -2em 1.5em 0 -.2em, white .5em 1.8em 0 -.1em, white 1em 2em 0 -.2em, white 2em 2.5em 0 -.2em, white 2.3em 2.1em 0 -.2em;
|
||||
}
|
||||
|
||||
.stars.stars-2 {
|
||||
top: 11em;
|
||||
left: 12em;
|
||||
transform: rotate(-40deg);
|
||||
}
|
||||
|
||||
.stars.stars-3 {
|
||||
top: 9em;
|
||||
left: 0;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
#loader {
|
||||
z-index: 100;
|
||||
background: #1a1a1a;
|
||||
padding: 0;
|
||||
font-family: 'Exo 2', sans-serif;
|
||||
text-transform: uppercase;
|
||||
overflow: hidden;
|
||||
min-height: calc(100vh - 60px);
|
||||
}
|
||||
|
||||
body, html {
|
||||
font-size: 15px;
|
||||
background: #edf0f6;
|
||||
margin: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
#app, #loader {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
vertical-align: baseline;
|
||||
}</style><link href=/history-of-robotics/css/app.46a3a532.css rel=preload as=style><link href=/history-of-robotics/css/chunk-vendors.db58f2bd.css rel=preload as=style><link href=/history-of-robotics/js/app.87118cc0.js rel=preload as=script><link href=/history-of-robotics/js/chunk-vendors.497ff8e8.js rel=preload as=script><link href=/history-of-robotics/css/chunk-vendors.db58f2bd.css rel=stylesheet><link href=/history-of-robotics/css/app.46a3a532.css rel=stylesheet></head><body><noscript><strong>We're sorry but history-of-robotics doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app><div id=loader><div class=logo><div class="stars stars-1"></div><div class="stars stars-2"></div><div class="stars stars-3"></div><div class=swooshes><span class="swoosh swoosh-1"></span> <span class="swoosh swoosh-2"></span> <span class="swoosh swoosh-3"></span> <span class="swoosh swoosh-4"></span></div><h1 class=text>nasa</h1><div class=orbit-outer><div class=orbit-wrapper><div class=orbit></div></div></div></div></div></div><script src=/history-of-robotics/js/chunk-vendors.497ff8e8.js></script><script src=/history-of-robotics/js/app.87118cc0.js></script></body></html>
|
||||
h1 {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
vertical-align: baseline;
|
||||
}</style>
|
||||
<link href=/history-of-robotics/css/app.46a3a532.css rel=preload as=style>
|
||||
<link href=/history-of-robotics/css/chunk-vendors.db58f2bd.css rel=preload as=style>
|
||||
<link href=/history-of-robotics/js/app.87118cc0.js rel=preload as=script>
|
||||
<link href=/history-of-robotics/js/chunk-vendors.497ff8e8.js rel=preload as=script>
|
||||
<link href=/history-of-robotics/css/chunk-vendors.db58f2bd.css rel=stylesheet>
|
||||
<link href=/history-of-robotics/css/app.46a3a532.css rel=stylesheet>
|
||||
</head>
|
||||
<body>
|
||||
<noscript><strong>We're sorry but history-of-robotics doesn't work properly without JavaScript enabled. Please
|
||||
enable it to continue.</strong></noscript>
|
||||
<div id=app>
|
||||
<div id=loader>
|
||||
<div class=logo>
|
||||
<div class="stars stars-1"></div>
|
||||
<div class="stars stars-2"></div>
|
||||
<div class="stars stars-3"></div>
|
||||
<div class=swooshes><span class="swoosh swoosh-1"></span> <span class="swoosh swoosh-2"></span>
|
||||
<span class="swoosh swoosh-3"></span> <span class="swoosh swoosh-4"></span></div>
|
||||
<h1 class=text>nasa</h1>
|
||||
<div class=orbit-outer>
|
||||
<div class=orbit-wrapper>
|
||||
<div class=orbit></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src=/history-of-robotics/js/chunk-vendors.497ff8e8.js></script>
|
||||
<script src=/history-of-robotics/js/app.87118cc0.js></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user