UI pt.2
Signed-off-by: Joey <bevilacquajoey@gmail.com>
This commit is contained in:
Joey
parent
8ece6afa2e
commit
4ec5db7b03
12 changed files with 251 additions and 97 deletions
BIN
assets/fonts/Inter-ExtraBold.woff
Normal file
BIN
assets/fonts/Inter-ExtraBold.woff
Normal file
Binary file not shown.
BIN
assets/fonts/Inter-ExtraBold.woff2
Normal file
BIN
assets/fonts/Inter-ExtraBold.woff2
Normal file
Binary file not shown.
BIN
assets/fonts/Inter-Regular.woff
Normal file
BIN
assets/fonts/Inter-Regular.woff
Normal file
Binary file not shown.
BIN
assets/fonts/Inter-Regular.woff2
Normal file
BIN
assets/fonts/Inter-Regular.woff2
Normal file
Binary file not shown.
BIN
assets/images/icon-192.png
Normal file
BIN
assets/images/icon-192.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.5 KiB |
BIN
assets/images/icon-512.png
Normal file
BIN
assets/images/icon-512.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
BIN
assets/images/icon-64.png
Normal file
BIN
assets/images/icon-64.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
182
assets/index.css
Normal file
182
assets/index.css
Normal file
|
|
@ -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;
|
||||
}
|
||||
63
index.css
63
index.css
|
|
@ -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;
|
||||
}
|
||||
62
index.html
62
index.html
|
|
@ -1,55 +1,72 @@
|
|||
<!DOCTYPE html>
|
||||
<!-- vim: set ts=2 sw=2 et tw=80: -->
|
||||
<html>
|
||||
<head>
|
||||
<head>
|
||||
<meta charset='utf-8'>
|
||||
<title>USI • Rooms availability</title>
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=IBM+Plex+Mono|IBM+Plex+Sans&display=swap">
|
||||
<link rel="stylesheet" href="index.css">
|
||||
</head>
|
||||
<body>
|
||||
<link rel="icon" href="assets/images/icon-64.png">
|
||||
<link rel="manifest" href="manifest.json">
|
||||
<link rel="stylesheet" href="assets/index.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>USI INF room availability</h1>
|
||||
|
||||
<div class="room-map">
|
||||
<div class="room room-big" id="SI-003">
|
||||
<h3>SI-003</h3>
|
||||
<p>Free</p>
|
||||
<a href="#schedule-SI-003">
|
||||
<h3>SI-003</h3>
|
||||
<p>???</p>
|
||||
</a>
|
||||
</div>
|
||||
<!-- Row -->
|
||||
<div class="room room-small" id="SI-004">
|
||||
<h3>SI-004</h3>
|
||||
<p>Free</p>
|
||||
<a href="#schedule-SI-004">
|
||||
<h3>SI-004</h3>
|
||||
<p>???</p>
|
||||
</a>
|
||||
</div>
|
||||
<div class="room room-small" id="SI-015">
|
||||
<h3>SI-015</h3>
|
||||
<p>Free</p>
|
||||
<a href="#schedule-SI-015">
|
||||
<h3>SI-015</h3>
|
||||
<p>???</p>
|
||||
</a>
|
||||
</div>
|
||||
<!-- Row -->
|
||||
<div class="room room-big" id="SI-006">
|
||||
<h3>SI-006</h3>
|
||||
<p>Free</p>
|
||||
<a href="#schedule-SI-006">
|
||||
<h3>SI-006</h3>
|
||||
<p>???</p>
|
||||
</a>
|
||||
</div>
|
||||
<!-- Row -->
|
||||
<div class="room room-small" id="SI-007">
|
||||
<h3>SI-007</h3>
|
||||
<p>Free</p>
|
||||
<a href="#schedule-SI-007">
|
||||
<h3>SI-007</h3>
|
||||
<p>???</p>
|
||||
</a>
|
||||
</div>
|
||||
<div class="room room-small" id="SI-013">
|
||||
<h3>SI-013</h3>
|
||||
<p>Free</p>
|
||||
<a href="#schedule-SI-013">
|
||||
<h3>SI-013</h3>
|
||||
<p>???</p>
|
||||
</a>
|
||||
</div>
|
||||
<!-- Row -->
|
||||
<div class="room room-big room" id="SI-008">
|
||||
<h3>SI-008</h3>
|
||||
<p>Free</p>
|
||||
<a href="#schedule-SI-008">
|
||||
<h3>SI-008</h3>
|
||||
<p>???</p>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 id="timepreviewer">Time: 18:00</h2>
|
||||
<input type="range" id="timemachine" />
|
||||
<div class="timepicker">
|
||||
<h2 id="timepreviewer">Loading...</h2>
|
||||
<input type="range" id="timemachine" />
|
||||
</div>
|
||||
|
||||
<div class="schedule">
|
||||
<h1>Schedule for today</h1>
|
||||
|
|
@ -72,6 +89,7 @@
|
|||
</li>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<script src='index.js'></script>
|
||||
</body>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
20
index.js
20
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 + "<br> (" + 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);
|
||||
|
|
|
|||
21
manifest.json
Normal file
21
manifest.json
Normal file
|
|
@ -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"
|
||||
}
|
||||
Loading…
Reference in a new issue