feat: display preset configuration for sizes of container and graph

README.md

@@ -9,7 +9,7 @@ Demo here : [https://thehuman00.github.io/demo-chrony-stats.github.io/](https://
 
 - **Multi-period time views**: View Chrony statistics across day, week, and month periods
 - **HTML report**: HTML page with graphs and raw `chronyc` command outputs
-- **Network monitoring**: withvnStat
+- **Network monitoring**: with vnStat
 - **Chrony statistics**
 - **Data quality**: Filters aberrant values during Chrony restarts
 - **Lightweight**
@@ -98,15 +98,22 @@ The script includes a configuration section at the top of `chrony-network-stats.
    ## "no" = Prevent DNS reverse lookups using -n option (faster, reduces network traffic)
    CHRONY_ALLOW_DNS_LOOKUP="yes"
 
+   # Screen preset (page & graphs). Options: default | 2k | 4k
+   # Adjusts main container width, base font size, and graph image resolution
+   DISPLAY_PRESET="default"
+
    TIMEOUT_SECONDS=5
-   WIDTH=800
-   HEIGHT=300
 
    ## When chrony restarts, it can generate abnormally high statistical values (e.g., 12M packets)
    ## that distort the graph scale. This parameter filters out values above the threshold,
    ## creating gaps in the graph instead of displaying misleading spikes.
    SERVER_STATS_UPPER_LIMIT=100000
    ##############################################################
+
+   # Base graph size (scaled automatically by DISPLAY_PRESET)
+   WIDTH=800
+   HEIGHT=300
+   ##############################################################
    [...]
    ```
    Close with Ctrl+X --> Y --> Enter
@@ -120,7 +127,7 @@ The script includes a configuration section at the top of `chrony-network-stats.
    ```
 
 2. **View the Output**:
-   - The HTML report is generated at `/var/www/chrony-network-stats/index.html`
+   - The HTML report is generated at `/var/www/html/chrony-network-stats/index.html`
    - Serves this file via a web server (e.g., Apache or Nginx)
 
    [See here how to serve via nginx in localhost](nginx.md)
@@ -128,6 +135,14 @@ The script includes a configuration section at the top of `chrony-network-stats.
 3. **Monitor Logs**:
    Check `/var/log/chrony-network-stats.log` for execution details and errors.
 
+### About responsiveness and large screens
+
+Set `DISPLAY_PRESET` to `2k` or `4k` if the main container looks too small on high-resolution displays.
+The preset will:
+- Increase the max width of the main container
+- Increase the base font size
+- Generate larger graph images to keep them sharp on big screens
+
 ## Setting up a crontab (Run every 5 minutes)
 
 To run the script every 5 minutes with `sudo` privileges, configure the root crontab :

chrony-network-stats.sh

@@ -23,13 +23,15 @@ GITHUB_REPO_LINK_SHOW="no" ## You can display the link to the repo 'chrony-stats
 ###### Advanced Configuration ######
 
 CHRONY_ALLOW_DNS_LOOKUP="yes" ##  Yes allow DNS reverse lookups. No to prevent slow DNS reverse lookups
+DISPLAY_PRESET="default" # Preset for large screens. Options: default | 2k | 4k
+
 TIMEOUT_SECONDS=5
 SERVER_STATS_UPPER_LIMIT=100000 ## When chrony restarts, it generate abnormally high values (e.g., 12M) | This filters out values above the threshold
-WIDTH=800   ## Width of the generated graphs
-HEIGHT=300  ## Height of the generated graphs
-
 ##############################################################
 
+WIDTH=800   ## These graph sizes are changing with DISPLAY_PRESET
+HEIGHT=300  ## 
+
 log_message() {
     local level="$1"
     local message="$2"
@@ -39,6 +41,37 @@ log_message() {
     	echo "[$level] $message"
 }
 
+configure_display_preset() {
+    local preset="${DISPLAY_PRESET,,}"
+    local scale_pct=100
+    local container_px=1400
+    local font_px=16
+
+    case "$preset" in
+        1080p|1080|default)
+            scale_pct=100; container_px=1400; font_px=16 ;;
+        2k|1440p|qhd)
+            scale_pct=135; container_px=2000; font_px=18 ;;
+        4k|2160p|uhd)
+            scale_pct=170; container_px=2600; font_px=20 ;;
+        *)
+            scale_pct=100; container_px=1400; font_px=16 ;;
+    esac
+
+    WIDTH=$(( WIDTH * scale_pct / 100 ))
+    HEIGHT=$(( HEIGHT * scale_pct / 100 ))
+
+    CSS_CUSTOM_ROOT=$(cat <<EOF
+:root {
+    --container-max: ${container_px}px;
+    --font-size-base: ${font_px}px;
+}
+EOF
+)
+
+    log_message "INFO" "Preset '${DISPLAY_PRESET}' -> graph ${WIDTH}x${HEIGHT}, container ${container_px}px, font ${font_px}px"
+}
+
 validate_numeric() {
     local value="$1"
     local name="$2"
@@ -396,7 +429,10 @@ $AUTO_REFRESH_META
             --border-color: #787879;
             --code-background: #e1e1e1;
             --code-text: #000000;
+            --container-max: 1400px;
+            --font-size-base: 16px;
         }
+$CSS_CUSTOM_ROOT
         body {
             font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
             margin: 0;
@@ -404,9 +440,10 @@ $AUTO_REFRESH_META
             background-color: var(--background-color);
             color: var(--primary-text);
             line-height: 1.6;
+            font-size: var(--font-size-base);
         }
         .container {
-            max-width: 1400px;
+            max-width: var(--container-max);
             margin: 0 auto;
             background-color: var(--content-background);
             padding: 20px 20px;
@@ -752,6 +789,7 @@ main() {
     validate_numeric "$TIMEOUT_SECONDS" "TIMEOUT_SECONDS"
     validate_numeric "$SERVER_STATS_UPPER_LIMIT" "SERVER_STATS_UPPER_LIMIT"
     validate_numeric "$AUTO_REFRESH_SECONDS" "AUTO_REFRESH_SECONDS"
+    configure_display_preset
     check_commands
     setup_directories
     generate_vnstat_images