Show the preloaded Anthem sample in the title card

This commit is contained in:
github-actions[bot] authored and GitHub committed 2026-10-13 01:18:33 +00:00
1 parent da63507cd2
commit a6a97bc6db
1 file changed
+13 -12
+13 -12
View File
@@ -26,26 +26,27 @@
<section id="try">
<div class="product-container">
<div class="input-section">
<input type="text" id="name-input" placeholder="Enter a name..." autocomplete="off">
<button id="play-button">Play</button>
<input type="text" id="name-input" placeholder="Enter a name..." autocomplete="off" value="Maya Chen" aria-label="Name">
<button id="play-button" type="button">Play</button>
</div>
<div class="style-selection">
<div class="style-chip active" data-style="chiptune">Chiptune</div>
<div class="style-chip" data-style="lo-fi">Lo-Fi</div>
<div class="style-chip" data-style="fanfare">Fanfare</div>
<div class="style-selection" role="group" aria-label="Style">
<button type="button" class="style-chip active" data-style="chiptune" aria-pressed="true">Chiptune</button>
<button type="button" class="style-chip" data-style="lo-fi" aria-pressed="false">Lo-Fi</button>
<button type="button" class="style-chip" data-style="fanfare" aria-pressed="false">Fanfare</button>
</div>
<div class="title-card">
<div class="title-text" id="title-text">Anthem</div>
<div class="visualization" id="visualization">
<!-- Bars will be generated by JavaScript -->
<div class="title-text" id="title-text">Maya Chen</div>
<div class="visualization" id="visualization" aria-hidden="true">
<!-- Bars are the melody compose() writes for the current name. -->
</div>
<p class="melody-caption" id="melody-caption">Maya Chen · chiptune · 8 bars</p>
</div>
<div class="controls">
<button id="share-button">Share Link</button>
<button id="download-button">Download WAV</button>
<button id="share-button" type="button">Share Link</button>
<a id="download-button" href="#try">Download WAV</a>
</div>
</div>
</section>
@@ -140,4 +141,4 @@
<p>Want the next version? <a href="https://github.com/teahubxyz/time/issues/21" target="_blank" rel="noopener">👍 the signal issue</a></p>
</footer>
</body>
</html>
</html>