1331 lines
58 KiB
PHP
1331 lines
58 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</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">
|
|
|
|
<script>
|
|
// Apply theme immediately before rendering to prevent flashing
|
|
(function () {
|
|
const savedTheme = localStorage.getItem('theme') || 'dark';
|
|
if (savedTheme === 'light') {
|
|
document.documentElement.classList.add('light-mode');
|
|
} else {
|
|
document.documentElement.classList.remove('light-mode');
|
|
}
|
|
})();
|
|
</script>
|
|
|
|
<style>
|
|
:root {
|
|
--bg-color: #0b0f19;
|
|
--card-bg: rgba(17, 24, 39, 0.45); /* Darker translucent glass base */
|
|
--card-border: rgba(255, 255, 255, 0.18); /* High gloss border */
|
|
--accent-primary: #4f46e5;
|
|
--accent-secondary: #0078d4;
|
|
--text-main: #f3f4f6;
|
|
--text-muted: #9ca3af;
|
|
--success-color: #10b981;
|
|
--info-color: #06b6d4;
|
|
|
|
--bg-gradient: radial-gradient(circle at 85% 15%, rgba(99, 102, 241, 0.15) 0%, transparent 45%),
|
|
radial-gradient(circle at 15% 85%, rgba(6, 182, 212, 0.12) 0%, transparent 45%),
|
|
radial-gradient(circle at 50% 50%, rgba(99, 102, 241, 0.07) 0%, transparent 50%);
|
|
--navbar-bg: rgba(10, 15, 26, 0.45);
|
|
--modal-bg: rgba(25, 30, 45, 0.65);
|
|
--modal-overlay: rgba(11, 15, 25, 0.85);
|
|
--logo-bg: rgba(15, 23, 42, 0.55);
|
|
--card-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
|
|
--input-bg: rgba(255, 255, 255, 0.03);
|
|
--theme-toggle-hover: rgba(255, 255, 255, 0.08);
|
|
}
|
|
|
|
:root.light-mode {
|
|
--bg-color: #f3f4f6;
|
|
--card-bg: rgba(255, 255, 255, 0.75);
|
|
--card-border: rgba(0, 0, 0, 0.08);
|
|
--accent-primary: #4f46e5;
|
|
--accent-secondary: #0284c7;
|
|
--text-main: #1f2937;
|
|
--text-muted: #4b5563;
|
|
--success-color: #059669;
|
|
--info-color: #0891b2;
|
|
|
|
--bg-gradient: radial-gradient(circle at 85% 15%, rgba(99, 102, 241, 0.08) 0%, transparent 45%),
|
|
radial-gradient(circle at 15% 85%, rgba(6, 182, 212, 0.06) 0%, transparent 45%),
|
|
radial-gradient(circle at 50% 50%, rgba(99, 102, 241, 0.04) 0%, transparent 50%);
|
|
--navbar-bg: rgba(255, 255, 255, 0.75);
|
|
--modal-bg: rgba(255, 255, 255, 0.95);
|
|
--modal-overlay: rgba(243, 244, 246, 0.8);
|
|
--logo-bg: rgba(255, 255, 255, 0.9);
|
|
--card-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
|
|
--input-bg: rgba(0, 0, 0, 0.03);
|
|
--theme-toggle-hover: rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.personal-app-card:hover .personal-app-actions {
|
|
opacity: 1 !important;
|
|
pointer-events: auto !important;
|
|
}
|
|
|
|
/* Drag and Drop Facilities Styling */
|
|
.service-card-glass {
|
|
cursor: grab;
|
|
user-select: none;
|
|
-webkit-user-select: none;
|
|
}
|
|
.service-card-glass:active {
|
|
cursor: grabbing;
|
|
}
|
|
.service-card-glass.dragging {
|
|
opacity: 0.35;
|
|
transform: scale(0.94);
|
|
border: 2px dashed rgba(255, 255, 255, 0.6) !important;
|
|
box-shadow: 0 0 20px rgba(99, 102, 241, 0.4);
|
|
}
|
|
.service-card-glass.drag-over {
|
|
border: 2px solid #38bdf8 !important;
|
|
transform: translateY(-6px) scale(1.04);
|
|
box-shadow: 0 12px 30px rgba(56, 189, 248, 0.35);
|
|
}
|
|
|
|
/* Modern Ultra-Thin White Custom Scrollbars */
|
|
html, body, *, ::-webkit-scrollbar {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: rgba(255, 255, 255, 0.4) rgba(15, 23, 42, 0.35);
|
|
}
|
|
|
|
::-webkit-scrollbar {
|
|
width: 5px;
|
|
height: 5px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: rgba(15, 23, 42, 0.35);
|
|
border-radius: 10px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: rgba(255, 255, 255, 0.4);
|
|
border-radius: 10px;
|
|
border: 1px solid rgba(255, 255, 255, 0.15);
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: rgba(255, 255, 255, 0.85);
|
|
box-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
|
|
}
|
|
|
|
::-webkit-scrollbar-corner {
|
|
background: transparent;
|
|
}
|
|
|
|
/* Personal Modal Styling */
|
|
.personal-modal {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: var(--modal-overlay);
|
|
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: all 0.3s ease;
|
|
}
|
|
|
|
.personal-modal.active {
|
|
opacity: 1;
|
|
pointer-events: all;
|
|
}
|
|
|
|
.personal-modal-content {
|
|
background: linear-gradient(135deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.01) 100%), var(--modal-bg);
|
|
border: 1.5px solid var(--card-border);
|
|
border-radius: 20px;
|
|
padding: 30px;
|
|
width: 90%;
|
|
max-width: 500px;
|
|
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4), inset 0 1px 2px rgba(255, 255, 255, 0.15), inset 0 -1px 1px rgba(255, 255, 255, 0.05);
|
|
transform: scale(0.9);
|
|
transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), background-color 0.3s ease, border-color 0.3s ease;
|
|
max-height: 90vh;
|
|
overflow-y: auto;
|
|
backdrop-filter: blur(25px) saturate(130%);
|
|
-webkit-backdrop-filter: blur(25px) saturate(130%);
|
|
}
|
|
|
|
.personal-modal.active .personal-modal-content {
|
|
transform: scale(1);
|
|
}
|
|
|
|
.modal-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 20px;
|
|
border-bottom: 1px solid rgba(255,255,255,0.08);
|
|
padding-bottom: 12px;
|
|
}
|
|
|
|
.modal-title {
|
|
font-family: 'Outfit', sans-serif;
|
|
font-size: 1.2rem;
|
|
font-weight: 700;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.modal-close {
|
|
background: none;
|
|
border: none;
|
|
color: var(--text-muted);
|
|
font-size: 1.5rem;
|
|
cursor: pointer;
|
|
transition: color 0.2s;
|
|
}
|
|
|
|
.modal-close:hover {
|
|
color: white;
|
|
}
|
|
|
|
.form-group {
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.form-label {
|
|
display: block;
|
|
font-size: 0.75rem;
|
|
color: var(--text-muted);
|
|
margin-bottom: 6px;
|
|
font-weight: 500;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.3px;
|
|
}
|
|
|
|
.form-input {
|
|
width: 100%;
|
|
padding: 10px 12px;
|
|
background: var(--input-bg);
|
|
border: 1px solid var(--card-border);
|
|
border-radius: 8px;
|
|
color: var(--text-main);
|
|
outline: none;
|
|
font-size: 0.85rem;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.form-input:focus {
|
|
border-color: var(--accent-primary);
|
|
background: var(--input-bg);
|
|
filter: brightness(1.05);
|
|
}
|
|
|
|
.modal-footer {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 10px;
|
|
margin-top: 24px;
|
|
border-top: 1px solid rgba(255,255,255,0.08);
|
|
padding-top: 16px;
|
|
}
|
|
|
|
.btn-cancel {
|
|
padding: 8px 16px;
|
|
border-radius: 8px;
|
|
border: 1px solid var(--card-border);
|
|
background: transparent;
|
|
color: var(--text-main);
|
|
font-size: 0.8rem;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: background 0.2s;
|
|
}
|
|
|
|
.btn-cancel:hover {
|
|
background: rgba(255,255,255,0.05);
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Inter', sans-serif;
|
|
background-color: var(--bg-color);
|
|
background-image: var(--bg-gradient);
|
|
background-attachment: fixed;
|
|
color: var(--text-main);
|
|
min-height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow-x: hidden;
|
|
position: relative;
|
|
transition: background-color 0.3s ease, color 0.3s ease;
|
|
}
|
|
|
|
/* Top Profile-Integrated Navigation Bar */
|
|
.navbar {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 12px 5%;
|
|
background: var(--navbar-bg); /* Translucent glass */
|
|
border-bottom: 1px solid var(--card-border); /* Very fine glass border */
|
|
backdrop-filter: blur(20px);
|
|
-webkit-backdrop-filter: blur(20px);
|
|
z-index: 100;
|
|
position: sticky;
|
|
top: 0;
|
|
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.25);
|
|
transition: background-color 0.3s ease, border-color 0.3s ease;
|
|
}
|
|
|
|
/* Theme toggle button specific styling */
|
|
.theme-toggle-btn:hover {
|
|
background: var(--theme-toggle-hover) !important;
|
|
transform: scale(1.05);
|
|
border-color: var(--accent-primary) !important;
|
|
}
|
|
|
|
.nav-profile {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
|
|
.nav-profile-avatar img {
|
|
width: 38px;
|
|
height: 38px;
|
|
border-radius: 50%;
|
|
border: 1.5px solid var(--accent-primary);
|
|
object-fit: cover;
|
|
}
|
|
|
|
.nav-profile-avatar-fallback {
|
|
width: 38px;
|
|
height: 38px;
|
|
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: 0.95rem;
|
|
font-weight: 700;
|
|
color: white;
|
|
box-shadow: 0 0 10px rgba(79, 70, 229, 0.3);
|
|
}
|
|
|
|
.nav-profile-details {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
}
|
|
|
|
.nav-profile-welcome {
|
|
font-family: 'Outfit', sans-serif;
|
|
font-size: 0.95rem;
|
|
font-weight: 700;
|
|
color: var(--text-main);
|
|
line-height: 1.2;
|
|
transition: color 0.3s ease;
|
|
}
|
|
|
|
.nav-profile-meta {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
font-size: 0.72rem;
|
|
color: var(--text-muted);
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.meta-dot {
|
|
color: var(--card-border);
|
|
transition: color 0.3s ease;
|
|
}
|
|
|
|
.nav-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 1px 6px;
|
|
border-radius: 4px;
|
|
font-weight: 700;
|
|
font-size: 0.65rem;
|
|
background-color: rgba(79, 70, 229, 0.15);
|
|
color: #a5b4fc;
|
|
border: 1px solid rgba(79, 70, 229, 0.3);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.3px;
|
|
}
|
|
|
|
.nav-badge.sso {
|
|
background-color: rgba(16, 185, 129, 0.15);
|
|
color: #34d399;
|
|
border-color: rgba(16, 185, 129, 0.3);
|
|
}
|
|
|
|
/* Top Header Actions */
|
|
.nav-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
|
|
.nav-action-btn {
|
|
font-family: 'Outfit', sans-serif;
|
|
font-size: 0.8rem;
|
|
font-weight: 700;
|
|
padding: 8px 16px;
|
|
border-radius: 8px;
|
|
text-decoration: none;
|
|
transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
|
|
letter-spacing: 0.3px;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.nav-action-btn.admin {
|
|
color: #38bdf8;
|
|
background: rgba(56, 189, 248, 0.08);
|
|
border: 1.5px solid rgba(56, 189, 248, 0.25);
|
|
box-shadow: 0 0 10px rgba(56, 189, 248, 0.1);
|
|
}
|
|
|
|
.nav-action-btn.admin:hover {
|
|
color: #ffffff;
|
|
background: #0284c7;
|
|
border-color: #0284c7;
|
|
box-shadow: 0 0 15px rgba(56, 189, 248, 0.45);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.nav-action-btn.logout {
|
|
color: #f87171; /* Translucent glass red text */
|
|
background: rgba(239, 68, 68, 0.06); /* Translucent red glass background */
|
|
border: 1.5px solid rgba(239, 68, 68, 0.25); /* Translucent red glass border */
|
|
backdrop-filter: blur(8px);
|
|
-webkit-backdrop-filter: blur(8px);
|
|
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15), 0 0 10px rgba(239, 68, 68, 0.05);
|
|
}
|
|
|
|
.nav-action-btn.logout:hover {
|
|
color: #ffffff;
|
|
background: #ef4444; /* Solid red background on hover */
|
|
border-color: #ef4444;
|
|
box-shadow: 0 0 20px rgba(239, 68, 68, 0.45);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
/* Dashboard Wrapper - Centered & Spaced */
|
|
.dashboard-container {
|
|
flex: 1;
|
|
padding: 32px 5%;
|
|
width: 100%;
|
|
margin: 0 auto;
|
|
z-index: 10;
|
|
}
|
|
|
|
/* Services Section - Centered & Grid Layout */
|
|
.services-container {
|
|
width: 100%;
|
|
margin: 0 auto;
|
|
margin-top: 10px; /* Reduced space between profile card and services */
|
|
}
|
|
|
|
.section-title {
|
|
font-family: 'Outfit', sans-serif;
|
|
font-size: 1.1rem; /* Slightly smaller size to save space */
|
|
font-weight: 700;
|
|
margin-bottom: 12px; /* Reduced margin */
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.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(120px, 1fr)); /* Clean compact grid columns */
|
|
gap: 20px; /* Uniform spacing */
|
|
}
|
|
|
|
/* Service Cards - Minimal Box Centered Design */
|
|
.service-card-glass {
|
|
background: transparent;
|
|
border: none;
|
|
padding: 8px;
|
|
cursor: pointer;
|
|
text-align: center;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: all 0.3s ease;
|
|
text-decoration: none;
|
|
}
|
|
|
|
/* Prioritized Service Logo/Icon Wrapper - 90px x 90px with defined border & glassmorphism */
|
|
.service-logo-wrapper {
|
|
width: 90px;
|
|
height: 90px;
|
|
border-radius: 22px; /* Rounded edge shape */
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: linear-gradient(135deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.01) 100%), var(--logo-bg);
|
|
border: 1.5px solid var(--card-border); /* Distinct visible border */
|
|
backdrop-filter: blur(20px) saturate(130%); /* Frosted glass effect */
|
|
-webkit-backdrop-filter: blur(20px) saturate(130%);
|
|
box-shadow:
|
|
var(--card-shadow),
|
|
inset 0 1px 2px rgba(255, 255, 255, 0.15);
|
|
margin-bottom: 12px;
|
|
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s ease, border-color 0.3s ease;
|
|
color: var(--service-color);
|
|
opacity: 0.95;
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
|
|
.service-logo-wrapper svg {
|
|
width: 38px; /* Balanced icon size inside 90px box */
|
|
height: 38px;
|
|
transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
|
|
}
|
|
|
|
.service-card-glass:hover .service-logo-wrapper {
|
|
transform: translateY(-4px); /* Moves only the box slightly up */
|
|
background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 100%), var(--logo-bg);
|
|
border-color: var(--service-color);
|
|
opacity: 1;
|
|
box-shadow:
|
|
0 12px 30px rgba(0, 0, 0, 0.35),
|
|
0 0 20px color-mix(in srgb, var(--service-color) 45%, transparent),
|
|
inset 0 1px 2px rgba(255, 255, 255, 0.2);
|
|
}
|
|
|
|
.service-card-glass:hover .service-logo-wrapper svg {
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
/* Uploaded Service Logo - Fitted fully inside the rounded 90px box */
|
|
.service-logo-img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover; /* Cover/fully fill the box like a profile image */
|
|
padding: 0; /* Zero padding to fill the box completely */
|
|
border-radius: inherit; /* inherit round corner shape from wrapper */
|
|
filter: grayscale(10%) brightness(0.95);
|
|
opacity: 0.95;
|
|
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
|
|
}
|
|
|
|
.service-card-glass:hover .service-logo-img {
|
|
filter: grayscale(0%) brightness(1);
|
|
opacity: 1;
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
/* Centered Uppercase Labels */
|
|
.service-title {
|
|
font-family: 'Outfit', sans-serif;
|
|
font-size: 0.72rem; /* Clean text scale */
|
|
font-weight: 700;
|
|
color: var(--text-muted); /* Adaptive color */
|
|
margin-top: 4px;
|
|
margin-bottom: 0;
|
|
letter-spacing: 0.5px;
|
|
transition: color 0.3s ease;
|
|
text-transform: uppercase;
|
|
text-align: center;
|
|
}
|
|
|
|
.service-card-glass:hover .service-title {
|
|
color: var(--text-main);
|
|
}
|
|
|
|
.service-subtitle {
|
|
display: none;
|
|
}
|
|
|
|
/* 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);
|
|
}
|
|
|
|
|
|
|
|
/* Fullscreen SSO Modal Overlay */
|
|
.sso-modal {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: var(--modal-overlay);
|
|
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: linear-gradient(135deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.01) 100%), var(--modal-bg);
|
|
border: 1.5px 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), inset 0 1px 2px rgba(255, 255, 255, 0.15), inset 0 -1px 1px rgba(255, 255, 255, 0.05);
|
|
transform: scale(0.9);
|
|
transition: transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275), background-color 0.3s ease, border-color 0.3s ease;
|
|
backdrop-filter: blur(25px) saturate(130%);
|
|
-webkit-backdrop-filter: blur(25px) saturate(130%);
|
|
}
|
|
|
|
.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;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.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) {
|
|
.nav-profile-meta {
|
|
display: none; /* Hide email & badges on mobile to keep header clean */
|
|
}
|
|
.navbar {
|
|
padding: 10px 16px;
|
|
}
|
|
.nav-profile-welcome {
|
|
font-size: 0.85rem;
|
|
}
|
|
.nav-profile-avatar img, .nav-profile-avatar-fallback {
|
|
width: 32px;
|
|
height: 32px;
|
|
font-size: 0.8rem;
|
|
}
|
|
.nav-actions {
|
|
gap: 8px;
|
|
}
|
|
.nav-action-btn {
|
|
padding: 6px 12px;
|
|
font-size: 0.7rem;
|
|
}
|
|
.dashboard-container {
|
|
padding: 24px 16px;
|
|
}
|
|
.services-grid {
|
|
grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
|
|
gap: 10px;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- Top Navigation Bar -->
|
|
<header class="navbar">
|
|
<!-- Left: User Profile Section -->
|
|
<div class="nav-profile">
|
|
<div class="nav-profile-avatar">
|
|
@if($user->avatar)
|
|
<img src="{{ $user->avatar }}" alt="{{ $user->name }}">
|
|
@else
|
|
<div class="nav-profile-avatar-fallback">
|
|
{{ strtoupper(substr($user->name, 0, 1)) }}
|
|
</div>
|
|
@endif
|
|
</div>
|
|
<div class="nav-profile-details">
|
|
<div class="nav-profile-welcome">Welcome, {{ $user->name }}</div>
|
|
<div class="nav-profile-meta">
|
|
<span class="nav-profile-email">{{ $user->email }}</span>
|
|
<span class="meta-dot">•</span>
|
|
<span class="nav-badge">
|
|
@if($user->roles->isNotEmpty())
|
|
{{ $user->roles->pluck('name')->implode(', ') }}
|
|
@elseif($user->role === 'admin')
|
|
Admin
|
|
@else
|
|
{{ \App\Models\Setting::get('default_role', 'Developer') }}
|
|
@endif
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- Right: Actions -->
|
|
<div class="nav-actions">
|
|
<!-- Theme Toggle Button -->
|
|
<button id="theme-toggle" class="theme-toggle-btn" title="Toggle Theme" aria-label="Toggle Theme" style="background: var(--input-bg); border: 1.5px solid var(--card-border); color: var(--text-main); width: 38px; height: 38px; border-radius: 8px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.25s ease;">
|
|
<!-- Moon Icon (Dark Mode) -->
|
|
<svg class="theme-icon-dark" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width: 18px; height: 18px; display: block; color: #f59e0b;">
|
|
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
|
|
</svg>
|
|
<!-- Sun Icon (Light Mode) -->
|
|
<svg class="theme-icon-light" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width: 18px; height: 18px; display: none; color: #eab308;">
|
|
<circle cx="12" cy="12" r="5"></circle>
|
|
<line x1="12" y1="1" x2="12" y2="3"></line>
|
|
<line x1="12" y1="21" x2="12" y2="23"></line>
|
|
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
|
|
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
|
|
<line x1="1" y1="12" x2="3" y2="12"></line>
|
|
<line x1="21" y1="12" x2="23" y2="12"></line>
|
|
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
|
|
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
|
|
</svg>
|
|
</button>
|
|
|
|
@if($user->canManageOnboarding())
|
|
<a href="{{ route('onboarding.index') }}" class="nav-action-btn" style="background: rgba(99,102,241,0.15); color: #818cf8; border-color: rgba(99,102,241,0.3); text-decoration: none;" title="Onboarding & Offboarding Hub">
|
|
🚀 Onboarding Hub
|
|
</a>
|
|
@endif
|
|
|
|
@if($user->role === 'admin')
|
|
<a href="{{ route('admin.dashboard') }}" class="nav-action-btn admin" title="Admin Panel">
|
|
Go to Admin Dashboard
|
|
</a>
|
|
@elseif($user->hasRole('admin'))
|
|
<a href="{{ route('admin.dashboard') }}" target="_blank" class="nav-action-btn admin" title="Admin Panel">
|
|
Go to Admin Dashboard
|
|
</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="nav-action-btn logout">
|
|
Sign Out
|
|
</a>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Main Container -->
|
|
<main class="dashboard-container">
|
|
|
|
<!-- Services Section with Grid Design -->
|
|
<section class="services-container">
|
|
<h2 class="section-title">Authorized Corporate Services</h2>
|
|
|
|
<div class="services-grid" id="corporate-services-grid">
|
|
@foreach($services as $service)
|
|
<div class="service-card-glass" draggable="true" data-id="corp-{{ $service['id'] }}" onclick="launchSSO('{{ $service['name'] }}', '{{ route('sso.launch', $service['id']) }}')" style="--service-color: {{ $service['color'] ?? '#4f46e5' }}">
|
|
<!-- Logo Highlight Wrapper -->
|
|
<div class="service-logo-wrapper">
|
|
@if($service['logo'])
|
|
<img src="{{ asset($service['logo']) }}" alt="{{ $service['name'] }}" class="service-logo-img">
|
|
@elseif($service['icon_svg'] === 'outlook' || (empty($service['icon_svg']) && (str_contains(strtolower($service['name']), 'outlook') || str_contains(strtolower($service['name']), 'mail'))))
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
|
|
<rect x="2" y="4" width="20" height="16" rx="3" />
|
|
<path d="M22 7l-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7" />
|
|
<path d="M12 13v5" />
|
|
</svg>
|
|
@elseif($service['icon_svg'] === 'teams' || (empty($service['icon_svg']) && (str_contains(strtolower($service['name']), 'teams') || str_contains(strtolower($service['name']), 'microsoft'))))
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
|
|
<circle cx="9" cy="7" r="4" />
|
|
<path d="M23 21v-2a4 4 0 0 0-3-3.87" />
|
|
<path d="M16 3.13a4 4 0 0 1 0 7.75" />
|
|
</svg>
|
|
@elseif($service['icon_svg'] === 'keka' || (empty($service['icon_svg']) && str_contains(strtolower($service['name']), 'keka')))
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M6 3v18" />
|
|
<path d="M17 5L8 12l9 7" />
|
|
<circle cx="17" cy="5" r="2" fill="currentColor" />
|
|
<circle cx="17" cy="19" r="2" fill="currentColor" />
|
|
<circle cx="8" cy="12" r="2" fill="currentColor" />
|
|
</svg>
|
|
@elseif($service['icon_svg'] && str_starts_with($service['icon_svg'], '<svg'))
|
|
{!! $service['icon_svg'] !!}
|
|
@elseif($service['icon_svg'])
|
|
<div class="service-logo-fallback" style="background: linear-gradient(135deg, var(--service-color) 20%, rgba(255,255,255,0.05) 100%); width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; border-radius: 8px; font-family: 'Outfit', sans-serif; font-size: 1.1rem; font-weight: 800; color: white;">
|
|
{{ strtoupper(substr($service['icon_svg'], 0, 2)) }}
|
|
</div>
|
|
@else
|
|
<div class="service-logo-fallback" style="background: linear-gradient(135deg, var(--service-color) 20%, rgba(255,255,255,0.05) 100%); width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; border-radius: 8px; font-family: 'Outfit', sans-serif; font-size: 1.1rem; font-weight: 800; color: white; text-shadow: 0 1px 2px rgba(0,0,0,0.2);">
|
|
{{ strtoupper(substr($service['name'], 0, 1)) }}
|
|
</div>
|
|
@endif
|
|
</div>
|
|
|
|
<!-- Service Name below the logo -->
|
|
<h3 class="service-title">{{ strtoupper($service['name']) }}</h3>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</section>
|
|
|
|
<!-- My Custom Apps Section -->
|
|
<section class="services-container" style="margin-top: 50px;">
|
|
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); padding-bottom: 12px;">
|
|
<h2 class="section-title" style="margin-bottom: 0; border: none; padding: 0;">My Custom Apps</h2>
|
|
<button onclick="openAddPersonalAppModal()" class="nav-action-btn admin" style="background-color: var(--accent-primary); border-color: var(--accent-primary); color: white; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; text-transform: uppercase;">
|
|
+ Add Custom App
|
|
</button>
|
|
</div>
|
|
|
|
<div class="services-grid" id="personal-services-grid">
|
|
@forelse($personalApps as $pApp)
|
|
<div class="service-card-glass personal-app-card" draggable="true" data-id="personal-{{ $pApp->id }}" style="--service-color: {{ $pApp->color ?? '#4f46e5' }};">
|
|
|
|
<!-- Relative Wrapper for Logo + Actions -->
|
|
<div style="position: relative; display: inline-block;">
|
|
<!-- Delete & Edit overlay buttons on hover -->
|
|
<div class="personal-app-actions" style="position: absolute; top: -6px; right: -6px; display: flex; gap: 6px; z-index: 100; opacity: 0; transition: opacity 0.2s ease; pointer-events: none;">
|
|
<button onclick="event.stopPropagation(); openEditPersonalAppModal({{ $pApp->id }}, '{{ addslashes($pApp->name) }}', '{{ addslashes($pApp->url) }}', '{{ addslashes($pApp->color) }}', '{{ addslashes($pApp->tag) }}', '{{ addslashes($pApp->desc) }}', '{{ $pApp->logo }}')"
|
|
style="pointer-events: auto; background: #06b6d4; border: 1.5px solid rgba(255, 255, 255, 0.2); color: white; border-radius: 50%; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,0.6); transition: transform 0.2s;"
|
|
onmouseover="this.style.transform='scale(1.15)'" onmouseout="this.style.transform='scale(1)'" title="Edit App">
|
|
<svg viewBox="0 0 24 24" width="13" height="13" fill="currentColor">
|
|
<path d="M14.06,9L15,9.94L5.92,19H5V18.06L14.06,9M17.66,3C17.41,3 17.15,3.1 16.96,3.29L15.13,5.12L18.88,8.87L20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18.17,3.09 17.92,3 17.66,3M14.06,6.19L3,17.25V21H6.75L17.81,9.94L14.06,6.19Z" />
|
|
</svg>
|
|
</button>
|
|
<form action="{{ route('dashboard.personal-apps.destroy', $pApp->id) }}" method="POST" onsubmit="return confirm('Are you sure you want to delete this custom app?')" style="display: inline;">
|
|
@csrf
|
|
@method('DELETE')
|
|
<button type="submit" onclick="event.stopPropagation();"
|
|
style="pointer-events: auto; background: #ef4444; border: 1.5px solid rgba(255, 255, 255, 0.2); color: white; border-radius: 50%; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,0.6); transition: transform 0.2s;"
|
|
onmouseover="this.style.transform='scale(1.15)'" onmouseout="this.style.transform='scale(1)'" title="Delete App">
|
|
<svg viewBox="0 0 24 24" width="13" height="13" fill="currentColor">
|
|
<path d="M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z" />
|
|
</svg>
|
|
</button>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Logo Wrapper -->
|
|
<div class="service-logo-wrapper" onclick="launchSSO('{{ $pApp->name }}', '{{ route('sso.personal-launch', $pApp->id) }}')">
|
|
@if($pApp->logo)
|
|
<img src="{{ asset($pApp->logo) }}" alt="{{ $pApp->name }}" class="service-logo-img">
|
|
@else
|
|
<div class="service-logo-fallback" style="background: linear-gradient(135deg, var(--service-color) 20%, rgba(255,255,255,0.05) 100%); width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; border-radius: 8px; font-family: 'Outfit', sans-serif; font-size: 1.1rem; font-weight: 800; color: white; text-shadow: 0 1px 2px rgba(0,0,0,0.2);">
|
|
{{ strtoupper(substr($pApp->name, 0, 1)) }}
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Name -->
|
|
<h3 class="service-title" onclick="launchSSO('{{ $pApp->name }}', '{{ route('sso.personal-launch', $pApp->id) }}')">{{ strtoupper($pApp->name) }}</h3>
|
|
@if($pApp->tag)
|
|
<div style="font-size: 0.65rem; color: var(--text-muted); text-transform: uppercase; margin-top: 4px; letter-spacing: 0.5px;">{{ $pApp->tag }}</div>
|
|
@endif
|
|
</div>
|
|
@empty
|
|
<div style="grid-column: 1 / -1; text-align: center; padding: 40px; background: rgba(255,255,255,0.02); border: 1px dashed var(--card-border); border-radius: 16px; color: var(--text-muted); font-size: 0.9rem;">
|
|
No custom apps added yet. Click "+ Add Custom App" to add your own shortcuts!
|
|
</div>
|
|
@endforelse
|
|
</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>
|
|
|
|
<!-- Add Personal App Modal -->
|
|
<div id="add-personal-app-modal" class="personal-modal">
|
|
<div class="personal-modal-content">
|
|
<div class="modal-header">
|
|
<h3 class="modal-title">Add Custom Application</h3>
|
|
<button class="modal-close" onclick="closePersonalModal('add-personal-app-modal')">×</button>
|
|
</div>
|
|
<form action="{{ route('dashboard.personal-apps.store') }}" method="POST" enctype="multipart/form-data" class="validated-form">
|
|
@csrf
|
|
<div class="form-group">
|
|
<label class="form-label">Application Name <span style="color: #ef4444; font-weight: bold;">*</span></label>
|
|
<input type="text" name="name" required placeholder="e.g. My Github, Internal Wiki" class="form-input">
|
|
<div class="field-error-msg" style="color: #ef4444; font-size: 0.75rem; margin-top: 4px; font-weight: 500; display: none;">This field is required.</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Redirect URL <span style="color: #ef4444; font-weight: bold;">*</span></label>
|
|
<input type="url" name="url" required placeholder="https://github.com" class="form-input">
|
|
<div class="field-error-msg" style="color: #ef4444; font-size: 0.75rem; margin-top: 4px; font-weight: 500; display: none;">Please enter a valid URL.</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Custom Logo Image (Optional - Max 5MB)</label>
|
|
<input type="file" name="logo" class="form-input logo-upload-5mb" style="padding: 6px 12px;">
|
|
<div class="file-size-error" style="color: #ef4444; font-size: 0.75rem; margin-top: 4px; font-weight: 500; display: none;">File size exceeds maximum limit of 5MB.</div>
|
|
<div style="font-size:0.65rem; color:var(--text-muted); margin-top:4px;">Supported: PNG, JPG, WEBP, SVG (Max 5MB)</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Brand Color (Hex Code)</label>
|
|
<div style="display: flex; gap: 8px;">
|
|
<input type="color" name="color_picker" id="add-color-picker" value="#4f46e5" oninput="document.getElementById('add-color-input').value = this.value" style="width: 40px; height: 38px; padding: 0; border: none; border-radius: 8px; cursor: pointer; background: transparent;">
|
|
<input type="text" name="color" id="add-color-input" value="#4f46e5" oninput="document.getElementById('add-color-picker').value = this.value" class="form-input" style="flex: 1;">
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Category Tag (Optional)</label>
|
|
<input type="text" name="tag" placeholder="e.g. Development, HR, Tools" class="form-input">
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Description (Optional)</label>
|
|
<textarea name="desc" placeholder="Brief note about this shortcut..." class="form-input" style="min-height: 80px; resize: vertical;"></textarea>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn-cancel" onclick="closePersonalModal('add-personal-app-modal')">Cancel</button>
|
|
<button type="submit" class="nav-action-btn admin" style="background-color: var(--accent-primary); border-color: var(--accent-primary); color: white; cursor: pointer;">Save Application</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Edit Personal App Modal -->
|
|
<div id="edit-personal-app-modal" class="personal-modal">
|
|
<div class="personal-modal-content">
|
|
<div class="modal-header">
|
|
<h3 class="modal-title">Edit Custom Application</h3>
|
|
<button class="modal-close" onclick="closePersonalModal('edit-personal-app-modal')">×</button>
|
|
</div>
|
|
<form id="edit-personal-app-form" method="POST" enctype="multipart/form-data" class="validated-form">
|
|
@csrf
|
|
<div class="form-group">
|
|
<label class="form-label">Application Name <span style="color: #ef4444; font-weight: bold;">*</span></label>
|
|
<input type="text" id="edit-papp-name" name="name" required class="form-input">
|
|
<div class="field-error-msg" style="color: #ef4444; font-size: 0.75rem; margin-top: 4px; font-weight: 500; display: none;">This field is required.</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Redirect URL <span style="color: #ef4444; font-weight: bold;">*</span></label>
|
|
<input type="url" id="edit-papp-url" name="url" required class="form-input">
|
|
<div class="field-error-msg" style="color: #ef4444; font-size: 0.75rem; margin-top: 4px; font-weight: 500; display: none;">Please enter a valid URL.</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Custom Logo Image (Optional - Max 5MB)</label>
|
|
<input type="file" name="logo" class="form-input logo-upload-5mb" style="padding: 6px 12px;">
|
|
<div class="file-size-error" style="color: #ef4444; font-size: 0.75rem; margin-top: 4px; font-weight: 500; display: none;">File size exceeds maximum limit of 5MB.</div>
|
|
<div id="edit-papp-logo-status" style="font-size:0.65rem; margin-top:4px;"></div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Brand Color (Hex Code)</label>
|
|
<div style="display: flex; gap: 8px;">
|
|
<input type="color" id="edit-papp-color-picker" oninput="document.getElementById('edit-papp-color').value = this.value" style="width: 40px; height: 38px; padding: 0; border: none; border-radius: 8px; cursor: pointer; background: transparent;">
|
|
<input type="text" name="color" id="edit-papp-color" oninput="document.getElementById('edit-papp-color-picker').value = this.value" class="form-input" style="flex: 1;">
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Category Tag (Optional)</label>
|
|
<input type="text" id="edit-papp-tag" name="tag" class="form-input">
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Description (Optional)</label>
|
|
<textarea id="edit-papp-desc" name="desc" class="form-input" style="min-height: 80px; resize: vertical;"></textarea>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn-cancel" onclick="closePersonalModal('edit-personal-app-modal')">Cancel</button>
|
|
<button type="submit" class="nav-action-btn admin" style="background-color: var(--accent-primary); border-color: var(--accent-primary); color: white; cursor: pointer;">Update Application</button>
|
|
</div>
|
|
</form>
|
|
</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);
|
|
}
|
|
|
|
function openAddPersonalAppModal() {
|
|
document.getElementById('add-personal-app-modal').classList.add('active');
|
|
}
|
|
|
|
function openEditPersonalAppModal(id, name, url, color, tag, desc, logo) {
|
|
const form = document.getElementById('edit-personal-app-form');
|
|
form.action = `{{ route('dashboard.personal-apps.update', ':id') }}`.replace(':id', id);
|
|
|
|
document.getElementById('edit-papp-name').value = name;
|
|
document.getElementById('edit-papp-url').value = url;
|
|
document.getElementById('edit-papp-color').value = color || '#4f46e5';
|
|
document.getElementById('edit-papp-color-picker').value = color || '#4f46e5';
|
|
document.getElementById('edit-papp-tag').value = tag || '';
|
|
document.getElementById('edit-papp-desc').value = desc || '';
|
|
|
|
const logoStatus = document.getElementById('edit-papp-logo-status');
|
|
if (logo) {
|
|
logoStatus.innerText = 'Has custom logo uploaded';
|
|
logoStatus.style.color = '#10b981';
|
|
} else {
|
|
logoStatus.innerText = 'No custom logo uploaded (using name fallback)';
|
|
logoStatus.style.color = '#9ca3af';
|
|
}
|
|
|
|
document.getElementById('edit-personal-app-modal').classList.add('active');
|
|
}
|
|
|
|
function closePersonalModal(modalId) {
|
|
document.getElementById(modalId).classList.remove('active');
|
|
}
|
|
|
|
// Theme Switcher & Drag-and-Drop Facilities
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const themeToggleBtn = document.getElementById('theme-toggle');
|
|
const sunIcon = themeToggleBtn.querySelector('.theme-icon-light');
|
|
const moonIcon = themeToggleBtn.querySelector('.theme-icon-dark');
|
|
|
|
function updateIcons() {
|
|
const isLight = document.documentElement.classList.contains('light-mode');
|
|
if (isLight) {
|
|
sunIcon.style.display = 'block';
|
|
moonIcon.style.display = 'none';
|
|
} else {
|
|
sunIcon.style.display = 'none';
|
|
moonIcon.style.display = 'block';
|
|
}
|
|
}
|
|
|
|
updateIcons();
|
|
|
|
themeToggleBtn.addEventListener('click', () => {
|
|
document.documentElement.classList.toggle('light-mode');
|
|
const newTheme = document.documentElement.classList.contains('light-mode') ? 'light' : 'dark';
|
|
localStorage.setItem('theme', newTheme);
|
|
updateIcons();
|
|
});
|
|
|
|
// Bidirectional Drag and Drop facilities for frontend services
|
|
function initDragAndDrop(gridId, storageKey) {
|
|
const grid = document.getElementById(gridId);
|
|
if (!grid) return;
|
|
|
|
// Restore saved order from localStorage
|
|
const savedOrder = JSON.parse(localStorage.getItem(storageKey) || '[]');
|
|
if (savedOrder.length > 0) {
|
|
const cards = Array.from(grid.children);
|
|
const cardMap = new Map();
|
|
cards.forEach(card => {
|
|
const id = card.getAttribute('data-id');
|
|
if (id) cardMap.set(id, card);
|
|
});
|
|
savedOrder.forEach(id => {
|
|
const card = cardMap.get(id);
|
|
if (card) grid.appendChild(card);
|
|
});
|
|
}
|
|
|
|
let draggedCard = null;
|
|
|
|
grid.querySelectorAll('.service-card-glass').forEach(card => {
|
|
card.addEventListener('dragstart', (e) => {
|
|
draggedCard = card;
|
|
card.classList.add('dragging');
|
|
e.dataTransfer.effectAllowed = 'move';
|
|
e.dataTransfer.setData('text/plain', card.getAttribute('data-id') || '');
|
|
});
|
|
|
|
card.addEventListener('dragend', () => {
|
|
card.classList.remove('dragging');
|
|
grid.querySelectorAll('.service-card-glass').forEach(c => c.classList.remove('drag-over'));
|
|
draggedCard = null;
|
|
|
|
// Persist new layout order
|
|
const newOrder = Array.from(grid.children)
|
|
.map(c => c.getAttribute('data-id'))
|
|
.filter(Boolean);
|
|
localStorage.setItem(storageKey, JSON.stringify(newOrder));
|
|
});
|
|
|
|
card.addEventListener('dragover', (e) => {
|
|
e.preventDefault();
|
|
e.dataTransfer.dropEffect = 'move';
|
|
const targetCard = e.target.closest('.service-card-glass');
|
|
if (targetCard && draggedCard && targetCard !== draggedCard && targetCard.parentNode === grid) {
|
|
targetCard.classList.add('drag-over');
|
|
const rect = targetCard.getBoundingClientRect();
|
|
const mouseX = e.clientX - rect.left;
|
|
const mouseY = e.clientY - rect.top;
|
|
|
|
// Realtime bidirectional placement (left/right/up/down)
|
|
const isAfter = (mouseX > rect.width / 2) || (mouseY > rect.height / 2);
|
|
if (isAfter) {
|
|
grid.insertBefore(draggedCard, targetCard.nextSibling);
|
|
} else {
|
|
grid.insertBefore(draggedCard, targetCard);
|
|
}
|
|
}
|
|
});
|
|
|
|
card.addEventListener('dragleave', () => {
|
|
card.classList.remove('drag-over');
|
|
});
|
|
|
|
card.addEventListener('drop', (e) => {
|
|
e.preventDefault();
|
|
card.classList.remove('drag-over');
|
|
});
|
|
});
|
|
}
|
|
|
|
initDragAndDrop('corporate-services-grid', 'user_corp_services_order');
|
|
initDragAndDrop('personal-services-grid', 'user_personal_services_order');
|
|
|
|
// 5MB Logo upload & explicit format validation (JPG, PNG, WEBP, SVG, AVIF, GIF, BMP)
|
|
const allowedImageFormats = ['jpg', 'jpeg', 'png', 'webp', 'svg', 'avif', 'gif', 'bmp', 'ico'];
|
|
document.querySelectorAll('.logo-upload-5mb').forEach(input => {
|
|
input.addEventListener('change', function() {
|
|
const file = this.files[0];
|
|
const errorDiv = this.parentElement.querySelector('.file-size-error');
|
|
if (file) {
|
|
const ext = file.name.split('.').pop().toLowerCase();
|
|
if (!allowedImageFormats.includes(ext)) {
|
|
if (errorDiv) {
|
|
errorDiv.textContent = 'Invalid file format ".' + ext + '". Only PNG, JPG, WEBP, SVG, AVIF, GIF, and BMP image formats are allowed.';
|
|
errorDiv.style.display = 'block';
|
|
}
|
|
this.value = '';
|
|
return;
|
|
}
|
|
if (file.size > 5 * 1024 * 1024) {
|
|
if (errorDiv) {
|
|
errorDiv.textContent = 'File size (' + (file.size / (1024*1024)).toFixed(2) + 'MB) exceeds maximum limit of 5MB. Please upload an image under 5MB.';
|
|
errorDiv.style.display = 'block';
|
|
}
|
|
this.value = '';
|
|
return;
|
|
}
|
|
if (errorDiv) errorDiv.style.display = 'none';
|
|
}
|
|
});
|
|
});
|
|
|
|
// Form validation
|
|
document.querySelectorAll('form.validated-form').forEach(form => {
|
|
form.addEventListener('submit', function(e) {
|
|
let isValid = true;
|
|
form.querySelectorAll('[required]').forEach(input => {
|
|
const errorDiv = input.parentElement.querySelector('.field-error-msg');
|
|
if (!input.value || !input.value.trim()) {
|
|
isValid = false;
|
|
input.style.borderColor = '#ef4444';
|
|
if (errorDiv) errorDiv.style.display = 'block';
|
|
} else {
|
|
input.style.borderColor = 'var(--card-border)';
|
|
if (errorDiv) errorDiv.style.display = 'none';
|
|
}
|
|
});
|
|
if (!isValid) e.preventDefault();
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|