Taio
/
speed-test


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459
							<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Clash Speed Test - 节点测速工具</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css" rel="stylesheet">
    <link href="styles.css" rel="stylesheet">
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
        <div class="container">
            <a class="navbar-brand" href="#">
                <i class="bi bi-speedometer2"></i>
                Clash Speed Test
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item">
                        <a class="nav-link active" href="#dashboard" data-page="dashboard">
                            <i class="bi bi-house"></i> 仪表板
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#nodes" data-page="nodes">
                            <i class="bi bi-hdd-network"></i> 节点管理
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#speed-test" data-page="speed-test">
                            <i class="bi bi-speedometer"></i> 测速结果
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#notifications" data-page="notifications">
                            <i class="bi bi-bell"></i> 通知记录
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#settings" data-page="settings">
                            <i class="bi bi-gear"></i> 系统设置
                        </a>
                    </li>
                </ul>
                <div class="navbar-nav">
                    <span class="navbar-text" id="status-indicator">
                        <i class="bi bi-circle-fill text-success"></i> 系统正常
                    </span>
                </div>
            </div>
        </div>
    </nav>

    <!-- 主要内容区域 -->
    <div class="container-fluid mt-4">
        <!-- 仪表板页面 -->
        <div id="dashboard-page" class="page-content">
            <div class="row">
                <div class="col-12">
                    <h2><i class="bi bi-house"></i> 仪表板</h2>
                    <p class="text-muted">系统概览和统计信息</p>
                </div>
            </div>

            <!-- 统计卡片 -->
            <div class="row mb-4">
                <div class="col-md-3">
                    <div class="card stat-card">
                        <div class="card-body">
                            <div class="d-flex justify-content-between">
                                <div>
                                    <h6 class="card-title text-muted">总节点数</h6>
                                    <h3 class="mb-0" id="total-nodes">-</h3>
                                </div>
                                <div class="stat-icon">
                                    <i class="bi bi-hdd-network text-primary"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card stat-card">
                        <div class="card-body">
                            <div class="d-flex justify-content-between">
                                <div>
                                    <h6 class="card-title text-muted">在线节点</h6>
                                    <h3 class="mb-0" id="online-nodes">-</h3>
                                </div>
                                <div class="stat-icon">
                                    <i class="bi bi-wifi text-success"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card stat-card">
                        <div class="card-body">
                            <div class="d-flex justify-content-between">
                                <div>
                                    <h6 class="card-title text-muted">测速成功率</h6>
                                    <h3 class="mb-0" id="success-rate">-</h3>
                                </div>
                                <div class="stat-icon">
                                    <i class="bi bi-graph-up text-info"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card stat-card">
                        <div class="card-body">
                            <div class="d-flex justify-content-between">
                                <div>
                                    <h6 class="card-title text-muted">今日测速</h6>
                                    <h3 class="mb-0" id="today-tests">-</h3>
                                </div>
                                <div class="stat-icon">
                                    <i class="bi bi-calendar-check text-warning"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 快速操作 -->
            <div class="row mb-4">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header">
                            <h5><i class="bi bi-lightning"></i> 快速操作</h5>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-3 mb-2">
                                    <button class="btn btn-primary w-100" onclick="startSpeedTest()">
                                        <i class="bi bi-speedometer"></i> 开始测速
                                    </button>
                                </div>
                                <div class="col-md-3 mb-2">
                                    <button class="btn btn-success w-100" onclick="testNotification()">
                                        <i class="bi bi-bell"></i> 测试通知
                                    </button>
                                </div>
                                <div class="col-md-3 mb-2">
                                    <button class="btn btn-info w-100" onclick="refreshStats()">
                                        <i class="bi bi-arrow-clockwise"></i> 刷新统计
                                    </button>
                                </div>
                                <div class="col-md-3 mb-2">
                                    <button class="btn btn-secondary w-100" onclick="showSystemStatus()">
                                        <i class="bi bi-info-circle"></i> 系统状态
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 最近测速结果 -->
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header d-flex justify-content-between align-items-center">
                            <h5><i class="bi bi-clock-history"></i> 最近测速结果</h5>
                            <a href="#speed-test" class="btn btn-sm btn-outline-primary" data-page="speed-test">查看全部</a>
                        </div>
                        <div class="card-body">
                            <div id="recent-results">
                                <div class="text-center text-muted">
                                    <i class="bi bi-hourglass-split"></i> 加载中...
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 节点管理页面 -->
        <div id="nodes-page" class="page-content" style="display: none;">
            <div class="row">
                <div class="col-12">
                    <h2><i class="bi bi-hdd-network"></i> 节点管理</h2>
                    <p class="text-muted">管理所有代理节点</p>
                </div>
            </div>

            <!-- 搜索和过滤 -->
            <div class="row mb-4">
                <div class="col-12">
                    <div class="card">
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-5">
                                    <input type="text" class="form-control" id="node-search" placeholder="搜索节点名称或服务器...">
                                </div>
                                <div class="col-md-3">
                                    <select class="form-select" id="status-filter">
                                        <option value="">所有状态</option>
                                        <option value="online">在线</option>
                                        <option value="offline">离线</option>
                                    </select>
                                </div>
                                <div class="col-md-2">
                                    <button class="btn btn-primary w-100" onclick="searchNodes()">
                                        <i class="bi bi-search"></i> 搜索
                                    </button>
                                </div>
                                <div class="col-md-2">
                                    <button class="btn btn-success w-100" onclick="importNodes()">
                                        <i class="bi bi-upload"></i> 导入节点
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


            <!-- 节点列表 -->
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header">
                            <h5>节点列表</h5>
                        </div>
                        <div class="card-body">
                            <div id="nodes-list">
                                <div class="row">
                                    <div class="text-center text-muted">
                                        <i class="bi bi-hourglass-split"></i> 加载中...
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 测速结果页面 -->
        <div id="speed-test-page" class="page-content" style="display: none;">
            <div class="row">
                <div class="col-12">
                    <h2><i class="bi bi-speedometer"></i> 测速结果</h2>
                    <p class="text-muted">查看所有测速历史记录</p>
                </div>
            </div>

            <!-- 过滤条件 -->
            <div class="row mb-4">
                <div class="col-12">
                    <div class="card">
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-3">
                                    <input type="text" class="form-control" id="result-node-filter" placeholder="输入节点名称搜索...">
                                </div>
                                <div class="col-md-2">
                                    <select class="form-select" id="result-status-filter">
                                        <option value="">所有结果</option>
                                        <option value="true">成功</option>
                                        <option value="false">失败</option>
                                    </select>
                                </div>
                                <div class="col-md-3">
                                    <input type="date" class="form-control" id="start-date" placeholder="开始日期">
                                </div>
                                <div class="col-md-3">
                                    <input type="date" class="form-control" id="end-date" placeholder="结束日期">
                                </div>
                                <div class="col-md-1">
                                    <button class="btn btn-primary w-100" onclick="searchResults()">
                                        <i class="bi bi-search"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 测速结果列表 -->
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header">
                            <h5>测速历史</h5>
                        </div>
                        <div class="card-body">
                            <div id="test-results">
                                <div class="text-center text-muted">
                                    <i class="bi bi-hourglass-split"></i> 加载中...
                                </div>
                            </div>
                            <!-- 分页 -->
                            <nav aria-label="测速结果分页" id="test-results-pagination">
                            </nav>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 通知记录页面 -->
        <div id="notifications-page" class="page-content" style="display: none;">
            <div class="row">
                <div class="col-12">
                    <h2><i class="bi bi-bell"></i> 通知记录</h2>
                    <p class="text-muted">查看所有Telegram通知记录</p>
                </div>
            </div>

            <!-- 通知列表 -->
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header">
                            <h5>通知历史</h5>
                        </div>
                        <div class="card-body">
                            <div id="notifications-list">
                                <div class="text-center text-muted">
                                    <i class="bi bi-hourglass-split"></i> 加载中...
                                </div>
                            </div>
                            <!-- 分页 -->
                            <nav aria-label="通知分页" id="notifications-pagination">
                            </nav>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 系统设置页面 -->
        <div id="settings-page" class="page-content" style="display: none;">
            <div class="row">
                <div class="col-12">
                    <h2><i class="bi bi-gear"></i> 系统设置</h2>
                    <p class="text-muted">管理系统配置和状态</p>
                </div>
            </div>

            <!-- 系统状态 -->
            <div class="row mb-4">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header">
                            <h5>系统状态</h5>
                        </div>
                        <div class="card-body">
                            <div id="system-status">
                                <div class="text-center text-muted">
                                    <i class="bi bi-hourglass-split"></i> 加载中...
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 订阅管理 -->
            <div class="row mb-4">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header">
                            <h5>订阅管理</h5>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-6">
                                    <h6>订阅状态</h6>
                                    <div id="subscription-status">
                                        <div class="text-muted">加载中...</div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <h6>操作</h6>
                                    <button class="btn btn-primary" onclick="updateSubscription()">
                                        <i class="bi bi-arrow-clockwise"></i> 更新订阅
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 模态框 -->
    <!-- 节点详情模态框 -->
    <div class="modal fade" id="nodeDetailModal" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">节点详情</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body" id="node-detail-content">
                </div>
            </div>
        </div>
    </div>

    <!-- 导入节点模态框 -->
    <div class="modal fade" id="importModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">导入节点</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label">配置文件路径</label>
                        <input type="text" class="form-control" id="config-path" placeholder="./config/clash_config.yaml">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">或订阅URL</label>
                        <input type="text" class="form-control" id="config-url" placeholder="https://example.com/config.yaml">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" onclick="confirmImport()">导入</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 加载提示 -->
    <div id="loading-overlay" class="loading-overlay" style="display: none;">
        <div class="loading-spinner">
            <div class="spinner-border text-primary" role="status">
                <span class="visually-hidden">加载中...</span>
            </div>
            <div class="mt-2">处理中，请稍候...</div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="app.js"></script>
</body>
</html>