-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
119 lines (96 loc) · 6.6 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>The Orphanage</title>
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Anonymous+Pro|Roboto:400,900|VT323" rel="stylesheet">
<!-- import external js - f12a2877-81df-40ba-9389-92e6a7189297 -->
<script src="js/jquery.min.js" charset="utf-8"></script>
<script src="js/typed.min.js" charset="utf-8"></script>
<script>
// Fade
$(document).ready(function () {
setTimeout(function(){ $(".bvideo").css('opacity','1'); },1000)
});
</script>
</head>
<body>
<video autoplay="autoplay" muted="muted" class="bvideo" loop="loop" >
<source src="images/particles.mp4" type="video/mp4">
</video>
<nav>
<a onclick="handleClick('#hero')" class="logo"><span>The</span><br/>Orphanage</a>
|
<a onclick="handleClick('#play')">Play</a> |
<a onclick="handleClick('#about')">About</a> |
<a onclick="handleClick('#story')">Story</a> |
<a onclick="handleClick('#world')">Game World</a> |
<a onclick="handleClick('#we')">Who are we?</a> |
<a onclick="handleClick('#contact')">Contact</a>
<a class="button" href="textadventure-game.zip">Download</a>
</nav>
<script type="text/javascript">
const handleClick = (id) => {
console.log(id)
$('html, body').animate({
scrollTop: $(id).offset().top - 100
}, 500);
}
</script>
<div class="wrapper">
<div id="typed-strings">
<p>
<span class="cmdulr">></span> “The Orphanage” textadventure game takes you on a mysterious puzzle adventure to an unknown abandoned orphanage in the early 1970’s. ^100 <br/><br/>
<span class="cmdulr">></span> ^1000 Here you play as a young 15-year-old girl named Claire who has oddly lost her memory. ^100 <br/><br/>
<span class="cmdulr">></span> ^1000 Your job is to find out what happened to your memory and what is the purpose of the orphanage. ^100 <br/><br/>
<span class="cmdulr">></span> ^1000 Your choices and interactions will determine the outcome of the game. ^100 <br/><br/>
<span class="cmdulr">> ...</span> <br/><br/>
<span class="cmdulr">> <a class="startNow" onclick="handleClick('#about')"> ^1000 [ Start your journey now ] </a></span> <br/><br/>
<span class="cmdulr">> </span>
</p>
</div>
<div class="hero" id="hero">
<div class="holder">
<p>The Orphanage</p>
<br>
<span id="typed"></span>
</div>
</div>
<script>
const typed = new Typed('#typed', {
stringsElement: '#typed-strings',
typeSpeed: 12,
startDelay: 420,
cursorChar: '|',
});
</script>
<div class="area-1" id="play">
<h1>PLAY</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lacinia euismod gravida. Maecenas ultrices lacus sed odio egestas commodo. Nunc vitae justo elit. Aliquam suscipit magna in pharetra rhoncus. Nulla facilisi. Quisque aliquet elit mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ac ante vel libero dapibus facilisis. Nulla velit arcu, tempor ac massa at, pharetra facilisis libero.<br/> Donec eleifend tincidunt enim in imperdiet. Aenean feugiat sed sapien sed sagittis. Donec auctor facilisis libero, ut interdum urna imperdiet vel. Duis ut semper augue, quis pretium ante. Nullam vulputate purus a libero iaculis consequat. Donec odio dui, consequat eu porttitor ac, dignissim sed ex.</p>
</div>
<div class="area-2" id="about">
<h1>ABOUT</h1>
<p>The Orphanage is a text-based adventure game developed by Sampo Tuisku, Miikka Virtanen and Matti Närhi. The game is programmed with Python and on the side, it communicates with MariaDB database. All of the functions that are meant for running the program are in Python. All the data, for example about items, is in a database, which will be fetched by the Python program. The player is meant to play the game by inputting text or numbers into the game. There is a parser in the game that runs certain functions based on the text or the numbers the player has input. The game is a part of a school project in ICT studies and its purpose is to apply skills learned in a programming course.</p>
</div>
<div class="area-3" id="story">
<h1>STORY</h1>
<p>The game tells a story of a 15 years old girl named Claire who wakes up in front of a an old orphanage and she doesn't have all of her memories intact. As she explores the orphanage she'll try to solve the mystery that surrounds her and gain back her memories. The story deals with heavy subjects such as domestic violence and dealing with the demons of your past. Join Claire in solving solving the mystery of the orphanage and her amnesia.</p>
</div>
<div class="area-4" id="world">
<h1>GAME WORLD</h1>
<p>In the beginning of the game you emerge in front of a four storey abandoned building. You feel like the place is familiar and means something. You have no idea how you got here but here you are.. The surroundings are scattered with old broken toys and a rusty swing that makes an awful creak as the wind blows. The trees look dead and you feel like you're being watched..It looks like it had once bloomed with young children but now the building has gone crooked and has been swallowed by the nature and it’s creatures.<br><br>It’s dark and the air is moist. You are surrounded by woods and there is no sign of life. A full moon shimmers through the clouds that are gathering as you feel a drop of water on your nose, a storm is coming. The cold hits your skin as you slowly trudge your way through the rubble inside the building to get warmth, shelter and investigate what lies within. You get to the door and above it says “Kindred Hearts Orphanage”.</p>
</div>
<div class="area-5" id="we">
<h1>WE</h1>
<p>Sampo Tuisku, Miikka Virtanen and Matti Närhi, the developers of The Orphanage, are first year ICT students in Metropolia University of Applied Sciences. We began our studies in Metropolia in August 2017 and at the moment we are completing our core requirement studies. Developing a game was a project included in a theme called Games and The Orphanage is the result of that project. Duration of the studies in Metropolia University of Applied Sciences is four years and after graduating we are engineers in ICT.</p>
</div>
<div class="contacts" id="contact">
<a class="middle">GET IN TOUCH</a><br>
|
<a>GitHub</a> |
<a>Email</a> |
</div>
</div>
</body>
</html>