html
html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Swipe Speed Test</title>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
</head>
<body onload="initializeSwipeTest()">
<div class="container">
<div class="swipe-area" id="swipeArea">Swipe Here</div>
<div class="table-container">
<table>
<thead>
<tr>
<th>Type</th>
<th>Speed (px/s)</th>
</tr>
</thead>
<tbody>
<tr><td>Current</td><td id="currentSpeed">0</td></tr>
<tr><td>Mean</td><td id="meanSpeed">0</td></tr>
</tbody>
</table>
</div>
</div>
<script src="script.js"></script>
css
css
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
:root {
--primary: #7F5AF0;
--secondary: #2CB67D;
--background: #16161A;
--surface: #242629;
--text: #FFFFFE;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Poppins', sans-serif;
background: var(--background);
color: var(--text);
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
padding: 2rem;
overflow: hidden;
}
.container {
width: 100%;
js
js
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
function initializeSwipeTest() {
const swipeArea = document.getElementById('swipeArea');
const currentSpeedCell = document.getElementById('currentSpeed');
const meanSpeedCell = document.getElementById('meanSpeed');
let startTime, lastX, lastY, totalDistance = 0;
let totalSpeed = 0, count = 0;
function createRipple(x, y) {
const rect = swipeArea.getBoundingClientRect();
const ripple = document.createElement('div');
ripple.className = 'ripple';
ripple.style.left = `${x - rect.left}px`;
ripple.style.top = `${y - rect.top}px`;
swipeArea.appendChild(ripple);
setTimeout(() => ripple.remove(), 600);
}
swipeArea.addEventListener('touchstart', (e) => {
const touch = e.touches[0];
startTime = Date.now();
lastX = touch.clientX;
lastY = touch.clientY;
totalDistance = 0;
createRipple(touch.clientX, touch.clientY);
});
swipeArea.addEventListener('touchmove', (e) => {
BROWSER
Console
Uruchom