<!DOCTYPE html>
< html lang = "en-US" >
< head >
< title > start< / title >
< link rel = "stylesheet" href = "style_1.css" >
< / head >
< body >
<!-- <img class="source - image" src="background_4.jpg" alt=""/>
< button onclick = "goBack()" > ←< / button >
< button onclick = "goForward()" > →< / button >
-->
< div id = "container" >
< div id = "1_park" style = "display: block;" >
It's Sunday. You are sit on a bench in the park. Your friend seems to be really late. You need a way to kill time until she arrives.
You can either < button id = "switchTo2_newspaper" > read a copy of today's newspaper< / button > that someone left on the bench or < button id = "switchTo2_walk" > go for a little walk< / button > .
< button > Just relax< / button > there if you feel like it .
< / div >
< div id = "2_park_newspaper" style = "display: none;" >
< button id = "switchTo1_news" > (back)< / button > You open the newspaper, willing to engage with some juicy local news. < br > Suddenly, some sheets of paper start to fall on the ground.
Maybe you want to < button id = "paper_1" > read< / button > ,< button id = "paper_2" > read< / button > ,< button id = "paper_3" > read< / button > ,< button id = "paper_4" > read< / button > .
<!--
< select name = "sheets" id = "sheets" >
< option value = "1" > read it< / option >
< option value = "2" > read it< / option >
< option value = "3" > read it< / option >
< option value = "4" > read it< / option >
< / select >
-->
< / div >
< div id = "2_park_walk" style = "display:none" >
< button id = "switchTo1_walk" > (back)< / button > You are walking...
< / div >
< / div >
< div id = "gardenSpace" style = "display:none" >
< div id = "pane" >
< div id = "square" >
< img src = "gifs/walking.gif" >
< / div >
< / div >
< / div >
< div id = "papers" >
< div id = "readme_1" style = "display: none;" >
< iframe width = "300px" height = "250px" src = "readme/readme_1.html" title = "read me" > < / iframe >
< / div >
< div id = "readme_2" style = "display: none;" >
< iframe width = "300px" height = "400px" src = "readme/readme_2.html" title = "read me" > < / iframe >
< / div >
< div id = "readme_3" style = "display: none;" >
< iframe width = "300px" height = "200px" src = "readme/readme_3.html" title = "read me" > < / iframe >
< / div >
< div id = "readme_4" style = "display: none;" >
< iframe width = "300px" height = "200px" src = "readme/readme_4.html" title = "read me" > < / iframe >
< / div >
< / div >
< script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" > < / script >
< script type = "text/javascript" src = "script.js" > < / script >
< / body >
