Hugging Face's logo

Spaces:
LukasBe
/
clarity-compass
Running

App Files Community
clarity-compass / index.html
LukasBe's picture
LukasBe
Add 3 files
0fcaf1c verified
raw
history blame contribute delete
64.8 kB
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Clarity Compass | Business-First Software Readiness Wizard</title>
 <script src="https://cdn.tailwindcss.com"></script>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
 <style>
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
body {
 font-family: 'Inter', sans-serif;
 background-color: #f8fafc;
 color: #1e293b;
 }
.progress-bar {
 height: 6px;
 transition: width 0.5s ease;
 }
.question-card {
 opacity: 0;
 transform: translateY(20px);
 transition: opacity 0.3s ease, transform 0.3s ease;
 }
.question-card.active {
 opacity: 1;
 transform: translateY(0);
 }
.option-card {
 transition: all 0.2s ease;
 }
.option-card:hover {
 transform: translateY(-2px);
 box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
 }
.option-card.selected {
 border-color: #4f46e5;
 background-color: #eef2ff;
 }
.slider {
 -webkit-appearance: none;
 width: 100%;
 height: 8px;
 border-radius: 4px;
 background: #e2e8f0;
 outline: none;
 }
.slider::-webkit-slider-thumb {
 -webkit-appearance: none;
 appearance: none;
 width: 20px;
 height: 20px;
 border-radius: 50%;
 background: #4f46e5;
 cursor: pointer;
 }
.slider::-moz-range-thumb {
 width: 20px;
 height: 20px;
 border-radius: 50%;
 background: #4f46e5;
 cursor: pointer;
 }
.report-card {
 background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
 box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.025);
 }
.fade-in {
 animation: fadeIn 0.5s ease forwards;
 }
@keyframes fadeIn {
 from { opacity: 0; }
 to { opacity: 1; }
 }
 </style>
</head>
<body>
 <div class="min-h-screen flex flex-col">
 <!-- Header -->
 <header class="bg-white shadow-sm py-6">
 <div class="container mx-auto px-4">
 <div class="flex items-center justify-between">
 <div class="flex items-center space-x-3">
 <div class="w-10 h-10 rounded-lg bg-indigo-600 flex items-center justify-center">
 <i class="fas fa-compass text-white text-xl"></i>
 </div>
 <h1 class="text-2xl font-semibold text-gray-800">Clarity Compass</h1>
 </div>
 <div class="text-sm text-gray-500">
 <span id="current-step">1</span> of <span id="total-steps">6</span>
 </div>
 </div>
 <div class="mt-4 w-full bg-gray-200 rounded-full h-2">
 <div id="progress-bar" class="progress-bar bg-indigo-600 rounded-full" style="width: 16.66%"></div>
 </div>
 </div>
 </header>
<!-- Main Content -->
 <main class="flex-grow py-8 container mx-auto px-4 max-w-3xl">
 <!-- Wizard Steps -->
 <div id="wizard-container">
 <!-- Step 1 -->
 <div class="question-card active" data-step="1">
 <h2 class="text-2xl font-semibold text-gray-800 mb-2">Understanding the Context</h2>
 <p class="text-gray-600 mb-6">Let's start by understanding where this project lives in your business.</p>
<div class="space-y-4">
 <div>
 <label class="block text-sm font-medium text-gray-700 mb-2">Is this tool meant for:</label>
 <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
 <div class="option-card p-4 border-2 border-gray-200 rounded-lg cursor-pointer" data-value="internal">
 <div class="flex items-center space-x-3">
 <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center">
 <i class="fas fa-users-cog text-blue-600"></i>
 </div>
 <span class="font-medium">Internal efficiency</span>
 </div>
 </div>
 <div class="option-card p-4 border-2 border-gray-200 rounded-lg cursor-pointer" data-value="customer">
 <div class="flex items-center space-x-3">
 <div class="w-8 h-8 rounded-full bg-purple-100 flex items-center justify-center">
 <i class="fas fa-handshake text-purple-600"></i>
 </div>
 <span class="font-medium">Customer engagement/sales</span>
 </div>
 </div>
 <div class="option-card p-4 border-2 border-gray-200 rounded-lg cursor-pointer" data-value="partner">
 <div class="flex items-center space-x-3">
 <div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center">
 <i class="fas fa-building text-green-600"></i>
 </div>
 <span class="font-medium">Partner/vendor operations</span>
 </div>
 </div>
 </div>
 </div>
<div>
 <label class="block text-sm font-medium text-gray-700 mb-2">Is this replacing, improving, or inventing something new?</label>
 <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
 <div class="option-card p-4 border-2 border-gray-200 rounded-lg cursor-pointer" data-value="replace">
 <div class="flex items-center space-x-3">
 <div class="w-8 h-8 rounded-full bg-red-100 flex items-center justify-center">
 <i class="fas fa-exchange-alt text-red-600"></i>
 </div>
 <span class="font-medium">Replacing</span>
 </div>
 </div>
 <div class="option-card p-4 border-2 border-gray-200 rounded-lg cursor-pointer" data-value="improve">
 <div class="flex items-center space-x-3">
 <div class="w-8 h-8 rounded-full bg-yellow-100 flex items-center justify-center">
 <i class="fas fa-tools text-yellow-600"></i>
 </div>
 <span class="font-medium">Improving</span>
 </div>
 </div>
 <div class="option-card p-4 border-2 border-gray-200 rounded-lg cursor-pointer" data-value="invent">
 <div class="flex items-center space-x-3">
 <div class="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center">
 <i class="fas fa-lightbulb text-indigo-600"></i>
 </div>
 <span class="font-medium">Inventing new</span>
 </div>
 </div>
 </div>
 </div>
<div>
 <label class="block text-sm font-medium text-gray-700 mb-2">Does your team already use a tool for this?</label>
 <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
 <div class="option-card p-4 border-2 border-gray-200 rounded-lg cursor-pointer" data-value="yes">
 <div class="flex items-center space-x-3">
 <div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center">
 <i class="fas fa-check text-green-600"></i>
 </div>
 <span class="font-medium">Yes</span>
 </div>
 </div>
 <div class="option-card p-4 border-2 border-gray-200 rounded-lg cursor-pointer" data-value="no">
 <div class="flex items-center space-x-3">
 <div class="w-8 h-8 rounded-full bg-red-100 flex items-center justify-center">
 <i class="fas fa-times text-red-600"></i>
 </div>
 <span class="font-medium">No</span>
 </div>
 </div>
 </div>
 </div>
 </div>
<div class="mt-8 flex justify-end">
 <button class="next-btn px-6 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition">Continue</button>
 </div>
 </div>
<!-- Step 2 -->
 <div class="question-card hidden" data-step="2">
 <h2 class="text-2xl font-semibold text-gray-800 mb-2">Quantifying the Impact</h2>
 <p class="text-gray-600 mb-6">Let's size the potential gain or protection this project offers.</p>
<div class="space-y-6">
 <div>
 <label for="users" class="block text-sm font-medium text-gray-700 mb-2">How many people will use this tool annually?</label>
 <input type="number" id="users" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-indigo-500 focus:border-indigo-500" placeholder="Enter number of users">
 </div>
<div>
 <label for="transactions" class="block text-sm font-medium text-gray-700 mb-2">How many transactions/interactions will it process yearly?</label>
 <input type="number" id="transactions" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-indigo-500 focus:border-indigo-500" placeholder="Enter estimated number">
 </div>
<div>
 <label class="block text-sm font-medium text-gray-700 mb-4">Will it affect revenue directly or indirectly?</label>
 <div class="flex items-center space-x-4">
 <span class="text-sm text-gray-500">Indirect</span>
 <input type="range" min="0" max="100" value="50" class="slider" id="revenue-impact">
 <span class="text-sm text-gray-500">Direct</span>
 </div>
 <div class="mt-2 text-sm text-gray-500 text-center" id="revenue-impact-value">50%</div>
 </div>
<div>
 <label for="savings" class="block text-sm font-medium text-gray-700 mb-2">Estimated savings or revenue gain yearly? (€)</label>
 <div class="relative rounded-md shadow-sm">
 <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
 <span class="text-gray-500 sm:text-sm">€</span>
 </div>
 <input type="text" id="savings" class="pl-8 w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-indigo-500 focus:border-indigo-500" placeholder="Amount">
 </div>
 </div>
 </div>
<div class="mt-8 flex justify-between">
 <button class="prev-btn px-6 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition">Back</button>
 <button class="next-btn px-6 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition">Continue</button>
 </div>
 </div>
<!-- Step 3 -->
 <div class="question-card hidden" data-step="3">
 <h2 class="text-2xl font-semibold text-gray-800 mb-2">Assessing Growth & Future-readiness</h2>
 <p class="text-gray-600 mb-6">Software should grow with you. Let's see what's ahead.</p>
<div class="space-y-6">
 <div>
 <label class="block text-sm font-medium text-gray-700 mb-2">How much growth do you expect in this area (users, ops, revenue)?</label>
 <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
 <div class="option-card p-4 border-2 border-gray-200 rounded-lg cursor-pointer" data-value="stable">
 <div class="flex flex-col items-center text-center">
 <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center mb-2">
 <i class="fas fa-chart-line text-blue-600 text-xl"></i>
 </div>
 <span class="font-medium">0-10%: Stable</span>
 </div>
 </div>
 <div class="option-card p-4 border-2 border-gray-200 rounded-lg cursor-pointer" data-value="growing">
 <div class="flex flex-col items-center text-center">
 <div class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center mb-2">
 <i class="fas fa-chart-bar text-green-600 text-xl"></i>
 </div>
 <span class="font-medium">10-50%: Growing</span>
 </div>
 </div>
 <div class="option-card p-4 border-2 border-gray-200 rounded-lg cursor-pointer" data-value="scaling">
 <div class="flex flex-col items-center text-center">
 <div class="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center mb-2">
 <i class="fas fa-rocket text-purple-600 text-xl"></i>
 </div>
 <span class="font-medium">50%+: Scaling aggressively</span>
 </div>
 </div>
 </div>
 </div>
<div>
 <label for="expansion" class="block text-sm font-medium text-gray-700 mb-2">Is there any planned expansion, acquisition, or external change that would affect this domain?</label>
 <textarea id="expansion" rows="3" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-indigo-500 focus:border-indigo-500" placeholder="Describe any upcoming changes..."></textarea>
 </div>
 </div>
<div class="mt-8 flex justify-between">
 <button class="prev-btn px-6 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition">Back</button>
 <button class="next-btn px-6 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition">Continue</button>
 </div>
 </div>
<!-- Step 4 -->
 <div class="question-card hidden" data-step="4">
 <h2 class="text-2xl font-semibold text-gray-800 mb-2">Strategic Importance</h2>
 <p class="text-gray-600 mb-6">Now let's measure how mission-critical this is.</p>
<div class="space-y-6">
 <div>
 <label class="block text-sm font-medium text-gray-700 mb-2">If you don't build this, what will happen?</label>
 <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
 <div class="option-card p-4 border-2 border-gray-200 rounded-lg cursor-pointer" data-value="lose">
 <div class="flex flex-col items-center text-center">
 <div class="w-10 h-10 rounded-full bg-red-100 flex items-center justify-center mb-2">
 <i class="fas fa-exclamation-triangle text-red-600"></i>
 </div>
 <span class="font-medium">We'll lose market/revenue</span>
 </div>
 </div>
 <div class="option-card p-4 border-2 border-gray-200 rounded-lg cursor-pointer" data-value="miss">
 <div class="flex flex-col items-center text-center">
 <div class="w-10 h-10 rounded-full bg-yellow-100 flex items-center justify-center mb-2">
 <i class="fas fa-clock text-yellow-600"></i>
 </div>
 <span class="font-medium">We'll miss a growth window</span>
 </div>
 </div>
 <div class="option-card p-4 border-2 border-gray-200 rounded-lg cursor-pointer" data-value="not-critical">
 <div class="flex flex-col items-center text-center">
 <div class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center mb-2">
 <i class="fas fa-check-circle text-gray-600"></i>
 </div>
 <span class="font-medium">It's not critical yet</span>
 </div>
 </div>
 </div>
 </div>
<div>
 <label class="block text-sm font-medium text-gray-700 mb-2">Does this project align with a leadership or board-level priority?</label>
 <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
 <div class="option-card p-4 border-2 border-gray-200 rounded-lg cursor-pointer" data-value="yes">
 <div class="flex items-center space-x-3">
 <div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center">
 <i class="fas fa-check text-green-600"></i>
 </div>
 <span class="font-medium">Yes</span>
 </div>
 </div>
 <div class="option-card p-4 border-2 border-gray-200 rounded-lg cursor-pointer" data-value="no">
 <div class="flex items-center space-x-3">
 <div class="w-8 h-8 rounded-full bg-red-100 flex items-center justify-center">
 <i class="fas fa-times text-red-600"></i>
 </div>
 <span class="font-medium">No</span>
 </div>
 </div>
 </div>
 </div>
<div>
 <label class="block text-sm font-medium text-gray-700 mb-2">Will this touch sensitive data or compliance domains?</label>
 <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
 <div class="option-card p-4 border-2 border-gray-200 rounded-lg cursor-pointer" data-value="yes">
 <div class="flex items-center space-x-3">
 <div class="w-8 h-8 rounded-full bg-red-100 flex items-center justify-center">
 <i class="fas fa-lock text-red-600"></i>
 </div>
 <span class="font-medium">Yes</span>
 </div>
 </div>
 <div class="option-card p-4 border-2 border-gray-200 rounded-lg cursor-pointer" data-value="no">
 <div class="flex items-center space-x-3">
 <div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center">
 <i class="fas fa-lock-open text-green-600"></i>
 </div>
 <span class="font-medium">No</span>
 </div>
 </div>
 </div>
 </div>
 </div>
<div class="mt-8 flex justify-between">
 <button class="prev-btn px-6 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition">Back</button>
 <button class="next-btn px-6 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition">Continue</button>
 </div>
 </div>
<!-- Step 5 -->
 <div class="question-card hidden" data-step="5">
 <h2 class="text-2xl font-semibold text-gray-800 mb-2">Timeline & Buy-in</h2>
 <p class="text-gray-600 mb-6">Let's check how ready you are to act.</p>
<div class="space-y-6">
 <div>
 <label for="timeline" class="block text-sm font-medium text-gray-700 mb-2">Desired launch timeline (MVP or full)</label>
 <select id="timeline" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-indigo-500 focus:border-indigo-500">
 <option value="">Select timeline</option>
 <option value="1-3">1-3 months (Urgent)</option>
 <option value="3-6">3-6 months (Standard)</option>
 <option value="6-12">6-12 months (Long-term)</option>
 <option value="12+">12+ months (Strategic)</option>
 </select>
 </div>
<div>
 <label class="block text-sm font-medium text-gray-700 mb-2">Do you already have:</label>
 <div class="space-y-3">
 <div class="flex items-center">
 <input type="checkbox" id="budget" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
 <label for="budget" class="ml-2 block text-sm text-gray-700">Budget allocated</label>
 </div>
 <div class="flex items-center">
 <input type="checkbox" id="sponsor" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
 <label for="sponsor" class="ml-2 block text-sm text-gray-700">Executive sponsor</label>
 </div>
 <div class="flex items-center">
 <input type="checkbox" id="team" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
 <label for="team" class="ml-2 block text-sm text-gray-700">Internal team ready to collaborate</label>
 </div>
 </div>
 </div>
 </div>
<div class="mt-8 flex justify-between">
 <button class="prev-btn px-6 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition">Back</button>
 <button class="next-btn px-6 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition">Continue</button>
 </div>
 </div>
<!-- Step 6 -->
 <div class="question-card hidden" data-step="6">
 <h2 class="text-2xl font-semibold text-gray-800 mb-2">Confidence Check & Tech Direction</h2>
 <p class="text-gray-600 mb-6">Let's sum up where you stand.</p>
<div class="space-y-6">
 <div>
 <label class="block text-sm font-medium text-gray-700 mb-2">What is your team's internal tech capability?</label>
 <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
 <div class="option-card p-4 border-2 border-gray-200 rounded-lg cursor-pointer" data-value="no-devs">
 <div class="flex flex-col items-center text-center">
 <div class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center mb-2">
 <i class="fas fa-user text-gray-600"></i>
 </div>
 <span class="font-medium">No devs</span>
 </div>
 </div>
 <div class="option-card p-4 border-2 border-gray-200 rounded-lg cursor-pointer" data-value="low-code">
 <div class="flex flex-col items-center text-center">
 <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center mb-2">
 <i class="fas fa-code text-blue-600"></i>
 </div>
 <span class="font-medium">Light/no-code only</span>
 </div>
 </div>
 <div class="option-card p-4 border-2 border-gray-200 rounded-lg cursor-pointer" data-value="full-stack">
 <div class="flex flex-col items-center text-center">
 <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center mb-2">
 <i class="fas fa-laptop-code text-green-600"></i>
 </div>
 <span class="font-medium">In-house full-stack</span>
 </div>
 </div>
 </div>
 </div>
<div>
 <label class="block text-sm font-medium text-gray-700 mb-2">Your preferred approach:</label>
 <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
 <div class="option-card p-4 border-2 border-gray-200 rounded-lg cursor-pointer" data-value="buy">
 <div class="flex flex-col items-center text-center">
 <div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center mb-2">
 <i class="fas fa-shopping-cart text-purple-600"></i>
 </div>
 <span class="font-medium">Buy first, then customize</span>
 </div>
 </div>
 <div class="option-card p-4 border-2 border-gray-200 rounded-lg cursor-pointer" data-value="build">
 <div class="flex flex-col items-center text-center">
 <div class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center mb-2">
 <i class="fas fa-hammer text-indigo-600"></i>
 </div>
 <span class="font-medium">Build a custom solution</span>
 </div>
 </div>
 <div class="option-card p-4 border-2 border-gray-200 rounded-lg cursor-pointer" data-value="hybrid">
 <div class="flex flex-col items-center text-center">
 <div class="w-10 h-10 rounded-full bg-yellow-100 flex items-center justify-center mb-2">
 <i class="fas fa-random text-yellow-600"></i>
 </div>
 <span class="font-medium">Hybrid: integrate SaaS + custom modules</span>
 </div>
 </div>
 </div>
 </div>
 </div>
<div class="mt-8 flex justify-between">
 <button class="prev-btn px-6 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition">Back</button>
 <button id="generate-report" class="px-6 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition">Generate Report</button>
 </div>
 </div>
 </div>
<!-- Report Section -->
 <div id="report-container" class="hidden">
 <div class="text-center mb-8">
 <div class="w-16 h-16 rounded-full bg-indigo-100 flex items-center justify-center mx-auto mb-4">
 <i class="fas fa-check-circle text-indigo-600 text-3xl"></i>
 </div>
 <h2 class="text-2xl font-semibold text-gray-800 mb-2">Your Business Opportunity Report</h2>
 <p class="text-gray-600 max-w-lg mx-auto">Here's your personalized assessment with strategic recommendations</p>
 </div>
<div class="report-card rounded-xl p-6 mb-8">
 <h3 class="text-lg font-semibold text-gray-800 mb-4 flex items-center">
 <i class="fas fa-book-open text-indigo-600 mr-2"></i> Business Opportunity Snapshot
 </h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
 <div>
 <div class="flex items-start mb-4">
 <div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center mr-3">
 <i class="fas fa-tag text-blue-600"></i>
 </div>
 <div>
 <h4 class="text-sm font-medium text-gray-500">Type</h4>
 <p id="report-type" class="text-sm font-medium text-gray-800">Internal Efficiency Tool</p>
 </div>
 </div>
<div class="flex items-start mb-4">
 <div class="flex-shrink-0 h-10 w-10 rounded-full bg-purple-100 flex items-center justify-center mr-3">
 <i class="fas fa-bullseye text-purple-600"></i>
 </div>
 <div>
 <h4 class="text-sm font-medium text-gray-500">Purpose</h4>
 <p id="report-purpose" class="text-sm font-medium text-gray-800">Replace and automate an existing manual workflow</p>
 </div>
 </div>
<div class="flex items-start mb-4">
 <div class="flex-shrink-0 h-10 w-10 rounded-full bg-green-100 flex items-center justify-center mr-3">
 <i class="fas fa-hand-holding-usd text-green-600"></i>
 </div>
 <div>
 <h4 class="text-sm font-medium text-gray-500">Business Touch</h4>
 <p id="report-business-touch" class="text-sm font-medium text-gray-800">Impacts 65% of revenue operations</p>
 </div>
 </div>
 </div>
<div>
 <div class="flex items-start mb-4">
 <div class="flex-shrink-0 h-10 w-10 rounded-full bg-yellow-100 flex items-center justify-center mr-3">
 <i class="fas fa-chart-pie text-yellow-600"></i>
 </div>
 <div>
 <h4 class="text-sm font-medium text-gray-500">Scale</h4>
 <p id="report-scale" class="text-sm font-medium text-gray-800">~5000 transactions/year</p>
 </div>
 </div>
<div class="flex items-start mb-4">
 <div class="flex-shrink-0 h-10 w-10 rounded-full bg-red-100 flex items-center justify-center mr-3">
 <i class="fas fa-euro-sign text-red-600"></i>
 </div>
 <div>
 <h4 class="text-sm font-medium text-gray-500">Projected ROI</h4>
 <p id="report-roi" class="text-sm font-medium text-gray-800">€100–150k/year in saved labor</p>
 </div>
 </div>
<div class="flex items-start mb-4">
 <div class="flex-shrink-0 h-10 w-10 rounded-full bg-indigo-100 flex items-center justify-center mr-3">
 <i class="fas fa-chart-line text-indigo-600"></i>
 </div>
 <div>
 <h4 class="text-sm font-medium text-gray-500">Growth Outlook</h4>
 <p id="report-growth" class="text-sm font-medium text-gray-800">+30% users over 3 years</p>
 </div>
 </div>
<div class="flex items-start">
 <div class="flex-shrink-0 h-10 w-10 rounded-full bg-gray-100 flex items-center justify-center mr-3">
 <i class="fas fa-chess text-gray-600"></i>
 </div>
 <div>
 <h4 class="text-sm font-medium text-gray-500">Strategic Fit</h4>
 <p id="report-strategic" class="text-sm font-medium text-gray-800">Directly tied to leadership priorities</p>
 </div>
 </div>
 </div>
 </div>
 </div>
<div class="report-card rounded-xl p-6 mb-8">
 <h3 class="text-lg font-semibold text-gray-800 mb-4 flex items-center">
 <i class="fas fa-compass text-indigo-600 mr-2"></i> Recommended Path
 </h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
 <div>
 <div class="flex items-start mb-4">
 <div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center mr-3">
 <i class="fas fa-battery-three-quarters text-blue-600"></i>
 </div>
 <div>
 <h4 class="text-sm font-medium text-gray-500">Tech Investment Readiness</h4>
 <p id="report-readiness" class="text-sm font-medium text-gray-800">High</p>
 </div>
 </div>
<div class="flex items-start">
 <div class="flex-shrink-0 h-10 w-10 rounded-full bg-purple-100 flex items-center justify-center mr-3">
 <i class="fas fa-balance-scale text-purple-600"></i>
 </div>
 <div>
 <h4 class="text-sm font-medium text-gray-500">Buy vs Build</h4>
 <p id="report-build" class="text-sm font-medium text-gray-800">Custom Build with integration (Hybrid Strategy)</p>
 </div>
 </div>
 </div>
<div>
 <div class="flex items-start mb-4">
 <div class="flex-shrink-0 h-10 w-10 rounded-full bg-green-100 flex items-center justify-center mr-3">
 <i class="fas fa-euro-sign text-green-600"></i>
 </div>
 <div>
 <h4 class="text-sm font-medium text-gray-500">Suggested Range</h4>
 <p id="report-range" class="text-sm font-medium text-gray-800">~€80–120k initial investment</p>
 </div>
 </div>
<div class="flex items-start">
 <div class="flex-shrink-0 h-10 w-10 rounded-full bg-indigo-100 flex items-center justify-center mr-3">
 <i class="fas fa-arrow-circle-right text-indigo-600"></i>
 </div>
 <div>
 <h4 class="text-sm font-medium text-gray-500">Next Step</h4>
 <p id="report-next" class="text-sm font-medium text-gray-800">Explore MVP definition phase with a discovery sprint</p>
 </div>
 </div>
 </div>
 </div>
<div class="mt-6 p-4 bg-indigo-50 rounded-lg">
 <div class="flex">
 <div class="flex-shrink-0">
 <i class="fas fa-lightbulb text-indigo-600"></i>
 </div>
 <div class="ml-3">
 <p id="report-insight" class="text-sm text-indigo-700">
 Given your scale and growth trajectory, a custom solution tailored to your workflow would maximize efficiency while preserving future agility.
 </p>
 </div>
 </div>
 </div>
 </div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
 <div class="p-4 bg-white rounded-lg shadow-sm border border-gray-200">
 <h4 class="text-sm font-medium text-gray-500 mb-2">Impact Index</h4>
 <div class="flex items-center">
 <div class="w-full bg-gray-200 rounded-full h-2.5">
 <div id="impact-index" class="bg-blue-600 h-2.5 rounded-full" style="width: 75%"></div>
 </div>
 <span id="impact-value" class="text-xs font-medium text-blue-600 ml-2">75/100</span>
 </div>
 </div>
<div class="p-4 bg-white rounded-lg shadow-sm border border-gray-200">
 <h4 class="text-sm font-medium text-gray-500 mb-2">Strategic Alignment</h4>
 <div class="flex items-center">
 <div class="w-full bg-gray-200 rounded-full h-2.5">
 <div id="strategic-score" class="bg-purple-600 h-2.5 rounded-full" style="width: 85%"></div>
 </div>
 <span id="strategic-value" class="text-xs font-medium text-purple-600 ml-2">85/100</span>
 </div>
 </div>
<div class="p-4 bg-white rounded-lg shadow-sm border border-gray-200">
 <h4 class="text-sm font-medium text-gray-500 mb-2">Investment Readiness</h4>
 <div class="flex items-center">
 <div class="w-full bg-gray-200 rounded-full h-2.5">
 <div id="readiness-level" class="bg-green-600 h-2.5 rounded-full" style="width: 65%"></div>
 </div>
 <span id="readiness-value" class="text-xs font-medium text-green-600 ml-2">65/100</span>
 </div>
 </div>
 </div>
<div class="flex flex-col sm:flex-row justify-center gap-4">
 <button id="schedule-btn" class="px-6 py-3 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition flex items-center justify-center">
 <i class="fas fa-calendar-alt mr-2"></i> Schedule Consultation
 </button>
 <button id="download-btn" class="px-6 py-3 bg-white border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition flex items-center justify-center">
 <i class="fas fa-file-pdf mr-2"></i> Download PDF Report
 </button>
 <button id="new-assessment" class="px-6 py-3 bg-white border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition flex items-center justify-center">
 <i class="fas fa-redo mr-2"></i> Start New Assessment
 </button>
 </div>
 </div>
 </main>
<!-- Footer -->
 <footer class="bg-white py-6 border-t border-gray-200">
 <div class="container mx-auto px-4 text-center text-sm text-gray-500">
 <p>Clarity Compass helps businesses make informed technology decisions. This is not financial advice.</p>
 <p class="mt-2">© 2023 Clarity Compass. All rights reserved.</p>
 </div>
 </footer>
 </div>
<script>
 document.addEventListener('DOMContentLoaded', function() {
 // Wizard navigation
 const totalSteps = 6;
 let currentStep = 1;
 const wizardContainer = document.getElementById('wizard-container');
 const reportContainer = document.getElementById('report-container');
 const progressBar = document.getElementById('progress-bar');
 const currentStepEl = document.getElementById('current-step');
 const totalStepsEl = document.getElementById('total-steps');
totalStepsEl.textContent = totalSteps;
// Store user responses
 const responses = {};
// Option card selection
 document.querySelectorAll('.option-card').forEach(card => {
 card.addEventListener('click', function() {
 const parent = this.parentElement;
 const question = parent.previousElementSibling.textContent.trim();
// Remove selected class from siblings
 Array.from(parent.children).forEach(sibling => {
 sibling.classList.remove('selected');
 });
// Add selected class to clicked card
 this.classList.add('selected');
// Store response
 const value = this.getAttribute('data-value');
 responses[question] = value;
 });
 });
// Slider for revenue impact
 const revenueSlider = document.getElementById('revenue-impact');
 const revenueValue = document.getElementById('revenue-impact-value');
revenueSlider.addEventListener('input', function() {
 revenueValue.textContent = this.value + '%';
 });
// Next button click
 document.querySelectorAll('.next-btn').forEach(btn => {
 btn.addEventListener('click', function() {
 const currentCard = document.querySelector(`.question-card[data-step="${currentStep}"]`);
// Validate and collect responses for current step
 if (currentStep === 1) {
 if (!responses['Is this tool meant for:'] ||
!responses['Is this replacing, improving, or inventing something new?'] ||
!responses['Does your team already use a tool for this?']) {
 alert('Please answer all questions before continuing.');
 return;
 }
 } else if (currentStep === 2) {
 const users = document.getElementById('users').value;
 const transactions = document.getElementById('transactions').value;
 const savings = document.getElementById('savings').value;
if (!users || !transactions || !savings) {
 alert('Please fill in all fields before continuing.');
 return;
 }
responses['How many people will use this tool annually?'] = users;
 responses['How many transactions/interactions will it process yearly?'] = transactions;
 responses['Will it affect revenue directly or indirectly?'] = revenueSlider.value + '%';
 responses['Estimated savings or revenue gain yearly? (€)'] = savings;
 } else if (currentStep === 3) {
 if (!responses['How much growth do you expect in this area (users, ops, revenue)?']) {
 alert('Please select a growth expectation.');
 return;
 }
const expansion = document.getElementById('expansion').value;
 if (expansion) {
 responses['Is there any planned expansion, acquisition, or external change that would affect this domain?'] = expansion;
 }
 } else if (currentStep === 4) {
 if (!responses['If you don\'t build this, what will happen?'] ||
!responses['Does this project align with a leadership or board-level priority?'] ||
!responses['Will this touch sensitive data or compliance domains?']) {
 alert('Please answer all questions before continuing.');
 return;
 }
 } else if (currentStep === 5) {
 const timeline = document.getElementById('timeline').value;
 if (!timeline) {
 alert('Please select a timeline.');
 return;
 }
responses['Desired launch timeline (MVP or full)'] = timeline;
const budget = document.getElementById('budget').checked;
 const sponsor = document.getElementById('sponsor').checked;
 const team = document.getElementById('team').checked;
responses['Budget allocated'] = budget;
 responses['Executive sponsor'] = sponsor;
 responses['Internal team ready to collaborate'] = team;
 } else if (currentStep === 6) {
 if (!responses['What is your team\'s internal tech capability?'] ||
!responses['Your preferred approach:']) {
 alert('Please answer all questions before continuing.');
 return;
 }
 }
// Move to next step
 if (currentStep < totalSteps) {
 currentStep++;
 updateStep();
 }
 });
 });
// Previous button click
 document.querySelectorAll('.prev-btn').forEach(btn => {
 btn.addEventListener('click', function() {
 if (currentStep > 1) {
 currentStep--;
 updateStep();
 }
 });
 });
// Generate report button
 document.getElementById('generate-report').addEventListener('click', function() {
 // Collect final step responses
 if (!responses['What is your team\'s internal tech capability?'] ||
!responses['Your preferred approach:']) {
 alert('Please answer all questions before generating the report.');
 return;
 }
// Generate report data
 generateReport();
// Show report
 wizardContainer.classList.add('hidden');
 reportContainer.classList.remove('hidden');
 reportContainer.classList.add('fade-in');
 });
// New assessment button
 document.getElementById('new-assessment').addEventListener('click', function() {
 // Reset wizard
 currentStep = 1;
 updateStep();
// Clear responses
 for (const key in responses) {
 delete responses[key];
 }
// Reset form elements
 document.querySelectorAll('.option-card').forEach(card => {
 card.classList.remove('selected');
 });
document.getElementById('users').value = '';
 document.getElementById('transactions').value = '';
 document.getElementById('savings').value = '';
 revenueSlider.value = 50;
 revenueValue.textContent = '50%';
 document.getElementById('expansion').value = '';
 document.getElementById('timeline').value = '';
 document.getElementById('budget').checked = false;
 document.getElementById('sponsor').checked = false;
 document.getElementById('team').checked = false;
// Show wizard, hide report
 wizardContainer.classList.remove('hidden');
 reportContainer.classList.add('hidden');
 });
// Schedule button
 document.getElementById('schedule-btn').addEventListener('click', function() {
 alert('Scheduling functionality would be integrated with a service like Calendly in a production environment.');
 });
// Download button
 document.getElementById('download-btn').addEventListener('click', function() {
 alert('PDF generation would be implemented in a production environment.');
 });
// Update step display
 function updateStep() {
 currentStepEl.textContent = currentStep;
 progressBar.style.width = `${(currentStep / totalSteps) * 100}%`;
// Hide all cards
 document.querySelectorAll('.question-card').forEach(card => {
 card.classList.remove('active');
 card.classList.add('hidden');
 });
// Show current card
 const currentCard = document.querySelector(`.question-card[data-step="${currentStep}"]`);
 currentCard.classList.remove('hidden');
 setTimeout(() => {
 currentCard.classList.add('active');
 }, 10);
 }
// Generate report data
 function generateReport() {
 // Determine report values based on responses
 const toolType = responses['Is this tool meant for:'] === 'internal' ? 'Internal Efficiency Tool' :
responses['Is this tool meant for:'] === 'customer' ? 'Customer Engagement Tool' : 'Partner Operations Tool';
const purpose = responses['Is this replacing, improving, or inventing something new?'] === 'replace' ? 'Replace an existing manual workflow' :
responses['Is this replacing, improving, or inventing something new?'] === 'improve' ? 'Improve an existing solution' : 'Create a new solution';
const businessTouch = responses['Will it affect revenue directly or indirectly?'] === '100%' ? 'Directly impacts all revenue operations' :
parseInt(responses['Will it affect revenue directly or indirectly?']) > 50 ? `Impacts ${responses['Will it affect revenue directly or indirectly?']} of revenue operations` :
`Indirectly impacts ${responses['Will it affect revenue directly or indirectly?']} of operations`;
const scale = `~${responses['How many transactions/interactions will it process yearly?']} transactions/year`;
const roi = `€${responses['Estimated savings or revenue gain yearly? (€)']}–${Math.round(responses['Estimated savings or revenue gain yearly? (€)'] * 1.5)}k/year in ${toolType.includes('Internal') ? 'saved labor' : 'revenue impact'}`;
const growth = responses['How much growth do you expect in this area (users, ops, revenue)?'] === 'stable' ? '+10% users over 3 years' :
responses['How much growth do you expect in this area (users, ops, revenue)?'] === 'growing' ? '+30% users over 3 years' : '+75% users over 3 years';
const strategic = responses['Does this project align with a leadership or board-level priority?'] === 'yes' ? 'Directly tied to leadership priorities' : 'Not currently a leadership priority';
const readiness = responses['Budget allocated'] && responses['Executive sponsor'] && responses['Internal team ready to collaborate'] ? 'High' :
responses['Budget allocated'] || responses['Executive sponsor'] || responses['Internal team ready to collaborate'] ? 'Medium' : 'Low';
const buildApproach = responses['Your preferred approach:'] === 'buy' ? 'Buy first, then customize' :
responses['Your preferred approach:'] === 'build' ? 'Build a custom solution' : 'Hybrid: integrate SaaS + custom modules';
const investmentRange = responses['Estimated savings or revenue gain yearly? (€)'] < 50000 ? '~€20–50k initial investment' :
responses['Estimated savings or revenue gain yearly? (€)'] < 100000 ? '~€50–80k initial investment' : '~€80–120k initial investment';
const nextStep = responses['What is your team\'s internal tech capability?'] === 'no-devs' ? 'Consider no-code solutions or partner with a development team' :
responses['What is your team\'s internal tech capability?'] === 'low-code' ? 'Explore low-code platforms with customization options' : 'Begin discovery phase with your internal team';
const insight = responses['Your preferred approach:'] === 'buy' ? 'Given your current capabilities and requirements, a purchased solution with light customization would provide the fastest time-to-value.' :
responses['Your preferred approach:'] === 'build' ? 'Given your scale and unique requirements, a custom-built solution would provide the best long-term fit and flexibility.' : 'A hybrid approach would allow you to leverage existing SaaS solutions while customizing key components for competitive advantage.';
// Update report UI
 document.getElementById('report-type').textContent = toolType;
 document.getElementById('report-purpose').textContent = purpose;
 document.getElementById('report-business-touch').textContent = businessTouch;
 document.getElementById('report-scale').textContent = scale;
 document.getElementById('report-roi').textContent = roi;
 document.getElementById('report-growth').textContent = growth;
 document.getElementById('report-strategic').textContent = strategic;
 document.getElementById('report-readiness').textContent = readiness;
 document.getElementById('report-build').textContent = buildApproach;
 document.getElementById('report-range').textContent = investmentRange;
 document.getElementById('report-next').textContent = nextStep;
 document.getElementById('report-insight').textContent = insight;
// Calculate scores (simplified for demo)
 const impactScore = Math.min(100, Math.max(0,
(parseInt(responses['How many people will use this tool annually?']) / 1000 * 10) +
(parseInt(responses['Estimated savings or revenue gain yearly? (€)']) / 10000) +
 (responses['If you don\'t build this, what will happen?'] === 'lose' ? 30 :
responses['If you don\'t build this, what will happen?'] === 'miss' ? 15 : 0)
 ));
const strategicScore = Math.min(100, Math.max(0,
(responses['Does this project align with a leadership or board-level priority?'] === 'yes' ? 50 : 0) +
 (responses['Will this touch sensitive data or compliance domains?'] === 'yes' ? 20 : 0) +
 (responses['How much growth do you expect in this area (users, ops, revenue)?'] === 'scaling' ? 30 :
responses['How much growth do you expect in this area (users, ops, revenue)?'] === 'growing' ? 15 : 0)
 ));
const readinessScore = Math.min(100, Math.max(0,
(responses['Budget allocated'] ? 30 : 0) +
 (responses['Executive sponsor'] ? 30 : 0) +
 (responses['Internal team ready to collaborate'] ? 30 : 0) +
 (responses['What is your team\'s internal tech capability?'] === 'full-stack' ? 10 : 0)
 ));
// Update score indicators
 document.getElementById('impact-index').style.width = `${impactScore}%`;
 document.getElementById('impact-value').textContent = `${Math.round(impactScore)}/100`;
 document.getElementById('strategic-score').style.width = `${strategicScore}%`;
 document.getElementById('strategic-value').textContent = `${Math.round(strategicScore)}/100`;
 document.getElementById('readiness-level').style.width = `${readinessScore}%`;
 document.getElementById('readiness-value').textContent = `${Math.round(readinessScore)}/100`;
 }
 });
 </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=LukasBe/clarity-compass" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>