aboutsummaryrefslogtreecommitdiff
path: root/Cont
diff options
context:
space:
mode:
Diffstat (limited to 'Cont')
-rw-r--r--Cont/404/index.css3
-rw-r--r--Cont/404/index.html26
-rw-r--r--Cont/Images/back.pngbin0 -> 3528 bytes
-rw-r--r--Cont/Images/help.pngbin0 -> 2347 bytes
-rw-r--r--Cont/devs/index.css18
-rw-r--r--Cont/devs/index.html26
-rw-r--r--Cont/index.css181
-rw-r--r--Cont/index.html63
-rw-r--r--Cont/non-main.css26
9 files changed, 343 insertions, 0 deletions
diff --git a/Cont/404/index.css b/Cont/404/index.css
new file mode 100644
index 0000000..664d7fb
--- /dev/null
+++ b/Cont/404/index.css
@@ -0,0 +1,3 @@
+body {
+ padding-top: 30vh;
+}
diff --git a/Cont/404/index.html b/Cont/404/index.html
new file mode 100644
index 0000000..5b01684
--- /dev/null
+++ b/Cont/404/index.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="fi">
+ <head>
+ <meta charset="utf-8">
+ <title>Page not found</title>
+ <link href="/index.css" rel="stylesheet" type="text/css">
+ <link href="/non-main.css" rel="stylesheet" type="text/css">
+ <link href="/404/index.css" rel="stylesheet" type="text/css">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ </head>
+ <body>
+ <div class="float-block">
+ <h1>404: sivua \(path\) ei löytynyt.</h1>
+ <p>Voi myös olla, että palvelimella on tapahtunut virhe. Jos epäilet jälkimmäistä, otathan yhteyttä palvelusta vastaaviin henkilöihin.</p>
+ </div>
+
+ <a class="back" href="/"><img src="/Images/back.png" alt="Takaisin etusivulle"></a>
+
+ <footer>
+ <a href="https://www.github.com/JoelHMikael/FoodJS">Lähdekoodi</a>
+ <span>|</span>
+ <a href="/devs">Ota yhteyttä</a>
+ </footer>
+
+ </body>
+</html>
diff --git a/Cont/Images/back.png b/Cont/Images/back.png
new file mode 100644
index 0000000..01b9bc7
--- /dev/null
+++ b/Cont/Images/back.png
Binary files differ
diff --git a/Cont/Images/help.png b/Cont/Images/help.png
new file mode 100644
index 0000000..51d84df
--- /dev/null
+++ b/Cont/Images/help.png
Binary files differ
diff --git a/Cont/devs/index.css b/Cont/devs/index.css
new file mode 100644
index 0000000..1cce621
--- /dev/null
+++ b/Cont/devs/index.css
@@ -0,0 +1,18 @@
+.column {
+ display: inline-block;
+ padding: 0;
+ margin: .5em;
+ box-sizing: border-box;
+ vertical-align: middle;
+ overflow-wrap: break-word;
+ width: 100%;
+}
+
+
+@media screen and (min-width: 700px)
+{
+ .column {
+ width: calc(33% - 2em);
+ }
+}
+
diff --git a/Cont/devs/index.html b/Cont/devs/index.html
new file mode 100644
index 0000000..69116c6
--- /dev/null
+++ b/Cont/devs/index.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="fi">
+ <head>
+ <meta charset="utf-8">
+ <title>Developers</title>
+ <link href="/index.css" rel="stylesheet" type="text/css">
+ <link href="/non-main.css" rel="stylesheet" type="text/css">
+ <link href="/devs/index.css" rel="stylesheet" type="text/css">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ </head>
+ <body>
+ <h1 class="shadow">Sivun kehittäjät</h1>
+ <p>Jos muokkaat/lisäät jotain tähän projektiin, voit pyytää serverin ylläpidosta vastaavilta, että nimesi lisätään tietokantaan.</p>
+
+ \(devs\)
+
+ <a class="back" href="/"><img src="/Images/back.png" alt="Takaisin etusivulle"></a>
+
+ <footer>
+ <a href="https://www.github.com/JoelHMikael/FoodJS">Lähdekoodi</a>
+ <span>|</span>
+ <a href="/devs">Ota yhteyttä</a>
+ </footer>
+
+ </body>
+</html>
diff --git a/Cont/index.css b/Cont/index.css
new file mode 100644
index 0000000..80e5dc6
--- /dev/null
+++ b/Cont/index.css
@@ -0,0 +1,181 @@
+* {
+ margin: 0;
+ padding: 0;
+ text-align: center;
+ --info-width: 13em;
+ --fadetime: .3s;
+ --box-bg: #222;
+ --box-shadow: black;
+}
+
+/*** bg etc... ***/
+body {
+ background: #444;
+ color: white;
+ padding: 1em;
+ margin-bottom: 3em; /* for the footer */
+
+ font-family: verdana, sans-serif;
+}
+
+.shadow {
+ text-shadow: .124em .125em black;
+}
+
+/*** dual layout ***/
+#foodshift, #food {
+ width: 100%;
+ box-sizing: border-box;
+ display: inline-block;
+ vertical-align: top;
+}
+
+/*** responsivity ***/
+@media screen and (min-width: 700px)
+{
+ #foodshift
+ {
+ width: 58%;
+ }
+ #food {
+ width: 41%;
+ }
+}
+
+/*** the ui blocks ***/
+.float-block {
+ display: inline-block;
+ margin: 1em;
+ padding: 1em;
+
+ background: var(--box-bg);
+ border: 0 solid black;
+ border-radius: 5px;
+}
+
+.float-block p, .float-block h1, .float-block h2, .float-block label, .float-block select, .float-block input {
+ margin: .5em;
+}
+
+/*** the input field & choose ***/
+#input[type="text"], select {
+ background-color: white;
+}
+
+/*** the send-button ***/
+#send {
+ background: blue;
+ padding: .5em;
+ margin: .5em;
+ font-weight: bold;
+
+ position: relative;
+ right: .125em;
+ bottom: .125em;
+}
+
+#send:hover {
+ right: .25em;
+ bottom: .25em;
+ box-shadow: .25em .25em;
+}
+
+/*** Footer ***/
+footer {
+ position: fixed;
+ top: calc(100% - 3em);
+ left: 0;
+
+ width: 100%;
+ margin: 0;
+ padding: 1em;
+ line-height: 1em;
+ box-sizing: border-box;
+
+ background-color: #0d0d0d;
+}
+
+footer > a {
+ color: #b3b3b3;
+}
+
+/*** 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:hover {
+ filter: drop-shadow(.125rem .125rem 0 black);
+ transform: translate(-0.125rem, -0.125rem);
+}
+img.info {
+ width: 1em;
+ height: 1em;
+ vertical-align: middle;
+ filter: drop-shadow(.0625rem .0625rem 0 black);
+ transform: translate(-0.0625rem, -0.0625rem);
+}
+
+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: 1.5em;
+ left: calc(var(--info-width) * -1 - 1em);
+ width: var(--info-width);
+ z-index: 1;
+
+ background-color: var(--box-bg);
+ --box-shadow: #111;
+ margin: 0;
+ padding: .5em;
+ border-radius: 5px 0 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/Cont/index.html b/Cont/index.html
new file mode 100644
index 0000000..95dcb32
--- /dev/null
+++ b/Cont/index.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html lang="fi">
+ <head>
+ <meta charset="utf-8">
+ <title>LYLL-ruokailuvuoro</title>
+ <link href="/index.css" rel="stylesheet" type="text/css">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ </head>
+ <body>
+ <header>
+ <h1 class="shadow">LYLL-ruoka</h1>
+ </header>
+
+ <br>
+
+ <main>
+ <div id="foodshift">
+ <form method="GET" class="float-block">
+ <label for="index" class="shadow">Opettaja, kurssi tai luokka:</label>
+ <br>
+ <input type="text" name="index" placeholder="\(example-input\)">
+ <img src="/Images/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>
+ <select name="day">
+ <option value="0">ma</option>
+ <option value="1">ti</option>
+ <option value="2">ke</option>
+ <option value="3">to</option>
+ <option value="4">pe</option>
+ <option value="5" disabled>la</option>
+ <option value="6" disabled>su</option>
+ </select>
+ <br>
+ <input type="submit" id="send" class="highlight" value="Löydä vuoro">
+ </form>
+
+ <br>
+
+ <div id="shift-result" class="float-block">
+ <h2 class="shadow">\(index-type\) \(shift-header\) ruokailuvuoro \(day\):</h2>
+ <p>\(shift\)</p>
+ </div>
+ </div>
+
+
+ <div id="food">
+ <div class="float-block">
+ <h2 class="shadow">\(food-header\)</h2>
+ <p>\(food\)</p>
+ </div>
+ </div>
+ </main>
+
+ <footer>
+ <a href="https://www.github.com/JoelHMikael/FoodJS">Lähdekoodi</a>
+ <span>|</span>
+ <a href="/devs">Ota yhteyttä</a>
+ </footer>
+ </body>
+</html>
diff --git a/Cont/non-main.css b/Cont/non-main.css
new file mode 100644
index 0000000..d8003ef
--- /dev/null
+++ b/Cont/non-main.css
@@ -0,0 +1,26 @@
+.back {
+ display: block;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+.back > * {
+}
+
+.back > img {
+ width: 4rem;
+ height: 4rem;
+ margin: 1rem;
+ filter: drop-shadow(.125rem .125rem 0 black);
+ position: relative;
+ bottom: .125rem;
+ right: .125rem;
+ vertical-align: middle;
+ display: inline;
+}
+
+.back > img:hover {
+ filter: drop-shadow(.20rem .20rem 0 black);
+ bottom: .20rem;
+ right: .20rem;
+}
generated by cgit v1.2.3 (git 2.25.1) at 2025-01-20 15:05:40 +0000