-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
133 lines (122 loc) · 5.01 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
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />
<title>Permafrost</title>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
/*device detection*/
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) )
/* some code.. */
{
window.location.pathname = 'mobileIndex.html';
}
var gallery = document.getElementById("gallery");
var imgs = gallery.children;
var modal = document.getElementById("modal");
var modal_img = modal.children[0];
for (var i = 0; i < imgs.length; i++) {
imgs[i].onclick = function() {
modal_img.src = this.src;
modal.classList.add("show");
}
}
// Close when clicking anywhere on modal not on img
modal.onclick = function(e) {
if (e.target !== this)
return;
modal.classList.remove("show");
}
</script>
</head>
<body>
<div class="navMenu">
<img src="media/menulogo.png" width=30 height=30 style="float: left; padding: 14px 5px;"><a href='#aboutSec'><span class="navAbout">About</span></a><a href="#mediaSec"><span class="navMedia">Media</span></a><a href="wiki.html"><span class="navWiki">Wiki</span></a><a href="blog.html"><span class="navBlog">DevBlog</span></a>
</div>
<div class="mainSec">
<div class="caption">
<div class="mainBanner">
<img src="media/logo.png" style="margin-bottom:100px;margin-top:50px;opacity:0.90; width:30%; height:35%;">
<br><a style="position: relative;display: inline-block;bottom:90px;margin-top: 120px;padding: 15px 25px;" href="https://github.com/Permafrost-Game/Permafrost/releases/tag/v1.0.0" class="downloadButton">DOWNLOAD</a><br>
</div>
</div>
</div>
<div id="aboutSec" class="aboutSec">
<div class="caption">
<div class="coolbanner">
<h3 style="text-align:center;">ABOUT PERMAFROST</h3>
<p>Learn more about our game below!</p>
</div>
<div class="pitchVideo">
<iframe src="https://www.youtube.com/embed/6CqFHRCs1aw?rel=0&autoplay=1&mute=1&modestbranding=1&autohide=1&showinfo=0&controls=0&loop=1&playlist=6CqFHRCs1aw" width="560" height="315" frameborder="0"></iframe>
</div>
</div>
</div>
<div class="infoBars">
<p>Permafrost is Colony Survival Sim, where you will have to lead a brave band of survivors through the hellish snowscape of a post-apocalyptic Earth; brought about by the genocidal acts of a rogue A.I that seeks to snuff out all human life. Take control of a small group of humans as they attempt to colonize the area around a defective Cooling Tower, and help carve out a place for them in this brave new world. However, faced with the unbridled force of the elements; an unfamiliar, untamed fauna; aswell as the looming threat of the Rogue A.I, simply surviving will prove to be a nigh impossible feat.</p>
</div>
<div id="mediaSec" class="mediaSec">
<div class="caption">
<div class="coolbanner">
<h3 style="text-align:center;">MEDIA</h3>
<p>Concept Art and other Media</p>
</div>
</div>
<div class="flexibleBox">
<div class="row">
<div class="column">
<u><h1 style="color: white;margin-bottom: -20px; margin-top: 5px;">Media/Concept Art</h1></u><br>
<p style="color: white;">Here you can find a small collection of concept art used in our game!<br>These are just concept art sketches and may not reflect on the exact assets which will be in the game after release!<br><br>Artwork made by our artist <u><b>Ajay</b></u></p>
</div>
<div class="column">
<img src="media/Smilodon.jpg">
<img src="media/Tower.jpg">
</div>
<div class="column">
<img src="media/Venom.jpg">
<img src="media/ControlCenter.jpg">
</div>
<div class="column">
<img src="media/Hybrid.jpg">
<img src="media/Characters.jpg">
</div>
<div class="column">
<img src="media/Bear.png">
<img src="media/colonist.png">
</div>
<div class="column">
<img src="media/Robot.png">
<img src="media/bandit.png">
</div>
</div>
<div class="footer">
<p>Copyright © Permafrost 2020</p>
</div>
</div>
</div>
<button onclick="topFunction()" id="myBtn" title="Top button">▲</button>
<script>
//Get the button
var mybutton = document.getElementById("myBtn");
// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {scrollFunction()};
function scrollFunction()
{
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20)
{
mybutton.style.display = "block";
}
else
{
mybutton.style.display = "none";
}
}
// When the user clicks on the button, scroll to the top of the document
function topFunction()
{
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
</script>
</body>
</html>