cn-project/speed.html at master · Distracted-Explorer/cn-project · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Speed Test | Troubleshoot Chatbot</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="assets/css/style.css">
    <script src="https://cdn.jsdelivr.net/npm/librespeed/speedtest@5.1.0/dist/speedtest.min.js"></script>
</head>
<body>
    <div class="container">
        <div class="decor circle1"></div>
        <div class="decor circle2"></div>

        <h1>Speed Test</h1>

        <div class="tool-container">
            <div class="tool-description">
                <p>Measure your network's download and upload speeds, latency, and jitter. Click the button below to start the test.</p>
            </div>

            <div class="tool-interface">
                <div class="speedtest-container">
                    <button id="speedtest-btn">
                        <i class="fas fa-tachometer-alt"></i> Start Speed Test
                    </button>

                    <div class="speedtest-results">
                        <div class="speedtest-metric">
                            <h3>Download</h3>
                            <div class="speedtest-value" id="download-speed">0.00 Mbps</div>
                            <div class="speedtest-bar">
                                <div class="speedtest-progress" id="download-bar"></div>
                            </div>
                        </div>

                        <div class="speedtest-metric">
                            <h3>Upload</h3>
                            <div class="speedtest-value" id="upload-speed">0.00 Mbps</div>
                            <div class="speedtest-bar">
                                <div class="speedtest-progress" id="upload-bar"></div>
                            </div>
                        </div>

                        <div class="speedtest-metric">
                            <h3>Ping</h3>
                            <div class="speedtest-value" id="ping-value">0 ms</div>
                        </div>

                        <div class="speedtest-metric">
                            <h3>Jitter</h3>
                            <div class="speedtest-value" id="jitter-value">0 ms</div>
                        </div>
                    </div>
                </div>
            </div>

            <a href="index.html" class="back-btn">
                <i class="fas fa-arrow-left"></i> Back to Main
            </a>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const btn = document.getElementById('speedtest-btn');
            const downloadEl = document.getElementById('download-speed');
            const uploadEl = document.getElementById('upload-speed');
            const pingEl = document.getElementById('ping-value');
            const jitterEl = document.getElementById('jitter-value');
            const downloadBar = document.getElementById('download-bar');
            const uploadBar = document.getElementById('upload-bar');

            let speedTest = null;

            btn.addEventListener('click', function() {
                // Reset values before starting new test
                downloadEl.textContent = '0.00 Mbps';
                uploadEl.textContent = '0.00 Mbps';
                pingEl.textContent = '0 ms';
                jitterEl.textContent = '0 ms';
                downloadBar.style.width = '0%';
                uploadBar.style.width = '0%';

                btn.disabled = true;
                btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Testing...';

                try {
                    // If a test is already running, abort it
                    if (speedTest && speedTest.abort) {
                        speedTest.abort();
                    }

                    // Create new speed test instance
                    speedTest = new Speedtest();

                    speedTest.onupdate = function(data) {
                        if (data.testState === 4) { // Download test
                            const speed = (data.download / 1000000).toFixed(2);
                            downloadEl.textContent = `${speed} Mbps`;
                            // Scale the progress bar to show up to 100Mbps (adjust as needed)
                            downloadBar.style.width = `${Math.min(100, speed)}%`;
                        } else if (data.testState === 5) { // Upload test
                            const speed = (data.upload / 1000000).toFixed(2);
                            uploadEl.textContent = `${speed} Mbps`;
                            // Scale the progress bar to show up to 100Mbps (adjust as needed)
                            uploadBar.style.width = `${Math.min(100, speed)}%`;
                        } else if (data.testState === 6) { // Ping test
                            pingEl.textContent = `${Math.round(data.ping)} ms`;
                            jitterEl.textContent = `${Math.round(data.jitter)} ms`;
                        }
                    };

                    speedTest.onend = function(aborted) {
                        btn.disabled = false;
                        btn.innerHTML = '<i class="fas fa-tachometer-alt"></i> Run Again';

                        if (aborted) {
                            console.log('Speed test was aborted');
                        }
                    };

                    // Start the test with custom parameters if needed
                    speedTest.start({
                        // You can add custom test parameters here if needed
                        // e.g., test duration, number of streams, etc.
                    });
                } catch (error) {
                    console.error('Speed test error:', error);
                    btn.disabled = false;
                    btn.innerHTML = '<i class="fas fa-tachometer-alt"></i> Try Again';
                    alert('Failed to start speed test. Please check your connection and try again.');
                }
            });
        });
    </script>
</body>
</html>