Create a vision, mission and values generator that uses ai based off the descriptions and quiz that people select to generate and them allows them to edit it. Colors to use are RGB: #252525 RGB: #ff3c00 RGB: #ffffff RGB: #f5f4f1 RGB: #e4e1dc RGB: #d1b6a6 and the api key to use is deepseek api: sk-a823429c22e8408abeba2054c696ea63 - Initial Deployment
738c1d9
verified
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Vision, Mission & Values Generator</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#252525', | |
| accent: '#ff3c00', | |
| white: '#ffffff', | |
| light: '#f5f4f1', | |
| gray: '#e4e1dc', | |
| beige: '#d1b6a6' | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .fade-in { | |
| animation: fadeIn 0.5s ease-in-out; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .textarea-auto { | |
| min-height: 100px; | |
| resize: none; | |
| overflow: hidden; | |
| } | |
| .textarea-auto:focus { | |
| outline: none; | |
| } | |
| .loading-dots:after { | |
| content: '.'; | |
| animation: dots 1.5s steps(5, end) infinite; | |
| } | |
| @keyframes dots { | |
| 0%, 20% { content: '.'; } | |
| 40% { content: '..'; } | |
| 60% { content: '...'; } | |
| 80%, 100% { content: ''; } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-light font-sans"> | |
| <div class="min-h-screen"> | |
| <!-- Header --> | |
| <header class="bg-primary text-white py-6 shadow-md"> | |
| <div class="container mx-auto px-4"> | |
| <h1 class="text-3xl font-bold">Vision, Mission & Values Generator</h1> | |
| <p class="mt-2 text-gray-300">Create your organization's guiding principles with AI</p> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="container mx-auto px-4 py-8"> | |
| <!-- Step Navigation --> | |
| <div class="flex justify-center mb-8"> | |
| <div class="flex items-center space-x-8"> | |
| <div id="step1" class="step flex flex-col items-center cursor-pointer"> | |
| <div class="w-12 h-12 rounded-full bg-accent text-white flex items-center justify-center font-bold">1</div> | |
| <span class="mt-2 font-medium text-primary">About You</span> | |
| </div> | |
| <div class="w-16 h-1 bg-gray-300"></div> | |
| <div id="step2" class="step flex flex-col items-center cursor-pointer opacity-50"> | |
| <div class="w-12 h-12 rounded-full bg-gray-300 text-primary flex items-center justify-center font-bold">2</div> | |
| <span class="mt-2 font-medium text-gray-500">Preferences</span> | |
| </div> | |
| <div class="w-16 h-1 bg-gray-300"></div> | |
| <div id="step3" class="step flex flex-col items-center cursor-pointer opacity-50"> | |
| <div class="w-12 h-12 rounded-full bg-gray-300 text-primary flex items-center justify-center font-bold">3</div> | |
| <span class="mt-2 font-medium text-gray-500">Results</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Step 1: About You --> | |
| <div id="step1-content" class="fade-in"> | |
| <div class="bg-white rounded-lg shadow-md p-6 mb-6"> | |
| <h2 class="text-2xl font-bold text-primary mb-4">Tell us about your organization</h2> | |
| <div class="space-y-6"> | |
| <div> | |
| <label for="org-name" class="block text-primary font-medium mb-2">Organization Name</label> | |
| <input type="text" id="org-name" class="w-full px-4 py-2 border border-gray rounded-md focus:ring-2 focus:ring-accent focus:border-transparent" placeholder="e.g. Tech Innovations Inc."> | |
| </div> | |
| <div> | |
| <label for="org-type" class="block text-primary font-medium mb-2">Organization Type</label> | |
| <select id="org-type" class="w-full px-4 py-2 border border-gray rounded-md focus:ring-2 focus:ring-accent focus:border-transparent"> | |
| <option value="">Select type...</option> | |
| <option value="startup">Startup</option> | |
| <option value="nonprofit">Nonprofit</option> | |
| <option value="corporate">Corporate</option> | |
| <option value="small-business">Small Business</option> | |
| <option value="educational">Educational Institution</option> | |
| <option value="government">Government Agency</option> | |
| <option value="other">Other</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label for="org-industry" class="block text-primary font-medium mb-2">Industry/Sector</label> | |
| <input type="text" id="org-industry" class="w-full px-4 py-2 border border-gray rounded-md focus:ring-2 focus:ring-accent focus:border-transparent" placeholder="e.g. Technology, Healthcare, Education"> | |
| </div> | |
| <div> | |
| <label for="org-description" class="block text-primary font-medium mb-2">Brief Description</label> | |
| <textarea id="org-description" rows="4" class="w-full px-4 py-2 border border-gray rounded-md focus:ring-2 focus:ring-accent focus:border-transparent textarea-auto" placeholder="Describe what your organization does, its purpose, and any unique aspects..."></textarea> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex justify-end"> | |
| <button id="next-to-step2" class="bg-accent hover:bg-opacity-90 text-white px-6 py-3 rounded-md font-medium transition duration-300"> | |
| Next <i class="fas fa-arrow-right ml-2"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Step 2: Preferences --> | |
| <div id="step2-content" class="hidden fade-in"> | |
| <div class="bg-white rounded-lg shadow-md p-6 mb-6"> | |
| <h2 class="text-2xl font-bold text-primary mb-4">Define your preferences</h2> | |
| <div class="space-y-8"> | |
| <div> | |
| <h3 class="text-xl font-semibold text-primary mb-3">Tone & Style</h3> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> | |
| <label class="tone-option cursor-pointer border border-gray rounded-lg p-4 hover:border-accent hover:bg-light transition duration-200"> | |
| <input type="radio" name="tone" value="professional" class="hidden"> | |
| <div class="flex items-center"> | |
| <div class="w-6 h-6 rounded-full border-2 border-gray mr-3 flex items-center justify-center"> | |
| <div class="w-3 h-3 rounded-full bg-accent hidden"></div> | |
| </div> | |
| <span class="font-medium">Professional</span> | |
| </div> | |
| <p class="mt-2 text-sm text-gray-600">Formal, corporate language suitable for established businesses</p> | |
| </label> | |
| <label class="tone-option cursor-pointer border border-gray rounded-lg p-4 hover:border-accent hover:bg-light transition duration-200"> | |
| <input type="radio" name="tone" value="modern" class="hidden"> | |
| <div class="flex items-center"> | |
| <div class="w-6 h-6 rounded-full border-2 border-gray mr-3 flex items-center justify-center"> | |
| <div class="w-3 h-3 rounded-full bg-accent hidden"></div> | |
| </div> | |
| <span class="font-medium">Modern</span> | |
| </div> | |
| <p class="mt-2 text-sm text-gray-600">Contemporary, forward-thinking with a tech-friendly approach</p> | |
| </label> | |
| <label class="tone-option cursor-pointer border border-gray rounded-lg p-4 hover:border-accent hover:bg-light transition duration-200"> | |
| <input type="radio" name="tone" value="inspirational" class="hidden"> | |
| <div class="flex items-center"> | |
| <div class="w-6 h-6 rounded-full border-2 border-gray mr-3 flex items-center justify-center"> | |
| <div class="w-3 h-3 rounded-full bg-accent hidden"></div> | |
| </div> | |
| <span class="font-medium">Inspirational</span> | |
| </div> | |
| <p class="mt-2 text-sm text-gray-600">Motivational and uplifting, ideal for mission-driven organizations</p> | |
| </label> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-semibold text-primary mb-3">Focus Areas</h3> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3"> | |
| <label class="focus-option cursor-pointer"> | |
| <input type="checkbox" value="innovation" class="hidden"> | |
| <div class="border border-gray rounded-lg px-4 py-2 hover:border-accent hover:bg-light transition duration-200"> | |
| <span>Innovation</span> | |
| </div> | |
| </label> | |
| <label class="focus-option cursor-pointer"> | |
| <input type="checkbox" value="sustainability" class="hidden"> | |
| <div class="border border-gray rounded-lg px-4 py-2 hover:border-accent hover:bg-light transition duration-200"> | |
| <span>Sustainability</span> | |
| </div> | |
| </label> | |
| <label class="focus-option cursor-pointer"> | |
| <input type="checkbox" value="customer-centric" class="hidden"> | |
| <div class="border border-gray rounded-lg px-4 py-2 hover:border-accent hover:bg-light transition duration-200"> | |
| <span>Customer-Centric</span> | |
| </div> | |
| </label> | |
| <label class="focus-option cursor-pointer"> | |
| <input type="checkbox" value="employee-wellbeing" class="hidden"> | |
| <div class="border border-gray rounded-lg px-4 py-2 hover:border-accent hover:bg-light transition duration-200"> | |
| <span>Employee Wellbeing</span> | |
| </div> | |
| </label> | |
| <label class="focus-option cursor-pointer"> | |
| <input type="checkbox" value="community-impact" class="hidden"> | |
| <div class="border border-gray rounded-lg px-4 py-2 hover:border-accent hover:bg-light transition duration-200"> | |
| <span>Community Impact</span> | |
| </div> | |
| </label> | |
| <label class="focus-option cursor-pointer"> | |
| <input type="checkbox" value="growth" class="hidden"> | |
| <div class="border border-gray rounded-lg px-4 py-2 hover:border-accent hover:bg-light transition duration-200"> | |
| <span>Growth</span> | |
| </div> | |
| </label> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-semibold text-primary mb-3">Additional Preferences</h3> | |
| <textarea id="additional-prefs" rows="3" class="w-full px-4 py-2 border border-gray rounded-md focus:ring-2 focus:ring-accent focus:border-transparent textarea-auto" placeholder="Any specific phrases, keywords, or concepts you'd like included?"></textarea> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex justify-between"> | |
| <button id="back-to-step1" class="text-primary hover:text-accent font-medium px-6 py-3 rounded-md transition duration-300"> | |
| <i class="fas fa-arrow-left mr-2"></i> Back | |
| </button> | |
| <button id="generate-content" class="bg-accent hover:bg-opacity-90 text-white px-6 py-3 rounded-md font-medium transition duration-300 flex items-center"> | |
| Generate Content <i class="fas fa-magic ml-2"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Step 3: Results --> | |
| <div id="step3-content" class="hidden fade-in"> | |
| <div class="bg-white rounded-lg shadow-md p-6 mb-6"> | |
| <h2 class="text-2xl font-bold text-primary mb-6">Your Generated Content</h2> | |
| <div id="loading-section" class="text-center py-12"> | |
| <div class="inline-block animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-accent mb-4"></div> | |
| <h3 class="text-xl font-medium text-primary">Generating your vision, mission, and values<span class="loading-dots"></span></h3> | |
| <p class="text-gray-600 mt-2">This usually takes about 15-30 seconds</p> | |
| </div> | |
| <div id="results-section" class="hidden space-y-8"> | |
| <div class="border-b border-gray pb-6"> | |
| <h3 class="text-xl font-semibold text-primary mb-3">Vision Statement</h3> | |
| <div class="relative"> | |
| <textarea id="vision-statement" class="w-full px-4 py-3 border border-gray rounded-md focus:ring-2 focus:ring-accent focus:border-transparent textarea-auto bg-light font-medium"></textarea> | |
| <button class="copy-btn absolute top-2 right-2 bg-white text-accent p-1 rounded-md hover:bg-gray-100" data-target="vision-statement"> | |
| <i class="far fa-copy"></i> | |
| </button> | |
| </div> | |
| <p class="text-sm text-gray-600 mt-2">A compelling vision of what your organization aspires to achieve in the future</p> | |
| </div> | |
| <div class="border-b border-gray pb-6"> | |
| <h3 class="text-xl font-semibold text-primary mb-3">Mission Statement</h3> | |
| <div class="relative"> | |
| <textarea id="mission-statement" class="w-full px-4 py-3 border border-gray rounded-md focus:ring-2 focus:ring-accent focus:border-transparent textarea-auto bg-light font-medium"></textarea> | |
| <button class="copy-btn absolute top-2 right-2 bg-white text-accent p-1 rounded-md hover:bg-gray-100" data-target="mission-statement"> | |
| <i class="far fa-copy"></i> | |
| </button> | |
| </div> | |
| <p class="text-sm text-gray-600 mt-2">A clear statement of your organization's purpose and primary objectives</p> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-semibold text-primary mb-3">Core Values</h3> | |
| <div id="values-container" class="space-y-4"> | |
| <!-- Values will be added here dynamically --> | |
| </div> | |
| <button id="add-value" class="mt-4 text-accent hover:text-opacity-80 font-medium flex items-center"> | |
| <i class="fas fa-plus-circle mr-2"></i> Add Another Value | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex justify-between"> | |
| <button id="back-to-step2" class="text-primary hover:text-accent font-medium px-6 py-3 rounded-md transition duration-300"> | |
| <i class="fas fa-arrow-left mr-2"></i> Back | |
| </button> | |
| <div class="space-x-4"> | |
| <button id="regenerate-content" class="bg-gray hover:bg-opacity-90 text-primary px-6 py-3 rounded-md font-medium transition duration-300 hidden"> | |
| <i class="fas fa-sync-alt mr-2"></i> Regenerate | |
| </button> | |
| <button id="download-content" class="bg-accent hover:bg-opacity-90 text-white px-6 py-3 rounded-md font-medium transition duration-300 hidden"> | |
| <i class="fas fa-download mr-2"></i> Download | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // DOM Elements | |
| const step1 = document.getElementById('step1'); | |
| const step2 = document.getElementById('step2'); | |
| const step3 = document.getElementById('step3'); | |
| const step1Content = document.getElementById('step1-content'); | |
| const step2Content = document.getElementById('step2-content'); | |
| const step3Content = document.getElementById('step3-content'); | |
| const nextToStep2 = document.getElementById('next-to-step2'); | |
| const backToStep1 = document.getElementById('back-to-step1'); | |
| const generateContent = document.getElementById('generate-content'); | |
| const backToStep2 = document.getElementById('back-to-step2'); | |
| const regenerateContent = document.getElementById('regenerate-content'); | |
| const downloadContent = document.getElementById('download-content'); | |
| const addValue = document.getElementById('add-value'); | |
| const loadingSection = document.getElementById('loading-section'); | |
| const resultsSection = document.getElementById('results-section'); | |
| // API Key | |
| const API_KEY = 'sk-a823429c22e8408abeba2054c696ea63'; | |
| // Step Navigation | |
| nextToStep2.addEventListener('click', function() { | |
| const orgName = document.getElementById('org-name').value; | |
| const orgType = document.getElementById('org-type').value; | |
| const orgDescription = document.getElementById('org-description').value; | |
| if (!orgName || !orgType || !orgDescription) { | |
| alert('Please fill in all fields before proceeding.'); | |
| return; | |
| } | |
| step1.classList.add('opacity-50'); | |
| step2.classList.remove('opacity-50'); | |
| step1Content.classList.add('hidden'); | |
| step2Content.classList.remove('hidden'); | |
| step2Content.classList.add('fade-in'); | |
| }); | |
| backToStep1.addEventListener('click', function() { | |
| step1.classList.remove('opacity-50'); | |
| step2.classList.add('opacity-50'); | |
| step2Content.classList.add('hidden'); | |
| step1Content.classList.remove('hidden'); | |
| step1Content.classList.add('fade-in'); | |
| }); | |
| generateContent.addEventListener('click', function() { | |
| const tone = document.querySelector('input[name="tone"]:checked'); | |
| const focusAreas = Array.from(document.querySelectorAll('.focus-option input:checked')).map(el => el.value); | |
| if (!tone || focusAreas.length === 0) { | |
| alert('Please select at least one tone and one focus area.'); | |
| return; | |
| } | |
| step2.classList.add('opacity-50'); | |
| step3.classList.remove('opacity-50'); | |
| step2Content.classList.add('hidden'); | |
| step3Content.classList.remove('hidden'); | |
| step3Content.classList.add('fade-in'); | |
| loadingSection.classList.remove('hidden'); | |
| resultsSection.classList.add('hidden'); | |
| regenerateContent.classList.add('hidden'); | |
| downloadContent.classList.add('hidden'); | |
| // Prepare data for API call | |
| const orgData = { | |
| name: document.getElementById('org-name').value, | |
| type: document.getElementById('org-type').value, | |
| industry: document.getElementById('org-industry').value, | |
| description: document.getElementById('org-description').value, | |
| tone: tone.value, | |
| focusAreas: focusAreas, | |
| additionalPrefs: document.getElementById('additional-prefs').value | |
| }; | |
| // Generate content with AI | |
| generateWithAI(orgData); | |
| }); | |
| backToStep2.addEventListener('click', function() { | |
| step3.classList.add('opacity-50'); | |
| step2.classList.remove('opacity-50'); | |
| step3Content.classList.add('hidden'); | |
| step2Content.classList.remove('hidden'); | |
| step2Content.classList.add('fade-in'); | |
| }); | |
| // Tone option selection | |
| document.querySelectorAll('.tone-option').forEach(option => { | |
| option.addEventListener('click', function() { | |
| document.querySelectorAll('.tone-option').forEach(opt => { | |
| opt.classList.remove('border-accent', 'bg-light'); | |
| opt.querySelector('input').checked = false; | |
| opt.querySelector('.w-3.h-3').classList.add('hidden'); | |
| }); | |
| this.classList.add('border-accent', 'bg-light'); | |
| this.querySelector('input').checked = true; | |
| this.querySelector('.w-3.h-3').classList.remove('hidden'); | |
| }); | |
| }); | |
| // Focus option selection | |
| document.querySelectorAll('.focus-option').forEach(option => { | |
| option.addEventListener('click', function() { | |
| const input = this.querySelector('input'); | |
| input.checked = !input.checked; | |
| if (input.checked) { | |
| this.querySelector('div').classList.add('border-accent', 'bg-light'); | |
| } else { | |
| this.querySelector('div').classList.remove('border-accent', 'bg-light'); | |
| } | |
| }); | |
| }); | |
| // Auto-expanding textareas | |
| document.querySelectorAll('.textarea-auto').forEach(textarea => { | |
| textarea.addEventListener('input', function() { | |
| this.style.height = 'auto'; | |
| this.style.height = (this.scrollHeight) + 'px'; | |
| }); | |
| }); | |
| // Add new value | |
| addValue.addEventListener('click', function() { | |
| const valueId = 'value-' + Date.now(); | |
| const valueDiv = document.createElement('div'); | |
| valueDiv.className = 'border border-gray rounded-md p-4 bg-light'; | |
| valueDiv.innerHTML = ` | |
| <div class="flex justify-between items-start mb-2"> | |
| <input type="text" placeholder="Value Title" class="font-medium bg-transparent border-b border-gray focus:border-accent focus:outline-none px-1 py-1 w-1/2"> | |
| <button class="delete-value text-gray-500 hover:text-accent"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <textarea placeholder="Value Description" class="w-full px-2 py-1 bg-transparent focus:outline-none textarea-auto" rows="2"></textarea> | |
| `; | |
| document.getElementById('values-container').appendChild(valueDiv); | |
| // Add event listener for delete button | |
| valueDiv.querySelector('.delete-value').addEventListener('click', function() { | |
| valueDiv.remove(); | |
| }); | |
| // Auto-expand the new textarea | |
| const newTextarea = valueDiv.querySelector('textarea'); | |
| newTextarea.addEventListener('input', function() { | |
| this.style.height = 'auto'; | |
| this.style.height = (this.scrollHeight) + 'px'; | |
| }); | |
| }); | |
| // Copy buttons | |
| document.addEventListener('click', function(e) { | |
| if (e.target.classList.contains('copy-btn') || e.target.closest('.copy-btn')) { | |
| const btn = e.target.classList.contains('copy-btn') ? e.target : e.target.closest('.copy-btn'); | |
| const targetId = btn.getAttribute('data-target'); | |
| const textarea = document.getElementById(targetId); | |
| textarea.select(); | |
| document.execCommand('copy'); | |
| // Show tooltip | |
| const tooltip = document.createElement('div'); | |
| tooltip.className = 'absolute top-10 right-2 bg-primary text-white text-xs px-2 py-1 rounded'; | |
| tooltip.textContent = 'Copied!'; | |
| btn.appendChild(tooltip); | |
| setTimeout(() => { | |
| tooltip.remove(); | |
| }, 2000); | |
| } | |
| }); | |
| // Download content | |
| downloadContent.addEventListener('click', function() { | |
| const orgName = document.getElementById('org-name').value || 'MyOrganization'; | |
| const vision = document.getElementById('vision-statement').value; | |
| const mission = document.getElementById('mission-statement').value; | |
| let valuesText = ''; | |
| document.querySelectorAll('#values-container > div').forEach(valueDiv => { | |
| const title = valueDiv.querySelector('input').value || 'Untitled Value'; | |
| const description = valueDiv.querySelector('textarea').value || 'No description provided.'; | |
| valuesText += `• ${title}: ${description}\n\n`; | |
| }); | |
| const content = `Vision, Mission & Values for ${orgName}\n\n` + | |
| `VISION STATEMENT:\n${vision}\n\n` + | |
| `MISSION STATEMENT:\n${mission}\n\n` + | |
| `CORE VALUES:\n${valuesText}`; | |
| const blob = new Blob([content], { type: 'text/plain' }); | |
| const url = URL.createObjectURL(blob); | |
| const a = document.createElement('a'); | |
| a.href = url; | |
| a.download = `${orgName.replace(/\s+/g, '_')}_Vision_Mission_Values.txt`; | |
| document.body.appendChild(a); | |
| a.click(); | |
| document.body.removeChild(a); | |
| URL.revokeObjectURL(url); | |
| }); | |
| // Regenerate content | |
| regenerateContent.addEventListener('click', function() { | |
| loadingSection.classList.remove('hidden'); | |
| resultsSection.classList.add('hidden'); | |
| regenerateContent.classList.add('hidden'); | |
| downloadContent.classList.add('hidden'); | |
| // Prepare data for API call | |
| const orgData = { | |
| name: document.getElementById('org-name').value, | |
| type: document.getElementById('org-type').value, | |
| industry: document.getElementById('org-industry').value, | |
| description: document.getElementById('org-description').value, | |
| tone: document.querySelector('input[name="tone"]:checked').value, | |
| focusAreas: Array.from(document.querySelectorAll('.focus-option input:checked')).map(el => el.value), | |
| additionalPrefs: document.getElementById('additional-prefs').value | |
| }; | |
| // Generate content with AI | |
| generateWithAI(orgData); | |
| }); | |
| // AI Generation Function | |
| async function generateWithAI(orgData) { | |
| try { | |
| // Construct the prompt | |
| let prompt = `Create a vision statement, mission statement, and 4-6 core values for ${orgData.name}, `; | |
| prompt += `a ${orgData.type} organization in the ${orgData.industry} industry. `; | |
| prompt += `Here's a description of the organization: "${orgData.description}". `; | |
| prompt += `The tone should be ${orgData.tone}. `; | |
| if (orgData.focusAreas.length > 0) { | |
| prompt += `Key focus areas include: ${orgData.focusAreas.join(', ')}. `; | |
| } | |
| if (orgData.additionalPrefs) { | |
| prompt += `Additional preferences: ${orgData.additionalPrefs}. `; | |
| } | |
| prompt += `Please format the response as follows:\n\n`; | |
| prompt += `VISION: [vision statement]\n\n`; | |
| prompt += `MISSION: [mission statement]\n\n`; | |
| prompt += `VALUES:\n1. [value name]: [value description]\n2. [value name]: [value description]\n...`; | |
| // Call DeepSeek API | |
| const response = await fetch('https://api.deepseek.com/v1/chat/completions', { | |
| method: 'POST', | |
| headers: { | |
| 'Content-Type': 'application/json', | |
| 'Authorization': `Bearer ${API_KEY}` | |
| }, | |
| body: JSON.stringify({ | |
| model: 'deepseek-chat', | |
| messages: [ | |
| { | |
| role: 'user', | |
| content: prompt | |
| } | |
| ], | |
| temperature: 0.7, | |
| max_tokens: 1000 | |
| }) | |
| }); | |
| if (!response.ok) { | |
| throw new Error(`API request failed with status ${response.status}`); | |
| } | |
| const data = await response.json(); | |
| const content = data.choices[0].message.content; | |
| // Parse the response | |
| const visionMatch = content.match(/VISION:\s*(.+?)\n\n/i); | |
| const missionMatch = content.match(/MISSION:\s*(.+?)\n\n/i); | |
| const valuesMatch = content.match(/VALUES:\s*([\s\S]+)/i); | |
| if (visionMatch && missionMatch && valuesMatch) { | |
| const vision = visionMatch[1].trim(); | |
| const mission = missionMatch[1].trim(); | |
| const valuesText = valuesMatch[1].trim(); | |
| // Split values into individual items | |
| const values = valuesText.split('\n').filter(line => line.trim()).map(line => { | |
| const parts = line.split(':').map(part => part.trim()); | |
| return { | |
| title: parts[0].replace(/^\d+\.\s*/, ''), | |
| description: parts.slice(1).join(': ') | |
| }; | |
| }); | |
| // Update the UI | |
| document.getElementById('vision-statement').value = vision; | |
| document.getElementById('mission-statement').value = mission; | |
| const valuesContainer = document.getElementById('values-container'); | |
| valuesContainer.innerHTML = ''; | |
| values.forEach(value => { | |
| const valueId = 'value-' + Date.now(); | |
| const valueDiv = document.createElement('div'); | |
| valueDiv.className = 'border border-gray rounded-md p-4 bg-light'; | |
| valueDiv.innerHTML = ` | |
| <div class="flex justify-between items-start mb-2"> | |
| <input type="text" value="${value.title}" class="font-medium bg-transparent border-b border-gray focus:border-accent focus:outline-none px-1 py-1 w-1/2"> | |
| <button class="delete-value text-gray-500 hover:text-accent"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <textarea class="w-full px-2 py-1 bg-transparent focus:outline-none textarea-auto" rows="2">${value.description}</textarea> | |
| `; | |
| valuesContainer.appendChild(valueDiv); | |
| // Add event listener for delete button | |
| valueDiv.querySelector('.delete-value').addEventListener('click', function() { | |
| valueDiv.remove(); | |
| }); | |
| // Auto-expand the textarea | |
| const textarea = valueDiv.querySelector('textarea'); | |
| textarea.style.height = 'auto'; | |
| textarea.style.height = (textarea.scrollHeight) + 'px'; | |
| textarea.addEventListener('input', function() { | |
| this.style.height = 'auto'; | |
| this.style.height = (this.scrollHeight) + 'px'; | |
| }); | |
| }); | |
| // Show results | |
| loadingSection.classList.add('hidden'); | |
| resultsSection.classList.remove('hidden'); | |
| regenerateContent.classList.remove('hidden'); | |
| downloadContent.classList.remove('hidden'); | |
| } else { | |
| throw new Error('Could not parse the AI response'); | |
| } | |
| } catch (error) { | |
| console.error('Error generating content:', error); | |
| loadingSection.innerHTML = ` | |
| <div class="text-center py-12"> | |
| <i class="fas fa-exclamation-triangle text-4xl text-accent mb-4"></i> | |
| <h3 class="text-xl font-medium text-primary">Error Generating Content</h3> | |
| <p class="text-gray-600 mt-2">We encountered an issue while generating your content. Please try again.</p> | |
| <button id="try-again" class="mt-4 bg-accent hover:bg-opacity-90 text-white px-4 py-2 rounded-md font-medium transition duration-300"> | |
| Try Again | |
| </button> | |
| </div> | |
| `; | |
| document.getElementById('try-again').addEventListener('click', function() { | |
| location.reload(); | |
| }); | |
| } | |
| } | |
| }); | |
| </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/vision-mission-values-generator" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |