Hugging Face's logo

Spaces:
Abdfah
/
Inforest
Running

App Files Community
Inforest / index.html
Abdfah's picture
Abdfah
Update index.html
5e3e3b6 verified
Raw History Blame Contribute Delete
3.52 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Device & Browser Info Extractor</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
background-color: #f4f4f9;
}
#info-container {
margin-top: 20px;
padding: 15px;
border: 1px solid #ccc;
border-radius: 8px;
background-color: #fff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
h1 {
color: #333;
text-align: center;
}
button {
display: block;
width: 100%;
padding: 10px;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
transition: background-color 0.3s;
}
button:hover {
background-color: #0056b3;
}
pre {
white-space: pre-wrap; /* Ensures long lines wrap */
word-wrap: break-word; /* For older browsers */
background-color: #e9ecef;
padding: 10px;
border-radius: 4px;
overflow-x: auto; /* Adds a scrollbar if content is too wide */
}
</style>
</head>
<body>
<h1>Device and Browser Information</h1>
<button id="testButton">Test Button: Extract Info</button>
<div id="info-container">
<p>Press the button above to display your device and browser information.</p>
<pre id="info-display"></pre>
</div>
<script>
document.getElementById('testButton').addEventListener('click', function() {
// The 'navigator' object is the primary source for browser and device info in JS
const nav = window.navigator;
// --- Collect all the information ---
let deviceInfo = {
// Browser Information
'Browser User Agent (Raw)': nav.userAgent, // The full string
'Browser Code Name': nav.appCodeName,
'Browser Name': nav.appName,
'Browser Version': nav.appVersion,
'Platform/OS': nav.platform,
'Browser Language': nav.language || nav.userLanguage,
'Online Status': nav.onLine ? 'Online' : 'Offline',
'Cookies Enabled': nav.cookieEnabled ? 'Yes' : 'No',
// Device/Screen Information
'Screen Width': window.screen.width + ' px',
'Screen Height': window.screen.height + ' px',
'Color Depth': window.screen.colorDepth + ' bits',
// Device-specific properties (modern)
'Max Touch Points': nav.maxTouchPoints, // Useful for detecting touch devices
'Hardware Concurrency': nav.hardwareConcurrency, // Number of logical processor cores
};
// --- Format the information for display ---
let displayString = '';
for (const [key, value] of Object.entries(deviceInfo)) {
displayString += `${key}: ${value}\n`;
}
// --- Display the information on the screen ---
document.getElementById('info-display').textContent = displayString;
});
</script>
</body>
</html>