Refactor: Break up massive index.html file for better readability

Problem

The current index.html file is ~1,128 lines long and contains HTML structure, CSS styles, and JavaScript functionality all in one file. While this works, it makes the code harder to:

• Read and understand
• Maintain and debug
• Navigate when making changes
• Review in pull requests

Proposed Solution

Break the monolithic file into separate, focused files without changing the development workflow or adding build complexity. For now, just breaking it up into html, js, and css is a good start. Later, the js file can be further broken up.

Tasks

Phase 1: Extract Styles

• Create styles.css file
• Move all CSS from <style> tag to styles.css
• Add <link rel="stylesheet" href="styles.css"> to HTML head
• Remove <style> tag from index.html

Phase 2: Extract JavaScript

• Create app.js file
• Move all JavaScript from <script> tag to app.js
• Add <script src="app.js"></script> before closing </body> tag
• Remove inline <script> tag from index.html

Phase 3: Clean Up HTML

• Simplify index.html to contain only:
  • Document structure
  • HTML elements
  • Links to external CSS/JS files
• Verify all functionality still works

Expected Outcome

• index.html: ~50-100 lines (structure only)
• styles.css: ~200 lines (all styling)
• app.js: ~800+ lines (all functionality)

Benefits

• ✅ Much easier to read and navigate
• ✅ Better code organization
• ✅ Easier to find specific functionality
• ✅ Better for code reviews
• ✅ No build tools or workflow changes needed
• ✅ Maintains all current functionality

Acceptance Criteria

• All three files are created and properly linked
• No functionality is lost or broken
• Site works exactly the same as before
• File structure is clean and logical
• Code is easier to read and maintain

Notes

• This is a simple file separation, not a full rewrite
• No build tools, frameworks, or complex changes
• Maintain current development workflow
• All existing URLs and functionality should work unchanged