Spaces:
Running
Running
File size: 9,984 Bytes
ad1dcd6 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 |
<html><head><base href="https://websim.ai/career-coach"><title>AI Career Coach: Your Path to Professional Success</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
@keyframes typing {
from { width: 0 }
to { width: 100% }
}
.typing-effect {
overflow: hidden;
border-right: .15em solid #4F46E5;
white-space: nowrap;
animation:
typing 3.5s steps(40, end),
blink-caret .75s step-end infinite;
}
@keyframes blink-caret {
from, to { border-color: transparent }
50% { border-color: #4F46E5; }
}
</style>
</head>
<body class="bg-gradient-to-br from-indigo-500 to-purple-600 text-gray-100 min-h-screen font-sans">
<header class="py-6 relative">
<div class="container mx-auto px-4">
<h1 class="text-4xl font-bold text-center text-white">AI Career Coach 🚀</h1>
<p class="mt-2 text-center text-indigo-200">Your Path to Professional Success</p>
</div>
</header>
<main class="container mx-auto px-4 py-8">
<div class="bg-white rounded-lg shadow-lg p-6 mb-8">
<h2 class="text-2xl font-semibold mb-4 text-indigo-800">Start Your Career Coaching Session</h2>
<form id="career-coach-form" method="GET" action="https://websim.ai/career-coach" class="space-y-4">
<div>
<label for="career-stage" class="block text-sm font-medium text-gray-700">Career Stage:</label>
<select id="career-stage" name="stage" class="mt-1 block w-full px-3 py-2 bg-gray-50 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 text-gray-900">
<option value="student">Student/Recent Graduate</option>
<option value="early">Early Career Professional</option>
<option value="mid">Mid-Career Professional</option>
<option value="senior">Senior Professional</option>
<option value="career-change">Career Changer</option>
</select>
</div>
<div>
<label for="industry" class="block text-sm font-medium text-gray-700">Industry of Interest:</label>
<input type="text" id="industry" name="industry" class="mt-1 block w-full px-3 py-2 bg-gray-50 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 text-gray-900" placeholder="e.g. Technology, Healthcare, Finance">
</div>
<div>
<label for="coaching-focus" class="block text-sm font-medium text-gray-700">Coaching Focus:</label>
<select id="coaching-focus" name="focus" class="mt-1 block w-full px-3 py-2 bg-gray-50 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 text-gray-900">
<option value="career-planning">Career Planning</option>
<option value="skill-development">Skill Development</option>
<option value="job-search">Job Search Strategies</option>
<option value="interview-prep">Interview Preparation</option>
<option value="networking">Networking Techniques</option>
</select>
</div>
<div>
<button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
Start Coaching Session 🗣️
</button>
</div>
</form>
</div>
<div id="chat-container" class="bg-white rounded-lg shadow-lg p-6 hidden">
<h2 class="text-2xl font-semibold mb-4 text-indigo-800">Your Career Coaching Session</h2>
<div id="chat-messages" class="space-y-4 mb-4 h-96 overflow-y-auto">
<!-- Chat messages will be inserted here -->
</div>
<form id="user-input-form" class="mt-4">
<div class="flex items-center">
<input type="text" id="user-input" name="user-input" class="flex-grow px-3 py-2 bg-gray-50 border border-gray-300 rounded-l-md shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 text-gray-900" placeholder="Type your message here...">
<button type="submit" class="flex-shrink-0 px-4 py-2 border border-transparent rounded-r-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
Send
</button>
</div>
</form>
</div>
<div class="mt-8 bg-white rounded-lg shadow-lg p-6">
<h2 class="text-2xl font-semibold mb-4 text-indigo-800">Career Development Tips</h2>
<ul class="list-disc list-inside space-y-2 text-gray-700">
<li>Set clear, achievable goals for your career progression</li>
<li>Continuously update your skills to stay relevant in your industry</li>
<li>Build a strong professional network through events and online platforms</li>
<li>Seek out mentors who can provide guidance and support</li>
<li>Regularly reflect on your career path and be open to new opportunities</li>
</ul>
</div>
</main>
<script>
const careerCoachForm = document.getElementById('career-coach-form');
const chatContainer = document.getElementById('chat-container');
const chatMessages = document.getElementById('chat-messages');
const userInputForm = document.getElementById('user-input-form');
const userInput = document.getElementById('user-input');
let coachContext = {};
careerCoachForm.addEventListener('submit', function(e) {
e.preventDefault();
const careerStage = document.getElementById('career-stage').value;
const industry = document.getElementById('industry').value;
const coachingFocus = document.getElementById('coaching-focus').value;
startCoachingSession(careerStage, industry, coachingFocus);
});
userInputForm.addEventListener('submit', function(e) {
e.preventDefault();
const message = userInput.value.trim();
if (message) {
addMessageToChat('user', message);
generateCoachResponse(message);
userInput.value = '';
}
});
function startCoachingSession(stage, industry, focus) {
chatContainer.classList.remove('hidden');
careerCoachForm.classList.add('hidden');
coachContext = { stage, industry, focus };
const introMessage = generateIntroMessage(stage, industry, focus);
addMessageToChat('coach', introMessage);
}
function generateIntroMessage(stage, industry, focus) {
const stageMessages = {
student: "Welcome! As a student or recent graduate, you're at an exciting point in your career journey.",
early: "Great to meet you! Early career is a crucial time for setting the foundation of your professional life.",
mid: "Hello there! Mid-career is often a time of reflection and potential transition.",
senior: "Welcome! As a senior professional, you bring a wealth of experience to our session.",
"career-change": "Exciting times ahead! Career changes can be challenging but also incredibly rewarding."
};
const focusMessages = {
"career-planning": "Let's work on mapping out your career trajectory.",
"skill-development": "We'll identify key skills to develop for your career growth.",
"job-search": "I'll help you craft effective strategies for your job search.",
"interview-prep": "We'll prepare you to ace those important interviews.",
"networking": "Let's explore ways to expand and leverage your professional network."
};
return `${stageMessages[stage]} I see you're interested in the ${industry} industry. ${focusMessages[focus]} How can I assist you today?`;
}
function addMessageToChat(sender, message) {
const messageElement = document.createElement('div');
messageElement.classList.add('p-4', 'rounded-lg', sender === 'user' ? 'bg-indigo-100' : 'bg-purple-100');
const iconSpan = document.createElement('span');
iconSpan.classList.add('mr-2');
iconSpan.textContent = sender === 'user' ? '👤' : '🤖';
const messageSpan = document.createElement('span');
messageSpan.classList.add('typing-effect');
messageSpan.textContent = message;
messageElement.appendChild(iconSpan);
messageElement.appendChild(messageSpan);
chatMessages.appendChild(messageElement);
chatMessages.scrollTop = chatMessages.scrollHeight;
}
function generateCoachResponse(userMessage) {
// This is a simplified response generator. In a real application, this would use more sophisticated NLP models.
const responses = [
"That's an interesting point. Could you elaborate on that?",
"I understand. How do you think this relates to your career goals?",
"Great question! Have you considered exploring opportunities in [industry]?",
"It sounds like you're facing a common challenge. Let's break it down step by step.",
"That's a valuable insight. How can we leverage this in your career development?",
"I see. Based on your experience in [industry], what skills do you think are most crucial?",
"Excellent. Let's think about how we can translate that into actionable steps.",
"That's a great start. How do you see this fitting into your long-term career vision?",
"Interesting perspective. How has your experience in [stage] career stage influenced this?",
"I appreciate your honesty. Let's explore some strategies to address this challenge."
];
const response = responses[Math.floor(Math.random() * responses.length)]
.replace('[industry]', coachContext.industry)
.replace('[stage]', coachContext.stage);
setTimeout(() => {
addMessageToChat('coach', response);
}, 1000 + Math.random() * 1000); // Simulate thinking time
}
</script>
</body></html> |