[iot/goam] Significantly improved styling

1 files changed, 44 insertions, 2 deletions

diff --git a/Year 3/Internet of things/goam/webserver-src/index.html b/Year 3/Internet of things/goam/webserver-src/index.html
index 24214a6..00c17ef 100644
--- a/Year 3/Internet of things/goam/webserver-src/index.html
+++ b/Year 3/Internet of things/goam/webserver-src/index.html
@@ -1,9 +1,51 @@
+<!DOCTYPE html>
 <html>
 	<head>
+		<meta name="viewport" content="width=device-width, initial-scale=1.0">
 		<title>GoAm</title>
+<style>
+* {
+	box-sizing: border-box;
+}
+body {
+	font-family: sans-serif;
+	background-color: lightgray;
+}
+h1 {
+	border-bottom: 2px solid gray;
+}
+h1:first-child {
+	margin-top: 0;
+}
+article {
+	max-width: calc(640px + 2em);
+	margin: 0 auto;
+	padding: 1em;
+	background-color: black;
+	color: white;
+}
+img {
+	max-width: calc(100vw - 16px - 2em);
+}
+.button {
+	display: block;
+	border: 0.25em solid gray;
+	padding: 0.25em;
+	background-color: lightgray;
+	color: black;
+	text-decoration: none;
+	text-align: center;
+}
+.full-width {
+	width: 100%;
+}
+</style>
 	</head>
 	<body>
-		<p>Latest image:</p>
-		<img src="/spiffs/capture.jpeg">
+		<article>
+			<h1>Latest image</h1>
+			<img src="/spiffs/capture.jpeg"/>
+			<a class="button full-width" href="/spiffs/capture.jpeg" download="capture.jpeg">Click to Download</a>
+		</article>
 	</body>
 </html>