<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta name="keywords" content="HTML,CSS,Javascript">
		<meta name="description" content="mental health">
		<link rel="shortcut icon" href="favicon.ico">
		<title>Mood Calendar</title>
		<style>
			/* 通用样式 */
			body {
				font-family: "Times New Roman", Times, serif;
				background-color: #f0f0f0;
				margin: 0;
				padding: 0;
				display: flex;
				flex-direction: column;
				align-items: center;
			}

			/* 页面容器 */
			.container {
				width: 100%;
				max-width: 1200px;
				background-color: #ffffff;
				padding: 0;
				box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
			}

			/* 导航栏部分 */
			.navbar {

				background-color: #004080;
				padding: 20px;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}

			.navbar img {
				width: 100px;
				height: auto;
			}

			.nav-links {
				display: flex;
				gap: 20px;
			}

			.nav-links a {
				text-decoration: none;
				color: #ffffff;
				font-size: 18px;
				transition: color 0.3s;
			}

			.nav-links a:hover {
				color: #ffdd00;
			}

			/* Hero 部分 */
			.hero {
				position: relative;
				width: 100%;
				height: 500px;
				overflow: hidden;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
			}

			.hero-video {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				object-fit: cover;
				z-index: 1;
			}

			.hero-content {
				position: relative;
				display: flex;
				flex-direction: column;
				align-items: center;
				z-index: 2;
				color: #ffffff;
				text-align: center;
				padding: 20px;
			}

			.hero h1 {
				font-size: 48px;
				margin-bottom: 10px;
			}

			.hero p {
				font-size: 24px;
				margin-bottom: 20px;
			}

			.hero .cta-buttons {
				display: flex;
				gap: 20px;
			}

			.hero .cta-buttons a {
				text-decoration: none;
				font-size: 20px;
				padding: 15px 30px;
				border-radius: 25px;
				transition: background-color 0.3s;
			}

			.hero .cta-buttons .cta-primary {
				background: linear-gradient(to right, #00b4db, #0083b0);
				color: #ffffff;
			}

			.hero .cta-buttons .cta-primary:hover {
				background: linear-gradient(to right, #0083b0, #00b4db);
			}

			/* 主体内容样式 */
				{
				font-family: 'Poppins', sans-serif;
				margin: 0;
				padding: 0;
				background-color: #f4f7fb;
				text-align: center;
			}

			h1 {
				color: #ffffff;
			}

			h3 {
				color: #8b8b8b;
			}

			.calendar-controls {
				margin: 20px;
			}

			.calendar-controls select,
			.calendar-controls input {
				padding: 8px;
				font-size: 16px;
				margin: 0 5px;
				border-radius: 5px;
				border: 1px solid #ddd;
			}
			.calendar-controls select{
				margin-left: 0;
			}

			.calendar {
				display: grid;
				grid-template-columns: repeat(7, 120px);
				grid-template-rows: repeat(5, 120px);
				gap: 10px;
				justify-content: center;
				margin-bottom: 30px;
			}

			.day {
				background-color: #ffffff;
				border: 1px solid #ddd;
				display: flex;
				justify-content: center;
				align-items: center;
				cursor: pointer;
				transition: background-color 0.3s, transform 0.2s;
				position: relative;
				border-radius: 8px;
			}

			.day:hover {
				background-color: #e6f7ff;
				transform: scale(1.1);
			}

			.day .task {
				position: absolute;
				bottom: 5px;
				font-size: 12px;
				color: #888;
			}
			.day .task-h{
				position: absolute;
				top: 5px;
				font-size: 12px;
				color: #888;
			}

			.mood-select {
				margin-top: 20px;
				padding: 0 20px;
			}

			.mood-select button {
				padding: 12px;
				margin: 0 10px;
				cursor: pointer;
				border-radius: 50%;
				font-size: 20px;
				background-color: #ffffff;
				border: 2px solid #ddd;
				transition: background-color 0.3s, transform 0.2s;
			}
			.mood-select .first-child{margin-left: 0;}

			.mood-select button:hover {
				background-color: #cce7ff;
				transform: scale(1.2);
			}

			footer {
				margin-top: 30px;
				color: #555;
			}

			/* 联系我们部分 */
			.contact {

				background-color: #ffffff;
				padding: 40px;
				text-align: center;
			}

			.contact h2 {
				font-size: 36px;
				margin-bottom: 20px;
			}

			.contact p {
				font-size: 18px;
				line-height: 1.6;
			}

			/* 响应式设计 */
			@media (max-width: 768px) {
				.navbar {
					flex-direction: column;
					gap: 20px;
				}

				.hero h1 {
					font-size: 36px;
				}

				.hero p {
					font-size: 20px;
				}

				.hero .cta-buttons {
					flex-direction: column;
				}

				.service-cards {
					flex-direction: column;
				}

				.service-card {
					width: 80%;
					margin: 0 auto;
					margin-bottom: 40px;
				}
			}
		</style>
	</head>
	<body>
		<div class="container">
			<!-- Logo 部分 -->
			<div class="navbar">
				<a href="index.html"><img src="logo.svg" width="50" height="50"></a>
				<div class="nav-links">
					<a href="articles.html">Psychology Articles</a>
					<a href="methods.html">Relaxation Methods</a>
					<a href="mood.html">Mood Calendar</a>
				</div>
			</div>

			<!-- Hero 部分 -->
			<div class="hero">
				<video autoplay muted loop playsinline class="hero-video">
					<source src="video.mp4" type="video/mp4">
				</video>
				<div class="hero-content">
					<h1>Growing Minds, Thriving Lives</h1>
					<p>Your resource for enhancing emotional well-being and achieving inner peace.</p>
					<div class="cta-buttons">
						<a href=" " class="cta-primary">Learn More</a>
					</div>
				</div>
			</div>
			<!-- 主体内容 -->

			<h1>Mood Calendar</h1>
			<div class="calendar-controls">
				<select id="month-select" onchange="updateCalendar()">
					<option value="0">January</option>
					<option value="1">February</option>
					<option value="2">March</option>
					<option value="3">April</option>
					<option value="4">May</option>
					<option value="5">June</option>
					<option value="6">July</option>
					<option value="7">August</option>
					<option value="8">September</option>
					<option value="9">October</option>
					<option value="10">November</option>
					<option value="11">December</option>
				</select>

				<input type="number" id="year-select" value="2024" onchange="updateCalendar()">
			</div>

			<div class="calendar" id="calendar">
				<!-- Days will be populated here by JavaScript -->
			</div>

			<div class="mood-select">
				<h2>Select your mood:</h2>
				<button class="first-child" onclick="setMood('😊')">😊</button>
				<button onclick="setMood('😢')">😢</button>
				<button onclick="setMood('😡')">😡</button>
				<button onclick="setMood('😴')">😴</button>
				<button onclick="setMood('😎')">😎</button>
			</div>

			<!-- 联系我们部分 -->
			<div class="contact">
				<h2>Contact us</h2>
				<p>If you have any questions or suggestions, please feel free to contact us through our contact page.<br>
					We take user feedback very seriously and will do our best to help and support you.<br>
					E-mail: Cindy071103@gmail.com<br>
					Phone/WeChat: 18002960067<br>
					Address: Dongguan Hanlin Experimental School.
				</p>
			</div>

			<script>
				const calendarElement = document.getElementById('calendar');
				const monthSelect = document.getElementById('month-select');
				const yearSelect = document.getElementById('year-select');
				let selectedDay = null;

				const weeklyTasks = [
					"Sing a song for yourself 🎤",
					"Cook a meal for yourself 🍳",
					"Take a long walk 🚶‍♂️",
					"Read a book 📖",
					"Write down three things you're grateful for ✍️"
				];

				// Update calendar when month or year changes
				function updateCalendar() {
					const month = parseInt(monthSelect.value);
					const year = parseInt(yearSelect.value);
					generateCalendar(month, year);
				}
				
				function init(){
					yearSelect.value = 2025
					monthSelect.value = 8
					generateCalendar(8, 2025);
				}
				init()
				
				// Generate calendar based on selected month and year
				function generateCalendar(month, year) {
					calendarElement.innerHTML = ''; // Clear existing days
					const daysInMonth = new Date(year, month + 1, 0).getDate(); // Get number of days in the month

					let isok_index = -1;
					for (let i = 1; i <= daysInMonth; i++) {
						isok_index = -1
						const dayElement = document.createElement('div');
						dayElement.className = 'day';
						
						let rldaya = `${year}-${month}-${i}`
						let tmpData = rljh('',3,0)
						for (let i = 0; i < tmpData.length; i++) {
							if(tmpData[i].ri == rldaya){
								isok_index = i
							}
						}
						if(isok_index>-1){
							const taskh = document.createElement('div');
							taskh.className = 'task-h';
							taskh.innerText = tmpData[isok_index].value;
							dayElement.appendChild(taskh);
						}
						
						// dayElement.innerText = i;
						const con = document.createElement('div');
						con.className = 'conn';
						con.innerText = i;
						con.setAttribute('day',i);
						dayElement.appendChild(con);
						
						dayElement.onclick = () => selectDay(dayElement);
						dayElement.ondblclick  = () => dblclickDay(dayElement);
						let tmps = rljh("",3,0)
						// Add a weekly task every Monday (for example)
						if (new Date(year, month, i).getDay() === 1) { // Monday
							const task = document.createElement('div');
							task.className = 'task';
							task.innerText = getWeeklyTask(i);
							dayElement.appendChild(task);
						}

						calendarElement.appendChild(dayElement);
					}
				}

				// Get a weekly task based on the week number
				function getWeeklyTask(day) {
					const weekNumber = Math.floor((day - 1) / 7);
					return weeklyTasks[weekNumber % weeklyTasks.length];
				}
				function dblclickDay(dayElement){
					// 创建输入框
					const input = document.createElement('input');
					input.type = 'text';
					input.style.width = "100%";
					input.placeholder = "Please enter content";
		
					// 清空 div 并放入输入框
					// 删除指定 class 的元素
					dayElement.querySelectorAll(".task-h").forEach(el => el.remove());
					// 直接复制 HTML 字符串
					let content = dayElement.innerHTML;
	
					dayElement.innerHTML = '';
					dayElement.appendChild(input);
					input.focus();
		
					// 回车或失去焦点时保存
					input.onblur = save;
					input.onkeydown = function (e) {
						if (e.key === 'Enter') {
							save();
						}
					};
		
					function save() {
						const content_n = input.value
						if(content_n){
							dayElement.innerHTML = `<div class="task-h">${content_n}</div>` + content;
						}else{
							// 重新赋值回去
							dayElement.innerHTML = content;
						}
						if(content_n){
							rljh(content_n,1,parseInt(dayElement.querySelector('.conn').getAttribute('day')))
						}else{
							rljh(content_n,2,parseInt(dayElement.querySelector('.conn').getAttribute('day')))
						}
					}
				}
				function rljh(value,state,day){
					let rldaya = `${parseInt(yearSelect.value)}-${parseInt(monthSelect.value)}-${day}`
					let obj = {
							ri:rldaya,
							value:value,
						};
					let tmpData = localStorage.getItem("rili");
					try {
						if(tmpData){
							tmpData = JSON.parse(tmpData)
						}else{
							tmpData = []
						}
					} catch (error) {
						tmpData = []
					}
					let isok_index = -1;
					switch(state){
						case 1:// 新增
							for (let i = 0; i < tmpData.length; i++) {
								if(tmpData[i].ri == rldaya){
									isok_index = i
								}
							}
							
							if(isok_index>-1){
								tmpData[isok_index] = obj
							}else{
								tmpData.push(obj)
							}
							localStorage.setItem("rili",JSON.stringify(tmpData))
							break;
						case 2:// 删除
							for (let i = 0; i < tmpData.length; i++) {
								if(tmpData[i].ri == rldaya){
									isok_index = i
								}
							}
							
							if(isok_index>-1){
								tmpData.splice(isok_index, 1);
							}
							localStorage.setItem("rili",JSON.stringify(tmpData))
							break;
						case 3:// 读取
							return tmpData;
							break;
					}
				}
				// Select a day on the calendar
				function selectDay(dayElement) {
					if (selectedDay) {
						selectedDay.style.backgroundColor = '#fff'; // Reset previous selection
					}
					selectedDay = dayElement;
					dayElement.style.backgroundColor = '#d3d3d3'; // Highlight selected day
				}

				// Set the mood for the selected day
				function setMood(mood) {
					if (selectedDay) {
						selectedDay.querySelector('.conn').innerText = `${selectedDay.querySelector('.conn').innerText.split(' ')[0]} ${mood}`;
						selectedDay.style.backgroundColor = '#ffe4b5'; // Change background for mood set
					} else {
						alert("Please select a day first!");
					}
				}

				// Initialize the calendar with the current month and year
				updateCalendar();
			</script>

	</body>
</html>