Impaczus/motif
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Move version history to bottom, add FAQ to hero with v1.3 tag

Browse Source 
- 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 <noreply@anthropic.com>
This commit is contained in:
b1rdmania
2025-12-29 14:49:10 +00:00
parent 6dd1bad736
commit 2df84d9679
2 changed files with 47 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+44 -26
View File
@@ -115,6 +115,21 @@
letter-spacing: 0.05em; letter-spacing: 0.05em;
text-transform: uppercase; 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 { .hero .tagline {
margin: calc(var(--spacing-unit) * 2) 0 0 0; margin: calc(var(--spacing-unit) * 2) 0 0 0;
color: var(--gb-dark); color: var(--gb-dark);
@@ -1121,38 +1136,20 @@
<body> <body>
<div class="container"> <div class="container">
<div class="hero"> <div class="hero">
<h1>WARIO SYNTH</h1> <div class="hero-top">
<h1>WARIO SYNTH <span class="version-tag">v1.3</span></h1>
<button id="faqBtnTop" class="faq-link" type="button">FAQ</button>
</div>
<p class="tagline"><strong>Turn any song into retro game console music</strong></p> <p class="tagline"><strong>Turn any song into retro game console music</strong></p>
</div> </div>
<div class="version-history">
<details>
<summary>v1.3 - Version History</summary>
<div class="version-content">
<div class="version-item">
<strong>v1.3</strong> - Share to X, light Game Boy palette, iOS audio fixes, local font hosting
</div>
<div class="version-item">
<strong>v1.2</strong> - Short share links with dynamic previews, copy link button, improved MIDI selection
</div>
<div class="version-item">
<strong>v1.1</strong> - Search MIDI files, generate Game Boy style music, basic playback with progress bar
</div>
<div class="version-divider"></div>
<div class="version-item">
<strong>How it works:</strong> 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.
</div>
</div>
</details>
</div>
<div class="controls"> <div class="controls">
<input type="text" id="songInput" placeholder="Search for a song…" /> <input type="text" id="songInput" placeholder="Search for a song…" />
<button id="searchBtn" class="primary">Search</button> <button id="searchBtn" class="primary">Search</button>
</div> </div>
<div id="status">Ready. Enter a song name to search for MIDI files.</div> <div id="status">Ready. Enter a song name to search for MIDI files.</div>
<div id="resultsSection" class="results-section"> <div id="resultsSection" class="results-section">
<div id="chooseHelper" class="chooser-helper" style="display:none;"> <div id="chooseHelper" class="chooser-helper" style="display:none;">
<p>Pick a source and generate. If it sounds off, try another.</p> <p>Pick a source and generate. If it sounds off, try another.</p>
@@ -1249,6 +1246,27 @@
<button id="newSearchBtn" class="faq-link" type="button">New search</button> <button id="newSearchBtn" class="faq-link" type="button">New search</button>
</div> </div>
<div class="version-history">
<details>
<summary>Version History</summary>
<div class="version-content">
<div class="version-item">
<strong>v1.3</strong> - Share to X, light Game Boy palette, iOS audio fixes, local font hosting
</div>
<div class="version-item">
<strong>v1.2</strong> - Short share links with dynamic previews, copy link button, improved MIDI selection
</div>
<div class="version-item">
<strong>v1.1</strong> - Search MIDI files, generate Game Boy style music, basic playback with progress bar
</div>
<div class="version-divider"></div>
<div class="version-item">
<strong>How it works:</strong> 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.
</div>
</div>
</details>
</div>
<div class="footer-mascot"> <div class="footer-mascot">
<img src="/wario-sprite.png" alt="Wario" class="wario-sprite" /> <img src="/wario-sprite.png" alt="Wario" class="wario-sprite" />
</div> </div>
@@ -1277,8 +1295,8 @@
<p>Turn any song into retro Gameboy-style synth. Search a track, preview the MIDI, hit Generate.</p> <p>Turn any song into retro Gameboy-style synth. Search a track, preview the MIDI, hit Generate.</p>
</div> </div>
<div class="faq-item"> <div class="faq-item">
<h4>How does it work?</h4> <h4>The Wario Synthesis Engine</h4>
<p>We scrape MIDI files from the web, analyse the structure (melody, bass, chords), then resynthesise with the Wario Synthesis Engine via Web Audio.</p> <p>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.</p>
</div> </div>
<div class="faq-item"> <div class="faq-item">
<h4>Why "Enable Audio" on iPhone?</h4> <h4>Why "Enable Audio" on iPhone?</h4>
src/main.ts
+3
View File
@@ -69,6 +69,7 @@ class MotifApp {
private copyToast: HTMLElement | null = null; private copyToast: HTMLElement | null = null;
// FAQ modal // FAQ modal
private faqBtnTop: HTMLButtonElement | null = null;
private faqBtnFooter: HTMLButtonElement | null = null; private faqBtnFooter: HTMLButtonElement | null = null;
private newSearchBtn: HTMLButtonElement | null = null; private newSearchBtn: HTMLButtonElement | null = null;
private faqBackdrop!: HTMLElement; private faqBackdrop!: HTMLElement;
@@ -152,6 +153,7 @@ class MotifApp {
this.copyToast = document.getElementById('copyToast'); this.copyToast = document.getElementById('copyToast');
// FAQ modal // FAQ modal
this.faqBtnTop = document.getElementById('faqBtnTop') as HTMLButtonElement | null;
this.faqBtnFooter = document.getElementById('faqBtnFooter') as HTMLButtonElement | null; this.faqBtnFooter = document.getElementById('faqBtnFooter') as HTMLButtonElement | null;
this.newSearchBtn = document.getElementById('newSearchBtn') as HTMLButtonElement | null; this.newSearchBtn = document.getElementById('newSearchBtn') as HTMLButtonElement | null;
this.faqBackdrop = document.getElementById('faqModalBackdrop')!; this.faqBackdrop = document.getElementById('faqModalBackdrop')!;
@@ -197,6 +199,7 @@ class MotifApp {
this.enableAudioBtn.addEventListener('touchend', enable, { passive: true }); this.enableAudioBtn.addEventListener('touchend', enable, { passive: true });
// FAQ // FAQ
this.faqBtnTop?.addEventListener('click', () => this.openFaq());
this.faqBtnFooter?.addEventListener('click', () => this.openFaq()); this.faqBtnFooter?.addEventListener('click', () => this.openFaq());
this.newSearchBtn?.addEventListener('click', () => this.resetToNewSearch()); this.newSearchBtn?.addEventListener('click', () => this.resetToNewSearch());
this.faqCloseBtn.addEventListener('click', () => this.closeFaq()); this.faqCloseBtn.addEventListener('click', () => this.closeFaq());