first commit
This commit is contained in:
MoonDev
BIN
static/icons/cloud.png
Normal file
BIN
static/icons/cloud.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 37 KiB |
16
static/icons/steam-svgrepo-com.svg
Normal file
16
static/icons/steam-svgrepo-com.svg
Normal file
@@ -0,0 +1,16 @@
|
||||
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
|
||||
<svg width="800px" height="800px" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M2.56967 20.0269C4.30041 25.7964 9.65423 30 15.9906 30C23.7274 30 29.9995 23.7318 29.9995 16C29.9995 8.26803 23.7274 2 15.9906 2C8.56634 2 2.49151 7.77172 2.01172 15.0699C2.01172 17.1667 2.01172 18.0417 2.56967 20.0269Z" fill="url(#paint0_linear_87_8314)"/>
|
||||
<path d="M15.2706 12.5629L11.8426 17.5395C11.0345 17.5028 10.221 17.7314 9.54572 18.1752L2.01829 15.0784C2.01829 15.0784 1.84411 17.9421 2.56999 20.0763L7.89147 22.2707C8.15866 23.464 8.97779 24.5107 10.1863 25.0142C12.1635 25.8398 14.4433 24.8988 15.2658 22.922C15.4799 22.4052 15.5797 21.8633 15.5652 21.3225L20.5904 17.8219C23.5257 17.8219 25.9114 15.4305 25.9114 12.4937C25.9114 9.55673 23.5257 7.16748 20.5904 7.16748C17.7553 7.16748 15.1117 9.64126 15.2706 12.5629ZM14.4469 22.5783C13.8103 24.1057 12.054 24.8303 10.5273 24.1946C9.82302 23.9014 9.29128 23.3642 8.98452 22.7237L10.7167 23.4411C11.8426 23.9098 13.1343 23.3762 13.6023 22.2514C14.0718 21.1254 13.5392 19.8324 12.4139 19.3637L10.6233 18.6222C11.3142 18.3603 12.0997 18.3507 12.8336 18.6559C13.5734 18.9635 14.1475 19.5428 14.4517 20.283C14.756 21.0233 14.7548 21.8404 14.4469 22.5783ZM20.5904 16.0434C18.6364 16.0434 17.0455 14.4511 17.0455 12.4937C17.0455 10.5379 18.6364 8.94518 20.5904 8.94518C22.5457 8.94518 24.1365 10.5379 24.1365 12.4937C24.1365 14.4511 22.5457 16.0434 20.5904 16.0434ZM17.9341 12.4883C17.9341 11.0159 19.127 9.82159 20.5964 9.82159C22.0671 9.82159 23.2599 11.0159 23.2599 12.4883C23.2599 13.9609 22.0671 15.1541 20.5964 15.1541C19.127 15.1541 17.9341 13.9609 17.9341 12.4883Z" fill="white"/>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_87_8314" x1="16.0056" y1="2" x2="16.0056" y2="30" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#111D2E"/>
|
||||
<stop offset="0.21248" stop-color="#051839"/>
|
||||
<stop offset="0.40695" stop-color="#0A1B48"/>
|
||||
<stop offset="0.5811" stop-color="#132E62"/>
|
||||
<stop offset="0.7376" stop-color="#144B7E"/>
|
||||
<stop offset="0.87279" stop-color="#136497"/>
|
||||
<stop offset="1" stop-color="#1387B8"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.2 KiB |
2
static/icons/telegram-logo-svgrepo-com.svg
Normal file
2
static/icons/telegram-logo-svgrepo-com.svg
Normal file
@@ -0,0 +1,2 @@
|
||||
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
|
||||
<svg width="800px" height="800px" viewBox="0 0 240 240" id="svg2" xmlns="http://www.w3.org/2000/svg"><style>.st0{fill:url(#path2995-1-0_1_)}.st1{fill:#c8daea}.st2{fill:#a9c9dd}.st3{fill:url(#path2991_1_)}</style><linearGradient id="path2995-1-0_1_" gradientUnits="userSpaceOnUse" x1="-683.305" y1="534.845" x2="-693.305" y2="511.512" gradientTransform="matrix(6 0 0 -6 4255 3247)"><stop offset="0" stop-color="#37aee2"/><stop offset="1" stop-color="#1e96c8"/></linearGradient><path id="path2995-1-0" class="st0" d="M240 120c0 66.3-53.7 120-120 120S0 186.3 0 120 53.7 0 120 0s120 53.7 120 120z"/><path id="path2993" class="st1" d="M98 175c-3.9 0-3.2-1.5-4.6-5.2L82 132.2 152.8 88l8.3 2.2-6.9 18.8L98 175z"/><path id="path2989" class="st2" d="M98 175c3 0 4.3-1.4 6-3 2.6-2.5 36-35 36-35l-20.5-5-19 12-2.5 30v1z"/><linearGradient id="path2991_1_" gradientUnits="userSpaceOnUse" x1="128.991" y1="118.245" x2="153.991" y2="78.245" gradientTransform="matrix(1 0 0 -1 0 242)"><stop offset="0" stop-color="#eff7fc"/><stop offset="1" stop-color="#ffffff"/></linearGradient><path id="path2991" class="st3" d="M100 144.4l48.4 35.7c5.5 3 9.5 1.5 10.9-5.1L179 82.2c2-8.1-3.1-11.7-8.4-9.3L55 117.5c-7.9 3.2-7.8 7.6-1.4 9.5l29.7 9.3L152 93c3.2-2 6.2-.9 3.8 1.3L100 144.4z"/></svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
BIN
static/icons/vpn.png
Normal file
BIN
static/icons/vpn.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.6 KiB |
196
static/index.html
Normal file
196
static/index.html
Normal file
@@ -0,0 +1,196 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user