1
0
Fork 0

Adding contents (edt, home, marks)

This commit is contained in:
benoit.kezel@gmail.com 2020-11-02 12:12:39 +01:00
parent 439a91c021
commit 5faf9c868c
11 changed files with 637 additions and 52 deletions

6
app.js
View file

@ -9,6 +9,9 @@ let config = process.env.NODE_ENV === "test" ? {} : require("./config/config.jso
let indexRouter = require("./routes/index"); let indexRouter = require("./routes/index");
const loginRouter = require("./routes/login"); const loginRouter = require("./routes/login");
const edtRouter = require("./routes/edt");
const homeRouter = require("./routes/home");
const marksRouter = require("./routes/marks");
let app = express(); let app = express();
const sessionMiddleware = session({ const sessionMiddleware = session({
@ -40,6 +43,9 @@ app.use((req, res, next) => {
app.use("/", indexRouter); app.use("/", indexRouter);
app.use("/login", loginRouter); app.use("/login", loginRouter);
app.use("/edt", edtRouter);
app.use("/home", homeRouter);
app.use("/marks", marksRouter);
// catch 404 and forward to error handler // catch 404 and forward to error handler
app.use((req, res, next) => { app.use((req, res, next) => {

View file

@ -21,10 +21,6 @@ h2 {
margin-top: 15vh; margin-top: 15vh;
background-color: #2a2a2a; background-color: #2a2a2a;
border-radius: 2vw; } border-radius: 2vw; }
.signinup img {
width: 20%;
display: block;
margin: auto; }
.signinup form input { .signinup form input {
color: #e0e0e0; color: #e0e0e0;
margin-bottom: 4vh; margin-bottom: 4vh;
@ -74,13 +70,15 @@ i {
#navtop ul li.active a { #navtop ul li.active a {
color: black; } color: black; }
#navtop ul li { #navtop ul li {
padding: 1.3vw;
border-top: 1px solid #101010; border-top: 1px solid #101010;
background: linear-gradient(to right, #2a2a2a 50%, #00c0ff 50%) left; background: linear-gradient(to right, #2a2a2a 50%, #00c0ff 50%) left;
background-size: 200%; background-size: 200%;
transition: .3s ease-out; } transition: .3s ease-out; }
#navtop ul li a { #navtop ul li a {
padding: 1.3vw;
color: #C5C6C7; color: #C5C6C7;
display: block;
width: 100%;
transition-duration: 0.3s; } transition-duration: 0.3s; }
#navtop ul li:hover { #navtop ul li:hover {
background-position: right; background-position: right;
@ -90,19 +88,178 @@ i {
#navprofile { #navprofile {
font-size: 25px; font-size: 25px;
padding-top: 4vh; padding-top: 1vh;
padding-bottom: 4vh; padding-bottom: 1vh;
margin: 0; } margin: 0;
#navprofile img { background: radial-gradient(circle, #014f74 20%, #0f0f63 100%);
width: 100%; text-align: center; }
display: block;
margin: auto;
padding: 0.5vw; }
#navprofile p { #navprofile p {
margin-top: 1vh; margin-top: 1vh;
margin-bottom: 0; } margin-bottom: 0; }
#navprofile a {
cursor: pointer; }
#page { #page {
margin: 0; } margin: 0; }
#edtjour .edtflex {
display: flex;
flex-direction: column; }
#edtjour .edtflex div:last-child {
border: none; }
#edtjour .edtflex div {
text-align: center;
font-size: 20px;
background-color: #2a2a2a;
padding: 0 10px;
border-bottom: 2px solid #a1a1a1; }
#edtjour .edtflex .edthead {
border: none;
font-size: 30px;
background-color: #0099ff; }
#edtjour .edtflex .edtmidi {
height: 100px;
background-color: #1f1f1f; }
#filactu .actuflex {
background-color: #1f1f1f;
padding: 0;
height: 700px;
display: flex;
flex-direction: column; }
#filactu .actuflex div:last-child {
border: none; }
#filactu .actuflex .actucontent {
overflow-y: scroll;
padding: 0;
height: 700px;
cursor: auto; }
#filactu .actuflex .actucontent div:hover {
background-color: #686868; }
#filactu .actuflex div {
text-align: left;
cursor: pointer;
font-size: 20px;
background-color: #2a2a2a;
padding: 0 10px;
border-bottom: 2px solid #a1a1a1; }
#filactu .actuflex p {
margin: 0;
padding: 10px; }
#filactu .actuflex .actuhead {
border: none;
cursor: auto;
font-size: 30px;
background-color: #0099ff;
text-align: center; }
#filactu .actuflex .actuhead p {
padding: 30px; }
#filactu .actuflex .actuhead:hover {
background-color: #0099ff; }
#welcome {
padding-bottom: 20px; }
h3 {
font-size: 30px;
text-align: center; }
#edttable {
margin-top: 100px;
border-collapse: collapse;
border: 1px solid white;
width: 90%;
margin-left: auto;
margin-right: auto; }
#edttable .midi td {
height: 109px; }
#edttable th {
background-color: #0099ff;
text-align: center;
border-radius: 0;
border: 1px solid white;
font-size: 25px; }
#edttable tr td:first-child {
border-left: 1px solid white; }
#edttable tr td:last-child {
border-right: 1px solid white; }
#edttable tr:last-child td {
border-bottom: 1px solid white; }
#edttable td {
text-align: center;
font-size: 20px;
background-color: #686868;
padding: 0;
border-radius: 0;
border: 1px solid black; }
#edttable td:nth-child(even) {
background-color: #2a2a2a; }
#edtweek i {
cursor: pointer; }
#edtweek div:nth-child(1) {
text-align: right; }
#edtweek div:nth-child(3) {
text-align: left; }
#marks table {
border: 1px solid white;
margin-top: 80px;
width: 80%;
margin-left: auto;
margin-right: auto;
table-layout: fixed;
border-collapse: collapse; }
#marks table tbody {
display: block;
height: 270px;
overflow: auto; }
#marks table thead, #marks table tbody tr {
display: table;
width: 100%;
table-layout: fixed; }
#marks table th {
border: 1px solid white;
background-color: #0099ff;
text-align: center;
font-size: 30px; }
#marks table td {
font-size: 25px;
padding: 0;
text-align: center;
background-color: #2a2a2a;
border-radius: 0;
border: 1px solid #686868; }
.marksdetails {
display: none;
z-index: 1;
position: fixed;
left: 40%;
top: 20%;
width: 30%; }
.marksdetails table {
border-collapse: collapse;
border: 1px solid white; }
.marksdetails th {
text-align: center;
font-size: 25px;
border: 1px solid white;
background-color: #0099ff; }
.marksdetails td {
text-align: center;
background-color: #2a2a2a;
border: none;
font-size: 25px; }
.marksdetails tr:last-child td {
border-bottom: 1px solid white; }
div#visible {
display: block; }
div#visible + div {
filter: blur(4px); }
/*# sourceMappingURL=style.css.map */ /*# sourceMappingURL=style.css.map */

File diff suppressed because one or more lines are too long

View file

@ -2,11 +2,12 @@ $primary: #00c0ff;
$secondary: #0099ff; $secondary: #0099ff;
$dark1: #101010; $dark1: #101010;
$dark2: #2a2a2a; $dark2: #2a2a2a;
$dark3: #1f1f1f;
$medium: #686868;
$light: #e0e0e0; $light: #e0e0e0;
$light2: #C5C6C7; $light2: #C5C6C7;
$light3: #a1a1a1; $light3: #a1a1a1;
body body
padding: 50px padding: 50px
font: 14px "Lucida Grande", Helvetica, Arial, sans-serif font: 14px "Lucida Grande", Helvetica, Arial, sans-serif
@ -30,11 +31,6 @@ h2
margin-top: 15vh; margin-top: 15vh;
background-color: $dark2; background-color: $dark2;
border-radius: 2vw; border-radius: 2vw;
img
width: 20%;
display: block;
margin: auto;
form form
input input
color: $light; color: $light;
@ -85,14 +81,16 @@ i
a a
color: black; color: black;
li li
padding: 1.3vw;
border-top: 1px solid $dark1; border-top: 1px solid $dark1;
background: linear-gradient(to right, $dark2 50%, $primary 50%) left; background: linear-gradient(to right, $dark2 50%, $primary 50%) left;
background-size: 200%; background-size: 200%;
transition: .3s ease-out; transition: .3s ease-out;
a a
padding: 1.3vw;
color: $light2; color: $light2;
display: block;
width: 100%;
transition-duration: 0.3s; transition-duration: 0.3s;
li:hover li:hover
background-position: right; background-position: right;
@ -102,20 +100,185 @@ i
#navprofile #navprofile
font-size: 25px; font-size: 25px;
padding-top: 4vh; padding-top: 1vh;
padding-bottom: 4vh; padding-bottom: 1vh;
margin: 0; margin: 0;
background: radial-gradient(circle, rgb(1, 79, 116) 20%, rgb(15, 15, 99) 100%);
img text-align: center;
width: 100%;
display: block;
margin: auto;
padding: 0.5vw;
p p
margin-top: 1vh; margin-top: 1vh;
margin-bottom: 0; margin-bottom: 0;
a
cursor: pointer;
#page #page
margin: 0; margin: 0;
#edtjour
.edtflex
display: flex;
flex-direction: column;
div:last-child
border: none;
div
text-align: center;
font-size: 20px;
background-color: $dark2;
padding: 0 10px;
border-bottom: 2px solid $light3;
.edthead
border: none;
font-size: 30px;
background-color: $secondary;
.edtmidi
height: 100px;
background-color: $dark3;
#filactu
.actuflex
background-color: $dark3;
padding: 0;
height: 700px;
display: flex;
flex-direction: column;
div:last-child
border: none;
.actucontent
overflow-y: scroll;
padding: 0;
height: 700px;
cursor: auto;
div:hover
background-color: $medium;
div
text-align: left;
cursor: pointer;
font-size: 20px;
background-color: $dark2;
padding: 0 10px;
border-bottom: 2px solid $light3;
p
margin: 0;
padding: 10px;
.actuhead
border: none;
cursor: auto;
font-size: 30px;
background-color: $secondary;
text-align: center;
p
padding: 30px;
.actuhead:hover
background-color: $secondary;
#welcome
padding-bottom: 20px;
h3
font-size: 30px;
text-align: center;
#edttable
margin-top: 100px;
border-collapse: collapse;
border: 1px solid white;
width: 90%;
margin-left: auto;
margin-right: auto;
.midi
td
height: 109px;
th
background-color: $secondary;
text-align: center;
border-radius: 0;
border: 1px solid white;
font-size: 25px;
tr
td:first-child
border-left: 1px solid white;
td:last-child
border-right: 1px solid white;
tr:last-child
td
border-bottom: 1px solid white;
td
text-align: center;
font-size: 20px;
background-color: $medium;
padding: 0;
border-radius: 0;
border: 1px solid black;
td:nth-child(even)
background-color: $dark2;
#edtweek
i
cursor: pointer;
div:nth-child(1)
text-align: right;
div:nth-child(3)
text-align: left;
#marks
table
border: 1px solid white;
margin-top: 80px;
width: 80%;
margin-left: auto;
margin-right: auto;
table-layout: fixed;
border-collapse: collapse;
tbody
display: block;
height: 270px;
overflow: auto;
thead, tbody tr
display: table;
width: 100%;
table-layout: fixed;
th
border: 1px solid white;
background-color: $secondary;
text-align: center;
font-size: 30px;
td
font-size: 25px;
padding: 0;
text-align: center;
background-color: $dark2;
border-radius: 0;
border: 1px solid $medium;
.marksdetails
display: none;
z-index: 1;
position: fixed;
left: 40%
top: 20%;
width: 30%;
table
border-collapse: collapse;
border: 1px solid white;
th
text-align: center;
font-size: 25px;
border: 1px solid white;
background-color: $secondary;
td
text-align: center;
background-color: $dark2;
border: none;
font-size: 25px;
tr:last-child
td
border-bottom: 1px solid white;
div#visible
display: block;
div#visible + div
filter: blur(4px);

8
routes/edt.js Normal file
View file

@ -0,0 +1,8 @@
let express = require("express");
let router = express.Router();
router.get("/", (req, res) => {
res.render("edt", { title: "L'ETU" });
});
module.exports = router;

9
routes/home.js Normal file
View file

@ -0,0 +1,9 @@
let express = require("express");
let router = express.Router();
/* GET home page. */
router.get("/", (req, res) => {
res.render("home", { title: "L'ETU" });
});
module.exports = router;

8
routes/marks.js Normal file
View file

@ -0,0 +1,8 @@
let express = require("express");
let router = express.Router();
router.get("/", (req, res) => {
res.render("marks", { title: "L'ETU" });
});
module.exports = router;

84
views/edt.pug Normal file
View file

@ -0,0 +1,84 @@
table(id="edttable")
tr
th Monday
th Tuesday
th Wednesday
th Thursday
th Friday
tr
td
p Maths
p S26
td
p Maths
p S26
td
p Maths
p S26
td
p Maths
p S26
td
p Maths
p S26
tr
td
p Maths
p S26
td
p Maths
p S26
td
p Maths
p S26
td
p Maths
p S26
td
p Maths
p S26
tr(class="midi")
td
td
td
td
td
tr
td
p Maths
p S26
td
p Maths
p S26
td
p Maths
p S26
td
p Maths
p S26
td
p Maths
p S26
tr
td
p Maths
p S26
td
p Maths
p S26
td
p Maths
p S26
td
p Maths
p S26
td
p Maths
p S26
div(class="row" id="edtweek")
div(class="col s3 offset-s1")
i(class="large material-icons") fast_rewind
div(class="col s4")
h3 Week of the 02/11/2020
div(class="col s3")
i(class="large material-icons") fast_forward

40
views/home.pug Normal file
View file

@ -0,0 +1,40 @@
extends index
block home
h1(id="welcome") Welcome Back Benoit !
div(class="row home")
if admin === false
div(class="col s12 m6" id="filactu")
div(class="col s10 offset-s1 actuflex")
div(class="actuhead")
p Fil d'actualité
div(class="actucontent")
div
p Nouvelle note :
p 18/20 Anglais
div
p Maths
p S26
div
p Maths
p S26
div
p Maths
p S26
div(class="col s12 m6" id="edtjour")
div(class="col s10 offset-s1 edtflex")
div(class="edthead")
p EDT du jour
div
p Maths
p S26
div
p Maths
p S26
div(class="edtmidi")
div
p Maths
p S26
div
p Maths
p S26

View file

@ -1,32 +1,142 @@
extends layout extends layout
block content block content
- var student = true
- var teacher = false
- var admin = false
div(class="row" id="page") div(class="row" id="page")
div(class="col s2" id="panel")
div(class="col m2" id="panel") div(id="navprofile")
div(class="row" id="navprofile")
div(class="col s4")
img(src="images/avatar-bk.png")
div(class="col s8")
p Kezel Benoit p Kezel Benoit
p G4S3 p G4S3
a Logout
div(id="navtop") div(id="navtop")
ul ul
if student === true
li
a Home
li
a Planning
li(class="active")
a Marks
li
a(href="https://mail.univ-lyon1.fr/owa/") Mail
li
a(href="https://clarolineconnect.univ-lyon1.fr/") Claroline
li
a School and student life
if admin === true
li(class="active") li(class="active")
a Accueil a Accueil
li
a Emploi du temps
li li
a Notes a Notes
li
a Mail
li
a Claroline
li li
a Vie scolaire et étudiante a Vie scolaire et étudiante
li
a Gestion des profils
div(class="col s10 main") div(class="col s10 main")
h1 Welcome Back Benoit ! div(class="marksdetails")
div(class="home") table
tr
th(colspan="2") Details
tr
td DS 1
tr
td Rang : 10/29
tr
td Coeff : 1.5
tr
td Moyenne de classe : 12
div(class="row" id="marks")
div(class="col s12 m6 l4")
table
thead
tr
th(colspan="2") Maths
tbody
tr
td
p DS 1
p 18/20
td
p DS 2
p 16/20
tr
td
p DS 1
p 18/20
td
p DS 2
p 16/20
tr
td
p DS 1
p 18/20
td
p DS 2
p 16/20
div(class="col s12 m6 l4")
table
thead
tr
th(colspan="2") TP SE
tbody
tr
td
p DS 1
p 18/20
td
p DS 2
p 16/20
tr
td
p DS 1
p 18/20
td
p DS 2
p 16/20
div(class="col s12 m6 l4")
table
thead
tr
th(colspan="2") PHP
tbody
tr
td
p DS 1
p 18/20
td
p DS 2
p 16/20
tr
td
p DS 1
p 18/20
td
p DS 2
p 16/20
div(class="col s12 m6 l4")
table
thead
tr
th(colspan="2") Anglais
tbody
tr
td
p DS 1
p 18/20
td
p DS 2
p 16/20
tr
td
p DS 1
p 18/20
td
p DS 2
p 16/20

0
views/marks.pug Normal file
View file