66.8 kB
CoachReno's picture
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Jesus Generation Leadership Companion</title> <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/css/all.min.css"> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <style> body { font-family: 'Inter', sans-serif; } .gradient-bg { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); } .card-shadow { box-shadow: 0 10px 25px rgba(0,0,0,0.1); } .trait-shepherd { background: linear-gradient(135deg, #4ade80 0%, #22c55e 100%); } .trait-prophetic { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); } .trait-priestly { background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%); } .trait-visionary { background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%); } .trait-builder { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); } </style> </head> <body class="bg-gray-50 min-h-screen"> <!-- Navigation --> <nav class="gradient-bg text-white p-4 sticky top-0 z-50"> <div class="container mx-auto flex justify-between items-center"> <div class="flex items-center space-x-3"> <i class="fas fa-crown text-2xl"></i> <h1 class="text-xl font-bold">Jesus Generation Leadership</h1> </div> <div class="flex items-center space-x-4"> <span id="userGreeting" class="hidden md:block">Welcome, Barbara!</span> <div class="relative"> <button id="profileBtn" class="bg-white bg-opacity-20 rounded-full p-2 hover:bg-opacity-30 transition-all"> <i class="fas fa-user"></i> </button> </div> </div> </div> </nav> <!-- Main Container --> <div class="container mx-auto p-4 max-w-7xl"> <!-- Profile Selection Modal --> <div id="profileModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"> <div class="bg-white rounded-lg p-8 max-w-md w-full mx-4 card-shadow"> <h2 class="text-2xl font-bold mb-6 text-center text-gray-800">Select Your Profile</h2> <div class="space-y-4"> <button onclick="loadProfile('barbara')" class="w-full p-4 bg-gradient-to-r from-green-400 to-green-500 text-white rounded-lg hover:from-green-500 hover:to-green-600 transition-all"> <div class="text-left"> <div class="font-semibold">Barbara Wynn</div> <div class="text-sm opacity-90">Tier 5 - Shepherd/Prophetic/Priestly</div> <div class="text-xs opacity-75">Department Head / Pastoral Oversight</div> </div> </button> <button onclick="loadProfile('demo')" class="w-full p-4 bg-gradient-to-r from-blue-400 to-blue-500 text-white rounded-lg hover:from-blue-500 hover:to-blue-600 transition-all"> <div class="text-left"> <div class="font-semibold">Demo Profile</div> <div class="text-sm opacity-90">Tier 3 - Visionary/Builder</div> <div class="text-xs opacity-75">Team Leader</div> </div> </button> </div> </div> </div> <!-- Sidebar Navigation --> <div class="flex flex-col lg:flex-row gap-6"> <div class="lg:w-64 bg-white rounded-lg card-shadow p-6"> <div class="space-y-2"> <button onclick="showSection('dashboard')" class="nav-btn w-full text-left p-3 rounded-lg hover:bg-gray-100 transition-all flex items-center space-x-3"> <i class="fas fa-tachometer-alt text-blue-500"></i> <span>Dashboard</span> </button> <button onclick="showSection('coaching')" class="nav-btn w-full text-left p-3 rounded-lg hover:bg-gray-100 transition-all flex items-center space-x-3"> <i class="fas fa-comments text-green-500"></i> <span>AI Coaching</span> </button> <button onclick="showSection('mentees')" class="nav-btn w-full text-left p-3 rounded-lg hover:bg-gray-100 transition-all flex items-center space-x-3"> <i class="fas fa-users text-purple-500"></i> <span>Mentee Hub</span> </button> <button onclick="showSection('analytics')" class="nav-btn w-full text-left p-3 rounded-lg hover:bg-gray-100 transition-all flex items-center space-x-3"> <i class="fas fa-chart-line text-red-500"></i> <span>Analytics</span> </button> <button onclick="showSection('prayer')" class="nav-btn w-full text-left p-3 rounded-lg hover:bg-gray-100 transition-all flex items-center space-x-3"> <i class="fas fa-praying-hands text-yellow-500"></i> <span>Prayer Journal</span> </button> <button onclick="showSection('scripture')" class="nav-btn w-full text-left p-3 rounded-lg hover:bg-gray-100 transition-all flex items-center space-x-3"> <i class="fas fa-book text-indigo-500"></i> <span>Scripture</span> </button> </div> </div> <!-- Main Content --> <div class="flex-1"> <!-- Dashboard Section --> <div id="dashboard" class="section"> <!-- Profile Header --> <div class="bg-white rounded-lg card-shadow p-6 mb-6"> <div class="flex flex-col md:flex-row md:items-center md:justify-between"> <div class="flex items-center space-x-4 mb-4 md:mb-0"> <div class="w-16 h-16 trait-shepherd rounded-full flex items-center justify-center text-white text-2xl font-bold"> BW </div> <div> <h2 id="profileName" class="text-2xl font-bold text-gray-800">Barbara Wynn</h2> <p id="profileTitle" class="text-gray-600">Tier 5 Multiplier - Department Head</p> <div id="profileTraits" class="flex flex-wrap gap-2 mt-2"> <span class="px-3 py-1 bg-green-100 text-green-800 rounded-full text-sm">Shepherd</span> <span class="px-3 py-1 bg-purple-100 text-purple-800 rounded-full text-sm">Priestly</span> <span class="px-3 py-1 bg-yellow-100 text-yellow-800 rounded-full text-sm">Prophetic</span> </div> </div> </div> <div class="text-right"> <div class="text-3xl font-bold text-blue-600" id="leadershipScore">44.6</div> <div class="text-gray-600">Leadership Score</div> <div class="text-sm text-gray-500">360Β° Pending</div> </div> </div> </div> <!-- Weekly Focus Cards --> <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6 mb-6"> <div class="bg-white rounded-lg card-shadow p-6"> <div class="flex items-center justify-between mb-4"> <h3 class="font-semibold text-gray-800">This Week's Focus</h3> <i class="fas fa-target text-blue-500"></i> </div> <p class="text-gray-600 mb-4">Leadership Temperature Check - Connect with your key leaders and assess their heart temperature toward mission.</p> <div class="flex items-center justify-between"> <span class="text-sm text-gray-500">Progress</span> <span class="text-sm font-semibold text-blue-600">2/3 completed</span> </div> <div class="w-full bg-gray-200 rounded-full h-2 mt-2"> <div class="bg-blue-500 h-2 rounded-full" style="width: 67%"></div> </div> </div> <div class="bg-white rounded-lg card-shadow p-6"> <div class="flex items-center justify-between mb-4"> <h3 class="font-semibold text-gray-800">Mentee Development</h3> <i class="fas fa-users text-green-500"></i> </div> <p class="text-gray-600 mb-4">3 active mentees in development. Sarah ready for Tier 3 advancement.</p> <div class="flex justify-between text-sm"> <span class="text-green-600">βœ“ Sarah (Ready)</span> <span class="text-yellow-600">β—‹ Marcus (Growing)</span> <span class="text-blue-600">β—‹ Lisa (New)</span> </div> </div> <div class="bg-white rounded-lg card-shadow p-6"> <div class="flex items-center justify-between mb-4"> <h3 class="font-semibold text-gray-800">Spiritual Rhythm</h3> <i class="fas fa-heart text-red-500"></i> </div> <p class="text-gray-600 mb-4">Sabbath boundaries holding strong. Prayer life needs refresh this week.</p> <div class="flex justify-between text-sm"> <span class="text-green-600">Sabbath: βœ“</span> <span class="text-yellow-600">Prayer: β—‹</span> <span class="text-green-600">Study: βœ“</span> </div> </div> </div> <!-- Today's Word --> <div class="bg-white rounded-lg card-shadow p-6 mb-6"> <h3 class="text-lg font-semibold mb-3 flex items-center"> <i class="fas fa-dove text-blue-500 mr-2"></i> Today's Word for You </h3> <div class="bg-blue-50 rounded-lg p-4"> <p class="text-gray-700 italic mb-3">"He tends his flock like a shepherd: He gathers the lambs in his arms and carries them close to his heart; he gently leads those that have young."</p> <p class="text-gray-600 text-sm">Isaiah 40:11 (CSB Summary)</p> <div class="mt-3 pt-3 border-t border-blue-200"> <p class="text-gray-700"><strong>For Your Heart Today:</strong> Barbara, your Shepherd heart is both your strength and your calling. This week, discern which of your leaders need "gathering close" versus "gentle leading forward." Trust the Holy Spirit to show you the difference.</p> </div> </div> </div> <!-- Quick Actions --> <div class="grid md:grid-cols-2 gap-6"> <div class="bg-white rounded-lg card-shadow p-6"> <h3 class="font-semibold mb-4">Quick Actions</h3> <div class="space-y-3"> <button class="w-full p-3 text-left bg-blue-50 hover:bg-blue-100 rounded-lg transition-all flex items-center space-x-3"> <i class="fas fa-plus text-blue-500"></i> <span>Log Mentoring Session</span> </button> <button class="w-full p-3 text-left bg-green-50 hover:bg-green-100 rounded-lg transition-all flex items-center space-x-3"> <i class="fas fa-journal-whills text-green-500"></i> <span>Add Prayer Entry</span> </button> <button class="w-full p-3 text-left bg-purple-50 hover:bg-purple-100 rounded-lg transition-all flex items-center space-x-3"> <i class="fas fa-lightbulb text-purple-500"></i> <span>Request Coaching</span> </button> </div> </div> <div class="bg-white rounded-lg card-shadow p-6"> <h3 class="font-semibold mb-4">Upcoming</h3> <div class="space-y-3"> <div class="flex items-center space-x-3 p-2"> <div class="w-2 h-2 bg-blue-500 rounded-full"></div> <div class="flex-1"> <div class="text-sm font-medium">Weekly Coaching Session</div> <div class="text-xs text-gray-500">Tomorrow, 9:00 AM</div> </div> </div> <div class="flex items-center space-x-3 p-2"> <div class="w-2 h-2 bg-green-500 rounded-full"></div> <div class="flex-1"> <div class="text-sm font-medium">Sarah's Advancement Review</div> <div class="text-xs text-gray-500">Friday, 2:00 PM</div> </div> </div> <div class="flex items-center space-x-3 p-2"> <div class="w-2 h-2 bg-yellow-500 rounded-full"></div> <div class="flex-1"> <div class="text-sm font-medium">Department Leadership Meeting</div> <div class="text-xs text-gray-500">Next Monday, 10:00 AM</div> </div> </div> </div> </div> </div> </div> <!-- AI Coaching Section --> <div id="coaching" class="section hidden"> <div class="bg-white rounded-lg card-shadow p-6 mb-6"> <h2 class="text-2xl font-bold mb-6 flex items-center"> <i class="fas fa-robot text-blue-500 mr-3"></i> AI Leadership Coach </h2> <!-- Coaching Interface --> <div class="space-y-6"> <!-- Current Session --> <div class="bg-blue-50 rounded-lg p-6"> <div class="flex items-start space-x-4"> <div class="w-10 h-10 bg-blue-500 rounded-full flex items-center justify-center text-white"> <i class="fas fa-robot"></i> </div> <div class="flex-1"> <h3 class="font-semibold text-gray-800 mb-2">Weekly Coaching Session - Week of January 15</h3> <div class="space-y-4"> <div class="bg-white rounded-lg p-4"> <p class="text-gray-700 mb-3"><strong>Reflection Question:</strong></p> <p class="text-gray-600">Barbara, as someone with strong Shepherd and Prophetic traits, when was the last time you felt the Holy Spirit redirect your pastoral instincts? Sometimes our natural gifting can become our limitation if we're not staying sensitive to His leading in the moment.</p> </div> <div class="bg-white rounded-lg p-4"> <p class="text-gray-700 mb-3"><strong>This Week's Challenge:</strong></p> <p class="text-gray-600">"The Leadership Temperature Check" - Take 30 minutes to evaluate your current 3 mentees. Ask yourself: Who needs more structure vs. more encouragement? Which one is ready for their next assignment? Where am I giving advice when I should be asking questions?</p> </div> <div class="bg-white rounded-lg p-4"> <p class="text-gray-700 mb-3"><strong>Boundary Check:</strong></p> <p class="text-gray-600">Your shepherding heart wants to care for everyone, but Tier 5 leaders must guard their anointing. Are you saying yes to things that Tier 2-3 leaders in your department could handle?</p> </div> </div> </div> </div> </div> <!-- Response Area --> <div class="bg-gray-50 rounded-lg p-6"> <h4 class="font-semibold mb-3">Your Response:</h4> <textarea class="w-full h-32 p-3 border rounded-lg resize-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="Share your thoughts, insights, or questions here..."></textarea> <div class="flex justify-between items-center mt-4"> <div class="text-sm text-gray-500">Your coach will respond within 24 hours</div> <button class="bg-blue-500 text-white px-6 py-2 rounded-lg hover:bg-blue-600 transition-all">Submit Response</button> </div> </div> <!-- Previous Sessions --> <div class="border-t pt-6"> <h4 class="font-semibold mb-4">Previous Sessions</h4> <div class="space-y-4"> <div class="bg-gray-50 rounded-lg p-4 cursor-pointer hover:bg-gray-100 transition-all"> <div class="flex justify-between items-center"> <div> <h5 class="font-medium">Mentoring Mastery Week</h5> <p class="text-sm text-gray-600">Focus: Developing your mentees' leadership capacity</p> </div> <div class="text-sm text-gray-500">Jan 8, 2024</div> </div> </div> <div class="bg-gray-50 rounded-lg p-4 cursor-pointer hover:bg-gray-100 transition-all"> <div class="flex justify-between items-center"> <div> <h5 class="font-medium">Prophetic Discernment Check</h5> <p class="text-sm text-gray-600">Focus: Listening to the Spirit in leadership decisions</p> </div> <div class="text-sm text-gray-500">Jan 1, 2024</div> </div> </div> </div> </div> </div> </div> </div> <!-- Mentee Hub Section --> <div id="mentees" class="section hidden"> <div class="bg-white rounded-lg card-shadow p-6"> <h2 class="text-2xl font-bold mb-6 flex items-center"> <i class="fas fa-users text-green-500 mr-3"></i> Mentee Development Hub </h2> <!-- Mentee Cards --> <div class="grid md:grid-cols-3 gap-6"> <!-- Sarah Johnson --> <div class="bg-gradient-to-br from-green-50 to-green-100 rounded-lg p-6 border border-green-200"> <div class="flex items-center justify-between mb-4"> <div class="flex items-center space-x-3"> <div class="w-12 h-12 bg-green-500 rounded-full flex items-center justify-center text-white font-bold">SJ</div> <div> <h3 class="font-semibold">Sarah Johnson</h3> <p class="text-sm text-gray-600">Tier 2 β†’ Tier 3 Ready</p> </div> </div> <span class="px-2 py-1 bg-green-500 text-white text-xs rounded-full">Ready</span> </div> <div class="space-y-3"> <div> <h4 class="font-medium text-sm">Dominant Traits:</h4> <div class="flex gap-1 mt-1"> <span class="px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded">Visionary</span> <span class="px-2 py-1 bg-red-100 text-red-800 text-xs rounded">Builder</span> </div> </div> <div> <h4 class="font-medium text-sm">Recent Progress:</h4> <ul class="text-sm text-gray-600 mt-1 space-y-1"> <li class="flex items-center"><i class="fas fa-check text-green-500 mr-2 text-xs"></i>Led first team meeting</li> <li class="flex items-center"><i class="fas fa-check text-green-500 mr-2 text-xs"></i>Completed conflict resolution</li> <li class="flex items-center"><i class="fas fa-clock text-yellow-500 mr-2 text-xs"></i>Working on vision casting</li> </ul> </div> <div> <h4 class="font-medium text-sm">Next Steps:</h4> <p class="text-sm text-gray-600">Schedule advancement interview for Tier 3 leadership role.</p> </div> <div class="flex gap-2 pt-2"> <button class="flex-1 bg-green-500 text-white py-2 px-3 rounded text-sm hover:bg-green-600 transition-all">Schedule Meeting</button> <button class="flex-1 bg-white border border-green-300 text-green-700 py-2 px-3 rounded text-sm hover:bg-green-50 transition-all">View Details</button> </div> </div> </div> <!-- Marcus Chen --> <div class="bg-gradient-to-br from-yellow-50 to-yellow-100 rounded-lg p-6 border border-yellow-200"> <div class="flex items-center justify-between mb-4"> <div class="flex items-center space-x-3"> <div class="w-12 h-12 bg-yellow-500 rounded-full flex items-center justify-center text-white font-bold">MC</div> <div> <h3 class="font-semibold">Marcus Chen</h3> <p class="text-sm text-gray-600">Tier 2 - Growing</p> </div> </div> <span class="px-2 py-1 bg-yellow-500 text-white text-xs rounded-full">Growing</span> </div> <div class="space-y-3"> <div> <h4 class="font-medium text-sm">Dominant Traits:</h4> <div class="flex gap-1 mt-1"> <span class="px-2 py-1 bg-green-100 text-green-800 text-xs rounded">Shepherd</span> <span class="px-2 py-1 bg-purple-100 text-purple-800 text-xs rounded">Priestly</span> </div> </div> <div> <h4 class="font-medium text-sm">Current Focus:</h4> <ul class="text-sm text-gray-600 mt-1 space-y-1"> <li class="flex items-center"><i class="fas fa-clock text-yellow-500 mr-2 text-xs"></i>Building consistency in leadership</li> <li class="flex items-center"><i class="fas fa-clock text-yellow-500 mr-2 text-xs"></i>Developing prayer ministry</li> <li class="flex items-center"><i class="fas fa-check text-green-500 mr-2 text-xs"></i>Strong in pastoral care</li> </ul> </div> <div> <h4 class="font-medium text-sm">Next Challenge:</h4> <p class="text-sm text-gray-600">Lead a small group for 3 months to develop leadership rhythm.</p> </div> <div class="flex gap-2 pt-2"> <button class="flex-1 bg-yellow-500 text-white py-2 px-3 rounded text-sm hover:bg-yellow-600 transition-all">Check Progress</button> <button class="flex-1 bg-white border border-yellow-300 text-yellow-700 py-2 px-3 rounded text-sm hover:bg-yellow-50 transition-all">Send Encouragement</button> </div> </div> </div> <!-- Lisa Rodriguez --> <div class="bg-gradient-to-br from-blue-50 to-blue-100 rounded-lg p-6 border border-blue-200"> <div class="flex items-center justify-between mb-4"> <div class="flex items-center space-x-3"> <div class="w-12 h-12 bg-blue-500 rounded-full flex items-center justify-center text-white font-bold">LR</div> <div> <h3 class="font-semibold">Lisa Rodriguez</h3> <p class="text-sm text-gray-600">Tier 1 β†’ Tier 2</p> </div> </div> <span class="px-2 py-1 bg-blue-500 text-white text-xs rounded-full">New</span> </div> <div class="space-y-3"> <div> <h4 class="font-medium text-sm">Emerging Traits:</h4> <div class="flex gap-1 mt-1"> <span class="px-2 py-1 bg-yellow-100 text-yellow-800 text-xs rounded">Prophetic</span> <span class="px-2 py-1 bg-cyan-100 text-cyan-800 text-xs rounded">Evangelistic</span> </div> </div> <div> <h4 class="font-medium text-sm">Foundation Building:</h4> <ul class="text-sm text-gray-600 mt-1 space-y-1"> <li class="flex items-center"><i class="fas fa-check text-green-500 mr-2 text-xs"></i>Personal devotional life</li> <li class="flex items-center"><i class="fas fa-clock text-yellow-500 mr-2 text-xs"></i>Scripture study rhythm</li> <li class="flex items-center"><i class="fas fa-clock text-yellow-500 mr-2 text-xs"></i>First ministry assignment</li> </ul> </div> <div> <h4 class="font-medium text-sm">Next Steps:</h4> <p class="text-sm text-gray-600">Begin with prayer team ministry to develop prophetic gifting.</p> </div> <div class="flex gap-2 pt-2"> <button class="flex-1 bg-blue-500 text-white py-2 px-3 rounded text-sm hover:bg-blue-600 transition-all">Plan Next Meeting</button> <button class="flex-1 bg-white border border-blue-300 text-blue-700 py-2 px-3 rounded text-sm hover:bg-blue-50 transition-all">Assign Reading</button> </div> </div> </div> </div> <!-- Mentoring Tools --> <div class="mt-8 border-t pt-6"> <h3 class="font-semibold mb-4">Mentoring Tools & Resources</h3> <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-4"> <button class="p-4 bg-purple-50 hover:bg-purple-100 rounded-lg text-left transition-all"> <i class="fas fa-clipboard-list text-purple-500 mb-2"></i> <div class="font-medium">Assessment Templates</div> <div class="text-sm text-gray-600">Leadership readiness tools</div> </button> <button class="p-4 bg-green-50 hover:bg-green-100 rounded-lg text-left transition-all"> <i class="fas fa-route text-green-500 mb-2"></i> <div class="font-medium">Growth Pathways</div> <div class="text-sm text-gray-600">Tier advancement guides</div> </button> <button class="p-4 bg-blue-50 hover:bg-blue-100 rounded-lg text-left transition-all"> <i class="fas fa-comments text-blue-500 mb-2"></i> <div class="font-medium">Coaching Questions</div> <div class="text-sm text-gray-600">Powerful conversation starters</div> </button> <button class="p-4 bg-red-50 hover:bg-red-100 rounded-lg text-left transition-all"> <i class="fas fa-calendar-alt text-red-500 mb-2"></i> <div class="font-medium">Meeting Templates</div> <div class="text-sm text-gray-600">Structured mentoring sessions</div> </button> </div> </div> </div> </div> <!-- Analytics Section --> <div id="analytics" class="section hidden"> <div class="bg-white rounded-lg card-shadow p-6 mb-6"> <h2 class="text-2xl font-bold mb-6 flex items-center"> <i class="fas fa-chart-line text-red-500 mr-3"></i> Leadership Analytics </h2> <!-- Key Metrics --> <div class="grid md:grid-cols-4 gap-6 mb-8"> <div class="bg-blue-50 rounded-lg p-4 text-center"> <div class="text-3xl font-bold text-blue-600">44.6</div> <div class="text-sm text-gray-600">Leadership Score</div> <div class="text-xs text-blue-500 mt-1">↑ 2.3 this month</div> </div> <div class="bg-green-50 rounded-lg p-4 text-center"> <div class="text-3xl font-bold text-green-600">3</div> <div class="text-sm text-gray-600">Active Mentees</div> <div class="text-xs text-green-500 mt-1">1 ready for advancement</div> </div> <div class="bg-purple-50 rounded-lg p-4 text-center"> <div class="text-3xl font-bold text-purple-600">12</div> <div class="text-sm text-gray-600">Leaders Influenced</div> <div class="text-xs text-purple-500 mt-1">Direct + Indirect</div> </div> <div class="bg-yellow-50 rounded-lg p-4 text-center"> <div class="text-3xl font-bold text-yellow-600">89%</div> <div class="text-sm text-gray-600">Goal Completion</div> <div class="text-xs text-yellow-500 mt-1">This quarter</div> </div> </div> <!-- Charts --> <div class="grid lg:grid-cols-2 gap-6 mb-8"> <div class="bg-gray-50 rounded-lg p-6"> <h3 class="font-semibold mb-4">Leadership Growth Trend</h3> <canvas id="growthChart" style="height: 300px;"></canvas> </div> <div class="bg-gray-50 rounded-lg p-6"> <h3 class="font-semibold mb-4">Trait Development</h3> <canvas id="traitsChart" style="height: 300px;"></canvas> </div> </div> <!-- Mentee Progress --> <div class="bg-gray-50 rounded-lg p-6"> <h3 class="font-semibold mb-4">Mentee Development Pipeline</h3> <div class="space-y-4"> <div class="flex items-center justify-between p-4 bg-white rounded-lg"> <div class="flex items-center space-x-4"> <div class="w-10 h-10 bg-green-500 rounded-full flex items-center justify-center text-white font-bold text-sm">SJ</div> <div> <div class="font-medium">Sarah Johnson</div> <div class="text-sm text-gray-600">Tier 2 β†’ 3 Progression</div> </div> </div> <div class="flex-1 mx-6"> <div class="flex justify-between text-sm mb-1"> <span>Progress to Tier 3</span> <span>95%</span> </div> <div class="w-full bg-gray-200 rounded-full h-2"> <div class="bg-green-500 h-2 rounded-full" style="width: 95%"></div> </div> </div> <span class="px-3 py-1 bg-green-100 text-green-800 text-sm rounded-full">Ready</span> </div> <div class="flex items-center justify-between p-4 bg-white rounded-lg"> <div class="flex items-center space-x-4"> <div class="w-10 h-10 bg-yellow-500 rounded-full flex items-center justify-center text-white font-bold text-sm">MC</div> <div> <div class="font-medium">Marcus Chen</div> <div class="text-sm text-gray-600">Tier 2 Development</div> </div> </div> <div class="flex-1 mx-6"> <div class="flex justify-between text-sm mb-1"> <span>Tier 2 Mastery</span> <span>68%</span> </div> <div class="w-full bg-gray-200 rounded-full h-2"> <div class="bg-yellow-500 h-2 rounded-full" style="width: 68%"></div> </div> </div> <span class="px-3 py-1 bg-yellow-100 text-yellow-800 text-sm rounded-full">Growing</span> </div> <div class="flex items-center justify-between p-4 bg-white rounded-lg"> <div class="flex items-center space-x-4"> <div class="w-10 h-10 bg-blue-500 rounded-full flex items-center justify-center text-white font-bold text-sm">LR</div> <div> <div class="font-medium">Lisa Rodriguez</div> <div class="text-sm text-gray-600">Tier 1 β†’ 2 Foundation</div> </div> </div> <div class="flex-1 mx-6"> <div class="flex justify-between text-sm mb-1"> <span>Foundation Building</span> <span>34%</span> </div> <div class="w-full bg-gray-200 rounded-full h-2"> <div class="bg-blue-500 h-2 rounded-full" style="width: 34%"></div> </div> </div> <span class="px-3 py-1 bg-blue-100 text-blue-800 text-sm rounded-full">Building</span> </div> </div> </div> </div> </div> <!-- Prayer Journal Section --> <div id="prayer" class="section hidden"> <div class="bg-white rounded-lg card-shadow p-6"> <h2 class="text-2xl font-bold mb-6 flex items-center"> <i class="fas fa-praying-hands text-yellow-500 mr-3"></i> Prayer Journal </h2> <!-- New Prayer Entry --> <div class="bg-yellow-50 rounded-lg p-6 mb-6"> <h3 class="font-semibold mb-4">Add New Prayer Entry</h3> <div class="space-y-4"> <div> <label class="block text-sm font-medium text-gray-700 mb-2">Prayer Type</label> <select class="w-full p-3 border rounded-lg focus:ring-2 focus:ring-yellow-500 focus:border-transparent"> <option>Personal Growth</option> <option>Leadership Wisdom</option> <option>Mentee Development</option> <option>Ministry/Department</option> <option>Spiritual Breakthrough</option> <option>Thanksgiving</option> </select> </div> <div> <label class="block text-sm font-medium text-gray-700 mb-2">Prayer Request / Reflection</label> <textarea class="w-full h-32 p-3 border rounded-lg resize-none focus:ring-2 focus:ring-yellow-500 focus:border-transparent" placeholder="Share your heart with the Lord..."></textarea> </div> <button class="bg-yellow-500 text-white px-6 py-3 rounded-lg hover:bg-yellow-600 transition-all">Save Prayer Entry</button> </div> </div> <!-- Recent Prayers --> <div class="space-y-4"> <h3 class="font-semibold">Recent Prayer Entries</h3> <div class="bg-gray-50 rounded-lg p-6"> <div class="flex justify-between items-start mb-3"> <div> <span class="px-3 py-1 bg-blue-100 text-blue-800 text-sm rounded-full">Leadership Wisdom</span> <div class="text-sm text-gray-500 mt-1">January 15, 2024 - 6:30 AM</div> </div> <button class="text-gray-400 hover:text-gray-600"> <i class="fas fa-edit"></i> </button> </div> <p class="text-gray-700 mb-4">Lord, I need wisdom for Sarah's advancement decision. She has the skills, but I sense there's something You want to develop in her character first. Help me discern the right timing and have the courage to delay if needed, even though she's eager to move forward.</p> <div class="border-t pt-3"> <div class="text-sm font-medium text-gray-700 mb-2">Reflection / Answer:</div> <p class="text-sm text-gray-600 italic">Still listening... but feeling peace about having another month of character development focused on humility and servant leadership.</p> </div> </div> <div class="bg-gray-50 rounded-lg p-6"> <div class="flex justify-between items-start mb-3"> <div> <span class="px-3 py-1 bg-green-100 text-green-800 text-sm rounded-full">Thanksgiving</span> <div class="text-sm text-gray-500 mt-1">January 14, 2024 - 7:15 AM</div> </div> <button class="text-gray-400 hover:text-gray-600"> <i class="fas fa-edit"></i> </button> </div> <p class="text-gray-700 mb-4">Grateful for the breakthrough with Marcus this week. Seeing him step into his pastoral gifting with the prayer ministry was beautiful. Thank You for Your patience with both of us as we navigate his development. The Holy Spirit is clearly at work.</p> <div class="border-t pt-3"> <div class="text-sm font-medium text-gray-700 mb-2">Follow-up:</div> <p class="text-sm text-gray-600 italic">Continue to celebrate small wins with Marcus and help him see God's hand in his growth.</p> </div> </div> <div class="bg-gray-50 rounded-lg p-6"> <div class="flex justify-between items-start mb-3"> <div> <span class="px-3 py-1 bg-purple-100 text-purple-800 text-sm rounded-full">Personal Growth</span> <div class="text-sm text-gray-500 mt-1">January 12, 2024 - 5:45 AM</div> </div> <button class="text-gray-400 hover:text-gray-600"> <i class="fas fa-edit"></i> </button> </div> <p class="text-gray-700 mb-4">Father, I feel the weight of carrying so many people's growth and dreams. Help me remember that You are the true Shepherd and I'm just an under-shepherd. Teach me when to hold on and when to release control. My Shepherd heart sometimes tries to do Your job.</p> <div class="border-t pt-3"> <div class="text-sm font-medium text-gray-700 mb-2">Insight Received:</div> <p class="text-sm text-gray-600 italic">The image of a shepherd's staff came to mind - it guides and protects, but doesn't carry the sheep. My role is to guide toward You, not carry their full weight.</p> </div> </div> </div> <!-- Prayer Statistics --> <div class="mt-8 border-t pt-6"> <h3 class="font-semibold mb-4">Prayer Patterns</h3> <div class="grid md:grid-cols-3 gap-4"> <div class="bg-blue-50 rounded-lg p-4 text-center"> <div class="text-2xl font-bold text-blue-600">24</div> <div class="text-sm text-gray-600">Entries This Month</div> </div> <div class="bg-green-50 rounded-lg p-4 text-center"> <div class="text-2xl font-bold text-green-600">6:15 AM</div> <div class="text-sm text-gray-600">Average Prayer Time</div> </div> <div class="bg-purple-50 rounded-lg p-4 text-center"> <div class="text-2xl font-bold text-purple-600">47%</div> <div class="text-sm text-gray-600">Leadership Focus</div> </div> </div> </div> </div> </div> <!-- Scripture Section --> <div id="scripture" class="section hidden"> <div class="bg-white rounded-lg card-shadow p-6"> <h2 class="text-2xl font-bold mb-6 flex items-center"> <i class="fas fa-book text-indigo-500 mr-3"></i> Scripture & Spiritual Formation </h2> <!-- Today's Word --> <div class="bg-indigo-50 rounded-lg p-6 mb-6"> <h3 class="font-semibold mb-3 flex items-center"> <i class="fas fa-dove text-indigo-500 mr-2"></i> Today's Word for Your Leadership </h3> <div class="bg-white rounded-lg p-4"> <p class="text-gray-700 italic mb-3 text-lg">"He tends his flock like a shepherd: He gathers the lambs in his arms and carries them close to his heart; he gently leads those that have young."</p> <p class="text-gray-600 text-sm mb-4">Isaiah 40:11 (CSB Summary)</p> <div class="border-t pt-4"> <h4 class="font-medium text-gray-800 mb-2">For Your Shepherd Heart Today:</h4> <p class="text-gray-700">Barbara, this passage speaks directly to your dominant Shepherd trait. Notice the balance - gathering close AND gently leading forward. Which of your leaders need "gathering close" this week? Which need "gentle leading forward"? Ask the Holy Spirit to show you the difference.</p> </div> </div> </div> <!-- Scripture Study Plan --> <div class="grid md:grid-cols-2 gap-6 mb-6"> <div class="bg-gray-50 rounded-lg p-6"> <h3 class="font-semibold mb-4">Current Study: Leadership in the Psalms</h3> <div class="space-y-4"> <div class="flex items-center justify-between"> <span class="text-sm">Week 1: Psalm 23 - The Leader as Shepherd</span> <i class="fas fa-check text-green-500"></i> </div> <div class="flex items-center justify-between"> <span class="text-sm">Week 2: Psalm 78 - Shepherding with Integrity</span> <i class="fas fa-check text-green-500"></i> </div> <div class="flex items-center justify-between"> <span class="text-sm font-medium text-indigo-600">Week 3: Psalm 139 - Being Known to Lead Others</span> <i class="fas fa-clock text-yellow-500"></i> </div> <div class="flex items-center justify-between"> <span class="text-sm text-gray-500">Week 4: Psalm 25 - Leading from Humility</span> <i class="fas fa-circle text-gray-300"></i> </div> </div> <button class="w-full mt-4 bg-indigo-500 text-white py-2 rounded-lg hover:bg-indigo-600 transition-all">Continue Study</button> </div> <div class="bg-gray-50 rounded-lg p-6"> <h3 class="font-semibold mb-4">Character Development Focus</h3> <div class="space-y-4"> <div class="border-l-4 border-green-500 pl-4"> <h4 class="font-medium text-green-700">Shepherd Leadership</h4> <p class="text-sm text-gray-600">John 10:1-16 - The Good Shepherd model</p> </div> <div class="border-l-4 border-yellow-500 pl-4"> <h4 class="font-medium text-yellow-700">Prophetic Discernment</h4> <p class="text-sm text-gray-600">1 Kings 19:11-13 - Hearing God's voice in leadership</p> </div> <div class="border-l-4 border-purple-500 pl-4"> <h4 class="font-medium text-purple-700">Priestly Intercession</h4> <p class="text-sm text-gray-600">Exodus 28:29 - Bearing people before God</p> </div> </div> <button class="w-full mt-4 bg-gray-600 text-white py-2 rounded-lg hover:bg-gray-700 transition-all">Explore Traits</button> </div> </div> <!-- Recent Reflections --> <div class="bg-gray-50 rounded-lg p-6"> <h3 class="font-semibold mb-4">Recent Scripture Reflections</h3> <div class="space-y-4"> <div class="bg-white rounded-lg p-4"> <div class="flex justify-between items-start mb-2"> <h4 class="font-medium">Psalm 139:13-16 - "Known Before Leading"</h4> <span class="text-sm text-gray-500">Jan 15</span> </div> <p class="text-gray-700 text-sm mb-2">If God knows me completely and still trusts me with leadership, I can lead from authenticity rather than perfection. My mentees need to see a real leader who is being transformed, not one who pretends to have arrived.</p> <div class="text-xs text-gray-500">Application: Be more vulnerable with Sarah about my own growth areas.</div> </div> <div class="bg-white rounded-lg p-4"> <div class="flex justify-between items-start mb-2"> <h4 class="font-medium">Psalm 78:72 - "Shepherding with Integrity"</h4> <span class="text-sm text-gray-500">Jan 8</span> </div> <p class="text-gray-700 text-sm mb-2">David shepherded "with integrity of heart and skillful hands." Both character AND competence matter. I can't lead effectively with just one or the other.</p> <div class="text-xs text-gray-500">Application: Develop more systematic mentoring skills while maintaining heart for people.</div> </div> </div> </div> </div> </div> </div> </div> </div> <script> // Global state management let currentProfile = null; let currentSection = 'dashboard'; // Profile data const profiles = { barbara: { name: "Barbara Wynn", initials: "BW", tier: 5, title: "Tier 5 Multiplier - Department Head", dominantTrait: "Shepherd", traits: ["Shepherd", "Priestly", "Prophetic"], score: 44.6, traitClass: "trait-shepherd" }, demo: { name: "Demo Leader", initials: "DL", tier: 3, title: "Tier 3 Team Leader", dominantTrait: "Visionary", traits: ["Visionary", "Builder"], score: 38.2, traitClass: "trait-visionary" } }; // Initialize app document.addEventListener('DOMContentLoaded', function() { showProfileModal(); initializeCharts(); }); // Profile management function showProfileModal() { document.getElementById('profileModal').classList.remove('hidden'); } function loadProfile(profileKey) { currentProfile = profiles[profileKey]; document.getElementById('profileModal').classList.add('hidden'); updateProfileDisplay(); showSection('dashboard'); } function updateProfileDisplay() { if (!currentProfile) return; document.getElementById('userGreeting').textContent = `Welcome, ${currentProfile.name.split(' ')[0]}!`; document.getElementById('profileName').textContent = currentProfile.name; document.getElementById('profileTitle').textContent = currentProfile.title; document.getElementById('leadershipScore').textContent = currentProfile.score; // Update profile avatar const avatar = document.querySelector('.trait-shepherd, .trait-visionary, .trait-prophetic, .trait-priestly, .trait-builder'); if (avatar) { avatar.className = `w-16 h-16 ${currentProfile.traitClass} rounded-full flex items-center justify-center text-white text-2xl font-bold`; avatar.textContent = currentProfile.initials; } // Update traits const traitsContainer = document.getElementById('profileTraits'); traitsContainer.innerHTML = ''; currentProfile.traits.forEach(trait => { const span = document.createElement('span'); span.className = getTraitColorClass(trait); span.textContent = trait; traitsContainer.appendChild(span); }); } function getTraitColorClass(trait) { const colors = { 'Shepherd': 'px-3 py-1 bg-green-100 text-green-800 rounded-full text-sm', 'Prophetic': 'px-3 py-1 bg-yellow-100 text-yellow-800 rounded-full text-sm', 'Priestly': 'px-3 py-1 bg-purple-100 text-purple-800 rounded-full text-sm', 'Visionary': 'px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm', 'Builder': 'px-3 py-1 bg-red-100 text-red-800 rounded-full text-sm' }; return colors[trait] || 'px-3 py-1 bg-gray-100 text-gray-800 rounded-full text-sm'; } // Navigation function showSection(sectionName) { // Hide all sections document.querySelectorAll('.section').forEach(section => { section.classList.add('hidden'); }); // Show selected section document.getElementById(sectionName).classList.remove('hidden'); // Update navigation document.querySelectorAll('.nav-btn').forEach(btn => { btn.classList.remove('bg-blue-100', 'text-blue-700'); }); event.target.closest('.nav-btn')?.classList.add('bg-blue-100', 'text-blue-700'); currentSection = sectionName; // Initialize section-specific functionality if (sectionName === 'analytics') { setTimeout(initializeCharts, 100); // Small delay to ensure canvas is visible } } // Charts initialization function initializeCharts() { // Growth Chart const growthCtx = document.getElementById('growthChart'); if (growthCtx) { new Chart(growthCtx, { type: 'line', data: { labels: ['Oct', 'Nov', 'Dec', 'Jan'], datasets: [{ label: 'Leadership Score', data: [40.2, 41.8, 43.1, 44.6], borderColor: 'rgb(59, 130, 246)', backgroundColor: 'rgba(59, 130, 246, 0.1)', tension: 0.4 }] }, options: { responsive: true, maintainAspectRatio: false, scales: { y: { beginAtZero: false, min: 35, max: 50 } } } }); } // Traits Chart const traitsCtx = document.getElementById('traitsChart'); if (traitsCtx) { new Chart(traitsCtx, { type: 'radar', data: { labels: ['Shepherd', 'Prophetic', 'Priestly', 'Visionary', 'Builder'], datasets: [{ label: 'Current Scores', data: [46, 44, 43, 38, 35], borderColor: 'rgb(34, 197, 94)', backgroundColor: 'rgba(34, 197, 94, 0.2)', }] }, options: { responsive: true, maintainAspectRatio: false, scales: { r: { beginAtZero: true, max: 50 } } } }); } } // Profile button click handler document.getElementById('profileBtn').addEventListener('click', showProfileModal); </script> </body> </html> - Initial Deployment
aa1a41a verified