Skip to content

Commit

Permalink
HomepagePatient FrontEnd Added and some minor fixes on legal page
Browse files Browse the repository at this point in the history
  • Loading branch information
DDDrag0 committed Dec 28, 2023
1 parent 2898808 commit e8cbd6b
Show file tree
Hide file tree
Showing 7 changed files with 482 additions and 1 deletion.
229 changes: 229 additions & 0 deletions src/main/webapp/CSS/homepagepatient.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,229 @@
.container {
width: 100%;
max-width: 800px;
margin: 0 auto;
padding: 20px;
}

.margin20 {
margin-bottom: 4em;
}

.card {
display: flex;
flex-direction: column;
align-items: flex-direction;
gap: 16px;
padding: 20px;
position: relative;
flex: 0 0 auto;
background-color: #ffffff;
border-radius: 32px;
margin-right: 20px; /* Spazio tra i div */
}

.cards {
margin-top: 20px;
margin-bottom: 20px;
display: flex;
overflow-x: auto;
white-space: nowrap;
}

.card2 {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 16px;
padding: 20px;
position: relative;
flex: 0 0 auto;
background-color: #ffffff;
border-radius: 32px;
margin-right: 20px; /* Spazio tra i div */
}

.challenges .cards {
display: flex;
overflow-x: scroll;
}
.card .img {
position: absolute;
width: 105px;
height: 115px;
top: 4px;
left: 600px;
}









.frame-3 {
display: flex;
align-items: center;
gap: 16px;
position: relative;
align-self: stretch;
width: 100%;
flex: 0 0 auto;
}

.frame-4 {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: 8px;
position: relative;
flex: 1;
flex-grow: 1;
}

.frame-5 {
display: flex;
flex-direction: column;
align-items: flex-start;
position: relative;
align-self: stretch;
width: 100%;
flex: 0 0 auto;
}

.frame-7 {
display: flex;
width: 208px;
align-items: flex-start;
justify-content: space-between;
position: relative;
flex: 0 0 auto;
}

.illustration-wrapper {
display: flex;
align-items: center;
justify-content: center;
padding: 8px;
position: relative;
flex: 0 0 auto;
border-radius: 900px;
}

.illustration {
position: relative;
width: 40px;
height: 40px;
}

.img {
position: absolute;
width: 105px;
height: 115px;
top: 4px;
left: 260px;
}

.chapter {
position: relative;
width: fit-content;
margin-top: -1px;
font-family: Georgia, serif;
font-size: 2em;
white-space: nowrap;
}

.discovering-english {
position: relative;
align-self: stretch;
font-family: Georgia, serif;
color: #252526;
font-weight: 700;
font-size: 2em;
}

.button-2 {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 10px;
position: relative;
background-color: #199a8e;
border-radius: 9999px;

font-family: Georgia, serif;
color: #ffffff;
font-size: 2em;
white-space: nowrap;

box-sizing: border-box;
}






.navigation-title {
display: flex;
height: 32px;
align-items: baseline;
justify-content: space-between;
padding: 4px 0px;
position: relative;
}

.current-lesson {
position: relative;
width: fit-content;
margin-top: -1px;
font-family: Georgia, serif;
font-weight: 700;
color: #252526;
font-size: 2.5em;
text-align: center;
white-space: nowrap;
}

.buttons {
display: flex;
align-items: center;
justify-content: center;
position: relative;
background-color: #199a8e;
border-radius: 9999px;
border-width: 1px;
padding: 10px;

font-family: Georgia, serif;
color: #ffffff;
font-size: 2em;
white-space: nowrap;
}





.header {
font-family: Georgia, serif;
text-align: center;
color:#199a8e;
font-weight: 700;
font-size: 2.5em;
}

.notification{
float: right;
height: 1.3em;
}

.profile{
float: left;
height: 1.3em;
}

150 changes: 150 additions & 0 deletions src/main/webapp/JSP/homepagepatient.jsp
Original file line number Diff line number Diff line change
@@ -0,0 +1,150 @@
<!DOCTYPE html>
<html lang="it" style="background-color: #f7fcff; ">
<head>
<%@page contentType="text/html;charset=UTF-8"%>
<meta charset="utf-8" />
<link rel="stylesheet" href="../CSS/homepagepatient.css" />
</head>
<body>
<div class="container">
<div class="margin20">
<div class="card">
<div class="header">
<img class="profile" src="../images/homepagepatient/profile.svg">
Benvenuto Utente
<img class="notification" src="../images/homepagepatient/icon-notification.svg">
</div>
</div>
</div>
<div class="margin20">
<div class="navigation-title">
<div class="current-lesson">Esercizio Avviato</div>
<button class="buttons">Guarda Progressi</button>
</div>
</div>

<div class="margin20">
<div class="card">
<div class="frame-3"><div class="frame-4"><div class="frame-5"><div class="frame-7">
<div class="illustration-wrapper">
<img class="illustration" src="../images/homepagepatient/illustration-challenges-1.svg">
<img class="img" src="../images/homepagepatient/illustration-challenge-1.svg">
</div></div>
<div class="chapter">Tipo Esercizio</div>
<div class="discovering-english">Nome Esercizio</div>
</div></div></div>
<button class="button-2">Riprendi l’esercitazione</button>
</div>
</div>

<div class="margin20">
<div class="challenges">
<div class="margin20">
<div class="navigation-title">
<div class="current-lesson">Esercizi Raccomandati set 1</div>
<button class="buttons">Guarda tutti</button>
</div>
</div>


<div class="cards">

<div class="card2">
<div class="frame-3"><div class="frame-4"><div class="frame-5"><div class="frame-7">
<div class="illustration-wrapper">
<img class="illustration" src="../images/homepagepatient/illustration-challenges-1.svg">
<img class="img" src="../images/homepagepatient/illustration-challenge-1.svg">
</div></div>
<div class="chapter">Tipo Esercizio</div>
<div class="discovering-english">Nome Esercizio</div>
</div></div></div>
<button class="button-2">Comincia l'esercitazione</button>
</div>

<div class="card2">
<div class="frame-3"><div class="frame-4"><div class="frame-5"><div class="frame-7">
<div class="illustration-wrapper">
<img class="illustration" src="../images/homepagepatient/illustration-challenges-1.svg">
<img class="img" src="../images/homepagepatient/illustration-challenge-1.svg">
</div></div>
<div class="chapter">Tipo Esercizio</div>
<div class="discovering-english">Nome Esercizio</div>
</div></div></div>
<button class="button-2">Comincia l'esercitazione</button>
</div>

<div class="card2">
<div class="frame-3"><div class="frame-4"><div class="frame-5"><div class="frame-7">
<div class="illustration-wrapper">
<img class="illustration" src="../images/homepagepatient/illustration-challenges-1.svg">
<img class="img" src="../images/homepagepatient/illustration-challenge-1.svg">
</div></div>
<div class="chapter">Tipo Esercizio</div>
<div class="discovering-english">Nome Esercizio</div>
</div></div></div>
<button class="button-2">Comincia l'esercitazione</button>
</div>

</div>


</div>
</div>

<div class="margin20">
<div class="challenges">
<div class="margin20">
<div class="navigation-title">
<div class="current-lesson">Esercizi Raccomandati set 2</div>
<button class="buttons">Guarda tutti</button>
</div>
</div>


<div class="cards">

<div class="card2">
<div class="frame-3"><div class="frame-4"><div class="frame-5"><div class="frame-7">
<div class="illustration-wrapper">
<img class="illustration" src="../images/homepagepatient/illustration-challenges-1.svg">
<img class="img" src="../images/homepagepatient/illustration-challenge-1.svg">
</div></div>
<div class="chapter">Tipo Esercizio</div>
<div class="discovering-english">Nome Esercizio</div>
</div></div></div>
<button class="button-2">Comincia l'esercitazione</button>
</div>

<div class="card2">
<div class="frame-3"><div class="frame-4"><div class="frame-5"><div class="frame-7">
<div class="illustration-wrapper">
<img class="illustration" src="../images/homepagepatient/illustration-challenges-1.svg">
<img class="img" src="../images/homepagepatient/illustration-challenge-1.svg">
</div></div>
<div class="chapter">Tipo Esercizio</div>
<div class="discovering-english">Nome Esercizio</div>
</div></div></div>
<button class="button-2">Comincia l'esercitazione</button>
</div>

<div class="card2">
<div class="frame-3"><div class="frame-4"><div class="frame-5"><div class="frame-7">
<div class="illustration-wrapper">
<img class="illustration" src="../images/homepagepatient/illustration-challenges-1.svg">
<img class="img" src="../images/homepagepatient/illustration-challenge-1.svg">
</div></div>
<div class="chapter">Tipo Esercizio</div>
<div class="discovering-english">Nome Esercizio</div>
</div></div></div>
<button class="button-2">Comincia l'esercitazione</button>
</div>

</div>


</div>
</div>

</div>
</body>
</html>
1 change: 0 additions & 1 deletion src/main/webapp/JSP/legal.jsp
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
<!DOCTYPE html>
<html>
<html lang="it">
<head>
<%@page contentType="text/html;charset=UTF-8"%>
Expand Down
4 changes: 4 additions & 0 deletions src/main/webapp/images/homepagepatient/icon-notification.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit e8cbd6b

Please sign in to comment.