Skip to content

Commit 913c48b

Browse files
LidaronLidaron
committed
Merge branch 'earthlapse-splash' into earthlapse-stories
2 parents dab374e + 0f7f5f3 commit 913c48b

File tree

5 files changed

+141
-0
lines changed

5 files changed

+141
-0
lines changed

‎earthlapse-hci/startup-logos.png‎

15.9 KB
Loading

‎earthlapse-hci/startup.css‎

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
#earthlapse-ui-splash-overlay {
2+
position: absolute;
3+
top: 0;
4+
left: 0;
5+
height: 100%;
6+
width: 100%;
7+
z-index: 999;
8+
padding: 0 0 150px 0;
9+
color: #ffffff;
10+
font: 20px/1.1 "Source Sans Pro", Helvetica, Arial, sans-serif;
11+
text-align: center;
12+
box-sizing: border-box;
13+
background: #39B54A url(startup-logos.png) no-repeat 50% 95%;
14+
transition-duration: 0.5s;
15+
}
16+
17+
.earthlapse-ui-splash-complete {
18+
opacity: 0;
19+
visibility: hidden;
20+
}
21+
22+
#earthlapse-ui-splash {
23+
text-align: left;
24+
display: inline-block;
25+
height: 150px;
26+
padding: 0 0 0 150px;
27+
position: relative;
28+
top: 50%;
29+
margin: 0 auto;
30+
}
31+
32+
#earthlapse-ui-splash .cssload-container {
33+
float: left;
34+
margin: 0 0 0 -150px;
35+
}
36+
37+
#earthlapse-ui-splash h1 {
38+
margin: 0;
39+
font-size: 64px;
40+
font-weight: 300;
41+
display: inline-block;
42+
}
43+
44+
#earthlapse-ui-splash h2 {
45+
margin: 0;
46+
font-size: 24px;
47+
font-weight: 600;
48+
}
49+
50+
/* Loading animation
51+
---------------------------------------- */
52+
53+
.cssload-container {
54+
width: 100px;
55+
height: 100px;
56+
text-align: center;
57+
}
58+
59+
.cssload-zenith {
60+
width: 100px;
61+
height: 100px;
62+
margin: 0 auto;
63+
border-radius: 50%;
64+
border-top-color: transparent;
65+
border-left-color: transparent;
66+
border-right-color: transparent;
67+
box-shadow: 2px 2px 2px #ffffff;
68+
animation: cssload-spin 690ms infinite linear;
69+
-o-animation: cssload-spin 690ms infinite linear;
70+
-ms-animation: cssload-spin 690ms infinite linear;
71+
-webkit-animation: cssload-spin 690ms infinite linear;
72+
-moz-animation: cssload-spin 690ms infinite linear;
73+
}
74+
75+
@keyframes cssload-spin {
76+
100%{ transform: rotate(360deg); transform: rotate(360deg); }
77+
}
78+
79+
@-o-keyframes cssload-spin {
80+
100%{ -o-transform: rotate(360deg); transform: rotate(360deg); }
81+
}
82+
83+
@-ms-keyframes cssload-spin {
84+
100%{ -ms-transform: rotate(360deg); transform: rotate(360deg); }
85+
}
86+
87+
@-webkit-keyframes cssload-spin {
88+
100%{ -webkit-transform: rotate(360deg); transform: rotate(360deg); }
89+
}
90+
91+
@-moz-keyframes cssload-spin {
92+
100%{ -moz-transform: rotate(360deg); transform: rotate(360deg); }
93+
}

‎earthlapse-hci/startup.html‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Earth Timelapse is starting...</title>
5+
<link href="startup.css" rel="stylesheet" />
6+
</head>
7+
<body>
8+
<script src="startup.js"></script>
9+
</body>
10+
</html>

‎earthlapse-hci/startup.js‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
"use strict";
2+
3+
document.addEventListener("DOMContentLoaded", function(event) {
4+
var oSplash = document.createElement("DIV");
5+
oSplash.id = "earthlapse-ui-splash";
6+
7+
// Create animation
8+
var oAnimContainer = document.createElement("DIV");
9+
oAnimContainer.className = "cssload-container";
10+
var oAnimZenith = document.createElement("DIV");
11+
oAnimZenith.className = "cssload-zenith";
12+
oAnimContainer.appendChild(oAnimZenith);
13+
oSplash.appendChild(oAnimContainer);
14+
15+
// Create loading message
16+
var oLogo = document.createElement("H1");
17+
oLogo.appendChild(document.createTextNode("Earth Timelapse"));
18+
oSplash.appendChild(oLogo);
19+
var oStatus = document.createElement("H2");
20+
oStatus.appendChild(document.createTextNode("Starting up - please wait..."));
21+
oSplash.appendChild(oStatus);
22+
23+
// Show splash screen
24+
var oScreen = document.createElement("DIV");
25+
oScreen.id = "earthlapse-ui-splash-overlay";
26+
oScreen.appendChild(oSplash);
27+
document.body.appendChild(oScreen);
28+
29+
window.onload = function () {
30+
if (typeof EarthlapseUI === "undefined") {
31+
window.location.replace("../examples/webgl-timemachine/index.html");
32+
} else {
33+
oScreen.className = "earthlapse-ui-splash-complete";
34+
}
35+
};
36+
});

‎examples/webgl-timemachine/index.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
<link href="index.css" rel="stylesheet" type="text/css" />
1616

1717
<!-- Begin Earthlapse UI Styles -->
18+
<link href="../../earthlapse-hci/startup.css" rel="stylesheet" type="text/css" />
1819
<link href="../../earthlapse-hci/ui-chrome-toggle.css" rel="stylesheet" type="text/css" />
1920
<link href="../../earthlapse-hci/ui-globalcontrol.css" rel="stylesheet" type="text/css" />
2021
<link href="../../earthlapse-hci/modes.css" rel="stylesheet" type="text/css" />
@@ -62,6 +63,7 @@
6263

6364
<!-- Begin Earthlapse UI Scripts -->
6465
<script src="../../earthlapse-hci/earthlapse.js" type="text/javascript"></script>
66+
<script src="../../earthlapse-hci/startup.js" type="text/javascript"></script>
6567
<script src="../../earthlapse-hci/ui-chrome-toggle.js" type="text/javascript"></script>
6668
<script src="../../earthlapse-hci/ui-globalcontrol.js" type="text/javascript"></script>
6769
<script src="../../earthlapse-hci/modes.js" type="text/javascript"></script>

0 commit comments

Comments
 (0)