Neale Pickett
·
2025-06-29
buddy.html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Betsy Button Buddy Hub</title>
7 <script src="https://cdn.tailwindcss.com"></script>
8 <link rel="preconnect" href="https://fonts.googleapis.com">
9 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
11 <!-- Chosen Palette: "Calm Neutrals" - A calming and supportive palette using beige, warm grays, soft green for success, amber for alerts, and a gentle red for action-needed states. The goal is a professional, clean, and reassuring feel. -->
12 <!-- Application Structure Plan: A task-oriented tabbed interface. This structure separates the one-time "Setup & Intro" task from the ongoing reference materials ("LED Guide", "FAQ"). This is more user-friendly than a linear document, as it allows the Buddy to quickly access the information they need for a specific situation. The LED Guide cleverly combines the meaning of each color with the corresponding action plan, making it a powerful, all-in-one troubleshooting tool. -->
13 <!-- Visualization & Content Choices:
14 - Report Info: Part 1 (Introducing the Button) -> Goal: Guide the Buddy through the introduction process -> Viz/Presentation Method: Interactive Checklist -> Interaction: Clicking an item marks it as complete, providing visual feedback of progress -> Justification: Transforms a passive script into an actionable and satisfying task, ensuring all key points are covered. -> Library/Method: Vanilla JS, Tailwind CSS.
15 - Report Info: Part 2 (LED Colors) & Part 3 (Action Plan) -> Goal: Provide a quick reference for LED states and required actions -> Viz/Presentation Method: An interactive grid of "color cards" linked to a persistent details pane. -> Interaction: Clicking a color card instantly displays its detailed meaning and the corresponding action plan. Subtle animations on the swatches hint at the button's behavior. -> Justification: Combines two related sections of the report into a single, efficient tool. This is faster and more intuitive than cross-referencing different parts of a document. -> Library/Method: Vanilla JS, Tailwind CSS Grid.
16 - Report Info: Part 4 (FAQ) -> Goal: Provide clear, easily scannable answers to common questions. -> Viz/Presentation Method: Accordion list. -> Interaction: Clicking a question toggles the visibility of its answer. -> Justification: A standard, space-saving UI pattern that prevents information overload. -> Library/Method: HTML <details> and <summary> tags, styled with Tailwind CSS.
17 - Report Info: Part 5 (Disclaimer) -> Goal: Ensure critical safety information is prominent. -> Viz/Presentation Method: A styled callout box. -> Interaction: Static display. -> Justification: Uses visual hierarchy to draw attention to essential information. -> Library/Method: Tailwind CSS.
18 -->
19 <!-- CONFIRMATION: NO SVG graphics used. NO Mermaid JS used. -->
20 <style>
21 body {
22 font-family: 'Inter', sans-serif;
23 }
24 .tab-active {
25 border-color: #2563eb;
26 color: #2563eb;
27 font-weight: 600;
28 }
29 .content-section {
30 display: none;
31 }
32 .content-section.active {
33 display: block;
34 }
35 .checklist-item.completed {
36 background-color: #eef2ff;
37 text-decoration: line-through;
38 color: #6b7280;
39 }
40 .checklist-item.completed .checkbox-icon {
41 background-color: #2563eb;
42 border-color: #2563eb;
43 color: white;
44 }
45 .led-card.active {
46 transform: translateY(-4px);
47 box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
48 border-color: #2563eb;
49 }
50 </style>
51</head>
52<body class="bg-gray-50 text-gray-800">
53
54 <div class="container mx-auto max-w-5xl p-4 sm:p-6 md:p-8">
55
56 <header class="text-center mb-8">
57 <h1 class="text-3xl sm:text-4xl font-bold text-gray-900">Betsy Button Buddy Hub</h1>
58 <p class="mt-2 text-lg text-gray-600">Your toolkit for setting up and supporting a Betsy Button user.</p>
59 </header>
60
61 <nav class="mb-8 border-b border-gray-200">
62 <ul class="flex flex-wrap -mb-px text-sm font-medium text-center" id="main-tabs">
63 <li class="mr-2">
64 <button class="inline-block p-4 border-b-2 border-transparent rounded-t-lg hover:text-gray-600 hover:border-gray-300" data-tab="setup">
65 🚀 Setup & Intro
66 </button>
67 </li>
68 <li class="mr-2">
69 <button class="inline-block p-4 border-b-2 border-transparent rounded-t-lg hover:text-gray-600 hover:border-gray-300" data-tab="led-guide">
70 💡 LED Guide & Actions
71 </button>
72 </li>
73 <li class="mr-2">
74 <button class="inline-block p-4 border-b-2 border-transparent rounded-t-lg hover:text-gray-600 hover:border-gray-300" data-tab="faq">
75 ❓ FAQ
76 </button>
77 </li>
78 </ul>
79 </nav>
80
81 <main id="main-content">
82 <!-- Setup & Introduction Section -->
83 <section id="setup" class="content-section">
84 <div class="bg-white p-6 rounded-lg shadow-sm">
85 <h2 class="text-2xl font-bold mb-2">Introducing the Button</h2>
86 <p class="text-gray-600 mb-6">Use this checklist to guide your conversation when introducing the Betsy Button. The goal is to make the user feel comfortable and empowered.</p>
87 <div id="intro-checklist" class="space-y-3">
88 <div class="checklist-item flex items-center p-4 border rounded-lg cursor-pointer hover:bg-gray-100 transition" data-checklist-id="1">
89 <div class="checkbox-icon w-6 h-6 mr-4 border-2 border-gray-300 rounded-md flex items-center justify-center transition">✓</div>
90 <span class="flex-1 font-medium">Explain the "Why" simply and positively.</span>
91 </div>
92 <div class="checklist-item flex items-center p-4 border rounded-lg cursor-pointer hover:bg-gray-100 transition" data-checklist-id="2">
93 <div class="checkbox-icon w-6 h-6 mr-4 border-2 border-gray-300 rounded-md flex items-center justify-center transition">✓</div>
94 <span class="flex-1 font-medium">Show them how to plug it in and press it.</span>
95 </div>
96 <div class="checklist-item flex items-center p-4 border rounded-lg cursor-pointer hover:bg-gray-100 transition" data-checklist-id="3">
97 <div class="checkbox-icon w-6 h-6 mr-4 border-2 border-gray-300 rounded-md flex items-center justify-center transition">✓</div>
98 <span class="flex-1 font-medium">Let them press the button themselves.</span>
99 </div>
100 <div class="checklist-item flex items-center p-4 border rounded-lg cursor-pointer hover:bg-gray-100 transition" data-checklist-id="4">
101 <div class="checkbox-icon w-6 h-6 mr-4 border-2 border-gray-300 rounded-md flex items-center justify-center transition">✓</div>
102 <span class="flex-1 font-medium">Explain the two main lights: "Green is Go!" and "Red is a Reminder".</span>
103 </div>
104 <div class="checklist-item flex items-center p-4 border rounded-lg cursor-pointer hover:bg-gray-100 transition" data-checklist-id="5">
105 <div class="checkbox-icon w-6 h-6 mr-4 border-2 border-gray-300 rounded-md flex items-center justify-center transition">✓</div>
106 <span class="flex-1 font-medium">Reassure them: no pressure, and their privacy is protected.</span>
107 </div>
108 </div>
109 </div>
110 </section>
111
112 <!-- LED Guide Section -->
113 <section id="led-guide" class="content-section">
114 <div class="bg-white p-6 rounded-lg shadow-sm">
115 <h2 class="text-2xl font-bold mb-2">LED Guide & Action Plan</h2>
116 <p class="text-gray-600 mb-6">Click on a color to see what it means and what actions you should take. This is your quick-reference for all button states.</p>
117 <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
118 <div class="md:col-span-1">
119 <div class="space-y-3" id="led-cards-container">
120 <!-- LED Cards will be dynamically inserted here -->
121 </div>
122 </div>
123 <div class="md:col-span-2">
124 <div id="led-details-container" class="bg-indigo-50 p-6 rounded-lg sticky top-8">
125 <!-- Details will be shown here -->
126 <div class="text-center text-gray-500">
127 <p class="font-semibold">Select a color on the left to see details.</p>
128 </div>
129 </div>
130 </div>
131 </div>
132 </div>
133 </section>
134
135 <!-- FAQ Section -->
136 <section id="faq" class="content-section">
137 <div class="bg-white p-6 rounded-lg shadow-sm">
138 <h2 class="text-2xl font-bold mb-2">Frequently Asked Questions</h2>
139 <p class="text-gray-600 mb-6">Here are answers to common questions the user might have. Being prepared with these helps build trust and confidence.</p>
140 <div class="space-y-4">
141 <details class="group border-b pb-4">
142 <summary class="flex justify-between items-center font-medium cursor-pointer list-none">
143 <span>What if I forget to press it?</span>
144 <span class="transition group-open:rotate-180">
145 <span class="text-xl">▾</span>
146 </span>
147 </summary>
148 <p class="text-gray-600 mt-3 group-open:animate-fadeIn">
149 "No problem at all! The light will just turn red, which is *our* signal to give you a quick call to say hi and make sure everything's okay. It's just a gentle reminder, nothing more."
150 </p>
151 </details>
152 <details class="group border-b pb-4">
153 <summary class="flex justify-between items-center font-medium cursor-pointer list-none">
154 <span>What if the light is off?</span>
155 <span class="transition group-open:rotate-180">
156 <span class="text-xl">▾</span>
157 </span>
158 </summary>
159 <p class="text-gray-600 mt-3 group-open:animate-fadeIn">
160 "That usually means it's not plugged in. Can you check the cable? If it's plugged in and still off, then it might need a quick restart by unplugging it for 5 seconds and plugging it back in." (If this doesn't work, explain you'll need to check it.)
161 </p>
162 </details>
163 <details class="group border-b pb-4">
164 <summary class="flex justify-between items-center font-medium cursor-pointer list-none">
165 <span>Is this tracking me?</span>
166 <span class="transition group-open:rotate-180">
167 <span class="text-xl">▾</span>
168 </span>
169 </summary>
170 <p class="text-gray-600 mt-3 group-open:animate-fadeIn">
171 "Absolutely not. This button has no idea where you are. It only knows if *it* has been pressed. It's just a simple digital signal, like turning on a light switch."
172 </p>
173 </details>
174 <details class="group border-b pb-4">
175 <summary class="flex justify-between items-center font-medium cursor-pointer list-none">
176 <span>What if I press it too much?</span>
177 <span class="transition group-open:rotate-180">
178 <span class="text-xl">▾</span>
179 </span>
180 </summary>
181 <p class="text-gray-600 mt-3 group-open:animate-fadeIn">
182 "You can't! Press it as many times as you like. It will just keep the light green for another 24 hours each time."
183 </p>
184 </details>
185 <details class="group border-b pb-4">
186 <summary class="flex justify-between items-center font-medium cursor-pointer list-none">
187 <span>What if my power goes out?</span>
188 <span class="transition group-open:rotate-180">
189 <span class="text-xl">▾</span>
190 </span>
191 </summary>
192 <p class="text-gray-600 mt-3 group-open:animate-fadeIn">
193 "If there's no power, the button can't work. The light will be off. As soon as power comes back, it should reconnect automatically. If the light is still off after power returns, give it a quick restart by unplugging and re-plugging."
194 </p>
195 </details>
196 </div>
197 </div>
198 </section>
199 </main>
200
201 <footer class="mt-12">
202 <div class="bg-yellow-100 border-l-4 border-yellow-500 text-yellow-800 p-4 rounded-r-lg" role="alert">
203 <h3 class="font-bold text-lg">An Important Note for Betsy Button Buddies</h3>
204 <p class="mt-2">Remember, the Betsy Button is a valuable tool, but it is **not a substitute for regular human interaction or emergency services.** Trust your gut; if you have any concerns about the user's well-being, regardless of the button's status, always act on those concerns. Maintain communication and ensure you have a clear emergency plan in place.</p>
205 </div>
206 </footer>
207
208 </div>
209
210 <script>
211 document.addEventListener('DOMContentLoaded', function () {
212 const tabs = document.querySelectorAll('#main-tabs button');
213 const contentSections = document.querySelectorAll('.content-section');
214 const checklistItems = document.querySelectorAll('.checklist-item');
215
216 const ledData = [
217 { id: 'green', title: 'Pulsing Green', status: 'Excellent!', color: '#4ade80', animation: 'animate-pulse', description: 'A recent check-in has been recorded within the last 24 hours. The button is online and communicating.', action: null },
218 { id: 'red', title: 'Flashing Red', status: 'Action May Be Needed', color: '#f87171', animation: 'animate-pulse', description: 'No check-in has occurred for over 24 hours. This is your primary alert that it\'s time to check in on the user.', action: '1. Give it a little time (optional).<br>2. Make a casual phone call.<br>3. Conduct a well check if concerns remain. Always prioritize safety.' },
219 { id: 'cyan', title: 'Flashing Cyan', status: 'Connectivity Issue', color: '#22d3ee', animation: '', description: 'The button is trying to connect to its Wi-Fi network. This can happen on power-up or if the connection is lost. The button is not communicating check-ins.', action: '1. Call the user and explain the technical hiccup.<br>2. If it persists, arrange for physical inspection to check Wi-Fi settings or reprogram.' },
220 { id: 'combo', title: 'Quick Green, then Cyan', status: 'Check-in Attempt', color: '#6ee7b7', animation: '', description: 'The button user just pressed it, and it\'s trying to send the check-in signal to the server. This is normal behavior.', action: null },
221 { id: 'yellow', title: 'Flashing Yellow/Black', status: 'Starting Up / Error', color: '#facc15', animation: '', description: 'The button is booting and loading its configuration. This is normal for a few seconds. If it stays this way, it may have lost its configuration.', action: '1. Call the user to check.<br>2. If it persists, arrange for physical inspection and reprogramming.' },
222 { id: 'cycle', title: 'Cycling Colors', status: 'Communication Error', color: 'linear-gradient(90deg, #f87171, #facc15, #22d3ee)', animation: '', description: 'The button is experiencing a server or advanced Wi-Fi issue. It is not communicating check-ins.', action: '1. Call the user and suggest restarting the button (unplug/replug).<br>2. If it persists, arrange for physical inspection.' },
223 { id: 'white', title: 'Dim White', status: 'System Offline', color: '#e5e7eb', animation: '', description: 'The button\'s main program has stopped. It is not communicating check-ins.', action: '1. Call the user and suggest restarting the button (unplug/replug).<br>2. This state almost always requires reprogramming.' },
224 { id: 'off', title: 'Light Off', status: 'No Power / Major Issue', color: '#6b7280', animation: '', description: 'The button is either not receiving power or has a significant internal fault. It cannot communicate.', action: '1. Call the user and ask them to check the power cable.<br>2. Suggest restarting the button (unplug/replug).<br>3. If it remains off, arrange for physical inspection.' },
225 ];
226 const ledCardsContainer = document.getElementById('led-cards-container');
227 const ledDetailsContainer = document.getElementById('led-details-container');
228
229 function switchTab(tabButton) {
230 tabs.forEach(t => t.classList.remove('tab-active'));
231 contentSections.forEach(s => s.classList.remove('active'));
232
233 tabButton.classList.add('tab-active');
234 const contentId = tabButton.dataset.tab;
235 document.getElementById(contentId).classList.add('active');
236 }
237
238 tabs.forEach(tab => {
239 tab.addEventListener('click', () => switchTab(tab));
240 });
241
242 switchTab(tabs[0]);
243
244 checklistItems.forEach(item => {
245 item.addEventListener('click', () => {
246 item.classList.toggle('completed');
247 });
248 });
249
250 function renderLedCards() {
251 ledCardsContainer.innerHTML = '';
252 ledData.forEach(led => {
253 const card = document.createElement('div');
254 card.className = `led-card p-4 border-2 rounded-lg cursor-pointer hover:bg-gray-100 transition-transform transform hover:-translate-y-1`;
255 card.dataset.ledId = led.id;
256
257 let colorSwatchStyle = led.color.startsWith('linear-gradient') ? `background: ${led.color};` : `background-color: ${led.color};`;
258
259 card.innerHTML = `
260 <div class="flex items-center">
261 <div class="w-6 h-6 rounded-full mr-4 ${led.animation}" style="${colorSwatchStyle}"></div>
262 <div class="flex-1">
263 <p class="font-bold text-gray-900">${led.title}</p>
264 <p class="text-sm font-medium text-gray-500">${led.status}</p>
265 </div>
266 </div>
267 `;
268 ledCardsContainer.appendChild(card);
269 });
270
271 document.querySelectorAll('.led-card').forEach(card => {
272 card.addEventListener('click', () => showLedDetails(card.dataset.ledId));
273 });
274 }
275
276 function showLedDetails(ledId) {
277 document.querySelectorAll('.led-card').forEach(c => c.classList.remove('active'));
278 document.querySelector(`.led-card[data-led-id="${ledId}"]`).classList.add('active');
279
280 const led = ledData.find(l => l.id === ledId);
281 let colorSwatchStyle = led.color.startsWith('linear-gradient') ? `background: ${led.color};` : `background-color: ${led.color};`;
282
283 let actionHtml = '';
284 if(led.action) {
285 actionHtml = `
286 <h4 class="font-bold text-lg text-gray-900 mt-4">Your Action Plan</h4>
287 <div class="prose prose-sm text-gray-700 mt-2">
288 <p>${led.action}</p>
289 </div>
290 `;
291 } else {
292 actionHtml = `
293 <h4 class="font-bold text-lg text-gray-900 mt-4">Your Action Plan</h4>
294 <p class="text-gray-700 mt-2">No action needed. This is normal operation.</p>
295 `;
296 }
297
298 ledDetailsContainer.innerHTML = `
299 <div class="flex items-center mb-4">
300 <div class="w-8 h-8 rounded-full mr-4 ${led.animation}" style="${colorSwatchStyle}"></div>
301 <div>
302 <h3 class="text-xl font-bold text-gray-900">${led.title}</h3>
303 <p class="font-semibold text-indigo-600">${led.status}</p>
304 </div>
305 </div>
306 <div>
307 <h4 class="font-bold text-lg text-gray-900">What It Means</h4>
308 <p class="text-gray-700 mt-2">${led.description}</p>
309 </div>
310 ${actionHtml}
311 `;
312 }
313
314 renderLedCards();
315 });
316 </script>
317</body>
318</html>