Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>One Page Strategic Vision</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> | |
| .section-title { | |
| position: relative; | |
| display: inline-block; | |
| } | |
| .section-title:after { | |
| content: ''; | |
| position: absolute; | |
| width: 100%; | |
| height: 3px; | |
| bottom: -5px; | |
| left: 0; | |
| background: linear-gradient(90deg, #3b82f6, #8b5cf6); | |
| border-radius: 3px; | |
| } | |
| .input-field { | |
| transition: all 0.3s ease; | |
| } | |
| .input-field:focus { | |
| box-shadow: 0 0 0 2px #3b82f6; | |
| } | |
| .print-only { | |
| display: none; | |
| } | |
| @media print { | |
| .no-print { | |
| display: none; | |
| } | |
| .print-only { | |
| display: block; | |
| } | |
| body { | |
| zoom: 85%; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 text-gray-800 font-sans p-4"> | |
| <div class="max-w-6xl mx-auto bg-white rounded-xl shadow-lg overflow-hidden"> | |
| <!-- Header --> | |
| <div class="bg-gradient-to-r from-blue-500 to-purple-600 p-6 text-white"> | |
| <div class="flex justify-between items-center"> | |
| <h1 class="text-3xl font-bold">ONE PAGE STRATEGIC VISION</h1> | |
| <div class="no-print"> | |
| <button onclick="window.print()" class="bg-white text-blue-600 px-4 py-2 rounded-lg font-semibold hover:bg-gray-100 transition flex items-center gap-2"> | |
| <i class="fas fa-print"></i> Print | |
| </button> | |
| </div> | |
| </div> | |
| <div class="mt-4 flex items-center gap-4"> | |
| <div class="flex-1"> | |
| <label class="block text-sm font-medium mb-1">Owner:</label> | |
| <input type="text" class="w-full p-2 rounded-lg bg-white bg-opacity-20 placeholder-white border border-white border-opacity-30 input-field" placeholder="Enter owner name"> | |
| </div> | |
| <div class="text-right"> | |
| <div class="text-xs opacity-80">Last updated:</div> | |
| <div id="currentDate" class="font-medium"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-6 grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <!-- Left Column --> | |
| <div class="space-y-6"> | |
| <!-- Core Purpose --> | |
| <div class="bg-blue-50 p-4 rounded-xl border border-blue-100"> | |
| <h2 class="section-title text-xl font-bold text-blue-700 mb-4">CORE PURPOSE</h2> | |
| <textarea class="w-full p-3 rounded-lg border border-gray-300 input-field h-24" placeholder="Why does your organization exist?"></textarea> | |
| </div> | |
| <!-- Core Values --> | |
| <div class="bg-purple-50 p-4 rounded-xl border border-purple-100"> | |
| <h2 class="section-title text-xl font-bold text-purple-700 mb-4">CORE VALUES</h2> | |
| <div class="space-y-3"> | |
| <input type="text" class="w-full p-2 rounded-lg border border-gray-300 input-field" placeholder="VALUE 1"> | |
| <input type="text" class="w-full p-2 rounded-lg border border-gray-300 input-field" placeholder="VALUE 2"> | |
| <input type="text" class="w-full p-2 rounded-lg border border-gray-300 input-field" placeholder="VALUE 3"> | |
| </div> | |
| </div> | |
| <!-- 10 Year Goal --> | |
| <div class="bg-indigo-50 p-4 rounded-xl border border-indigo-100"> | |
| <h2 class="section-title text-xl font-bold text-indigo-700 mb-4">10 YEAR - SKY'S THE LIMIT GOAL</h2> | |
| <input type="text" class="w-full p-2 rounded-lg border border-gray-300 input-field mb-3" placeholder="10 YEAR GOAL"> | |
| <textarea class="w-full p-3 rounded-lg border border-gray-300 input-field h-20" placeholder="10 YEAR GOAL DESCRIPTION"></textarea> | |
| </div> | |
| <!-- 3 Year Goal --> | |
| <div class="bg-teal-50 p-4 rounded-xl border border-teal-100"> | |
| <h2 class="section-title text-xl font-bold text-teal-700 mb-4">3 YEAR GOAL</h2> | |
| <input type="text" class="w-full p-2 rounded-lg border border-gray-300 input-field mb-3" placeholder="3 YEAR GOAL"> | |
| <textarea class="w-full p-3 rounded-lg border border-gray-300 input-field h-20" placeholder="3 YEAR GOAL DESCRIPTION"></textarea> | |
| </div> | |
| <!-- 1 Year Goals --> | |
| <div class="bg-green-50 p-4 rounded-xl border border-green-100"> | |
| <h2 class="section-title text-xl font-bold text-green-700 mb-4">1 YEAR GOALS</h2> | |
| <div class="space-y-3"> | |
| <div class="flex items-center gap-2"> | |
| <input type="text" class="flex-1 p-2 rounded-lg border border-gray-300 input-field" placeholder="GOAL 1"> | |
| <input type="text" class="w-24 p-2 rounded-lg border border-gray-300 input-field" placeholder="Owner"> | |
| </div> | |
| <div class="flex items-center gap-2"> | |
| <input type="text" class="flex-1 p-2 rounded-lg border border-gray-300 input-field" placeholder="GOAL 2"> | |
| <input type="text" class="w-24 p-2 rounded-lg border border-gray-300 input-field" placeholder="Owner"> | |
| </div> | |
| <div class="flex items-center gap-2"> | |
| <input type="text" class="flex-1 p-2 rounded-lg border border-gray-300 input-field" placeholder="GOAL 3"> | |
| <input type="text" class="w-24 p-2 rounded-lg border border-gray-300 input-field" placeholder="Owner"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Right Column --> | |
| <div class="space-y-6"> | |
| <!-- Revenue & Profit Goals --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <div class="bg-yellow-50 p-4 rounded-xl border border-yellow-100"> | |
| <h2 class="section-title text-xl font-bold text-yellow-700 mb-4">2024 REVENUE GOAL</h2> | |
| <div class="space-y-2"> | |
| <div class="flex items-center gap-2"> | |
| <span class="w-16">Monthly:</span> | |
| <input type="text" class="flex-1 p-2 rounded-lg border border-gray-300 input-field"> | |
| </div> | |
| <div class="flex items-center gap-2"> | |
| <span class="w-16">Yearly:</span> | |
| <input type="text" class="flex-1 p-2 rounded-lg border border-gray-300 input-field"> | |
| </div> | |
| <div class="flex items-center gap-2"> | |
| <span class="w-16">Quarterly:</span> | |
| <input type="text" class="flex-1 p-2 rounded-lg border border-gray-300 input-field"> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-red-50 p-4 rounded-xl border border-red-100"> | |
| <h2 class="section-title text-xl font-bold text-red-700 mb-4">2024 PROFIT GOAL</h2> | |
| <div class="space-y-2"> | |
| <div class="flex items-center gap-2"> | |
| <span class="w-16">Monthly:</span> | |
| <input type="text" class="flex-1 p-2 rounded-lg border border-gray-300 input-field"> | |
| </div> | |
| <div class="flex items-center gap-2"> | |
| <span class="w-16">Yearly:</span> | |
| <input type="text" class="flex-1 p-2 rounded-lg border border-gray-300 input-field"> | |
| </div> | |
| <div class="flex items-center gap-2"> | |
| <span class="w-16">Quarterly:</span> | |
| <input type="text" class="flex-1 p-2 rounded-lg border border-gray-300 input-field"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Quarterly Section --> | |
| <div class="bg-pink-50 p-4 rounded-xl border border-pink-100"> | |
| <h2 class="section-title text-xl font-bold text-pink-700 mb-4">QUARTERLY FOCUS</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <div> | |
| <label class="block font-medium mb-1">Quarterly Theme:</label> | |
| <input type="text" class="w-full p-2 rounded-lg border border-gray-300 input-field" placeholder="INSERT THEME"> | |
| </div> | |
| <div> | |
| <label class="block font-medium mb-1">Quarterly Reward:</label> | |
| <input type="text" class="w-full p-2 rounded-lg border border-gray-300 input-field" placeholder="INSERT TEAM REWARD"> | |
| </div> | |
| </div> | |
| <div class="mt-3"> | |
| <label class="block font-medium mb-1">Quarterly Critical #:</label> | |
| <input type="text" class="w-full p-2 rounded-lg border border-gray-300 input-field" placeholder="DESCRIPTION"> | |
| </div> | |
| </div> | |
| <!-- 90 Day Goals --> | |
| <div class="bg-orange-50 p-4 rounded-xl border border-orange-100"> | |
| <h2 class="section-title text-xl font-bold text-orange-700 mb-4">90 DAY GOALS</h2> | |
| <div class="space-y-3"> | |
| <div class="flex items-center gap-2"> | |
| <input type="text" class="flex-1 p-2 rounded-lg border border-gray-300 input-field" placeholder="GOAL 1"> | |
| <input type="text" class="w-24 p-2 rounded-lg border border-gray-300 input-field" placeholder="Owner"> | |
| </div> | |
| <div class="flex items-center gap-2"> | |
| <input type="text" class="flex-1 p-2 rounded-lg border border-gray-300 input-field" placeholder="GOAL 2"> | |
| <input type="text" class="w-24 p-2 rounded-lg border border-gray-300 input-field" placeholder="Owner"> | |
| </div> | |
| <div class="flex items-center gap-2"> | |
| <input type="text" class="flex-1 p-2 rounded-lg border border-gray-300 input-field" placeholder="GOAL 3"> | |
| <input type="text" class="w-24 p-2 rounded-lg border border-gray-300 input-field" placeholder="Owner"> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Monthly Goals --> | |
| <div class="bg-cyan-50 p-4 rounded-xl border border-cyan-100"> | |
| <h2 class="section-title text-xl font-bold text-cyan-700 mb-4">MONTHLY GOALS</h2> | |
| <div class="space-y-3"> | |
| <div class="flex items-center gap-2"> | |
| <input type="text" class="flex-1 p-2 rounded-lg border border-gray-300 input-field" placeholder="GOAL 1"> | |
| <input type="text" class="w-24 p-2 rounded-lg border border-gray-300 input-field" placeholder="Owner"> | |
| </div> | |
| <div class="flex items-center gap-2"> | |
| <input type="text" class="flex-1 p-2 rounded-lg border border-gray-300 input-field" placeholder="GOAL 2"> | |
| <input type="text" class="w-24 p-2 rounded-lg border border-gray-300 input-field" placeholder="Owner"> | |
| </div> | |
| <div class="flex items-center gap-2"> | |
| <input type="text" class="flex-1 p-2 rounded-lg border border-gray-300 input-field" placeholder="GOAL 3"> | |
| <input type="text" class="w-24 p-2 rounded-lg border border-gray-300 input-field" placeholder="Owner"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Bottom Section --> | |
| <div class="p-6 grid grid-cols-1 md:grid-cols-2 gap-6 border-t border-gray-200"> | |
| <!-- Left Bottom --> | |
| <div class="space-y-6"> | |
| <!-- Branding --> | |
| <div class="bg-gray-50 p-4 rounded-xl border border-gray-200"> | |
| <h2 class="section-title text-xl font-bold text-gray-700 mb-4">BRANDING</h2> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="block font-medium mb-1">Differentiating Activities (3-5 Hows):</label> | |
| <div class="space-y-2"> | |
| <input type="text" class="w-full p-2 rounded-lg border border-gray-300 input-field" placeholder="Activity 1"> | |
| <input type="text" class="w-full p-2 rounded-lg border border-gray-300 input-field" placeholder="Activity 2"> | |
| <input type="text" class="w-full p-2 rounded-lg border border-gray-300 input-field" placeholder="Activity 3"> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block font-medium mb-1">X-Factor (10x-100x Underlying Advantage):</label> | |
| <input type="text" class="w-full p-2 rounded-lg border border-gray-300 input-field" placeholder="Insert x-factor"> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Trends & Strengths --> | |
| <div class="bg-gray-50 p-4 rounded-xl border border-gray-200"> | |
| <h2 class="section-title text-xl font-bold text-gray-700 mb-4">TRENDS & STRENGTHS</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <div> | |
| <label class="block font-medium mb-1">Trends:</label> | |
| <textarea class="w-full p-2 rounded-lg border border-gray-300 input-field h-24"></textarea> | |
| </div> | |
| <div> | |
| <label class="block font-medium mb-1">Strengths:</label> | |
| <textarea class="w-full p-2 rounded-lg border border-gray-300 input-field h-24"></textarea> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Right Bottom --> | |
| <div class="space-y-6"> | |
| <!-- Ideal Client --> | |
| <div class="bg-gray-50 p-4 rounded-xl border border-gray-200"> | |
| <h2 class="section-title text-xl font-bold text-gray-700 mb-4">IDEAL CLIENT</h2> | |
| <div class="space-y-3"> | |
| <div> | |
| <label class="block font-medium mb-1">Who & Where:</label> | |
| <textarea class="w-full p-2 rounded-lg border border-gray-300 input-field h-16" placeholder="DESCRIPTION OF IDEAL CLIENT"></textarea> | |
| </div> | |
| <div> | |
| <label class="block font-medium mb-1">Problem We Solve & Product/Service Offer:</label> | |
| <textarea class="w-full p-2 rounded-lg border border-gray-300 input-field h-16" placeholder="DESCRIPTION"></textarea> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Brand Promise --> | |
| <div class="bg-gray-50 p-4 rounded-xl border border-gray-200"> | |
| <h2 class="section-title text-xl font-bold text-gray-700 mb-4">BRAND PROMISE</h2> | |
| <div class="grid grid-cols-3 gap-2"> | |
| <div> | |
| <input type="text" class="w-full p-2 rounded-lg border border-gray-300 input-field" placeholder="INTERCO"> | |
| </div> | |
| <div> | |
| <input type="text" class="w-full p-2 rounded-lg border border-gray-300 input-field" placeholder="HOPE"> | |
| </div> | |
| <div> | |
| <input type="text" class="w-full p-2 rounded-lg border border-gray-300 input-field" placeholder="GET WHEN"> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- KPIs --> | |
| <div class="bg-gray-50 p-4 rounded-xl border border-gray-200"> | |
| <h2 class="section-title text-xl font-bold text-gray-700 mb-4">KPIS</h2> | |
| <div class="space-y-3"> | |
| <div> | |
| <label class="block font-medium mb-1">One-PHRASE Strategy:</label> | |
| <input type="text" class="w-full p-2 rounded-lg border border-gray-300 input-field"> | |
| </div> | |
| <div class="grid grid-cols-3 gap-2"> | |
| <input type="text" class="p-2 rounded-lg border border-gray-300 input-field" placeholder="KPI1"> | |
| <input type="text" class="p-2 rounded-lg border border-gray-300 input-field" placeholder="KPI2"> | |
| <input type="text" class="p-2 rounded-lg border border-gray-300 input-field" placeholder="KPI3"> | |
| </div> | |
| <div> | |
| <label class="block font-medium mb-1">Profit per X (Economic Engine):</label> | |
| <input type="text" class="w-full p-2 rounded-lg border border-gray-300 input-field" placeholder="Insert"> | |
| </div> | |
| <div> | |
| <label class="block font-medium mb-1">Weaknesses:</label> | |
| <textarea class="w-full p-2 rounded-lg border border-gray-300 input-field h-16"></textarea> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Footer --> | |
| <div class="bg-gray-100 p-4 text-center text-sm text-gray-600 border-t border-gray-200 no-print"> | |
| <p>Complete your strategic vision and review it regularly with your team.</p> | |
| <button onclick="saveForm()" class="mt-2 bg-blue-600 text-white px-4 py-2 rounded-lg font-semibold hover:bg-blue-700 transition flex items-center gap-2 mx-auto"> | |
| <i class="fas fa-save"></i> Save Progress | |
| </button> | |
| </div> | |
| </div> | |
| <script> | |
| // Set current date | |
| const now = new Date(); | |
| const options = { year: 'numeric', month: 'long', day: 'numeric' }; | |
| document.getElementById('currentDate').textContent = now.toLocaleDateString('en-US', options); | |
| // Save form function | |
| function saveForm() { | |
| alert('Strategic vision saved! (In a real implementation, this would save to localStorage or a database)'); | |
| } | |
| // Print header for printed version | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const printHeader = document.createElement('div'); | |
| printHeader.className = 'print-only bg-gradient-to-r from-blue-500 to-purple-600 p-6 text-white mb-6 rounded-t-xl'; | |
| printHeader.innerHTML = ` | |
| <h1 class="text-3xl font-bold">ONE PAGE STRATEGIC VISION</h1> | |
| <div class="mt-4 flex items-center gap-4"> | |
| <div class="flex-1"> | |
| <div class="text-sm font-medium">Owner:</div> | |
| <div class="text-lg font-semibold">${document.querySelector('[placeholder="Enter owner name"]').value || '[Owner Name]'}</div> | |
| </div> | |
| <div class="text-right"> | |
| <div class="text-xs">Last updated:</div> | |
| <div class="font-medium">${now.toLocaleDateString('en-US', options)}</div> | |
| </div> | |
| </div> | |
| `; | |
| document.body.insertBefore(printHeader, document.body.firstChild); | |
| }); | |
| </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/opsv-v1" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |