You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
201 lines
8.4 KiB
HTML
201 lines
8.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<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>Posti DM</title>
|
|
|
|
<script type="module" src="./src/index.js"></script>
|
|
</head>
|
|
<body>
|
|
<nav>
|
|
<div class="nav-group left">
|
|
<div class="nav-item" id="clock">14:23</div>
|
|
</div>
|
|
<div class="nav-group center">
|
|
<div class="nav-item">
|
|
<a href="/">Posti DM</a>
|
|
</div>
|
|
</div>
|
|
<div class="nav-group right">
|
|
<div id="login-label" class="nav-item">
|
|
<a href="/login.html">Login</a>
|
|
</div>
|
|
<div id="logged-label" class="nav-item hidden">
|
|
<!-- @username -->
|
|
</div>
|
|
<div id="logout-label" class="nav-item hidden">
|
|
<button id="logout-button">Logout</button>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
<main>
|
|
<h3>Aula Studenti</h3>
|
|
|
|
<div class="room-diagram">
|
|
<!-- <div class="options">
|
|
<input type="checkbox" id="diagram-or-list-checkbox" checked />
|
|
<label for="diagram-or-list-checkbox">Visualizzazione Posti</label>
|
|
</div> -->
|
|
<div class="room-grid">
|
|
<div
|
|
class="posto"
|
|
data-seat-id="aula-stud/posto-1"
|
|
style="grid-column: 3 / span 4; grid-row: 1 / span 2"
|
|
></div>
|
|
<div
|
|
class="posto"
|
|
data-seat-id="aula-stud/posto-2"
|
|
style="grid-column: 7 / span 4; grid-row: 1 / span 2"
|
|
></div>
|
|
<div
|
|
class="posto"
|
|
data-seat-id="aula-stud/posto-3"
|
|
style="grid-column: 1 / span 2; grid-row: 3 / span 4"
|
|
></div>
|
|
<div
|
|
class="posto"
|
|
data-seat-id="aula-stud/posto-4"
|
|
style="grid-column: 1 / span 2; grid-row: 7 / span 4"
|
|
></div>
|
|
<div
|
|
class="posto"
|
|
data-seat-id="aula-stud/posto-5"
|
|
style="grid-column: 3 / span 4; grid-row: 11 / span 2"
|
|
></div>
|
|
<div
|
|
class="posto"
|
|
data-seat-id="aula-stud/posto-6"
|
|
style="grid-column: 7 / span 4; grid-row: 11 / span 2"
|
|
></div>
|
|
<div
|
|
class="posto"
|
|
data-seat-id="aula-stud/posto-7"
|
|
style="grid-column: 8 / span 2; grid-row: 5 / span 4"
|
|
></div>
|
|
<div
|
|
class="posto"
|
|
data-seat-id="aula-stud/posto-8"
|
|
style="grid-column: 14 / span 2; grid-row: 1 / span 4"
|
|
></div>
|
|
<div
|
|
class="posto"
|
|
data-seat-id="aula-stud/posto-9"
|
|
style="grid-column: 14 / span 2; grid-row: 5 / span 4"
|
|
></div>
|
|
<div
|
|
class="posto"
|
|
data-seat-id="aula-stud/posto-10"
|
|
style="grid-column: 14 / span 2; grid-row: 9 / span 4"
|
|
></div>
|
|
<div
|
|
class="posto"
|
|
data-seat-id="aula-stud/posto-11"
|
|
style="grid-column: 14 / span 2; grid-row: 13 / span 4"
|
|
></div>
|
|
</div>
|
|
<div class="room-seat-list hidden">
|
|
<div class="seat-item">
|
|
<div class="name">Posto 1</div>
|
|
<button>Occupa</button>
|
|
</div>
|
|
<div class="seat-item">
|
|
<div class="name">Posto 2</div>
|
|
<button>Occupa</button>
|
|
</div>
|
|
<div class="seat-item">
|
|
<div class="name">Posto 3</div>
|
|
<button>Occupa</button>
|
|
</div>
|
|
<div class="seat-item">
|
|
<div class="name">Posto 4</div>
|
|
<button>Occupa</button>
|
|
</div>
|
|
</div>
|
|
<p>
|
|
Clicca su un posto per occuparlo (i posti liberi sono
|
|
<span
|
|
style="
|
|
text-decoration: solid underline #8888 4px;
|
|
text-decoration-skip-ink: none;
|
|
"
|
|
>grigi</span
|
|
>, quelli
|
|
<span style="text-decoration: solid underline #d88 4px">rossi</span>
|
|
sono occupati dagli altri, mentre il tuo è in
|
|
<span style="text-decoration: solid underline #8d8 4px">verde</span>)
|
|
</p>
|
|
</div>
|
|
</main>
|
|
|
|
<div id="tooltip">Some text</div>
|
|
|
|
<script type="module" src="./src/pages/index.js"></script>
|
|
<!-- <main>
|
|
<div class="room-name">AulaStud</div>
|
|
<div class="room-main">
|
|
<div class="panel room-diagram">
|
|
...
|
|
</div>
|
|
<div class="panel room-bookings">
|
|
<div class="seat-list">
|
|
<div class="seat">
|
|
<div class="name">Posto 1</div>
|
|
<button>Occupa</button>
|
|
</div>
|
|
<div class="seat">
|
|
<div class="name">Posto 2</div>
|
|
<button>Occupa</button>
|
|
</div>
|
|
<div class="seat">
|
|
<div class="name">Posto 3</div>
|
|
<button>Occupa</button>
|
|
</div>
|
|
<div class="seat">
|
|
<div class="name">Posto 4</div>
|
|
<button>Occupa</button>
|
|
</div>
|
|
<div class="seat selected">
|
|
<div class="name">Posto 5</div>
|
|
<button>Occupa</button>
|
|
</div>
|
|
<div class="seat">
|
|
<div class="name">Posto 6</div>
|
|
<button disabled>Occupato</button>
|
|
</div>
|
|
<div class="seat">
|
|
<div class="name">Posto 7</div>
|
|
<button disabled>Occupato</button>
|
|
</div>
|
|
<div class="seat">
|
|
<div class="name">Posto 8</div>
|
|
<button disabled>Occupato</button>
|
|
</div>
|
|
<div class="seat">
|
|
<div class="name">Posto 9</div>
|
|
<button disabled>Occupato</button>
|
|
</div>
|
|
<div class="seat">
|
|
<div class="name">Posto 10</div>
|
|
<button disabled>Occupato</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="panel room-timeline">
|
|
<button disabled>8:30 — 10:00</button>
|
|
<button disabled>10:00 — 11:00</button>
|
|
<button disabled>11:00 — 12:00</button>
|
|
<button disabled>12:00 — 13:00</button>
|
|
<button disabled>13:00 — 14:00</button>
|
|
<button>14:00 — 15:00</button>
|
|
<button>15:00 — 16:00</button>
|
|
<button>16:00 — 17:00</button>
|
|
<button disabled>17:00 — 18:00</button>
|
|
<button disabled>18:00 — 19:30</button>
|
|
</div>
|
|
</div>
|
|
</main> -->
|
|
</body>
|
|
</html>
|