Embedded Files
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>frosted clock hehe</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
:root {
--dm-sans: 'DM Sans', sans-serif;
}
body {
font-family: var(--dm-sans);
}
</style>
</head>
<body>
<div id="widget" class="bg-white/10 backdrop-blur-lg p-8 rounded-3xl shadow-2xl text-black max-w-sm w-full mx-auto">
<div id="clock" class="text-center text-4xl font-bold"></div>
<div id="date" class="text-center mt-2 text-xl font-medium"></div>
<div id="battery" class="mt-4 text-2xl font-bold flex items-center justify-center space-x-2">
<span id="battery-icon" class="fas"></span>
<span id="battery-level">--%</span>
</div>
</div>
<script>
function updateClock() {
const now = new Date();
document.getElementById("clock").textContent = now.toLocaleTimeString([], {
hour: '2-digit',
minute: '2-digit',
second: '2-digit'
});
document.getElementById("date").textContent = now.toLocaleDateString(undefined, {
weekday: 'long',
year: 'numeric',
month: 'long',
day: 'numeric'
});
}
function updateBattery() {
if ('getBattery' in navigator) {
navigator.getBattery().then(function (battery) {
const level = Math.round(battery.level * 100);
const iconEl = document.getElementById("battery-icon");
const levelEl = document.getElementById("battery-level");
let className = 'fas';
let colorClass = '';
if (level <= 10) {
className += ' fa-battery-empty';
colorClass = 'text-red-500';
} else if (level <= 30) {
className += ' fa-battery-quarter';
colorClass = 'text-yellow-500';
} else if (level <= 60) {
className += ' fa-battery-half';
colorClass = 'text-green-500';
} else if (level <= 90) {
className += ' fa-battery-three-quarters';
colorClass = 'text-green-500';
} else {
className += ' fa-battery-full';
colorClass = 'text-green-500';
}
iconEl.className = `${className} ${colorClass}`;
levelEl.textContent = `${level}%`;
});
} else {
document.getElementById("battery-icon").className = 'fas fa-exclamation-triangle';
document.getElementById("battery-level").textContent = 'N/A';
}
}
updateClock();
updateBattery();
setInterval(updateClock, 1000);
setInterval(updateBattery, 60000);
</script>
</body>
</html>
Google Sites
Report abuse