refactor: Shorten registration success page to fit one screen
Some checks are pending
NordaBiz Tests / Unit & Integration Tests (push) Waiting to run
NordaBiz Tests / E2E Tests (Playwright) (push) Blocked by required conditions
NordaBiz Tests / Smoke Tests (Production) (push) Blocked by required conditions
NordaBiz Tests / Send Failure Notification (push) Blocked by required conditions
Some checks are pending
NordaBiz Tests / Unit & Integration Tests (push) Waiting to run
NordaBiz Tests / E2E Tests (Playwright) (push) Blocked by required conditions
NordaBiz Tests / Smoke Tests (Production) (push) Blocked by required conditions
NordaBiz Tests / Send Failure Notification (push) Blocked by required conditions
- Reduce padding, margins, and icon sizes - Compact email box to horizontal layout - Steps in 2x2 grid instead of vertical list - Combine timer and spam warning - Shorter button text User feedback: page should not require scrolling
This commit is contained in:
parent
b5ad969191
commit
8394be7a1c
@ -7,28 +7,28 @@
|
||||
{% block extra_css %}
|
||||
<style>
|
||||
.auth-container {
|
||||
max-width: 520px;
|
||||
max-width: 480px;
|
||||
margin: 0 auto;
|
||||
padding: var(--spacing-2xl) 0;
|
||||
padding: var(--spacing-md) 0;
|
||||
}
|
||||
|
||||
.auth-card {
|
||||
background-color: var(--surface);
|
||||
padding: var(--spacing-2xl);
|
||||
padding: var(--spacing-lg);
|
||||
border-radius: var(--radius-xl);
|
||||
box-shadow: var(--shadow-lg);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.success-icon {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
background: linear-gradient(135deg, #10b981, #059669);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 auto var(--spacing-xl);
|
||||
margin: 0 auto var(--spacing-md);
|
||||
animation: scaleIn 0.5s ease-out;
|
||||
}
|
||||
|
||||
@ -38,56 +38,62 @@
|
||||
}
|
||||
|
||||
.success-icon svg {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.success-title {
|
||||
font-size: var(--font-size-2xl);
|
||||
font-size: var(--font-size-xl);
|
||||
color: var(--text-primary);
|
||||
margin-bottom: var(--spacing-md);
|
||||
margin-bottom: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.success-subtitle {
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: var(--spacing-xl);
|
||||
line-height: 1.6;
|
||||
margin-bottom: var(--spacing-md);
|
||||
font-size: var(--font-size-sm);
|
||||
}
|
||||
|
||||
.email-box {
|
||||
background-color: #f0f9ff;
|
||||
border: 2px solid #0ea5e9;
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--spacing-lg);
|
||||
margin-bottom: var(--spacing-xl);
|
||||
border-radius: var(--radius);
|
||||
padding: var(--spacing-md);
|
||||
margin-bottom: var(--spacing-md);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-md);
|
||||
}
|
||||
|
||||
.email-icon {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: #0ea5e9;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 auto var(--spacing-md);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.email-icon svg {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.email-info {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.email-label {
|
||||
font-size: var(--font-size-sm);
|
||||
font-size: var(--font-size-xs);
|
||||
color: #0369a1;
|
||||
margin-bottom: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.email-address {
|
||||
font-size: var(--font-size-lg);
|
||||
font-size: var(--font-size-base);
|
||||
font-weight: 600;
|
||||
color: #0c4a6e;
|
||||
word-break: break-all;
|
||||
@ -96,51 +102,38 @@
|
||||
.steps-box {
|
||||
background-color: var(--background);
|
||||
border-radius: var(--radius);
|
||||
padding: var(--spacing-lg);
|
||||
margin-bottom: var(--spacing-xl);
|
||||
padding: var(--spacing-sm) var(--spacing-md);
|
||||
margin-bottom: var(--spacing-sm);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.steps-title {
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: var(--spacing-md);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.steps-title svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.steps-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.steps-list li {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: var(--spacing-sm);
|
||||
padding: var(--spacing-sm) 0;
|
||||
align-items: center;
|
||||
gap: var(--spacing-xs);
|
||||
color: var(--text-secondary);
|
||||
font-size: var(--font-size-sm);
|
||||
font-size: var(--font-size-xs);
|
||||
}
|
||||
|
||||
.step-number {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
background: var(--primary);
|
||||
color: white;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: var(--font-size-xs);
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
@ -149,30 +142,30 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: var(--spacing-sm);
|
||||
padding: var(--spacing-md);
|
||||
gap: var(--spacing-xs);
|
||||
padding: var(--spacing-sm);
|
||||
background-color: #fef3c7;
|
||||
border-radius: var(--radius);
|
||||
margin-bottom: var(--spacing-xl);
|
||||
margin-bottom: var(--spacing-md);
|
||||
color: #92400e;
|
||||
font-size: var(--font-size-sm);
|
||||
font-size: var(--font-size-xs);
|
||||
}
|
||||
|
||||
.timer-box svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.resend-section {
|
||||
padding-top: var(--spacing-lg);
|
||||
padding-top: var(--spacing-md);
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.resend-text {
|
||||
color: var(--text-secondary);
|
||||
font-size: var(--font-size-sm);
|
||||
margin-bottom: var(--spacing-md);
|
||||
font-size: var(--font-size-xs);
|
||||
margin-bottom: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.btn-outline {
|
||||
@ -198,9 +191,7 @@
|
||||
</div>
|
||||
|
||||
<h1 class="success-title">Rejestracja zakonczona!</h1>
|
||||
<p class="success-subtitle">
|
||||
Pozostal jeszcze jeden krok - aktywacja konta przez email.
|
||||
</p>
|
||||
<p class="success-subtitle">Aktywuj konto klikajac link w mailu.</p>
|
||||
|
||||
<div class="email-box">
|
||||
<div class="email-icon">
|
||||
@ -208,34 +199,18 @@
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="email-label">Wyslalismy link aktywacyjny na adres:</div>
|
||||
<div class="email-address">{{ email }}</div>
|
||||
<div class="email-info">
|
||||
<div class="email-label">Link wyslany na:</div>
|
||||
<div class="email-address">{{ email }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="steps-box">
|
||||
<div class="steps-title">
|
||||
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/>
|
||||
</svg>
|
||||
Co teraz?
|
||||
</div>
|
||||
<ol class="steps-list">
|
||||
<li>
|
||||
<span class="step-number">1</span>
|
||||
<span>Otworz skrzynke email <strong>{{ email }}</strong></span>
|
||||
</li>
|
||||
<li>
|
||||
<span class="step-number">2</span>
|
||||
<span>Znajdz wiadomosc od <strong>Norda Biznes Partner</strong></span>
|
||||
</li>
|
||||
<li>
|
||||
<span class="step-number">3</span>
|
||||
<span>Kliknij przycisk <strong>"Aktywuj konto"</strong> w wiadomosci</span>
|
||||
</li>
|
||||
<li>
|
||||
<span class="step-number">4</span>
|
||||
<span>Zostaniesz automatycznie zalogowany do portalu</span>
|
||||
</li>
|
||||
<li><span class="step-number">1</span><span>Otworz skrzynke</span></li>
|
||||
<li><span class="step-number">2</span><span>Znajdz mail od Norda</span></li>
|
||||
<li><span class="step-number">3</span><span>Kliknij "Aktywuj konto"</span></li>
|
||||
<li><span class="step-number">4</span><span>Zostaniesz zalogowany</span></li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
@ -243,15 +218,13 @@
|
||||
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
||||
</svg>
|
||||
<span>Link aktywacyjny jest wazny przez <strong>24 godziny</strong></span>
|
||||
<span>Link wazny <strong>24h</strong> · Sprawdz tez folder SPAM</span>
|
||||
</div>
|
||||
|
||||
<div class="resend-section">
|
||||
<p class="resend-text">
|
||||
Nie otrzymales emaila? Sprawdz folder SPAM lub wyslij ponownie.
|
||||
</p>
|
||||
<p class="resend-text">Nie otrzymales maila?</p>
|
||||
<a href="{{ url_for('resend_verification') }}" class="btn btn-outline">
|
||||
Wyslij ponownie link aktywacyjny
|
||||
Wyslij ponownie
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user