From a541ba929ae88ce0306007cda342983bf3e054d3 Mon Sep 17 00:00:00 2001 From: kmitresse Date: Fri, 5 Apr 2024 18:00:33 +0200 Subject: [PATCH] feat: dev-web - begin front --- .../uppa/project/servlet/IndexServlet.java | 33 ++++++++++ .../main/webapp/WEB-INF/components/navbar.jsp | 18 +++--- .../src/main/webapp/WEB-INF/views/index.jsp | 28 +++++++++ .../src/main/webapp/WEB-INF/views/login.jsp | 37 +++++------ .../main/webapp/WEB-INF/views/main-menu.jsp | 10 +-- .../main/webapp/WEB-INF/views/register.jsp | 11 ++-- .../src/main/webapp/static/css/global.css | 39 ++++++++++++ .../src/main/webapp/static/css/index.css | 56 +++++++++++++++++ .../src/main/webapp/static/css/login.css | 62 ++++++++----------- .../src/main/webapp/static/css/main-menu.css | 41 ++++++++++++ .../src/main/webapp/static/css/modal.css | 12 ---- .../src/main/webapp/static/css/navbar.css | 12 +++- .../src/main/webapp/static/img/Home.svg | 48 ++++++++++++++ 13 files changed, 319 insertions(+), 88 deletions(-) create mode 100644 S2/DevWeb/Projet/src/main/java/uppa/project/servlet/IndexServlet.java create mode 100644 S2/DevWeb/Projet/src/main/webapp/WEB-INF/views/index.jsp create mode 100644 S2/DevWeb/Projet/src/main/webapp/static/css/global.css create mode 100644 S2/DevWeb/Projet/src/main/webapp/static/css/index.css create mode 100644 S2/DevWeb/Projet/src/main/webapp/static/css/main-menu.css create mode 100644 S2/DevWeb/Projet/src/main/webapp/static/img/Home.svg diff --git a/S2/DevWeb/Projet/src/main/java/uppa/project/servlet/IndexServlet.java b/S2/DevWeb/Projet/src/main/java/uppa/project/servlet/IndexServlet.java new file mode 100644 index 0000000..9494c86 --- /dev/null +++ b/S2/DevWeb/Projet/src/main/java/uppa/project/servlet/IndexServlet.java @@ -0,0 +1,33 @@ +/* + * LoginServlet.java, 20/03/2024 + * UPPA M1 TI 2023-2024 + * Pas de copyright, aucun droits + */ + +package uppa.project.servlet; + +import jakarta.servlet.ServletException; +import jakarta.servlet.annotation.WebServlet; +import jakarta.servlet.http.HttpServlet; +import jakarta.servlet.http.HttpServletRequest; +import jakarta.servlet.http.HttpServletResponse; +import java.io.IOException; + +@WebServlet(name = "indexServlet", value = "/index") +public class IndexServlet extends HttpServlet { + + public void init() { + } + + public void doGet(HttpServletRequest request, HttpServletResponse response) throws IOException, ServletException { + if (request.getSession().getAttribute("user") != null) { + response.sendRedirect(request.getContextPath() + "/main-menu"); + return; + } + + request.getRequestDispatcher("/WEB-INF/views/index.jsp").forward(request, response); + } + + public void destroy() { + } +} diff --git a/S2/DevWeb/Projet/src/main/webapp/WEB-INF/components/navbar.jsp b/S2/DevWeb/Projet/src/main/webapp/WEB-INF/components/navbar.jsp index 883d0d7..5df2fca 100644 --- a/S2/DevWeb/Projet/src/main/webapp/WEB-INF/components/navbar.jsp +++ b/S2/DevWeb/Projet/src/main/webapp/WEB-INF/components/navbar.jsp @@ -13,16 +13,18 @@ diff --git a/S2/DevWeb/Projet/src/main/webapp/WEB-INF/views/index.jsp b/S2/DevWeb/Projet/src/main/webapp/WEB-INF/views/index.jsp new file mode 100644 index 0000000..e66d2bb --- /dev/null +++ b/S2/DevWeb/Projet/src/main/webapp/WEB-INF/views/index.jsp @@ -0,0 +1,28 @@ +<%-- + Created by IntelliJ IDEA. + User: kmitr + Date: 03/04/2024 + Time: 14:48 + To change this template use File | Settings | File Templates. +--%> +<%@ page contentType="text/html;charset=UTF-8" language="java" %> + + + + Card Rush + + + + + +<%@include file="../components/navbar.jsp" %> +
+

Plongez dans l'excitation de cardRush!

+

Défiez votre réactivité et dominez le jeu avec des amis dans cette course effrénée aux cartes ! Rejoignez maintenant pour vivre l'adrénaline.

+
+ S'inscrire + Se connecter +
+
+ + diff --git a/S2/DevWeb/Projet/src/main/webapp/WEB-INF/views/login.jsp b/S2/DevWeb/Projet/src/main/webapp/WEB-INF/views/login.jsp index 16796df..47f95b9 100644 --- a/S2/DevWeb/Projet/src/main/webapp/WEB-INF/views/login.jsp +++ b/S2/DevWeb/Projet/src/main/webapp/WEB-INF/views/login.jsp @@ -3,6 +3,7 @@ Cards Rush - Connexion + @@ -10,31 +11,27 @@ <%@include file="../components/navbar.jsp"%>
-
Cards Rush
-
-
-
+
+

Forgotten password?

+
+

Don't have an account? Register

+
+
diff --git a/S2/DevWeb/Projet/src/main/webapp/WEB-INF/views/main-menu.jsp b/S2/DevWeb/Projet/src/main/webapp/WEB-INF/views/main-menu.jsp index a97fbcb..5e9db92 100644 --- a/S2/DevWeb/Projet/src/main/webapp/WEB-INF/views/main-menu.jsp +++ b/S2/DevWeb/Projet/src/main/webapp/WEB-INF/views/main-menu.jsp @@ -5,7 +5,9 @@ Cards Rush -<%-- --%> + + + @@ -14,10 +16,10 @@ <%@include file="../components/navbar.jsp"%>
-

Titre du jeu

+

Cards Rush!

- - + +
<%@include file="../components/new-game.jsp"%> diff --git a/S2/DevWeb/Projet/src/main/webapp/WEB-INF/views/register.jsp b/S2/DevWeb/Projet/src/main/webapp/WEB-INF/views/register.jsp index d6765b1..9acfced 100644 --- a/S2/DevWeb/Projet/src/main/webapp/WEB-INF/views/register.jsp +++ b/S2/DevWeb/Projet/src/main/webapp/WEB-INF/views/register.jsp @@ -3,18 +3,16 @@ Register + <%@include file="../components/navbar.jsp"%>
-
Inscription
-
-
-

Register

+

S'inscrire

@@ -26,7 +24,7 @@ - + @@ -40,7 +38,7 @@ - +
@@ -48,7 +46,6 @@

Déjà un compte ? Se connecter

-
diff --git a/S2/DevWeb/Projet/src/main/webapp/static/css/global.css b/S2/DevWeb/Projet/src/main/webapp/static/css/global.css new file mode 100644 index 0000000..f870bed --- /dev/null +++ b/S2/DevWeb/Projet/src/main/webapp/static/css/global.css @@ -0,0 +1,39 @@ +:root { + --color-red-800: #991B1B; + --color-rose-700: #BE123C; + --sizes-button-input-nav-larger-padding-v: 12px; + --sizes-button-input-nav-larger-padding-h: 32px; + --sizes-button-input-nav-larger-gap: 12px; + --Button-Border-radius: 8px; + --Button-Light-Default-Border: rgba(255, 255, 255, 0.00); + --Button-Light-Default-Background: rgba(255, 255, 255, 0.30); +} + +html{ + height: 100%; + width: 100%; +} + + +body { + width: 100%; + height: 832px; + flex-shrink: 0; + background: url("../img/Home.svg") lightgray 50% / cover no-repeat; + opacity: 0.6; + color: #FFF; +} + +a.button, input.button button.button{ + display: flex; + padding: var(--sizes-button-input-nav-larger-padding-v) var(--sizes-button-input-nav-larger-padding-h); + justify-content: center; + align-items: center; + gap: var(--sizes-button-input-nav-larger-gap); + border-radius: var(--Button-Border-radius); + border: 1px solid var(--Button-Light-Default-Border); + background: var(--Button-Light-Default-Background); + color: #FFF; + text-decoration: none; + height: fit-content; +} diff --git a/S2/DevWeb/Projet/src/main/webapp/static/css/index.css b/S2/DevWeb/Projet/src/main/webapp/static/css/index.css new file mode 100644 index 0000000..8c342d1 --- /dev/null +++ b/S2/DevWeb/Projet/src/main/webapp/static/css/index.css @@ -0,0 +1,56 @@ +html{ + height: 100%; +} + +.content { + display: inline-flex; + flex-direction: column; + align-items: flex-start; + gap: 30px; + padding: 10% +} + +h1 { + width: 656px; + height: 122px; + color: #FFF; + + font-family: Poppins; + font-size: 48px; + font-style: normal; + font-weight: 900; + line-height: 63px; /* 131.25% */ + letter-spacing: 0.48px; +} + +p { + width: 389px; + + color: #FFF; + + /* Text/Medium */ + font-family: Inter; + font-size: 16px; + font-style: normal; + font-weight: 400; + line-height: 24px; /* 150% */ +} + +.buttons { + display: flex; + align-items: flex-start; + gap: 30px; +} + +a.button{ + display: flex; + padding: var(--sizes-button-input-nav-larger-padding-v) var(--sizes-button-input-nav-larger-padding-h); + justify-content: center; + align-items: center; + gap: var(--sizes-button-input-nav-larger-gap); + border-radius: var(--Button-Border-radius); + border: 1px solid var(--Button-Light-Default-Border); + background: var(--Button-Light-Default-Background); + color: #FFF; + text-decoration: none; +} diff --git a/S2/DevWeb/Projet/src/main/webapp/static/css/login.css b/S2/DevWeb/Projet/src/main/webapp/static/css/login.css index a43afd8..83883ab 100644 --- a/S2/DevWeb/Projet/src/main/webapp/static/css/login.css +++ b/S2/DevWeb/Projet/src/main/webapp/static/css/login.css @@ -1,19 +1,13 @@ -html { - height: 100%; - display: flex; - align-items: center; +:root { + --spacing-615-rem-24-px: 12px; } - -body { - width: 100%; -} - main { width: 100%; height: 100%; display: flex; flex-direction: row; align-items: center; + justify-content: center; } /*Common */ @@ -42,39 +36,35 @@ hr { } h1 { - justify-self: center; -} -.flex-column { - display: flex; - flex-direction: column; - justify-content: left; + font-family: Poppins; + font-size: 48px; + font-style: normal; + font-weight: 900; + line-height: 63px; /* 131.25% */ + letter-spacing: 0.48px; } -.login-gap { - gap: 20px; -} - -.register-gap { - gap: 75px; -} - - #login-form, #register-form { - display: grid; - grid-template-columns: 1fr 1fr; - grid-gap: 8% 2%; + display: flex; + flex-direction: column; + align-items: flex-start; + gap: var(--spacing-615-rem-24-px); } -#login-submit { - grid-column: 2/2; - grid-row: 3/3; - justify-self: right; +label { + font-family: Inter; + font-size: 16px; + font-style: normal; + font-weight: 400; + line-height: 24px; /* 150% */ } -#register-submit { - grid-column: 2/2; - grid-row: 7/7; - justify-self: right; - +input { + width: 100%; +} + +a { + color: #ffffff; + bold: true; } diff --git a/S2/DevWeb/Projet/src/main/webapp/static/css/main-menu.css b/S2/DevWeb/Projet/src/main/webapp/static/css/main-menu.css new file mode 100644 index 0000000..bad10c0 --- /dev/null +++ b/S2/DevWeb/Projet/src/main/webapp/static/css/main-menu.css @@ -0,0 +1,41 @@ +#main { + width: 100%; + display: inline-flex; + height: 392px; + flex-direction: column; + justify-content: space-between; + align-items: center; + flex-shrink: 0; +} + +#title { + color: #FFF; + text-align: center; + font-family: Poppins; + font-size: 80px; + font-style: normal; + font-weight: 900; + line-height: 63px; /* 78.75% */ + letter-spacing: 0.8px; +} + +.main-button { + display: flex; + flex-direction: column; + align-items: center; + gap: 30px; +} + +button { + display: flex; + padding: var(--sizes-button-input-nav-larger-padding-v) var(--sizes-button-input-nav-larger-padding-h); + justify-content: center; + align-items: center; + gap: var(--sizes-button-input-nav-larger-gap); + border-radius: var(--Button-Border-radius); + border: 1px solid var(--Button-Light-Default-Border); + background: var(--Button-Light-Default-Background); + color: #FFF; + text-decoration: none; + height: fit-content; +} diff --git a/S2/DevWeb/Projet/src/main/webapp/static/css/modal.css b/S2/DevWeb/Projet/src/main/webapp/static/css/modal.css index bc3c2d3..0c6ce38 100644 --- a/S2/DevWeb/Projet/src/main/webapp/static/css/modal.css +++ b/S2/DevWeb/Projet/src/main/webapp/static/css/modal.css @@ -1,17 +1,5 @@ -body { - font-family: sans-serif; - padding: 30px; -} - -.demo-description { - max-width: 460px; - margin: 0 auto; - line-height: 1.5; -} - .modal-toggle { cursor: pointer; - color: #268bd2; } .modal-wrapper { diff --git a/S2/DevWeb/Projet/src/main/webapp/static/css/navbar.css b/S2/DevWeb/Projet/src/main/webapp/static/css/navbar.css index 7f4fb65..4384c1e 100644 --- a/S2/DevWeb/Projet/src/main/webapp/static/css/navbar.css +++ b/S2/DevWeb/Projet/src/main/webapp/static/css/navbar.css @@ -1,5 +1,15 @@ nav { display: flex; - justify-content: right; + flex-direction: row; + justify-content: space-between; padding: 10px; } +.content { + display: flex; + flex-direction: row; + gap: 40px; +} + +p.user{ + padding:10px; +} diff --git a/S2/DevWeb/Projet/src/main/webapp/static/img/Home.svg b/S2/DevWeb/Projet/src/main/webapp/static/img/Home.svg new file mode 100644 index 0000000..79fe141 --- /dev/null +++ b/S2/DevWeb/Projet/src/main/webapp/static/img/Home.svg @@ -0,0 +1,48 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +