fix(ui): adjust timer layout to prevent text overlap; clean up readme

README.md

@@ -1,63 +1,67 @@
 # katproxy
 
-A sleek, minimal, high-performance proxy list stream & active TCP latency prober.
+Minimal proxy list aggregator and live TCP latency prober.
 
-Features dark glassmorphism aesthetics, live SVG countdown timer, one-click copy suite (IP:Port, cURL, raw lists), multi-protocol filtering (HTTP, SOCKS4, SOCKS5), and live round-trip latency metrics.
+- **Frontend**: [katproxy.oiupoyt.space](https://katproxy.oiupoyt.space)
+- **Backend API**: [katproxy-api.oiupoyt.space](https://katproxy-api.oiupoyt.space)
 
 ---
 
-## ⚡ Architecture
+## Overview
 
-- **Backend (Android Tablet / Termux)**:
+katproxy collects proxies from multiple public repositories (`monosans/proxy-list`, `TheSpeedX/PROXY-List`, `hookzof/socks5_list`), normalizes them, and runs concurrent TCP socket checks to verify responsiveness and record round-trip latency.
-  - Aggregates thousands of proxies from premier GitHub sources (`monosans/proxy-list`, `TheSpeedX/PROXY-List`, `hookzof/socks5_list`).
+
-  - Active background TCP socket connection tester measuring real round-trip latency (`ms`).
+The backend runs as a lightweight daemon on an Android tablet (Termux) exposed via Cloudflare Tunnel. The frontend is a static web app hosted on Cloudflare Pages.
-  - REST API running on port `5050`, tunneled via Cloudflare Tunnel as `katproxy-api.oiupoyt.space`.
-- **Frontend (Cloudflare Pages)**:
-  - Fast, zero-dependency static web application located in `public/`.
-  - JetBrains Mono typography, smooth 60fps micro-animations, quick actions, responsive on desktop and mobile.
 
 ---
 
-## 🚀 API Endpoints
+## API Reference
 
-| Method | Endpoint | Description |
+Base URL: `https://katproxy-api.oiupoyt.space`
-|---|---|---|
-| `GET` | `/api/health` | Service health status and uptime |
-| `GET` | `/api/stats` | Total proxies, verified alive count, protocol counts, avg ping |
-| `GET` | `/api/proxies` | Paginated list with `protocol`, `alive`, `search`, `sort`, `country` filters |
-| `POST` | `/api/refresh` | Trigger immediate upstream re-fetch and probe cycle |
-| `GET` | `/api/raw` | Raw plaintext list (`ip:port` or `format=url`) for curl / bash pipelines |
 
-### Examples
+| Method | Endpoint | Parameters | Description |
+|---|---|---|---|
+| `GET` | `/api/health` | — | Service uptime and status |
+| `GET` | `/api/stats` | — | Total count, alive count, protocol breakdown, avg latency |
+| `GET` | `/api/proxies` | `protocol`, `alive`, `search`, `sort`, `limit`, `page` | Filtered and paginated proxy list |
+| `GET` | `/api/raw` | `protocol`, `alive`, `format` (`ip:port` or `url`) | Plaintext list for shell scripts and curl |
+| `POST` | `/api/refresh` | — | Trigger upstream re-fetch and verification cycle |
+
+### Usage Examples
 
 ```bash
-# Get 5 fastest SOCKS5 proxies
+# Fetch fastest alive SOCKS5 proxies
-curl "https://katproxy-api.oiupoyt.space/api/proxies?protocol=socks5&alive=true&limit=5"
+curl "https://katproxy-api.oiupoyt.space/api/proxies?protocol=socks5&alive=true&limit=10"
 
-# Raw IP:PORT stream for CLI scripts
+# Stream raw IP:PORT pairs
-curl -s "https://katproxy-api.oiupoyt.space/api/raw?protocol=socks5&alive=true" | head -n 10
+curl -s "https://katproxy-api.oiupoyt.space/api/raw?protocol=socks5&alive=true"
 ```
 
 ---
 
-## 🛠 Cloudflare Pages Deployment (Frontend)
+## Architecture
 
-1. Connect this GitHub repository (`oiupoyt/katproxy`) to Cloudflare Pages.
+- **Backend (`/backend`)**: Node.js service running on port `5050` with controlled memory allocation (`--max-old-space-size=256`). Includes background socket prober and auto-refresh worker.
-2. Build Settings:
+- **Frontend (`/public`)**: Vanilla JavaScript, CSS, and HTML with JetBrains Mono typography, auto-refresh countdown, and one-click copy actions.
-   - **Framework preset**: None
+- **Tunnel**: Managed by `cloudflared` routing `katproxy-api.oiupoyt.space` to `localhost:5050`.
-   - **Build command**: None (leave empty)
-   - **Build output directory**: `public`
-3. Deploy! The frontend automatically connects to `https://katproxy-api.oiupoyt.space`.
 
 ---
 
-## 📱 Tablet Backend Setup
+## Tablet Service Management
 
 ```bash
-# On the tablet (Termux)
+# Check status and recent logs
-cd ~
+~/katproxy-backend/status.sh
-git clone https://github.com/oiupoyt/katproxy.git katproxy
+
-cd katproxy/backend
+# Start or restart daemon
-npm install
+~/katproxy-backend/start.sh
-node --max-old-space-size=256 server.js
+
+# Stop daemon
+~/katproxy-backend/stop.sh
 ```
+
+---
+
+## License
+
+MIT

public/app.js

@@ -61,8 +61,8 @@ const el = {
   toastContainer: document.getElementById('toast-container')
 };
 
-// SVG Circle circumference: 2 * Math.PI * 11 ≈ 69.11
+// SVG Circle circumference: 2 * Math.PI * 6 ≈ 37.7
-const CIRCUMFERENCE = 69.11;
+const CIRCUMFERENCE = 37.7;
 
 /**
  * Toast Notification Helper

public/index.html

@@ -45,11 +45,11 @@
         <!-- Refresh Countdown & Trigger -->
         <div class="refresh-control">
           <div class="timer-widget" title="Auto-refresh countdown">
-            <svg class="progress-ring" width="28" height="28">
+            <svg class="progress-ring" width="16" height="16" viewBox="0 0 16 16">
-              <circle class="progress-ring-bg" stroke="#27272a" stroke-width="2.5" fill="transparent" r="11" cx="14" cy="14" />
+              <circle class="progress-ring-bg" stroke="#27272a" stroke-width="2" fill="transparent" r="6" cx="8" cy="8" />
-              <circle class="progress-ring-circle" id="progress-circle" stroke="#10b981" stroke-width="2.5" stroke-dasharray="69.11" stroke-dashoffset="0" stroke-linecap="round" fill="transparent" r="11" cx="14" cy="14" />
+              <circle class="progress-ring-circle" id="progress-circle" stroke="#10b981" stroke-width="2" stroke-dasharray="37.7" stroke-dashoffset="0" stroke-linecap="round" fill="transparent" r="6" cx="8" cy="8" />
             </svg>
-            <span class="timer-text" id="timer-text">--s</span>
+            <span class="timer-text" id="timer-text">--:--</span>
           </div>
           <button class="btn btn-icon" id="btn-manual-refresh" title="Force refresh upstream sources">
             <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">

public/style.css

@@ -186,12 +186,15 @@ body {
 }
 
 .timer-widget {
-  position: relative;
+  display: inline-flex;
-  width: 28px;
-  height: 28px;
-  display: flex;
   align-items: center;
-  justify-content: center;
+  gap: 7px;
+  padding: 0 4px 0 2px;
+}
+
+.progress-ring {
+  display: block;
+  flex-shrink: 0;
 }
 
 .progress-ring-circle {
@@ -201,11 +204,12 @@ body {
 }
 
 .timer-text {
-  position: absolute;
   font-family: var(--font-mono);
-  font-size: 9px;
+  font-size: 11px;
   color: var(--text-muted);
-  font-weight: 600;
+  font-weight: 500;
+  letter-spacing: -0.2px;
+  min-width: 34px;
 }
 
 /* Buttons */