Create me a powerpoint about my service centre performance (SPR, SPORH, AMPPH), my teams performance for Vince, Andy, Jonny, Steve, Alan, Adam (SPR, SPORH, GCA and Declared vs Actual) company is DHL, Make the background representing DHL branding with the colour. Make it look professional, eye appealing and tidy. Add live animation to make it look fun - Initial Deployment
68e4b94
verified
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>DHL Service Center Performance Review</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap'); | |
| body { | |
| font-family: 'Open Sans', sans-serif; | |
| background-color: #FFCC00; | |
| } | |
| .slide { | |
| display: none; | |
| min-height: 100vh; | |
| padding: 2rem; | |
| } | |
| .active-slide { | |
| display: block; | |
| animation: fadeIn 0.8s ease-in-out; | |
| } | |
| .dhl-yellow { | |
| background-color: #FFCC00; | |
| } | |
| .dhl-red { | |
| background-color: #D40511; | |
| color: white; | |
| } | |
| .progress-bar { | |
| height: 20px; | |
| background-color: #e0e0e0; | |
| border-radius: 10px; | |
| overflow: hidden; | |
| } | |
| .progress-fill { | |
| height: 100%; | |
| background-color: #D40511; | |
| transition: width 1s ease-in-out; | |
| } | |
| .team-member-card { | |
| transition: all 0.3s ease; | |
| } | |
| .team-member-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 20px rgba(0,0,0,0.1); | |
| } | |
| @keyframes float { | |
| 0% { transform: translateY(0px); } | |
| 50% { transform: translateY(-10px); } | |
| 100% { transform: translateY(0px); } | |
| } | |
| .floating { | |
| animation: float 3s ease-in-out infinite; | |
| } | |
| .chart-container { | |
| position: relative; | |
| height: 300px; | |
| width: 100%; | |
| } | |
| .performance-badge { | |
| display: inline-block; | |
| padding: 0.25rem 0.5rem; | |
| border-radius: 1rem; | |
| font-weight: bold; | |
| font-size: 0.75rem; | |
| } | |
| .excellent { | |
| background-color: #4CAF50; | |
| color: white; | |
| } | |
| .good { | |
| background-color: #8BC34A; | |
| color: white; | |
| } | |
| .average { | |
| background-color: #FFC107; | |
| color: black; | |
| } | |
| .needs-improvement { | |
| background-color: #FF9800; | |
| color: white; | |
| } | |
| .poor { | |
| background-color: #F44336; | |
| color: white; | |
| } | |
| </style> | |
| </head> | |
| <body class="dhl-yellow overflow-x-hidden"> | |
| <!-- Navigation Controls --> | |
| <div class="fixed bottom-4 right-4 z-50 flex space-x-2"> | |
| <button id="prev-btn" class="dhl-red px-4 py-2 rounded-full text-white font-bold shadow-lg hover:bg-red-800 transition">← Prev</button> | |
| <button id="next-btn" class="dhl-red px-4 py-2 rounded-full text-white font-bold shadow-lg hover:bg-red-800 transition">Next →</button> | |
| </div> | |
| <!-- Slide 1: Title Slide --> | |
| <div class="slide active-slide flex flex-col items-center justify-center text-center p-8"> | |
| <div class="floating mb-8"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120" fill="#D40511"> | |
| <path d="M60,0C26.9,0,0,26.9,0,60s26.9,60,60,60s60-26.9,60-60S93.1,0,60,0z M60,110c-27.6,0-50-22.4-50-50S32.4,10,60,10 s50,22.4,50,50S87.6,110,60,110z"/> | |
| <path d="M60,20c-22.1,0-40,17.9-40,40s17.9,40,40,40s40-17.9,40-40S82.1,20,60,20z M60,90c-16.5,0-30-13.5-30-30 S43.5,30,60,30s30,13.5,30,30S76.5,90,60,90z"/> | |
| <path d="M60,40c-11,0-20,9-20,20s9,20,20,20s20-9,20-20S71,40,60,40z M60,70c-5.5,0-10-4.5-10-10s4.5-10,10-10s10,4.5,10,10 S65.5,70,60,70z"/> | |
| </svg> | |
| </div> | |
| <h1 class="text-5xl font-bold mb-6 text-gray-900 animate__animated animate__fadeInDown">DHL Service Center</h1> | |
| <h2 class="text-4xl font-bold mb-8 dhl-red px-6 py-3 rounded-lg inline-block animate__animated animate__fadeInUp animate__delay-1s">Performance Review</h2> | |
| <p class="text-xl text-gray-700 max-w-2xl animate__animated animate__fadeIn animate__delay-2s">Q3 2023 Performance Metrics for Service Center and Team Members</p> | |
| </div> | |
| <!-- Slide 2: Service Center Overview --> | |
| <div class="slide flex flex-col items-center justify-center p-8"> | |
| <div class="w-full max-w-6xl bg-white rounded-xl shadow-2xl p-8"> | |
| <h2 class="text-3xl font-bold mb-6 text-center dhl-red py-2 rounded-lg">Service Center Performance Overview</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8"> | |
| <!-- SPR --> | |
| <div class="bg-gray-50 p-6 rounded-lg border border-gray-200 animate__animated animate__fadeInLeft"> | |
| <h3 class="text-xl font-semibold mb-4 text-gray-800">SPR</h3> | |
| <div class="text-4xl font-bold mb-2 text-gray-900">92%</div> | |
| <div class="progress-bar mb-2"> | |
| <div class="progress-fill" style="width: 92%"></div> | |
| </div> | |
| <div class="flex justify-between text-sm text-gray-600"> | |
| <span>Target: 90%</span> | |
| <span class="performance-badge excellent">Excellent</span> | |
| </div> | |
| </div> | |
| <!-- SPORH --> | |
| <div class="bg-gray-50 p-6 rounded-lg border border-gray-200 animate__animated animate__fadeInUp"> | |
| <h3 class="text-xl font-semibold mb-4 text-gray-800">SPORH</h3> | |
| <div class="text-4xl font-bold mb-2 text-gray-900">88%</div> | |
| <div class="progress-bar mb-2"> | |
| <div class="progress-fill" style="width: 88%"></div> | |
| </div> | |
| <div class="flex justify-between text-sm text-gray-600"> | |
| <span>Target: 85%</span> | |
| <span class="performance-badge good">Good</span> | |
| </div> | |
| </div> | |
| <!-- AMPPH --> | |
| <div class="bg-gray-50 p-6 rounded-lg border border-gray-200 animate__animated animate__fadeInRight"> | |
| <h3 class="text-xl font-semibold mb-4 text-gray-800">AMPPH</h3> | |
| <div class="text-4xl font-bold mb-2 text-gray-900">12.5</div> | |
| <div class="progress-bar mb-2"> | |
| <div class="progress-fill" style="width: 83%"></div> | |
| </div> | |
| <div class="flex justify-between text-sm text-gray-600"> | |
| <span>Target: 15.0</span> | |
| <span class="performance-badge needs-improvement">Needs Work</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="chart-container animate__animated animate__fadeIn animate__delay-1s"> | |
| <canvas id="serviceCenterChart"></canvas> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Slide 3: Team Performance Summary --> | |
| <div class="slide flex flex-col items-center justify-center p-8"> | |
| <div class="w-full max-w-6xl bg-white rounded-xl shadow-2xl p-8"> | |
| <h2 class="text-3xl font-bold mb-8 text-center dhl-red py-2 rounded-lg">Team Performance Summary</h2> | |
| <div class="overflow-x-auto mb-8 animate__animated animate__fadeIn"> | |
| <table class="min-w-full bg-white rounded-lg overflow-hidden"> | |
| <thead class="dhl-red text-white"> | |
| <tr> | |
| <th class="py-3 px-4 text-left">Team Member</th> | |
| <th class="py-3 px-4 text-center">SPR</th> | |
| <th class="py-3 px-4 text-center">SPORH</th> | |
| <th class="py-3 px-4 text-center">GCA</th> | |
| <th class="py-3 px-4 text-center">Declared vs Actual</th> | |
| </tr> | |
| </thead> | |
| <tbody class="divide-y divide-gray-200"> | |
| <tr class="hover:bg-gray-50 transition"> | |
| <td class="py-4 px-4 font-medium">Vince</td> | |
| <td class="py-4 px-4 text-center"><span class="performance-badge excellent">95%</span></td> | |
| <td class="py-4 px-4 text-center"><span class="performance-badge excellent">91%</span></td> | |
| <td class="py-4 px-4 text-center"><span class="performance-badge good">88%</span></td> | |
| <td class="py-4 px-4 text-center"><span class="performance-badge excellent">+3%</span></td> | |
| </tr> | |
| <tr class="hover:bg-gray-50 transition"> | |
| <td class="py-4 px-4 font-medium">Andy</td> | |
| <td class="py-4 px-4 text-center"><span class="performance-badge good">89%</span></td> | |
| <td class="py-4 px-4 text-center"><span class="performance-badge good">87%</span></td> | |
| <td class="py-4 px-4 text-center"><span class="performance-badge average">82%</span></td> | |
| <td class="py-4 px-4 text-center"><span class="performance-badge good">+2%</span></td> | |
| </tr> | |
| <tr class="hover:bg-gray-50 transition"> | |
| <td class="py-4 px-4 font-medium">Jonny</td> | |
| <td class="py-4 px-4 text-center"><span class="performance-badge excellent">94%</span></td> | |
| <td class="py-4 px-4 text-center"><span class="performance-badge good">88%</span></td> | |
| <td class="py-4 px-4 text-center"><span class="performance-badge good">86%</span></td> | |
| <td class="py-4 px-4 text-center"><span class="performance-badge excellent">+4%</span></td> | |
| </tr> | |
| <tr class="hover:bg-gray-50 transition"> | |
| <td class="py-4 px-4 font-medium">Steve</td> | |
| <td class="py-4 px-4 text-center"><span class="performance-badge average">83%</span></td> | |
| <td class="py-4 px-4 text-center"><span class="performance-badge average">81%</span></td> | |
| <td class="py-4 px-4 text-center"><span class="performance-badge needs-improvement">78%</span></td> | |
| <td class="py-4 px-4 text-center"><span class="performance-badge average">+1%</span></td> | |
| </tr> | |
| <tr class="hover:bg-gray-50 transition"> | |
| <td class="py-4 px-4 font-medium">Alan</td> | |
| <td class="py-4 px-4 text-center"><span class="performance-badge good">90%</span></td> | |
| <td class="py-4 px-4 text-center"><span class="performance-badge good">86%</span></td> | |
| <td class="py-4 px-4 text-center"><span class="performance-badge good">85%</span></td> | |
| <td class="py-4 px-4 text-center"><span class="performance-badge good">+2%</span></td> | |
| </tr> | |
| <tr class="hover:bg-gray-50 transition"> | |
| <td class="py-4 px-4 font-medium">Adam</td> | |
| <td class="py-4 px-4 text-center"><span class="performance-badge needs-improvement">79%</span></td> | |
| <td class="py-4 px-4 text-center"><span class="performance-badge needs-improvement">77%</span></td> | |
| <td class="py-4 px-4 text-center"><span class="performance-badge poor">72%</span></td> | |
| <td class="py-4 px-4 text-center"><span class="performance-badge needs-improvement">-1%</span></td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6 animate__animated animate__fadeIn animate__delay-1s"> | |
| <div class="chart-container"> | |
| <canvas id="teamSprChart"></canvas> | |
| </div> | |
| <div class="chart-container"> | |
| <canvas id="teamSporhChart"></canvas> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Slide 4: Top Performers --> | |
| <div class="slide flex flex-col items-center justify-center p-8"> | |
| <div class="w-full max-w-6xl bg-white rounded-xl shadow-2xl p-8"> | |
| <h2 class="text-3xl font-bold mb-8 text-center dhl-red py-2 rounded-lg">Top Performers</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8"> | |
| <!-- Vince --> | |
| <div class="team-member-card bg-gray-50 p-6 rounded-lg border border-gray-200 text-center animate__animated animate__fadeInLeft"> | |
| <div class="w-24 h-24 bg-red-100 rounded-full mx-auto mb-4 flex items-center justify-center text-3xl font-bold dhl-red text-white">V</div> | |
| <h3 class="text-xl font-semibold mb-2">Vince</h3> | |
| <div class="mb-4"> | |
| <span class="performance-badge excellent">Top Performer</span> | |
| </div> | |
| <div class="space-y-2 text-sm"> | |
| <div class="flex justify-between"> | |
| <span>SPR:</span> | |
| <span class="font-bold">95%</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span>SPORH:</span> | |
| <span class="font-bold">91%</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span>GCA:</span> | |
| <span class="font-bold">88%</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span>D vs A:</span> | |
| <span class="font-bold">+3%</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Jonny --> | |
| <div class="team-member-card bg-gray-50 p-6 rounded-lg border border-gray-200 text-center animate__animated animate__fadeInUp"> | |
| <div class="w-24 h-24 bg-red-100 rounded-full mx-auto mb-4 flex items-center justify-center text-3xl font-bold dhl-red text-white">J</div> | |
| <h3 class="text-xl font-semibold mb-2">Jonny</h3> | |
| <div class="mb-4"> | |
| <span class="performance-badge excellent">High Achiever</span> | |
| </div> | |
| <div class="space-y-2 text-sm"> | |
| <div class="flex justify-between"> | |
| <span>SPR:</span> | |
| <span class="font-bold">94%</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span>SPORH:</span> | |
| <span class="font-bold">88%</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span>GCA:</span> | |
| <span class="font-bold">86%</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span>D vs A:</span> | |
| <span class="font-bold">+4%</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Alan --> | |
| <div class="team-member-card bg-gray-50 p-6 rounded-lg border border-gray-200 text-center animate__animated animate__fadeInRight"> | |
| <div class="w-24 h-24 bg-red-100 rounded-full mx-auto mb-4 flex items-center justify-center text-3xl font-bold dhl-red text-white">A</div> | |
| <h3 class="text-xl font-semibold mb-2">Alan</h3> | |
| <div class="mb-4"> | |
| <span class="performance-badge good">Consistent</span> | |
| </div> | |
| <div class="space-y-2 text-sm"> | |
| <div class="flex justify-between"> | |
| <span>SPR:</span> | |
| <span class="font-bold">90%</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span>SPORH:</span> | |
| <span class="font-bold">86%</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span>GCA:</span> | |
| <span class="font-bold">85%</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span>D vs A:</span> | |
| <span class="font-bold">+2%</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-yellow-50 border-l-4 border-yellow-400 p-4 animate__animated animate__fadeIn animate__delay-1s"> | |
| <div class="flex"> | |
| <div class="flex-shrink-0"> | |
| <svg class="h-5 w-5 text-yellow-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"> | |
| <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd" /> | |
| </svg> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm text-yellow-700"> | |
| <span class="font-bold">Recognition:</span> Vince and Jonny have consistently exceeded targets this quarter. Their performance in SPR and Declared vs Actual metrics is particularly noteworthy. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Slide 5: Improvement Opportunities --> | |
| <div class="slide flex flex-col items-center justify-center p-8"> | |
| <div class="w-full max-w-6xl bg-white rounded-xl shadow-2xl p-8"> | |
| <h2 class="text-3xl font-bold mb-8 text-center dhl-red py-2 rounded-lg">Improvement Opportunities</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8"> | |
| <!-- Steve --> | |
| <div class="team-member-card bg-gray-50 p-6 rounded-lg border border-gray-200 animate__animated animate__fadeInLeft"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center text-xl font-bold dhl-red text-white mr-4">S</div> | |
| <div> | |
| <h3 class="text-xl font-semibold">Steve</h3> | |
| <span class="performance-badge needs-improvement">Needs Improvement</span> | |
| </div> | |
| </div> | |
| <div class="space-y-3"> | |
| <div> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span>SPR:</span> | |
| <span>83% (Target: 90%)</span> | |
| </div> | |
| <div class="progress-bar"> | |
| <div class="progress-fill" style="width: 83%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span>GCA:</span> | |
| <span>78% (Target: 85%)</span> | |
| </div> | |
| <div class="progress-bar"> | |
| <div class="progress-fill" style="width: 78%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-4 p-3 bg-red-50 rounded-lg"> | |
| <p class="text-sm text-red-700">Focus Area: Improve route planning to enhance SPR and GCA metrics.</p> | |
| </div> | |
| </div> | |
| <!-- Adam --> | |
| <div class="team-member-card bg-gray-50 p-6 rounded-lg border border-gray-200 animate__animated animate__fadeInRight"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center text-xl font-bold dhl-red text-white mr-4">A</div> | |
| <div> | |
| <h3 class="text-xl font-semibold">Adam</h3> | |
| <span class="performance-badge poor">Critical Focus</span> | |
| </div> | |
| </div> | |
| <div class="space-y-3"> | |
| <div> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span>SPORH:</span> | |
| <span>77% (Target: 85%)</span> | |
| </div> | |
| <div class="progress-bar"> | |
| <div class="progress-fill" style="width: 77%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span>D vs A:</span> | |
| <span>-1% (Target: +2%)</span> | |
| </div> | |
| <div class="progress-bar"> | |
| <div class="progress-fill" style="width: 45%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-4 p-3 bg-red-50 rounded-lg"> | |
| <p class="text-sm text-red-700">Focus Area: Time management and accurate delivery declarations needed.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-blue-50 border-l-4 border-blue-400 p-4 animate__animated animate__fadeIn animate__delay-1s"> | |
| <div class="flex"> | |
| <div class="flex-shrink-0"> | |
| <svg class="h-5 w-5 text-blue-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"> | |
| <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" /> | |
| </svg> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm text-blue-700"> | |
| <span class="font-bold">Action Plan:</span> 1:1 coaching sessions scheduled for Steve and Adam. Peer mentoring program with Vince to share best practices. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-6 chart-container animate__animated animate__fadeIn animate__delay-2s"> | |
| <canvas id="improvementChart"></canvas> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Slide 6: Summary & Next Steps --> | |
| <div class="slide flex flex-col items-center justify-center p-8"> | |
| <div class="w-full max-w-4xl bg-white rounded-xl shadow-2xl p-8 text-center"> | |
| <h2 class="text-3xl font-bold mb-8 dhl-red py-2 rounded-lg">Summary & Next Steps</h2> | |
| <div class="mb-8 text-left animate__animated animate__fadeIn"> | |
| <div class="flex items-start mb-4"> | |
| <div class="flex-shrink-0 h-6 w-6 rounded-full dhl-red flex items-center justify-center text-white mr-3 mt-1">✓</div> | |
| <p class="text-gray-700">Service Center exceeded SPR and SPORH targets by 2% and 3% respectively</p> | |
| </div> | |
| <div class="flex items-start mb-4"> | |
| <div class="flex-shrink-0 h-6 w-6 rounded-full dhl-red flex items-center justify-center text-white mr-3 mt-1">✓</div> | |
| <p class="text-gray-700">AMPPH needs focus - currently at 12.5 vs target of 15.0</p> | |
| </div> | |
| <div class="flex items-start mb-4"> | |
| <div class="flex-shrink-0 h-6 w-6 rounded-full dhl-red flex items-center justify-center text-white mr-3 mt-1">✓</div> | |
| <p class="text-gray-700">Vince and Jonny are top performers across all metrics</p> | |
| </div> | |
| <div class="flex items-start mb-4"> | |
| <div class="flex-shrink-0 h-6 w-6 rounded-full dhl-red flex items-center justify-center text-white mr-3 mt-1">✓</div> | |
| <p class="text-gray-700">Steve and Adam require targeted support to improve performance</p> | |
| </div> | |
| </div> | |
| <div class="bg-green-50 border-l-4 border-green-400 p-4 mb-8 text-left animate__animated animate__fadeIn animate__delay-1s"> | |
| <div class="flex"> | |
| <div class="flex-shrink-0"> | |
| <svg class="h-5 w-5 text-green-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"> | |
| <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" /> | |
| </svg> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm text-green-700"> | |
| <span class="font-bold">Next Steps:</span> Implement peer mentoring program, schedule AMPPH efficiency workshops, and conduct weekly check-ins with Steve and Adam. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="animate__animated animate__fadeIn animate__delay-2s"> | |
| <h3 class="text-xl font-semibold mb-4">Thank You!</h3> | |
| <p class="text-gray-600 mb-6">Any questions about the performance metrics or improvement plans?</p> | |
| <div class="flex justify-center"> | |
| <div class="w-24 h-1 bg-gray-300 rounded-full"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Slide navigation | |
| const slides = document.querySelectorAll('.slide'); | |
| const prevBtn = document.getElementById('prev-btn'); | |
| const nextBtn = document.getElementById('next-btn'); | |
| let currentSlide = 0; | |
| function showSlide(n) { | |
| slides.forEach(slide => slide.classList.remove('active-slide')); | |
| slides[n].classList.add('active-slide'); | |
| currentSlide = n; | |
| // Update button states | |
| prevBtn.disabled = n === 0; | |
| nextBtn.disabled = n === slides.length - 1; | |
| } | |
| prevBtn.addEventListener('click', () => { | |
| if (currentSlide > 0) { | |
| showSlide(currentSlide - 1); | |
| } | |
| }); | |
| nextBtn.addEventListener('click', () => { | |
| if (currentSlide < slides.length - 1) { | |
| showSlide(currentSlide + 1); | |
| } | |
| }); | |
| // Keyboard navigation | |
| document.addEventListener('keydown', (e) => { | |
| if (e.key === 'ArrowLeft' && currentSlide > 0) { | |
| showSlide(currentSlide - 1); | |
| } else if (e.key === 'ArrowRight' && currentSlide < slides.length - 1) { | |
| showSlide(currentSlide + 1); | |
| } | |
| }); | |
| // Initialize charts after DOM is loaded | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Service Center Performance Chart | |
| const serviceCenterCtx = document.getElementById('serviceCenterChart').getContext('2d'); | |
| const serviceCenterChart = new Chart(serviceCenterCtx, { | |
| type: 'bar', | |
| data: { | |
| labels: ['Q1', 'Q2', 'Q3'], | |
| datasets: [ | |
| { | |
| label: 'SPR', | |
| data: [89, 91, 92], | |
| backgroundColor: '#D40511', | |
| borderColor: '#D40511', | |
| borderWidth: 1 | |
| }, | |
| { | |
| label: 'SPORH', | |
| data: [84, 86, 88], | |
| backgroundColor: '#FFCC00', | |
| borderColor: '#FFCC00', | |
| borderWidth: 1 | |
| }, | |
| { | |
| label: 'AMPPH', | |
| data: [10.2, 11.8, 12.5], | |
| backgroundColor: '#333333', | |
| borderColor: '#333333', | |
| borderWidth: 1, | |
| yAxisID: 'y1' | |
| } | |
| ] | |
| }, | |
| options: { | |
| responsive: true, | |
| plugins: { | |
| title: { | |
| display: true, | |
| text: 'Quarterly Performance Trends', | |
| font: { | |
| size: 16 | |
| } | |
| }, | |
| legend: { | |
| position: 'top', | |
| } | |
| }, | |
| scales: { | |
| y: { | |
| beginAtZero: true, | |
| max: 100, | |
| title: { | |
| display: true, | |
| text: 'Percentage (%)' | |
| } | |
| }, | |
| y1: { | |
| type: 'linear', | |
| display: true, | |
| position: 'right', | |
| beginAtZero: true, | |
| max: 20, | |
| grid: { | |
| drawOnChartArea: false, | |
| }, | |
| title: { | |
| display: true, | |
| text: 'AMPPH' | |
| } | |
| } | |
| } | |
| } | |
| }); | |
| // Team SPR Chart | |
| const teamSprCtx = document.getElementById('teamSprChart').getContext('2d'); | |
| const teamSprChart = new Chart(teamSprCtx, { | |
| type: 'radar', | |
| data: { | |
| labels: ['Vince', 'Andy', 'Jonny', 'Steve', 'Alan', 'Adam'], | |
| datasets: [{ | |
| label: 'SPR Performance', | |
| data: [95, 89, 94, 83, 90, 79], | |
| backgroundColor: 'rgba(212, 5, 17, 0.2)', | |
| borderColor: 'rgba(212, 5, 17, 1)', | |
| pointBackgroundColor: 'rgba(212, 5, 17, 1)', | |
| pointBorderColor: '#fff', | |
| pointHoverBackgroundColor: '#fff', | |
| pointHoverBorderColor: 'rgba(212, 5, 17, 1)' | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| plugins: { | |
| title: { | |
| display: true, | |
| text: 'Team SPR Comparison', | |
| font: { | |
| size: 16 | |
| } | |
| } | |
| }, | |
| scales: { | |
| r: { | |
| angleLines: { | |
| display: true | |
| }, | |
| suggestedMin: 70, | |
| suggestedMax: 100 | |
| } | |
| } | |
| } | |
| }); | |
| // Team SPORH Chart | |
| const teamSporhCtx = document.getElementById('teamSporhChart').getContext('2d'); | |
| const teamSporhChart = new Chart(teamSporhCtx, { | |
| type: 'radar', | |
| data: { | |
| labels: ['Vince', 'Andy', 'Jonny', 'Steve', 'Alan', 'Adam'], | |
| datasets: [{ | |
| label: 'SPORH Performance', | |
| data: [91, 87, 88, 81, 86, 77], | |
| backgroundColor: 'rgba(255, 204, 0, 0.2)', | |
| borderColor: 'rgba(255, 204, 0, 1)', | |
| pointBackgroundColor: 'rgba(255, 204, 0, 1)', | |
| pointBorderColor: '#fff', | |
| pointHoverBackgroundColor: '#fff', | |
| pointHoverBorderColor: 'rgba(255, 204, 0, 1)' | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| plugins: { | |
| title: { | |
| display: true, | |
| text: 'Team SPORH Comparison', | |
| font: { | |
| size: 16 | |
| } | |
| } | |
| }, | |
| scales: { | |
| r: { | |
| angleLines: { | |
| display: true | |
| }, | |
| suggestedMin: 70, | |
| suggestedMax: 100 | |
| } | |
| } | |
| } | |
| }); | |
| // Improvement Chart | |
| const improvementCtx = document.getElementById('improvementChart').getContext('2d'); | |
| const improvementChart = new Chart(improvementCtx, { | |
| type: 'line', | |
| data: { | |
| labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'], | |
| datasets: [ | |
| { | |
| label: 'Steve - SPR', | |
| data: [80, 82, 81, 83, 82, 83, 82, 83, 83], | |
| borderColor: '#D40511', | |
| backgroundColor: 'rgba(212, 5, 17, 0.1)', | |
| tension: 0.3, | |
| borderWidth: 2 | |
| }, | |
| { | |
| label: 'Adam - SPORH', | |
| data: [75, 76, 77, 76, 77, 76, 77, 77, 77], | |
| borderColor: '#FFCC00', | |
| backgroundColor: 'rgba(255, 204, 0, 0.1)', | |
| tension: 0.3, | |
| borderWidth: 2 | |
| }, | |
| { | |
| label: 'Target', | |
| data: [85, 85, 85, 85, 85, 85, 85, 85, 85], | |
| borderColor: '#4CAF50', | |
| borderDash: [5, 5], | |
| backgroundColor: 'rgba(76, 175, 80, 0.1)', | |
| borderWidth: 1 | |
| } | |
| ] | |
| }, | |
| options: { | |
| responsive: true, | |
| plugins: { | |
| title: { | |
| display: true, | |
| text: 'Monthly Trend for Improvement Focus', | |
| font: { | |
| size: 16 | |
| } | |
| }, | |
| annotation: { | |
| annotations: { | |
| line1: { | |
| type: 'line', | |
| yMin: 85, | |
| yMax: 85, | |
| borderColor: 'rgb(76, 175, 80)', | |
| borderWidth: 2, | |
| borderDash: [5, 5] | |
| } | |
| } | |
| } | |
| }, | |
| scales: { | |
| y: { | |
| beginAtZero: false, | |
| min: 70, | |
| max: 90 | |
| } | |
| } | |
| } | |
| }); | |
| // Animate progress bars on slide change | |
| function animateProgressBars() { | |
| document.querySelectorAll('.progress-fill').forEach(bar => { | |
| const width = bar.style.width; | |
| bar.style.width = '0'; | |
| setTimeout(() => { | |
| bar.style.width = width; | |
| }, 100); | |
| }); | |
| } | |
| // Observe slide changes to trigger animations | |
| const observer = new MutationObserver(function(mutations) { | |
| mutations.forEach(function(mutation) { | |
| if (mutation.attributeName === 'class') { | |
| const slide = mutation.target; | |
| if (slide.classList.contains('active-slide')) { | |
| animateProgressBars(); | |
| // Add animations to elements in the current slide | |
| const elements = slide.querySelectorAll('.team-member-card, .chart-container, table, .bg-blue-50, .bg-yellow-50, .bg-green-50'); | |
| elements.forEach((el, index) => { | |
| el.classList.add('animate__animated', 'animate__fadeIn'); | |
| el.style.animationDelay = `${index * 0.2}s`; | |
| }); | |
| } | |
| } | |
| }); | |
| }); | |
| slides.forEach(slide => { | |
| observer.observe(slide, { attributes: true }); | |
| }); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Spinny145/testing" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |