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, 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.</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>
        <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">3 &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>
        </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 approve the script before anything is filmed.</div>
        </div>

        <button class="btn" id="go" type="submit" style="margin-top:26px">Submit for scripting</button>
      </form>
    </div>

    <p class="note" style="margin-top:22px">
      <strong>What happens next.</strong> Submitting records your request and puts it in the
      queue. Nothing is charged and nothing is filmed yet. Payment and automatic
      production get switched on once proper sign-in is in place.
    </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 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 = "Submitting…";
  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, stance: stance, segments: segments
  });
  btn.disabled = false; btn.textContent = "Submit for scripting";
  if (!r.ok) { showMsg("msg", r.error || "That did not go through. Please try again."); return; }
  showMsg("msg", "Submitted. Taking you to your videos…", "ok");
  setTimeout(function () { location.href = "/videos.html"; }, 650);
});
</script>
</body>
</html>