Spaces:

Arjunadhithya
/

creep

Running

File size: 8,722 Bytes

8e11898

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Duty Roster Calendar</title>
<style>

  body {

    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;

    background: linear-gradient(35deg, rgb(4, 0, 0), #00ddff);

    padding: 0;

    margin: 0;

    color: #fff;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    height: 100vh;

    overflow: hidden;

  }



  h1 {

    text-align: center;

    margin: 20px 0;

    color: #fff;

    font-size: 48px;

    font-weight: bold;

    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);

  }



  #calendar-controls {

    display: flex;

    justify-content: center;

    align-items: center;

    margin: 20px 0;

    gap: 10px;

  }



  #calendar-controls select {

    padding: 15px;

    font-size: 18px;

    background-color: #171818;

    border: none;

    border-radius: 5px;

    color: #fdfbfb;

    font-weight: bold;

    width: 500px;

  }



  #calendar {

    display: grid;

    grid-template-columns: repeat(7, 1fr);

    gap: 5px;

    padding: 10px;

    background-color: rgba(0, 0, 0, 0.7);

    border-radius: 10px;

    width: 95%;

    height: 75vh;

    overflow-y: auto;

  }



  .calendar-day {

    padding: 40px;

    background-color: rgba(255, 255, 255, 0.1);

    border-radius: 10px;

    position: relative;

    text-align: center;

    font-size: 24px;

    font-weight: bold;

    cursor: pointer;

    transition: transform 0.3s, box-shadow 0.3s;

    color: #05d9ff;

  }



  .calendar-day:hover {

    transform: scale(1.05);

    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);

  }



  .calendar-day.duty {

    background-color: rgba(0, 0, 0, 0.5);

  }



  .calendar-day .duty-text {

    margin-top: 20px;

    background-color: rgba(255, 255, 255, 0.2);

    padding: 10px;

    border-radius: 5px;

    font-size: 24px;

    color: #05d9ff;

    font-weight: bold;

  }



  .day-header {

    background-color: rgba(0, 0, 0, 0.3);

    font-weight: bold;

  }



  .modal {

    display: none;

    position: fixed;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    background-color: rgba(7, 3, 0, 0.9);

    padding: 30px;

    border-radius: 10px;

    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);

    z-index: 1000;

    width: 300px;

    text-align: center;

  }



  .modal.show {

    display: block;

  }



  .modal h2 {

    margin-bottom: 20px;

    color: #fbf7f7;

  }



  .modal input[type="text"] {

    width: calc(100% - 20px);

    padding: 10px;

    margin-bottom: 20px;

    border-radius: 5px;

    border: 1px solid #ccc;

    font-size: 16px;

  }



  .modal 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;

  }



  .modal button:hover {

    background-color: #2980b9;

  }



  .modal-close {

    position: absolute;

    top: 10px;

    right: 10px;

    cursor: pointer;

    font-size: 20px;

    color: #333;

  }

</style>
</head>
<body>

<h1>Duty Allocation</h1>

<div id="calendar-controls">
  <select id="year-select"></select>
  <select id="month-select"></select>
</div>

<div id="calendar"></div>

<div id="dutyModal" class="modal">
  <span class="modal-close" onclick="closeModal()">&times;</span>
  <h2>Enter Duty</h2>
  <input type="text" id="dutyInput" placeholder="Enter duty">
  <button onclick="saveDuty()">Save</button>
</div>

<script>

  // Get current date

  const today = new Date();

  let currentMonth = today.getMonth();

  let currentYear = today.getFullYear();

  let activeDayElement = null;



  const monthNames = ["January", "February", "March", "April", "May", "June", 

                      "July", "August", "September", "October", "November", "December"];



  // Populate year and month dropdowns

  function populateYearMonthSelectors() {

    const yearSelect = document.getElementById('year-select');

    const monthSelect = document.getElementById('month-select');



    for (let year = currentYear - 10; year <= currentYear + 10; year++) {

      const option = document.createElement('option');

      option.value = year;

      option.textContent = year;

      if (year === currentYear) option.selected = true;

      yearSelect.appendChild(option);

    }



    monthNames.forEach((month, index) => {

      const option = document.createElement('option');

      option.value = index;

      option.textContent = month;

      if (index === currentMonth) option.selected = true;

      monthSelect.appendChild(option);

    });

  }



  // Render the calendar

  function renderCalendar(month, year) {

    const calendar = document.getElementById('calendar');

    calendar.innerHTML = ''; // Clear previous calendar



    const firstDay = new Date(year, month).getDay();

    const daysInMonth = 32 - new Date(year, month, 32).getDate();



    // Days of the week

    const daysOfWeek = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];

    daysOfWeek.forEach(day => {

      const dayElement = document.createElement('div');

      dayElement.textContent = day;

      dayElement.classList.add('calendar-day', 'day-header');

      calendar.appendChild(dayElement);

    });



    // Add empty cells for days of the previous month

    for (let i = 0; i < firstDay; i++) {

      const emptyCell = document.createElement('div');

      emptyCell.classList.add('calendar-day');

      emptyCell.style.backgroundColor = 'transparent';

      calendar.appendChild(emptyCell);

    }



    // Add the days of the current month

    for (let day = 1; day <= daysInMonth; day++) {

      const dayElement = document.createElement('div');

      dayElement.classList.add('calendar-day');

      dayElement.textContent = day;

      dayElement.addEventListener('click', () => openModal(dayElement));

      calendar.appendChild(dayElement);

    }



    // Check if there are duties for the current day and alert

    checkTodayDuty();

  }



  // Open modal to enter duty

  function openModal(dayElement) {

    activeDayElement = dayElement;

    const modal = document.getElementById('dutyModal');

    modal.classList.add('show');

  }



  // Close modal

  function closeModal() {

    const modal = document.getElementById('dutyModal');

    modal.classList.remove('show');

  }



  // Save duty

  function saveDuty() {

    const dutyInput = document.getElementById('dutyInput');

    const dutyText = dutyInput.value.trim();

    if (dutyText !== '') {

      activeDayElement.classList.add('duty');

      const dutyElement = document.createElement('p');

      dutyElement.classList.add('duty-text');

      dutyElement.textContent = dutyText;

      activeDayElement.innerHTML = activeDayElement.textContent.split('\n')[0]; // Keep only the day number

      activeDayElement.appendChild(dutyElement);

      dutyInput.value = '';

      closeModal();

      saveDutyToLocal(activeDayElement.dataset.date, dutyText); // Saving duty to local storage

    } else {

      alert('Please enter a duty.');

    }

  }



  // Save duty to local storage

  function saveDutyToLocal(date, duty) {

    // You can customize this function to save duty details to local storage

    const dutyData = {

      date: date,

      duty: duty

    };

    localStorage.setItem('dutyData', JSON.stringify(dutyData));

  }



  // Check if there are duties for the current day and alert

  function checkTodayDuty() {

    const today = new Date();

    const currentDay = today.getDate();

    const currentMonth = today.getMonth();

    const currentYear = today.getFullYear();

    const activeDay = document.querySelector(`.calendar-day:not(.day-header)[data-date="${currentYear}-${currentMonth + 1}-${currentDay}"]`);

    if (activeDay && activeDay.querySelector('.duty-text')) {

      alert(`You have a duty today:\n${activeDay.querySelector('.duty-text').textContent}`);

    }

  }



  // Handle month and year change

  document.getElementById('year-select').addEventListener('change', (e) => {

    currentYear = parseInt(e.target.value);

    renderCalendar(currentMonth, currentYear);

  });



  document.getElementById('month-select').addEventListener('change', (e) => {

    currentMonth = parseInt(e.target.value);

    renderCalendar(currentMonth, currentYear);

  });



  // Initial setup

  populateYearMonthSelectors();

  renderCalendar(currentMonth, currentYear);

</script>

</body>
</html>