<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Infomonitor</title>
<script src="javascripts/ical.js"></script> <!-- calls ical.js library to parse the ics-data from the calendar file into data the fullcalendar-library can work with -->
<script src="javascripts/index.global.min.js"></script> <!-- calls the fullcalendar.js library -->
<link rel="stylesheet" href="stylesheets/main.css"> <!-- this calls the variables holding the "core"-Design for the entire Website like colors-codes etc. -->
<link rel="stylesheet" href="stylesheets//components/calender.css"> <!-- this calls the specific Design for the calendar, and can use the variables of the file above -->
</head>
<body>
<style>
html {
overflow-y: scroll;
width: 100%;
height: auto;
aspect-ratio: 9/16;
}
body {
width: 100%;
height: 100%;
overflow: hidden scroll;
font-size: 66px;
}
.header-logo {
margin-bottom: 4%;
width: calc((var(--header-logo-height) * var(--header-logo-factor)) * 3);
height: calc(var(--header-logo-height) * 3);
}
.qr-code {
position: relative;
left: 50%;
transform: translateX(-50%) scale(3);
transform-origin: top;
}
p {
line-height: 180%;
}
p strong {
color: rgb(var(--rub-blau));
}
.im-footer {
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: space-between;
margin: 2.5em 0 0 0;
}
.im-footer div {
max-width: 45%;
}
.dev-tools-wrapper {
display: flex;
justify-content: center;
width: 100%;
position: fixed;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.8);
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3);
z-index: 8;
padding: 10px;
color: white;
}
.font-size-input {
width: 100%;
text-align: center;
}
.font-size-input input {
padding: 5px;
font-size: 1em;
border: none;
border-radius: 4px;
}
#imContent {
padding: 5%;
}
.fc .fc-list-table {
pointer-events: none;
}
</style>
<div id="imContent">
<div class="calendar-wrapper">
<div class="header-logo" alt="logo"></div>
<div id='form-container'></div> <!-- this div holds the contact form -->
<div id='calendar' style="border: none;"></div> <!-- this div holds the calendar -->
</div>
<div class="im-footer">
<div>
<p>Besuche unsere Webseite unter <br> <strong>https://makerspace.ruhr-uni-bochum.de/</strong> <br>oder scanne
einfach den QR-Code</p>
<img class="qr-code" src="/medien/qr_code.png"></img>
</div>
<div>
<p>Kontaktiere uns<br>
E-Mail: <strong>makerspace@rub.de</strong><br>
Tel: 0234 32 26088
</p>
</div>
</div>
</div>
<script src="javascripts/ics_calendar.js"></script> <!-- this calls the js that is responsible for everything around the calendar and contact form -->
</body>
</html>