FormProfile Forms

---
// FormProfile, recovered from blurr-components.pages.dev
---

<div class="fpr-wrap"> <h2 class="fpr-heading">Profiel bewerken</h2> <form class="fpr-form" novalidate> <div class="fpr-avatar-section"> <div class="fpr-avatar" aria-hidden="true"> Jd </div> <div> <p class="fpr-avatar-name">Jan de Vries</p> <button class="fpr-avatar-btn" type="button">Foto wijzigen</button> </div> </div> <div class="fpr-section"> <h3 class="fpr-section-title">Persoonlijke gegevens</h3> <div class="fpr-row"> <div class="fpr-field"> <label class="fpr-label" for="fpr-first">Voornaam</label> <input class="fpr-input" type="text" id="fpr-first" name="first_name" value="Jan" autocomplete="given-name"> </div> <div class="fpr-field"> <label class="fpr-label" for="fpr-last">Achternaam</label> <input class="fpr-input" type="text" id="fpr-last" name="last_name" value="de Vries" autocomplete="family-name"> </div> </div> <div class="fpr-row"> <div class="fpr-field"> <label class="fpr-label" for="fpr-email">E-mailadres</label> <input class="fpr-input" type="email" id="fpr-email" name="email" value="jan@bedrijf.nl" autocomplete="email"> </div> <div class="fpr-field"> <label class="fpr-label" for="fpr-phone">Telefoonnummer</label> <input class="fpr-input" type="tel" id="fpr-phone" name="phone" value="+31 6 12 34 56 78" autocomplete="tel"> </div> </div> </div> <div class="fpr-section"> <h3 class="fpr-section-title">Professionele gegevens</h3> <div class="fpr-row"> <div class="fpr-field"> <label class="fpr-label" for="fpr-company">Bedrijf</label> <input class="fpr-input" type="text" id="fpr-company" name="company" value="Bedrijf BV" autocomplete="organization"> </div> <div class="fpr-field"> <label class="fpr-label" for="fpr-role">Functietitel</label> <input class="fpr-input" type="text" id="fpr-role" name="role" value="Marketing Manager" autocomplete="organization-title"> </div> </div> <div class="fpr-field"> <label class="fpr-label" for="fpr-bio">Biografie</label> <textarea class="fpr-textarea" id="fpr-bio" name="bio" rows="3">Marketing professional met 10+ jaar ervaring in e-commerce en B2B.</textarea> </div> </div> <div class="fpr-actions"> <button class="fpr-cancel" type="button">Annuleren</button> <button class="fpr-submit" type="submit">Wijzigingen opslaan</button> </div> </form> </div>

<style>
.fpr-wrap{max-width:640px;padding:2rem 0}
.fpr-heading{font-size:1.75rem;font-weight:800;color:var(--color-primary, #0a0a0a);margin:0 0 2rem}
.fpr-form{display:flex;flex-direction:column;gap:2rem}
.fpr-avatar-section{display:flex;align-items:center;gap:1.25rem}
.fpr-avatar{width:64px;height:64px;border-radius:50%;background:var(--color-accent, #6366f1);color:#fff;font-size:1.25rem;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;letter-spacing:.05em}
.fpr-avatar-name{font-size:1rem;font-weight:700;color:var(--color-primary, #0a0a0a);margin:0 0 .35rem}
.fpr-avatar-btn{font-size:.8rem;color:var(--color-accent, #6366f1);background:none;border:none;cursor:pointer;padding:0;font-weight:600}
.fpr-section{display:flex;flex-direction:column;gap:1.1rem}
.fpr-section-title{font-size:.85rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#999;margin:0;padding-bottom:.75rem;border-bottom:1px solid #e5e5e5}
.fpr-row{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.fpr-row{grid-template-columns:1fr}
.fpr-field{display:flex;flex-direction:column;gap:.35rem}
.fpr-label{font-size:.82rem;font-weight:600;color:var(--color-primary, #0a0a0a)}
.fpr-input,.fpr-textarea{padding:.7rem .9rem;border:1.5px solid #ddd;border-radius:8px;font-size:.925rem;color:var(--color-primary, #0a0a0a);background:#fff;transition:border-color .2s;font-family:inherit;box-sizing:border-box;width:100%}
.fpr-input:focus,.fpr-textarea:focus{outline:none;border-color:var(--color-accent, #6366f1);box-shadow:0 0 0 3px #6366f11f}
.fpr-textarea{resize:vertical;min-height:80px}
.fpr-actions{display:flex;gap:.75rem;justify-content:flex-end;padding-top:.5rem;border-top:1px solid #e5e5e5}
.fpr-cancel{padding:.8rem 1.5rem;background:#f5f5f5;color:#555;border:none;border-radius:8px;font-size:.9rem;font-weight:600;cursor:pointer}
.fpr-submit{padding:.8rem 1.75rem;background:var(--color-accent, #6366f1);color:#fff;border:none;border-radius:8px;font-size:.9rem;font-weight:600;cursor:pointer;transition:opacity .2s}
.fpr-submit:hover{opacity:.88}
</style>