---
template=minimal
title=The Stage
style=/styles/home.css
style=/styles/stage.css
style=plunt/plunt.css
use-template=
---
[@paragraphs off]
<script>
	function biggerTheNumber() {
		let number = document.getElementById('the-number');
		number.innerText = '1';
	}
</script>
<script src="plunt/plunt.js"></script>

<nav id="navtree" class="sized">
	<a href="/" alt="home">&larr; home</a>
</nav>
<main>
	<h1 id="greeting">the stage</h1>
	<p>this is where she tests things</p>
	<section id="stage">
		<section id="plunt">
			<p id="plunt-intro">this is my plant, plunt. they need love to grow, will you
				love them for me? see the care guide here: <a href="plunt/">plunt/</a></p>
			<div>
				<p>plunt needs 5 more love to grow. plunt has 5 more days until growing.</p>
			</div>
			<div id="pluntbox">
				<div id="pluntboxbox">
					<img src="plunt/love.png" id="loving" />
					<img src="plunt/stage0.png" />
				</div>
				<button onclick="pluntLove()">love&nbsp;plunt</button>
			</div>
		</section>

		<section id="bigger">
			<h2>bigger the number!</h2>
			<p id="the-number">{thenumber}</p>
			<button onclick="biggerTheNumber()">click!</button>
		</section>
	</section>
</main>