Spaces:
Configuration error
Configuration error
| {% extends "base.html" %} | |
| {% block title %}Profiles - MemoryBot{% endblock %} | |
| {% block body %} | |
| <div class="min-h-full flex"> | |
| {% include "partials/sidebar.html" %} | |
| <div class="flex-1" style="margin-left:256px;padding:32px;"> | |
| <div style="max-width:900px;margin:0 auto;"> | |
| <div class="flex items-center justify-between slide-up" style="margin-bottom:32px;"> | |
| <div> | |
| <h1 style="font-size:28px;font-weight:800;color:var(--text-primary);margin:0;">Memory Profiles</h1> | |
| <p style="margin-top:6px;color:var(--text-secondary);font-size:15px;">Create and manage memory profiles for your loved ones</p> | |
| </div> | |
| <button onclick="document.getElementById('createModal').classList.remove('hidden')" class="btn-primary"> | |
| <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg> | |
| New Profile | |
| </button> | |
| </div> | |
| {% if profiles %} | |
| <div style="display:grid;grid-template-columns:repeat(2,1fr);gap:20px;"> | |
| {% for p in profiles %} | |
| <a href="/profiles/{{ p.id }}" class="card slide-up" style="text-decoration:none;cursor:pointer;"> | |
| <div style="display:flex;gap:16px;"> | |
| <div class="avatar avatar-lg avatar-purple">{{ p.name[0] }}</div> | |
| <div style="flex:1;min-width:0;"> | |
| <h3 style="font-size:18px;font-weight:700;color:var(--text-primary);margin:0;">{{ p.name }}</h3> | |
| {% if p.relationship_type %} | |
| <span class="badge badge-purple" style="margin-top:6px;">{{ p.relationship_type }}</span> | |
| {% endif %} | |
| {% if p.description %} | |
| <p style="font-size:13px;color:var(--text-secondary);margin:10px 0 0;line-height:1.5;" class="line-clamp-2">{{ p.description }}</p> | |
| {% endif %} | |
| <div style="display:flex;gap:16px;margin-top:12px;font-size:12px;color:var(--text-muted);"> | |
| {% if p.date_of_birth %}<span>Born: {{ p.date_of_birth }}</span>{% endif %} | |
| {% if p.date_of_death %}<span>Died: {{ p.date_of_death }}</span>{% endif %} | |
| </div> | |
| </div> | |
| </div> | |
| </a> | |
| {% endfor %} | |
| </div> | |
| {% else %} | |
| <div class="card" style="padding:64px 32px;text-align:center;"> | |
| <div class="empty-state-icon" style="width:80px;height:80px;"> | |
| <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="var(--accent-purple)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/></svg> | |
| </div> | |
| <h3 style="font-size:20px;font-weight:700;color:var(--text-primary);margin:16px 0 8px;">No profiles yet</h3> | |
| <p style="color:var(--text-secondary);font-size:14px;margin:0 0 24px;">Create your first memory profile to start preserving memories</p> | |
| <button onclick="document.getElementById('createModal').classList.remove('hidden')" class="btn-primary" style="padding:12px 28px;"> | |
| <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg> | |
| Create First Profile | |
| </button> | |
| </div> | |
| {% endif %} | |
| <div id="createModal" class="hidden modal-overlay"> | |
| <div class="card" style="max-width:520px;width:100%;margin:0 16px;padding:32px;max-height:90vh;overflow-y:auto;" class="chat-scroll"> | |
| <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;"> | |
| <h2 style="font-size:20px;font-weight:700;color:var(--text-primary);margin:0;">Create Memory Profile</h2> | |
| <button onclick="document.getElementById('createModal').classList.add('hidden')" style="background:none;border:none;color:var(--text-muted);cursor:pointer;padding:4px;"> | |
| <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg> | |
| </button> | |
| </div> | |
| <form method="POST" action="/profiles/create" onsubmit="document.getElementById('createModal').classList.add('hidden');" style="display:flex;flex-direction:column;gap:16px;"> | |
| <div> | |
| <label style="display:block;font-size:13px;font-weight:600;color:var(--text-secondary);margin-bottom:6px;">Name *</label> | |
| <input type="text" name="name" required class="input-field" placeholder="e.g., Margaret Johnson"> | |
| </div> | |
| <div> | |
| <label style="display:block;font-size:13px;font-weight:600;color:var(--text-secondary);margin-bottom:6px;">Relationship</label> | |
| <input type="text" name="relationship" class="input-field" placeholder="e.g., Grandmother, Father, Friend"> | |
| </div> | |
| <div> | |
| <label style="display:block;font-size:13px;font-weight:600;color:var(--text-secondary);margin-bottom:6px;">Description</label> | |
| <textarea name="description" rows="3" class="input-field" placeholder="Tell us about this person..."></textarea> | |
| </div> | |
| <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;"> | |
| <div> | |
| <label style="display:block;font-size:13px;font-weight:600;color:var(--text-secondary);margin-bottom:6px;">Date of Birth</label> | |
| <input type="date" name="date_of_birth" class="input-field"> | |
| </div> | |
| <div> | |
| <label style="display:block;font-size:13px;font-weight:600;color:var(--text-secondary);margin-bottom:6px;">Date of Death</label> | |
| <input type="date" name="date_of_death" class="input-field"> | |
| </div> | |
| </div> | |
| <div> | |
| <label style="display:block;font-size:13px;font-weight:600;color:var(--text-secondary);margin-bottom:6px;">Personality Traits</label> | |
| <input type="text" name="personality_traits" class="input-field" placeholder="Comma-separated, e.g., Kind, Patient, Witty"> | |
| </div> | |
| <div> | |
| <label style="display:block;font-size:13px;font-weight:600;color:var(--text-secondary);margin-bottom:6px;">Interests</label> | |
| <input type="text" name="interests" class="input-field" placeholder="Comma-separated, e.g., Gardening, Reading, Cooking"> | |
| </div> | |
| <div> | |
| <label style="display:block;font-size:13px;font-weight:600;color:var(--text-secondary);margin-bottom:6px;">Favorite Phrases</label> | |
| <textarea name="favorite_phrases" rows="2" class="input-field" placeholder="One phrase per line"></textarea> | |
| </div> | |
| <div> | |
| <label style="display:block;font-size:13px;font-weight:600;color:var(--text-secondary);margin-bottom:6px;">Speaking Style</label> | |
| <input type="text" name="speaking_style" class="input-field" placeholder="e.g., Warm and gentle, with a slight drawl"> | |
| </div> | |
| <div> | |
| <label style="display:block;font-size:13px;font-weight:600;color:var(--text-secondary);margin-bottom:6px;">Writing Style</label> | |
| <input type="text" name="writing_style" class="input-field" placeholder="e.g., Heartfelt and full of wisdom"> | |
| </div> | |
| <div> | |
| <label style="display:block;font-size:13px;font-weight:600;color:var(--text-secondary);margin-bottom:6px;">Values</label> | |
| <input type="text" name="values" class="input-field" placeholder="Comma-separated, e.g., Family, Faith, Kindness"> | |
| </div> | |
| <div style="display:flex;gap:12px;margin-top:8px;"> | |
| <button type="button" onclick="document.getElementById('createModal').classList.add('hidden')" class="btn-secondary" style="flex:1;justify-content:center;">Cancel</button> | |
| <button type="submit" class="btn-primary" style="flex:1;justify-content:center;">Create Profile</button> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| {% endblock %} | |