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

Restore FAQ button at top-right.

Browse Source 
Adds a top-right FAQ button in the hero while keeping a footer FAQ button, both opening the same modal.
This commit is contained in:
b1rdmania
2025-12-26 20:28:23 +00:00
parent b0c1b49d2a
commit 839d40447f
2 changed files with 11 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+8 -1
View File
@@ -67,6 +67,7 @@
.hero {
text-align: center;
margin: 0 0 calc(var(--spacing-unit) * 4) 0;
position: relative;
}
.hero h1 {
color: var(--color-accent-primary);
@@ -94,6 +95,11 @@
box-shadow: var(--shadow-sm);
border-color: rgba(255,255,255,0.22);
}
.faq-top {
position: absolute;
top: 0;
right: 0;
}
/* FAQ modal */
.modal-backdrop {
@@ -938,6 +944,7 @@
<body>
<div class="container">
<div class="hero">
<button id="faqBtn" class="faq-link faq-top" type="button">FAQ</button>
<h1>MOTIF</h1>
<p class="tagline"><strong>Procedural music generated from MIDI structure</strong></p>
</div>
@@ -1035,7 +1042,7 @@
</div>
<div class="footer">
<button id="faqBtn" class="faq-link" type="button">FAQ</button>
<button id="faqBtnFooter" class="faq-link" type="button">FAQ</button>
</div>
<div id="faqModalBackdrop" class="modal-backdrop" role="dialog" aria-modal="true" aria-labelledby="faqTitle">
src/main.ts
+3
View File
@@ -54,6 +54,7 @@ class MotifApp {
// FAQ modal
private faqBtn!: HTMLButtonElement;
private faqBtnFooter: HTMLButtonElement | null = null;
private faqBackdrop!: HTMLElement;
private faqCloseBtn!: HTMLButtonElement;
@@ -123,6 +124,7 @@ class MotifApp {
// FAQ modal
this.faqBtn = document.getElementById('faqBtn') as HTMLButtonElement;
this.faqBtnFooter = document.getElementById('faqBtnFooter') as HTMLButtonElement | null;
this.faqBackdrop = document.getElementById('faqModalBackdrop')!;
this.faqCloseBtn = document.getElementById('faqCloseBtn') as HTMLButtonElement;
}
@@ -161,6 +163,7 @@ class MotifApp {
// FAQ
this.faqBtn.addEventListener('click', () => this.openFaq());
this.faqBtnFooter?.addEventListener('click', () => this.openFaq());
this.faqCloseBtn.addEventListener('click', () => this.closeFaq());
this.faqBackdrop.addEventListener('click', (e) => {
if (e.target === this.faqBackdrop) this.closeFaq();