Question:
im a new driver and cant drive with more than 2 people so i want to make a site where when I want to dirve I press a button it sends notifications to users to sign in(name and phone number) for my drive and it shows me(the admin) the users entered in orde.
Repl link:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Admin Panel</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>Welcome to the Admin Panel</h1>
<button id="showUsersBtn">Show Users</button>
<ul id="joinedUsersList"></ul>
<script src="script.js"></script>
<script>
// Display user queue when admin panel loads
displayUserQueue();
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Main Screen</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>Welcome to the Main Screen</h1>
<form id="loginForm">
<label for="nameInput">Enter your name:</label>
<input type="text" id="nameInput" name="name">
<label for="passwordInput">Enter your password:</label>
<input type="password" id="passwordInput" name="password">
<button type="submit">Login</button>
</form>
<button id="sendNotificationBtn" style="display:none;">Send Push Notification</button>
<button id="showUsersBtn" style="display:none;">Show Users</button>
<ul id="joinedUsersList"></ul>
<form id="userForm" style="display:none;">
<h2>Enter Your Name and Phone Number</h2>
<label for="userLoginNameInput">Name:</label>
<input type="text" id="userLoginNameInput" name="name">
<label for="userLoginPhoneInput">Phone Number:</label>
<input type="tel" id="userLoginPhoneInput" name="phone">
<button type="submit">Submit</button>
</form>
<script src="script.js"></script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>User Login</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>User Login</h1>
<form id="userLoginForm">
<label for="userNameInput">Enter your name:</label>
<input type="text" id="userNameInput" name="name">
<label for="userPhoneInput">Enter your phone number:</label>
<input type="tel" id="userPhoneInput" name="phone">
<button type="submit">Submit</button>
</form>
<script src="script.js"></script>
</body>
</html>
// Store queue data in local storage
function storeUserInQueue(name, phone) {
// Retrieve existing queue data from local storage
var existingQueue = JSON.parse(localStorage.getItem('userQueue')) || [];
// Add new user to the end of the queue
existingQueue.push({ name: name, phone: phone });
// Store updated queue data back to local storage
localStorage.setItem('userQueue', JSON.stringify(existingQueue));
}
function displayUserQueue() {
var existingQueue = JSON.parse(localStorage.getItem('userQueue')) || [];
// Sort the users by name
existingQueue.sort((a, b) => (a.name > b.name) ? 1 : -1);
var joinedUsersList = document.getElementById("joinedUsersList");
joinedUsersList.innerHTML = '';
existingQueue.forEach(function(user, index) {
var li = document.createElement("li");
li.appendChild(document.createTextNode((index + 1) + ". " + user.name + " - " + user.phone));
joinedUsersList.appendChild(li);
});
}
// Call this function whenever a user submits their details
document.getElementById("userForm").addEventListener("submit", function(event) {
event.preventDefault(); // Prevent default form submission
var name = document.getElementById("userLoginNameInput").value;
var phone = document.getElementById("userLoginPhoneInput").value;
storeUserInQueue(name, phone);
});
// Call this function to display the user queue on admin panel load
displayUserQueue();
// Send push notification and redirect to user login page
function sendPushNotification(message) {
alert("Push notification sent: " + message);
window.open("user_login.html", "_blank");
}
// Send push notification when button is clicked
document.getElementById("sendNotificationBtn").addEventListener("click", function() {
sendPushNotification("Etay is driving to the beach. Do you want to join?");
});
// Authenticate user on main screen and redirect to admin panel
document.getElementById("loginForm").addEventListener("submit", function(event) {
event.preventDefault(); // Prevent default form submission
var name = document.getElementById("nameInput").value;
var password = document.getElementById("passwordInput").value;
if (name.toLowerCase() === "etay" && password === "Etay2007") {
document.getElementById("sendNotificationBtn").style.display = "block";
document.getElementById("showUsersBtn").style.display = "block";
document.getElementById("loginForm").style.display = "none";
} else {
alert("Invalid credentials! Please try again.");
}
});
// Display user queue when admin panel loads
displayUserQueue();
// Display user queue when "Show Users" button is clicked
document.getElementById("showUsersBtn").addEventListener("click", function() {
displayUserQueue();
});
body {
font-family: Arial, sans-serif;
text-align: center;
background-color: #f8f9fa;
}
h1 {
color: #333;
}
form {
margin-bottom: 20px;
}
input[type="text"],
input[type="password"],
input[type="tel"] {
padding: 8px;
margin: 5px;
border-radius: 5px;
border: 1px solid #ccc;
}
button {
padding: 10px 20px;
font-size: 16px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}
button:hover {
background-color: #0056b3;
}
#showUsersBtn {
background-color: #28a745;
}
#showUsersBtn:hover {
background-color: #218838;
}
ul {
list-style-type: none;
padding: 0;
display: block; /* Ensure the list is displayed */
}
ul li {
margin: 5px;
}