Spedale Jr. Chat — HTML Test Window

Editable Code

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Spedale Jr. Photography — Chat</title>
<style>
  :root{--panel:#0f1320;--ink:#e8eefb;--sub:#a4b1c9;--border:#1f2a44;--accent:#2d6cdf;--accent2:#1b9aaa}
  *{box-sizing:border-box} body{margin:0;font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;background:#0a0f1c;color:var(--ink)}
  .bb-wrap{position:fixed;right:20px;bottom:20px;z-index:2147483647}
  .bb-bubble{width:60px;height:60px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent2));
    display:flex;align-items:center;justify-content:center;box-shadow:0 10px 30px rgba(0,0,0,.35);cursor:pointer}
  .bb-bubble svg{width:28px;height:28px;fill:#fff}
  .bb-window{width:380px;max-width:calc(100vw - 40px);height:620px;display:none;flex-direction:column;background:var(--panel);
    border:1px solid var(--border);border-radius:18px;overflow:hidden;box-shadow:0 30px 60px rgba(0,0,0,.45)}
  .bb-header{display:flex;gap:10px;align-items:center;padding:12px 14px;background:#0a0f1c;border-bottom:1px solid var(--border)}
  .bb-title{font-weight:800;letter-spacing:.3px}
  .bb-sub{font-size:12px;color:var(--sub)}
  .bb-close{margin-left:auto;background:transparent;border:none;color:#fff;font-size:20px;cursor:pointer;opacity:.8}
  .bb-body{flex:1;overflow:auto;padding:12px;display:flex;flex-direction:column;gap:10px;
    background:radial-gradient(1200px 80% at 100% 100%, rgba(45,108,223,.08), transparent)}
  .bb-msg{display:flex;gap:10px;align-items:flex-end;max-width:95%}
  .bb-msg.from{justify-content:flex-start}
  .bb-msg.to{justify-content:flex-end}
  .bb-bot{background:#0f172a;border:1px solid var(--border);border-radius:14px;padding:10px 12px;white-space:pre-wrap}
  .bb-user{background:#1e293b;border:1px solid rgba(255,255,255,.06);border-radius:14px;padding:10px 12px;white-space:pre-wrap}
  .bb-toolbar{display:flex;gap:8px;align-items:center;padding:8px;border-top:1px solid var(--border);background:#0a0f1c}
  .bb-toolbar input{border-radius:10px;border:1px solid var(--border);background:#0d1526;color:#e8eefb;padding:8px}
  .bb-toolbar button{border:none;background:#233053;color:#cfe0ff;padding:10px 12px;border-radius:10px;cursor:pointer}
  .bb-toolbar button.primary{background:var(--accent);color:#fff}
  .bb-input{display:flex;gap:8px;padding:10px;border-top:1px solid var(--border);background:#0a0f1c}
  .bb-input input{flex:1;border-radius:12px;border:1px solid var(--border);background:#0d1526;color:#e8eefb;padding:12px}
  .bb-input button{border:none;background:var(--accent);color:#fff;padding:12px 16px;border-radius:12px;cursor:pointer;font-weight:700}
  .bb-suggest{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
  .bb-chip{background:#12213b;border:1px solid var(--border);color:#bfd3ff;font-size:12px;padding:6px 8px;border-radius:999px;cursor:pointer}
  .bb-chip:hover{filter:brightness(1.12)}
  .bb-note{font-size:11px;color:#a4b1c9;opacity:.9}
</style>
</head>
<body>

<div class="bb-wrap" id="bbRoot" aria-live="polite">
  <div class="bb-window" id="bbWindow" role="dialog" aria-label="Spedale Jr. Chat">
    <div class="bb-header">
      <div>
        <div class="bb-title">Spedale Jr. Photography</div>
        <div class="bb-sub">Chipley & Panama City Beach • Text: 833-222-6096</div>
      </div>
      <button class="bb-close" id="bbClose" title="Minimize" aria-label="Minimize chat">×</button>
    </div>

<div class="bb-toolbar" id="bbToolbar">
      <input type="date" id="bbDate" aria-label="Requested date">
      <input type="time" id="bbTime" aria-label="Requested time">
      <input type="email" id="bbEmail" placeholder="your@email.com" aria-label="Your email">
      <button id="bbSet" class="primary">Set Details</button>
      <button id="bbCompose">Compose</button>
      <button id="bbSMS">Text 833-222-6096</button>
      <button id="bbEmailBtn">Email Draft</button>
    </div>

const slots = { service:null, date:null, time:null, location:null, name:null, contact:null };
const transcript = [];

const win=document.getElementById("bbWindow"), body=document.getElementById("bbBody"), inputEl=document.getElementById("bbInput");
const send=document.getElementById("bbSend"), bubble=document.getElementById("bbBubble"), closeBtn=document.getElementById("bbClose");
const inDate=document.getElementById("bbDate"), inTime=document.getElementById("bbTime"), inEmail=document.getElementById("bbEmail");
const btnSet=document.getElementById("bbSet"), btnCompose=document.getElementById("bbCompose"), btnSMS=document.getElementById("bbSMS"), btnEmailBtn=document.getElementById("bbEmailBtn");

function openWin(){win.style.display="flex";bubble.style.display="none";inputEl.focus()} function closeWin(){win.style.display="none";bubble.style.display="flex"}
bubble.addEventListener("click",openWin); closeBtn.addEventListener("click",closeWin);

function addMsg(text,who="bot"){const row=document.createElement("div");row.className="bb-msg "+(who==="bot"?"from":"to");const b=document.createElement("div");b.className=who==="bot"?"bb-bot":"bb-user";b.textContent=text;row.appendChild(b);body.appendChild(row);body.scrollTop=body.scrollHeight;transcript.push({who,text})}

Live Preview

This iframe renders the HTML from the left pane using srcdoc.