diff --git a/HeadySystems_v13/apps/heady_admin_ui/FEATURES.md b/HeadySystems_v13/apps/heady_admin_ui/FEATURES.md new file mode 100644 index 00000000..f1fe8df0 --- /dev/null +++ b/HeadySystems_v13/apps/heady_admin_ui/FEATURES.md @@ -0,0 +1,101 @@ +# Heady Admin UI - Features & Animations + +## Overview +Comprehensive UI components with awesome, colorful, visual, descriptive, and transparent UX. + +## Animation Types Implemented (15+ types) +1. **Floating Particles** - Background animated orbs that drift smoothly +2. **Pulse Effects** - Status indicators with pulsing animations (success, info, warning) +3. **Shimmer Effects** - Gradient shimmer on progress bars and text +4. **Slide-in Animations** - Cards and panels slide in from various directions +5. **Scale Hover Effects** - Cards scale up and glow on hover +6. **Ripple Effects** - Button click ripple animations +7. **Bounce Animations** - Notification badges bounce +8. **Orbit Animations** - Elements orbit around central nodes +9. **Gradient Shift** - Animated gradient backgrounds +10. **Wave Animations** - Flowing wave dividers +11. **Heartbeat Animation** - Biometric heartbeat pulse (HeadyLegacy) +12. **Layer Build Animation** - 3D print layer-by-layer animation (HeadyMake) +13. **Soil Wave Animation** - Agricultural wave visualization (HeadyField) +14. **Heat Map Animation** - Thermal heat indicators (HeadyKinetic) +15. **Scan Line Animation** - Biometric scanner effect (HeadyLegacy) +16. **Sparkle/Twinkle** - Glowing sparkle effects on important metrics +17. **Fade-in Animations** - Smooth entrance animations + +## Visual Design Features +- **Color Scheme**: Vibrant gradients (purple, blue, golden, emerald) +- **Glassmorphism**: Frosted glass effect cards with blur +- **Dark Theme**: Default dark theme with light theme toggle +- **Typography**: Clean, modern font hierarchy +- **Icons**: Emoji-based visual icons for accessibility +- **Responsive**: Mobile-first responsive design +- **Accessibility**: ARIA labels, keyboard navigation, reduced motion support + +## Dashboard Sections +1. **System Status Panel** - Real-time health with animated indicators +2. **Verticals Overview** - 6 vertical cards (Make, Field, Legacy, Kinetic, Bio, Ed) +3. **Governance Status** - Transparent policy and compliance display +4. **Activity Feed** - Animated timeline of recent events +5. **Metrics Dashboard** - Live animated charts (CPU, Memory, Network) +6. **Trust Domain Visualizer** - Interactive network graph with orbiting nodes + +## Vertical-Specific Dashboards +### HeadyMake (3D Printing) +- Live print visualization with layer-by-layer animation +- Print queue table +- Active printer status cards +- Animated progress bars + +### HeadyField (Agricultural IoT) +- Soil moisture wave animation +- 6 live sensor readings (temperature, humidity, pH, light, NPK, wind) +- Field monitoring cards +- Animated sensor values + +### HeadyLegacy (Biometric) +- Heartbeat animation on title +- Biometric scanner with scan line animation +- 4 authentication method metrics (fingerprint, iris, facial, voice) +- Real-time authentication event stream +- Security & compliance indicators + +### HeadyKinetic (Thermal) +- Live thermal heat map with animated indicators +- 3 temperature zone gauges +- 4 real-time sensor cards +- Thermal event timeline + +## Interactivity Features +- Theme toggle (dark/light mode with localStorage) +- Navigation with active states +- Notification panel with auto-dismiss +- Smooth scroll +- Ripple button effects +- Keyboard shortcuts (Alt+D, Alt+V, Alt+G, Alt+T) +- Real-time value updates (simulated) +- Hover effects on all cards + +## Performance Optimizations +- CSS animations over JavaScript where possible +- RequestAnimationFrame for smooth animations +- Canvas-based charts for performance +- Progressive enhancement +- No build step required (pure HTML/CSS/JS) + +## Files Created +- index.html (main dashboard) +- css/styles.css (20KB+ styles) +- css/animations.css (14KB+ animations) +- js/main.js (10KB+ interactivity) +- js/particles.js (particle system) +- js/charts.js (animated charts) +- design-tokens.json (design system) +- components/status-card.html (reusable component) +- components/vertical-tile.html (reusable component) +- components/activity-feed.html (reusable component) +- 4 vertical dashboards (Make, Field, Legacy, Kinetic) + +## Browser Compatibility +- Modern browsers (Chrome, Firefox, Safari, Edge) +- Mobile responsive +- Graceful degradation for older browsers diff --git a/HeadySystems_v13/apps/heady_admin_ui/README.md b/HeadySystems_v13/apps/heady_admin_ui/README.md index 3a77cfb5..38fde5a7 100644 --- a/HeadySystems_v13/apps/heady_admin_ui/README.md +++ b/HeadySystems_v13/apps/heady_admin_ui/README.md @@ -1,2 +1,141 @@ # Heady Admin UI -Unified personal admin dashboard and control panel. + +Unified personal admin dashboard and control panel with comprehensive UI components featuring awesome, colorful, visual, descriptive, and transparent UX. + +## Quick Start + +### View the Dashboard + +1. **Using Python's HTTP Server:** + ```bash + cd HeadySystems_v13/apps/heady_admin_ui + python3 -m http.server 8000 + ``` + Then open http://localhost:8000 in your browser. + +2. **Using any HTTP server:** + Simply serve the `heady_admin_ui` directory and open `index.html`. + +3. **Direct File Access:** + You can also open `index.html` directly in your browser (some features may be limited). + +## Features + +### 🎨 Visual Design +- **Glassmorphism effects** with backdrop blur +- **Vibrant gradient** color scheme (purple, blue, golden, emerald) +- **Dark/light theme** toggle with persistence +- **Emoji-based icons** for universal accessibility +- **Responsive design** - works on all screen sizes + +### ⚑ 17+ Animation Types +1. Floating background particles +2. Pulse effects (success/info/warning) +3. Shimmer effects on progress bars +4. Slide-in animations +5. Scale & hover effects +6. Ripple click animations +7. Bounce animations +8. Orbit animations +9. Gradient shift backgrounds +10. Wave dividers +11. Heartbeat pulse +12. Layer-by-layer build animation +13. Soil wave animation +14. Heat map indicators +15. Scanner line effect +16. Sparkle/twinkle effects +17. Fade-in entrance animations + +### πŸ“Š Dashboard Sections +- **System Status Panel** - Real-time health indicators +- **Heady Verticals** - 6 vertical modules (Make, Field, Legacy, Kinetic, Bio, Ed) +- **Governance & Compliance** - Policy status and audit trail +- **Activity Feed** - Timeline of recent events +- **Performance Metrics** - Live animated charts +- **Trust Domain Visualizer** - Network graph with orbiting nodes + +### 🎯 Vertical Dashboards +- **HeadyMake** (`../heady_make/dashboard.html`) - 3D printing with layer animation +- **HeadyField** (`../heady_field/dashboard.html`) - Agricultural IoT with wave animation +- **HeadyLegacy** (`../heady_legacy/dashboard.html`) - Biometric with scanner animation +- **HeadyKinetic** (`../heady_kinetic/dashboard.html`) - Thermal with heat map visualization + +### πŸš€ Interactive Features +- **Keyboard shortcuts:** + - `Alt+D` - Dashboard view + - `Alt+V` - Verticals view + - `Alt+G` - Governance view + - `Alt+T` - Toggle theme +- **Theme toggle** - Switch between dark and light modes +- **Notification panel** - Click the bell icon (auto-dismisses after 10s) +- **Real-time updates** - Simulated live data +- **Smooth animations** - Performance-optimized CSS animations + +## File Structure + +``` +heady_admin_ui/ +β”œβ”€β”€ index.html # Main dashboard +β”œβ”€β”€ design-tokens.json # Design system tokens +β”œβ”€β”€ css/ +β”‚ β”œβ”€β”€ styles.css # Main stylesheet (20KB) +β”‚ └── animations.css # Animation library (14KB) +β”œβ”€β”€ js/ +β”‚ β”œβ”€β”€ main.js # Interactive features (10KB) +β”‚ β”œβ”€β”€ particles.js # Particle system (3.6KB) +β”‚ └── charts.js # Animated charts (5.4KB) +β”œβ”€β”€ components/ +β”‚ β”œβ”€β”€ status-card.html # Reusable status card +β”‚ β”œβ”€β”€ vertical-tile.html # Reusable vertical tile +β”‚ └── activity-feed.html # Reusable activity feed +β”œβ”€β”€ FEATURES.md # Detailed feature documentation +└── README.md # This file +``` + +## Technical Details + +- **No build step required** - Pure HTML/CSS/JS +- **Modern browser support** - Chrome, Firefox, Safari, Edge +- **Mobile responsive** - Mobile-first design approach +- **Accessibility** - ARIA labels, semantic HTML, keyboard navigation +- **Performance optimized** - CSS animations, requestAnimationFrame +- **Progressive enhancement** - Graceful degradation for older browsers + +## Customization + +### Colors +Edit `design-tokens.json` to change the color scheme. + +### Animations +All animations are in `css/animations.css`. You can modify duration, easing, and effects. + +### Theme +Toggle between dark and light themes using the moon/sun icon in the header, or press `Alt+T`. + +## Browser Compatibility + +- βœ… Chrome/Edge (recommended) +- βœ… Firefox +- βœ… Safari +- ⚠️ Older browsers may have limited animation support + +## Accessibility + +- **ARIA labels** for screen readers +- **Keyboard navigation** for all interactive elements +- **Reduced motion** support for users with motion sensitivity +- **Semantic HTML** for better screen reader support +- **High contrast** mode support + +## Performance + +- CSS animations are used over JavaScript where possible +- Canvas-based charts for smooth performance +- requestAnimationFrame for smooth 60fps animations +- Lazy loading for optimal load times + +## License + +Part of the HeadySystems v13 repository. +Β© 2026 HeadySystems Inc. | Invented by Eric Haywood diff --git a/HeadySystems_v13/apps/heady_admin_ui/components/activity-feed.html b/HeadySystems_v13/apps/heady_admin_ui/components/activity-feed.html new file mode 100644 index 00000000..03fa4444 --- /dev/null +++ b/HeadySystems_v13/apps/heady_admin_ui/components/activity-feed.html @@ -0,0 +1,50 @@ + +
+

Recent Activity

+
+
+
+
+ 2 min ago +

Activity description goes here

+
+
+ +
+
+
+ 5 min ago +

Another activity description

+
+
+ +
+
+
+ 12 min ago +

Warning or alert message

+
+
+ +
+
+
+ 18 min ago +

General system event

+
+
+
+
+ + diff --git a/HeadySystems_v13/apps/heady_admin_ui/components/status-card.html b/HeadySystems_v13/apps/heady_admin_ui/components/status-card.html new file mode 100644 index 00000000..b834c3dd --- /dev/null +++ b/HeadySystems_v13/apps/heady_admin_ui/components/status-card.html @@ -0,0 +1,26 @@ + +
+
+ + βœ“ +
+
+

Status Title

+

Status Value

+
+
+
+
+
+ + diff --git a/HeadySystems_v13/apps/heady_admin_ui/components/vertical-tile.html b/HeadySystems_v13/apps/heady_admin_ui/components/vertical-tile.html new file mode 100644 index 00000000..7b317a10 --- /dev/null +++ b/HeadySystems_v13/apps/heady_admin_ui/components/vertical-tile.html @@ -0,0 +1,43 @@ + +
+
+
+ + 🎯 +
+
Active
+
+

Vertical Name

+

Vertical description goes here

+
+
+ Metric 1 + 100 +
+
+ Metric 2 + 50 +
+
+ + View Dashboard β†’ + +
+ + diff --git a/HeadySystems_v13/apps/heady_admin_ui/css/animations.css b/HeadySystems_v13/apps/heady_admin_ui/css/animations.css new file mode 100644 index 00000000..e17441eb --- /dev/null +++ b/HeadySystems_v13/apps/heady_admin_ui/css/animations.css @@ -0,0 +1,771 @@ +/* ======================================== + Heady Admin UI - Animations Library + ======================================== */ + +/* ======================================== + Floating & Drift Animations + ======================================== */ + +@keyframes float { + 0%, 100% { + transform: translate(0, 0) scale(1); + opacity: 0.6; + } + 25% { + transform: translate(10px, -20px) scale(1.1); + opacity: 0.8; + } + 50% { + transform: translate(-5px, -40px) scale(0.9); + opacity: 0.5; + } + 75% { + transform: translate(-15px, -20px) scale(1.05); + opacity: 0.7; + } +} + +.float { + animation: float 6s ease-in-out infinite; +} + +.float.delay-1 { + animation-delay: -2s; +} + +.float.delay-2 { + animation-delay: -4s; +} + +/* ======================================== + Pulse Animations + ======================================== */ + +@keyframes pulse { + 0%, 100% { + opacity: 1; + transform: scale(1); + } + 50% { + opacity: 0.7; + transform: scale(1.05); + } +} + +.pulse { + animation: pulse 2s ease-in-out infinite; +} + +@keyframes pulse-success { + 0%, 100% { + box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); + } + 50% { + box-shadow: 0 0 0 10px rgba(16, 185, 129, 0); + } +} + +.pulse-success { + animation: pulse-success 2s ease-in-out infinite; +} + +@keyframes pulse-info { + 0%, 100% { + box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7); + } + 50% { + box-shadow: 0 0 0 10px rgba(59, 130, 246, 0); + } +} + +.pulse-info { + animation: pulse-info 2s ease-in-out infinite; +} + +@keyframes pulse-warning { + 0%, 100% { + box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.7); + } + 50% { + box-shadow: 0 0 0 10px rgba(245, 158, 11, 0); + } +} + +.pulse-warning { + animation: pulse-warning 2s ease-in-out infinite; +} + +@keyframes pulse-line { + 0%, 100% { + stroke-opacity: 0.3; + } + 50% { + stroke-opacity: 0.8; + } +} + +.pulse-line { + animation: pulse-line 2s ease-in-out infinite; +} + +.pulse-line.delay-1 { + animation-delay: -0.5s; +} + +.pulse-line.delay-2 { + animation-delay: -1s; +} + +.pulse-line.delay-3 { + animation-delay: -1.5s; +} + +/* ======================================== + Shimmer & Sparkle Effects + ======================================== */ + +@keyframes shimmer { + 0% { + background-position: -200% center; + } + 100% { + background-position: 200% center; + } +} + +.shimmer { + background: linear-gradient( + 90deg, + var(--gradient-purple) 0%, + rgba(255, 255, 255, 0.5) 50%, + var(--gradient-purple) 100% + ); + background-size: 200% auto; + animation: shimmer 3s linear infinite; +} + +@keyframes shimmer-text { + 0%, 100% { + opacity: 0.8; + text-shadow: 0 0 10px rgba(99, 102, 241, 0.5); + } + 50% { + opacity: 1; + text-shadow: 0 0 20px rgba(99, 102, 241, 0.8); + } +} + +.shimmer-text { + animation: shimmer-text 2s ease-in-out infinite; +} + +@keyframes sparkle { + 0%, 100% { + opacity: 1; + transform: scale(1); + } + 50% { + opacity: 0.6; + transform: scale(1.1); + } +} + +.sparkle { + animation: sparkle 1.5s ease-in-out infinite; +} + +@keyframes sparkle-text { + 0%, 100% { + text-shadow: 0 0 5px rgba(255, 255, 255, 0.5); + } + 50% { + text-shadow: 0 0 20px rgba(255, 255, 255, 1), 0 0 30px rgba(99, 102, 241, 0.8); + } +} + +.sparkle-text { + animation: sparkle-text 2s ease-in-out infinite; +} + +/* ======================================== + Bounce Animations + ======================================== */ + +@keyframes bounce { + 0%, 100% { + transform: translateY(0); + } + 50% { + transform: translateY(-10px); + } +} + +.bounce { + animation: bounce 1s ease-in-out infinite; +} + +/* ======================================== + Slide Animations + ======================================== */ + +@keyframes slide-in { + from { + opacity: 0; + transform: translateX(-50px); + } + to { + opacity: 1; + transform: translateX(0); + } +} + +.slide-in { + animation: slide-in 0.6s ease-out; +} + +@keyframes slide-in-up { + from { + opacity: 0; + transform: translateY(50px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +.slide-in-up { + animation: slide-in-up 0.6s ease-out; +} + +@keyframes slide-in-left { + from { + opacity: 0; + transform: translateX(-30px); + } + to { + opacity: 1; + transform: translateX(0); + } +} + +.slide-in-left { + animation: slide-in-left 0.5s ease-out; +} + +.slide-in-left.delay-1 { + animation-delay: 0.1s; + opacity: 0; + animation-fill-mode: forwards; +} + +.slide-in-left.delay-2 { + animation-delay: 0.2s; + opacity: 0; + animation-fill-mode: forwards; +} + +.slide-in-left.delay-3 { + animation-delay: 0.3s; + opacity: 0; + animation-fill-mode: forwards; +} + +@keyframes slide-in-right { + from { + opacity: 0; + transform: translateX(30px); + } + to { + opacity: 1; + transform: translateX(0); + } +} + +.slide-in-right { + animation: slide-in-right 0.5s ease-out; +} + +.slide-in-right.delay-1 { + animation-delay: 0.1s; + opacity: 0; + animation-fill-mode: forwards; +} + +.slide-in-right.delay-2 { + animation-delay: 0.2s; + opacity: 0; + animation-fill-mode: forwards; +} + +/* ======================================== + Fade Animations + ======================================== */ + +@keyframes fadeIn { + from { + opacity: 0; + } + to { + opacity: 1; + } +} + +.fade-in { + animation: fadeIn 0.8s ease-out; +} + +@keyframes fadeInScale { + from { + opacity: 0; + transform: scale(0.9); + } + to { + opacity: 1; + transform: scale(1); + } +} + +.fade-in-scale { + animation: fadeInScale 0.6s ease-out; +} + +/* ======================================== + Scale & Hover Effects + ======================================== */ + +.scale-hover { + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.scale-hover:hover { + transform: scale(1.02) translateY(-5px); + box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2); +} + +/* ======================================== + Ripple Effect + ======================================== */ + +.ripple-btn { + position: relative; + overflow: hidden; +} + +.ripple-btn::after { + content: ''; + position: absolute; + top: 50%; + left: 50%; + width: 0; + height: 0; + border-radius: 50%; + background: rgba(255, 255, 255, 0.3); + transform: translate(-50%, -50%); + transition: width 0.6s, height 0.6s; +} + +.ripple-btn:active::after { + width: 200px; + height: 200px; +} + +/* ======================================== + Orbit Animations + ======================================== */ + +@keyframes orbit { + from { + transform: rotate(0deg) translateX(15px) rotate(0deg); + } + to { + transform: rotate(360deg) translateX(15px) rotate(-360deg); + } +} + +.orbit { + animation: orbit 3s linear infinite; +} + +.orbit.delay-1 { + animation-delay: -1s; +} + +.orbit.delay-2 { + animation-delay: -2s; +} + +@keyframes orbit-1 { + 0% { + transform: translate(-50%, -50%) rotate(0deg) translateX(150px) rotate(0deg); + } + 100% { + transform: translate(-50%, -50%) rotate(360deg) translateX(150px) rotate(-360deg); + } +} + +@keyframes orbit-2 { + 0% { + transform: translate(-50%, -50%) rotate(90deg) translateX(150px) rotate(-90deg); + } + 100% { + transform: translate(-50%, -50%) rotate(450deg) translateX(150px) rotate(-450deg); + } +} + +@keyframes orbit-3 { + 0% { + transform: translate(-50%, -50%) rotate(180deg) translateX(150px) rotate(-180deg); + } + 100% { + transform: translate(-50%, -50%) rotate(540deg) translateX(150px) rotate(-540deg); + } +} + +@keyframes orbit-4 { + 0% { + transform: translate(-50%, -50%) rotate(270deg) translateX(150px) rotate(-270deg); + } + 100% { + transform: translate(-50%, -50%) rotate(630deg) translateX(150px) rotate(-630deg); + } +} + +.orbit-1 { + left: 50%; + top: 50%; + animation: orbit-1 10s linear infinite; +} + +.orbit-2 { + left: 50%; + top: 50%; + animation: orbit-2 10s linear infinite; +} + +.orbit-3 { + left: 50%; + top: 50%; + animation: orbit-3 10s linear infinite; +} + +.orbit-4 { + left: 50%; + top: 50%; + animation: orbit-4 10s linear infinite; +} + +/* ======================================== + Gradient Animation + ======================================== */ + +@keyframes gradient-shift { + 0% { + background-position: 0% 50%; + } + 50% { + background-position: 100% 50%; + } + 100% { + background-position: 0% 50%; + } +} + +.gradient-animated { + background: linear-gradient(270deg, #667eea, #764ba2, #f59e0b, #10b981); + background-size: 800% 800%; + animation: gradient-shift 15s ease infinite; +} + +/* ======================================== + Wave Animations + ======================================== */ + +@keyframes wave { + 0% { + d: path("M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z"); + } + 50% { + d: path("M0,0V60c47.79,15,103.59,25,158,20,70.36-4,136.33-25,206.8-30C438.64,45,512.34,60,583,75c69.27,15,138.3,20,209.4,10,36.15-5,69.85-15,104.45-25C989.49,30,1113-10,1200,55V0Z"); + } + 100% { + d: path("M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z"); + } +} + +.wave-layer { + animation: wave 10s ease-in-out infinite; +} + +/* ======================================== + Rotation Animations + ======================================== */ + +@keyframes rotate { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} + +.rotate { + animation: rotate 2s linear infinite; +} + +@keyframes rotate-slow { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} + +.rotate-slow { + animation: rotate-slow 10s linear infinite; +} + +/* ======================================== + Glow Effects + ======================================== */ + +@keyframes glow { + 0%, 100% { + box-shadow: 0 0 5px rgba(99, 102, 241, 0.5); + } + 50% { + box-shadow: 0 0 20px rgba(99, 102, 241, 1), 0 0 30px rgba(99, 102, 241, 0.8); + } +} + +.glow { + animation: glow 2s ease-in-out infinite; +} + +@keyframes glow-text { + 0%, 100% { + text-shadow: 0 0 5px rgba(99, 102, 241, 0.5); + } + 50% { + text-shadow: 0 0 20px rgba(99, 102, 241, 1), 0 0 30px rgba(99, 102, 241, 0.8); + } +} + +.glow-text { + animation: glow-text 2s ease-in-out infinite; +} + +/* ======================================== + Heartbeat Animation + ======================================== */ + +@keyframes heartbeat { + 0%, 100% { + transform: scale(1); + } + 10% { + transform: scale(1.1); + } + 20% { + transform: scale(1); + } + 30% { + transform: scale(1.1); + } + 40% { + transform: scale(1); + } +} + +.heartbeat { + animation: heartbeat 2s ease-in-out infinite; +} + +/* ======================================== + Progress Bar Animation + ======================================== */ + +@keyframes progress-indeterminate { + 0% { + left: -50%; + } + 100% { + left: 100%; + } +} + +.progress-indeterminate { + position: relative; + overflow: hidden; +} + +.progress-indeterminate::after { + content: ''; + position: absolute; + top: 0; + left: -50%; + width: 50%; + height: 100%; + background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent); + animation: progress-indeterminate 1.5s linear infinite; +} + +/* ======================================== + Loading Spinner + ======================================== */ + +@keyframes spin { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} + +.spinner { + animation: spin 1s linear infinite; +} + +/* ======================================== + Typing Animation + ======================================== */ + +@keyframes typing { + 0%, 100% { + opacity: 0; + } + 50% { + opacity: 1; + } +} + +.typing-dot { + animation: typing 1.4s infinite; +} + +.typing-dot:nth-child(2) { + animation-delay: 0.2s; +} + +.typing-dot:nth-child(3) { + animation-delay: 0.4s; +} + +/* ======================================== + Shake Animation + ======================================== */ + +@keyframes shake { + 0%, 100% { + transform: translateX(0); + } + 10%, 30%, 50%, 70%, 90% { + transform: translateX(-5px); + } + 20%, 40%, 60%, 80% { + transform: translateX(5px); + } +} + +.shake { + animation: shake 0.5s ease-in-out; +} + +/* ======================================== + Flip Animation + ======================================== */ + +@keyframes flip { + 0% { + transform: perspective(400px) rotateY(0); + } + 100% { + transform: perspective(400px) rotateY(360deg); + } +} + +.flip { + animation: flip 2s ease-in-out infinite; +} + +/* ======================================== + Entrance Animations + ======================================== */ + +@keyframes zoomIn { + from { + opacity: 0; + transform: scale(0.3); + } + to { + opacity: 1; + transform: scale(1); + } +} + +.zoom-in { + animation: zoomIn 0.5s ease-out; +} + +@keyframes slideDown { + from { + opacity: 0; + transform: translateY(-30px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +.slide-down { + animation: slideDown 0.5s ease-out; +} + +/* ======================================== + Attention Seekers + ======================================== */ + +@keyframes wiggle { + 0%, 100% { + transform: rotate(0deg); + } + 25% { + transform: rotate(-5deg); + } + 75% { + transform: rotate(5deg); + } +} + +.wiggle { + animation: wiggle 0.5s ease-in-out; +} + +@keyframes jello { + 0%, 100% { + transform: skewX(0deg) skewY(0deg); + } + 30% { + transform: skewX(-12.5deg) skewY(-12.5deg); + } + 40% { + transform: skewX(6.25deg) skewY(6.25deg); + } + 50% { + transform: skewX(-3.125deg) skewY(-3.125deg); + } + 65% { + transform: skewX(1.5625deg) skewY(1.5625deg); + } + 75% { + transform: skewX(-0.78125deg) skewY(-0.78125deg); + } +} + +.jello { + animation: jello 1s ease-in-out; +} diff --git a/HeadySystems_v13/apps/heady_admin_ui/css/styles.css b/HeadySystems_v13/apps/heady_admin_ui/css/styles.css new file mode 100644 index 00000000..8310a9a9 --- /dev/null +++ b/HeadySystems_v13/apps/heady_admin_ui/css/styles.css @@ -0,0 +1,1008 @@ +/* ======================================== + Heady Admin UI - Main Styles + ======================================== */ + +/* CSS Custom Properties (Design Tokens) */ +:root { + /* Colors */ + --color-primary: #6366f1; + --color-secondary: #8b5cf6; + --color-accent: #f59e0b; + --color-success: #10b981; + --color-warning: #f59e0b; + --color-error: #ef4444; + --color-info: #3b82f6; + + /* Backgrounds */ + --bg-dark: #0f0f23; + --bg-light: #f8fafc; + --bg-card: rgba(255, 255, 255, 0.1); + --bg-card-hover: rgba(255, 255, 255, 0.15); + + /* Gradients */ + --gradient-purple: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + --gradient-blue: linear-gradient(135deg, #667eea 0%, #4facfe 100%); + --gradient-golden: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%); + --gradient-emerald: linear-gradient(135deg, #10b981 0%, #34d399 100%); + --gradient-animated: linear-gradient(270deg, #667eea, #764ba2, #f59e0b, #10b981); + + /* Spacing */ + --spacing-xs: 0.25rem; + --spacing-sm: 0.5rem; + --spacing-md: 1rem; + --spacing-lg: 1.5rem; + --spacing-xl: 2rem; + --spacing-2xl: 3rem; + + /* Typography */ + --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; + --font-mono: 'Fira Code', 'Courier New', monospace; + + /* Border Radius */ + --radius-sm: 0.25rem; + --radius-md: 0.5rem; + --radius-lg: 1rem; + --radius-xl: 1.5rem; + --radius-full: 9999px; + + /* Shadows */ + --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); + --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1); + --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1); + --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1); + --shadow-glow: 0 0 20px rgba(99, 102, 241, 0.5); +} + +/* Dark Theme (default) */ +body { + --bg-primary: var(--bg-dark); + --text-primary: #ffffff; + --text-secondary: #a0aec0; + --border-color: rgba(255, 255, 255, 0.1); +} + +/* Light Theme */ +body.light-theme { + --bg-primary: var(--bg-light); + --text-primary: #1a202c; + --text-secondary: #4a5568; + --border-color: rgba(0, 0, 0, 0.1); + --bg-card: rgba(255, 255, 255, 0.8); + --bg-card-hover: rgba(255, 255, 255, 0.95); +} + +/* ======================================== + Base Styles + ======================================== */ + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +html { + scroll-behavior: smooth; +} + +body { + font-family: var(--font-sans); + background: var(--bg-primary); + color: var(--text-primary); + line-height: 1.6; + overflow-x: hidden; + min-height: 100vh; + background-image: + radial-gradient(at 40% 20%, rgba(99, 102, 241, 0.2) 0px, transparent 50%), + radial-gradient(at 80% 60%, rgba(139, 92, 246, 0.2) 0px, transparent 50%), + radial-gradient(at 20% 80%, rgba(245, 158, 11, 0.1) 0px, transparent 50%); + background-attachment: fixed; +} + +/* ======================================== + Particles Background + ======================================== */ + +#particles-container { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 0; + pointer-events: none; +} + +.particle { + position: absolute; + border-radius: 50%; + background: radial-gradient(circle, rgba(99, 102, 241, 0.8), transparent); + animation: float 20s infinite ease-in-out; + opacity: 0.6; +} + +/* ======================================== + Layout + ======================================== */ + +.container { + position: relative; + z-index: 1; + max-width: 1400px; + margin: 0 auto; + padding: var(--spacing-md); +} + +/* ======================================== + Header + ======================================== */ + +.header { + background: var(--bg-card); + backdrop-filter: blur(20px); + border-radius: var(--radius-xl); + padding: var(--spacing-lg); + margin-bottom: var(--spacing-xl); + box-shadow: var(--shadow-xl); + border: 1px solid var(--border-color); +} + +.header-content { + display: flex; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; + gap: var(--spacing-md); +} + +.logo-section { + flex-shrink: 0; +} + +.logo { + font-size: 2rem; + font-weight: 800; + display: flex; + align-items: center; + gap: var(--spacing-sm); +} + +.logo-text { + background: var(--gradient-purple); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +.logo-subtitle { + font-size: 1rem; + color: var(--text-secondary); + font-weight: 400; +} + +/* Navigation */ +.nav { + display: flex; + gap: var(--spacing-sm); + flex-wrap: wrap; +} + +.nav-item { + background: transparent; + border: 1px solid var(--border-color); + color: var(--text-primary); + padding: var(--spacing-sm) var(--spacing-md); + border-radius: var(--radius-lg); + cursor: pointer; + font-size: 0.875rem; + font-weight: 500; + display: flex; + align-items: center; + gap: var(--spacing-xs); + transition: all 0.3s ease; +} + +.nav-item:hover { + background: var(--bg-card-hover); + border-color: var(--color-primary); + transform: translateY(-2px); +} + +.nav-item.active { + background: var(--gradient-purple); + border-color: transparent; + box-shadow: var(--shadow-glow); +} + +.nav-item .icon { + font-size: 1.2rem; +} + +/* Header Actions */ +.header-actions { + display: flex; + align-items: center; + gap: var(--spacing-md); +} + +.theme-toggle, +.notification-btn { + background: var(--bg-card); + border: 1px solid var(--border-color); + color: var(--text-primary); + width: 2.5rem; + height: 2.5rem; + border-radius: var(--radius-full); + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + font-size: 1.2rem; + transition: all 0.3s ease; +} + +.theme-toggle:hover, +.notification-btn:hover { + background: var(--bg-card-hover); + transform: scale(1.1); +} + +.notification-badge { + position: relative; +} + +.notification-badge::after { + content: attr(data-count); + position: absolute; + top: -5px; + right: -5px; + background: var(--color-error); + color: white; + font-size: 0.7rem; + font-weight: bold; + border-radius: var(--radius-full); + min-width: 18px; + height: 18px; + display: flex; + align-items: center; + justify-content: center; + padding: 0 4px; +} + +/* ======================================== + Main Content + ======================================== */ + +.main-content { + display: flex; + flex-direction: column; + gap: var(--spacing-2xl); + padding-bottom: var(--spacing-2xl); +} + +.section { + animation: fadeIn 0.6s ease-out; +} + +.section-title { + font-size: 1.875rem; + font-weight: 700; + margin-bottom: var(--spacing-lg); + display: flex; + align-items: center; + gap: var(--spacing-sm); +} + +.section-title .icon { + font-size: 2rem; +} + +/* ======================================== + Glass Card Effect + ======================================== */ + +.glass-card { + background: var(--bg-card); + backdrop-filter: blur(20px); + border-radius: var(--radius-xl); + padding: var(--spacing-lg); + box-shadow: var(--shadow-lg); + border: 1px solid var(--border-color); + transition: all 0.3s ease; +} + +.glass-card:hover { + background: var(--bg-card-hover); + transform: translateY(-2px); + box-shadow: var(--shadow-xl); +} + +/* ======================================== + Status Cards + ======================================== */ + +.status-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: var(--spacing-lg); +} + +.status-card { + display: flex; + align-items: center; + gap: var(--spacing-md); +} + +.status-icon { + font-size: 2.5rem; + width: 60px; + height: 60px; + display: flex; + align-items: center; + justify-content: center; + border-radius: var(--radius-lg); + background: rgba(99, 102, 241, 0.2); +} + +.status-info { + flex: 1; +} + +.status-info h3 { + font-size: 0.875rem; + color: var(--text-secondary); + margin-bottom: var(--spacing-xs); +} + +.status-value { + font-size: 1.5rem; + font-weight: 700; + display: block; + margin-bottom: var(--spacing-xs); +} + +/* Progress Bar */ +.progress-bar { + width: 100%; + height: 6px; + background: rgba(255, 255, 255, 0.1); + border-radius: var(--radius-full); + overflow: hidden; +} + +.progress-fill { + height: 100%; + background: var(--gradient-purple); + border-radius: var(--radius-full); + transition: width 1s ease; +} + +/* Lock Indicator */ +.lock-indicator { + display: flex; + align-items: center; + gap: var(--spacing-xs); + font-size: 0.875rem; +} + +.lock-status { + display: inline-flex; + align-items: center; + gap: var(--spacing-xs); +} + +/* Connection Dots */ +.connection-dots { + display: flex; + gap: var(--spacing-xs); + align-items: center; +} + +.dot { + width: 8px; + height: 8px; + background: var(--color-success); + border-radius: 50%; +} + +/* Mini Chart */ +.mini-chart { + display: flex; + align-items: flex-end; + gap: 3px; + height: 30px; +} + +.mini-chart .bar { + flex: 1; + background: var(--gradient-purple); + border-radius: 2px; + min-width: 8px; + transition: height 0.5s ease; +} + +/* ======================================== + Wave Divider + ======================================== */ + +.wave-divider { + width: 100%; + overflow: hidden; + line-height: 0; + margin: var(--spacing-xl) 0; +} + +.wave-divider svg { + position: relative; + display: block; + width: calc(100% + 1.3px); + height: 80px; +} + +.wave-path { + fill: var(--color-primary); + opacity: 0.3; +} + +/* ======================================== + Verticals Grid + ======================================== */ + +.verticals-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); + gap: var(--spacing-lg); +} + +.vertical-card { + padding: var(--spacing-xl); + position: relative; + overflow: hidden; +} + +.vertical-header { + display: flex; + justify-content: space-between; + align-items: flex-start; + margin-bottom: var(--spacing-md); +} + +.vertical-icon { + font-size: 3rem; + width: 80px; + height: 80px; + display: flex; + align-items: center; + justify-content: center; + border-radius: var(--radius-lg); + margin-bottom: var(--spacing-md); +} + +.gradient-bg-purple { + background: var(--gradient-purple); +} + +.gradient-bg-blue { + background: var(--gradient-blue); +} + +.gradient-bg-golden { + background: var(--gradient-golden); +} + +.gradient-bg-green, +.gradient-bg-emerald { + background: var(--gradient-emerald); +} + +.vertical-badge { + font-size: 0.75rem; + padding: var(--spacing-xs) var(--spacing-sm); + border-radius: var(--radius-full); + background: var(--color-success); + color: white; + font-weight: 600; +} + +.vertical-card h3 { + font-size: 1.5rem; + margin-bottom: var(--spacing-xs); +} + +.vertical-card p { + color: var(--text-secondary); + margin-bottom: var(--spacing-md); +} + +.vertical-stats { + display: flex; + gap: var(--spacing-lg); + margin-bottom: var(--spacing-md); + padding: var(--spacing-md); + background: rgba(255, 255, 255, 0.05); + border-radius: var(--radius-md); +} + +.stat { + display: flex; + flex-direction: column; +} + +.stat-label { + font-size: 0.75rem; + color: var(--text-secondary); + margin-bottom: var(--spacing-xs); +} + +.stat-value { + font-size: 1.25rem; + font-weight: 700; +} + +.vertical-link { + display: inline-flex; + align-items: center; + gap: var(--spacing-xs); + color: var(--color-primary); + text-decoration: none; + font-weight: 600; + padding: var(--spacing-sm) var(--spacing-md); + border-radius: var(--radius-md); + background: rgba(99, 102, 241, 0.1); + transition: all 0.3s ease; +} + +.vertical-link:hover { + background: rgba(99, 102, 241, 0.2); + transform: translateX(5px); +} + +/* ======================================== + Governance Panel + ======================================== */ + +.governance-panel { + padding: var(--spacing-xl); +} + +.governance-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: var(--spacing-lg); +} + +.lock-badge { + background: var(--gradient-purple); + color: white; + padding: var(--spacing-sm) var(--spacing-md); + border-radius: var(--radius-full); + font-weight: 600; + font-size: 0.875rem; +} + +.governance-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: var(--spacing-md); + margin-bottom: var(--spacing-xl); +} + +.governance-item { + display: flex; + align-items: center; + gap: var(--spacing-md); + padding: var(--spacing-md); + background: rgba(255, 255, 255, 0.05); + border-radius: var(--radius-md); + border: 1px solid var(--border-color); +} + +.gov-icon { + font-size: 1.5rem; +} + +.gov-info h4 { + font-size: 1rem; + margin-bottom: var(--spacing-xs); +} + +.gov-info p { + font-size: 0.875rem; + color: var(--text-secondary); + margin-bottom: var(--spacing-xs); +} + +.gov-status { + font-size: 0.75rem; + padding: 2px 8px; + border-radius: var(--radius-sm); + background: var(--color-success); + color: white; + font-weight: 600; +} + +.gov-status.active { + background: var(--color-success); +} + +/* Audit Trail */ +.audit-trail { + background: rgba(255, 255, 255, 0.05); + border-radius: var(--radius-md); + padding: var(--spacing-lg); + border: 1px solid var(--border-color); +} + +.audit-trail h4 { + margin-bottom: var(--spacing-md); + font-size: 1.125rem; +} + +.audit-log { + display: flex; + flex-direction: column; + gap: var(--spacing-sm); +} + +.log-entry { + display: flex; + align-items: center; + gap: var(--spacing-md); + padding: var(--spacing-sm); + background: rgba(255, 255, 255, 0.03); + border-radius: var(--radius-sm); + font-size: 0.875rem; +} + +.log-time { + color: var(--text-secondary); + font-family: var(--font-mono); + font-size: 0.75rem; +} + +.log-event { + flex: 1; +} + +.log-status { + color: var(--color-success); + font-weight: bold; +} + +/* ======================================== + Activity & Metrics + ======================================== */ + +.activity-metrics-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); + gap: var(--spacing-lg); +} + +/* Activity Feed */ +.activity-feed { + padding: var(--spacing-xl); +} + +.activity-feed h3 { + margin-bottom: var(--spacing-lg); + font-size: 1.25rem; +} + +.timeline { + position: relative; + padding-left: var(--spacing-xl); +} + +.timeline::before { + content: ''; + position: absolute; + left: 8px; + top: 0; + bottom: 0; + width: 2px; + background: linear-gradient(180deg, var(--color-primary), transparent); +} + +.timeline-item { + position: relative; + margin-bottom: var(--spacing-lg); +} + +.timeline-dot { + position: absolute; + left: -24px; + top: 4px; + width: 12px; + height: 12px; + border-radius: 50%; + background: var(--color-primary); + border: 2px solid var(--bg-primary); +} + +.timeline-content { + display: flex; + flex-direction: column; + gap: var(--spacing-xs); +} + +.timeline-time { + font-size: 0.75rem; + color: var(--text-secondary); +} + +.timeline-content p { + font-size: 0.875rem; +} + +/* Metrics Chart */ +.metrics-chart { + padding: var(--spacing-xl); +} + +.metrics-chart h3 { + margin-bottom: var(--spacing-lg); + font-size: 1.25rem; +} + +.chart-wrapper { + margin-bottom: var(--spacing-md); + height: 250px; +} + +#metricsChart { + width: 100% !important; + height: 100% !important; +} + +.metrics-legend { + display: flex; + gap: var(--spacing-lg); + justify-content: center; + flex-wrap: wrap; +} + +.legend-item { + display: flex; + align-items: center; + gap: var(--spacing-xs); + font-size: 0.875rem; +} + +.legend-dot { + width: 12px; + height: 12px; + border-radius: 50%; +} + +/* ======================================== + Trust Network Visualizer + ======================================== */ + +.trust-visualizer { + padding: var(--spacing-xl); +} + +.network-graph { + position: relative; + height: 400px; + display: flex; + align-items: center; + justify-content: center; + margin-bottom: var(--spacing-lg); +} + +.network-node { + position: absolute; + display: flex; + flex-direction: column; + align-items: center; + gap: var(--spacing-xs); +} + +.network-node.central { + font-size: 2rem; + background: var(--gradient-purple); + padding: var(--spacing-lg); + border-radius: var(--radius-lg); + box-shadow: 0 0 30px rgba(99, 102, 241, 0.5); +} + +.node-icon { + font-size: 2rem; +} + +.node-label { + font-size: 0.875rem; + font-weight: 600; +} + +.network-node.satellite { + background: var(--bg-card); + padding: var(--spacing-md); + border-radius: var(--radius-lg); + border: 2px solid var(--color-primary); +} + +.network-node.satellite .node-icon { + font-size: 1.5rem; +} + +.connection-lines { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + pointer-events: none; +} + +.connection-line { + stroke: var(--color-primary); + stroke-width: 2; + opacity: 0.3; +} + +.trust-info { + display: flex; + flex-direction: column; + gap: var(--spacing-sm); + text-align: center; + color: var(--text-secondary); +} + +.trust-info code { + background: rgba(99, 102, 241, 0.2); + padding: 2px 8px; + border-radius: var(--radius-sm); + font-family: var(--font-mono); + color: var(--color-primary); +} + +/* ======================================== + Footer + ======================================== */ + +.footer { + margin-top: var(--spacing-2xl); + padding: var(--spacing-xl); + background: var(--bg-card); + backdrop-filter: blur(20px); + border-radius: var(--radius-xl); + border: 1px solid var(--border-color); + text-align: center; +} + +.footer-content { + display: flex; + flex-direction: column; + gap: var(--spacing-sm); +} + +.footer-links { + display: flex; + gap: var(--spacing-md); + justify-content: center; + align-items: center; +} + +.footer-links a { + color: var(--text-secondary); + text-decoration: none; + transition: color 0.3s ease; +} + +.footer-links a:hover { + color: var(--color-primary); +} + +/* ======================================== + Gradient Text Effects + ======================================== */ + +.gradient-text { + background: var(--gradient-purple); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +.gradient-text-green { + background: var(--gradient-emerald); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +.gradient-text-blue { + background: var(--gradient-blue); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +.gradient-text-purple { + background: var(--gradient-purple); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +.gradient-text-yellow { + background: var(--gradient-golden); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +/* ======================================== + Responsive Design + ======================================== */ + +@media (max-width: 768px) { + .header-content { + flex-direction: column; + align-items: flex-start; + } + + .nav { + width: 100%; + } + + .nav-item { + flex: 1; + justify-content: center; + } + + .status-grid { + grid-template-columns: 1fr; + } + + .verticals-grid { + grid-template-columns: 1fr; + } + + .activity-metrics-grid { + grid-template-columns: 1fr; + } + + .network-graph { + height: 300px; + } +} + +@media (max-width: 480px) { + .container { + padding: var(--spacing-sm); + } + + .section-title { + font-size: 1.5rem; + } + + .glass-card { + padding: var(--spacing-md); + } +} + +/* ======================================== + Accessibility + ======================================== */ + +/* Focus styles */ +*:focus { + outline: 2px solid var(--color-primary); + outline-offset: 2px; +} + +/* Reduced motion support */ +@media (prefers-reduced-motion: reduce) { + *, + *::before, + *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + } +} diff --git a/HeadySystems_v13/apps/heady_admin_ui/design-tokens.json b/HeadySystems_v13/apps/heady_admin_ui/design-tokens.json new file mode 100644 index 00000000..e4901a29 --- /dev/null +++ b/HeadySystems_v13/apps/heady_admin_ui/design-tokens.json @@ -0,0 +1,68 @@ +{ + "colors": { + "primary": "#6366f1", + "secondary": "#8b5cf6", + "accent": "#f59e0b", + "success": "#10b981", + "warning": "#f59e0b", + "error": "#ef4444", + "info": "#3b82f6", + "background": { + "dark": "#0f0f23", + "light": "#f8fafc" + }, + "gradients": { + "purple": "linear-gradient(135deg, #667eea 0%, #764ba2 100%)", + "blue": "linear-gradient(135deg, #667eea 0%, #4facfe 100%)", + "golden": "linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%)", + "emerald": "linear-gradient(135deg, #10b981 0%, #34d399 100%)" + } + }, + "animations": { + "duration": { + "fast": "150ms", + "normal": "300ms", + "slow": "500ms", + "slower": "1000ms", + "glacial": "2000ms" + }, + "easing": { + "smooth": "cubic-bezier(0.4, 0, 0.2, 1)", + "bounce": "cubic-bezier(0.68, -0.55, 0.265, 1.55)", + "elastic": "cubic-bezier(0.175, 0.885, 0.32, 1.275)" + } + }, + "spacing": { + "xs": "0.25rem", + "sm": "0.5rem", + "md": "1rem", + "lg": "1.5rem", + "xl": "2rem", + "2xl": "3rem", + "3xl": "4rem" + }, + "typography": { + "fontFamily": { + "sans": "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif", + "mono": "'Fira Code', 'Courier New', monospace" + }, + "fontSize": { + "xs": "0.75rem", + "sm": "0.875rem", + "base": "1rem", + "lg": "1.125rem", + "xl": "1.25rem", + "2xl": "1.5rem", + "3xl": "1.875rem", + "4xl": "2.25rem", + "5xl": "3rem" + } + }, + "borderRadius": { + "sm": "0.25rem", + "md": "0.5rem", + "lg": "1rem", + "xl": "1.5rem", + "full": "9999px" + } +} diff --git a/HeadySystems_v13/apps/heady_admin_ui/index.html b/HeadySystems_v13/apps/heady_admin_ui/index.html new file mode 100644 index 00000000..0087274d --- /dev/null +++ b/HeadySystems_v13/apps/heady_admin_ui/index.html @@ -0,0 +1,472 @@ + + + + + + + Heady Admin Dashboard + + + + + + + + +
+ + + + +
+ + +
+

+ 🟒 + System Status +

+
+
+
βœ“
+
+

System Health

+

Operational

+
+
+
+
+
+ +
+
πŸ”
+
+

Governance Lock

+

v1.2.0 Active

+
+ πŸ”’ Secured +
+
+
+ +
+
πŸ“‘
+
+

MCP Gateway

+

Connected

+
+ + + +
+
+
+ +
+
⚑
+
+

Active Sessions

+

8

+
+
+
+
+
+
+
+
+
+
+
+ + + + + +
+

+ 🎯 + Heady Verticals +

+
+ +
+
+
🏭
+
Active
+
+

HeadyMake

+

3D printing & manufacturing

+
+
+ Prints + 247 +
+
+ Queue + 12 +
+
+ + View Dashboard β†’ + +
+ + +
+
+
🌾
+
Active
+
+

HeadyField

+

Agricultural IoT & sensors

+
+
+ Sensors + 156 +
+
+ Fields + 8 +
+
+ + View Dashboard β†’ + +
+ + +
+
+
πŸ‘€
+
Monitoring
+
+

HeadyLegacy

+

Biometric & identity systems

+
+
+ Users + 1.2K +
+
+ Scans + 8.4K +
+
+ + View Dashboard β†’ + +
+ + +
+
+
πŸ”₯
+
Active
+
+

HeadyKinetic

+

Thermal & energy monitoring

+
+
+ Devices + 89 +
+
+ Temp + 72Β°F +
+
+ + View Dashboard β†’ + +
+ + +
+
+
🧬
+
Research
+
+

HeadyBio

+

Biometric research & analysis

+
+
+ Studies + 34 +
+
+ Data + 2.1TB +
+
+ + Coming Soon + +
+ + +
+
+
πŸ“š
+
Beta
+
+

HeadyEd

+

Educational platforms & tools

+
+
+ Courses + 18 +
+
+ Students + 456 +
+
+ + Coming Soon + +
+
+
+ + +
+

+ πŸ”’ + Governance & Compliance +

+
+
+

Governance Lock Status

+ πŸ” v1.2.0 +
+
+
+ βœ… +
+

PPA-001

+

Physical Trust-Anchored Crypto

+ Active +
+
+
+ βœ… +
+

PPA-002

+

Remote-Attested Actuators

+ Active +
+
+
+ βœ… +
+

PPA-003

+

Sovereign Identity Root

+ Active +
+
+
+ βœ… +
+

PPA-004

+

HSM Federation

+ Active +
+
+
+
+

πŸ” Audit Trail

+
+
+ 23:42:15 + Governance lock verified + βœ“ +
+
+ 23:41:50 + System health check passed + βœ“ +
+
+ 23:40:12 + MCP gateway connected + βœ“ +
+
+
+
+
+ + +
+

+ πŸ“ˆ + Activity & Metrics +

+
+ +
+

Recent Activity

+
+
+
+
+ 2 min ago +

HeadyMake: Print job #247 completed

+
+
+
+
+
+ 5 min ago +

HeadyField: Sensor calibration updated

+
+
+
+
+
+ 12 min ago +

HeadyLegacy: User authentication spike detected

+
+
+
+
+
+ 18 min ago +

System: Backup completed successfully

+
+
+
+
+ + +
+

Performance Metrics

+
+ +
+
+
+ + CPU Usage +
+
+ + Memory +
+
+ + Network +
+
+
+
+
+ + +
+

+ 🌐 + Trust Domain Visualizer +

+
+
+ +
+ ⚑ + Heady Root +
+ +
+ 🏭 +
+
+ 🌾 +
+
+ πŸ‘€ +
+
+ πŸ”₯ +
+ + +
+
+

πŸ” Secure mesh transport with hardware-identity routing

+

🌐 Trust domain: headysystems.com

+
+
+
+ +
+ + + +
+ + + + + + + diff --git a/HeadySystems_v13/apps/heady_admin_ui/js/charts.js b/HeadySystems_v13/apps/heady_admin_ui/js/charts.js new file mode 100644 index 00000000..9aaf6772 --- /dev/null +++ b/HeadySystems_v13/apps/heady_admin_ui/js/charts.js @@ -0,0 +1,190 @@ +/** + * Heady Admin UI - Animated Charts + * Creates animated performance metric charts + */ + +class MetricsChart { + constructor(canvasId) { + this.canvas = document.getElementById(canvasId); + if (!this.canvas) { + console.warn(`Canvas ${canvasId} not found`); + return; + } + + this.ctx = this.canvas.getContext('2d'); + this.data = { + cpu: [], + memory: [], + network: [] + }; + this.maxDataPoints = 20; + this.animationProgress = 0; + + this.init(); + } + + init() { + // Set canvas size + this.resizeCanvas(); + window.addEventListener('resize', () => this.resizeCanvas()); + + // Generate initial data + this.generateInitialData(); + + // Start animation + this.animate(); + + // Update data periodically + setInterval(() => this.updateData(), 2000); + } + + resizeCanvas() { + const rect = this.canvas.parentElement.getBoundingClientRect(); + this.canvas.width = rect.width; + this.canvas.height = rect.height; + } + + generateInitialData() { + for (let i = 0; i < this.maxDataPoints; i++) { + this.data.cpu.push(this.randomValue(30, 70)); + this.data.memory.push(this.randomValue(40, 80)); + this.data.network.push(this.randomValue(20, 60)); + } + } + + updateData() { + // Add new data point + this.data.cpu.push(this.randomValue(30, 70)); + this.data.memory.push(this.randomValue(40, 80)); + this.data.network.push(this.randomValue(20, 60)); + + // Remove old data point + if (this.data.cpu.length > this.maxDataPoints) { + this.data.cpu.shift(); + this.data.memory.shift(); + this.data.network.shift(); + } + } + + randomValue(min, max) { + return Math.random() * (max - min) + min; + } + + animate() { + this.animationProgress += 0.02; + if (this.animationProgress > 1) { + this.animationProgress = 1; + } + + this.draw(); + requestAnimationFrame(() => this.animate()); + } + + draw() { + const { width, height } = this.canvas; + + // Clear canvas + this.ctx.clearRect(0, 0, width, height); + + // Draw grid + this.drawGrid(); + + // Draw data lines with animation + this.drawLine(this.data.cpu, '#6366f1', 0.3); + this.drawLine(this.data.memory, '#10b981', 0.6); + this.drawLine(this.data.network, '#f59e0b', 1); + } + + drawGrid() { + const { width, height } = this.canvas; + this.ctx.strokeStyle = 'rgba(255, 255, 255, 0.05)'; + this.ctx.lineWidth = 1; + + // Horizontal lines + for (let i = 0; i <= 4; i++) { + const y = (height / 4) * i; + this.ctx.beginPath(); + this.ctx.moveTo(0, y); + this.ctx.lineTo(width, y); + this.ctx.stroke(); + } + + // Vertical lines + for (let i = 0; i <= 10; i++) { + const x = (width / 10) * i; + this.ctx.beginPath(); + this.ctx.moveTo(x, 0); + this.ctx.lineTo(x, height); + this.ctx.stroke(); + } + } + + drawLine(data, color, opacity) { + const { width, height } = this.canvas; + const padding = 20; + const usableWidth = width - padding * 2; + const usableHeight = height - padding * 2; + const stepX = usableWidth / (this.maxDataPoints - 1); + + // Draw area fill + this.ctx.fillStyle = this.hexToRgba(color, 0.1 * opacity); + this.ctx.beginPath(); + this.ctx.moveTo(padding, height - padding); + + for (let i = 0; i < data.length; i++) { + const x = padding + i * stepX; + const y = height - padding - (data[i] / 100) * usableHeight; + + if (i === 0) { + this.ctx.lineTo(x, y); + } else { + this.ctx.lineTo(x, y); + } + } + + this.ctx.lineTo(padding + (data.length - 1) * stepX, height - padding); + this.ctx.closePath(); + this.ctx.fill(); + + // Draw line + this.ctx.strokeStyle = this.hexToRgba(color, 0.8 * opacity); + this.ctx.lineWidth = 2; + this.ctx.beginPath(); + + for (let i = 0; i < data.length; i++) { + const x = padding + i * stepX; + const y = height - padding - (data[i] / 100) * usableHeight; + + if (i === 0) { + this.ctx.moveTo(x, y); + } else { + this.ctx.lineTo(x, y); + } + } + + this.ctx.stroke(); + + // Draw points + this.ctx.fillStyle = color; + for (let i = 0; i < data.length; i++) { + const x = padding + i * stepX; + const y = height - padding - (data[i] / 100) * usableHeight; + + this.ctx.beginPath(); + this.ctx.arc(x, y, 3, 0, Math.PI * 2); + this.ctx.fill(); + } + } + + hexToRgba(hex, alpha) { + const r = parseInt(hex.slice(1, 3), 16); + const g = parseInt(hex.slice(3, 5), 16); + const b = parseInt(hex.slice(5, 7), 16); + return `rgba(${r}, ${g}, ${b}, ${alpha})`; + } +} + +// Initialize chart when DOM is loaded +document.addEventListener('DOMContentLoaded', () => { + const metricsChart = new MetricsChart('metricsChart'); +}); diff --git a/HeadySystems_v13/apps/heady_admin_ui/js/main.js b/HeadySystems_v13/apps/heady_admin_ui/js/main.js new file mode 100644 index 00000000..b3e55276 --- /dev/null +++ b/HeadySystems_v13/apps/heady_admin_ui/js/main.js @@ -0,0 +1,330 @@ +/** + * Heady Admin UI - Main JavaScript + * Handles interactivity and dynamic updates + */ + +// Theme Toggle +function initThemeToggle() { + const themeToggle = document.querySelector('.theme-toggle'); + const body = document.body; + + if (themeToggle) { + themeToggle.addEventListener('click', () => { + body.classList.toggle('light-theme'); + const icon = themeToggle.querySelector('.icon'); + icon.textContent = body.classList.contains('light-theme') ? 'β˜€οΈ' : 'πŸŒ™'; + + // Save preference + localStorage.setItem('theme', body.classList.contains('light-theme') ? 'light' : 'dark'); + }); + + // Load saved theme + const savedTheme = localStorage.getItem('theme'); + if (savedTheme === 'light') { + body.classList.add('light-theme'); + const icon = themeToggle.querySelector('.icon'); + icon.textContent = 'β˜€οΈ'; + } + } +} + +// Navigation +function initNavigation() { + const navItems = document.querySelectorAll('.nav-item'); + + navItems.forEach(item => { + item.addEventListener('click', () => { + // Remove active class from all items + navItems.forEach(nav => nav.classList.remove('active')); + + // Add active class to clicked item + item.classList.add('active'); + + // Get view name + const view = item.dataset.view; + console.log(`Navigating to: ${view}`); + + // In a real app, this would switch views + // For now, just log the action + }); + }); +} + +// Notification Handler +function initNotifications() { + const notificationBtn = document.querySelector('.notification-btn'); + + if (notificationBtn) { + notificationBtn.addEventListener('click', () => { + // Simulate notification panel + showNotificationPanel(); + }); + } +} + +function showNotificationPanel() { + // Create notification panel + const panel = document.createElement('div'); + panel.className = 'notification-panel glass-card fade-in-scale'; + panel.innerHTML = ` +
+

Notifications

+
+
+
+
+ Just now +

System health check passed

+
+
+
+
+
+ 5 min ago +

New user registration

+
+
+
+
+
+ 12 min ago +

High CPU usage detected

+
+
+
+ +
+ `; + + // Style the panel + Object.assign(panel.style, { + position: 'fixed', + top: '80px', + right: '20px', + maxWidth: '400px', + zIndex: '1000', + boxShadow: '0 20px 40px rgba(0, 0, 0, 0.3)' + }); + + document.body.appendChild(panel); + + // Auto-remove after 10 seconds + setTimeout(() => { + panel.style.opacity = '0'; + panel.style.transform = 'scale(0.9)'; + setTimeout(() => panel.remove(), 300); + }, 10000); +} + +// Ripple Effect on Buttons +function addRippleEffect() { + const rippleButtons = document.querySelectorAll('.ripple-btn'); + + rippleButtons.forEach(button => { + button.addEventListener('click', function(e) { + const ripple = document.createElement('span'); + ripple.className = 'ripple'; + + const rect = this.getBoundingClientRect(); + const size = Math.max(rect.width, rect.height); + const x = e.clientX - rect.left - size / 2; + const y = e.clientY - rect.top - size / 2; + + ripple.style.width = ripple.style.height = size + 'px'; + ripple.style.left = x + 'px'; + ripple.style.top = y + 'px'; + + this.appendChild(ripple); + + setTimeout(() => ripple.remove(), 600); + }); + }); +} + +// Simulate Real-time Updates +function startRealtimeUpdates() { + // Update timestamp every second + setInterval(() => { + const now = new Date(); + const timeString = now.toLocaleTimeString(); + + // Update any time displays + document.querySelectorAll('.current-time').forEach(el => { + el.textContent = timeString; + }); + }, 1000); + + // Update status indicators + setInterval(() => { + updateStatusIndicators(); + }, 5000); +} + +function updateStatusIndicators() { + // Randomly update some metrics to simulate live data + const sessionCount = document.querySelector('.status-value'); + if (sessionCount && sessionCount.textContent.match(/^\d+$/)) { + const currentCount = parseInt(sessionCount.textContent); + const newCount = currentCount + Math.floor(Math.random() * 3) - 1; // -1, 0, or 1 + sessionCount.textContent = Math.max(1, newCount); + } +} + +// Smooth Scroll +function initSmoothScroll() { + document.querySelectorAll('a[href^="#"]').forEach(anchor => { + anchor.addEventListener('click', function(e) { + e.preventDefault(); + const target = document.querySelector(this.getAttribute('href')); + if (target) { + target.scrollIntoView({ + behavior: 'smooth', + block: 'start' + }); + } + }); + }); +} + +// Intersection Observer for Animations +function initScrollAnimations() { + const observer = new IntersectionObserver((entries) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + entry.target.classList.add('visible'); + } + }); + }, { + threshold: 0.1 + }); + + // Observe all sections + document.querySelectorAll('.section').forEach(section => { + observer.observe(section); + }); +} + +// Status Card Interactions +function initStatusCards() { + const statusCards = document.querySelectorAll('.status-card'); + + statusCards.forEach(card => { + card.addEventListener('mouseenter', () => { + // Add extra glow on hover + card.style.boxShadow = '0 0 30px rgba(99, 102, 241, 0.3)'; + }); + + card.addEventListener('mouseleave', () => { + card.style.boxShadow = ''; + }); + }); +} + +// Vertical Card Interactions +function initVerticalCards() { + const verticalCards = document.querySelectorAll('.vertical-card'); + + verticalCards.forEach(card => { + const icon = card.querySelector('.vertical-icon'); + + card.addEventListener('mouseenter', () => { + if (icon) { + icon.style.transform = 'scale(1.1) rotate(5deg)'; + } + }); + + card.addEventListener('mouseleave', () => { + if (icon) { + icon.style.transform = ''; + } + }); + }); +} + +// Keyboard Navigation +function initKeyboardNavigation() { + document.addEventListener('keydown', (e) => { + // Alt + D for Dashboard + if (e.altKey && e.key === 'd') { + e.preventDefault(); + document.querySelector('[data-view="dashboard"]')?.click(); + } + + // Alt + V for Verticals + if (e.altKey && e.key === 'v') { + e.preventDefault(); + document.querySelector('[data-view="verticals"]')?.click(); + } + + // Alt + G for Governance + if (e.altKey && e.key === 'g') { + e.preventDefault(); + document.querySelector('[data-view="governance"]')?.click(); + } + + // Alt + T for Theme Toggle + if (e.altKey && e.key === 't') { + e.preventDefault(); + document.querySelector('.theme-toggle')?.click(); + } + }); +} + +// Welcome Animation +function playWelcomeAnimation() { + const sections = document.querySelectorAll('.section'); + + sections.forEach((section, index) => { + setTimeout(() => { + section.style.opacity = '0'; + section.style.transform = 'translateY(20px)'; + + setTimeout(() => { + section.style.transition = 'all 0.6s ease'; + section.style.opacity = '1'; + section.style.transform = 'translateY(0)'; + }, 50); + }, index * 100); + }); +} + +// Initialize everything when DOM is ready +document.addEventListener('DOMContentLoaded', () => { + console.log('πŸš€ Heady Admin UI Initialized'); + + // Initialize all features + initThemeToggle(); + initNavigation(); + initNotifications(); + addRippleEffect(); + startRealtimeUpdates(); + initSmoothScroll(); + initScrollAnimations(); + initStatusCards(); + initVerticalCards(); + initKeyboardNavigation(); + + // Play welcome animation + setTimeout(() => { + playWelcomeAnimation(); + }, 100); + + // Log system info + console.log('πŸ“Š Dashboard loaded successfully'); + console.log('⚑ Real-time updates active'); + console.log('🎨 Animations enabled'); +}); + +// Handle visibility change +document.addEventListener('visibilitychange', () => { + if (document.hidden) { + console.log('πŸ‘‹ Dashboard hidden'); + } else { + console.log('πŸ‘€ Dashboard visible'); + } +}); diff --git a/HeadySystems_v13/apps/heady_admin_ui/js/particles.js b/HeadySystems_v13/apps/heady_admin_ui/js/particles.js new file mode 100644 index 00000000..c47e3853 --- /dev/null +++ b/HeadySystems_v13/apps/heady_admin_ui/js/particles.js @@ -0,0 +1,120 @@ +/** + * Heady Admin UI - Particle System + * Generates floating animated particles in the background + */ + +class ParticleSystem { + constructor(containerId, options = {}) { + this.container = document.getElementById(containerId); + if (!this.container) { + console.warn(`Container ${containerId} not found`); + return; + } + + this.options = { + count: options.count || 30, + minSize: options.minSize || 2, + maxSize: options.maxSize || 8, + colors: options.colors || [ + 'rgba(99, 102, 241, 0.6)', // primary + 'rgba(139, 92, 246, 0.6)', // secondary + 'rgba(245, 158, 11, 0.5)', // accent + 'rgba(16, 185, 129, 0.5)' // success + ], + speed: options.speed || 1 + }; + + this.particles = []; + this.init(); + } + + init() { + // Create particles + for (let i = 0; i < this.options.count; i++) { + this.createParticle(); + } + + // Start animation loop + this.animate(); + } + + createParticle() { + const particle = document.createElement('div'); + particle.className = 'particle'; + + // Random properties + const size = this.randomBetween(this.options.minSize, this.options.maxSize); + const x = this.randomBetween(0, 100); + const y = this.randomBetween(0, 100); + const color = this.options.colors[Math.floor(Math.random() * this.options.colors.length)]; + const duration = this.randomBetween(15, 30); + const delay = this.randomBetween(0, 10); + + // Apply styles + Object.assign(particle.style, { + width: `${size}px`, + height: `${size}px`, + left: `${x}%`, + top: `${y}%`, + background: `radial-gradient(circle, ${color}, transparent)`, + animationDuration: `${duration}s`, + animationDelay: `-${delay}s` + }); + + this.container.appendChild(particle); + this.particles.push({ + element: particle, + x: x, + y: y, + size: size, + speedX: this.randomBetween(-0.5, 0.5) * this.options.speed, + speedY: this.randomBetween(-1, -0.2) * this.options.speed + }); + } + + randomBetween(min, max) { + return Math.random() * (max - min) + min; + } + + animate() { + // Animate particles with requestAnimationFrame for smooth movement + const animateFrame = () => { + this.particles.forEach(particle => { + // Update position + particle.x += particle.speedX * 0.1; + particle.y += particle.speedY * 0.1; + + // Wrap around screen + if (particle.x < -5) particle.x = 105; + if (particle.x > 105) particle.x = -5; + if (particle.y < -5) particle.y = 105; + if (particle.y > 105) particle.y = -5; + + // Apply position + particle.element.style.left = `${particle.x}%`; + particle.element.style.top = `${particle.y}%`; + }); + + requestAnimationFrame(animateFrame); + }; + + requestAnimationFrame(animateFrame); + } + + destroy() { + this.particles.forEach(particle => { + particle.element.remove(); + }); + this.particles = []; + } +} + +// Initialize particle system when DOM is loaded +document.addEventListener('DOMContentLoaded', () => { + const particleSystem = new ParticleSystem('particles-container', { + count: 25, + minSize: 3, + maxSize: 10, + speed: 0.8 + }); +}); diff --git a/HeadySystems_v13/apps/heady_field/dashboard.html b/HeadySystems_v13/apps/heady_field/dashboard.html new file mode 100644 index 00000000..de37b364 --- /dev/null +++ b/HeadySystems_v13/apps/heady_field/dashboard.html @@ -0,0 +1,301 @@ + + + + + + HeadyField - Agricultural IoT Dashboard + + + + + + + +
+
+
+
+

+ + ⚑ Heady + + / + 🌾 HeadyField +

+
+ + ← Back to Dashboard + +
+
+ +
+ +
+

+ 🌾 + Field Status Overview +

+
+
+
βœ“
+
+

Active Sensors

+

156 / 160

+
+
+
+
+
+ +
+
🌑️
+
+

Avg Temperature

+

72Β°F

+
+
+ +
+
πŸ’§
+
+

Soil Moisture

+

68%

+
+
+ +
+
🌱
+
+

Fields Monitored

+

8

+
+
+
+
+ + +
+

+ πŸ’§ + Soil Moisture Levels +

+
+
+

Real-time Moisture Distribution

+
+
+
+
+ 0% + Current: 68% + 100% +
+
+
+
+ + +
+

+ πŸ“Š + Live Sensor Readings +

+
+
+
+
🌑️
+

Temperature

+ 72Β°F +

↑ 2Β°F from yesterday

+
+
+ +
+
+
πŸ’§
+

Humidity

+ 58% +

Optimal

+
+
+ +
+
+
🌱
+

pH Level

+ 6.8 +

Balanced

+
+
+ +
+
+
β˜€οΈ
+

Light

+ 8200 lux +

Excellent

+
+
+ +
+
+
🌾
+

NPK Levels

+ Good +

N:14 P:8 K:12

+
+
+ +
+
+
πŸ’¨
+

Wind Speed

+ 8 mph +

Light breeze

+
+
+
+
+ + +
+

+ πŸ—ΊοΈ + Monitored Fields +

+
+
+
+

North Field A

+

+ Wheat cultivation zone +

+
+
+ Sensors +

24

+
+
+ Health +

98%

+
+
+ Acres +

45

+
+
+
+
+
+
+
+ +
+
+

South Field B

+

+ Corn production area +

+
+
+ Sensors +

32

+
+
+ Health +

95%

+
+
+ Acres +

62

+
+
+
+
+
+
+
+
+
+
+
+ + + + + diff --git a/HeadySystems_v13/apps/heady_kinetic/dashboard.html b/HeadySystems_v13/apps/heady_kinetic/dashboard.html new file mode 100644 index 00000000..3f8e7e42 --- /dev/null +++ b/HeadySystems_v13/apps/heady_kinetic/dashboard.html @@ -0,0 +1,360 @@ + + + + + + HeadyKinetic - Thermal Monitoring Dashboard + + + + + + + +
+
+
+
+

+ + ⚑ Heady + + / + πŸ”₯ HeadyKinetic +

+
+ + ← Back to Dashboard + +
+
+ +
+ +
+

+ πŸ”₯ + Thermal System Status +

+
+
+
βœ“
+
+

System Health

+

Operational

+
+
+
+
+
+ +
+
πŸ“Š
+
+

Active Sensors

+

89 / 92

+
+
+ +
+
🌑️
+
+

Avg Temperature

+

72Β°F

+
+
+ +
+
⚑
+
+

Energy Usage

+

1.2 kW

+
+
+
+
+ + +
+

+ πŸ—ΊοΈ + Live Thermal Heat Map +

+
+
+

Temperature Distribution

+
+ +
+
+ ❄️ 45Β°F + 🌑️ 72Β°F + πŸ”₯ 95Β°F +
+
+
+
+ + +
+

+ πŸ“Š + Temperature Zones +

+
+
+
+

Zone A - Server Room

+
+ 68Β°F + Optimal +
+
+
+
+

+ 🟒 Within Range +

+
+
+ +
+
+

Zone B - Manufacturing

+
+ 82Β°F + Active +
+
+
+
+

+ 🟑 Elevated +

+
+
+ +
+
+

Zone C - Storage

+
+ 58Β°F + Cool +
+
+
+
+

+ πŸ”΅ Below Average +

+
+
+
+
+ + +
+

+ 🌑️ + Real-time Sensor Data +

+
+
+
+
🌑️
+

Temperature

+ 72Β°F +

Normal range

+
+
+ +
+
+
πŸ’¨
+

Airflow

+ 450 CFM +

Optimal

+
+
+ +
+
+
πŸ’§
+

Humidity

+ 45% +

Good

+
+
+ +
+
+
⚑
+

Power Draw

+ 1.2 kW +

Efficient

+
+
+
+
+ + +
+

+ πŸ”” + Recent Thermal Events +

+
+
+
+
+
+
+ 3 min ago +

Zone A temperature normalized (68Β°F)

+
+
+
+
+
+ 12 min ago +

Cooling system adjustment in Zone B

+
+
+
+
+
+ 25 min ago +

Temperature spike detected in Zone B (85Β°F)

+
+
+
+
+
+ 45 min ago +

All systems within normal parameters

+
+
+
+
+
+
+
+
+ + + + + diff --git a/HeadySystems_v13/apps/heady_legacy/dashboard.html b/HeadySystems_v13/apps/heady_legacy/dashboard.html new file mode 100644 index 00000000..f07435f5 --- /dev/null +++ b/HeadySystems_v13/apps/heady_legacy/dashboard.html @@ -0,0 +1,339 @@ + + + + + + HeadyLegacy - Biometric Dashboard + + + + + + + +
+
+
+
+

+ + ⚑ Heady + + / + πŸ‘€ HeadyLegacy +

+
+ + ← Back to Dashboard + +
+
+ +
+ +
+

+ πŸ‘€ + Biometric System Status +

+
+
+
βœ“
+
+

System Health

+

Operational

+
+
+
+
+
+ +
+
πŸ‘₯
+
+

Registered Users

+

1,247

+
+
+ +
+
πŸ”
+
+

Scans Today

+

8,432

+
+
+ +
+
βœ…
+
+

Success Rate

+

99.2%

+
+
+
+
+ + +
+

+ ❀️ + Live Biometric Monitoring +

+
+
+

Active Scanner Simulation

+
+ πŸ‘οΈ +
+
+

+ 🟒 Scanner Active - Ready for Authentication +

+
+
+
+ + +
+

+ πŸ“Š + Authentication Metrics +

+
+
+
+
πŸ‘†
+

Fingerprint

+ 3,245 +

Today's scans

+
+
+ +
+
+
πŸ‘οΈ
+

Iris Scan

+ 2,187 +

Today's scans

+
+
+ +
+
+
🎭
+

Facial Recognition

+ 2,890 +

Today's scans

+
+
+ +
+
+
πŸ—£οΈ
+

Voice Auth

+ 110 +

Today's scans

+
+
+
+
+ + +
+

+ πŸ“‹ + Recent Authentication Events +

+
+
+
+
+
+
+ 2 sec ago +

User #1247 - Fingerprint authentication successful

+
+
+
+
+
+ 5 sec ago +

User #0892 - Iris scan completed

+
+
+
+
+
+ 12 sec ago +

User #0445 - Facial recognition verified

+
+
+
+
+
+ 18 sec ago +

User #0234 - Fingerprint retry attempted (1/3)

+
+
+
+
+
+ 25 sec ago +

User #1103 - Voice authentication successful

+
+
+
+
+
+
+ + +
+

+ πŸ”’ + Security & Compliance +

+
+
+
+
+

βœ… Data Encryption

+

+ AES-256 encryption active +

+
+
+

βœ… Audit Logging

+

+ All events tracked and stored +

+
+
+

βœ… GDPR Compliant

+

+ Privacy regulations enforced +

+
+
+

βœ… Liveness Detection

+

+ Anti-spoofing measures active +

+
+
+
+
+
+
+
+ + + + + diff --git a/HeadySystems_v13/apps/heady_make/dashboard.html b/HeadySystems_v13/apps/heady_make/dashboard.html new file mode 100644 index 00000000..b76838fe --- /dev/null +++ b/HeadySystems_v13/apps/heady_make/dashboard.html @@ -0,0 +1,251 @@ + + + + + + HeadyMake - 3D Printing Dashboard + + + + + + + +
+
+
+
+

+ + ⚑ Heady + + / + 🏭 HeadyMake +

+
+ + ← Back to Dashboard + +
+
+ +
+ +
+

+ 🏭 + Manufacturing Status +

+
+
+
βœ“
+
+

Active Printers

+

8 / 12

+
+ πŸ–¨οΈ + Operational +
+
+
+ +
+
πŸ“Š
+
+

Print Queue

+

12 jobs

+
+
+
+
+
+ +
+
⏱️
+
+

Est. Completion

+

4h 32m

+
+
+ +
+
πŸ“ˆ
+
+

Completed Today

+

247

+
+
+
+
+ + +
+

+ 🎨 + Live Print Visualization +

+
+
+

Current Print: Widget_v3.stl

+
+
+ Progress +

+ 67% +

+
+
+ Layer +

134 / 200

+
+
+ Time Remaining +

28 min

+
+
+ + + +
+
+
+
+
+
+ + +
+

+ πŸ“‹ + Print Queue +

+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
File NameStatusProgressTime
Widget_v3.stl + Printing67%28 min left
Bracket_final.stl + Queued0%45 min
Gear_assembly.stl + Queued0%1h 20m
+
+
+
+
+
+ + + + +