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.
Here is an example of JavaScript code that can be used to disable the right-click context menu on both smartphones and desktop devices. This script prevents users from accessing the context menu that includes options like "View Page Source":
You can include this JavaScript code in your HTML document within a
Please keep in mind that while this script can prevent the context menu from appearing, it is not a foolproof method to protect your website's source code. Users can still access the source code through browser developer tools. For more robust protection, consider implementing additional security measures as mentioned earlier.
// Disable right-click context menu on both desktop and mobile devices
document.addEventListener('contextmenu', function(event) {
event.preventDefault();
});
// Disable touch and hold context menu on mobile devices
document.addEventListener('touchstart', function(event) {
event.preventDefault();
});
You can include this JavaScript code in your HTML document within a
<script> tag or in an external JavaScript file linked to your webpage. When a user tries to right-click on the webpage or touch and hold on mobile devices, the context menu will be prevented from appearing.Please keep in mind that while this script can prevent the context menu from appearing, it is not a foolproof method to protect your website's source code. Users can still access the source code through browser developer tools. For more robust protection, consider implementing additional security measures as mentioned earlier.
index.html
1.5 KB
Device mockups realistic used https://devicescss.xyz/