francesco/cloudflare-ddns-updater
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix graphics

Browse Source
This commit is contained in:
Francesco Picone
2025-12-29 12:44:48 +01:00
parent fad3035b45
commit c74867f22a
2 changed files with 216 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

159
ui/templates/index.html
View File

@@ -1,42 +1,137 @@
<!DOCTYPE html>
<html>
<html lang="it">
<head>
<meta charset="utf-8">
<title>Cloudflare DDNS Status</title>
<meta http-equiv="refresh" content="{{ 60 }}">
<style>
body { background:#0f1115; color:#eee; font-family:sans-serif; padding:20px }
table { width:100%; border-collapse:collapse }
th, td { padding:10px; border-bottom:1px solid #333 }
.ok { color:#4caf50 }
.bad { color:#ff5252 }
</style>
<meta charset="UTF-8">
<title>Cloudflare DDNS Status</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* Stile generale */
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: #121212;
color: #e0e0e0;
margin: 0;
padding: 0;
}
header {
background: #1f1f1f;
padding: 20px;
text-align: center;
font-size: 1.7em;
font-weight: bold;
color: #00bcd4;
box-shadow: 0 2px 5px rgba(0,0,0,0.5);
}
main {
padding: 20px;
max-width: 1000px;
margin: auto;
}
table {
width: 100%;
border-collapse: separate;
border-spacing: 0 10px; /* Spazi tra le righe */
}
th {
background: #1f1f1f;
color: #00bcd4;
font-weight: bold;
text-transform: uppercase;
font-size: 0.9em;
text-align: center;
padding: 12px;
border-radius: 8px 8px 0 0;
}
td {
background: #1a1a1a;
text-align: center;
padding: 12px;
color: #e0e0e0;
border-radius: 8px;
transition: all 0.3s ease;
}
tr:hover td {
background: #272727;
transform: scale(1.02);
}
.badge {
display: inline-block;
padding: 5px 12px;
border-radius: 20px;
font-weight: bold;
font-size: 0.85em;
}
.ok {
background: linear-gradient(45deg, #4caf50, #81c784);
color: #fff;
}
.bad {
background: linear-gradient(45deg, #ff5252, #ff8a65);
color: #fff;
}
.time {
color: #9e9e9e;
font-size: 0.85em;
}
footer {
text-align: center;
padding: 15px;
font-size: 0.85em;
color: #777;
}
</style>
</head>
<body>
<h2>Cloudflare DDNS – Stato DNS</h2>
<header>Cloudflare DDNS – Stato DNS</header>
<table>
<tr>
<th>Record</th>
<th>DNS IP</th>
<th>IP Pubblico</th>
<th>Proxy</th>
<th>Stato</th>
</tr>
<main>
<table>
<thead>
<tr>
<th>Record</th>
<th>DNS IP</th>
<th>IP Pubblico</th>
<th>Proxy</th>
<th>Stato</th>
<th>Ultimo aggiornamento</th>
</tr>
</thead>
<tbody>
{% for r in records %}
<tr>
<td>{{ r.name }}</td>
<td>{{ r.dns_ip }}</td>
<td>{{ r.public_ip }}</td>
<td>{{ "ON" if r.proxied else "OFF" }}</td>
<td><span class="badge {{ 'ok' if r.status == 'OK' else 'bad' }}">{{ r.status }}</span></td>
<td class="time" data-timestamp="{{ r.last_updated }}">{{ r.last_updated_human }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</main>
{% for r in records %}
<tr>
<td align="center">{{ r.name }}</td>
<td align="center">{{ r.dns_ip }}</td>
<td align="center">{{ r.public_ip }}</td>
<td align="center">{{ "ON" if r.proxied else "OFF" }}</td>
<td align="center" class="{{ 'ok' if r.status == 'OK' else 'bad' }}">
{{ r.status }}
</td>
</tr>
{% endfor %}
</table>
<footer>
Visualizzazione aggiornata ogni 60 secondi
</footer>
<script>
function timeAgo(date) {
const seconds = Math.floor((new Date() - new Date(date)) / 1000);
let interval = Math.floor(seconds / 86400);
if (interval >= 1) return interval + " giorni fa";
interval = Math.floor(seconds / 3600);
if (interval >= 1) return interval + " ore fa";
interval = Math.floor(seconds / 60);
if (interval >= 1) return interval + " minuti fa";
return "pochi secondi fa";
}
document.querySelectorAll('.time').forEach(td => {
td.textContent = timeAgo(td.dataset.timestamp);
});
</script>
</body>
</html>