graph LR %% Frontend Section subgraph Frontend[Frontend] direction TB A[ HTML/CSS/JS] --> B[ UIkit Components] A --> D[ GitHub Pages Hosting] A --> Z[ EmailJS for OTP Sending] end %% Backend Section subgraph Backend[Backend] direction TB E[ Google Sheets Database] --> F[ Google Sheets API] F --> G[ Google Apps Script 'for server side'] G --> H[ PDF Generation] G --> I[ Real-time Updates] end %% Connections Between Sections D -->|Hosts| A F -->|Access Data| G H -->|Send Reports| A