Broke down reusables into php files

84311945 · Noé Le Cam · a7d671fc · a7d671fc · 84311945 · 84311945
Commit 84311945 authored 3 years ago by Noé Le Cam
--- a/index.html
+++ b/index.html
-<!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>
--- a/index.php
+++ b/index.php
+<!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
--- a/php/head.php
+++ b/php/head.php
+<!-- 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
--- a/php/nav.php
+++ b/php/nav.php
+<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
--- a/styles/form.css
+++ b/styles/form.css
+main > form {
+  display: flex;
+  flex-direction: column;
+}
--- a/styles/main.css
+++ b/styles/main.css
 * {
  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;

--- a/styles/navbar.css
+++ b/styles/navbar.css
@@ -9,7 +9,7 @@
 }

 nav {
-  perspective: 200px;
+  perspective: 300px;
  perspective-origin: bottom;
 }