You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

72 lines
2.5 KiB
HTML

<!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="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://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<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>