<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Mochi Notes - Calendar</title>
  <link href="https://fonts.googleapis.com/css2?family=Baloo+2&family=Quicksand&display=swap" rel="stylesheet">
  <style>
    :root {
      --pink: #ff6b9c;
      --yellow: #f6a700;
      --black: #333;
      --white: #fff;
      --soft-yellow: #fff7cc;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    html, body {
      height: 100%;
      background-color: var(--white);
      font-family: 'Quicksand', sans-serif;
      overflow-x: hidden;
    }

    body {
      background-image: url("images/Background.jpg");
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
    }

    #overlay {
      position: absolute;
      top: 0; left: 0;
      width: 100%;
      height: 100%;
      background: rgba(255, 240, 245, 0.6);
      z-index: -1;
    }

    .container {
      max-width: 900px;
      margin: 100px auto 0;
      padding: 20px;
      text-align: center;
      animation: fadeIn 2s ease-out forwards;
      opacity: 0;
      transform: translateY(30px);
    }

    @keyframes fadeIn {
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    h1 {
      font-family: 'Baloo 2', cursive;
      font-size: 3.4em;
      color: var(--pink);
      margin-bottom: 10px;
    }

    .subtext {
      font-size: 1.3em;
      color: var(--yellow);
      margin-bottom: 20px;
    }

    .calendar-nav {
      margin-bottom: 20px;
    }

    select, button {
      font-size: 1em;
      padding: 8px 12px;
      border-radius: 8px;
      border: none;
      margin: 0 5px;
      font-family: 'Quicksand', sans-serif;
    }

select {
  background-color: #fff4cc; /* 淡黄背景 */
  color: var(--black);
  border: 1px solid var(--yellow);
  padding-right: 30px;
  appearance: none; /* 去除默认箭头，视觉更统一 */
  background-image: url("data:image/svg+xml,%3Csvg fill='%23f6a700' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 16px;
}


    button {
      background-color: var(--pink);
      color: white;
      cursor: pointer;
    }

    .calendar {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 12px;
      background-color: white;
      border-radius: 20px;
      padding: 30px 25px;
      width: 100%;
      max-width: 900px;
      box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    }

    .calendar div {
      padding: 18px 10px;
      background-color: #ffeef3;
      border-radius: 12px;
      font-weight: bold;
      font-size: 1.3em;
      cursor: pointer;
      user-select: none;
    }

    .calendar .header {
      background: none;
      color: var(--black);
      font-weight: 600;
      font-size: 1.1em;
      cursor: default;
    }

    #musicToggle {
      position: absolute;
      top: 20px;
      right: 60px;
      font-size: 1.8em;
      background: none;
      border: none;
      cursor: pointer;
      color: var(--pink);
    }

    .icon-bar {
      position: absolute;
      bottom: 20px;
      right: 20px;
      display: flex;
      gap: 30px;
      text-align: center;
    }

    .icon {
      display: flex;
      flex-direction: column;
      align-items: center;
      cursor: pointer;
    }

    .icon img {
      width: 80px;
      height: 80px;
      object-fit: contain;
    }

    .icon p {
      font-size: 1em;
      color: var(--black);
      margin-top: 5px;
    }

    /* Task editor */
    #taskEditor {
      display: none;
      position: absolute;
      background: var(--soft-yellow);
      border-radius: 15px;
      padding: 20px;
      width: 320px;
      box-shadow: 0 5px 20px rgba(0,0,0,0.15);
      z-index: 10;
    }

    #taskEditor h3 {
      margin-bottom: 12px;
      color: var(--black);
    }

    #newTaskInput {
      width: 100%;
      padding: 8px;
      margin-top: 10px;
      border-radius: 10px;
      border: 1px solid #ccc;
    }

    #taskEditor button.addBtn {
      margin-top: 10px;
      background-color: var(--pink);
      color: white;
      border: none;
      border-radius: 10px;
      padding: 8px 12px;
      cursor: pointer;
    }

/* 优化 Timer 弹窗 */
#timerPopup {
  background: #fff;
  border-radius: 15px;
  padding: 20px;
  width: 260px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

#timerPopup h4,
#musicBox h4 {
  text-align: center;
  font-size: 1.4em;
  font-weight: bold;
  margin-bottom: 15px;
}

#timerPopup .custom-time {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
}

#timerPopup input[type="number"] {
  padding: 6px;
  border-radius: 8px;
  border: 1px solid #f6a700;  /* 改橘色 */
  width: 60px;
  text-align: center;
  font-size: 0.95em;
  background-color: #ffe6c2;  /* 柔和橘 */
  color: var(--black);
}


#timerPopup button {
  background-color: var(--pink);
  color: white;
  padding: 6px 10px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.9em;
}

/* 优化 Music Box */
#musicBox {
  background: ##f7cab7;
  border-radius: 15px;
  padding: 20px;
  width: 260px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

#musicBox h4 {
  text-align: center;
  font-size: 1.3em;
  color: var(--pink);
  margin-bottom: 15px;
}

#musicBox button {
  background-color: var(--pink);
  color: white;
  padding: 6px 10px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.9em;
}

  </style>
</head>
<body>
  <div id="overlay"></div>

  <div class="container">
    <h1>Hello again, Mochi is here to help~</h1>
    <p class="subtext">Gentle effort still means you're trying~</p>

    <div class="calendar-nav">
      <button onclick="changeMonth(-1)">← Prev</button>
      <select id="yearSelect"></select>
      <select id="monthSelect"></select>
      <button onclick="goToMonth()">Go</button>
      <button onclick="changeMonth(1)">Next →</button>
    </div>

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


<div id="taskEditor">
  <button onclick="closeTaskEditor()" style="
    position: absolute;
    top: 8px;
    right: 8px;
    background: var(--pink);
    color: white;
    border: none;
    border-radius: 50%;
    width: 26px;
    height: 26px;
    font-weight: bold;
    cursor: pointer;
    font-size: 1em;
    z-index: 10;
  ">×</button>

  <h3 id="editorDate">Tasks for ...</h3>
  <div id="taskList"></div>
  <input type="text" id="newTaskInput" placeholder="Add a task..." />
  <button class="addBtn" onclick="addTask()">Add</button>
</div>


<!-- 任务编辑器（已有） -->
<div id="taskEditor">
  <h3 id="editorDate">Tasks for ...</h3>
  <div id="taskList"></div>
  <input type="text" id="newTaskInput" placeholder="Add a task..." />
  <button class="addBtn" onclick="addTask()">Add</button>
</div>

<!-- Timer 窗口 -->
<div id="timerPopup" style="display: none; position: absolute; background: #fff; border-radius: 12px; box-shadow: 0 0 15px rgba(0,0,0,0.15); padding: 20px; width: 260px; z-index: 20;">

<!-- 同时关闭两个窗口的小按钮 -->
<button onclick="closeBoth()" style="
  position: absolute;
  top: 6px;
  right: 6px;
  background: var(--pink);
  color: white;
  border: none;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  font-weight: bold;
  cursor: pointer;
  font-size: 1em;
">×</button>


  <h4 style="color: var(--pink); margin-bottom: 10px;">Set Timer</h4>
  <div style="display: flex; gap: 8px; margin-bottom: 8px;">
    <button onclick="startTimer(5)">5 min</button>
    <button onclick="startTimer(15)">15 min</button>
    <button onclick="startTimer(25)">25 min</button>
  </div>
  <div style="margin-bottom: 10px;">
    <label>Custom: </label>
    <input type="number" id="customMin" placeholder="Min" style="width: 50px;"> :
    <input type="number" id="customSec" placeholder="Sec" style="width: 50px;">
    <button onclick="startCustomTimer()">Go</button>
  </div>
  <div id="countdown" style="font-size: 2em; color: var(--black); margin-bottom: 10px;">00:00</div>
  <button onclick="closeTimer()">Close</button>
</div>

<!-- Music Player 弹窗 -->
<div id="musicBox" style="display: none; position: absolute; background: #fff; border-radius: 12px; box-shadow: 0 0 15px rgba(0,0,0,0.15); padding: 15px; width: 260px; z-index: 15;">
  <h4 style="color: var(--pink); margin-bottom: 10px;">Pick Music</h4>
  <div style="display: flex; flex-wrap: wrap; gap: 10px;">
    <button onclick="playMusic('with-lyrics-upbeat')">🎤 Upbeat</button>
    <button onclick="playMusic('with-lyrics-lyrical')">🎤 Lyrical</button>
    <button onclick="playMusic('no-lyrics-upbeat')">🎧 Upbeat</button>
    <button onclick="playMusic('no-lyrics-relax')">🎧 Relaxing</button>
  </div>
  <button onclick="stopMusic()" style="margin-top: 10px;">Stop</button>
  <button onclick="closeMusicBox()" style="margin-top: 5px;">Close</button>
</div>

<!-- Emoji 反馈动画 -->
<div id="feedback" style="display: none; position: fixed; top: 40%; left: 50%; transform: translate(-50%, -50%); font-size: 2.5em; z-index: 99;"></div>


  <button id="musicToggle" onclick="toggleMusic()">🎵</button>

  <div class="icon-bar">
    <div class="icon" onclick="location.href='transition-to-stats.html'">

      <img src="images/stats.png" alt="Stats">
      <p>Stats</p>
    </div>
    <div class="icon" onclick="location.href='settings.html'">
      <img src="images/settings.png" alt="Settings">
      <p>Settings</p>
    </div>
  </div>

  <script>
    const calendarEl = document.getElementById('calendar');
    const yearSelect = document.getElementById('yearSelect');
    const monthSelect = document.getElementById('monthSelect');
    const editor = document.getElementById('taskEditor');
    const editorDate = document.getElementById('editorDate');
    let currentDate = new Date();
    let taskData = {};
    let selectedDate = "";

    const music = new Audio("music/calendar-music.mp3");
    music.loop = true;
    music.volume = 0.4;
    const musicBtn = document.getElementById('musicToggle');
    let playing = false;

function makeDraggable(elem) {
  let offsetX = 0, offsetY = 0, dragging = false;

  elem.addEventListener('mousedown', (e) => {
    offsetX = e.clientX - elem.offsetLeft;
    offsetY = e.clientY - elem.offsetTop;
    dragging = true;
    elem.style.cursor = "move";
  });

  document.addEventListener('mousemove', (e) => {
    if (dragging) {
      elem.style.left = (e.clientX - offsetX) + 'px';
      elem.style.top = (e.clientY - offsetY) + 'px';
    }
  });

  document.addEventListener('mouseup', () => {
    dragging = false;
    elem.style.cursor = "default";
  });
}


    function toggleMusic() {
      if (playing) {
        music.pause();
        musicBtn.textContent = "🎵❌";
      } else {
        music.play();
        musicBtn.textContent = "🎵";
      }
      playing = !playing;
    }

    function populateSelectors() {
      for (let y = 2020; y <= 2030; y++) {
        let opt = document.createElement("option");
        opt.value = y;
        opt.text = y;
        yearSelect.add(opt);
      }

      const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", 
                      "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
      months.forEach((m, i) => {
        let opt = document.createElement("option");
        opt.value = i;
        opt.text = m;
        monthSelect.add(opt);
      });

      yearSelect.value = currentDate.getFullYear();
      monthSelect.value = currentDate.getMonth();
    }

    function buildCalendar(year, month) {
      calendarEl.innerHTML = "";
      const headers = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
      headers.forEach(day => {
        const header = document.createElement("div");
        header.classList.add("header");
        header.textContent = day;
        calendarEl.appendChild(header);
      });

      const firstDay = new Date(year, month, 1).getDay();
      const lastDate = new Date(year, month + 1, 0).getDate();

      for (let i = 0; i < firstDay; i++) {
        const blank = document.createElement("div");
        blank.style.visibility = "hidden";
        calendarEl.appendChild(blank);
      }

      for (let d = 1; d <= lastDate; d++) {
        const cell = document.createElement("div");
        cell.textContent = d;
        cell.addEventListener("click", (e) => {
          selectedDate = `${year}-${month + 1}-${d}`;
          editorDate.textContent = `Tasks for ${selectedDate}`;
          editor.style.display = "block";

          const rect = e.target.getBoundingClientRect();
          editor.style.top = `${rect.top + window.scrollY}px`;
          editor.style.left = `${rect.right + 20}px`;

          renderTaskList();
        });
        calendarEl.appendChild(cell);
      }
    }

    function changeMonth(offset) {
      currentDate.setMonth(currentDate.getMonth() + offset);
      yearSelect.value = currentDate.getFullYear();
      monthSelect.value = currentDate.getMonth();
      buildCalendar(currentDate.getFullYear(), currentDate.getMonth());
    }

    function goToMonth() {
      const year = parseInt(yearSelect.value);
      const month = parseInt(monthSelect.value);
      currentDate = new Date(year, month, 1);
      buildCalendar(year, month);
    }

    function addTask() {
      const input = document.getElementById("newTaskInput");
      const text = input.value.trim();
      if (!text) return;

      if (!taskData[selectedDate]) taskData[selectedDate] = [];
      if (taskData[selectedDate].length >= 10) {
        alert("You can only add up to 10 tasks.");
        return;
      }

      taskData[selectedDate].push({ text, done: false });
      input.value = "";
      renderTaskList();
    }

    function renderTaskList() {
      const list = document.getElementById("taskList");
      list.innerHTML = "";

      (taskData[selectedDate] || []).forEach((task, idx) => {
        const row = document.createElement("div");
        row.style.display = "flex";
        row.style.alignItems = "center";
        row.style.justifyContent = "space-between";
        row.style.marginBottom = "6px";

        const checkbox = document.createElement("input");
        checkbox.type = "checkbox";
        checkbox.checked = task.done;
        checkbox.onchange = () => {
          task.done = checkbox.checked;
          renderTaskList();
        };

        const label = document.createElement("span");
        label.textContent = `${idx + 1}. ${task.text}`;
        label.style.marginLeft = "8px";
        label.style.flexGrow = "1";
        if (task.done) label.style.textDecoration = "line-through";

// 💡 添加点击 label 的触发器（弹出计时器 & 音乐）
label.onclick = (e) => {
  const editorRect = document.getElementById('taskEditor').getBoundingClientRect();

  // 弹出 Timer（任务编辑器右上角）
  const timerBox = document.getElementById("timerPopup");
  timerBox.style.display = "block";
  timerBox.style.top = `${editorRect.top + window.scrollY}px`;
  timerBox.style.left = `${editorRect.right + 20}px`;

  // 弹出 MusicBox（Timer 正下方）
  const musicBox = document.getElementById("musicBox");
  musicBox.style.display = "block";
  musicBox.style.top = `${editorRect.top + timerBox.offsetHeight + 10 + window.scrollY}px`;
  musicBox.style.left = `${editorRect.right + 20}px`;
};


        const del = document.createElement("button");
        del.textContent = "❌";
        del.style.border = "none";
        del.style.background = "transparent";
        del.style.cursor = "pointer";
        del.onclick = () => {
          taskData[selectedDate].splice(idx, 1);
          renderTaskList();
        };

        row.appendChild(checkbox);
        row.appendChild(label);
        row.appendChild(del);
        list.appendChild(row);
      });
    }

    window.addEventListener("DOMContentLoaded", () => {
makeDraggable(document.getElementById('timerPopup'));
makeDraggable(document.getElementById('musicBox'));

      populateSelectors();
      buildCalendar(currentDate.getFullYear(), currentDate.getMonth());

      const greeting = new SpeechSynthesisUtterance("Hello again, Mochi is here to help. Let's get started!");
      greeting.rate = 1.05;
      greeting.pitch = 1.15;
      window.speechSynthesis.speak(greeting);

      greeting.onend = () => {
        setTimeout(() => {
          music.play();
          playing = true;
        }, 300);

      };
    });

// 🎵 音乐播放器功能（任务专属）
const musicOptions = {
  'with-lyrics-upbeat': [
    'music/11.mp3',
    'music/22.mp3',
    'music/33.mp3'
  ],
  'with-lyrics-lyrical': [
    'music/111.mp3',
    'music/222.mp3',
    'music/333.mp3'
  ],
  'no-lyrics-upbeat': [
    'music/1.mp3',
    'music/2.mp3',
    'music/3.mp3'
  ],
  'no-lyrics-relax': [
    'music/1111.mp3',
    'music/2222.mp3',
    'music/3333.mp3'
  ]
};


let taskMusic = new Audio();

function playMusic(type) {
  const list = musicOptions[type];
  const pick = list[Math.floor(Math.random() * list.length)];
  taskMusic.pause();
  taskMusic = new Audio(pick);
  taskMusic.loop = true;
  taskMusic.volume = 0.4;
  taskMusic.play();
}

function stopMusic() {
  taskMusic.pause();
  taskMusic.currentTime = 0;
}

function closeMusicBox() {
  document.getElementById("musicBox").style.display = "none";
}

// ⏲️ 倒计时功能
let timerInterval;

function startTimer(min) {
  const seconds = min * 60;
  startCountdown(seconds);
}

function startCustomTimer() {
  const min = parseInt(document.getElementById('customMin').value) || 0;
  const sec = parseInt(document.getElementById('customSec').value) || 0;
  const total = min * 60 + sec;
  if (total > 0) startCountdown(total);
}

function startCountdown(totalSeconds) {
  let remaining = totalSeconds;
  const display = document.getElementById('countdown');
  display.textContent = formatTime(remaining);

  clearInterval(timerInterval);
  timerInterval = setInterval(() => {
    remaining--;
    if (remaining <= 0) {
      clearInterval(timerInterval);
      display.textContent = "00:00";
      showFeedback();
      const endVoice = new SpeechSynthesisUtterance("Time’s up! Great job, take a soft break.");
      endVoice.pitch = 1.2;
      endVoice.rate = 1.1;
      speechSynthesis.speak(endVoice);
    } else {
      display.textContent = formatTime(remaining);
    }
  }, 1000);
}

function formatTime(sec) {
  const m = String(Math.floor(sec / 60)).padStart(2, '0');
  const s = String(sec % 60).padStart(2, '0');
  return `${m}:${s}`;
}

function closeTimer() {
  clearInterval(timerInterval);
  document.getElementById("timerPopup").style.display = "none";
}

function closeBoth() {
  document.getElementById("timerPopup").style.display = "none";
  document.getElementById("musicBox").style.display = "none";
  stopMusic();
}

function closeTaskEditor() {
  editor.style.display = "none";
}


// 🌸 鼓励语动画反馈
const feedbacks = ["🌟 You're shining!", "🌸 You did well!", "💖 Little wins matter!", "🍃 Breathe & smile!"];

function showFeedback() {
  const feedback = document.getElementById('feedback');
  const msg = feedbacks[Math.floor(Math.random() * feedbacks.length)];
  feedback.innerHTML = msg;
  feedback.style.display = "block";
  feedback.style.opacity = 1;

  setTimeout(() => {
    feedback.style.opacity = 0;
    setTimeout(() => {
      feedback.style.display = "none";
    }, 1000);
  }, 3000);
}

  </script>
</body>
</html>