196 lines
8.3 KiB
HTML
196 lines
8.3 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Dynamic Glassmorphism Tile Panel</title>
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
<style>
|
||
.glass {
|
||
background: rgba(31, 41, 55, 0.2);
|
||
backdrop-filter: blur(10px);
|
||
-webkit-backdrop-filter: blur(10px);
|
||
border: 1px solid rgba(147, 51, 234, 0.3);
|
||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.glass:hover {
|
||
background: rgba(147, 51, 234, 0.2);
|
||
border-color: rgba(147, 51, 234, 0.7);
|
||
box-shadow: 0 6px 12px rgba(147, 51, 234, 0.3);
|
||
}
|
||
|
||
.glass_enabled {
|
||
background: rgba(30, 240, 135, 0.2);
|
||
border-color: rgba(51, 234, 127, 0.7);
|
||
box-shadow: 0 6px 12px rgba(30, 240, 135, 0.3);
|
||
}
|
||
|
||
.gauge {
|
||
width: 64px;
|
||
height: 64px;
|
||
background: conic-gradient(#a758f1 0deg, #7f0bfa var(--value), #4b5563 0);
|
||
box-shadow: 0 6px 12px rgba(147, 51, 234, 0.3);
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
position: relative;
|
||
}
|
||
|
||
.gauge::before {
|
||
content: '';
|
||
width: 48px;
|
||
height: 48px;
|
||
background: rgba(31, 41, 55, 0.9);
|
||
border-radius: 50%;
|
||
position: absolute;
|
||
}
|
||
|
||
.gauge span {
|
||
color: #d8b4fe;
|
||
font-size: 12px;
|
||
font-weight: bold;
|
||
z-index: 1;
|
||
}
|
||
|
||
.clock,
|
||
.number {
|
||
font-size: 3rem;
|
||
color: #d8b4fe;
|
||
font-weight: bold;
|
||
}
|
||
|
||
input[type="range"] {
|
||
accent-color: #9333ea;
|
||
box-shadow: 0 6px 12px rgba(147, 51, 234, 0.3);
|
||
}
|
||
|
||
.tile-content {
|
||
min-height: 12rem;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
padding: 1rem;
|
||
}
|
||
|
||
.gauge-tile-content {
|
||
justify-content: flex-start;
|
||
align-items: flex-start;
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body class="bg-gray-900 min-h-screen p-4" >
|
||
<div class="container mx-auto">
|
||
<div id="tileContainer" class="flex flex-wrap gap-4"></div>
|
||
</div>
|
||
<script>
|
||
const tiles = [
|
||
{ id: 6, type: "clock" },
|
||
|
||
{ id: 2, type: "gauge", gauges: [{ value: 3.60 * 10, label: "Загрузка CPU" }, { value: 3.60 * 80, label: "Занято RAM" }] },
|
||
|
||
{ id: 10, type: "number", value: 250, label: "Скорость сети" },
|
||
{ id: 7, type: "slider", label: "Настройки", sliders: [{ value: 50, label: "Яроксть экрана", action: "screen.chenge_brightness" }, { value: 75, label: "Громкость звука", action: "media.set_volume" }] },
|
||
|
||
{ id: 10, type: "break" },
|
||
|
||
{ id: 3, type: "image", imageUrl: "/static/icons/steam-svgrepo-com.svg", label: "Steam" },
|
||
{ id: 4, type: "image", imageUrl: "/static/icons/telegram-logo-svgrepo-com.svg", label: "Telegram" },
|
||
{ id: 5, type: "image", imageUrl: "/static/icons/cloud.png", label: "Cloud" },
|
||
|
||
|
||
{ id: 8, type: "image", imageUrl: "/static/icons/vpn.png", label: "VPN", enabled: true },
|
||
|
||
|
||
];
|
||
|
||
function createTile(tile) {
|
||
const tileDiv = document.createElement("div");
|
||
if (tile.type == "break") {
|
||
tileDiv.className = "basis-full";
|
||
document.getElementById("tileContainer").appendChild(tileDiv);
|
||
return;
|
||
}
|
||
tileDiv.id = "tile_"+tile.id;
|
||
tileDiv.className = `glass ${tile.enabled ? "glass_enabled" : ""} rounded-lg ${tile.type === "gauge" || tile.type === "slider" || tile.type === "clock" ? "w-96 h-48" : "w-48 h-48"} ${tile.type === "image" || tile.type === "text" ? "cursor-pointer" : ""}`;
|
||
const contentDiv = document.createElement("div");
|
||
contentDiv.className = `tile-content ${tile.type === "gauge" ? "gauge-tile-content" : ""}`;
|
||
|
||
switch (tile.type) {
|
||
case "text":
|
||
contentDiv.innerHTML = `<span class="text-purple-400 text-lg font-semibold">${tile.label}</span>`;
|
||
break;
|
||
case "image":
|
||
contentDiv.innerHTML = `<img src="${tile.imageUrl}" class="rounded-lg w-[6.3rem] h-[6.3rem] object-cover" alt="${tile.label}"><span class="mt-2 text-purple-400 text-lg font-semibold">${tile.label}</span>`;
|
||
break;
|
||
case "clock":
|
||
contentDiv.innerHTML = `<span id="clock-${tile.id}" class="clock"></span><span id="date-${tile.id}" class="text-purple-400 text-lg font-semibold"></span>`;
|
||
break;
|
||
case "gauge":
|
||
const gaugeContent = tile.gauges.map(g => `
|
||
<div class="flex items-center gap-4">
|
||
<div class="gauge" style="--value: ${g.value}deg;">
|
||
<span>${Math.round((g.value / 360) * 100)}%</span>
|
||
</div>
|
||
<span class="text-purple-400 text-lg font-semibold">${g.label}</span>
|
||
</div>
|
||
`).join("");
|
||
contentDiv.innerHTML = `<div class="flex flex-col gap-4">${gaugeContent}</div>`;
|
||
break;
|
||
case "slider":
|
||
const sliderContent = tile.sliders.map((s, index) => `
|
||
<div class="flex flex-col items-start">
|
||
<div class="flex items-center gap-2">
|
||
<span class="text-purple-400 text-sm font-semibold">${s.label}</span>
|
||
<span id="slider-value-${tile.id}-${index}" class="text-purple-300 text-sm font-normal">${s.value}</span>
|
||
</div>
|
||
<input type="range" min="0" max="100" value="${s.value}" class="w-full" data-tile-id="${tile.id}" data-slider-index="${index}">
|
||
</div>
|
||
`).join("");
|
||
contentDiv.innerHTML = `<span class="text-purple-400 text-lg font-semibold mb-2">${tile.label}</span><div class="flex flex-col w-full gap-4">${sliderContent}</div>`;
|
||
break;
|
||
case "number":
|
||
contentDiv.innerHTML = `<span class="number">${tile.value}</span><span class="text-purple-400 text-lg font-semibold">${tile.label}</span>`;
|
||
break;
|
||
}
|
||
|
||
tileDiv.appendChild(contentDiv);
|
||
document.getElementById("tileContainer").appendChild(tileDiv);
|
||
|
||
if (tile.type === "clock") {
|
||
function updateClock() {
|
||
const now = new Date();
|
||
const time = now.toLocaleTimeString('ru-RU', { hour12: false });
|
||
const options = { weekday: 'short', day: 'numeric', month: 'long', year: 'numeric' };
|
||
const date = now.toLocaleDateString('ru-RU', options)
|
||
.replace(/,/, '')
|
||
.replace(/(\d+)\s(\S+)/, '$1 $2')
|
||
.replace(/г\./, '');
|
||
document.getElementById(`clock-${tile.id}`).textContent = time;
|
||
document.getElementById(`date-${tile.id}`).textContent = date.charAt(0).toUpperCase() + date.slice(1);
|
||
}
|
||
updateClock();
|
||
setInterval(updateClock, 1000);
|
||
}
|
||
|
||
if (tile.type === "slider") {
|
||
tile.sliders.forEach((_, index) => {
|
||
const slider = contentDiv.querySelector(`input[data-tile-id="${tile.id}"][data-slider-index="${index}"]`);
|
||
const valueSpan = document.getElementById(`slider-value-${tile.id}-${index}`);
|
||
slider.addEventListener("input", (e) => {
|
||
valueSpan.textContent = e.target.value;
|
||
});
|
||
});
|
||
}
|
||
}
|
||
|
||
tiles.forEach(createTile);
|
||
</script>
|
||
</body>
|
||
|
||
</html> |