redo main/register page

public/resources/animate.css-main/docs/modules/playground.mjs

@@ -0,0 +1,46 @@
+/**
+  Animation playground
+*/
+
+const clearAll = (items = [], className = 'active') => {
+  items.forEach((item) => item.classList.remove(className));
+};
+
+const setEndListener = (target, defaultClass) => {
+  target.addEventListener('animationend', (e) => {
+    target.setAttribute('class', defaultClass);
+    document.documentElement.classList.remove('isPlaying');
+  });
+};
+
+const playground = (
+  container = '.animation-list',
+  item = '.animation-item',
+  target = '.callout-title',
+) => {
+  const containerEl = document.querySelector(container);
+  const items = [...containerEl.querySelectorAll(item)];
+  const targetEl = document.querySelector(target);
+
+  setEndListener(targetEl, target.replace('.', ''));
+
+  containerEl.addEventListener('click', (e) => {
+    const el = e.target
+
+    if(el.classList.contains('animation-item--title')) {
+      clearAll(items);
+      const animation = `animate__${el.parentElement.getAttribute('data-animation')}`;
+
+      targetEl.classList.add('animate__animated', animation);
+      document.documentElement.classList.add('isPlaying');
+      document.documentElement.classList.remove('animationList-active');
+    }
+
+    if (el.classList.contains('copy-icon')) {
+      const animation = `animate__${el.parentElement.getAttribute('data-animation')}`;
+      navigator.clipboard.writeText(animation);
+    }
+  });
+};
+
+export default playground;