mirror of
https://github.com/ChrispyBacon-dev/DockFlare.git
synced 2026-04-28 03:39:32 +00:00
status_page.html updates
This commit is contained in:
ChrispyBacon-dev
parent
f59c8fbd38
commit
b5ca0eb580
1 changed files with 109 additions and 32 deletions
|
|
@ -1,5 +1,5 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<html lang="en"> <!-- data-theme will be added by JS -->
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
|
@ -8,27 +8,52 @@
|
|||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@latest/css/pico.min.css">
|
||||
<title>Cloudflare Tunnel Manager</title>
|
||||
<style>
|
||||
/* Keep some custom styles */
|
||||
body { padding-top: 1rem; padding-bottom: 1rem; } /* Add some vertical padding */
|
||||
/* Basic layout adjustments */
|
||||
body { padding-top: 1rem; padding-bottom: 1rem; }
|
||||
h1, h2, h3 { margin-top: 1.5em; margin-bottom: 0.5em; }
|
||||
h1 { margin-top: 0; text-align: center; }
|
||||
article { margin-bottom: 1.5rem; } /* Add space between sections */
|
||||
td pre { margin: 0; white-space: pre-wrap; word-break: break-all; font-family: var(--pico-font-family-monospace); font-size: 0.9em; } /* Use Pico monospace font */
|
||||
article { margin-bottom: 1.5rem; }
|
||||
td pre { margin: 0; white-space: pre-wrap; word-break: break-all; font-family: var(--pico-font-family-monospace); font-size: 0.9em; }
|
||||
|
||||
/* Status-specific colors (adjust Pico variables if preferred later) */
|
||||
.status-box { padding: 1rem 1.25rem; border: 1px solid var(--pico-card-border-color); border-radius: var(--pico-card-border-radius); margin-top: 1rem; word-wrap: break-word; }
|
||||
.error { background-color: #ffebeb; border-color: #ffc2c2; color: #a00; }
|
||||
.success { background-color: #e6ffed; border-color: #c3e6cb; color: #155724; }
|
||||
.info { background-color: #e7f3fe; border-color: #b8daff; color: #004085; }
|
||||
.warning { background-color: #fff3cd; border-color: #ffeeba; color: #856404; }
|
||||
/* Status-specific colors using Pico variables and left border */
|
||||
.status-box {
|
||||
padding: 1rem 1.25rem;
|
||||
border: 1px solid var(--pico-form-element-border-color);
|
||||
border-radius: var(--pico-border-radius);
|
||||
margin-top: 1rem;
|
||||
word-wrap: break-word;
|
||||
background-color: var(--pico-form-element-background-color);
|
||||
color: var(--pico-form-element-color);
|
||||
border-left-width: 4px; /* Add a thicker left border for emphasis */
|
||||
}
|
||||
.status-box.error {
|
||||
border-left-color: var(--pico-color-red-500);
|
||||
}
|
||||
.status-box.success {
|
||||
border-left-color: var(--pico-color-green-500);
|
||||
}
|
||||
.status-box.info {
|
||||
border-left-color: var(--pico-color-blue-500);
|
||||
}
|
||||
.status-box.warning {
|
||||
border-left-color: var(--pico-color-amber-500);
|
||||
}
|
||||
/* Ensure text inside is readable */
|
||||
.status-box p {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.status-box strong {
|
||||
color: var(--pico-h_color); /* Use heading color for better contrast */
|
||||
}
|
||||
|
||||
/* Rule Status colors */
|
||||
.status-active { color: var(--pico-color-green-600); font-weight: bold; } /* Use Pico green */
|
||||
.status-pending { color: var(--pico-color-orange-500); font-weight: bold; } /* Use Pico orange */
|
||||
.status-active { color: var(--pico-color-green-600); font-weight: bold; }
|
||||
.status-pending { color: var(--pico-color-orange-500); font-weight: bold; }
|
||||
|
||||
/* Form styling adjustments if needed */
|
||||
/* Form styling adjustments */
|
||||
form { display: inline-block; margin: 0; }
|
||||
form button { margin: 0; } /* Pico might add margins we don't want inside the table cell */
|
||||
form button { margin: 0; }
|
||||
.grid > form > button { width: 100%; } /* Make buttons in grid take full width */
|
||||
|
||||
/* Status indicator dots */
|
||||
.status-indicator { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; vertical-align: middle;}
|
||||
|
|
@ -37,27 +62,41 @@
|
|||
.status-indicator.docker_unavailable { background-color: var(--pico-color-gray-500); }
|
||||
.status-indicator.unknown, .status-indicator.created, .status-indicator.paused { background-color: var(--pico-color-amber-500); }
|
||||
|
||||
/* Button customizations (Pico uses <button> directly, removes need for .button class often) */
|
||||
button.delete-button { --pico-background-color: var(--pico-color-red-600); --pico-border-color: var(--pico-color-red-600); }
|
||||
button.delete-button:hover { --pico-background-color: var(--pico-color-red-700); }
|
||||
/* Pico handles disabled state styling automatically */
|
||||
/* Button customizations */
|
||||
button.delete-button {
|
||||
/* Use Pico classes 'contrast' and 'outline' */
|
||||
font-size: 0.9em; /* Make delete button slightly smaller */
|
||||
padding: 0.5rem 0.75rem;
|
||||
}
|
||||
|
||||
/* Theme Toggle Placeholder - CORRECTED */
|
||||
/* Theme Toggle Button */
|
||||
#theme-toggle {
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
right: 1rem;
|
||||
/* Maybe add z-index later if needed */
|
||||
/* Use Pico classes for button styling */
|
||||
padding: 0.5rem; /* Smaller padding */
|
||||
width: auto; /* Allow button to size to content */
|
||||
line-height: 1; /* Align icon better */
|
||||
font-size: 1.2rem; /* Adjust icon size */
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: var(--pico-secondary);
|
||||
}
|
||||
#theme-toggle:hover {
|
||||
color: var(--pico-secondary-hover);
|
||||
background: transparent; /* Ensure no background on hover */
|
||||
border: none;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<!-- Body will use Pico default styles. Main container for centering/max-width -->
|
||||
<!-- Body uses Pico styles. Main container for centering/max-width. data-theme set by JS -->
|
||||
<body>
|
||||
<main class="container">
|
||||
|
||||
<!-- Theme Toggle Button Placeholder -->
|
||||
<button id="theme-toggle" aria-label="Toggle theme">🌓</button> <!-- Simple Emoji Toggle -->
|
||||
<!-- Theme Toggle Button -->
|
||||
<button id="theme-toggle" aria-label="Toggle theme">🌓</button> <!-- Initial Icon -->
|
||||
|
||||
<h1>Cloudflare Tunnel Manager</h1>
|
||||
|
||||
|
|
@ -67,6 +106,7 @@
|
|||
<h2>Initialization Status</h2>
|
||||
<h3>Cloudflare Tunnel API Interaction</h3>
|
||||
</hgroup>
|
||||
<!-- Apply status class directly to the box -->
|
||||
<div class="status-box {{ 'error' if tunnel_state.get('error') else ('success' if tunnel_state.get('token') else 'info') }}">
|
||||
<p><strong>Message:</strong> {{ tunnel_state.status_message }}</p>
|
||||
{% if tunnel_state.get('error') %}
|
||||
|
|
@ -93,8 +133,9 @@
|
|||
</strong>
|
||||
</p>
|
||||
{% if agent_state.last_action_status %}
|
||||
<!-- Apply status class directly to the box -->
|
||||
<div class="status-box {{ 'error' if 'Error:' in agent_state.last_action_status else ('warning' if 'Warning:' in agent_state.last_action_status else 'info') }}">
|
||||
<strong>Last Action Result:</strong> {{ agent_state.last_action_status }}
|
||||
<p><strong>Last Action Result:</strong> {{ agent_state.last_action_status }}</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
|
|
@ -107,7 +148,6 @@
|
|||
</button>
|
||||
</form>
|
||||
<form action="{{ url_for('stop_tunnel') }}" method="post">
|
||||
<!-- Add class="secondary" for less emphasis maybe? -->
|
||||
<button type="submit" class="secondary"
|
||||
{{ 'disabled' if agent_state.container_status!='running' or not docker_available }}>
|
||||
Stop Agent
|
||||
|
|
@ -121,7 +161,7 @@
|
|||
<h2>Managed Ingress Rules</h2>
|
||||
{% if rules %}
|
||||
<figure> <!-- Pico styles tables inside figures nicely -->
|
||||
<table role="grid"> <!-- role="grid" for accessibility with tables -->
|
||||
<table role="grid"> <!-- role="grid" for accessibility -->
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">Hostname</th>
|
||||
|
|
@ -153,9 +193,9 @@
|
|||
<td>
|
||||
<form action="{{ url_for('force_delete_rule', hostname=hostname) }}" method="post"
|
||||
onsubmit="return confirm('Are you sure you want to force delete the rule and DNS record for {{ hostname }} immediately? This bypasses the grace period.');">
|
||||
<!-- Pico styles buttons without needing specific classes -->
|
||||
<!-- Use Pico classes for styling -->
|
||||
<button type="submit" class="delete-button contrast outline" {{ 'disabled' if not docker_available }}>
|
||||
Force Delete
|
||||
Delete
|
||||
</button>
|
||||
</form>
|
||||
</td>
|
||||
|
|
@ -171,10 +211,47 @@
|
|||
|
||||
</main> <!-- end .container -->
|
||||
|
||||
<!-- JavaScript for Theme Toggle (will add later) -->
|
||||
<!-- JavaScript for Theme Toggle -->
|
||||
<script>
|
||||
// Placeholder for theme toggle script
|
||||
console.log("Theme toggle script placeholder");
|
||||
const themeToggleButton = document.getElementById('theme-toggle');
|
||||
const htmlElement = document.documentElement; // Target the <html> element
|
||||
|
||||
// Function to set the theme and update icon
|
||||
const setTheme = (theme) => {
|
||||
htmlElement.setAttribute('data-theme', theme);
|
||||
localStorage.setItem('theme', theme); // Save preference
|
||||
// Update button icon based on the new theme
|
||||
themeToggleButton.textContent = theme === 'dark' ? '☀️' : '🌓';
|
||||
};
|
||||
|
||||
// Function to toggle the theme
|
||||
const toggleTheme = () => {
|
||||
// Check the current theme *explicitly* set on <html> or default to light
|
||||
const currentTheme = htmlElement.getAttribute('data-theme') || 'light';
|
||||
const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
|
||||
setTheme(newTheme);
|
||||
};
|
||||
|
||||
// Add event listener to the button
|
||||
themeToggleButton.addEventListener('click', toggleTheme);
|
||||
|
||||
// Apply theme on initial load
|
||||
const initTheme = () => {
|
||||
const savedTheme = localStorage.getItem('theme');
|
||||
// Check for OS preference if no theme is saved
|
||||
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
|
||||
|
||||
if (savedTheme) {
|
||||
setTheme(savedTheme);
|
||||
} else {
|
||||
// If no saved theme, use OS preference as default
|
||||
setTheme(prefersDark ? 'dark' : 'light');
|
||||
}
|
||||
};
|
||||
|
||||
// Run theme initialization
|
||||
initTheme();
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue