From 2df84d967977093e37f697b804b4eaa5c4a1052e Mon Sep 17 00:00:00 2001 From: b1rdmania <102524336+b1rdmania@users.noreply.github.com> Date: Mon, 29 Dec 2025 14:49:10 +0000 Subject: [PATCH] Move version history to bottom, add FAQ to hero with v1.3 tag MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Hero now shows "WARIO SYNTH v1.3" with FAQ button - Version history moved to bottom of page - Added Wario Synthesis Engine explanation to FAQ - Bigger Wario sprite (192px) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 --- index.html | 70 +++++++++++++++++++++++++++++++++-------------------- src/main.ts | 3 +++ 2 files changed, 47 insertions(+), 26 deletions(-) diff --git a/index.html b/index.html index 9e56b41..8b64a3c 100644 --- a/index.html +++ b/index.html @@ -115,6 +115,21 @@ letter-spacing: 0.05em; text-transform: uppercase; } + .hero-top { + display: flex; + align-items: center; + justify-content: center; + gap: calc(var(--spacing-unit) * 2); + flex-wrap: wrap; + } + .hero-top h1 { + margin: 0; + } + .version-tag { + font-size: 10px; + color: var(--gb-medium); + font-weight: normal; + } .hero .tagline { margin: calc(var(--spacing-unit) * 2) 0 0 0; color: var(--gb-dark); @@ -1121,38 +1136,20 @@
-

WARIO SYNTH

+
+

WARIO SYNTH v1.3

+ +

Turn any song into retro game console music

-
-
- v1.3 - Version History -
-
- v1.3 - Share to X, light Game Boy palette, iOS audio fixes, local font hosting -
-
- v1.2 - Short share links with dynamic previews, copy link button, improved MIDI selection -
-
- v1.1 - Search MIDI files, generate Game Boy style music, basic playback with progress bar -
-
-
- How it works: The Wario Synthesis Engine analyses MIDI files to identify melody, bass, and chord tracks. It then resynthesises each part using Web Audio oscillators tuned to mimic the Game Boy's 4-channel sound chip: two pulse wave channels, one wave channel, and one noise channel. All processing runs client-side in your browser - no server-side audio generation. Built with TypeScript, Vite, and Claude Code. -
-
-
-
-
- +
Ready. Enter a song name to search for MIDI files.
- +
+
+
+ Version History +
+
+ v1.3 - Share to X, light Game Boy palette, iOS audio fixes, local font hosting +
+
+ v1.2 - Short share links with dynamic previews, copy link button, improved MIDI selection +
+
+ v1.1 - Search MIDI files, generate Game Boy style music, basic playback with progress bar +
+
+
+ How it works: The Wario Synthesis Engine analyses MIDI files to identify melody, bass, and chord tracks. It then resynthesises each part using Web Audio oscillators tuned to mimic the Game Boy's 4-channel sound chip: two pulse wave channels, one wave channel, and one noise channel. All processing runs client-side in your browser - no server-side audio generation. Built with TypeScript, Vite, and Claude Code. +
+
+
+
+
Wario
@@ -1277,8 +1295,8 @@

Turn any song into retro Gameboy-style synth. Search a track, preview the MIDI, hit Generate.

-

How does it work?

-

We scrape MIDI files from the web, analyse the structure (melody, bass, chords), then resynthesise with the Wario Synthesis Engine via Web Audio.

+

The Wario Synthesis Engine

+

Analyses MIDI files to identify melody, bass, and chord tracks. It then resynthesises each part using Web Audio oscillators tuned to mimic the Game Boy's 4-channel sound chip: two pulse wave channels, one wave channel, and one noise channel. All processing runs client-side in your browser.

Why "Enable Audio" on iPhone?

diff --git a/src/main.ts b/src/main.ts index b9ea817..8689b7c 100644 --- a/src/main.ts +++ b/src/main.ts @@ -69,6 +69,7 @@ class MotifApp { private copyToast: HTMLElement | null = null; // FAQ modal + private faqBtnTop: HTMLButtonElement | null = null; private faqBtnFooter: HTMLButtonElement | null = null; private newSearchBtn: HTMLButtonElement | null = null; private faqBackdrop!: HTMLElement; @@ -152,6 +153,7 @@ class MotifApp { this.copyToast = document.getElementById('copyToast'); // FAQ modal + this.faqBtnTop = document.getElementById('faqBtnTop') as HTMLButtonElement | null; this.faqBtnFooter = document.getElementById('faqBtnFooter') as HTMLButtonElement | null; this.newSearchBtn = document.getElementById('newSearchBtn') as HTMLButtonElement | null; this.faqBackdrop = document.getElementById('faqModalBackdrop')!; @@ -197,6 +199,7 @@ class MotifApp { this.enableAudioBtn.addEventListener('touchend', enable, { passive: true }); // FAQ + this.faqBtnTop?.addEventListener('click', () => this.openFaq()); this.faqBtnFooter?.addEventListener('click', () => this.openFaq()); this.newSearchBtn?.addEventListener('click', () => this.resetToNewSearch()); this.faqCloseBtn.addEventListener('click', () => this.closeFaq());