738 lines
62 KiB
Text
738 lines
62 KiB
Text
@* Views/Admin/SurveyAnalysis/Index.cshtml *@
|
||
@model IEnumerable<dynamic>
|
||
|
||
@{
|
||
ViewData["Title"] = "AI Survey Analysis — Intelligence Platform";
|
||
}
|
||
|
||
@section Styles {
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
|
||
<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;--neon-indigo:#818cf8;
|
||
--neon-teal:#33b3ae;--neon-amber:#f59e0b;
|
||
--dark-900:#0f172a;--dark-800:#1e293b;--dark-700:#334155;--dark-600:#475569;
|
||
--dark-500:#64748b;--dark-400:#94a3b8;--dark-300:#cbd5e1;--dark-200:#e2e8f0;
|
||
--glass-bg:rgba(255,255,255,0.04);--glass-border:rgba(255,255,255,0.08);
|
||
--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}
|
||
.hero,.hero *:not(.grad):not(.dot){background-color:transparent!important}
|
||
|
||
.nex-bg{position:fixed;inset:0;z-index:-1;overflow:hidden}
|
||
.nex-bg .grid{position:absolute;inset:0;background-image:linear-gradient(rgba(96,165,250,0.04) 1px,transparent 1px),linear-gradient(90deg,rgba(96,165,250,0.04) 1px,transparent 1px);background-size:60px 60px;animation:gridDrift 25s linear infinite}
|
||
.nex-bg .mesh{position:absolute;inset:0;background:radial-gradient(ellipse at 25% 20%,rgba(96,165,250,0.06) 0%,transparent 55%),radial-gradient(ellipse at 75% 60%,rgba(192,132,252,0.05) 0%,transparent 55%),radial-gradient(ellipse at 50% 90%,rgba(52,211,153,0.04) 0%,transparent 55%);animation:meshFloat 18s ease-in-out infinite}
|
||
|
||
@@keyframes gridDrift{0%{transform:translate(0,0)}100%{transform:translate(50px,50px)}}
|
||
@@keyframes meshFloat{0%,100%{filter:hue-rotate(0deg);transform:scale(1)}50%{filter:hue-rotate(20deg);transform:scale(1.03)}}
|
||
@@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(1.15)}}
|
||
@@keyframes fadeInUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
|
||
@@keyframes shimmer{0%{left:-100%}100%{left:100%}}
|
||
@@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(.8);opacity:.8}100%{transform:scale(1.3);opacity:0}}
|
||
@@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
|
||
|
||
/* ===== TOP NAV ===== */
|
||
.top-nav{position:relative;z-index:100;padding:.8rem 0;background:rgba(15,23,42,0.75);backdrop-filter:blur(24px);border-bottom:1px solid rgba(129,140,248,0.12)}
|
||
.nav-inner{max-width:1400px;margin:0 auto;padding:0 2rem;display:flex;align-items:center;gap:2rem}
|
||
.nav-brand{display:flex;align-items:center;gap:.8rem}
|
||
.brand-icon{width:38px;height:38px;background:linear-gradient(135deg,var(--neon-indigo),var(--neon-purple));border-radius:10px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.1rem}
|
||
.brand-txt{font-family:var(--font-mono);font-weight:700;font-size:1rem;letter-spacing:.08em;color:#e2e8f0}
|
||
.brand-ver{font-family:var(--font-mono);font-size:.6rem;color:var(--neon-green);background:rgba(52,211,153,0.1);padding:.15rem .45rem;border-radius:4px;border:1px solid rgba(52,211,153,0.25);margin-left:.4rem}
|
||
.nav-spacer{flex:1}
|
||
.nav-actions{display:flex;gap:.6rem;align-items:center}
|
||
.nav-btn{display:flex;align-items:center;gap:.5rem;padding:.55rem 1rem;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:8px;color:#cbd5e1;font-size:.78rem;font-weight:500;cursor:pointer;transition:all .2s;font-family:var(--font-main)}
|
||
.nav-btn:hover{background:rgba(129,140,248,0.08);border-color:rgba(129,140,248,0.25);color:var(--neon-indigo)}
|
||
.nav-btn i{font-size:.85rem}
|
||
|
||
.ai-chip{display:flex;align-items:center;gap:.6rem;padding:.5rem 1rem;background:rgba(52,211,153,0.06);border:1px solid rgba(52,211,153,0.2);border-radius:10px;cursor:pointer;transition:all .2s}
|
||
.ai-chip:hover{background:rgba(52,211,153,0.1);border-color:rgba(52,211,153,0.35)}
|
||
.ai-chip.offline{background:rgba(248,113,113,0.06);border-color:rgba(248,113,113,0.2)}
|
||
.ai-chip.offline:hover{background:rgba(248,113,113,0.1);border-color:rgba(248,113,113,0.35)}
|
||
.ai-dot{width:8px;height:8px;border-radius:50%;background:var(--neon-green);animation:pulse 2s infinite;box-shadow:0 0 8px rgba(52,211,153,0.4)}
|
||
.ai-chip.offline .ai-dot{background:var(--neon-red);box-shadow:0 0 8px rgba(248,113,113,0.4)}
|
||
.ai-label{font-family:var(--font-mono);font-size:.65rem;font-weight:600;letter-spacing:.08em;color:var(--neon-green)}
|
||
.ai-chip.offline .ai-label{color:var(--neon-red)}
|
||
.ai-icon{font-size:1rem;color:var(--neon-green)}
|
||
.ai-chip.offline .ai-icon{color:var(--neon-red)}
|
||
|
||
.org-badge{display:flex;align-items:center;gap:.7rem;padding:.5rem .8rem;background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:10px}
|
||
.org-avatar{width:30px;height:30px;background:linear-gradient(135deg,var(--neon-pink),var(--neon-purple));border-radius:7px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:600;font-size:.7rem}
|
||
.org-name{font-weight:600;color:#e2e8f0;font-size:.75rem}
|
||
|
||
/* ===== HERO ===== */
|
||
.hero{padding:4rem 0 2rem;text-align:center;position:relative;z-index:10;background:transparent!important}
|
||
.hero-badge{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1.2rem;background:rgba(129,140,248,0.08);border:1px solid rgba(129,140,248,0.2);border-radius:50px;margin-bottom:2rem;font-family:var(--font-mono);font-size:.7rem;font-weight:600;letter-spacing:.1em;color:var(--neon-indigo)}
|
||
.hero-badge .dot{width:6px;height:6px;background:var(--neon-green);border-radius:50%;animation:pulse 2s infinite}
|
||
.hero h1{font-size:4rem;font-weight:700;line-height:1.1;margin-bottom:1.5rem;color:#fff}
|
||
.hero .grad{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 p{font-size:1.1rem;color:var(--dark-300);max-width:600px;margin:0 auto;line-height:1.6}
|
||
|
||
/* ===== MAIN ===== */
|
||
.main{padding:1.5rem 0 4rem;position:relative;z-index:10}
|
||
.container{max-width:1400px;margin:0 auto;padding:0 2rem}
|
||
|
||
/* ===== AI ENGINE ===== */
|
||
.ai-engine{background:rgba(30,41,59,0.5);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,0.08);border-radius:16px;padding:1.5rem 2rem;margin-bottom:2rem;display:flex;align-items:center;gap:1.5rem;animation:fadeInUp .5s ease both}
|
||
.ai-engine-icon{width:52px;height:52px;background:linear-gradient(135deg,rgba(129,140,248,0.2),rgba(192,132,252,0.15));border:1px solid rgba(129,140,248,0.25);border-radius:14px;display:flex;align-items:center;justify-content:center;color:var(--neon-indigo);font-size:1.4rem;flex-shrink:0;position:relative}
|
||
.ai-engine-icon::after{content:'';position:absolute;inset:-3px;border-radius:17px;border:1px solid rgba(129,140,248,0.12);animation:pulse 3s infinite}
|
||
.ai-engine-info{flex:1}
|
||
.ai-engine-info h3{font-family:var(--font-mono);font-size:.95rem;font-weight:700;letter-spacing:.05em;color:#fff;margin-bottom:.25rem}
|
||
.ai-engine-info p{color:var(--dark-400);font-size:.82rem}
|
||
.ai-engine-status{display:flex;align-items:center;gap:.6rem;padding:.5rem 1.2rem;border-radius:8px;font-family:var(--font-mono);font-size:.65rem;font-weight:700;letter-spacing:.08em}
|
||
.ai-engine-status.online{background:rgba(52,211,153,0.1);border:1px solid rgba(52,211,153,0.25);color:var(--neon-green)}
|
||
.ai-engine-status.offline{background:rgba(248,113,113,0.1);border:1px solid rgba(248,113,113,0.25);color:var(--neon-red)}
|
||
.ai-engine-status i{font-size:.7rem}
|
||
.ai-caps{display:flex;gap:.5rem;margin-top:.6rem;flex-wrap:wrap}
|
||
.ai-cap{display:inline-flex;align-items:center;gap:.35rem;padding:.2rem .6rem;border-radius:5px;font-size:.6rem;font-family:var(--font-mono);font-weight:500;color:var(--dark-300);background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.06)}
|
||
.ai-cap i{font-size:.55rem;color:var(--neon-indigo)}
|
||
|
||
/* ===== ALERTS ===== */
|
||
.alert-nex{display:flex;align-items:center;gap:1rem;padding:.8rem 1.2rem;border-radius:10px;margin-bottom:1.2rem;position:relative;overflow:hidden;backdrop-filter:blur(10px);animation:fadeInUp .4s ease both}
|
||
.alert-nex::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px}
|
||
.alert-nex.error{background:rgba(248,113,113,0.08);border:1px solid rgba(248,113,113,0.2)}.alert-nex.error::before{background:var(--neon-red)}.alert-nex.error .alert-icon{color:var(--neon-red)}
|
||
.alert-nex.success{background:rgba(52,211,153,0.08);border:1px solid rgba(52,211,153,0.2)}.alert-nex.success::before{background:var(--neon-green)}.alert-nex.success .alert-icon{color:var(--neon-green)}
|
||
.alert-nex.warning{background:rgba(251,191,36,0.08);border:1px solid rgba(251,191,36,0.2)}.alert-nex.warning::before{background:var(--neon-yellow)}.alert-nex.warning .alert-icon{color:var(--neon-yellow)}
|
||
.alert-icon{font-size:1.1rem;margin-left:.5rem}
|
||
.alert-lbl{font-family:var(--font-mono);font-size:.6rem;font-weight:700;letter-spacing:.1em;margin-bottom:.15rem}
|
||
.alert-txt{font-size:.82rem;color:var(--dark-300)}
|
||
.alert-x{background:none;border:none;color:var(--dark-400);cursor:pointer;padding:.4rem;border-radius:6px;margin-left:auto;transition:background .2s}.alert-x:hover{background:rgba(255,255,255,0.08)}
|
||
|
||
/* ===== SECTION TITLE ===== */
|
||
.sec-title{text-align:center;margin-bottom:2.5rem}
|
||
.sec-title h2{font-family:var(--font-mono);font-size:1.3rem;font-weight:700;letter-spacing:.1em;color:#fff;margin-bottom:.6rem}
|
||
.sec-title .bar{width:80px;height:3px;background:linear-gradient(90deg,var(--neon-indigo),var(--neon-purple));margin:0 auto;border-radius:2px}
|
||
|
||
/* ===== CARDS GRID ===== */
|
||
.cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(440px,1fr));gap:1.5rem}
|
||
|
||
.s-card{background:rgba(30,41,59,0.45);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,0.07);border-radius:18px;overflow:hidden;transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;opacity:0;transform:translateY(25px)}
|
||
.s-card.in{opacity:1;transform:translateY(0)}
|
||
.s-card:hover{transform:translateY(-4px);border-color:rgba(129,140,248,0.3);box-shadow:0 16px 40px rgba(129,140,248,0.08)}
|
||
.s-card .glow{position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--neon-indigo),var(--neon-purple),var(--neon-pink));opacity:0;transition:opacity .3s}
|
||
.s-card:hover .glow{opacity:1}
|
||
|
||
.s-head{padding:1.8rem 1.8rem 1rem;position:relative;z-index:2}
|
||
.s-title{font-size:1.25rem;font-weight:700;color:#fff;margin-bottom:.8rem;line-height:1.3}
|
||
|
||
/* ── Respondent Info ── */
|
||
.respondent{display:flex;align-items:center;gap:1rem;padding:.8rem 1rem;background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.06);border-radius:12px;margin-top:.8rem}
|
||
.resp-avatar{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:.9rem;flex-shrink:0;border:2px solid rgba(255,255,255,0.1)}
|
||
.resp-info{flex:1;min-width:0}
|
||
.resp-name{font-weight:700;color:#fff;font-size:.88rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
||
.resp-email{font-size:.68rem;color:var(--dark-400);font-family:var(--font-mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
||
.resp-badge{font-family:var(--font-mono);font-size:.55rem;font-weight:600;letter-spacing:.08em;padding:.25rem .6rem;border-radius:5px;background:rgba(129,140,248,0.1);border:1px solid rgba(129,140,248,0.2);color:var(--neon-indigo);flex-shrink:0}
|
||
|
||
/* Metrics */
|
||
.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;padding:0 1.5rem;margin-bottom:1rem}
|
||
.m-chip{background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);border-radius:10px;padding:.8rem;display:flex;align-items:center;gap:.7rem;transition:all .2s}
|
||
.m-chip:hover{background:rgba(255,255,255,0.05);border-color:rgba(255,255,255,0.1)}
|
||
.m-icon{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:.85rem}
|
||
.m-chip.q .m-icon{background:linear-gradient(135deg,var(--neon-indigo),var(--neon-blue))}
|
||
.m-chip.r .m-icon{background:linear-gradient(135deg,var(--neon-green),var(--neon-teal))}
|
||
.m-chip.t .m-icon{background:linear-gradient(135deg,var(--neon-purple),var(--neon-pink))}
|
||
.m-num{font-size:1.2rem;font-weight:700;color:#fff;line-height:1}
|
||
.m-lbl{font-family:var(--font-mono);font-size:.5rem;font-weight:600;letter-spacing:.1em;color:var(--dark-400)}
|
||
|
||
.activity{display:flex;align-items:center;gap:.6rem;padding:.5rem 1.5rem;font-family:var(--font-mono);font-size:.62rem;font-weight:500;letter-spacing:.04em;color:var(--dark-400)}
|
||
.activity .dot{width:5px;height:5px;background:var(--neon-green);border-radius:50%;animation:pulse 2s infinite}
|
||
|
||
/* Actions */
|
||
.actions{padding:1.2rem 1.8rem;position:relative;z-index:2}
|
||
.launch-btn{width:100%;background:linear-gradient(135deg,var(--neon-indigo),var(--neon-purple));border:none;border-radius:14px;padding:0;margin-bottom:1rem;cursor:pointer;transition:all .3s;position:relative;overflow:hidden;display:block;text-decoration:none}
|
||
.launch-btn:hover{transform:translateY(-2px);box-shadow:0 16px 36px rgba(129,140,248,0.2)}
|
||
.launch-btn .shimmer{position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.08),transparent);animation:shimmer 3s infinite}
|
||
.launch-inner{display:flex;align-items:center;gap:1.2rem;padding:1.2rem 1.5rem;position:relative;z-index:2}
|
||
.launch-icon{width:42px;height:42px;background:rgba(255,255,255,0.12);border-radius:10px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.1rem}
|
||
.launch-txt{flex:1;text-align:left;color:#fff}
|
||
.launch-title{font-family:var(--font-mono);font-size:.78rem;font-weight:700;letter-spacing:.05em;margin-bottom:.15rem}
|
||
.launch-sub{font-size:.72rem;opacity:.75}
|
||
.launch-arrow{color:#fff;font-size:.9rem;transition:transform .2s}
|
||
.launch-btn:hover .launch-arrow{transform:translateX(4px)}
|
||
|
||
.quick-btns{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem}
|
||
.q-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:.8rem .5rem;background:rgba(255,255,255,0.02);border:1px solid;border-radius:10px;text-decoration:none;transition:all .2s;gap:.4rem;cursor:pointer;min-height:65px}
|
||
.q-btn:hover{transform:translateY(-2px);text-decoration:none}
|
||
.q-btn i{font-size:.9rem}
|
||
.q-btn span{font-family:var(--font-mono);font-size:.52rem;font-weight:600;letter-spacing:.1em}
|
||
.q-btn.risk{border-color:rgba(248,113,113,0.25);color:var(--neon-red)}.q-btn.risk:hover{background:rgba(248,113,113,0.06)}
|
||
.q-btn.batch{border-color:rgba(34,211,238,0.25);color:var(--neon-cyan)}.q-btn.batch:hover{background:rgba(34,211,238,0.06)}
|
||
.q-btn.trend{border-color:rgba(52,211,153,0.25);color:var(--neon-green)}.q-btn.trend:hover{background:rgba(52,211,153,0.06)}
|
||
|
||
.disabled-box{display:flex;align-items:center;gap:.8rem;padding:1.2rem;background:rgba(100,116,139,0.04);border:1px solid rgba(100,116,139,0.15);border-radius:10px}
|
||
.disabled-icon{width:36px;height:36px;background:rgba(100,116,139,0.15);border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--dark-400);font-size:.95rem}
|
||
.disabled-title{font-family:var(--font-mono);font-size:.72rem;font-weight:700;letter-spacing:.05em;color:var(--dark-400);margin-bottom:.15rem}
|
||
.disabled-msg{font-size:.72rem;color:var(--dark-500)}
|
||
|
||
/* Empty */
|
||
.empty-state{grid-column:1/-1;text-align:center;padding:3.5rem 2rem;background:rgba(30,41,59,0.4);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,0.07);border-radius:18px}
|
||
.empty-vis{position:relative;display:inline-block;margin-bottom:1.5rem}
|
||
.empty-icon{width:80px;height:80px;background:rgba(100,116,139,0.08);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:2rem;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:.25}
|
||
.ring.r1{width:100px;height:100px;top:-50px;left:-50px;border-color:var(--neon-indigo);animation:waveExpand 3s infinite}
|
||
.ring.r2{width:120px;height:120px;top:-60px;left:-60px;border-color:var(--neon-purple);animation:waveExpand 3s infinite 1s}
|
||
.ring.r3{width:140px;height:140px;top:-70px;left:-70px;border-color:var(--neon-pink);animation:waveExpand 3s infinite 2s}
|
||
.empty-state h3{font-family:var(--font-mono);font-size:1.1rem;font-weight:700;letter-spacing:.05em;color:#fff;margin-bottom:.5rem}
|
||
.empty-state p{color:var(--dark-300);margin-bottom:1.5rem;font-size:.88rem}
|
||
.create-btn{display:inline-flex;align-items:center;gap:.6rem;padding:.8rem 1.8rem;background:linear-gradient(135deg,var(--neon-green),var(--neon-teal));color:#fff;text-decoration:none;border-radius:10px;font-family:var(--font-mono);font-size:.75rem;font-weight:700;letter-spacing:.05em;transition:all .3s;position:relative;overflow:hidden}
|
||
.create-btn:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(52,211,153,0.25);color:#fff}
|
||
|
||
/* Modals — same as before */
|
||
.modal-backdrop{backdrop-filter:blur(10px);background:rgba(15,23,42,0.7);z-index:1040}
|
||
.modal{z-index:1050;padding-left:0!important}
|
||
.modal-dialog{margin-left:auto!important;margin-right:auto!important}
|
||
.modal.fade .modal-dialog{transform:translateY(-20px);transition:transform .3s ease}
|
||
.modal.show .modal-dialog{transform:translateY(0)}
|
||
.m-nex{background:rgba(15,23,42,0.97);backdrop-filter:blur(20px);border:1px solid rgba(129,140,248,0.15);border-radius:18px;overflow:hidden;box-shadow:0 24px 48px rgba(0,0,0,0.4);pointer-events:auto}
|
||
.modal-dialog{pointer-events:none}.modal-dialog .m-nex{pointer-events:auto}
|
||
.m-head{position:relative;background:linear-gradient(135deg,rgba(30,41,59,0.95),rgba(51,65,85,0.95));padding:0;border:none;overflow:hidden;border-bottom:1px solid rgba(129,140,248,0.15)}
|
||
.m-head-pat{position:absolute;inset:0;background:linear-gradient(135deg,rgba(129,140,248,0.08) 0%,transparent 60%)}
|
||
.m-head-inner{position:relative;display:flex;align-items:center;gap:1.2rem;padding:1.5rem;z-index:2}
|
||
.m-head-icon{width:44px;height:44px;background:linear-gradient(135deg,var(--neon-indigo),var(--neon-purple));border:1px solid rgba(129,140,248,0.3);border-radius:10px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.2rem}
|
||
.m-head h4{font-family:var(--font-mono);font-size:.95rem;font-weight:700;letter-spacing:.05em;color:#e2e8f0;margin-bottom:.2rem}
|
||
.m-head p{font-size:.75rem;color:var(--dark-400);margin:0}
|
||
.m-close{position:absolute;top:1.2rem;right:1.2rem;width:32px;height:32px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);border-radius:7px;display:flex;align-items:center;justify-content:center;color:var(--dark-300);cursor:pointer;transition:all .2s;z-index:3;font-size:.85rem}
|
||
.m-close:hover{background:rgba(255,255,255,0.12);color:#fff}
|
||
.m-body{padding:1.5rem;background:rgba(15,23,42,0.95)}
|
||
.m-foot{background:rgba(15,23,42,0.9);border:none;border-top:1px solid rgba(255,255,255,0.06);padding:1rem 1.5rem;display:flex;gap:.8rem;justify-content:flex-end}
|
||
.btn-nex{display:flex;align-items:center;gap:.5rem;padding:.6rem 1.2rem;border-radius:7px;font-family:var(--font-mono);font-size:.65rem;font-weight:600;letter-spacing:.05em;cursor:pointer;transition:all .2s;border:1px solid}
|
||
.btn-nex.sec{background:rgba(255,255,255,0.04);border-color:rgba(255,255,255,0.12);color:var(--dark-300)}.btn-nex.sec:hover{background:rgba(255,255,255,0.08);color:#e2e8f0}
|
||
.btn-nex.pri{background:linear-gradient(135deg,var(--neon-indigo),var(--neon-purple));border-color:transparent;color:#fff}.btn-nex.pri:hover{transform:translateY(-1px);box-shadow:0 8px 16px rgba(129,140,248,0.25)}
|
||
.m-nex input,.m-nex textarea,.m-nex button,.m-nex select,.m-nex .btn-nex{pointer-events:auto;position:relative;z-index:1061}
|
||
.m-body,.m-head,.m-foot{pointer-events:auto;position:relative}
|
||
|
||
.ta-label{display:flex;align-items:center;gap:.6rem;font-family:var(--font-mono);font-size:.62rem;font-weight:600;letter-spacing:.1em;color:var(--dark-300);margin-bottom:.7rem}
|
||
.ta-area{width:100%;padding:1rem;background:rgba(15,23,42,0.6);border:1px solid rgba(255,255,255,0.1);border-radius:10px;color:#e2e8f0;font-family:inherit;font-size:.85rem;resize:vertical;transition:all .2s;pointer-events:auto!important;z-index:1062!important;position:relative}
|
||
.ta-area:focus{outline:none;border-color:rgba(129,140,248,0.4);background:rgba(15,23,42,0.8);box-shadow:0 0 0 3px rgba(129,140,248,0.08)}
|
||
.ta-hint{display:flex;align-items:center;gap:.6rem;margin-top:.6rem;padding:.7rem;background:rgba(129,140,248,0.04);border:1px solid rgba(129,140,248,0.12);border-radius:7px;font-size:.72rem;color:var(--dark-300)}
|
||
|
||
.res-divider{height:1px;background:linear-gradient(90deg,transparent,rgba(129,140,248,0.25),transparent);margin:1.5rem 0}
|
||
.res-header{display:flex;align-items:center;gap:.6rem;font-family:var(--font-mono);font-size:.72rem;font-weight:700;letter-spacing:.1em;color:var(--neon-indigo);margin-bottom:1rem}
|
||
.res-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.8rem;margin-bottom:1.2rem}
|
||
.res-card{background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.07);border-radius:10px;padding:1rem}
|
||
.res-card-head{display:flex;align-items:center;gap:.6rem;margin-bottom:.7rem}
|
||
.res-card-icon{width:28px;height:28px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:.75rem;color:#fff}
|
||
.res-card.sent .res-card-icon{background:linear-gradient(135deg,var(--neon-pink),var(--neon-red))}
|
||
.res-card.risk .res-card-icon{background:linear-gradient(135deg,var(--neon-yellow),var(--neon-red))}
|
||
.res-card-title{font-family:var(--font-mono);font-size:.6rem;font-weight:600;letter-spacing:.1em;color:var(--dark-300)}
|
||
.val-chip{display:inline-block;padding:.3rem .8rem;border-radius:16px;font-family:var(--font-mono);font-size:.62rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;border:1px solid}
|
||
.val-chip.positive{background:rgba(52,211,153,0.15);border-color:rgba(52,211,153,0.3);color:var(--neon-green)}
|
||
.val-chip.negative{background:rgba(248,113,113,0.15);border-color:rgba(248,113,113,0.3);color:var(--neon-red)}
|
||
.val-chip.neutral{background:rgba(100,116,139,0.15);border-color:rgba(100,116,139,0.3);color:var(--dark-300)}
|
||
.val-chip.unknown{background:rgba(100,116,139,0.1);border-color:rgba(100,116,139,0.2);color:var(--dark-400)}
|
||
.val-chip.low{background:rgba(52,211,153,0.15);border-color:rgba(52,211,153,0.3);color:var(--neon-green)}
|
||
.val-chip.moderate{background:rgba(251,191,36,0.15);border-color:rgba(251,191,36,0.3);color:var(--neon-yellow)}
|
||
.val-chip.high{background:rgba(248,113,113,0.15);border-color:rgba(248,113,113,0.3);color:var(--neon-red)}
|
||
.val-chip.critical{background:rgba(239,68,68,0.2);border-color:rgba(239,68,68,0.3);color:#fca5a5}
|
||
.insight-panel{background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.06);border-radius:10px;padding:1rem;margin-bottom:.8rem}
|
||
.insight-head{display:flex;align-items:center;gap:.6rem;font-family:var(--font-mono);font-size:.6rem;font-weight:600;letter-spacing:.1em;color:var(--dark-300);margin-bottom:.7rem}
|
||
.tags{display:flex;flex-wrap:wrap;gap:.4rem}
|
||
.tag{padding:.25rem .6rem;border-radius:5px;font-size:.65rem;font-weight:500;border:1px solid}
|
||
.tag.phrase{background:rgba(255,255,255,0.04);border-color:rgba(255,255,255,0.1);color:var(--dark-200)}
|
||
.tag.cat{background:rgba(129,140,248,0.12);border-color:rgba(129,140,248,0.25);color:var(--neon-indigo)}
|
||
.no-data{color:var(--dark-500);font-style:italic;font-size:.72rem;text-align:center;width:100%;padding:.5rem}
|
||
|
||
.loading-nex{text-align:center;padding:2rem}
|
||
.scan-bar{width:60px;height:3px;background:linear-gradient(90deg,var(--neon-indigo),var(--neon-cyan));border-radius:2px;margin:0 auto 1.2rem;animation:pulse 1.5s ease-in-out infinite}
|
||
.loading-nex h5{font-family:var(--font-mono);font-size:.85rem;font-weight:700;letter-spacing:.05em;color:#fff;margin-bottom:.3rem}
|
||
.loading-nex p{color:var(--dark-300);font-size:.75rem}
|
||
.scanner{width:70px;height:3px;background:rgba(129,140,248,0.15);border-radius:2px;margin:0 auto 1rem;position:relative;overflow:hidden}
|
||
.scanner-line{position:absolute;top:0;left:0;width:30%;height:100%;background:linear-gradient(90deg,var(--neon-indigo),var(--neon-cyan));border-radius:2px;animation:scanMove 2s ease-in-out infinite}
|
||
.error-nex{text-align:center;padding:1.5rem}
|
||
.error-vis{width:50px;height:50px;background:rgba(248,113,113,0.08);border:1px solid rgba(248,113,113,0.2);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto .8rem;color:var(--neon-red);font-size:1.3rem}
|
||
.error-nex h5{font-family:var(--font-mono);font-size:.8rem;font-weight:700;letter-spacing:.05em;color:var(--neon-red);margin-bottom:.3rem}
|
||
.error-nex p{color:var(--dark-300);font-size:.75rem}
|
||
|
||
.svc-detail{background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.07);border-radius:12px;padding:1.2rem;position:relative;overflow:hidden;margin-bottom:1rem}
|
||
.svc-detail::before{content:'';position:absolute;top:0;left:0;right:0;height:2px}
|
||
.svc-detail.online::before{background:linear-gradient(90deg,var(--neon-green),var(--neon-teal))}
|
||
.svc-detail.offline::before{background:linear-gradient(90deg,var(--neon-red),var(--neon-yellow))}
|
||
.svc-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:.7rem}
|
||
.svc-icon{width:36px;height:36px;background:rgba(255,255,255,0.08);border-radius:8px;display:flex;align-items:center;justify-content:center;color:#e2e8f0;font-size:1rem}
|
||
.svc-status{display:flex;align-items:center;gap:.5rem;font-family:var(--font-mono);font-size:.55rem;font-weight:600;letter-spacing:.1em}
|
||
.svc-detail.online .svc-status{color:var(--neon-green)}.svc-detail.offline .svc-status{color:var(--neon-red)}
|
||
.svc-detail h6{font-weight:700;color:#fff;margin-bottom:.2rem;font-size:.85rem}
|
||
.svc-detail p{font-size:.72rem;color:var(--dark-300);margin:0}
|
||
.svc-caps{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.6rem}
|
||
.svc-cap{font-size:.55rem;font-family:var(--font-mono);padding:.15rem .45rem;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.06);border-radius:4px;color:var(--dark-300);display:flex;align-items:center;gap:.25rem}
|
||
.svc-cap i{font-size:.45rem;color:var(--neon-indigo)}
|
||
.sys-status{padding:1.2rem;border-radius:10px;display:flex;align-items:center;gap:1rem}
|
||
.sys-status.ok{background:rgba(52,211,153,0.06);border:1px solid rgba(52,211,153,0.2)}
|
||
.sys-status.bad{background:rgba(248,113,113,0.06);border:1px solid rgba(248,113,113,0.2)}
|
||
.sys-dot{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1rem;position:relative}
|
||
.sys-status.ok .sys-dot{background:rgba(52,211,153,0.15);color:var(--neon-green)}
|
||
.sys-status.bad .sys-dot{background:rgba(248,113,113,0.15);color:var(--neon-red)}
|
||
.sys-dot::after{content:'';position:absolute;inset:-3px;border:1px solid currentColor;border-radius:50%;opacity:.2;animation:pulse 2s infinite}
|
||
.sys-title{font-family:var(--font-mono);font-size:.8rem;font-weight:700;letter-spacing:.05em;color:#fff;margin-bottom:.15rem}
|
||
.sys-msg{font-size:.72rem;color:var(--dark-300)}
|
||
|
||
.prog{text-align:center;padding:1.5rem}
|
||
.brain-wrap{position:relative;display:inline-block;margin-bottom:1.5rem}
|
||
.brain-waves{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}
|
||
.bw{position:absolute;border:1px solid;border-radius:50%;opacity:.5}
|
||
.bw.w1{width:70px;height:70px;top:-35px;left:-35px;border-color:var(--neon-indigo);animation:waveExpand 2s infinite}
|
||
.bw.w2{width:90px;height:90px;top:-45px;left:-45px;border-color:var(--neon-purple);animation:waveExpand 2s infinite .7s}
|
||
.bw.w3{width:110px;height:110px;top:-55px;left:-55px;border-color:var(--neon-cyan);animation:waveExpand 2s infinite 1.4s}
|
||
.brain-icon{width:52px;height:52px;background:linear-gradient(135deg,var(--neon-indigo),var(--neon-purple));border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.3rem;position:relative;z-index:2}
|
||
.prog h5{font-family:var(--font-mono);font-size:.85rem;font-weight:700;letter-spacing:.05em;color:#fff;margin-bottom:1rem}
|
||
.prog-track{display:flex;align-items:center;gap:.8rem;margin-bottom:1.5rem}
|
||
.prog-bar{flex:1;height:6px;background:rgba(100,116,139,0.15);border-radius:3px;overflow:hidden;position:relative}
|
||
.prog-fill{height:100%;background:linear-gradient(90deg,var(--neon-indigo),var(--neon-cyan));border-radius:3px;transition:width .3s;position:relative}
|
||
.prog-fill::after{content:'';position:absolute;top:0;right:0;width:16px;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.4));filter:blur(2px)}
|
||
.prog-pct{font-family:var(--font-mono);font-size:.72rem;font-weight:600;color:var(--neon-indigo);min-width:35px}
|
||
.pipeline{display:flex;align-items:center;justify-content:center;gap:.7rem;max-width:380px;margin:0 auto}
|
||
.pipe-step{display:flex;flex-direction:column;align-items:center;gap:.35rem;transition:all .3s}
|
||
.pipe-dot{width:20px;height:20px;border:2px solid var(--dark-600);border-radius:50%;background:var(--dark-800);transition:all .3s}
|
||
.pipe-step.done .pipe-dot{background:var(--neon-green);border-color:var(--neon-green);box-shadow:0 0 10px rgba(52,211,153,0.4)}
|
||
.pipe-step.active .pipe-dot{background:var(--neon-indigo);border-color:var(--neon-indigo);box-shadow:0 0 10px rgba(129,140,248,0.4);animation:pulse 1.5s infinite}
|
||
.pipe-lbl{font-family:var(--font-mono);font-size:.5rem;font-weight:600;letter-spacing:.1em;color:var(--dark-500);transition:color .3s}
|
||
.pipe-step.done .pipe-lbl{color:var(--neon-green)}.pipe-step.active .pipe-lbl{color:var(--neon-indigo)}
|
||
.pipe-line{width:16px;height:2px;background:var(--dark-600);transition:background .3s}
|
||
|
||
@@media(max-width:1200px){.cards-grid{grid-template-columns:repeat(auto-fill,minmax(380px,1fr))}}
|
||
@@media(max-width:768px){
|
||
.nav-inner{flex-wrap:wrap;gap:.8rem}.nav-spacer{display:none}.nav-actions{width:100%;justify-content:center;flex-wrap:wrap}
|
||
.hero h1{font-size:2.8rem}.cards-grid{grid-template-columns:1fr;padding:0}.metrics{grid-template-columns:1fr;padding:0 1rem}
|
||
.quick-btns{grid-template-columns:1fr}.res-grid{grid-template-columns:1fr}.pipeline{flex-direction:column;gap:.5rem}.pipe-line{width:2px;height:12px}
|
||
}
|
||
@@media(max-width:480px){.container{padding:0 1rem}.hero{padding:2rem 0 1rem}.hero h1{font-size:2.2rem}.s-head,.actions{padding:1.2rem}}
|
||
@@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
|
||
</style>
|
||
}
|
||
|
||
<div class="nex-page">
|
||
<div class="nex-bg"><div class="grid"></div><div class="mesh"></div></div>
|
||
|
||
<!-- Top Navigation -->
|
||
<nav class="top-nav">
|
||
<div class="nav-inner">
|
||
<div class="nav-brand">
|
||
<div class="brand-icon"><i class="fa-solid fa-brain"></i></div>
|
||
<span class="brand-txt">NVKN</span>
|
||
<span class="brand-ver">v2.0</span>
|
||
</div>
|
||
<div class="nav-spacer"></div>
|
||
<div class="nav-actions">
|
||
@{
|
||
var isOnline = false;
|
||
if (ViewBag.ServiceHealth != null)
|
||
{
|
||
var health = ViewBag.ServiceHealth as Dictionary<string, bool>;
|
||
isOnline = health != null && health.Values.Any(v => v);
|
||
}
|
||
}
|
||
<div class="ai-chip @(isOnline ? "" : "offline")" onclick="showAIStatus()" title="Claude AI Status">
|
||
<div class="ai-dot"></div>
|
||
<i class="fa-solid fa-sparkles ai-icon"></i>
|
||
<span class="ai-label">CLAUDE AI @(isOnline ? "ACTIVE" : "OFFLINE")</span>
|
||
</div>
|
||
<button class="nav-btn" data-bs-toggle="modal" data-bs-target="#testModal"><i class="fa-solid fa-flask-vial"></i><span>Test AI</span></button>
|
||
<div class="org-badge"><div class="org-avatar">NK</div><span class="org-name">NVKN</span></div>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- Hero -->
|
||
<section class="hero">
|
||
<div class="container">
|
||
<div class="hero-badge"><span class="dot"></span><span>CLAUDE AI–POWERED ANALYTICS</span></div>
|
||
<h1>Mental Health <span class="grad">Intelligence</span> Platform</h1>
|
||
<p>Advanced AI analysis for workplace wellness insights, real-time risk detection, and data-driven mental health strategies.</p>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Main Content -->
|
||
<main class="main">
|
||
<div class="container">
|
||
<!-- Claude AI Engine Card -->
|
||
<div class="ai-engine">
|
||
<div class="ai-engine-icon"><i class="fa-solid fa-sparkles"></i></div>
|
||
<div class="ai-engine-info">
|
||
<h3>CLAUDE AI ENGINE</h3>
|
||
<p>Unified intelligence for sentiment analysis, risk assessment, and workplace insights</p>
|
||
<div class="ai-caps">
|
||
<span class="ai-cap"><i class="fa-solid fa-heart-pulse"></i> Sentiment Analysis</span>
|
||
<span class="ai-cap"><i class="fa-solid fa-shield-halved"></i> Risk Assessment</span>
|
||
<span class="ai-cap"><i class="fa-solid fa-key"></i> Key Phrase Extraction</span>
|
||
<span class="ai-cap"><i class="fa-solid fa-user-shield"></i> PII Anonymization</span>
|
||
<span class="ai-cap"><i class="fa-solid fa-lightbulb"></i> Workplace Insights</span>
|
||
<span class="ai-cap"><i class="fa-solid fa-tags"></i> Categorization</span>
|
||
</div>
|
||
</div>
|
||
<div class="ai-engine-status @(isOnline ? "online" : "offline")">
|
||
<i class="fa-solid @(isOnline ? "fa-circle-check" : "fa-circle-xmark")"></i>
|
||
<span>@(isOnline ? "ONLINE" : "OFFLINE")</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Alerts -->
|
||
@if (TempData["ErrorMessage"] != null)
|
||
{
|
||
<div class="alert-nex error"><div class="alert-icon"><i class="fa-solid fa-triangle-exclamation"></i></div><div><div class="alert-lbl">SYSTEM ERROR</div><div class="alert-txt">@TempData["ErrorMessage"]</div></div><button class="alert-x" data-bs-dismiss="alert"><i class="fa-solid fa-xmark"></i></button></div>
|
||
}
|
||
@if (TempData["SuccessMessage"] != null)
|
||
{
|
||
<div class="alert-nex success"><div class="alert-icon"><i class="fa-solid fa-circle-check"></i></div><div><div class="alert-lbl">SUCCESS</div><div class="alert-txt">@TempData["SuccessMessage"]</div></div><button class="alert-x" data-bs-dismiss="alert"><i class="fa-solid fa-xmark"></i></button></div>
|
||
}
|
||
@if (TempData["WarningMessage"] != null)
|
||
{
|
||
<div class="alert-nex warning"><div class="alert-icon"><i class="fa-solid fa-circle-info"></i></div><div><div class="alert-lbl">ADVISORY</div><div class="alert-txt">@TempData["WarningMessage"]</div></div><button class="alert-x" data-bs-dismiss="alert"><i class="fa-solid fa-xmark"></i></button></div>
|
||
}
|
||
|
||
<!-- Response Cards Grid -->
|
||
<section>
|
||
<div class="sec-title">
|
||
<h2>INDIVIDUAL RESPONSES</h2>
|
||
<div class="bar"></div>
|
||
</div>
|
||
|
||
<!-- Search Bar -->
|
||
<div style="max-width:600px;margin:0 auto 2rem;position:relative">
|
||
<div style="position:relative">
|
||
<i class="fa-solid fa-magnifying-glass" style="position:absolute;left:1.2rem;top:50%;transform:translateY(-50%);color:var(--dark-500);font-size:.9rem;pointer-events:none;transition:color .2s;z-index:2"></i>
|
||
<input type="text" id="searchInput" placeholder="Search by name, email, or questionnaire title..."
|
||
style="width:100%;padding:.85rem 3rem .85rem 3rem;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:14px;color:#e2e8f0;font-family:var(--font-main);font-size:.88rem;outline:none;transition:all .25s"
|
||
onfocus="this.style.borderColor='rgba(129,140,248,0.4)';this.style.boxShadow='0 0 0 3px rgba(129,140,248,0.1)';this.style.background='rgba(255,255,255,0.06)';this.previousElementSibling.style.color='var(--neon-indigo)'"
|
||
onblur="this.style.borderColor='rgba(255,255,255,0.08)';this.style.boxShadow='none';this.style.background='rgba(255,255,255,0.04)';this.previousElementSibling.style.color='var(--dark-500)'" />
|
||
<button id="clearSearch" onclick="document.getElementById('searchInput').value='';filterCards();this.style.display='none'"
|
||
style="display:none;position:absolute;right:1rem;top:50%;transform:translateY(-50%);background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);border-radius:6px;width:28px;height:28px;color:var(--dark-400);cursor:pointer;font-size:.7rem;z-index:2;transition:all .2s">
|
||
<i class="fa-solid fa-xmark"></i>
|
||
</button>
|
||
</div>
|
||
<div id="searchCount" style="text-align:center;margin-top:.6rem;font-family:var(--font-mono);font-size:.6rem;font-weight:600;letter-spacing:.08em;color:var(--dark-500);display:none"></div>
|
||
</div>
|
||
|
||
<div class="cards-grid">
|
||
@{
|
||
var modelList = Model?.ToList() ?? new List<dynamic>();
|
||
var avGradients = new[] {
|
||
"background:linear-gradient(135deg,#818cf8,#60a5fa)",
|
||
"background:linear-gradient(135deg,#c084fc,#f472b6)",
|
||
"background:linear-gradient(135deg,#33b3ae,#34d399)",
|
||
"background:linear-gradient(135deg,#f59e0b,#fbbf24)",
|
||
"background:linear-gradient(135deg,#22d3ee,#60a5fa)"
|
||
};
|
||
var cardIdx = 0;
|
||
}
|
||
|
||
@if (modelList.Count > 0)
|
||
{
|
||
@foreach (var resp in modelList)
|
||
{
|
||
var userName = (string)(resp.UserName ?? "Anonymous");
|
||
var userEmail = (string)(resp.UserEmail ?? "No email");
|
||
var initial = userName.Length > 0 ? userName.Substring(0, 1).ToUpper() : "?";
|
||
var avStyle = avGradients[cardIdx % avGradients.Length];
|
||
cardIdx++;
|
||
|
||
<div class="s-card" data-username="@userName.ToLower()" data-email="@userEmail.ToLower()" data-title="@resp.Title.ToLower()">
|
||
<div class="glow"></div>
|
||
<div class="s-head">
|
||
<h3 class="s-title">@resp.Title</h3>
|
||
|
||
<!-- Single Respondent -->
|
||
<div class="respondent">
|
||
<div class="resp-avatar" style="@avStyle">@initial</div>
|
||
<div class="resp-info">
|
||
<div class="resp-name">@userName</div>
|
||
<div class="resp-email">@userEmail</div>
|
||
</div>
|
||
<div class="resp-badge">RESPONDENT</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Metrics -->
|
||
<div class="metrics">
|
||
<div class="m-chip q">
|
||
<div class="m-icon"><i class="fa-solid fa-circle-question"></i></div>
|
||
<div><div class="m-num">@resp.QuestionCount</div><div class="m-lbl">QUESTIONS</div></div>
|
||
</div>
|
||
<div class="m-chip r">
|
||
<div class="m-icon"><i class="fa-solid fa-comments"></i></div>
|
||
<div><div class="m-num">@resp.TotalAnswered</div><div class="m-lbl">ANSWERED</div></div>
|
||
</div>
|
||
<div class="m-chip t">
|
||
<div class="m-icon"><i class="fa-solid fa-comment-medical"></i></div>
|
||
<div><div class="m-num">@resp.AnalyzableCount</div><div class="m-lbl">ANALYZABLE</div></div>
|
||
</div>
|
||
</div>
|
||
|
||
@if (resp.SubmissionDate != null && resp.SubmissionDate != DateTime.MinValue)
|
||
{
|
||
<div class="activity"><div class="dot"></div><span>SUBMITTED: @((DateTime)resp.SubmissionDate)</span></div>
|
||
}
|
||
|
||
<!-- Actions -->
|
||
<div class="actions">
|
||
@if (resp.AnalyzableCount > 0)
|
||
{
|
||
<button onclick="startProgress(@resp.QuestionnaireId, '@resp.Title', 'analysis')" class="launch-btn">
|
||
<div class="shimmer"></div>
|
||
<div class="launch-inner">
|
||
<div class="launch-icon"><i class="fa-solid fa-rocket"></i></div>
|
||
<div class="launch-txt">
|
||
<div class="launch-title">LAUNCH AI ANALYSIS</div>
|
||
<div class="launch-sub">Claude AI neural processing</div>
|
||
</div>
|
||
<div class="launch-arrow"><i class="fa-solid fa-arrow-right"></i></div>
|
||
</div>
|
||
</button>
|
||
<div class="quick-btns">
|
||
<button onclick="startProgress(@resp.QuestionnaireId, '@resp.Title', 'risk')" class="q-btn risk">
|
||
<i class="fa-solid fa-triangle-exclamation"></i><span>RISK SCAN</span>
|
||
</button>
|
||
<button onclick="startProgress(@resp.QuestionnaireId, '@resp.Title', 'batch')" class="q-btn batch">
|
||
<i class="fa-solid fa-layer-group"></i><span>BATCH OPS</span>
|
||
</button>
|
||
<button onclick="startProgress(@resp.QuestionnaireId, '@resp.Title', 'trends')" class="q-btn trend">
|
||
<i class="fa-solid fa-chart-line"></i><span>TRENDS</span>
|
||
</button>
|
||
</div>
|
||
}
|
||
else
|
||
{
|
||
<div class="disabled-box">
|
||
<div class="disabled-icon"><i class="fa-solid fa-database"></i></div>
|
||
<div>
|
||
<div class="disabled-title">INSUFFICIENT DATA</div>
|
||
<div class="disabled-msg">No analyzable answers in this response</div>
|
||
</div>
|
||
</div>
|
||
}
|
||
</div>
|
||
</div>
|
||
}
|
||
}
|
||
else
|
||
{
|
||
<div class="empty-state">
|
||
<div class="empty-vis">
|
||
<div class="empty-icon"><i class="fa-solid 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>
|
||
<h3>NO RESPONSES FOUND</h3>
|
||
<p>Deploy questionnaires and collect responses to begin AI analysis</p>
|
||
<a href="@Url.Action("Index", "Questionnaire")" class="create-btn"><i class="fa-solid fa-plus"></i> CREATE QUESTIONNAIRE</a>
|
||
</div>
|
||
}
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</main>
|
||
</div>
|
||
|
||
<!-- AI Status Modal -->
|
||
<div class="modal fade" id="aiStatusModal" tabindex="-1" data-bs-backdrop="true" data-bs-keyboard="true">
|
||
<div class="modal-dialog modal-lg modal-dialog-centered">
|
||
<div class="m-nex" onclick="event.stopPropagation()">
|
||
<div class="m-head">
|
||
<div class="m-head-pat"></div>
|
||
<div class="m-head-inner"><div class="m-head-icon"><i class="fa-solid fa-satellite-dish"></i></div><div><h4>SYSTEM DIAGNOSTICS</h4><p>Claude AI service connectivity</p></div></div>
|
||
<button type="button" class="m-close" data-bs-dismiss="modal"><i class="fa-solid fa-xmark"></i></button>
|
||
</div>
|
||
<div class="m-body" onclick="event.stopPropagation()"><div id="statusContent"><div class="loading-nex"><div class="scan-bar"></div><h5>SCANNING SYSTEMS</h5><p>Verifying Claude AI connection...</p></div></div></div>
|
||
<div class="m-foot"><button type="button" class="btn-nex sec" data-bs-dismiss="modal"><i class="fa-solid fa-power-off"></i> CLOSE</button></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Test Analysis Modal -->
|
||
<div class="modal fade" id="testModal" tabindex="-1" data-bs-backdrop="true" data-bs-keyboard="true">
|
||
<div class="modal-dialog modal-lg modal-dialog-centered">
|
||
<div class="m-nex" onclick="event.stopPropagation()">
|
||
<div class="m-head">
|
||
<div class="m-head-pat"></div>
|
||
<div class="m-head-inner"><div class="m-head-icon"><i class="fa-solid fa-flask-vial"></i></div><div><h4>AI ANALYSIS LAB</h4><p>Test Claude AI capabilities with sample data</p></div></div>
|
||
<button type="button" class="m-close" data-bs-dismiss="modal"><i class="fa-solid fa-xmark"></i></button>
|
||
</div>
|
||
<div class="m-body" onclick="event.stopPropagation()">
|
||
<form id="testForm" onclick="event.stopPropagation()">
|
||
<div style="margin-bottom:1.2rem">
|
||
<label class="ta-label"><i class="fa-solid fa-comment-dots"></i> SAMPLE DATA INPUT</label>
|
||
<textarea id="sampleText" class="ta-area" rows="5" onclick="event.stopPropagation()" placeholder="Enter employee response text for AI analysis testing..."></textarea>
|
||
<div class="ta-hint"><i class="fa-solid fa-lightbulb" style="color:var(--neon-amber)"></i><span>Try: "I'm feeling overwhelmed with deadlines and having trouble sleeping"</span></div>
|
||
</div>
|
||
</form>
|
||
<div id="testResults" class="d-none">
|
||
<div class="res-divider"></div>
|
||
<div class="res-header"><i class="fa-solid fa-chart-network"></i> ANALYSIS OUTPUT</div>
|
||
<div id="testResultsContent"></div>
|
||
</div>
|
||
</div>
|
||
<div class="m-foot">
|
||
<button type="button" class="btn-nex sec" data-bs-dismiss="modal"><i class="fa-solid fa-xmark"></i> CANCEL</button>
|
||
<button type="button" class="btn-nex pri" onclick="runTest(); event.stopPropagation()"><i class="fa-solid fa-play"></i> RUN ANALYSIS</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Progress Modal -->
|
||
<div class="modal fade" id="progressModal" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false">
|
||
<div class="modal-dialog modal-dialog-centered">
|
||
<div class="m-nex" onclick="event.stopPropagation()">
|
||
<div class="m-head">
|
||
<div class="m-head-pat"></div>
|
||
<div class="m-head-inner"><div class="m-head-icon"><i class="fa-solid fa-brain"></i></div><div><h4>NEURAL PROCESSING</h4><p id="progSub">Analyzing mental health patterns</p></div></div>
|
||
</div>
|
||
<div class="m-body" onclick="event.stopPropagation()">
|
||
<div class="prog">
|
||
<div class="brain-wrap">
|
||
<div class="brain-waves"><div class="bw w1"></div><div class="bw w2"></div><div class="bw w3"></div></div>
|
||
<div class="brain-icon"><i class="fa-solid fa-brain"></i></div>
|
||
</div>
|
||
<h5 id="progTitle">PROCESSING QUESTIONNAIRE DATA</h5>
|
||
<div class="prog-track"><div class="prog-bar"><div class="prog-fill" style="width:0%"></div></div><div class="prog-pct">0%</div></div>
|
||
<div class="pipeline" id="pipeline"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
@section Scripts {
|
||
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@@11"></script>
|
||
<script>
|
||
var actionUrls = {
|
||
analysis: '@Url.Action("AnalyzeQuestionnaire")',
|
||
risk: '@Url.Action("HighRiskResponses")',
|
||
batch: '@Url.Action("BatchAnalyze")',
|
||
trends: '@Url.Action("AnalyzeTrends")',
|
||
health: '@Url.Action("ServiceHealth")',
|
||
test: '@Url.Action("TestAnalysis")'
|
||
};
|
||
|
||
var pipeConfigs = {
|
||
analysis: { sub: 'Processing', title: 'PROCESSING RESPONSE DATA', steps: ['INIT','PARSE','ANALYZE','ASSESS','REPORT'] },
|
||
risk: { sub: 'Risk scanning', title: 'SCANNING FOR RISK INDICATORS', steps: ['INIT','SCAN','DETECT','ASSESS','ALERT'] },
|
||
batch: { sub: 'Batch processing', title: 'EXECUTING BATCH OPERATIONS', steps: ['INIT','QUEUE','PROCESS','VERIFY','COMPLETE'] },
|
||
trends: { sub: 'Analyzing trends in', title: 'CALCULATING TREND PATTERNS', steps: ['INIT','COLLECT','PATTERN','TREND','VISUAL'] }
|
||
};
|
||
|
||
function startProgress(id, title, type) {
|
||
var cfg = pipeConfigs[type];
|
||
document.getElementById('progSub').textContent = cfg.sub + ' "' + title + '"';
|
||
document.getElementById('progTitle').textContent = cfg.title;
|
||
buildPipeline(cfg.steps);
|
||
var modal = new bootstrap.Modal(document.getElementById('progressModal'));
|
||
modal.show();
|
||
animateProgress(function() { window.location.href = actionUrls[type] + '?id=' + id; });
|
||
}
|
||
|
||
function buildPipeline(steps) {
|
||
var html = '';
|
||
steps.forEach(function(s, i) {
|
||
html += '<div class="pipe-step ' + (i === 0 ? 'done' : '') + '"><div class="pipe-dot"></div><div class="pipe-lbl">' + s + '</div></div>';
|
||
if (i < steps.length - 1) html += '<div class="pipe-line"></div>';
|
||
});
|
||
document.getElementById('pipeline').innerHTML = html;
|
||
}
|
||
|
||
function animateProgress(onDone) {
|
||
var p = 0, fill = document.querySelector('.prog-fill'), pct = document.querySelector('.prog-pct'), steps = document.querySelectorAll('.pipe-step');
|
||
var iv = setInterval(function() {
|
||
p += Math.random() * 12 + 3;
|
||
if (p > 95) p = 95;
|
||
fill.style.width = p + '%'; pct.textContent = Math.round(p) + '%';
|
||
var cur = Math.floor(p / 20);
|
||
steps.forEach(function(s, i) { s.classList.remove('active', 'done'); if (i < cur) s.classList.add('done'); else if (i === cur) s.classList.add('active'); });
|
||
if (p >= 95) {
|
||
clearInterval(iv);
|
||
setTimeout(function() { fill.style.width = '100%'; pct.textContent = '100%'; steps.forEach(function(s) { s.classList.remove('active'); s.classList.add('done'); }); setTimeout(onDone, 700); }, 300);
|
||
}
|
||
}, 150);
|
||
}
|
||
|
||
function showAIStatus() {
|
||
var modal = new bootstrap.Modal(document.getElementById('aiStatusModal'));
|
||
modal.show();
|
||
$.get(actionUrls.health).done(function(data) {
|
||
if (data.success && data.services) {
|
||
var online = true; for (var k in data.services) { if (!data.services[k]) online = false; }
|
||
var html = '<div class="svc-detail ' + (online ? 'online' : 'offline') + '"><div class="svc-top"><div class="svc-icon"><i class="fa-solid fa-sparkles"></i></div><div class="svc-status"><i class="fa-solid ' + (online ? 'fa-circle-check' : 'fa-circle-xmark') + '"></i> ' + (online ? 'ACTIVE' : 'OFFLINE') + '</div></div><h6>CLAUDE AI ENGINE</h6><p>Unified intelligence — sentiment, risk assessment, insights & anonymization</p><div class="svc-caps"><span class="svc-cap"><i class="fa-solid fa-heart-pulse"></i> Sentiment</span><span class="svc-cap"><i class="fa-solid fa-shield-halved"></i> Risk</span><span class="svc-cap"><i class="fa-solid fa-key"></i> Key Phrases</span><span class="svc-cap"><i class="fa-solid fa-user-shield"></i> PII Removal</span><span class="svc-cap"><i class="fa-solid fa-lightbulb"></i> Insights</span><span class="svc-cap"><i class="fa-solid fa-tags"></i> Categories</span></div></div>';
|
||
html += '<div class="sys-status ' + (online ? 'ok' : 'bad') + '"><div class="sys-dot"><i class="fa-solid ' + (online ? 'fa-circle-check' : 'fa-triangle-exclamation') + '"></i></div><div><div class="sys-title">' + (online ? 'ALL SYSTEMS OPERATIONAL' : 'SERVICE DEGRADED') + '</div><div class="sys-msg">' + (data.message || '') + '</div></div></div>';
|
||
document.getElementById('statusContent').innerHTML = html;
|
||
} else { document.getElementById('statusContent').innerHTML = '<div class="error-nex"><div class="error-vis"><i class="fa-solid fa-circle-xmark"></i></div><h5>DIAGNOSTIC FAILED</h5><p>' + (data.error || 'Unable to verify') + '</p></div>'; }
|
||
}).fail(function() { document.getElementById('statusContent').innerHTML = '<div class="error-nex"><div class="error-vis"><i class="fa-solid fa-wifi-exclamation"></i></div><h5>CONNECTION TIMEOUT</h5><p>Unable to reach diagnostic endpoint</p></div>'; });
|
||
}
|
||
|
||
function runTest() {
|
||
var text = document.getElementById('sampleText').value.trim();
|
||
if (!text) { Swal.fire({ title: 'INPUT REQUIRED', text: 'Please enter sample text for analysis', icon: 'warning', customClass: { popup: 'swal-nex', title: 'swal-t-nex', confirmButton: 'swal-btn-nex' } }); return false; }
|
||
var resDiv = document.getElementById('testResults'), content = document.getElementById('testResultsContent');
|
||
content.innerHTML = '<div style="text-align:center;padding:1.5rem"><div class="scanner"><div class="scanner-line"></div></div><h6 style="font-family:var(--font-mono);font-size:.8rem;color:#fff;margin-bottom:.3rem">NEURAL PROCESSING</h6><p style="font-size:.72rem;color:var(--dark-300)">Analyzing with Claude AI...</p></div>';
|
||
resDiv.classList.remove('d-none');
|
||
$.post(actionUrls.test, { sampleText: text }).done(function(data) {
|
||
if (data.success) { content.innerHTML = buildResults(data); } else { content.innerHTML = '<div class="error-nex"><div class="error-vis"><i class="fa-solid fa-triangle-exclamation"></i></div><h5>ANALYSIS FAILED</h5><p>' + data.message + '</p></div>'; }
|
||
}).fail(function() { content.innerHTML = '<div class="error-nex"><div class="error-vis"><i class="fa-solid fa-circle-xmark"></i></div><h5>CONNECTION ERROR</h5><p>Claude AI unreachable</p></div>'; });
|
||
return false;
|
||
}
|
||
|
||
function buildResults(data) {
|
||
var sentClass = { positive: 'positive', negative: 'negative', neutral: 'neutral' }[data.sentiment?.toLowerCase()] || 'unknown';
|
||
var riskClass = { low: 'low', moderate: 'moderate', high: 'high', critical: 'critical' }[data.riskLevel?.toLowerCase()] || 'unknown';
|
||
var html = '<div class="res-grid"><div class="res-card sent"><div class="res-card-head"><div class="res-card-icon"><i class="fa-solid fa-heart-pulse"></i></div><div class="res-card-title">SENTIMENT</div></div><div style="text-align:center"><span class="val-chip ' + sentClass + '">' + (data.sentiment || 'UNKNOWN') + '</span></div></div>';
|
||
html += '<div class="res-card risk"><div class="res-card-head"><div class="res-card-icon"><i class="fa-solid fa-shield-halved"></i></div><div class="res-card-title">RISK LEVEL</div></div><div style="text-align:center"><span class="val-chip ' + riskClass + '">' + (data.riskLevel || 'UNKNOWN') + '</span></div></div></div>';
|
||
html += '<div class="insight-panel"><div class="insight-head"><i class="fa-solid fa-key"></i> KEY PHRASES DETECTED</div><div class="tags">';
|
||
if (data.keyPhrases && data.keyPhrases.length > 0) { data.keyPhrases.forEach(function(p) { html += '<span class="tag phrase">' + p + '</span>'; }); } else { html += '<span class="no-data">No phrases detected</span>'; }
|
||
html += '</div></div><div class="insight-panel"><div class="insight-head"><i class="fa-solid fa-tags"></i> CATEGORY CLASSIFICATION</div><div class="tags">';
|
||
if (data.insights && data.insights.length > 0) { data.insights.forEach(function(c) { html += '<span class="tag cat">' + c + '</span>'; }); } else { html += '<span class="no-data">No categories identified</span>'; }
|
||
html += '</div></div>'; return html;
|
||
}
|
||
|
||
var ss = document.createElement('style');
|
||
ss.textContent = '.swal-nex{background:rgba(15,23,42,.95)!important;backdrop-filter:blur(20px)!important;border:1px solid rgba(129,140,248,.2)!important;border-radius:1rem!important;color:#e2e8f0!important}.swal-t-nex{color:#818cf8!important;font-weight:700!important;letter-spacing:.05em!important}.swal-btn-nex{background:linear-gradient(135deg,#818cf8,#6366f1)!important;border:none!important;border-radius:.5rem!important;padding:.75rem 1.5rem!important;font-weight:600!important;letter-spacing:.025em!important}';
|
||
document.head.appendChild(ss);
|
||
|
||
// ===== SEARCH FILTERING =====
|
||
function filterCards() {
|
||
var query = document.getElementById('searchInput').value.toLowerCase().trim();
|
||
var cards = document.querySelectorAll('.s-card');
|
||
var clearBtn = document.getElementById('clearSearch');
|
||
var countEl = document.getElementById('searchCount');
|
||
var visible = 0;
|
||
|
||
clearBtn.style.display = query.length > 0 ? 'flex' : 'none';
|
||
clearBtn.style.alignItems = 'center';
|
||
clearBtn.style.justifyContent = 'center';
|
||
|
||
cards.forEach(function(card) {
|
||
var name = card.getAttribute('data-username') || '';
|
||
var email = card.getAttribute('data-email') || '';
|
||
var title = card.getAttribute('data-title') || '';
|
||
var match = !query || name.indexOf(query) > -1 || email.indexOf(query) > -1 || title.indexOf(query) > -1;
|
||
|
||
card.style.display = match ? '' : 'none';
|
||
if (match) visible++;
|
||
});
|
||
|
||
if (query.length > 0) {
|
||
countEl.style.display = 'block';
|
||
countEl.textContent = visible + ' OF ' + cards.length + ' RESPONSES FOUND';
|
||
} else {
|
||
countEl.style.display = 'none';
|
||
}
|
||
|
||
// Show/hide empty state
|
||
var emptyState = document.querySelector('.empty-state');
|
||
if (emptyState && cards.length > 0) {
|
||
// Don't touch the empty state if there are cards
|
||
}
|
||
}
|
||
|
||
document.getElementById('searchInput').addEventListener('input', filterCards);
|
||
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
var obs = new IntersectionObserver(function(entries) { entries.forEach(function(e) { if (e.isIntersecting) e.target.classList.add('in'); }); }, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' });
|
||
document.querySelectorAll('.s-card').forEach(function(c) { obs.observe(c); });
|
||
document.querySelectorAll('.m-nex').forEach(function(m) { m.addEventListener('click', function(e) { e.stopPropagation(); }); });
|
||
});
|
||
</script>
|
||
}
|