Skip to content

Commit cd850fc

Browse files
gonccalogonccalo
committed
add some missing ;
span to preload font add css loader with a spinner
1 parent b27cc40 commit cd850fc

File tree

3 files changed

+90
-40
lines changed

3 files changed

+90
-40
lines changed

‎index.html

+13-15
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,22 @@
11
<!DOCTYPE html>
22
<html>
3-
4-
<link rel="stylesheet" href="styles.css">
5-
<link rel="shortcut icon" type="image/x-icon" href="wow.png" />
6-
7-
<script type="text/javascript" src="https://code.jquery.com/jquery-latest.js"></script>
8-
<script type="text/javascript" src="js/app.js"></script>
9-
3+
<head>
4+
<link rel="stylesheet" href="styles.css">
5+
<link rel="shortcut icon" type="image/x-icon" href="wow.png" />
6+
<script type="text/javascript" src="https://code.jquery.com/jquery-latest.js"></script>
7+
<script type="text/javascript" src="js/app.js"></script>
8+
<title id="title"></title>
9+
</head>
1010
<body id="body_id" class="bg">
11-
12-
<div class="center">
11+
<div class="font_preload" style="opacity: 0">
12+
<span style="font-family: Sansation_Bold;"></span>
13+
<span style="font-family: Sansation_Bold;"></span>
14+
</div>
15+
<div id="loader"></div>
16+
<div style="display: none" id="main" class="center animate-bottom">
1317
<a id="intro" class="intro"></a>
1418
<br>
1519
<a id="sensation" class="sensation"></a>
1620
</div>
17-
18-
19-
<head>
20-
<title id="title"></title>
21-
</head>
22-
2321
</body>
2422
</html>

‎js/app.js

+32-22
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
var baseUrl = "https://raw.githubusercontent.com/nmssilva/sensation/master/"
1+
var baseUrl = "https://raw.githubusercontent.com/nmssilva/sensation/master/";
22

3-
var apiBaseUrl = "https://www.googleapis.com/customsearch/v1"
4-
var imageApikey = "AIzaSyB258Pcb4kRI4JtH4Q4KjRcLDAj22YxLOE"
5-
var searchEngineId = "009202958278043524580:1mrllu72sxk"
6-
var searchType = "image"
7-
var imgSize = "huge"
8-
var minWidth = 1920
3+
var apiBaseUrl = "https://www.googleapis.com/customsearch/v1";
4+
var imageApikey = "AIzaSyB258Pcb4kRI4JtH4Q4KjRcLDAj22YxLOE";
5+
var searchEngineId = "009202958278043524580:1mrllu72sxk";
6+
var searchType = "image";
7+
var imgSize = "huge";
8+
var minWidth = 1920;
99

1010
var sensation, imageUrl;
1111

@@ -19,7 +19,7 @@ function hashCode(num) {
1919
hash |= 0; // Convert to 32bit integer
2020
}
2121
return hash;
22-
};
22+
}
2323

2424
function readIntroFile(file, num) {
2525
var rawFile = new XMLHttpRequest();
@@ -35,7 +35,7 @@ function readIntroFile(file, num) {
3535
document.getElementById("title").innerHTML += intro + "... ";
3636
}
3737
}
38-
}
38+
};
3939
rawFile.send(null);
4040
}
4141

@@ -53,7 +53,7 @@ function readTextFile(file, num) {
5353
document.getElementById("title").innerHTML += sensation + " sensation :O";
5454
}
5555
}
56-
}
56+
};
5757
rawFile.send(null);
5858
}
5959

@@ -72,47 +72,57 @@ function getImage(sensation) {
7272
success: function(response) {
7373
// alert(response.status);
7474
var imageList = response['items'];
75-
i = 0;
75+
var i = 0;
7676
// Get a suitable image
7777
while (true) {
7878
if (imageList[i] != null) {
79-
8079
console.log("ASD");
8180
var width = imageList[i]['image']['width'];
8281
var height = imageList[i]['image']['height'];
8382
//if (width > height && width >= 1920 && height >= 1080) {
83+
document.body.style["background-image"]= "url( " + imageList[i]['link'] + ")";
84+
var img = new Image();
85+
img.onload = function () {
86+
document.getElementById("loader").style.display = "none";
87+
document.getElementById("main").style.display = "block";
88+
};
89+
img.onerror = function () {
90+
document.body.style["background-image"] = "url(bg.jpg)";
91+
document.getElementById("loader").style.display = "none";
92+
document.getElementById("main").style.display = "block";
93+
};
94+
img.src = imageList[i]['link'];
95+
break;
96+
}
97+
i++;
98+
/*
8499
document.body.style["background-image"] = "url( " + imageList[i]['link'] + ")";
85100
break;
86101
87-
88-
/* var newImg = new Image;
102+
var newImg = new Image;
89103
newImg.onload = function() {
90104
document.body.style["background-image"] = this.src;
91105
};
92106
newImg.src = imageList[i]['link'];
93107
break;
94-
*/
95108
//}
96109
}
97-
98110
i++;
99-
111+
*/
100112
}
101113
},
102114
error: function() {
103-
document.body.style.background = "url(https://raw.githubusercontent.com/nmssilva/sensation/master/bg.jpg)";
115+
document.body.style["background-image"] = "url(bg.jpg)";
104116
}
105117
});
106118
}
107119

108120
window.onload = function() {
109-
110121
var d = new Date();
111122
var num = d.getDate() * 10000000 + d.getMonth() * 10000 + d.getFullYear();
112123
num = hashCode(num.toString());
124+
document.body.style.backgroundColor = "grey";
113125
readIntroFile(baseUrl + "misc/intros.txt", num);
114126
readTextFile(baseUrl + "misc/sensations.txt", num);
115-
document.body.style.backgroundColor = "grey";
116127
getImage(sensation);
117-
118-
}
128+
};

‎styles.css

+45-3
Original file line numberDiff line numberDiff line change
@@ -15,9 +15,7 @@ a {
1515
}
1616
.bg{
1717
/* bottom, image */
18-
background-color: #000;
19-
background-position: center center;
20-
background-repeat:no-repeat;
18+
background: #000 no-repeat center center;
2119
background-size: cover;
2220
}
2321
.center {
@@ -36,4 +34,48 @@ a {
3634
color:white;
3735
font-size: 100px;
3836
font-family: Sansation_Bold;
37+
}
38+
#loader {
39+
position: absolute;
40+
left: 50%;
41+
top: 50%;
42+
z-index: 1;
43+
width: 150px;
44+
height: 150px;
45+
margin: -75px 0 0 -75px;
46+
border: 16px solid #f3f3f3;
47+
border-radius: 50%;
48+
border-top: 16px solid #3498db;
49+
width: 120px;
50+
height: 120px;
51+
-webkit-animation: spin 2s linear infinite;
52+
animation: spin 2s linear infinite;
53+
}
54+
@-webkit-keyframes spin {
55+
0% { -webkit-transform: rotate(0deg); }
56+
100% { -webkit-transform: rotate(360deg); }
57+
}
58+
59+
@keyframes spin {
60+
0% { transform: rotate(0deg); }
61+
100% { transform: rotate(360deg); }
62+
}
63+
64+
/* Add animation to "page content" */
65+
.animate-bottom {
66+
position: relative;
67+
-webkit-animation-name: animatebottom;
68+
-webkit-animation-duration: 2s;
69+
animation-name: animatebottom;
70+
animation-duration: 2s
71+
}
72+
73+
@-webkit-keyframes animatebottom {
74+
from { bottom:-100px; opacity:0 }
75+
to { bottom:0px; opacity:1 }
76+
}
77+
78+
@keyframes animatebottom {
79+
from{ bottom:-100px; opacity:0 }
80+
to{ bottom:0; opacity:1 }
3981
}

0 commit comments

Comments
 (0)