Новые изменения в проект
This commit is contained in:
Web-serfer
parent
1a1871f5f3
commit
ecb720f751
5 changed files with 100 additions and 30 deletions
|
|
@ -5,6 +5,8 @@ interface Props {
|
|||
buttonText: string;
|
||||
buttonHref: string;
|
||||
className?: string;
|
||||
dataAnimation?: string;
|
||||
dataDelay?: string | number;
|
||||
}
|
||||
|
||||
const {
|
||||
|
|
@ -12,11 +14,19 @@ const {
|
|||
description = 'Для продолжения, пожалуйста, войдите в личный кабинет.',
|
||||
buttonText = 'Войти в кабинет',
|
||||
buttonHref = '/auth/sign-in',
|
||||
className = ''
|
||||
className = '',
|
||||
dataAnimation = 'fade-up',
|
||||
dataDelay = 0
|
||||
} = Astro.props;
|
||||
|
||||
const delay = typeof dataDelay === 'number' ? dataDelay : parseInt(String(dataDelay)) || 0;
|
||||
---
|
||||
|
||||
<div class={`auth-lock-card ${className}`}>
|
||||
<div
|
||||
class={`auth-lock-card animate-on-scroll ${className}`}
|
||||
data-animation={dataAnimation}
|
||||
data-delay={delay}
|
||||
>
|
||||
<div class="lock-icon-container">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lock-icon">
|
||||
<rect width="18" height="11" x="3" y="11" rx="2" ry="2"></rect>
|
||||
|
|
@ -24,50 +34,119 @@ const {
|
|||
</svg>
|
||||
</div>
|
||||
<h3 class="lock-title">{title}</h3>
|
||||
<p class="lock-text" style={`display: ${description ? 'block' : 'none'}`}>{description}</p>
|
||||
<a href={buttonHref} class="auth-button">{buttonText}</a>
|
||||
<p class="lock-text">{description}</p>
|
||||
<a href={buttonHref} class="auth-button">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="button-icon">
|
||||
<path d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1"/>
|
||||
</svg>
|
||||
{buttonText}
|
||||
</a>
|
||||
<p class="auth-hint">
|
||||
Нет аккаунта? <a href="/auth/sign-up" class="register-link">Зарегистрироваться</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.auth-lock-card {
|
||||
max-width: 600px;
|
||||
max-width: 700px;
|
||||
margin: 0 auto;
|
||||
background: #f8fafc;
|
||||
border: 2px dashed #e2e8f0;
|
||||
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 1.5rem;
|
||||
padding: 4rem 2rem;
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.auth-lock-card {
|
||||
padding: 3rem;
|
||||
}
|
||||
}
|
||||
|
||||
.lock-icon-container {
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
background: #ffffff;
|
||||
background: linear-gradient(135deg, rgba(37, 99, 235, 0.2) 0%, rgba(30, 64, 175, 0.3) 100%);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #94a3b8;
|
||||
color: #2563eb;
|
||||
margin-bottom: 1.5rem;
|
||||
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05);
|
||||
box-shadow: 0 10px 15px -3px rgba(37, 99, 235, 0.15);
|
||||
}
|
||||
|
||||
.lock-icon { width: 2rem; height: 2rem; }
|
||||
.lock-title { color: #1e293b; font-size: 1.5rem; font-weight: 700; margin: 0 0 1rem; }
|
||||
.lock-text { color: #64748b; line-height: 1.6; margin: 0 0 2rem; max-width: 400px; }
|
||||
|
||||
.lock-title {
|
||||
color: #0f172a;
|
||||
font-size: 1.375rem;
|
||||
font-weight: 700;
|
||||
margin: 0 0 0.75rem;
|
||||
}
|
||||
|
||||
.lock-text {
|
||||
color: #475569;
|
||||
line-height: 1.6;
|
||||
margin: 0 0 1.75rem;
|
||||
max-width: 420px;
|
||||
}
|
||||
|
||||
.auth-button {
|
||||
background: #1e293b;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(to bottom, #2563eb, #1e40af);
|
||||
color: #ffffff;
|
||||
padding: 0.875rem 2rem;
|
||||
border-radius: 0.75rem;
|
||||
font-weight: 700;
|
||||
font-weight: 600;
|
||||
font-size: 1rem;
|
||||
text-decoration: none;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 2px 4px rgba(37, 99, 235, 0.3);
|
||||
}
|
||||
|
||||
.auth-button:hover { background: #0f172a; transform: translateY(-2px); }
|
||||
.auth-button:hover {
|
||||
background: linear-gradient(to bottom, #1d4ed8, #1e3a8a);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4);
|
||||
}
|
||||
|
||||
.button-icon {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
.auth-hint {
|
||||
margin: 1.25rem 0 0;
|
||||
color: #64748b;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.register-link {
|
||||
color: #2563eb;
|
||||
font-weight: 500;
|
||||
text-decoration: none;
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
|
||||
.register-link:hover {
|
||||
color: #1d4ed8;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.auth-lock-card {
|
||||
padding: 2.5rem 1.5rem;
|
||||
}
|
||||
|
||||
.lock-title {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -185,19 +185,16 @@ const title = 'Бесплатная консультация';
|
|||
inset: 0;
|
||||
background: rgba(10, 25, 41, 0.85);
|
||||
backdrop-filter: blur(8px);
|
||||
display: flex;
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 9999;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
padding: 2rem 1rem;
|
||||
}
|
||||
|
||||
.modal-overlay.active {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.modal-container {
|
||||
|
|
|
|||
|
|
@ -99,15 +99,11 @@ export default function ReviewFormContainer() {
|
|||
</Show>
|
||||
|
||||
<Show when={isLoading()}>
|
||||
<div class="max-w-700px mx-auto text-center py-12">
|
||||
<div class="inline-block animate-spin rounded-full h-12 w-12 border-4 border-blue-600 border-t-transparent"></div>
|
||||
<p class="mt-4 text-gray-600">Загрузка...</p>
|
||||
</div>
|
||||
</Show>
|
||||
|
||||
<Show when={!isLoading()}>
|
||||
<Show when={isAuthenticated()} fallback={
|
||||
<div class="max-w-700px mx-auto">
|
||||
<div class="mx-auto" style="max-width: 700px;">
|
||||
<div class="bg-linear-to-br from-gray-50 to-gray-100 rounded-2xl p-8 md:p-12 border border-gray-200 text-center" style="background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);">
|
||||
<div class="w-20 h-20 mx-auto mb-6 rounded-full flex items-center justify-center" style="background: linear-gradient(135deg, rgba(37, 99, 235, 0.2) 0%, rgba(30, 64, 175, 0.3) 100%);">
|
||||
<svg class="w-10 h-10 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
|
|
|
|||
|
|
@ -94,10 +94,6 @@ export default function ReviewsList(props: ReviewsListProps) {
|
|||
return (
|
||||
<>
|
||||
<Show when={isLoading()}>
|
||||
<div class="text-center py-12">
|
||||
<div class="inline-block animate-spin rounded-full h-12 w-12 border-4 border-blue-600 border-t-transparent"></div>
|
||||
<p class="mt-4 text-gray-600">Загрузка отзывов...</p>
|
||||
</div>
|
||||
</Show>
|
||||
|
||||
<Show when={error()}>
|
||||
|
|
|
|||
|
|
@ -166,6 +166,8 @@ const isAuthorized = false; // Измените на true, чтобы увиде
|
|||
buttonText="Войти в кабинет"
|
||||
buttonHref="/auth/sign-in"
|
||||
className="animate-on-scroll"
|
||||
dataAnimation="fade-up"
|
||||
dataDelay="200"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue