Expense Sheet Manager - Copy this Html, Tailwind Component to your project
Can you make a css for this jspx please? just the regular css, dont use frameworks nor tailwing, just plain css, and do not switch de jspx to html! <?xml version="1.0" encoding="UTF 8"?> <jsp:root xmlns="http://www.w3.org/1999/xhtml" xmlns:jsp="http://java.sun.com/JSP/Page" xmlns:fmt="http://java.sun.com/jsp/jstl/fmt" xmlns:c="http://java.sun.com/jsp/jstl/core" xmlns:form="http://www.springframework.org/tags/form" xmlns:fn="http://java.sun.com/jsp/jstl/functions" xmlns:mytags="urn:jsptagdir:/WEB INF/tags" version="2.0"> <jsp:directive.page contentType="text/html;charset=UTF 8" /> <html> <head> <title>Hojas de gasto</title> <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/resources/css/styles.css"/> <jsp:include page="/WEB INF/views/background buttons.jspx" /> </head> <body> <header> <h2>Hojas de gasto de ${user.email}</h2> <! Logout > <form:form action="${pageContext.request.contextPath}/auth/logout" method="post"> <input type="submit" value="Logout" /> </form:form> </header> <button onclick="toggleAddExpenseForm()">Añadir</button> <! Formulario para agregar una nueva hoja de gasto > <div id="addExpenseSheetForm"> <h3>Nueva hoja de gasto</h3> <form action="${pageContext.request.contextPath}/expense sheets/all/add" method="post"> <input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}"/> <label for="name">Nombre:</label> <input type="text" id="name" name="name" required="true" /> <br/> <label for="description">Descripción:</label> <input type="text" id="description" name="description" /> <br/> <input type="submit" value="Crear" /> </form> </div> <c:choose> <c:when test="${empty expenseSheets}"> <p>No tienes ninguna hoja de gasto aún.</p> </c:when> <c:otherwise> <div class="expense sheets container"> <c:forEach var="sheet" items="${expenseSheets}"> <div class="expense sheet card"> <h3> <a href="${pageContext.request.contextPath}/expense sheets/${sheet.id}">${sheet.name}</a> </h3> <c:if test="${not empty sheet.description}"> <p><strong>Descripción:</strong> ${sheet.description}</p> </c:if> <p><strong>Creada:</strong> <c:if test="${not empty sheet.date}"> ${sheet.date.dayOfMonth}/${sheet.date.monthValue}/${sheet.date.year} </c:if> </p> <! <a href="$ {pageContext.request.contextPath}/expense sheets/$ {sheet.id}/edit">Editar</a> > <form:form action="${pageContext.request.contextPath}/expense sheets/${sheet.id}/delete" method="post"> <input type="submit" value="Eliminar" onclick="return confirm('¿Estás seguro de que deseas eliminar esta hoja de gasto?');" /> </form:form> </div> </c:forEach> </div> </c:otherwise> </c:choose> </body> </html> <script type="text/javascript"> function toggleAddExpenseForm() { var formDiv = document.getElementById("addExpenseSheetForm"); if (formDiv.style.display === "none" || formDiv.style.display === "") { formDiv.style.display = "block"; } else { formDiv.style.display = "none"; } } </script> <style> #addExpenseSheetForm { display: none; margin top: 20px; } </style> </jsp:root>
