Hugging Face's logo

Spaces:
Gyaneshere
/
meddicc-score
Running

App Files Community
Gyaneshere commited on
Commit
6b0d41f
·
verified ·
1 Parent(s): b146788

updated index.html

Browse files
Files changed (1) hide show
  1. index.html +315 -18
index.html CHANGED
@@ -1,19 +1,316 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </html>
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Sales Qualification Tool</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet">
10
+ <script src="https://unpkg.com/[email protected]/dist/aos.js"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
12
+ <script src="https://unpkg.com/feather-icons"></script>
13
+ <script>
14
+ tailwind.config = {
15
+ darkMode: 'class',
16
+ theme: {
17
+ extend: {
18
+ colors: {
19
+ primary: '#6366f1',
20
+ secondary: '#8b5cf6',
21
+ dark: '#1e293b'
22
+ }
23
+ }
24
+ }
25
+ }
26
+ </script>
27
+ <style>
28
+ /* --- UNIFIED HEADER STYLES --- */
29
+ .nav-link.active {
30
+ @apply text-primary font-medium border-b-2 border-primary;
31
+ }
32
+ .hamburger-line {
33
+ @apply w-6 h-0.5 bg-white transition-all duration-300;
34
+ }
35
+ #mobileMenuButton.open .hamburger-line:nth-child(1) {
36
+ transform: rotate(45deg) translate(5px, 6px);
37
+ }
38
+ #mobileMenuButton.open .hamburger-line:nth-child(2) {
39
+ opacity: 0;
40
+ }
41
+ #mobileMenuButton.open .hamburger-line:nth-child(3) {
42
+ transform: rotate(-45deg) translate(5px, -6px);
43
+ }
44
+
45
+ /* --- PAGE-SPECIFIC STYLES --- */
46
+ .question-screen { transition: all 0.3s ease; }
47
+ .fade-in { animation: fadeIn 0.5s; }
48
+ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
49
+ .progress-bar { height: 6px; transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1); }
50
+ select {
51
+ -webkit-appearance: none; -moz-appearance: none; appearance: none;
52
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
53
+ background-repeat: no-repeat; background-position: right 0.75rem center; background-size: 1.25rem;
54
+ }
55
+ .dark select {
56
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
57
+ }
58
+ </style>
59
+ </head>
60
+ <body class="min-h-screen flex flex-col relative bg-gradient-to-br from-purple-600 to-indigo-700">
61
+
62
+ <header class="sticky top-0 z-50 bg-purple-800/80 backdrop-blur-md shadow-sm">
63
+ <div class="container mx-auto px-4 py-3">
64
+ <div class="flex justify-between items-center">
65
+ <a href="index.html" class="flex items-center space-x-2">
66
+ <img src="https://huggingface.co/spaces/DjayChucko/EnablingSales/resolve/main/images/Scaleway-Logomark-White.png" alt="Logo" class="h-8 mr-2">
67
+ <span class="text-xl font-bold text-white font-heading">McGPT</span>
68
+ </a>
69
+ <nav class="hidden md:flex space-x-8">
70
+ <a href="value-mapper.html" class="nav-link py-2 px-1 text-white hover:text-primary transition-colors">Mapper</a>
71
+ <a href="scorecard.html" class="nav-link py-2 px-1 text-white hover:text-primary transition-colors">Scorecard</a>
72
+ <a href="intel.html" class="nav-link py-2 px-1 text-white hover:text-primary transition-colors">Products</a>
73
+ <a href="strategy.html" class="nav-link py-2 px-1 text-white hover:text-primary transition-colors">Method</a>
74
+ <a href="academy.html" class="nav-link py-2 px-1 text-white hover:text-primary transition-colors">Academy</a>
75
+ </nav>
76
+ <div class="flex items-center space-x-4">
77
+ <button id="themeToggle" class="p-2 rounded-full text-white hover:bg-white/20">
78
+ <i data-feather="moon" class="hidden dark:block"></i>
79
+ <i data-feather="sun" class="block dark:hidden"></i>
80
+ </button>
81
+ <button id="mobileMenuButton" class="md:hidden flex flex-col space-y-1.5 p-2 z-50 bg-[#9B5CEB] rounded-lg">
82
+ <span class="hamburger-line"></span>
83
+ <span class="hamburger-line"></span>
84
+ <span class="hamburger-line"></span>
85
+ </button>
86
+ </div>
87
+ </div>
88
+ </div>
89
+ </header>
90
+
91
+ <div id="mobileMenu" class="hidden fixed inset-0 z-40 bg-purple-900 bg-opacity-95 backdrop-blur-sm">
92
+ <div class="flex flex-col items-center justify-center h-full space-y-8">
93
+ <a href="index.html" class="nav-link text-3xl text-white">Home</a>
94
+ <a href="value-mapper.html" class="nav-link text-3xl text-white">Mapper</a>
95
+ <a href="scorecard.html" class="nav-link text-3xl text-white">Scorecard</a>
96
+ <a href="intel.html" class="nav-link text-3xl text-white">Products</a>
97
+ <a href="strategy.html" class="nav-link text-3xl text-white">Method</a>
98
+ <a href="academy.html" class="nav-link text-3xl text-white">Academy</a>
99
+ </div>
100
+ </div>
101
+ <div id="app" class="relative overflow-hidden flex-1">
102
+ <div id="industry-screen" class="question-screen flex justify-center items-center p-4 text-white">
103
+ <div class="max-w-2xl mx-auto w-full text-center" data-aos="fade-up">
104
+ <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>
105
+ <h1 class="text-3xl font-bold mb-2 text-white">MEDDICC Scorecard</h1>
106
+
107
+ <p class="text-purple-200 font-light text-lg">Select the customer's industry and current deal stage</p>
108
+ <div class="mt-6 mb-6 grid sm:grid-cols-2 gap-4">
109
+ <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>
110
+ <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>
111
+ </div>
112
+ <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>
113
+ </div>
114
+ </div>
115
+ <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>
116
+ <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">
117
+ <div class="max-w-4xl mx-auto w-full" data-aos="fade-in">
118
+ <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>
119
+ <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>
120
+ <div class="grid md:grid-cols-2 gap-6">
121
+ <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>
122
+ <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>
123
+ </div>
124
+ <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>
125
+ </div>
126
+ </div>
127
+ </div>
128
+
129
+ <script>
130
+ // --- Mobile Menu Toggle ---
131
+ const mobileMenuButton = document.getElementById('mobileMenuButton');
132
+ const mobileMenu = document.getElementById('mobileMenu');
133
+ mobileMenuButton.addEventListener('click', () => {
134
+ mobileMenu.classList.toggle('hidden');
135
+ mobileMenuButton.classList.toggle('open');
136
+ document.body.classList.toggle('overflow-hidden');
137
+ });
138
+
139
+ // --- Theme Toggle ---
140
+ const themeToggle = document.getElementById('themeToggle');
141
+ const html = document.documentElement;
142
+ themeToggle.addEventListener('click', () => {
143
+ html.classList.toggle('dark');
144
+ localStorage.theme = html.classList.contains('dark') ? 'dark' : 'light';
145
+ });
146
+ // Set initial theme
147
+ if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
148
+ html.classList.add('dark');
149
+ } else {
150
+ html.classList.remove('dark');
151
+ }
152
+
153
+ // --- Set Active Nav Link ---
154
+ const currentPage = window.location.pathname.split('/').pop() || 'index.html';
155
+ document.querySelectorAll('.nav-link').forEach(link => {
156
+ const linkHref = link.getAttribute('href');
157
+ if (linkHref === currentPage) {
158
+ link.classList.add('active');
159
+ } else {
160
+ link.classList.remove('active');
161
+ }
162
+ });
163
+
164
+ // --- Feather Icons ---
165
+ feather.replace();
166
+ </script>
167
+ <script>
168
+ document.addEventListener('DOMContentLoaded', function() {
169
+ AOS.init({ once: true, duration: 600 });
170
+
171
+ const app = {
172
+ state: { currentQuestion: 0, industry: '', salesStage: '', answers: [], maxScore: 54 },
173
+ screens: { industry: document.getElementById('industry-screen'), questions: document.getElementById('question-screens'), results: document.getElementById('results-screen') },
174
+ inputs: { industry: document.getElementById('industry'), salesStage: document.getElementById('sales-stage'), startBtn: document.getElementById('start-btn') },
175
+ ui: { progressBar: document.getElementById('progress-bar'), scorePercentage: document.getElementById('score-percentage'), scoreMessage: document.getElementById('score-message'), industryInsights: document.getElementById('industry-insights'), scoreBreakdown: document.getElementById('score-breakdown'), executiveSummary: document.getElementById('executive-summary') },
176
+ buttons: { restart: document.getElementById('restart-quiz') }
177
+ };
178
+
179
+ const questions = [
180
+ { section: 'PAIN & METRICS', subheading: 'Section 1: The Opportunity', question: 'What is the quantifiable business pain?', answers: [ { text: 'EB agrees on a top-priority pain with a quantified business case (QBC)', score: 9 }, { text: 'Champion agrees on the pain and we are building the business case', score: 6 }, { text: 'Pain is defined but lacks clear metrics and EB involvement', score: 3 }, { text: 'Pain is vague and no metrics have been discussed', score: 0 } ] },
181
+ { section: 'CHAMPION & EB', subheading: 'Section 1: The Opportunity', question: 'How strong is our relationship with the key personas?', answers: [ { text: 'Our Champion is selling on our behalf and we have EB engagement', score: 9 }, { text: 'We have a tested Champion who is providing access to power', score: 6 }, { text: 'We have a potential Champion but they are not yet tested', score: 3 }, { text: 'No Champion or Economic Buyer identified', score: 0 } ] },
182
+ { section: 'DECISION PROCESS & CRITERIA', subheading: 'Section 2: The Decision', question: 'How will the decision be made and what are the requirements?', answers: [ { text: 'We influenced the criteria and the process is confirmed with the EB', score: 9 }, { text: 'We know the process and criteria and believe we are aligned', score: 6 }, { text: 'The decision process or criteria are partially understood', score: 3 }, { text: 'The process and criteria are a black box', score: 0 } ] },
183
+ { section: 'COMPETITION & BLOCKERS', subheading: 'Section 2: The Decision', question: 'What internal and external forces can stop this deal?', answers: [ { text: 'We are seen as the preferred vendor and all blockers have a mitigation plan', score: 9 }, { text: 'Competition is known, traps are set, and some blockers are identified', score: 6 }, { text: 'We know of competitors but have not identified potential blockers', score: 3 }, { text: 'Competitive landscape and internal blockers are unknown', score: 0 } ] },
184
+ { section: 'PAPER PROCESS', subheading: 'Section 3: The Logistics', question: 'How aligned are we on the procurement and legal process?', answers: [ { text: 'Pricing, contract, and security review process are fully confirmed', score: 9 }, { text: 'We have had initial discussions on budget and the paper process', score: 6 }, { text: 'A budget is confirmed but the paper process has not been discussed', score: 3 }, { text: 'Budget and procurement process are unknown', score: 0 } ] },
185
+ { section: 'IMPLEMENTATION PLAN', subheading: 'Section 3: The Logistics', question: 'Is there a clear, agreed-upon plan for success after signing?', answers: [ { text: 'All stakeholders have agreed to a formal, joint implementation plan', score: 9 }, { text: 'We have shared a draft implementation plan with our Champion', score: 6 }, { text: 'Implementation has been discussed but no formal plan exists', score: 3 }, { text: 'The post-sale process has not been discussed', score: 0 } ] }
186
+ ];
187
+
188
+ 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. Engage customer to define success metrics of any PoC. 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." } };
189
+
190
+ const industryInsights = {
191
+ 'FSI': 'Financial services organizations prioritize security, data sovereignty, and high-level compliance certifications like SecNumCloud. They are typically interested in high-performance computing (HPC) for risk modeling, AI and machine learning for fraud detection, and highly available, managed database solutions for transactional systems. Secure private networks and robust disaster recovery solutions are also key considerations to ensure business continuity and protect sensitive financial data.',
192
+ 'Healthcare': 'The healthcare sector is driven by the need to protect sensitive patient data, making compliance certifications like HDS (Health Data Hosting) and HIPAA paramount. Organizations often seek secure object storage for medical imaging archives (PACS), AI/ML services for diagnostic imaging analysis, and managed databases for electronic health records (EHR). Private networking and robust encryption are crucial for creating a secure environment for processing and storing personal health information.',
193
+ 'Public Sector & Education': 'Government, public services, and educational institutions focus on data sovereignty, cost-efficiency, and security. They often require cloud platforms with specific national certifications to ensure data remains within jurisdictional boundaries. Common use cases include hosting citizen-facing web applications, creating virtual labs and e-learning platforms with on-demand GPU instances, and leveraging scalable object storage for archiving public records and research data.',
194
+ 'Retail and Ecommerce': 'Retailers and e-commerce platforms need scalable, resilient, and high-performance infrastructure to handle fluctuating traffic, especially during peak shopping seasons. Key technologies include managed Kubernetes for containerized microservices, auto-scaling compute instances, and Content Delivery Networks (CDNs) to accelerate website loading times globally. They also heavily utilize data analytics and AI/ML services for customer personalization, demand forecasting, and recommendation engines.',
195
+ 'Tech (SaaS)': 'SaaS companies and tech firms look for developer-friendly tools that accelerate innovation and reduce operational overhead. They are heavy users of managed Kubernetes (Kapsule) and serverless functions (Kore) to build scalable, cloud-native applications. Managed databases, object storage, and integrated CI/CD tooling are essential for rapid development cycles. A predictable pricing model and powerful, easy-to-use APIs are also critical for this developer-centric audience.',
196
+ 'Cyber': 'Cyber security firms require isolated, high-performance environments to analyze threats and run security applications. They are interested in bare metal servers for maximum performance and control, virtual private clouds (VPCs) for network segmentation, and powerful compute instances for running security information and event management (SIEM) platforms. Scalable object storage is also used for cost-effective, long-term retention of log data for forensic analysis.',
197
+ 'Media and Entertainment': 'Media companies handle massive datasets and require infrastructure that can process and deliver content at scale. They typically leverage petabyte-scale object storage for media archives and video-on-demand (VOD) libraries. High-performance GPU instances are crucial for video transcoding, rendering, and AI-powered content analysis. A global CDN is essential for ensuring low-latency streaming and fast content delivery to audiences worldwide.',
198
+ 'Manufacturing': 'In manufacturing, the focus is on leveraging data from the factory floor to optimize production and reduce downtime. This sector is increasingly adopting Internet of Things (IoT) platforms to connect and manage industrial sensors and equipment. Cloud-based data analytics and AI/ML services are used for predictive maintenance, quality control, and supply chain optimization. Secure and scalable object storage is also needed for archiving vast amounts of historical production data.',
199
+ 'Energy': 'The energy sector uses cloud technologies to analyze vast datasets for exploration, optimize grid performance, and forecast demand. High-performance computing (HPC) and GPU instances are essential for running complex geological simulations and AI models. IoT platforms are used to build smart grids and monitor remote assets. Data analytics services are key to processing sensor data and improving operational efficiency and sustainability.',
200
+ 'Logistics': 'Logistics and supply chain companies rely on real-time data to optimize operations and improve efficiency. They utilize cloud services for IoT fleet management, real-time tracking of shipments, and data analytics to predict delivery times. AI and machine learning are employed for route optimization and demand forecasting, helping to reduce fuel costs and improve service reliability. Scalable databases are needed to manage the high volume of tracking and inventory data.',
201
+ 'Transport': 'The transportation industry uses the cloud to enhance operational efficiency and passenger experience. Key technologies include IoT for fleet management and predictive maintenance on vehicles like trains and planes. Data analytics platforms are used to analyze passenger flow and optimize scheduling. AI services can power smart assistants for travelers and improve real-time traffic management systems for urban transport networks.',
202
+ 'Startups': 'Startups need to build and scale quickly with minimal upfront investment and operational burden. They thrive on pay-as-you-go pricing and developer-friendly managed services. Key technologies include serverless functions and containers (Kubernetes) to build scalable applications without managing servers, managed databases to simplify setup and maintenance, and object storage for a cost-effective way to store user data and application assets. The ability to scale resources on-demand is critical to support rapid growth.'
203
+ };
204
+
205
+ 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.' };
206
+
207
+ 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...' } };
208
+
209
+ // --- MAPPING FOR LOW SCORE RECOMMENDATION LINKS ---
210
+ // This now correctly maps to the IDs found in academy.html
211
+ const lowScoreLinks = {
212
+ 'PAIN & METRICS': 'academy.html#discovery-qualification',
213
+ 'CHAMPION & EB': 'academy.html#stakeholder-mapping',
214
+ 'DECISION PROCESS & CRITERIA': 'academy.html#qualify-meddicc',
215
+ 'COMPETITION & BLOCKERS': 'academy.html#proposals',
216
+ 'PAPER PROCESS': 'academy.html#evaluation-justification',
217
+ 'IMPLEMENTATION PLAN': 'academy.html#solution-architects'
218
+ };
219
+
220
+ function checkSelections() { app.inputs.startBtn.disabled = !(app.state.industry && app.state.salesStage); }
221
+ app.inputs.industry.addEventListener('change', (e) => { app.state.industry = e.target.value; checkSelections(); });
222
+ app.inputs.salesStage.addEventListener('change', (e) => { app.state.salesStage = e.target.value; checkSelections(); });
223
+ app.inputs.startBtn.addEventListener('click', () => { app.screens.industry.classList.add('hidden'); app.screens.questions.classList.remove('hidden'); renderQuestion(app.state.currentQuestion); });
224
+ app.buttons.restart.addEventListener('click', resetQuiz);
225
+
226
+ function resetQuiz() {
227
+ app.state = { currentQuestion: 0, industry: '', salesStage: '', answers: [], maxScore: 54 };
228
+ app.screens.results.classList.add('hidden');
229
+ app.screens.questions.classList.add('hidden');
230
+ app.screens.industry.classList.remove('hidden');
231
+ app.inputs.industry.value = "";
232
+ app.inputs.salesStage.value = "";
233
+ app.inputs.startBtn.disabled = true;
234
+ feather.replace();
235
+ }
236
+
237
+ function renderQuestion(index) {
238
+ if (index >= questions.length) { return showResults(); }
239
+ const question = questions[index];
240
+ app.ui.progressBar.style.width = `${(index / questions.length) * 100}%`;
241
+ const screen = document.createElement('div');
242
+ 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`;
243
+ 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>`;
244
+ app.screens.questions.innerHTML = ''; app.screens.questions.appendChild(screen); feather.replace();
245
+ const select = document.getElementById('answer-select'), next = document.getElementById('next-btn'), back = document.getElementById('back-btn');
246
+ select.addEventListener('change', () => next.disabled = !select.value);
247
+ next.addEventListener('click', () => { app.state.answers.push({ section: question.section, answer: select.options[select.selectedIndex].text, score: parseInt(select.value) }); app.state.currentQuestion++; renderQuestion(app.state.currentQuestion); });
248
+ back.addEventListener('click', () => { if (index > 0) { app.state.currentQuestion--; app.state.answers.pop(); renderQuestion(app.state.currentQuestion); } else { resetQuiz(); } });
249
+ }
250
+
251
+ function showResults() {
252
+ app.screens.questions.classList.add('hidden');
253
+ app.screens.results.classList.remove('hidden');
254
+ app.screens.results.classList.add('bg-gradient-to-br', 'from-purple-600', 'to-indigo-700', 'text-white');
255
+ app.screens.results.classList.remove('bg-gray-100', 'dark:bg-gray-900', 'text-gray-800', 'dark:text-gray-200');
256
+
257
+ AOS.refresh();
258
+ const totalScore = app.state.answers.reduce((sum, ans) => sum + ans.score, 0);
259
+ const percentage = Math.max(0, Math.round((totalScore / app.state.maxScore) * 100));
260
+ app.ui.scorePercentage.textContent = `${percentage}%`;
261
+ const stageMessages = scoreMessages[app.state.salesStage] || scoreMessages['Early Stage'];
262
+ let msg = '';
263
+ if (percentage <= 14) msg = stageMessages[14]; else if (percentage <= 39) msg = stageMessages[39]; else if (percentage <= 60) msg = stageMessages[60]; else msg = stageMessages[101];
264
+ app.ui.scoreMessage.innerHTML = `<span class="block">${msg}</span>`;
265
+
266
+ app.ui.scoreMessage.classList.remove('text-gray-800', 'dark:text-gray-200');
267
+ app.ui.scoreMessage.classList.add('text-white');
268
+
269
+ app.ui.industryInsights.innerHTML = `<p>${industryInsights[app.state.industry]}</p>`;
270
+ app.ui.industryInsights.classList.remove('bg-white', 'dark:bg-gray-800');
271
+ app.ui.industryInsights.classList.add('bg-white/10', 'text-white', 'backdrop-blur-sm');
272
+
273
+ app.ui.executiveSummary.innerHTML = '';
274
+ app.ui.executiveSummary.classList.remove('bg-white', 'dark:bg-gray-800');
275
+ app.ui.executiveSummary.classList.add('bg-white/10', 'text-white', 'backdrop-blur-sm');
276
+
277
+ app.ui.scoreBreakdown.innerHTML = '';
278
+
279
+ app.state.answers.forEach(answer => {
280
+ let recommendationHTML = '';
281
+ // Condition to show recommendation is a score less than 5 (i.e., 0 or 3)
282
+ if (answer.score < 5) {
283
+ let advice = industrySpecificAdvice[app.state.industry]?.[answer.section] || summarySnippets[answer.section] || 'Focus on improving this area.';
284
+ const link = lowScoreLinks[answer.section] || 'academy.html'; // Direct lookup from the corrected link map
285
+ 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>`;
286
+ }
287
+ const scoreRatio = answer.score / 9;
288
+ let scoreColor = 'text-red-300';
289
+ if (scoreRatio >= 0.7) scoreColor = 'text-green-300'; else if (scoreRatio >= 0.4) scoreColor = 'text-yellow-300';
290
+
291
+ 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>`);
292
+ });
293
+ generateExecutiveSummary(app.state.answers, percentage, app.state.salesStage);
294
+ feather.replace();
295
+ }
296
+
297
+ function generateExecutiveSummary(answers, overallScore, salesStage) {
298
+ let weaknesses = [], summaryHTML = '<ul class="space-y-3 text-purple-100">';
299
+ const metricsMotive = answers.find(a => a.section === 'PAIN & METRICS');
300
+ const sorted = [...answers].sort((a, b) => a.score - b.score);
301
+ 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); }
302
+ const strength = sorted[sorted.length - 1];
303
+ 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>`; }
304
+ 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>`; });
305
+ summaryHTML += '</ul>';
306
+ let strategicMessage = '';
307
+ if (overallScore <= 19) { strategicMessage = "Okay if early, but more qualification is required."; }
308
+ else { strategicMessage = "Do you agree with this score? Do you know what to do next to improve it? Check below for some guidance"; }
309
+ summaryHTML += `<div class="mt-4 pt-4 border-t border-purple-400"><p class="text-base font-medium text-purple-200">${strategicMessage}</p></div>`;
310
+ app.ui.executiveSummary.innerHTML = summaryHTML;
311
+ }
312
+ });
313
+ </script>
314
+
315
+ </body>
316
  </html>