Scribd
Upload
5 views

jhgjgujhb

The document is an HTML template for an Admin Panel that allows users to add and manage routes. It includes input fields for departure location, destination, and time, as well as buttons to add routes and change availability. The associated JavaScript functions handle the addition of routes and changing their availability based on user input.

Uploaded by

Gzim Ramadani
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
5 views

jhgjgujhb

The document is an HTML template for an Admin Panel that allows users to add and manage routes. It includes input fields for departure location, destination, and time, as well as buttons to add routes and change availability. The associated JavaScript functions handle the addition of routes and changing their availability based on user input.

Uploaded by

Gzim Ramadani
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 4

Khsbfskhbfjhsbbbfjhbs

<!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>

<style>

body {

font-family: Arial, sans-serif;

background-color: #f4f4f4;

margin: 0;

padding: 0;

}
.container {

width: 50%;

margin: 50px auto;

padding: 20px;

background-color: white;

border: 1px solid #ccc;

border-radius: 5px;

box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

h2 {

text-align: center;

color: #333;

label {

display: block;

margin-top: 10px;

input, select, button {

width: 100%;

padding: 10px;

margin: 5px 0;

border-radius: 3px;

border: 1px solid #ccc;

button {

background-color: #5cb85c;

color: white;

border: none;

cursor: pointer;
font-size: 16px;

button:hover {

background-color: #4cae4c;

</style>

</head>

<body>

<div class="container">

<h2>Admin Panel</h2>

<label for="newFrom">New From:</label>

<input type="text" id="newFrom" placeholder="Enter new departure location">

<label for="newDestination">New Destination:</label>

<input type="text" id="newDestination" placeholder="Enter new destination">

<label for="newTime">Time:</label>

<select id="newTime">

<option value="08:00">08:00</option>

<option value="12:00">12:00</option>

<option value="16:00">16:00</option>

</select>

<button onclick="addRoute()">Add Route</button>

<label for="availableTime">Available Routes:</label>

<select id="availableTime">

<option value="08:00">08:00</option>

<option value="12:00">12:00</option>

<option value="16:00">16:00</option>

</select>

<button onclick="changeAvailability()">Change Availability</button>

</div>
<script>

const routes = {

'08:00': [],

'12:00': [],

'16:00': []

};

function addRoute() {

const newFrom = document.getElementById('newFrom').value;

const newDestination = document.getElementById('newDestination').value;

const newTime = document.getElementById('newTime').value;

if (newFrom && newDestination && newTime) {

routes[newTime].push({ from: newFrom, destination: newDestination });

alert(`Route added: ${newFrom} to ${newDestination} at ${newTime}`);

} else {

alert('Please fill all fields');

function changeAvailability() {

const availableTime = document.getElementById('availableTime').value;

alert(`Changing availability for time: ${availableTime}`);

</script>

</body>

</html>

You might also like