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/
<section class="bg-white dark:bg-gray-900">
<div class="py-8 px-4 mx-auto max-w-screen-xl lg:py-16 lg:px-6">
<div class="mx-auto max-w-screen-md text-center mb-8 lg:mb-12">
<h2 class="mb-4 text-3xl tracking-tight font-extrabold text-gray-900 dark:text-white">Our Pricing</h2>
<p class="mb-5 font-light text-gray-500 sm:text-xl dark:text-gray-400">Choose the plan that fits your needs. We offer simple, transparent pricing for everyone.</p>
</div>
<div class="space-y-8 lg:grid lg:grid-cols-3 sm:gap-6 xl:gap-10 lg:space-y-0">
<!-- Pricing Plan 1 -->
<div class="flex flex-col p-6 mx-auto max-w-lg text-center text-gray-900 bg-white rounded-lg border border-gray-100 shadow dark:border-gray-600 xl:p-8 dark:bg-gray-800 dark:text-white">
<h3 class="mb-4 text-2xl font-semibold">Starter</h3>
<p class="font-light text-gray-500 sm:text-lg dark:text-gray-400">Best option for personal use & for your next project.</p>
<div class="flex justify-center items-baseline my-8">
<span class="mr-2 text-5xl font-extrabold">$29</span>
<span class="text-gray-500 dark:text-gray-400">/month</span>
</div>
<!-- List -->
<ul class="mb-8 space-y-4 text-left">
<li class="flex items-center space-x-3">
<svg class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.707a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
<span>Individual configuration</span>
</li>
<li class="flex items-center space-x-3">
<svg class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.707a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
<span>No setup, or hidden fees</span>
</li>
<li class="flex items-center space-x-3">
<svg class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.707a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
<span>Team size: <span class="font-semibold">1 developer</span></span>
</li>
<li class="flex items-center space-x-3">
<svg class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.707a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
<span>Premium support: <span class="font-semibold">6 months</span></span>
</li>
</ul>
<button class="text-white bg-blue-600 hover:bg-blue-700 focus:ring-4 focus:ring-blue-200 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:focus:ring-blue-900">Get started</button>
</div>
<!-- Add more pricing plans similarly -->
</div>
</div>
</section>
👎1