diff --git a/index.html b/index.html index ae4b4b1..02f81cc 100644 --- a/index.html +++ b/index.html @@ -6,60 +6,125 @@ + + + + + -

RaPla Middleware Link Generator

-

This website generates a link based on your preferences to use the RaPla Middleware which filters unwanted events.

-

Please only select a Wahl- / Profilmodul if you are in the 5./6. Semester and have any of these as otherwise, -the middleware might not work as expected.

-

Of course, I try my best to only exclude the events you want to have removed, but of course I can't guarantee -that this tool works exactly as expected all the time. Please don't only rely on this tool working perfectly.

-

If you have any questions or bugs, contact me via one of the options on p4ddy.com

-
-
- -
- -
- -
- -
- -
- -
-

Here is the link that you can use for importing RaPla into your iCloud etc. calendar (click to copy):

- + diff --git a/scripts.js b/scripts.js index ee3f628..9e42ef7 100644 --- a/scripts.js +++ b/scripts.js @@ -68,3 +68,26 @@ let courseLinks = { 'TINF20B4': {user: 'eisenbiegler', file: 'TINF20B4'}, 'TINF20B5': {user: 'strand', file: 'TINF20B5'} } + +/* Toggle Dark-Mode */ + +const toggleDarkMode = () => { + let element = document.body; + let navElement = document.getElementById('raplalinkcontainer--nav'); + let colorModeToggleIcon = document.getElementById('colorModeToggleIcon'); + let submitButton = document.getElementById('submitBtn'); + + element.classList.toggle("body--dark-mode"); + navElement.classList.toggle("nav--dark-mode"); + submitButton.classList.toggle("submitButton--dark-mode"); + + if (colorModeToggleIcon.classList.contains("fa-moon")) { + colorModeToggleIcon.classList.remove("fa-moon"); + colorModeToggleIcon.classList.add("fa-sun"); + } else { + colorModeToggleIcon.classList.remove("fa-sun"); + colorModeToggleIcon.classList.add("fa-moon"); + } + +} + diff --git a/styles.css b/styles.css index 56dca9c..225cd67 100644 --- a/styles.css +++ b/styles.css @@ -1,6 +1,95 @@ html, body { - height: 100%; - background-color: #191718; - color: #E0E5E9; + color: #121212; } + +.body--dark-mode { + background-color: #222222; + color: white; +} + + +#raplalinkcontainer { + height: 100vh; + font-family: Nunito, sans-serif; + display: flex; + justify-content: center; + align-items: center; +} + +.raplalinkcontainer--nav.row{ + margin: inherit; + display: flex; + justify-content: space-evenly; + align-items: center; + height: 10%; +} + + + + +.content { + height: 100%; +} +@media only screen and (min-width: 900px) { + .content { + width: 33%; + } +} + +.raplalinkcontainer--nav { + background-color: white; + top: 0; + position: sticky; +} + +.nav--dark-mode { + background-color: #222222; + color: white; +} + + +.raplalinkcontainer--nav__text { + font-weight: 700; +} + +.far { + font-size: 1.3em; +} +.raplalinkcontainer--img img{ + width: 10%; +} + +.raplalinkcontainer__preface { + padding: 1em; +} + +.raplalinkcontainer__form { + padding: 1.3em; +} + + +.raplalinkcontainer__header { + font-family: Nunito, sans-serif; + display: flex; + justify-content: space-between; +} +.raplalinkcontainer__header--button { + text-align: end; + padding: 1em; +} + +#submitBtn { + width: 100%; +} + +#submitBtn.submitButton--dark-mode { + background-color: white; + color: #222222; +} + +.raplalinkcontainer--link { + padding: 1.3em; +} + +