paytolaugh/create.html

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>New video — PayToLaugh</title>
<meta name="description" content="Pick your pet, paste a link, set the scene, tell the director what you think.">
<link rel="stylesheet" href="/assets/app.css">
</head>
<body>
<div class="wrap">

  <header class="page">
    <h1>Make a new video</h1>
    <p>Pick the pet, paste whatever you want them to react to, and tell the director what you actually think. The opinion is yours; the delivery is theirs. You can direct every shot afterwards.</p>
  </header>

  <section>
    <div class="card">
      <div class="msg" id="msg"></div>
      <form id="form">

        <h2 class="sec">1 &middot; Who is talking</h2>
        <div class="field">
          <label for="pet">Pet</label>
          <span class="hint">Profiles and photos live on <a href="/pets.html">My pets</a>.</span>
          <select id="pet"></select>
        </div>

        <h2 class="sec" style="margin-top:34px">2 &middot; What they are reacting to</h2>
        <div class="field">
          <label for="url">Link to an article, post or story</label>
          <span class="hint">Anything with a claim in it. News piece, a thread, a video.</span>
          <input type="url" id="url" placeholder="https://…">
        </div>
        <div class="field">
          <label for="notes">Your opinion, and notes for the director</label>
          <span class="hint">Say what you think and how you want it played. Two sentences is plenty.</span>
          <textarea id="notes" placeholder="Astro has hated our robot vacuum since day one and barks at it every time it docks. Play it like he is filing a formal grievance with management."></textarea>
        </div>

        <h2 class="sec" style="margin-top:34px">3 &middot; Where it happens</h2>
        <div class="field">
          <label for="scene">The setting <span style="color:var(--muted);font-weight:400">(optional)</span></label>
          <span class="hint">A starting point for every shot, which you can change shot by shot later. Real or not: a podcast booth, a field of tall grass, floating on a surfboard.</span>
          <input type="text" id="scene" placeholder="a podcast booth with warm lamps behind">
        </div>
        <div class="field">
          <label>Do they agree or disagree?</label>
          <div class="chips" id="stance">
            <span class="chip on" data-v="auto">Let the writer decide</span>
            <span class="chip" data-v="agree">Agree</span>
            <span class="chip" data-v="disagree">Disagree</span>
            <span class="chip" data-v="mixed">A bit of both</span>
          </div>
        </div>

        <h2 class="sec" style="margin-top:34px">4 &middot; How long</h2>
        <div class="field">
          <div class="chips" id="len">
            <span class="chip" data-v="2">16 seconds</span>
            <span class="chip on" data-v="4">32 seconds</span>
            <span class="chip" data-v="6">48 seconds</span>
          </div>
          <span class="hint" style="margin-top:10px;display:block">The piece is written as one continuous monologue, then cut into 8 second shots that flow into each other.</span>
        </div>
        <div class="quote">
          <div><div class="big" id="price">$8.85</div><div class="sub" id="plen">32 seconds &middot; 4 shots</div></div>
          <div class="sub">You direct and approve before anything is filmed.</div>
        </div>

        <button class="btn" id="go" type="submit" style="margin-top:26px">Write the script</button>
      </form>
    </div>

    <p class="note" style="margin-top:22px">
      <strong>What happens next.</strong> The writer starts straight away. You will be able to
      read it, change the setting and camera on every shot, ask for rewrites, and approve it.
      Nothing is charged and nothing is filmed yet.
    </p>
  </section>

  <footer>PayToLaugh &middot; your pet has opinions.</footer>
</div>

<script src="/assets/app.js"></script>
<script>
navBar("create");
var email = requireSession();
var stance = "auto", segments = 4, havePets = false;

function chipGroup(id, cb) {
  var g = document.getElementById(id);
  g.addEventListener("click", function (e) {
    var c = e.target.closest(".chip");
    if (!c) return;
    [].forEach.call(g.querySelectorAll(".chip"), function (x) { x.classList.remove("on"); });
    c.classList.add("on");
    cb(c.getAttribute("data-v"));
  });
}
chipGroup("stance", function (v) { stance = v; });
chipGroup("len", function (v) { segments = parseInt(v, 10); paint(); });

function paint() {
  var p = priceFor(segments);
  document.getElementById("price").textContent = "$" + p.price.toFixed(2);
  document.getElementById("plen").textContent = p.seconds + " seconds · " + segments + " shots";
}
paint();

var petSel = document.getElementById("pet");

(async function loadPets() {
  if (!email) return;
  var r = await api("list_pets", { email: email });
  if (!r.ok) { showMsg("msg", r.error || "Could not load your pets."); return; }
  var pets = r.pets || [];
  if (!pets.length) {
    petSel.innerHTML = '<option value="">No pets yet</option>';
    petSel.disabled = true;
    document.getElementById("go").disabled = true;
    showMsg("msg", "Add a pet first — it only takes a moment on the My pets page.");
    return;
  }
  havePets = true;
  petSel.innerHTML = pets.map(function (p) {
    return '<option value="' + esc(p.id) + '" data-name="' + esc(p.name) + '">'
      + esc(p.name) + (p.breed ? " · " + esc(p.breed) : "") + '</option>';
  }).join("");
})();

document.getElementById("form").addEventListener("submit", async function (e) {
  e.preventDefault();
  hideMsg("msg");
  if (!havePets) { showMsg("msg", "Add a pet first on the My pets page."); return; }
  var btn = document.getElementById("go");
  var url = document.getElementById("url").value.trim();
  var notes = document.getElementById("notes").value.trim();
  var scene = document.getElementById("scene").value.trim();
  var opt = petSel.options[petSel.selectedIndex];

  if (!url) { showMsg("msg", "Paste a link to whatever you want them to react to."); return; }
  if (notes.length < 10) { showMsg("msg", "Tell the director what you think, in a sentence or two."); return; }

  btn.disabled = true; btn.textContent = "Writing…";
  var r = await api("create_project", {
    email: email, pet_id: petSel.value,
    pet_name: opt ? opt.getAttribute("data-name") : "",
    source_url: url, owner_notes: notes, scene: scene,
    stance: stance, segments: segments
  });
  btn.disabled = false; btn.textContent = "Write the script";
  if (!r.ok) { showMsg("msg", r.error || "That did not go through. Please try again."); return; }
  showMsg("msg", "Writing it now…", "ok");
  setTimeout(function () { location.href = "/script.html?id=" + encodeURIComponent(r.project.id); }, 500);
});
</script>
</body>
</html>