Add request access modal on login page with Telegram notification
- Modal form: name, company, email, phone (required), manager (optional), product checkboxes - Products loaded from DB via GET /api/public/services-by-category (public route) - POST /api/request-access sends styled Telegram message with divider and emojis - Dark-themed modal matching login page design - CSS: overlay, card, fields, checkbox list, error, footer buttons
This commit is contained in:
@@ -1328,3 +1328,188 @@ button {
|
||||
color: #6bbfff;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* ========== Request Access Modal ========== */
|
||||
.access-modal-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(3, 8, 18, 0.82);
|
||||
backdrop-filter: blur(6px);
|
||||
z-index: 9000;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.access-modal {
|
||||
background: linear-gradient(150deg, #0b1a2e 0%, #0d2040 100%);
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 24px 80px rgba(0,0,0,0.65), 0 0 0 1px rgba(42,130,210,0.15);
|
||||
width: 100%;
|
||||
max-width: 520px;
|
||||
max-height: 90vh;
|
||||
overflow-y: auto;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: rgba(42,130,210,0.3) transparent;
|
||||
}
|
||||
|
||||
.access-modal-header {
|
||||
padding: 1.75rem 1.75rem 0;
|
||||
}
|
||||
.access-modal-title {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 700;
|
||||
color: #e0f0ff;
|
||||
margin-bottom: 0.3rem;
|
||||
}
|
||||
.access-modal-sub {
|
||||
font-size: 0.85rem;
|
||||
color: rgba(160,205,238,0.65);
|
||||
}
|
||||
|
||||
.access-modal-body {
|
||||
padding: 1.25rem 1.75rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.access-field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.35rem;
|
||||
}
|
||||
.access-field label {
|
||||
font-size: 0.82rem;
|
||||
font-weight: 600;
|
||||
color: rgba(160,205,238,0.8);
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
.access-field .req {
|
||||
color: #5aadee;
|
||||
}
|
||||
.access-field input[type=text],
|
||||
.access-field input[type=email],
|
||||
.access-field input[type=tel] {
|
||||
background: rgba(255,255,255,0.05);
|
||||
border: 1px solid rgba(255,255,255,0.12);
|
||||
border-radius: 8px;
|
||||
padding: 0.6rem 0.85rem;
|
||||
color: #daeeff;
|
||||
font-size: 0.92rem;
|
||||
outline: none;
|
||||
transition: border-color 0.15s, box-shadow 0.15s;
|
||||
}
|
||||
.access-field input[type=text]::placeholder,
|
||||
.access-field input[type=email]::placeholder,
|
||||
.access-field input[type=tel]::placeholder {
|
||||
color: rgba(120,170,210,0.35);
|
||||
}
|
||||
.access-field input[type=text]:focus,
|
||||
.access-field input[type=email]:focus,
|
||||
.access-field input[type=tel]:focus {
|
||||
border-color: rgba(42,130,210,0.55);
|
||||
box-shadow: 0 0 0 3px rgba(42,130,210,0.12);
|
||||
}
|
||||
|
||||
.access-products-wrap {
|
||||
background: rgba(255,255,255,0.03);
|
||||
border: 1px solid rgba(255,255,255,0.08);
|
||||
border-radius: 8px;
|
||||
padding: 0.75rem;
|
||||
max-height: 200px;
|
||||
overflow-y: auto;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: rgba(42,130,210,0.3) transparent;
|
||||
}
|
||||
.access-products-loading {
|
||||
color: rgba(140,190,228,0.55);
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
.access-products-group {
|
||||
margin-bottom: 0.6rem;
|
||||
}
|
||||
.access-products-group:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.access-products-cat {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
color: rgba(100,165,215,0.6);
|
||||
margin-bottom: 0.35rem;
|
||||
}
|
||||
.access-product-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.2rem 0;
|
||||
cursor: pointer;
|
||||
font-size: 0.875rem;
|
||||
color: rgba(200,228,255,0.8);
|
||||
}
|
||||
.access-product-item input[type=checkbox] {
|
||||
accent-color: #1e7dc8;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.access-product-item:hover span {
|
||||
color: #daeeff;
|
||||
}
|
||||
|
||||
.access-modal-error {
|
||||
background: rgba(220,60,60,0.12);
|
||||
border: 1px solid rgba(220,60,60,0.3);
|
||||
border-radius: 6px;
|
||||
padding: 0.55rem 0.85rem;
|
||||
color: #f08080;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.access-modal-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 0.75rem;
|
||||
padding: 0 1.75rem 1.5rem;
|
||||
}
|
||||
|
||||
.access-btn-cancel {
|
||||
background: rgba(255,255,255,0.05);
|
||||
border: 1px solid rgba(255,255,255,0.12);
|
||||
border-radius: 8px;
|
||||
padding: 0.6rem 1.25rem;
|
||||
color: rgba(180,215,240,0.75);
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: background 0.15s, border-color 0.15s;
|
||||
}
|
||||
.access-btn-cancel:hover {
|
||||
background: rgba(255,255,255,0.09);
|
||||
border-color: rgba(255,255,255,0.2);
|
||||
}
|
||||
|
||||
.access-btn-submit {
|
||||
background: linear-gradient(135deg, #1e7dc8 0%, #1360a0 100%);
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
padding: 0.6rem 1.5rem;
|
||||
color: #fff;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.15s, box-shadow 0.15s;
|
||||
box-shadow: 0 2px 12px rgba(20,96,160,0.4);
|
||||
}
|
||||
.access-btn-submit:hover:not(:disabled) {
|
||||
opacity: 0.9;
|
||||
box-shadow: 0 4px 18px rgba(20,96,160,0.55);
|
||||
}
|
||||
.access-btn-submit:disabled {
|
||||
opacity: 0.55;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user