Update index.html

index.html

@@ -1,19 +1,100 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
+<!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>