vilmibm/trunkless
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

bunch of cosmetic stuff

Browse Source
This commit is contained in:
nate smith 2024-08-17 15:03:26 -05:00
parent 09ed528252
commit 9023df0772
2 changed files with 28 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
templates/index.tmpl
View File

@ -25,7 +25,7 @@ body {
} }
#about { #about {
background-color: grey; background-color: white;
display: none; display: none;
color: black; color: black;
} }
@ -130,11 +130,17 @@ a {
<div is="source-text" class="source"></div> <div is="source-text" class="source"></div>
</template> </template>
<h1 style="display:block;margin:0">Trunkless</h1> <div style="display:grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(100px, auto); gap: 10px;">
<p style="margin-top:0;font-size:80%"> <div style="grid-column: 1 / 3; grid-row: 1">
<a is="about-toggler"></a> <h1 style="display:inline-block;margin:0">Trunkless</h1>
<a is="theme-toggler"></a> </div>
</p> <div style="grid-column: 3; grid-row: 1; text-align: right; font-size:150%">
<span class="corner" style="background:white; padding-right:1em; padding-left:1em; padding-bottom: .5em">
<a style="font-weight: bold" is="about-toggler"></a>
<a class="bordered" style="border: 1px solid black; padding: 0 6px 0 6px" is="theme-toggler"></a>
</span>
</div>
</div>
<div id="about"> <div id="about">
<p> <p>
HELLO. THIS IS A <a href="https://github.com/vilmibm/trunkless">SOFT WARE</a> FOR MAKING <a href="https://en.wikipedia.org/wiki/Cut-up_technique">CUT-UP POETRY</a>. THERE ARE A VARIETY OF CORPORA TO CHOOSE FROM: HELLO. THIS IS A <a href="https://github.com/vilmibm/trunkless">SOFT WARE</a> FOR MAKING <a href="https://en.wikipedia.org/wiki/Cut-up_technique">CUT-UP POETRY</a>. THERE ARE A VARIETY OF CORPORA TO CHOOSE FROM:
@ -151,7 +157,6 @@ a {
</p> </p>
</div> </div>
<div class="controls"> <div class="controls">
<button is="poem-resetter"></button>
<form method="GET" action="/" style="display:inline"> <form method="GET" action="/" style="display:inline">
<label for="corpus-select">corpus:</label> <label for="corpus-select">corpus:</label>
<select name="corpus" id="corpus-select"> <select name="corpus" id="corpus-select">
@ -166,18 +171,18 @@ a {
</select> </select>
<button type="submit">go</button> <button type="submit">go</button>
</form> </form>
</div>
<form is="poem-saver" style="border: 1px solid grey; display:inline; padding:4px;"> <div class="main">
<div style="margin-bottom: 5px">
<button is="poem-regenner">regenerate unpinned lines</button>
<button is="poem-resetter"></button>
<form is="poem-saver" style="border-right: 1px solid grey;border-bottom: 1px solid grey;border-left: 1px solid grey; display:inline; padding:4px;">
<button class="copy" type="submit">copy</button> <button class="copy" type="submit">copy</button>
<button class="save" type="submit">save</button> <button class="save" type="submit">save</button>
<input name="type" value="text" type="radio" checked />as text <input name="type" value="text" type="radio" checked />as text
<input name="type" value="image" type="radio"/>as image <input name="type" value="image" type="radio"/>as image
<input name="sources" type="checkbox"/>include sources <input name="sources" type="checkbox"/>include sources
</form> </form>
</div>
<div class="main">
<div style="margin-bottom: 5px">
<button is="poem-regenner">regenerate unpinned lines</button>
</div> </div>
<div is="poem-lines"></div> <div is="poem-lines"></div>
<div> <div>

11
web/assets/main.js
View File

@ -309,30 +309,39 @@ class ThemeToggler extends HTMLAnchorElement {
constructor() { constructor() {
super(); super();
this.addEventListener("click", this.click); this.addEventListener("click", this.click);
this.theme = "dark"; this.theme = "light";
this.innerText = "◑"; this.innerText = "◑";
this.setAttribute("aria-hidden", "true"); this.setAttribute("aria-hidden", "true");
this.style.cursor = "pointer"; this.style.cursor = "pointer";
} }
click() { click() {
// TODO this should all be done via class toggling my dude
if (this.theme == "light") { if (this.theme == "light") {
this.theme = "dark"; this.theme = "dark";
$("body").style.backgroundColor = "black"; $("body").style.backgroundColor = "black";
$("body").style.backgroundImage = 'url("/bg_dark.gif")'; $("body").style.backgroundImage = 'url("/bg_dark.gif")';
$("body").style.color = "white"; $("body").style.color = "white";
$(".main").style.backgroundColor = "black"; $(".main").style.backgroundColor = "black";
$("#about").style.backgroundColor = "black";
$("#about").style.color = "white";
$("h1").style.backgroundColor = "black"; $("h1").style.backgroundColor = "black";
$(".controls form").style.backgroundColor = "black"; $(".controls form").style.backgroundColor = "black";
$(".corner").style.backgroundColor = "black";
$(".corner .bordered").style.border = "1px solid white";
$$("a").forEach((e) => { e.style.color = "white" }); $$("a").forEach((e) => { e.style.color = "white" });
} else { } else {
this.theme = "light"; this.theme = "light";
$("body").style.backgroundColor = "white"; $("body").style.backgroundColor = "white";
$("body").style.backgroundImage = 'url("/bg_light.gif")'; $("body").style.backgroundImage = 'url("/bg_light.gif")';
$("body").style.color = "black"; $("body").style.color = "black";
$("#about").style.backgroundColor = "white";
$("#about").style.color = "black";
$(".main").style.backgroundColor = "white"; $(".main").style.backgroundColor = "white";
$(".controls form").style.backgroundColor = "white"; $(".controls form").style.backgroundColor = "white";
$("h1").style.backgroundColor = "white"; $("h1").style.backgroundColor = "white";
$(".corner").style.backgroundColor = "white";
$(".corner .bordered").style.border = "1px solid black";
$$("a").forEach((e) => { e.style.color = "black" }); $$("a").forEach((e) => { e.style.color = "black" });
} }
} }