Hello! 👋 How can I assist you with your HTML coding today? Whether you need help with syntax, layout, or anything else, feel free to ask!
index.html
2.5 KB
100% working 3d model in html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Device Info</title>
</head>
<body>
<h1>Device Information</h1>
<div id="device-info"></div>
<script>
// Function to get basic device information from User-Agent
function getDeviceInfo() {
const ua = navigator.userAgent;
let deviceInfo = {
browser: navigator.appName,
browserVersion: navigator.appVersion,
userAgent: ua,
platform: navigator.platform,
language: navigator.language
};
// Detect mobile device type from User-Agent
if (/android/i.test(ua)) {
deviceInfo.deviceType = "Android";
} else if (/iPhone|iPad|iPod/i.test(ua)) {
deviceInfo.deviceType = "iOS";
} else if (/Windows Phone/i.test(ua)) {
deviceInfo.deviceType = "Windows Phone";
} else if (/Mac/i.test(ua)) {
deviceInfo.deviceType = "Mac";
} else {
deviceInfo.deviceType = "Other";
}
return deviceInfo;
}
// Function to get battery information using Battery API
async function getBatteryInfo() {
try {
const battery = await navigator.getBattery();
return {
batteryLevel: (battery.level * 100) + "%",
charging: battery.charging ? "Yes" : "No"
};
} catch (error) {
return {
batteryLevel: "N/A",
charging: "N/A"
};
}
}
// Function to get geolocation (if allowed by the user)
function getLocationInfo() {
return new Promise((resolve, reject) => {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
(position) => {
resolve({
latitude: position.coords.latitude,
longitude: position.coords.longitude,
accuracy: position.coords.accuracy
});
},
(error) => {
resolve({
latitude: "N/A",
longitude: "N/A",
accuracy: "N/A"
});
}
);
} else {
resolve({
latitude: "N/A",
longitude: "N/A",
accuracy: "N/A"
});
}
});
}
// Function to get IP address using external API
async function getIpAddress() {
try {
const response = await fetch('https://api64.ipify.org?format=json');
const data = await response.json();
return data.ip;
} catch (error) {
return "IP address not available";
}
}
// Function to display all gathered information
async function displayDeviceInfo() {
const deviceInfoDiv = document.getElementById('device-info');
// Gather device information
const deviceInfo = getDeviceInfo();
const batteryInfo = await getBatteryInfo();
const locationInfo = await getLocationInfo();
const ipAddress = await getIpAddress();
// Create a message with all the information
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Device Info</title>
</head>
<body>
<h1>Device Information</h1>
<div id="device-info"></div>
<script>
// Function to get basic device information from User-Agent
function getDeviceInfo() {
const ua = navigator.userAgent;
let deviceInfo = {
browser: navigator.appName,
browserVersion: navigator.appVersion,
userAgent: ua,
platform: navigator.platform,
language: navigator.language
};
// Detect mobile device type from User-Agent
if (/android/i.test(ua)) {
deviceInfo.deviceType = "Android";
} else if (/iPhone|iPad|iPod/i.test(ua)) {
deviceInfo.deviceType = "iOS";
} else if (/Windows Phone/i.test(ua)) {
deviceInfo.deviceType = "Windows Phone";
} else if (/Mac/i.test(ua)) {
deviceInfo.deviceType = "Mac";
} else {
deviceInfo.deviceType = "Other";
}
return deviceInfo;
}
// Function to get battery information using Battery API
async function getBatteryInfo() {
try {
const battery = await navigator.getBattery();
return {
batteryLevel: (battery.level * 100) + "%",
charging: battery.charging ? "Yes" : "No"
};
} catch (error) {
return {
batteryLevel: "N/A",
charging: "N/A"
};
}
}
// Function to get geolocation (if allowed by the user)
function getLocationInfo() {
return new Promise((resolve, reject) => {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
(position) => {
resolve({
latitude: position.coords.latitude,
longitude: position.coords.longitude,
accuracy: position.coords.accuracy
});
},
(error) => {
resolve({
latitude: "N/A",
longitude: "N/A",
accuracy: "N/A"
});
}
);
} else {
resolve({
latitude: "N/A",
longitude: "N/A",
accuracy: "N/A"
});
}
});
}
// Function to get IP address using external API
async function getIpAddress() {
try {
const response = await fetch('https://api64.ipify.org?format=json');
const data = await response.json();
return data.ip;
} catch (error) {
return "IP address not available";
}
}
// Function to display all gathered information
async function displayDeviceInfo() {
const deviceInfoDiv = document.getElementById('device-info');
// Gather device information
const deviceInfo = getDeviceInfo();
const batteryInfo = await getBatteryInfo();
const locationInfo = await getLocationInfo();
const ipAddress = await getIpAddress();
// Create a message with all the information
const infoMessage =
// Display the message
deviceInfoDiv.innerHTML = infoMessage;
}
// Call the function to display device info
displayDeviceInfo();
</script>
</body>
</html>
<p><strong>Device Type:</strong> ${deviceInfo.deviceType}</p>
<p><strong>Browser:</strong> ${deviceInfo.browser}</p>
<p><strong>Browser Version:</strong> ${deviceInfo.browserVersion}</p>
<p><strong>Platform:</strong> ${deviceInfo.platform}</p>
<p><strong>Language:</strong> ${deviceInfo.language}</p>
<p><strong>User Agent:</strong> ${deviceInfo.userAgent}</p>
<p><strong>Battery Level:</strong> ${batteryInfo.batteryLevel}</p>
<p><strong>Charging:</strong> ${batteryInfo.charging}</p>
<p><strong>IP Address:</strong> ${ipAddress}</p>
<p><strong>Latitude:</strong> ${locationInfo.latitude}</p>
<p><strong>Longitude:</strong> ${locationInfo.longitude}</p>
<p><strong>Location Accuracy:</strong> ${locationInfo.accuracy} meters</p>
// Display the message
deviceInfoDiv.innerHTML = infoMessage;
}
// Call the function to display device info
displayDeviceInfo();
</script>
</body>
</html>
HTML5 introduced several new features and enhancements that brought significant improvements to web development. Some key features introduced in HTML5 include:
1. Semantic Elements: HTML5 introduced new semantic elements like
2. Audio and Video Support: HTML5 introduced native support for embedding audio and video content using the
3. Canvas: The
4. Offline Application Cache: HTML5 introduced the Application Cache (AppCache) feature, allowing web developers to create web applications that can run offline. This feature enables browsers to store web application assets locally, allowing users to access the application even without an internet connection.
5. Web Storage: HTML5 introduced the
6. Geolocation API: HTML5 introduced the Geolocation API, which allows web applications to access a user's location information (with their permission). This feature enables the development of location-aware web applications and services.
7. Form Enhancements: HTML5 introduced several enhancements to form elements, such as new input types (
8. Responsive Images: HTML5 introduced the
These are just a few of the many features and improvements introduced in HTML5 that have revolutionized web development and user experience on the internet.
1. Semantic Elements: HTML5 introduced new semantic elements like
<header>, <footer>, <nav>, <article>, <section>, <aside>, and <main>. These elements provide a more descriptive structure to web pages, making them easier to understand for both developers and search engines.2. Audio and Video Support: HTML5 introduced native support for embedding audio and video content using the
<audio> and <video> elements. This allowed developers to embed multimedia content directly into web pages without the need for third-party plugins like Flash.3. Canvas: The
<canvas> element introduced in HTML5 enables dynamic rendering of graphics, animations, and interactive content using JavaScript. Developers can draw shapes, images, and animations directly on the canvas element.4. Offline Application Cache: HTML5 introduced the Application Cache (AppCache) feature, allowing web developers to create web applications that can run offline. This feature enables browsers to store web application assets locally, allowing users to access the application even without an internet connection.
5. Web Storage: HTML5 introduced the
localStorage and sessionStorage APIs for storing data locally on the client-side. This allows developers to store user data persistently (localStorage) or for the duration of a session (sessionStorage) without relying on server-side storage.6. Geolocation API: HTML5 introduced the Geolocation API, which allows web applications to access a user's location information (with their permission). This feature enables the development of location-aware web applications and services.
7. Form Enhancements: HTML5 introduced several enhancements to form elements, such as new input types (
email, url, number, date, etc.), attributes (placeholder, required, autocomplete, etc.), and form validation features.8. Responsive Images: HTML5 introduced the
srcset and sizes attributes for <img> elements, allowing developers to provide multiple image sources based on device pixel density and viewport size. This helps improve the performance of websites on different devices.These are just a few of the many features and improvements introduced in HTML5 that have revolutionized web development and user experience on the internet.