|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Scaling Up Strategic Plan with AI</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> |
|
|
.gradient-bg { |
|
|
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); |
|
|
} |
|
|
.plan-section { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.plan-section:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 10px 25px rgba(0,0,0,0.1); |
|
|
} |
|
|
.ai-pulse { |
|
|
animation: pulse 2s infinite; |
|
|
} |
|
|
@keyframes pulse { |
|
|
0% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4); } |
|
|
70% { box-shadow: 0 0 0 10px rgba(59, 130, 246, 0); } |
|
|
100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); } |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="gradient-bg min-h-screen font-sans"> |
|
|
<div class="container mx-auto px-4 py-12"> |
|
|
<header class="text-center mb-12"> |
|
|
<h1 class="text-4xl md:text-5xl font-bold text-gray-800 mb-4">Scaling Up Strategic Plan</h1> |
|
|
<p class="text-xl text-gray-600 max-w-3xl mx-auto">Your comprehensive roadmap for growth with AI-powered optimization</p> |
|
|
</header> |
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-12"> |
|
|
|
|
|
<div class="bg-white rounded-xl shadow-lg p-6 ai-pulse col-span-1"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<i class="fas fa-robot text-blue-500 text-2xl mr-3"></i> |
|
|
<h2 class="text-xl font-bold text-gray-800">AI Strategy Assistant</h2> |
|
|
</div> |
|
|
|
|
|
<div class="mb-4"> |
|
|
<label class="block text-gray-700 text-sm font-bold mb-2" for="api-key"> |
|
|
Enter your OpenAI API Key |
|
|
</label> |
|
|
<input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" |
|
|
id="api-key" type="password" placeholder="sk-..."> |
|
|
<p class="text-xs text-gray-500 mt-1">We don't store your API key. It's used only for your session.</p> |
|
|
</div> |
|
|
|
|
|
<div class="mb-4"> |
|
|
<label class="block text-gray-700 text-sm font-bold mb-2" for="ai-task"> |
|
|
What would you like help with? |
|
|
</label> |
|
|
<select class="shadow border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="ai-task"> |
|
|
<option value="">Select an option</option> |
|
|
<option value="vision">Refine company vision</option> |
|
|
<option value="goals">Generate SMART goals</option> |
|
|
<option value="kpis">Suggest relevant KPIs</option> |
|
|
<option value="initiatives">Brainstorm initiatives</option> |
|
|
<option value="risks">Identify potential risks</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<button onclick="generateAISuggestion()" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded w-full flex items-center justify-center"> |
|
|
<i class="fas fa-magic mr-2"></i> Generate Suggestion |
|
|
</button> |
|
|
|
|
|
<div id="ai-output" class="mt-4 p-4 bg-gray-50 rounded-lg hidden"> |
|
|
<h3 class="font-bold text-gray-800 mb-2">AI Suggestion:</h3> |
|
|
<p id="ai-suggestion-text" class="text-gray-700"></p> |
|
|
<button onclick="applySuggestion()" class="mt-2 bg-green-500 hover:bg-green-700 text-white font-bold py-1 px-3 rounded text-sm"> |
|
|
Apply Suggestion |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="lg:col-span-2 space-y-6"> |
|
|
|
|
|
<div class="bg-white rounded-xl shadow-lg p-6 plan-section"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<i class="fas fa-eye text-purple-500 text-2xl mr-3"></i> |
|
|
<h2 class="text-xl font-bold text-gray-800">Vision & Purpose</h2> |
|
|
</div> |
|
|
<div class="mb-4"> |
|
|
<label class="block text-gray-700 text-sm font-bold mb-2" for="vision"> |
|
|
Our Core Purpose (Why we exist) |
|
|
</label> |
|
|
<textarea class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" |
|
|
id="vision" rows="2" placeholder="Our fundamental reason for being..."></textarea> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-gray-700 text-sm font-bold mb-2" for="future-state"> |
|
|
Future State (Where we're going) |
|
|
</label> |
|
|
<textarea class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" |
|
|
id="future-state" rows="2" placeholder="Our aspirational future in 3-5 years..."></textarea> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-xl shadow-lg p-6 plan-section"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<i class="fas fa-bullseye text-red-500 text-2xl mr-3"></i> |
|
|
<h2 class="text-xl font-bold text-gray-800">Strategic Goals</h2> |
|
|
</div> |
|
|
<div class="space-y-4" id="goals-container"> |
|
|
<div class="goal-item"> |
|
|
<input type="text" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline mb-2" |
|
|
placeholder="Specific, Measurable Goal"> |
|
|
<div class="flex justify-between"> |
|
|
<select class="shadow border rounded py-1 px-2 text-gray-700 text-sm focus:outline-none focus:shadow-outline"> |
|
|
<option>1 Year</option> |
|
|
<option>3 Years</option> |
|
|
<option>5 Years</option> |
|
|
</select> |
|
|
<button onclick="removeGoal(this)" class="text-red-500 hover:text-red-700 text-sm"> |
|
|
<i class="fas fa-trash"></i> Remove |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<button onclick="addGoal()" class="mt-4 bg-gray-200 hover:bg-gray-300 text-gray-800 font-bold py-2 px-4 rounded flex items-center"> |
|
|
<i class="fas fa-plus mr-2"></i> Add Goal |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="bg-white rounded-xl shadow-lg p-6 plan-section"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<i class="fas fa-chart-line text-green-500 text-2xl mr-3"></i> |
|
|
<h2 class="text-xl font-bold text-gray-800">Key Performance Indicators</h2> |
|
|
</div> |
|
|
<div class="space-y-4" id="kpis-container"> |
|
|
<div class="kpi-item"> |
|
|
<div class="flex"> |
|
|
<input type="text" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline mr-2" |
|
|
placeholder="KPI Name"> |
|
|
<input type="text" class="shadow appearance-none border rounded w-20 py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" |
|
|
placeholder="Target"> |
|
|
</div> |
|
|
<div class="flex justify-between mt-2"> |
|
|
<select class="shadow border rounded py-1 px-2 text-gray-700 text-sm focus:outline-none focus:shadow-outline"> |
|
|
<option>Monthly</option> |
|
|
<option>Quarterly</option> |
|
|
<option>Annually</option> |
|
|
</select> |
|
|
<button onclick="removeKPI(this)" class="text-red-500 hover:text-red-700 text-sm"> |
|
|
<i class="fas fa-trash"></i> Remove |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<button onclick="addKPI()" class="mt-4 bg-gray-200 hover:bg-gray-300 text-gray-800 font-bold py-2 px-4 rounded flex items-center"> |
|
|
<i class="fas fa-plus mr-2"></i> Add KPI |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-xl shadow-lg p-6 plan-section"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<i class="fas fa-tasks text-yellow-500 text-2xl mr-3"></i> |
|
|
<h2 class="text-xl font-bold text-gray-800">Key Initiatives</h2> |
|
|
</div> |
|
|
<div class="space-y-4" id="initiatives-container"> |
|
|
<div class="initiative-item"> |
|
|
<input type="text" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline mb-2" |
|
|
placeholder="Initiative Name"> |
|
|
<textarea class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline text-sm mb-2" |
|
|
rows="2" placeholder="Description"></textarea> |
|
|
<div class="flex justify-between"> |
|
|
<select class="shadow border rounded py-1 px-2 text-gray-700 text-sm focus:outline-none focus:shadow-outline"> |
|
|
<option>Q1</option> |
|
|
<option>Q2</option> |
|
|
<option>Q3</option> |
|
|
<option>Q4</option> |
|
|
</select> |
|
|
<button onclick="removeInitiative(this)" class="text-red-500 hover:text-red-700 text-sm"> |
|
|
<i class="fas fa-trash"></i> Remove |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<button onclick="addInitiative()" class="mt-4 bg-gray-200 hover:bg-gray-300 text-gray-800 font-bold py-2 px-4 rounded flex items-center"> |
|
|
<i class="fas fa-plus mr-2"></i> Add Initiative |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-xl shadow-lg p-6 plan-section"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<i class="fas fa-exclamation-triangle text-orange-500 text-2xl mr-3"></i> |
|
|
<h2 class="text-xl font-bold text-gray-800">Risks & Mitigations</h2> |
|
|
</div> |
|
|
<div class="space-y-4" id="risks-container"> |
|
|
<div class="risk-item"> |
|
|
<input type="text" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline mb-2" |
|
|
placeholder="Potential Risk"> |
|
|
<textarea class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline text-sm mb-2" |
|
|
rows="2" placeholder="Mitigation Strategy"></textarea> |
|
|
<div class="flex justify-end"> |
|
|
<button onclick="removeRisk(this)" class="text-red-500 hover:text-red-700 text-sm"> |
|
|
<i class="fas fa-trash"></i> Remove |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<button onclick="addRisk()" class="mt-4 bg-gray-200 hover:bg-gray-300 text-gray-800 font-bold py-2 px-4 rounded flex items-center"> |
|
|
<i class="fas fa-plus mr-2"></i> Add Risk |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mt-12 text-center"> |
|
|
<button onclick="exportPlan()" class="bg-blue-600 hover:bg-blue-800 text-white font-bold py-3 px-8 rounded-full text-lg flex items-center mx-auto"> |
|
|
<i class="fas fa-file-export mr-3"></i> Export Strategic Plan |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
function addGoal() { |
|
|
const container = document.getElementById('goals-container'); |
|
|
const newGoal = document.createElement('div'); |
|
|
newGoal.className = 'goal-item mt-4'; |
|
|
newGoal.innerHTML = ` |
|
|
<input type="text" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline mb-2" |
|
|
placeholder="Specific, Measurable Goal"> |
|
|
<div class="flex justify-between"> |
|
|
<select class="shadow border rounded py-1 px-2 text-gray-700 text-sm focus:outline-none focus:shadow-outline"> |
|
|
<option>1 Year</option> |
|
|
<option>3 Years</option> |
|
|
<option>5 Years</option> |
|
|
</select> |
|
|
<button onclick="removeGoal(this)" class="text-red-500 hover:text-red-700 text-sm"> |
|
|
<i class="fas fa-trash"></i> Remove |
|
|
</button> |
|
|
</div> |
|
|
`; |
|
|
container.appendChild(newGoal); |
|
|
} |
|
|
|
|
|
|
|
|
function removeGoal(button) { |
|
|
button.closest('.goal-item').remove(); |
|
|
} |
|
|
|
|
|
|
|
|
function addKPI() { |
|
|
const container = document.getElementById('kpis-container'); |
|
|
const newKPI = document.createElement('div'); |
|
|
newKPI.className = 'kpi-item mt-4'; |
|
|
newKPI.innerHTML = ` |
|
|
<div class="flex"> |
|
|
<input type="text" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline mr-2" |
|
|
placeholder="KPI Name"> |
|
|
<input type="text" class="shadow appearance-none border rounded w-20 py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" |
|
|
placeholder="Target"> |
|
|
</div> |
|
|
<div class="flex justify-between mt-2"> |
|
|
<select class="shadow border rounded py-1 px-2 text-gray-700 text-sm focus:outline-none focus:shadow-outline"> |
|
|
<option>Monthly</option> |
|
|
<option>Quarterly</option> |
|
|
<option>Annually</option> |
|
|
</select> |
|
|
<button onclick="removeKPI(this)" class="text-red-500 hover:text-red-700 text-sm"> |
|
|
<i class="fas fa-trash"></i> Remove |
|
|
</button> |
|
|
</div> |
|
|
`; |
|
|
container.appendChild(newKPI); |
|
|
} |
|
|
|
|
|
|
|
|
function removeKPI(button) { |
|
|
button.closest('.kpi-item').remove(); |
|
|
} |
|
|
|
|
|
|
|
|
function addInitiative() { |
|
|
const container = document.getElementById('initiatives-container'); |
|
|
const newInitiative = document.createElement('div'); |
|
|
newInitiative.className = 'initiative-item mt-4'; |
|
|
newInitiative.innerHTML = ` |
|
|
<input type="text" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline mb-2" |
|
|
placeholder="Initiative Name"> |
|
|
<textarea class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline text-sm mb-2" |
|
|
rows="2" placeholder="Description"></textarea> |
|
|
<div class="flex justify-between"> |
|
|
<select class="shadow border rounded py-1 px-2 text-gray-700 text-sm focus:outline-none focus:shadow-outline"> |
|
|
<option>Q1</option> |
|
|
<option>Q2</option> |
|
|
<option>Q3</option> |
|
|
<option>Q4</option> |
|
|
</select> |
|
|
<button onclick="removeInitiative(this)" class="text-red-500 hover:text-red-700 text-sm"> |
|
|
<i class="fas fa-trash"></i> Remove |
|
|
</button> |
|
|
</div> |
|
|
`; |
|
|
container.appendChild(newInitiative); |
|
|
} |
|
|
|
|
|
|
|
|
function removeInitiative(button) { |
|
|
button.closest('.initiative-item').remove(); |
|
|
} |
|
|
|
|
|
|
|
|
function addRisk() { |
|
|
const container = document.getElementById('risks-container'); |
|
|
const newRisk = document.createElement('div'); |
|
|
newRisk.className = 'risk-item mt-4'; |
|
|
newRisk.innerHTML = ` |
|
|
<input type="text" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline mb-2" |
|
|
placeholder="Potential Risk"> |
|
|
<textarea class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline text-sm mb-2" |
|
|
rows="2" placeholder="Mitigation Strategy"></textarea> |
|
|
<div class="flex justify-end"> |
|
|
<button onclick="removeRisk(this)" class="text-red-500 hover:text-red-700 text-sm"> |
|
|
<i class="fas fa-trash"></i> Remove |
|
|
</button> |
|
|
</div> |
|
|
`; |
|
|
container.appendChild(newRisk); |
|
|
} |
|
|
|
|
|
|
|
|
function removeRisk(button) { |
|
|
button.closest('.risk-item').remove(); |
|
|
} |
|
|
|
|
|
|
|
|
async function generateAISuggestion() { |
|
|
const apiKey = document.getElementById('api-key').value; |
|
|
const task = document.getElementById('ai-task').value; |
|
|
const vision = document.getElementById('vision').value; |
|
|
const futureState = document.getElementById('future-state').value; |
|
|
|
|
|
if (!apiKey) { |
|
|
alert('Please enter your OpenAI API key'); |
|
|
return; |
|
|
} |
|
|
|
|
|
if (!task) { |
|
|
alert('Please select what you need help with'); |
|
|
return; |
|
|
} |
|
|
|
|
|
const outputDiv = document.getElementById('ai-output'); |
|
|
const suggestionText = document.getElementById('ai-suggestion-text'); |
|
|
|
|
|
outputDiv.classList.remove('hidden'); |
|
|
suggestionText.textContent = "Generating suggestion..."; |
|
|
|
|
|
try { |
|
|
let prompt = ""; |
|
|
|
|
|
switch(task) { |
|
|
case 'vision': |
|
|
prompt = `Based on the following information, suggest a refined company vision statement and future state description that is inspiring and clear. Current vision: ${vision}. Current future state: ${futureState}. Provide 2-3 options for each.`; |
|
|
break; |
|
|
case 'goals': |
|
|
prompt = `Generate 3-5 SMART strategic goals that align with this vision: ${vision} and future state: ${futureState}. Make them specific, measurable, achievable, relevant, and time-bound.`; |
|
|
break; |
|
|
case 'kpis': |
|
|
prompt = `Suggest 5-7 key performance indicators that would effectively measure progress toward achieving strategic goals aligned with this vision: ${vision}. For each KPI, suggest a realistic target.`; |
|
|
break; |
|
|
case 'initiatives': |
|
|
prompt = `Brainstorm 4-6 strategic initiatives that would help achieve goals aligned with this vision: ${vision}. For each initiative, provide a brief description and suggest which quarter it should be implemented.`; |
|
|
break; |
|
|
case 'risks': |
|
|
prompt = `Identify 3-5 potential risks that could hinder achieving strategic objectives aligned with this vision: ${vision}. For each risk, suggest a mitigation strategy.`; |
|
|
break; |
|
|
} |
|
|
|
|
|
const response = await fetch('https://api.openai.com/v1/chat/completions', { |
|
|
method: 'POST', |
|
|
headers: { |
|
|
'Content-Type': 'application/json', |
|
|
'Authorization': `Bearer ${apiKey}` |
|
|
}, |
|
|
body: JSON.stringify({ |
|
|
model: "gpt-3.5-turbo", |
|
|
messages: [{role: "user", content: prompt}], |
|
|
temperature: 0.7 |
|
|
}) |
|
|
}); |
|
|
|
|
|
const data = await response.json(); |
|
|
if (data.choices && data.choices[0].message.content) { |
|
|
suggestionText.textContent = data.choices[0].message.content; |
|
|
} else { |
|
|
suggestionText.textContent = "Sorry, I couldn't generate a suggestion. Please try again."; |
|
|
} |
|
|
} catch (error) { |
|
|
console.error('Error:', error); |
|
|
suggestionText.textContent = "Error generating suggestion. Please check your API key and try again."; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function applySuggestion() { |
|
|
const task = document.getElementById('ai-task').value; |
|
|
const suggestion = document.getElementById('ai-suggestion-text').textContent; |
|
|
|
|
|
if (task === 'vision') { |
|
|
document.getElementById('vision').value = suggestion; |
|
|
} else if (task === 'future-state') { |
|
|
document.getElementById('future-state').value = suggestion; |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
alert('Suggestion applied to the relevant section'); |
|
|
} |
|
|
|
|
|
|
|
|
function exportPlan() { |
|
|
|
|
|
alert('Strategic plan exported successfully!'); |
|
|
} |
|
|
</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=JayStormX8/scaling-performance-dashboard" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
