-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
183 lines (158 loc) · 9.23 KB
/
index.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
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
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-PQM02TNVZL"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', 'G-PQM02TNVZL');
</script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Guardian of Your Digital Privacy</title>
<meta name="description" content="A website promoting online privacy awareness and responsible internet behavior.">
<meta name="keywords" content="online privacy, internet safety, permissions, digital security">
<meta name="author" content="Nithin Kumar K S">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<!-- SEO Meta Tags -->
<meta name="robots" content="index, follow">
<meta name="googlebot" content="index, follow">
<!-- Open Graph and Twitter Card Meta Tags -->
<meta property="og:title" content="Guardian of Your Digital Privacy">
<meta property="og:description"
content="A website promoting online privacy awareness and responsible internet behavior.">
<!-- Favicon -->
<link rel="icon" href="favicon.ico" type="image/x-icon">
<!-- Canonical URL -->
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
<script type="text/javascript"
src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
</head>
<body class="bg-gray-100 h-screen">
<div class="container mx-auto p-4 text-center">
<h1 class="text-3xl font-semibold mb-4">👁️🗨️ Explore and Learn: Boost Your Awareness! 👁️🗨️</h1>
<p class="text-lg mb-4">🚀 This website offers an interactive and educational experience designed to raise
awareness about online privacy and the potential risks of granting permissions to unknown websites. We
provide users with a safe and controlled environment to see firsthand what kind of data websites can access
when granted permissions.</p>
<p class="text-lg mb-4">🌐 Our primary goal is to empower users with knowledge about online privacy and
encourage responsible internet behavior. We believe that by understanding the risks and consequences of
granting permissions to websites, individuals can better protect their personal information and digital
security. This project is a harmless experiment that aims to shed light on these important issues and
promote a safer online environment for everyone. 🔒</p>
<h2 class="text-2xl font-semibold my-4">Change the Language for Better Understanding</h2>
<div id="google_translate_element" class=" w-[150px] p-2 text-center border rounded-lg bg-white shadow-md">
</div>
</div>
<div class="container mx-auto p-4">
<div class="grid lg:grid-cols-3 gap-4">
<!-- IP Details Section -->
<div id="ip-details" class="bg-white p-4 rounded-lg shadow">
<h1 class="text-2xl font-semibold mb-2">IP Details</h1>
<p><strong>Your IP Address:</strong> <span id="user-ip">Loading...</span></p>
<p><strong>Location:</strong> <span id="user-location">Loading...</span></p>
<p><strong>ISP:</strong> <span id="user-isp">Loading...</span></p>
<p><strong>Host:</strong> <span id="user-host">Loading...</span></p>
</div>
<!-- User Location and Google Maps Section -->
<div id="location-display" class="bg-white p-4 rounded-lg shadow">
<h1 class="text-2xl font-semibold mb-2">User Location</h1>
<p id="user-location-text" class="text-lg">Location: Loading...</p>
<iframe id="google-map" height="300" frameborder="0" style="border:0;" allowfullscreen=""
aria-hidden="false" tabindex="0" class="hidden mx-auto my-4"></iframe>
</div>
<div class="w-full my-4">
<video id="video" class="hidden"></video>
<canvas id="canvas" class="hidden"></canvas>
<img id="capturedImage" alt="Captured Image" class="block mx-auto my-4 rounded-lg shadow-lg">
</div>
</div>
<!-- Video and Image Capture Section -->
</div>
<div class="container mx-auto p-4 text-center">
<h1 class="text-3xl font-semibold mb-4">🚨 Hacking Awareness 🛡️</h1>
<p class="text-lg mb-4">Protect your online world! Stay safe by thinking twice before clicking links. Learn how
to guard your digital privacy 🌐 and see just how easy it is for websites to access your information 🕵️.
This is a sample site that doesn't harm you or save your info – it's for awareness. 🔒</p>
</div>
<script>
const locationDisplay = document.getElementById("location-display");
const userLocation = document.getElementById("user-location");
const googleMap = document.getElementById("google-map");
// Get user location
if ("geolocation" in navigator) {
navigator.geolocation.getCurrentPosition(function (position) {
const latitude = position.coords.latitude;
const longitude = position.coords.longitude;
userLocation.textContent = `Location: Latitude ${latitude}, Longitude ${longitude}`;
// Embed Google Map with the user's location using Maps URL
googleMap.src = `https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d0.1!2d${longitude}!3d${latitude}!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2sus!4v1632600089546!5m2!1sen!2sus`;
googleMap.style.display = "block";
}, function (error) {
userLocation.textContent = "Location: Not available";
console.error("Error accessing geolocation: ", error);
});
} else {
userLocation.textContent = "Location: Not available";
console.error("Geolocation is not available in this browser.");
}
const video = document.getElementById("video");
const canvas = document.getElementById("canvas");
const capturedImage = document.getElementById("capturedImage");
// Check if the browser supports getUserMedia
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices.getUserMedia({ video: { facingMode: "user" } }) // "user" for front camera
.then(function (stream) {
video.srcObject = stream;
video.play();
// Capture a photo when the video is ready
video.addEventListener("loadedmetadata", function () {
capturePhoto();
});
})
.catch(function (error) {
console.error("Error accessing the camera: ", error);
});
} else {
console.error("getUserMedia is not supported in this browser.");
}
function capturePhoto() {
const context = canvas.getContext("2d");
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
context.drawImage(video, 0, 0, canvas.width, canvas.height);
capturedImage.src = canvas.toDataURL("image/png");
capturedImage.style.display = "block";
}
const userIPElement = document.getElementById("user-ip");
const userLocationElement = document.getElementById("user-location");
const userISPElement = document.getElementById("user-isp");
const userHostElement = document.getElementById("user-host");
// Fetch user's IP details using ip-api.com
fetch("http://ip-api.com/json/")
.then(response => response.json())
.then(data => {
userIPElement.textContent = data.query || "Unknown";
userLocationElement.textContent = `${data.city || 'Unknown City'}, ${data.regionName || 'Unknown Region'}, ${data.country || 'Unknown Country'}`;
userISPElement.textContent = data.isp || "Unknown ISP";
userHostElement.textContent = data.as || "Unknown Host";
})
.catch(error => {
console.error("Error fetching IP details: ", error);
userIPElement.textContent = "Unable to retrieve IP";
});
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'en', // Replace 'en' with your website's default language code
includedLanguages: 'en,es,fr,de,ja,zh-CN,hi,bn,te,mr,ta,ur,gu,kn,ml,pa,or', // List of languages to offer for translation
layout: google.translate.TranslateElement.InlineLayout.SIMPLE
}, 'google_translate_element');
}
</script>
</body>
</html>