Add tree inventory management web app with Flask backend

[hiroshift1230]

Summary

This PR introduces a complete tree inventory management application (樹木台帳) built with Flask and vanilla JavaScript. The app provides a mobile-first interface for registering, searching, filtering, and managing tree records with photos.

Key Changes

Backend (Flask)

• app.py: Core Flask application with SQLite database integration
  • CRUD endpoints for tree records (/, /add, /tree/<id>, /tree/<id>/delete)
  • Search and filter functionality (by name, location, species, condition)
  • Photo upload handling with secure filename generation and file type validation
  • Database initialization with automatic schema creation
  • Stats API endpoint for tree condition aggregation

Frontend Templates

• base.html: Master template with responsive layout

  • Sticky header with app branding and tree count
  • Fixed bottom navigation with home, add, and history tabs
  • Comprehensive CSS design system (colors, spacing, shadows, typography)
  • Mobile-first responsive design with safe area insets for notched devices
  • Support for iOS web app mode (status bar styling, home screen installation)

• index.html: Tree listing and search interface

  • Sticky search bar with real-time filtering (500ms debounce)
  • Collapsible filter drawer for species and condition filtering
  • Responsive grid layout (2 columns mobile, 3 tablets, 4 desktop)
  • Tree cards with photo, name, species, location, and condition badges
  • Active filter chips with individual clear buttons
  • Empty state with contextual messaging

• add.html: Tree registration form

  • Photo upload with preview and change functionality
  • Form fields: name (required), species (with datalist suggestions), location, condition, notes
  • Condition selector with visual buttons (good/normal/poor/dead states)
  • Form validation and file type restrictions

• detail.html: Individual tree detail view

  • Hero photo display
  • Comprehensive tree information card with metadata
  • Condition badge with emoji indicators
  • Notes/memo section with preserved formatting
  • Delete confirmation modal with safety warnings
  • Back navigation to list

Configuration

• requirements.txt: Python dependencies (Flask 3.0+, Werkzeug 3.0+)
• README.md: Setup instructions and feature overview

Notable Implementation Details

• Photo handling: Secure UUID-based filenames, 16MB size limit, support for multiple formats (PNG, JPG, GIF, WebP)
• Mobile optimization: Viewport fit cover, safe area insets, tap highlight removal, 16px font size to prevent iOS zoom
• Search UX: Debounced input with auto-submit, preserves filter state across searches
• Accessibility: Semantic HTML, proper form labels, emoji indicators for quick visual scanning
• Database: SQLite with automatic initialization, indexed queries for search performance
• Responsive design: CSS Grid with media queries, flexible layouts that adapt from mobile to desktop

https://claude.ai/code/session_012KoK21X68CL5JYXB9NqJSE