You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
107 lines
3.3 KiB
107 lines
3.3 KiB
<!DOCTYPE html> |
|
<html> |
|
|
|
<head> |
|
<title>Lemonade Stand</title> |
|
<link rel="stylesheet" type="text/css" href="style.css" /> |
|
|
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
</head> |
|
|
|
<body> |
|
<header class="game_header"> |
|
<img src="juice.png" class="game_header_icon"> |
|
<h1 class="game_header_title">Lemonade Stand</h1> |
|
</header> |
|
|
|
<div class="dashboard"> |
|
<section class="game_section"> |
|
<h2 class="section_title">Supplies</h2> |
|
|
|
<ul class="game_list"> |
|
<li>Lemons: <span data-bind="supplies.lemons"></span></li> |
|
<li>Sugar: <span data-bind="supplies.sugar"></span></li> |
|
<li>Ice: <span data-bind="supplies.ice"></span></li> |
|
<li>Cups: <span data-bind="supplies.cups"></span></li> |
|
<li>Money: <span data-bind="player_money" data-format="currency"></span></li> |
|
</ul> |
|
|
|
<button class="go_shopping_btn">Go shopping</button> |
|
</section> |
|
|
|
<section class="game_section"> |
|
<h2 class="section_title">Total Earnings</h2> |
|
|
|
<p>$0.00</p> |
|
</section> |
|
|
|
|
|
<section class="game_section"> |
|
<h2 class="section_title">Current Price</h2> |
|
|
|
<p data-bind="price_per_cup" data-format="currency"></p> |
|
|
|
<button class="change_price_button">Change Price</button> |
|
</section> |
|
|
|
<section class="game_section"> |
|
<h2 class="section_title">Weather</h2> |
|
|
|
<p>Today's weather is: </p> |
|
</section> |
|
</div> |
|
|
|
<div class="shopping_modal"> |
|
<div class="shopping_modal_content"> |
|
<div class="shopping_modal_header"> |
|
<h2 class="shopping_modal_title">Shop for Supplies</h2> |
|
<button class="shopping_modal_close">×</button> |
|
</div> |
|
<div class="shopping_modal_body"> |
|
<div class="shop_item"> |
|
<span class="shop_item_name">Lemons</span> |
|
<span class="shop_item_price">$4.80 / 12</span> |
|
<button class="shop_item_btn">Buy</button> |
|
</div> |
|
<div class="shop_item"> |
|
<span class="shop_item_name">Sugar</span> |
|
<span class="shop_item_price">$4.80 / 12</span> |
|
<button class="shop_item_btn">Buy</button> |
|
</div> |
|
<div class="shop_item"> |
|
<span class="shop_item_name">Ice</span> |
|
<span class="shop_item_price">$1.00 / 50</span> |
|
<button class="shop_item_btn">Buy</button> |
|
</div> |
|
<div class="shop_item"> |
|
<span class="shop_item_name">Cups</span> |
|
<span class="shop_item_price">$1.00 / 75</span> |
|
<button class="shop_item_btn">Buy</button> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div class="price_change_modal"> |
|
<div class="price_change_modal_content"> |
|
<div class="price_change_modal_header"> |
|
<h2 class="price_change_modal_title">Set Your Price</h2> |
|
<button class="price_change_modal_close">×</button> |
|
</div> |
|
<div class="price_change_modal_body"> |
|
<p class="price_change_hint">Choose how much to charge per cup of lemonade.</p> |
|
<div class="price_input_group"> |
|
<span class="price_currency">$</span> |
|
<input type="text" class="price_input" inputmode="decimal"> |
|
</div> |
|
<button class="price_change_save_btn">Save Price</button> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<canvas id="scene" width="1200" height="500"></canvas> |
|
<script type="module" src="index.js"></script> |
|
</body> |
|
|
|
</html>
|
|
|