Spaces:
Running
Running
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<title>Vision Quest - AI Goal Generator</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"> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.5.28/jspdf.plugin.autotable.min.js"></script> | |
<style> | |
@keyframes float { | |
0% { transform: translateY(0px); } | |
50% { transform: translateY(-10px); } | |
100% { transform: translateY(0px); } | |
} | |
.floating { | |
animation: float 3s ease-in-out infinite; | |
} | |
.progress-ring__circle { | |
transition: stroke-dashoffset 0.5s; | |
transform: rotate(-90deg); | |
transform-origin: 50% 50%; | |
} | |
.card-hover:hover { | |
transform: translateY(-5px); | |
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
} | |
.fade-in { | |
animation: fadeIn 0.5s ease-in; | |
} | |
@keyframes fadeIn { | |
from { opacity: 0; } | |
to { opacity: 1; } | |
} | |
.loading-dots:after { | |
content: '.'; | |
animation: dots 1.5s steps(5, end) infinite; | |
} | |
@keyframes dots { | |
0%, 20% { content: '.'; } | |
40% { content: '..'; } | |
60% { content: '...'; } | |
80%, 100% { content: ''; } | |
} | |
@keyframes gradient { | |
0% { background-position: 0% 50%; } | |
50% { background-position: 100% 50%; } | |
100% { background-position: 0% 50%; } | |
} | |
.gradient-bg { | |
background: linear-gradient(-45deg, #6366f1, #8b5cf6, #ec4899, #f43f5e); | |
background-size: 400% 400%; | |
animation: gradient 15s ease infinite; | |
} | |
.glow-text { | |
text-shadow: 0 0 10px rgba(255, 255, 255, 0.8); | |
} | |
.staggered-item { | |
opacity: 0; | |
transform: translateY(20px); | |
transition: all 0.6s ease; | |
} | |
.staggered-item.show { | |
opacity: 1; | |
transform: translateY(0); | |
} | |
.goal-card { | |
background: rgba(255, 255, 255, 0.1); | |
backdrop-filter: blur(10px); | |
border: 1px solid rgba(255, 255, 255, 0.2); | |
} | |
.loading-bar { | |
width: 0%; | |
transition: width 0.5s ease; | |
} | |
</style> | |
</head> | |
<body class="bg-gradient-to-br from-indigo-50 to-purple-50 min-h-screen"> | |
<div class="container mx-auto px-4 py-8"> | |
<!-- Header --> | |
<header class="text-center mb-12"> | |
<div class="flex justify-center mb-4"> | |
<div class="bg-gradient-to-r from-purple-500 to-indigo-600 p-3 rounded-full floating"> | |
<i class="fas fa-bullseye text-white text-3xl"></i> | |
</div> | |
</div> | |
<h1 class="text-4xl md:text-5xl font-bold text-gray-800 mb-2">Vision Quest</h1> | |
<p class="text-xl text-gray-600">Your AI-powered goal generation engine</p> | |
</header> | |
<!-- Main App Container --> | |
<div class="bg-white rounded-2xl shadow-xl overflow-hidden"> | |
<!-- Progress Tracker --> | |
<div class="bg-indigo-600 text-white px-6 py-4 flex items-center justify-between"> | |
<div class="flex items-center space-x-2"> | |
<div class="w-8 h-8 rounded-full bg-white text-indigo-600 flex items-center justify-center font-bold">1</div> | |
<span>Input Your Vision</span> | |
</div> | |
<div class="flex items-center space-x-2 opacity-50"> | |
<div class="w-8 h-8 rounded-full bg-indigo-500 text-white flex items-center justify-center font-bold">2</div> | |
<span>Generate Goals</span> | |
</div> | |
<div class="flex items-center space-x-2 opacity-50"> | |
<div class="w-8 h-8 rounded-full bg-indigo-500 text-white flex items-center justify-center font-bold">3</div> | |
<span>Action Plan</span> | |
</div> | |
</div> | |
<!-- Input Section --> | |
<div class="p-6 md:p-8"> | |
<div class="grid grid-cols-1 md:grid-cols-2 gap-8"> | |
<!-- Vision Input --> | |
<div class="bg-gradient-to-br from-purple-50 to-indigo-50 p-6 rounded-xl"> | |
<h2 class="text-2xl font-bold text-gray-800 mb-4 flex items-center"> | |
<i class="fas fa-eye mr-3 text-purple-500"></i> Your Vision/Why | |
</h2> | |
<textarea id="visionInput" class="w-full h-32 p-4 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent" placeholder="What is your ultimate vision? Why does this matter to you?"></textarea> | |
<div class="mt-2 text-sm text-gray-500">Example: "To build a sustainable business that empowers creative professionals while maintaining work-life harmony."</div> | |
</div> | |
<!-- Values Input --> | |
<div class="bg-gradient-to-br from-blue-50 to-cyan-50 p-6 rounded-xl"> | |
<h2 class="text-2xl font-bold text-gray-800 mb-4 flex items-center"> | |
<i class="fas fa-heart mr-3 text-blue-500"></i> Core Values (3-5) | |
</h2> | |
<div id="valuesContainer"> | |
<div class="flex mb-2"> | |
<input type="text" class="value-input flex-grow p-3 border border-gray-300 rounded-l-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="Value 1"> | |
<button class="remove-value bg-blue-500 text-white px-4 rounded-r-lg hover:bg-blue-600 transition"><i class="fas fa-check"></i></button> | |
</div> | |
</div> | |
<button id="addValueBtn" class="mt-2 bg-blue-100 text-blue-600 px-4 py-2 rounded-lg hover:bg-blue-200 transition flex items-center"> | |
<i class="fas fa-plus mr-2"></i> Add Value | |
</button> | |
</div> | |
</div> | |
<!-- Income Planning --> | |
<div class="mt-8 bg-gradient-to-br from-amber-50 to-orange-50 p-6 rounded-xl"> | |
<h2 class="text-2xl font-bold text-gray-800 mb-4 flex items-center"> | |
<i class="fas fa-money-bill-wave mr-3 text-amber-500"></i> Income Strategy | |
</h2> | |
<div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
<div> | |
<h3 class="text-lg font-semibold text-gray-700 mb-3">Current Income Streams</h3> | |
<div id="currentIncomeContainer"> | |
<div class="flex mb-2"> | |
<input type="text" class="income-input flex-grow p-3 border border-gray-300 rounded-l-lg focus:ring-2 focus:ring-amber-500 focus:border-transparent" placeholder="Income source"> | |
<button class="remove-income bg-amber-500 text-white px-4 rounded-r-lg hover:bg-amber-600 transition"><i class="fas fa-check"></i></button> | |
</div> | |
</div> | |
<button id="addCurrentIncomeBtn" class="mt-2 bg-amber-100 text-amber-600 px-4 py-2 rounded-lg hover:bg-amber-200 transition flex items-center"> | |
<i class="fas fa-plus mr-2"></i> Add Income Source | |
</button> | |
</div> | |
<div> | |
<h3 class="text-lg font-semibold text-gray-700 mb-3">Planned Income Streams</h3> | |
<div id="plannedIncomeContainer"> | |
<div class="flex mb-2"> | |
<input type="text" class="planned-input flex-grow p-3 border border-gray-300 rounded-l-lg focus:ring-2 focus:ring-amber-500 focus:border-transparent" placeholder="Planned income"> | |
<button class="remove-planned bg-amber-500 text-white px-4 rounded-r-lg hover:bg-amber-600 transition"><i class="fas fa-check"></i></button> | |
</div> | |
</div> | |
<button id="addPlannedIncomeBtn" class="mt-2 bg-amber-100 text-amber-600 px-4 py-2 rounded-lg hover:bg-amber-200 transition flex items-center"> | |
<i class="fas fa-plus mr-2"></i> Add Planned Income | |
</button> | |
</div> | |
</div> | |
</div> | |
<!-- Long-term Goals --> | |
<div class="mt-8 bg-gradient-to-br from-green-50 to-teal-50 p-6 rounded-xl"> | |
<h2 class="text-2xl font-bold text-gray-800 mb-4 flex items-center"> | |
<i class="fas fa-mountain mr-3 text-green-500"></i> Long-term Goals | |
</h2> | |
<div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
<div> | |
<h3 class="text-lg font-semibold text-gray-700 mb-3">10-Year Goals</h3> | |
<div id="tenYearGoals"> | |
<div class="flex mb-2"> | |
<input type="text" class="goal-10y flex-grow p-3 border border-gray-300 rounded-l-lg focus:ring-2 focus:ring-green-500 focus:border-transparent" placeholder="Big audacious goal"> | |
<button class="remove-10y bg-green-500 text-white px-4 rounded-r-lg hover:bg-green-600 transition"><i class="fas fa-check"></i></button> | |
</div> | |
</div> | |
<button id="addTenYearGoalBtn" class="mt-2 bg-green-100 text-green-600 px-4 py-2 rounded-lg hover:bg-green-200 transition flex items-center"> | |
<i class="fas fa-plus mr-2"></i> Add Goal | |
</button> | |
</div> | |
<div> | |
<h3 class="text-lg font-semibold text-gray-700 mb-3">3-Year Goals</h3> | |
<div id="threeYearGoals"> | |
<div class="flex mb-2"> | |
<input type="text" class="goal-3y flex-grow p-3 border border-gray-300 rounded-l-lg focus:ring-2 focus:ring-green-500 focus:border-transparent" placeholder="Milestone goal"> | |
<button class="remove-3y bg-green-500 text-white px-4 rounded-r-lg hover:bg-green-600 transition"><i class="fas fa-check"></i></button> | |
</div> | |
</div> | |
<button id="addThreeYearGoalBtn" class="mt-2 bg-green-100 text-green-600 px-4 py-2 rounded-lg hover:bg-green-200 transition flex items-center"> | |
<i class="fas fa-plus mr-2"></i> Add Goal | |
</button> | |
</div> | |
</div> | |
</div> | |
<!-- Generate Button --> | |
<div class="mt-10 text-center"> | |
<button id="generateBtn" class="bg-gradient-to-r from-purple-500 to-indigo-600 text-white px-8 py-4 rounded-full text-lg font-bold shadow-lg hover:shadow-xl transition-all transform hover:scale-105"> | |
<i class="fas fa-magic mr-2"></i> Generate My Action Plan | |
</button> | |
</div> | |
</div> | |
</div> | |
<!-- Loading Screen (Initially Hidden) --> | |
<div id="loadingScreen" class="fixed inset-0 bg-black bg-opacity-90 z-50 flex flex-col items-center justify-center hidden"> | |
<div class="text-center max-w-2xl px-6"> | |
<div class="gradient-bg w-24 h-24 rounded-full flex items-center justify-center mx-auto mb-8"> | |
<i class="fas fa-spinner fa-spin text-white text-4xl glow-text"></i> | |
</div> | |
<h2 class="text-3xl md:text-4xl font-bold text-white mb-4 glow-text">Crafting Your Vision</h2> | |
<p class="text-xl text-white mb-8 opacity-80">Our AI is carefully designing your personalized roadmap to success</p> | |
<div class="w-full bg-gray-800 rounded-full h-3 mb-6"> | |
<div id="loadingProgress" class="loading-bar bg-gradient-to-r from-purple-400 to-indigo-500 h-3 rounded-full" style="width: 0%"></div> | |
</div> | |
<div class="grid grid-cols-3 gap-4 text-white text-sm"> | |
<div class="staggered-item"> | |
<div class="bg-indigo-900 bg-opacity-50 p-3 rounded-lg"> | |
<i class="fas fa-brain text-indigo-300 mb-2"></i> | |
<p>Analyzing your vision</p> | |
</div> | |
</div> | |
<div class="staggered-item"> | |
<div class="bg-purple-900 bg-opacity-50 p-3 rounded-lg"> | |
<i class="fas fa-lightbulb text-purple-300 mb-2"></i> | |
<p>Generating strategic goals</p> | |
</div> | |
</div> | |
<div class="staggered-item"> | |
<div class="bg-pink-900 bg-opacity-50 p-3 rounded-lg"> | |
<i class="fas fa-chart-line text-pink-300 mb-2"></i> | |
<p>Optimizing income streams</p> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
<!-- Results Section (Initially Hidden) --> | |
<div id="resultsSection" class="hidden mt-12 bg-gradient-to-br from-indigo-900 to-purple-900 rounded-2xl shadow-xl overflow-hidden fade-in text-white"> | |
<div class="relative overflow-hidden"> | |
<div class="absolute inset-0 bg-gradient-to-br from-indigo-500 to-purple-600 opacity-10"></div> | |
<div class="relative z-10"> | |
<div class="bg-gradient-to-r from-indigo-800 to-purple-800 px-6 py-6 flex items-center justify-between"> | |
<div class="flex items-center space-x-4"> | |
<div class="w-10 h-10 rounded-full bg-white bg-opacity-20 flex items-center justify-center"> | |
<i class="fas fa-check text-white"></i> | |
</div> | |
<h2 class="text-2xl font-bold">Your Vision Quest</h2> | |
</div> | |
<div class="flex space-x-2"> | |
<button id="exportPdfBtn" class="bg-white bg-opacity-10 hover:bg-opacity-20 text-white px-4 py-2 rounded-lg flex items-center transition"> | |
<i class="fas fa-download mr-2"></i> PDF | |
</button> | |
<button id="exportCsvBtn" class="bg-white bg-opacity-10 hover:bg-opacity-20 text-white px-4 py-2 rounded-lg flex items-center transition"> | |
<i class="fas fa-file-csv mr-2"></i> CSV | |
</button> | |
</div> | |
</div> | |
<div class="p-6 md:p-8"> | |
<!-- Identity Section --> | |
<div class="mb-12 goal-card p-6 rounded-xl relative overflow-hidden"> | |
<div class="absolute inset-0 bg-gradient-to-br from-yellow-500 to-orange-500 opacity-10"></div> | |
<div class="relative z-10"> | |
<div class="flex items-center mb-4"> | |
<div class="w-12 h-12 rounded-full bg-yellow-500 bg-opacity-20 flex items-center justify-center mr-4"> | |
<i class="fas fa-user-astronaut text-yellow-300 text-xl"></i> | |
</div> | |
<h3 class="text-xl font-bold">Identity Statement</h3> | |
</div> | |
<div id="identityOutput" class="text-lg bg-white bg-opacity-5 p-4 rounded-lg border border-white border-opacity-10 italic"> | |
"I am a Visionary Executor who consistently takes aligned action toward meaningful goals." | |
</div> | |
</div> | |
</div> | |
<!-- Goals Timeline --> | |
<div class="mb-12"> | |
<h3 class="text-2xl font-bold mb-6 flex items-center"> | |
<i class="fas fa-map-marked-alt mr-3 text-indigo-300"></i> Your Goal Timeline | |
</h3> | |
<div class="relative"> | |
<!-- Timeline line --> | |
<div class="absolute left-5 top-0 bottom-0 w-0.5 bg-indigo-700"></div> | |
<div class="space-y-8 pl-10"> | |
<!-- 10 Year Goal --> | |
<div class="staggered-item relative"> | |
<div class="absolute -left-10 top-4 w-8 h-8 rounded-full bg-gradient-to-br from-purple-500 to-indigo-600 flex items-center justify-center"> | |
<i class="fas fa-mountain text-white"></i> | |
</div> | |
<div class="goal-card p-5 rounded-xl"> | |
<div class="flex justify-between items-start mb-2"> | |
<h4 class="text-lg font-semibold">10-Year Vision</h4> | |
<div class="text-xs bg-indigo-800 bg-opacity-50 px-2 py-1 rounded-full">Decade Goal</div> | |
</div> | |
<div id="tenYearGoalDisplay" class="text-gray-200"> | |
Build a multi-million dollar business that empowers creative professionals worldwide. | |
</div> | |
</div> | |
</div> | |
<!-- 3 Year Goal --> | |
<div class="staggered-item relative"> | |
<div class="absolute -left-10 top-4 w-8 h-8 rounded-full bg-gradient-to-br from-blue-500 to-cyan-500 flex items-center justify-center"> | |
<i class="fas fa-flag text-white"></i> | |
</div> | |
<div class="goal-card p-5 rounded-xl"> | |
<div class="flex justify-between items-start mb-2"> | |
<h4 class="text-lg font-semibold">3-Year Milestone</h4> | |
<div class="text-xs bg-blue-800 bg-opacity-50 px-2 py-1 rounded-full">Strategic Goal</div> | |
</div> | |
<div id="threeYearGoalDisplay" class="text-gray-200"> | |
Launch a profitable SaaS product with 10,000 active users. | |
</div> | |
</div> | |
</div> | |
<!-- 1 Year Goal --> | |
<div class="staggered-item relative"> | |
<div class="absolute -left-10 top-4 w-8 h-8 rounded-full bg-gradient-to-br from-green-500 to-teal-500 flex items-center justify-center"> | |
<i class="fas fa-calendar-star text-white"></i> | |
</div> | |
<div class="goal-card p-5 rounded-xl"> | |
<div class="flex justify-between items-start mb-2"> | |
<h4 class="text-lg font-semibold">1-Year Focus</h4> | |
<div class="text-xs bg-green-800 bg-opacity-50 px-2 py-1 rounded-full">Annual Goal</div> | |
</div> | |
<div id="oneYearGoal" class="text-gray-200"> | |
Launch MVP of the product and acquire first 100 paying customers. | |
</div> | |
</div> | |
</div> | |
<!-- 90 Day Goal --> | |
<div class="staggered-item relative"> | |
<div class="absolute -left-10 top-4 w-8 h-8 rounded-full bg-gradient-to-br from-amber-500 to-orange-500 flex items-center justify-center"> | |
<i class="fas fa-fire text-white"></i> | |
</div> | |
<div class="goal-card p-5 rounded-xl"> | |
<div class="flex justify-between items-start mb-2"> | |
<h4 class="text-lg font-semibold">90-Day Sprint</h4> | |
<div class="text-xs bg-amber-800 bg-opacity-50 px-2 py-1 rounded-full">Quarterly Goal</div> | |
</div> | |
<div id="ninetyDayGoal" class="text-gray-200"> | |
Complete product prototype and run first beta test with 20 users. | |
</div> | |
</div> | |
</div> | |
<!-- Monthly Goals --> | |
<div class="staggered-item relative"> | |
<div class="absolute -left-10 top-4 w-8 h-8 rounded-full bg-gradient-to-br from-pink-500 to-rose-500 flex items-center justify-center"> | |
<i class="fas fa-calendar-alt text-white"></i> | |
</div> | |
<div class="goal-card p-5 rounded-xl"> | |
<div class="flex justify-between items-start mb-2"> | |
<h4 class="text-lg font-semibold">Monthly Targets</h4> | |
<div class="text-xs bg-pink-800 bg-opacity-50 px-2 py-1 rounded-full">Action Plan</div> | |
</div> | |
<div id="monthlyGoals" class="text-gray-200"> | |
<ul class="space-y-2"> | |
<li class="flex items-start"> | |
<span class="inline-block w-2 h-2 bg-pink-400 rounded-full mt-2 mr-2"></span> | |
<span>Month 1: Finalize product specifications</span> | |
</li> | |
<li class="flex items-start"> | |
<span class="inline-block w-2 h-2 bg-pink-400 rounded-full mt-2 mr-2"></span> | |
<span>Month 2: Develop core features</span> | |
</li> | |
<li class="flex items-start"> | |
<span class="inline-block w-2 h-2 bg-pink-400 rounded-full mt-2 mr-2"></span> | |
<span>Month 3: Conduct initial user testing</span> | |
</li> | |
</ul> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
<!-- Income Strategy --> | |
<div class="mb-12 goal-card p-6 rounded-xl"> | |
<div class="flex items-center mb-6"> | |
<div class="w-12 h-12 rounded-full bg-amber-500 bg-opacity-20 flex items-center justify-center mr-4"> | |
<i class="fas fa-coins text-amber-300 text-xl"></i> | |
</div> | |
<h3 class="text-xl font-bold">Income Strategy</h3> | |
</div> | |
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6"> | |
<div> | |
<h4 class="font-semibold text-amber-200 mb-3">Current Income Streams</h4> | |
<ul id="currentIncomeDisplay" class="space-y-2"> | |
<li class="flex items-center"> | |
<span class="w-2 h-2 bg-amber-400 rounded-full mr-2"></span> | |
<span>Freelance design work</span> | |
</li> | |
<li class="flex items-center"> | |
<span class="w-2 h-2 bg-amber-400 rounded-full mr-2"></span> | |
<span>Online course sales</span> | |
</li> | |
</ul> | |
</div> | |
<div> | |
<h4 class="font-semibold text-amber-200 mb-3">Planned Income Streams</h4> | |
<ul id="plannedIncomeDisplay" class="space-y-2"> | |
<li class="flex items-center"> | |
<span class="w-2 h-2 bg-amber-400 rounded-full mr-2"></span> | |
<span>SaaS product subscriptions</span> | |
</li> | |
<li class="flex items-center"> | |
<span class="w-2 h-2 bg-amber-400 rounded-full mr-2"></span> | |
<span>Consulting services</span> | |
</li> | |
</ul> | |
</div> | |
</div> | |
<div> | |
<h4 class="font-semibold text-amber-200 mb-3">Revenue Growth Strategy</h4> | |
<div id="revenueStrategy" class="bg-white bg-opacity-5 p-4 rounded-lg border border-white border-opacity-10"> | |
Focus on productizing services and building scalable income streams through digital products and automation. Prioritize recurring revenue models while maintaining consulting for high-touch clients. | |
</div> | |
</div> | |
</div> | |
<!-- Habits & Systems --> | |
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-12"> | |
<!-- Habits --> | |
<div class="goal-card p-6 rounded-xl"> | |
<div class="flex items-center mb-4"> | |
<div class="w-10 h-10 rounded-full bg-pink-500 bg-opacity-20 flex items-center justify-center mr-4"> | |
<i class="fas fa-sync-alt text-pink-300"></i> | |
</div> | |
<h3 class="text-xl font-bold">Key Habits</h3> | |
</div> | |
<div id="habitsOutput" class="space-y-4"> | |
<div class="flex items-start"> | |
<div class="flex-shrink-0 h-6 w-6 rounded-full bg-pink-500 bg-opacity-20 text-pink-300 flex items-center justify-center mr-3 mt-1"> | |
<i class="fas fa-check text-xs"></i> | |
</div> | |
<div class="text-gray-200">Daily 90-minute deep work session on product development</div> | |
</div> | |
<div class="flex items-start"> | |
<div class="flex-shrink-0 h-6 w-6 rounded-full bg-pink-500 bg-opacity-20 text-pink-300 flex items-center justify-center mr-3 mt-1"> | |
<i class="fas fa-check text-xs"></i> | |
</div> | |
<div class="text-gray-200">Weekly customer development interviews</div> | |
</div> | |
<div class="flex items-start"> | |
<div class="flex-shrink-0 h-6 w-6 rounded-full bg-pink-500 bg-opacity-20 text-pink-300 flex items-center justify-center mr-3 mt-1"> | |
<i class="fas fa-check text-xs"></i> | |
</div> | |
<div class="text-gray-200">Morning routine with meditation and planning</div> | |
</div> | |
</div> | |
</div> | |
<!-- Systems --> | |
<div class="goal-card p-6 rounded-xl"> | |
<div class="flex items-center mb-4"> | |
<div class="w-10 h-10 rounded-full bg-amber-500 bg-opacity-20 flex items-center justify-center mr-4"> | |
<i class="fas fa-cogs text-amber-300"></i> | |
</div> | |
<h3 class="text-xl font-bold">Value Creation Systems</h3> | |
</div> | |
<div id="systemsOutput" class="space-y-4"> | |
<div class="flex items-start"> | |
<div class="flex-shrink-0 h-6 w-6 rounded-full bg-amber-500 bg-opacity-20 text-amber-300 flex items-center justify-center mr-3 mt-1"> | |
<i class="fas fa-cog text-xs"></i> | |
</div> | |
<div class="text-gray-200">Product development sprint system (2-week cycles)</div> | |
</div> | |
<div class="flex items-start"> | |
<div class="flex-shrink-0 h-6 w-6 rounded-full bg-amber-500 bg-opacity-20 text-amber-300 flex items-center justify-center mr-3 mt-1"> | |
<i class="fas fa-cog text-xs"></i> | |
</div> | |
<div class="text-gray-200">Customer feedback collection and analysis process</div> | |
</div> | |
<div class="flex items-start"> | |
<div class="flex-shrink-0 h-6 w-6 rounded-full bg-amber-500 bg-opacity-20 text-amber-300 flex items-center justify-center mr-3 mt-1"> | |
<i class="fas fa-cog text-xs"></i> | |
</div> | |
<div class="text-gray-200">Personal energy management tracking</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
<!-- Gamification --> | |
<div class="goal-card p-6 rounded-xl"> | |
<div class="flex items-center mb-6"> | |
<div class="w-12 h-12 rounded-full bg-purple-500 bg-opacity-20 flex items-center justify-center mr-4"> | |
<i class="fas fa-trophy text-purple-300 text-xl"></i> | |
</div> | |
<h3 class="text-xl font-bold">Your Quest Progress</h3> | |
</div> | |
<div class="flex items-center mb-6"> | |
<div class="w-full bg-gray-800 rounded-full h-4"> | |
<div class="bg-gradient-to-r from-purple-400 to-indigo-500 h-4 rounded-full" style="width: 15%"></div> | |
</div> | |
<span class="ml-4 font-medium">15%</span> | |
</div> | |
<div class="grid grid-cols-3 gap-4 text-center mb-6"> | |
<div class="staggered-item"> | |
<div class="bg-white bg-opacity-5 p-4 rounded-lg border border-white border-opacity-10"> | |
<div class="text-2xl font-bold text-indigo-300">3</div> | |
<div class="text-sm text-gray-300">Goals Set</div> | |
</div> | |
</div> | |
<div class="staggered-item"> | |
<div class="bg-white bg-opacity-5 p-4 rounded-lg border border-white border-opacity-10"> | |
<div class="text-2xl font-bold text-purple-300">0</div> | |
<div class="text-sm text-gray-300">Goals Completed</div> | |
</div> | |
</div> | |
<div class="staggered-item"> | |
<div class="bg-white bg-opacity-5 p-4 rounded-lg border border-white border-opacity-10"> | |
<div class="text-2xl font-bold text-pink-300">1</div> | |
<div class="text-sm text-gray-300">Badges Earned</div> | |
</div> | |
</div> | |
</div> | |
<div class="text-center"> | |
<div class="inline-block bg-gradient-to-r from-purple-500 to-indigo-600 bg-opacity-20 p-4 rounded-xl border border-purple-400 border-opacity-30"> | |
<div class="w-16 h-16 mx-auto mb-3 rounded-full bg-gradient-to-r from-purple-500 to-indigo-600 flex items-center justify-center"> | |
<i class="fas fa-seedling text-white text-2xl"></i> | |
</div> | |
<h4 class="font-semibold text-purple-200">Next Badge: <span class="text-white">Vision Setter</span></h4> | |
<p class="text-sm text-purple-200 mt-1">Complete your first 90-day goal to unlock this badge!</p> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
<script> | |
// Initialize jsPDF | |
const { jsPDF } = window.jspdf; | |
document.addEventListener('DOMContentLoaded', function() { | |
// API Key | |
const DEEPSEEK_API_KEY = 'sk-0cce68e321854d11b01ee9227147a12d'; | |
// Track all inputs | |
let userInputs = { | |
vision: '', | |
values: [], | |
currentIncome: [], | |
plannedIncome: [], | |
tenYearGoals: [], | |
threeYearGoals: [] | |
}; | |
// Add Value Field | |
let valueCount = 1; | |
document.getElementById('addValueBtn').addEventListener('click', function() { | |
if (valueCount < 5) { | |
valueCount++; | |
const newValueField = document.createElement('div'); | |
newValueField.className = 'flex mb-2'; | |
newValueField.innerHTML = ` | |
<input type="text" class="value-input flex-grow p-3 border border-gray-300 rounded-l-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="Value ${valueCount}"> | |
<button class="remove-value bg-blue-500 text-white px-4 rounded-r-lg hover:bg-blue-600 transition"><i class="fas fa-times"></i></button> | |
`; | |
document.getElementById('valuesContainer').appendChild(newValueField); | |
// Add remove functionality | |
newValueField.querySelector('.remove-value').addEventListener('click', function() { | |
newValueField.remove(); | |
valueCount--; | |
}); | |
} else { | |
alert('Maximum of 5 values allowed'); | |
} | |
}); | |
// Add Current Income Field | |
let currentIncomeCount = 1; | |
document.getElementById('addCurrentIncomeBtn').addEventListener('click', function() { | |
const newIncomeField = document.createElement('div'); | |
newIncomeField.className = 'flex mb-2'; | |
newIncomeField.innerHTML = ` | |
<input type="text" class="income-input flex-grow p-3 border border-gray-300 rounded-l-lg focus:ring-2 focus:ring-amber-500 focus:border-transparent" placeholder="Income source ${currentIncomeCount}"> | |
<button class="remove-income bg-amber-500 text-white px-4 rounded-r-lg hover:bg-amber-600 transition"><i class="fas fa-times"></i></button> | |
`; | |
document.getElementById('currentIncomeContainer').appendChild(newIncomeField); | |
currentIncomeCount++; | |
// Add remove functionality | |
newIncomeField.querySelector('.remove-income').addEventListener('click', function() { | |
newIncomeField.remove(); | |
}); | |
}); | |
// Add Planned Income Field | |
let plannedIncomeCount = 1; | |
document.getElementById('addPlannedIncomeBtn').addEventListener('click', function() { | |
const newPlannedField = document.createElement('div'); | |
newPlannedField.className = 'flex mb-2'; | |
newPlannedField.innerHTML = ` | |
<input type="text" class="planned-input flex-grow p-3 border border-gray-300 rounded-l-lg focus:ring-2 focus:ring-amber-500 focus:border-transparent" placeholder="Planned income ${plannedIncomeCount}"> | |
<button class="remove-planned bg-amber-500 text-white px-4 rounded-r-lg hover:bg-amber-600 transition"><i class="fas fa-times"></i></button> | |
`; | |
document.getElementById('plannedIncomeContainer').appendChild(newPlannedField); | |
plannedIncomeCount++; | |
// Add remove functionality | |
newPlannedField.querySelector('.remove-planned').addEventListener('click', function() { | |
newPlannedField.remove(); | |
}); | |
}); | |
// Add 10-Year Goal Field | |
let tenYearGoalCount = 1; | |
document.getElementById('addTenYearGoalBtn').addEventListener('click', function() { | |
if (tenYearGoalCount < 3) { | |
tenYearGoalCount++; | |
const newGoalField = document.createElement('div'); | |
newGoalField.className = 'flex mb-2'; | |
newGoalField.innerHTML = ` | |
<input type="text" class="goal-10y flex-grow p-3 border border-gray-300 rounded-l-lg focus:ring-2 focus:ring-green-500 focus:border-transparent" placeholder="10-Year Goal ${tenYearGoalCount}"> | |
<button class="remove-10y bg-green-500 text-white px-4 rounded-r-lg hover:bg-green-600 transition"><i class="fas fa-times"></i></button> | |
`; | |
document.getElementById('tenYearGoals').appendChild(newGoalField); | |
// Add remove functionality | |
newGoalField.querySelector('.remove-10y').addEventListener('click', function() { | |
newGoalField.remove(); | |
tenYearGoalCount--; | |
}); | |
} else { | |
alert('Maximum of 3 10-year goals allowed'); | |
} | |
}); | |
// Add 3-Year Goal Field | |
let threeYearGoalCount = 1; | |
document.getElementById('addThreeYearGoalBtn').addEventListener('click', function() { | |
if (threeYearGoalCount < 5) { | |
threeYearGoalCount++; | |
const newGoalField = document.createElement('div'); | |
newGoalField.className = 'flex mb-2'; | |
newGoalField.innerHTML = ` | |
<input type="text" class="goal-3y flex-grow p-3 border border-gray-300 rounded-l-lg focus:ring-2 focus:ring-green-500 focus:border-transparent" placeholder="3-Year Goal ${threeYearGoalCount}"> | |
<button class="remove-3y bg-green-500 text-white px-4 rounded-r-lg hover:bg-green-600 transition"><i class="fas fa-times"></i></button> | |
`; | |
document.getElementById('threeYearGoals').appendChild(newGoalField); | |
// Add remove functionality | |
newGoalField.querySelector('.remove-3y').addEventListener('click', function() { | |
newGoalField.remove(); | |
threeYearGoalCount--; | |
}); | |
} else { | |
alert('Maximum of 5 3-year goals allowed'); | |
} | |
}); | |
// Generate Action Plan with AI | |
document.getElementById('generateBtn').addEventListener('click', async function() { | |
// Collect all user inputs | |
userInputs.vision = document.getElementById('visionInput').value; | |
// Collect values | |
userInputs.values = []; | |
document.querySelectorAll('.value-input').forEach(input => { | |
if (input.value.trim() !== '') { | |
userInputs.values.push(input.value.trim()); | |
} | |
}); | |
// Collect current income | |
userInputs.currentIncome = []; | |
document.querySelectorAll('.income-input').forEach(input => { | |
if (input.value.trim() !== '') { | |
userInputs.currentIncome.push(input.value.trim()); | |
} | |
}); | |
// Collect planned income | |
userInputs.plannedIncome = []; | |
document.querySelectorAll('.planned-input').forEach(input => { | |
if (input.value.trim() !== '') { | |
userInputs.plannedIncome.push(input.value.trim()); | |
} | |
}); | |
// Collect 10-year goals | |
userInputs.tenYearGoals = []; | |
document.querySelectorAll('.goal-10y').forEach(input => { | |
if (input.value.trim() !== '') { | |
userInputs.tenYearGoals.push(input.value.trim()); | |
} | |
}); | |
// Collect 3-year goals | |
userInputs.threeYearGoals = []; | |
document.querySelectorAll('.goal-3y').forEach(input => { | |
if (input.value.trim() !== '') { | |
userInputs.threeYearGoals.push(input.value.trim()); | |
} | |
}); | |
// Validate inputs | |
if (!userInputs.vision || userInputs.values.length === 0) { | |
alert('Please enter your vision and at least one core value to continue'); | |
return; | |
} | |
// Show loading screen | |
const loadingScreen = document.getElementById('loadingScreen'); | |
loadingScreen.classList.remove('hidden'); | |
document.body.style.overflow = 'hidden'; | |
// Animate loading progress | |
const loadingProgress = document.getElementById('loadingProgress'); | |
let progress = 0; | |
const progressInterval = setInterval(() => { | |
progress += Math.random() * 10; | |
if (progress > 90) progress = 90; // Don't go to 100% until API call completes | |
loadingProgress.style.width = `${progress}%`; | |
}, 500); | |
// Show staggered items | |
const staggeredItems = document.querySelectorAll('.staggered-item'); | |
staggeredItems.forEach((item, index) => { | |
setTimeout(() => { | |
item.classList.add('show'); | |
}, index * 300); | |
}); | |
try { | |
// Call DeepSeek API to generate the identity statement | |
const identityPrompt = `Create an "I am" identity statement based on this vision: "${userInputs.vision}" and these values: ${userInputs.values.join(', ')}. The statement should be in first person starting with "I am" and reflect the core identity needed to achieve these goals. Make it inspiring and specific.`; | |
const identityResponse = await callDeepSeekAPI(identityPrompt); | |
// Generate goals | |
const goalsPrompt = `Based on this vision: "${userInputs.vision}", these values: ${userInputs.values.join(', ')}, and these long-term goals (10-year: ${userInputs.tenYearGoals.join('; ')}, 3-year: ${userInputs.threeYearGoals.join('; ')}), create specific, measurable goals for: | |
1. 10-year vision (single most ambitious goal) | |
2. 3-year milestone (key strategic goal) | |
3. 1-year goal (single most important goal) | |
4. 90-day goal (critical milestone) | |
5. 3 monthly goals (as bullet points) | |
Format as JSON with keys: tenYearGoal, threeYearGoal, oneYearGoal, ninetyDayGoal, monthlyGoals (array).`; | |
const goalsResponse = await callDeepSeekAPI(goalsPrompt); | |
const goals = parseJSONResponse(goalsResponse); | |
// Generate habits and systems | |
const habitsPrompt = `Suggest 3 key daily/weekly habits that would help achieve these goals: ${goals.oneYearGoal}, ${goals.ninetyDayGoal}. Format as bullet points.`; | |
const habitsResponse = await callDeepSeekAPI(habitsPrompt); | |
const systemsPrompt = `Suggest 3 systems or processes that would help achieve these goals: ${goals.oneYearGoal}, ${goals.ninetyDayGoal}. Format as bullet points with cog icons.`; | |
const systemsResponse = await callDeepSeekAPI(systemsPrompt); | |
// Generate revenue strategy | |
const revenuePrompt = `Create a revenue growth strategy based on current income streams: ${userInputs.currentIncome.join(', ')}, and planned income streams: ${userInputs.plannedIncome.join(', ')}. Provide a concise paragraph with strategic insights.`; | |
const revenueResponse = await callDeepSeekAPI(revenuePrompt); | |
// Complete loading animation | |
clearInterval(progressInterval); | |
loadingProgress.style.width = '100%'; | |
// Wait a moment for the animation to complete | |
await new Promise(resolve => setTimeout(resolve, 500)); | |
// Hide loading screen | |
loadingScreen.classList.add('hidden'); | |
document.body.style.overflow = ''; | |
// Update results with all generated content | |
document.getElementById('identityOutput').textContent = identityResponse; | |
if (goals.tenYearGoal) { | |
document.getElementById('tenYearGoalDisplay').textContent = goals.tenYearGoal; | |
} | |
if (goals.threeYearGoal) { | |
document.getElementById('threeYearGoalDisplay').textContent = goals.threeYearGoal; | |
} | |
if (goals.oneYearGoal) { | |
document.getElementById('oneYearGoal').textContent = goals.oneYearGoal; | |
} | |
if (goals.ninetyDayGoal) { | |
document.getElementById('ninetyDayGoal').textContent = goals.ninetyDayGoal; | |
} | |
if (goals.monthlyGoals) { | |
const monthlyList = goals.monthlyGoals.map(goal => ` | |
<li class="flex items-start"> | |
<span class="inline-block w-2 h-2 bg-pink-400 rounded-full mt-2 mr-2"></span> | |
<span>${goal}</span> | |
</li> | |
`).join(''); | |
document.getElementById('monthlyGoals').innerHTML = `<ul class="space-y-2">${monthlyList}</ul>`; | |
} | |
document.getElementById('habitsOutput').innerHTML = formatAsChecklist(habitsResponse); | |
document.getElementById('systemsOutput').innerHTML = formatAsSystems(systemsResponse); | |
document.getElementById('revenueStrategy').textContent = revenueResponse; | |
// Update income displays | |
document.getElementById('currentIncomeDisplay').innerHTML = userInputs.currentIncome.map(i => ` | |
<li class="flex items-center"> | |
<span class="w-2 h-2 bg-amber-400 rounded-full mr-2"></span> | |
<span>${i}</span> | |
</li> | |
`).join(''); | |
document.getElementById('plannedIncomeDisplay').innerHTML = userInputs.plannedIncome.map(i => ` | |
<li class="flex items-center"> | |
<span class="w-2 h-2 bg-amber-400 rounded-full mr-2"></span> | |
<span>${i}</span> | |
</li> | |
`).join(''); | |
// Show results section | |
document.getElementById('resultsSection').classList.remove('hidden'); | |
// Animate in staggered items in results | |
setTimeout(() => { | |
const resultStaggeredItems = document.querySelectorAll('#resultsSection .staggered-item'); | |
resultStaggeredItems.forEach((item, index) => { | |
setTimeout(() => { | |
item.classList.add('show'); | |
}, index * 200); | |
}); | |
}, 100); | |
// Scroll to results | |
document.getElementById('resultsSection').scrollIntoView({ behavior: 'smooth' }); | |
} catch (error) { | |
console.error('Error generating plan:', error); | |
alert('There was an error generating your plan. Please try again.'); | |
// Hide loading screen | |
loadingScreen.classList.add('hidden'); | |
document.body.style.overflow = ''; | |
} | |
}); | |
// Export to PDF | |
document.getElementById('exportPdfBtn').addEventListener('click', function() { | |
const doc = new jsPDF(); | |
// Title | |
doc.setFontSize(22); | |
doc.setTextColor(55, 65, 81); // gray-800 | |
doc.text('Vision Quest - Your Goal Roadmap', 105, 20, { align: 'center' }); | |
// Identity Section | |
doc.setFontSize(16); | |
doc.setTextColor(17, 24, 39); // gray-900 | |
doc.text('Identity Statement', 15, 40); | |
doc.setFontSize(12); | |
doc.setTextColor(55, 65, 81); // gray-700 | |
doc.text(document.getElementById('identityOutput').textContent, 15, 50, { maxWidth: 180 }); | |
// Goals | |
doc.setFontSize(16); | |
doc.setTextColor(17, 24, 39); | |
doc.text('Your Goals', 15, 70); | |
doc.setFontSize(12); | |
doc.setTextColor(55, 65, 81); | |
doc.text('10-Year Vision:', 15, 80); | |
doc.text(document.getElementById('tenYearGoalDisplay').textContent, 25, 85, { maxWidth: 170 }); | |
doc.text('3-Year Milestone:', 15, 100); | |
doc.text(document.getElementById('threeYearGoalDisplay').textContent, 25, 105, { maxWidth: 170 }); | |
doc.text('1-Year Goal:', 15, 120); | |
doc.text(document.getElementById('oneYearGoal').textContent, 25, 125, { maxWidth: 170 }); | |
doc.text('90-Day Goal:', 15, 140); | |
doc.text(document.getElementById('ninetyDayGoal').textContent, 25, 145, { maxWidth: 170 }); | |
doc.text('Monthly Goals:', 15, 160); | |
const monthlyGoals = Array.from(document.getElementById('monthlyGoals').querySelectorAll('li')).map(li => li.textContent.trim()); | |
monthlyGoals.forEach((goal, i) => { | |
doc.text(`• ${goal}`, 25, 165 + (i * 5), { maxWidth: 170 }); | |
}); | |
// Income Strategy | |
doc.setFontSize(16); | |
doc.setTextColor(17, 24, 39); | |
doc.text('Income Strategy', 15, 190); | |
doc.setFontSize(12); | |
doc.setTextColor(55, 65, 81); | |
doc.text('Current Income Streams:', 15, 200); | |
userInputs.currentIncome.forEach((income, i) => { | |
doc.text(`• ${income}`, 20, 205 + (i * 5), { maxWidth: 170 }); | |
}); | |
doc.text('Planned Income Streams:', 15, 220); | |
userInputs.plannedIncome.forEach((income, i) => { | |
doc.text(`• ${income}`, 20, 225 + (i * 5), { maxWidth: 170 }); | |
}); | |
doc.text('Revenue Growth Strategy:', 15, 240); | |
doc.text(document.getElementById('revenueStrategy').textContent, 20, 245, { maxWidth: 170 }); | |
// Habits & Systems | |
doc.setFontSize(16); | |
doc.setTextColor(17, 24, 39); | |
doc.text('Habits & Systems', 15, 270); | |
doc.setFontSize(12); | |
doc.setTextColor(55, 65, 81); | |
doc.text('Key Habits:', 15, 280); | |
const habits = Array.from(document.getElementById('habitsOutput').querySelectorAll('div')).map(div => div.textContent.trim()); | |
habits.forEach((habit, i) => { | |
doc.text(`• ${habit}`, 20, 285 + (i * 5), { maxWidth: 170 }); | |
}); | |
doc.text('Value Creation Systems:', 15, 300); | |
const systems = Array.from(document.getElementById('systemsOutput').querySelectorAll('div')).map(div => div.textContent.trim()); | |
systems.forEach((system, i) => { | |
doc.text(`• ${system}`, 20, 305 + (i * 5), { maxWidth: 170 }); | |
}); | |
// Save the PDF | |
doc.save('VisionQuest-Plan.pdf'); | |
}); | |
// Export to CSV | |
document.getElementById('exportCsvBtn').addEventListener('click', function() { | |
// Prepare CSV content | |
let csvContent = "Category,Item\n"; | |
// Add identity | |
csvContent += `Identity,"${document.getElementById('identityOutput').textContent}"\n`; | |
// Add goals | |
csvContent += `10-Year Vision,"${document.getElementById('tenYearGoalDisplay').textContent}"\n`; | |
csvContent += `3-Year Milestone,"${document.getElementById('threeYearGoalDisplay').textContent}"\n`; | |
csvContent += `1-Year Goal,"${document.getElementById('oneYearGoal').textContent}"\n`; | |
csvContent += `90-Day Goal,"${document.getElementById('ninetyDayGoal').textContent}"\n`; | |
const monthlyGoals = Array.from(document.getElementById('monthlyGoals').querySelectorAll('li')).map(li => li.textContent.trim()); | |
monthlyGoals.forEach(goal => { | |
csvContent += `Monthly Goal,"${goal}"\n`; | |
}); | |
// Add income | |
userInputs.currentIncome.forEach(income => { | |
csvContent += `Current Income,"${income}"\n`; | |
}); | |
userInputs.plannedIncome.forEach(income => { | |
csvContent += `Planned Income,"${income}"\n`; | |
}); | |
csvContent += `Revenue Strategy,"${document.getElementById('revenueStrategy').textContent}"\n`; | |
// Add habits | |
const habits = Array.from(document.getElementById('habitsOutput').querySelectorAll('div')).map(div => div.textContent.trim()); | |
habits.forEach(habit => { | |
csvContent += `Key Habit,"${habit}"\n`; | |
}); | |
// Add systems | |
const systems = Array.from(document.getElementById('systemsOutput').querySelectorAll('div')).map(div => div.textContent.trim()); | |
systems.forEach(system => { | |
csvContent += `Value System,"${system}"\n`; | |
}); | |
// Create download link | |
const encodedUri = encodeURI("data:text/csv;charset=utf-8," + csvContent); | |
const link = document.createElement("a"); | |
link.setAttribute("href", encodedUri); | |
link.setAttribute("download", "VisionQuest-Plan.csv"); | |
document.body.appendChild(link); | |
link.click(); | |
document.body.removeChild(link); | |
}); | |
// Helper function to call DeepSeek API | |
async function callDeepSeekAPI(prompt) { | |
const response = await fetch('https://api.deepseek.com/v1/chat/completions', { | |
method: 'POST', | |
headers: { | |
'Content-Type': 'application/json', | |
'Authorization': `Bearer ${DEEPSEEK_API_KEY}` | |
}, | |
body: JSON.stringify({ | |
model: "deepseek-chat", | |
messages: [ | |
{ | |
role: "system", | |
content: "You are a helpful goal-setting assistant that helps people create clear, actionable plans to achieve their vision. Provide concise, practical advice." | |
}, | |
{ | |
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(); | |
return data.choices[0].message.content.trim(); | |
} | |
// Helper function to parse JSON responses from AI | |
function parseJSONResponse(response) { | |
try { | |
// Try to find JSON in the response | |
const jsonStart = response.indexOf('{'); | |
const jsonEnd = response.lastIndexOf('}') + 1; | |
const jsonString = response.slice(jsonStart, jsonEnd); | |
return JSON.parse(jsonString); | |
} catch (e) { | |
console.error('Error parsing JSON response:', e); | |
// Fallback to manual parsing if JSON is malformed | |
const result = {}; | |
// Extract 10-year goal | |
const tenYearMatch = response.match(/10-year vision[:\-]?\s*(.+)/i); | |
if (tenYearMatch) result.tenYearGoal = tenYearMatch[1].trim(); | |
// Extract 3-year goal | |
const threeYearMatch = response.match(/3-year milestone[:\-]?\s*(.+)/i); | |
if (threeYearMatch) result.threeYearGoal = threeYearMatch[1].trim(); | |
// Extract 1-year goal | |
const oneYearMatch = response.match(/1-year goal[:\-]?\s*(.+)/i); | |
if (oneYearMatch) result.oneYearGoal = oneYearMatch[1].trim(); | |
// Extract 90-day goal | |
const ninetyDayMatch = response.match(/90-day goal[:\-]?\s*(.+)/i); | |
if (ninetyDayMatch) result.ninetyDayGoal = ninetyDayMatch[1].trim(); | |
// Extract monthly goals | |
const monthlyMatches = response.match(/monthly goals?[:\-]?\s*([\s\S]+?)(?=\n\n|\n$|$)/i); | |
if (monthlyMatches) { | |
const monthlyLines = monthlyMatches[1].split('\n').filter(line => line.trim() !== ''); | |
result.monthlyGoals = monthlyLines.map(line => line.replace(/^\s*[\-•]\s*/, '').trim()); | |
} | |
return result; | |
} | |
} | |
// Format AI response as checklist | |
function formatAsChecklist(text) { | |
const lines = text.split('\n').filter(line => line.trim() !== ''); | |
return lines.map(line => { | |
const content = line.replace(/^\s*[\-•]\s*/, '').trim(); | |
return ` | |
<div class="flex items-start"> | |
<div class="flex-shrink-0 h-6 w-6 rounded-full bg-pink-500 bg-opacity-20 text-pink-300 flex items-center justify-center mr-3 mt-1"> | |
<i class="fas fa-check text-xs"></i> | |
</div> | |
<div class="text-gray-200">${content}</div> | |
</div> | |
`; | |
}).join(''); | |
} | |
// Format AI response as systems with cog icons | |
function formatAsSystems(text) { | |
const lines = text.split('\n').filter(line => line.trim() !== ''); | |
return lines.map(line => { | |
const content = line.replace(/^\s*[\-•]\s*/, '').trim(); | |
return ` | |
<div class="flex items-start"> | |
<div class="flex-shrink-0 h-6 w-6 rounded-full bg-amber-500 bg-opacity-20 text-amber-300 flex items-center justify-center mr-3 mt-1"> | |
<i class="fas fa-cog text-xs"></i> | |
</div> | |
<div class="text-gray-200">${content}</div> | |
</div> | |
`; | |
}).join(''); | |
} | |
}); | |
</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-values-v2" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
</html> |