<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ultimate Comprehensive Checklist</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Google Fonts for styling -->
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,600&display=swap" rel="stylesheet">
<style>
/* CSS Styles */
body {
font-family: 'Montserrat', sans-serif;
background-color: #f5f7fa;
margin: 0;
padding: 0;
}
.container {
width: 90%;
max-width: 1000px;
margin: 50px auto;
}
h1, h2, h3 {
color: #333;
}
h1 {
text-align: center;
margin-bottom: 50px;
font-size: 2.5em;
font-weight: 600;
}
.section {
margin-bottom: 30px;
}
.section-header {
background-color: #007BFF;
color: #fff;
padding: 15px;
font-size: 1.5em;
cursor: pointer;
border-radius: 5px;
}
.section-content {
display: none;
background-color: #fff;
padding: 20px;
border: 1px solid #ddd;
border-top: none;
border-radius: 0 0 5px 5px;
}
.task-list {
list-style: none;
padding: 0;
}
.task-list li {
margin-bottom: 15px;
}
.task-list input[type="checkbox"] {
margin-right: 10px;
transform: scale(1.2);
}
.subtask {
margin-left: 25px;
}
/* Collapsible Arrow */
.section-header::after {
content: '\25BC';
float: right;
transition: transform 0.3s;
}
.active .section-header::after {
transform: rotate(180deg);
}
</style>
</head>
<body>
<div class="container">
<h1>Ultimate Comprehensive Checklist</h1>
<!-- High Priority Section -->
<div class="section">
<div class="section-header">High Priority (Immediate Attention Needed)</div>
<div class="section-content">
<!-- Family Health and Obligations -->
<h2>1. Family Health and Obligations</h2>
<!-- Pinchus’s Blood Test -->
<h3><input type="checkbox"> a. Complete Pinchus’s Blood Test</h3>
<ul class="task-list">
<li><input type="checkbox"> Schedule the blood test appointment.</li>
<li><input type="checkbox"> Prepare necessary documents.</li>
<li><input type="checkbox"> Ensure pre-test instructions are followed.</li>
<li><input type="checkbox"> Arrange transportation.</li>
</ul>
<!-- Pinchus’s Military Service Obligations -->
<h3><input type="checkbox"> b. Address Pinchus’s Military Service Obligations</h3>
<ul class="task-list">
<li><input type="checkbox"> Contact the Military Service Office.</li>
<li><input type="checkbox"> Gather necessary documentation.</li>
<li><input type="checkbox"> Schedule required assessments.</li>
<li><input type="checkbox"> Consider legal consultation.</li>
</ul>
<!-- Shimon’s Medication -->
<h3><input type="checkbox"> c. Arrange Shimon’s Medication</h3>
<ul class="task-list">
<li><input type="checkbox"> Contact Maccabi Health Services.</li>
<li><input type="checkbox"> Coordinate with U.S. family as backup.</li>
<li><input type="checkbox"> Check local pharmacies for emergency supplies.</li>
</ul>
<!-- Add more tasks as needed -->
</div>
</div>
<!-- Moderate Priority Section -->
<div class="section">
<div class="section-header">Moderate Priority (Important but Not Urgent)</div>
<div class="section-content">
<!-- Health Appointments -->
<h2>1. Health Appointments</h2>
<!-- Sruly’s Urologist Appointment -->
<h3><input type="checkbox"> a. Sruly’s Urologist Appointment</h3>
<ul class="task-list">
<li><input type="checkbox"> Obtain referrals.</li>
<li><input type="checkbox"> Book the appointment.</li>
<li><input type="checkbox"> Prepare symptom diary.</li>
</ul>
<!-- Add more tasks as needed -->
</div>
</div>
<!-- Long-Term Goals Section -->
<div class="section">
<div class="section-header">Long-Term Goals (Important but Can Be Gradual)</div>
<div class="section-content">
<!-- Business Strategy and Niche Development -->
<h2>1. Business Strategy and Niche Development</h2>
<!-- Refine Business Niche in SEO -->
<h3><input type="checkbox"> a. Refine Business Niche in SEO</h3>
<ul class="task-list">
<li><input type="checkbox"> Identify high-demand industries.</li>
<li><input type="checkbox"> Enhance skills through courses.</li>
<li><input type="checkbox"> Develop specialized service packages.</li>
</ul>
<!-- Add more tasks as needed -->
</div>
</div>
</div>
<script>
// JavaScript for Collapsible Sections
document.querySelectorAll('.section-header').forEach(header => {
header.addEventListener('click', () => {
const section = header.parentElement;
section.classList.toggle('active');
const content = header.nextElementSibling;
if (content.style.display === "block") {
content.style.display = "none";
} else {
content.style.display = "block";
}
});
});
</script>
</body>
</html>