<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
<div class="container">
<div class="header">
<div class="header-icon">
<ion-icon name="hardware-chip-outline"></ion-icon>
</div>
<h1>Device Information</h1>
<p class="subtitle">Complete details about your device and browser</p>
</div>
<div class="grid">
<div class="card">
<div class="card-header">
<div class="card-icon">
<ion-icon name="phone-portrait-outline"></ion-icon>
</div>
<h2 class="card-title">Device Details</h2>
</div>
<div class="info-item">
<span class="info-label">
<ion-icon name="laptop-outline"></ion-icon>
Platform
</span>
<span class="info-value" id="platform">-</span>
</div>
<div class="info-item">
<span class="info-label">
<ion-icon name="settings-outline"></ion-icon>
OS
</span>
<span class="info-value" id="os">-</span>
</div>
<div class="info-item">
<span class="info-label">
<ion-icon name="cube-outline"></ion-icon>
Architecture
</span>
<span class="info-value" id="arch">-</span>
</div>
<div class="info-item">
<span class="info-label">
<ion-icon name="phone-portrait-outline"></ion-icon>
Device Type
</span>
<span class="info-value" id="deviceType">-</span>
</div>
</div>
<div class="card">
<div class="card-header">
<div class="card-icon">
<ion-icon name="globe-outline"></ion-icon>
</div>
<h2 class="card-title">Browser Info</h2>
</div>
<div class="info-item">
<span class="info-label">
<ion-icon name="browsers-outline"></ion-icon>
Browser
</span>
<span class="info-value" id="browser">-</span>
</div>
<div class="info-item">
<span class="info-label">
<ion-icon name="code-outline"></ion-icon>
Version
</span>
<span class="info-value" id="browserVersion">-</span>
</div>
<div class="info-item">
<span class="info-label">
<ion-icon name="language-outline"></ion-icon>
Language
</span>
<span class="info-value" id="language">-</span>
</div>
<div class="info-item">
<span class="info-label">
<ion-icon name="wifi-outline"></ion-icon>
Online Status
</span>
<span class="info-value">
<span class="badge online" id="onlineStatus">
<ion-icon name="checkmark-circle"></ion-icon>
Online
</span>
</span>
</div>
</div>
<div class="card">
<div class="card-header">
<div class="card-icon">
<ion-icon name="desktop-outline"></ion-icon>
</div>
<h2 class="card-title">Screen Info</h2>
</div>
<div class="info-item">
<span class="info-label">
<ion-icon name="resize-outline"></ion-icon>
Resolution
</span>
<span class="info-value" id="screenResolution">-</span>
</div>
<div class="info-item">
<span class="info-label">
<ion-icon name="expand-outline"></ion-icon>
Available Size
</span>
<span class="info-value" id="availableSize">-</span>
</div>
<div class="info-item">
<span class="info-label">
<ion-icon name="color-palette-outline"></ion-icon>
Color Depth
</span>
<span class="info-value" id="colorDepth">-</span>
</div>
<div class="info-item">
<span class="info-label">
<ion-icon name="contrast-outline"></ion-icon>
Pixel Ratio
</span>
<span class="info-value" id="pixelRatio">-</span>
</div>
</div>
<div class="card">
<div class="card-header">
<div class="card-icon">
<ion-icon name="location-outline"></ion-icon>
</div>
<h2 class="card-title">Network & Location</h2>
</div>
<div class="info-item">
<span class="info-label">
<ion-icon name="finger-print-outline"></ion-icon>
IP Address
</span>
<span class="info-value" id="ipAddress">Loading...</span>
</div>
<div class="info-item">
<span class="info-label">
<ion-icon name="earth-outline"></ion-icon>
Timezone
</span>
<span class="info-value" id="timezone">-</span>
</div>
<div class="info-item">
<span class="info-label">
<ion-icon name="time-outline"></ion-icon>
Local Time
</span>
<span class="info-value" id="localTime">-</span>
</div>
<div class="info-item">
<span class="info-label">
<ion-icon name="battery-charging-outline"></ion-icon>
Battery
</span>
<span class="info-value" id="battery">-</span>
</div>
</div>
<div class="card full-width-card">
<div class="card-header">
<div class="card-icon">
<ion-icon name="stats-chart-outline"></ion-icon>
</div>
<h2 class="card-title">Performance & Features</h2>
</div>
<div class="stats-grid">
<div class="stat-box">
<div class="stat-value" id="cpuCores">-</div>
<div class="stat-label">CPU Cores</div>
</div>
<div class="stat-box">
<div class="stat-value" id="memory">-</div>
<div class="stat-label">Memory</div>
</div>
<div class="stat-box">
<div class="stat-value" id="touchSupport">-</div>
<div class="stat-label">Touch</div>
</div>
<div class="stat-box">
<div class="stat-value" id="cookiesEnabled">-</div>
<div class="stat-label">Cookies</div>
</div>
</div>
</div>
<div class="card full-width-card">
<div class="actions">
<button class="btn btn-primary" id="refreshBtn">
<ion-icon name="refresh-outline"></ion-icon>
Refresh Data
</button>
<button class="btn btn-secondary" id="copyBtn">
<ion-icon name="copy-outline"></ion-icon>
Copy All Info
</button>
<button class="btn btn-secondary" id="downloadBtn">
<ion-icon name="download-outline"></ion-icon>
Download Report
</button>
</div>
</div>
</div>
</div>
<div class="copy-notification" id="copyNotification">
<ion-icon name="checkmark-circle"></ion-icon>
<span>Information copied to clipboard!</span>
</div>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
background: linear-gradient(135deg, #0ea5e9 0%, #06b6d4 100%);
min-height: 100vh;
padding: 40px 20px;
}
.container {
max-width: 1000px;
margin: 0 auto;
}
.header {
text-align: center;
margin-bottom: 40px;
color: white;
}
.header-icon {
width: 80px;
height: 80px;
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
border: 2px solid rgba(255, 255, 255, 0.3);
}
.header-icon ion-icon {
font-size: 40px;
color: white;
}
h1 {
font-size: 36px;
margin-bottom: 12px;
text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
}
.subtitle {
font-size: 16px;
opacity: 0.9;
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
margin-bottom: 20px;
}
.card {
background: white;
border-radius: 16px;
padding: 24px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
transition: transform 0.3s, box-shadow 0.3s;
}
.card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 15px rgba(0,0,0,0.15);
}
.card-header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 20px;
padding-bottom: 16px;
border-bottom: 2px solid #e0f2fe;
}
.card-icon {
width: 48px;
height: 48px;
background: linear-gradient(135deg, #0ea5e9, #06b6d4);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
}
.card-icon ion-icon {
font-size: 24px;
color: white;
}
.card-title {
font-size: 18px;
font-weight: 600;
color: #0c4a6e;
}
.info-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 0;
border-bottom: 1px solid #f0f9ff;
}
.info-item:last-child {
border-bottom: none;
}
.info-label {
font-size: 14px;
color: #64748b;
font-weight: 500;
display: flex;
align-items: center;
gap: 8px;
}
.info-label ion-icon {
font-size: 16px;
color: #0ea5e9;
}
.info-value {
font-size: 14px;
color: #1e293b;
font-weight: 600;
text-align: right;
max-width: 60%;
word-break: break-word;
}
.badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
background: #e0f2fe;
color: #0369a1;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
}
.badge ion-icon {
font-size: 14px;
}
.badge.online {
background: #d1fae5;
color: #065f46;
}
.badge.mobile {
background: #fef3c7;
color: #92400e;
}
.actions {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.btn {
flex: 1;
min-width: 150px;
padding: 14px 20px;
border: none;
border-radius: 10px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.btn-primary {
background: linear-gradient(135deg, #0ea5e9, #06b6d4);
color: white;
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 6px 15px rgba(14, 165, 233, 0.4);
}
.btn-secondary {
background: white;
color: #0369a1;
border: 2px solid #0ea5e9;
}
.btn-secondary:hover {
background: #f0f9ff;
}
.full-width-card {
grid-column: 1 / -1;
}
.location-map {
width: 100%;
height: 200px;
background: #f0f9ff;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
margin-top: 16px;
color: #64748b;
font-size: 14px;
}
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 16px;
margin-top: 16px;
}
.stat-box {
text-align: center;
padding: 16px;
background: #f0f9ff;
border-radius: 10px;
}
.stat-value {
font-size: 24px;
font-weight: 700;
color: #0369a1;
margin-bottom: 4px;
}
.stat-label {
font-size: 12px;
color: #64748b;
text-transform: uppercase;
font-weight: 600;
}
.copy-notification {
position: fixed;
top: 20px;
right: 20px;
background: white;
padding: 16px 24px;
border-radius: 10px;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
display: flex;
align-items: center;
gap: 12px;
transform: translateX(400px);
transition: transform 0.3s;
z-index: 1000;
}
.copy-notification.show {
transform: translateX(0);
}
.copy-notification ion-icon {
font-size: 24px;
color: #10b981;
}
@media (max-width: 768px) {
.grid {
grid-template-columns: 1fr;
}
h1 {
font-size: 28px;
}
.btn {
min-width: 100%;
}
}
let deviceInfo = {};
function getBrowserInfo() {
const ua = navigator.userAgent;
let browser = 'Unknown';
let version = 'Unknown';
if (ua.indexOf('Firefox') > -1) {
browser = 'Firefox';
version = ua.match(/Firefox\/([0-9.]+)/)[1];
} else if (ua.indexOf('Chrome') > -1) {
browser = 'Chrome';
version = ua.match(/Chrome\/([0-9.]+)/)[1];
} else if (ua.indexOf('Safari') > -1) {
browser = 'Safari';
version = ua.match(/Version\/([0-9.]+)/)?.[1] || 'Unknown';
} else if (ua.indexOf('Edge') > -1) {
browser = 'Edge';
version = ua.match(/Edge\/([0-9.]+)/)[1];
}
return { browser, version };
}
function getDeviceType() {
const ua = navigator.userAgent;
if (/(tablet|ipad|playbook|silk)|(android(?!.*mobi))/i.test(ua)) {
return 'Tablet';
}
if (/Mobile|Android|iP(hone|od)|IEMobile|BlackBerry|Kindle|Silk-Accelerated|(hpw|web)OS|Opera M(obi|ini)/.test(ua)) {
return 'Mobile';
}
return 'Desktop';
}
function updateTime() {
const now = new Date();
document.getElementById('localTime').textContent = now.toLocaleTimeString();
}
async function getBatteryInfo() {
if ('getBattery' in navigator) {
try {
const battery = await navigator.getBattery();
const level = Math.floor(battery.level * 100);
const charging = battery.charging ? ' (Charging)' : '';
return `${level}%${charging}`;
} catch (e) {
return 'Not available';
}
}
return 'Not supported';
}
async function getIPAddress() {
try {
const response = await fetch('https://api.ipify.org?format=json');
const data = await response.json();
return data.ip;
} catch (e) {
return 'Unable to fetch';
}
}
async function loadDeviceInfo() {
const { browser, version } = getBrowserInfo();
const battery = await getBatteryInfo();
const ip = await getIPAddress();
deviceInfo = {
platform: navigator.platform,
os: navigator.userAgentData?.platform || navigator.platform,
arch: navigator.userAgentData?.architecture || 'Not available',
deviceType: getDeviceType(),
browser: browser,
browserVersion: version,
language: navigator.language,
screenResolution: `${screen.width} × ${screen.height}`,
availableSize: `${screen.availWidth} × ${screen.availHeight}`,
colorDepth: `${screen.colorDepth}-bit`,
pixelRatio: `${window.devicePixelRatio}x`,
ipAddress: ip,
timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
cpuCores: navigator.hardwareConcurrency || 'N/A',
memory: navigator.deviceMemory ? `${navigator.deviceMemory} GB` : 'N/A',
touchSupport: navigator.maxTouchPoints > 0 ? 'Yes' : 'No',
cookiesEnabled: navigator.cookieEnabled ? 'Yes' : 'No',
battery: battery
};
// Update UI
document.getElementById('platform').textContent = deviceInfo.platform;
document.getElementById('os').textContent = deviceInfo.os;
document.getElementById('arch').textContent = deviceInfo.arch;
document.getElementById('deviceType').textContent = deviceInfo.deviceType;
document.getElementById('browser').textContent = deviceInfo.browser;
document.getElementById('browserVersion').textContent = deviceInfo.browserVersion;
document.getElementById('language').textContent = deviceInfo.language;
document.getElementById('screenResolution').textContent = deviceInfo.screenResolution;
document.getElementById('availableSize').textContent = deviceInfo.availableSize;
document.getElementById('colorDepth').textContent = deviceInfo.colorDepth;
document.getElementById('pixelRatio').textContent = deviceInfo.pixelRatio;
document.getElementById('ipAddress').textContent = deviceInfo.ipAddress;
document.getElementById('timezone').textContent = deviceInfo.timezone;
document.getElementById('cpuCores').textContent = deviceInfo.cpuCores;
document.getElementById('memory').textContent = deviceInfo.memory;
document.getElementById('touchSupport').textContent = deviceInfo.touchSupport;
document.getElementById('cookiesEnabled').textContent = deviceInfo.cookiesEnabled;
document.getElementById('battery').textContent = deviceInfo.battery;
updateTime();
}
// Online status
function updateOnlineStatus() {
const statusEl = document.getElementById('onlineStatus');
if (navigator.onLine) {
statusEl.innerHTML = '<ion-icon name="checkmark-circle"></ion-icon> Online';
statusEl.className = 'badge online';
} else {
statusEl.innerHTML = '<ion-icon name="close-circle"></ion-icon> Offline';
statusEl.className = 'badge';
}
}
window.addEventListener('online', updateOnlineStatus);
window.addEventListener('offline', updateOnlineStatus);
// Copy functionality
document.getElementById('copyBtn').addEventListener('click', () => {
const text = Object.entries(deviceInfo)
.map(([key, value]) => `${key}: ${value}`)
.join('\n');
navigator.clipboard.writeText(text).then(() => {
const notification = document.getElementById('copyNotification');
notification.classList.add('show');
setTimeout(() => {
notification.classList.remove('show');
}, 3000);
});
});
// Download functionality
document.getElementById('downloadBtn').addEventListener('click', () => {
const text = Object.entries(deviceInfo)
.map(([key, value]) => `${key}: ${value}`)
.join('\n');
const blob = new Blob([text], { type: 'text/plain' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'device-info.txt';
a.click();
URL.revokeObjectURL(url);
});
// Refresh functionality
document.getElementById('refreshBtn').addEventListener('click', () => {
loadDeviceInfo();
});
// Initialize
loadDeviceInfo();
setInterval(updateTime, 1000);
No comments yet. Be the first!