Help icon

Added a (reusable) help icon that shows additional info about what to do on hover.

5 files changed, 105 insertions, 14 deletions

diff --git a/README.md b/README.md
index 3f86b3f..f118d5f 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,5 @@
 # Food-app
-This is a site under development that tells you when your lesson is, when your lunch break is and what the school lunch of the day is.
+Readme coming soon!
 
 ## Setup
-You can add a link to this site to your startup folder to always get to know when your lunch break is when you turn on your computer in school.
+If you want to set up the server, you will have to get a SSL certificate or generate one yourself. If you want to run a dedicated server that can update, you also need to add the cron jobs from crontab\_add.
diff --git a/help.png b/help.png
new file mode 100644
index 0000000..51d84df
--- /dev/null
+++ b/help.png
diff --git a/index.css b/index.css
index 76b5df6..fe6de3b 100644
--- a/index.css
+++ b/index.css
@@ -2,17 +2,26 @@
 	margin: 0;
 	padding: 0;
 	text-align: center;
+	--info-width: 10em;
+	--fadetime: .3s;
+	--box-bg: #222;
+	--box-shadow: black;
 }
 
+/*** bg etc... ***/
 body {
 	background: #444;
 	color: white;
 	padding: 1em;
 
-	font-family: Verdana, sans-serif;
-	text-shadow: .125em .125em black;
+	font-family: verdana, sans-serif;
 }
 
+.shadow {
+	text-shadow: .124em .125em black;
+}
+
+/*** dual layout ***/
 #foodshift, #food {
 	width: 100%;
 	box-sizing: border-box;
@@ -20,6 +29,7 @@ body {
 	vertical-align: top;
 }
 
+/*** responsivity ***/
 @media screen and (min-width: 700px)
 {
 	#foodshift
@@ -31,12 +41,13 @@ body {
 	}
 }
 
+/*** the ui blocks ***/
 .float-block {
 	display: inline-block;
 	margin: 1em;
 	padding: 1em;
 
-	background: #222;
+	background: var(--box-bg);
 	border: 0 solid black;
 	border-radius: 5px;
 }
@@ -45,18 +56,16 @@ body {
 	margin: .5em;
 }
 
+/*** the send-button ***/
 #send {
 	background: blue;
 	padding: .5em;
 	margin: .5em;
-	border: 1px solid black;
-	border-radius: 5px;
 	font-weight: bold;
 
 	position: relative;
 	right: .125em;
 	bottom: .125em;
-	box-shadow: .125em .125em;
 }
 
 #send:hover {
@@ -64,3 +73,76 @@ body {
 	bottom: .25em;
 	box-shadow: .25em .25em;
 }
+
+/*** The shadowed elements ***/
+.highlight {
+	border: 1px solid black;
+	border-radius: 5px;
+	box-shadow: .125em .125em var(--box-shadow);
+}
+
+/*** the info buttons & their animations ***/
+img.info {
+	width: 1em;
+	height: 1em;
+	vertical-align: middle;
+}
+
+img.info ~ span {
+	position: relative;
+	vertical-align: middle;
+	left: -1em;
+	animation: hide-at-start calc(var(--fadetime) * 1.1); /* this hides the flash of the child element in the start */
+}
+@keyframes hide-at-start {
+	0% { bottom: 200vh; }
+	99%{ bottom: 200vh; }
+	100%{ bottom: 0; }
+}
+
+p.infoblock {
+	display: inline;
+	position: absolute;
+	top: .5em;
+	left: 1.5em;
+
+	background-color: var(--box-bg);
+	--box-shadow: #111;
+	margin: 0;
+	padding: .5em;
+	border-radius: 0 5px 5px 5px;
+
+	animation-name: fade-out;
+	animation-duration: var(--fadetime);
+	visibility: hidden;
+	opacity: 0;
+}
+
+img.info:hover ~ span > p.infoblock {
+	animation-name: fade-in;
+	animation-duration: var(--fadetime);
+	visibility: visible;
+	opacity: 1;
+}
+
+@keyframes fade-in {
+	0% {
+		visibility: hidden;
+		opacity: 0;
+	}
+	100% {
+		opacity: 1;
+		visibility: visible;
+	}
+}
+
+@keyframes fade-out {
+	0% {
+		opacity: 1;
+		visibility: visible;
+	}
+	100% {
+		opacity: 0;
+		visibility: hidden;
+	}
+}
diff --git a/index.html b/index.html
index b12164d..4b6a503 100644
--- a/index.html
+++ b/index.html
@@ -16,9 +16,11 @@
 		<main>
 			<div id="foodshift">
 				<form method="GET" class="float-block">
-					<label for="index">Opettaja/kurssi/luokka:</label>
+					<label for="index" class="shadow">Opettaja, kurssi tai luokka:</label>
 					<br>
 					<input type="text" name="index" placeholder="sahe // ÄI1.2 // B203">
+					<img src="/help.png" class="info" alt="Siis häh?">
+					<span><p class="infoblock highlight">Syötä tähän kenttään yhdeltätoista alkavan tuntisi opettaja, kurssikoodi tai luokka. Älä syötä useampaa edellä mainituista, yksi on tarpeeksi.</p></span>
 					<br>
 					<label for="day">Päivä:</label>
 					<br>
@@ -32,13 +34,13 @@
 						<option value="0" disabled>su</option>
 					</select>
 					<br>
-					<input type="submit" id="send" value="Löydä vuoro">
+					<input type="submit" id="send" class="highlight" value="Löydä vuoro">
 				</form>
 
 				<br>
 
 				<div id="shift-result" class="float-block">
-					<h2>\(index-type\) \(shift-header\) ruokailuvuoro \(day\):</h2>
+					<h2 class="shadow">\(index-type\) \(shift-header\) ruokailuvuoro \(day\):</h2>
 					<p>\(shift\)</p>
 				</div>
 			</div>
@@ -46,7 +48,7 @@
 
 			<div id="food">
 				<div class="float-block">
-					<h2>\(food-header\)</h2>
+					<h2 class="shadow">\(food-header\)</h2>
 					<p>\(food\)</p>
 				</div>
 			</div>
diff --git a/server.js b/server.js
index 39c3a38..2f45e95 100644
--- a/server.js
+++ b/server.js
@@ -12,7 +12,8 @@ async function init()
 	const build = {
 		"./index.html": buildMain,
 		"./index.css": buildDefault,
-		"./404/index.css": buildDefault
+		"./404/index.css": buildDefault,
+		"./help.png": buildImage
 	};
 	const errorPath = "./404/index.html";
 
@@ -80,7 +81,6 @@ async function buildMain(args)
 {
 	const path = args["path"];
 	const query = args["query"];
-	console.log(query);
 	const foods = args["foods"];
 	let index;
 	if (typeof query.index === "string")
@@ -172,6 +172,13 @@ async function buildDefault(args)
 	return data.toString("utf-8");
 }
 
+async function buildImage(args)
+{
+	const path = args["path"];
+	const data = await openFile(path);
+	return data;
+}
+
 
 function build_replace(s, dict)
 {