- aggiornata la grafica della Home di RISO
- Profilo Completition - Email Verificata - Invita un Amico (invio di email)
This commit is contained in:
Surya Paolo
@@ -0,0 +1,258 @@
|
||||
.user-verification-container {
|
||||
max-width: 700px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.admission-section {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 400px;
|
||||
}
|
||||
|
||||
.admission-card {
|
||||
background: white;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
background: linear-gradient(135deg, #f5f5f5 0%, #e0e0e0 100%);
|
||||
padding: 40px 24px;
|
||||
|
||||
text-align: center;
|
||||
border-bottom: 3px solid #ffa726;
|
||||
@media (max-width: 600px) {
|
||||
padding: 4px 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.card-title {
|
||||
margin: 16px 0 8px 0;
|
||||
|
||||
font-size: 26px;
|
||||
font-weight: 600;
|
||||
color: #1a1a1a;
|
||||
|
||||
@media (max-width: 600px) {
|
||||
margin: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.card-subtitle {
|
||||
margin: 0;
|
||||
font-size: 15px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.card-content {
|
||||
padding: 32px 24px;
|
||||
}
|
||||
|
||||
.info-box {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
padding: 20px;
|
||||
background: #e3f2fd;
|
||||
border-radius: 12px;
|
||||
margin-bottom: 32px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.info-text {
|
||||
flex: 1;
|
||||
|
||||
p {
|
||||
margin: 0 0 12px 0;
|
||||
font-size: 15px;
|
||||
line-height: 1.6;
|
||||
color: #1565c0;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.small-text {
|
||||
font-size: 14px;
|
||||
color: #1976d2;
|
||||
}
|
||||
|
||||
strong {
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.telegram-link {
|
||||
color: #1976d2;
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.action-section {
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.section-label {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #666;
|
||||
margin-bottom: 12px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.primary-action-btn {
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.divider {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 32px 0;
|
||||
color: #999;
|
||||
font-size: 13px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
content: '';
|
||||
flex: 1;
|
||||
height: 1px;
|
||||
background: #e0e0e0;
|
||||
}
|
||||
|
||||
span {
|
||||
padding: 0 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.support-section {
|
||||
.section-label {
|
||||
justify-content: center;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.support-buttons {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.support-btn {
|
||||
flex: 1;
|
||||
height: 44px;
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
max-width: 180px;
|
||||
}
|
||||
|
||||
.telegram-btn {
|
||||
background: #0088cc !important;
|
||||
}
|
||||
|
||||
.email-btn {
|
||||
background: #757575 !important;
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
padding: 24px;
|
||||
background: #f8f9fa;
|
||||
border-top: 1px solid #e0e0e0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.refresh-btn {
|
||||
height: 48px;
|
||||
padding: 0 32px;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
box-shadow: 0 2px 8px rgba(76, 175, 80, 0.3);
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 4px 12px rgba(76, 175, 80, 0.4);
|
||||
}
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 600px) {
|
||||
.user-verification-container {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.admission-section {
|
||||
min-height: auto;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
padding: 8px 5px;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.card-content {
|
||||
padding: 24px 16px;
|
||||
}
|
||||
|
||||
.info-box {
|
||||
flex-direction: column;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.support-buttons {
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
|
||||
.support-btn {
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
padding: 20px 16px;
|
||||
}
|
||||
|
||||
.refresh-btn {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* Animation */
|
||||
@keyframes pulse {
|
||||
|
||||
0%,
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
.card-header q-icon {
|
||||
animation: pulse 2s ease-in-out infinite;
|
||||
}
|
||||
@@ -1,81 +1,132 @@
|
||||
<template>
|
||||
<div
|
||||
v-if="!globalStore.serverError"
|
||||
class="q-ma-sm"
|
||||
class="user-verification-container"
|
||||
>
|
||||
|
||||
<!-- Email Verification Section -->
|
||||
<div
|
||||
v-if="
|
||||
isLogged &&
|
||||
(site.confpages?.enableRegMultiChoice || !site.confpages?.enabledRegNeedTelegram)
|
||||
"
|
||||
>
|
||||
<CVerifyEmail v-if="isLogged && !isEmailVerified && !telegVerificato">
|
||||
</CVerifyEmail>
|
||||
<CVerifyEmail v-if="isLogged && !isEmailVerified && !telegVerificato" />
|
||||
</div>
|
||||
|
||||
<!-- Waiting for Admission Section -->
|
||||
<div
|
||||
v-if="userStore.isUserWaitingVerifAportador()"
|
||||
class="centeritems"
|
||||
class="admission-section"
|
||||
>
|
||||
<div class="text-h5 text-center text-bold q-mb-md">Attendi Ammissione</div>
|
||||
|
||||
<q-card class="q-ma-md q-pa-sm bg-light-blue text-dark shadow-6">
|
||||
<div class="text-h7 justify-center">
|
||||
Sei in attesa di essere Ammesso da {{ tools.getAportadorSolidario() }}.<br />
|
||||
Ti arriverà una notifica sulla Chat Telegram
|
||||
<a :href="tools.getLinkBotTelegram('', '')"
|
||||
><strong>{{ tools.getBotName() }}</strong></a
|
||||
>.<br /><br />
|
||||
|
||||
Se non dovesse arrivarti entro qualche ora, contattala per avvisarla:<br />
|
||||
<div class="admission-card">
|
||||
<!-- Header -->
|
||||
<div class="card-header">
|
||||
<q-icon
|
||||
name="schedule"
|
||||
size="56px"
|
||||
color="warning"
|
||||
/>
|
||||
<h2 class="card-title">In Attesa di Ammissione</h2>
|
||||
<p class="card-subtitle">Il tuo account sarà attivato a breve</p>
|
||||
</div>
|
||||
|
||||
<!-- Main Content -->
|
||||
<div class="card-content">
|
||||
<div class="info-box">
|
||||
<div class="info-text">
|
||||
<p>
|
||||
Sei in attesa di essere ammesso da
|
||||
<strong>{{ tools.getAportadorSolidario() }}</strong>
|
||||
</p>
|
||||
<p class="small-text">
|
||||
Riceverai una notifica sulla chat Telegram
|
||||
|
||||
<a
|
||||
:href="tools.getLinkBotTelegram('', '')"
|
||||
target="_blank"
|
||||
class="telegram-link"
|
||||
>
|
||||
<q-icon
|
||||
name="fab fa-telegram"
|
||||
size="16px"
|
||||
/>
|
||||
{{ tools.getBotName() }}
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<q-btn
|
||||
rounded
|
||||
class="q-ma-sm justify-center row"
|
||||
color="primary"
|
||||
:to="tools.getLinkProfileAportador()"
|
||||
:label="`Apri Profilo di ` + tools.getAportadorSolidario()"
|
||||
>
|
||||
</q-btn>
|
||||
<br /><br />
|
||||
<div class="text-h7 row justify-center text-bold">Per supporto con Telegram:</div>
|
||||
<q-btn
|
||||
rounded
|
||||
type="a"
|
||||
class="q-ma-sm justify-center row"
|
||||
color="primary"
|
||||
icon="fab fa-telegram"
|
||||
href="https://t.me/surya1977"
|
||||
:label="`Contatta Surya`"
|
||||
>
|
||||
</q-btn>
|
||||
<div class="text-h7 row justify-center">Oppure tramite email:</div>
|
||||
<q-btn
|
||||
rounded
|
||||
type="a"
|
||||
class="q-ma-sm justify-center row"
|
||||
color="grey"
|
||||
icon="fas fa-envelope"
|
||||
href="mailto:surya@riso.app?Subject=Richiesta%20di%20aiuto%20su%20Riso"
|
||||
:label="`Invia Email a Surya`"
|
||||
>
|
||||
</q-btn>
|
||||
<!-- Aportador Contact -->
|
||||
<div class="action-section">
|
||||
<p class="section-label justify-center">Contatta il tuo riferimento</p>
|
||||
<q-btn
|
||||
unelevated
|
||||
rounded
|
||||
class="primary-action-btn"
|
||||
color="primary"
|
||||
icon="person"
|
||||
:to="tools.getLinkProfileAportador()"
|
||||
:label="`Profilo di ${tools.getAportadorSolidario()}`"
|
||||
no-caps
|
||||
/>
|
||||
</div>
|
||||
|
||||
</q-card>
|
||||
<div class="row justify-center">
|
||||
<q-btn
|
||||
rounded
|
||||
class="q-ma-sm"
|
||||
color="positive"
|
||||
@click="tools.refreshPage()"
|
||||
icon="refresh"
|
||||
label="Verifica ora se sei stato Ammesso"
|
||||
>
|
||||
</q-btn>
|
||||
<!-- Divider -->
|
||||
<div class="divider">
|
||||
<span>Serve aiuto?</span>
|
||||
</div>
|
||||
|
||||
<!-- Support Section -->
|
||||
<div class="support-section">
|
||||
<p class="section-label">
|
||||
<q-icon
|
||||
name="support_agent"
|
||||
size="20px"
|
||||
/>
|
||||
Contatta il supporto
|
||||
</p>
|
||||
|
||||
<div class="support-buttons">
|
||||
<q-btn
|
||||
unelevated
|
||||
rounded
|
||||
class="support-btn telegram-btn"
|
||||
color="telegram"
|
||||
icon="fab fa-telegram"
|
||||
href="https://t.me/surya1977"
|
||||
target="_blank"
|
||||
label="Telegram"
|
||||
no-caps
|
||||
/>
|
||||
|
||||
<q-btn
|
||||
unelevated
|
||||
rounded
|
||||
class="support-btn email-btn"
|
||||
color="grey-7"
|
||||
icon="email"
|
||||
href="mailto:surya@riso.app?Subject=Richiesta%20di%20aiuto%20su%20Riso"
|
||||
target="_blank"
|
||||
label="Email"
|
||||
no-caps
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Footer Action -->
|
||||
<div class="card-footer">
|
||||
<q-btn
|
||||
unelevated
|
||||
rounded
|
||||
class="refresh-btn"
|
||||
color="positive"
|
||||
icon="refresh"
|
||||
label="Verifica Ammissione"
|
||||
@click="tools.refreshPage()"
|
||||
no-caps
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user