Spaces:

DjayChucko
/

EnablingSales

Running

App Files Files

DjayChucko commited on Oct 5, 2025

Commit

db1d1ba

verified ·

1 Parent(s): 40ed0b7

Manual changes saved

Browse files

Files changed (1) hide show

scorecard.html +59 -28

scorecard.html CHANGED Viewed

@@ -18,7 +18,7 @@
     </script>
     <style>
         body { font-family: 'Poppins', sans-serif; }
-        .question-screen { min-height: 100vh; transition: all 0.3s ease; }
         .fade-in { animation: fadeIn 0.5s; }
         @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
         .progress-bar { height: 6px; transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1); }
@@ -39,7 +39,7 @@
         .nav-link.active { font-weight: 600; border-bottom: 2px solid #8b5cf6; }
     </style>
 </head>
-<body class="bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-gray-200 min-h-screen flex flex-col relative">
 <header class="sticky top-0 z-50 bg-white/80 dark:bg-gray-900/80 backdrop-blur-md shadow-sm">
     <div class="container mx-auto px-4 py-3">
@@ -76,28 +76,28 @@
 </header>
 <div id="app" class="relative overflow-hidden flex-1">
-    <div id="industry-screen" class="question-screen flex justify-center items-center p-6 bg-gradient-to-br from-purple-600 to-indigo-700 text-white">
         <div class="max-w-2xl mx-auto w-full text-center" data-aos="fade-up">
-            <div class="w-20 h-20 bg-white rounded-full flex items-center justify-center mx-auto mb-4 shadow-lg"><img src="https://huggingface.co/spaces/DjayChucko/EnablingSales/resolve/main/images/MEDDICC%20Scorecard%20Logo.png" alt="MEDDICC Logo" class="w-18 h-12"></div>
-            <h1 class="text-4xl font-bold mb-2 text-white">MEDDICC Scorecard</h1>
             <p class="text-purple-200 font-light text-lg">Select the customer's industry and current deal stage</p>
-            <div class="mt-8 mb-6 grid sm:grid-cols-2 gap-4">
-                <div class="relative"><select id="industry" class="w-full p-4 bg-white/20 border-2 border-purple-300 rounded-xl text-white focus:ring-2 focus:ring-white focus:outline-none appearance-none"><option value="" disabled selected>Select an Industry</option><option value="FSI">FSI (Financial Services)</option><option value="Healthcare">Healthcare</option><option value="Public Sector & Education">Public Sector & Education</option><option value="Retail and Ecommerce">Retail and Ecommerce</option><option value="Tech (SaaS)">Tech (SaaS)</option><option value="Cyber">Cyber</option><option value="Media and Entertainment">Media and Entertainment</option><option value="Manufacturing">Manufacturing</option><option value="Energy">Energy</option><option value="Logistics">Logistics</option><option value="Transport">Transport</option><option value="Startups">Startups</option></select></div>
-                <div class="relative"><select id="sales-stage" class="w-full p-4 bg-white/20 border-2 border-purple-300 rounded-xl text-white focus:ring-2 focus:ring-white focus:outline-none appearance-none"><option value="" disabled selected>Select Sales Stage</option><option value="Early Stage">Early Stage</option><option value="Evaluation / PoC">Evaluation / PoC</option><option value="Closing">Closing</option></select></div>
             </div>
-            <button id="start-btn" disabled class="w-full py-4 bg-white text-purple-700 font-semibold rounded-xl shadow-lg hover:bg-gray-100 transition-all disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center space-x-2"><span>Start Qualification</span><i data-feather="arrow-right" class="w-5 h-5"></i></button>
         </div>
     </div>
     <div id="question-screens" class="hidden"><div class="fixed top-16 left-0 right-0 z-10 bg-gray-100 dark:bg-gray-900"><div class="h-1.5 bg-gray-200 dark:bg-gray-700"><div id="progress-bar" class="progress-bar bg-purple-600 h-full rounded-r-full"></div></div></div></div>
-    <div id="results-screen" class="question-screen p-6 bg-gray-100 dark:bg-gray-900 hidden overflow-y-auto">
-        <div class="max-w-4xl mx-auto w-full pb-8" data-aos="fade-in">
-            <div class="text-center mb-8"><div class="w-24 h-24 bg-white dark:bg-gray-800 border-4 border-purple-500 rounded-full flex items-center justify-center mx-auto mb-4"><span id="score-percentage" class="text-3xl font-bold text-purple-600 dark:text-purple-400">0%</span></div><h2 id="score-message" class="text-xl font-semibold mt-2 text-gray-800 dark:text-gray-200"></h2></div>
-            <div class="mb-8"><div class="flex items-center mb-4"><div class="w-8 h-8 bg-purple-600 rounded-lg flex items-center justify-center mr-3"><i data-feather="zap" class="text-white w-4 h-4"></i></div><h3 class="text-xl font-bold text-gray-800 dark:text-white">Executive Summary</h3></div><div id="executive-summary" class="bg-white dark:bg-gray-800 p-5 rounded-xl shadow-md"></div></div>
-            <div class="grid md:grid-cols-2 gap-8">
                 <div><div class="flex items-center mb-4"><div class="w-8 h-8 bg-purple-600 rounded-lg flex items-center justify-center mr-3"><i data-feather="info" class="text-white w-4 h-4"></i></div><h3 class="text-xl font-bold text-gray-800 dark:text-white">Industry Insights</h3></div><div id="industry-insights" class="bg-white dark:bg-gray-800 p-5 rounded-xl shadow-md"></div></div>
                 <div><div class="flex items-center mb-4"><div class="w-8 h-8 bg-purple-600 rounded-lg flex items-center justify-center mr-3"><i data-feather="bar-chart-2" class="text-white w-4 h-4"></i></div><h3 class="text-xl font-bold text-gray-800 dark:text-white">Detailed Analysis</h3></div><div id="score-breakdown" class="space-y-4"></div></div>
             </div>
-            <div class="mt-8"><button id="restart-quiz" class="w-full py-4 bg-gradient-to-r from-purple-600 to-indigo-600 text-white font-semibold rounded-xl shadow-lg hover:from-purple-700 hover:to-indigo-700 transition-all transform hover:scale-105 flex items-center justify-center space-x-2"><i data-feather="refresh-cw" class="w-5 h-5"></i><span>Start New Scorecard</span></button></div>
         </div>
     </div>
 </div>
@@ -129,7 +129,7 @@
             'DECISION PROCESS & CRITERIA': '#qualify-meddicc', 'COMPETITION & BLOCKERS': '#proposals',
             'PAPER PROCESS': '#negotiation', 'IMPLEMENTATION PLAN': '#evaluation-justification'
         };
-        const scoreMessages = { 'Closing': { 14: "Low Probability. More qualification of Why Now? and Why Us? required.", 39: "Medium Probability. More qualification Why Now? to quantify the business case.", 60: "High Probability. Focus on Why Us? loop in Product teams, set traps, kill blockers.", 101: "Commit. Be cautious. Expect last minute blockers, seek Scaleway Executive Sponsors." }, 'Early Stage': { 14: "Low Potential. More discovery needed to find a compelling business pain.", 39: "Medium Potential. Good start. Focus on building the business case and identifying a Champion.", 60: "High Potential. Strong signal. Engage more stakeholders and define success criteria for an evaluation.", 101: "Very High Potential. Excellent qualification. Prepare to move to a formal evaluation or PoC." }, 'Evaluation / PoC': { 14: "Low Confidence. This deal is not ready for an evaluation. Re-qualify the business case.", 39: "Medium Confidence. The business case is weak. Ensure the PoC has clear, agreed-upon success metrics.", 60: "High Confidence. The PoC is well-positioned. Focus on technical validation and neutralizing blockers.", 101: "Very High Confidence. A successful evaluation should lead to a close. Start planning the paper process." } };
         const industryInsights = { 'FSI': 'FSI buyers prioritize compliance...', 'Healthcare': 'Healthcare focuses on HIPAA...', 'Public Sector & Education': 'Public Sector buyers value cost efficiency...', 'Retail and Ecommerce': 'Retail needs omnichannel integration...', 'Tech (SaaS)': 'SaaS companies look for developer-friendly APIs...', 'Cyber': 'Cyber security teams require advanced threat detection...', 'Media and Entertainment': 'Media firms need high-performance content delivery...', 'Manufacturing': 'Manufacturing values predictive maintenance...', 'Energy': 'The Energy sector focuses on AI for predictive analytics...', 'Logistics': 'Logistics companies prioritize real-time tracking...', 'Transport': 'Transportation firms need AI for fleet management...', 'Startups': 'Startups look for pay-as-you-go pricing...' };
         const summarySnippets = { 'PAIN & METRICS': 'Solidify the business case by quantifying the pain with the Economic Buyer.', 'CHAMPION & EB': 'Test your Champion and leverage them for greater access to the Economic Buyer.', 'DECISION PROCESS & CRITERIA': 'Influence the decision criteria and get the formal process in writing.', 'COMPETITION & BLOCKERS': 'Set competitive traps and proactively identify all potential deal blockers.', 'PAPER PROCESS': 'De-risk the closing stage by confirming the budget source and procurement process early.', 'IMPLEMENTATION PLAN': 'Co-create a success plan with the customer to show value beyond the signature.' };
         const industrySpecificAdvice = { 'FSI': { 'PAIN & METRICS': 'Frame pain around compliance...', 'PAPER PROCESS': 'The legal review is rigorous...' }, 'Healthcare': { 'PAIN & METRICS': 'Pain is tied to HIPAA...', 'DECISION PROCESS & CRITERIA': 'Criteria weighs heavily on security...' }, 'Tech (SaaS)': { 'COMPETITION & BLOCKERS': 'The SaaS market is crowded...', 'IMPLEMENTATION PLAN': 'Offer a "quick start" plan...' } };
@@ -140,14 +140,24 @@
         app.inputs.startBtn.addEventListener('click', () => { app.screens.industry.classList.add('hidden'); app.screens.questions.classList.remove('hidden'); renderQuestion(app.state.currentQuestion); });
         app.buttons.restart.addEventListener('click', resetQuiz);
-        function resetQuiz() { /* ... reset logic ... */ }
         function renderQuestion(index) {
             if (index >= questions.length) { return showResults(); }
             const question = questions[index];
             app.ui.progressBar.style.width = `${(index / questions.length) * 100}%`;
             const screen = document.createElement('div');
-            screen.className = `question-screen flex flex-col justify-center p-6 bg-gray-100 dark:bg-gray-900 fade-in`;
-            screen.innerHTML = `<div class="max-w-2xl mx-auto w-full"><div class="mb-4 text-center"><p class="text-xs font-bold tracking-wider uppercase text-purple-400 mb-2">${question.subheading}</p><span class="text-sm font-medium text-gray-500 dark:text-gray-400">${question.section}</span><h2 class="text-2xl font-bold mt-1 mb-2">${question.question}</h2></div><div class="mb-6"><div class="relative"><select id="answer-select" class="w-full p-3 bg-white dark:bg-gray-800 border dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-purple-500"><option value="" disabled selected>Select an answer</option>${question.answers.map(a => `<option value="${a.score}">${a.text}</option>`).join('')}</select></div></div><div class="flex items-center gap-4"><button id="back-btn" class="w-1/3 py-3 bg-gray-300 dark:bg-gray-700 rounded-lg font-semibold shadow-md">Back</button><button id="next-btn" disabled class="w-2/3 py-3 bg-purple-600 text-white rounded-lg font-semibold shadow-md disabled:opacity-50">${index === questions.length - 1 ? 'Finish' : 'Next'}</button></div></div>`;
             app.screens.questions.innerHTML = ''; app.screens.questions.appendChild(screen); feather.replace();
             const select = document.getElementById('answer-select'), next = document.getElementById('next-btn'), back = document.getElementById('back-btn');
             select.addEventListener('change', () => next.disabled = !select.value);
@@ -156,7 +166,13 @@
         }
         function showResults() {
-            app.screens.questions.classList.add('hidden'); app.screens.results.classList.remove('hidden'); AOS.refresh();
             const totalScore = app.state.answers.reduce((sum, ans) => sum + ans.score, 0);
             const percentage = Math.max(0, Math.round((totalScore / app.state.maxScore) * 100));
             app.ui.scorePercentage.textContent = `${percentage}%`;
@@ -164,7 +180,20 @@
             let msg = '';
             if (percentage <= 14) msg = stageMessages[14]; else if (percentage <= 39) msg = stageMessages[39]; else if (percentage <= 60) msg = stageMessages[60]; else msg = stageMessages[101];
             app.ui.scoreMessage.innerHTML = `<span class="block">${msg}</span>`;
             app.ui.industryInsights.innerHTML = `<p>${industryInsights[app.state.industry]}</p>`;
             app.ui.scoreBreakdown.innerHTML = '';
             app.state.answers.forEach(answer => {
@@ -172,30 +201,32 @@
                 if (answer.score < 5) {
                     let advice = industrySpecificAdvice[app.state.industry]?.[answer.section] || summarySnippets[answer.section] || 'Focus on improving this area.';
                     const link = `academy.html${skillMapping[answer.section]}`;
-                    recommendationHTML = `<div class="mt-3 pt-3 border-t dark:border-gray-700 bg-red-50 dark:bg-red-900/20 p-3 rounded-b-lg -m-4 mt-4"><p class="text-sm font-medium text-red-800 dark:text-red-200"><strong>Recommendation:</strong> ${advice} <a href="${link}" target="_blank" class="font-bold underline hover:text-red-600 dark:hover:text-red-400">learn more</a></p></div>`;
                 }
                 const scoreRatio = answer.score / 9;
-                let scoreColor = 'text-red-500 dark:text-red-400';
-                if (scoreRatio >= 0.7) scoreColor = 'text-green-500 dark:text-green-400'; else if (scoreRatio >= 0.4) scoreColor = 'text-yellow-500 dark:text-yellow-400';
-                app.ui.scoreBreakdown.insertAdjacentHTML('beforeend', `<div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-sm"><div class="flex justify-between items-start mb-2"><h4 class="font-medium">${answer.section}</h4><span class="font-bold ${scoreColor}">${answer.score}/9</span></div><p class="text-sm text-gray-600 dark:text-gray-400">${answer.answer}</p>${recommendationHTML}</div>`);
             });
             generateExecutiveSummary(app.state.answers, percentage, app.state.salesStage);
             feather.replace();
         }
         function generateExecutiveSummary(answers, overallScore, salesStage) {
-            let weaknesses = [], summaryHTML = '<ul class="space-y-3 text-gray-700 dark:text-gray-300">';
             const metricsMotive = answers.find(a => a.section === 'PAIN & METRICS');
             const sorted = [...answers].sort((a, b) => a.score - b.score);
             if (metricsMotive && metricsMotive.score < 5) { weaknesses.push(metricsMotive); const next = sorted.find(a => a.section !== 'PAIN & METRICS'); if (next && weaknesses.length < 2) weaknesses.push(next); } else { weaknesses = sorted.slice(0, 2); }
             const strength = sorted[sorted.length - 1];
-            if (overallScore >= 60 && strength.score >= 7) { summaryHTML += `<li class="flex items-start"><span class="mr-2 text-green-500">✅</span><span><strong>Strength:</strong> The deal is well-positioned in <strong>${strength.section}</strong>.</span></li>`; }
-            weaknesses.forEach(weak => { const snippet = summarySnippets[weak.section] || 'This area needs to be addressed.'; summaryHTML += `<li class="flex items-start"><span class="mr-2 text-red-500">🔴</span><span><strong>Urgent Focus: ${weak.section}</strong>. ${snippet}</span></li>`; });
             summaryHTML += '</ul>';
             let strategicMessage = ''; // Full logic truncated for brevity
             if (overallScore <= 19) { strategicMessage = "Okay if early, but more qualification is required."; }
             else { strategicMessage = "The finish line is in sight... expect negotiations."; }
-            summaryHTML += `<div class="mt-4 pt-4 border-t dark:border-gray-700"><p class="text-base font-medium text-purple-700 dark:text-purple-400">${strategicMessage}</p></div>`;
             app.ui.executiveSummary.innerHTML = summaryHTML;
         }

     </script>
     <style>
         body { font-family: 'Poppins', sans-serif; }
+        .question-screen { transition: all 0.3s ease; } /* Removed min-height: 100vh */
         .fade-in { animation: fadeIn 0.5s; }
         @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
         .progress-bar { height: 6px; transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1); }
         .nav-link.active { font-weight: 600; border-bottom: 2px solid #8b5cf6; }
     </style>
 </head>
+<body class="bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-gray-200 min-h-screen flex flex-col relative bg-gradient-to-br from-purple-600 to-indigo-700">
 <header class="sticky top-0 z-50 bg-white/80 dark:bg-gray-900/80 backdrop-blur-md shadow-sm">
     <div class="container mx-auto px-4 py-3">
 </header>
 <div id="app" class="relative overflow-hidden flex-1">
+    <div id="industry-screen" class="question-screen flex justify-center items-center p-4 text-white">
         <div class="max-w-2xl mx-auto w-full text-center" data-aos="fade-up">
+            <div class="w-16 h-16 bg-white rounded-full flex items-center justify-center mx-auto mb-2 shadow-lg"><img src="https://huggingface.co/spaces/DjayChucko/EnablingSales/resolve/main/images/MEDDICC%20Scorecard%20Logo.png" alt="MEDDICC Logo" class="w-14 h-10"></div>
+            <h1 class="text-3xl font-bold mb-2 text-white">MEDDICC Scorecard</h1>
             <p class="text-purple-200 font-light text-lg">Select the customer's industry and current deal stage</p>
+            <div class="mt-6 mb-6 grid sm:grid-cols-2 gap-4">
+                <div class="relative"><select id="industry" class="w-full p-3 bg-white/20 border-2 border-purple-300 rounded-xl text-white focus:ring-2 focus:ring-white focus:outline-none appearance-none"><option value="" disabled selected>Select an Industry</option><option value="FSI">FSI (Financial Services)</option><option value="Healthcare">Healthcare</option><option value="Public Sector & Education">Public Sector & Education</option><option value="Retail and Ecommerce">Retail and Ecommerce</option><option value="Tech (SaaS)">Tech (SaaS)</option><option value="Cyber">Cyber</option><option value="Media and Entertainment">Media and Entertainment</option><option value="Manufacturing">Manufacturing</option><option value="Energy">Energy</option><option value="Logistics">Logistics</option><option value="Transport">Transport</option><option value="Startups">Startups</option></select></div>
+                <div class="relative"><select id="sales-stage" class="w-full p-3 bg-white/20 border-2 border-purple-300 rounded-xl text-white focus:ring-2 focus:ring-white focus:outline-none appearance-none"><option value="" disabled selected>Select Sales Stage</option><option value="Early Stage">Early Stage</option><option value="Evaluation / PoC">Evaluation / PoC</option><option value="Closing">Closing</option></select></div>
             </div>
+            <button id="start-btn" disabled class="w-full py-3 bg-white text-purple-700 font-semibold rounded-xl shadow-lg hover:bg-gray-100 transition-all disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center space-x-2"><span>Start Qualification</span><i data-feather="arrow-right" class="w-5 h-5"></i></button>
         </div>
     </div>
     <div id="question-screens" class="hidden"><div class="fixed top-16 left-0 right-0 z-10 bg-gray-100 dark:bg-gray-900"><div class="h-1.5 bg-gray-200 dark:bg-gray-700"><div id="progress-bar" class="progress-bar bg-purple-600 h-full rounded-r-full"></div></div></div></div>
+    <div id="results-screen" class="question-screen py-8 px-4 sm:px-6 bg-gray-100 dark:bg-gray-900 hidden overflow-y-auto">
+        <div class="max-w-4xl mx-auto w-full" data-aos="fade-in">
+            <div class="text-center mb-6"><div class="w-20 h-20 bg-white dark:bg-gray-800 border-4 border-purple-500 rounded-full flex items-center justify-center mx-auto mb-4"><span id="score-percentage" class="text-3xl font-bold text-purple-600 dark:text-purple-400">0%</span></div><h2 id="score-message" class="text-xl font-semibold mt-2 text-gray-800 dark:text-gray-200"></h2></div>
+            <div class="mb-6"><div class="flex items-center mb-4"><div class="w-8 h-8 bg-purple-600 rounded-lg flex items-center justify-center mr-3"><i data-feather="zap" class="text-white w-4 h-4"></i></div><h3 class="text-xl font-bold text-gray-800 dark:text-white">Executive Summary</h3></div><div id="executive-summary" class="bg-white dark:bg-gray-800 p-5 rounded-xl shadow-md"></div></div>
+            <div class="grid md:grid-cols-2 gap-6">
                 <div><div class="flex items-center mb-4"><div class="w-8 h-8 bg-purple-600 rounded-lg flex items-center justify-center mr-3"><i data-feather="info" class="text-white w-4 h-4"></i></div><h3 class="text-xl font-bold text-gray-800 dark:text-white">Industry Insights</h3></div><div id="industry-insights" class="bg-white dark:bg-gray-800 p-5 rounded-xl shadow-md"></div></div>
                 <div><div class="flex items-center mb-4"><div class="w-8 h-8 bg-purple-600 rounded-lg flex items-center justify-center mr-3"><i data-feather="bar-chart-2" class="text-white w-4 h-4"></i></div><h3 class="text-xl font-bold text-gray-800 dark:text-white">Detailed Analysis</h3></div><div id="score-breakdown" class="space-y-4"></div></div>
             </div>
+            <div class="mt-6"><button id="restart-quiz" class="w-full py-3 bg-gradient-to-r from-purple-600 to-indigo-600 text-white font-semibold rounded-xl shadow-lg hover:from-purple-700 hover:to-indigo-700 transition-all transform hover:scale-105 flex items-center justify-center space-x-2"><i data-feather="refresh-cw" class="w-5 h-5"></i><span>Start New Scorecard</span></button></div>
         </div>
     </div>
 </div>
             'DECISION PROCESS & CRITERIA': '#qualify-meddicc', 'COMPETITION & BLOCKERS': '#proposals',
             'PAPER PROCESS': '#negotiation', 'IMPLEMENTATION PLAN': '#evaluation-justification'
         };
+        const scoreMessages = { 'Closing': { 14: "Low Probability. More qualification of Why Now? and Why Us? required.", 39: "Medium Probability. More qualification Why Now? to quantify the business case.", 60: "High Probability. Focus on Why Us? loop in Product teams, set traps, kill blockers.", 101: "Commit. Be cautious. Expect last minute blockers, seek Scaleway Executive Sponsors." }, 'Early Stage': { 14: "Low Potential. More discovery needed to find a compelling business pain.", 39: "Medium Potential. Good start. Focus on building the business case and identifying a Champion.", 60: "High Potential. Strong signal. Engage more stakeholders and define success criteria for an an evaluation.", 101: "Very High Potential. Excellent qualification. Prepare to move to a formal evaluation or PoC." }, 'Evaluation / PoC': { 14: "Low Confidence. This deal is not ready for an evaluation. Re-qualify the business case.", 39: "Medium Confidence. The business case is weak. Ensure the PoC has clear, agreed-upon success metrics.", 60: "High Confidence. The PoC is well-positioned. Focus on technical validation and neutralizing blockers.", 101: "Very High Confidence. A successful evaluation should lead to a close. Start planning the paper process." } };
         const industryInsights = { 'FSI': 'FSI buyers prioritize compliance...', 'Healthcare': 'Healthcare focuses on HIPAA...', 'Public Sector & Education': 'Public Sector buyers value cost efficiency...', 'Retail and Ecommerce': 'Retail needs omnichannel integration...', 'Tech (SaaS)': 'SaaS companies look for developer-friendly APIs...', 'Cyber': 'Cyber security teams require advanced threat detection...', 'Media and Entertainment': 'Media firms need high-performance content delivery...', 'Manufacturing': 'Manufacturing values predictive maintenance...', 'Energy': 'The Energy sector focuses on AI for predictive analytics...', 'Logistics': 'Logistics companies prioritize real-time tracking...', 'Transport': 'Transportation firms need AI for fleet management...', 'Startups': 'Startups look for pay-as-you-go pricing...' };
         const summarySnippets = { 'PAIN & METRICS': 'Solidify the business case by quantifying the pain with the Economic Buyer.', 'CHAMPION & EB': 'Test your Champion and leverage them for greater access to the Economic Buyer.', 'DECISION PROCESS & CRITERIA': 'Influence the decision criteria and get the formal process in writing.', 'COMPETITION & BLOCKERS': 'Set competitive traps and proactively identify all potential deal blockers.', 'PAPER PROCESS': 'De-risk the closing stage by confirming the budget source and procurement process early.', 'IMPLEMENTATION PLAN': 'Co-create a success plan with the customer to show value beyond the signature.' };
         const industrySpecificAdvice = { 'FSI': { 'PAIN & METRICS': 'Frame pain around compliance...', 'PAPER PROCESS': 'The legal review is rigorous...' }, 'Healthcare': { 'PAIN & METRICS': 'Pain is tied to HIPAA...', 'DECISION PROCESS & CRITERIA': 'Criteria weighs heavily on security...' }, 'Tech (SaaS)': { 'COMPETITION & BLOCKERS': 'The SaaS market is crowded...', 'IMPLEMENTATION PLAN': 'Offer a "quick start" plan...' } };
         app.inputs.startBtn.addEventListener('click', () => { app.screens.industry.classList.add('hidden'); app.screens.questions.classList.remove('hidden'); renderQuestion(app.state.currentQuestion); });
         app.buttons.restart.addEventListener('click', resetQuiz);
+        function resetQuiz() {
+            app.state = { currentQuestion: 0, industry: '', salesStage: '', answers: [], maxScore: 54 };
+            app.screens.results.classList.add('hidden');
+            app.screens.questions.classList.add('hidden');
+            app.screens.industry.classList.remove('hidden');
+            app.inputs.industry.value = "";
+            app.inputs.salesStage.value = "";
+            app.inputs.startBtn.disabled = true;
+            feather.replace();
+        }
         function renderQuestion(index) {
             if (index >= questions.length) { return showResults(); }
             const question = questions[index];
             app.ui.progressBar.style.width = `${(index / questions.length) * 100}%`;
             const screen = document.createElement('div');
+            screen.className = `question-screen flex flex-col justify-center p-6 bg-gradient-to-br from-purple-600 to-indigo-700 text-white fade-in`; // Apply gradient here
+            screen.innerHTML = `<div class="max-w-2xl mx-auto w-full"><div class="mb-4 text-center"><p class="text-xs font-bold tracking-wider uppercase text-purple-200 mb-2">${question.subheading}</p><span class="text-sm font-medium text-purple-300 dark:text-purple-400">${question.section}</span><h2 class="text-2xl font-bold mt-1 mb-2 text-white">${question.question}</h2></div><div class="mb-6"><div class="relative"><select id="answer-select" class="w-full p-3 bg-white/20 border-2 border-purple-300 rounded-lg focus:ring-2 focus:ring-white text-white focus:outline-none"><option value="" disabled selected>Select an answer</option>${question.answers.map(a => `<option value="${a.score}" class="bg-gray-800 text-white">${a.text}</option>`).join('')}</select></div></div><div class="flex items-center gap-4"><button id="back-btn" class="w-1/3 py-3 bg-white/20 text-white rounded-lg font-semibold shadow-md hover:bg-white/30">Back</button><button id="next-btn" disabled class="w-2/3 py-3 bg-white text-purple-700 rounded-lg font-semibold shadow-md disabled:opacity-50">${index === questions.length - 1 ? 'Finish' : 'Next'}</button></div></div>`;
             app.screens.questions.innerHTML = ''; app.screens.questions.appendChild(screen); feather.replace();
             const select = document.getElementById('answer-select'), next = document.getElementById('next-btn'), back = document.getElementById('back-btn');
             select.addEventListener('change', () => next.disabled = !select.value);
         }
         function showResults() {
+            app.screens.questions.classList.add('hidden');
+            app.screens.results.classList.remove('hidden');
+            // Ensure results screen also has the gradient background
+            app.screens.results.classList.add('bg-gradient-to-br', 'from-purple-600', 'to-indigo-700', 'text-white');
+            app.screens.results.classList.remove('bg-gray-100', 'dark:bg-gray-900', 'text-gray-800', 'dark:text-gray-200');
+            AOS.refresh();
             const totalScore = app.state.answers.reduce((sum, ans) => sum + ans.score, 0);
             const percentage = Math.max(0, Math.round((totalScore / app.state.maxScore) * 100));
             app.ui.scorePercentage.textContent = `${percentage}%`;
             let msg = '';
             if (percentage <= 14) msg = stageMessages[14]; else if (percentage <= 39) msg = stageMessages[39]; else if (percentage <= 60) msg = stageMessages[60]; else msg = stageMessages[101];
             app.ui.scoreMessage.innerHTML = `<span class="block">${msg}</span>`;
+            // Adjust colors for results elements to match the gradient background
+            app.ui.scoreMessage.classList.remove('text-gray-800', 'dark:text-gray-200');
+            app.ui.scoreMessage.classList.add('text-white');
             app.ui.industryInsights.innerHTML = `<p>${industryInsights[app.state.industry]}</p>`;
+            app.ui.industryInsights.classList.remove('bg-white', 'dark:bg-gray-800');
+            app.ui.industryInsights.classList.add('bg-white/10', 'text-white', 'backdrop-blur-sm');
+            app.ui.executiveSummary.innerHTML = ''; // Clear previous content
+            app.ui.executiveSummary.classList.remove('bg-white', 'dark:bg-gray-800');
+            app.ui.executiveSummary.classList.add('bg-white/10', 'text-white', 'backdrop-blur-sm');
             app.ui.scoreBreakdown.innerHTML = '';
             app.state.answers.forEach(answer => {
                 if (answer.score < 5) {
                     let advice = industrySpecificAdvice[app.state.industry]?.[answer.section] || summarySnippets[answer.section] || 'Focus on improving this area.';
                     const link = `academy.html${skillMapping[answer.section]}`;
+                    recommendationHTML = `<div class="mt-3 pt-3 border-t border-purple-400 bg-red-800/20 p-3 rounded-b-lg -m-4 mt-4"><p class="text-sm font-medium text-red-200"><strong>Recommendation:</strong> ${advice} <a href="${link}" target="_blank" class="font-bold underline hover:text-red-100">learn more</a></p></div>`;
                 }
                 const scoreRatio = answer.score / 9;
+                let scoreColor = 'text-red-300';
+                if (scoreRatio >= 0.7) scoreColor = 'text-green-300'; else if (scoreRatio >= 0.4) scoreColor = 'text-yellow-300';
+                // Adjust colors for score breakdown elements to match the gradient background
+                app.ui.scoreBreakdown.insertAdjacentHTML('beforeend', `<div class="bg-white/10 p-4 rounded-lg shadow-sm backdrop-blur-sm"><div class="flex justify-between items-start mb-2"><h4 class="font-medium text-white">${answer.section}</h4><span class="font-bold ${scoreColor}">${answer.score}/9</span></div><p class="text-sm text-purple-200">${answer.answer}</p>${recommendationHTML}</div>`);
             });
             generateExecutiveSummary(app.state.answers, percentage, app.state.salesStage);
             feather.replace();
         }
         function generateExecutiveSummary(answers, overallScore, salesStage) {
+            let weaknesses = [], summaryHTML = '<ul class="space-y-3 text-purple-100">';
             const metricsMotive = answers.find(a => a.section === 'PAIN & METRICS');
             const sorted = [...answers].sort((a, b) => a.score - b.score);
             if (metricsMotive && metricsMotive.score < 5) { weaknesses.push(metricsMotive); const next = sorted.find(a => a.section !== 'PAIN & METRICS'); if (next && weaknesses.length < 2) weaknesses.push(next); } else { weaknesses = sorted.slice(0, 2); }
             const strength = sorted[sorted.length - 1];
+            if (overallScore >= 60 && strength.score >= 7) { summaryHTML += `<li class="flex items-start"><span class="mr-2 text-green-300">✅</span><span><strong>Strength:</strong> The deal is well-positioned in <strong>${strength.section}</strong>.</span></li>`; }
+            weaknesses.forEach(weak => { const snippet = summarySnippets[weak.section] || 'This area needs to be addressed.'; summaryHTML += `<li class="flex items-start"><span class="mr-2 text-red-300">🔴</span><span><strong>Urgent Focus: ${weak.section}</strong>. ${snippet}</span></li>`; });
             summaryHTML += '</ul>';
             let strategicMessage = ''; // Full logic truncated for brevity
             if (overallScore <= 19) { strategicMessage = "Okay if early, but more qualification is required."; }
             else { strategicMessage = "The finish line is in sight... expect negotiations."; }
+            summaryHTML += `<div class="mt-4 pt-4 border-t border-purple-400"><p class="text-base font-medium text-purple-200">${strategicMessage}</p></div>`;
             app.ui.executiveSummary.innerHTML = summaryHTML;
         }