Noooooooooooooooooooo
import javax.servlet.;
import javax.servlet.http.;
import java.io.;
import java.sql.;
import org.json.JSONObject;
public class ParcelTrackingServlet extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String trackingID = request.getParameter("trackingID");
JSONObject jsonResponse = new JSONObject();
try {
// JDBC connection (adjust with your MySQL credentials)
String url = "jdbc:mysql://localhost:3306/yourDatabase";
String username = "root";
String password = "yourPassword";
Connection conn = DriverManager.getConnection(url, username, password);
// Query to get the parcel data based on the tracking ID
String query = "SELECT status FROM parcels WHERE trackingID = ?";
PreparedStatement stmt = conn.prepareStatement(query);
stmt.setString(1, trackingID);
ResultSet rs = stmt.executeQuery();
if (rs.next()) {
String status = rs.getString("status");
int progress = getProgressFromStatus(status);
// Construct JSON response
jsonResponse.put("status", status);
jsonResponse.put("progress", progress);
} else {
// If tracking ID not found, return empty JSON
jsonResponse.put("error", "Tracking ID not found");
}
conn.close();
} catch (Exception e) {
e.printStackTrace();
jsonResponse.put("error", "Database error");
}
// Return JSON response
response.setContentType("application/json");
PrintWriter out = response.getWriter();
out.print(jsonResponse);
out.flush();
}
// Helper method to map status to progress (1-5)
private int getProgressFromStatus(String status) {
switch (status) {
case "Ordered":
return 1;
case "Dispatched":
return 2;
case "In Transit":
return 3;
case "Out for Delivery":
return 4;
case "Delivered":
return 5;
default:
return 0;
}
}
}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Parcel Tracking System</title> <link rel="stylesheet" href="styles.css"> <!-- Link to external CSS --> </head> <body> <div class="container"> <h1>Parcel Tracking System</h1> <input type="text" id="trackingID" placeholder="Enter your tracking ID"> <button onclick="trackParcel()">Track Parcel</button> <div id="trackingResult" class="tracking-result"></div>
<!-- Progress Bar with 5 circles -->
<div class="progress-container">
<div class="progress-bar"></div>
<div class="progress-fill" id="progressFill"></div>
<div class="circle" id="step1">1</div>
<div class="circle" id="step2">2</div>
<div class="circle" id="step3">3</div>
<div class="circle" id="step4">4</div>
<div class="circle" id="step5">5</div>
</div>
<!-- Status text under each circle -->
<div class="status-indicator">
<div class="status-label">Ordered</div>
<div class="status-label">Dispatched</div>
<div class="status-label">In Transit</div>
<div class="status-label">Out for Delivery</div>
<div class="status-label">Delivered</div>
</div>
</div>
<script src="script.js"></script> <!-- Link to external JS -->
// Fetch data from Java servlet via an API
fetch(`YourServletURL?trackingID=${trackingID}`) // Replace with your actual servlet URL
.then(response => response.json())
.then(parcel => {
if (parcel && parcel.status) {
resultDiv.innerHTML = `<p>Status: <strong>${parcel.status}</strong></p>`;
animateProgress(parcel.progress); // Assume the servlet returns progress (1 to 5) based on the order status
} else {
resultDiv.innerHTML = "<p>Tracking ID not found. Please try again.</p>";
resetProgress();
}
})
.catch(error => {
console.error('Error:', error);
resultDiv.innerHTML = "<p>Failed to fetch data. Please try again.</p>";
resetProgress();
});
}
function animateProgress(step) {
resetProgress(); // Reset all circles and progress bar
const progressFill = document.getElementById("progressFill");
const totalDuration = 4; // Total animation duration in seconds
const stepPercentage = 25; // 25% for each step (as there are 4 intervals)
// Set the width of the progress bar based on the step with smooth transition
progressFill.style.transition = `width ${totalDuration}s ease`;
progressFill.style.width = ((step - 1) * stepPercentage) + "%";
// Wait for the progress bar to fill before activating circles
for (let i = 1; i <= step; i++) {
setTimeout(() => {
const circle = document.getElementById(`step${i}`);
circle.classList.add('active');
if (i < step) {
circle.classList.add('completed');
}
}, ((i - 1) * totalDuration * 1000 / 4)); // Adjust the timing for each step
}
}
function resetProgress() {
// Reset all circles and progress bar to inactive state
for (let i = 1; i <= 5; i++) {
const circle = document.getElementById(step${i});
circle.classList.remove('active');
circle.classList.remove('completed');
}
// Reset the progress bar fill
const progressFill = document.getElementById("progressFill");
progressFill.style.transition = 'none';
progressFill.style.width = "0%";
}
/* Modern UI/UX CSS */
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #f0f2f5;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
background-color: #fff;
padding: 30px;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
text-align: center;
width: 600px;
}
h1 {
font-size: 24px;
margin-bottom: 20px;
color: #333;
}
input[type="text"] {
padding: 12px;
width: 100%;
margin-bottom: 20px;
border: 1px solid #ccc;
border-radius: 8px;
font-size: 16px;
box-sizing: border-box;
}
button {
padding: 12px;
background-color: #007bff;
color: white;
border: none;
border-radius: 8px;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s ease;
width: 100%;
}
button:hover {
background-color: #0056b3;
}
.tracking-result {
margin-top: 20px;
font-size: 16px;
color: #333;
}
/* Progress Bar Styles */
.progress-container {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
margin: 40px 0;
}
.progress-bar {
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 4px;
background-color: #ddd;
z-index: 1;
}
.progress-fill {
position: absolute;
top: 50%;
left: 0;
height: 4px;
background-color: #ffbf00; /* Changed to #ffbf00 /
z-index: 1;
width: 0; / Initially 0 */
transition: width 6.5s ease;
}
.circle {
width: 30px;
height: 30px;
border-radius: 50%;
background-color: #ddd;
z-index: 2;
position: relative;
display: flex;
justify-content: center;
align-items: center;
transition: background-color 0.5s ease;
}
.circle.active {
background-color: #ffbf00; /* Changed to #ffbf00 */
color: white;
}
.circle.completed {
background-color: #28a745;
}
.status-text {
margin-top: 10px;
font-size: 14px;
text-align: center;
}
/* Status Indicator Container */
.status-indicator {
display: flex;
justify-content: space-between;
margin-top: 10px;
}
.status-label {
width: 15%;
text-align: center;
font-size: 14px;
}