Site Builder

Editing: index-lite.html

writable 0666

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Hot / Cold — Price Guess (Demo v2)</title>
<meta name="theme-color" content="#ffffff">
<style>
  :root{
    /* Theme */
    --bg:#0f172a;            /* slate-900 */
    --ink:#0b1220;           /* deep */
    --fg:#0f172a;            /* body text on light cards */
    --muted:#64748b;         /* slate-500 */
    --card:#ffffff;
    --ring:#e5e7eb;          /* slate-200 */
    --ringBold:#cbd5e1;      /* slate-300 */
    --accent:#ff73c6;        /* pink */
    --accent2:#a78bfa;       /* violet */
    --good:#16a34a;          /* green */
    --bad:#ef4444;           /* red */
    --warm:#f59e0b;          /* amber */

--radius:18px;
    --shadow:0 18px 60px rgba(2,6,23,.35);
    --inset:0 10px 25px rgba(2,6,23,.06) inset, 0 1px 0 rgba(255,255,255,.6) inset;
  }
  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0; color:#fff; background:
      radial-gradient(1200px 800px at 10% 0%, rgba(167,139,250,.35), transparent 60%),
      radial-gradient(1000px 600px at 100% 20%, rgba(255,115,198,.28), transparent 60%),
      linear-gradient(180deg,#0b1020,#0f172a 40%, #0b1220);
    font-family: ui-rounded, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
    -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  }
  .wrap{max-width:900px; margin:0 auto; padding:22px 14px 56px}

/* ===== Header ===== */
  .brand{ display:flex; align-items:center; gap:12px; margin:0 0 16px; color:#fff; }
  .brand .logo{width:40px; height:40px; border-radius:12px; display:grid; place-items:center; background:
    radial-gradient(220% 160% at 20% 10%, #fff3, transparent 40%),
    linear-gradient(135deg, var(--accent), var(--accent2));
    box-shadow:0 10px 30px rgba(167,139,250,.4);
  }
  .brand h1{font-size:clamp(20px,2.6vw,28px); margin:0; letter-spacing:.3px}
  .brand p{margin:2px 0 0; color:#cbd5e1; font-size:14px}

/* ===== Single-column Layout ===== */
  .game{display:grid; grid-template-columns:1fr; gap:16px}

.card{background:var(--card); color:var(--fg); border-radius:var(--radius);
        box-shadow: var(--shadow); border:1px solid var(--ringBold)}
  .card .pad{padding:16px}

/* ===== Gameplay ===== */
  .title{ font-size:clamp(18px,2.2vw,24px); margin:0 0 8px; color:#111827 }
  .meta{ margin:0 0 12px; color:#6b7280; font-size:14px }

.input-row{ display:flex; gap:10px; align-items:center; }
  .money{ position:relative; flex:1; }
  .money input{
    width:100%; font:600 20px/1.2 ui-rounded,system-ui,-apple-system,"Segoe UI",Roboto,Arial;
    padding:16px 16px 16px 40px; border-radius:14px; border:1px solid var(--ringBold); background:#fff;
    outline:none; box-shadow: 0 2px 0 rgba(255,255,255,.6) inset, 0 6px 18px rgba(0,0,0,.05);
  }
  .money input:focus{ border-color:#a78bfa; box-shadow:0 0 0 4px rgba(167,139,250,.2) }
  .money .prefix{ position:absolute; left:12px; top:50%; transform:translateY(-50%); color:#64748b; font-weight:700 }

.btn{ appearance:none; border:none; cursor:pointer; padding:14px 18px; border-radius:14px; font-weight:700; font-size:16px;
        color:#fff; background:linear-gradient(135deg,var(--accent),var(--accent2)); box-shadow:0 14px 30px rgba(167,139,250,.35);
        transition:transform .06s ease, filter .2s ease; }
  .btn:hover{ filter:brightness(1.05) }
  .btn:active{ transform:translateY(1px) }
  .btn.secondary{ color:#0f172a; background:#fff; border:1px solid var(--ringBold); box-shadow:0 8px 18px rgba(2,6,23,.08) }

/* ===== Feedback / Heat meter ===== */
  .feedback{ display:grid; grid-template-columns: auto 1fr; gap:14px; align-items:center; margin:12px 0 2px }
  .heat-ring{ --pct:0; --col:#94a3b8; width:72px; height:72px; border-radius:50%;
    background: conic-gradient(var(--col) calc(var(--pct)*1%), #e5e7eb 0);
    position:relative; border:2px solid #f1f5f9; box-shadow:0 6px 16px rgba(0,0,0,.08) inset;
  }
  .heat-ring::after{ content:""; position:absolute; inset:8px; background:#fff; border-radius:50%; box-shadow:0 6px 18px rgba(0,0,0,.06) inset }
  .heat-label{ font-weight:800; letter-spacing:.3px; color:#111827 }
  .heat-detail{ margin:2px 0 0; color:#6b7280; font-size:14px }

.tries{ margin:8px 0 0; color:#6b7280; font-size:13px }
  .hint{ margin:8px 0 0; color:#0f172a; background:#f8fafc; border:1px dashed #e2e8f0; border-radius:12px; padding:10px 12px; display:none }

.cta{ margin-top:12px }
  .amazon-btn{ display:inline-block; text-decoration:none; font-weight:800; color:#0f172a; background:#fff;
               border:1px solid var(--ringBold); border-radius:999px; padding:12px 16px; box-shadow:0 8px 18px rgba(2,6,23,.06) }

/* ===== Settings ===== */
  details.settings{ margin-top:16px }
  details.settings > summary{ cursor:pointer; list-style:none; user-select:none; color:#e2e8f0; font-weight:700; margin-bottom:10px }
  details.settings .panel{ background:#0b1327; border:1px solid #1f2a44; border-radius:14px; padding:14px; color:#cbd5e1 }
  .settings .row{ display:flex; gap:18px; flex-wrap:wrap }
  .settings label{ display:flex; align-items:center; gap:8px; font-size:14px }
  .settings select, .settings input[type="checkbox"]{ accent-color:#a78bfa }

/* ===== Footer blurb ===== */
  .foot{ margin-top:16px; color:#94a3b8; font-size:12px }

/* Mobile-first tweaks */
  @media (max-width: 560px){
    .input-row{ flex-direction:column; align-items:stretch }
    .btn{ width:100% }
  }
</style>
</head>
<body>
  <div class="wrap">
    <header class="brand">
      <div class="logo" aria-hidden="true">
        <svg width="22" height="22" viewBox="0 0 24 24" fill="#fff"><path d="M12 2l2.39 4.84L20 8l-4 3.9.94 5.48L12 15.77 7.06 17.38 8 13 4 9l5.61-.16L12 2z"/></svg>
      </div>
      <div>
        <h1>Hot / Cold — Price Guess</h1>
        <p>Guess the target price in as few tries as possible.</p>
      </div>
    </header>

<section class="game">
      
      <div class="card pad">
        <h2 class="title" id="title">Wireless ANC over‑ear headphones</h2>
        <p class="meta" id="meta">Category · <span id="category">Electronics</span> · ASIN <code id="asin">B0DEMO001</code></p>

<div class="input-row">
          <label class="money" for="guess">
            <span class="prefix">$</span>
            <input id="guess" type="number" inputmode="decimal" step="0.01" placeholder="Enter your guess" aria-label="Enter your price guess" />
          </label>
          <button class="btn" id="btnGuess">Guess</button>
        </div>

<div class="feedback">
          <div class="heat-ring" id="heatRing" aria-hidden="true"></div>
          <div>
            <div class="heat-label" id="heatLabel">I'll tell you if you're hot or cold.</div>
            <div class="heat-detail" id="heatDetail">Try a number and press Guess.</div>
          </div>
        </div>

<div class="tries" id="tries">Tries: <strong>0</strong> / <span id="maxTries">6</span></div>
        <div class="hint" id="hintBox" role="status" aria-live="polite"></div>

<div style="display:flex; gap:10px; margin-top:12px; flex-wrap:wrap">
          <button class="btn secondary" id="btnHint">Hint</button>
          <button class="btn secondary" id="btnReveal">Reveal</button>
          <button class="btn" id="btnNext" hidden>Next item</button>
        </div>

<div class="cta">
          <a class="amazon-btn" id="linkAmazon" href="#" target="_blank" rel="nofollow sponsored noopener">View images and price at Amazon</a>
        </div>

<p class="foot">Game target price is for gameplay only and is <em>not</em> Amazon’s price. For current price and availability, check Amazon.</p>
      </div>
    </section>

<details class="settings">
      <summary>Settings</summary>
      <div class="panel">
        <div class="row">
          <label>Difficulty
            <select id="difficulty">
              <option value="relaxed">Relaxed (±15%)</option>
              <option value="normal" selected>Normal (±10%)</option>
              <option value="hard">Hard (±6%)</option>
            </select>
          </label>
          <label><input type="checkbox" id="dirToggle" checked> Tell me “higher / lower”</label>
          <label><input type="checkbox" id="allowHints" checked> Allow hints</label>
        </div>
      </div>
    </details>

<p class="foot">As an Amazon Associate I earn from qualifying purchases.</p>
  </div>

const el = {
    title: $('#title'), meta: $('#meta'), category: $('#category'), asin: $('#asin'),
    guess: $('#guess'), btnGuess: $('#btnGuess'), heatRing: $('#heatRing'), heatLabel: $('#heatLabel'), heatDetail: $('#heatDetail'),
    tries: $('#tries'), maxTries: $('#maxTries'), btnHint: $('#btnHint'), hintBox: $('#hintBox'), btnReveal: $('#btnReveal'), btnNext: $('#btnNext'),
    linkAmazon: $('#linkAmazon'), difficulty: $('#difficulty'), dirToggle: $('#dirToggle'), allowHints: $('#allowHints')
  };

const MAX_TRIES = 6;
  el.maxTries.textContent = MAX_TRIES;

let idx = 0, target = 0, tries = 0, ended = false;

function amazonLink(asin, tag='YOURTAG-20'){
    return `https://www.amazon.com/dp/${encodeURIComponent(asin)}?tag=${encodeURIComponent(tag)}`;
  }

function fmt(n){
    return n.toLocaleString(undefined,{style:'currency', currency:'USD'});
  }

function applyHeat(h){
    el.heatRing.style.setProperty('--pct', h.pct);
    el.heatRing.style.setProperty('--col', h.col);
    el.heatLabel.textContent = h.label;
  }

const h = heat(g, target); applyHeat(h);

const dir = g < target ? 'Higher' : (g > target ? 'Lower' : 'Bang on!');
    const showDir = el.dirToggle.checked;

if (g === target){
      el.heatDetail.textContent = `Perfect! Target was ${fmt(target)}.`;
      endRound();
      return;
    }

if (navigator.vibrate){
      // subtle haptics: colder -> shorter, warmer -> longer
      const dur = h.ratio > .25 ? 15 : h.ratio > .10 ? 25 : 35;
      navigator.vibrate(dur);
    }

if (tries >= MAX_TRIES){
      el.heatDetail.textContent = `Out of tries. Target was ${fmt(target)}.`;
      endRound();
    }
  }

function reveal(){
    el.heatLabel.textContent = 'Reveal';
    el.heatDetail.textContent = `Target was ${fmt(target)}.`;
    endRound();
  }

function endRound(){
    ended = true;
    el.btnNext.hidden = false; el.btnGuess.disabled = true; el.guess.disabled = true; el.btnReveal.disabled = true;
  }

// Events
  el.btnGuess.addEventListener('click', guessOnce);
  el.guess.addEventListener('keydown', e=>{ if (e.key === 'Enter') guessOnce(); });
  el.btnHint.addEventListener('click', showHint);
  el.btnReveal.addEventListener('click', reveal);
  el.btnNext.addEventListener('click', ()=> load(idx+1));

// Init
  load(0);
})();
</script>
</body>
</html>

Site Builder

Editing: index-lite.html

Site Builder