Redesign withdrawal form: step indicator, refined CSS, print button
Add scoped CSS with Navy/warm-white palette, system serif headings, and card-style radio inputs. Add 3-step progress indicator across all views. Add print/PDF button on success page. Register CSS via registerStylesheet. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Arne Weiss
@@ -0,0 +1,8 @@
|
||||
<?php
|
||||
header('Expires: Mon, 26 Jul 1997 05:00:00 GMT');
|
||||
header('Last-Modified: ' . gmdate('D, d M Y H:i:s') . ' GMT');
|
||||
header('Cache-Control: no-store, no-cache, must-revalidate');
|
||||
header('Cache-Control: post-check=0, pre-check=0', false);
|
||||
header('Pragma: no-cache');
|
||||
header('Location: ../');
|
||||
exit;
|
||||
@@ -0,0 +1,466 @@
|
||||
:root {
|
||||
--cyw-bg: #faf8f5;
|
||||
--cyw-surface: #ffffff;
|
||||
--cyw-border: #e2ddd8;
|
||||
--cyw-text: #1c1a17;
|
||||
--cyw-text-muted: #6b645e;
|
||||
--cyw-accent: #1e3a5f;
|
||||
--cyw-accent-hover: #162d4b;
|
||||
--cyw-accent-light: #eef2f8;
|
||||
--cyw-success: #1e5c3a;
|
||||
--cyw-success-bg: #f0f7f3;
|
||||
--cyw-error: #8b1e2d;
|
||||
--cyw-error-bg: #fdf2f3;
|
||||
--cyw-warning: #7a5a1e;
|
||||
--cyw-warning-bg: #fdf7ee;
|
||||
}
|
||||
|
||||
/* ── Layout ─────────────────────────────────────────────── */
|
||||
|
||||
.cyp-withdrawal-page {
|
||||
max-width: 660px;
|
||||
margin: 0 auto;
|
||||
padding: 0 16px 56px;
|
||||
font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
|
||||
color: var(--cyw-text);
|
||||
}
|
||||
|
||||
.cyp-withdrawal-page .page-header {
|
||||
margin-bottom: 32px;
|
||||
padding-bottom: 20px;
|
||||
border-bottom: 1px solid var(--cyw-border);
|
||||
}
|
||||
|
||||
.cyp-withdrawal-page .page-header h1 {
|
||||
font-family: Georgia, 'Times New Roman', serif;
|
||||
font-size: 26px;
|
||||
font-weight: normal;
|
||||
letter-spacing: -0.02em;
|
||||
margin: 0;
|
||||
color: var(--cyw-text);
|
||||
}
|
||||
|
||||
.cyp-withdrawal-page .card,
|
||||
.cyp-withdrawal-page .card-block {
|
||||
border: 1px solid var(--cyw-border);
|
||||
border-radius: 8px;
|
||||
padding: 32px;
|
||||
background: var(--cyw-surface);
|
||||
box-shadow: 0 1px 4px rgba(28,26,23,0.05);
|
||||
}
|
||||
|
||||
/* ── Step indicator ─────────────────────────────────────── */
|
||||
|
||||
.cyp-steps {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 36px;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.cyp-step {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
min-width: 72px;
|
||||
}
|
||||
|
||||
.cyp-step-bubble {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
border: 2px solid var(--cyw-border);
|
||||
background: var(--cyw-surface);
|
||||
color: var(--cyw-text-muted);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.cyp-step.active .cyp-step-bubble {
|
||||
background: var(--cyw-accent);
|
||||
border-color: var(--cyw-accent);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.cyp-step.done .cyp-step-bubble {
|
||||
background: var(--cyw-success);
|
||||
border-color: var(--cyw-success);
|
||||
color: #fff;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.cyp-step-label {
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.07em;
|
||||
text-transform: uppercase;
|
||||
color: var(--cyw-text-muted);
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.cyp-step.active .cyp-step-label {
|
||||
color: var(--cyw-accent);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.cyp-step.done .cyp-step-label {
|
||||
color: var(--cyw-success);
|
||||
}
|
||||
|
||||
.cyp-step-line {
|
||||
height: 2px;
|
||||
width: 56px;
|
||||
background: var(--cyw-border);
|
||||
flex-shrink: 0;
|
||||
margin-bottom: 19px;
|
||||
}
|
||||
|
||||
.cyp-step-line.done {
|
||||
background: var(--cyw-success);
|
||||
}
|
||||
|
||||
/* ── Intro block ────────────────────────────────────────── */
|
||||
|
||||
.cyp-intro {
|
||||
font-size: 14px;
|
||||
color: var(--cyw-text-muted);
|
||||
line-height: 1.7;
|
||||
margin-bottom: 24px;
|
||||
padding-bottom: 24px;
|
||||
border-bottom: 1px solid var(--cyw-border);
|
||||
}
|
||||
|
||||
.cyp-intro a {
|
||||
color: var(--cyw-accent);
|
||||
text-underline-offset: 3px;
|
||||
}
|
||||
|
||||
/* ── Alerts ─────────────────────────────────────────────── */
|
||||
|
||||
.cyp-withdrawal-page .alert {
|
||||
border-radius: 6px;
|
||||
padding: 12px 16px;
|
||||
font-size: 14px;
|
||||
margin-bottom: 20px;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
.cyp-withdrawal-page .alert ul {
|
||||
margin: 4px 0 0 16px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.cyp-withdrawal-page .alert-danger {
|
||||
background: var(--cyw-error-bg);
|
||||
border-color: #f0c0c7;
|
||||
color: var(--cyw-error);
|
||||
}
|
||||
|
||||
.cyp-withdrawal-page .alert-success {
|
||||
background: var(--cyw-success-bg);
|
||||
border-color: #b8dfc9;
|
||||
color: var(--cyw-success);
|
||||
}
|
||||
|
||||
.cyp-withdrawal-page .alert-warning {
|
||||
background: var(--cyw-warning-bg);
|
||||
border-color: #e8d5a8;
|
||||
color: var(--cyw-warning);
|
||||
}
|
||||
|
||||
/* ── Form elements ──────────────────────────────────────── */
|
||||
|
||||
.cyp-withdrawal-page .form-group {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.cyp-withdrawal-page .form-control-label,
|
||||
.cyp-withdrawal-page fieldset.form-group legend {
|
||||
display: block;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.07em;
|
||||
text-transform: uppercase;
|
||||
color: var(--cyw-text-muted);
|
||||
margin-bottom: 7px;
|
||||
}
|
||||
|
||||
.cyp-withdrawal-page .form-control {
|
||||
width: 100%;
|
||||
padding: 10px 13px;
|
||||
border: 1px solid var(--cyw-border);
|
||||
border-radius: 6px;
|
||||
font-size: 15px;
|
||||
color: var(--cyw-text);
|
||||
background: var(--cyw-surface);
|
||||
font-family: inherit;
|
||||
box-sizing: border-box;
|
||||
transition: border-color 0.15s, box-shadow 0.15s;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
.cyp-withdrawal-page .form-control:focus {
|
||||
outline: none;
|
||||
border-color: var(--cyw-accent);
|
||||
box-shadow: 0 0 0 3px var(--cyw-accent-light);
|
||||
}
|
||||
|
||||
.cyp-withdrawal-page textarea.form-control {
|
||||
resize: vertical;
|
||||
min-height: 96px;
|
||||
}
|
||||
|
||||
.cyp-withdrawal-page .form-text {
|
||||
font-size: 12px;
|
||||
color: var(--cyw-text-muted);
|
||||
margin-top: 5px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* ── Radio card buttons ─────────────────────────────────── */
|
||||
|
||||
.cyp-withdrawal-page fieldset.form-group {
|
||||
border: none;
|
||||
padding: 0;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.cyp-radio-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.cyp-radio-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 11px;
|
||||
cursor: pointer;
|
||||
padding: 12px 14px;
|
||||
border: 1px solid var(--cyw-border);
|
||||
border-radius: 6px;
|
||||
font-size: 15px;
|
||||
color: var(--cyw-text);
|
||||
user-select: none;
|
||||
transition: border-color 0.12s, background 0.12s;
|
||||
}
|
||||
|
||||
.cyp-radio-label:hover {
|
||||
border-color: var(--cyw-accent);
|
||||
background: var(--cyw-accent-light);
|
||||
}
|
||||
|
||||
.cyp-radio-label input[type="radio"] {
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
accent-color: var(--cyw-accent);
|
||||
cursor: pointer;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.cyp-radio-label.cyp-selected {
|
||||
border-color: var(--cyw-accent);
|
||||
background: var(--cyw-accent-light);
|
||||
}
|
||||
|
||||
/* ── Buttons ────────────────────────────────────────────── */
|
||||
|
||||
.cyp-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-top: 28px;
|
||||
padding-top: 24px;
|
||||
border-top: 1px solid var(--cyw-border);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.cyp-withdrawal-page .btn-primary {
|
||||
background: var(--cyw-accent) !important;
|
||||
border: 1px solid var(--cyw-accent) !important;
|
||||
color: #fff !important;
|
||||
padding: 11px 28px;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.03em;
|
||||
cursor: pointer;
|
||||
transition: background 0.15s;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.cyp-withdrawal-page .btn-primary:hover {
|
||||
background: var(--cyw-accent-hover) !important;
|
||||
border-color: var(--cyw-accent-hover) !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.cyp-withdrawal-page .btn-secondary {
|
||||
background: transparent !important;
|
||||
border: 1px solid var(--cyw-border) !important;
|
||||
color: var(--cyw-text-muted) !important;
|
||||
padding: 11px 22px;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.15s, color 0.15s;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.cyp-withdrawal-page .btn-secondary:hover {
|
||||
border-color: var(--cyw-text-muted) !important;
|
||||
color: var(--cyw-text) !important;
|
||||
}
|
||||
|
||||
/* ── Summary table (confirm + success) ─────────────────── */
|
||||
|
||||
.cyp-summary {
|
||||
border: 1px solid var(--cyw-border);
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.cyp-summary-row {
|
||||
display: grid;
|
||||
grid-template-columns: 176px 1fr;
|
||||
border-bottom: 1px solid var(--cyw-border);
|
||||
}
|
||||
|
||||
.cyp-summary-row:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.cyp-summary-key {
|
||||
padding: 11px 14px;
|
||||
background: #f7f5f2;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.06em;
|
||||
text-transform: uppercase;
|
||||
color: var(--cyw-text-muted);
|
||||
border-right: 1px solid var(--cyw-border);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.cyp-summary-val {
|
||||
padding: 11px 14px;
|
||||
font-size: 14px;
|
||||
color: var(--cyw-text);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* ── Legal fine print ───────────────────────────────────── */
|
||||
|
||||
.cyp-legal {
|
||||
margin-top: 24px;
|
||||
padding-top: 20px;
|
||||
border-top: 1px solid var(--cyw-border);
|
||||
font-size: 12px;
|
||||
color: var(--cyw-text-muted);
|
||||
line-height: 1.65;
|
||||
}
|
||||
|
||||
.cyp-legal a {
|
||||
color: var(--cyw-accent);
|
||||
text-underline-offset: 2px;
|
||||
}
|
||||
|
||||
/* ── Success page ───────────────────────────────────────── */
|
||||
|
||||
.cyp-success-header {
|
||||
text-align: center;
|
||||
padding-bottom: 24px;
|
||||
margin-bottom: 24px;
|
||||
border-bottom: 1px solid var(--cyw-border);
|
||||
}
|
||||
|
||||
.cyp-success-icon {
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
background: var(--cyw-success-bg);
|
||||
border: 2px solid #b8dfc9;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 auto 16px;
|
||||
font-size: 22px;
|
||||
color: var(--cyw-success);
|
||||
}
|
||||
|
||||
.cyp-success-header h2 {
|
||||
font-family: Georgia, serif;
|
||||
font-size: 20px;
|
||||
font-weight: normal;
|
||||
color: var(--cyw-success);
|
||||
margin: 0 0 6px;
|
||||
}
|
||||
|
||||
.cyp-success-header p {
|
||||
font-size: 14px;
|
||||
color: var(--cyw-text-muted);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.cyp-print-btn {
|
||||
background: none;
|
||||
border: 1px solid var(--cyw-border);
|
||||
color: var(--cyw-text-muted);
|
||||
padding: 9px 18px;
|
||||
border-radius: 6px;
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
font-family: inherit;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
transition: border-color 0.15s, color 0.15s;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.cyp-print-btn:hover {
|
||||
border-color: var(--cyw-text-muted);
|
||||
color: var(--cyw-text);
|
||||
}
|
||||
|
||||
/* ── Responsive ─────────────────────────────────────────── */
|
||||
|
||||
@media (max-width: 576px) {
|
||||
.cyp-withdrawal-page .card,
|
||||
.cyp-withdrawal-page .card-block {
|
||||
padding: 20px 16px;
|
||||
}
|
||||
|
||||
.cyp-summary-row {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.cyp-summary-key {
|
||||
border-right: none;
|
||||
border-bottom: 1px solid var(--cyw-border);
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
|
||||
.cyp-step-line {
|
||||
width: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
@media print {
|
||||
.cyp-withdrawal-page .page-header,
|
||||
.cyp-steps,
|
||||
.cyp-actions,
|
||||
.cyp-print-btn,
|
||||
.cyp-legal {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user