Add password reset flow, attendee profile enhancements, and spec

- Add forgot_password and reset_password templates and routes
- Enhance profile.html with photo crop/zoom functionality
- Add attendee type management to edit_attendee.html
- Update templates styling and layout consistency
- Document database schema in SPEC.md
- Add CLAUDE.md project guidance

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

templates/attendee/profile.html

@@ -102,6 +102,14 @@
                 <textarea id="introduction" name="introduction" rows="4">{{ attendee.introduction or '' }}</textarea>
             </div>
 
+            <div class="form-group switch-group">
+                <label for="visible_to_others">{{ 'visible_to_attendees'|t }}</label>
+                <label class="switch">
+                    <input type="checkbox" id="visible_to_others" name="visible_to_others" value="1" {% if attendee.visible_to_others %}checked{% endif %}>
+                    <span class="slider"></span>
+                </label>
+            </div>
+
             <div class="form-actions">
                 <button type="submit" class="btn btn-primary">{{ 'update_profile'|t }}</button>
             </div>
@@ -110,6 +118,53 @@
 </div>
 
 <style>
+.switch-group {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+}
+.switch-group label {
+    margin-bottom: 0;
+}
+.switch {
+    position: relative;
+    display: inline-block;
+    width: 50px;
+    height: 26px;
+}
+.switch input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+}
+.slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #ccc;
+    transition: 0.3s;
+    border-radius: 26px;
+}
+.slider:before {
+    position: absolute;
+    content: "";
+    height: 20px;
+    width: 20px;
+    left: 3px;
+    bottom: 3px;
+    background-color: white;
+    transition: 0.3s;
+    border-radius: 50%;
+}
+input:checked + .slider {
+    background-color: #2ecc71;
+}
+input:checked + .slider:before {
+    transform: translateX(24px);
+}
 .current-photo {
     width: 150px;
     height: 150px;