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

rainbow effect

Browse Source
This commit is contained in:
nate smith 2024-03-09 17:01:41 -08:00
parent cf64e44dae
commit 64db30b9d1
2 changed files with 24 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
assets/main.js
View File

@ -337,6 +337,15 @@ class PoemSaver extends HTMLFormElement {
}
});
});
this.querySelectorAll("button").forEach((e) => {
e.addEventListener("click", (e) => {
e.target.classList.add("rainbow");
e.target.addEventListener("animationend", () => {
e.target.classList.remove("rainbow")
});
});
});
const fd = new FormData(this);
if (fd.get("type") == "image") {
this.querySelector("button.copy").setAttribute("disabled", true);

17
templates/index.tmpl
View File

@ -38,6 +38,19 @@ span.linetext {
margin-bottom:4px;
font-size:80%;
}
.rainbow {
animation-name: rainbow;
animation-duration: 1s;
}
@keyframes rainbow {
20%{color: red;}
40%{color: orange;}
60%{color: yellow;}
80%{color: green;}
100%{color: blue;}
}
</style>
</head>
<body>
@ -63,11 +76,11 @@ span.linetext {
<button is="poem-resetter"></button>
<form is="poem-saver" style="border: 1px solid grey; display:inline; padding:4px;">
<button class="copy" type="submit">copy</button>
<button class="save" type="submit">save</button>
<input name="type" value="text" type="radio" checked />as text
<input name="type" value="image" type="radio"/>as image
<input name="sources" type="checkbox"/>include sources
<button class="copy" type="submit">copy</button>
<button class="save" type="submit">save</button>
</form>
</div>
<div style="border: 1px solid grey; padding: 5px">