profile.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ page import="java.sql.*" %>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Profile</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f6f5f7;
margin: 0;
padding: 0;
}
.navbar {
background-color: #38ef7d; /* Updated to match the style.css */
padding: 15px;
position: fixed;
width: 100%;
top: 0;
left: 0;
color: white;
display: flex;
justify-content: space-between;
}
.navbar a {
color: white;
text-decoration: none;
padding: 0 15px;
}
.container {
margin-top: 70px;
padding: 20px;
max-width: 600px;
margin: auto;
background-color: white;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.profile-header {
text-align: center;
margin-bottom: 20px;
}
.profile-details {
margin-bottom: 20px;
}
.profile-details label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
.profile-details input {
width: calc(100% - 20px);
padding: 10px;
margin-bottom: 15px;
border: 1px solid #ddd;
border-radius: 5px;
outline: none;
}
.profile-details input[readonly] {
background-color: #f4f4f4;
}
.buttons {
display: flex;
justify-content: space-between;
}
.buttons button {
padding: 10px 20px;
border: none;
outline: none;
border-radius: 5px;
cursor: pointer;
font-size: 14px;
transition: background-color 0.3s;
}
.buttons .update-btn {
background-color: #38ef7d; /* Updated to match the style.css */
color: white;
}
.buttons .update-btn:hover {
background-color: #11998e; /* Updated to match the style.css */
}
.buttons .save-btn {
background-color: #11998e; /* Updated to match the style.css */
color: white;
}
.buttons .save-btn:hover {
background-color: #38ef7d; /* Updated to match the style.css */
}
</style>
</head>
<body>
<!-- Navigation Bar -->
<div class="navbar">
<div>Online Grocery Shopping</div>
<div>
<a href="home.jsp">Home</a>
<a href="cart.jsp">Cart</a>
<a href="profile.jsp">My Profile</a>
<a href="logout.jsp">Logout</a>
</div>
</div><br><br>
<div class="container">
<div class="profile-header">
<h2>Welcome, <span id="customerName"><%= request.getAttribute("customerName") %></span></h2>
</div>
<!-- Profile Details -->
<div class="profile-details">
<form action="ProfileServlet" method="post">
<label for="uname">User Name:</label>
<input type="text" id="uname" name="uname" value="<%= request.getAttribute("uname") %>" readonly>
<label for="email">Email:</label>
<input type="email" id="email" name="email" value="<%= request.getAttribute("email") %>" readonly>
<label for="pswd">Password:</label>
<input type="password" id="pswd" name="pswd" value="<%= request.getAttribute("pswd") %>" readonly>
<label for="ads">Address:</label>
<input type="text" id="ads" name="ads" value="<%= request.getAttribute("ads") %>" readonly>
<label for="phnno">Contact Number:</label>
<input type="tel" id="phnno" name="phnno" value="<%= request.getAttribute("phnno") %>" readonly>
<!-- Update and Save Buttons -->
<div class="buttons">
<button type="button" class="update-btn" onclick="makeEditable()">Update</button>
<button type="submit" class="save-btn" name="save" disabled>Save</button>
</div>
</form>
</div>
</div>
<script>
// Enable editing of profile fields
function makeEditable() {
document.querySelectorAll('.profile-details input').forEach(input => input.removeAttribute('readonly'));
document.querySelector('.save-btn').disabled = false;
}
</script>
</body>
</html>
Comments
Post a Comment