Skip to content

Instantly share code, notes, and snippets.

@jcasabona

jcasabona/diag.html

Created June 4, 2025 11:39
Show Gist options
  • Save jcasabona/29de4ff091839d0615279e25bdf82620 to your computer and use it in GitHub Desktop.
Save jcasabona/29de4ff091839d0615279e25bdf82620 to your computer and use it in GitHub Desktop.
Download ZIP
Overwhelm Diagnostic
Raw
diag.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The Overwhelm Diagnostic - Streamlined Solopreneur</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
line-height: 1.6;
background: linear-gradient(135deg, #F7F4EB 0%, #ffffff 100%);
min-height: 100vh;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
.header {
text-align: center;
margin-bottom: 40px;
padding: 40px 20px;
background: white;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(8, 44, 69, 0.1);
}
.header h1 {
color: #082C45;
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 16px;
}
.header p {
color: #666;
font-size: 1.2rem;
max-width: 600px;
margin: 0 auto;
}
.quiz-container {
background: white;
border-radius: 12px;
padding: 40px;
box-shadow: 0 4px 20px rgba(8, 44, 69, 0.1);
margin-bottom: 30px;
}
.question {
margin-bottom: 30px;
padding: 24px;
border: 2px solid #f0f0f0;
border-radius: 8px;
transition: all 0.3s ease;
}
.question.answered {
border-color: #F7D677;
background: #fffbf0;
}
.question h3 {
color: #082C45;
font-size: 1.3rem;
margin-bottom: 16px;
font-weight: 600;
}
.options {
display: flex;
flex-direction: column;
gap: 12px;
}
.option {
display: flex;
align-items: center;
padding: 16px;
border: 2px solid #e5e5e5;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
background: white;
}
.option:hover {
border-color: #F7D677;
background: #fffbf0;
}
.option.selected {
border-color: #F7D677;
background: #F7D677;
color: #082C45;
font-weight: 600;
}
.option input[type="radio"] {
margin-right: 12px;
transform: scale(1.2);
}
.email-section {
background: #082C45;
color: white;
padding: 40px;
border-radius: 12px;
text-align: center;
margin-top: 30px;
}
.email-section h2 {
font-size: 2rem;
margin-bottom: 16px;
color: #F7D677;
}
.email-section p {
font-size: 1.1rem;
margin-bottom: 24px;
opacity: 0.9;
}
.email-form {
display: flex;
gap: 12px;
max-width: 400px;
margin: 0 auto;
flex-wrap: wrap;
}
.email-form input[type="email"] {
flex: 1;
min-width: 250px;
padding: 16px;
border: none;
border-radius: 8px;
font-size: 1rem;
}
.btn {
background: #F7D677;
color: #082C45;
padding: 16px 24px;
border: none;
border-radius: 8px;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
white-space: nowrap;
}
.btn:hover {
background: #f5d155;
transform: translateY(-2px);
}
.btn:disabled {
background: #ccc;
cursor: not-allowed;
transform: none;
}
.progress-bar {
width: 100%;
height: 8px;
background: #e5e5e5;
border-radius: 4px;
margin-bottom: 30px;
overflow: hidden;
}
.progress-fill {
height: 100%;
background: linear-gradient(90deg, #F7D677, #f5d155);
width: 0%;
transition: width 0.5s ease;
}
.results {
display: none;
background: white;
border-radius: 12px;
padding: 40px;
box-shadow: 0 4px 20px rgba(8, 44, 69, 0.1);
text-align: center;
}
.results h2 {
color: #082C45;
font-size: 2.5rem;
margin-bottom: 20px;
}
.results .score {
font-size: 4rem;
font-weight: 700;
color: #F7D677;
margin-bottom: 20px;
}
.results .category {
font-size: 1.8rem;
font-weight: 600;
color: #082C45;
margin-bottom: 30px;
}
.results .description {
font-size: 1.2rem;
color: #666;
margin-bottom: 30px;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
@media (max-width: 768px) {
.header h1 {
font-size: 2rem;
}
.header p {
font-size: 1rem;
}
.quiz-container {
padding: 24px;
}
.question {
padding: 16px;
}
.email-form {
flex-direction: column;
}
.email-form input[type="email"] {
min-width: auto;
}
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>The Overwhelm Diagnostic</h1>
<p>Discover what's causing your business chaos in just 3 minutes</p>
</div>
<div class="progress-bar">
<div class="progress-fill" id="progressFill"></div>
</div>
<form id="diagnosticQuiz" class="quiz-container">
<div class="question" data-category="time">
<h3>1. How often do you work past your intended hours?</h3>
<div class="options">
<label class="option">
<input type="radio" name="q1" value="3">
<span>Daily - I can never seem to "turn off"</span>
</label>
<label class="option">
<input type="radio" name="q1" value="2">
<span>2-3 times per week - when things get busy</span>
</label>
<label class="option">
<input type="radio" name="q1" value="1">
<span>Occasionally - only during crunch periods</span>
</label>
<label class="option">
<input type="radio" name="q1" value="0">
<span>Rarely - I maintain good boundaries</span>
</label>
</div>
</div>
<div class="question" data-category="delegation">
<h3>2. When you try to delegate tasks, what usually happens?</h3>
<div class="options">
<label class="option">
<input type="radio" name="q2" value="3">
<span>It comes back wrong and I have to redo it</span>
</label>
<label class="option">
<input type="radio" name="q2" value="2">
<span>It takes longer to explain than to do myself</span>
</label>
<label class="option">
<input type="radio" name="q2" value="1">
<span>It works sometimes, but inconsistently</span>
</label>
<label class="option">
<input type="radio" name="q2" value="0">
<span>It works well - I have clear processes</span>
</label>
</div>
</div>
<div class="question" data-category="processes">
<h3>3. How are your business processes documented?</h3>
<div class="options">
<label class="option">
<input type="radio" name="q3" value="3">
<span>What documentation? It's all in my head</span>
</label>
<label class="option">
<input type="radio" name="q3" value="2">
<span>Random notes scattered across different tools</span>
</label>
<label class="option">
<input type="radio" name="q3" value="1">
<span>Some documented, but often outdated</span>
</label>
<label class="option">
<input type="radio" name="q3" value="0">
<span>Well-documented and regularly updated</span>
</label>
</div>
</div>
<div class="question" data-category="automation">
<h3>4. How much of your routine work is automated?</h3>
<div class="options">
<label class="option">
<input type="radio" name="q4" value="3">
<span>Almost nothing - I do everything manually</span>
</label>
<label class="option">
<input type="radio" name="q4" value="2">
<span>A few things, but mostly manual processes</span>
</label>
<label class="option">
<input type="radio" name="q4" value="1">
<span>Some automation, but could be much better</span>
</label>
<label class="option">
<input type="radio" name="q4" value="0">
<span>Most routine tasks run automatically</span>
</label>
</div>
</div>
<div class="question" data-category="focus">
<h3>5. How often does "urgent" work interrupt your planned tasks?</h3>
<div class="options">
<label class="option">
<input type="radio" name="q5" value="3">
<span>Constantly - I'm always putting out fires</span>
</label>
<label class="option">
<input type="radio" name="q5" value="2">
<span>Daily - something always comes up</span>
</label>
<label class="option">
<input type="radio" name="q5" value="1">
<span>Weekly - manageable but disruptive</span>
</label>
<label class="option">
<input type="radio" name="q5" value="0">
<span>Rarely - I work proactively, not reactively</span>
</label>
</div>
</div>
<div class="question" data-category="revenue">
<h3>6. If you took a 2-week vacation, what would happen to your revenue?</h3>
<div class="options">
<label class="option">
<input type="radio" name="q6" value="3">
<span>It would stop completely</span>
</label>
<label class="option">
<input type="radio" name="q6" value="2">
<span>It would drop significantly</span>
</label>
<label class="option">
<input type="radio" name="q6" value="1">
<span>Some impact, but not catastrophic</span>
</label>
<label class="option">
<input type="radio" name="q6" value="0">
<span>Business would continue running smoothly</span>
</label>
</div>
</div>
</form>
<div id="results" class="results">
<div class="score" id="scoreDisplay">0</div>
<div class="category" id="categoryDisplay"></div>
<div class="description" id="descriptionDisplay"></div>
</div>
<div class="email-section">
<h2>Get Your Complete Overwhelm Analysis</h2>
<p>Enter your email to receive your detailed results plus a custom action plan to fix your biggest bottleneck.</p>
<form class="email-form" id="emailForm">
<input type="email" id="emailInput" placeholder="[email protected]" required>
<button type="submit" class="btn" id="submitBtn" disabled>Get My Results</button>
</form>
</div>
</div>
<script>
const quiz = document.getElementById('diagnosticQuiz');
const progressFill = document.getElementById('progressFill');
const results = document.getElementById('results');
const scoreDisplay = document.getElementById('scoreDisplay');
const categoryDisplay = document.getElementById('categoryDisplay');
const descriptionDisplay = document.getElementById('descriptionDisplay');
const emailForm = document.getElementById('emailForm');
const emailInput = document.getElementById('emailInput');
const submitBtn = document.getElementById('submitBtn');
const totalQuestions = 6;
let answeredQuestions = 0;
let totalScore = 0;
const categories = {
0: {
title: "Systems Superstar",
description: "Congratulations! You've built a well-oiled business machine. Your systems are working, and you have the freedom to focus on growth and strategic work. Keep optimizing!"
},
1: {
title: "Smooth Operator",
description: "You're on the right track with good systems in most areas. A few tweaks and optimizations could save you several hours per week and reduce the occasional stress."
},
2: {
title: "Struggling Systematically",
description: "You're feeling the pain of missing systems. You're working harder than you need to, and some key processes need immediate attention to prevent burnout."
},
3: {
title: "Chaos Commander",
description: "You're drowning in operational chaos. Every day feels like crisis management, and you're trapped in the day-to-day instead of growing your business. You need systems immediately."
}
};
// Handle answer selection
quiz.addEventListener('change', function(e) {
if (e.target.type === 'radio') {
const question = e.target.closest('.question');
question.classList.add('answered');
// Update progress
answeredQuestions = quiz.querySelectorAll('.question.answered').length;
const progress = (answeredQuestions / totalQuestions) * 100;
progressFill.style.width = progress + '%';
// Calculate score
calculateScore();
// Enable email submission if all questions answered
if (answeredQuestions === totalQuestions) {
submitBtn.disabled = false;
showResults();
}
}
});
// Handle option click
quiz.addEventListener('click', function(e) {
if (e.target.classList.contains('option') || e.target.closest('.option')) {
const option = e.target.closest('.option');
const radio = option.querySelector('input[type="radio"]');
// Remove selected class from siblings
option.parentNode.querySelectorAll('.option').forEach(opt => {
opt.classList.remove('selected');
});
// Add selected class and check radio
option.classList.add('selected');
radio.checked = true;
// Trigger change event
radio.dispatchEvent(new Event('change', { bubbles: true }));
}
});
function calculateScore() {
totalScore = 0;
const formData = new FormData(quiz);
for (let i = 1; i <= totalQuestions; i++) {
const value = formData.get(`q${i}`);
if (value) {
totalScore += parseInt(value);
}
}
}
function showResults() {
const averageScore = Math.round(totalScore / totalQuestions);
const category = categories[averageScore];
scoreDisplay.textContent = `${totalScore}/${totalQuestions * 3}`;
categoryDisplay.textContent = category.title;
descriptionDisplay.textContent = category.description;
results.style.display = 'block';
results.scrollIntoView({ behavior: 'smooth' });
}
// Handle email form submission
emailForm.addEventListener('submit', function(e) {
e.preventDefault();
const email = emailInput.value;
if (email && answeredQuestions === totalQuestions) {
// Store results in memory for follow-up
const resultsData = {
email: email,
score: totalScore,
maxScore: totalQuestions * 3,
category: categories[Math.round(totalScore / totalQuestions)].title,
timestamp: new Date().toISOString()
};
// In a real implementation, you'd send this to your email service
console.log('Results data:', resultsData);
// Show success message
submitBtn.textContent = 'Results Sent!';
submitBtn.style.background = '#28a745';
// Redirect or show next steps after a delay
setTimeout(() => {
alert('Check your email for your complete overwhelm analysis and action plan!');
}, 1000);
}
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment