Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <H1><title>DUTY ROSTER CALENDAR </title></H1> | |
| <style> | |
| body { | |
| font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; | |
| background-image: url(../bac2.jpg); | |
| background-size: cover; /* Ensure the background image covers the entire page */ | |
| background-repeat: no-repeat; /* Prevent the background image from repeating */ | |
| background-attachment: fixed; /* Ensure the background image remains fixed as the page scrolls */ | |
| padding-top: 0%; | |
| color: #d8d1d1; /* Text color */ | |
| font-weight: bold; | |
| margin: 0; /* Remove default margin */ | |
| } | |
| #calendar { | |
| display: grid; | |
| grid-template-columns: repeat(5, 1fr); /* 5 columns */ | |
| gap: 20px; | |
| padding: 30px; | |
| margin-top: 0px; /* Move calendar up */ | |
| font-weight: bold; | |
| } | |
| #background { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background-image: url('C:\Users\Divit\Downloads\CREEPBACK\Police lights.gif'); | |
| background-size: cover; | |
| background-position: center; | |
| z-index: -1; | |
| filter: brightness(50%); /* Apply black color effect */ | |
| } | |
| .duty { | |
| background: linear-gradient(35deg, rgb(9, 9, 0), #565553); | |
| padding: 30px; | |
| border-radius: 10px; | |
| box-shadow: 0 4px 8px rgba(239, 12, 12, 0.1); | |
| cursor: pointer; | |
| transition: transform 0.3s, box-shadow 0.3s; /* Add transition effect */ | |
| position: relative; | |
| text-align: center; | |
| font-size:x-large; | |
| font-weight: bold; | |
| font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; | |
| overflow: hidden; | |
| margin-top: 60px; | |
| margin-bottom: 10px; | |
| } | |
| .duty::after { | |
| content: ''; | |
| position: absolute; | |
| top: 100%; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background-color: rgba(249, 255, 255, 0.5); /* Background color for the text below */ | |
| transition: top 0.3s; | |
| z-index: -1; | |
| opacity: 0; | |
| } | |
| .duty:hover::after, | |
| .duty.active::after { | |
| top: 0; | |
| opacity: 1; | |
| } | |
| .duty:hover { | |
| transform: scale(1.05); /* Increase scale on hover */ | |
| box-shadow: 0 8px 16px rgb(9, 0, 0); /* Add shadow on hover */ | |
| } | |
| .duty p { | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| margin: 0; | |
| opacity: 0; | |
| transition: opacity 0.3s; | |
| } | |
| .duty:hover p, | |
| .duty.active p { | |
| opacity: 1; | |
| } | |
| .allocation-details-container { | |
| display: flex; | |
| flex-direction: row; /* Flex direction set to column */ | |
| justify-content: flex-start; | |
| gap: 20px; | |
| margin-top: 20px; | |
| padding: 20px; | |
| font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; | |
| } | |
| .allocation-details { | |
| border-radius: 10px; | |
| box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); | |
| padding: 20px; | |
| width: 300px; /* Set width */ | |
| animation: fadeIn 0.5s ease-in-out; | |
| background-color: #f2c308; /* Dark gold color */ | |
| color:#0a0a0a; | |
| font-size: larger; | |
| } | |
| @keyframes fadeIn { | |
| from { | |
| opacity: 0; | |
| transform: translateY(-20px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| h1 { | |
| text-align: center; | |
| margin: 30px 0; | |
| color: #383633; /* Text color */ | |
| font-size: 48px; /* Increased font size */ | |
| font-weight: bold; | |
| font-family:'Times New Roman', Times, serif; | |
| text-shadow: 2px 2px 4px rgba(12, 17, 16, 0.832); | |
| transition: opacity 0.5s, transform 0.5s; /* Add a text shadow */ | |
| } | |
| .allocation-form { | |
| display: none; | |
| position: fixed; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| background-color: #3f3631; /* Dark gold color */ | |
| padding: 30px; | |
| border-radius: 10px; | |
| box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); | |
| z-index: 2; | |
| text-align: center; | |
| transition: opacity 0.5s, transform 0.5s; /* Add transition effect */ | |
| opacity: 0; /* Initially hidden */ | |
| } | |
| .allocation-form.show { | |
| display: block; | |
| opacity: 1; /* Show form */ | |
| } | |
| .allocation-form.hide { | |
| opacity: 0; /* Hide form */ | |
| transform: translate(-50%, -70%); /* Move form up */ | |
| } | |
| .allocation-form h2 { | |
| margin-bottom: 20px; | |
| color: #333; | |
| } | |
| .allocation-form label { | |
| display: block; | |
| margin-bottom: 10px; | |
| color: #f0eeee; | |
| font-size: 18px; | |
| font-weight: bold; | |
| } | |
| .dropdown { | |
| width: calc(100% - 20px); | |
| padding: 10px; | |
| margin-bottom: 20px; | |
| border-radius: 5px; | |
| border: 1px solid #ccc; | |
| box-sizing: border-box; | |
| font-size: 16px; | |
| color: #171515; | |
| } | |
| .allocation-form input[type="text"], | |
| .allocation-form input[type="tel"] { | |
| width: calc(100% - 20px); | |
| padding: 10px; | |
| margin-bottom: 20px; | |
| border-radius: 5px; | |
| border: 1px solid #ccc; | |
| box-sizing: border-box; | |
| font-size: 16px; | |
| color: #0e0a0a; | |
| } | |
| .allocation-form button { | |
| padding: 12px 24px; | |
| background-color: #3498db; | |
| color: #fff; | |
| border: none; | |
| border-radius: 5px; | |
| cursor: pointer; | |
| transition: background-color 0.3s; | |
| font-size: 18px; | |
| font-weight: bold; | |
| } | |
| .calendar-box a:hover { | |
| background-color: #2c3e50; /* Darker background color on hover */ | |
| box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Add shadow on hover */ | |
| transition: background-color 0.3s, box-shadow 0.3s; /* Smooth transition */ | |
| } | |
| .allocation-form button:hover { | |
| background-color: #f4f5f7; | |
| } | |
| @keyframes fadeIn { | |
| from { | |
| opacity: 0; | |
| } | |
| to { | |
| opacity: 1; | |
| } | |
| } | |
| body.fade-in { | |
| animation: fadeIn 1s ease-in-out; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="calendar-box" style="position: fixed; top: 70px; right: 70px;"> | |
| <a href="Calen.html" style="text-decoration: none; color: white; font-size: 30px; background-color: #3498db; padding: 40px 50px; border-radius: 5px;">Go to Calendar</a> | |
| </div> | |
| <h1 style="color: #f6fbfa;">DUTY ROSTER ALLOCATION</h1> | |
| <div id="calendar"></div> | |
| <div id="allocationForm" class="allocation-form hide"> <!-- Initially hidden --> | |
| <h2>Allocate Duty</h2> | |
| <label for="district">Select District:</label> | |
| <select id="district" class="dropdown"> | |
| <option value="district1">District 1</option> | |
| <option value="district2">District 2</option> | |
| <option value="district3">District 3</option> | |
| <!-- Add more districts as needed --> | |
| </select> | |
| <label for="policeStation">Select Police Station:</label> | |
| <select id="policeStation" class="dropdown"> | |
| <option value="station1">Police Station 1</option> | |
| <option value="station2">Police Station 2</option> | |
| <option value="station3">Police Station 3</option> | |
| <!-- Add more police stations as needed --> | |
| </select> | |
| <label for="officerName">Officer Name:</label> | |
| <input type="text" id="officerName" required> | |
| <label for="phoneNumber">Phone Number:</label> | |
| <input type="tel" id="phoneNumber" pattern="[0-9]{10}" placeholder="Enter 10-digit phone number" required> | |
| <button onclick="submitAllocation()">Allocate</button> | |
| </div> | |
| <div class="allocation-details-container" id="allocationDetailsContainer"></div> | |
| <script> | |
| const calendar = document.getElementById('calendar'); | |
| const allocationForm = document.getElementById('allocationForm'); | |
| const allocationDetailsContainer = document.getElementById('allocationDetailsContainer'); | |
| const dutiesInKarnataka = ["Patrolling", "Traffic Duty", "Crime Investigation", "Emergency Response", "Crowd Control", "Community Policing", "Training", "Public Awareness", "Event Security", "Administration"]; // Duties in Karnataka | |
| // Create calendar duties with duty names | |
| for (let i = 0; i < dutiesInKarnataka.length; i++) { | |
| const duty = document.createElement('div'); | |
| duty.classList.add('duty'); | |
| duty.textContent = dutiesInKarnataka[i]; | |
| duty.id = dutiesInKarnataka[i].replace(/\s+/g, '-').toLowerCase(); // Convert duty name to lowercase and replace spaces with hyphens | |
| calendar.appendChild(duty); | |
| } | |
| // Submit duty allocation | |
| function submitAllocation() { | |
| const officerName = document.getElementById('officerName').value.trim(); | |
| const phoneNumber = document.getElementById('phoneNumber').value.trim(); | |
| const dutyName = document.querySelector('.duty.active').textContent; | |
| const district = document.getElementById('district').value; | |
| const policeStation = document.getElementById('policeStation').value; | |
| if (officerName && phoneNumber) { | |
| displayAllocationDetails(officerName, phoneNumber, dutyName, district, policeStation); | |
| clearInputFields(); | |
| hideAllocationForm(); | |
| } else { | |
| alert('Please enter all details.'); | |
| } | |
| } | |
| // Display allocation details in the duty box | |
| function displayAllocationDetails(officerName, phoneNumber, dutyName, district, policeStation) { | |
| const allocationDetails = document.createElement('div'); | |
| allocationDetails.classList.add('allocation-details'); | |
| allocationDetails.innerHTML = ` | |
| <h2>${dutyName}</h2> | |
| <p><strong>Officer Name:</strong> ${officerName}</p> | |
| <p><strong>Phone Number:</strong> ${phoneNumber}</p> | |
| <p><strong>District:</strong> ${district}</p> | |
| <p><strong>Police Station:</strong> ${policeStation}</p> | |
| <p><strong>Police Call Sign:</strong> ${generatePoliceCallSign()}</p> | |
| `; | |
| allocationDetailsContainer.appendChild(allocationDetails); | |
| } | |
| // Clear input fields after submission | |
| function clearInputFields() { | |
| document.getElementById('officerName').value = ''; | |
| document.getElementById('phoneNumber').value = ''; | |
| } | |
| // Hide allocation form | |
| function hideAllocationForm() { | |
| allocationForm.classList.remove('show'); | |
| allocationForm.classList.add('hide'); | |
| } | |
| // Show allocation form | |
| function showAllocationForm() { | |
| allocationForm.classList.remove('hide'); | |
| allocationForm.classList.add('show'); | |
| } | |
| // Generate random police call sign | |
| function generatePoliceCallSign() { | |
| const letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'; | |
| const numbers = '0123456789'; | |
| let callSign = ''; | |
| for (let i = 0; i < 3; i++) { | |
| callSign += letters.charAt(Math.floor(Math.random() * letters.length)); | |
| } | |
| for (let i = 0; i < 3; i++) { | |
| callSign += numbers.charAt(Math.floor(Math.random() * numbers.length)); | |
| } | |
| return callSign; | |
| } | |
| // Handle duty click event | |
| const duties = document.querySelectorAll('.duty'); | |
| duties.forEach(duty => { | |
| duty.addEventListener('click', () => { | |
| // Remove active class from all duties | |
| duties.forEach(item => item.classList.remove('active')); | |
| // Add active class to clicked duty | |
| duty.classList.add('active'); | |
| // Display allocation form | |
| showAllocationForm(); | |
| }); | |
| }); | |
| document.addEventListener('DOMContentLoaded', function() { | |
| document.body.classList.add('fade-in'); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |