From 99e27f1f6a7ce614f3b1f8c53c282a88be5ff899 Mon Sep 17 00:00:00 2001
From: Adrien <adrien.fryson@outlook.com>
Date: Thu, 27 Feb 2025 21:21:28 +0100
Subject: [PATCH] bootstrap -> tailwind
---
.../src/controleur/EnvoyerMessage.java | 7 +-
sae/WEB-INF/vue/accueil.jsp | 91 ++++---
sae/WEB-INF/vue/creerFil.jsp | 111 ++++-----
sae/WEB-INF/vue/fil.jsp | 224 ++++++------------
sae/WEB-INF/vue/listerFil.jsp | 134 +++++------
sae/WEB-INF/vue/login.jsp | 54 ++---
sae/WEB-INF/vue/register.jsp | 84 +++----
7 files changed, 282 insertions(+), 423 deletions(-)
diff --git a/sae/WEB-INF/src/controleur/EnvoyerMessage.java b/sae/WEB-INF/src/controleur/EnvoyerMessage.java
index 5832057..b9c7916 100644
--- a/sae/WEB-INF/src/controleur/EnvoyerMessage.java
+++ b/sae/WEB-INF/src/controleur/EnvoyerMessage.java
@@ -14,7 +14,11 @@ import java.io.IOException;
import java.time.LocalDateTime;
@WebServlet("/envoyerMessage")
-@MultipartConfig
+@MultipartConfig(
+ maxFileSize = 1024 * 1024 * 5,
+ maxRequestSize = 1024 * 1024 * 10,
+ fileSizeThreshold = 0 // comme ça tous les fichiers qui sont normalement des images sont enregistrés sur le serveur
+)
public class EnvoyerMessage extends HttpServlet {
private static final String UPLOAD_DIR = "uploads";
@@ -38,7 +42,6 @@ public class EnvoyerMessage extends HttpServlet {
return;
}
- // Handle file upload
Part filePart = req.getPart("file");
String fileName = null;
if (filePart != null && filePart.getSize() > 0) {
diff --git a/sae/WEB-INF/vue/accueil.jsp b/sae/WEB-INF/vue/accueil.jsp
index 7a8f0a3..a8739e7 100644
--- a/sae/WEB-INF/vue/accueil.jsp
+++ b/sae/WEB-INF/vue/accueil.jsp
@@ -12,40 +12,35 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CampusTalk - Accueil</title>
- <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
+ <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
<link rel="shortcut icon" href="https://www.shareicon.net/data/2016/07/10/119195_chat_512x512.png">
- <style>
- body {
- background-color: #f8f9fa;
- }
- .welcome-container {
- max-width: 800px;
- margin: 50px auto;
- padding: 20px;
- background-color: #ffffff;
- border-radius: 10px;
- box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
- }
- .welcome-container h2 {
- margin-bottom: 20px;
- font-weight: bold;
- }
- </style>
</head>
-<body>
- <nav class="navbar navbar-expand-lg navbar-light bg-light">
- <a class="navbar-brand" href="#">CampusTalk</a>
- <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
- aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
- <span class="navbar-toggler-icon"></span>
- </button>
- <div class="collapse navbar-collapse" id="navbarNav">
- <ul class="navbar-nav ml-auto">
- <li class="nav-item">
- <a class="nav-link btn btn-danger text-white" href="<%= request.getContextPath() %>/logout">Se
- déconnecter</a>
- </li>
- </ul>
+<body class="bg-gray-100">
+ <nav class="bg-white shadow-md">
+ <div class="max-w-7xl mx-auto px-2 sm:px-6 lg:px-8">
+ <div class="relative flex items-center justify-between h-16">
+ <div class="absolute inset-y-0 left-0 flex items-center sm:hidden">
+ <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white" aria-controls="mobile-menu" aria-expanded="false">
+ <span class="sr-only">Open main menu</span>
+ <svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
+ </svg>
+ <svg class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+ </svg>
+ </button>
+ </div>
+ <div class="flex-1 flex items-center justify-center sm:items-stretch sm:justify-start">
+ <div class="flex-shrink-0">
+ <a class="text-xl font-bold text-gray-800" href="#">CampusTalk</a>
+ </div>
+ <div class="hidden sm:block sm:ml-auto">
+ <div class="flex space-x-4">
+ <a href="<%= request.getContextPath() %>/logout" class="text-red-600 hover:bg-red-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Se déconnecter</a>
+ </div>
+ </div>
+ </div>
+ </div>
</div>
</nav>
<% UtilisateurDao udao=new UtilisateurDao(); String email=(String) session.getAttribute("email"); String
@@ -53,29 +48,23 @@
= adao.findAbonnements(email);
FilDeDiscussionDAO fdao = new FilDeDiscussionDAO();
%>
- <div class="welcome-container text-center">
- <h2>Bienvenue sur CampusTalk</h2>
- <p>Bonjour, <%= username %> !</p>
- <p>Vous êtes connecté en tant que <%= email %>
- </p>
- <a href="<%= request.getContextPath() %>/listerFil" class="btn btn-primary mt-4">Voir les autres fils de
- discussion</a>
+ <div class="max-w-2xl mx-auto mt-12 p-6 bg-white rounded-lg shadow-md">
+ <h2 class="text-2xl font-bold mb-4">Bienvenue sur CampusTalk</h2>
+ <p class="mb-4">Bonjour, <%= username %> !</p>
+ <p class="mb-4">Vous êtes connecté en tant que <%= email %></p>
+ <a href="<%= request.getContextPath() %>/listerFil" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Voir les autres fils de discussion</a>
</div>
- <div class="welcome-container mt-4">
- <h3>Vos abonnements</h3>
- <ul class="list-group">
+ <div class="max-w-2xl mx-auto mt-8 p-6 bg-white rounded-lg shadow-md">
+ <h3 class="text-xl font-bold mb-4">Vos abonnements</h3>
+ <ul class="list-disc pl-5">
<% for (Abonnement abo : abonnements) { %>
- <li class="list-group-item">
- <a href="<%= request.getContextPath() %>/fil?id=<%= abo.getIdFil() %>">
+ <li class="mb-2">
+ <a href="<%= request.getContextPath() %>/fil?id=<%= abo.getIdFil() %>" class="text-blue-500 hover:underline">
<%= fdao.findById(abo.getIdFil()).getNom() %>
</a>
</li>
- <% } %>
+ <% } %>
</ul>
</div>
-
- <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
- <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
- <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
- </body>
-</html>
\ No newline at end of file
+</body>
+</html>
diff --git a/sae/WEB-INF/vue/creerFil.jsp b/sae/WEB-INF/vue/creerFil.jsp
index ff8935a..cbdb477 100644
--- a/sae/WEB-INF/vue/creerFil.jsp
+++ b/sae/WEB-INF/vue/creerFil.jsp
@@ -6,73 +6,64 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CampusTalk - Créer un Fil de Discussion</title>
- <!-- Bootstrap CSS -->
- <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
+ <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
<link rel="shortcut icon" href="https://www.shareicon.net/data/2016/07/10/119195_chat_512x512.png">
- <style>
- body {
- background-color: #f8f9fa;
- }
- .form-container {
- max-width: 600px;
- margin: 50px auto;
- padding: 20px;
- background-color: #ffffff;
- border-radius: 10px;
- box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
- }
- .form-container h1 {
- margin-bottom: 20px;
- font-weight: bold;
- }
- </style>
</head>
-<body>
- <nav class="navbar navbar-expand-lg navbar-light bg-light">
- <a class="navbar-brand" href="#">CampusTalk</a>
- <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
- aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
- <span class="navbar-toggler-icon"></span>
- </button>
- <div class="collapse navbar-collapse" id="navbarNav">
- <ul class="navbar-nav ml-auto">
- <li class="nav-item">
- <a class="nav-link btn btn-danger text-white" href="<%= request.getContextPath() %>/logout">Se
- déconnecter</a>
- </li>
- </ul>
+<body class="bg-gray-100">
+ <nav class="bg-white shadow-md">
+ <div class="max-w-7xl mx-auto px-2 sm:px-6 lg:px-8">
+ <div class="relative flex items-center justify-between h-16">
+ <div class="absolute inset-y-0 left-0 flex items-center sm:hidden">
+ <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white" aria-controls="mobile-menu" aria-expanded="false">
+ <span class="sr-only">Open main menu</span>
+ <svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
+ </svg>
+ <svg class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+ </svg>
+ </button>
+ </div>
+ <div class="flex-1 flex items-center justify-center sm:items-stretch sm:justify-start">
+ <div class="flex-shrink-0">
+ <a class="text-xl font-bold text-gray-800" href="#">CampusTalk</a>
+ </div>
+ <div class="hidden sm:block sm:ml-auto">
+ <div class="flex space-x-4">
+ <a href="<%= request.getContextPath() %>/logout" class="text-red-600 hover:bg-red-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Se déconnecter</a>
+ </div>
+ </div>
+ </div>
+ </div>
</div>
</nav>
- <div class="container">
- <div class="text-center mb-4">
- <a href="<%= request.getContextPath() %>/listerFil" class="btn btn-primary">Retour aux fils de
- discussion</a>
+ <div class="container mx-auto px-4 mt-4 text-center">
+ <a href="<%= request.getContextPath() %>/listerFil" class="bg-blue-500 text-white px-4 py-2 rounded">Retour aux fils de discussion</a>
+ </div>
+
+ <% if (request.getAttribute("error") != null) { %>
+ <div class="max-w-2xl mx-auto mt-4 p-4 bg-red-100 text-red-700 rounded-lg">
+ <%= request.getAttribute("error") %>
</div>
+ <% } %>
- <% if (request.getAttribute("error") !=null) { %>
- <div class="alert alert-danger" role="alert">
- <%= request.getAttribute("error") %>
+ <div class="max-w-2xl mx-auto mt-8 p-6 bg-white rounded-lg shadow-md">
+ <h1 class="text-2xl font-bold mb-4 text-center">Créer un nouveau fil de discussion</h1>
+ <form action="creerFil" method="post" class="mt-4">
+ <div class="mb-4">
+ <label for="nom" class="block text-gray-700 font-semibold">Nom du fil:</label>
+ <input type="text" class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400" id="nom" name="nom" required>
</div>
- <% } %>
-
- <div class="form-container">
- <h1 class="text-center">Créer un nouveau fil de discussion</h1>
- <form action="creerFil" method="post" class="mt-4">
- <div class="form-group">
- <label for="nom">Nom du fil:</label>
- <input type="text" class="form-control" id="nom" name="nom" required>
- </div>
- <div class="form-group">
- <label for="createuremail">Email du créateur:</label>
- <input type="email" class="form-control" id="createuremail" name="createuremail" required>
- </div>
- <div class="form-group">
- <label for="description">Description:</label>
- <textarea class="form-control" id="description" name="description" rows="3"
- required></textarea>
- <button type="submit" class="btn btn-primary btn-block">Créer</button>
- </form>
- </div>
+ <div class="mb-4">
+ <label for="createuremail" class="block text-gray-700 font-semibold">Email du créateur:</label>
+ <input type="email" class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400" id="createuremail" name="createuremail" required>
+ </div>
+ <div class="mb-4">
+ <label for="description" class="block text-gray-700 font-semibold">Description:</label>
+ <textarea class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400" id="description" name="description" rows="3" required></textarea>
+ </div>
+ <button type="submit" class="bg-blue-500 text-white px-4 py-2 rounded-lg shadow-md hover:bg-blue-600 transition-colors w-full">Créer</button>
+ </form>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
diff --git a/sae/WEB-INF/vue/fil.jsp b/sae/WEB-INF/vue/fil.jsp
index f5feef2..670a807 100644
--- a/sae/WEB-INF/vue/fil.jsp
+++ b/sae/WEB-INF/vue/fil.jsp
@@ -1,4 +1,4 @@
-<%@ page language="java" contentType="text/html; ch</div>arset=UTF-8" pageEncoding="UTF-8"%>
+<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="modele.FilDeDiscussion" %>
<%@ page import="modele.FilDeDiscussionDAO" %>
<%@ page import="modele.Message" %>
@@ -13,180 +13,102 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CampusTalk - Fil de Discussion</title>
- <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
+ <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
<link rel="shortcut icon" href="https://www.shareicon.net/data/2016/07/10/119195_chat_512x512.png">
<style>
- body {
- background-color: #f8f9fa;
- color: #212529;
- font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+ .message-container {
+ transition: background-color 0.3s ease;
}
- .navbar {
- background-color: #ffffff;
- border-bottom: 1px solid #e0e0e0;
+ .message-container:hover {
+ background-color: #f3f4f6;
}
- .navbar-brand, .nav-link {
- color: #212529 !important;
- }
- .thread-container {
- max-width: 800px;
- margin: 50px auto;
- padding: 20px;
- background-color: #ffffff;
- border-radius: 10px;
- box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
- }
- .thread-container h2 {
- margin-bottom: 20px;
- font-weight: bold;
- color: #212529;
- }
- .messages-box {
- max-height: 400px;
- overflow-y: auto;
- padding-right: 15px;
- }
- .message-item {
- display: flex;
- align-items: flex-start;
- padding: 10px 0;
- border-bottom: 1px solid #e0e0e0;
- }
- .message-item:last-child {
- border-bottom: none;
- }
- .avatar {
- width: 40px;
- height: 40px;
- border-radius: 50%;
- margin-right: 10px;
- }
- .message-content {
- background-color: #f1f1f1;
- padding: 10px;
- border-radius: 10px;
- max-width: 600px;
- color: #212529;
- }
- .message-content h4 {
- margin: 0;
- font-size: 1em;
- font-weight: bold;
- color: #212529;
- }
- .message-content p {
- margin: 3px 0;
- }
- .message-date {
- font-size: 0.8em;
- color: #6c757d;
- }
- .message-form {
- margin-top: 20px;
- padding: 20px;
- border-top: 1px solid #e0e0e0;
- }
- .message-form label {
- color: #212529;
- }
- .message-form textarea {
- background-color: #f1f1f1;
- color: #212529;
- border: 1px solid #e0e0e0;
- }
- .message-form button {
- background-color: #007bff;
- border: none;
- color: #ffffff;
- }
- .message-form button:hover {
- background-color: #0056b3;
+ .message-image {
+ max-width: 200px;
+ max-height: 200px;
+ object-fit: cover;
+ border-radius: 8px;
}
</style>
</head>
-<body>
- <nav class="navbar navbar-expand-lg">
- <a class="navbar-brand" href="#">CampusTalk</a>
- <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
- aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
- <span class="navbar-toggler-icon"></span>
- </button>
- <div class="collapse navbar-collapse" id="navbarNav">
- <ul class="navbar-nav ml-auto">
- <li class="nav-item">
- <a class="nav-link btn btn-danger text-white" href="<%= request.getContextPath() %>/logout">Se
- déconnecter</a>
- </li>
- </ul>
+<body class="bg-gray-100 text-gray-900 font-sans">
+ <nav class="bg-white shadow-md">
+ <div class="container mx-auto px-4 py-2 flex justify-between items-center">
+ <a class="text-xl font-bold" href="#">CampusTalk</a>
+ <div>
+ <a class="bg-red-500 text-white px-4 py-2 rounded" href="<%= request.getContextPath() %>/logout">Se déconnecter</a>
+ </div>
</div>
</nav>
- <div class="text-center mt-4">
- <a href="<%= request.getContextPath() %>/listerFil" class="btn btn-primary">Retour</a>
+
+ <div class="container mx-auto px-4 mt-4 text-center">
+ <a href="<%= request.getContextPath() %>/listerFil" class="bg-blue-500 text-white px-4 py-2 rounded">Retour</a>
</div>
- <% int id=Integer.parseInt(request.getParameter("id")); session.setAttribute("filId", id); FilDeDiscussionDAO
- fddao=new FilDeDiscussionDAO(); FilDeDiscussion fil=fddao.findById(id); MessageDao mdao=new MessageDao();
+ <%
+ int id = Integer.parseInt(request.getParameter("id"));
+ session.setAttribute("filId", id);
+ FilDeDiscussionDAO fddao = new FilDeDiscussionDAO();
+ FilDeDiscussion fil = fddao.findById(id);
+ MessageDao mdao = new MessageDao();
List<Message> messages = mdao.findByFil(id);
DateTimeFormatter formatter = DateTimeFormatter.ofPattern("dd MMM yyyy 'à' HH:mm");
- %>
+ %>
- <div class="thread-container">
- <h2 class="text-center">
- <%= fil.getNom() %>
- </h2>
- <div class="messages-box" id="messages-box">
- <% for (Message m : messages) { LocalDateTime datePublication=m.getDatePublication(); String
- formattedDate=(datePublication !=null) ? datePublication.format(formatter) : "Date non disponible" ;
- %>
- <div class="message-item">
- <div class="avatar">
- <img src="https://www.gravatar.com/avatar/<%= m.getAuteurEmail().hashCode() %>?d=identicon&s=40"
- alt="Avatar">
- </div>
- <div class="message-content">
- <h4>
- <%= mdao.findUserName(m.getAuteurEmail()) %>
- </h4>
- <p class="message-date">
- <%= formattedDate %>
- </p>
- <p>
- <%= m.getContenu() %>
- </p>
- <% if (m.getFileName() !=null) { %>
- <img src="<%= request.getContextPath() %>/uploads/<%= m.getFileName() %>" alt="Image"
- class="img-fluid mt-2">
- <% } %>
- </div>
+ <div class="container mx-auto px-4 mt-8">
+ <div class="bg-white p-6 rounded-lg shadow-lg">
+ <h2 class="text-2xl font-bold mb-4 text-center"><%= fil.getNom() %></h2>
+ <div class="overflow-y-auto max-h-96" id="messages-box">
+ <% for (Message m : messages) {
+ LocalDateTime datePublication = m.getDatePublication();
+ String formattedDate = (datePublication != null) ? datePublication.format(formatter) : "Date non disponible";
+ %>
+ <div class="flex items-start mb-4 message-container">
+ <div class="w-10 h-10 rounded-full overflow-hidden">
+ <img src="https://www.gravatar.com/avatar/<%= m.getAuteurEmail().hashCode() %>?d=identicon&s=40" alt="Avatar">
+ </div>
+ <div class="ml-4 bg-gray-200 p-4 rounded-lg">
+ <h4 class="font-bold"><%= mdao.findUserName(m.getAuteurEmail()) %></h4>
+ <p class="text-sm text-gray-600"><%= formattedDate %></p>
+ <p class="mt-2"><%= m.getContenu() %></p>
+ <% if (m.getFileName() != null) { %>
+ <img src="<%= request.getContextPath() %>/uploads/<%= m.getFileName() %>" alt="Image" class="mt-2 message-image">
+ <% } %>
</div>
- <% } %>
+ </div>
+ <% } %>
</div>
-
- <div class="message-form">
+ <div class="mt-6 bg-white p-6 rounded-lg shadow-lg">
<form action="envoyerMessage" method="post" enctype="multipart/form-data">
- <div class="form-group">
- <label for="contenu">Votre message :</label>
- <textarea class="form-control" id="contenu" name="contenu" rows="3" required></textarea>
+ <div class="mb-4">
+ <label for="contenu" class="block text-gray-700 font-semibold">Votre message :</label>
+ <textarea class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400" id="contenu" name="contenu" rows="3" required></textarea>
</div>
- <div class="form-group">
- <label for="file">Ajouter une image :</label>
- <input type="file" class="form-control-file" id="file" name="file">
+ <div class="mb-4">
+ <label for="file" class="block text-gray-700 font-semibold">Ajouter une image :</label>
+ <div class="flex items-center">
+ <input type="file" class="hidden" id="file" name="file">
+ <label for="file" class="cursor-pointer bg-blue-500 text-white px-4 py-2 rounded-lg shadow-md hover:bg-blue-600 transition-colors flex items-center">
+ <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
+ </svg>
+ Télécharger
+ </label>
+ </div>
</div>
<input type="hidden" name="filId" value="<%= id %>">
- <button type="submit" class="btn btn-primary">Envoyer</button>
+ <button type="submit" class="bg-blue-500 text-white px-4 py-2 rounded-lg shadow-md hover:bg-blue-600 transition-colors">Envoyer</button>
</form>
</div>
+
</div>
+ </div>
- <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
- <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
- <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
- <script>
- window.onload = function () {
- let messagesBox = document.getElementById('messages-box');
- messagesBox.scrollTop = messagesBox.scrollHeight;
- };
- </script>
+ <script>
+ window.onload = function () {
+ let messagesBox = document.getElementById('messages-box');
+ messagesBox.scrollTop = messagesBox.scrollHeight;
+ };
+ </script>
</body>
</html>
\ No newline at end of file
diff --git a/sae/WEB-INF/vue/listerFil.jsp b/sae/WEB-INF/vue/listerFil.jsp
index ea6b0eb..23d9c37 100644
--- a/sae/WEB-INF/vue/listerFil.jsp
+++ b/sae/WEB-INF/vue/listerFil.jsp
@@ -13,89 +13,69 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CampusTalk - Fils de Discussion</title>
- <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
+ <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
<link rel="shortcut icon" href="https://www.shareicon.net/data/2016/07/10/119195_chat_512x512.png">
- <style>
- body {
- background-color: #f8f9fa;
- }
- .thread-container {
- max-width: 800px;
- margin: 50px auto;
- padding: 20px;
- background-color: #ffffff;
- border-radius: 10px;
- box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
- }
- .thread-container h2 {
- margin-bottom: 20px;
- font-weight: bold;
- }
- .thread-item {
- padding: 10px;
- border-bottom: 1px solid #ddd;
- }
- .thread-item:last-child {
- border-bottom: none;
- }
- .navbar {
- margin-bottom: 20px;
- }
- .btn-primary, .btn-danger {
- margin: 5px;
- }
- </style>
</head>
-<body>
- <nav class="navbar navbar-expand-lg navbar-light bg-light">
- <a class="navbar-brand" href="#">CampusTalk</a>
- <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
- aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
- <span class="navbar-toggler-icon"></span>
- </button>
- <div class="collapse navbar-collapse" id="navbarNav">
- <ul class="navbar-nav ml-auto">
- <li class="nav-item">
- <a class="nav-link btn btn-danger text-white" href="<%= request.getContextPath() %>/logout">Se
- déconnecter</a>
- </li>
- </ul>
+<body class="bg-gray-100">
+ <nav class="bg-white shadow-md">
+ <div class="max-w-7xl mx-auto px-2 sm:px-6 lg:px-8">
+ <div class="relative flex items-center justify-between h-16">
+ <div class="absolute inset-y-0 left-0 flex items-center sm:hidden">
+ <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white" aria-controls="mobile-menu" aria-expanded="false">
+ <span class="sr-only">Open main menu</span>
+ <svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
+ </svg>
+ <svg class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+ </svg>
+ </button>
+ </div>
+ <div class="flex-1 flex items-center justify-center sm:items-stretch sm:justify-start">
+ <div class="flex-shrink-0">
+ <a class="text-xl font-bold text-gray-800" href="#">CampusTalk</a>
+ </div>
+ <div class="hidden sm:block sm:ml-auto">
+ <div class="flex space-x-4">
+ <a href="<%= request.getContextPath() %>/logout" class="text-red-600 hover:bg-red-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Se déconnecter</a>
+ </div>
+ </div>
+ </div>
+ </div>
</div>
</nav>
- <div class="container">
- <div class="text-center mb-4">
- <a href="<%= request.getContextPath() %>/accueil" class="btn btn-primary">Retour à l'accueil</a>
- <a href="<%= request.getContextPath() %>/creerFil" class="btn btn-primary">Créer un fil de discussion</a>
- </div>
- <div class="thread-container">
- <h2 class="text-center">Fils de Discussion</h2>
- <% String email=(String) session.getAttribute("email"); AbonnementDao adao=new AbonnementDao();
- List<Abonnement> abonnements = adao.findAbonnements(email);
- Set<Integer> abonnementsIds = new HashSet<>();
- for (Abonnement abonnement : abonnements) {
- abonnementsIds.add(abonnement.getIdFil());
- }
- FilDeDiscussionDAO fddao = new FilDeDiscussionDAO();
- for (FilDeDiscussion f : fddao.findAll()) {
- if (!abonnementsIds.contains(f.getId())) {
- %>
- <div class="thread-item">
- <h4 class="d-flex justify-content-between align-items-center">
- <p class="thread-name mb-0">
- <%= f.getNom() %>
- </p>
- <a href="<%= request.getContextPath() %>/suivreFil?id=<%= f.getId() %>"
- class="btn btn-primary btn-sm">Suivre</a>
- </h4>
- <% if (f.getDescription() !=null) { %>
- <p class="thread-description">
- <%= f.getDescription() %>
- </p>
- <% } %>
- </div>
- <% } } %>
+ <div class="container mx-auto px-4 mt-4 text-center">
+ <a href="<%= request.getContextPath() %>/accueil" class="bg-blue-500 text-white px-4 py-2 rounded">Retour à l'accueil</a>
+ <a href="<%= request.getContextPath() %>/creerFil" class="bg-blue-500 text-white px-4 py-2 rounded">Créer un fil de discussion</a>
+ </div>
+
+ <div class="max-w-2xl mx-auto mt-8 p-6 bg-white rounded-lg shadow-md">
+ <h2 class="text-2xl font-bold mb-4 text-center">Fils de Discussion</h2>
+ <%
+ String email = (String) session.getAttribute("email");
+ AbonnementDao adao = new AbonnementDao();
+ List<Abonnement> abonnements = adao.findAbonnements(email);
+ Set<Integer> abonnementsIds = new HashSet<>();
+ for (Abonnement abonnement : abonnements) {
+ abonnementsIds.add(abonnement.getIdFil());
+ }
+
+ FilDeDiscussionDAO fddao = new FilDeDiscussionDAO();
+ for (FilDeDiscussion f : fddao.findAll()) {
+ if (!abonnementsIds.contains(f.getId())) {
+ %>
+ <div class="mb-4 p-4 bg-gray-100 rounded-lg shadow-md">
+ <h4 class="font-bold text-lg"><%= f.getNom() %></h4>
+ <% if (f.getDescription() != null) { %>
+ <p class="text-gray-700"><%= f.getDescription() %></p>
+ <% } %>
+ <a href="<%= request.getContextPath() %>/suivreFil?id=<%= f.getId() %>" class="bg-blue-500 text-white px-4 py-2 rounded mt-2 inline-block">Suivre</a>
</div>
+ <%
+ }
+ }
+ %>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
diff --git a/sae/WEB-INF/vue/login.jsp b/sae/WEB-INF/vue/login.jsp
index 1cd2962..c4d29cb 100644
--- a/sae/WEB-INF/vue/login.jsp
+++ b/sae/WEB-INF/vue/login.jsp
@@ -6,51 +6,41 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CampusTalk - Connexion</title>
- <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
+ <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
<link rel="shortcut icon" href="https://www.shareicon.net/data/2016/07/10/119195_chat_512x512.png">
<style>
body {
background-color: #f8f9fa;
}
- .login-container {
- max-width: 400px;
- margin: 100px auto;
- padding: 20px;
- background-color: #ffffff;
- border-radius: 10px;
- box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
- }
- .login-container h2 {
- margin-bottom: 20px;
- font-weight: bold;
- }
</style>
</head>
-<body>
- <nav class="navbar navbar-expand-lg navbar-light bg-light">
- <a class="navbar-brand" href="#">CampusTalk</a>
- <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
- aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
- <span class="navbar-toggler-icon"></span>
- </button>
+<body class="bg-gray-100">
+ <nav class="bg-white shadow-md">
+ <div class="max-w-7xl mx-auto px-2 sm:px-6 lg:px-8">
+ <div class="relative flex items-center justify-between h-16">
+ <div class="flex-1 flex items-center justify-center sm:items-stretch sm:justify-start">
+ <div class="flex-shrink-0">
+ <a class="text-xl font-bold text-gray-800" href="#">CampusTalk</a>
+ </div>
+ </div>
+ </div>
+ </div>
</nav>
- <div class="login-container">
- <h2 class="text-center">Bienvenue sur CampusTalk</h2>
+ <div class="max-w-md mx-auto mt-12 p-6 bg-white rounded-lg shadow-md">
+ <h2 class="text-2xl font-bold mb-4 text-center">Bienvenue sur CampusTalk</h2>
<form action="login" method="post">
- <div class="form-group">
- <label for="email">Adresse e-mail</label>
- <input type="email" class="form-control" name="email" id="email" placeholder="Entrez votre e-mail"
- required>
+ <div class="mb-4">
+ <label for="email" class="block text-gray-700 font-semibold">Adresse e-mail</label>
+ <input type="email" class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400" name="email" id="email" placeholder="Entrez votre e-mail" required>
</div>
- <div class="form-group">
- <label for="motdepasse">Mot de passe</label>
- <input type="password" class="form-control" name="motdepasse" id="motdepasse"
- placeholder="Entrez votre mot de passe" required>
+ <div class="mb-4">
+ <label for="motdepasse" class="block text-gray-700 font-semibold">Mot de passe</label>
+ <input type="password" class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400" name="motdepasse" id="motdepasse" placeholder="Entrez votre mot de passe" required>
</div>
- <button type="submit" class="btn btn-primary btn-block">Se connecter</button>
+ <button type="submit" class="bg-blue-500 text-white px-4 py-2 rounded-lg shadow-md hover:bg-blue-600 transition-colors w-full">Se connecter</button>
</form>
<div class="text-center mt-3">
- <p>Vous n'avez pas de compte ? <a href="<%= request.getContextPath() %>/register">S'inscrire</a></p>
+ <p>Vous n'avez pas de compte ? <a href="<%= request.getContextPath() %>/register" class="text-blue-500 hover:underline">S'inscrire</a></p>
</div>
</div>
diff --git a/sae/WEB-INF/vue/register.jsp b/sae/WEB-INF/vue/register.jsp
index d0e671f..99411e4 100644
--- a/sae/WEB-INF/vue/register.jsp
+++ b/sae/WEB-INF/vue/register.jsp
@@ -6,62 +6,46 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CampusTalk - Inscription</title>
- <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
+ <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
<link rel="shortcut icon" href="https://www.shareicon.net/data/2016/07/10/119195_chat_512x512.png">
- <style>
- body {
- background-color: #f8f9fa;
- }
- .register-container {
- max-width: 400px;
- margin: 100px auto;
- padding: 20px;
- background-color: #ffffff;
- border-radius: 10px;
- box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
- }
- .register-container h2 {
- margin-bottom: 20px;
- font-weight: bold;
- }
- </style>
</head>
-<body>
- <nav class="navbar navbar-expand-lg navbar-light bg-light">
- <a class="navbar-brand" href="#">CampusTalk</a>
- <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
- aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
- <span class="navbar-toggler-icon"></span>
- </button>
+<body class="bg-gray-100">
+ <nav class="bg-white shadow-md">
+ <div class="max-w-7xl mx-auto px-2 sm:px-6 lg:px-8">
+ <div class="relative flex items-center justify-between h-16">
+ <div class="flex-1 flex items-center justify-center sm:items-stretch sm:justify-start">
+ <div class="flex-shrink-0">
+ <a class="text-xl font-bold text-gray-800" href="#">CampusTalk</a>
+ </div>
+ </div>
+ </div>
+ </div>
</nav>
- <div class="register-container">
- <h2 class="text-center">Inscription</h2>
- <% if (request.getAttribute("error") !=null) { %>
- <div class="alert alert-danger" role="alert">
+ <div class="max-w-md mx-auto mt-12 p-6 bg-white rounded-lg shadow-md">
+ <h2 class="text-2xl font-bold mb-4 text-center">Inscription</h2>
+ <% if (request.getAttribute("error") != null) { %>
+ <div class="bg-red-100 text-red-700 p-4 rounded-lg mb-4">
<%= request.getAttribute("error") %>
</div>
<% request.removeAttribute("error"); } %>
- <form action="register" method="post">
- <div class="form-group">
- <label for="nom">Nom</label>
- <input type="text" class="form-control" name="nom" id="nom" placeholder="Entrez votre nom"
- required>
- </div>
- <div class="form-group">
- <label for="email">Adresse e-mail</label>
- <input type="email" class="form-control" name="email" id="email"
- placeholder="Entrez votre e-mail" required>
- </div>
- <div class="form-group">
- <label for="motdepasse">Mot de passe</label>
- <input type="password" class="form-control" name="motdepasse" id="motdepasse"
- placeholder="Choisissez un mot de passe" required>
- </div>
- <button type="submit" class="btn btn-primary btn-block">S'inscrire</button>
- </form>
- <div class="text-center mt-3">
- <p>Vous avez déjà un compte ? <a href="<%= request.getContextPath() %>/login">Se connecter</a></p>
- </div>
+ <form action="register" method="post">
+ <div class="mb-4">
+ <label for="nom" class="block text-gray-700 font-semibold">Nom</label>
+ <input type="text" class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400" name="nom" id="nom" placeholder="Entrez votre nom" required>
+ </div>
+ <div class="mb-4">
+ <label for="email" class="block text-gray-700 font-semibold">Adresse e-mail</label>
+ <input type="email" class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400" name="email" id="email" placeholder="Entrez votre e-mail" required>
+ </div>
+ <div class="mb-4">
+ <label for="motdepasse" class="block text-gray-700 font-semibold">Mot de passe</label>
+ <input type="password" class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400" name="motdepasse" id="motdepasse" placeholder="Choisissez un mot de passe" required>
+ </div>
+ <button type="submit" class="bg-blue-500 text-white px-4 py-2 rounded-lg shadow-md hover:bg-blue-600 transition-colors w-full">S'inscrire</button>
+ </form>
+ <div class="text-center mt-3">
+ <p>Vous avez déjà un compte ? <a href="<%= request.getContextPath() %>/login" class="text-blue-500 hover:underline">Se connecter</a></p>
+ </div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
--
GitLab