summaryrefslogtreecommitdiff
path: root/src/js/script.ts
diff options
context:
space:
mode:
Diffstat (limited to 'src/js/script.ts')
-rw-r--r--src/js/script.ts78
1 files changed, 0 insertions, 78 deletions
diff --git a/src/js/script.ts b/src/js/script.ts
deleted file mode 100644
index e0b0b85..0000000
--- a/src/js/script.ts
+++ /dev/null
@@ -1,78 +0,0 @@
-import Prism from 'prismjs';
-import 'prismjs/components/prism-javascript';
-import 'prismjs/components/prism-css';
-import 'prismjs/components/prism-markup';
-import { initOneko } from './oneko';
-
-(() => {
- const toggleButton = document.getElementById('theme-toggle') as HTMLInputElement;
- const html = document.documentElement;
-
- const sessionTheme = sessionStorage.getItem('theme');
- const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-
- const initialTheme = sessionTheme || (systemPrefersDark ? 'dark' : 'light');
-
- if (initialTheme === 'dark') {
- html.setAttribute('data-theme', 'dark');
- toggleButton.checked = true;
- }
-
- toggleButton.addEventListener('change', () => {
- const theme = html.getAttribute('data-theme');
-
- if (theme === 'dark') {
- html.removeAttribute('data-theme');
- sessionStorage.setItem('theme', 'light');
- toggleButton.checked = false;
- } else {
- html.setAttribute('data-theme', 'dark');
- sessionStorage.setItem('theme', 'dark');
- toggleButton.checked = true;
- }
- });
-})();
-
-(() => {
- const colors = ['#ff69b4', '#b19cd9', '#8b6f47', '#ff85c0', '#c4b5fd', '#d4a574'];
- const shapes = ['❀', '✿', '✽', '✾', '✻', '❊', '❋', '✼'];
-
- document.addEventListener('mousemove', (e: MouseEvent) => {
- createParticle(e.clientX, e.clientY);
- });
-
- const createParticle = (x: number, y: number) => {
- const particle = document.createElement('div');
- particle.className = 'fairy-dust';
-
- const shape = shapes[Math.floor(Math.random() * shapes.length)];
- const size = Math.random() * 8 + 6;
- const color = colors[Math.floor(Math.random() * colors.length)];
- const offsetX = (Math.random() - 0.5) * 20;
- const offsetY = (Math.random() - 0.5) * 20;
- const rotation = Math.random() * 360;
-
- particle.textContent = shape;
- particle.style.cssText = `
- position: fixed;
- left: ${x + offsetX}px;
- top: ${y + offsetY}px;
- font-size: ${size}px;
- color: ${color};
- opacity: 0.4;
- pointer-events: none;
- z-index: 9001; /* it's over 9000 */
- line-height: 1;
- transform: rotate(${rotation}deg);
- animation: fairy-float 0.8s ease-out forwards;
- `;
-
- document.body.appendChild(particle);
- setTimeout(() => particle.remove(), 800);
- };
-})();
-
-document.addEventListener('DOMContentLoaded', () => {
- Prism.highlightAll();
- initOneko();
-});