Embed

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kyra's Schedule</title>
<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #f0f2f5;
  padding: 20px;
  font-family: Arial, sans-serif;
}

.calendar-container {
  width: 800px;
  margin: 0 auto;
  background: white;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
}

.calendar-header {
  background: #2563eb;
  color: white;
  padding: 15px 20px;
  border-radius: 10px 10px 0 0;
  text-align: center;
}

.calendar-header h2 {
  font-size: 18px;
  margin: 0;
}

.calendar-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  background: #1e40af;
  color: white;
  border-bottom: 1px solid #e5e7eb;
}

.calendar-controls button {
  background: rgba(255,255,255,0.2);
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: #e5e7eb;
  flex: 1;
}

.day-header {
  background: #374151;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: bold;
  padding: 8px 4px;
}

.calendar-day {
  background: white;
  padding: 4px;
  min-height: 100px;
  border: 1px solid #e5e7eb;
  display: flex;
  flex-direction: column;
}

.calendar-day.other-month {
  background: #f9fafb;
  color: #9ca3af;
}

.day-number {
  font-weight: bold;
  font-size: 12px;
  margin-bottom: 4px;
  text-align: right;
}

.events-container {
  flex: 1;
  overflow-y: auto;
}

.event-item {
  background: #2563eb;
  color: white;
  padding: 2px 4px;
  margin: 1px 0;
  border-radius: 2px;
  font-size: 9px;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.event-item:hover {
  background: #1e40af;
}

.event-time {
  font-size: 8px;
  opacity: 0.9;
}

.status-bar {
  padding: 8px 20px;
  background: #f3f4f6;
  border-top: 1px solid #e5e7eb;
  font-size: 11px;
  color: #6b7280;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 0 0 10px 10px;
}

.status-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.refresh-btn {
  background: #059669;
  color: white;
  border: none;
  padding: 4px 8px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 11px;
}

.change-pass-btn {
  background: #2563eb;
  color: white;
  border: none;
  padding: 4px 8px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 11px;
}

.loading, .error {
  text-align: center;
  padding: 40px;
  font-size: 16px;
  grid-column: 1 / -1;
}

.error {
  color: #e74c3c;
  background: #fadbd8;
}

.event-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  z-index: 1000;
  align-items: center;
  justify-content: center;
}

.event-modal-content {
  background: white;
  padding: 20px;
  border-radius: 8px;
  max-width: 400px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto; /* long descriptions scroll */
}

.time-debug {
  background: #fef3c7;
  color: #92400e;
  padding: 4px;
  border-radius: 2px;
  font-size: 10px;
  margin-top: 2px;
}
</style>
</head>
<body>

<div class="calendar-container">
  <div class="calendar-header">
    <h2>Kirksey Cleaning – Kyra's Schedule</h2>
  </div>
  
  <div class="calendar-controls">
    <button onclick="changeMonth(-1)">← Previous</button>
    <span id="current-month" style="font-size: 14px; font-weight: bold;">November 2025</span>
    <button onclick="changeMonth(1)">Next →</button>
  </div>

  <div class="calendar-grid" id="calendar-grid">
    <div class="loading">Loading calendar events...</div>
  </div>
  
  <div class="status-bar">
    <span>Last updated: <span id="last-updated">Never</span></span>
    <div class="status-actions">
      <button class="refresh-btn" onclick="loadCalendarData()">Refresh Now</button>
      <button class="change-pass-btn" onclick="changeCalendarPassword()">Change Calendar Password</button>
    </div>
  </div>
</div>

<div class="event-modal" id="eventModal">
  <div class="event-modal-content">
    <h3 id="modal-title" style="margin: 0 0 15px 0; font-size: 16px;">Event Details</h3>
    <div id="modal-content"></div>
    <button onclick="closeModal()" style="background: #2563eb; color: white; border: none; padding: 6px 12px; border-radius: 4px; cursor: pointer; margin-top: 15px; font-size: 12px;">Close</button>
  </div>
</div>

<script>
(function () {
  // Precomputed SHA-256 hashes for Kyra's login
  const EXPECTED_USER_HASH = "27474db08829646843b4074a81118ceff2e2e9283b5e53ef6d4f3a3a52574743";
  const DEFAULT_PASS_HASH  = "e9521716191a9774eb8baaf65ce53bf2c4d8c5df01421edb1b5fffa49b4f60ae";
  const PASS_STORE_KEY     = "kc_kyra_calendar_pass_hash";

  const WEB3FORMS_ACCESS_KEY = "7f975b50-1647-4b0d-b0df-420898c506f8";

  let currentDate = new Date(2025, 10, 1); // November 2025
  let calendarEvents = [];
  let accessDenied = false;

  // Worker URL, encoded as base64 so it never appears as plain text
  function decodeWorkerUrl() {
    const b64 = "aHR0cHM6Ly9reXJhY2FsZW5kYXIua2lya3NleWNsZWFuaW5nLndvcmtlcnMuZGV2L2FwaS9jYWxlbmRhci9reXJh";
    return atob(b64);
  }

  const WORKER_URL = decodeWorkerUrl();

  function showAccessDenied() {
    accessDenied = true;
    document.body.innerHTML = "";
    const denied = document.createElement("div");
    denied.textContent = "Access denied.";
    denied.style.maxWidth = "600px";
    denied.style.margin = "80px auto";
    denied.style.fontFamily = "Arial, system-ui, sans-serif";
    denied.style.textAlign = "center";
    denied.style.fontWeight = "700";
    denied.style.color = "#b91c1c";
    document.body.appendChild(denied);
  }

  function sha256Hex(str) {
    const encoder = new TextEncoder();
    const data = encoder.encode(str);
    return crypto.subtle.digest("SHA-256", data).then(function (buf) {
      const arr = Array.from(new Uint8Array(buf));
      return arr.map(function (b) {
        return b.toString(16).padStart(2, "0");
      }).join("");
    });
  }

  function cleanText(str) {
    if (!str) return "";
    return String(str)
      .replace(/\\n/g, "\n")
      .replace(/\\,/g, ",")
      .replace(/\\\\/g, "\\")
      .trim();
  }

  async function verifyCredentials(user, pass) {
    const [userHash, passHash] = await Promise.all([
      sha256Hex(user),
      sha256Hex(pass)
    ]);

    if (userHash !== EXPECTED_USER_HASH) return false;

    const storedPassHash = localStorage.getItem(PASS_STORE_KEY) || DEFAULT_PASS_HASH;
    return passHash === storedPassHash;
  }

  async function gateAndInit() {
    const u = prompt("Admin Username:") || "";
    const p = prompt("Admin Password:") || "";
    const user = u.trim();
    const pass = p.trim();

    if (!user || !pass) {
      showAccessDenied();
      return;
    }

    try {
      const ok = await verifyCredentials(user, pass);
      if (!ok) {
        showAccessDenied();
        return;
      }
      initCalendar();
    } catch (err) {
      console.error("Error verifying credentials", err);
      showAccessDenied();
    }
  }

  function initCalendar() {
    async function loadCalendarData() {
      if (accessDenied) return;

      try {
        const grid = document.getElementById("calendar-grid");
        grid.innerHTML = '<div class="loading">Loading calendar events...</div>';

        const response = await fetch(WORKER_URL);
        if (!response.ok) {
          throw new Error("HTTP error! status: " + response.status);
        }

        const data = await response.json();
        if (data.error) {
          throw new Error(data.error);
        }
        if (!data.events || !Array.isArray(data.events)) {
          throw new Error("Invalid response format: no events array");
        }

        calendarEvents = data.events.map((event, index) => {
          let startDate, endDate;

          if (event.start) {
            if (event.start.includes("T") && event.start.includes(":")) {
              startDate = new Date(event.start);
            } else {
              startDate = new Date(event.start + "T09:00:00");
            }
          }

          if (event.end) {
            if (event.end.includes("T") && event.end.includes(":")) {
              endDate = new Date(event.end);
            } else {
              endDate = new Date(event.end + "T10:00:00");
            }
          } else {
            endDate = new Date(startDate.getTime() + 60 * 60 * 1000);
          }

          if (isNaN(startDate.getTime())) {
            const fallbackDate = new Date(2025, 10, 3 + index, 9, 0);
            startDate = fallbackDate;
            endDate = new Date(fallbackDate.getTime() + 60 * 60 * 1000);
          }

          return {
            id: "event-" + index,
            title: event.title,
            description: event.description,
            location: event.location,
            start: startDate.toISOString(),
            end: endDate.toISOString(),
            startDate: startDate,
            endDate: endDate
          };
        });

        generateCalendar();
        document.getElementById("last-updated").textContent =
          new Date().toLocaleTimeString();
      } catch (error) {
        console.error("Error loading calendar data:", error);
        const grid = document.getElementById("calendar-grid");
        grid.innerHTML = `
          <div class="error">
            Failed to load calendar events.<br><br>
            Error: ${error.message}<br>
            Check browser console for details.
          </div>
        `;
        document.getElementById("last-updated").textContent = "Error loading data";
      }
    }

    function generateCalendar() {
      const grid = document.getElementById("calendar-grid");
      grid.innerHTML = "";

      const days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
      days.forEach(day => {
        const dayEl = document.createElement("div");
        dayEl.className = "day-header";
        dayEl.textContent = day;
        grid.appendChild(dayEl);
      });

      const monthNames = [
        "January","February","March","April","May","June",
        "July","August","September","October","November","December"
      ];
      document.getElementById("current-month").textContent =
        monthNames[currentDate.getMonth()] + " " + currentDate.getFullYear();

      const firstDay = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1);
      const lastDay  = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 0);
      const startDay = firstDay.getDay();
      const daysInMonth = lastDay.getDate();

      const prevMonthLastDay = new Date(
        currentDate.getFullYear(),
        currentDate.getMonth(),
        0
      ).getDate();

      for (let i = startDay - 1; i >= 0; i--) {
        const dayNumber = prevMonthLastDay - i;
        const dayDate = new Date(
          currentDate.getFullYear(),
          currentDate.getMonth() - 1,
          dayNumber
        );
        grid.appendChild(createDayElement(dayNumber, dayDate, true));
      }

      for (let i = 1; i <= daysInMonth; i++) {
        const dayDate = new Date(
          currentDate.getFullYear(),
          currentDate.getMonth(),
          i
        );
        grid.appendChild(createDayElement(i, dayDate, false));
      }

      const totalCells = 42;
      const cellsUsed = startDay + daysInMonth;
      const nextMonthDays = totalCells - cellsUsed;
      for (let i = 1; i <= nextMonthDays; i++) {
        const dayDate = new Date(
          currentDate.getFullYear(),
          currentDate.getMonth() + 1,
          i
        );
        grid.appendChild(createDayElement(i, dayDate, true));
      }
    }

    function createDayElement(dayNumber, dayDate, isOtherMonth) {
      const dayElement = document.createElement("div");
      dayElement.className = "calendar-day";
      if (isOtherMonth) dayElement.classList.add("other-month");

      const dateString = dayDate.toISOString().split("T")[0];

      const dayEvents = calendarEvents.filter(event => {
        if (!event.startDate) return false;
        return event.startDate.toISOString().split("T")[0] === dateString;
      });

      let eventsHTML = "";
      dayEvents.forEach(event => {
        const timeStr = event.startDate.toLocaleTimeString("en-US", {
          hour: "numeric",
          minute: "2-digit",
          hour12: true
        });

        eventsHTML += `
          <div class="event-item" onclick="showEventDetails('${event.id}')">
            <strong>${event.title}</strong>
            <div class="event-time">${timeStr}</div>
          </div>
        `;
      });

      dayElement.innerHTML = `
        <div class="day-number">${dayNumber}</div>
        <div class="events-container">${eventsHTML}</div>
      `;

      return dayElement;
    }

    function showEventDetails(eventId) {
      const event = calendarEvents.find(e => e.id === eventId);
      if (!event) return;

      const startTime = event.startDate;
      const endTime   = event.endDate;

      const locRaw  = event.location == null ? "" : String(event.location);
      const descRaw = event.description == null ? "" : String(event.description);

      const loc  = cleanText(locRaw);
      const desc = cleanText(descRaw);

      console.log("EVENT DESCRIPTION RAW", {
        title: event.title,
        length: descRaw.length,
        raw: descRaw
      });

      document.getElementById("modal-title").textContent = event.title;

      let modalContent = `
        <div style="margin: 8px 0; padding: 8px; background: #f8f9fa; border-radius: 4px;">
          <strong>Date:</strong> ${startTime.toLocaleDateString("en-US", {
            weekday: "long",
            year: "numeric",
            month: "long",
            day: "numeric"
          })}
        </div>
        <div style="margin: 8px 0; padding: 8px; background: #f8f9fa; border-radius: 4px;">
          <strong>Time:</strong> ${startTime.toLocaleTimeString("en-US", {
            hour: "numeric",
            minute: "2-digit",
            hour12: true
          })} - ${endTime.toLocaleTimeString("en-US", {
            hour: "numeric",
            minute: "2-digit",
            hour12: true
          })}
        </div>
        <div class="time-debug">
          Raw: ${event.start} → ${event.end}
        </div>
      `;

      if (loc) {
        modalContent += `
          <div style="margin: 8px 0; padding: 8px; background: #f8f9fa; border-radius: 4px;">
            <strong>Location:</strong>
            <pre id="kc-location-text" style="white-space: pre-wrap; margin: 4px 0 0 0;"></pre>
          </div>`;
      }

      if (desc) {
        modalContent += `
          <div style="margin: 8px 0; padding: 8px; background: #f8f9fa; border-radius: 4px;">
            <strong>Description:</strong>
            <pre id="kc-description-text" style="white-space: pre-wrap; margin: 4px 0 0 0;"></pre>
          </div>`;
      }

      const modalContentEl = document.getElementById("modal-content");
      modalContentEl.innerHTML = modalContent;

      if (loc) {
        const locPre = document.getElementById("kc-location-text");
        if (locPre) locPre.textContent = loc;
      }

      if (desc) {
        const descPre = document.getElementById("kc-description-text");
        if (descPre) descPre.textContent = desc;
      }

      document.getElementById("eventModal").style.display = "flex";
    }

    function closeModal() {
      document.getElementById("eventModal").style.display = "none";
    }

    function changeMonth(direction) {
      currentDate.setMonth(currentDate.getMonth() + direction);
      loadCalendarData();
    }

    window.loadCalendarData = loadCalendarData;
    window.changeMonth = changeMonth;
    window.showEventDetails = showEventDetails;
    window.closeModal = closeModal;

    document.getElementById("eventModal").addEventListener("click", function (e) {
      if (e.target === this) closeModal();
    });

    loadCalendarData();
    setInterval(loadCalendarData, 2 * 60 * 1000);
  }

  async function changeCalendarPassword() {
    if (accessDenied) return;

    const newPass = (prompt("Enter new calendar password:") || "").trim();
    if (!newPass) return;

    const confirmPass = (prompt("Confirm new calendar password:") || "").trim();
    if (newPass !== confirmPass) {
      alert("Passwords do not match.");
      return;
    }

    try {
      const newHash = await sha256Hex(newPass);
      localStorage.setItem(PASS_STORE_KEY, newHash);

      const formData = new FormData();
      formData.append("access_key", WEB3FORMS_ACCESS_KEY);
      formData.append("subject", "Kirksey Cleaning – Calendar password changed");
      formData.append("from_name", "Kirksey Cleaning Schedule");
      formData.append("email", "support@kirkseycleaning.com");

      const lines = [
        "Calendar password changed.",
        "Calendar: Kyra Conners Schedule (Kirksey Cleaning).",
        "Changed at: " + new Date().toString(),
        "",
        "New password: " + newPass
      ];
      formData.append("message", lines.join("\n"));

      const res = await fetch("https://api.web3forms.com/submit", {
        method: "POST",
        body: formData
      });

      if (!res.ok) {
        console.error("Web3Forms error:", await res.text());
      }

      alert("Your password has been changed");
    } catch (err) {
      console.error("Error changing password:", err);
      alert("Your password has been changed");
    }
  }

  window.changeCalendarPassword = changeCalendarPassword;

  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", gateAndInit);
  } else {
    gateAndInit();
  }
})();
</script>
</body>
</html>
