Something went wrong on our end
-
Torben Böhnke authoredTorben Böhnke authored
info_monitor_autoswitch.html 7.03 KiB
<!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;
background: rgb(244, 123, 138);
background: linear-gradient(135deg, rgba(244, 123, 138, 1) 0%, rgba(44, 63, 96, 1) 100%);
}
.page {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: 0;
transition: opacity 1s ease;
overflow: hidden scroll;
display: none;
/* Start with all pages not displayed */
}
/* Initial visibility */
#page1 {
opacity: 1;
/* Show first page initially */
background: white;
}
/* Hidden by default */
#page2 {
display: none;
}
/* Hidden by default */
#page3 {
display: none;
}
.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;
}
.aquarium {
width: 100%;
height: 100%;
object-fit: cover;
/* Ensure the image covers the screen without distortion */
}
</style>
<div id="page1" class="page"> <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>
</div>
<div id="page2" class="page">
<img class="aquarium" src="/medien/makerspace-logo-willkommen.png" style="width:100%; height:auto;"></img>
</div>
<div id="page3" class="page">
<img class="aquarium" src="/medien/visionen.jpg"></img>
</div>
<script src="javascripts/ics_calendar.js"></script>
<!-- this calls the js that is responsible for everything around the calendar and contact form -->
<script>
document.addEventListener("DOMContentLoaded", function () {
var page1 = document.getElementById('page1');
var page2 = document.getElementById('page2');
var page3 = document.getElementById('page3');
// Start with page 2 visible initially
page2.style.display = 'block';
page2.style.opacity = 1;
function switchPage(currentPage, nextPage) {
nextPage.style.display = 'block'; // Prepare the next page to fade in
nextPage.style.opacity = 0; // Start from transparent to trigger transition
setTimeout(function () {
currentPage.style.opacity = 0; // Begin fading out the current page
nextPage.style.opacity = 1; // Begin fading in the next page
}, 100); // A short delay ensures the opacity change triggers
setTimeout(function () {
currentPage.style.display = 'none'; // Hide the current page after transition
}, 1100); // This should be slightly longer than the CSS transition time
}
// Function to initiate the page cycle according to the specified order
function cyclePages() {
// Calculate the correct intervals for each page switch
setTimeout(function () { switchPage(page2, page1); }, 6000); // From page 2 to page 1 after 6 seconds
setTimeout(function () { switchPage(page1, page3); }, 18000); // From page 1 to page 3 after 12 seconds
setTimeout(function () { switchPage(page3, page1); }, 24000); // From page 3 to page 1 after 6 seconds
setTimeout(function () { switchPage(page1, page2); }, 36000); // From page 1 back to page 2 to complete the cycle
}
cyclePages(); // Start the cycle on page load
setInterval(cyclePages, 36000); // Repeat every 36 seconds to restart the cycle
});
</script>
</body>
</html>