Add a voice field to the pet profile so the character stays consistent
This commit is contained in:
parent
760f335256
commit
62c4f344c7
1 changed files with 12 additions and 2 deletions
14
pets.html
14
pets.html
|
|
@ -50,6 +50,11 @@
|
||||||
<span class="hint">This is what makes it sound like your pet rather than a generic one.</span>
|
<span class="hint">This is what makes it sound like your pet rather than a generic one.</span>
|
||||||
<input type="text" id="pperson" placeholder="convinced he runs the household, suspicious of anything with wheels">
|
<input type="text" id="pperson" placeholder="convinced he runs the household, suspicious of anything with wheels">
|
||||||
</div>
|
</div>
|
||||||
|
<div class="field">
|
||||||
|
<label for="pvoice">How they sound</label>
|
||||||
|
<span class="hint">This is what keeps them the same character across every video. Be specific: age, accent, pace — and anything they should <em>never</em> sound like. Vague descriptions drift between episodes.</span>
|
||||||
|
<textarea id="pvoice" placeholder="A bright, quick, articulate young adult male voice. Neutral American, no rural or Southern accent, no drawl. Crisp diction, slightly faster than average, confident and a little nerdy."></textarea>
|
||||||
|
</div>
|
||||||
<button class="btn" id="save" type="submit">Save pet</button>
|
<button class="btn" id="save" type="submit">Save pet</button>
|
||||||
<button class="btn ghost" id="cancel" type="button" style="display:none;margin-left:8px">Cancel</button>
|
<button class="btn ghost" id="cancel" type="button" style="display:none;margin-left:8px">Cancel</button>
|
||||||
</form>
|
</form>
|
||||||
|
|
@ -96,6 +101,9 @@ function petCard(p) {
|
||||||
+ '</div>'
|
+ '</div>'
|
||||||
+ (p.appearance ? '<p style="color:var(--muted);font-size:14.5px;margin:14px 0 0">' + esc(p.appearance) + '</p>' : '')
|
+ (p.appearance ? '<p style="color:var(--muted);font-size:14.5px;margin:14px 0 0">' + esc(p.appearance) + '</p>' : '')
|
||||||
+ (p.personality ? '<p style="color:var(--muted);font-size:14.5px;margin:8px 0 0">' + esc(p.personality) + '</p>' : '')
|
+ (p.personality ? '<p style="color:var(--muted);font-size:14.5px;margin:8px 0 0">' + esc(p.personality) + '</p>' : '')
|
||||||
|
+ (p.voice
|
||||||
|
? '<p style="color:var(--muted);font-size:13.5px;margin:10px 0 0"><strong style="color:var(--ink)">Voice:</strong> ' + esc(p.voice) + '</p>'
|
||||||
|
: '<p style="color:var(--accent2);font-size:13.5px;margin:10px 0 0">No voice set, so they will sound like a different character in every video.</p>')
|
||||||
+ '<div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:12px;margin-top:20px">' + strip + '</div>'
|
+ '<div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:12px;margin-top:20px">' + strip + '</div>'
|
||||||
+ '<div style="display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:18px;padding-top:18px;border-top:1px solid var(--line)">'
|
+ '<div style="display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:18px;padding-top:18px;border-top:1px solid var(--line)">'
|
||||||
+ '<select data-kind="' + esc(p.id) + '" style="width:auto">' + kindOptions("head shot") + '</select>'
|
+ '<select data-kind="' + esc(p.id) + '" style="width:auto">' + kindOptions("head shot") + '</select>'
|
||||||
|
|
@ -132,7 +140,8 @@ document.getElementById("petform").addEventListener("submit", async function (e)
|
||||||
species: document.getElementById("pspecies").value,
|
species: document.getElementById("pspecies").value,
|
||||||
breed: document.getElementById("pbreed").value.trim(),
|
breed: document.getElementById("pbreed").value.trim(),
|
||||||
appearance: document.getElementById("pappear").value.trim(),
|
appearance: document.getElementById("pappear").value.trim(),
|
||||||
personality: document.getElementById("pperson").value.trim()
|
personality: document.getElementById("pperson").value.trim(),
|
||||||
|
voice: document.getElementById("pvoice").value.trim()
|
||||||
};
|
};
|
||||||
if (!pet.name) { showMsg("msg", "Your pet needs a name."); return; }
|
if (!pet.name) { showMsg("msg", "Your pet needs a name."); return; }
|
||||||
|
|
||||||
|
|
@ -149,7 +158,7 @@ document.getElementById("petform").addEventListener("submit", async function (e)
|
||||||
|
|
||||||
function resetForm() {
|
function resetForm() {
|
||||||
document.getElementById("petid").value = "";
|
document.getElementById("petid").value = "";
|
||||||
["pname", "pbreed", "pappear", "pperson"].forEach(function (i) { document.getElementById(i).value = ""; });
|
["pname", "pbreed", "pappear", "pperson", "pvoice"].forEach(function (i) { document.getElementById(i).value = ""; });
|
||||||
document.getElementById("pspecies").value = "dog";
|
document.getElementById("pspecies").value = "dog";
|
||||||
document.getElementById("formtitle").textContent = "Add a pet";
|
document.getElementById("formtitle").textContent = "Add a pet";
|
||||||
document.getElementById("cancel").style.display = "none";
|
document.getElementById("cancel").style.display = "none";
|
||||||
|
|
@ -167,6 +176,7 @@ document.getElementById("list").addEventListener("click", async function (e) {
|
||||||
document.getElementById("pbreed").value = p.breed || "";
|
document.getElementById("pbreed").value = p.breed || "";
|
||||||
document.getElementById("pappear").value = p.appearance || "";
|
document.getElementById("pappear").value = p.appearance || "";
|
||||||
document.getElementById("pperson").value = p.personality || "";
|
document.getElementById("pperson").value = p.personality || "";
|
||||||
|
document.getElementById("pvoice").value = p.voice || "";
|
||||||
document.getElementById("formtitle").textContent = "Edit " + (p.name || "pet");
|
document.getElementById("formtitle").textContent = "Edit " + (p.name || "pet");
|
||||||
document.getElementById("cancel").style.display = "";
|
document.getElementById("cancel").style.display = "";
|
||||||
document.getElementById("formcard").scrollIntoView({ behavior: "smooth", block: "start" });
|
document.getElementById("formcard").scrollIntoView({ behavior: "smooth", block: "start" });
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue