diff --git a/HeadySystems_v13/apps/heady_admin_ui/index.html b/HeadySystems_v13/apps/heady_admin_ui/index.html index 0087274d..4c5f3344 100644 --- a/HeadySystems_v13/apps/heady_admin_ui/index.html +++ b/HeadySystems_v13/apps/heady_admin_ui/index.html @@ -242,8 +242,8 @@

HeadyBio

2.1TB - - Coming Soon + + View Dashboard → @@ -265,8 +265,31 @@

HeadyEd

456 - - Coming Soon + + View Dashboard → + + + + +
+
+
🛡️
+
Active
+
+

HeadyGuard

+

Security monitoring & protection

+
+
+ Threats + 2 +
+
+ Blocked + 47 +
+
+ + View Dashboard →
diff --git a/HeadySystems_v13/apps/heady_admin_ui/js/main.js b/HeadySystems_v13/apps/heady_admin_ui/js/main.js index b3e55276..686886c5 100644 --- a/HeadySystems_v13/apps/heady_admin_ui/js/main.js +++ b/HeadySystems_v13/apps/heady_admin_ui/js/main.js @@ -293,6 +293,511 @@ function playWelcomeAnimation() { }); } +// Toast Notification System +function showToast(message, type = 'info') { + const toast = document.createElement('div'); + toast.className = `toast toast-${type} fade-in`; + + const iconMap = { + success: '✓', + error: '✗', + warning: '⚠', + info: 'ℹ' + }; + + toast.innerHTML = ` +
${iconMap[type]}
+
${message}
+ `; + + Object.assign(toast.style, { + position: 'fixed', + top: '20px', + right: '20px', + background: type === 'success' ? 'var(--gradient-emerald)' : + type === 'error' ? 'var(--color-error)' : + type === 'warning' ? 'var(--gradient-golden)' : + 'var(--gradient-blue)', + color: 'white', + padding: '1rem 1.5rem', + borderRadius: 'var(--radius-lg)', + display: 'flex', + alignItems: 'center', + gap: '0.75rem', + boxShadow: '0 10px 30px rgba(0, 0, 0, 0.3)', + zIndex: '9999', + minWidth: '250px', + maxWidth: '400px', + fontWeight: '600' + }); + + document.body.appendChild(toast); + + setTimeout(() => { + toast.style.opacity = '0'; + toast.style.transform = 'translateX(100%)'; + setTimeout(() => toast.remove(), 300); + }, 4000); +} + +// Loading State / Skeleton Screen +function showLoadingState(container) { + const skeleton = document.createElement('div'); + skeleton.className = 'skeleton-loader'; + skeleton.innerHTML = ` +
+
+
+
+
+
+ `; + + Object.assign(skeleton.style, { + padding: '1rem' + }); + + const skeletonCard = skeleton.querySelector('.skeleton-card'); + Object.assign(skeletonCard.style, { + background: 'var(--bg-card)', + borderRadius: 'var(--radius-lg)', + padding: '1.5rem' + }); + + const skeletonElements = skeleton.querySelectorAll('.skeleton-header, .skeleton-text'); + skeletonElements.forEach(el => { + Object.assign(el.style, { + height: el.classList.contains('skeleton-header') ? '2rem' : '1rem', + background: 'rgba(255, 255, 255, 0.1)', + borderRadius: 'var(--radius-sm)', + marginBottom: '0.75rem' + }); + }); + + if (container) { + container.innerHTML = ''; + container.appendChild(skeleton); + } + + return skeleton; +} + +function hideLoadingState(skeleton) { + if (skeleton && skeleton.parentElement) { + skeleton.style.opacity = '0'; + setTimeout(() => skeleton.remove(), 300); + } +} + +// Keyboard Shortcut Help Modal +function showKeyboardShortcuts() { + const modal = document.createElement('div'); + modal.className = 'keyboard-shortcuts-modal fade-in-scale'; + modal.innerHTML = ` +
+
+
+

⌨️ Keyboard Shortcuts

+ +
+
+
+

Navigation

+
+ Alt + D + Dashboard +
+
+ Alt + V + Verticals +
+
+ Alt + G + Governance +
+
+
+

Actions

+
+ Ctrl/Cmd + K + Command Palette +
+
+ Alt + T + Toggle Theme +
+
+ ? + Show Shortcuts +
+
+ Esc + Close Modal +
+
+
+
+ `; + + // Style the modal + Object.assign(modal.style, { + position: 'fixed', + top: '0', + left: '0', + right: '0', + bottom: '0', + zIndex: '10000', + display: 'flex', + alignItems: 'center', + justifyContent: 'center' + }); + + const overlay = modal.querySelector('.modal-overlay'); + Object.assign(overlay.style, { + position: 'absolute', + top: '0', + left: '0', + right: '0', + bottom: '0', + background: 'rgba(0, 0, 0, 0.7)', + backdropFilter: 'blur(10px)' + }); + + overlay.addEventListener('click', () => modal.remove()); + + const content = modal.querySelector('.modal-content'); + Object.assign(content.style, { + position: 'relative', + maxWidth: '600px', + width: '90%', + maxHeight: '80vh', + overflow: 'auto', + padding: '2rem', + borderRadius: 'var(--radius-xl)' + }); + + const header = modal.querySelector('.modal-header'); + Object.assign(header.style, { + display: 'flex', + justifyContent: 'space-between', + alignItems: 'center', + marginBottom: '1.5rem' + }); + + const closeBtn = modal.querySelector('.modal-close'); + Object.assign(closeBtn.style, { + background: 'none', + border: 'none', + fontSize: '1.5rem', + cursor: 'pointer', + color: 'var(--text-primary)', + padding: '0.5rem' + }); + + const groups = modal.querySelectorAll('.shortcut-group'); + groups.forEach(group => { + Object.assign(group.style, { + marginBottom: '2rem' + }); + + const h3 = group.querySelector('h3'); + Object.assign(h3.style, { + marginBottom: '1rem', + color: 'var(--text-secondary)', + fontSize: '0.875rem', + textTransform: 'uppercase', + letterSpacing: '0.05em' + }); + }); + + const items = modal.querySelectorAll('.shortcut-item'); + items.forEach(item => { + Object.assign(item.style, { + display: 'flex', + justifyContent: 'space-between', + alignItems: 'center', + padding: '0.75rem', + marginBottom: '0.5rem', + background: 'rgba(255, 255, 255, 0.05)', + borderRadius: 'var(--radius-md)' + }); + + const kbds = item.querySelectorAll('kbd'); + kbds.forEach(kbd => { + Object.assign(kbd.style, { + background: 'var(--gradient-purple)', + color: 'white', + padding: '0.25rem 0.5rem', + borderRadius: 'var(--radius-sm)', + fontSize: '0.875rem', + fontWeight: '600', + marginRight: '0.25rem', + display: 'inline-block' + }); + }); + }); + + document.body.appendChild(modal); +} + +// Command Palette +function showCommandPalette() { + const palette = document.createElement('div'); + palette.className = 'command-palette fade-in-scale'; + palette.innerHTML = ` +
+
+
+ 🔍 + +
+
+
+ 📊 + Go to Dashboard + Alt+D +
+
+ 🎯 + Go to Verticals + Alt+V +
+
+ 🔒 + Go to Governance + Alt+G +
+
+ 🌙 + Toggle Theme + Alt+T +
+
+ ⌨️ + View Keyboard Shortcuts + ? +
+
+
+ `; + + // Style the palette + Object.assign(palette.style, { + position: 'fixed', + top: '0', + left: '0', + right: '0', + bottom: '0', + zIndex: '10000', + display: 'flex', + alignItems: 'flex-start', + justifyContent: 'center', + paddingTop: '10vh' + }); + + const overlay = palette.querySelector('.palette-overlay'); + Object.assign(overlay.style, { + position: 'absolute', + top: '0', + left: '0', + right: '0', + bottom: '0', + background: 'rgba(0, 0, 0, 0.7)', + backdropFilter: 'blur(10px)' + }); + + overlay.addEventListener('click', () => palette.remove()); + + const content = palette.querySelector('.palette-content'); + Object.assign(content.style, { + position: 'relative', + width: '600px', + maxWidth: '90%', + borderRadius: 'var(--radius-xl)', + overflow: 'hidden' + }); + + const search = palette.querySelector('.palette-search'); + Object.assign(search.style, { + display: 'flex', + alignItems: 'center', + padding: '1rem', + borderBottom: '1px solid var(--border-color)' + }); + + const searchIcon = palette.querySelector('.search-icon'); + Object.assign(searchIcon.style, { + fontSize: '1.5rem', + marginRight: '0.75rem' + }); + + const input = palette.querySelector('.palette-input'); + Object.assign(input.style, { + flex: '1', + background: 'transparent', + border: 'none', + outline: 'none', + fontSize: '1.125rem', + color: 'var(--text-primary)' + }); + + const results = palette.querySelector('.palette-results'); + Object.assign(results.style, { + padding: '0.5rem', + maxHeight: '400px', + overflow: 'auto' + }); + + const items = palette.querySelectorAll('.palette-item'); + items.forEach((item, index) => { + Object.assign(item.style, { + display: 'flex', + alignItems: 'center', + padding: '0.75rem 1rem', + cursor: 'pointer', + borderRadius: 'var(--radius-md)', + marginBottom: '0.25rem', + transition: 'all 0.2s ease' + }); + + item.addEventListener('mouseenter', () => { + items.forEach(i => i.style.background = ''); + item.style.background = 'var(--gradient-purple)'; + }); + + item.addEventListener('mouseleave', () => { + item.style.background = ''; + }); + + item.addEventListener('click', () => { + const action = item.dataset.action; + handlePaletteAction(action); + palette.remove(); + }); + + const icon = item.querySelector('.item-icon'); + Object.assign(icon.style, { + fontSize: '1.5rem', + marginRight: '1rem' + }); + + const label = item.querySelector('.item-label'); + Object.assign(label.style, { + flex: '1', + fontWeight: '500' + }); + + const shortcut = item.querySelector('.item-shortcut'); + if (shortcut) { + Object.assign(shortcut.style, { + fontSize: '0.875rem', + opacity: '0.7' + }); + + const kbd = shortcut.querySelector('kbd'); + if (kbd) { + Object.assign(kbd.style, { + background: 'rgba(255, 255, 255, 0.1)', + padding: '0.25rem 0.5rem', + borderRadius: 'var(--radius-sm)', + fontSize: '0.75rem' + }); + } + } + }); + + // Keyboard navigation + let selectedIndex = 0; + items[selectedIndex].style.background = 'var(--gradient-purple)'; + + input.addEventListener('keydown', (e) => { + if (e.key === 'ArrowDown') { + e.preventDefault(); + items[selectedIndex].style.background = ''; + selectedIndex = (selectedIndex + 1) % items.length; + items[selectedIndex].style.background = 'var(--gradient-purple)'; + items[selectedIndex].scrollIntoView({ block: 'nearest' }); + } else if (e.key === 'ArrowUp') { + e.preventDefault(); + items[selectedIndex].style.background = ''; + selectedIndex = (selectedIndex - 1 + items.length) % items.length; + items[selectedIndex].style.background = 'var(--gradient-purple)'; + items[selectedIndex].scrollIntoView({ block: 'nearest' }); + } else if (e.key === 'Enter') { + e.preventDefault(); + const action = items[selectedIndex].dataset.action; + handlePaletteAction(action); + palette.remove(); + } else if (e.key === 'Escape') { + palette.remove(); + } + }); + + // Search filtering + input.addEventListener('input', (e) => { + const query = e.target.value.toLowerCase(); + items.forEach((item, index) => { + const label = item.querySelector('.item-label').textContent.toLowerCase(); + if (label.includes(query)) { + item.style.display = 'flex'; + } else { + item.style.display = 'none'; + } + }); + }); + + document.body.appendChild(palette); +} + +function handlePaletteAction(action) { + switch (action) { + case 'dashboard': + document.querySelector('[data-view="dashboard"]')?.click(); + showToast('Navigated to Dashboard', 'success'); + break; + case 'verticals': + document.querySelector('[data-view="verticals"]')?.click(); + showToast('Navigated to Verticals', 'success'); + break; + case 'governance': + document.querySelector('[data-view="governance"]')?.click(); + showToast('Navigated to Governance', 'success'); + break; + case 'theme': + document.querySelector('.theme-toggle')?.click(); + showToast('Theme toggled', 'info'); + break; + case 'shortcuts': + showKeyboardShortcuts(); + break; + } +} + +// Enhanced Keyboard Navigation +function initEnhancedKeyboardNavigation() { + document.addEventListener('keydown', (e) => { + // ? key for shortcuts + if (e.key === '?' && !e.ctrlKey && !e.metaKey && !e.altKey) { + const activeElement = document.activeElement; + if (activeElement.tagName !== 'INPUT' && activeElement.tagName !== 'TEXTAREA') { + e.preventDefault(); + showKeyboardShortcuts(); + } + } + + // Ctrl/Cmd + K for command palette + if ((e.ctrlKey || e.metaKey) && e.key === 'k') { + e.preventDefault(); + showCommandPalette(); + } + + // Escape to close modals + if (e.key === 'Escape') { + document.querySelectorAll('.keyboard-shortcuts-modal, .command-palette').forEach(el => el.remove()); + } + }); +} + // Initialize everything when DOM is ready document.addEventListener('DOMContentLoaded', () => { console.log('🚀 Heady Admin UI Initialized'); @@ -308,16 +813,24 @@ document.addEventListener('DOMContentLoaded', () => { initStatusCards(); initVerticalCards(); initKeyboardNavigation(); + initEnhancedKeyboardNavigation(); // Play welcome animation setTimeout(() => { playWelcomeAnimation(); }, 100); + // Show welcome toast + setTimeout(() => { + showToast('Welcome to Heady Admin Dashboard! Press ? for shortcuts.', 'info'); + }, 1000); + // Log system info console.log('📊 Dashboard loaded successfully'); console.log('⚡ Real-time updates active'); console.log('🎨 Animations enabled'); + console.log('⌨️ Keyboard shortcuts: Press ? for help'); + console.log('🔍 Command palette: Ctrl/Cmd + K'); }); // Handle visibility change diff --git a/HeadySystems_v13/apps/heady_bio/dashboard.html b/HeadySystems_v13/apps/heady_bio/dashboard.html new file mode 100644 index 00000000..e7a9b595 --- /dev/null +++ b/HeadySystems_v13/apps/heady_bio/dashboard.html @@ -0,0 +1,384 @@ + + + + + + HeadyBio - Biometric Research Dashboard + + + + + + + +
+ + +
+ +
+

+ 🧬 + Research Status +

+
+
+
✓
+
+

Active Studies

+

34

+
+
+
+
+
+ +
+
📊
+
+

Data Collected

+

2.1 TB

+
+
+ +
+
🔬
+
+

Samples Analyzed

+

8,456

+
+
+ +
+
📈
+
+

Success Rate

+

94.2%

+
+
+
+
+ + +
+

+ 🧬 + DNA Helix Visualization +

+
+
+

Genetic Sequencing Progress

+ +
+

Real-time genetic sequence analysis

+
+
+
+
+ + +
+

+ 📋 + Active Research Studies +

+
+
+
+

Genomic Sequencing

+ +
+

+ Comprehensive genome analysis for pattern identification +

+
+
+ Progress + 78% +
+
+
+
+
+
+
+ Samples +

1,234

+
+
+ Completion +

4 days

+
+
+
+ +
+
+

Protein Analysis

+ +
+

+ Structural protein mapping and interaction studies +

+
+
+ Progress + 92% +
+
+
+
+
+
+
+ Samples +

2,456

+
+
+ Completion +

2 days

+
+
+
+ +
+
+

Metabolic Pathways

+ +
+

+ Metabolic pathway mapping and efficiency analysis +

+
+
+ Progress + 45% +
+
+
+
+
+
+
+ Samples +

856

+
+
+ Completion +

8 days

+
+
+
+
+
+ + +
+

+ 📊 + Biological Metrics Dashboard +

+
+
+
🧬
+

Gene Variants

+ 12,456 +

↑ 234 this week

+
+ +
+
🔬
+

Lab Tests

+ 3,892 +

98.5% accuracy

+
+ +
+
💉
+

Biomarkers

+ 456 +

24 new identified

+
+ +
+
📈
+

Analysis Rate

+ 94.2% +

Excellent performance

+
+
+
+
+
+ + + + + diff --git a/HeadySystems_v13/apps/heady_ed/dashboard.html b/HeadySystems_v13/apps/heady_ed/dashboard.html new file mode 100644 index 00000000..6858d4d1 --- /dev/null +++ b/HeadySystems_v13/apps/heady_ed/dashboard.html @@ -0,0 +1,496 @@ + + + + + + HeadyEd - Educational Platform Dashboard + + + + + + + +
+ + +
+ +
+

+ 📚 + Education Platform Status +

+
+
+
✓
+
+

Active Courses

+

18

+
+
+
+
+
+ +
+
👨‍🎓
+
+

Total Students

+

456

+
+
+ +
+
📈
+
+

Completion Rate

+

87.3%

+
+
+ +
+
⭐
+
+

Avg. Rating

+

4.8/5.0

+
+
+
+
+ + +
+

+ 🎯 + Learning Path Visualization +

+
+
+

Full-Stack Development Journey

+ +
+ Beginner + 60% Complete + Advanced +
+
+
+
+ + +
+

+ 📖 + Active Courses +

+
+
+
+
+

Full-Stack Web Development

+ + Advanced + +
+

+ Master modern web development with React, Node.js, and databases +

+
+ +
+
+ Course Progress + 65% +
+
+
+
+
+ +
+
+ Enrolled +

142 students

+
+
+ Duration +

12 weeks

+
+
+ Rating +

⭐ 4.9

+
+
+ +
+
A
+
B
+
C
+ + +139 more + +
+
+ +
+
+
+

Data Science Fundamentals

+ + Intermediate + +
+

+ Learn Python, data analysis, visualization, and machine learning basics +

+
+ +
+
+ Course Progress + 82% +
+
+
+
+
+ +
+
+ Enrolled +

89 students

+
+
+ Duration +

10 weeks

+
+
+ Rating +

⭐ 4.7

+
+
+ +
+
D
+
E
+
F
+ + +86 more + +
+
+ +
+
+
+

UI/UX Design Mastery

+ + Beginner + +
+

+ Create beautiful, user-friendly interfaces with Figma and design principles +

+
+ +
+
+ Course Progress + 34% +
+
+
+
+
+ +
+
+ Enrolled +

225 students

+
+
+ Duration +

8 weeks

+
+
+ Rating +

⭐ 4.8

+
+
+ +
+
G
+
H
+
I
+ + +222 more + +
+
+
+
+ + +
+

+ 📊 + Student Engagement Metrics +

+
+
+
📅
+

Daily Active Users

+ + 328 + + +

↑ 12% from last week

+
+ +
+
⏱️
+

Avg. Study Time

+ + 2.4h + + +

Per student daily

+
+ +
+
🎯
+

Quiz Accuracy

+ + 89.2% + + +

Excellent performance

+
+ +
+
💬
+

Forum Activity

+ + 1,234 + + +

Posts this week

+
+
+
+
+
+ + + + + diff --git a/HeadySystems_v13/apps/heady_guard/dashboard.html b/HeadySystems_v13/apps/heady_guard/dashboard.html new file mode 100644 index 00000000..58b03495 --- /dev/null +++ b/HeadySystems_v13/apps/heady_guard/dashboard.html @@ -0,0 +1,489 @@ + + + + + + HeadyGuard - Security Monitoring Dashboard + + + + + + + +
+ + +
+ +
+

+ 🛡️ + Security Status +

+
+
+
✓
+
+

System Security

+

Protected

+
+
+
+
+
+ +
+
⚠️
+
+

Active Threats

+

2

+
+
+ +
+
🔍
+
+

Scans Today

+

1,234

+
+
+ +
+
🔐
+
+

Blocked Attacks

+

47

+
+
+
+
+ + +
+

+ 🛡️ + Real-time Protection Status +

+
+
+

Active Security Shield

+ +
+

All systems protected • Last scan: 2 minutes ago

+
+
+
+
+ + +
+

+ ⚠️ + Threat Detection Dashboard +

+
+
+
+

Malware Detection

+ Low +
+
+
+
+
+ 15% + ✓ Protected +
+
+ +
+
+

Network Intrusion

+ Medium +
+
+
+
+
+ 45% + ⚠️ Monitoring +
+
+ +
+
+

DDoS Protection

+ Low +
+
+
+
+
+ 20% + ✓ Protected +
+
+ +
+
+

Data Breach

+ Low +
+
+
+
+
+ 5% + ✓ Secured +
+
+
+
+ + +
+

+ 📋 + Security Event Timeline +

+
+
+
+
+ Firewall Update Completed + 2 min ago +
+

+ Firewall rules updated successfully. 15 new threat signatures added. +

+
+ +
+
+ Suspicious Activity Detected + 8 min ago +
+

+ Multiple failed login attempts from IP 192.168.1.45. User account locked. +

+
+ +
+
+ Security Scan Completed + 15 min ago +
+

+ Full system security scan completed. No threats detected. +

+
+ +
+
+ Intrusion Attempt Blocked + 28 min ago +
+

+ Port scanning attempt blocked. Source: 203.0.113.42 +

+
+ +
+
+ DDoS Attack Mitigated + 1 hour ago +
+

+ Large-scale DDoS attack detected and successfully mitigated. 12K requests/sec blocked. +

+
+ +
+
+ Certificate Renewal + 2 hours ago +
+

+ SSL/TLS certificates renewed automatically. Valid for 90 days. +

+
+
+
+
+ + +
+

+ 📊 + Security Metrics +

+
+
+
🔒
+

Encrypted Sessions

+ + 100% + +

All traffic encrypted

+
+ +
+
🔍
+

Scans/Hour

+ + 2,456 + +

Real-time monitoring

+
+ +
+
🛡️
+

Uptime

+ + 99.9% + +

Last 30 days

+
+ +
+
⚡
+

Response Time

+ + 12ms + +

Average latency

+
+
+
+
+
+ + + + +