Skip to content
Snippets Groups Projects
Commit 6db6102d authored by noe.le-cam@etu.unistra.fr's avatar noe.le-cam@etu.unistra.fr
Browse files

Finalized main page global layout

parent 84311945
Branches
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 457 additions and 42 deletions
.vscode/settings.json 0 → 100644
+ 3
− 0
View file @ 6db6102d
{
"cSpell.enabled": false
}
\ No newline at end of file
images/bg-classroom.jpg
+ 0
− 0
View replaced file @ 84311945 View file @ 6db6102d
images/bg-classroom.jpg

78.5 KiB | W: | H:

images/bg-classroom.jpg

369 KiB | W: | H:

images/bg-classroom.jpg
images/bg-classroom.jpg
images/bg-classroom.jpg
images/bg-classroom.jpg
  • 2-up
  • Swipe
  • Onion skin
images/icons/cz-flag.svg 0 → 100644
+ 94
− 0
View file @ 6db6102d
<?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>
images/icons/dropdown-arrow.svg 0 → 100644
+ 4
− 0
View file @ 6db6102d
<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>
images/icons/en-flag.svg 0 → 100644
+ 112
− 0
View file @ 6db6102d
<?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>
images/icons/fr-flag.svg 0 → 100644
+ 97
− 0
View file @ 6db6102d
<?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>
index.php
+ 21
− 15
View file @ 6db6102d
......@@ -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>
......
php/nav.php
+ 5
− 4
View file @ 6db6102d
<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>
styles/form.css
+ 72
− 0
View file @ 6db6102d
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;
}
styles/main.css
+ 19
− 8
View file @ 6db6102d
: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,
......
styles/navbar.css
+ 30
− 15
View file @ 6db6102d
#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
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment