From 64db30b9d1471a6917aa3e28581ab2abdd191152 Mon Sep 17 00:00:00 2001 From: nate smith Date: Sat, 9 Mar 2024 17:01:41 -0800 Subject: [PATCH] rainbow effect --- assets/main.js | 9 +++++++++ templates/index.tmpl | 17 +++++++++++++++-- 2 files changed, 24 insertions(+), 2 deletions(-) diff --git a/assets/main.js b/assets/main.js index 3bc0a1c..9a792e5 100644 --- a/assets/main.js +++ b/assets/main.js @@ -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); diff --git a/templates/index.tmpl b/templates/index.tmpl index 19fabc1..0d093c8 100644 --- a/templates/index.tmpl +++ b/templates/index.tmpl @@ -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;} +} @@ -63,11 +76,11 @@ span.linetext {
+ + as text as image include sources - -