Hugging Face's logo

Spaces:
amaljoe88
/
vision-coder-openenv
Running

App Files Community
vision-coder-openenv
File size: 3,170 Bytes
cf6c0e0
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<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>