master
*anna* 4 years ago
parent 259e33d744
commit 08a5cb7dd3

@ -96,9 +96,6 @@ z-index: -1;
position: absolute; position: absolute;
width: 70px; width: 70px;
height: 115px; height: 115px;
} }

BIN
tree/.DS_Store vendored

Binary file not shown.

@ -1,17 +0,0 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<title>start</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<script src="jquery.min.js"></script>
<script type="text/javascript" src="index.js" ></script>
</body>

@ -1,17 +0,0 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<title>start</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<script src="jquery.min.js"></script>
<script type="text/javascript" src="index.js" ></script>
</body>

@ -1,17 +0,0 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<title>start</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<script src="jquery.min.js"></script>
<script type="text/javascript" src="index.js" ></script>
</body>

@ -1,17 +0,0 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<title>start</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<script src="jquery.min.js"></script>
<script type="text/javascript" src="index.js" ></script>
</body>

@ -0,0 +1,51 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<title>final test</title>
<link rel="icon" href="imgs/avatars/ball2.gif">
</head>
<body>
Hello <span id="player_name"></span> (<span id="player_img"></span>).
This is the end. In your journey you visited:
<div id="park_info" style="display:none;">
The park
</div>
<div id="newspaper_info" style="display:none;">
The newspaper
</div>
<script>
//player name
document.querySelector('#player_name').innerHTML =localStorage.playerName;
//player img
var img = document.createElement("img");
img.src = localStorage.myavatar;
var player_img = document.querySelector("#player_img");
player_img.appendChild(img);
//checks story development
window.onload = function (){
var park = document.querySelector("#park_info");
var news = document.querySelector("#newspaper_info");
if (localStorage.park === "opened" ) {
console.log ("park:",localStorage.park);
park.style.display ="block";
}
if (localStorage.newspaper === "opened" ) {
console.log ("newspaper:",localStorage.newspaper);
news.style.display ="block";
}
}
</script>
<script type="text/javascript" src="index.js" ></script>
</body>

Binary file not shown.

Binary file not shown.

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 23 KiB

After

Width:  |  Height:  |  Size: 2.7 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 61 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 43 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 8.8 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 56 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 275 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 280 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 891 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 13 KiB

@ -27,7 +27,7 @@
} }
body{ body{
font-size: 4.2vw; font-size: 4vw;
padding:2.5%; padding:2.5%;
font-family: sinistre; font-family: sinistre;
line-height: 5.3vw; line-height: 5.3vw;
@ -35,7 +35,7 @@ body{
} }
span.special1{ span.special1{
font-family: sinistre; font-family: jolybolditalic;
} }
form { form {
@ -63,11 +63,10 @@ box-shadow: 0px 0px 8px 6px #ccb3ff;
button { button {
-webkit-appearance: none; -webkit-appearance: none;
font-size: 4.5vw;
background-color: white; background-color: white;
border: 0.25vw black solid; border: 0.25vw black solid;
border-radius: 25vw; border-radius: 25vw;
font-family: sinistre; font-family: jolybolditalic;
color:black; color:black;
cursor:pointer; cursor:pointer;
} }
@ -76,6 +75,11 @@ button:hover {
color:#ccb3ff; color:#ccb3ff;
} }
span.button_text{
padding:1.2vw;
font-size: 4.5vw;
}
div.line { div.line {
display: inline-block; display: inline-block;
@ -84,30 +88,16 @@ div.line {
width: 20vw; width: 20vw;
transform: rotate(4deg); transform: rotate(4deg);
} }
div.line2 {
display: inline-block;
border-top: 0.3vw solid black;
padding-bottom: 20px;
width: 20vw;
transform: rotate(-4deg);
}
div.line3 { div.line3 {
display: inline-block; display: inline-block;
border-top: 0.3vw solid black; border-top: 0.3vw solid black;
padding-bottom: 20px; padding-bottom: 20px;
width: 40vw; width: 40vw;
transform: rotate(4deg);
}
div.line4 {
display: inline-block;
border-top: 0.3vw solid black;
padding-bottom: 20px;
width: 10vw;
transform: rotate(-4deg); transform: rotate(-4deg);
} }
*, *,
*:before, *:before,
*:after { *:after {

@ -10,13 +10,13 @@
</head> </head>
<body> <body>
<div class="introtext"> <div class="introtext">
<span class="special1" style="-webkit-padding-start: 15vw;">It</span> looks like you have been summoned by the <span class="special1">ORACLE (<img src="imgs/avatars/ball1.png" height="60vw">,<img src="imgs/avatars/ball2.gif" height="60vw">,<img src="imgs/avatars/ball4.gif" height="60vw">)</span> <span style="-webkit-padding-start: 15vw;">It</span> looks like you have been summoned by the <span class="special1">oracle (<img src="imgs/avatars/ball1.png" height="60vw">,<img src="imgs/avatars/ball2.gif" height="60vw">,<img src="imgs/avatars/ball4.gif" height="60vw">)</span>
<div class="line"></div> <span class="special1">you</span> will be asked to start a journey: throughout it you will be called <div class="line"></div> you will be asked to start a journey: throughout it you will be called
<form name="nameForm"> <form name="nameForm">
<input id="player_name" type="text" > <input id="player_name" type="text" >
</form> </form>
<span class="special1">you</span> can decide whether you are going to look like you can decide whether you are going to look like
<form id="avatar_form"> <form id="avatar_form">
<label class="radio" for="player1" > <label class="radio" for="player1" >
@ -105,9 +105,9 @@
</form> <div class="line3"></div> </form> <div class="line3"></div>
<span class="special1">you</span> can press you can press
<button id="gotostart" onclick="storeName()">START</button> <button id="gotostart" onclick="storeName()"><span class="button_text"> start </span></button>
when you are ready <div class="line4"></div> when you are ready
</div> </div>

@ -32,20 +32,38 @@
body { body {
font-family: jolyregular; font-family: jolyregular;
font-size: 2vw; font-size: 1.8vw;
}
::-moz-selection { /* Code for Firefox */
background: transparent;
} }
::selection {
background: transparent;
}
#player_img {
bottom: 35%;
left: 35%;
position:absolute;
z-index: 20;
}
#groundline { #groundline {
position: fixed; position: fixed;
bottom:0px; bottom:0px;
height:75%; height:83%;
width: 100%; width: 100%;
border-top: 0.15vw solid; border-top: 0.1vw solid;
} }
.text_container { div.text_container {
bottom: 3%; bottom: 2%;
left:3%; left:3%;
right:3%; right:3%;
position:fixed; position:fixed;
@ -56,10 +74,31 @@
margin-inline-end: 1em; margin-inline-end: 1em;
} }
button{
-webkit-appearance: none;
background-color: white;
border: 0.1vw black solid;
border-radius: 25vw;
color:black;
cursor:pointer;
font-family: jolybolditalic;
}
span.button_text{
font-size: 1.6vw;
padding: 8px;
}
#player_name{ #player_name{
font-family: jolybolditalic; font-family: jolybolditalic;
} }
#close_news{
position:fixed;
top:4%;
right:15%;
}
#newspaper{ #newspaper{
position:fixed; position:fixed;
/* border: solid black 2px;*/ /* border: solid black 2px;*/
@ -69,7 +108,7 @@
right:20%; right:20%;
font-family: sinistre; font-family: sinistre;
z-index:30; z-index:30;
font-size: 1.25vw; font-size: 1.1vw;
max-height:80vw; max-height:80vw;
border: 1px solid black; border: 1px solid black;
-webkit-box-shadow: 10px 10px 0px 0px rgba(0,0,0,1); -webkit-box-shadow: 10px 10px 0px 0px rgba(0,0,0,1);
@ -77,6 +116,31 @@
box-shadow: 10px 10px 0px 0px rgba(0,0,0,1); box-shadow: 10px 10px 0px 0px rgba(0,0,0,1);
} }
.news_title_index{
font-size: 2vw;
font-family: jolyboldItalic;
text-decoration: underline 2px solid;
}
.news_title{
font-size: 1.5vw;
font-family: jolyboldItalic;
}
.news_author{
text-decoration: underline 1px solid;
}
.clues{
/*
z-index: -1;
background-color:#ccb3ff;
border-radius:15px;
-webkit-box-shadow: 0px 0px 5px 4px #ccb3ff;
-moz-box-shadow: 0px 0px 5px 4px #ccb3ff;
box-shadow: 0px 0px 5px 4px #ccb3ff;*/
text-decoration: underline wavy 4px ;
}
.left_page{ .left_page{
float:left; float:left;
@ -101,15 +165,27 @@
bottom:2%; bottom:2%;
right:2%; right:2%;
position:absolute; position:absolute;
cursor: pointer;
font-size: 2.5vw;
font-family:jolybolditalic;
} }
#arrow_back1, #arrow_back2 { #arrow_back1, #arrow_back2 {
bottom:2%; bottom:2%;
left:2%; left:2%;
position:absolute; position:absolute;
cursor: pointer;
font-size: 2.5vw;
font-family:jolybolditalic;
} }
/*baloons */ /*baloons */
.baloons{
font-family:sinistre;
font-size: 3.5vw;
}
#baloon1 { #baloon1 {
width: 20vw; width: 20vw;
height: 4vw; height: 4vw;
@ -118,8 +194,8 @@
border-radius: 100vw; border-radius: 100vw;
font-size: 1vw; font-size: 1vw;
text-align: center; text-align: center;
left: 8%; left: 15%;
top:62%; top:5%;
position:absolute; position:absolute;
z-index: 50; z-index: 50;
} }
@ -131,8 +207,8 @@
border-radius: 100vw; border-radius: 100vw;
font-size: 1vw; font-size: 1vw;
text-align: center; text-align: center;
right: 8%; right: 10%;
top:55%; top:61%;
position:absolute; position:absolute;
z-index: 50; z-index: 50;
} }
@ -144,8 +220,8 @@
border-radius: 100vw; border-radius: 100vw;
font-size: 1vw; font-size: 1vw;
text-align: center; text-align: center;
left: 15%; left: 10%;
top:5%; top:60%;
position:absolute; position:absolute;
z-index: 50; z-index: 50;
} }
@ -158,7 +234,7 @@
font-size: 1vw; font-size: 1vw;
text-align: center; text-align: center;
right: 8%; right: 8%;
top:45%; top:52%;
position:absolute; position:absolute;
z-index: 50; z-index: 50;
} }
@ -167,86 +243,83 @@
/*images*/ /*images*/
#player_img {
bottom: 22%;
left: 35%;
position: fixed;
z-index: 20;
}
#bench { #bench {
bottom: 30%; bottom: 35%;
left: 20%; left: 20%;
position: fixed; position: fixed;
z-index:18; z-index:18;
} }
#tree1 { #tree1 {
top:17%; top:5%;
left: 12%; left: 28%;
position: fixed; position: fixed;
} }
#tree2 { #tree2 {
bottom:40%; bottom:45%;
left: 5%; left: 8%;
position: fixed; position: fixed;
z-index:16; z-index:16;
} }
#tree3 { #tree3 {
bottom:45%; bottom:50%;
left: 30%; left: 55%;
position: fixed; position: fixed;
z-index:2; z-index:2;
} }
#tree4 {
top:8%;
left: 48%;
position: fixed;
z-index:3;
} #newspaperimg {
#gardener1 { bottom: 42%;
bottom:57%; left: 25%;
left: 50%;
position: fixed; position: fixed;
z-index:2; z-index:19;
} }
#flower1 { #flower1 {
bottom:55%; bottom:75%;
left: 25%; left: 17%;
position: fixed; position: fixed;
} }
#newspaperimg {
#flower2{
bottom: 38%; bottom: 38%;
left: 25%; left: 8%;
position: fixed; position: fixed;
z-index:19; z-index:17;
} }
#flower2{ #flower3{
bottom: 38%; bottom: 80%;
left: 7%; left: 65%;
position: fixed; position: fixed;
z-index:17; z-index:17;
} }
#fountain { #flower4{
top:22%; bottom: 48%;
left: 38%; left: 48%;
position: fixed; position: fixed;
z-index:0; z-index:17;
} }
#sun { #flower5{
top:8%; bottom: 60%;
left: 10%; right: 14%;
position: fixed; position: fixed;
z-index:-1; z-index:17;
} }
#grass { #grass1{
bottom:15%; bottom: 30%;
right: 20%;
position: fixed; position: fixed;
z-index:-1; z-index:17;
width:100%
} }
#grass2{
bottom: 80%;
left: 2000px;
position: fixed;
z-index:17;
}

@ -9,25 +9,26 @@
</head> </head>
<body> <body>
<button id="final_test" onclick="location.href='final.html';">go to final test </button>
<!--baloons --> <!--baloons -->
<div class="comment1stpage"id="baloon1" style="display: none;"> <div class="comment1stpage baloons"id="baloon1" style="display: none;">
<p class="text_baloon1"> <p class="text_baloon1">
It looks like the previous owner of the newspaper made some annotations It looks like the previous owner of the newspaper highlighted something
</p> </p>
</div> </div>
<div class="comment1stpage"id="baloon2" style="display: none;"> <div class="comment1stpage baloons"id="baloon2" style="display: none;">
<p class="text_baloon1"></p> <p class="text_baloon1"></p>
Who can it be? Who is N.?
</p> </p>
</div> </div>
<div class="comment2stpage"id="baloon3" style="display: none;"> <div class="comment2stpage baloons"id="baloon3" style="display: none;">
<p class="text_baloon3"> <p class="text_baloon3">
Amanda often volunteers for the cat shelter.<br> Amanda often volunteers for the cat shelter.<br>
Can this be the reason why she is late? Can this be the reason why she is late?
</p> </p>
</div> </div>
<div class="comment2stpage"id="baloon4" style="display: none;"> <div class="comment2stpage baloons"id="baloon4" style="display: none;">
<p class="text_baloon4"></p> <p class="text_baloon4"></p>
I hope Amanda will arrive soon, <br> I hope Amanda will arrive soon, <br>
you still have to purchase the tickets! you still have to purchase the tickets!
@ -35,27 +36,33 @@
</div> </div>
<!--newspaper pages --> <!--newspaper pages -->
<button id="close_news"style="display: none;"><span class="button_text">close</span></button>
<div id="newspaper" style="display: none;"> <div id="newspaper" style="display: none;">
<div class="left_page"> <div class="left_page">
<div class="index">
Juicy Local Stories <br> <div class="index" >
/from the pleasant valley <p class="news_title_index"> </p>
<br> <br><br>
1. From the Pleasant Valley Elementary School: An educational trip surrounded by nature <p class="news_index">
by the School Administration <br> From the Pleasant Valley Elementary School: An educational trip surrounded by nature
2. Sick and tired at the canteen: Suspected food poisoning at Pleasant Valley Elementary School by N. <br> <br>by the School Administration <br>
3. Pleasant Valley Elementary School's trip: where are the children? by N. <br> Suspected food poisoning at Pleasant Valley Elementary School <br>by N. <br>
4. Breaking news: Mysterious disappearance at the city-run Cat Shelter by Juicy Local Stories editor <br> Pleasant Valley Elementary School's trip: where are the children? <br>by N. <br>
5. Pleasant valley is showing excitement for the opening of the concert season by Pleasant Valley's major Breaking news: Mysterious disappearance at the city-run Cat Shelter <br>by Juicy Local Stories editor <br>
Pleasant valley is showing excitement for the opening of the concert season <br>by Pleasant Valley's major
</p>
</div> </div>
<div class="school2" style="display:none;"> <div class="school2" style="display:none;">
Sick and tired at the canteen: Suspected food poisoning at Pleasant Valley Elementary School<br> <p class="news_title">Suspected food poisoning at Pleasant Valley Elementary School</p>
by N. <br> The situation of the local elementary school's canteen is starting to raise some serious concerns after some suspected food poisoning episodes occurred. Although the school's administration and its food provider --the <span class="clues">Montebianco Food Enterprise</span>-- already denied all charges some parents are not convinced by the declarations, asking for more clarity and controls over the food served at the canteen. One of them is Angela G., mother of a 9 years old child who experienced nausea and sickness since the beginning of the school year. Other parents are concerned about their children who often look distant and tired.
The situation of the local elementary school's canteen is starting to raise some serious concerns after some suspected food poisoning episodes occurred. Although the school's administration and its food provider --the Montebianco Food Enterprise-- already denied all charges some parents are not convinced by the declarations, asking for more clarity and controls over the food served at the canteen. One of them is Angela G., mother of a 9 years old child who experienced nausea and sickness since the beginning of the school year. Other parents are concerned about their children who often look distant and tired. <p class="news_author">by N.</p>
<div id="arrow_back1"></div> <div id="arrow_back1"></div>
</div> </div>
<div class="school4" style="display:none;"> <div class="school4" style="display:none;">
Breaking news: Mysterious disappearance at the city-run cat shelter<br> <p class="news_title">Breaking news: Mysterious disappearance at the city-run cat shelter</p>
The notice has been sent this early morning by a group of volunteers who were visiting the shelter to feed the cats. At their arrival at the place, they only found empty kennels: all the guests of the shelter seem to have disappeared mysteriously. The notice has been sent this early morning by a group of volunteers who were visiting the shelter to feed the cats. At their arrival at the place, they only found empty kennels: all the guests of the shelter seem to have disappeared mysteriously.
Our editorial staff is kindly asking whoever has information regarding this occurrence to contact the local police department or to get in reach with the cat shelter's direction. Our editorial staff is kindly asking whoever has information regarding this occurrence to contact the local police department or to get in reach with the cat shelter's direction.
<div id="arrow_back2"></div> <div id="arrow_back2"></div>
@ -66,23 +73,22 @@
<div class="right_page"> <div class="right_page">
<div class="school1"> <div class="school1">
From the Pleasant Valley Elementary School: An educational trip surrounded by nature<br> <p class="news_title">From the Pleasant Valley Elementary School: A trip surrounded by nature</p>
by <br> On behalf of all the staff, I am happy to announce that our annual educational trip is finally taking place. Teachers and students are participating in a three days camping experience surrounded by the beauties of the <span class="clues">Spring River</span> National Park, a beautiful and uncontaminated oasis off the beaten tourist track. The location has been appointed by our team after evaluating its suitability for the didactic activities planned for the weekend. Yesterday morning the participants left Pleasant Valley with a private water bus leaving from the river bank. The staff is kindly asking the parents of the participants to welcome back their children at the same location on Sunday at 18 pm.
Pleasant Valley Elementary School Administration <br> <p class="news_author">by Pleasant Valley Elementary School Administration </p>
On behalf of all the staff, I am happy to announce that our annual educational trip is finally taking place. Teachers and students are participating in a three days camping experience surrounded by the beauties of the Spring River National Park, a beautiful and uncontaminated oasis off the beaten tourist track. The location has been appointed by our team after evaluating its suitability for the didactic activities planned for the weekend. Yesterday morning the participants left Pleasant Valley with a private water bus leaving from the river bank. The staff is kindly asking the parents of the participants to welcome back their children at the same location on Sunday at 18 pm.
<div id="arrow_go1"></div> <div id="arrow_go1"></div>
</div> </div>
<div class="school3" style="display:none;"> <div class="school3" style="display:none;">
Pleasant Valley Elementary School's trip: where are the children?<br> <p class="news_title">Pleasant Valley Elementary School's trip: where are the children?</p>
by N. <br> This year, the Pleasant Valley Elementary School announced, after 14 years, the change of the location of their annual educational trip. Yesterday, the students and the school's staff left for the first time for the <span class="clues">Spring River</span> National Park. The site, described by the school's administration as an unspoiled natural oasis on the river bank, is <span class="clues">not appearing</span> on any map, and no official information regarding the place or how to reach it is available. I am hoping that the school will soon shed light on this mysterious lack of information.
This year, the Pleasant Valley Elementary School announced, after 14 years, the change of the location of their annual educational trip. Yesterday, the students and the school's staff left for the first time for the Spring River National Park. The site, described by the school's administration as an unspoiled natural oasis on the river bank, is not appearing on any map, and no official information regarding the place or how to reach it is available. I am hoping that the school will soon shed light on this mysterious lack of information. <p class="news_author">by N.</p>
<div id="arrow_go2"></div> <div id="arrow_go2"></div>
</div> </div>
<div class="school5" style="display:none;"> <div class="school5" style="display:none;">
Pleasant valley is showing excitement for the opening of the concert season<br> <p class="news_title">Pleasant valley is showing excitement for the opening of the concert season</p>
by Pleasant valley's major <br>
Tonight the Pleasant Valley's arena will be happy to welcome the singer and performer Avril Lavigne who will open the new season of concerts. Tickets are still available at the town hall. Tonight the Pleasant Valley's arena will be happy to welcome the singer and performer Avril Lavigne who will open the new season of concerts. Tickets are still available at the town hall.
You were supposed to go to the concert with Amanda tonight. Probably she went to take the tickets before the meeting and she got stuck in the queue. Maybe is good to wait for her a bit longer. You were supposed to go to the concert with Amanda tonight. Probably she went to take the tickets before the meeting and she got stuck in the queue. Maybe is good to wait for her a bit longer.
<p class="news_author">by Pleasant valley's major</p>
</div> </div>
@ -91,37 +97,66 @@
</div> </div>
<div id="groundline"></div>
<div id="player_img"></div> <div id="player_img"></div>
<img id="bench" src="imgs/park/bench1.gif" height="20%"> <img id="bench" src="imgs/park/bench1.gif" height="20%">
<img id="tree1" src="imgs/park/tree1.gif" height="35%"> <img id="tree1" src="imgs/park/tree1.gif" height="30%">
<img id="tree2" src="imgs/park/tree4.gif" height="25%"> <img id="tree2" src="imgs/park/tree4.gif" height="25%">
<img id="tree3" src="imgs/park/tree4.gif" height="25%"> <img id="tree3" src="imgs/park/tree4.gif" height="25%">
<img id="tree4" src="imgs/park/tree1.gif" height="25%">
<!--<img id="gardener1" src="imgs/park/gardener1.gif" height="180px">-->
<img id="fountain" src="imgs/park/pond.gif" height="80px">
<img id="sun" src="imgs/park/sun1.gif" height="10%">
<img id="newspaperimg" src="imgs/park/newspaper2.gif" height="7%"> <img id="newspaperimg" src="imgs/park/newspaper2.gif" height="7%">
<img id="flower1" src="imgs/park/flower1.gif" height="5%"> <img id="flower1" src="imgs/park/flower1.gif" height="5%">
<img id="flower2" src="imgs/park/flower2.gif" height="7%"> <img id="flower2" src="imgs/park/flower3.gif" height="7%">
<!--<img id="grass" src="imgs/park/grass.gif">--> <img id="flower3" src="imgs/park/flower3.1.gif" height="6%">
<img id="flower4" src="imgs/park/flower1.1.gif" height="5%">
<img id="flower5" src="imgs/park/flower1.gif" height="5%">
<img id="grass1" src="imgs/park/grass1.gif" height="75vw">
<img id="grass2" src="imgs/park/grass1.gif" height="75vw">
<div class="text_container"> <div class="text_container">
<div class="message1"> <div class="message1">
Hello <span id="player_name"> </span> . It's Saturday morning. You are at the park waiting for your friend Amanda. She seems to be really late. Hello <span id="player_name"> </span> . It's Saturday morning. You are at the park waiting for your friend Amanda. She seems to be really late.
You spot a copy of today's newspaper on the bench close to you. Maybe you want to <button id="open_newspaper_index">give it a read</button>. You can also <a href="1_walk.html">go for a little walk</a> or just <a href="1_amanda.html">wait for Amanda</a>. You spot a copy of today's newspaper on the bench close to you. Maybe you want to <button class="open_newspaper_index"><span class="button_text">give it a read</span></button> . You can also <button onclick="location.href='park_dream.html';"><span class="button_text">go for a little walk</span></button> or just <button id="wait_for_amanda"><span class="button_text">wait for Amanda</span></button>.
</div> </div>
<div class="message2" style="display:none;"> <div class="message2" style="display:none;">
The situation at the school seems to be getting quite dramatic. The person who left the annotated newspaper cannot be too far. Look for them in the park. The situation at the school looks serious. The person who left the annotated newspaper cannot be too far: they might know what is going on. <button onclick="location.href='park_N.html';"><span class="button_text">Look for them in the park</span></button> .
</div> </div>
<div class="message3" style="display:none;"> <div class="message3" style="display:none;">
You can try to look for Amanda at the cat shelter. It can also be that she already went to purchase the tickets but she got stuck in the queue. It might be good to wait for her a bit longer. You can try to <button onclick="location.href='cat_shelter.html';"><span class="button_text">look for Amanda at the cat shelter</span></button> . It can also be that she already went to purchase the tickets but she got stuck in the queue. It might be good to <button id="wait_for_amanda"><span class="button_text">wait for her</span></button> a bit longer.
</div>
<div class="message4" style="display:none;">
It looks like Amanda is not able to join you.
There is a nice kiosk close by: <button id="fries"><span class="button_text">go there to get fries</span></button> . You can still <button class="open_newspaper_index"><span class="button_text">have a look at the news</span></button> or <button onclick="location.href='park_dream.html';"><span class="button_text">go for a walk</span></button> .
</div> </div>
</div> </div>
<script src="jquery.min.js"></script> <script src="jquery.min.js"></script>
<script> <script>
//move
var $div = $('#player_img');
$(document).keydown(function(e) {
switch (e.which) {
case 37:
$div.css('left', $div.offset().left - 20);
break;
case 38:
$div.css('top', $div.offset().top - 20);
break;
case 39:
$div.css('left', $div.offset().left + 20);
break;
case 40:
$div.css('top', $div.offset().top + 20);
break;
}
})
//get player avatar from local storage //get player avatar from local storage
console.log (localStorage.myavatar) console.log (localStorage.myavatar)
var img = document.createElement("img"); var img = document.createElement("img");
@ -132,21 +167,25 @@
//get player name from local storage //get player name from local storage
document.querySelector('#player_name').innerHTML =localStorage.playerName; document.querySelector('#player_name').innerHTML =localStorage.playerName;
//newspaper pages //store that you've been in the park
window.onload = function() {
$("#open_newspaper_index").click (function(){ window.localStorage.setItem("park","opened")
$("#newspaper").toggle(); console.log ("park:",localStorage.park)
}
// open newspaper
$(".open_newspaper_index").click (function(){
$("#newspaper, #close_news").toggle();
//saves that u opened the newspaper in the local storage
window.localStorage.setItem("newspaper","opened")
console.log ("newspaper:",localStorage.newspaper)
}); });
//newspaper pages
$("#arrow_go1").click (function(){ $("#arrow_go1").click (function(){
$(".index").hide(); $(".index, .school1, .message1, .message4 ").hide();
$(".school1").hide(); $(".school2, .school3, #baloon1, #baloon2, .message2").show();
$(".message1").hide();
$(".school2").show();
$(".school3").show();
$("#baloon1").show();
$("#baloon2").show();
$(".message2").show();
}); });
$("#arrow_back1").click (function(){ $("#arrow_back1").click (function(){
@ -159,7 +198,7 @@
$("#baloon4").hide(); $("#baloon4").hide();
$(".index").show(); $(".index").show();
$(".school1").show(); $(".school1").show();
$(".message1").show(); $(".message4").show();
}); });
$("#arrow_go2").click (function(){ $("#arrow_go2").click (function(){
@ -187,7 +226,24 @@
$("#baloon2").show(); $("#baloon2").show();
$(".message2").show(); $(".message2").show();
}); });
$("#wait_for_amanda").click (function(){
$(".message3").hide();
$(".message1").hide();
$(".message4").show();
});
$("#close_news").click (function(){
$("#newspaper").hide();
$("#close_news").hide();
$("#baloon1").hide();
$("#baloon2").hide();
$("#baloon3").hide();
$("#baloon4").hide();
$(".message1").hide();
$(".message2").hide();
$(".message3").hide();
$(".message4").show();
});
</script> </script>

@ -0,0 +1,84 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<title>looking for</title>
<link rel="icon" href="imgs/park/flower2.gif">
<link rel="stylesheet" href="park.css">
</head>
<style>
</style>
<body>
<div id="groundline"></div>
<div id="player_img"></div>
<img id="bench" src="imgs/park/bench1.gif" height="20%">
<img id="tree1" src="imgs/park/tree1.gif" height="30%">
<img id="tree2" src="imgs/park/tree4.gif" height="25%">
<img id="tree3" src="imgs/park/tree4.gif" height="25%">
<img id="newspaperimg" src="imgs/park/newspaper2.gif" height="7%">
<img id="flower1" src="imgs/park/flower1.gif" height="5%">
<img id="flower2" src="imgs/park/flower3.gif" height="7%">
<img id="flower3" src="imgs/park/flower3.1.gif" height="6%">
<img id="flower4" src="imgs/park/flower1.1.gif" height="5%">
<img id="flower5" src="imgs/park/flower1.gif" height="5%">
<img id="grass1" src="imgs/park/grass1.gif" height="75vw">
<img id="grass2" src="imgs/park/grass1.gif" height="75vw">
<div class="text_container">
move
</div>
<script src="jquery.min.js"></script>
<script>
//move
var $div = $('#player_img');
$(document).keydown(function(e) {
switch (e.which) {
case 37:
$div.css('left', $div.offset().left - 20);
break;
case 38:
$div.css('top', $div.offset().top - 20);
break;
case 39:
$div.css('left', $div.offset().left + 20);
break;
case 40:
$div.css('top', $div.offset().top + 20);
break;
}
})
//get player avatar from local storage
console.log (localStorage.myavatar)
var img = document.createElement("img");
img.src = localStorage.myavatar;
var player_img = document.querySelector("#player_img");
player_img.appendChild(img);
//get player name from local storage
document.querySelector('#player_name').innerHTML =localStorage.playerName;
</script>
<script type="text/javascript" src="index.js" ></script>
</body>
Loading…
Cancel
Save