Refine installer UI styles and normalize form controls
This commit is contained in:
AudioCore Bot
@@ -11,35 +11,150 @@ $val = static function (string $key, string $default = '') use ($values): string
|
|||||||
|
|
||||||
ob_start();
|
ob_start();
|
||||||
?>
|
?>
|
||||||
<section class="card" style="max-width:980px; margin:0 auto;">
|
<style>
|
||||||
<div class="badge">Setup</div>
|
.ac-installer { max-width: 980px; margin: 0 auto; }
|
||||||
<h1 style="margin:16px 0 6px; font-size:30px;">AudioCore V1.5 Installer</h1>
|
.ac-installer-title { margin: 16px 0 6px; font-size: 42px; line-height: 1.05; }
|
||||||
<p style="margin:0; color:rgba(235,241,255,.75);">Deploy a fresh instance with validated SMTP and baseline health checks.</p>
|
.ac-installer-intro { margin: 0; color: rgba(235,241,255,.75); }
|
||||||
|
.ac-installer-steps { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
|
||||||
|
.ac-step-pill {
|
||||||
|
padding: 8px 12px;
|
||||||
|
border-radius: 999px;
|
||||||
|
border: 1px solid rgba(255,255,255,.16);
|
||||||
|
background: rgba(255,255,255,.03);
|
||||||
|
font-size: 11px;
|
||||||
|
letter-spacing: .18em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-family: 'IBM Plex Mono', monospace;
|
||||||
|
}
|
||||||
|
.ac-step-pill.is-active { background: rgba(57,244,179,.18); }
|
||||||
|
|
||||||
<div style="display:flex; gap:10px; margin-top:18px; flex-wrap:wrap;">
|
.ac-installer-form { margin-top: 18px; display: grid; gap: 14px; }
|
||||||
<div style="padding:8px 12px; border-radius:999px; border:1px solid rgba(255,255,255,.16); background:<?= $step === 1 ? 'rgba(57,244,179,.18)' : 'rgba(255,255,255,.03)' ?>;">
|
.ac-installer-grid {
|
||||||
<span style="font-size:11px; letter-spacing:.18em; text-transform:uppercase;">1. Core Setup</span>
|
display: grid;
|
||||||
</div>
|
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
||||||
<div style="padding:8px 12px; border-radius:999px; border:1px solid rgba(255,255,255,.16); background:<?= $step === 2 ? 'rgba(57,244,179,.18)' : 'rgba(255,255,255,.03)' ?>;">
|
gap: 12px;
|
||||||
<span style="font-size:11px; letter-spacing:.18em; text-transform:uppercase;">2. Site + SMTP</span>
|
}
|
||||||
</div>
|
.ac-installer-section {
|
||||||
|
margin-top: 6px;
|
||||||
|
padding-top: 14px;
|
||||||
|
border-top: 1px solid rgba(255,255,255,.10);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ac-installer label {
|
||||||
|
display: inline-block;
|
||||||
|
margin: 0 0 8px;
|
||||||
|
font-size: 12px;
|
||||||
|
color: rgba(238,244,255,.78);
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: .16em;
|
||||||
|
font-family: 'IBM Plex Mono', monospace;
|
||||||
|
}
|
||||||
|
.ac-installer .input,
|
||||||
|
.ac-installer textarea.input,
|
||||||
|
.ac-installer select.input {
|
||||||
|
width: 100%;
|
||||||
|
height: 46px;
|
||||||
|
border-radius: 12px;
|
||||||
|
border: 1px solid rgba(255,255,255,.16);
|
||||||
|
background: rgba(12,16,24,.58);
|
||||||
|
color: #edf2ff;
|
||||||
|
padding: 0 14px;
|
||||||
|
font-size: 15px;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
.ac-installer textarea.input {
|
||||||
|
height: auto;
|
||||||
|
min-height: 92px;
|
||||||
|
padding: 12px 14px;
|
||||||
|
resize: vertical;
|
||||||
|
}
|
||||||
|
.ac-installer .input:focus {
|
||||||
|
border-color: rgba(57,244,179,.55);
|
||||||
|
box-shadow: 0 0 0 3px rgba(57,244,179,.14);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ac-installer-actions {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
gap: 10px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
margin-top: 6px;
|
||||||
|
}
|
||||||
|
.ac-installer .button {
|
||||||
|
height: 44px;
|
||||||
|
border-radius: 999px;
|
||||||
|
padding: 0 18px;
|
||||||
|
border: 1px solid rgba(255,255,255,.2);
|
||||||
|
background: rgba(255,255,255,.04);
|
||||||
|
color: #eef4ff;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: .16em;
|
||||||
|
font-family: 'IBM Plex Mono', monospace;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 600;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.ac-installer .button:hover { background: rgba(255,255,255,.1); }
|
||||||
|
.ac-installer .button-primary {
|
||||||
|
background: linear-gradient(135deg, #25afff, #2bd8ff);
|
||||||
|
border-color: rgba(40,185,255,.75);
|
||||||
|
color: #041019;
|
||||||
|
}
|
||||||
|
.ac-installer .button-primary:hover { filter: brightness(1.05); }
|
||||||
|
|
||||||
|
.ac-installer-alert {
|
||||||
|
margin-top: 16px;
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 12px 14px;
|
||||||
|
}
|
||||||
|
.ac-installer-alert.error {
|
||||||
|
border: 1px solid rgba(255,124,124,.45);
|
||||||
|
background: rgba(180,40,40,.18);
|
||||||
|
color: #ffd6d6;
|
||||||
|
}
|
||||||
|
.ac-installer-alert.success {
|
||||||
|
border: 1px solid rgba(57,244,179,.45);
|
||||||
|
background: rgba(10,90,60,.22);
|
||||||
|
color: #b8ffe5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ac-installer-checks {
|
||||||
|
padding: 12px;
|
||||||
|
border: 1px solid rgba(255,255,255,.1);
|
||||||
|
border-radius: 12px;
|
||||||
|
background: rgba(255,255,255,.02);
|
||||||
|
}
|
||||||
|
.ac-installer-checks-title {
|
||||||
|
font-size: 12px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: .16em;
|
||||||
|
color: rgba(255,255,255,.65);
|
||||||
|
margin-bottom: 10px;
|
||||||
|
font-family: 'IBM Plex Mono', monospace;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<section class="card ac-installer">
|
||||||
|
<div class="badge">Setup</div>
|
||||||
|
<h1 class="ac-installer-title">AudioCore V1.5 Installer</h1>
|
||||||
|
<p class="ac-installer-intro">Deploy a fresh instance with validated SMTP and baseline health checks.</p>
|
||||||
|
|
||||||
|
<div class="ac-installer-steps">
|
||||||
|
<div class="ac-step-pill <?= $step === 1 ? 'is-active' : '' ?>">1. Core Setup</div>
|
||||||
|
<div class="ac-step-pill <?= $step === 2 ? 'is-active' : '' ?>">2. Site + SMTP</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<?php if (!empty($error)): ?>
|
<?php if (!empty($error)): ?>
|
||||||
<div style="margin-top:16px; border:1px solid rgba(255,124,124,.45); background:rgba(180,40,40,.18); border-radius:12px; padding:12px 14px; color:#ffd6d6;">
|
<div class="ac-installer-alert error"><?= htmlspecialchars((string)$error, ENT_QUOTES, 'UTF-8') ?></div>
|
||||||
<?= htmlspecialchars((string)$error, ENT_QUOTES, 'UTF-8') ?>
|
|
||||||
</div>
|
|
||||||
<?php endif; ?>
|
<?php endif; ?>
|
||||||
<?php if (!empty($success)): ?>
|
<?php if (!empty($success)): ?>
|
||||||
<div style="margin-top:16px; border:1px solid rgba(57,244,179,.45); background:rgba(10,90,60,.22); border-radius:12px; padding:12px 14px; color:#b8ffe5;">
|
<div class="ac-installer-alert success"><?= htmlspecialchars((string)$success, ENT_QUOTES, 'UTF-8') ?></div>
|
||||||
<?= htmlspecialchars((string)$success, ENT_QUOTES, 'UTF-8') ?>
|
|
||||||
</div>
|
|
||||||
<?php endif; ?>
|
<?php endif; ?>
|
||||||
|
|
||||||
<?php if ($step === 1): ?>
|
<?php if ($step === 1): ?>
|
||||||
<form method="post" action="/admin/install" style="margin-top:18px; display:grid; gap:14px;">
|
<form method="post" action="/admin/install" class="ac-installer-form">
|
||||||
<input type="hidden" name="installer_action" value="setup_core">
|
<input type="hidden" name="installer_action" value="setup_core">
|
||||||
<div style="display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px;">
|
<div class="ac-installer-grid">
|
||||||
<div>
|
<div>
|
||||||
<label>DB Host *</label>
|
<label>DB Host *</label>
|
||||||
<input class="input" name="db_host" value="<?= htmlspecialchars($val('db_host', 'localhost'), ENT_QUOTES, 'UTF-8') ?>">
|
<input class="input" name="db_host" value="<?= htmlspecialchars($val('db_host', 'localhost'), ENT_QUOTES, 'UTF-8') ?>">
|
||||||
@@ -62,7 +177,7 @@ ob_start();
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div style="margin-top:6px; padding-top:14px; border-top:1px solid rgba(255,255,255,.1); display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px;">
|
<div class="ac-installer-section ac-installer-grid">
|
||||||
<div>
|
<div>
|
||||||
<label>Admin Name *</label>
|
<label>Admin Name *</label>
|
||||||
<input class="input" name="admin_name" value="<?= htmlspecialchars($val('admin_name', 'Admin'), ENT_QUOTES, 'UTF-8') ?>">
|
<input class="input" name="admin_name" value="<?= htmlspecialchars($val('admin_name', 'Admin'), ENT_QUOTES, 'UTF-8') ?>">
|
||||||
@@ -77,13 +192,13 @@ ob_start();
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div style="display:flex; justify-content:flex-end; margin-top:4px;">
|
<div class="ac-installer-actions">
|
||||||
<button type="submit" class="button button-primary">Create Core Setup</button>
|
<button type="submit" class="button button-primary">Create Core Setup</button>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
<?php else: ?>
|
<?php else: ?>
|
||||||
<form method="post" action="/admin/install" style="margin-top:18px; display:grid; gap:14px;">
|
<form method="post" action="/admin/install" class="ac-installer-form">
|
||||||
<div style="display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px;">
|
<div class="ac-installer-grid">
|
||||||
<div>
|
<div>
|
||||||
<label>Site Title *</label>
|
<label>Site Title *</label>
|
||||||
<input class="input" name="site_title" value="<?= htmlspecialchars($val('site_title', 'AudioCore V1.5'), ENT_QUOTES, 'UTF-8') ?>">
|
<input class="input" name="site_title" value="<?= htmlspecialchars($val('site_title', 'AudioCore V1.5'), ENT_QUOTES, 'UTF-8') ?>">
|
||||||
@@ -98,11 +213,11 @@ ob_start();
|
|||||||
</div>
|
</div>
|
||||||
<div style="grid-column:1/-1;">
|
<div style="grid-column:1/-1;">
|
||||||
<label>SEO Meta Description</label>
|
<label>SEO Meta Description</label>
|
||||||
<textarea class="input" name="seo_meta_description" rows="3" style="resize:vertical;"><?= htmlspecialchars($val('seo_meta_description', ''), ENT_QUOTES, 'UTF-8') ?></textarea>
|
<textarea class="input" name="seo_meta_description" rows="3"><?= htmlspecialchars($val('seo_meta_description', ''), ENT_QUOTES, 'UTF-8') ?></textarea>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div style="padding-top:12px; border-top:1px solid rgba(255,255,255,.1); display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px;">
|
<div class="ac-installer-section ac-installer-grid">
|
||||||
<div>
|
<div>
|
||||||
<label>SMTP Host *</label>
|
<label>SMTP Host *</label>
|
||||||
<input class="input" name="smtp_host" value="<?= htmlspecialchars($val('smtp_host', ''), ENT_QUOTES, 'UTF-8') ?>" placeholder="smtp.example.com">
|
<input class="input" name="smtp_host" value="<?= htmlspecialchars($val('smtp_host', ''), ENT_QUOTES, 'UTF-8') ?>" placeholder="smtp.example.com">
|
||||||
@@ -138,13 +253,11 @@ ob_start();
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<?php if (!empty($smtpResult)): ?>
|
<?php if (!empty($smtpResult)): ?>
|
||||||
<div style="border:1px solid <?= !empty($smtpResult['ok']) ? 'rgba(57,244,179,.45)' : 'rgba(255,124,124,.45)' ?>; background:<?= !empty($smtpResult['ok']) ? 'rgba(10,90,60,.22)' : 'rgba(180,40,40,.18)' ?>; border-radius:12px; padding:12px 14px;">
|
<div class="ac-installer-alert <?= !empty($smtpResult['ok']) ? 'success' : 'error' ?>" style="margin-top:0;">
|
||||||
<div style="font-weight:700; margin-bottom:4px; color:<?= !empty($smtpResult['ok']) ? '#b8ffe5' : '#ffd6d6' ?>">
|
<div style="font-weight:700; margin-bottom:4px;">
|
||||||
<?= !empty($smtpResult['ok']) ? 'SMTP test passed' : 'SMTP test failed' ?>
|
<?= !empty($smtpResult['ok']) ? 'SMTP test passed' : 'SMTP test failed' ?>
|
||||||
</div>
|
</div>
|
||||||
<div style="color:<?= !empty($smtpResult['ok']) ? '#b8ffe5' : '#ffd6d6' ?>;">
|
<div><?= htmlspecialchars((string)($smtpResult['message'] ?? ''), ENT_QUOTES, 'UTF-8') ?></div>
|
||||||
<?= htmlspecialchars((string)($smtpResult['message'] ?? ''), ENT_QUOTES, 'UTF-8') ?>
|
|
||||||
</div>
|
|
||||||
<?php if (!empty($smtpResult['debug'])): ?>
|
<?php if (!empty($smtpResult['debug'])): ?>
|
||||||
<details style="margin-top:8px;">
|
<details style="margin-top:8px;">
|
||||||
<summary style="cursor:pointer;">Debug output</summary>
|
<summary style="cursor:pointer;">Debug output</summary>
|
||||||
@@ -155,13 +268,13 @@ ob_start();
|
|||||||
<?php endif; ?>
|
<?php endif; ?>
|
||||||
|
|
||||||
<?php if (!empty($checks)): ?>
|
<?php if (!empty($checks)): ?>
|
||||||
<div style="padding:12px; border:1px solid rgba(255,255,255,.1); border-radius:12px; background:rgba(255,255,255,.02);">
|
<div class="ac-installer-checks">
|
||||||
<div style="font-size:12px; text-transform:uppercase; letter-spacing:.16em; color:rgba(255,255,255,.65); margin-bottom:10px;">Installer Health Checks</div>
|
<div class="ac-installer-checks-title">Installer Health Checks</div>
|
||||||
<div style="display:grid; gap:8px;">
|
<div style="display:grid; gap:8px;">
|
||||||
<?php foreach ($checks as $check): ?>
|
<?php foreach ($checks as $check): ?>
|
||||||
<div style="display:flex; gap:10px; align-items:flex-start;">
|
<div style="display:flex; gap:10px; align-items:flex-start;">
|
||||||
<span style="display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; border-radius:999px; font-size:12px; margin-top:2px; background:<?= !empty($check['ok']) ? 'rgba(57,244,179,.2)' : 'rgba(255,124,124,.2)' ?>; color:<?= !empty($check['ok']) ? '#9ff8d8' : '#ffb7b7' ?>;">
|
<span style="display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; border-radius:999px; font-size:12px; margin-top:2px; background:<?= !empty($check['ok']) ? 'rgba(57,244,179,.2)' : 'rgba(255,124,124,.2)' ?>; color:<?= !empty($check['ok']) ? '#9ff8d8' : '#ffb7b7' ?>;">
|
||||||
<?= !empty($check['ok']) ? '✓' : '!' ?>
|
<?= !empty($check['ok']) ? '✓' : '!' ?>
|
||||||
</span>
|
</span>
|
||||||
<div>
|
<div>
|
||||||
<div style="font-weight:600;"><?= htmlspecialchars((string)($check['label'] ?? ''), ENT_QUOTES, 'UTF-8') ?></div>
|
<div style="font-weight:600;"><?= htmlspecialchars((string)($check['label'] ?? ''), ENT_QUOTES, 'UTF-8') ?></div>
|
||||||
@@ -173,7 +286,7 @@ ob_start();
|
|||||||
</div>
|
</div>
|
||||||
<?php endif; ?>
|
<?php endif; ?>
|
||||||
|
|
||||||
<div style="display:flex; justify-content:flex-end; gap:10px; flex-wrap:wrap; margin-top:4px;">
|
<div class="ac-installer-actions">
|
||||||
<button type="submit" name="installer_action" value="test_smtp" class="button">Send Test Email + Run Checks</button>
|
<button type="submit" name="installer_action" value="test_smtp" class="button">Send Test Email + Run Checks</button>
|
||||||
<button type="submit" name="installer_action" value="finish_install" class="button button-primary">Finish Installation</button>
|
<button type="submit" name="installer_action" value="finish_install" class="button button-primary">Finish Installation</button>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user