Claude/feature/term input footer

.claude/commands/add-and-commit.md

@@ -0,0 +1,39 @@
+---
+description: Add any modified files and create a commit message by analyzing git diffs
+allowed-tools: Bash(git status:*), Bash(git diff --staged), Bash(git commit:*), Bash(git add:*)
+---
+
+## Context:
+
+- Current git status: !`git status`
+- Current git diff: !`git diff --staged`
+- ADD all modified and new files to git.  If you think there are files that should not be in version control, ask the user.  If you see files that you think should be bundled into separate commits, ask the user.
+- Abort on any untracked files.
+Analyze above staged git changes and create a commit message. Use present tense and explain "why" something has changed, not just "what" has changed.
+
+## Commit types with emojis:
+Only use the following emojis: 
+
+- ✨ `feat:` - New feature
+- 🐛 `fix:` - Bug fix
+- 🔨 `refactor:` - Refactoring code
+- 📝 `docs:` - Documentation
+- 🎨 `style:` - Styling/formatting
+- ✅ `test:` - Tests
+- ⚡ `perf:` - Performance
+
+## Format:
+Use the following format for making the commit message:
+
+```
+<emoji> <type>: <concise_description>
+<optional_body_explaining_why>
+```
+
+## Output:
+
+1. Show summary of changes currently staged
+2. Propose commit message with appropriate emoji
+3. Ask for confirmation before committing
+
+DO NOT auto-commit - wait for user approval, and only commit if the user says so.

_specs/term-input-footer.md

@@ -0,0 +1,42 @@
+# Spec for term-input-footer
+
+branch: claude/feature/term-input-footer
+
+## Summary
+Add a footer to the TermInput page that includes an ASL-related icon and a disclaimer section informing users about the scope and limitations of the site.
+
+## Functional Requirements
+- Display a footer at the bottom of the TermInput page
+- Include an icon visually representing American Sign Language (e.g., a signing hand)
+- Include a disclaimer section with the following notes:
+  - This site is not for professional use and is only for helping study ASL
+  - Uses public domain videos that are not owned by the creator
+  - Does not promise that the signs provided are the most recent versions of ASL
+  - Attempts to restrict signs to ASL vs other sign languages (BSL, etc.)
+
+## Possible Edge Cases
+- Footer should not overlap or obscure page content on small/mobile screens
+- Icon should be accessible (alt text or aria-label)
+- Disclaimer text should remain readable at all screen sizes
+
+## Acceptance Criteria
+- The TermInput page renders a footer at the bottom of the page
+- The footer contains an ASL-representative icon
+- The footer contains all four disclaimer bullet points
+- Footer is visible without scrolling past main content on standard viewport sizes
+- Footer is responsive and does not break layout on mobile
+
+## Open Questions
+- Should the footer appear on all pages or only the TermInput page?
+  - all pages.
+- Is there a preferred icon (emoji, SVG, image asset) for the ASL representation?
+  - no
+- Should the disclaimer be collapsible/expandable or always visible?
+  - collapsible/expandable
+
+## Testing Guidelines
+Create a test file(s) in the ./tests folder for the new feature, and create meaningful tests for the following cases, without going too heavy:
+- Footer renders on the TermInput page
+- All four disclaimer items are present in the rendered output
+- ASL icon element is present and has accessible text
+- Footer does not render outside the TermInput page (if scoped to that page only)

src/App.css

@@ -362,6 +362,43 @@
   }
 }
 
+/* ── Footer ───────────────────────────────────────────── */
+
+.site-footer {
+  margin-top: auto;
+  padding: 12px 0 4px;
+  border-top: 1px solid var(--border);
+  font-size: 13px;
+  color: var(--text);
+  opacity: 0.7;
+  text-align: center;
+}
+
+.site-footer__icon {
+  margin: 0 0 6px;
+}
+
+.site-footer__disclaimer summary {
+  cursor: pointer;
+  display: inline-block;
+  margin-bottom: 6px;
+}
+
+.site-footer__disclaimer ul {
+  margin: 0 auto;
+  padding: 0 0 0 20px;
+  max-width: 560px;
+  text-align: left;
+  list-style-position: outside;
+  line-height: 1.6;
+
+  li {
+    margin-bottom: 2px;
+  }
+}
+
+/* ── Term select ──────────────────────────────────────── */
+
 .term-select {
   flex: 0 0 200px;
   align-self: stretch;

src/App.jsx

@@ -2,6 +2,7 @@ import { useState } from 'react'
 import { CardColors } from './data/card-colors'
 import { LandingPage } from './components/LandingPage'
 import { FlashcardSession } from './components/FlashcardSession'
+import { Footer } from './components/Footer'
 import './App.css'
 
 function App() {
@@ -32,6 +33,7 @@ function App() {
       ) : (
         <FlashcardSession terms={terms} cardColors={cardColors} onBack={handleBack} title={categoryTitle} description={categoryDescription} />
       )}
+      <Footer />
     </div>
   )
 }

src/components/Footer.jsx

@@ -0,0 +1,18 @@
+export function Footer() {
+  return (
+    <footer className="site-footer">
+      <p className="site-footer__icon">
+        <span aria-label="ASL hand sign">🤟</span> ASL Flashcards
+      </p>
+      <details className="site-footer__disclaimer">
+        <summary>Disclaimer</summary>
+        <ul>
+          <li>This site is not for professional use and is only for helping study ASL.</li>
+          <li>Uses public domain videos that are not owned by this creator.</li>
+          <li>Does not promise that the signs provided are the most recent versions of ASL.</li>
+          <li>Attempts to restrict signs to ASL vs other sign languages (BSL, etc.).</li>
+        </ul>
+      </details>
+    </footer>
+  )
+}

tests/Footer.test.jsx

@@ -0,0 +1,30 @@
+import {describe, it, expect} from 'vitest';
+import {render, screen} from '@testing-library/react';
+import '@testing-library/jest-dom';
+import {Footer} from '../src/components/Footer';
+
+describe('Footer', () => {
+  it('renders without crashing', () => {
+    render(<Footer />);
+    expect(document.querySelector('.site-footer')).toBeInTheDocument();
+  });
+
+  it('includes an ASL icon with accessible label', () => {
+    render(<Footer />);
+    expect(screen.getByLabelText('ASL hand sign')).toBeInTheDocument();
+  });
+
+  it('contains all four disclaimer items', () => {
+    render(<Footer />);
+    expect(screen.getByText(/not for professional use/i)).toBeInTheDocument();
+    expect(screen.getByText(/public domain videos/i)).toBeInTheDocument();
+    expect(screen.getByText(/most recent versions of ASL/i)).toBeInTheDocument();
+    expect(screen.getByText(/BSL/i)).toBeInTheDocument();
+  });
+
+  it('renders disclaimer inside a details element', () => {
+    render(<Footer />);
+    const details = document.querySelector('.site-footer__disclaimer');
+    expect(details.tagName.toLowerCase()).toBe('details');
+  });
+});