Newer
Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
<!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
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
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
// 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