`public/panels/quickpost.html`

80 lines
<div class="kidpost" aria-labelledby="kp-title">
  <header class="kp-hero">
    <div><span class="kp-kicker">MAKE ONE GREAT POST</span><h2 id="kp-title">What do you want to share?</h2><p>Choose one thing at a time. You can go back whenever you want.</p></div>
    <div class="kp-score" aria-live="polite"><b id="kp-progress">1 of 5</b><span>steps done</span></div>
  </header>
  <div class="kp-steps" role="tablist" aria-label="Post creation steps">
    <button class="kp-step on" data-go="1" role="tab"><span>1</span><b>Picture</b></button><button class="kp-step" data-go="2" role="tab"><span>2</span><b>Music</b></button><button class="kp-step" data-go="3" role="tab"><span>3</span><b>Words</b></button><button class="kp-step" data-go="4" role="tab"><span>4</span><b>Where</b></button><button class="kp-step" data-go="5" role="tab"><span>5</span><b>Check</b></button>
  </div>
  <main class="kp-card">
    <section class="kp-pane on" data-step="1">
      <div class="kp-number">1</div><div class="kp-copy"><h3>Pick a picture or video</h3><p>Tap one you like. Every DW post needs a picture or video.</p></div>
      <div class="kp-asset-tools"><div class="kp-filter" role="group" aria-label="Picture choices"><button type="button" class="on" data-filter="all">✨ All ideas</button><button type="button" data-filter="catalog">🏷️ DW picks</button><button type="button" data-filter="upload">📤 My uploads</button><button type="button" class="kp-filter-showroom" data-filter="showroom">🏛️ Showroom</button></div><input id="kp-asset-search" type="search" placeholder="🔎 Find a color or room" aria-label="Find a picture"></div>
      <div class="kp-view-tools" role="group" aria-label="How the pictures are shown">
        <div class="kp-views" role="group" aria-label="View"><button type="button" class="on" data-view="grid" aria-pressed="true">▦ Grid</button><button type="button" data-view="list" aria-pressed="false">☰ List</button><button type="button" data-view="kv" aria-pressed="false">⊞ Details</button></div>
        <label class="kp-density"><span>Bigger</span><input id="kp-density" type="range" min="2" max="8" step="1" value="4" aria-label="Space between pictures — left is bigger, right fits more"><span>Smaller</span></label>
      </div>
      <div id="kp-showroom-note" class="kp-showroom-note" role="note" hidden></div>
      <div id="kp-assets" class="kp-assets view-grid" aria-live="polite"><div class="kp-wait">Loading your pictures…</div></div>
      <details class="kp-more"><summary>Paste a picture link instead</summary><input id="kp-media" type="url" placeholder="https://…/picture.jpg" autocomplete="off"></details>
    </section>
    <section class="kp-pane" data-step="2" hidden>
      <div class="kp-number">2</div><div class="kp-copy"><h3>Pick a music idea?</h3><p>Music is optional. Listen first, then pick a suggestion or choose “No music.” The social app may ask you to add it there.</p></div><div id="kp-music" class="kp-choices"><div class="kp-wait">Loading music choices…</div></div>
    </section>
    <section class="kp-pane" data-step="3" hidden>
      <div class="kp-number">3</div><div class="kp-copy"><h3>Choose the words</h3><p>Tell us the idea. We will suggest three captions you can use or change.</p></div>
      <label class="kp-label" for="kp-topic">What is this post about?</label><div class="kp-prompt"><input id="kp-topic" type="text" placeholder="Example: a new blue grasscloth wallpaper"><button id="kp-suggest" type="button">✨ Give me ideas</button></div>
      <div id="kp-suggestions" class="kp-suggestions" aria-live="polite"></div><label class="kp-label" for="kp-caption">Your final words</label><textarea id="kp-caption" placeholder="Pick an idea above, or write your own words here."></textarea><div id="kp-count" class="kp-count">0 / 2,200</div>
    </section>
    <section class="kp-pane" data-step="4" hidden>
      <div class="kp-number">4</div><div class="kp-copy"><h3>Where should it go?</h3><p>Pick one or more places. Or choose every connected account.</p></div>
      <div class="kp-allrow"><button id="kp-all" type="button">✓ Post to all connected accounts</button><button id="kp-none" type="button">Clear choices</button></div><div id="kp-channels" class="kp-channels" aria-live="polite"><div class="kp-wait">Checking your social accounts…</div></div>
      <label class="kp-label" for="kp-account">Instagram account</label><select id="kp-account"><option value="">Loading accounts…</option></select>
    </section>
    <section class="kp-pane" data-step="5" hidden>
      <div class="kp-number">5</div><div class="kp-copy"><h3>Check everything</h3><p>Look it over. Nothing posts until you say yes.</p></div><div id="kp-review" class="kp-review"></div>
      <label class="kp-confirm"><input id="kp-confirm" type="checkbox"><span>I checked the picture, words, music suggestion, and accounts. I’m ready to post.</span></label><button id="kp-publish" class="kp-publish" type="button" disabled>Post now</button><button id="kp-draft" class="kp-draft" type="button">Save a draft</button><div id="kp-result" class="kp-result" role="status" aria-live="polite"></div>
    </section>
    <footer class="kp-nav"><button id="kp-back" type="button" disabled>← Back</button><button id="kp-next" type="button">Next: Music →</button></footer>
  </main>
</div>
<style>
.kidpost{--navy:#172235;--paper:#fffdf7;--sun:#f6c84c;--green:#287a55;--coral:#df684f;max-width:1120px;margin:0 auto;color:var(--navy);font-family:"Avenir Next",Avenir,"Trebuchet MS",sans-serif}.kp-hero{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;padding:24px 28px;background:var(--navy);color:#fff;border-radius:24px 24px 0 0;box-shadow:0 18px 45px rgba(23,34,53,.14)}.kp-kicker{font-size:12px;font-weight:800;letter-spacing:.16em;color:var(--sun)}.kp-hero h2{font:700 clamp(28px,4vw,48px)/1.02 "Cormorant Garamond",Georgia,serif;margin:7px 0}.kp-hero p{margin:0;color:#dce4ef;font-size:16px}.kp-score{background:var(--sun);color:var(--navy);border-radius:18px;padding:12px 17px;text-align:center;min-width:94px}.kp-score b{display:block;font-size:20px}.kp-score span{font-size:11px;font-weight:700}
.kp-steps{display:grid;grid-template-columns:repeat(5,1fr);background:#edf0f3;padding:12px;gap:8px}.kp-step{border:0;background:transparent;padding:9px 4px;border-radius:14px;color:#6c7480;cursor:pointer}.kp-step span{display:grid;place-items:center;width:34px;height:34px;margin:0 auto 5px;border:2px solid #aab1ba;border-radius:50%;font-weight:800}.kp-step b{font-size:12px}.kp-step.on{background:#fff;color:var(--navy);box-shadow:0 4px 14px rgba(23,34,53,.09)}.kp-step.on span,.kp-step.done span{border-color:var(--green);background:var(--green);color:#fff}.kp-card{background:var(--paper);border:1px solid #e0ddd2;border-top:0;border-radius:0 0 24px 24px;box-shadow:0 18px 45px rgba(23,34,53,.14);overflow:hidden}.kp-pane{padding:30px;min-height:390px}.kp-number{float:left;display:grid;place-items:center;width:48px;height:48px;border-radius:16px;background:var(--sun);font-size:24px;font-weight:900;margin-right:14px}.kp-copy{min-height:58px}.kp-copy h3{font:700 28px/1.1 "Cormorant Garamond",Georgia,serif;margin:0 0 5px}.kp-copy p{margin:0;color:#667080;font-size:15px}
.kp-assets{display:grid;grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));gap:12px;margin-top:18px;max-height:440px;overflow:auto;padding:4px}.kp-asset{position:relative;aspect-ratio:1;border:3px solid transparent;border-radius:16px;overflow:hidden;background:#ece8de;cursor:pointer;padding:0}.kp-asset img{width:100%;height:100%;object-fit:cover}.kp-asset-name{position:absolute;inset:auto 0 0;padding:18px 7px 6px;background:linear-gradient(transparent,rgba(23,34,53,.88));color:#fff;font-size:11px;font-weight:700;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}.kp-asset.on{border-color:var(--green);box-shadow:0 0 0 3px #c8ead9}.kp-asset.on:after{content:'✓';position:absolute;right:7px;top:7px;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--green);color:#fff;font-weight:900;pointer-events:none}.kp-more{margin-top:18px;color:#5c6570}.kp-more summary{cursor:pointer;font-weight:700}.kp-more input,.kp-prompt input,#kp-caption,#kp-account{width:100%;box-sizing:border-box;margin-top:9px;border:2px solid #d7d9dc;border-radius:13px;padding:12px 14px;font:inherit;background:#fff}.kp-more input:focus,.kp-prompt input:focus,#kp-caption:focus,#kp-account:focus{outline:3px solid #f8dfa0;border-color:#c99927}
.kp-asset-tools{display:flex;gap:10px;align-items:center;margin-top:20px;flex-wrap:wrap}.kp-filter{display:flex;gap:6px;flex-wrap:wrap}.kp-filter button{border:1px solid #dadddf;background:#fff;border-radius:999px;padding:8px 11px;font:700 12px inherit;cursor:pointer}.kp-filter button.on{background:var(--navy);border-color:var(--navy);color:#fff}.kp-asset-tools input{flex:1;min-width:180px;border:2px solid #d7d9dc;border-radius:999px;padding:9px 13px;font:inherit}
.kp-choices,.kp-channels{display:grid;grid-template-columns:repeat(auto-fill,minmax(205px,1fr));gap:12px;margin-top:22px}.kp-choice,.kp-channel{min-height:86px;text-align:left;border:2px solid #dadddf;background:#fff;border-radius:16px;padding:14px;cursor:pointer;color:var(--navy);font:inherit}.kp-choice b,.kp-channel b{display:block;font-size:15px;margin-bottom:4px}.kp-choice small,.kp-channel small{display:block;color:#6b7480;line-height:1.35}.kp-choice.on,.kp-channel.on{border-color:var(--green);background:#ecf8f1;box-shadow:0 0 0 2px #c8ead9}.kp-channel.off{opacity:.48;cursor:not-allowed}.kp-label{display:block;margin-top:20px;font-weight:800;font-size:14px}.kp-prompt{display:flex;gap:10px}.kp-prompt input{margin:9px 0 0}.kp-prompt button,#kp-all,#kp-none{border:0;border-radius:12px;padding:12px 16px;font-weight:800;cursor:pointer;white-space:nowrap}.kp-prompt button{margin-top:9px;background:var(--sun);color:var(--navy)}
.kp-music-card{border:2px solid #dadddf;background:#fff;border-radius:16px;padding:10px}.kp-music-card.on{border-color:var(--green);background:#ecf8f1;box-shadow:0 0 0 2px #c8ead9}.kp-music-card .kp-choice{width:100%;border:0;padding:5px;background:transparent;box-shadow:none;min-height:66px}.kp-music-card audio{width:100%;height:34px;margin-top:6px}.kp-license{font-size:11px;color:#52606d;margin:5px 4px 0}.kp-disclosure{font-size:12px;color:#5d6874;background:#f1f4f6;border-radius:10px;padding:9px;margin-top:8px}
.kp-suggestions{display:grid;gap:9px;margin-top:14px}.kp-suggestion{border:2px solid #dadddf;background:#fff;border-radius:14px;padding:12px 14px;text-align:left;cursor:pointer;font:inherit;line-height:1.45}.kp-suggestion:hover{border-color:#c99927;background:#fffaec}.kp-suggestion:before{content:'Use this';display:block;color:var(--green);font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.08em;margin-bottom:4px}#kp-caption{min-height:130px;resize:vertical}.kp-count{text-align:right;color:#707987;font-size:12px;margin-top:4px}.kp-allrow{display:flex;gap:9px;margin-top:20px}#kp-all{background:var(--navy);color:#fff}#kp-none{background:#e9ecef;color:var(--navy)}
.kp-review{display:grid;grid-template-columns:190px 1fr;gap:20px;margin-top:22px;border:2px solid #dadddf;border-radius:18px;padding:16px;background:#fff}.kp-preview{aspect-ratio:1;border-radius:13px;overflow:hidden;background:#ece8de}.kp-preview img,.kp-preview video{width:100%;height:100%;object-fit:cover}.kp-summary h4{margin:2px 0 5px;font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:#75808c}.kp-summary p{white-space:pre-wrap;line-height:1.5;margin:0 0 14px}.kp-tags{display:flex;gap:7px;flex-wrap:wrap}.kp-tag{background:#edf1f4;border-radius:999px;padding:6px 10px;font-size:12px;font-weight:700}.kp-confirm{display:flex;gap:12px;align-items:flex-start;background:#fff5d5;border:2px solid #efd06f;border-radius:15px;padding:14px;margin-top:17px;font-weight:700;line-height:1.4}.kp-confirm input{width:22px;height:22px;flex:none}.kp-publish,.kp-draft{width:100%;border:0;border-radius:14px;padding:15px;margin-top:12px;font:800 17px/1 inherit;cursor:pointer}.kp-publish{background:var(--green);color:#fff}.kp-publish:disabled{background:#aeb6b1;cursor:not-allowed}.kp-draft{background:#e9ecef;color:var(--navy)}.kp-result{margin-top:12px;font-weight:700;line-height:1.45}.kp-result.ok{color:var(--green)}.kp-result.bad{color:#a33c2f}.kp-nav{display:flex;justify-content:space-between;border-top:1px solid #e3e1d9;padding:16px 30px;background:#fff}.kp-nav button{border:0;border-radius:12px;padding:12px 18px;font-weight:800;cursor:pointer}.kp-nav button:disabled{opacity:.35}.kp-nav #kp-next{background:var(--coral);color:#fff}.kp-wait{grid-column:1/-1;padding:28px;text-align:center;color:#68717c}.kp-error{background:#fff0eb;color:#923f32;border-radius:12px;padding:12px;margin-top:12px}
@media(max-width:700px){.kp-hero{align-items:flex-start;padding:20px}.kp-score{display:none}.kp-steps{gap:3px}.kp-step b{display:none}.kp-pane{padding:22px 16px}.kp-assets{grid-template-columns:repeat(3,1fr)}.kp-prompt{display:block}.kp-prompt button{width:100%}.kp-review{grid-template-columns:1fr}.kp-preview{max-height:280px}.kp-nav{padding:14px 16px}}
</style>
<style>.kp-asset img{pointer-events:none}.kp-asset-name,.kp-asset.on:after{pointer-events:none}.kp-step:disabled{cursor:not-allowed;opacity:.5}
/* Inline view + density controls (nav-agent style) */
.kp-view-tools{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:12px}
.kp-views{display:flex;gap:6px}.kp-views button{border:1px solid #dadddf;background:#fff;border-radius:999px;padding:8px 13px;font:700 12px inherit;color:var(--navy);cursor:pointer}.kp-views button.on{background:var(--green);border-color:var(--green);color:#fff}
.kp-density{display:flex;align-items:center;gap:9px;font-size:11px;font-weight:800;color:#8894a2;text-transform:uppercase;letter-spacing:.05em}.kp-density input[type=range]{width:150px;accent-color:var(--green);cursor:pointer}.kp-density[hidden]{display:none}
/* thumbnail + row shared bits */
.kp-thumb{display:block;overflow:hidden;background:#ece8de;flex:none}.kp-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.kp-row-main{min-width:0;overflow:hidden}.kp-row-name{display:block;font-size:14px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--navy)}
.kp-kv{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}.kp-kv-chip{background:#edf1f4;border-radius:999px;padding:3px 9px;font-size:11px;font-weight:700;color:#3d4653}.kp-kv-chip i{font-style:normal;text-transform:uppercase;letter-spacing:.06em;color:#8894a2;margin-right:5px;font-size:9px}
/* List + Details (kv) view: one column, thumb on the left, text on the right */
.kp-assets.view-list,.kp-assets.view-kv{grid-template-columns:1fr;gap:8px}
.view-list .kp-asset,.view-kv .kp-asset{aspect-ratio:auto;display:flex;align-items:center;gap:12px;text-align:left;padding:8px;background:#fff;border:2px solid #e4e1d8;border-radius:14px}
.view-list .kp-asset .kp-thumb,.view-kv .kp-asset .kp-thumb{width:56px;height:56px;border-radius:10px}
.view-kv .kp-asset .kp-thumb{width:70px;height:70px}
.view-list .kp-asset-name,.view-kv .kp-asset-name{display:none}
.view-list .kp-asset.on,.view-kv .kp-asset.on{border-color:var(--green);background:#ecf8f1}
.view-list .kp-asset.on:after,.view-kv .kp-asset.on:after{top:50%;right:12px;transform:translateY(-50%)}
/* Showroom-only lines — separate area, always the correct (invite-to-showroom) language */
.kp-filter-showroom{border-color:#c9bdf2 !important;color:#5a45b8}
.kp-filter-showroom.on{background:#6b4bd6 !important;border-color:#6b4bd6 !important;color:#fff !important}
.kp-badge-showroom{position:absolute;left:7px;top:7px;z-index:2;background:#6b4bd6;color:#fff;font:900 9px/1 inherit;letter-spacing:.07em;text-transform:uppercase;padding:4px 7px;border-radius:999px;pointer-events:none;box-shadow:0 2px 6px rgba(23,34,53,.25)}
.kp-asset.is-showroom{border-color:#c9bdf2}
.view-list .kp-badge-showroom,.view-kv .kp-badge-showroom{position:static;display:inline-block;margin-top:6px;box-shadow:none}
.kp-showroom-note{margin-top:14px;border:2px solid #d7ccf5;background:#f4f0fe;border-radius:16px;padding:13px 15px;color:#3c2f66;line-height:1.5}
.kp-showroom-note[hidden]{display:none}
.kp-showroom-note b{display:block;font-size:14px;color:#5a45b8;margin-bottom:3px}
.kp-showroom-note em{font-style:normal;background:#e6dcff;border-radius:6px;padding:1px 5px;font-weight:700}
.kp-showroom-note .no{color:#a33c2f;font-weight:800;text-decoration:line-through}</style>