first commit! 🎉

Signed-off-by: ari melody <ari@arimelody.me>

public/script/accessibility.js

@@ -0,0 +1,44 @@
+const accessibility = JSON.parse(localStorage.getItem("accessibility")) || {};
+
+function toggle_accessibility_setting(name) {
+	if (accessibility[name]) {
+		delete accessibility[name];
+		update_accessibility();
+		return true;
+	}
+	accessibility[name] = true;
+	update_accessibility();
+	return true;
+}
+
+function set_accessibility_setting(name, value) {
+	accessibility[name] = value;
+	update_accessibility();
+	return true;
+}
+
+function clear_accessibility_setting(name) {
+	if (!accessibility[name]) return false;
+	delete accessibility[name];
+	update_accessibility();
+	return true;
+}
+
+function update_accessibility() {
+	localStorage.setItem("accessibility", JSON.stringify(accessibility));
+}
+
+if (accessibility) {
+	if (accessibility.disable_crt) {
+		document.querySelector('div#overlay').setAttribute("hidden", true);
+		document.body.style.textShadow = "none";
+		document.getElementById('toggle-crt').classList.add("disabled");
+	}
+}
+
+document.getElementById("toggle-crt").addEventListener("click", () => {
+	toggle_accessibility_setting("disable_crt");
+	document.querySelector('div#overlay').toggleAttribute("hidden");
+	document.getElementById('toggle-crt').className = accessibility.disable_crt ? "disabled" : "";
+});
+

public/script/main.js

@@ -0,0 +1,66 @@
+const header_links = document.getElementById("header-links");
+const hamburger = document.getElementById("header-links-toggle");
+
+function type_out(e) {
+        const text = e.innerText;
+        const original = e.innerHTML;
+        e.innerText = "";
+        const delay = 25;
+        let chars = 0;
+
+        function insert_char(character, parent) {
+                const c = document.createElement("span");
+                c.innerText = character;
+                parent.appendChild(c);
+                c.classList.add("newchar");
+        }
+
+        function normalize() {
+                e.innerHTML = original;
+        }
+
+        function increment_char() {
+                const newchar = text.substring(chars - 1, chars);
+                insert_char(newchar, e);
+                chars++;
+                if (chars <= text.length) {
+                        setTimeout(increment_char, delay);
+                } else {
+                        setTimeout(normalize, 250);
+                }
+        }
+
+        increment_char();
+}
+
+function fill_list(list) {
+	const items = list.querySelectorAll("li a, li span");
+	items.innerText = "";
+	const delay = 100;
+
+	items.forEach((item, iter) => {
+		item.style.animationDelay = `${iter * delay}ms`;
+		item.style.animationPlayState = "playing";
+	});
+}
+
+[...document.querySelectorAll("h1, h2, h3, h4, h5, h6")]
+	.filter((e) => e.innerText != "")
+	.forEach((e) => {
+		type_out(e);
+	});
+[...document.querySelectorAll("ol, ul")]
+	.filter((e) => e.innerText != "")
+	.forEach((e) => {
+		fill_list(e);
+	});
+
+function toggle_header_links() {
+        header_links.classList.toggle("open");
+}
+
+document.addEventListener("click", event => {
+        if (!header_links.contains(event.target) && !hamburger.contains(event.target)) {
+                header_links.classList.remove("open");
+        }
+});

public/script/music-gateway.js

@@ -0,0 +1,67 @@
+const bg = document.getElementById("background");
+bg.style.backgroundImage = `url(${bg.dataset.url})`;
+bg.removeAttribute("data-url");
+
+const share_btn = document.getElementById("share");
+share_btn.onclick = (e) => {
+        navigator.clipboard.writeText(window.location.href);
+        share_btn.classList.remove('active');
+        void share_btn.offsetWidth;
+        share_btn.classList.add('active');
+}
+
+document.getElementById("go-back").addEventListener("click", () => {
+        window.history.back();
+});
+
+apply_funny_bob_to_upcoming_tags();
+
+function apply_funny_bob_to_upcoming_tags() {
+        upcomingTags = document.querySelectorAll("#type.upcoming");
+        for (var i = 0; i < upcomingTags.length; i++) {
+                const tag = upcomingTags[i];
+                chars = tag.innerText.split("");
+                result = chars.map((c, i) => `<span style="animation-delay: -${i * 100}ms;">${c}</span>`);
+                tag.innerHTML = result.join("");
+        }
+}
+
+const previews = document.querySelectorAll("[id^=preview-]");
+for (const preview of previews) {
+        preview.addEventListener("click", (e) => {
+                if (e.target.classList.contains('playing')) {
+                        stopPreview(e.target);
+                } else {
+                        playPreview(e.target);
+                }
+        });
+        preview.querySelector('audio').addEventListener("ended", () => { stopPreview(preview); });
+}
+
+var stupidsounds = false;
+
+function stopPreviews() {
+        for (const preview of previews) stopPreview(preview);
+}
+
+function playPreview(preview) {
+        if (!stupidsounds) stopPreviews();
+        const btn = preview.querySelector('i');
+        btn.classList.remove("play", "fa-play");
+        btn.classList.add("pause", "fa-pause");
+        const audio = preview.querySelector('audio');
+        audio.play();
+        preview.classList.add('playing');
+}
+
+function stopPreview(preview) {
+        const btn = preview.querySelector('i');
+        btn.classList.remove("pause", "fa-pause");
+        btn.classList.add("play", "fa-play");
+        const audio = preview.querySelector('audio');
+        audio.pause();
+        audio.currentTime = 0;
+        preview.classList.remove('playing');
+}
+
+stopPreviews();

public/script/music.js

@@ -0,0 +1,15 @@
+document.querySelectorAll("h2.question").forEach(element => {
+        element.onclick = (e) => {
+                const url = `${window.location.protocol}//${window.location.host}${window.location.pathname}#${e.target.id}`;
+                window.location = url;
+        };
+});
+
+document.querySelectorAll("div.music").forEach(element => {
+        console.log(element);
+        element.addEventListener("click", (e) => {
+                const url = `${window.location.protocol}//${window.location.host}/music/${element.id}`;
+                window.location = url;
+        });
+});
+

public/script/prideflag.js

@@ -0,0 +1,66 @@
+/**
+ * 🏳️‍🌈🏳️‍⚧️💖 pride flag 💖🏳️‍⚧️🏳️‍🌈
+ * made with ❤️ by ari melody, 2023
+ * 
+ * web: https://arimelody.me
+ * source: https://github.com/mellodoot/prideflag
+ */
+
+const pride_flag_svg =
+        `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" width="120" height="120">
+                <path id="red" d="M120,80 L100,100 L120,120 Z" style="fill:#d20605"/>
+                <path id="orange" d="M120,80 V40 L80,80 L100,100 Z" style="fill:#ef9c00"/>
+                <path id="yellow" d="M120,40 V0 L60,60 L80,80 Z" style="fill:#e5fe02"/>
+                <path id="green" d="M120,0 H80 L40,40 L60,60 Z" style="fill:#09be01"/>
+                <path id="blue" d="M80,0 H40 L20,20 L40,40 Z" style="fill:#081a9a"/>
+                <path id="purple" d="M40,0 H0 L20,20 Z" style="fill:#76008a"/>
+                
+                <rect id="black" x="60" width="60" height="60" style="fill:#010101"/>
+                <rect id="brown" x="70" width="50" height="50" style="fill:#603814"/>
+                <rect id="lightblue" x="80" width="40" height="40" style="fill:#73d6ed"/>
+                <rect id="pink" x="90" width="30" height="30" style="fill:#ffafc8"/>
+                <rect id="white" x="100" width="20" height="20" style="fill:#fff"/>
+                
+                <rect id="intyellow" x="110" width="10" height="10" style="fill:#fed800"/>
+                <circle id="intpurple" cx="120" cy="0" r="5" stroke="#7601ad" stroke-width="2" fill="none"/>
+        </svg>`;
+
+const pride_flag_css =
+        `#pride-flag svg {
+                position: fixed;
+                top: 0;
+                right: 0;
+                width: 120px;
+                transform-origin: 100% 0%;
+                transition: transform .5s cubic-bezier(.32,1.63,.41,1.01);
+                z-index: 8008135;
+                pointer-events: none;
+        }
+        #pride-flag svg:hover {
+                transform: scale(110%);
+        }
+        #pride-flag svg:active {
+                transform: scale(110%);
+        }
+        #pride-flag svg * {
+                pointer-events: all;
+        }`;
+
+function create_pride_flag() {
+        const container = document.createElement("a");
+        container.id = "pride-flag";
+        container.href = "https://github.com/mellodoot/prideflag";
+        container.target = "_blank";
+        container.innerHTML = pride_flag_svg;
+        return container;
+}
+
+function load_pride_flag_style() {
+        const pride_stylesheet = document.createElement('style');
+        pride_stylesheet.textContent = pride_flag_css;
+        document.head.appendChild(pride_stylesheet);
+}
+
+load_pride_flag_style();
+pride_flag = create_pride_flag();
+document.body.appendChild(pride_flag);