<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>安装完成 — DBErp</title>
    <style>
        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
        :root {
            color-scheme: light;
            --green:   #16a34a; --green-d: #15803d; --green-dd: #14532d;
            --green-bg: #f0fdf4; --green-bg2: #dcfce7; --green-br: #bbf7d0;
            --s50: #f8fafc; --s100: #f1f5f9; --s200: #e2e8f0;
            --s400: #94a3b8; --s500: #64748b; --s600: #475569;
            --s700: #334155; --s800: #1e293b; --s900: #0f172a;
        }
        body {
            font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans SC", sans-serif;
            background-color: #ecfdf5;
            background-image:
                radial-gradient(ellipse 110% 65% at 0% 0%,  rgba(187,247,208,.7)  0%, transparent 55%),
                radial-gradient(ellipse  80% 55% at 100% 100%, rgba(219,234,254,.45) 0%, transparent 55%),
                radial-gradient(circle, rgba(22,163,74,.04) 1px, transparent 1px);
            background-size: auto, auto, 28px 28px;
            background-attachment: fixed;
            color: var(--s900);
            line-height: 1.65;
            min-height: 100vh;
        }

        /* ── Stepper ───────────────────────────────── */
        .stepper-wrap { max-width: 44rem; margin: 0 auto; padding: 1.375rem 1.5rem .5rem; }
        .stepper { display: flex; align-items: flex-start; }
        .step { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .3rem; }
        .step-conn { flex: 1; height: 3px; margin-top: .875rem; border-radius: 2px; background: var(--green); }
        .step-dot {
            width: 2rem; height: 2rem; border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            border: 2px solid var(--green); background: var(--green); color: #fff; flex-shrink: 0;
        }
        .step-lbl { font-size: .6875rem; color: var(--green-d); font-weight: 600; text-align: center; white-space: nowrap; line-height: 1.3; }

        /* ── Layout ────────────────────────────────── */
        .wrap { max-width: 42rem; margin: 0 auto; padding: 1.75rem 1.5rem 4rem; }

        /* ── Card ──────────────────────────────────── */
        .card {
            background: #fff;
            border-radius: 1.25rem;
            border: 1px solid var(--green-br);
            box-shadow: 0 20px 40px -8px rgba(22,163,74,.16), 0 4px 12px -4px rgba(22,163,74,.1);
            overflow: hidden;
            animation: card-rise .5s cubic-bezier(.22,.68,0,1.2) both;
        }
        @keyframes card-rise {
            from { opacity: 0; transform: translateY(20px) scale(.98); }
            to   { opacity: 1; transform: translateY(0)   scale(1); }
        }

        /* top accent bar */
        .card::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0; height: 4px;
            background: linear-gradient(90deg, #16a34a 0%, #10b981 40%, #059669 70%, #16a34a 100%);
            background-size: 200% 100%;
            animation: shimmer 3s linear infinite;
        }
        @keyframes shimmer {
            0%   { background-position: 200% 0; }
            100% { background-position: -200% 0; }
        }

        /* ── Card top ──────────────────────────────── */
        .card-top {
            padding: 3rem 2rem 2.25rem;
            background: linear-gradient(170deg, #f0fdf4 0%, #ecfdf5 100%);
            border-bottom: 1px solid var(--green-br);
            display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.25rem;
            position: relative; overflow: hidden;
        }
        /* decorative rings */
        .card-top::after {
            content: '';
            position: absolute;
            inset: -60px;
            background:
                radial-gradient(circle 180px at 50% 50%, rgba(22,163,74,.06) 0%, transparent 70%);
            pointer-events: none;
        }

        /* bouncing check icon */
        @keyframes icon-pop {
            0%   { transform: scale(0) rotate(-20deg); opacity: 0; }
            60%  { transform: scale(1.15) rotate(4deg); opacity: 1; }
            80%  { transform: scale(.94) rotate(-2deg); }
            100% { transform: scale(1) rotate(0deg); opacity: 1; }
        }
        @keyframes icon-glow {
            0%, 100% { box-shadow: 0 6px 20px rgba(22,163,74,.32), 0 0 0 0   rgba(22,163,74,.12); }
            50%       { box-shadow: 0 8px 28px rgba(22,163,74,.52), 0 0 0 10px rgba(22,163,74,.08); }
        }
        .success-icon {
            position: relative; z-index: 1;
            width: 5rem; height: 5rem;
            background: linear-gradient(140deg, #22c55e, #16a34a);
            border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            animation: icon-pop .6s .15s cubic-bezier(.22,.68,0,1.2) both, icon-glow 3s 1s ease-in-out infinite;
        }
        .success-icon-ring {
            position: absolute; inset: -8px;
            border-radius: 50%;
            border: 2px solid rgba(22,163,74,.2);
            animation: ring-expand 1.6s .7s ease-out both;
        }
        .success-icon-ring2 {
            position: absolute; inset: -18px;
            border-radius: 50%;
            border: 1.5px solid rgba(22,163,74,.1);
            animation: ring-expand 1.6s .9s ease-out both;
        }
        @keyframes ring-expand {
            from { transform: scale(.6); opacity: 0; }
            to   { transform: scale(1);  opacity: 1; }
        }

        /* title */
        .card-top-text { position: relative; z-index: 1; }
        h1 {
            font-size: 1.875rem; font-weight: 900;
            color: var(--green-dd);
            letter-spacing: -.025em; line-height: 1.2;
            margin-bottom: .35rem;
        }
        .status-msg { font-size: .9375rem; color: var(--green-d); font-weight: 500; }

        /* ── Card body ─────────────────────────────── */
        .card-bd { padding: 2rem 2rem 2.25rem; }

        /* enter button */
        .actions { display: flex; justify-content: center; }
        .btn-enter {
            display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
            padding: .9rem 2.5rem;
            border-radius: .75rem;
            font-size: 1.0625rem; font-weight: 700;
            text-decoration: none; border: none; cursor: pointer;
            background: linear-gradient(135deg, #22c55e 0%, #16a34a 50%, #059669 100%);
            color: #fff;
            box-shadow: 0 4px 12px rgba(22,163,74,.4), 0 8px 24px rgba(22,163,74,.2);
            transition: box-shadow .18s, transform .18s;
            letter-spacing: .01em;
        }
        .btn-enter:hover {
            box-shadow: 0 8px 20px rgba(22,163,74,.5), 0 16px 36px rgba(22,163,74,.22);
            transform: translateY(-2px);
        }
        .btn-enter:active { transform: translateY(1px) scale(.98); box-shadow: 0 2px 6px rgba(22,163,74,.3); }
    </style>
</head>
<body>

@include('install.partials.install-wizard-header')

<div class="stepper-wrap">
    <div class="stepper">
        <div class="step">
            <div class="step-dot">
                <svg width="11" height="11" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd"/></svg>
            </div>
            <div class="step-lbl">欢迎</div>
        </div>
        <div class="step-conn"></div>
        <div class="step">
            <div class="step-dot">
                <svg width="11" height="11" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd"/></svg>
            </div>
            <div class="step-lbl">环境检测</div>
        </div>
        <div class="step-conn"></div>
        <div class="step">
            <div class="step-dot">
                <svg width="11" height="11" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd"/></svg>
            </div>
            <div class="step-lbl">数据库配置</div>
        </div>
        <div class="step-conn"></div>
        <div class="step">
            <div class="step-dot">
                <svg width="11" height="11" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd"/></svg>
            </div>
            <div class="step-lbl">系统初始化</div>
        </div>
        <div class="step-conn"></div>
        <div class="step">
            <div class="step-dot">
                <svg width="11" height="11" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd"/></svg>
            </div>
            <div class="step-lbl">安装完成</div>
        </div>
    </div>
</div>

<div class="wrap">
    <div class="card">
        <div class="card-top">
            <div style="position:relative; display:inline-block;">
                <div class="success-icon-ring2" aria-hidden="true"></div>
                <div class="success-icon-ring"  aria-hidden="true"></div>
                <div class="success-icon" aria-hidden="true">
                    <svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round">
                        <polyline points="20 6 9 17 4 12"/>
                    </svg>
                </div>
            </div>
            <div class="card-top-text">
                <h1>安装已完成</h1>
                <p class="status-msg">{{ \App\Services\Install\WebInstallProgressDisplay::COMPLETED_USER_MESSAGE }}</p>
            </div>
        </div>
        <div class="card-bd">
            @include('install.partials.official-feedback-entry', ['variant' => 'completion', 'compact' => true])

            <div class="actions">
                <a class="btn-enter" href="{{ $adminUrl }}">
                    <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"/><polyline points="10 17 15 12 10 7"/><line x1="15" x2="3" y1="12" y2="12"/></svg>
                    进入管理端
                </a>
            </div>
        </div>
    </div>
</div>

@include('install.partials.wizard-action-feedback')
</body>
</html>
