|
|
<!DOCTYPE html> |
|
|
<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 gradientFlow { |
|
|
0% { background-position: 0% 50%; } |
|
|
50% { background-position: 100% 50%; } |
|
|
100% { background-position: 0% 50%; } |
|
|
} |
|
|
.gradient-flow { |
|
|
background-size: 200% 200%; |
|
|
animation: gradientFlow 8s ease infinite; |
|
|
} |
|
|
@keyframes shimmer { |
|
|
0% { background-position: -1000px 0; } |
|
|
100% { background-position: 1000px 0; } |
|
|
} |
|
|
.shimmer { |
|
|
background: linear-gradient(to right, #f0f0f0 8%, #e0e0e0 18%, #f0f0f0 33%); |
|
|
background-size: 1000px 100%; |
|
|
animation: shimmer 2s infinite linear; |
|
|
} |
|
|
.goal-card { |
|
|
transition: all 0.3s ease; |
|
|
transform-style: preserve-3d; |
|
|
} |
|
|
.goal-card:hover { |
|
|
transform: perspective(1000px) rotateY(10deg) scale(1.02); |
|
|
} |
|
|
.goal-timeline { |
|
|
position: relative; |
|
|
} |
|
|
.goal-timeline::before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 24px; |
|
|
height: 100%; |
|
|
width: 2px; |
|
|
background: linear-gradient(to bottom, #8b5cf6, #3b82f6, #10b981); |
|
|
} |
|
|
.goal-timeline-item { |
|
|
position: relative; |
|
|
padding-left: 56px; |
|
|
margin-bottom: 30px; |
|
|
} |
|
|
.goal-timeline-item::before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
left: 20px; |
|
|
top: 0; |
|
|
width: 12px; |
|
|
height: 12px; |
|
|
border-radius: 50%; |
|
|
background: #8b5cf6; |
|
|
z-index: 1; |
|
|
} |
|
|
.goal-timeline-item:nth-child(2)::before { |
|
|
background: #3b82f6; |
|
|
} |
|
|
.goal-timeline-item:nth-child(3)::before { |
|
|
background: #10b981; |
|
|
} |
|
|
</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 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> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-2xl shadow-xl overflow-hidden"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<div class="p-6 md:p-8"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-8"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<div id="loadingScreen" class="hidden fixed inset-0 bg-black bg-opacity-70 z-50 flex flex-col items-center justify-center p-4"> |
|
|
<div class="w-full max-w-2xl bg-white rounded-2xl shadow-2xl overflow-hidden"> |
|
|
<div class="gradient-flow bg-gradient-to-r from-purple-500 via-indigo-500 to-blue-500 p-6 text-center"> |
|
|
<h2 class="text-3xl font-bold text-white mb-2">Crafting Your Vision</h2> |
|
|
<p class="text-white opacity-90">Your personalized roadmap is being generated with AI</p> |
|
|
</div> |
|
|
|
|
|
<div class="p-8"> |
|
|
<div class="flex justify-center mb-8"> |
|
|
<div class="relative w-32 h-32"> |
|
|
<svg class="w-full h-full" viewBox="0 0 100 100"> |
|
|
<circle class="text-gray-200" stroke-width="8" stroke="currentColor" fill="transparent" r="40" cx="50" cy="50" /> |
|
|
<circle class="text-indigo-600 progress-ring__circle" stroke-width="8" stroke-linecap="round" stroke="currentColor" fill="transparent" r="40" cx="50" cy="50" /> |
|
|
</svg> |
|
|
<div class="absolute inset-0 flex items-center justify-center"> |
|
|
<span id="progressPercent" class="text-2xl font-bold text-indigo-600">0%</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="space-y-6"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0 h-10 w-10 rounded-full bg-indigo-100 text-indigo-600 flex items-center justify-center mr-4"> |
|
|
<i class="fas fa-lightbulb"></i> |
|
|
</div> |
|
|
<div class="flex-1"> |
|
|
<div class="flex justify-between mb-1"> |
|
|
<span class="text-sm font-medium text-gray-700">Analyzing your vision</span> |
|
|
<span id="visionProgress" class="text-sm font-medium text-indigo-600">0%</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2"> |
|
|
<div id="visionProgressBar" class="bg-indigo-600 h-2 rounded-full" style="width: 0%"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center mr-4"> |
|
|
<i class="fas fa-bullseye"></i> |
|
|
</div> |
|
|
<div class="flex-1"> |
|
|
<div class="flex justify-between mb-1"> |
|
|
<span class="text-sm font-medium text-gray-700">Generating goals</span> |
|
|
<span id="goalsProgress" class="text-sm font-medium text-blue-600">0%</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2"> |
|
|
<div id="goalsProgressBar" class="bg-blue-600 h-2 rounded-full" style="width: 0%"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0 h-10 w-10 rounded-full bg-green-100 text-green-600 flex items-center justify-center mr-4"> |
|
|
<i class="fas fa-tasks"></i> |
|
|
</div> |
|
|
<div class="flex-1"> |
|
|
<div class="flex justify-between mb-1"> |
|
|
<span class="text-sm font-medium text-gray-700">Creating action plan</span> |
|
|
<span id="actionProgress" class="text-sm font-medium text-green-600">0%</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2"> |
|
|
<div id="actionProgressBar" class="bg-green-600 h-2 rounded-full" style="width: 0%"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-8 text-center"> |
|
|
<p id="loadingMessage" class="text-gray-600 italic">"Great things are done by a series of small things brought together." - Vincent Van Gogh</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="resultsSection" class="hidden mt-12 bg-white rounded-2xl shadow-xl overflow-hidden fade-in"> |
|
|
<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"> |
|
|
<div class="w-8 h-8 rounded-full bg-white text-indigo-600 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> |
|
|
|
|
|
<div class="p-6 md:p-8"> |
|
|
<h2 class="text-3xl font-bold text-gray-800 mb-6 text-center">Your Custom Goal Roadmap</h2> |
|
|
|
|
|
|
|
|
<div class="mb-10 bg-gradient-to-br from-yellow-50 to-orange-50 p-6 rounded-xl"> |
|
|
<h3 class="text-xl font-bold text-gray-800 mb-4 flex items-center"> |
|
|
<i class="fas fa-user-shield mr-3 text-yellow-500"></i> Identity Statement |
|
|
</h3> |
|
|
<div id="identityOutput" class="text-lg text-gray-700 italic">"I am a Visionary Executor who consistently takes aligned action toward meaningful goals."</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mb-10"> |
|
|
<h3 class="text-2xl font-bold text-gray-800 mb-6 text-center">Your Goal Timeline</h3> |
|
|
|
|
|
<div class="goal-timeline"> |
|
|
|
|
|
<div class="goal-timeline-item"> |
|
|
<div class="goal-card bg-gradient-to-br from-purple-50 to-indigo-50 p-6 rounded-xl shadow-md"> |
|
|
<div class="flex justify-between items-start mb-3"> |
|
|
<div> |
|
|
<div class="text-xs font-semibold text-purple-600 mb-1">YEARLY MILESTONE</div> |
|
|
<h4 class="text-xl font-bold text-gray-800">1-Year Goal</h4> |
|
|
</div> |
|
|
<div class="flex items-center justify-center w-12 h-12 rounded-full bg-purple-100 text-purple-600"> |
|
|
<i class="fas fa-calendar-star text-xl"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div id="oneYearGoal" class="text-gray-700 mb-4 text-lg">Launch MVP of the product and acquire first 100 paying customers.</div> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2"> |
|
|
<div class="bg-purple-600 h-2 rounded-full" style="width: 15%"></div> |
|
|
</div> |
|
|
<span class="ml-3 text-sm font-medium text-purple-600">15%</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="goal-timeline-item"> |
|
|
<div class="goal-card bg-gradient-to-br from-blue-50 to-cyan-50 p-6 rounded-xl shadow-md"> |
|
|
<div class="flex justify-between items-start mb-3"> |
|
|
<div> |
|
|
<div class="text-xs font-semibold text-blue-600 mb-1">QUARTERLY TARGET</div> |
|
|
<h4 class="text-xl font-bold text-gray-800">90-Day Goal</h4> |
|
|
</div> |
|
|
<div class="flex items-center justify-center w-12 h-12 rounded-full bg-blue-100 text-blue-600"> |
|
|
<i class="fas fa-calendar-check text-xl"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div id="ninetyDayGoal" class="text-gray-700 mb-4 text-lg">Complete product prototype and run first beta test with 20 users.</div> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2"> |
|
|
<div class="bg-blue-600 h-2 rounded-full" style="width: 5%"></div> |
|
|
</div> |
|
|
<span class="ml-3 text-sm font-medium text-blue-600">5%</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="goal-timeline-item"> |
|
|
<div class="goal-card bg-gradient-to-br from-green-50 to-teal-50 p-6 rounded-xl shadow-md"> |
|
|
<div class="flex justify-between items-start mb-3"> |
|
|
<div> |
|
|
<div class="text-xs font-semibold text-green-600 mb-1">MONTHLY ACTIONS</div> |
|
|
<h4 class="text-xl font-bold text-gray-800">Monthly Goals</h4> |
|
|
</div> |
|
|
<div class="flex items-center justify-center w-12 h-12 rounded-full bg-green-100 text-green-600"> |
|
|
<i class="fas fa-calendar-alt text-xl"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div id="monthlyGoals" class="text-gray-700 mb-4"> |
|
|
<ul class="space-y-3"> |
|
|
<li class="flex items-start"> |
|
|
<div class="flex-shrink-0 h-6 w-6 rounded-full bg-green-100 text-green-600 flex items-center justify-center mr-3 mt-1"> |
|
|
<span class="text-xs font-bold">1</span> |
|
|
</div> |
|
|
<div class="text-lg">Month 1: Finalize product specifications</div> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<div class="flex-shrink-0 h-6 w-6 rounded-full bg-green-100 text-green-600 flex items-center justify-center mr-3 mt-1"> |
|
|
<span class="text-xs font-bold">2</span> |
|
|
</div> |
|
|
<div class="text-lg">Month 2: Develop core features</div> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<div class="flex-shrink-0 h-6 w-6 rounded-full bg-green-100 text-green-600 flex items-center justify-center mr-3 mt-1"> |
|
|
<span class="text-xs font-bold">3</span> |
|
|
</div> |
|
|
<div class="text-lg">Month 3: Conduct initial user testing</div> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2"> |
|
|
<div class="bg-green-600 h-2 rounded-full" style="width: 2%"></div> |
|
|
</div> |
|
|
<span class="ml-3 text-sm font-medium text-green-600">2%</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mb-10 bg-gradient-to-br from-amber-50 to-orange-50 p-6 rounded-xl"> |
|
|
<h3 class="text-xl font-bold text-gray-800 mb-4 flex items-center"> |
|
|
<i class="fas fa-money-bill-trend-up mr-3 text-amber-500"></i> Income Strategy |
|
|
</h3> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
|
|
<div> |
|
|
<h4 class="font-semibold text-gray-700 mb-2">Current Income Streams</h4> |
|
|
<ul id="currentIncomeDisplay" class="space-y-2"> |
|
|
<li class="flex items-center"> |
|
|
<div class="flex-shrink-0 h-5 w-5 rounded-full bg-amber-100 text-amber-600 flex items-center justify-center mr-3"> |
|
|
<i class="fas fa-circle text-xs"></i> |
|
|
</div> |
|
|
<div class="text-gray-700">Freelance design work</div> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<div class="flex-shrink-0 h-5 w-5 rounded-full bg-amber-100 text-amber-600 flex items-center justify-center mr-3"> |
|
|
<i class="fas fa-circle text-xs"></i> |
|
|
</div> |
|
|
<div class="text-gray-700">Online course sales</div> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-semibold text-gray-700 mb-2">Planned Income Streams</h4> |
|
|
<ul id="plannedIncomeDisplay" class="space-y-2"> |
|
|
<li class="flex items-center"> |
|
|
<div class="flex-shrink-0 h-5 w-5 rounded-full bg-amber-100 text-amber-600 flex items-center justify-center mr-3"> |
|
|
<i class="fas fa-bolt text-xs"></i> |
|
|
</div> |
|
|
<div class="text-gray-700">SaaS product subscriptions</div> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<div class="flex-shrink-0 h-5 w-5 rounded-full bg-amber-100 text-amber-600 flex items-center justify-center mr-3"> |
|
|
<i class="fas fa-bolt text-xs"></i> |
|
|
</div> |
|
|
<div class="text-gray-700">Consulting services</div> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-4"> |
|
|
<h4 class="font-semibold text-gray-700 mb-2">Revenue Growth Strategy</h4> |
|
|
<div id="revenueStrategy" class="text-gray-700 bg-white p-4 rounded-lg border border-amber-100"> |
|
|
Focus on productizing services and building scalable income streams through digital products and automation. Prioritize recurring revenue models while maintaining service-based income during transition. |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-10"> |
|
|
|
|
|
<div class="bg-gradient-to-br from-pink-50 to-rose-50 p-6 rounded-xl"> |
|
|
<h3 class="text-xl font-bold text-gray-800 mb-4 flex items-center"> |
|
|
<i class="fas fa-sync-alt mr-3 text-pink-500"></i> Key Habits |
|
|
</h3> |
|
|
<div id="habitsOutput" class="space-y-4"> |
|
|
<div class="flex items-start bg-white p-4 rounded-lg shadow-sm"> |
|
|
<div class="flex-shrink-0 h-8 w-8 rounded-full bg-pink-100 text-pink-600 flex items-center justify-center mr-4"> |
|
|
<i class="fas fa-sun"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-medium text-gray-800">Morning Deep Work</h4> |
|
|
<p class="text-gray-600 text-sm">Daily 90-minute focused session on product development</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start bg-white p-4 rounded-lg shadow-sm"> |
|
|
<div class="flex-shrink-0 h-8 w-8 rounded-full bg-pink-100 text-pink-600 flex items-center justify-center mr-4"> |
|
|
<i class="fas fa-users"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-medium text-gray-800">Customer Development</h4> |
|
|
<p class="text-gray-600 text-sm">Weekly interviews with potential customers</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start bg-white p-4 rounded-lg shadow-sm"> |
|
|
<div class="flex-shrink-0 h-8 w-8 rounded-full bg-pink-100 text-pink-600 flex items-center justify-center mr-4"> |
|
|
<i class="fas fa-brain"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-medium text-gray-800">Mindful Planning</h4> |
|
|
<p class="text-gray-600 text-sm">Morning routine with meditation and daily planning</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gradient-to-br from-amber-50 to-orange-50 p-6 rounded-xl"> |
|
|
<h3 class="text-xl font-bold text-gray-800 mb-4 flex items-center"> |
|
|
<i class="fas fa-cogs mr-3 text-amber-500"></i> Value Creation Systems |
|
|
</h3> |
|
|
<div id="systemsOutput" class="space-y-4"> |
|
|
<div class="flex items-start bg-white p-4 rounded-lg shadow-sm"> |
|
|
<div class="flex-shrink-0 h-8 w-8 rounded-full bg-amber-100 text-amber-600 flex items-center justify-center mr-4"> |
|
|
<i class="fas fa-rocket"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-medium text-gray-800">Development Sprints</h4> |
|
|
<p class="text-gray-600 text-sm">2-week product development cycles with clear deliverables</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start bg-white p-4 rounded-lg shadow-sm"> |
|
|
<div class="flex-shrink-0 h-8 w-8 rounded-full bg-amber-100 text-amber-600 flex items-center justify-center mr-4"> |
|
|
<i class="fas fa-comments"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-medium text-gray-800">Feedback Loop</h4> |
|
|
<p class="text-gray-600 text-sm">Structured process for collecting and analyzing user feedback</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start bg-white p-4 rounded-lg shadow-sm"> |
|
|
<div class="flex-shrink-0 h-8 w-8 rounded-full bg-amber-100 text-amber-600 flex items-center justify-center mr-4"> |
|
|
<i class="fas fa-battery-three-quarters"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-medium text-gray-800">Energy Management</h4> |
|
|
<p class="text-gray-600 text-sm">Tracking system for personal productivity and energy levels</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gradient-to-br from-indigo-50 to-purple-50 p-6 rounded-xl"> |
|
|
<h3 class="text-xl font-bold text-gray-800 mb-4 flex items-center"> |
|
|
<i class="fas fa-trophy mr-3 text-indigo-500"></i> Your Quest Progress |
|
|
</h3> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="w-full bg-gray-200 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 text-gray-700 font-medium">15%</span> |
|
|
</div> |
|
|
<div class="grid grid-cols-3 gap-4 text-center"> |
|
|
<div> |
|
|
<div class="bg-white p-3 rounded-lg shadow"> |
|
|
<div class="text-2xl font-bold text-indigo-600">3</div> |
|
|
<div class="text-sm text-gray-500">Goals Set</div> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<div class="bg-white p-3 rounded-lg shadow"> |
|
|
<div class="text-2xl font-bold text-indigo-600">0</div> |
|
|
<div class="text-sm text-gray-500">Goals Completed</div> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<div class="bg-white p-3 rounded-lg shadow"> |
|
|
<div class="text-2xl font-bold text-indigo-600">1</div> |
|
|
<div class="text-sm text-gray-500">Badges Earned</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-6"> |
|
|
<h4 class="font-semibold text-gray-700 mb-2">Next Badge: <span class="text-indigo-600">Vision Setter</span></h4> |
|
|
<p class="text-sm text-gray-600">Complete your first 90-day goal to unlock this badge!</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mt-10 flex flex-col md:flex-row justify-center space-y-4 md:space-y-0 md:space-x-6"> |
|
|
<button id="exportPdfBtn" class="bg-indigo-600 text-white px-6 py-3 rounded-lg font-medium hover:bg-indigo-700 transition flex items-center justify-center"> |
|
|
<i class="fas fa-download mr-2"></i> Export PDF |
|
|
</button> |
|
|
<button id="exportCsvBtn" class="bg-white border border-indigo-600 text-indigo-600 px-6 py-3 rounded-lg font-medium hover:bg-indigo-50 transition flex items-center justify-center"> |
|
|
<i class="fas fa-file-csv mr-2"></i> Export CSV |
|
|
</button> |
|
|
<button id="regenerateBtn" class="bg-white border border-gray-300 text-gray-700 px-6 py-3 rounded-lg font-medium hover:bg-gray-50 transition flex items-center justify-center"> |
|
|
<i class="fas fa-redo mr-2"></i> Regenerate |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
const { jsPDF } = window.jspdf; |
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
|
|
|
const DEEPSEEK_API_KEY = 'sk-0cce68e321854d11b01ee9227147a12d'; |
|
|
|
|
|
|
|
|
let userInputs = { |
|
|
vision: '', |
|
|
values: [], |
|
|
currentIncome: [], |
|
|
plannedIncome: [], |
|
|
tenYearGoals: [], |
|
|
threeYearGoals: [] |
|
|
}; |
|
|
|
|
|
|
|
|
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); |
|
|
|
|
|
|
|
|
newValueField.querySelector('.remove-value').addEventListener('click', function() { |
|
|
newValueField.remove(); |
|
|
valueCount--; |
|
|
}); |
|
|
} else { |
|
|
alert('Maximum of 5 values allowed'); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
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++; |
|
|
|
|
|
|
|
|
newIncomeField.querySelector('.remove-income').addEventListener('click', function() { |
|
|
newIncomeField.remove(); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
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++; |
|
|
|
|
|
|
|
|
newPlannedField.querySelector('.remove-planned').addEventListener('click', function() { |
|
|
newPlannedField.remove(); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
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); |
|
|
|
|
|
|
|
|
newGoalField.querySelector('.remove-10y').addEventListener('click', function() { |
|
|
newGoalField.remove(); |
|
|
tenYearGoalCount--; |
|
|
}); |
|
|
} else { |
|
|
alert('Maximum of 3 10-year goals allowed'); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
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); |
|
|
|
|
|
|
|
|
newGoalField.querySelector('.remove-3y').addEventListener('click', function() { |
|
|
newGoalField.remove(); |
|
|
threeYearGoalCount--; |
|
|
}); |
|
|
} else { |
|
|
alert('Maximum of 5 3-year goals allowed'); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('generateBtn').addEventListener('click', async function() { |
|
|
|
|
|
userInputs.vision = document.getElementById('visionInput').value; |
|
|
|
|
|
|
|
|
userInputs.values = []; |
|
|
document.querySelectorAll('.value-input').forEach(input => { |
|
|
if (input.value.trim() !== '') { |
|
|
userInputs.values.push(input.value.trim()); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
userInputs.currentIncome = []; |
|
|
document.querySelectorAll('.income-input').forEach(input => { |
|
|
if (input.value.trim() !== '') { |
|
|
userInputs.currentIncome.push(input.value.trim()); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
userInputs.plannedIncome = []; |
|
|
document.querySelectorAll('.planned-input').forEach(input => { |
|
|
if (input.value.trim() !== '') { |
|
|
userInputs.plannedIncome.push(input.value.trim()); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
userInputs.tenYearGoals = []; |
|
|
document.querySelectorAll('.goal-10y').forEach(input => { |
|
|
if (input.value.trim() !== '') { |
|
|
userInputs.tenYearGoals.push(input.value.trim()); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
userInputs.threeYearGoals = []; |
|
|
document.querySelectorAll('.goal-3y').forEach(input => { |
|
|
if (input.value.trim() !== '') { |
|
|
userInputs.threeYearGoals.push(input.value.trim()); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
if (!userInputs.vision || userInputs.values.length === 0) { |
|
|
alert('Please enter your vision and at least one core value to continue'); |
|
|
return; |
|
|
} |
|
|
|
|
|
|
|
|
const loadingScreen = document.getElementById('loadingScreen'); |
|
|
loadingScreen.classList.remove('hidden'); |
|
|
|
|
|
|
|
|
simulateProgress(); |
|
|
|
|
|
try { |
|
|
|
|
|
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.`; |
|
|
const identityResponse = await callDeepSeekAPI(identityPrompt); |
|
|
|
|
|
|
|
|
document.getElementById('identityOutput').textContent = identityResponse; |
|
|
|
|
|
|
|
|
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. 1-year goal (single most important goal) |
|
|
2. 90-day goal (critical milestone) |
|
|
3. 3 monthly goals (as bullet points) |
|
|
Format as JSON with keys: oneYearGoal, ninetyDayGoal, monthlyGoals (array).`; |
|
|
const goalsResponse = await callDeepSeekAPI(goalsPrompt); |
|
|
const goals = parseJSONResponse(goalsResponse); |
|
|
|
|
|
|
|
|
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, i) => ` |
|
|
<li class="flex items-start"> |
|
|
<div class="flex-shrink-0 h-6 w-6 rounded-full bg-green-100 text-green-600 flex items-center justify-center mr-3 mt-1"> |
|
|
<span class="text-xs font-bold">${i+1}</span> |
|
|
</div> |
|
|
<div class="text-lg">${goal}</div> |
|
|
</li> |
|
|
`).join(''); |
|
|
document.getElementById('monthlyGoals').innerHTML = `<ul class="space-y-3">${monthlyList}</ul>`; |
|
|
} |
|
|
|
|
|
|
|
|
const habitsPrompt = `Suggest 3 key daily/weekly habits that would help achieve these goals: ${goals.oneYearGoal}, ${goals.ninetyDayGoal}. For each habit, provide a title and short description. Format as JSON with array of objects with keys: title, description.`; |
|
|
const habitsResponse = await callDeepSeekAPI(habitsPrompt); |
|
|
const habits = parseJSONResponse(habitsResponse); |
|
|
|
|
|
if (habits && Array.isArray(habits)) { |
|
|
const habitsHTML = habits.map(habit => ` |
|
|
<div class="flex items-start bg-white p-4 rounded-lg shadow-sm"> |
|
|
<div class="flex-shrink-0 h-8 w-8 rounded-full bg-pink-100 text-pink-600 flex items-center justify-center mr-4"> |
|
|
<i class="fas fa-${getRandomHabitIcon()}"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-medium text-gray-800">${habit.title}</h4> |
|
|
<p class="text-gray-600 text-sm">${habit.description}</p> |
|
|
</div> |
|
|
</div> |
|
|
`).join(''); |
|
|
document.getElementById('habitsOutput').innerHTML = habitsHTML; |
|
|
} |
|
|
|
|
|
|
|
|
const systemsPrompt = `Suggest 3 systems or processes that would help achieve these goals: ${goals.oneYearGoal}, ${goals.ninetyDayGoal}. For each system, provide a title and short description. Format as JSON with array of objects with keys: title, description.`; |
|
|
const systemsResponse = await callDeepSeekAPI(systemsPrompt); |
|
|
const systems = parseJSONResponse(systemsResponse); |
|
|
|
|
|
if (systems && Array.isArray(systems)) { |
|
|
const systemsHTML = systems.map(system => ` |
|
|
<div class="flex items-start bg-white p-4 rounded-lg shadow-sm"> |
|
|
<div class="flex-shrink-0 h-8 w-8 rounded-full bg-amber-100 text-amber-600 flex items-center justify-center mr-4"> |
|
|
<i class="fas fa-${getRandomSystemIcon()}"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-medium text-gray-800">${system.title}</h4> |
|
|
<p class="text-gray-600 text-sm">${system.description}</p> |
|
|
</div> |
|
|
</div> |
|
|
`).join(''); |
|
|
document.getElementById('systemsOutput').innerHTML = systemsHTML; |
|
|
} |
|
|
|
|
|
|
|
|
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.`; |
|
|
const revenueResponse = await callDeepSeekAPI(revenuePrompt); |
|
|
document.getElementById('revenueStrategy').textContent = revenueResponse; |
|
|
|
|
|
|
|
|
document.getElementById('currentIncomeDisplay').innerHTML = userInputs.currentIncome.map(i => ` |
|
|
<li class="flex items-center"> |
|
|
<div class="flex-shrink-0 h-5 w-5 rounded-full bg-amber-100 text-amber-600 flex items-center justify-center mr-3"> |
|
|
<i class="fas fa-circle text-xs"></i> |
|
|
</div> |
|
|
<div class="text-gray-700">${i}</div> |
|
|
</li> |
|
|
`).join(''); |
|
|
|
|
|
document.getElementById('plannedIncomeDisplay').innerHTML = userInputs.plannedIncome.map(i => ` |
|
|
<li class="flex items-center"> |
|
|
<div class="flex-shrink-0 h-5 w-5 rounded-full bg-amber-100 text-amber-600 flex items-center justify-center mr-3"> |
|
|
<i class="fas fa-bolt text-xs"></i> |
|
|
</div> |
|
|
<div class="text-gray-700">${i}</div> |
|
|
</li> |
|
|
`).join(''); |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
loadingScreen.classList.add('hidden'); |
|
|
document.getElementById('resultsSection').classList.remove('hidden'); |
|
|
|
|
|
|
|
|
document.getElementById('resultsSection').scrollIntoView({ behavior: 'smooth' }); |
|
|
}, 500); |
|
|
|
|
|
} catch (error) { |
|
|
console.error('Error generating plan:', error); |
|
|
loadingScreen.classList.add('hidden'); |
|
|
alert('There was an error generating your plan. Please try again.'); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('regenerateBtn').addEventListener('click', function() { |
|
|
document.getElementById('resultsSection').classList.add('hidden'); |
|
|
document.getElementById('generateBtn').click(); |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('exportPdfBtn').addEventListener('click', function() { |
|
|
const doc = new jsPDF(); |
|
|
|
|
|
|
|
|
doc.setFontSize(22); |
|
|
doc.setTextColor(55, 65, 81); |
|
|
doc.text('Vision Quest - Your Goal Roadmap', 105, 20, { align: 'center' }); |
|
|
|
|
|
|
|
|
doc.setFontSize(16); |
|
|
doc.setTextColor(17, 24, 39); |
|
|
doc.text('Identity Statement', 15, 40); |
|
|
doc.setFontSize(12); |
|
|
doc.setTextColor(55, 65, 81); |
|
|
doc.text(document.getElementById('identityOutput').textContent, 15, 50, { maxWidth: 180 }); |
|
|
|
|
|
|
|
|
doc.setFontSize(16); |
|
|
doc.setTextColor(17, 24, 39); |
|
|
doc.text('Your Goals', 15, 70); |
|
|
|
|
|
doc.setFontSize(12); |
|
|
doc.setTextColor(55, 65, 81); |
|
|
doc.text('1-Year Goal:', 15, 80); |
|
|
doc.text(document.getElementById('oneYearGoal').textContent, 25, 85, { maxWidth: 170 }); |
|
|
|
|
|
doc.text('90-Day Goal:', 15, 100); |
|
|
doc.text(document.getElementById('ninetyDayGoal').textContent, 25, 105, { maxWidth: 170 }); |
|
|
|
|
|
doc.text('Monthly Goals:', 15, 120); |
|
|
const monthlyGoals = Array.from(document.getElementById('monthlyGoals').querySelectorAll('li')).map(li => li.textContent.trim()); |
|
|
monthlyGoals.forEach((goal, i) => { |
|
|
doc.text(goal, 25, 125 + (i * 5), { maxWidth: 170 }); |
|
|
}); |
|
|
|
|
|
|
|
|
doc.setFontSize(16); |
|
|
doc.setTextColor(17, 24, 39); |
|
|
doc.text('Income Strategy', 15, 150); |
|
|
|
|
|
doc.setFontSize(12); |
|
|
doc.setTextColor(55, 65, 81); |
|
|
doc.text('Current Income Streams:', 15, 160); |
|
|
userInputs.currentIncome.forEach((income, i) => { |
|
|
doc.text(`• ${income}`, 20, 165 + (i * 5), { maxWidth: 170 }); |
|
|
}); |
|
|
|
|
|
doc.text('Planned Income Streams:', 15, 180); |
|
|
userInputs.plannedIncome.forEach((income, i) => { |
|
|
doc.text(`• ${income}`, 20, 185 + (i * 5), { maxWidth: 170 }); |
|
|
}); |
|
|
|
|
|
doc.text('Revenue Growth Strategy:', 15, 200); |
|
|
doc.text(document.getElementById('revenueStrategy').textContent, 20, 205, { maxWidth: 170 }); |
|
|
|
|
|
|
|
|
doc.setFontSize(16); |
|
|
doc.setTextColor(17, 24, 39); |
|
|
doc.text('Habits & Systems', 15, 230); |
|
|
|
|
|
doc.setFontSize(12); |
|
|
doc.setTextColor(55, 65, 81); |
|
|
doc.text('Key Habits:', 15, 240); |
|
|
const habits = Array.from(document.getElementById('habitsOutput').querySelectorAll('div')).map(div => { |
|
|
const title = div.querySelector('h4').textContent; |
|
|
const desc = div.querySelector('p').textContent; |
|
|
return `${title}: ${desc}`; |
|
|
}); |
|
|
habits.forEach((habit, i) => { |
|
|
doc.text(`• ${habit}`, 20, 245 + (i * 5), { maxWidth: 170 }); |
|
|
}); |
|
|
|
|
|
doc.text('Value Creation Systems:', 15, 260); |
|
|
const systems = Array.from(document.getElementById('systemsOutput').querySelectorAll('div')).map(div => { |
|
|
const title = div.querySelector('h4').textContent; |
|
|
const desc = div.querySelector('p').textContent; |
|
|
return `${title}: ${desc}`; |
|
|
}); |
|
|
systems.forEach((system, i) => { |
|
|
doc.text(`• ${system}`, 20, 265 + (i * 5), { maxWidth: 170 }); |
|
|
}); |
|
|
|
|
|
|
|
|
doc.save('VisionQuest-Plan.pdf'); |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('exportCsvBtn').addEventListener('click', function() { |
|
|
|
|
|
let csvContent = "Category,Item\n"; |
|
|
|
|
|
|
|
|
csvContent += `Identity,"${document.getElementById('identityOutput').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`; |
|
|
}); |
|
|
|
|
|
|
|
|
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`; |
|
|
|
|
|
|
|
|
const habits = Array.from(document.getElementById('habitsOutput').querySelectorAll('div')).map(div => { |
|
|
const title = div.querySelector('h4').textContent; |
|
|
const desc = div.querySelector('p').textContent; |
|
|
return `${title}: ${desc}`; |
|
|
}); |
|
|
habits.forEach(habit => { |
|
|
csvContent += `Key Habit,"${habit}"\n`; |
|
|
}); |
|
|
|
|
|
|
|
|
const systems = Array.from(document.getElementById('systemsOutput').querySelectorAll('div')).map(div => { |
|
|
const title = div.querySelector('h4').textContent; |
|
|
const desc = div.querySelector('p').textContent; |
|
|
return `${title}: ${desc}`; |
|
|
}); |
|
|
systems.forEach(system => { |
|
|
csvContent += `Value System,"${system}"\n`; |
|
|
}); |
|
|
|
|
|
|
|
|
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); |
|
|
}); |
|
|
|
|
|
|
|
|
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(); |
|
|
} |
|
|
|
|
|
|
|
|
function parseJSONResponse(response) { |
|
|
try { |
|
|
|
|
|
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); |
|
|
|
|
|
const result = {}; |
|
|
|
|
|
|
|
|
const oneYearMatch = response.match(/1-year goal[:\-]?\s*(.+)/i); |
|
|
if (oneYearMatch) result.oneYearGoal = oneYearMatch[1].trim(); |
|
|
|
|
|
|
|
|
const ninetyDayMatch = response.match(/90-day goal[:\-]?\s*(.+)/i); |
|
|
if (ninetyDayMatch) result.ninetyDayGoal = ninetyDayMatch[1].trim(); |
|
|
|
|
|
|
|
|
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; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function simulateProgress() { |
|
|
const progressCircle = document.querySelector('.progress-ring__circle'); |
|
|
const progressPercent = document.getElementById('progressPercent'); |
|
|
const visionProgress = document.getElementById('visionProgress'); |
|
|
const visionProgressBar = document.getElementById('visionProgressBar'); |
|
|
const goalsProgress = document.getElementById('goalsProgress'); |
|
|
const goalsProgressBar = document.getElementById('goalsProgressBar'); |
|
|
const actionProgress = document.getElementById('actionProgress'); |
|
|
const actionProgressBar = document.getElementById('actionProgressBar'); |
|
|
const loadingMessages = [ |
|
|
'"The secret of getting ahead is getting started." - Mark Twain', |
|
|
'"What you get by achieving your goals is not as important as what you become by achieving your goals." - Zig Ziglar', |
|
|
'"Setting goals is the first step in turning the invisible into the visible." - Tony Robbins', |
|
|
'"A goal properly set is halfway reached." - Abraham Lincoln', |
|
|
'"You are never too old to set another goal or to dream a new dream." - C.S. Lewis' |
|
|
]; |
|
|
|
|
|
let progress = 0; |
|
|
const radius = 40; |
|
|
const circumference = 2 * Math.PI * radius; |
|
|
const totalDuration = 60000; |
|
|
const steps = 100; |
|
|
const intervalDuration = totalDuration / steps; |
|
|
|
|
|
progressCircle.style.strokeDasharray = circumference; |
|
|
progressCircle.style.strokeDashoffset = circumference; |
|
|
|
|
|
const interval = setInterval(() => { |
|
|
progress += 1; |
|
|
const offset = circumference - (progress / 100) * circumference; |
|
|
progressCircle.style.strokeDashoffset = offset; |
|
|
progressPercent.textContent = `${progress}%`; |
|
|
|
|
|
|
|
|
if (progress <= 40) { |
|
|
const visionPct = Math.min(100, (progress / 40) * 100); |
|
|
visionProgress.textContent = `${Math.round(visionPct)}%`; |
|
|
visionProgressBar.style.width = `${visionPct}%`; |
|
|
} else if (progress <= 80) { |
|
|
visionProgress.textContent = '100%'; |
|
|
visionProgressBar.style.width = '100%'; |
|
|
|
|
|
const goalsPct = Math.min(100, ((progress - 40) / 40) * 100); |
|
|
goalsProgress.textContent = `${Math.round(goalsPct)}%`; |
|
|
goalsProgressBar.style.width = `${goalsPct}%`; |
|
|
} else { |
|
|
visionProgress.textContent = '100%'; |
|
|
visionProgressBar.style.width = '100%'; |
|
|
goalsProgress.textContent = '100%'; |
|
|
goalsProgressBar.style.width = '100%'; |
|
|
|
|
|
const actionPct = Math.min(100, ((progress - 80) / 20) * 100); |
|
|
actionProgress.textContent = `${Math.round(actionPct)}%`; |
|
|
actionProgressBar.style.width = `${actionPct}%`; |
|
|
} |
|
|
|
|
|
|
|
|
if (progress % 10 === 0) { |
|
|
const randomMessage = loadingMessages[Math.floor(Math.random() * loadingMessages.length)]; |
|
|
document.getElementById('loadingMessage').textContent = randomMessage; |
|
|
} |
|
|
|
|
|
if (progress >= 100) { |
|
|
clearInterval(interval); |
|
|
} |
|
|
}, intervalDuration); |
|
|
} |
|
|
|
|
|
|
|
|
function getRandomHabitIcon() { |
|
|
const icons = ['sun', 'moon', 'running', 'meditation', 'brain', 'book', 'pencil-alt', 'dumbbell', 'water', 'apple-alt']; |
|
|
return icons[Math.floor(Math.random() * icons.length)]; |
|
|
} |
|
|
|
|
|
|
|
|
function getRandomSystemIcon() { |
|
|
const icons = ['rocket', 'cogs', 'project-diagram', 'chart-line', 'clock', 'calendar-check', 'sync', 'random', 'network-wired', 'microchip']; |
|
|
return icons[Math.floor(Math.random() * icons.length)]; |
|
|
} |
|
|
}); |
|
|
</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-v3-with-loading-correct" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
