Neale Pickett
·
2025-06-29
index.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: Stay Connected, Simply.</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 palette grounded in warm neutrals (bg-gray-50, bg-white, text-gray-800) with a soft blue/purple accent (text-indigo-600, border-indigo-400) for links and highlights. The goal is a professional, clean, and reassuring feel that supports the theme of connection and well-being. -->
12 <!-- Application Structure Plan: A linear, scrolling single-page layout divided into thematic sections: Introduction (hero), Why Use It, How It Works (with diagram), Use Cases, and Resources. This structure provides a clear narrative flow for new users, guiding them from understanding the core concept to exploring its applications and finding related tools. Each section is distinct but visually harmonious, allowing for easy scanning and progressive information disclosure as the user scrolls. -->
13 <!-- Visualization & Content Choices:
14 - Report Info: Main concept of Betsy Button (from README/manual) -> Goal: Hook user, explain core value -> Viz/Presentation Method: Hero section with concise, benefit-driven text. Justification: A strong opening is crucial for engagement.
15 - Report Info: Benefits/Purpose (derived from manual) -> Goal: Persuade user of value, address core need -> Viz/Presentation Method: Clear, digestible text blocks with headings and simple paragraphs. Justification: Direct answers to "why" questions.
16 - Report Info: Use Cases (derived from manual's spirit) -> Goal: Inspire users with practical, relatable applications -> Viz/Presentation Method: Short descriptive text blocks per use case, implying real-world scenarios. Justification: Concrete examples make the abstract concept tangible.
17 - Report Info: Button-Server interaction (derived from main.py, betsyd.go, README) -> Goal: Explain underlying mechanism simply, demystify the tech -> Viz/Presentation Method: Custom HTML/CSS diagram using flexbox, pseudo-elements for arrows, and Unicode characters for icons/nodes. No Chart.js/Plotly needed for this diagram as it's purely conceptual flow. Justification: Visually simplifies complex data flow into an easy-to-understand process for non-technical users, adhering to the "no SVG/Mermaid" rule while still providing impact. Responsive design ensures it works on all devices.
18 - Report Info: Links to other tools (programmer, buddy hub, source) -> Goal: Provide clear access points to further resources -> Viz/Presentation Method: Prominent, styled navigation links within a dedicated "Resources" section. Justification: Guides users to next steps based on their needs (program, monitor, develop).
19 -->
20 <!-- CONFIRMATION: NO SVG graphics used. NO Mermaid JS used. -->
21 <style>
22 body {
23 font-family: 'Inter', sans-serif;
24 }
25 .diagram-node {
26 background-color: white;
27 border-radius: 0.75rem; /* rounded-xl */
28 padding: 1.5rem; /* p-6 */
29 box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); /* shadow-md */
30 text-align: center;
31 position: relative;
32 z-index: 10; /* Ensure nodes are above lines */
33 flex-shrink: 0; /* Prevent shrinking in flex container */
34 min-width: 120px; /* Ensure minimum width for nodes */
35 max-width: 200px; /* Max width to keep nodes from getting too wide */
36 flex-grow: 1; /* Allow nodes to grow */
37 display: flex;
38 flex-direction: column;
39 align-items: center;
40 justify-content: center;
41 }
42 .diagram-flow {
43 display: flex;
44 flex-direction: row; /* Default horizontal */
45 align-items: center;
46 }
47 .diagram-arrow {
48 flex-grow: 1; /* Allows arrow lines to stretch */
49 height: 2px;
50 background-color: #a78bfa; /* indigo-400 */
51 position: relative;
52 margin: 0 -0.5rem; /* Overlap with node padding for continuous line */
53 }
54 .diagram-arrow::after {
55 content: '▶'; /* Unicode right arrow for visual direction */
56 background-color: transparent;
57 position: absolute;
58 right: -0.5rem;
59 transform: translateY(-50%);
60 color: #a78bfa; /* indigo-400 */
61 font-size: 1.25rem; /* text-xl */
62 padding-left: 2px;
63 }
64 .diagram-arrow:last-child {
65 display: block; /* Ensure last arrow is visible by default (horizontal flow) */
66 }
67
68 /* Responsive adjustments for diagram nodes and arrows */
69 @media (max-width: 1023px) { /* Changed breakpoint to lg (1023px is just before lg) */
70 .diagram-flow {
71 flex-direction: column;
72 align-items: center;
73 }
74 .diagram-node {
75 margin-bottom: 2rem; /* Space between vertical nodes */
76 max-width: 80%; /* Wider nodes on small screens */
77 }
78 .diagram-arrow {
79 width: 2px; /* Vertical line */
80 height: 6rem; /* Length of vertical line for more space */
81 margin: -0.5rem 0; /* Overlap for vertical continuity */
82 }
83 .diagram-arrow::after {
84 content: '▼'; /* Unicode down arrow */
85 right: auto;
86 left: 50%;
87 top: auto;
88 bottom: -0.75rem; /* Adjusted position for larger arrow and more space */
89 transform: translateX(-50%);
90 font-size: 1.5rem; /* Slightly larger arrow for better visibility */
91 padding-top: 2px; /* Small padding above arrow for visual separation */
92 }
93 .diagram-arrow:last-child {
94 display: none; /* Hide last arrow in vertical flow */
95 }
96 }
97 </style>
98</head>
99<body class="bg-gray-50 text-gray-800">
100
101 <div class="container mx-auto px-4 py-8 sm:px-6 md:px-8 max-w-6xl">
102
103 <!-- Hero Section -->
104 <section class="text-center py-16 bg-gradient-to-br from-indigo-50 to-purple-50 rounded-lg shadow-lg mb-12">
105 <h1 class="text-4xl sm:text-5xl font-extrabold text-indigo-800 leading-tight">
106 Betsy Button: Stay Connected, Simply.
107 </h1>
108 <p class="mt-4 text-xl text-indigo-700 max-w-3xl mx-auto">
109 A revolutionary way to keep in touch and ensure well-being with just one touch.
110 </p>
111 <div class="mt-8">
112 <a href="#learn-more" class="inline-block bg-indigo-600 text-white font-bold py-3 px-8 rounded-full shadow-lg hover:bg-indigo-700 transition duration-300 transform hover:scale-105">
113 Learn More
114 </a>
115 </div>
116 </section>
117
118 <!-- Why Betsy Button Section -->
119 <section id="learn-more" class="py-12 mb-12">
120 <h2 class="text-3xl font-bold text-gray-900 text-center mb-8">Why the Betsy Button?</h2>
121 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
122 <div class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition">
123 <h3 class="text-xl font-semibold text-indigo-700 mb-3">Peace of Mind</h3>
124 <p class="text-gray-600">Know that your loved ones are okay with a simple daily check-in, reducing worry and constant phone calls.</p>
125 </div>
126 <div class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition">
127 <h3 class="text-xl font-semibold text-indigo-700 mb-3">Effortless Connection</h3>
128 <p class="text-gray-600">No smartphones, no apps, no complex setup. Just a single button press makes the connection.</p>
129 </div>
130 <div class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition">
131 <h3 class="text-xl font-semibold text-indigo-700 mb-3">Non-Intrusive Support</h3>
132 <p class="text-gray-600">It empowers users to check in on their terms, maintaining independence while providing reassurance to family and friends.</p>
133 </div>
134 </div>
135 </section>
136
137 <!-- How It Works Section -->
138 <section id="how-it-works" class="py-12 mb-12 bg-gray-100 rounded-lg shadow-md">
139 <h2 class="text-3xl font-bold text-gray-900 text-center mb-8">How It Works: A Simple Flow</h2>
140 <p class="text-gray-600 text-center max-w-2xl mx-auto mb-8">
141 The Betsy Button operates on a straightforward principle: a button press sends a signal to a central server, which then updates the status for all buttons in that group. This allows everyone connected to see the latest check-in.
142 </p>
143
144 <div class="diagram-flow gap-x-8 gap-y-4 px-4">
145 <!-- Node 1: User & Button -->
146 <div class="diagram-node">
147 <span class="text-4xl mb-2">👤</span>
148 <span class="text-2xl mb-2">🔘</span>
149 <p class="font-bold text-indigo-700">User & Betsy Button</p>
150 <p class="text-sm text-gray-500">The button is pressed.</p>
151 </div>
152
153 <!-- Arrow 1 -->
154 <div class="diagram-arrow"></div>
155
156 <!-- Node 3: Betsy Button Server -->
157 <div class="diagram-node">
158 <span class="text-4xl mb-2">☁️</span>
159 <p class="font-bold text-indigo-700">Betsy Button Server</p>
160 <p class="text-sm text-gray-500">Records check-in time for the group.</p>
161 </div>
162
163 <!-- Arrow 3 -->
164 <div class="diagram-arrow"></div>
165
166 <div class="diagram-node">
167 <span class="text-4xl mb-2">🔘</span>
168 <p class="font-bold text-indigo-700">Other Betsy Buttons in Group</p>
169 <p class="text-sm text-gray-500">Lights update (green for 24h).</p>
170 </div>
171 </div>
172 </section>
173
174 <!-- Use Cases Section -->
175 <section id="use-cases" class="py-12 mb-12">
176 <h2 class="text-3xl font-bold text-gray-900 text-center mb-8">Who Can Benefit?</h2>
177 <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
178 <div class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition">
179 <h3 class="text-xl font-semibold text-indigo-700 mb-3">Family Check-ins</h3>
180 <p class="text-gray-600">Parents, children, or siblings can use buttons in different homes to quietly signal they're okay each day, reducing worry and constant calls.</p>
181 </div>
182 <div class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition">
183 <h3 class="text-xl font-semibold text-indigo-700 mb-3">Elderly Care Support</h3>
184 <p class="text-gray-600">For an elderly family member living independently, a daily button press offers reassurance to remote caregivers without complex tech.</p>
185 </div>
186 <div class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition">
187 <h3 class="text-xl font-semibold text-indigo-700 mb-3">Caregiver Network Well-being</h3>
188 <p class="text-gray-600">Concerned parties can monitor the well-being of any caregiver, ensuring their health and capacity are also supported, providing reassurance to all involved.</p>
189 </div>
190 <div class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition">
191 <h3 class="text-xl font-semibold text-indigo-700 mb-3">Small Business Status</h3>
192 <p class="text-gray-600">A physical button can signal "Open" or "Closed" status to a remote team, or indicate daily operational checks.</p>
193 </div>
194 </div>
195 </section>
196
197 <!-- Resources Section -->
198 <section id="resources" class="py-12 text-center">
199 <h2 class="text-3xl font-bold text-gray-900 mb-8">Ready to Get Started or Learn More?</h2>
200
201 <div class="mb-8">
202 <h3 class="text-xl font-bold text-gray-700 mb-4">Web Applications</h3>
203 <div class="flex flex-col sm:flex-row justify-center gap-6">
204 <a href="programmer.html" class="bg-indigo-500 text-white font-bold py-3 px-6 rounded-full shadow-lg hover:bg-indigo-600 transition duration-300 transform hover:scale-105">
205 ⚙️ Button Programmer
206 </a>
207 <a href="buddy.html" class="bg-purple-500 text-white font-bold py-3 px-6 rounded-full shadow-lg hover:bg-purple-600 transition duration-300 transform hover:scale-105">
208 🤝 Betsy Button Buddy Hub
209 </a>
210 <a href="https://git.woozle.org/neale/betsy-button/" target="_blank" rel="noopener noreferrer" class="bg-gray-700 text-white font-bold py-3 px-6 rounded-full shadow-lg hover:bg-gray-800 transition duration-300 transform hover:scale-105">
211 📖 Source Code Repository
212 </a>
213 </div>
214 </div>
215
216 <div>
217 <h3 class="text-xl font-bold text-gray-700 mb-4">PDF Documentation</h3>
218 <div class="flex flex-col sm:flex-row justify-center gap-6">
219 <a href="assembly.pdf" target="_blank" rel="noopener noreferrer" class="bg-blue-500 text-white font-bold py-3 px-6 rounded-full shadow-lg hover:bg-blue-600 transition duration-300 transform hover:scale-105">
220 🔧 Assembly Guide
221 </a>
222 <a href="programming.pdf" target="_blank" rel="noopener noreferrer" class="bg-blue-500 text-white font-bold py-3 px-6 rounded-full shadow-lg hover:bg-blue-600 transition duration-300 transform hover:scale-105">
223 💻 Programming Guide
224 </a>
225 <a href="manual.pdf" target="_blank" rel="noopener noreferrer" class="bg-blue-500 text-white font-bold py-3 px-6 rounded-full shadow-lg hover:bg-blue-600 transition duration-300 transform hover:scale-105">
226 📖 User Manual
227 </a>
228 <a href="buddy-guide.pdf" target="_blank" rel="noopener noreferrer" class="bg-blue-500 text-white font-bold py-3 px-6 rounded-full shadow-lg hover:bg-blue-600 transition duration-300 transform hover:scale-105">
229 🧑🤝🧑 Buddy Guide
230 </a>
231 </div>
232 </div>
233 </section>
234 </div>
235
236</body>
237</html>