diff options
| -rw-r--r-- | README.md | 4 | ||||
| -rw-r--r-- | help.png | bin | 0 -> 2347 bytes | |||
| -rw-r--r-- | index.css | 94 | ||||
| -rw-r--r-- | index.html | 10 | ||||
| -rw-r--r-- | server.js | 11 |
5 files changed, 105 insertions, 14 deletions
@@ -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 Binary files differnew file mode 100644 index 0000000..51d84df --- /dev/null +++ b/help.png @@ -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; + } +} @@ -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> @@ -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) { |
