Spaces:
Running
Running
| <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> |