diff --git a/assets/fonts/Inter-ExtraBold.woff b/assets/fonts/Inter-ExtraBold.woff
new file mode 100644
index 0000000..a99d9b3
Binary files /dev/null and b/assets/fonts/Inter-ExtraBold.woff differ
diff --git a/assets/fonts/Inter-ExtraBold.woff2 b/assets/fonts/Inter-ExtraBold.woff2
new file mode 100644
index 0000000..fb90f36
Binary files /dev/null and b/assets/fonts/Inter-ExtraBold.woff2 differ
diff --git a/assets/fonts/Inter-Regular.woff b/assets/fonts/Inter-Regular.woff
new file mode 100644
index 0000000..82fd34e
Binary files /dev/null and b/assets/fonts/Inter-Regular.woff differ
diff --git a/assets/fonts/Inter-Regular.woff2 b/assets/fonts/Inter-Regular.woff2
new file mode 100644
index 0000000..9a02e80
Binary files /dev/null and b/assets/fonts/Inter-Regular.woff2 differ
diff --git a/assets/images/icon-192.png b/assets/images/icon-192.png
new file mode 100644
index 0000000..460138f
Binary files /dev/null and b/assets/images/icon-192.png differ
diff --git a/assets/images/icon-512.png b/assets/images/icon-512.png
new file mode 100644
index 0000000..695ab44
Binary files /dev/null and b/assets/images/icon-512.png differ
diff --git a/assets/images/icon-64.png b/assets/images/icon-64.png
new file mode 100644
index 0000000..7f91601
Binary files /dev/null and b/assets/images/icon-64.png differ
diff --git a/assets/index.css b/assets/index.css
new file mode 100644
index 0000000..220b46e
--- /dev/null
+++ b/assets/index.css
@@ -0,0 +1,182 @@
+/* Inter font */
+
+@font-face {
+ font-family: 'Inter';
+ font-style: normal;
+ font-weight: 400;
+ font-display: swap;
+ src: url("fonts/Inter-Regular.woff2") format("woff2"),
+ url("fonts/Inter-Regular.woff") format("woff");
+}
+
+@font-face {
+ font-family: 'Inter';
+ font-style: normal;
+ font-weight: 800;
+ font-display: swap;
+ src: url("fonts/Inter-ExtraBold.woff2") format("woff2"),
+ url("fonts/Inter-ExtraBold.woff") format("woff");
+}
+
+/* Base */
+
+* {
+ font-family: 'Inter', sans-serif;
+ color: #212529;
+}
+
+h1 {
+ text-align: center;
+ width: 100%;
+}
+
+h2 {
+ text-align: center;
+ width: 100%;
+}
+
+/* Slider */
+
+input[type=range] {
+ -webkit-appearance: none;
+ border: 0;
+ height: 28px;
+ margin: 8px 0;
+ outline: none;
+ padding: 0 8px;
+ width: 100%;
+}
+
+input[type="range"]::-webkit-slider-runnable-track {
+ background: #bdbdbd;
+ border-radius: 2px;
+ height: 4px;
+}
+
+input[type="range"]::-moz-range-track {
+ background: #bdbdbd;
+ height: 4px;
+}
+
+input[type="range"]::-webkit-slider-thumb {
+ -webkit-appearance: none;
+ background: #212529;
+ border: 4px solid #ededf0;
+ border-radius: 50%;
+ cursor: pointer;
+ height: 28px;
+ margin-top: -12px;
+ width: 28px;
+}
+
+input[type="range"]::-moz-range-thumb {
+ background: #212529;
+ border: 4px solid #ededf0;
+ border-radius: 50%;
+ cursor: pointer;
+ height: 20px;
+ width: 20px;
+}
+
+input[type="range"]::-moz-focus-outer {
+ border: 0;
+}
+
+input[type="range"]::-moz-range-progress {
+ background: #212529;
+ border-radius: 4px;
+ height: 4px;
+}
+
+/* Room map */
+
+.room-map {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ padding-left: 10vw;
+ padding-right: 10vw;
+ text-align: center;
+}
+
+.room {
+ margin: 0.5rem;
+ background: #ededf0;
+ border-radius: 4px;
+ padding: 0.5rem;
+ transition: all 0.5s ease;
+}
+
+.room:hover {
+ box-shadow: 0 4px 8px #0000002a;
+}
+
+.room a {
+ text-decoration: none;
+}
+
+.room h3 {
+ font-size: 1.6rem;
+ font-weight: 700;
+}
+
+.room p {
+ font-size: 1.2rem;
+}
+
+.room-big {
+ flex: 1 1 100%;
+}
+
+.room-small {
+ flex: 1 1 45%;
+}
+
+.room-free {
+ background-color: #3FE1B0;
+}
+
+.room-in-use {
+ background-color: #FF505F;
+}
+
+@media screen and (max-width: 830px) {
+ .room {
+ padding: 0.2rem;
+ }
+
+ .room-big {
+ flex: 1 1 80%;
+ }
+
+ .room-small {
+ flex: 1 1 35%;
+ }
+}
+
+/* Time */
+.timepicker {
+ border: #00000033 solid 1px;
+ border-radius: 4px;
+ box-shadow: 0 1px 3px #0000001a;
+ display: flex;
+ flex-direction: column;
+ padding: 1rem;
+ margin: 2rem 5vw;
+ text-align: center;
+}
+
+/* Schedule */
+
+.schedule {
+ border: #00000033 solid 1px;
+ border-radius: 4px;
+ box-shadow: 0 1px 3px #0000001a;
+ padding: 1rem;
+ margin: 2rem 5vw;
+}
+
+.schedule h2 {
+ font-weight: 800;
+ text-align: start;
+}
diff --git a/index.css b/index.css
deleted file mode 100644
index b2c21d4..0000000
--- a/index.css
+++ /dev/null
@@ -1,63 +0,0 @@
-* {
- font-family: 'IBM Plex Sans', sans-serif;
-}
-
-body {
- padding-left: 10vw;
- padding-right: 10vw;
-}
-
-h1 {
- text-align: center;
- width: 100%;
-}
-
-h2 {
- text-align: center;
- width: 100%;
-}
-
-input[type=range] {
- width: 100%;
-}
-
-.room-map {
- display: flex;
- flex-direction: row;
- flex-wrap: wrap;
- text-align: center;
-}
-
-.room {
- margin: 0.5rem;
- background: #e0e0e0;
- border-radius: 8px;
- padding: 0.2rem;
-}
-
-.room h3 {
- font-size: 1.6rem;
-}
-
-.room p {
- font-size: 1.2rem;
- font-family: 'IBM Plex Mono', monospace;
-}
-
-.room-big {
- flex: 1 1 100%;
-}
-
-.room-small {
- flex: 1 1 45%;
-}
-
-.schedule {
- border-color: #f1f2f3;
- border-radius: 8px;
- border-style: solid;
- border-width: 2px;
- padding: 0.2rem;
- margin-top: 2rem;
- margin-bottom: 1rem;
-}
diff --git a/index.html b/index.html
index 6a9e60f..24efc84 100644
--- a/index.html
+++ b/index.html
@@ -1,55 +1,72 @@
-
+
USI • Rooms availability
-
-
-
-
+
+
+
+
+
USI INF room availability
- Time: 18:00
-
+
+
Loading...
+
+
Schedule for today
@@ -72,6 +89,7 @@
+
-
+
diff --git a/index.js b/index.js
index 200676a..823c787 100644
--- a/index.js
+++ b/index.js
@@ -75,14 +75,13 @@ function colorRoom(roomTitle, node, time = NOW /* QuantumLeap */) {
return
}
- console.log(roomTitle, time);
-
const currentLecture = data.filter(d => d.start < time && d.end > time)[0];
const isFree = currentLecture === void(0);
const block = document.getElementById(roomTitle);
- block.style.background = isFree ? "#d4edda" : "#f8d7da";
- block.style.color = isFree ? "#155724" : "#721c24";
+ block.className = isFree ?
+ block.className.replace("room-in-use", "") + " room-free" :
+ block.className.replace("room-free", "") + " room-in-use";
block.querySelector('p').innerHTML = isFree ? 'Free' :
currentLecture.title + "
(" + formatTime(currentLecture.start) + " - " +
@@ -94,12 +93,13 @@ async function buildRoomMarkup(roomTitle) {
const room = getRoomNode();
const title = room.querySelector('.room-title');
title.innerHTML = roomTitle;
+ title.id = "schedule-" + roomTitle;
const list = room.querySelector('.list');
for (const d of data) {
const slot = document.importNode(SLOT_TEMPLATE.content, true);
const title = slot.querySelector('.title');
- document.getElementById("room");title.innerHTML = d.title;
+ title.innerHTML = d.title;
const start = slot.querySelector('.start');
start.innerHTML = formatTime(d.start);
const end = slot.querySelector('.end');
@@ -119,23 +119,19 @@ async function buildRoomMarkup(roomTitle) {
function setTimePreview(date = NOW) {
const timePreview = document.getElementById('timepreviewer');
- timePreview.innerText = formatTime(date);
+ timePreview.innerText = "Time: " + formatTime(date);
}
function setupTimeMachine() {
const slider = document.getElementById('timemachine');
slider.min = 0;
- slider.max = 92 - (NOW.getHours() * 4); // 24 * 4 - now[h]
- // 00 15 30 45 60 15 30 45 00 15 30 45
- // 00 00 00 00 01 01 01
- //
+ slider.max = 92 - (NOW.getHours() * 4);
slider.value = slider.min;
slider.addEventListener("input", (e) => {
const hours = Math.round(slider.value / 4);
- const mins = Math.round(slider.value % 60);
- console.log(hours, mins);
+ const mins = slider.value % 60;
let newDate = new Date();
newDate.setHours(newDate.getHours() + hours);
newDate.setMinutes(newDate.getMinutes() + mins);
diff --git a/manifest.json b/manifest.json
new file mode 100644
index 0000000..92b2e7e
--- /dev/null
+++ b/manifest.json
@@ -0,0 +1,21 @@
+{
+ "short_name": "USI Rooms",
+ "name": "USI INF Rooms",
+ "icons": [
+ {
+ "src": "./images/icon-192.png",
+ "type": "image/png",
+ "sizes": "192x192"
+ },
+ {
+ "src": "./images/icon-512.png",
+ "type": "image/png",
+ "sizes": "512x512"
+ }
+ ],
+ "start_url": "./index.html",
+ "background_color": "#fafafa",
+ "display": "standalone",
+ "scope": "./",
+ "theme_color": "#333333"
+}