Spaces:
Running
Running
| <html lang="en"> | |
| <head><meta charset="UTF-8"><title>Settings</title></head> | |
| <body style="margin:0;font-family:sans-serif;background:#f9fafb;color:#111;display:flex;min-height:100vh;"> | |
| <aside style="width:220px;background:#fff;border-right:1px solid #e5e7eb;padding:24px 0;"> | |
| <div style="padding:0 20px 24px;border-bottom:1px solid #e5e7eb;"> | |
| <div style="display:flex;align-items:center;gap:10px;"> | |
| <div style="width:36px;height:36px;border-radius:50%;background:#4f46e5;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;">A</div> | |
| <div><p style="margin:0;font-size:13px;font-weight:600;">Amal Joe</p><p style="margin:0;font-size:11px;color:#888;">Pro Plan</p></div> | |
| </div> | |
| </div> | |
| <nav style="padding:12px 0;"> | |
| <a style="display:block;padding:10px 20px;font-size:14px;color:#4f46e5;background:#ede9fe;font-weight:600;text-decoration:none;">Profile</a> | |
| <a style="display:block;padding:10px 20px;font-size:14px;color:#555;text-decoration:none;">Security</a> | |
| <a style="display:block;padding:10px 20px;font-size:14px;color:#555;text-decoration:none;">Notifications</a> | |
| <a style="display:block;padding:10px 20px;font-size:14px;color:#555;text-decoration:none;">Billing</a> | |
| <a style="display:block;padding:10px 20px;font-size:14px;color:#555;text-decoration:none;">Integrations</a> | |
| </nav> | |
| </aside> | |
| <main style="flex:1;padding:40px;"> | |
| <h1 style="font-size:22px;margin:0 0 6px;">Profile Settings</h1> | |
| <p style="color:#888;font-size:14px;margin:0 0 32px;">Manage your personal information.</p> | |
| <div style="background:#fff;border:1px solid #e5e7eb;border-radius:10px;padding:28px;max-width:560px;"> | |
| <div style="display:flex;gap:16px;margin-bottom:24px;"> | |
| <div style="flex:1;"><label style="font-size:12px;font-weight:600;color:#444;display:block;margin-bottom:6px;">First Name</label><input value="Amal" style="width:100%;box-sizing:border-box;padding:9px 12px;border:1px solid #e5e7eb;border-radius:6px;font-size:14px;"></div> | |
| <div style="flex:1;"><label style="font-size:12px;font-weight:600;color:#444;display:block;margin-bottom:6px;">Last Name</label><input value="Joe" style="width:100%;box-sizing:border-box;padding:9px 12px;border:1px solid #e5e7eb;border-radius:6px;font-size:14px;"></div> | |
| </div> | |
| <label style="font-size:12px;font-weight:600;color:#444;display:block;margin-bottom:6px;">Email</label> | |
| <input value="amaljoe88@gmail.com" style="width:100%;box-sizing:border-box;padding:9px 12px;border:1px solid #e5e7eb;border-radius:6px;font-size:14px;margin-bottom:24px;"> | |
| <label style="font-size:12px;font-weight:600;color:#444;display:block;margin-bottom:6px;">Bio</label> | |
| <textarea rows="3" style="width:100%;box-sizing:border-box;padding:9px 12px;border:1px solid #e5e7eb;border-radius:6px;font-size:14px;margin-bottom:24px;resize:vertical;">Building AI tools for developers.</textarea> | |
| <button style="padding:10px 24px;background:#4f46e5;color:#fff;border:none;border-radius:6px;font-size:14px;cursor:pointer;">Save Changes</button> | |
| </div> | |
| </main> | |
| </body> | |
| </html> | |