diff --git a/index.html b/index.html
deleted file mode 100644
index 81c2c0aaafff89b7d6fcb3fa375d5b4ddebbb4df..0000000000000000000000000000000000000000
--- a/index.html
+++ /dev/null
@@ -1,56 +0,0 @@
-<!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/index.php b/index.php
new file mode 100644
index 0000000000000000000000000000000000000000..54e748804406c919a058e628880aeab144744830
--- /dev/null
+++ b/index.php
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+ <title>UFHOUR</title>
+
+ <!-- Head -->
+ <?php include "php/head.php"; ?>
+
+ <!-- Scripts -->
+ <script defer src="scripts/behaviours.js"></script>
+</head>
+
+<body>
+ <main>
+ <header>
+ <h1>UFHOUR</h1>
+ <p>Recherche de salles libres de l'UFR Math-Info</p>
+ </header>
+
+ <form>
+ <label for="date">Date</label>
+ <input type="date" name="date">
+
+ <label for="start_time">Début plage horaire</label>
+ <input type="time" name="start_time">
+
+ <label for="end_time">Fin plage horaire</label>
+ <input type="time" name="end_time">
+
+ <label for="room_type">Type de salle</label>
+ <select name="room_type">
+ <option value="room_tp">Salle de TP</option>
+ <option value="romm_td">Salle de TD</option>
+ <option value="room_amphi">Amphithéâtre</option>
+ </select>
+ </form>
+ </main>
+
+ <?php include "php/nav.php"; ?>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/php/head.php b/php/head.php
new file mode 100644
index 0000000000000000000000000000000000000000..2e29fae64d4219461cba6175533ea9b459245c6f
--- /dev/null
+++ b/php/head.php
@@ -0,0 +1,18 @@
+<!-- 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" />
+<link rel="stylesheet" href="styles/form.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" />
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@300;700&display=swap">
+<!-- Material Icons -->
+<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
\ No newline at end of file
diff --git a/php/nav.php b/php/nav.php
new file mode 100644
index 0000000000000000000000000000000000000000..2c2d641195a4e1d3721bcac3ed59e78bcdb8be3e
--- /dev/null
+++ b/php/nav.php
@@ -0,0 +1,22 @@
+<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>
\ No newline at end of file
diff --git a/styles/form.css b/styles/form.css
new file mode 100644
index 0000000000000000000000000000000000000000..301674ece54322250c0ba19b29d6c108da7d5d80
--- /dev/null
+++ b/styles/form.css
@@ -0,0 +1,4 @@
+main > form {
+ display: flex;
+ flex-direction: column;
+}
diff --git a/styles/main.css b/styles/main.css
index 44a7f1cc2a7de1cb531d7ab158ba54f07c2fce77..e41ed42dc52619692a71897282e6117d1b5f0a3f 100644
--- a/styles/main.css
+++ b/styles/main.css
@@ -1,5 +1,6 @@
* {
font-family: "Roboto", sans-serif;
+ color: white;
margin: 0;
}
@@ -9,6 +10,32 @@ body {
background-repeat: no-repeat;
}
+main {
+ height: 100vh;
+ width: 100vw;
+ background: rgba(0, 0, 0, 0.5);
+
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+}
+
+header * {
+ font-family: 'Roboto Mono', sans-serif;
+}
+
+h1 {
+ font-size: 4rem;
+ font-weight: bold;
+ letter-spacing: 0.5em;
+}
+
+header > p {
+ font-weight: 300;
+ letter-spacing: -0.05em;
+}
+
button {
/* Style */
color: white;
diff --git a/styles/navbar.css b/styles/navbar.css
index 22e60d00ca0fdf4b73010483b011c86a9a3509da..76928dfa2628d892f9a37d0cd098c7dafb868488 100644
--- a/styles/navbar.css
+++ b/styles/navbar.css
@@ -9,7 +9,7 @@
}
nav {
- perspective: 200px;
+ perspective: 300px;
perspective-origin: bottom;
}