new
*anna*
4 years ago
@ -1,34 +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>bench</title>
|
||||
<link rel="stylesheet" href="index.css">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div id="player_img"></div>
|
||||
<p> Hello <span id="player_name"> </span>. It's Saturday morning. You are sitting on a bench 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. Maybe you want to <a href="1_newspaper.html">give it a read</a>. You can <a href="1_walk.html">go for a little walk</a> or just <a href="1_amanda.html">wait for Amanda</a> if you feel like it. </p>
|
||||
|
||||
|
||||
<script src="jquery.min.js"></script>
|
||||
<script>
|
||||
//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>
|
||||
|
After Width: | Height: | Size: 37 KiB |
|
After Width: | Height: | Size: 30 KiB |
|
After Width: | Height: | Size: 20 KiB |
|
After Width: | Height: | Size: 20 KiB |
|
After Width: | Height: | Size: 19 KiB |
|
After Width: | Height: | Size: 57 KiB |
|
After Width: | Height: | Size: 10 KiB |
|
After Width: | Height: | Size: 21 KiB |
|
After Width: | Height: | Size: 10 KiB |
|
After Width: | Height: | Size: 18 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 22 KiB |
|
After Width: | Height: | Size: 18 KiB |
|
After Width: | Height: | Size: 246 KiB |
|
After Width: | Height: | Size: 1.6 MiB |
|
After Width: | Height: | Size: 39 KiB |
|
After Width: | Height: | Size: 4.1 KiB |
|
After Width: | Height: | Size: 2.4 KiB |
|
After Width: | Height: | Size: 23 KiB |
|
After Width: | Height: | Size: 61 KiB |
|
After Width: | Height: | Size: 43 KiB |
|
After Width: | Height: | Size: 3.4 KiB |
|
After Width: | Height: | Size: 8.8 KiB |
|
After Width: | Height: | Size: 30 KiB |
|
After Width: | Height: | Size: 24 KiB |
|
After Width: | Height: | Size: 34 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 56 KiB |
|
After Width: | Height: | Size: 2.4 MiB |
|
After Width: | Height: | Size: 275 KiB |
|
After Width: | Height: | Size: 280 KiB |
|
After Width: | Height: | Size: 10 KiB |
|
After Width: | Height: | Size: 26 KiB |
|
After Width: | Height: | Size: 891 KiB |
|
After Width: | Height: | Size: 13 KiB |
|
After Width: | Height: | Size: 99 KiB |
@ -0,0 +1,55 @@
|
||||
|
||||
#groundline {
|
||||
position: fixed;
|
||||
bottom:0px;
|
||||
height:75%;
|
||||
width: 100%;
|
||||
border-top: 0.15vw solid;
|
||||
}
|
||||
|
||||
p.text_container {
|
||||
bottom: 3%;
|
||||
left:3%;
|
||||
right:3%;
|
||||
position:fixed;
|
||||
/*border: 1px solid;*/
|
||||
font-size: 1.5vw;
|
||||
margin-block-start: 1em;
|
||||
margin-block-end: 1em;
|
||||
margin-inline-start: 1em;
|
||||
margin-inline-end: 1em;
|
||||
|
||||
}
|
||||
|
||||
#player_img {
|
||||
bottom: 22%;
|
||||
left: 35%;
|
||||
position: fixed;
|
||||
z-index: 10;
|
||||
|
||||
}
|
||||
|
||||
#bench {
|
||||
bottom: 30%;
|
||||
left: 20%;
|
||||
position: fixed;
|
||||
z-index:1;
|
||||
}
|
||||
|
||||
#tree1 {
|
||||
top:8%;
|
||||
right: 10%;
|
||||
position: fixed;
|
||||
|
||||
}
|
||||
#tree2 {
|
||||
bottom:40%;
|
||||
left: 5%;
|
||||
position: fixed;
|
||||
}
|
||||
#flower1 {
|
||||
bottom:40%;
|
||||
left: 31%;
|
||||
position: fixed;
|
||||
|
||||
}
|
||||
@ -0,0 +1,40 @@
|
||||
<!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>park</title>
|
||||
<link rel="stylesheet" href="park.css">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div id="groundline"></div>
|
||||
<div id="player_img"></div>
|
||||
<img id="bench" src="imgs/park/bench1.gif" height="160px">
|
||||
<img id="tree1" src="imgs/park/tree1.gif" height="300px">
|
||||
<img id="tree2" src="imgs/park/tree4.gif" height="200px">
|
||||
<img id="flower1" src="imgs/park/flower1.gif" height="50px">
|
||||
|
||||
<p class="text_container"> 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 <a href="1_newspaper.html">give it a read</a>. You can <a href="1_walk.html">go for a little walk</a> or just <a href="1_amanda.html">wait for Amanda</a> if you feel like it. </p>
|
||||
|
||||
|
||||
<script src="jquery.min.js"></script>
|
||||
<script>
|
||||
//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>
|
||||