diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000000000000000000000000000000000000..4ec39be75c9e1741af728f106fb3b6d2fbb4a4da
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+ "cSpell.enabled": false
+}
\ No newline at end of file
diff --git a/images/bg-classroom.jpg b/images/bg-classroom.jpg
index 3f633c268b97f934a98859dabc611ba9a571fc67..468624a16cce10caf75c1d749515a619f61a8fbf 100644
Binary files a/images/bg-classroom.jpg and b/images/bg-classroom.jpg differ
diff --git a/images/icons/cz-flag.svg b/images/icons/cz-flag.svg
new file mode 100644
index 0000000000000000000000000000000000000000..389b46834d54662252266293968a54d85864cff4
--- /dev/null
+++ b/images/icons/cz-flag.svg
@@ -0,0 +1,94 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+
+<svg
+ version="1.1"
+ id="Layer_1"
+ x="0px"
+ y="0px"
+ viewBox="0 0 512 512"
+ style="enable-background:new 0 0 512 512;"
+ xml:space="preserve"
+ sodipodi:docname="cz-flag.svg"
+ inkscape:version="1.1.2 (0a00cf5339, 2022-02-04)"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:svg="http://www.w3.org/2000/svg"><defs
+ id="defs41" /><sodipodi:namedview
+ id="namedview39"
+ pagecolor="#505050"
+ bordercolor="#eeeeee"
+ borderopacity="1"
+ inkscape:pageshadow="0"
+ inkscape:pageopacity="0"
+ inkscape:pagecheckerboard="0"
+ showgrid="false"
+ inkscape:zoom="0.49649392"
+ inkscape:cx="-365.56339"
+ inkscape:cy="455.19188"
+ inkscape:window-width="1920"
+ inkscape:window-height="1011"
+ inkscape:window-x="0"
+ inkscape:window-y="32"
+ inkscape:window-maximized="1"
+ inkscape:current-layer="g5683" />
+
+
+<g
+ id="g5683"><path
+ style="fill:#237bff;fill-opacity:1"
+ d="M13.7,97.251C5.326,104.286,0,114.829,0,126.621V385.38c0,11.791,5.326,22.335,13.7,29.369L256,256 L13.7,97.251z"
+ id="path2" /><path
+ style="fill:#ff1f3e;fill-opacity:1"
+ d="M13.7,414.749c6.665,5.599,15.258,8.975,24.644,8.975h435.31c21.177,0,38.345-17.167,38.345-38.345 V256H256L13.7,414.749z"
+ id="path4" /><path
+ style="fill:#ffffff;fill-opacity:1"
+ d="M473.655,88.276H38.345c-9.386,0-17.98,3.378-24.644,8.975L256,256h256V126.621 C512,105.443,494.833,88.276,473.655,88.276z"
+ id="path6" /></g>
+<g
+ id="g8">
+</g>
+<g
+ id="g10">
+</g>
+<g
+ id="g12">
+</g>
+<g
+ id="g14">
+</g>
+<g
+ id="g16">
+</g>
+<g
+ id="g18">
+</g>
+<g
+ id="g20">
+</g>
+<g
+ id="g22">
+</g>
+<g
+ id="g24">
+</g>
+<g
+ id="g26">
+</g>
+<g
+ id="g28">
+</g>
+<g
+ id="g30">
+</g>
+<g
+ id="g32">
+</g>
+<g
+ id="g34">
+</g>
+<g
+ id="g36">
+</g>
+</svg>
diff --git a/images/icons/dropdown-arrow.svg b/images/icons/dropdown-arrow.svg
new file mode 100644
index 0000000000000000000000000000000000000000..358bde028d0c4e8fe8587e24f71ea8a6cf10069b
--- /dev/null
+++ b/images/icons/dropdown-arrow.svg
@@ -0,0 +1,4 @@
+<svg width="26" height="18" viewBox="0 0 26 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="26" height="18" rx="9" fill="#303030" fill-opacity="0.28"/>
+<path d="M9 8L13 11L17 8" stroke="white" stroke-width="2" stroke-linecap="square"/>
+</svg>
diff --git a/images/icons/en-flag.svg b/images/icons/en-flag.svg
new file mode 100644
index 0000000000000000000000000000000000000000..360ecaae247c559b8339b394b1b8ba343b4440d5
--- /dev/null
+++ b/images/icons/en-flag.svg
@@ -0,0 +1,112 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+
+<svg
+ version="1.1"
+ id="Layer_1"
+ x="0px"
+ y="0px"
+ viewBox="0 0 512 512"
+ style="enable-background:new 0 0 512 512;"
+ xml:space="preserve"
+ sodipodi:docname="en-flag.svg"
+ inkscape:version="1.1.2 (0a00cf5339, 2022-02-04)"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:svg="http://www.w3.org/2000/svg"><defs
+ id="defs51" /><sodipodi:namedview
+ id="namedview49"
+ pagecolor="#505050"
+ bordercolor="#eeeeee"
+ borderopacity="1"
+ inkscape:pageshadow="0"
+ inkscape:pageopacity="0"
+ inkscape:pagecheckerboard="0"
+ showgrid="false"
+ inkscape:zoom="0.99298784"
+ inkscape:cx="152.56984"
+ inkscape:cy="228.603"
+ inkscape:window-width="1920"
+ inkscape:window-height="1011"
+ inkscape:window-x="0"
+ inkscape:window-y="32"
+ inkscape:window-maximized="1"
+ inkscape:current-layer="Layer_1" />
+<path
+ style="fill:#237bff;fill-opacity:1"
+ d="M473.655,88.276H38.345C17.167,88.276,0,105.443,0,126.621V385.38 c0,21.177,17.167,38.345,38.345,38.345h435.31c21.177,0,38.345-17.167,38.345-38.345V126.621 C512,105.443,494.833,88.276,473.655,88.276z"
+ id="path2" />
+<path
+ style="fill:#ffffff;fill-opacity:1"
+ d="M511.469,120.282c-3.022-18.159-18.797-32.007-37.814-32.007h-9.977l-163.54,107.147V88.276h-88.276 v107.147L48.322,88.276h-9.977c-19.017,0-34.792,13.847-37.814,32.007l139.778,91.58H0v88.276h140.309L0.531,391.717 c3.022,18.159,18.797,32.007,37.814,32.007h9.977l163.54-107.147v107.147h88.276V316.577l163.54,107.147h9.977 c19.017,0,34.792-13.847,37.814-32.007l-139.778-91.58H512v-88.276H371.691L511.469,120.282z"
+ id="path4" />
+<g
+ id="g16">
+ <polygon
+ style="fill:#ff1531;fill-opacity:1"
+ points="282.483,88.276 229.517,88.276 229.517,229.517 0,229.517 0,282.483 229.517,282.483 229.517,423.724 282.483,423.724 282.483,282.483 512,282.483 512,229.517 282.483,229.517 "
+ id="polygon6" />
+ <path
+ style="fill:#ff1531;fill-opacity:1"
+ d="M24.793,421.252l186.583-121.114h-32.428L9.224,410.31 C13.377,415.157,18.714,418.955,24.793,421.252z"
+ id="path8" />
+ <path
+ style="fill:#ff1531;fill-opacity:1"
+ d="M346.388,300.138H313.96l180.716,117.305c5.057-3.321,9.277-7.807,12.287-13.075L346.388,300.138z"
+ id="path10" />
+ <path
+ style="fill:#ff1531;fill-opacity:1"
+ d="M4.049,109.475l157.73,102.387h32.428L15.475,95.842C10.676,99.414,6.749,104.084,4.049,109.475z"
+ id="path12" />
+ <path
+ style="fill:#ff1531;fill-opacity:1"
+ d="M332.566,211.862l170.035-110.375c-4.199-4.831-9.578-8.607-15.699-10.86L300.138,211.862H332.566z"
+ id="path14" />
+</g>
+<g
+ id="g18">
+</g>
+<g
+ id="g20">
+</g>
+<g
+ id="g22">
+</g>
+<g
+ id="g24">
+</g>
+<g
+ id="g26">
+</g>
+<g
+ id="g28">
+</g>
+<g
+ id="g30">
+</g>
+<g
+ id="g32">
+</g>
+<g
+ id="g34">
+</g>
+<g
+ id="g36">
+</g>
+<g
+ id="g38">
+</g>
+<g
+ id="g40">
+</g>
+<g
+ id="g42">
+</g>
+<g
+ id="g44">
+</g>
+<g
+ id="g46">
+</g>
+</svg>
diff --git a/images/icons/fr-flag.svg b/images/icons/fr-flag.svg
new file mode 100644
index 0000000000000000000000000000000000000000..908b787b528f9cd9ff72483b85e8d4cca470ec5a
--- /dev/null
+++ b/images/icons/fr-flag.svg
@@ -0,0 +1,97 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+
+<svg
+ version="1.1"
+ id="Layer_1"
+ x="0px"
+ y="0px"
+ viewBox="0 0 512 512"
+ style="enable-background:new 0 0 512 512;"
+ xml:space="preserve"
+ sodipodi:docname="fr-flag.svg"
+ inkscape:version="1.1.2 (0a00cf5339, 2022-02-04)"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:svg="http://www.w3.org/2000/svg"><defs
+ id="defs41" /><sodipodi:namedview
+ id="namedview39"
+ pagecolor="#505050"
+ bordercolor="#eeeeee"
+ borderopacity="1"
+ inkscape:pageshadow="0"
+ inkscape:pageopacity="0"
+ inkscape:pagecheckerboard="0"
+ showgrid="false"
+ inkscape:zoom="0.70214844"
+ inkscape:cx="489.2128"
+ inkscape:cy="168.05563"
+ inkscape:window-width="1920"
+ inkscape:window-height="1043"
+ inkscape:window-x="1920"
+ inkscape:window-y="0"
+ inkscape:window-maximized="1"
+ inkscape:current-layer="Layer_1" />
+
+
+<g
+ id="g27183"><path
+ style="fill:#044cfc;fill-opacity:1"
+ d="M38.345,88.273C17.167,88.273,0,105.44,0,126.618v258.759c0,21.177,17.167,38.345,38.345,38.345 h132.322V88.273H38.345z"
+ id="path2" /><rect
+ x="170.67"
+ y="88.277"
+ style="fill:#ffffff;fill-opacity:1"
+ width="170.67"
+ height="335.45"
+ id="rect4" /><path
+ style="fill:#ff1531;fill-opacity:1"
+ d="M473.655,88.273H341.333v335.448h132.322c21.177,0,38.345-17.167,38.345-38.345V126.618 C512,105.44,494.833,88.273,473.655,88.273z"
+ id="path6" /></g>
+<g
+ id="g8">
+</g>
+<g
+ id="g10">
+</g>
+<g
+ id="g12">
+</g>
+<g
+ id="g14">
+</g>
+<g
+ id="g16">
+</g>
+<g
+ id="g18">
+</g>
+<g
+ id="g20">
+</g>
+<g
+ id="g22">
+</g>
+<g
+ id="g24">
+</g>
+<g
+ id="g26">
+</g>
+<g
+ id="g28">
+</g>
+<g
+ id="g30">
+</g>
+<g
+ id="g32">
+</g>
+<g
+ id="g34">
+</g>
+<g
+ id="g36">
+</g>
+</svg>
diff --git a/index.php b/index.php
index 54e748804406c919a058e628880aeab144744830..e37a057485406936eb89d4a378def9b1d9720634 100644
--- a/index.php
+++ b/index.php
@@ -19,21 +19,27 @@
</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>
+ <label>Date
+ <input type="date" name="date" required>
+ </label>
+ <fieldset>
+ <label>Début plage horaire
+ <input type="time" name="start_time" required>
+ </label>
+ <label for="end_time">Fin plage horaire
+ <input type="time" name="end_time" required>
+ </label>
+ </fieldset>
+
+ <label>Type de salle
+ <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>
+ </label>
+
+ <button>Trouver une salle</button>
</form>
</main>
diff --git a/php/nav.php b/php/nav.php
index 2c2d641195a4e1d3721bcac3ed59e78bcdb8be3e..4c2e17ff2dc0b38a38baecdbb4ec5939b5af667d 100644
--- a/php/nav.php
+++ b/php/nav.php
@@ -1,8 +1,8 @@
<div id="menu-area">
<ul>
- <li><a>FR</a></li>
- <li><a>EN</a></li>
- <li><a>CZ</a></li>
+ <li><a><img src="./images/icons/fr-flag.svg" alt="french flag"></a></li>
+ <li><a><img src="./images/icons/en-flag.svg" alt="british flag"></a></li>
+ <li><a><img src="./images/icons/cz-flag.svg" alt="czech flag"></a></li>
</ul>
<button>
<i class="material-icons">translate</i>
@@ -19,4 +19,5 @@
<span>Menu</span>
</button>
</nav>
-</div>
\ No newline at end of file
+</div>
+
diff --git a/styles/form.css b/styles/form.css
index 301674ece54322250c0ba19b29d6c108da7d5d80..55df8279a113f067ba9288e9c621d2ecbe950e1a 100644
--- a/styles/form.css
+++ b/styles/form.css
@@ -1,4 +1,76 @@
main > form {
display: flex;
flex-direction: column;
+ gap: 0.5rem;
+
+ background: var(--smoke);
+ border: 1px solid rgba(255, 255, 255, 0.1);
+ box-shadow: 0 0 20px rgb(0, 0, 0, 0.5);
+ box-sizing: border-box;
+ width: 28rem;
+ padding: 1.5rem;
+ border-radius: 10px;
+}
+
+label {
+ font-size: 0.9rem;
+ font-weight: 300;
+ opacity: 0.8;
+ text-indent: 2px;
+}
+
+fieldset {
+ display: flex;
+ flex-direction: row;
+ flex: 1 1 0px;
+ padding: 0;
+ border: none;
+ gap: 0.5rem;
+}
+
+fieldset label {
+ flex: 1;
+}
+
+input,
+select {
+ background: #101010;
+ border: 1px solid #303030;
+
+ text-align: center;
+ font-size: 1rem;
+ box-sizing: border-box;
+ height: 3rem;
+ width: 100%;
+ border-radius: 5px;
+ margin-top: 0.2rem;
+
+ transition: box-shadow 0.3s, border-color 0.1s;
+
+ -webkit-appearance:none;
+ -moz-appearance:none;
+ appearance:none;
+
+ cursor: text;
+}
+
+input:hover {
+ box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.5);
+}
+
+input:focus, select:focus{
+ outline: none;
+ border-color: var(--marblue);
+}
+
+select {
+ cursor: pointer;
+ background-image: url("../images/icons/dropdown-arrow.svg");
+ background-position: calc(100% - 0.75rem) center;
+ background-repeat: no-repeat;
+}
+
+
+form button {
+ margin-top: 1rem;
}
diff --git a/styles/main.css b/styles/main.css
index e41ed42dc52619692a71897282e6117d1b5f0a3f..ba8d0e2abe10d86045cfb3dceb1e4528ab588b72 100644
--- a/styles/main.css
+++ b/styles/main.css
@@ -1,3 +1,10 @@
+:root {
+ --marblue: #3763ff;
+ --smoke: rgba(30, 30, 30, 0.9);
+ --fog: rgba(77, 77, 77, 0.55);
+}
+
+
* {
font-family: "Roboto", sans-serif;
color: white;
@@ -6,40 +13,44 @@
body {
background: url("../images/bg-classroom.jpg");
- background-size: cover 100vh;
+ background-size: cover;
background-repeat: no-repeat;
}
main {
height: 100vh;
width: 100vw;
- background: rgba(0, 0, 0, 0.5);
+ background: rgba(0, 0, 0, 0.9);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
+ gap: 1rem;
}
header * {
font-family: 'Roboto Mono', sans-serif;
}
-h1 {
- font-size: 4rem;
- font-weight: bold;
+header > h1 {
letter-spacing: 0.5em;
+ text-align: center;
+ font-size: 4rem;
+ font-weight: 700;
+ padding-left: 1.5rem;
}
header > p {
font-weight: 300;
+ opacity: 0.8;
letter-spacing: -0.05em;
+ padding-left: 1.5rem;
}
button {
/* Style */
- color: white;
- background: #3763ff;
+ background: var(--marblue);
border: none;
border-radius: 5px;
font-weight: 500;
@@ -52,7 +63,7 @@ button {
padding-right: auto;
/* Transition */
- transition: background 0.2s;
+ transition: filter 0.2s, background 0.2s;
}
button > span,
diff --git a/styles/navbar.css b/styles/navbar.css
index 76928dfa2628d892f9a37d0cd098c7dafb868488..ee7f08ea5ea46d6c00148ac43c3adb5254565f34 100644
--- a/styles/navbar.css
+++ b/styles/navbar.css
@@ -1,4 +1,3 @@
-
#menu-area {
position: fixed;
bottom: 1rem;
@@ -9,7 +8,7 @@
}
nav {
- perspective: 300px;
+ perspective: 400px;
perspective-origin: bottom;
}
@@ -17,7 +16,7 @@ nav {
/* Style */
list-style-type: none;
color: white;
- background: rgba(34, 34, 34, 0.8);
+ background: var(--fog);
border-radius: 10px;
}
@@ -33,7 +32,7 @@ nav > ul {
transform: rotateX(15deg) translateZ(-2rem) translateY(-1rem);
/* Transition */
- transition-duration: .3s;
+ transition-duration: 0.3s;
transition-property: visibility transform opacity max-height;
transition-delay: 0.3s 0s 0s 0s;
}
@@ -54,17 +53,20 @@ nav > ul > li:not(:last-child) {
margin-bottom: 0.8rem;
}
-nav > button, #menu-area > button {
+nav > button,
+#menu-area > button {
border-radius: 10px;
- background: #4d4d4d85;
+ background: var(--fog);
}
-nav > button:hover, #menu-area > button:hover {
- background: #3763ff;
+nav > button:hover,
+#menu-area > button:hover {
+ background: var(--marblue);
}
#menu-area > button {
width: 3rem;
+ height: 3rem;
}
#menu-area > button > i {
@@ -72,7 +74,7 @@ nav > button:hover, #menu-area > button:hover {
}
#menu-area {
- perspective: 200px;
+ perspective: 400px;
perspective-origin: bottom;
}
@@ -81,12 +83,11 @@ nav > button:hover, #menu-area > button:hover {
padding-left: 1em;
padding-right: 1em;
height: 3rem;
-
+
/* Layout */
display: flex;
- align-items: center;
- align-content: center;
- gap: 0.5rem;
+ align-items: stretch;
+ gap: 1rem;
/* Display */
visibility: hidden;
@@ -94,13 +95,27 @@ nav > button:hover, #menu-area > button:hover {
transform: rotateY(-15deg) translateZ(-2rem) translateX(-1rem);
/* Transition */
- transition-duration: .3s;
+ transition-duration: 0.3s;
transition-property: visibility transform opacity max-height;
transition-delay: 0.3s 0s 0s 0s;
}
+#menu-area > ul a {
+ display: block;
+ height: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ cursor: pointer;
+}
+
+#menu-area > ul img {
+ height: 2rem;
+ border-radius: 3px;
+}
+
#menu-area > ul.shown {
transform: none;
opacity: 1;
visibility: visible;
-}
\ No newline at end of file
+}