# 485Tech Architecture — Production v1.0

## Core Technology Stack
- **Edge Computing**: Cloudflare Workers (Native `index.js`)
- **Database**: Cloudflare D1 (Global Relational Database)
- **Object Storage**: Cloudflare R2 (For media/assets)
- **Caching / Rate Limiting**: Cloudflare KV
- **Frontend**: Vanilla HTML/CSS/JS (Web Components, CSS Custom Properties, SVG Icon Sprites)

## Directory Structure

```
485Tech/
├── public/                    # Static assets (served via Cloudflare Assets Binding)
│   ├── assets/                # Brand assets
│   │   ├── logo.svg           # SVG logo (theme-aware via currentColor)
│   │   ├── favicon.svg        # SVG favicon
│   │   └── icons/
│   │       └── icons.svg      # SVG sprite sheet (all icons)
│   ├── styles/
│   │   ├── main.css           # Design system (tokens, components, layout)
│   │   └── pages.css          # Page-specific styles
│   ├── scripts/
│   │   └── app.js             # Core frontend (Web Components, i18n, theme)
│   ├── index.html             # Homepage
│   ├── store.html             # Store (Coming Soon)
│   ├── dev.html               # Dev Service (Coming Soon)
│   ├── tools.html             # Smart Tools (Coming Soon)
│   ├── trading.html           # Trading AI (Coming Soon)
│   ├── blog.html              # Blog (Coming Soon)
│   ├── contact.html           # Contact page
│   ├── about.html             # About page
│   ├── privacy.html           # Privacy Policy (PDPA)
│   ├── terms.html             # Terms of Service
│   └── robots.txt             # SEO
├── src/
│   ├── worker/
│   │   └── index.js           # Cloudflare Worker entry point (router)
│   ├── middleware/
│   │   ├── auth.js            # JWT authentication guard
│   │   └── i18n.js            # Server-side language detection
│   ├── lib/
│   │   ├── db.js              # D1 database wrapper
│   │   └── crypto.js          # Web Crypto API (JWT signing)
│   └── i18n/
│       ├── th.json            # Thai translations
│       └── en.json            # English translations
├── migrations/
│   └── 0000_initial_schema.sql
├── server.py                  # Local dev server (Python)
├── wrangler.toml              # Cloudflare Worker config
├── ARCHITECTURE.md            # This file
└── README.md
```

## Frontend Architecture

### Design System (`main.css`)
- CSS Custom Properties for all design tokens (colors, typography, spacing)
- Dark/Light theme support via `[data-theme]` attribute
- Fluid typography using `clamp()`
- Glassmorphism navbar with `backdrop-filter`
- Responsive hamburger menu for mobile (<900px)
- Scroll-based animations via Intersection Observer

### Web Components (`app.js`)
- `<app-navbar>`: Fixed navbar with hamburger, theme toggle, language switcher
- `<app-footer>`: 4-column footer with social icons, service links, legal links
- `AppLogic`: Core class handling i18n, theme, forms, scroll animations

### Icon System
- SVG sprite sheet at `/assets/icons/icons.svg`
- Referenced via `<svg><use href="/assets/icons/icons.svg#icon-name"></use></svg>`
- Icons: service icons, social media, UI controls

## Data Flow
1. Client requests a URL (e.g., `485tech.com/store`)
2. Cloudflare Worker (`fetch` handler) intercepts the request
3. API routes (`/api/*`) → Worker processes logic, interacts with D1
4. Page routes → Worker rewrites URL to HTML file from `ASSETS` binding
5. HTML loads `main.css`, `pages.css`, and `app.js`
6. Client-side JS initializes i18n, theme, and scroll animations

## Security & Scalability
- **Authentication**: JWT via Web Crypto API (RS256)
- **PDPA Compliance**: Privacy Policy and Terms of Service pages
- **Database**: D1 with edge read-replication
- **Performance**: Zero build-step, native CSS/JS, SVG icons (no icon font libraries)
- **SEO**: Proper meta tags, robots.txt, semantic HTML