636 lines
22 KiB
PHP
636 lines
22 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Dashboard - SingleLogin Portal</title>
|
|
<!-- Google Fonts: Outfit & Inter -->
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@400;600;700;800&display=swap" rel="stylesheet">
|
|
|
|
<style>
|
|
:root {
|
|
--bg-color: #0b0f19;
|
|
--card-bg: rgba(17, 24, 39, 0.7);
|
|
--card-border: rgba(255, 255, 255, 0.08);
|
|
--accent-primary: #4f46e5;
|
|
--accent-secondary: #0078d4;
|
|
--text-main: #f3f4f6;
|
|
--text-muted: #9ca3af;
|
|
--success-color: #10b981;
|
|
--info-color: #06b6d4;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Inter', sans-serif;
|
|
background-color: var(--bg-color);
|
|
color: var(--text-main);
|
|
min-height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow-x: hidden;
|
|
position: relative;
|
|
}
|
|
|
|
/* Glowing background circles */
|
|
body::before {
|
|
content: '';
|
|
position: absolute;
|
|
width: 500px;
|
|
height: 500px;
|
|
border-radius: 50%;
|
|
background: radial-gradient(circle, rgba(79, 70, 229, 0.12) 0%, rgba(0, 0, 0, 0) 70%);
|
|
top: -200px;
|
|
right: -100px;
|
|
z-index: -1;
|
|
}
|
|
|
|
body::after {
|
|
content: '';
|
|
position: absolute;
|
|
width: 400px;
|
|
height: 400px;
|
|
border-radius: 50%;
|
|
background: radial-gradient(circle, rgba(6, 182, 212, 0.12) 0%, rgba(0, 0, 0, 0) 70%);
|
|
bottom: -100px;
|
|
left: -100px;
|
|
z-index: -1;
|
|
}
|
|
|
|
/* Navigation Bar */
|
|
.navbar {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 20px 5%;
|
|
background: rgba(17, 24, 39, 0.4);
|
|
border-bottom: 1px solid var(--card-border);
|
|
backdrop-filter: blur(12px);
|
|
-webkit-backdrop-filter: blur(12px);
|
|
z-index: 100;
|
|
}
|
|
|
|
.nav-logo {
|
|
font-family: 'Outfit', sans-serif;
|
|
font-size: 1.5rem;
|
|
font-weight: 800;
|
|
background: linear-gradient(135deg, #a5b4fc 0%, #38bdf8 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.nav-logo svg {
|
|
width: 24px;
|
|
height: 24px;
|
|
fill: #38bdf8;
|
|
}
|
|
|
|
.nav-user {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
|
|
.logout-link {
|
|
color: var(--text-muted);
|
|
text-decoration: none;
|
|
font-size: 0.85rem;
|
|
font-weight: 500;
|
|
padding: 8px 16px;
|
|
border-radius: 8px;
|
|
border: 1px solid var(--card-border);
|
|
transition: all 0.25s ease;
|
|
}
|
|
|
|
.logout-link:hover {
|
|
color: #ef4444;
|
|
border-color: rgba(239, 68, 68, 0.2);
|
|
background-color: rgba(239, 68, 68, 0.05);
|
|
}
|
|
|
|
/* Dashboard Wrapper */
|
|
.dashboard-container {
|
|
flex: 1;
|
|
padding: 40px 5%;
|
|
max-width: 1200px;
|
|
width: 100%;
|
|
margin: 0 auto;
|
|
z-index: 10;
|
|
}
|
|
|
|
/* Profile Banner Widget */
|
|
.profile-card {
|
|
background-color: var(--card-bg);
|
|
border: 1px solid var(--card-border);
|
|
border-radius: 20px;
|
|
padding: 30px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
gap: 20px;
|
|
backdrop-filter: blur(16px);
|
|
-webkit-backdrop-filter: blur(16px);
|
|
margin-bottom: 40px;
|
|
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.profile-info {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 20px;
|
|
}
|
|
|
|
.profile-avatar-container {
|
|
position: relative;
|
|
}
|
|
|
|
.profile-avatar {
|
|
width: 80px;
|
|
height: 80px;
|
|
border-radius: 50%;
|
|
object-fit: cover;
|
|
border: 3px solid var(--accent-primary);
|
|
box-shadow: 0 0 15px rgba(79, 70, 229, 0.4);
|
|
}
|
|
|
|
.profile-avatar-fallback {
|
|
width: 80px;
|
|
height: 80px;
|
|
border-radius: 50%;
|
|
background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 2rem;
|
|
font-weight: 700;
|
|
color: white;
|
|
box-shadow: 0 0 15px rgba(79, 70, 229, 0.4);
|
|
}
|
|
|
|
.profile-details h1 {
|
|
font-family: 'Outfit', sans-serif;
|
|
font-size: 1.8rem;
|
|
font-weight: 700;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.profile-email {
|
|
color: var(--text-muted);
|
|
font-size: 0.95rem;
|
|
margin-bottom: 8px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
.badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 4px 10px;
|
|
border-radius: 9999px;
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.badge-user {
|
|
background-color: rgba(6, 182, 212, 0.15);
|
|
color: var(--info-color);
|
|
border: 1px solid rgba(6, 182, 212, 0.3);
|
|
}
|
|
|
|
.badge-sso {
|
|
background-color: rgba(16, 185, 129, 0.15);
|
|
color: var(--success-color);
|
|
border: 1px solid rgba(16, 185, 129, 0.3);
|
|
}
|
|
|
|
.badge-admin {
|
|
background-color: rgba(99, 102, 241, 0.15);
|
|
color: #818cf8;
|
|
border: 1px solid rgba(99, 102, 241, 0.3);
|
|
}
|
|
|
|
.session-status {
|
|
text-align: right;
|
|
}
|
|
|
|
.status-pill {
|
|
font-size: 0.85rem;
|
|
color: var(--text-muted);
|
|
background-color: rgba(255, 255, 255, 0.03);
|
|
padding: 8px 16px;
|
|
border-radius: 12px;
|
|
border: 1px solid var(--card-border);
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.status-dot {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
background-color: var(--success-color);
|
|
box-shadow: 0 0 10px var(--success-color);
|
|
}
|
|
|
|
/* Services Grid */
|
|
.section-title {
|
|
font-family: 'Outfit', sans-serif;
|
|
font-size: 1.4rem;
|
|
font-weight: 700;
|
|
margin-bottom: 24px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.section-title::after {
|
|
content: '';
|
|
flex: 1;
|
|
height: 1px;
|
|
background: linear-gradient(to right, var(--card-border), transparent);
|
|
}
|
|
|
|
.services-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
|
|
gap: 24px;
|
|
}
|
|
|
|
/* Service Cards */
|
|
.service-card {
|
|
background-color: var(--card-bg);
|
|
border: 1px solid var(--card-border);
|
|
border-radius: 16px;
|
|
padding: 28px;
|
|
cursor: pointer;
|
|
position: relative;
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
backdrop-filter: blur(8px);
|
|
}
|
|
|
|
.service-card::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 4px;
|
|
background-color: transparent;
|
|
transition: background-color 0.3s ease;
|
|
}
|
|
|
|
.service-card:hover {
|
|
transform: translateY(-5px);
|
|
border-color: rgba(255, 255, 255, 0.15);
|
|
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.service-icon-wrapper {
|
|
width: 54px;
|
|
height: 54px;
|
|
border-radius: 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: 20px;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.service-card:hover .service-icon-wrapper {
|
|
transform: scale(1.1) rotate(3deg);
|
|
}
|
|
|
|
.service-icon-wrapper svg {
|
|
width: 32px;
|
|
height: 32px;
|
|
}
|
|
|
|
.service-tag {
|
|
align-self: flex-start;
|
|
font-size: 0.75rem;
|
|
color: var(--text-muted);
|
|
background-color: rgba(255, 255, 255, 0.04);
|
|
padding: 2px 8px;
|
|
border-radius: 4px;
|
|
margin-bottom: 8px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.service-name {
|
|
font-family: 'Outfit', sans-serif;
|
|
font-size: 1.25rem;
|
|
font-weight: 600;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.service-desc {
|
|
font-size: 0.85rem;
|
|
color: var(--text-muted);
|
|
line-height: 1.5;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.sso-launch-btn {
|
|
background-color: rgba(255, 255, 255, 0.04);
|
|
border: 1px solid var(--card-border);
|
|
color: var(--text-main);
|
|
padding: 8px 12px;
|
|
border-radius: 8px;
|
|
font-size: 0.85rem;
|
|
font-weight: 500;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 6px;
|
|
width: 100%;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.service-card:hover .sso-launch-btn {
|
|
background-color: var(--accent-primary);
|
|
border-color: transparent;
|
|
box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
|
|
}
|
|
|
|
/* Fullscreen SSO Modal Overlay */
|
|
.sso-modal {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: rgba(11, 15, 25, 0.85);
|
|
backdrop-filter: blur(20px);
|
|
-webkit-backdrop-filter: blur(20px);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 1000;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
transition: opacity 0.35s ease;
|
|
}
|
|
|
|
.sso-modal.active {
|
|
opacity: 1;
|
|
pointer-events: all;
|
|
}
|
|
|
|
.sso-modal-card {
|
|
background-color: rgba(25, 30, 45, 0.7);
|
|
border: 1px solid var(--card-border);
|
|
border-radius: 20px;
|
|
padding: 40px;
|
|
text-align: center;
|
|
max-width: 450px;
|
|
width: 90%;
|
|
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
|
|
transform: scale(0.9);
|
|
transition: transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
|
}
|
|
|
|
.sso-modal.active .sso-modal-card {
|
|
transform: scale(1);
|
|
}
|
|
|
|
.sso-loader {
|
|
position: relative;
|
|
width: 80px;
|
|
height: 80px;
|
|
margin: 0 auto 30px;
|
|
}
|
|
|
|
.sso-spinner {
|
|
box-sizing: border-box;
|
|
display: block;
|
|
position: absolute;
|
|
width: 80px;
|
|
height: 80px;
|
|
border: 4px solid transparent;
|
|
border-radius: 50%;
|
|
animation: sso-spin 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
|
|
border-top-color: var(--accent-secondary);
|
|
}
|
|
|
|
.sso-spinner-inner {
|
|
box-sizing: border-box;
|
|
display: block;
|
|
position: absolute;
|
|
width: 64px;
|
|
height: 64px;
|
|
margin: 8px;
|
|
border: 4px solid transparent;
|
|
border-radius: 50%;
|
|
animation: sso-spin-reverse 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
|
|
border-top-color: var(--accent-primary);
|
|
}
|
|
|
|
.sso-title {
|
|
font-family: 'Outfit', sans-serif;
|
|
font-size: 1.4rem;
|
|
font-weight: 700;
|
|
margin-bottom: 12px;
|
|
background: linear-gradient(135deg, #a5b4fc 0%, #38bdf8 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
|
|
.sso-subtitle {
|
|
font-size: 0.85rem;
|
|
color: var(--text-muted);
|
|
line-height: 1.5;
|
|
}
|
|
|
|
@keyframes sso-spin {
|
|
0% { transform: rotate(0deg); }
|
|
100% { transform: rotate(360deg); }
|
|
}
|
|
|
|
@keyframes sso-spin-reverse {
|
|
0% { transform: rotate(0deg); }
|
|
100% { transform: rotate(-360deg); }
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.profile-card {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
padding: 24px;
|
|
}
|
|
.session-status {
|
|
text-align: left;
|
|
width: 100%;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- Nav -->
|
|
<header class="navbar">
|
|
<div class="nav-logo">
|
|
<svg viewBox="0 0 24 24">
|
|
<path d="M12,11A1,1 0 0,0 11,12A1,1 0 0,0 12,13A1,1 0 0,0 13,12A1,1 0 0,0 12,11M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20Z" />
|
|
</svg>
|
|
SingleLogin Dashboard
|
|
</div>
|
|
<div class="nav-user">
|
|
@if($user->role === 'admin')
|
|
<a href="{{ route('admin.dashboard') }}" class="logout-link" style="color: var(--info-color); border-color: rgba(6, 182, 212, 0.2); background-color: rgba(6, 182, 212, 0.05); margin-right: 10px;">
|
|
Admin Panel
|
|
</a>
|
|
@endif
|
|
<form action="{{ route('logout') }}" method="POST" id="logout-form" style="display: none;">
|
|
@csrf
|
|
</form>
|
|
<a href="#" onclick="event.preventDefault(); document.getElementById('logout-form').submit();" class="logout-link">
|
|
Sign Out
|
|
</a>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Main Container -->
|
|
<main class="dashboard-container">
|
|
|
|
<!-- User Welcome / Profile Card -->
|
|
<section class="profile-card">
|
|
<div class="profile-info">
|
|
<div class="profile-avatar-container">
|
|
@if($user->avatar)
|
|
<img src="{{ $user->avatar }}" alt="{{ $user->name }}" class="profile-avatar">
|
|
@else
|
|
<div class="profile-avatar-fallback">
|
|
{{ strtoupper(substr($user->name, 0, 1)) }}
|
|
</div>
|
|
@endif
|
|
</div>
|
|
<div class="profile-details">
|
|
<h1>Welcome, {{ $user->name }}</h1>
|
|
<div class="profile-email">
|
|
<span>{{ $user->email }}</span>
|
|
•
|
|
<span class="badge badge-user">
|
|
@if($user->isAdmin())
|
|
Admin
|
|
@elseif($user->roles->isNotEmpty())
|
|
{{ $user->roles->pluck('name')->implode(', ') }}
|
|
@else
|
|
{{ ucfirst($user->role) }}
|
|
@endif
|
|
</span>
|
|
@if($user->microsoft_id)
|
|
<span class="badge badge-sso">Microsoft Linked</span>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="session-status">
|
|
<div class="status-pill">
|
|
<span class="status-dot"></span>
|
|
<span>Secure Microsoft SSO Session Active</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Services Section -->
|
|
<section>
|
|
<h2 class="section-title">Authorized Corporate Services</h2>
|
|
|
|
<div class="services-grid">
|
|
@foreach($services as $service)
|
|
<div class="service-card" onclick="launchSSO('{{ $service['name'] }}', '{{ route('sso.launch', $service['id']) }}')" style="border-top: 4px solid {{ $service['color'] }}">
|
|
<div>
|
|
<div class="service-tag">{{ $service['tag'] }}</div>
|
|
<div class="service-icon-wrapper" style="background-color: rgba({{ hexdec(substr($service['color'], 1, 2)) }}, {{ hexdec(substr($service['color'], 3, 2)) }}, {{ hexdec(substr($service['color'], 5, 2)) }}, 0.08)">
|
|
<!-- Custom SVGs for Service Providers -->
|
|
@if($service['icon_svg'] === 'outlook')
|
|
<svg viewBox="0 0 24 24" fill="{{ $service['color'] }}">
|
|
<path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,19H5V8H19V19M19,6H5V5H19V6M17,12H12V17H17V12Z" />
|
|
</svg>
|
|
@elseif($service['icon_svg'] === 'teams')
|
|
<svg viewBox="0 0 24 24" fill="{{ $service['color'] }}">
|
|
<path d="M12.5,9A2.5,2.5 0 0,1 15,11.5A2.5,2.5 0 0,1 12.5,14A2.5,2.5 0 0,1 10,11.5A2.5,2.5 0 0,1 12.5,9M12.5,15.5C14.71,15.5 18.5,16.5 18.5,18.5V20H6.5V18.5C6.5,16.5 10.29,15.5 12.5,15.5M6,8A2,2 0 0,1 8,10A2,2 0 0,1 6,12A2,2 0 0,1 4,10A2,2 0 0,1 6,8M6,13.5C7.43,13.5 10,14.07 10,15.25V17H2V15.25C2,14.07 4.57,13.5 6,13.5M12.5,3A2,2 0 0,1 14.5,5A2,2 0 0,1 12.5,7A2,2 0 0,1 10.5,5A2,2 0 0,1 12.5,3M12.5,20V22H19V20H12.5Z" />
|
|
</svg>
|
|
@elseif($service['icon_svg'] === 'keka')
|
|
<svg viewBox="0 0 24 24" fill="{{ $service['color'] }}">
|
|
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H7c0-2.76 2.24-5 5-5s5 2.24 5 5c0 1.04-.42 1.99-1.07 2.75z"/>
|
|
</svg>
|
|
@elseif(str_starts_with($service['icon_svg'] ?? '', '<svg'))
|
|
{!! $service['icon_svg'] !!}
|
|
@else
|
|
<svg viewBox="0 0 24 24" fill="{{ $service['color'] }}">
|
|
<path d="M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4M12,6A6,6 0 0,0 6,12A6,6 0 0,0 12,18A6,6 0 0,0 18,12A6,6 0 0,0 12,6M12,8A4,4 0 0,1 16,12A4,4 0 0,1 12,16A4,4 0 0,1 8,12A4,4 0 0,1 12,8Z" />
|
|
</svg>
|
|
@endif
|
|
</div>
|
|
<div class="service-name">{{ $service['name'] }}</div>
|
|
<div class="service-desc">{{ $service['desc'] }}</div>
|
|
</div>
|
|
<button class="sso-launch-btn">
|
|
Launch Service
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6M15 3h6v6M10 14L21 3"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</section>
|
|
|
|
</main>
|
|
|
|
<!-- SSO Interstitial Loading Modal -->
|
|
<div id="sso-modal" class="sso-modal">
|
|
<div class="sso-modal-card">
|
|
<div class="sso-loader">
|
|
<div class="sso-spinner"></div>
|
|
<div class="sso-spinner-inner"></div>
|
|
</div>
|
|
<div class="sso-title" id="sso-modal-title">Signing into Service</div>
|
|
<div class="sso-subtitle">
|
|
Negotiating single sign-on token with Microsoft Identity Server...<br>
|
|
Connecting securely. You will be redirected silently.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function launchSSO(serviceName, url) {
|
|
const modal = document.getElementById('sso-modal');
|
|
const modalTitle = document.getElementById('sso-modal-title');
|
|
|
|
modalTitle.innerText = `Connecting to ${serviceName}`;
|
|
modal.classList.add('active');
|
|
|
|
// Artificial delay of 1.2s to visually represent and simulate the Microsoft session SSO handshake,
|
|
// then open in a new tab silently.
|
|
setTimeout(() => {
|
|
modal.classList.remove('active');
|
|
window.open(url, '_blank');
|
|
}, 1200);
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|