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); const fd = new FormData(this);
if (fd.get("type") == "image") { if (fd.get("type") == "image") {
this.querySelector("button.copy").setAttribute("disabled", true); this.querySelector("button.copy").setAttribute("disabled", true);

17
templates/index.tmpl
View File

@ -38,6 +38,19 @@ span.linetext {
margin-bottom:4px; margin-bottom:4px;
font-size:80%; 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> </style>
</head> </head>
<body> <body>
@ -63,11 +76,11 @@ span.linetext {
<button is="poem-resetter"></button> <button is="poem-resetter"></button>
<form is="poem-saver" style="border: 1px solid grey; display:inline; padding:4px;"> <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="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
<button class="copy" type="submit">copy</button>
<button class="save" type="submit">save</button>
</form> </form>
</div> </div>
<div style="border: 1px solid grey; padding: 5px"> <div style="border: 1px solid grey; padding: 5px">