Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Decision Guide | DecisiveAI Pathfinder</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <style> | |
| .step-indicator { | |
| transition: all 0.3s ease; | |
| } | |
| .step-indicator.active { | |
| background-color: #4f46e5; | |
| color: white; | |
| } | |
| .decision-form { | |
| transition: all 0.3s ease; | |
| } | |
| .json-viewer { | |
| font-family: 'Courier New', monospace; | |
| background-color: #f8fafc; | |
| border-radius: 0.5rem; | |
| padding: 1rem; | |
| max-height: 300px; | |
| overflow-y: auto; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <div class="min-h-screen"> | |
| <!-- Header --> | |
| <header class="bg-white shadow-sm"> | |
| <div class="container mx-auto px-4 py-4 flex justify-between items-center"> | |
| <a href="index.html" class="flex items-center space-x-2"> | |
| <i data-feather="compass" class="text-indigo-600 w-6 h-6"></i> | |
| <span class="text-xl font-bold text-gray-800">DecisiveAI</span> | |
| </a> | |
| <div class="flex items-center space-x-4"> | |
| <span class="hidden md:inline-block text-sm font-medium bg-indigo-100 text-indigo-800 px-3 py-1 rounded-full">Decision 2: Vision</span> | |
| <button class="bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-2 px-4 rounded-lg shadow-sm text-sm"> | |
| Save & Exit | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Progress Bar --> | |
| <div class="bg-gray-100"> | |
| <div class="container mx-auto px-4 py-2"> | |
| <div class="flex items-center justify-between mb-2"> | |
| <span class="text-xs font-medium text-gray-600">Progress: 14%</span> | |
| <span class="text-xs font-medium text-indigo-600">Step 2 of 7</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-1.5"> | |
| <div class="bg-indigo-600 h-1.5 rounded-full" style="width: 14%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <main class="container mx-auto px-4 py-8"> | |
| <div class="flex flex-col lg:flex-row gap-8"> | |
| <!-- Steps Navigation --> | |
| <div class="lg:w-1/4"> | |
| <div class="bg-white rounded-xl shadow-sm p-4 sticky top-4"> | |
| <h2 class="text-lg font-bold text-gray-800 mb-4 flex items-center"> | |
| <i data-feather="layers" class="w-5 h-5 mr-2 text-indigo-600"></i> | |
| Framework Steps | |
| </h2> | |
| <nav class="space-y-2"> | |
| <a href="#" class="block px-3 py-2 rounded-lg bg-indigo-50 text-indigo-700 font-medium"> | |
| <div class="flex items-center"> | |
| <span class="bg-indigo-600 text-white text-xs font-bold w-5 h-5 rounded-full flex items-center justify-center mr-3">1</span> | |
| Mission | |
| </div> | |
| </a> | |
| <a href="#" class="block px-3 py-2 rounded-lg bg-indigo-600 text-white font-medium"> | |
| <div class="flex items-center"> | |
| <span class="bg-white text-indigo-600 text-xs font-bold w-5 h-5 rounded-full flex items-center justify-center mr-3">2</span> | |
| Vision | |
| </div> | |
| </a> | |
| <a href="#" class="block px-3 py-2 rounded-lg text-gray-700 hover:bg-gray-100"> | |
| <div class="flex items-center"> | |
| <span class="bg-gray-200 text-gray-600 text-xs font-bold w-5 h-5 rounded-full flex items-center justify-center mr-3">3</span> | |
| Market | |
| </div> | |
| </a> | |
| <a href="#" class="block px-3 py-2 rounded-lg text-gray-700 hover:bg-gray-100"> | |
| <div class="flex items-center"> | |
| <span class="bg-gray-200 text-gray-600 text-xs font-bold w-5 h-5 rounded-full flex items-center justify-center mr-3">4</span> | |
| Core Need | |
| </div> | |
| </a> | |
| <a href="#" class="block px-3 py-2 rounded-lg text-gray-700 hover:bg-gray-100"> | |
| <div class="flex items-center"> | |
| <span class="bg-gray-200 text-gray-600 text-xs font-bold w-5 h-5 rounded-full flex items-center justify-center mr-3">5</span> | |
| Solution Principle | |
| </div> | |
| </a> | |
| <a href="#" class="block px-3 py-2 rounded-lg text-gray-700 hover:bg-gray-100"> | |
| <div class="flex items-center"> | |
| <span class="bg-gray-200 text-gray-600 text-xs font-bold w-5 h-5 rounded-full flex items-center justify-center mr-3">6</span> | |
| Product | |
| </div> | |
| </a> | |
| <a href="#" class="block px-3 py-2 rounded-lg text-gray-700 hover:bg-gray-100"> | |
| <div class="flex items-center"> | |
| <span class="bg-gray-200 text-gray-600 text-xs font-bold w-5 h-5 rounded-full flex items-center justify-center mr-3">7</span> | |
| Technology | |
| </div> | |
| </a> | |
| </nav> | |
| <div class="mt-6 pt-4 border-t border-gray-200"> | |
| <h3 class="text-sm font-semibold text-gray-500 uppercase tracking-wider mb-2">Your Progress</h3> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span class="text-gray-600">Completed</span> | |
| <span class="font-medium">1/7</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-1.5 mb-4"> | |
| <div class="bg-indigo-600 h-1.5 rounded-full" style="width: 14%"></div> | |
| </div> | |
| <button class="w-full flex items-center justify-center text-indigo-600 hover:text-indigo-800 text-sm font-medium"> | |
| <i data-feather="download" class="w-4 h-4 mr-2"></i> | |
| Export as JSON | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Decision Content --> | |
| <div class="lg:w-3/4"> | |
| <div class="bg-white rounded-xl shadow-sm overflow-hidden"> | |
| <!-- Decision Header --> | |
| <div class="bg-indigo-600 px-6 py-4"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <h2 class="text-xl font-bold text-white">Vision</h2> | |
| <p class="text-indigo-100">A vivid narrative of how the world will change after your mission is realized</p> | |
| </div> | |
| <span class="bg-white text-indigo-600 text-xs font-bold px-3 py-1 rounded-full">Step 2 of 7</span> | |
| </div> | |
| </div> | |
| <!-- Decision Body --> | |
| <div class="p-6"> | |
| <!-- AI Assistant --> | |
| <div class="bg-indigo-50 rounded-lg p-4 mb-6"> | |
| <div class="flex items-start"> | |
| <div class="bg-indigo-100 text-indigo-800 w-8 h-8 rounded-full flex items-center justify-center font-bold mr-3 flex-shrink-0">AI</div> | |
| <div> | |
| <p class="font-medium text-gray-800 mb-2">Let's craft your vision statement! This should be a vivid narrative that describes how the world will be different when your mission is achieved. Think about sensory details - what will people see, feel, and experience?</p> | |
| <div class="bg-white rounded p-3 mb-2"> | |
| <p class="text-gray-700 italic">Example: "Imagine cities where every home is powered by solar panels, the air is clean, and children play in parks without smog. Energy bills have been reduced by 80%, and families breathe easier."</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Decision Form --> | |
| <form class="decision-form space-y-6"> | |
| <div> | |
| <label for="vision-statement" class="block text-sm font-medium text-gray-700 mb-1">Your Vision Statement</label> | |
| <textarea id="vision-statement" rows="4" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-indigo-500 focus:border-indigo-500" placeholder="Describe the future your mission will create..."></textarea> | |
| <p class="mt-1 text-sm text-gray-500">Try to use vivid, sensory language that creates an emotional connection.</p> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Key Elements Checklist</label> | |
| <div class="space-y-2"> | |
| <div class="flex items-start"> | |
| <input id="sensory-details" type="checkbox" class="mt-1 h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded"> | |
| <label for="sensory-details" class="ml-2 block text-sm text-gray-700">Includes sensory details (what people will see, feel, experience)</label> | |
| </div> | |
| <div class="flex items-start"> | |
| <input id="emotional-appeal" type="checkbox" class="mt-1 h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded"> | |
| <label for="emotional-appeal" class="ml-2 block text-sm text-gray-700">Creates emotional appeal and connection</label> | |
| </div> | |
| <div class="flex items-start"> | |
| <input id="aligned-mission" type="checkbox" class="mt-1 h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded"> | |
| <label for="aligned-mission" class="ml-2 block text-sm text-gray-700">Clearly aligned with your mission</label> | |
| </div> | |
| <div class="flex items-start"> | |
| <input id="tangible-outcomes" type="checkbox" class="mt-1 h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded"> | |
| <label for="tangible-outcomes" class="ml-2 block text-sm text-gray-700">Describes tangible outcomes and changes</label> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <label for="vision-examples" class="block text-sm font-medium text-gray-700 mb-1">Inspiration Examples</label> | |
| <select id="vision-examples" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-indigo-500 focus:border-indigo-500"> | |
| <option value="">Select an example to inspire you</option> | |
| <option value="tech">Tech Company Vision</option> | |
| <option value="eco">Eco-Friendly Product Vision</option> | |
| <option value="health">Healthcare Service Vision</option> | |
| <option value="edu">Education Platform Vision</option> | |
| </select> | |
| </div> | |
| <div class="flex justify-between pt-4 border-t border-gray-200"> | |
| <button type="button" class="inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-lg text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"> | |
| <i data-feather="arrow-left" class="w-4 h-4 mr-2"></i> | |
| Back to Mission | |
| </button> | |
| <div class="space-x-3"> | |
| <button type="button" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-lg shadow-sm text-indigo-700 bg-indigo-100 hover:bg-indigo-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"> | |
| Save Draft | |
| </button> | |
| <button type="submit" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-lg shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"> | |
| Continue to Market | |
| <i data-feather="arrow-right" class="w-4 h-4 ml-2"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| <!-- JSON Output Preview --> | |
| <div class="bg-white rounded-xl shadow-sm mt-6"> | |
| <div class="px-6 py-4 border-b border-gray-200"> | |
| <h3 class="text-lg font-medium text-gray-800 flex items-center"> | |
| <i data-feather="code" class="w-5 h-5 mr-2 text-indigo-600"></i> | |
| Your Progress Data (JSON Preview) | |
| </h3> | |
| </div> | |
| <div class="p-6"> | |
| <div class="json-viewer"> | |
| <pre>{ | |
| "framework": "7-Decisions", | |
| "progress": 14, | |
| "completed_steps": ["mission"], | |
| "current_step": { | |
| "number": 2, | |
| "name": "vision", | |
| "data": { | |
| "statement": "", | |
| "elements": { | |
| "sensory_details": false, | |
| "emotional_appeal": false, | |
| "aligned_mission": false, | |
| "tangible_outcomes": false | |
| } | |
| } | |
| }, | |
| "mission": { | |
| "statement": "To empower local businesses with affordable digital tools that level the playing field with big corporations.", | |
| "last_updated": "2023-07-15T14:32:00Z" | |
| } | |
| }</pre> | |
| </div> | |
| <div class="mt-4 flex justify-end"> | |
| <button class="text-indigo-600 hover:text-indigo-800 text-sm font-medium flex items-center"> | |
| <i data-feather="download" class="w-4 h-4 mr-2"></i> | |
| Export Full JSON | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| <script> | |
| // Initialize Feather Icons | |
| feather.replace(); | |
| // Example of form interaction | |
| document.addEventListener('DOMContentLoaded', () => { | |
| const visionStatement = document.getElementById('vision-statement'); | |
| const checkboxes = document.querySelectorAll('input[type="checkbox"]'); | |
| const jsonPreview = document.querySelector('.json-viewer pre'); | |
| function updateJSONPreview() { | |
| const statement = visionStatement.value; | |
| const elements = { | |
| sensory_details: document.getElementById('sensory-details').checked, | |
| emotional_appeal: document.getElementById('emotional-appeal').checked, | |
| aligned_mission: document.getElementById('aligned-mission').checked, | |
| tangible_outcomes: document.getElementById('tangible-outcomes').checked | |
| }; | |
| const jsonData = { | |
| framework: "7-Decisions", | |
| progress: statement ? 28 : 14, | |
| completed_steps: ["mission"], | |
| current_step: { | |
| number: 2, | |
| name: "vision", | |
| data: { | |
| statement: statement, | |
| elements: elements | |
| } | |
| }, | |
| mission: { | |
| statement: "To empower local businesses with affordable digital tools that level the playing field with big corporations.", | |
| last_updated: "2023-07-15T14:32:00Z" | |
| } | |
| }; | |
| jsonPreview.textContent = JSON.stringify(jsonData, null, 4); | |
| } | |
| visionStatement.addEventListener('input', updateJSONPreview); | |
| checkboxes.forEach(checkbox => { | |
| checkbox.addEventListener('change', updateJSONPreview); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |