ske087
4dc8506c9b
Follow-up to the player-modal / maintenance-page fix: the same root cause --
colours hard-coded for the light theme -- affected the whole app, in two
places.
1) Inline style attributes (inline outranks the theme rules, so the light
value survives dark mode and the inherited text colour turns
light-on-light). base.html now carries a single, property-scoped
dark-mode override layer that maps every light literal found in the
templates to the theme variables: light backgrounds/whites -> dark
surfaces, semantic pastels -> dark equivalents, dark text -> light text,
light borders -> dark borders, plus .back-link. Scoped to
body.dark-mode, so the light theme is untouched. This covers all
templates, including ones not edited here and any added later.
2) Page-level <style> blocks with no dark support:
* admin/https_config.html hard-coded a light-only palette (blue-tint
panels, dark labels) -- added a body.dark-mode block for it.
* dashboard.html / help.html / manage_player.html coloured text links
with --primary-color (#7c3aed in dark = too dim). Introduced a
dedicated --link-color (#667eea light / #a78bfa dark) and used it for
text links, leaving --primary-color for button/background use.
Verified with an automated luminance scan of all 18 pages in both themes:
dark mode has 0 light backgrounds and 0 dark-on-dark text (the only
remaining light surfaces are the intentional white buttons on the admin
gradient cards), and light mode is unchanged.
683 lines
20 KiB
HTML
683 lines
20 KiB
HTML
{% extends "base.html" %}
|
||
|
||
{% block title %}HTTPS Configuration - DigiServer v2{% endblock %}
|
||
|
||
{% block content %}
|
||
<div class="container">
|
||
<div class="page-header">
|
||
<a href="{{ url_for('admin.admin_panel') }}" class="back-link">← Back to Admin Panel</a>
|
||
<h1>🔒 HTTPS Configuration</h1>
|
||
</div>
|
||
|
||
<div class="https-config-container">
|
||
<!-- Status Display -->
|
||
<div class="card status-card">
|
||
<h2>Current Status</h2>
|
||
|
||
<!-- Real-time HTTPS detection -->
|
||
<div class="status-detection">
|
||
<p class="detection-info">
|
||
<strong>🔍 Detected Connection:</strong>
|
||
{% if is_https_active %}
|
||
<span class="badge badge-success">🔒 HTTPS ({{ request.scheme.upper() }})</span>
|
||
{% else %}
|
||
<span class="badge badge-warning">🔓 HTTP</span>
|
||
{% endif %}
|
||
<br>
|
||
<small>Current host: <code>{{ current_host }}</code> via {{ request.host }}</small>
|
||
</p>
|
||
</div>
|
||
|
||
{% if config and config.https_enabled %}
|
||
<div class="status-enabled">
|
||
<span class="status-badge">✅ HTTPS ENABLED</span>
|
||
<div class="status-details">
|
||
<p><strong>Domain:</strong> {{ config.domain }}</p>
|
||
<p><strong>Hostname:</strong> {{ config.hostname }}</p>
|
||
<p><strong>Email:</strong> {{ config.email }}</p>
|
||
<p><strong>IP Address:</strong> {{ config.ip_address }}</p>
|
||
<p><strong>Port:</strong> {{ config.port }}</p>
|
||
<p><strong>Access URL:</strong> <code>https://{{ config.domain }}</code></p>
|
||
<p><strong>Last Updated:</strong> {{ config.updated_at.strftime('%Y-%m-%d %H:%M:%S') }} by {{ config.updated_by }}</p>
|
||
</div>
|
||
</div>
|
||
{% else %}
|
||
<div class="status-disabled">
|
||
<span class="status-badge-inactive">⚠️ HTTPS DISABLED</span>
|
||
{% if is_https_active %}
|
||
<p style="color: #156b2e; background: #d1f0e0; padding: 10px; border-radius: 4px; margin: 10px 0;">
|
||
✅ <strong>Note:</strong> You are currently accessing this page via HTTPS, but the configuration shows as disabled.
|
||
This configuration will be automatically updated. Please refresh the page.
|
||
</p>
|
||
{% else %}
|
||
<p>The application is currently running on HTTP only (port 80)</p>
|
||
<p>Enable HTTPS below to secure your application.</p>
|
||
{% endif %}
|
||
</div>
|
||
{% endif %}
|
||
</div>
|
||
|
||
<!-- Configuration Form -->
|
||
<div class="card config-card">
|
||
<h2>Configure HTTPS Settings</h2>
|
||
<p class="info-text">
|
||
💡 <strong>Workflow:</strong> First, the app runs on HTTP (port 80). After you configure the HTTPS settings below,
|
||
the application will be available over HTTPS (port 443) using the domain and hostname you specify.
|
||
</p>
|
||
|
||
<form method="POST" action="{{ url_for('admin.update_https_config') }}" class="https-form">
|
||
<!-- Enable HTTPS Toggle -->
|
||
<div class="form-group">
|
||
<label class="toggle-label">
|
||
<input type="checkbox" name="https_enabled" id="https_enabled"
|
||
{% if config and config.https_enabled %}checked{% endif %}
|
||
class="toggle-input">
|
||
<span class="toggle-slider"></span>
|
||
<span class="toggle-text">Enable HTTPS</span>
|
||
</label>
|
||
<p class="form-hint">Check this box to enable HTTPS/SSL for your application</p>
|
||
</div>
|
||
|
||
<!-- Hostname Field -->
|
||
<div class="form-group">
|
||
<label for="hostname">Hostname <span class="required">*</span></label>
|
||
<input type="text" id="hostname" name="hostname"
|
||
value="{{ config.hostname or 'digiserver' }}"
|
||
placeholder="e.g., digiserver"
|
||
class="form-input"
|
||
required>
|
||
<p class="form-hint">Short name for your server (e.g., 'digiserver')</p>
|
||
</div>
|
||
|
||
<!-- Domain Field -->
|
||
<div class="form-group">
|
||
<label for="domain">Full Domain Name <span class="required">*</span></label>
|
||
<input type="text" id="domain" name="domain"
|
||
value="{{ config.domain or 'digiserver.sibiusb.harting.intra' }}"
|
||
placeholder="e.g., digiserver.sibiusb.harting.intra"
|
||
class="form-input"
|
||
required>
|
||
<p class="form-hint">Complete domain name (e.g., digiserver.sibiusb.harting.intra)</p>
|
||
</div>
|
||
|
||
<!-- IP Address Field -->
|
||
<div class="form-group">
|
||
<label for="ip_address">IP Address <span class="required">*</span></label>
|
||
<input type="text" id="ip_address" name="ip_address"
|
||
value="{{ config.ip_address or '10.76.152.164' }}"
|
||
placeholder="e.g., 10.76.152.164"
|
||
class="form-input"
|
||
required>
|
||
<p class="form-hint">Server's IP address for direct access (e.g., 10.76.152.164)</p>
|
||
</div>
|
||
|
||
<!-- Email Field -->
|
||
<div class="form-group">
|
||
<label for="email">Email Address <span class="required">*</span></label>
|
||
<input type="email" id="email" name="email"
|
||
value="{{ config.email or '' }}"
|
||
placeholder="e.g., admin@example.com"
|
||
class="form-input"
|
||
required>
|
||
<p class="form-hint">Email address for SSL certificate notifications and Let's Encrypt communications</p>
|
||
</div>
|
||
|
||
<!-- Port Field -->
|
||
<div class="form-group">
|
||
<label for="port">HTTPS Port</label>
|
||
<input type="number" id="port" name="port"
|
||
value="{{ config.port or 443 }}"
|
||
placeholder="443"
|
||
min="1" max="65535"
|
||
class="form-input">
|
||
<p class="form-hint">Port for HTTPS connections (default: 443)</p>
|
||
</div>
|
||
|
||
<!-- Preview Section -->
|
||
<div class="preview-section">
|
||
<h3>Access Points After Configuration:</h3>
|
||
<ul class="access-points">
|
||
<li>
|
||
<strong>HTTPS (Recommended):</strong>
|
||
<code>https://<span id="preview-domain">digiserver.sibiusb.harting.intra</span></code>
|
||
</li>
|
||
<li>
|
||
<strong>HTTP (Fallback):</strong>
|
||
<code>http://<span id="preview-ip">10.76.152.164</span></code>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<!-- Form Actions -->
|
||
<div class="form-actions">
|
||
<button type="submit" class="btn btn-primary btn-lg">
|
||
💾 Save HTTPS Configuration
|
||
</button>
|
||
<a href="{{ url_for('admin.admin_panel') }}" class="btn btn-secondary">
|
||
Cancel
|
||
</a>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
|
||
<!-- Caddy Reverse Proxy Status Card -->
|
||
<div class="card nginx-status-card">
|
||
<h2>🔧 Caddy Reverse Proxy Status</h2>
|
||
<div class="nginx-status-content">
|
||
<div class="status-item">
|
||
<strong>Reverse Proxy:</strong>
|
||
<span class="badge badge-success">✅ Caddy</span>
|
||
</div>
|
||
<div class="status-item">
|
||
<strong>SSL/TLS:</strong>
|
||
{% if config and config.https_enabled %}
|
||
<span class="badge badge-success">🔒 Enabled — auto-managed by Caddy</span>
|
||
{% else %}
|
||
<span class="badge badge-warning">⚠️ HTTP only — enable HTTPS above</span>
|
||
{% endif %}
|
||
</div>
|
||
<div class="status-item">
|
||
<strong>Certificate Provider:</strong>
|
||
<code>Let's Encrypt (automatic)</code>
|
||
</div>
|
||
<div class="status-item">
|
||
<strong>Admin API:</strong>
|
||
<code>caddy:2019</code>
|
||
</div>
|
||
<div class="status-item">
|
||
<strong>Upstream:</strong>
|
||
<code>digiserver-app:5000</code>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Information Section -->
|
||
<div class="card info-card">
|
||
<h2>ℹ️ Important Information</h2>
|
||
<div class="info-sections">
|
||
<div class="info-section">
|
||
<h3>📝 Before You Start</h3>
|
||
<ul>
|
||
<li>Ensure your DNS is configured to resolve the domain to your server</li>
|
||
<li>Verify the IP address matches your server's actual network interface</li>
|
||
<li>Check that ports 80, 443, and 443/UDP are open for traffic</li>
|
||
</ul>
|
||
</div>
|
||
<div class="info-section">
|
||
<h3>🔐 HTTPS Setup</h3>
|
||
<ul>
|
||
<li>SSL certificates are automatically managed by Caddy</li>
|
||
<li>Certificates are obtained from Let's Encrypt</li>
|
||
<li>Automatic renewal is handled by the system</li>
|
||
</ul>
|
||
</div>
|
||
<div class="info-section">
|
||
<h3>✅ After Configuration</h3>
|
||
<ul>
|
||
<li>Your app will restart with the new settings</li>
|
||
<li>Both HTTP and HTTPS access points will be available</li>
|
||
<li>HTTP requests will be redirected to HTTPS</li>
|
||
<li>Check the status above for current configuration</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<style>
|
||
.https-config-container {
|
||
max-width: 800px;
|
||
margin: 0 auto;
|
||
padding: 20px;
|
||
}
|
||
|
||
.page-header {
|
||
margin-bottom: 30px;
|
||
}
|
||
|
||
.back-link {
|
||
display: inline-block;
|
||
margin-bottom: 15px;
|
||
color: #0066cc;
|
||
text-decoration: none;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.back-link:hover {
|
||
text-decoration: underline;
|
||
}
|
||
|
||
.status-detection {
|
||
background: #f0f7ff;
|
||
border-left: 4px solid #0066cc;
|
||
padding: 15px;
|
||
margin-bottom: 20px;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.detection-info {
|
||
margin: 0;
|
||
font-size: 14px;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.badge {
|
||
display: inline-block;
|
||
padding: 4px 12px;
|
||
border-radius: 4px;
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
margin-left: 8px;
|
||
}
|
||
|
||
.badge-success {
|
||
background: #d1f0e0;
|
||
color: #156b2e;
|
||
}
|
||
|
||
.badge-warning {
|
||
background: #fff3cd;
|
||
color: #856404;
|
||
}
|
||
|
||
.status-card {
|
||
margin-bottom: 30px;
|
||
border-left: 5px solid #ddd;
|
||
}
|
||
|
||
.status-enabled {
|
||
background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
|
||
border-radius: 8px;
|
||
padding: 20px;
|
||
border-left: 5px solid #28a745;
|
||
}
|
||
|
||
.status-disabled {
|
||
background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
|
||
border-radius: 8px;
|
||
padding: 20px;
|
||
border-left: 5px solid #ffc107;
|
||
}
|
||
|
||
.status-badge {
|
||
display: inline-block;
|
||
background: #28a745;
|
||
color: white;
|
||
padding: 8px 16px;
|
||
border-radius: 20px;
|
||
font-weight: bold;
|
||
margin-bottom: 15px;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.status-badge-inactive {
|
||
display: inline-block;
|
||
background: #ffc107;
|
||
color: #333;
|
||
padding: 8px 16px;
|
||
border-radius: 20px;
|
||
font-weight: bold;
|
||
margin-bottom: 15px;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.status-details {
|
||
margin-top: 15px;
|
||
}
|
||
|
||
.status-details p {
|
||
margin: 8px 0;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.status-details code {
|
||
background: rgba(0,0,0,0.1);
|
||
padding: 4px 8px;
|
||
border-radius: 4px;
|
||
font-family: 'Courier New', monospace;
|
||
}
|
||
|
||
.config-card {
|
||
margin-bottom: 30px;
|
||
}
|
||
|
||
.info-text {
|
||
background: #e7f3ff;
|
||
border-left: 4px solid #0066cc;
|
||
padding: 12px 16px;
|
||
border-radius: 4px;
|
||
margin-bottom: 25px;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.https-form {
|
||
padding: 20px 0;
|
||
}
|
||
|
||
.form-group {
|
||
margin-bottom: 25px;
|
||
}
|
||
|
||
.form-group label {
|
||
display: block;
|
||
font-weight: 600;
|
||
margin-bottom: 8px;
|
||
color: #333;
|
||
}
|
||
|
||
.required {
|
||
color: #dc3545;
|
||
}
|
||
|
||
.form-input {
|
||
width: 100%;
|
||
padding: 12px;
|
||
border: 1px solid #ddd;
|
||
border-radius: 6px;
|
||
font-size: 14px;
|
||
font-family: inherit;
|
||
transition: all 0.2s;
|
||
}
|
||
|
||
.form-input:focus {
|
||
outline: none;
|
||
border-color: #0066cc;
|
||
box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
|
||
}
|
||
|
||
.form-hint {
|
||
font-size: 13px;
|
||
color: #666;
|
||
margin-top: 6px;
|
||
}
|
||
|
||
/* Toggle Switch Styling */
|
||
.toggle-label {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
cursor: pointer;
|
||
user-select: none;
|
||
}
|
||
|
||
.toggle-input {
|
||
display: none;
|
||
}
|
||
|
||
.toggle-slider {
|
||
display: inline-block;
|
||
width: 50px;
|
||
height: 28px;
|
||
background: #ccc;
|
||
border-radius: 14px;
|
||
position: relative;
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
.toggle-slider::after {
|
||
content: '';
|
||
position: absolute;
|
||
width: 24px;
|
||
height: 24px;
|
||
background: white;
|
||
border-radius: 50%;
|
||
top: 2px;
|
||
left: 2px;
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
.toggle-input:checked + .toggle-slider {
|
||
background: #28a745;
|
||
}
|
||
|
||
.toggle-input:checked + .toggle-slider::after {
|
||
left: 24px;
|
||
}
|
||
|
||
.toggle-text {
|
||
font-weight: 600;
|
||
color: #333;
|
||
}
|
||
|
||
.preview-section {
|
||
background: #f8f9fa;
|
||
border: 2px dashed #0066cc;
|
||
border-radius: 8px;
|
||
padding: 20px;
|
||
margin: 25px 0;
|
||
}
|
||
|
||
.preview-section h3 {
|
||
margin-top: 0;
|
||
color: #0066cc;
|
||
}
|
||
|
||
.access-points {
|
||
list-style: none;
|
||
padding: 0;
|
||
margin: 0;
|
||
}
|
||
|
||
.access-points li {
|
||
padding: 10px;
|
||
background: white;
|
||
border-radius: 4px;
|
||
margin-bottom: 8px;
|
||
border-left: 4px solid #0066cc;
|
||
}
|
||
|
||
.access-points code {
|
||
background: #e7f3ff;
|
||
padding: 6px 10px;
|
||
border-radius: 4px;
|
||
font-family: 'Courier New', monospace;
|
||
color: #0066cc;
|
||
}
|
||
|
||
.form-actions {
|
||
display: flex;
|
||
gap: 10px;
|
||
margin-top: 30px;
|
||
padding-top: 25px;
|
||
border-top: 1px solid #ddd;
|
||
}
|
||
|
||
.btn-lg {
|
||
padding: 12px 30px;
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.info-card {
|
||
background: linear-gradient(135deg, #e7f3ff 0%, #f0f7ff 100%);
|
||
}
|
||
|
||
.info-card h2 {
|
||
color: #0066cc;
|
||
}
|
||
|
||
.nginx-status-card {
|
||
background: linear-gradient(135deg, #f0f7ff 0%, #e7f3ff 100%);
|
||
border-left: 5px solid #0066cc;
|
||
margin-bottom: 30px;
|
||
}
|
||
|
||
.nginx-status-card h2 {
|
||
color: #0066cc;
|
||
margin-top: 0;
|
||
}
|
||
|
||
.nginx-status-content {
|
||
padding: 10px 0;
|
||
}
|
||
|
||
.status-item {
|
||
padding: 12px;
|
||
background: white;
|
||
border-radius: 4px;
|
||
margin-bottom: 10px;
|
||
border-left: 3px solid #0066cc;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.status-item strong {
|
||
display: inline-block;
|
||
min-width: 150px;
|
||
color: #333;
|
||
}
|
||
|
||
.status-item code {
|
||
background: #f0f7ff;
|
||
padding: 4px 8px;
|
||
border-radius: 3px;
|
||
font-family: 'Courier New', monospace;
|
||
color: #0066cc;
|
||
word-break: break-all;
|
||
}
|
||
|
||
.info-sections {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||
gap: 20px;
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.info-section h3 {
|
||
color: #0066cc;
|
||
margin-top: 0;
|
||
font-size: 16px;
|
||
}
|
||
|
||
.info-section ul {
|
||
padding-left: 20px;
|
||
margin: 0;
|
||
}
|
||
|
||
.info-section li {
|
||
margin-bottom: 8px;
|
||
font-size: 14px;
|
||
color: #555;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.https-config-container {
|
||
padding: 10px;
|
||
}
|
||
|
||
.info-sections {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.form-actions {
|
||
flex-direction: column;
|
||
}
|
||
|
||
.btn-lg {
|
||
width: 100%;
|
||
}
|
||
}
|
||
|
||
/* ------------------------------------------------------------------
|
||
Dark theme
|
||
------------------------------------------------------------------
|
||
This page predates the shared dark-mode variables and hard-coded its
|
||
own light palette (light panel/blue-tint backgrounds with dark text).
|
||
The rules below re-map those to dark equivalents so the page matches
|
||
the rest of the app when the dark theme is active.
|
||
------------------------------------------------------------------ */
|
||
body.dark-mode .back-link { color: #90cdf4; }
|
||
|
||
body.dark-mode .status-detection {
|
||
background: #1e3a5f;
|
||
border-left-color: #90cdf4;
|
||
}
|
||
|
||
body.dark-mode .badge-success { background: #1a4d2e; color: #86efac; }
|
||
body.dark-mode .badge-warning { background: #4a3800; color: #fbbf24; }
|
||
|
||
body.dark-mode .status-card { border-left-color: #4a5568; }
|
||
body.dark-mode .status-enabled {
|
||
background: linear-gradient(135deg, #1a4d2e 0%, #22543d 100%);
|
||
}
|
||
body.dark-mode .status-disabled {
|
||
background: linear-gradient(135deg, #4a3800 0%, #5a4a1e 100%);
|
||
}
|
||
body.dark-mode .status-badge { background: #276749; color: #e2e8f0; }
|
||
body.dark-mode .status-badge-inactive { background: #b45309; color: #fff; }
|
||
body.dark-mode .status-details code { background: rgba(255, 255, 255, 0.12); }
|
||
|
||
body.dark-mode .info-text {
|
||
background: #1e3a5f;
|
||
border-left-color: #90cdf4;
|
||
color: #cbd5e1;
|
||
}
|
||
|
||
body.dark-mode .form-group label { color: var(--text-color); }
|
||
body.dark-mode .form-input {
|
||
background: var(--card-bg);
|
||
color: var(--text-color);
|
||
border-color: var(--border-color);
|
||
}
|
||
body.dark-mode .form-input:focus { border-color: #90cdf4; }
|
||
body.dark-mode .form-hint { color: var(--text-secondary); }
|
||
body.dark-mode .required { color: #fca5a5; }
|
||
|
||
body.dark-mode .toggle-slider { background: #4a5568; }
|
||
body.dark-mode .toggle-slider::after { background: #e2e8f0; }
|
||
body.dark-mode .toggle-input:checked + .toggle-slider { background: #276749; }
|
||
body.dark-mode .toggle-text { color: var(--text-color); }
|
||
|
||
body.dark-mode .preview-section {
|
||
background: var(--bg-color);
|
||
border-color: #90cdf4;
|
||
}
|
||
body.dark-mode .preview-section h3 { color: #90cdf4; }
|
||
|
||
body.dark-mode .access-points li {
|
||
background: var(--card-bg);
|
||
border-left-color: #90cdf4;
|
||
}
|
||
body.dark-mode .access-points code { background: #1e3a5f; color: #90cdf4; }
|
||
|
||
body.dark-mode .form-actions { border-top-color: var(--border-color); }
|
||
|
||
body.dark-mode .info-card {
|
||
background: linear-gradient(135deg, #1e3a5f 0%, #162032 100%);
|
||
}
|
||
body.dark-mode .info-card h2 { color: #90cdf4; }
|
||
body.dark-mode .info-card li { color: var(--text-secondary); }
|
||
|
||
body.dark-mode .nginx-status-card {
|
||
background: linear-gradient(135deg, #162032 0%, #1e3a5f 100%);
|
||
border-left-color: #90cdf4;
|
||
}
|
||
body.dark-mode .nginx-status-card h2 { color: #90cdf4; }
|
||
|
||
body.dark-mode .status-item {
|
||
background: var(--card-bg);
|
||
border-left-color: #90cdf4;
|
||
}
|
||
body.dark-mode .status-item strong { color: var(--text-color); }
|
||
body.dark-mode .status-item code { background: #1e3a5f; color: #90cdf4; }
|
||
|
||
body.dark-mode .info-section h3 { color: #90cdf4; }
|
||
body.dark-mode .info-section li { color: var(--text-secondary); }
|
||
</style>
|
||
|
||
<script>
|
||
// Update preview in real-time
|
||
document.getElementById('domain').addEventListener('input', function() {
|
||
document.getElementById('preview-domain').textContent = this.value || 'digiserver.sibiusb.harting.intra';
|
||
});
|
||
|
||
document.getElementById('ip_address').addEventListener('input', function() {
|
||
document.getElementById('preview-ip').textContent = this.value || '10.76.152.164';
|
||
});
|
||
|
||
// Load initial preview
|
||
document.getElementById('preview-domain').textContent = document.getElementById('domain').value || 'digiserver.sibiusb.harting.intra';
|
||
document.getElementById('preview-ip').textContent = document.getElementById('ip_address').value || '10.76.152.164';
|
||
</script>
|
||
{% endblock %}
|