This directory contains the client-side code for the Flashcard Learning App.

• index.html - Single-page application with all views and layouts
• index.js - Client-side JavaScript for UI logic and API calls

The app uses a view-based navigation system where views are shown/hidden:

1. Login View - Username entry
2. Deck List View - Dashboard showing all decks
3. Deck Editor View - Create/edit deck form
4. Card Manager View - List and manage cards in a deck
5. Study View - Spaced repetition study session
6. Statistics View - Performance metrics and history
7. Backup View - Data export/import

CSS 3D transforms create realistic card flipping effect:

• Front shows question
• Back shows answer
• Smooth 0.6s transition

Real-time timer tracks session duration:

• Updates every second
• Displays as MM:SS format
• Stops when session ends

Username stored in sessionStorage for auto-login on page reload.

Global state variables in index.js:

• currentUser - Logged-in username
• userData - Full user data object
• currentDeckId - Active deck being viewed/studied
• studyCards - Cards in current study session
• sessionStartTime - Study session start time
• sessionCorrectCount - Correct answers counter

All API calls use the apiCall() wrapper:

• Adds X-Username header automatically
• Handles JSON parsing
• Provides error handling with user feedback

• TailwindCSS via CDN for utility-first styling
• Custom CSS for card flip animations
• Responsive design works on mobile and desktop

1. Add HTML in index.html (or create new view)
2. Add JavaScript logic in index.js
3. Connect event listeners in DOMContentLoaded
4. Style with TailwindCSS classes