fix(ui): adjust timer layout to prevent text overlap; clean up readme
This commit is contained in:
parent
569b56a594
commit
53743ca70f
4 changed files with 59 additions and 51 deletions
78
README.md
78
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)**:
|
||||
- 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`).
|
||||
- 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.
|
||||
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.
|
||||
|
||||
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.
|
||||
|
||||
---
|
||||
|
||||
## 🚀 API Endpoints
|
||||
## API Reference
|
||||
|
||||
| Method | Endpoint | Description |
|
||||
|---|---|---|
|
||||
| `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 |
|
||||
Base URL: `https://katproxy-api.oiupoyt.space`
|
||||
|
||||
### 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
|
||||
curl "https://katproxy-api.oiupoyt.space/api/proxies?protocol=socks5&alive=true&limit=5"
|
||||
# Fetch fastest alive SOCKS5 proxies
|
||||
curl "https://katproxy-api.oiupoyt.space/api/proxies?protocol=socks5&alive=true&limit=10"
|
||||
|
||||
# Raw IP:PORT stream for CLI scripts
|
||||
curl -s "https://katproxy-api.oiupoyt.space/api/raw?protocol=socks5&alive=true" | head -n 10
|
||||
# Stream raw IP:PORT pairs
|
||||
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.
|
||||
2. Build Settings:
|
||||
- **Framework preset**: None
|
||||
- **Build command**: None (leave empty)
|
||||
- **Build output directory**: `public`
|
||||
3. Deploy! The frontend automatically connects to `https://katproxy-api.oiupoyt.space`.
|
||||
- **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.
|
||||
- **Frontend (`/public`)**: Vanilla JavaScript, CSS, and HTML with JetBrains Mono typography, auto-refresh countdown, and one-click copy actions.
|
||||
- **Tunnel**: Managed by `cloudflared` routing `katproxy-api.oiupoyt.space` to `localhost:5050`.
|
||||
|
||||
---
|
||||
|
||||
## 📱 Tablet Backend Setup
|
||||
## Tablet Service Management
|
||||
|
||||
```bash
|
||||
# On the tablet (Termux)
|
||||
cd ~
|
||||
git clone https://github.com/oiupoyt/katproxy.git katproxy
|
||||
cd katproxy/backend
|
||||
npm install
|
||||
node --max-old-space-size=256 server.js
|
||||
# Check status and recent logs
|
||||
~/katproxy-backend/status.sh
|
||||
|
||||
# Start or restart daemon
|
||||
~/katproxy-backend/start.sh
|
||||
|
||||
# Stop daemon
|
||||
~/katproxy-backend/stop.sh
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## License
|
||||
|
||||
MIT
|
||||
|
|
|
|||
|
|
@ -61,8 +61,8 @@ const el = {
|
|||
toastContainer: document.getElementById('toast-container')
|
||||
};
|
||||
|
||||
// SVG Circle circumference: 2 * Math.PI * 11 ≈ 69.11
|
||||
const CIRCUMFERENCE = 69.11;
|
||||
// SVG Circle circumference: 2 * Math.PI * 6 ≈ 37.7
|
||||
const CIRCUMFERENCE = 37.7;
|
||||
|
||||
/**
|
||||
* Toast Notification Helper
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
<circle class="progress-ring-bg" stroke="#27272a" stroke-width="2.5" fill="transparent" r="11" cx="14" cy="14" />
|
||||
<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" />
|
||||
<svg class="progress-ring" width="16" height="16" viewBox="0 0 16 16">
|
||||
<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" 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">
|
||||
|
|
|
|||
|
|
@ -186,12 +186,15 @@ body {
|
|||
}
|
||||
|
||||
.timer-widget {
|
||||
position: relative;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
display: flex;
|
||||
display: inline-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 */
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue