Site Builder

Editing: social-links2.html

writable 0666

<!doctype html>
<meta charset="utf-8">
<title>Add social links – Demo</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
:root{
  --brand:#0066ff;--bg:#f7f9ff;--fg:#111;--chip:#e7edff;
  font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;display:grid;place-content:center;background:var(--bg);color:var(--fg)}
.card{width:clamp(320px,92vw,560px);background:#fff;padding:2.2rem;border-radius:14px;
      box-shadow:0 8px 28px rgba(0,0,0,.07)}
h1{margin-top:0;font-size:1.9rem;text-align:center;color:var(--brand)}
select,button{width:100%;padding:.65rem .75rem;font:inherit;border:1px solid #c9d3e6;
              border-radius:8px}
button{margin-top:1.2rem;background:var(--brand);color:#fff;border:none;font-weight:600;cursor:pointer}
button:hover{filter:brightness(1.09)}
.tags{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.4rem}
.tag{display:inline-flex;align-items:center;gap:.4rem;background:var(--chip);padding:.35rem .8rem;
     border-radius:18px;font-size:.88rem}
.tag svg{width:17px;height:17px}
.tag .x{color:#d91c31;font-weight:700;cursor:pointer;line-height:0}
textarea{display:none}
@media(prefers-color-scheme:dark){
  :root{--bg:#0d1117;--fg:#e6edf3;--brand:#2f81f7;--chip:#26334d}
  .card{background:#161b22;box-shadow:0 6px 22px rgba(0,0,0,.6)}
  select,button{border-color:#394150;background:#0d1117;color:var(--fg)}
}
</style>

<div class="card">
  <h1>Add your social links</h1>

<select id="platform">
    <option value="">Choose a platform…</option>
    <option value="twitter">X / Twitter</option>
    <option value="facebook">Facebook</option>
    <option value="instagram">Instagram</option>
    <option value="linkedin">LinkedIn</option>
    <option value="youtube">YouTube</option>
    <option value="pinterest">Pinterest</option>
    <option value="tiktok">TikTok</option>
    <option value="nextdoor">Nextdoor</option>
    
  </select>

<textarea id="json" name="social_links"></textarea>
</div>

/* ──────────────────── logic ──────────────────── */
const sel  = document.getElementById('platform');
const wrap = document.getElementById('tagWrap');
const txt  = document.getElementById('json');
const btn  = document.getElementById('addBtn');
let data   = {};                                  // {platform:{handle,url}}

btn.onclick=()=>{
  const key = sel.value;
  if(!key) return;
  /* prompt for handle / URL */
  const val = prompt(`Enter your ${key} handle or URL:`,'');
  if(!val) return;
  data[key]={value:val};
  render();
  sel.selectedIndex=0;
};

render();       // initial (empty) render
</script>

Site Builder

Editing: social-links2.html

Site Builder