Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Value Statements Owner | Strategic Planning Tool</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%); | |
| } | |
| .section-card { | |
| transition: all 0.3s ease; | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); | |
| } | |
| .section-card:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1); | |
| } | |
| .input-highlight { | |
| border-left: 4px solid #3b82f6; | |
| } | |
| .print-only { | |
| display: none; | |
| } | |
| @media print { | |
| .no-print { | |
| display: none; | |
| } | |
| .print-only { | |
| display: block; | |
| } | |
| .section-card { | |
| break-inside: avoid; | |
| box-shadow: none; | |
| border: 1px solid #e5e7eb; | |
| } | |
| body { | |
| background: white ; | |
| color: black ; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body class="gradient-bg min-h-screen p-4 md:p-8 font-sans"> | |
| <div class="max-w-7xl mx-auto"> | |
| <!-- Header --> | |
| <header class="mb-8 text-center no-print"> | |
| <h1 class="text-4xl font-bold text-gray-800 mb-2">Value Statements Owner</h1> | |
| <p class="text-lg text-gray-600">Strategic Planning & Goal Setting Tool</p> | |
| <div class="mt-6 flex justify-center space-x-4"> | |
| <button onclick="window.print()" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg flex items-center"> | |
| <i class="fas fa-print mr-2"></i> Print Plan | |
| </button> | |
| <button onclick="saveToLocalStorage()" class="bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded-lg flex items-center"> | |
| <i class="fas fa-save mr-2"></i> Save Progress | |
| </button> | |
| <button onclick="loadFromLocalStorage()" class="bg-purple-500 hover:bg-purple-600 text-white px-4 py-2 rounded-lg flex items-center"> | |
| <i class="fas fa-file-import mr-2"></i> Load Saved | |
| </button> | |
| </div> | |
| </header> | |
| <div class="print-only mb-8 text-center"> | |
| <h1 class="text-3xl font-bold text-gray-800 mb-1">Value Statements Owner</h1> | |
| <p class="text-gray-600">Strategic Plan - Generated on <span id="print-date"></span></p> | |
| <script> | |
| document.getElementById('print-date').textContent = new Date().toLocaleDateString(); | |
| </script> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- Core Purpose Section --> | |
| <div class="section-card bg-white rounded-xl p-6"> | |
| <h2 class="text-2xl font-bold text-gray-800 mb-4 flex items-center"> | |
| <i class="fas fa-bullseye text-blue-500 mr-3"></i> CORE PURPOSE | |
| </h2> | |
| <textarea class="w-full h-32 p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 input-highlight" placeholder="Enter your core purpose statement here...">ENTER TEXT HERE</textarea> | |
| </div> | |
| <!-- Revenue Goal Section --> | |
| <div class="section-card bg-white rounded-xl p-6"> | |
| <h2 class="text-2xl font-bold text-gray-800 mb-4 flex items-center"> | |
| <i class="fas fa-chart-line text-green-500 mr-3"></i> 2024 Revenue Goal | |
| </h2> | |
| <div class="mb-4"> | |
| <label class="block text-gray-700 mb-2">Owner:</label> | |
| <input type="text" class="w-full p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500 input-highlight" placeholder="Enter owner name"> | |
| </div> | |
| <div class="grid grid-cols-3 gap-4"> | |
| <div> | |
| <label class="block text-gray-700 mb-2">Monthly</label> | |
| <input type="text" class="w-full p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500" placeholder="$"> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 mb-2">Yearly</label> | |
| <input type="text" class="w-full p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500" placeholder="$"> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 mb-2">Quarterly</label> | |
| <input type="text" class="w-full p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500" placeholder="$"> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- One Page Strategic Vision --> | |
| <div class="section-card bg-white rounded-xl p-6"> | |
| <h2 class="text-2xl font-bold text-gray-800 mb-4 flex items-center"> | |
| <i class="fas fa-binoculars text-purple-500 mr-3"></i> ONE PAGE STRATEGIC VISION | |
| </h2> | |
| <div class="space-y-4"> | |
| <div> | |
| <h3 class="font-semibold text-gray-700 mb-2">CORE VALUES</h3> | |
| <input type="text" class="w-full p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 mb-2" placeholder="VALUE 1"> | |
| <input type="text" class="w-full p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 mb-2" placeholder="VALUE 2"> | |
| <input type="text" class="w-full p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500" placeholder="VALUE 3"> | |
| </div> | |
| <div> | |
| <h3 class="font-semibold text-gray-700 mb-2">10 YEAR</h3> | |
| <input type="text" class="w-full p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 mb-2 font-bold" placeholder="Sky's the Limit GOAL"> | |
| <textarea class="w-full p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500" placeholder="10 YEAR GOAL DESCRIPTION" rows="2"></textarea> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Profit Goal Section --> | |
| <div class="section-card bg-white rounded-xl p-6"> | |
| <h2 class="text-2xl font-bold text-gray-800 mb-4 flex items-center"> | |
| <i class="fas fa-money-bill-wave text-yellow-500 mr-3"></i> 2024 Profit Goal | |
| </h2> | |
| <div class="mb-4"> | |
| <label class="block text-gray-700 mb-2">Owner:</label> | |
| <input type="text" class="w-full p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-500 input-highlight" placeholder="Enter owner name"> | |
| </div> | |
| <div class="grid grid-cols-3 gap-4"> | |
| <div> | |
| <label class="block text-gray-700 mb-2">Monthly</label> | |
| <input type="text" class="w-full p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-500" placeholder="$"> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 mb-2">Yearly</label> | |
| <input type="text" class="w-full p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-500" placeholder="$"> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 mb-2">Quarterly</label> | |
| <input type="text" class="w-full p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-500" placeholder="$"> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <h3 class="font-semibold text-gray-700 mb-2">3 YEAR GOAL</h3> | |
| <textarea class="w-full p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-500" placeholder="3 YEAR GOAL DESCRIPTION" rows="2"></textarea> | |
| </div> | |
| </div> | |
| <!-- 1 Year Goals --> | |
| <div class="section-card bg-white rounded-xl p-6"> | |
| <h2 class="text-2xl font-bold text-gray-800 mb-4 flex items-center"> | |
| <i class="fas fa-calendar-star text-red-500 mr-3"></i> 1 Year Goals | |
| </h2> | |
| <div class="space-y-3"> | |
| <div> | |
| <label class="block text-gray-700 mb-1">Owner</label> | |
| <input type="text" class="w-full p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500 input-highlight" placeholder="Enter owner name"> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 mb-1">GOAL 1</label> | |
| <input type="text" class="w-full p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500" placeholder="Goal description"> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 mb-1">GOAL 2</label> | |
| <input type="text" class="w-full p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500" placeholder="Goal description"> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 mb-1">GOAL 3</label> | |
| <input type="text" class="w-full p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500" placeholder="Goal description"> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 90 Day Goals --> | |
| <div class="section-card bg-white rounded-xl p-6"> | |
| <h2 class="text-2xl font-bold text-gray-800 mb-4 flex items-center"> | |
| <i class="fas fa-calendar-day text-indigo-500 mr-3"></i> 90 Day Goals | |
| </h2> | |
| <div class="space-y-3"> | |
| <div> | |
| <label class="block text-gray-700 mb-1">Owner</label> | |
| <input type="text" class="w-full p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 input-highlight" placeholder="Enter owner name"> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 mb-1">GOAL 1</label> | |
| <input type="text" class="w-full p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="Goal description"> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 mb-1">GOAL 2</label> | |
| <input type="text" class="w-full p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="Goal description"> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 mb-1">GOAL 3</label> | |
| <input type="text" class="w-full p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="Goal description"> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Quarterly Theme & Reward --> | |
| <div class="section-card bg-white rounded-xl p-6"> | |
| <h2 class="text-2xl font-bold text-gray-800 mb-4 flex items-center"> | |
| <i class="fas fa-trophy text-amber-500 mr-3"></i> Quarterly Theme & Reward | |
| </h2> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="block text-gray-700 mb-2">Quarterly Theme</label> | |
| <input type="text" class="w-full p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-500" placeholder="INSERT THEME"> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 mb-2">Quarterly Reward</label> | |
| <input type="text" class="w-full p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-500" placeholder="INSERT TEAM REWARD"> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 mb-2">Quarterly Critical #</label> | |
| <textarea class="w-full p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-500" placeholder="DESCRIPTION" rows="2"></textarea> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Monthly Goals --> | |
| <div class="section-card bg-white rounded-xl p-6"> | |
| <h2 class="text-2xl font-bold text-gray-800 mb-4 flex items-center"> | |
| <i class="fas fa-calendar-alt text-pink-500 mr-3"></i> Monthly Goals | |
| </h2> | |
| <div class="space-y-3"> | |
| <div> | |
| <label class="block text-gray-700 mb-1">Owner</label> | |
| <input type="text" class="w-full p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-pink-500 input-highlight" placeholder="Enter owner name"> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 mb-1">GOAL 1</label> | |
| <input type="text" class="w-full p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-pink-500" placeholder="Goal description"> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 mb-1">GOAL 2</label> | |
| <input type="text" class="w-full p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-pink-500" placeholder="Goal description"> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 mb-1">GOAL 3</label> | |
| <input type="text" class="w-full p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-pink-500" placeholder="Goal description"> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Branding Differentiating Activities --> | |
| <div class="section-card bg-white rounded-xl p-6"> | |
| <h2 class="text-2xl font-bold text-gray-800 mb-4 flex items-center"> | |
| <i class="fas fa-star text-teal-500 mr-3"></i> Branding Differentiating Activities | |
| </h2> | |
| <p class="text-gray-600 mb-3">(3 - 5 Hows):</p> | |
| <div class="space-y-3"> | |
| <div> | |
| <label class="block text-gray-700 mb-1">X-Factor (10x - 100x Underlying Advantage):</label> | |
| <input type="text" class="w-full p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-teal-500" placeholder="Insert x-factor"> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 mb-1">Activity 1</label> | |
| <input type="text" class="w-full p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-teal-500" placeholder="Activity description"> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 mb-1">Activity 2</label> | |
| <input type="text" class="w-full p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-teal-500" placeholder="Activity description"> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 mb-1">Activity 3</label> | |
| <input type="text" class="w-full p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-teal-500" placeholder="Activity description"> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Trends & Strengths --> | |
| <div class="section-card bg-white rounded-xl p-6"> | |
| <h2 class="text-2xl font-bold text-gray-800 mb-4 flex items-center"> | |
| <i class="fas fa-chart-pie text-orange-500 mr-3"></i> Trends & Strengths | |
| </h2> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="block text-gray-700 mb-2">Trends</label> | |
| <textarea class="w-full p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-500" placeholder="List key trends..." rows="2"></textarea> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 mb-2">Strengths</label> | |
| <textarea class="w-full p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-500" placeholder="List your strengths..." rows="2"></textarea> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 mb-2">Weaknesses</label> | |
| <input type="text" class="w-full p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-500" placeholder="Insert Weaknesses"> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Ideal Client --> | |
| <div class="section-card bg-white rounded-xl p-6"> | |
| <h2 class="text-2xl font-bold text-gray-800 mb-4 flex items-center"> | |
| <i class="fas fa-users text-cyan-500 mr-3"></i> Ideal Client | |
| </h2> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="block text-gray-700 mb-2">Who & Where • DESCRIPTION OF IDEAL CLIENT</label> | |
| <textarea class="w-full p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-cyan-500" placeholder="Describe your ideal client..." rows="2"></textarea> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 mb-2">Problem We Solve & Product Service/Offer • DESCRIPTION</label> | |
| <textarea class="w-full p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-cyan-500" placeholder="Describe the problem you solve..." rows="2"></textarea> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Brand Promise --> | |
| <div class="section-card bg-white rounded-xl p-6"> | |
| <h2 class="text-2xl font-bold text-gray-800 mb-4 flex items-center"> | |
| <i class="fas fa-handshake text-emerald-500 mr-3"></i> Brand Promise | |
| </h2> | |
| <div class="space-y-3"> | |
| <div> | |
| <label class="block text-gray-700 mb-1">INTERCO</label> | |
| <input type="text" class="w-full p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-emerald-500" placeholder=""> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 mb-1">HOPE</label> | |
| <input type="text" class="w-full p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-emerald-500" placeholder=""> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 mb-1">GET</label> | |
| <input type="text" class="w-full p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-emerald-500" placeholder=""> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 mb-1">WHEN</label> | |
| <input type="text" class="w-full p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-emerald-500" placeholder=""> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- KPIs --> | |
| <div class="section-card bg-white rounded-xl p-6"> | |
| <h2 class="text-2xl font-bold text-gray-800 mb-4 flex items-center"> | |
| <i class="fas fa-tachometer-alt text-blue-500 mr-3"></i> KPIs | |
| </h2> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="block text-gray-700 mb-2">One-PHRASE Strategy</label> | |
| <input type="text" class="w-full p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Your strategy phrase"> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 mb-2">KPI1</label> | |
| <input type="text" class="w-full p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Key Performance Indicator 1"> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 mb-2">KPI2</label> | |
| <input type="text" class="w-full p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Key Performance Indicator 2"> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 mb-2">KPI3</label> | |
| <input type="text" class="w-full p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Key Performance Indicator 3"> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 mb-2">Profit per X (Economic Engine):</label> | |
| <input type="text" class="w-full p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Insert"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Footer --> | |
| <footer class="mt-12 text-center text-gray-600 text-sm no-print"> | |
| <p>Value Statements Owner Tool © 2024 | Strategic Planning Framework</p> | |
| <p class="mt-2">Save your progress using the buttons above. All data is stored locally in your browser.</p> | |
| </footer> | |
| </div> | |
| <script> | |
| // Save all form data to local storage | |
| function saveToLocalStorage() { | |
| const formData = {}; | |
| document.querySelectorAll('input, textarea').forEach(element => { | |
| formData[element.placeholder || element.previousElementSibling?.textContent] = element.value; | |
| }); | |
| localStorage.setItem('valueStatementsData', JSON.stringify(formData)); | |
| // Show success message | |
| alert('Your data has been saved successfully!'); | |
| } | |
| // Load saved data from local storage | |
| function loadFromLocalStorage() { | |
| const savedData = localStorage.getItem('valueStatementsData'); | |
| if (savedData) { | |
| const formData = JSON.parse(savedData); | |
| document.querySelectorAll('input, textarea').forEach(element => { | |
| const key = element.placeholder || element.previousElementSibling?.textContent; | |
| if (formData[key]) { | |
| element.value = formData[key]; | |
| } | |
| }); | |
| alert('Your saved data has been loaded successfully!'); | |
| } else { | |
| alert('No saved data found. Please save your data first.'); | |
| } | |
| } | |
| // Auto-save every 30 seconds | |
| setInterval(saveToLocalStorage, 30000); | |
| // Check for saved data on page load | |
| window.addEventListener('DOMContentLoaded', () => { | |
| const savedData = localStorage.getItem('valueStatementsData'); | |
| if (savedData) { | |
| if (confirm('We found saved data. Would you like to load it?')) { | |
| loadFromLocalStorage(); | |
| } | |
| } | |
| }); | |
| </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/v2-opsv" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |