Site Builder

Editing: drop.html

writable 0666

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Hybrid select + voice entry demo</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
:root{
  --brand:#0052ff; --brand-d:#003cc7; --bg:#f4f7ff; --card:#fff; --radius:14px;
  font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
}
body{margin:0;display:flex;justify-content:center;align-items:flex-start;
     min-height:100vh;background:var(--bg);padding-top:40px}
.card{background:var(--card);border-radius:var(--radius);box-shadow:0 4px 22px rgba(0,0,0,.09);
      width:320px;padding:1.6rem}
label{font-weight:600;font-size:.93rem}
.selectWrap{position:relative;margin-top:.55rem}
.selBtn{width:100%;padding:.65rem 1rem;border:1px solid #cdd4ea;border-radius:10px;font-size:1rem;
       display:flex;justify-content:space-between;align-items:center;cursor:pointer;background:#fff}
.selBtn:after{content:"▾";font-size:.9rem;color:#444}
.list{position:absolute;left:0;right:0;top:105%;background:#fff;border:1px solid #cdd4ea;border-radius:10px;
      box-shadow:0 6px 22px rgba(0,0,0,.08);max-height:260px;overflow:auto;z-index:999;display:none}
.list.show{display:block}
.option{padding:.55rem 1rem;font-size:.95rem;cursor:pointer}
.option:hover{background:#f0f4ff}
.option.sel{background:#e8f0ff}
.otherRow{display:flex;gap:.4rem;padding:.6rem 1rem;border-top:1px solid #e1e5f2}
.otherRow input{flex:1;padding:.6rem .7rem;border:1px solid #cdd4ea;border-radius:8px;font-size:.95rem}
.mic{background:none;border:none;font-size:1.3rem;line-height:1;cursor:pointer}
.mic[hidden]{display:none}
.btn{margin-top:1.3rem;width:100%;padding:.7rem 1rem;border:none;border-radius:10px;font-size:1rem;
     background:var(--brand);color:#fff;font-weight:600;cursor:pointer}
.btn:hover{background:var(--brand-d)}
small{display:block;margin-top:.5rem;color:#555}
</style>
</head>
<body>

<div class="card">
 <label>Select colour (voice‑add option ◉)</label>
 <div class="selectWrap" id="sel">
   <button type="button" class="selBtn" id="selBtn">— choose —</button>
   <div class="list" id="list">
     
     <div class="option">Black</div>
     <div class="option">White</div>
     <div class="option">Red</div>
     <div class="option">Blue</div>
     
     <div class="otherRow">
       <input id="otherInp" placeholder="Other…">
       <button type="button" class="mic" id="micBtn" title="Speak">🎤</button>
     </div>
   </div>
 </div>

<button class="btn" id="showVal">Show selection</button>
 <small id="out"></small>
</div>

<script>
(()=>{

const wrap   = document.getElementById('sel'),
      btn    = document.getElementById('selBtn'),
      list   = document.getElementById('list'),
      opts   = [...list.querySelectorAll('.option')],
      otherI = document.getElementById('otherInp'),
      micBtn = document.getElementById('micBtn'),
      outTxt = document.getElementById('out');

let current = '';          // currently selected value

/* ------------ dropdown toggle ---------------- */
btn.onclick = ()=> list.classList.toggle('show');
document.addEventListener('click',e=>{
  if(!wrap.contains(e.target)) list.classList.remove('show');
});

/* ------------ preset option click ------------ */
opts.forEach(o=>o.onclick=()=>{
  opts.forEach(x=>x.classList.remove('sel'));
  o.classList.add('sel'); current = o.textContent;
  btn.textContent = current; list.classList.remove('show');
});

/* ------------ custom typing ------------------ */
otherI.oninput = ()=>{
  current = otherI.value.trim();
  opts.forEach(x=>x.classList.remove('sel'));
  btn.textContent = current || '— choose —';
};

/* ------------ speech recognition ------------- */
const SR = window.SpeechRecognition||window.webkitSpeechRecognition;
if(!SR){ micBtn.hidden = true; }
else{
  const rec = new SR(); rec.lang='en-US'; rec.interimResults=false;
  micBtn.onclick = ()=>{
    try{ rec.start(); }catch{}
  };
  rec.onresult = e=>{
    const txt = e.results[0][0].transcript.trim();
    otherI.value = txt;
    otherI.dispatchEvent(new Event('input'));
    list.classList.remove('show');
  };
}

/* ------------ demo “Show selection” ---------- */
document.getElementById('showVal').onclick=()=>{
  outTxt.textContent = current ? `→ You chose: "${current}"` : 'Nothing chosen.';
};

})();
</script>
</body>
</html>

Site Builder

Editing: drop.html

Site Builder