parent
ebfe66bb89
commit
5d9a2d6d22
97
index.html
97
index.html
|
|
@ -6,21 +6,50 @@
|
|||
<meta name="author" content="Patrick Müller">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" type="text/css" href="styles.css">
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
|
||||
<!--Font Awesome Icons-->
|
||||
<script src="https://kit.fontawesome.com/f2c150d561.js"
|
||||
crossorigin="anonymous">
|
||||
</script>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
|
||||
<script src="scripts.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<h1>RaPla Middleware Link Generator</h1>
|
||||
<div class="container-fluid" id="raplalinkcontainer">
|
||||
<!-- HEADER -->
|
||||
|
||||
<div class="content">
|
||||
<nav class="raplalinkcontainer--nav row" id="raplalinkcontainer--nav">
|
||||
<div class="raplalinkcontainer--nav__text col-11">
|
||||
RaPla Middleware Link Generator
|
||||
</div>
|
||||
<i class="raplalinkcontainer__header--button col-1 far fa-moon" id="colorModeToggleIcon" onclick="toggleDarkMode()">
|
||||
</i>
|
||||
</nav>
|
||||
<!-- // HEADER -->
|
||||
<!-- PREFACE -->
|
||||
<div class="raplalinkcontainer__preface--row">
|
||||
<div class="raplalinkcontainer__preface">
|
||||
<p>This website generates a link based on your preferences to use the RaPla Middleware which filters unwanted events.</p>
|
||||
<p>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.</p>
|
||||
<p>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.</p>
|
||||
<p>If you have any questions or bugs, contact me via one of the options on <a href="https://www.p4ddy.com">p4ddy.com</a></p>
|
||||
<br>
|
||||
</div>
|
||||
</div>
|
||||
<!-- // PREFACE -->
|
||||
<!-- RAPLA-LINK-FORM -->
|
||||
<div class="raplalinkcontainer__form">
|
||||
<form>
|
||||
<label for="coursename">Choose your course</label>
|
||||
<select id="coursename" name="coursename">
|
||||
<!-- COURSE-NAME -->
|
||||
<div class="input-group mb-3">
|
||||
<div class="input-group-prepend">
|
||||
<label class="input-group-text" for="coursename">Choose your course</label>
|
||||
</div>
|
||||
<select class="form-select" id="coursename">
|
||||
<option value="-1" selected>Course</option>
|
||||
<option value="TINF19B1">TINF19B1</option>
|
||||
<option value="TINF19B2">TINF19B2</option>
|
||||
|
|
@ -32,13 +61,32 @@ that this tool works exactly as expected all the time. Please don't only rely on
|
|||
<option value="TINF20B3">TINF20B3</option>
|
||||
<option value="TINF20B4">TINF20B4</option>
|
||||
<option value="TINF20B5">TINF20B5</option>
|
||||
</select><br>
|
||||
<label for="raplalink">If your course is not in the list, provide your RaPla Link here:</label>
|
||||
<input name="raplalink" id="raplalink" type="text"><br>
|
||||
<label for="hideBlockers">Hide Blockers</label>
|
||||
<input name="hideBlockers" id="hideBlockers" type="checkbox"><br>
|
||||
<label for="wahlmodul">Wahlmodul</label>
|
||||
<select id="wahlmodul" name="wahlmodul">
|
||||
</select>
|
||||
</div>
|
||||
<!-- // COURSE-NAME -->
|
||||
<!-- CUSTOM RAPLALINK -->
|
||||
<p class="mb-3">If your course is not in the list, provide your RaPla Link here:</p>
|
||||
<div class="input-group mb-3">
|
||||
<div class="input-group-prepend">
|
||||
<label class="input-group-text" for="raplalink">Your RaPla Link</label>
|
||||
</div>
|
||||
<input class="form-control" id="raplalink" name="raplalink" type="text" placeholder="Your RaPla Link">
|
||||
</div>
|
||||
|
||||
<!-- // CUSTOM RAPLALINK -->
|
||||
<!-- HIDE BLOCKERS -->
|
||||
<div class="mb-3 form-check">
|
||||
<label class="form-check-label" for="hideBlockers">Hide Blockers</label>
|
||||
<input type="checkbox" class="form-check-input" id="hideBlockers" name="hideBlockers">
|
||||
</div>
|
||||
|
||||
<!-- // HIDE BLOCKERS -->
|
||||
<!-- WAHLMODUL -->
|
||||
<div class="input-group mb-3">
|
||||
<div class="input-group-prepend">
|
||||
<label class="input-group-text" for="wahlmodul">Choose your Wahlmodul</label>
|
||||
</div>
|
||||
<select class="form-select" id="wahlmodul" name="wahlmodul">
|
||||
<option value="" selected>Wahlmodul</option>
|
||||
<option value="0">ERP-Systeme</option>
|
||||
<option value="1">Ethik für Informatiker</option>
|
||||
|
|
@ -47,19 +95,36 @@ that this tool works exactly as expected all the time. Please don't only rely on
|
|||
<option value="4">Kryptographische Verfahren</option>
|
||||
<option value="5">Robotik</option>
|
||||
<option value="6">Web-Services</option>
|
||||
</select><br>
|
||||
<label for="profilmodul">Profilmodul</label>
|
||||
<select id="profilmodul" name="profilmodul">
|
||||
</select>
|
||||
</div>
|
||||
<!-- // WAHLMODUL -->
|
||||
<!-- PROFILMODUL -->
|
||||
<div class="input-group mb-3">
|
||||
<div class="input-group-prepend">
|
||||
<label class="input-group-text" for="profilmodul">Choose your Profilmodul</label>
|
||||
</div>
|
||||
<select class="form-select" id="profilmodul" name="profilmodul">
|
||||
<option value="" selected>Profilmodul</option>
|
||||
<option value="0">KI und BV</option>
|
||||
<option value="1">Computergrafik</option>
|
||||
<option value="2">KI und IS</option>
|
||||
<option value="3">E-Business</option>
|
||||
<option value="4">Netztechnik II</option>
|
||||
</select><br>
|
||||
<input type="button" id="submitBtn" value="Generate Link">
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- // PROFILMODUL -->
|
||||
<!-- GENERATE LINK BUTTON -->
|
||||
<input type="button" class="btn btn-outline-secondary" id="submitBtn" value="Generate Link">
|
||||
<!-- // GENERATE LINK BUTTON -->
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="raplalinkcontainer--link">
|
||||
<p>Here is the link that you can use for importing RaPla into your iCloud etc. calendar (click to copy):</p>
|
||||
<p id="full-link"></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
23
scripts.js
23
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");
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
|
|
|||
95
styles.css
95
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;
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user