From 24709fa862636702fd0430e832463b751fce323e Mon Sep 17 00:00:00 2001 From: JoelHMikael Date: Sat, 8 Jan 2022 16:49:37 +0200 Subject: Parsing the shifts (not classes) to the database + some GUI improvements --- Cont/404/index.css | 3 + Cont/404/index.html | 26 ++++++++ Cont/Images/back.png | Bin 0 -> 3528 bytes Cont/Images/help.png | Bin 0 -> 2347 bytes Cont/devs/index.css | 18 ++++++ Cont/devs/index.html | 26 ++++++++ Cont/index.css | 175 +++++++++++++++++++++++++++++++++++++++++++++++++++ Cont/index.html | 63 +++++++++++++++++++ Cont/non-main.css | 26 ++++++++ 9 files changed, 337 insertions(+) create mode 100644 Cont/404/index.css create mode 100644 Cont/404/index.html create mode 100644 Cont/Images/back.png create mode 100644 Cont/Images/help.png create mode 100644 Cont/devs/index.css create mode 100644 Cont/devs/index.html create mode 100644 Cont/index.css create mode 100644 Cont/index.html create mode 100644 Cont/non-main.css (limited to 'Cont') 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 @@ + + + + + Page not found + + + + + + +

404: sivua \(path\) ei löytynyt.

Voi myös olla, että palvelimella on tapahtunut virhe. Jos epäilet jälkimmäistä, otathan yhteyttä palvelusta vastaaviin henkilöihin.

+ +

+ + + + + diff --git a/Cont/Images/back.png b/Cont/Images/back.png new file mode 100644 index 0000000..01b9bc7 Binary files /dev/null and b/Cont/Images/back.png differ diff --git a/Cont/Images/help.png b/Cont/Images/help.png new file mode 100644 index 0000000..51d84df Binary files /dev/null and b/Cont/Images/help.png 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 @@ + + + + + Developers + + + + + + +

Sivun kehittäjät

Jos muokkaat/lisäät jotain tähän projektiin, voit pyytää serverin ylläpidosta vastaavilta, että nimesi lisätään tietokantaan.

+ + \(devs\) + +

+ + + + + diff --git a/Cont/index.css b/Cont/index.css new file mode 100644 index 0000000..1f5a422 --- /dev/null +++ b/Cont/index.css @@ -0,0 +1,175 @@ +* { + 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 { + 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: 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..c35b7c1 --- /dev/null +++ b/Cont/index.html @@ -0,0 +1,63 @@ + + + + + LYLL-ruokailuvuoro + + + + +

LYLL-ruoka

+ +
+ +

+ + +
+ +

\(index-type\) \(shift-header\) ruokailuvuoro \(day\):

\(shift\)

+ + +

\(food-header\)

\(food\)

+ + + + 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; +} -- cgit v1.2.3