!doctype html html lang="en" head meta charset="utf-8" / meta name="viewport" content="width=device-width,initial-scale=1" / titleEditable Team Cards — Sample/title style :root{--card-bg:#ffffff;--accent:#0f62fe;--muted:#666} body{font-family:Inter, Roboto, system-ui, -apple-system, sans-serif; background:#f4f6fb; margin:0; padding:32px; color:#0b1220} h1{font-size:20px;margin:0 0 18px} .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px} .card{background:var(--card-bg);border-radius:12px;box-shadow:0 6px 18px rgba(11,18,32,0.06);padding:16px;display:flex;gap:12px;align-items:center} .avatar{width:84px;height:84px;border-radius:10px;overflow:hidden;flex:0 0 84px;background:#eee;display:flex;align-items:center;justify-content:center} .avatar img{width:100%;height:100%;object-fit:cover;display:block} .meta{flex:1} .name{font-weight:700;font-size:16px;margin-bottom:4px} .title{color:var(--muted);font-size:13px;margin-bottom:10px} .controls{display:flex;gap:8px;flex-wrap:wrap} .controls input[type="text"]{padding:8px;border-radius:8px;border:1px solid #e2e6ef;background:#fafbff;min-width:120px} .file-label{display:inline-block;padding:8px 10px;border-radius:8px;border:1px dashed #d6dbf7;cursor:pointer;font-size:13px} .small{font-size:12px;color:#78809a} .actions{display:flex;gap:8px;margin-left:auto} button{background:var(--accent);color:white;border:0;padding:8px 10px;border-radius:8px;cursor:pointer} button.ghost{background:transparent;color:var(--accent);border:1px solid rgba(15,98,254,0.12)} footer{margin-top:18px;color:#445; font-size:13px} @media (max-width:420px){.controls input[type="text"]{min-width:100%}} /style /head body h1Team (editable) — sample of 4 members/h1 p class="small"Click a "Choose image" button to replace the photo. Edit name/title directly in the fields — changes apply instantly./p
div class="grid" id="teamGrid"
!-- Card 1 -- article class="card" data-id="1" div class="avatar"img src="https://via.placeholder.com/300x300.png?text=Alice" alt="Alice"/div div class="meta" div class="name" data-role="display-name"Alice Johnson/div div class="title" data-role="display-title"Product Manager/div div class="controls" label class="file-label"Choose imageinput type="file" accept="image/*" class="file-input" style="display:none"/label input type="text" class="edit-name" placeholder="Edit name" value="Alice Johnson" input type="text" class="edit-title" placeholder="Edit title" value="Product Manager" /div /div /article
!-- Card 2 -- article class="card" data-id="2" div class="avatar"img src="https://via.placeholder.com/300x300.png?text=Ben" alt="Ben"/div div class="meta" div class="name" data-role="display-name"Ben Thompson/div div class="title" data-role="display-title"Lead Developer/div div class="controls" label class="file-label"Choose imageinput type="file" accept="image/*" class="file-input" style="display:none"/label input type="text" class="edit-name" placeholder="Edit name" value="Ben Thompson" input type="text" class="edit-title" placeholder="Edit title" value="Lead Developer" /div /div /article
!-- Card 3 -- article class="card" data-id="3" div class="avatar"img src="https://via.placeholder.com/300x300.png?text=Cara" alt="Cara"/div div class="meta" div class="name" data-role="display-name"Cara Delgado/div div class="title" data-role="display-title"UX Designer/div div class="controls" label class="file-label"Choose imageinput type="file" accept="image/*" class="file-input" style="display:none"/label input type="text" class="edit-name" placeholder="Edit name" value="Cara Delgado" input type="text" class="edit-title" placeholder="Edit title" value="UX Designer" /div /div /article
!-- Card 4 -- article class="card" data-id="4" div class="avatar"img src="https://via.placeholder.com/300x300.png?text=Dave" alt="Dave"/div div class="meta" div class="name" data-role="display-name"Dave Martin/div div class="title" data-role="display-title"Marketing Lead/div div class="controls" label class="file-label"Choose imageinput type="file" accept="image/*" class="file-input" style="display:none"/label input type="text" class="edit-name" placeholder="Edit name" value="Dave Martin" input type="text" class="edit-title" placeholder="Edit title" value="Marketing Lead" /div /div /article
/div
footer Tip: copy this HTML file and open it in a browser. You can replace the placeholder image URLs in the code<img>/code tags or use the "Choose image" buttons at runtime. /footer
script // When a file is selected, read it and replace the corresponding image. document.querySelectorAll('.card').forEach(card = { const fileInput = card.querySelector('.file-input'); const img = card.querySelector('.avatar img'); const displayName = card.querySelector('[data-role="display-name"]'); const displayTitle = card.querySelector('[data-role="display-title"]'); const editName = card.querySelector('.edit-name'); const editTitle = card.querySelector('.edit-title');
// File - image fileInput.addEventListener('change', ev = { const file = ev.target.files && ev.target.files[0]; if (!file) return; if (!file.type.startsWith('image/')){ alert('Please select an image file.'); return; } const reader = new FileReader(); reader.onload = e = { img.src = e.target.result; // data URL }; reader.readAsDataURL(file); });
// Live-update name/title as user types editName.addEventListener('input', e = displayName.textContent = e.target.value || 'Unnamed'); editTitle.addEventListener('input', e = displayTitle.textContent = e.target.value || 'Untitled');
// Also allow clicking the label to open file picker (the label wraps the input) });
// Optional: drag & drop support for each avatar area document.querySelectorAll('.avatar').forEach(avatar = { avatar.addEventListener('dragover', e = { e.preventDefault(); avatar.style.opacity = '0.8'; }); avatar.addEventListener('dragleave', e = { avatar.style.opacity = '1'; }); avatar.addEventListener('drop', e = { e.preventDefault(); avatar.style.opacity = '1'; const card = avatar.closest('.card'); const file = e.dataTransfer.files && e.dataTransfer.files[0]; if (!file) return; if (!file.type.startsWith('image/')){ alert('Please drop an image file.'); return; } const reader = new FileReader(); reader.onload = ev = card.querySelector('.avatar img').src = ev.target.result; reader.readAsDataURL(file); }); });
/script /body /html