<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Weekly Self-Care First Retreat Planner</title>
<style>
body {
font-family: "Segoe UI", Tahoma, sans-serif;
background: #f9fdf9;
color: #333;
margin: 0;
padding: 20px;
}
h1 {
text-align: center;
color: #2e604a;
margin-bottom: 30px;
}
.day {
background: #ffffff;
border-radius: 12px;
padding: 20px;
margin-bottom: 25px;
box-shadow: 0 4px 8px rgba(0,0,0,0.05);
}
h2 {
margin-top: 0;
color: #36624f;
border-bottom: 1px solid #d1f0dc;
padding-bottom: 5px;
}
h3 {
color: #446b55;
margin-top: 15px;
}
.checklist {
list-style: none;
padding: 0;
}
.checklist li {
margin: 10px 0;
padding: 10px;
display: flex;
align-items: center;
border-radius: 8px;
background: #f0f9f4;
transition: background 0.3s;
}
input[type="checkbox"] {
margin-right: 10px;
transform: scale(1.2);
}
.checklist li.checked {
background: #d1f0dc;
text-decoration: line-through;
color: #666;
}
textarea {
width: 100%;
margin-top: 12px;
padding: 10px;
min-height: 80px;
border: 1px solid #d1f0dc;
border-radius: 8px;
font-size: 0.95em;
resize: vertical;
background: #fdfdfd;
}
textarea:focus {
outline: none;
border-color: #2e604a;
box-shadow: 0 0 4px rgba(46,96,74,0.3);
}
footer {
text-align: center;
margin-top: 30px;
font-size: 0.9em;
color: #555;
}
a {
color: #2e604a;
text-decoration: none;
font-weight: bold;
}
@media (max-width: 700px) {
body { padding: 10px; }
.day { padding: 15px; }
}
</style>
</head>
<body>
<h1>🌿 Weekly Self-Care First Retreat Planner</h1>
<div id="planner"></div>
<footer>
Inspired by PJ Zito’s supportive self-care resources.
Explore more at <a href="http://www.ZitoProHealth.com" target="_blank">ZitoProHealth.com</a>
</footer>
<script>
// ---- safe storage wrapper ----
let storageAvailable = true;
let safeStorage = {};
try {
localStorage.setItem("_test", "ok");
localStorage.removeItem("_test");
} catch (e) {
storageAvailable = false;
console.warn("LocalStorage not available, using in-memory session only.");
}
function loadData(key) {
if (storageAvailable) {
try {
return JSON.parse(localStorage.getItem(key)) || {};
} catch (e) {
return {};
}
} else {
return safeStorage[key] || {};
}
}
function saveData(key, data) {
if (storageAvailable) {
try {
localStorage.setItem(key, JSON.stringify(data));
} catch (e) {
// fail silently if blocked
}
} else {
safeStorage[key] = data;
}
}
// ---- planner setup ----
const days = [
"Day 1 🌅", "Day 2 🌼", "Day 3 🌻",
"Day 4 🌸", "Day 5 🌿", "Day 6 🌙", "Day 7 🌺"
];
const morningList = [
"Awaken with 5 deep breaths – 'Today begins with me.'",
"Mental Plane Shift – Choose and write a supportive thought",
"Journal Prompt – 'What energy do I want to bring into my day?'"
];
const eveningList = [
"Release with 5 deep breaths – let go of the day’s weight",
"Journal Prompt – 'What am I grateful for today, and what can I release before sleep?'",
"Mental Plane Reset – Reframe challenges with compassion",
"Body Soothing – stretch, tea, or hand-to-heart grounding"
];
const plannerContainer = document.getElementById("planner");
days.forEach((day, dayIndex) => {
const dayKey = "planner_day_" + dayIndex;
const savedData = loadData(dayKey);
const dayDiv = document.createElement("div");
dayDiv.classList.add("day");
const title = document.createElement("h2");
title.textContent = day;
dayDiv.appendChild(title);
// Morning
const morningHeader = document.createElement("h3");
morningHeader.textContent = "🌅 Morning Practice";
dayDiv.appendChild(morningHeader);
const morningUl = document.createElement("ul");
morningUl.classList.add("checklist");
morningList.forEach((item, i) => {
const li = document.createElement("li");
const checkbox = document.createElement("input");
checkbox.type = "checkbox";
const key = "morning_" + i;
if (savedData[key]) {
checkbox.checked = true;
li.classList.add("checked");
}
checkbox.addEventListener("change", () => {
li.classList.toggle("checked", checkbox.checked);
savedData[key] = checkbox.checked;
saveData(dayKey, savedData);
});
li.appendChild(checkbox);
li.appendChild(document.createTextNode(item));
morningUl.appendChild(li);
});
dayDiv.appendChild(morningUl);
// Evening
const eveningHeader = document.createElement("h3");
eveningHeader.textContent = "🌙 Evening Practice";
dayDiv.appendChild(eveningHeader);
const eveningUl = document.createElement("ul");
eveningUl.classList.add("checklist");
eveningList.forEach((item, i) => {
const li = document.createElement("li");
const checkbox = document.createElement("input");
checkbox.type = "checkbox";
const key = "evening_" + i;
if (savedData[key]) {
checkbox.checked = true;
li.classList.add("checked");
}
checkbox.addEventListener("change", () => {
li.classList.toggle("checked", checkbox.checked);
savedData[key] = checkbox.checked;
saveData(dayKey, savedData);
});
li.appendChild(checkbox);
li.appendChild(document.createTextNode(item));
eveningUl.appendChild(li);
});
dayDiv.appendChild(eveningUl);
// Notes
const notesHeader = document.createElement("h3");
notesHeader.textContent = "📝 Personal Notes & Reflections";
dayDiv.appendChild(notesHeader);
const notesArea = document.createElement("textarea");
notesArea.placeholder = "Write your thoughts, gratitudes, or insights here...";
notesArea.value = savedData["notes"] || "";
notesArea.addEventListener("input", () => {
savedData["notes"] = notesArea.value;
saveData(dayKey, savedData);
});
dayDiv.appendChild(notesArea);
plannerContainer.appendChild(dayDiv);
});
</script>
</body>
</html>