|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>SkyGrowth | AI-Powered Performance & Growth Platform</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<script> |
|
|
tailwind.config = { |
|
|
theme: { |
|
|
extend: { |
|
|
colors: { |
|
|
primary: { |
|
|
50: '#f0f9ff', |
|
|
100: '#e0f2fe', |
|
|
200: '#bae6fd', |
|
|
300: '#7dd3fc', |
|
|
400: '#38bdf8', |
|
|
500: '#0ea5e9', |
|
|
600: '#0284c7', |
|
|
700: '#0369a1', |
|
|
800: '#075985', |
|
|
900: '#0c4a6e', |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
</script> |
|
|
<style> |
|
|
.gradient-bg { |
|
|
background: linear-gradient(135deg, #0ea5e9 0%, #7dd3fc 100%); |
|
|
} |
|
|
.sidebar { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.chart-container { |
|
|
position: relative; |
|
|
height: 300px; |
|
|
width: 100%; |
|
|
} |
|
|
.strength-card:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
|
|
} |
|
|
.pulse-animation { |
|
|
animation: pulse 2s infinite; |
|
|
} |
|
|
@keyframes pulse { |
|
|
0% { |
|
|
box-shadow: 0 0 0 0 rgba(14, 165, 233, 0.7); |
|
|
} |
|
|
70% { |
|
|
box-shadow: 0 0 0 10px rgba(14, 165, 233, 0); |
|
|
} |
|
|
100% { |
|
|
box-shadow: 0 0 0 0 rgba(14, 165, 233, 0); |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50 font-sans"> |
|
|
<div class="flex h-screen overflow-hidden"> |
|
|
|
|
|
<div class="sidebar bg-white w-64 border-r border-gray-200 flex flex-col"> |
|
|
<div class="p-4 border-b border-gray-200"> |
|
|
<div class="flex items-center space-x-3"> |
|
|
<div class="w-10 h-10 rounded-full gradient-bg flex items-center justify-center text-white font-bold text-xl">SG</div> |
|
|
<h1 class="text-xl font-bold text-gray-800">SkyGrowth</h1> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex-1 overflow-y-auto p-4"> |
|
|
<nav> |
|
|
<div class="space-y-1"> |
|
|
<a href="#" class="flex items-center space-x-3 px-3 py-2 bg-primary-100 text-primary-700 rounded-lg font-medium"> |
|
|
<i class="fas fa-tachometer-alt w-5 text-center"></i> |
|
|
<span>Dashboard</span> |
|
|
</a> |
|
|
<a href="#" class="flex items-center space-x-3 px-3 py-2 text-gray-600 hover:bg-gray-100 rounded-lg font-medium"> |
|
|
<i class="fas fa-chart-line w-5 text-center"></i> |
|
|
<span>Performance</span> |
|
|
</a> |
|
|
<a href="#" class="flex items-center space-x-3 px-3 py-2 text-gray-600 hover:bg-gray-100 rounded-lg font-medium"> |
|
|
<i class="fas fa-users w-5 text-center"></i> |
|
|
<span>Team Culture</span> |
|
|
</a> |
|
|
<a href="#" class="flex items-center space-x-3 px-3 py-2 text-gray-600 hover:bg-gray-100 rounded-lg font-medium"> |
|
|
<i class="fas fa-brain w-5 text-center"></i> |
|
|
<span>Strengths</span> |
|
|
</a> |
|
|
<a href="#" class="flex items-center space-x-3 px-3 py-2 text-gray-600 hover:bg-gray-100 rounded-lg font-medium"> |
|
|
<i class="fas fa-graduation-cap w-5 text-center"></i> |
|
|
<span>Growth Path</span> |
|
|
</a> |
|
|
<a href="#" class="flex items-center space-x-3 px-3 py-2 text-gray-600 hover:bg-gray-100 rounded-lg font-medium"> |
|
|
<i class="fas fa-comments w-5 text-center"></i> |
|
|
<span>AI Coach</span> |
|
|
</a> |
|
|
<a href="#" class="flex items-center space-x-3 px-3 py-2 text-gray-600 hover:bg-gray-100 rounded-lg font-medium"> |
|
|
<i class="fas fa-cog w-5 text-center"></i> |
|
|
<span>Settings</span> |
|
|
</a> |
|
|
</div> |
|
|
|
|
|
<div class="mt-8"> |
|
|
<h3 class="text-xs font-semibold text-gray-500 uppercase tracking-wider">Teams</h3> |
|
|
<div class="mt-2 space-y-1"> |
|
|
<a href="#" class="flex items-center space-x-3 px-3 py-2 text-gray-600 hover:bg-gray-100 rounded-lg font-medium"> |
|
|
<div class="w-2 h-2 rounded-full bg-green-500"></div> |
|
|
<span>Product Team</span> |
|
|
</a> |
|
|
<a href="#" class="flex items-center space-x-3 px-3 py-2 text-gray-600 hover:bg-gray-100 rounded-lg font-medium"> |
|
|
<div class="w-2 h-2 rounded-full bg-blue-500"></div> |
|
|
<span>Engineering</span> |
|
|
</a> |
|
|
<a href="#" class="flex items-center space-x-3 px-3 py-2 text-gray-600 hover:bg-gray-100 rounded-lg font-medium"> |
|
|
<div class="w-2 h-2 rounded-full bg-purple-500"></div> |
|
|
<span>Marketing</span> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
</div> |
|
|
<div class="p-4 border-t border-gray-200"> |
|
|
<div class="flex items-center space-x-3"> |
|
|
<div class="w-10 h-10 rounded-full bg-primary-500 flex items-center justify-center text-white font-bold">JD</div> |
|
|
<div> |
|
|
<p class="font-medium text-gray-800">John Doe</p> |
|
|
<p class="text-xs text-gray-500">Admin</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex-1 overflow-auto"> |
|
|
|
|
|
<header class="bg-white border-b border-gray-200"> |
|
|
<div class="flex items-center justify-between px-6 py-4"> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<button class="text-gray-500 focus:outline-none lg:hidden"> |
|
|
<i class="fas fa-bars"></i> |
|
|
</button> |
|
|
<h1 class="text-xl font-bold text-gray-800">Performance Dashboard</h1> |
|
|
</div> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<div class="relative"> |
|
|
<button class="text-gray-500 focus:outline-none"> |
|
|
<i class="fas fa-bell"></i> |
|
|
</button> |
|
|
<span class="absolute top-0 right-0 w-2 h-2 rounded-full bg-red-500"></span> |
|
|
</div> |
|
|
<div class="relative"> |
|
|
<button class="text-gray-500 focus:outline-none"> |
|
|
<i class="fas fa-envelope"></i> |
|
|
</button> |
|
|
<span class="absolute top-0 right-0 w-2 h-2 rounded-full bg-blue-500"></span> |
|
|
</div> |
|
|
<div class="relative"> |
|
|
<button id="ai-coach-btn" class="bg-primary-500 text-white px-4 py-2 rounded-full flex items-center space-x-2 hover:bg-primary-600 transition"> |
|
|
<i class="fas fa-robot"></i> |
|
|
<span>AI Coach</span> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<main class="p-6"> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6"> |
|
|
<div class="bg-white rounded-xl shadow-sm p-6"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div> |
|
|
<p class="text-sm font-medium text-gray-500">Performance Score</p> |
|
|
<p class="text-2xl font-bold text-gray-800 mt-1">87<span class="text-sm text-green-500 ml-1">+5%</span></p> |
|
|
</div> |
|
|
<div class="w-12 h-12 rounded-full bg-primary-50 flex items-center justify-center text-primary-500"> |
|
|
<i class="fas fa-chart-line text-xl"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-white rounded-xl shadow-sm p-6"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div> |
|
|
<p class="text-sm font-medium text-gray-500">Strengths Identified</p> |
|
|
<p class="text-2xl font-bold text-gray-800 mt-1">5<span class="text-sm text-green-500 ml-1">+2</span></p> |
|
|
</div> |
|
|
<div class="w-12 h-12 rounded-full bg-green-50 flex items-center justify-center text-green-500"> |
|
|
<i class="fas fa-brain text-xl"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-white rounded-xl shadow-sm p-6"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div> |
|
|
<p class="text-sm font-medium text-gray-500">Growth Areas</p> |
|
|
<p class="text-2xl font-bold text-gray-800 mt-1">3<span class="text-sm text-yellow-500 ml-1">-1</span></p> |
|
|
</div> |
|
|
<div class="w-12 h-12 rounded-full bg-yellow-50 flex items-center justify-center text-yellow-500"> |
|
|
<i class="fas fa-seedling text-xl"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-white rounded-xl shadow-sm p-6"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div> |
|
|
<p class="text-sm font-medium text-gray-500">Team Culture Index</p> |
|
|
<p class="text-2xl font-bold text-gray-800 mt-1">92<span class="text-sm text-green-500 ml-1">+8%</span></p> |
|
|
</div> |
|
|
<div class="w-12 h-12 rounded-full bg-purple-50 flex items-center justify-center text-purple-500"> |
|
|
<i class="fas fa-users text-xl"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-xl shadow-sm p-6 mb-6"> |
|
|
<div class="flex items-center justify-between mb-6"> |
|
|
<h2 class="text-lg font-bold text-gray-800">Performance Trends</h2> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="px-3 py-1 text-sm bg-primary-50 text-primary-600 rounded-md">Monthly</button> |
|
|
<button class="px-3 py-1 text-sm text-gray-600 hover:bg-gray-100 rounded-md">Quarterly</button> |
|
|
<button class="px-3 py-1 text-sm text-gray-600 hover:bg-gray-100 rounded-md">Yearly</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="chart-container"> |
|
|
<canvas id="performanceChart"></canvas> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6"> |
|
|
|
|
|
<div class="bg-white rounded-xl shadow-sm p-6"> |
|
|
<div class="flex items-center justify-between mb-6"> |
|
|
<h2 class="text-lg font-bold text-gray-800">Your Top Strengths</h2> |
|
|
<button class="text-primary-500 hover:text-primary-600"> |
|
|
<i class="fas fa-plus"></i> Add Strength |
|
|
</button> |
|
|
</div> |
|
|
<div class="space-y-4"> |
|
|
<div class="strength-card bg-green-50 border border-green-100 rounded-lg p-4 transition cursor-pointer"> |
|
|
<div class="flex items-start justify-between"> |
|
|
<div> |
|
|
<h3 class="font-bold text-green-800">Strategic Thinking</h3> |
|
|
<p class="text-sm text-green-600 mt-1">You excel at seeing the big picture and planning long-term strategies.</p> |
|
|
</div> |
|
|
<div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center text-green-600"> |
|
|
<i class="fas fa-chess"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-3 flex items-center text-xs text-green-600"> |
|
|
<span class="mr-2">Identified: 3 months ago</span> |
|
|
<span>Confidence: 92%</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="strength-card bg-blue-50 border border-blue-100 rounded-lg p-4 transition cursor-pointer"> |
|
|
<div class="flex items-start justify-between"> |
|
|
<div> |
|
|
<h3 class="font-bold text-blue-800">Emotional Intelligence</h3> |
|
|
<p class="text-sm text-blue-600 mt-1">You're highly aware of emotions in yourself and others.</p> |
|
|
</div> |
|
|
<div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center text-blue-600"> |
|
|
<i class="fas fa-heart"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-3 flex items-center text-xs text-blue-600"> |
|
|
<span class="mr-2">Identified: 1 month ago</span> |
|
|
<span>Confidence: 88%</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="strength-card bg-purple-50 border border-purple-100 rounded-lg p-4 transition cursor-pointer"> |
|
|
<div class="flex items-start justify-between"> |
|
|
<div> |
|
|
<h3 class="font-bold text-purple-800">Adaptability</h3> |
|
|
<p class="text-sm text-purple-600 mt-1">You thrive in changing environments and adjust quickly.</p> |
|
|
</div> |
|
|
<div class="w-8 h-8 rounded-full bg-purple-100 flex items-center justify-center text-purple-600"> |
|
|
<i class="fas fa-random"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-3 flex items-center text-xs text-purple-600"> |
|
|
<span class="mr-2">Identified: 2 weeks ago</span> |
|
|
<span>Confidence: 85%</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-xl shadow-sm p-6"> |
|
|
<div class="flex items-center justify-between mb-6"> |
|
|
<h2 class="text-lg font-bold text-gray-800">Growth Opportunities</h2> |
|
|
<button class="text-primary-500 hover:text-primary-600"> |
|
|
<i class="fas fa-plus"></i> Add Goal |
|
|
</button> |
|
|
</div> |
|
|
<div class="space-y-4"> |
|
|
<div class="bg-yellow-50 border border-yellow-100 rounded-lg p-4"> |
|
|
<div class="flex items-start justify-between"> |
|
|
<div> |
|
|
<h3 class="font-bold text-yellow-800">Public Speaking</h3> |
|
|
<p class="text-sm text-yellow-600 mt-1">Improve confidence and clarity when presenting to groups.</p> |
|
|
</div> |
|
|
<div class="w-8 h-8 rounded-full bg-yellow-100 flex items-center justify-center text-yellow-600"> |
|
|
<i class="fas fa-bullhorn"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-3"> |
|
|
<div class="flex items-center justify-between text-xs text-yellow-600 mb-1"> |
|
|
<span>Progress</span> |
|
|
<span>45%</span> |
|
|
</div> |
|
|
<div class="w-full bg-yellow-100 rounded-full h-2"> |
|
|
<div class="bg-yellow-500 h-2 rounded-full" style="width: 45%"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-orange-50 border border-orange-100 rounded-lg p-4"> |
|
|
<div class="flex items-start justify-between"> |
|
|
<div> |
|
|
<h3 class="font-bold text-orange-800">Technical Skills</h3> |
|
|
<p class="text-sm text-orange-600 mt-1">Develop advanced data analysis capabilities.</p> |
|
|
</div> |
|
|
<div class="w-8 h-8 rounded-full bg-orange-100 flex items-center justify-center text-orange-600"> |
|
|
<i class="fas fa-code"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-3"> |
|
|
<div class="flex items-center justify-between text-xs text-orange-600 mb-1"> |
|
|
<span>Progress</span> |
|
|
<span>30%</span> |
|
|
</div> |
|
|
<div class="w-full bg-orange-100 rounded-full h-2"> |
|
|
<div class="bg-orange-500 h-2 rounded-full" style="width: 30%"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-red-50 border border-red-100 rounded-lg p-4"> |
|
|
<div class="flex items-start justify-between"> |
|
|
<div> |
|
|
<h3 class="font-bold text-red-800">Time Management</h3> |
|
|
<p class="text-sm text-red-600 mt-1">Better prioritize tasks and minimize distractions.</p> |
|
|
</div> |
|
|
<div class="w-8 h-8 rounded-full bg-red-100 flex items-center justify-center text-red-600"> |
|
|
<i class="fas fa-clock"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-3"> |
|
|
<div class="flex items-center justify-between text-xs text-red-600 mb-1"> |
|
|
<span>Progress</span> |
|
|
<span>60%</span> |
|
|
</div> |
|
|
<div class="w-full bg-red-100 rounded-full h-2"> |
|
|
<div class="bg-red-500 h-2 rounded-full" style="width: 60%"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-xl shadow-sm p-6 mb-6"> |
|
|
<div class="flex items-center justify-between mb-6"> |
|
|
<h2 class="text-lg font-bold text-gray-800">Team Culture Insights</h2> |
|
|
<button class="text-primary-500 hover:text-primary-600"> |
|
|
<i class="fas fa-plus"></i> Request Feedback |
|
|
</button> |
|
|
</div> |
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6"> |
|
|
<div class="bg-indigo-50 rounded-lg p-4"> |
|
|
<div class="flex items-center space-x-3 mb-3"> |
|
|
<div class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center text-indigo-600"> |
|
|
<i class="fas fa-hands-helping"></i> |
|
|
</div> |
|
|
<h3 class="font-bold text-indigo-800">Collaboration</h3> |
|
|
</div> |
|
|
<p class="text-sm text-indigo-600">Your team rates collaboration at 89/100, higher than 75% of similar teams.</p> |
|
|
<div class="mt-4"> |
|
|
<div class="flex items-center justify-between text-xs text-indigo-600 mb-1"> |
|
|
<span>Team Average</span> |
|
|
<span>89/100</span> |
|
|
</div> |
|
|
<div class="w-full bg-indigo-100 rounded-full h-2"> |
|
|
<div class="bg-indigo-500 h-2 rounded-full" style="width: 89%"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-pink-50 rounded-lg p-4"> |
|
|
<div class="flex items-center space-x-3 mb-3"> |
|
|
<div class="w-10 h-10 rounded-full bg-pink-100 flex items-center justify-center text-pink-600"> |
|
|
<i class="fas fa-lightbulb"></i> |
|
|
</div> |
|
|
<h3 class="font-bold text-pink-800">Innovation</h3> |
|
|
</div> |
|
|
<p class="text-sm text-pink-600">Innovation scores have increased by 12% this quarter to 78/100.</p> |
|
|
<div class="mt-4"> |
|
|
<div class="flex items-center justify-between text-xs text-pink-600 mb-1"> |
|
|
<span>Team Average</span> |
|
|
<span>78/100</span> |
|
|
</div> |
|
|
<div class="w-full bg-pink-100 rounded-full h-2"> |
|
|
<div class="bg-pink-500 h-2 rounded-full" style="width: 78%"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-teal-50 rounded-lg p-4"> |
|
|
<div class="flex items-center space-x-3 mb-3"> |
|
|
<div class="w-10 h-10 rounded-full bg-teal-100 flex items-center justify-center text-teal-600"> |
|
|
<i class="fas fa-heartbeat"></i> |
|
|
</div> |
|
|
<h3 class="font-bold text-teal-800">Wellbeing</h3> |
|
|
</div> |
|
|
<p class="text-sm text-teal-600">Wellbeing scores are stable at 82/100, with work-life balance as a strength.</p> |
|
|
<div class="mt-4"> |
|
|
<div class="flex items-center justify-between text-xs text-teal-600 mb-1"> |
|
|
<span>Team Average</span> |
|
|
<span>82/100</span> |
|
|
</div> |
|
|
<div class="w-full bg-teal-100 rounded-full h-2"> |
|
|
<div class="bg-teal-500 h-2 rounded-full" style="width: 82%"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="ai-coach-chat" class="hidden fixed bottom-6 right-6 w-96 bg-white rounded-xl shadow-xl flex flex-col border border-gray-200 z-50"> |
|
|
<div class="bg-primary-500 text-white rounded-t-xl p-4 flex items-center justify-between"> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<div class="w-8 h-8 rounded-full bg-white text-primary-500 flex items-center justify-center"> |
|
|
<i class="fas fa-robot"></i> |
|
|
</div> |
|
|
<h3 class="font-bold">AI Growth Coach</h3> |
|
|
</div> |
|
|
<button id="close-chat" class="text-white hover:text-gray-200"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="flex-1 p-4 overflow-y-auto bg-gray-50" id="chat-messages" style="height: 300px;"> |
|
|
<div class="mb-4"> |
|
|
<div class="flex items-start space-x-2"> |
|
|
<div class="w-8 h-8 rounded-full bg-primary-100 text-primary-600 flex items-center justify-center"> |
|
|
<i class="fas fa-robot"></i> |
|
|
</div> |
|
|
<div class="bg-white p-3 rounded-lg shadow-sm max-w-xs"> |
|
|
<p class="text-sm">Hello! I'm your AI Growth Coach. How can I help you with your performance, strengths, or growth goals today?</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-4 border-t border-gray-200 bg-white rounded-b-xl"> |
|
|
<div class="flex space-x-2"> |
|
|
<input type="text" id="chat-input" placeholder="Ask me anything..." class="flex-1 border border-gray-300 rounded-full px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent"> |
|
|
<button id="send-message" class="w-10 h-10 rounded-full bg-primary-500 text-white flex items-center justify-center hover:bg-primary-600"> |
|
|
<i class="fas fa-paper-plane"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="mt-2 flex space-x-2 overflow-x-auto"> |
|
|
<button class="quick-prompt px-3 py-1 text-xs bg-gray-100 hover:bg-gray-200 rounded-full">Suggest growth goals</button> |
|
|
<button class="quick-prompt px-3 py-1 text-xs bg-gray-100 hover:bg-gray-200 rounded-full">Analyze my strengths</button> |
|
|
<button class="quick-prompt px-3 py-1 text-xs bg-gray-100 hover:bg-gray-200 rounded-full">Team culture tips</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</main> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="api-modal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"> |
|
|
<div class="bg-white rounded-xl p-6 w-full max-w-md"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h3 class="text-lg font-bold">Connect DeepSeek API</h3> |
|
|
<button id="close-api-modal" class="text-gray-500 hover:text-gray-700"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="space-y-4"> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">API Key</label> |
|
|
<input type="password" placeholder="Enter your DeepSeek API key" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500"> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Model</label> |
|
|
<select class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500"> |
|
|
<option>DeepSeek-Pro</option> |
|
|
<option>DeepSeek-Lite</option> |
|
|
<option>DeepSeek-Custom</option> |
|
|
</select> |
|
|
</div> |
|
|
<div class="flex justify-end space-x-3 pt-4"> |
|
|
<button id="cancel-api" class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50">Cancel</button> |
|
|
<button id="save-api" class="px-4 py-2 bg-primary-500 text-white rounded-md hover:bg-primary-600">Connect</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> |
|
|
<script> |
|
|
|
|
|
const ctx = document.getElementById('performanceChart').getContext('2d'); |
|
|
const performanceChart = new Chart(ctx, { |
|
|
type: 'line', |
|
|
data: { |
|
|
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'], |
|
|
datasets: [ |
|
|
{ |
|
|
label: 'Performance Score', |
|
|
data: [75, 78, 82, 80, 85, 87, 89], |
|
|
borderColor: '#0ea5e9', |
|
|
backgroundColor: 'rgba(14, 165, 233, 0.1)', |
|
|
tension: 0.3, |
|
|
fill: true, |
|
|
borderWidth: 2 |
|
|
}, |
|
|
{ |
|
|
label: 'Team Average', |
|
|
data: [70, 72, 75, 77, 79, 82, 84], |
|
|
borderColor: '#94a3b8', |
|
|
backgroundColor: 'rgba(148, 163, 184, 0.05)', |
|
|
tension: 0.3, |
|
|
borderDash: [5, 5], |
|
|
borderWidth: 1 |
|
|
} |
|
|
] |
|
|
}, |
|
|
options: { |
|
|
responsive: true, |
|
|
maintainAspectRatio: false, |
|
|
plugins: { |
|
|
legend: { |
|
|
position: 'top', |
|
|
}, |
|
|
tooltip: { |
|
|
mode: 'index', |
|
|
intersect: false, |
|
|
} |
|
|
}, |
|
|
scales: { |
|
|
y: { |
|
|
beginAtZero: false, |
|
|
min: 60, |
|
|
max: 100 |
|
|
} |
|
|
} |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
const aiCoachBtn = document.getElementById('ai-coach-btn'); |
|
|
const aiCoachChat = document.getElementById('ai-coach-chat'); |
|
|
const closeChat = document.getElementById('close-chat'); |
|
|
const chatMessages = document.getElementById('chat-messages'); |
|
|
const chatInput = document.getElementById('chat-input'); |
|
|
const sendMessageBtn = document.getElementById('send-message'); |
|
|
const quickPrompts = document.querySelectorAll('.quick-prompt'); |
|
|
|
|
|
aiCoachBtn.addEventListener('click', () => { |
|
|
aiCoachChat.classList.toggle('hidden'); |
|
|
}); |
|
|
|
|
|
closeChat.addEventListener('click', () => { |
|
|
aiCoachChat.classList.add('hidden'); |
|
|
}); |
|
|
|
|
|
function addMessage(content, isUser = false) { |
|
|
const messageDiv = document.createElement('div'); |
|
|
messageDiv.classList.add('mb-4'); |
|
|
|
|
|
if (isUser) { |
|
|
messageDiv.classList.add('flex', 'justify-end'); |
|
|
messageDiv.innerHTML = ` |
|
|
<div class="flex items-start space-x-2 flex-row-reverse"> |
|
|
<div class="w-8 h-8 rounded-full bg-primary-500 text-white flex items-center justify-center"> |
|
|
<i class="fas fa-user"></i> |
|
|
</div> |
|
|
<div class="bg-primary-500 text-white p-3 rounded-lg shadow-sm max-w-xs"> |
|
|
<p class="text-sm">${content}</p> |
|
|
</div> |
|
|
</div> |
|
|
`; |
|
|
} else { |
|
|
messageDiv.innerHTML = ` |
|
|
<div class="flex items-start space-x-2"> |
|
|
<div class="w-8 h-8 rounded-full bg-primary-100 text-primary-600 flex items-center justify-center"> |
|
|
<i class="fas fa-robot"></i> |
|
|
</div> |
|
|
<div class="bg-white p-3 rounded-lg shadow-sm max-w-xs"> |
|
|
<p class="text-sm">${content}</p> |
|
|
</div> |
|
|
</div> |
|
|
`; |
|
|
} |
|
|
|
|
|
chatMessages.appendChild(messageDiv); |
|
|
chatMessages.scrollTop = chatMessages.scrollHeight; |
|
|
} |
|
|
|
|
|
sendMessageBtn.addEventListener('click', () => { |
|
|
const message = chatInput.value.trim(); |
|
|
if (message) { |
|
|
addMessage(message, true); |
|
|
chatInput.value = ''; |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
const responses = [ |
|
|
"Based on your performance data, I'd suggest focusing on your public speaking goal first. Would you like me to create a 30-day plan?", |
|
|
"Your strategic thinking strength could be leveraged to improve your time management. Want to explore how?", |
|
|
"I notice your team's collaboration score is excellent. Maybe we could work on transferring some of those skills to your growth areas.", |
|
|
"Looking at your data, you're making great progress! Would you like me to adjust any of your growth goals?" |
|
|
]; |
|
|
const randomResponse = responses[Math.floor(Math.random() * responses.length)]; |
|
|
addMessage(randomResponse); |
|
|
}, 1000); |
|
|
} |
|
|
}); |
|
|
|
|
|
chatInput.addEventListener('keypress', (e) => { |
|
|
if (e.key === 'Enter') { |
|
|
sendMessageBtn.click(); |
|
|
} |
|
|
}); |
|
|
|
|
|
quickPrompts.forEach(prompt => { |
|
|
prompt.addEventListener('click', () => { |
|
|
chatInput.value = prompt.textContent; |
|
|
chatInput.focus(); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
const apiModal = document.getElementById('api-modal'); |
|
|
const closeApiModal = document.getElementById('close-api-modal'); |
|
|
const cancelApi = document.getElementById('cancel-api'); |
|
|
const saveApi = document.getElementById('save-api'); |
|
|
|
|
|
|
|
|
|
|
|
const showApiModal = () => { |
|
|
apiModal.classList.remove('hidden'); |
|
|
}; |
|
|
|
|
|
closeApiModal.addEventListener('click', () => { |
|
|
apiModal.classList.add('hidden'); |
|
|
}); |
|
|
|
|
|
cancelApi.addEventListener('click', () => { |
|
|
apiModal.classList.add('hidden'); |
|
|
}); |
|
|
|
|
|
saveApi.addEventListener('click', () => { |
|
|
|
|
|
alert('DeepSeek API connected successfully!'); |
|
|
apiModal.classList.add('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
setInterval(() => { |
|
|
aiCoachBtn.classList.toggle('pulse-animation'); |
|
|
}, 5000); |
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=JayStormX8/performance-management" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
