diff --git a/images/bg-classroom.jpg b/images/bg-classroom.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..3f633c268b97f934a98859dabc611ba9a571fc67
Binary files /dev/null and b/images/bg-classroom.jpg differ
diff --git a/index.html b/index.html
new file mode 100644
index 0000000000000000000000000000000000000000..81c2c0aaafff89b7d6fcb3fa375d5b4ddebbb4df
--- /dev/null
+++ b/index.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>UFHOUR</title>
+
+ <!-- Meta -->
+ <meta charset="UTF-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+ <!-- Styles -->
+ <link rel="stylesheet" href="styles/main.css" />
+ <link rel="stylesheet" href="styles/navbar.css" />
+
+ <!-- Fonts -->
+ <link rel="preconnect" href="https://fonts.googleapis.com" />
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+
+ <!-- Roboto -->
+ <link
+ rel="stylesheet"
+ href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap"
+ />
+ <!-- Material Icons -->
+ <link
+ rel="stylesheet"
+ href="https://fonts.googleapis.com/icon?family=Material+Icons"
+ />
+
+ <!-- Scripts -->
+ <script defer src="scripts/behaviours.js"></script>
+ </head>
+ <body>
+ <div id="menu-area">
+ <ul>
+ <li><a>FR</a></li>
+ <li><a>EN</a></li>
+ <li><a>CZ</a></li>
+ </ul>
+ <button>
+ <i class="material-icons">translate</i>
+ </button>
+
+ <nav>
+ <ul>
+ <li><a>À propos</a></li>
+ <li><a>Suggestions</a></li>
+ <li><a>Admin</a></li>
+ </ul>
+ <button>
+ <i class="material-icons">menu</i>
+ <span>Menu</span>
+ </button>
+ </nav>
+ </div>
+ </body>
+</html>
diff --git a/scripts/behaviours.js b/scripts/behaviours.js
new file mode 100644
index 0000000000000000000000000000000000000000..d2e1ae2560f0bbcd285c0df7db3797cd4a21b8cf
--- /dev/null
+++ b/scripts/behaviours.js
@@ -0,0 +1,14 @@
+
+const nav_button = document.querySelector("nav > button")
+const nav_menu = document.querySelector("nav > ul");
+
+const lang_button = document.querySelector("#menu-area > button");
+const lang_menu = document.querySelector("#menu-area > ul");
+
+nav_button.onclick = (e) => {
+ nav_menu.classList.toggle("shown");
+}
+
+lang_button.onclick = (e) => {
+ lang_menu.classList.toggle("shown");
+}
\ No newline at end of file
diff --git a/styles/main.css b/styles/main.css
new file mode 100644
index 0000000000000000000000000000000000000000..44a7f1cc2a7de1cb531d7ab158ba54f07c2fce77
--- /dev/null
+++ b/styles/main.css
@@ -0,0 +1,43 @@
+* {
+ font-family: "Roboto", sans-serif;
+ margin: 0;
+}
+
+body {
+ background: url("../images/bg-classroom.jpg");
+ background-size: cover 100vh;
+ background-repeat: no-repeat;
+}
+
+button {
+ /* Style */
+ color: white;
+ background: #3763ff;
+ border: none;
+ border-radius: 5px;
+ font-weight: 500;
+ font-size: 0.9rem;
+
+ /* Sizing */
+ height: 3rem;
+ width: 100%;
+ padding-left: auto;
+ padding-right: auto;
+
+ /* Transition */
+ transition: background 0.2s;
+}
+
+button > span,
+button > i {
+ vertical-align: middle;
+}
+
+button > i {
+ margin-right: 0.5rem;
+}
+
+button:hover {
+ filter: brightness(115%);
+ cursor: pointer;
+}
diff --git a/styles/navbar.css b/styles/navbar.css
new file mode 100644
index 0000000000000000000000000000000000000000..22e60d00ca0fdf4b73010483b011c86a9a3509da
--- /dev/null
+++ b/styles/navbar.css
@@ -0,0 +1,106 @@
+
+#menu-area {
+ position: fixed;
+ bottom: 1rem;
+ right: 1rem;
+ display: flex;
+ align-items: flex-end;
+ gap: 0.5em;
+}
+
+nav {
+ perspective: 200px;
+ perspective-origin: bottom;
+}
+
+#menu-area ul {
+ /* Style */
+ list-style-type: none;
+ color: white;
+ background: rgba(34, 34, 34, 0.8);
+ border-radius: 10px;
+}
+
+nav > ul {
+ /* Sizing */
+ width: 9rem;
+ padding: 1rem 0 1rem 0;
+ margin-bottom: 0.5rem;
+
+ /* Display */
+ visibility: hidden;
+ opacity: 0;
+ transform: rotateX(15deg) translateZ(-2rem) translateY(-1rem);
+
+ /* Transition */
+ transition-duration: .3s;
+ transition-property: visibility transform opacity max-height;
+ transition-delay: 0.3s 0s 0s 0s;
+}
+
+nav > ul.shown {
+ transform: none;
+ opacity: 1;
+ visibility: visible;
+}
+
+nav > ul > li {
+ font-size: 0.9rem;
+ text-align: center;
+ font-weight: 300;
+}
+
+nav > ul > li:not(:last-child) {
+ margin-bottom: 0.8rem;
+}
+
+nav > button, #menu-area > button {
+ border-radius: 10px;
+ background: #4d4d4d85;
+}
+
+nav > button:hover, #menu-area > button:hover {
+ background: #3763ff;
+}
+
+#menu-area > button {
+ width: 3rem;
+}
+
+#menu-area > button > i {
+ margin-right: 0;
+}
+
+#menu-area {
+ perspective: 200px;
+ perspective-origin: bottom;
+}
+
+#menu-area > ul {
+ /* Sizing */
+ padding-left: 1em;
+ padding-right: 1em;
+ height: 3rem;
+
+ /* Layout */
+ display: flex;
+ align-items: center;
+ align-content: center;
+ gap: 0.5rem;
+
+ /* Display */
+ visibility: hidden;
+ opacity: 0;
+ transform: rotateY(-15deg) translateZ(-2rem) translateX(-1rem);
+
+ /* Transition */
+ transition-duration: .3s;
+ transition-property: visibility transform opacity max-height;
+ transition-delay: 0.3s 0s 0s 0s;
+}
+
+#menu-area > ul.shown {
+ transform: none;
+ opacity: 1;
+ visibility: visible;
+}
\ No newline at end of file
diff --git a/tables.sql b/tables.sql
new file mode 100644
index 0000000000000000000000000000000000000000..c4dc0cab44d410e78f26922527c3361ed7db1689
--- /dev/null
+++ b/tables.sql
@@ -0,0 +1,19 @@
+CREATE TABLE `Rooms`(
+ `id` VARCHAR(255) NOT NULL,
+ `type` INT NOT NULL,
+ `location` INT NOT NULL
+);
+ALTER TABLE
+ `Rooms` ADD PRIMARY KEY `rooms_id_primary`(`id`);
+CREATE TABLE `Calendar`(
+ `date` DATE NOT NULL,
+ `id` VARCHAR(255) NOT NULL,
+ `start_time` TIME NOT NULL,
+ `end_time` TIME NOT NULL
+);
+ALTER TABLE
+ `Calendar` ADD PRIMARY KEY `calendar_date_primary`(`date`);
+ALTER TABLE
+ `Calendar` ADD PRIMARY KEY `calendar_id_primary`(`id`);
+ALTER TABLE
+ `Calendar` ADD PRIMARY KEY `calendar_start_time_primary`(`start_time`);
\ No newline at end of file