main.templ

package main

templ headArea() {
	<style>
	img {
		max-width: 24em;
		margin: auto;
	}

	/* CSS */
	.button {
		background-color: rgba(51, 51, 51, 0.05);
		border-radius: 8px;
		border-width: 0;
		color: #333333;
		cursor: pointer;
		display: inline-block;
		font-size: 14px;
		font-weight: 500;
		line-height: 20px;
		list-style: none;
		margin: 0;
		padding: 10px 12px;
		text-align: center;
		transition: all 200ms;
		vertical-align: baseline;
		white-space: nowrap;
		user-select: none;
		-webkit-user-select: none;
		touch-action: manipulation;
	}

	.button-disabled {
		background-color: rgba(51, 51, 51, 0.05);
		color: #999999;
		cursor: not-allowed;	
	}
	</style>
}

templ footer() {
	<p>With love from Wych</p>
}

templ index() {
	<p>Upload an image of the sandwich and we'll tell you how to make it!</p>
	<form action="/upload" method="post" enctype="multipart/form-data">
		<img src="/static/800x600.jpeg" alt="Preview Uploaded Image" id="file-preview" style="display:block"/>
		<br/>
		<div style="display: flex; justify-content: center;">
			<input type="file" class="button" id="image" name="image" accept="image/*,image/heic"/>
			<div style="flex-grow: 1; display: inline-block;">{ " " }</div>
			<input disabled id="submit" class="button button-disabled" type="submit" value="Upload Image"/>
		</div>
	</form>
	<script>
		const input = document.getElementById("image");

		const previewPhoto = () => {
			const file = input.files;
			if (file) {
				const fileReader = new FileReader();
				const preview = document.getElementById("file-preview");
				const submit = document.getElementById("submit");
				fileReader.onload = event => {
					preview.setAttribute("src", event.target.result);
					submit.disabled = false;
					submit.classList.remove("button-disabled");
				}
				fileReader.readAsDataURL(file[0]);
			}
		}

		input.addEventListener("change", previewPhoto);
	</script>
}

templ NotFound(path string) {
	<p>Sorry, we couldn't find the page at <code>{ path }</code>.</p>
	<p>Maybe try going back to the <a href="/">home page</a>?</p>
}

templ ErrorWhy(step, why string) {
	<p>Oh no! Something went wrong when trying to { step }.</p>
	<p>{ why }</p>
	<p>Maybe look at the logs?</p>
}

templ HowToMake(steps templ.Component, imageURL string) {
	<center><img src={ imageURL } alt="A sandwich"/></center>
	@steps
	<hr/>
	<p>Want to make another sandwich? <a href="/">Upload another image.</a></p>
}