3363 lines
112 KiB
Text
3363 lines
112 KiB
Text
@* Views/Admin/SurveyAnalysis/Index.cshtml *@
|
|
@model IEnumerable<dynamic>
|
|
|
|
@{
|
|
ViewData["Title"] = "Mental Health Survey Analysis - Dashboard";
|
|
}
|
|
|
|
|
|
@section Styles {
|
|
<style>
|
|
@@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
|
|
|
|
:root {
|
|
--neon-blue: #60a5fa;
|
|
--neon-purple: #c084fc;
|
|
--neon-green: #34d399;
|
|
--neon-pink: #f472b6;
|
|
--neon-yellow: #fbbf24;
|
|
--neon-red: #f87171;
|
|
--neon-cyan: #22d3ee;
|
|
|
|
--dark-900: #0f172a;
|
|
--dark-800: #1e293b;
|
|
--dark-700: #334155;
|
|
--dark-600: #475569;
|
|
--dark-500: #64748b;
|
|
--dark-400: #94a3b8;
|
|
--dark-300: #cbd5e1;
|
|
--dark-200: #e2e8f0;
|
|
--dark-100: #f1f5f9;
|
|
|
|
--glass-bg: rgba(255, 255, 255, 0.05);
|
|
--glass-border: rgba(255, 255, 255, 0.1);
|
|
--glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
|
|
|
|
--font-main: 'Space Grotesk', sans-serif;
|
|
--font-mono: 'JetBrains Mono', monospace;
|
|
}
|
|
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: var(--font-main);
|
|
background: var(--dark-900);
|
|
color: #e2e8f0;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.nexgen-dashboard {
|
|
min-height: 100vh;
|
|
position: relative;
|
|
}
|
|
|
|
/* Dynamic Background */
|
|
.bg-pattern {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
z-index: -1;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.grid-overlay {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-image:
|
|
linear-gradient(rgba(96, 165, 250, 0.1) 1px, transparent 1px),
|
|
linear-gradient(90deg, rgba(96, 165, 250, 0.1) 1px, transparent 1px);
|
|
background-size: 60px 60px;
|
|
animation: gridMove 20s linear infinite;
|
|
}
|
|
|
|
.gradient-mesh {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background:
|
|
radial-gradient(circle at 20% 20%, rgba(96, 165, 250, 0.15) 0%, transparent 50%),
|
|
radial-gradient(circle at 80% 60%, rgba(192, 132, 252, 0.15) 0%, transparent 50%),
|
|
radial-gradient(circle at 40% 80%, rgba(52, 211, 153, 0.15) 0%, transparent 50%);
|
|
animation: meshShift 15s ease-in-out infinite;
|
|
}
|
|
|
|
/* Top Navigation */
|
|
.top-nav {
|
|
position: relative;
|
|
z-index: 100;
|
|
padding: 1rem 0;
|
|
background: rgba(15, 23, 42, 0.8);
|
|
backdrop-filter: blur(20px);
|
|
border-bottom: 1px solid rgba(96, 165, 250, 0.2);
|
|
}
|
|
|
|
.nav-container {
|
|
max-width: 1400px;
|
|
margin: 0 auto;
|
|
padding: 0 2rem;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 3rem;
|
|
}
|
|
|
|
.nav-brand {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.brand-icon {
|
|
width: 40px;
|
|
height: 40px;
|
|
background: linear-gradient(135deg, var(--neon-blue), var(--neon-purple));
|
|
border-radius: 8px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: white;
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
.brand-name {
|
|
font-family: var(--font-mono);
|
|
font-weight: 700;
|
|
font-size: 1.1rem;
|
|
letter-spacing: 0.1em;
|
|
color: #e2e8f0;
|
|
}
|
|
|
|
.brand-version {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.7rem;
|
|
color: var(--neon-green);
|
|
background: rgba(52, 211, 153, 0.1);
|
|
padding: 0.2rem 0.5rem;
|
|
border-radius: 4px;
|
|
border: 1px solid rgba(52, 211, 153, 0.3);
|
|
}
|
|
|
|
.nav-center {
|
|
flex: 1;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.breadcrumb-modern {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
font-family: var(--font-mono);
|
|
font-size: 0.8rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
.crumb {
|
|
color: var(--dark-400);
|
|
transition: color 0.2s ease;
|
|
}
|
|
|
|
.crumb.active {
|
|
color: var(--neon-blue);
|
|
}
|
|
|
|
.breadcrumb-modern i {
|
|
color: var(--dark-500);
|
|
font-size: 0.6rem;
|
|
}
|
|
|
|
.nav-actions {
|
|
display: flex;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.nav-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 0.6rem 1.2rem;
|
|
background: var(--glass-bg);
|
|
border: 1px solid var(--glass-border);
|
|
border-radius: 8px;
|
|
color: #e2e8f0;
|
|
font-size: 0.8rem;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
|
|
.nav-btn:hover {
|
|
background: rgba(96, 165, 250, 0.1);
|
|
border-color: rgba(96, 165, 250, 0.3);
|
|
color: var(--neon-blue);
|
|
}
|
|
|
|
.org-badge {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.8rem;
|
|
padding: 0.6rem 1rem;
|
|
background: var(--glass-bg);
|
|
border: 1px solid var(--glass-border);
|
|
border-radius: 12px;
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
|
|
.org-avatar {
|
|
width: 32px;
|
|
height: 32px;
|
|
background: linear-gradient(135deg, var(--neon-pink), var(--neon-purple));
|
|
border-radius: 6px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: white;
|
|
font-weight: 600;
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
.org-name {
|
|
font-weight: 600;
|
|
color: #e2e8f0;
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
.org-status {
|
|
font-size: 0.6rem;
|
|
color: var(--neon-green);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
/* Hero Section */
|
|
.hero-nexgen {
|
|
padding: 4rem 0 2rem;
|
|
text-align: center;
|
|
position: relative;
|
|
z-index: 10;
|
|
}
|
|
|
|
.hero-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.6rem;
|
|
padding: 0.5rem 1.2rem;
|
|
background: rgba(96, 165, 250, 0.1);
|
|
border: 1px solid rgba(96, 165, 250, 0.3);
|
|
border-radius: 50px;
|
|
margin-bottom: 2rem;
|
|
font-family: var(--font-mono);
|
|
font-size: 0.7rem;
|
|
font-weight: 600;
|
|
letter-spacing: 0.1em;
|
|
color: var(--neon-blue);
|
|
}
|
|
|
|
.badge-dot {
|
|
width: 6px;
|
|
height: 6px;
|
|
background: var(--neon-green);
|
|
border-radius: 50%;
|
|
animation: pulse 2s infinite;
|
|
}
|
|
|
|
.hero-title {
|
|
font-size: 4rem;
|
|
font-weight: 700;
|
|
line-height: 1.1;
|
|
margin-bottom: 1.5rem;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.title-gradient {
|
|
background: linear-gradient(135deg, var(--neon-blue), var(--neon-purple), var(--neon-pink));
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
|
|
.hero-description {
|
|
font-size: 1.1rem;
|
|
color: var(--dark-300);
|
|
max-width: 600px;
|
|
margin: 0 auto 2rem;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
/* Main Content */
|
|
.main-content {
|
|
padding: 2rem 0 4rem;
|
|
position: relative;
|
|
z-index: 10;
|
|
}
|
|
|
|
/* Services Dashboard */
|
|
.services-dashboard {
|
|
background: var(--glass-bg);
|
|
backdrop-filter: blur(20px);
|
|
border: 1px solid var(--glass-border);
|
|
border-radius: 16px;
|
|
padding: 2rem;
|
|
margin-bottom: 3rem;
|
|
box-shadow: var(--glass-shadow);
|
|
}
|
|
|
|
.dashboard-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1.5rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.header-icon {
|
|
width: 50px;
|
|
height: 50px;
|
|
background: linear-gradient(135deg, var(--neon-blue), var(--neon-cyan));
|
|
border-radius: 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: white;
|
|
font-size: 1.3rem;
|
|
}
|
|
|
|
.header-content h2 {
|
|
font-family: var(--font-mono);
|
|
font-size: 1.2rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0.05em;
|
|
color: #ffffff;
|
|
margin-bottom: 0.3rem;
|
|
}
|
|
|
|
.header-content p {
|
|
color: var(--dark-300);
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.services-strip {
|
|
display: flex;
|
|
gap: 1.5rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.service-chip {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
padding: 1rem 1.5rem;
|
|
background: rgba(255, 255, 255, 0.03);
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
border-radius: 12px;
|
|
min-width: 200px;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.service-chip.online {
|
|
border-color: rgba(52, 211, 153, 0.4);
|
|
background: rgba(52, 211, 153, 0.05);
|
|
}
|
|
|
|
.service-chip.offline {
|
|
border-color: rgba(248, 113, 113, 0.4);
|
|
background: rgba(248, 113, 113, 0.05);
|
|
}
|
|
|
|
.chip-status {
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 50%;
|
|
animation: pulse 2s infinite;
|
|
}
|
|
|
|
.service-chip.online .chip-status {
|
|
background: var(--neon-green);
|
|
box-shadow: 0 0 20px rgba(52, 211, 153, 0.5);
|
|
}
|
|
|
|
.service-chip.offline .chip-status {
|
|
background: var(--neon-red);
|
|
box-shadow: 0 0 20px rgba(248, 113, 113, 0.5);
|
|
}
|
|
|
|
.chip-name {
|
|
font-weight: 600;
|
|
color: #ffffff;
|
|
flex: 1;
|
|
}
|
|
|
|
.chip-state {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.7rem;
|
|
font-weight: 600;
|
|
letter-spacing: 0.1em;
|
|
}
|
|
|
|
.service-chip.online .chip-state {
|
|
color: var(--neon-green);
|
|
}
|
|
|
|
.service-chip.offline .chip-state {
|
|
color: var(--neon-red);
|
|
}
|
|
|
|
/* Alert System */
|
|
.alert-nexgen {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
padding: 1rem 1.5rem;
|
|
border-radius: 12px;
|
|
margin-bottom: 1.5rem;
|
|
position: relative;
|
|
overflow: hidden;
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
|
|
.alert-stripe {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
width: 4px;
|
|
}
|
|
|
|
.alert-nexgen.error {
|
|
background: rgba(248, 113, 113, 0.1);
|
|
border: 1px solid rgba(248, 113, 113, 0.3);
|
|
}
|
|
|
|
.alert-nexgen.error .alert-stripe {
|
|
background: var(--neon-red);
|
|
}
|
|
|
|
.alert-nexgen.success {
|
|
background: rgba(52, 211, 153, 0.1);
|
|
border: 1px solid rgba(52, 211, 153, 0.3);
|
|
}
|
|
|
|
.alert-nexgen.success .alert-stripe {
|
|
background: var(--neon-green);
|
|
}
|
|
|
|
.alert-nexgen.warning {
|
|
background: rgba(251, 191, 36, 0.1);
|
|
border: 1px solid rgba(251, 191, 36, 0.3);
|
|
}
|
|
|
|
.alert-nexgen.warning .alert-stripe {
|
|
background: var(--neon-yellow);
|
|
}
|
|
|
|
.alert-icon {
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
.alert-nexgen.error .alert-icon {
|
|
color: var(--neon-red);
|
|
}
|
|
|
|
.alert-nexgen.success .alert-icon {
|
|
color: var(--neon-green);
|
|
}
|
|
|
|
.alert-nexgen.warning .alert-icon {
|
|
color: var(--neon-yellow);
|
|
}
|
|
|
|
.alert-label {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.7rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0.1em;
|
|
margin-bottom: 0.2rem;
|
|
}
|
|
|
|
.alert-text {
|
|
font-size: 0.9rem;
|
|
color: var(--dark-300);
|
|
}
|
|
|
|
.alert-dismiss {
|
|
background: none;
|
|
border: none;
|
|
color: currentColor;
|
|
cursor: pointer;
|
|
padding: 0.5rem;
|
|
border-radius: 6px;
|
|
transition: background 0.2s ease;
|
|
}
|
|
|
|
.alert-dismiss:hover {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
/* Section Titles */
|
|
.surveys-grid-section {
|
|
margin-bottom: 3rem;
|
|
}
|
|
|
|
.section-title h2 {
|
|
font-family: var(--font-mono);
|
|
font-size: 1.5rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0.1em;
|
|
text-align: center;
|
|
color: #ffffff;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.title-underline {
|
|
width: 100px;
|
|
height: 3px;
|
|
background: linear-gradient(90deg, var(--neon-blue), var(--neon-purple));
|
|
margin: 0 auto 3rem;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
/* Survey Cards Grid */
|
|
.surveys-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
|
|
gap: 2rem;
|
|
max-width: 1400px;
|
|
margin: 0 auto;
|
|
padding: 0 2rem;
|
|
}
|
|
|
|
/* Next-Gen Survey Cards */
|
|
.survey-card {
|
|
background: var(--glass-bg);
|
|
backdrop-filter: blur(20px);
|
|
border: 1px solid var(--glass-border);
|
|
border-radius: 20px;
|
|
overflow: hidden;
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
position: relative;
|
|
opacity: 0;
|
|
transform: translateY(30px);
|
|
}
|
|
|
|
.survey-card.animate-in {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.survey-card:hover {
|
|
transform: translateY(-5px);
|
|
border-color: rgba(96, 165, 250, 0.4);
|
|
box-shadow: 0 20px 40px rgba(96, 165, 250, 0.1);
|
|
}
|
|
|
|
.card-glow {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 2px;
|
|
background: linear-gradient(90deg, var(--neon-blue), var(--neon-purple), var(--neon-pink));
|
|
opacity: 0;
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
|
|
.survey-card:hover .card-glow {
|
|
opacity: 1;
|
|
}
|
|
|
|
.card-border {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
border-radius: 20px;
|
|
background: linear-gradient(135deg, rgba(96, 165, 250, 0.1), rgba(192, 132, 252, 0.1));
|
|
opacity: 0;
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
|
|
.survey-card:hover .card-border {
|
|
opacity: 1;
|
|
}
|
|
|
|
.card-header {
|
|
padding: 2rem 2rem 1rem;
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
|
|
.card-title-section {
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.card-title {
|
|
font-size: 1.4rem;
|
|
font-weight: 700;
|
|
color: #ffffff;
|
|
margin-bottom: 1rem;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
/* Enhanced Participants Section */
|
|
.participants-section {
|
|
margin-top: 1.5rem;
|
|
}
|
|
|
|
.participants-label {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.6rem;
|
|
font-weight: 600;
|
|
letter-spacing: 0.1em;
|
|
color: var(--dark-400);
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.avatar-stack {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.3rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.user-avatar-enhanced {
|
|
position: relative;
|
|
display: inline-block;
|
|
}
|
|
|
|
.avatar-circle {
|
|
width: 30px;
|
|
height: 30px;
|
|
background: linear-gradient(135deg, var(--neon-blue), var(--neon-purple));
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: white;
|
|
font-weight: 600;
|
|
font-size: 0.7rem;
|
|
border: 2px solid var(--dark-800);
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
animation: avatarFloat 2s ease-in-out infinite;
|
|
animation-delay: var(--delay);
|
|
}
|
|
|
|
.avatar-circle:hover {
|
|
transform: scale(1.1) translateY(-2px);
|
|
box-shadow: 0 8px 25px rgba(96, 165, 250, 0.4);
|
|
}
|
|
|
|
.avatar-tooltip {
|
|
position: absolute;
|
|
bottom: 35px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
z-index: 1050;
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transition: all 0.3s ease;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.user-avatar-enhanced:hover .avatar-tooltip {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
transform: translateX(-50%) translateY(-5px);
|
|
}
|
|
|
|
.tooltip-content {
|
|
background: rgba(15, 23, 42, 0.95);
|
|
backdrop-filter: blur(20px);
|
|
border: 1px solid rgba(96, 165, 250, 0.3);
|
|
border-radius: 8px;
|
|
padding: 0.8rem 1rem;
|
|
min-width: 150px;
|
|
text-align: center;
|
|
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
|
|
position: relative;
|
|
}
|
|
|
|
.tooltip-content::before {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: -6px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 0;
|
|
height: 0;
|
|
border-left: 6px solid transparent;
|
|
border-right: 6px solid transparent;
|
|
border-top: 6px solid rgba(96, 165, 250, 0.3);
|
|
}
|
|
|
|
.user-name {
|
|
font-weight: 600;
|
|
color: #ffffff;
|
|
font-size: 0.8rem;
|
|
margin-bottom: 0.3rem;
|
|
}
|
|
|
|
.user-email {
|
|
font-size: 0.7rem;
|
|
color: var(--dark-300);
|
|
font-family: var(--font-mono);
|
|
}
|
|
|
|
.avatar-more {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.7rem;
|
|
color: var(--dark-400);
|
|
margin-left: 0.5rem;
|
|
}
|
|
|
|
.participants-list {
|
|
background: rgba(255, 255, 255, 0.02);
|
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
border-radius: 12px;
|
|
padding: 1rem;
|
|
max-height: 150px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.participant-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
padding: 0.8rem;
|
|
border-radius: 8px;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.participant-item:hover {
|
|
background: rgba(96, 165, 250, 0.05);
|
|
}
|
|
|
|
.participant-avatar {
|
|
width: 32px;
|
|
height: 32px;
|
|
background: linear-gradient(135deg, var(--neon-green), var(--neon-cyan));
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: white;
|
|
font-weight: 600;
|
|
font-size: 0.8rem;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.participant-details {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.participant-name {
|
|
font-weight: 600;
|
|
color: #ffffff;
|
|
font-size: 0.85rem;
|
|
margin-bottom: 0.2rem;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.participant-email {
|
|
font-size: 0.75rem;
|
|
color: var(--dark-400);
|
|
font-family: var(--font-mono);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.participants-overflow {
|
|
text-align: center;
|
|
padding: 0.8rem;
|
|
color: var(--dark-400);
|
|
font-size: 0.75rem;
|
|
font-style: italic;
|
|
background: rgba(255, 255, 255, 0.02);
|
|
border: 1px solid rgba(255, 255, 255, 0.05);
|
|
border-radius: 8px;
|
|
}
|
|
|
|
/* FIXED DROPDOWN MENU STYLES */
|
|
.card-menu {
|
|
position: absolute;
|
|
top: 1.5rem;
|
|
right: 1.5rem;
|
|
}
|
|
|
|
.menu-dots {
|
|
background: rgba(255, 255, 255, 0.05);
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
border-radius: 8px;
|
|
padding: 0.6rem;
|
|
cursor: pointer;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.menu-dots span {
|
|
width: 3px;
|
|
height: 3px;
|
|
background: var(--dark-300);
|
|
border-radius: 50%;
|
|
transition: background 0.2s ease;
|
|
}
|
|
|
|
.menu-dots:hover {
|
|
background: rgba(96, 165, 250, 0.1);
|
|
border-color: rgba(96, 165, 250, 0.3);
|
|
}
|
|
|
|
.menu-dots:hover span {
|
|
background: var(--neon-blue);
|
|
}
|
|
|
|
/* Bootstrap dropdown menu with custom styling */
|
|
.dropdown-menu.dropdown-nexgen {
|
|
background: rgba(15, 23, 42, 0.95) !important;
|
|
backdrop-filter: blur(20px);
|
|
border: 1px solid rgba(96, 165, 250, 0.2) !important;
|
|
border-radius: 12px !important;
|
|
padding: 0.5rem;
|
|
margin: 0;
|
|
min-width: 180px;
|
|
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3) !important;
|
|
/* High z-index to ensure visibility */
|
|
z-index: 1060 !important;
|
|
}
|
|
|
|
.dropdown-menu.dropdown-nexgen .dropdown-item {
|
|
display: flex !important;
|
|
align-items: center;
|
|
gap: 0.8rem;
|
|
padding: 0.8rem 1rem !important;
|
|
color: var(--dark-300) !important;
|
|
text-decoration: none;
|
|
border-radius: 8px;
|
|
font-size: 0.85rem;
|
|
font-weight: 500;
|
|
transition: all 0.2s ease;
|
|
background: transparent !important;
|
|
}
|
|
|
|
.dropdown-menu.dropdown-nexgen .dropdown-item:hover,
|
|
.dropdown-menu.dropdown-nexgen .dropdown-item:focus {
|
|
background: rgba(96, 165, 250, 0.1) !important;
|
|
color: var(--neon-blue) !important;
|
|
}
|
|
|
|
.dropdown-menu.dropdown-nexgen .dropdown-divider {
|
|
height: 1px;
|
|
background: rgba(255, 255, 255, 0.1);
|
|
margin: 0.5rem 0;
|
|
border: none;
|
|
}
|
|
|
|
/* Metrics Panel */
|
|
.metrics-panel {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 1rem;
|
|
padding: 0 2rem;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.metric-chip {
|
|
background: rgba(255, 255, 255, 0.03);
|
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
border-radius: 12px;
|
|
padding: 1.2rem;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.metric-chip:hover {
|
|
background: rgba(255, 255, 255, 0.05);
|
|
border-color: rgba(255, 255, 255, 0.15);
|
|
}
|
|
|
|
.metric-icon {
|
|
width: 36px;
|
|
height: 36px;
|
|
border-radius: 8px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: white;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.metric-chip.questions .metric-icon {
|
|
background: linear-gradient(135deg, var(--neon-blue), var(--neon-cyan));
|
|
}
|
|
|
|
.metric-chip.responses .metric-icon {
|
|
background: linear-gradient(135deg, var(--neon-green), var(--neon-cyan));
|
|
}
|
|
|
|
.metric-chip.textdata .metric-icon {
|
|
background: linear-gradient(135deg, var(--neon-purple), var(--neon-pink));
|
|
}
|
|
|
|
.metric-number {
|
|
font-size: 1.4rem;
|
|
font-weight: 700;
|
|
color: #ffffff;
|
|
line-height: 1;
|
|
}
|
|
|
|
.metric-text {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.6rem;
|
|
font-weight: 600;
|
|
letter-spacing: 0.1em;
|
|
color: var(--dark-400);
|
|
}
|
|
|
|
.activity-indicator {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.8rem;
|
|
padding: 0.8rem 2rem;
|
|
font-family: var(--font-mono);
|
|
font-size: 0.7rem;
|
|
font-weight: 500;
|
|
letter-spacing: 0.05em;
|
|
color: var(--dark-400);
|
|
}
|
|
|
|
.activity-pulse {
|
|
width: 6px;
|
|
height: 6px;
|
|
background: var(--neon-green);
|
|
border-radius: 50%;
|
|
animation: pulse 2s infinite;
|
|
}
|
|
|
|
/* Action Zone */
|
|
.action-zone {
|
|
padding: 2rem;
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
|
|
.primary-action {
|
|
width: 100%;
|
|
background: linear-gradient(135deg, var(--neon-blue), var(--neon-purple));
|
|
border: none;
|
|
border-radius: 16px;
|
|
padding: 0;
|
|
margin-bottom: 1.5rem;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.primary-action:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 20px 40px rgba(96, 165, 250, 0.2);
|
|
}
|
|
|
|
.action-bg {
|
|
position: absolute;
|
|
top: 0;
|
|
left: -100%;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
|
|
transition: left 0.6s ease;
|
|
}
|
|
|
|
.primary-action:hover .action-bg {
|
|
left: 100%;
|
|
}
|
|
|
|
.action-content {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1.5rem;
|
|
padding: 1.5rem 2rem;
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
|
|
.action-icon {
|
|
width: 50px;
|
|
height: 50px;
|
|
background: rgba(255, 255, 255, 0.15);
|
|
border-radius: 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: white;
|
|
font-size: 1.3rem;
|
|
}
|
|
|
|
.action-text {
|
|
flex: 1;
|
|
text-align: left;
|
|
color: white;
|
|
}
|
|
|
|
.action-title {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.9rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0.05em;
|
|
margin-bottom: 0.3rem;
|
|
}
|
|
|
|
.action-subtitle {
|
|
font-size: 0.8rem;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.action-arrow {
|
|
color: white;
|
|
font-size: 1rem;
|
|
transition: transform 0.2s ease;
|
|
}
|
|
|
|
.primary-action:hover .action-arrow {
|
|
transform: translateX(5px);
|
|
}
|
|
|
|
/* Quick Actions */
|
|
.quick-actions {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 1rem;
|
|
}
|
|
|
|
.quick-btn {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 1.2rem 0.8rem;
|
|
background: rgba(255, 255, 255, 0.03);
|
|
border: 1px solid;
|
|
border-radius: 12px;
|
|
text-decoration: none;
|
|
transition: all 0.2s ease;
|
|
min-height: 80px;
|
|
gap: 0.6rem;
|
|
}
|
|
|
|
.quick-btn:hover {
|
|
transform: translateY(-2px);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.risk-btn {
|
|
border-color: rgba(248, 113, 113, 0.3);
|
|
color: var(--neon-red);
|
|
}
|
|
|
|
.risk-btn:hover {
|
|
background: rgba(248, 113, 113, 0.1);
|
|
color: var(--neon-red);
|
|
}
|
|
|
|
.batch-btn {
|
|
border-color: rgba(34, 211, 238, 0.3);
|
|
color: var(--neon-cyan);
|
|
}
|
|
|
|
.batch-btn:hover {
|
|
background: rgba(34, 211, 238, 0.1);
|
|
color: var(--neon-cyan);
|
|
}
|
|
|
|
.trend-btn {
|
|
border-color: rgba(52, 211, 153, 0.3);
|
|
color: var(--neon-green);
|
|
}
|
|
|
|
.trend-btn:hover {
|
|
background: rgba(52, 211, 153, 0.1);
|
|
color: var(--neon-green);
|
|
}
|
|
|
|
.quick-btn i {
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
.quick-btn span {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.6rem;
|
|
font-weight: 600;
|
|
letter-spacing: 0.1em;
|
|
}
|
|
|
|
/* Disabled State */
|
|
.disabled-state {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
padding: 1.5rem;
|
|
background: rgba(100, 116, 139, 0.05);
|
|
border: 1px solid rgba(100, 116, 139, 0.2);
|
|
border-radius: 12px;
|
|
}
|
|
|
|
.disabled-icon {
|
|
width: 40px;
|
|
height: 40px;
|
|
background: rgba(100, 116, 139, 0.2);
|
|
border-radius: 8px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: var(--dark-400);
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
.disabled-title {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.8rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0.05em;
|
|
color: var(--dark-400);
|
|
margin-bottom: 0.2rem;
|
|
}
|
|
|
|
.disabled-message {
|
|
font-size: 0.8rem;
|
|
color: var(--dark-500);
|
|
}
|
|
|
|
/* Empty State */
|
|
.empty-nexgen {
|
|
grid-column: 1 / -1;
|
|
text-align: center;
|
|
padding: 4rem 2rem;
|
|
background: var(--glass-bg);
|
|
backdrop-filter: blur(20px);
|
|
border: 1px solid var(--glass-border);
|
|
border-radius: 20px;
|
|
position: relative;
|
|
}
|
|
|
|
.empty-visual {
|
|
position: relative;
|
|
margin-bottom: 2rem;
|
|
display: inline-block;
|
|
}
|
|
|
|
.empty-icon {
|
|
width: 100px;
|
|
height: 100px;
|
|
background: rgba(100, 116, 139, 0.1);
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 2.5rem;
|
|
color: var(--dark-400);
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
|
|
.empty-rings {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
.ring {
|
|
position: absolute;
|
|
border: 1px solid;
|
|
border-radius: 50%;
|
|
opacity: 0.3;
|
|
}
|
|
|
|
.ring.r1 {
|
|
width: 120px;
|
|
height: 120px;
|
|
top: -60px;
|
|
left: -60px;
|
|
border-color: var(--neon-blue);
|
|
animation: ringPulse 3s infinite;
|
|
}
|
|
|
|
.ring.r2 {
|
|
width: 140px;
|
|
height: 140px;
|
|
top: -70px;
|
|
left: -70px;
|
|
border-color: var(--neon-purple);
|
|
animation: ringPulse 3s infinite 1s;
|
|
}
|
|
|
|
.ring.r3 {
|
|
width: 160px;
|
|
height: 160px;
|
|
top: -80px;
|
|
left: -80px;
|
|
border-color: var(--neon-pink);
|
|
animation: ringPulse 3s infinite 2s;
|
|
}
|
|
|
|
.empty-text h3 {
|
|
font-family: var(--font-mono);
|
|
font-size: 1.3rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0.05em;
|
|
color: #ffffff;
|
|
margin-bottom: 0.8rem;
|
|
}
|
|
|
|
.empty-text p {
|
|
color: var(--dark-300);
|
|
margin-bottom: 2rem;
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
.create-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.8rem;
|
|
padding: 1rem 2rem;
|
|
background: linear-gradient(135deg, var(--neon-green), var(--neon-cyan));
|
|
color: white;
|
|
text-decoration: none;
|
|
border-radius: 12px;
|
|
font-family: var(--font-mono);
|
|
font-size: 0.8rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0.05em;
|
|
transition: all 0.3s ease;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.create-btn:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 15px 30px rgba(52, 211, 153, 0.3);
|
|
color: white;
|
|
}
|
|
|
|
.btn-glow {
|
|
position: absolute;
|
|
top: 0;
|
|
left: -100%;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
|
|
transition: left 0.6s ease;
|
|
}
|
|
|
|
.create-btn:hover .btn-glow {
|
|
left: 100%;
|
|
}
|
|
|
|
/* Next-Gen Modals */
|
|
.modal-backdrop {
|
|
backdrop-filter: blur(12px);
|
|
background: rgba(15, 23, 42, 0.7);
|
|
z-index: 1040;
|
|
}
|
|
|
|
.modal-nexgen {
|
|
background: rgba(15, 23, 42, 0.95);
|
|
backdrop-filter: blur(20px);
|
|
border: 1px solid rgba(96, 165, 250, 0.2);
|
|
border-radius: 20px;
|
|
overflow: hidden;
|
|
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
.modal-header-nexgen {
|
|
position: relative;
|
|
background: linear-gradient(135deg, var(--neon-blue), var(--neon-purple));
|
|
padding: 0;
|
|
border: none;
|
|
}
|
|
|
|
.header-pattern {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, transparent 50%);
|
|
}
|
|
|
|
.header-content {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1.5rem;
|
|
padding: 2rem;
|
|
z-index: 2;
|
|
}
|
|
|
|
.modal-icon-nexgen {
|
|
width: 50px;
|
|
height: 50px;
|
|
background: rgba(255, 255, 255, 0.15);
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
border-radius: 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: white;
|
|
font-size: 1.3rem;
|
|
}
|
|
|
|
.modal-title-group h4 {
|
|
font-family: var(--font-mono);
|
|
font-size: 1.1rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0.05em;
|
|
color: white;
|
|
margin-bottom: 0.3rem;
|
|
}
|
|
|
|
.modal-title-group p {
|
|
font-size: 0.8rem;
|
|
color: rgba(255, 255, 255, 0.7);
|
|
margin: 0;
|
|
}
|
|
|
|
.close-nexgen {
|
|
position: absolute;
|
|
top: 1.5rem;
|
|
right: 1.5rem;
|
|
width: 36px;
|
|
height: 36px;
|
|
background: rgba(255, 255, 255, 0.1);
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
border-radius: 8px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: white;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
z-index: 3;
|
|
}
|
|
|
|
.close-nexgen:hover {
|
|
background: rgba(255, 255, 255, 0.2);
|
|
}
|
|
|
|
.modal-body-nexgen {
|
|
padding: 2rem;
|
|
background: rgba(15, 23, 42, 0.8);
|
|
}
|
|
|
|
.test-form-nexgen {
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.input-nexgen {
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.input-label {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.8rem;
|
|
font-family: var(--font-mono);
|
|
font-size: 0.7rem;
|
|
font-weight: 600;
|
|
letter-spacing: 0.1em;
|
|
color: var(--dark-300);
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.textarea-nexgen {
|
|
width: 100%;
|
|
padding: 1.2rem;
|
|
background: rgba(255, 255, 255, 0.03);
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
border-radius: 12px;
|
|
color: #e2e8f0;
|
|
font-family: inherit;
|
|
font-size: 0.9rem;
|
|
resize: vertical;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.textarea-nexgen:focus {
|
|
outline: none;
|
|
border-color: rgba(96, 165, 250, 0.5);
|
|
background: rgba(255, 255, 255, 0.05);
|
|
box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.1);
|
|
}
|
|
|
|
.input-hint {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.8rem;
|
|
margin-top: 0.8rem;
|
|
padding: 1rem;
|
|
background: rgba(96, 165, 250, 0.05);
|
|
border: 1px solid rgba(96, 165, 250, 0.2);
|
|
border-radius: 8px;
|
|
font-size: 0.8rem;
|
|
color: var(--dark-300);
|
|
}
|
|
|
|
.hint-icon {
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.results-divider-nexgen {
|
|
height: 1px;
|
|
background: linear-gradient(90deg, transparent, rgba(96, 165, 250, 0.3), transparent);
|
|
margin: 2rem 0;
|
|
}
|
|
|
|
.results-header-nexgen {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.8rem;
|
|
font-family: var(--font-mono);
|
|
font-size: 0.8rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0.1em;
|
|
color: var(--neon-blue);
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.modal-footer-nexgen {
|
|
background: rgba(30, 41, 59, 0.8);
|
|
border: none;
|
|
padding: 1.5rem 2rem;
|
|
display: flex;
|
|
gap: 1rem;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.btn-nexgen {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.6rem;
|
|
padding: 0.8rem 1.5rem;
|
|
border-radius: 8px;
|
|
font-family: var(--font-mono);
|
|
font-size: 0.7rem;
|
|
font-weight: 600;
|
|
letter-spacing: 0.05em;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
border: 1px solid;
|
|
}
|
|
|
|
.btn-nexgen.secondary {
|
|
background: rgba(255, 255, 255, 0.05);
|
|
border-color: rgba(255, 255, 255, 0.2);
|
|
color: var(--dark-300);
|
|
}
|
|
|
|
.btn-nexgen.secondary:hover {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
color: #e2e8f0;
|
|
}
|
|
|
|
.btn-nexgen.primary {
|
|
background: linear-gradient(135deg, var(--neon-blue), var(--neon-purple));
|
|
border-color: transparent;
|
|
color: white;
|
|
}
|
|
|
|
.btn-nexgen.primary:hover {
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 10px 20px rgba(96, 165, 250, 0.3);
|
|
}
|
|
|
|
/* Analysis Results */
|
|
.results-nexgen {
|
|
padding: 1rem 0;
|
|
}
|
|
|
|
.results-matrix {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 1rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.result-nexgen {
|
|
background: rgba(255, 255, 255, 0.03);
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
border-radius: 12px;
|
|
padding: 1.2rem;
|
|
}
|
|
|
|
.result-header-nexgen {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.8rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.result-icon-nexgen {
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: 6px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 0.9rem;
|
|
color: white;
|
|
}
|
|
|
|
.result-nexgen.sentiment .result-icon-nexgen {
|
|
background: linear-gradient(135deg, var(--neon-pink), var(--neon-red));
|
|
}
|
|
|
|
.result-nexgen.risk .result-icon-nexgen {
|
|
background: linear-gradient(135deg, var(--neon-yellow), var(--neon-red));
|
|
}
|
|
|
|
.result-title {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.7rem;
|
|
font-weight: 600;
|
|
letter-spacing: 0.1em;
|
|
color: var(--dark-300);
|
|
}
|
|
|
|
.result-value-nexgen {
|
|
text-align: center;
|
|
}
|
|
|
|
.value-chip {
|
|
padding: 0.4rem 1rem;
|
|
border-radius: 20px;
|
|
font-family: var(--font-mono);
|
|
font-size: 0.7rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0.05em;
|
|
text-transform: uppercase;
|
|
border: 1px solid;
|
|
}
|
|
|
|
.value-chip.positive { background: rgba(52, 211, 153, 0.2); border-color: var(--neon-green); color: var(--neon-green); }
|
|
.value-chip.negative { background: rgba(248, 113, 113, 0.2); border-color: var(--neon-red); color: var(--neon-red); }
|
|
.value-chip.neutral { background: rgba(100, 116, 139, 0.2); border-color: var(--dark-500); color: var(--dark-300); }
|
|
.value-chip.unknown { background: rgba(100, 116, 139, 0.1); border-color: var(--dark-600); color: var(--dark-400); }
|
|
|
|
.value-chip.low { background: rgba(52, 211, 153, 0.2); border-color: var(--neon-green); color: var(--neon-green); }
|
|
.value-chip.moderate { background: rgba(251, 191, 36, 0.2); border-color: var(--neon-yellow); color: var(--neon-yellow); }
|
|
.value-chip.high { background: rgba(248, 113, 113, 0.2); border-color: var(--neon-red); color: var(--neon-red); }
|
|
.value-chip.critical { background: rgba(239, 68, 68, 0.3); border-color: #dc2626; color: #fca5a5; }
|
|
|
|
.insights-nexgen {
|
|
display: grid;
|
|
gap: 1.5rem;
|
|
}
|
|
|
|
.insight-panel {
|
|
background: rgba(255, 255, 255, 0.02);
|
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
border-radius: 12px;
|
|
padding: 1.2rem;
|
|
}
|
|
|
|
.panel-header-nexgen {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.8rem;
|
|
font-family: var(--font-mono);
|
|
font-size: 0.7rem;
|
|
font-weight: 600;
|
|
letter-spacing: 0.1em;
|
|
color: var(--dark-300);
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.tags-container {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.6rem;
|
|
}
|
|
|
|
.tag-nexgen {
|
|
padding: 0.4rem 0.8rem;
|
|
border-radius: 6px;
|
|
font-size: 0.7rem;
|
|
font-weight: 500;
|
|
border: 1px solid;
|
|
}
|
|
|
|
.tag-nexgen.phrase {
|
|
background: rgba(255, 255, 255, 0.05);
|
|
border-color: rgba(255, 255, 255, 0.2);
|
|
color: var(--dark-200);
|
|
}
|
|
|
|
.tag-nexgen.category {
|
|
background: rgba(96, 165, 250, 0.2);
|
|
border-color: var(--neon-blue);
|
|
color: var(--neon-blue);
|
|
}
|
|
|
|
.no-data-nexgen {
|
|
color: var(--dark-500);
|
|
font-style: italic;
|
|
font-size: 0.8rem;
|
|
text-align: center;
|
|
width: 100%;
|
|
padding: 1rem;
|
|
}
|
|
|
|
/* Service Status in Modal */
|
|
.services-matrix {
|
|
display: grid;
|
|
gap: 1rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.service-nexgen {
|
|
background: rgba(255, 255, 255, 0.03);
|
|
border-radius: 12px;
|
|
padding: 1.2rem;
|
|
position: relative;
|
|
overflow: hidden;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.service-border {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 2px;
|
|
}
|
|
|
|
.service-nexgen.online .service-border {
|
|
background: linear-gradient(90deg, var(--neon-green), var(--neon-cyan));
|
|
}
|
|
|
|
.service-nexgen.offline .service-border {
|
|
background: linear-gradient(90deg, var(--neon-red), var(--neon-yellow));
|
|
}
|
|
|
|
.service-content {
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
|
|
.service-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 0.8rem;
|
|
}
|
|
|
|
.service-icon-nexgen {
|
|
width: 36px;
|
|
height: 36px;
|
|
background: rgba(255, 255, 255, 0.1);
|
|
border-radius: 6px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #e2e8f0;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.service-status-nexgen {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.6rem;
|
|
font-family: var(--font-mono);
|
|
font-size: 0.6rem;
|
|
font-weight: 600;
|
|
letter-spacing: 0.1em;
|
|
}
|
|
|
|
.status-dot-nexgen {
|
|
width: 6px;
|
|
height: 6px;
|
|
border-radius: 50%;
|
|
animation: pulse 2s infinite;
|
|
}
|
|
|
|
.service-nexgen.online .status-dot-nexgen {
|
|
background: var(--neon-green);
|
|
}
|
|
|
|
.service-nexgen.offline .status-dot-nexgen {
|
|
background: var(--neon-red);
|
|
}
|
|
|
|
.service-nexgen.online .service-status-nexgen span {
|
|
color: var(--neon-green);
|
|
}
|
|
|
|
.service-nexgen.offline .service-status-nexgen span {
|
|
color: var(--neon-red);
|
|
}
|
|
|
|
.service-details h6 {
|
|
font-weight: 700;
|
|
color: #ffffff;
|
|
margin-bottom: 0.3rem;
|
|
}
|
|
|
|
.service-details p {
|
|
font-size: 0.8rem;
|
|
color: var(--dark-300);
|
|
margin: 0;
|
|
}
|
|
|
|
.system-status {
|
|
padding: 1.5rem;
|
|
border-radius: 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1.2rem;
|
|
}
|
|
|
|
.system-status.operational {
|
|
background: rgba(52, 211, 153, 0.1);
|
|
border: 1px solid rgba(52, 211, 153, 0.3);
|
|
}
|
|
|
|
.system-status.degraded {
|
|
background: rgba(251, 191, 36, 0.1);
|
|
border: 1px solid rgba(251, 191, 36, 0.3);
|
|
}
|
|
|
|
.status-indicator {
|
|
position: relative;
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
.system-status.operational .status-indicator {
|
|
background: var(--neon-green);
|
|
color: white;
|
|
}
|
|
|
|
.system-status.degraded .status-indicator {
|
|
background: var(--neon-yellow);
|
|
color: var(--dark-900);
|
|
}
|
|
|
|
.indicator-ring {
|
|
position: absolute;
|
|
top: -3px;
|
|
left: -3px;
|
|
right: -3px;
|
|
bottom: -3px;
|
|
border: 1px solid currentColor;
|
|
border-radius: 50%;
|
|
opacity: 0.3;
|
|
animation: pulse 2s infinite;
|
|
}
|
|
|
|
.status-title {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.9rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0.05em;
|
|
color: #ffffff;
|
|
margin-bottom: 0.3rem;
|
|
}
|
|
|
|
.status-message {
|
|
font-size: 0.8rem;
|
|
color: var(--dark-300);
|
|
}
|
|
|
|
/* Loading States */
|
|
.loading-nexgen {
|
|
text-align: center;
|
|
padding: 3rem;
|
|
}
|
|
|
|
.scan-line {
|
|
width: 60px;
|
|
height: 4px;
|
|
background: linear-gradient(90deg, var(--neon-blue), var(--neon-cyan));
|
|
border-radius: 2px;
|
|
margin: 0 auto 2rem;
|
|
animation: scanPulse 1.5s ease-in-out infinite;
|
|
}
|
|
|
|
.loading-text h5 {
|
|
font-family: var(--font-mono);
|
|
font-size: 1rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0.05em;
|
|
color: #ffffff;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.loading-text p {
|
|
color: var(--dark-300);
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
.analysis-loading-nexgen {
|
|
text-align: center;
|
|
padding: 2rem;
|
|
}
|
|
|
|
.loading-scanner {
|
|
width: 80px;
|
|
height: 4px;
|
|
background: rgba(96, 165, 250, 0.2);
|
|
border-radius: 2px;
|
|
margin: 0 auto 1.5rem;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.scanner-line {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 30%;
|
|
height: 100%;
|
|
background: linear-gradient(90deg, var(--neon-blue), var(--neon-cyan));
|
|
border-radius: 2px;
|
|
animation: scanMove 2s ease-in-out infinite;
|
|
}
|
|
|
|
.loading-info h6 {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.9rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0.05em;
|
|
color: #ffffff;
|
|
margin-bottom: 0.4rem;
|
|
}
|
|
|
|
.loading-info p {
|
|
color: var(--dark-300);
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
/* Error States */
|
|
.error-nexgen {
|
|
text-align: center;
|
|
padding: 2rem;
|
|
}
|
|
|
|
.error-visual {
|
|
width: 60px;
|
|
height: 60px;
|
|
background: rgba(248, 113, 113, 0.1);
|
|
border: 1px solid rgba(248, 113, 113, 0.3);
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin: 0 auto 1rem;
|
|
color: var(--neon-red);
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
.error-info h5 {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.9rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0.05em;
|
|
color: var(--neon-red);
|
|
margin-bottom: 0.4rem;
|
|
}
|
|
|
|
.error-info p {
|
|
color: var(--dark-300);
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
/* Progress Modal */
|
|
.progress-nexgen {
|
|
text-align: center;
|
|
padding: 2rem;
|
|
}
|
|
|
|
.progress-visual {
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.brain-scan {
|
|
position: relative;
|
|
display: inline-block;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.scan-waves {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
.wave {
|
|
position: absolute;
|
|
border: 1px solid;
|
|
border-radius: 50%;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.wave.w1 {
|
|
width: 80px;
|
|
height: 80px;
|
|
top: -40px;
|
|
left: -40px;
|
|
border-color: var(--neon-blue);
|
|
animation: waveExpand 2s ease-in-out infinite;
|
|
}
|
|
|
|
.wave.w2 {
|
|
width: 100px;
|
|
height: 100px;
|
|
top: -50px;
|
|
left: -50px;
|
|
border-color: var(--neon-purple);
|
|
animation: waveExpand 2s ease-in-out infinite 0.7s;
|
|
}
|
|
|
|
.wave.w3 {
|
|
width: 120px;
|
|
height: 120px;
|
|
top: -60px;
|
|
left: -60px;
|
|
border-color: var(--neon-cyan);
|
|
animation: waveExpand 2s ease-in-out infinite 1.4s;
|
|
}
|
|
|
|
.brain-icon {
|
|
width: 60px;
|
|
height: 60px;
|
|
background: linear-gradient(135deg, var(--neon-blue), var(--neon-purple));
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: white;
|
|
font-size: 1.5rem;
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
|
|
.progress-info h5 {
|
|
font-family: var(--font-mono);
|
|
font-size: 1rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0.05em;
|
|
color: #ffffff;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.progress-track {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.progress-bar-nexgen {
|
|
flex: 1;
|
|
height: 8px;
|
|
background: rgba(100, 116, 139, 0.2);
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
|
|
.progress-fill-nexgen {
|
|
height: 100%;
|
|
background: linear-gradient(90deg, var(--neon-blue), var(--neon-cyan));
|
|
border-radius: 4px;
|
|
transition: width 0.3s ease;
|
|
position: relative;
|
|
}
|
|
|
|
.progress-glow {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
width: 20px;
|
|
height: 100%;
|
|
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5));
|
|
filter: blur(3px);
|
|
}
|
|
|
|
.progress-percent {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.8rem;
|
|
font-weight: 600;
|
|
color: var(--neon-blue);
|
|
min-width: 40px;
|
|
}
|
|
|
|
/* Progress Pipeline */
|
|
.progress-pipeline {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 1rem;
|
|
max-width: 400px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.pipeline-step {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.step-marker {
|
|
width: 24px;
|
|
height: 24px;
|
|
border: 2px solid var(--dark-600);
|
|
border-radius: 50%;
|
|
background: var(--dark-800);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.pipeline-step.completed .step-marker {
|
|
background: var(--neon-green);
|
|
border-color: var(--neon-green);
|
|
box-shadow: 0 0 15px rgba(52, 211, 153, 0.5);
|
|
}
|
|
|
|
.pipeline-step.active .step-marker {
|
|
background: var(--neon-blue);
|
|
border-color: var(--neon-blue);
|
|
box-shadow: 0 0 15px rgba(96, 165, 250, 0.5);
|
|
animation: pulse 1.5s infinite;
|
|
}
|
|
|
|
.step-label {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.6rem;
|
|
font-weight: 600;
|
|
letter-spacing: 0.1em;
|
|
color: var(--dark-500);
|
|
transition: color 0.3s ease;
|
|
}
|
|
|
|
.pipeline-step.completed .step-label {
|
|
color: var(--neon-green);
|
|
}
|
|
|
|
.pipeline-step.active .step-label {
|
|
color: var(--neon-blue);
|
|
}
|
|
|
|
.pipeline-connector {
|
|
width: 20px;
|
|
height: 2px;
|
|
background: var(--dark-600);
|
|
transition: background 0.3s ease;
|
|
}
|
|
|
|
/* Animations */
|
|
@@keyframes gridMove {
|
|
0% { transform: translate(0, 0); }
|
|
100% { transform: translate(60px, 60px); }
|
|
}
|
|
|
|
@@keyframes meshShift {
|
|
0%, 100% {
|
|
filter: hue-rotate(0deg);
|
|
transform: scale(1);
|
|
}
|
|
50% {
|
|
filter: hue-rotate(30deg);
|
|
transform: scale(1.05);
|
|
}
|
|
}
|
|
|
|
@@keyframes pulse {
|
|
0%, 100% { opacity: 1; transform: scale(1); }
|
|
50% { opacity: 0.7; transform: scale(1.1); }
|
|
}
|
|
|
|
@@keyframes avatarFloat {
|
|
0%, 100% { transform: translateY(0); }
|
|
50% { transform: translateY(-3px); }
|
|
}
|
|
|
|
@@keyframes ringPulse {
|
|
0% { transform: scale(1); opacity: 0.3; }
|
|
50% { transform: scale(1.1); opacity: 0.1; }
|
|
100% { transform: scale(1); opacity: 0.3; }
|
|
}
|
|
|
|
@@keyframes scanPulse {
|
|
0%, 100% { transform: scaleX(1); opacity: 1; }
|
|
50% { transform: scaleX(1.2); opacity: 0.7; }
|
|
}
|
|
|
|
@@keyframes scanMove {
|
|
0% { left: 0; transform: translateX(-100%); }
|
|
50% { left: 50%; transform: translateX(-50%); }
|
|
100% { left: 100%; transform: translateX(0); }
|
|
}
|
|
|
|
@@keyframes waveExpand {
|
|
0% { transform: scale(0.8); opacity: 0.8; }
|
|
100% { transform: scale(1.2); opacity: 0; }
|
|
}
|
|
|
|
/* Responsive Design */
|
|
@@media (max-width: 1200px) {
|
|
.surveys-grid {
|
|
grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
|
|
}
|
|
}
|
|
|
|
@@media (max-width: 768px) {
|
|
.nav-container {
|
|
flex-wrap: wrap;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.nav-center {
|
|
order: 3;
|
|
flex-basis: 100%;
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.hero-title {
|
|
font-size: 2.5rem;
|
|
}
|
|
|
|
.surveys-grid {
|
|
grid-template-columns: 1fr;
|
|
padding: 0 1rem;
|
|
}
|
|
|
|
.metrics-panel {
|
|
grid-template-columns: 1fr;
|
|
padding: 0 1rem;
|
|
}
|
|
|
|
.quick-actions {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.services-strip {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.results-matrix {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.progress-pipeline {
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.pipeline-connector {
|
|
width: 2px;
|
|
height: 15px;
|
|
}
|
|
|
|
.nav-actions {
|
|
flex-direction: column;
|
|
width: 100%;
|
|
}
|
|
|
|
.nav-btn {
|
|
justify-content: center;
|
|
}
|
|
}
|
|
|
|
@@media (max-width: 480px) {
|
|
.container-fluid {
|
|
padding-left: 1rem;
|
|
padding-right: 1rem;
|
|
}
|
|
|
|
.hero-nexgen {
|
|
padding: 2rem 0 1rem;
|
|
}
|
|
|
|
.hero-title {
|
|
font-size: 2rem;
|
|
}
|
|
|
|
.card-header,
|
|
.action-zone {
|
|
padding: 1.5rem;
|
|
}
|
|
|
|
.metrics-panel {
|
|
padding: 0 1.5rem;
|
|
}
|
|
|
|
.activity-indicator {
|
|
padding: 0.8rem 1.5rem;
|
|
}
|
|
|
|
.org-badge {
|
|
flex-direction: column;
|
|
text-align: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.participants-list {
|
|
max-height: 120px;
|
|
}
|
|
|
|
.avatar-stack {
|
|
justify-content: center;
|
|
}
|
|
}
|
|
|
|
/* Focus States */
|
|
.nav-btn:focus,
|
|
.btn-nexgen:focus,
|
|
.textarea-nexgen:focus,
|
|
.primary-action:focus {
|
|
outline: 2px solid var(--neon-blue);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
/* Print Styles */
|
|
@@media print {
|
|
.bg-pattern,
|
|
.top-nav,
|
|
.modal,
|
|
.btn-nexgen,
|
|
.quick-actions {
|
|
display: none !important;
|
|
}
|
|
|
|
.survey-card {
|
|
break-inside: avoid;
|
|
border: 1px solid #333;
|
|
background: white;
|
|
color: black;
|
|
}
|
|
|
|
.nexgen-dashboard {
|
|
background: white;
|
|
}
|
|
}
|
|
|
|
/* Accessibility Improvements */
|
|
@@media (prefers-reduced-motion: reduce) {
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
animation-duration: 0.01ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
transition-duration: 0.01ms !important;
|
|
}
|
|
}
|
|
|
|
/* High Contrast Mode */
|
|
@@media (prefers-contrast: high) {
|
|
:root {
|
|
--neon-blue: #4d9fff;
|
|
--neon-purple: #d499ff;
|
|
--neon-green: #4dff88;
|
|
--dark-300: #ffffff;
|
|
--dark-400: #cccccc;
|
|
}
|
|
|
|
.survey-card,
|
|
.modal-nexgen,
|
|
.services-dashboard {
|
|
border-width: 2px;
|
|
}
|
|
}
|
|
|
|
/* Dark Mode Enhancement */
|
|
@@media (prefers-color-scheme: dark) {
|
|
.survey-card {
|
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
|
|
}
|
|
}
|
|
.modal-backdrop {
|
|
backdrop-filter: blur(12px);
|
|
background: rgba(15, 23, 42, 0.7);
|
|
z-index: 1040;
|
|
}
|
|
|
|
.modal {
|
|
z-index: 1050;
|
|
}
|
|
|
|
.modal-nexgen {
|
|
background: rgba(15, 23, 42, 0.95);
|
|
backdrop-filter: blur(20px);
|
|
border: 1px solid rgba(96, 165, 250, 0.2);
|
|
border-radius: 20px;
|
|
overflow: hidden;
|
|
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
|
|
position: relative;
|
|
z-index: 1060;
|
|
/* Prevent pointer events from bubbling to backdrop */
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.modal-dialog {
|
|
pointer-events: none;
|
|
}
|
|
|
|
.modal-dialog .modal-nexgen {
|
|
pointer-events: auto;
|
|
}
|
|
|
|
/* Ensure all interactive elements inside modal work properly */
|
|
.modal-nexgen input,
|
|
.modal-nexgen textarea,
|
|
.modal-nexgen button,
|
|
.modal-nexgen select,
|
|
.modal-nexgen .btn-nexgen {
|
|
pointer-events: auto;
|
|
position: relative;
|
|
z-index: 1061;
|
|
}
|
|
|
|
/* Fix textarea specifically */
|
|
.textarea-nexgen {
|
|
pointer-events: auto !important;
|
|
z-index: 1062 !important;
|
|
position: relative;
|
|
}
|
|
|
|
.textarea-nexgen:focus {
|
|
outline: none;
|
|
border-color: rgba(96, 165, 250, 0.5);
|
|
background: rgba(255, 255, 255, 0.05);
|
|
box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.1);
|
|
z-index: 1063;
|
|
}
|
|
|
|
/* Fix button interactions */
|
|
.btn-nexgen {
|
|
cursor: pointer;
|
|
pointer-events: auto !important;
|
|
z-index: 1061;
|
|
position: relative;
|
|
}
|
|
|
|
.btn-nexgen:hover,
|
|
.btn-nexgen:focus,
|
|
.btn-nexgen:active {
|
|
pointer-events: auto !important;
|
|
}
|
|
|
|
/* Fix close button */
|
|
.close-nexgen {
|
|
cursor: pointer;
|
|
pointer-events: auto !important;
|
|
z-index: 1065;
|
|
position: relative;
|
|
}
|
|
|
|
/* Prevent accidental backdrop clicks */
|
|
.modal-body-nexgen,
|
|
.modal-header-nexgen,
|
|
.modal-footer-nexgen {
|
|
pointer-events: auto;
|
|
position: relative;
|
|
}
|
|
</style>
|
|
}
|
|
|
|
<div class="nexgen-dashboard">
|
|
<!-- Dynamic Background -->
|
|
<div class="bg-pattern">
|
|
<div class="grid-overlay"></div>
|
|
<div class="gradient-mesh"></div>
|
|
</div>
|
|
|
|
<!-- Top Navigation Bar -->
|
|
<nav class="top-nav">
|
|
<div class="nav-container">
|
|
<div class="nav-brand">
|
|
<div class="brand-icon">
|
|
<i class="fas fa-brain"></i>
|
|
</div>
|
|
<div class="brand-text">
|
|
<span class="brand-name">NVKN</span>
|
|
<span class="brand-version">v1.0</span>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="nav-actions">
|
|
<button class="nav-btn" onclick="testAIServices()">
|
|
<i class="fas fa-satellite-dish"></i>
|
|
<span>AI Services connectvity</span>
|
|
</button>
|
|
<button class="nav-btn" data-bs-toggle="modal" data-bs-target="#testAnalysisModal">
|
|
<i class="fas fa-vial"></i>
|
|
<span>Test AI</span>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="org-badge">
|
|
<div class="org-avatar">NK</div>
|
|
<div class="org-info">
|
|
<div class="org-name">NVKN Nærværskonsulenterne</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Hero Section -->
|
|
<section class="hero-nexgen">
|
|
<div class="container-fluid">
|
|
<div class="hero-content">
|
|
<div class="hero-badge">
|
|
<span class="badge-dot"></span>
|
|
<span>AI-POWERED ANALYTICS</span>
|
|
</div>
|
|
<h1 class="hero-title">
|
|
Mental Health
|
|
<span class="title-gradient">Intelligence</span>
|
|
Platform
|
|
</h1>
|
|
<p class="hero-description">
|
|
Advanced neural analysis for workplace wellness insights, real-time risk detection,
|
|
and data-driven mental health strategies.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Main Content -->
|
|
<main class="main-content">
|
|
<div class="container-fluid">
|
|
<!-- AI Services Status Dashboard -->
|
|
@if (ViewBag.ServiceHealth != null)
|
|
{
|
|
var serviceHealth = ViewBag.ServiceHealth as Dictionary<string, bool>;
|
|
<div class="services-dashboard">
|
|
<div class="dashboard-header">
|
|
<div class="header-icon">
|
|
<i class="fas fa-microchip"></i>
|
|
</div>
|
|
<div class="header-content">
|
|
<h2>AI SYSTEMS STATUS</h2>
|
|
<p>Real-time service monitoring</p>
|
|
</div>
|
|
</div>
|
|
<div class="services-strip">
|
|
@foreach (var service in serviceHealth)
|
|
{
|
|
<div class="service-chip @(service.Value ? "online" : "offline")">
|
|
<div class="chip-status"></div>
|
|
<div class="chip-name">@service.Key.Replace("Azure", "")</div>
|
|
<div class="chip-state">@(service.Value ? "ACTIVE" : "DOWN")</div>
|
|
</div>
|
|
}
|
|
</div>
|
|
</div>
|
|
}
|
|
|
|
<!-- Alert System -->
|
|
@if (TempData["ErrorMessage"] != null)
|
|
{
|
|
<div class="alert-nexgen error">
|
|
<div class="alert-stripe"></div>
|
|
<div class="alert-icon"><i class="fas fa-exclamation-triangle"></i></div>
|
|
<div class="alert-content">
|
|
<div class="alert-label">SYSTEM ERROR</div>
|
|
<div class="alert-text">@TempData["ErrorMessage"]</div>
|
|
</div>
|
|
<button class="alert-dismiss" data-bs-dismiss="alert">
|
|
<i class="fas fa-times"></i>
|
|
</button>
|
|
</div>
|
|
}
|
|
|
|
@if (TempData["SuccessMessage"] != null)
|
|
{
|
|
<div class="alert-nexgen success">
|
|
<div class="alert-stripe"></div>
|
|
<div class="alert-icon"><i class="fas fa-check-circle"></i></div>
|
|
<div class="alert-content">
|
|
<div class="alert-label">SUCCESS</div>
|
|
<div class="alert-text">@TempData["SuccessMessage"]</div>
|
|
</div>
|
|
<button class="alert-dismiss" data-bs-dismiss="alert">
|
|
<i class="fas fa-times"></i>
|
|
</button>
|
|
</div>
|
|
}
|
|
|
|
@if (TempData["WarningMessage"] != null)
|
|
{
|
|
<div class="alert-nexgen warning">
|
|
<div class="alert-stripe"></div>
|
|
<div class="alert-icon"><i class="fas fa-info-circle"></i></div>
|
|
<div class="alert-content">
|
|
<div class="alert-label">ADVISORY</div>
|
|
<div class="alert-text">@TempData["WarningMessage"]</div>
|
|
</div>
|
|
<button class="alert-dismiss" data-bs-dismiss="alert">
|
|
<i class="fas fa-times"></i>
|
|
</button>
|
|
</div>
|
|
}
|
|
|
|
<!-- Survey Grid -->
|
|
<section class="surveys-grid-section">
|
|
<div class="section-title">
|
|
<h2>ACTIVE QUESTIONNAIRES</h2>
|
|
<div class="title-underline"></div>
|
|
</div>
|
|
|
|
<div class="surveys-grid">
|
|
@{
|
|
var hasAnyQuestionnairesWithResponses = false;
|
|
var modelList = Model?.ToList() ?? new List<dynamic>();
|
|
|
|
foreach (var q in modelList)
|
|
{
|
|
if (q.ResponseCount > 0)
|
|
{
|
|
hasAnyQuestionnairesWithResponses = true;
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
|
|
@if (Model != null && modelList.Count > 0)
|
|
{
|
|
@foreach (var questionnaire in modelList)
|
|
{
|
|
@if (questionnaire.ResponseCount > 0)
|
|
{
|
|
<div class="survey-card">
|
|
<div class="card-glow"></div>
|
|
<div class="card-border"></div>
|
|
|
|
<div class="card-header">
|
|
<div class="card-title-section">
|
|
<h3 class="card-title">@questionnaire.Title</h3>
|
|
|
|
@{
|
|
var hasUsers = false;
|
|
var userCount = 0;
|
|
try {
|
|
if (questionnaire.Users != null)
|
|
{
|
|
userCount = questionnaire.Users.Count;
|
|
hasUsers = userCount > 0;
|
|
}
|
|
} catch {
|
|
hasUsers = false;
|
|
userCount = 0;
|
|
}
|
|
}
|
|
|
|
|
|
@if (hasUsers)
|
|
{
|
|
<div class="participants-section">
|
|
<div class="participants-label">PARTICIPANTS (@userCount)</div>
|
|
|
|
<!-- Avatar Stack with Hover Details -->
|
|
<div class="avatar-stack">
|
|
@for (int i = 0; i < Math.Min(3, userCount); i++)
|
|
{
|
|
var user = questionnaire.Users[i];
|
|
<div class="user-avatar-enhanced" style="--delay: @(i * 0.1)s">
|
|
<div class="avatar-circle">
|
|
@user.UserName.Substring(0, 1).ToUpper()
|
|
</div>
|
|
<div class="avatar-tooltip">
|
|
<div class="tooltip-content">
|
|
<div class="user-name">@user.UserName</div>
|
|
<div class="user-email">@(user.Email ?? "No email")</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
}
|
|
@if (userCount > 3)
|
|
{
|
|
<div class="avatar-more">+@(userCount - 3)</div>
|
|
}
|
|
</div>
|
|
|
|
<!-- Participants Details List - FIXED VERSION -->
|
|
<div class="participants-list">
|
|
@{
|
|
// Convert dynamic Users to enumerable and safely iterate
|
|
var usersList = questionnaire.Users as IEnumerable<dynamic>;
|
|
var displayCount = Math.Min(5, userCount);
|
|
}
|
|
|
|
@for (int i = 0; i < displayCount; i++)
|
|
{
|
|
var user = questionnaire.Users[i];
|
|
<div class="participant-item">
|
|
<div class="participant-avatar">
|
|
@user.UserName.Substring(0, 1).ToUpper()
|
|
</div>
|
|
<div class="participant-details">
|
|
<div class="participant-name">@user.UserName</div>
|
|
<div class="participant-email">@(user.Email ?? "No email available")</div>
|
|
</div>
|
|
</div>
|
|
}
|
|
|
|
@if (userCount > 5)
|
|
{
|
|
<div class="participants-overflow">
|
|
+ @(userCount - 5) more participants
|
|
</div>
|
|
}
|
|
</div>
|
|
</div>
|
|
}
|
|
</div>
|
|
|
|
<!-- FIXED DROPDOWN MENU -->
|
|
<div class="card-menu">
|
|
<div class="dropdown">
|
|
<button class="menu-dots" type="button" data-bs-toggle="dropdown" aria-expanded="false">
|
|
<span></span><span></span><span></span>
|
|
</button>
|
|
<ul class="dropdown-menu dropdown-nexgen">
|
|
<li><a class="dropdown-item" href="@Url.Action("AnalyzeQuestionnaire", new { id = questionnaire.Id })">
|
|
<i class="fas fa-chart-area"></i>Deep Analysis
|
|
</a></li>
|
|
<li><a class="dropdown-item" href="@Url.Action("HighRiskResponses", new { id = questionnaire.Id })">
|
|
<i class="fas fa-shield-virus"></i>Risk Matrix
|
|
</a></li>
|
|
<li><a class="dropdown-item" href="@Url.Action("Dashboard", new { id = questionnaire.Id })">
|
|
<i class="fas fa-tachometer-alt"></i>Command Center
|
|
</a></li>
|
|
<li><hr class="dropdown-divider"></li>
|
|
<li><a class="dropdown-item" href="@Url.Action("GenerateReport", new { id = questionnaire.Id })">
|
|
<i class="fas fa-file-export"></i>Export Report
|
|
</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="metrics-panel">
|
|
<div class="metric-chip questions">
|
|
<div class="metric-icon"><i class="fas fa-question-circle"></i></div>
|
|
<div class="metric-data">
|
|
<div class="metric-number">@questionnaire.QuestionCount</div>
|
|
<div class="metric-text">QUESTIONS</div>
|
|
</div>
|
|
</div>
|
|
<div class="metric-chip responses">
|
|
<div class="metric-icon"><i class="fas fa-comments"></i></div>
|
|
<div class="metric-data">
|
|
<div class="metric-number">@questionnaire.ResponseCount</div>
|
|
<div class="metric-text">RESPONSES</div>
|
|
</div>
|
|
</div>
|
|
<div class="metric-chip textdata">
|
|
<div class="metric-icon"><i class="fas fa-comment-medical"></i></div>
|
|
<div class="metric-data">
|
|
<div class="metric-number">@questionnaire.TextResponseCount</div>
|
|
<div class="metric-text">TEXT DATA</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@if (questionnaire.LastResponse != null && questionnaire.LastResponse != DateTime.MinValue)
|
|
{
|
|
<div class="activity-indicator">
|
|
<div class="activity-pulse"></div>
|
|
<span>LAST ACTIVITY: @((DateTime)questionnaire.LastResponse).ToString("MMM dd, yyyy").ToUpper()</span>
|
|
</div>
|
|
}
|
|
|
|
<div class="action-zone">
|
|
@if (questionnaire.TextResponseCount > 0)
|
|
{
|
|
<button onclick="startAnalysisWithProgress(@questionnaire.Id, '@questionnaire.Title')"
|
|
class="primary-action">
|
|
<div class="action-bg"></div>
|
|
<div class="action-content">
|
|
<div class="action-icon">
|
|
<i class="fas fa-rocket"></i>
|
|
</div>
|
|
<div class="action-text">
|
|
<div class="action-title">LAUNCH AI ANALYSIS</div>
|
|
<div class="action-subtitle">Neural network processing</div>
|
|
</div>
|
|
<div class="action-arrow">
|
|
<i class="fas fa-arrow-right"></i>
|
|
</div>
|
|
</div>
|
|
</button>
|
|
|
|
<div class="quick-actions">
|
|
<a href="@Url.Action("HighRiskResponses", new { id = questionnaire.Id })"
|
|
class="quick-btn risk-btn">
|
|
<i class="fas fa-exclamation-triangle"></i>
|
|
<span>RISK SCAN</span>
|
|
</a>
|
|
<a href="@Url.Action("BatchAnalyze", new { id = questionnaire.Id })"
|
|
class="quick-btn batch-btn">
|
|
<i class="fas fa-layer-group"></i>
|
|
<span>BATCH OPS</span>
|
|
</a>
|
|
<a href="@Url.Action("AnalyzeTrends", new { id = questionnaire.Id })"
|
|
class="quick-btn trend-btn">
|
|
<i class="fas fa-chart-line"></i>
|
|
<span>TRENDS</span>
|
|
</a>
|
|
</div>
|
|
}
|
|
else
|
|
{
|
|
<div class="disabled-state">
|
|
<div class="disabled-icon">
|
|
<i class="fas fa-database"></i>
|
|
</div>
|
|
<div class="disabled-text">
|
|
<div class="disabled-title">INSUFFICIENT DATA</div>
|
|
<div class="disabled-message">Requires text responses for analysis</div>
|
|
</div>
|
|
</div>
|
|
}
|
|
</div>
|
|
</div>
|
|
}
|
|
}
|
|
|
|
@if (!hasAnyQuestionnairesWithResponses)
|
|
{
|
|
<div class="empty-nexgen">
|
|
<div class="empty-visual">
|
|
<div class="empty-icon">
|
|
<i class="fas fa-clipboard-list"></i>
|
|
</div>
|
|
<div class="empty-rings">
|
|
<div class="ring r1"></div>
|
|
<div class="ring r2"></div>
|
|
<div class="ring r3"></div>
|
|
</div>
|
|
</div>
|
|
<div class="empty-text">
|
|
<h3>NO RESPONSE DATA DETECTED</h3>
|
|
<p>Initialize questionnaires to begin neural analysis workflow</p>
|
|
</div>
|
|
<a href="@Url.Action("Index", "Questionnaire")" class="create-btn">
|
|
<div class="btn-glow"></div>
|
|
<i class="fas fa-plus"></i>
|
|
<span>CREATE QUESTIONNAIRE</span>
|
|
</a>
|
|
</div>
|
|
}
|
|
}
|
|
else
|
|
{
|
|
<div class="empty-nexgen">
|
|
<div class="empty-visual">
|
|
<div class="empty-icon">
|
|
<i class="fas fa-clipboard-list"></i>
|
|
</div>
|
|
<div class="empty-rings">
|
|
<div class="ring r1"></div>
|
|
<div class="ring r2"></div>
|
|
<div class="ring r3"></div>
|
|
</div>
|
|
</div>
|
|
<div class="empty-text">
|
|
<h3>NO QUESTIONNAIRES FOUND</h3>
|
|
<p>Deploy your first mental health assessment module</p>
|
|
</div>
|
|
<a href="@Url.Action("Index", "Questionnaire")" class="create-btn">
|
|
<div class="btn-glow"></div>
|
|
<i class="fas fa-plus"></i>
|
|
<span>CREATE QUESTIONNAIRE</span>
|
|
</a>
|
|
</div>
|
|
}
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
|
|
<!-- Next-Gen AI Services Modal -->
|
|
<div class="modal fade" id="aiServicesModal" tabindex="-1" data-bs-backdrop="true" data-bs-keyboard="true">
|
|
<div class="modal-dialog modal-lg modal-dialog-centered">
|
|
<div class="modal-nexgen" onclick="event.stopPropagation();">
|
|
<div class="modal-header-nexgen">
|
|
<div class="header-pattern"></div>
|
|
<div class="header-content">
|
|
<div class="modal-icon-nexgen">
|
|
<i class="fas fa-satellite-dish"></i>
|
|
</div>
|
|
<div class="modal-title-group">
|
|
<h4>SYSTEM DIAGNOSTICS</h4>
|
|
<p>AI services connectivity check</p>
|
|
</div>
|
|
</div>
|
|
<button type="button" class="close-nexgen" data-bs-dismiss="modal">
|
|
<i class="fas fa-times"></i>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body-nexgen" onclick="event.stopPropagation();">
|
|
<div id="servicesStatusContent" class="status-container">
|
|
<div class="loading-nexgen">
|
|
<div class="scan-line"></div>
|
|
<div class="loading-text">
|
|
<h5>SCANNING SYSTEMS</h5>
|
|
<p>Verifying neural network connections...</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer-nexgen">
|
|
<button type="button" class="btn-nexgen secondary" data-bs-dismiss="modal">
|
|
<i class="fas fa-power-off"></i>
|
|
<span>CLOSE</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Next-Gen Test Analysis Modal -->
|
|
<div class="modal fade" id="testAnalysisModal" tabindex="-1" data-bs-backdrop="true" data-bs-keyboard="true">
|
|
<div class="modal-dialog modal-lg modal-dialog-centered">
|
|
<div class="modal-nexgen" onclick="event.stopPropagation();">
|
|
<div class="modal-header-nexgen">
|
|
<div class="header-pattern"></div>
|
|
<div class="header-content">
|
|
<div class="modal-icon-nexgen">
|
|
<i class="fas fa-vial"></i>
|
|
</div>
|
|
<div class="modal-title-group">
|
|
<h4>NEURAL ANALYSIS LAB</h4>
|
|
<p>Test AI capabilities with sample data</p>
|
|
</div>
|
|
</div>
|
|
<button type="button" class="close-nexgen" data-bs-dismiss="modal">
|
|
<i class="fas fa-times"></i>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body-nexgen" onclick="event.stopPropagation();">
|
|
<form id="testAnalysisForm" class="test-form-nexgen" onclick="event.stopPropagation();">
|
|
<div class="input-nexgen">
|
|
<label class="input-label">
|
|
<i class="fas fa-comment-dots"></i>
|
|
<span>SAMPLE DATA INPUT</span>
|
|
</label>
|
|
<textarea id="sampleText" class="textarea-nexgen" rows="5"
|
|
onclick="event.stopPropagation();"
|
|
placeholder="Enter employee response text for neural analysis testing..."></textarea>
|
|
<div class="input-hint">
|
|
<div class="hint-icon">💡</div>
|
|
<span>Try: "I'm feeling overwhelmed with deadlines and having trouble sleeping"</span>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
|
|
<div id="testResults" class="test-results-nexgen d-none">
|
|
<div class="results-divider-nexgen"></div>
|
|
<div class="results-header-nexgen">
|
|
<i class="fas fa-chart-network"></i>
|
|
<span>ANALYSIS OUTPUT</span>
|
|
</div>
|
|
<div id="testResultsContent"></div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer-nexgen">
|
|
<button type="button" class="btn-nexgen secondary" data-bs-dismiss="modal">
|
|
<i class="fas fa-times"></i>
|
|
<span>CANCEL</span>
|
|
</button>
|
|
<button type="button" class="btn-nexgen primary" onclick="performTestAnalysis(); event.stopPropagation();">
|
|
<i class="fas fa-play"></i>
|
|
<span>RUN ANALYSIS</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- Next-Gen Progress Modal -->
|
|
<div class="modal fade" id="analysisProgressModal" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false">
|
|
<div class="modal-dialog modal-dialog-centered">
|
|
<div class="modal-nexgen" onclick="event.stopPropagation();">
|
|
<div class="modal-header-nexgen">
|
|
<div class="header-pattern"></div>
|
|
<div class="header-content">
|
|
<div class="modal-icon-nexgen">
|
|
<i class="fas fa-brain"></i>
|
|
</div>
|
|
<div class="modal-title-group">
|
|
<h4>NEURAL PROCESSING</h4>
|
|
<p id="progressSubtitle">Analyzing mental health patterns</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-body-nexgen" onclick="event.stopPropagation();">
|
|
<div class="progress-nexgen">
|
|
<div class="progress-visual">
|
|
<div class="brain-scan">
|
|
<div class="scan-waves">
|
|
<div class="wave w1"></div>
|
|
<div class="wave w2"></div>
|
|
<div class="wave w3"></div>
|
|
</div>
|
|
<i class="fas fa-brain brain-icon"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="progress-info">
|
|
<h5 id="progressTitle">PROCESSING QUESTIONNAIRE DATA</h5>
|
|
<div class="progress-track">
|
|
<div class="progress-bar-nexgen">
|
|
<div class="progress-fill-nexgen"></div>
|
|
<div class="progress-glow"></div>
|
|
</div>
|
|
<div class="progress-percent">0%</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="progress-pipeline">
|
|
<div class="pipeline-step completed">
|
|
<div class="step-marker"></div>
|
|
<div class="step-label">INIT</div>
|
|
</div>
|
|
<div class="pipeline-connector"></div>
|
|
<div class="pipeline-step">
|
|
<div class="step-marker"></div>
|
|
<div class="step-label">PARSE</div>
|
|
</div>
|
|
<div class="pipeline-connector"></div>
|
|
<div class="pipeline-step">
|
|
<div class="step-marker"></div>
|
|
<div class="step-label">ANALYZE</div>
|
|
</div>
|
|
<div class="pipeline-connector"></div>
|
|
<div class="pipeline-step">
|
|
<div class="step-marker"></div>
|
|
<div class="step-label">ASSESS</div>
|
|
</div>
|
|
<div class="pipeline-connector"></div>
|
|
<div class="pipeline-step">
|
|
<div class="step-marker"></div>
|
|
<div class="step-label">REPORT</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@section Scripts {
|
|
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
|
|
<script>
|
|
// Enhanced AI Services Check with proper event handling
|
|
function testAIServices() {
|
|
const modal = new bootstrap.Modal(document.getElementById('aiServicesModal'), {
|
|
backdrop: true,
|
|
keyboard: true,
|
|
focus: true
|
|
});
|
|
modal.show();
|
|
|
|
$.get('@Url.Action("ServiceHealth")')
|
|
.done(function(data) {
|
|
if (data.success && data.services) {
|
|
let content = '<div class="services-matrix">';
|
|
|
|
const langService = data.services['AzureLanguageService'] || false;
|
|
const openaiService = data.services['AzureOpenAI'] || false;
|
|
|
|
content += createNexGenServiceCard('LANGUAGE ENGINE', 'Sentiment & linguistic analysis', langService, 'fa-language');
|
|
content += createNexGenServiceCard('NEURAL NETWORK', 'AI-powered risk detection', openaiService, 'fa-brain');
|
|
|
|
content += '</div>';
|
|
|
|
const allOnline = langService && openaiService;
|
|
content += `
|
|
<div class="system-status ${allOnline ? 'operational' : 'degraded'}">
|
|
<div class="status-indicator">
|
|
<div class="indicator-ring"></div>
|
|
<i class="fas ${allOnline ? 'fa-check' : 'fa-exclamation'}"></i>
|
|
</div>
|
|
<div class="status-info">
|
|
<div class="status-title">${allOnline ? 'ALL SYSTEMS OPERATIONAL' : 'SYSTEM DEGRADED'}</div>
|
|
<div class="status-message">${data.message}</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
document.getElementById('servicesStatusContent').innerHTML = content;
|
|
} else {
|
|
document.getElementById('servicesStatusContent').innerHTML = `
|
|
<div class="error-nexgen">
|
|
<div class="error-visual">
|
|
<i class="fas fa-exclamation-triangle"></i>
|
|
</div>
|
|
<div class="error-info">
|
|
<h5>DIAGNOSTIC FAILED</h5>
|
|
<p>${data.error || 'Unable to verify system status'}</p>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
})
|
|
.fail(function() {
|
|
document.getElementById('servicesStatusContent').innerHTML = `
|
|
<div class="error-nexgen">
|
|
<div class="error-visual">
|
|
<i class="fas fa-wifi-slash"></i>
|
|
</div>
|
|
<div class="error-info">
|
|
<h5>CONNECTION TIMEOUT</h5>
|
|
<p>Unable to reach diagnostic endpoint</p>
|
|
</div>
|
|
</div>
|
|
`;
|
|
});
|
|
}
|
|
|
|
function createNexGenServiceCard(name, description, isOnline, icon) {
|
|
const statusClass = isOnline ? 'online' : 'offline';
|
|
const statusText = isOnline ? 'ACTIVE' : 'OFFLINE';
|
|
|
|
return `
|
|
<div class="service-nexgen ${statusClass}">
|
|
<div class="service-border"></div>
|
|
<div class="service-content">
|
|
<div class="service-header">
|
|
<div class="service-icon-nexgen">
|
|
<i class="fas ${icon}"></i>
|
|
</div>
|
|
<div class="service-status-nexgen">
|
|
<div class="status-dot-nexgen"></div>
|
|
<span>${statusText}</span>
|
|
</div>
|
|
</div>
|
|
<div class="service-details">
|
|
<h6>${name}</h6>
|
|
<p>${description}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
// Enhanced Test Analysis with proper event handling
|
|
function performTestAnalysis() {
|
|
const sampleText = document.getElementById('sampleText').value.trim();
|
|
|
|
if (!sampleText) {
|
|
Swal.fire({
|
|
title: 'INPUT REQUIRED',
|
|
text: 'Please enter sample text for analysis',
|
|
icon: 'warning',
|
|
confirmButtonClass: 'swal-btn-nexgen',
|
|
customClass: {
|
|
popup: 'swal-nexgen',
|
|
title: 'swal-title-nexgen'
|
|
}
|
|
});
|
|
return false; // Prevent form submission
|
|
}
|
|
|
|
const resultsDiv = document.getElementById('testResults');
|
|
const contentDiv = document.getElementById('testResultsContent');
|
|
|
|
contentDiv.innerHTML = `
|
|
<div class="analysis-loading-nexgen">
|
|
<div class="loading-scanner">
|
|
<div class="scanner-line"></div>
|
|
</div>
|
|
<div class="loading-info">
|
|
<h6>NEURAL PROCESSING</h6>
|
|
<p>Analyzing semantic patterns...</p>
|
|
</div>
|
|
</div>
|
|
`;
|
|
resultsDiv.classList.remove('d-none');
|
|
|
|
$.post('@Url.Action("TestAnalysis")', { sampleText: sampleText })
|
|
.done(function(data) {
|
|
if (data.success) {
|
|
contentDiv.innerHTML = createNexGenResults(data);
|
|
} else {
|
|
contentDiv.innerHTML = `
|
|
<div class="error-nexgen">
|
|
<div class="error-visual">
|
|
<i class="fas fa-exclamation-triangle"></i>
|
|
</div>
|
|
<div class="error-info">
|
|
<h5>ANALYSIS FAILED</h5>
|
|
<p>${data.message}</p>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
})
|
|
.fail(function() {
|
|
contentDiv.innerHTML = `
|
|
<div class="error-nexgen">
|
|
<div class="error-visual">
|
|
<i class="fas fa-times-circle"></i>
|
|
</div>
|
|
<div class="error-info">
|
|
<h5>CONNECTION ERROR</h5>
|
|
<p>Neural network unreachable</p>
|
|
</div>
|
|
</div>
|
|
`;
|
|
});
|
|
|
|
return false; // Prevent form submission
|
|
}
|
|
|
|
function createNexGenResults(data) {
|
|
return `
|
|
<div class="results-nexgen">
|
|
<div class="results-matrix">
|
|
<div class="result-nexgen sentiment">
|
|
<div class="result-header-nexgen">
|
|
<div class="result-icon-nexgen">
|
|
<i class="fas fa-heart-pulse"></i>
|
|
</div>
|
|
<div class="result-title">SENTIMENT</div>
|
|
</div>
|
|
<div class="result-value-nexgen">
|
|
<div class="value-chip ${getSentimentClass(data.sentiment)}">${data.sentiment || 'UNKNOWN'}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="result-nexgen risk">
|
|
<div class="result-header-nexgen">
|
|
<div class="result-icon-nexgen">
|
|
<i class="fas fa-shield-virus"></i>
|
|
</div>
|
|
<div class="result-title">RISK LEVEL</div>
|
|
</div>
|
|
<div class="result-value-nexgen">
|
|
<div class="value-chip ${getRiskClass(data.riskLevel)}">${data.riskLevel || 'UNKNOWN'}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="insights-nexgen">
|
|
<div class="insight-panel">
|
|
<div class="panel-header-nexgen">
|
|
<i class="fas fa-key"></i>
|
|
<span>KEY PHRASES DETECTED</span>
|
|
</div>
|
|
<div class="tags-container">
|
|
${data.keyPhrases && data.keyPhrases.length > 0 ?
|
|
data.keyPhrases.map(phrase =>
|
|
`<div class="tag-nexgen phrase">${phrase}</div>`
|
|
).join('') :
|
|
'<div class="no-data-nexgen">No phrases detected</div>'}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="insight-panel">
|
|
<div class="panel-header-nexgen">
|
|
<i class="fas fa-tags"></i>
|
|
<span>CATEGORY CLASSIFICATION</span>
|
|
</div>
|
|
<div class="tags-container">
|
|
${data.insights && data.insights.length > 0 ?
|
|
data.insights.map(category =>
|
|
`<div class="tag-nexgen category">${category}</div>`
|
|
).join('') :
|
|
'<div class="no-data-nexgen">No categories identified</div>'}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
function getSentimentClass(sentiment) {
|
|
switch(sentiment?.toLowerCase()) {
|
|
case 'positive': return 'positive';
|
|
case 'negative': return 'negative';
|
|
case 'neutral': return 'neutral';
|
|
default: return 'unknown';
|
|
}
|
|
}
|
|
|
|
function getRiskClass(riskLevel) {
|
|
switch(riskLevel?.toLowerCase()) {
|
|
case 'low': return 'low';
|
|
case 'moderate': return 'moderate';
|
|
case 'high': return 'high';
|
|
case 'critical': return 'critical';
|
|
default: return 'unknown';
|
|
}
|
|
}
|
|
|
|
// Next-Gen Progress Animation
|
|
function startAnalysisWithProgress(questionnaireId, title) {
|
|
document.getElementById('progressSubtitle').textContent = `Processing "${title}"`;
|
|
|
|
const modal = new bootstrap.Modal(document.getElementById('analysisProgressModal'));
|
|
modal.show();
|
|
|
|
let progress = 0;
|
|
const progressFill = document.querySelector('.progress-fill-nexgen');
|
|
const progressPercent = document.querySelector('.progress-percent');
|
|
const steps = document.querySelectorAll('.pipeline-step');
|
|
|
|
const interval = setInterval(() => {
|
|
progress += Math.random() * 12 + 3;
|
|
if (progress > 95) progress = 95;
|
|
|
|
progressFill.style.width = progress + '%';
|
|
progressPercent.textContent = Math.round(progress) + '%';
|
|
|
|
// Update pipeline
|
|
const currentStep = Math.floor(progress / 20);
|
|
steps.forEach((step, index) => {
|
|
if (index <= currentStep) {
|
|
step.classList.add('active');
|
|
} else {
|
|
step.classList.remove('active');
|
|
}
|
|
});
|
|
|
|
if (progress >= 95) {
|
|
clearInterval(interval);
|
|
|
|
setTimeout(() => {
|
|
progressFill.style.width = '100%';
|
|
progressPercent.textContent = '100%';
|
|
|
|
steps.forEach(step => {
|
|
step.classList.add('active');
|
|
});
|
|
|
|
setTimeout(() => {
|
|
window.location.href = '@Url.Action("AnalyzeQuestionnaire")?id=' + questionnaireId;
|
|
}, 800);
|
|
}, 300);
|
|
}
|
|
}, 150);
|
|
}
|
|
|
|
// Custom SweetAlert styling
|
|
const swalStyle = document.createElement('style');
|
|
swalStyle.textContent = `
|
|
.swal-nexgen {
|
|
background: rgba(15, 23, 42, 0.95) !important;
|
|
backdrop-filter: blur(20px) !important;
|
|
border: 1px solid rgba(59, 130, 246, 0.3) !important;
|
|
border-radius: 1rem !important;
|
|
color: #e2e8f0 !important;
|
|
}
|
|
.swal-title-nexgen {
|
|
color: #60a5fa !important;
|
|
font-weight: 700 !important;
|
|
letter-spacing: 0.05em !important;
|
|
}
|
|
.swal-btn-nexgen {
|
|
background: linear-gradient(135deg, #3b82f6, #1d4ed8) !important;
|
|
border: none !important;
|
|
border-radius: 0.5rem !important;
|
|
padding: 0.75rem 1.5rem !important;
|
|
font-weight: 600 !important;
|
|
text-transform: uppercase !important;
|
|
letter-spacing: 0.025em !important;
|
|
}
|
|
`;
|
|
document.head.appendChild(swalStyle);
|
|
|
|
// Animate elements on scroll
|
|
const observerOptions = {
|
|
threshold: 0.1,
|
|
rootMargin: '0px 0px -50px 0px'
|
|
};
|
|
|
|
const observer = new IntersectionObserver((entries) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
entry.target.classList.add('animate-in');
|
|
}
|
|
});
|
|
}, observerOptions);
|
|
|
|
// NEW: Fix modal click issues
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Initialize scroll observer for cards
|
|
document.querySelectorAll('.survey-card').forEach(card => {
|
|
observer.observe(card);
|
|
});
|
|
|
|
// Prevent modal from closing when clicking inside modal content
|
|
const modalContents = document.querySelectorAll('.modal-nexgen');
|
|
modalContents.forEach(function(modalContent) {
|
|
modalContent.addEventListener('click', function(e) {
|
|
e.stopPropagation();
|
|
});
|
|
});
|
|
|
|
// Prevent modal from closing when clicking on form elements
|
|
const formElements = document.querySelectorAll('.modal input, .modal textarea, .modal button, .modal select');
|
|
formElements.forEach(function(element) {
|
|
element.addEventListener('click', function(e) {
|
|
e.stopPropagation();
|
|
});
|
|
});
|
|
|
|
// Fix Bootstrap modal backdrop issues
|
|
const modals = document.querySelectorAll('.modal');
|
|
modals.forEach(function(modal) {
|
|
modal.addEventListener('show.bs.modal', function() {
|
|
document.body.style.paddingRight = '';
|
|
});
|
|
|
|
modal.addEventListener('hidden.bs.modal', function() {
|
|
document.body.style.paddingRight = '';
|
|
});
|
|
});
|
|
|
|
// Additional event prevention for specific modal elements
|
|
document.querySelectorAll('.modal-nexgen, .modal-body-nexgen, .modal-header-nexgen, .modal-footer-nexgen').forEach(function(element) {
|
|
element.addEventListener('click', function(e) {
|
|
e.stopPropagation();
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
}
|
|
|