Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Culture Code Team Builder</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"> | |
| <style> | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| } | |
| .activity-card: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); | |
| } | |
| .pulse-animation { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { transform: scale(1); } | |
| 50% { transform: scale(1.05); } | |
| 100% { transform: scale(1); } | |
| } | |
| .floating { | |
| animation: floating 6s ease-in-out infinite; | |
| } | |
| @keyframes floating { | |
| 0% { transform: translateY(0px); } | |
| 50% { transform: translateY(-15px); } | |
| 100% { transform: translateY(0px); } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 font-sans"> | |
| <!-- Header --> | |
| <header class="gradient-bg text-white"> | |
| <div class="container mx-auto px-6 py-16"> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-10 md:mb-0"> | |
| <h1 class="text-4xl md:text-5xl font-bold mb-4">Culture Code Team Builder</h1> | |
| <p class="text-xl mb-8">Transform your team meetings into culture-building experiences based on the principles from "The Culture Code"</p> | |
| <button class="bg-white text-purple-800 font-bold rounded-full py-3 px-8 shadow-lg hover:bg-gray-100 transition duration-300"> | |
| Start Building Today | |
| </button> | |
| </div> | |
| <div class="md:w-1/2 flex justify-center"> | |
| <img src="https://illustrations.popsy.co/amber/team-work.svg" alt="Team working together" class="w-3/4 floating"> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="container mx-auto px-6 py-12"> | |
| <!-- Culture Code Principles Section --> | |
| <section class="mb-16"> | |
| <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">The Three Principles of Great Culture</h2> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <!-- Principle 1 --> | |
| <div class="bg-white p-8 rounded-xl shadow-md hover:shadow-xl transition duration-300"> | |
| <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mb-6 mx-auto"> | |
| <i class="fas fa-users text-blue-600 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-4 text-center">Build Safety</h3> | |
| <p class="text-gray-600">Create an environment where team members feel safe to take risks, share ideas, and be vulnerable. Psychological safety is the foundation of great culture.</p> | |
| </div> | |
| <!-- Principle 2 --> | |
| <div class="bg-white p-8 rounded-xl shadow-md hover:shadow-xl transition duration-300"> | |
| <div class="bg-purple-100 w-16 h-16 rounded-full flex items-center justify-center mb-6 mx-auto"> | |
| <i class="fas fa-bullseye text-purple-600 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-4 text-center">Share Vulnerability</h3> | |
| <p class="text-gray-600">Encourage team members to openly share challenges and uncertainties. This builds trust and creates stronger connections between team members.</p> | |
| </div> | |
| <!-- Principle 3 --> | |
| <div class="bg-white p-8 rounded-xl shadow-md hover:shadow-xl transition duration-300"> | |
| <div class="bg-indigo-100 w-16 h-16 rounded-full flex items-center justify-center mb-6 mx-auto"> | |
| <i class="fas fa-star text-indigo-600 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-4 text-center">Establish Purpose</h3> | |
| <p class="text-gray-600">Create shared goals and narratives that give meaning to your team's work. A strong sense of purpose aligns efforts and motivates team members.</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Meeting Tools Section --> | |
| <section class="mb-16"> | |
| <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Meeting Enhancement Tools</h2> | |
| <!-- Tool Selector --> | |
| <div class="bg-white rounded-xl shadow-md p-6 mb-8"> | |
| <div class="flex flex-wrap justify-center gap-4 mb-8"> | |
| <button onclick="showTool('icebreaker')" class="bg-blue-100 text-blue-800 px-6 py-2 rounded-full font-medium hover:bg-blue-200 transition">Icebreakers</button> | |
| <button onclick="showTool('checkin')" class="bg-purple-100 text-purple-800 px-6 py-2 rounded-full font-medium hover:bg-purple-200 transition">Team Check-ins</button> | |
| <button onclick="showTool('feedback')" class="bg-green-100 text-green-800 px-6 py-2 rounded-full font-medium hover:bg-green-200 transition">Feedback Tools</button> | |
| <button onclick="showTool('activity')" class="bg-yellow-100 text-yellow-800 px-6 py-2 rounded-full font-medium hover:bg-yellow-200 transition">Culture Activities</button> | |
| <button onclick="showTool('closing')" class="bg-red-100 text-red-800 px-6 py-2 rounded-full font-medium hover:bg-red-200 transition">Meeting Closers</button> | |
| </div> | |
| <!-- Tool Content --> | |
| <div id="toolContent" class="min-h-64 p-6 bg-gray-50 rounded-lg"> | |
| <div id="icebreaker" class="tool-section"> | |
| <h3 class="text-xl font-semibold mb-4 text-blue-700">Icebreaker Activities</h3> | |
| <div class="grid md:grid-cols-2 gap-6"> | |
| <div class="activity-card bg-white p-6 rounded-lg shadow-sm hover:shadow-md transition cursor-pointer" onclick="showActivityDetails('Two Truths and a Lie')"> | |
| <h4 class="font-medium text-lg mb-2">Two Truths and a Lie</h4> | |
| <p class="text-gray-600">Each person shares two true facts and one false fact about themselves. Others guess which is the lie.</p> | |
| </div> | |
| <div class="activity-card bg-white p-6 rounded-lg shadow-sm hover:shadow-md transition cursor-pointer" onclick="showActivityDetails('Rose, Bud, Thorn')"> | |
| <h4 class="font-medium text-lg mb-2">Rose, Bud, Thorn</h4> | |
| <p class="text-gray-600">Share a highlight (rose), something you're looking forward to (bud), and a challenge (thorn) from your week.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="checkin" class="tool-section hidden"> | |
| <h3 class="text-xl font-semibold mb-4 text-purple-700">Team Check-ins</h3> | |
| <div class="grid md:grid-cols-2 gap-6"> | |
| <div class="activity-card bg-white p-6 rounded-lg shadow-sm hover:shadow-md transition cursor-pointer" onclick="showActivityDetails('Energy Check-in')"> | |
| <h4 class="font-medium text-lg mb-2">Energy Check-in</h4> | |
| <p class="text-gray-600">Rate your current energy level from 1-5 and share what's contributing to that energy level.</p> | |
| </div> | |
| <div class="activity-card bg-white p-6 rounded-lg shadow-sm hover:shadow-md transition cursor-pointer" onclick="showActivityDetails('Weather Report')"> | |
| <h4 class="font-medium text-lg mb-2">Weather Report</h4> | |
| <p class="text-gray-600">Describe your current mood as a weather pattern (sunny, cloudy, stormy, etc.) and explain why.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="feedback" class="tool-section hidden"> | |
| <h3 class="text-xl font-semibold mb-4 text-green-700">Feedback Tools</h3> | |
| <div class="grid md:grid-cols-2 gap-6"> | |
| <div class="activity-card bg-white p-6 rounded-lg shadow-sm hover:shadow-md transition cursor-pointer" onclick="showActivityDetails('Appreciation Round')"> | |
| <h4 class="font-medium text-lg mb-2">Appreciation Round</h4> | |
| <p class="text-gray-600">Each person shares specific appreciation for something a colleague did since the last meeting.</p> | |
| </div> | |
| <div class="activity-card bg-white p-6 rounded-lg shadow-sm hover:shadow-md transition cursor-pointer" onclick="showActivityDetails('Start-Stop-Continue')"> | |
| <h4 class="font-medium text-lg mb-2">Start-Stop-Continue</h4> | |
| <p class="text-gray-600">Give feedback on what the team should start doing, stop doing, and continue doing.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="activity" class="tool-section hidden"> | |
| <h3 class="text-xl font-semibold mb-4 text-yellow-700">Culture Activities</h3> | |
| <div class="grid md:grid-cols-2 gap-6"> | |
| <div class="activity-card bg-white p-6 rounded-lg shadow-sm hover:shadow-md transition cursor-pointer" onclick="showActivityDetails('Superpowers Exercise')"> | |
| <h4 class="font-medium text-lg mb-2">Superpowers Exercise</h4> | |
| <p class="text-gray-600">Identify and share each team member's unique strengths and how they contribute to the team.</p> | |
| </div> | |
| <div class="activity-card bg-white p-6 rounded-lg shadow-sm hover:shadow-md transition cursor-pointer" onclick="showActivityDetails('Failure Stories')"> | |
| <h4 class="font-medium text-lg mb-2">Failure Stories</h4> | |
| <p class="text-gray-600">Share stories of professional failures and what was learned, normalizing risk-taking and learning.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="closing" class="tool-section hidden"> | |
| <h3 class="text-xl font-semibold mb-4 text-red-700">Meeting Closers</h3> | |
| <div class="grid md:grid-cols-2 gap-6"> | |
| <div class="activity-card bg-white p-6 rounded-lg shadow-sm hover:shadow-md transition cursor-pointer" onclick="showActivityDetails('One Word Close')"> | |
| <h4 class="font-medium text-lg mb-2">One Word Close</h4> | |
| <p class="text-gray-600">Each person shares one word that captures their takeaway from the meeting.</p> | |
| </div> | |
| <div class="activity-card bg-white p-6 rounded-lg shadow-sm hover:shadow-md transition cursor-pointer" onclick="showActivityDetails('Action Commitments')"> | |
| <h4 class="font-medium text-lg mb-2">Action Commitments</h4> | |
| <p class="text-gray-600">Each person states one specific action they'll take before the next meeting based on today's discussion.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Activity Details Modal --> | |
| <div id="activityModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden z-50"> | |
| <div class="bg-white rounded-xl p-8 max-w-2xl w-full mx-4 max-h-[90vh] overflow-y-auto"> | |
| <div class="flex justify-between items-start mb-6"> | |
| <h3 id="modalTitle" class="text-2xl font-bold"></h3> | |
| <button onclick="closeModal()" class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div id="modalContent" class="mb-6"> | |
| <!-- Content will be inserted here --> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <span id="modalTime" class="bg-gray-100 px-3 py-1 rounded-full text-sm"></span> | |
| <span id="modalGroupSize" class="bg-gray-100 px-3 py-1 rounded-full text-sm ml-2"></span> | |
| </div> | |
| <button onclick="startActivity()" class="bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700 transition"> | |
| Start This Activity <i class="fas fa-play ml-2"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Team Pulse Section --> | |
| <section class="mb-16"> | |
| <h2 class="text-3xl font-bold text-center mb-8 text-gray-800">Team Pulse Check</h2> | |
| <div class="bg-white rounded-xl shadow-md p-8"> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-8 md:mb-0"> | |
| <h3 class="text-xl font-semibold mb-4">How is your team feeling today?</h3> | |
| <p class="text-gray-600 mb-6">Regularly checking in on team morale helps maintain psychological safety and address issues before they grow.</p> | |
| <button onclick="startPulseCheck()" class="gradient-bg text-white px-8 py-3 rounded-lg hover:opacity-90 transition pulse-animation"> | |
| Start Team Pulse Check <i class="fas fa-heartbeat ml-2"></i> | |
| </button> | |
| </div> | |
| <div class="md:w-1/2 flex justify-center"> | |
| <img src="https://illustrations.popsy.co/amber/digital-nomad.svg" alt="Team feedback" class="w-3/4"> | |
| </div> | |
| </div> | |
| <!-- Pulse Check Modal --> | |
| <div id="pulseModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden z-50"> | |
| <div class="bg-white rounded-xl p-8 max-w-md w-full mx-4"> | |
| <h3 class="text-2xl font-bold mb-6 text-center">Team Pulse Check</h3> | |
| <div class="mb-8"> | |
| <p class="text-gray-700 mb-4">On a scale of 1-5, how would you rate the team's current:</p> | |
| <div class="space-y-6"> | |
| <div> | |
| <label class="block text-gray-700 mb-2">Psychological Safety</label> | |
| <div class="flex justify-between"> | |
| <span class="text-gray-500 text-sm">Low</span> | |
| <div class="flex space-x-2"> | |
| <input type="radio" name="safety" id="safety1" value="1" class="hidden peer" checked> | |
| <label for="safety1" class="w-8 h-8 flex items-center justify-center bg-gray-100 rounded-full peer-checked:bg-red-500 peer-checked:text-white cursor-pointer">1</label> | |
| <input type="radio" name="safety" id="safety2" value="2" class="hidden peer"> | |
| <label for="safety2" class="w-8 h-8 flex items-center justify-center bg-gray-100 rounded-full peer-checked:bg-orange-500 peer-checked:text-white cursor-pointer">2</label> | |
| <input type="radio" name="safety" id="safety3" value="3" class="hidden peer"> | |
| <label for="safety3" class="w-8 h-8 flex items-center justify-center bg-gray-100 rounded-full peer-checked:bg-yellow-500 peer-checked:text-white cursor-pointer">3</label> | |
| <input type="radio" name="safety" id="safety4" value="4" class="hidden peer"> | |
| <label for="safety4" class="w-8 h-8 flex items-center justify-center bg-gray-100 rounded-full peer-checked:bg-blue-500 peer-checked:text-white cursor-pointer">4</label> | |
| <input type="radio" name="safety" id="safety5" value="5" class="hidden peer"> | |
| <label for="safety5" class="w-8 h-8 flex items-center justify-center bg-gray-100 rounded-full peer-checked:bg-green-500 peer-checked:text-white cursor-pointer">5</label> | |
| </div> | |
| <span class="text-gray-500 text-sm">High</span> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 mb-2">Team Connection</label> | |
| <div class="flex justify-between"> | |
| <span class="text-gray-500 text-sm">Weak</span> | |
| <div class="flex space-x-2"> | |
| <input type="radio" name="connection" id="connection1" value="1" class="hidden peer"> | |
| <label for="connection1" class="w-8 h-8 flex items-center justify-center bg-gray-100 rounded-full peer-checked:bg-red-500 peer-checked:text-white cursor-pointer">1</label> | |
| <input type="radio" name="connection" id="connection2" value="2" class="hidden peer"> | |
| <label for="connection2" class="w-8 h-8 flex items-center justify-center bg-gray-100 rounded-full peer-checked:bg-orange-500 peer-checked:text-white cursor-pointer">2</label> | |
| <input type="radio" name="connection" id="connection3" value="3" class="hidden peer"> | |
| <label for="connection3" class="w-8 h-8 flex items-center justify-center bg-gray-100 rounded-full peer-checked:bg-yellow-500 peer-checked:text-white cursor-pointer">3</label> | |
| <input type="radio" name="connection" id="connection4" value="4" class="hidden peer"> | |
| <label for="connection4" class="w-8 h-8 flex items-center justify-center bg-gray-100 rounded-full peer-checked:bg-blue-500 peer-checked:text-white cursor-pointer">4</label> | |
| <input type="radio" name="connection" id="connection5" value="5" class="hidden peer"> | |
| <label for="connection5" class="w-8 h-8 flex items-center justify-center bg-gray-100 rounded-full peer-checked:bg-green-500 peer-checked:text-white cursor-pointer">5</label> | |
| </div> | |
| <span class="text-gray-500 text-sm">Strong</span> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 mb-2">Alignment with Purpose</label> | |
| <div class="flex justify-between"> | |
| <span class="text-gray-500 text-sm">Low</span> | |
| <div class="flex space-x-2"> | |
| <input type="radio" name="purpose" id="purpose1" value="1" class="hidden peer"> | |
| <label for="purpose1" class="w-8 h-8 flex items-center justify-center bg-gray-100 rounded-full peer-checked:bg-red-500 peer-checked:text-white cursor-pointer">1</label> | |
| <input type="radio" name="purpose" id="purpose2" value="2" class="hidden peer"> | |
| <label for="purpose2" class="w-8 h-8 flex items-center justify-center bg-gray-100 rounded-full peer-checked:bg-orange-500 peer-checked:text-white cursor-pointer">2</label> | |
| <input type="radio" name="purpose" id="purpose3" value="3" class="hidden peer"> | |
| <label for="purpose3" class="w-8 h-8 flex items-center justify-center bg-gray-100 rounded-full peer-checked:bg-yellow-500 peer-checked:text-white cursor-pointer">3</label> | |
| <input type="radio" name="purpose" id="purpose4" value="4" class="hidden peer"> | |
| <label for="purpose4" class="w-8 h-8 flex items-center justify-center bg-gray-100 rounded-full peer-checked:bg-blue-500 peer-checked:text-white cursor-pointer">4</label> | |
| <input type="radio" name="purpose" id="purpose5" value="5" class="hidden peer"> | |
| <label for="purpose5" class="w-8 h-8 flex items-center justify-center bg-gray-100 rounded-full peer-checked:bg-green-500 peer-checked:text-white cursor-pointer">5</label> | |
| </div> | |
| <span class="text-gray-500 text-sm">High</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="feedback" class="block text-gray-700 mb-2">What's one thing we could improve as a team?</label> | |
| <textarea id="feedback" rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea> | |
| </div> | |
| <div class="flex justify-end space-x-4"> | |
| <button onclick="closePulseModal()" class="px-6 py-2 border border-gray-300 rounded-lg hover:bg-gray-100 transition">Cancel</button> | |
| <button onclick="submitPulseCheck()" class="bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700 transition">Submit</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Culture Tracker --> | |
| <section class="mb-16"> | |
| <h2 class="text-3xl font-bold text-center mb-8 text-gray-800">Culture Tracker</h2> | |
| <div class="bg-white rounded-xl shadow-md p-8"> | |
| <div class="flex flex-col md:flex-row"> | |
| <div class="md:w-1/2 mb-8 md:mb-0"> | |
| <h3 class="text-xl font-semibold mb-4">Track Your Team's Culture Journey</h3> | |
| <p class="text-gray-600 mb-6">Regularly assess how your team is doing on the three key culture dimensions from The Culture Code.</p> | |
| <div class="space-y-4"> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-sm font-medium text-blue-700">Psychological Safety</span> | |
| <span class="text-sm font-medium text-blue-700">80%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div class="bg-blue-600 h-2.5 rounded-full" style="width: 80%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-sm font-medium text-purple-700">Shared Vulnerability</span> | |
| <span class="text-sm font-medium text-purple-700">65%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div class="bg-purple-600 h-2.5 rounded-full" style="width: 65%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-sm font-medium text-indigo-700">Purpose Alignment</span> | |
| <span class="text-sm font-medium text-indigo-700">90%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div class="bg-indigo-600 h-2.5 rounded-full" style="width: 90%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 flex justify-center items-center"> | |
| <div class="w-64 h-64 relative"> | |
| <canvas id="cultureRadarChart"></canvas> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Resources Section --> | |
| <section> | |
| <h2 class="text-3xl font-bold text-center mb-8 text-gray-800">Culture Resources</h2> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition"> | |
| <div class="h-48 bg-blue-100 flex items-center justify-center"> | |
| <i class="fas fa-book-open text-blue-600 text-6xl"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-semibold mb-2">Book Summary</h3> | |
| <p class="text-gray-600 mb-4">Key takeaways from "The Culture Code" by Daniel Coyle to help you understand the science of great culture.</p> | |
| <a href="#" class="text-blue-600 font-medium hover:underline">Read Summary</a> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition"> | |
| <div class="h-48 bg-purple-100 flex items-center justify-center"> | |
| <i class="fas fa-video text-purple-600 text-6xl"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-semibold mb-2">Video Guides</h3> | |
| <p class="text-gray-600 mb-4">Watch interviews with culture leaders and demonstrations of effective team-building exercises.</p> | |
| <a href="#" class="text-purple-600 font-medium hover:underline">Watch Videos</a> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition"> | |
| <div class="h-48 bg-green-100 flex items-center justify-center"> | |
| <i class="fas fa-tools text-green-600 text-6xl"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-semibold mb-2">Templates & Tools</h3> | |
| <p class="text-gray-600 mb-4">Download ready-to-use templates for team meetings, feedback sessions, and culture assessments.</p> | |
| <a href="#" class="text-green-600 font-medium hover:underline">Download Now</a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="bg-gray-800 text-white py-12"> | |
| <div class="container mx-auto px-6"> | |
| <div class="grid md:grid-cols-4 gap-8"> | |
| <div> | |
| <h3 class="text-xl font-semibold mb-4">Culture Code Team Builder</h3> | |
| <p class="text-gray-400">Helping teams build psychological safety, vulnerability, and purpose since 2023.</p> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold mb-4">Resources</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Blog</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Templates</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Research</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Case Studies</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold mb-4">Company</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">About Us</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Contact</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Careers</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Privacy Policy</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold mb-4">Connect</h4> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center hover:bg-blue-600 transition"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center hover:bg-blue-800 transition"> | |
| <i class="fab fa-linkedin-in"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center hover:bg-pink-600 transition"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center hover:bg-red-600 transition"> | |
| <i class="fab fa-youtube"></i> | |
| </a> | |
| </div> | |
| <div class="mt-6"> | |
| <p class="text-gray-400 mb-2">Subscribe to our newsletter</p> | |
| <div class="flex"> | |
| <input type="email" placeholder="Your email" class="px-4 py-2 rounded-l-lg focus:outline-none text-gray-800 w-full"> | |
| <button class="bg-blue-600 px-4 py-2 rounded-r-lg hover:bg-blue-700 transition"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400"> | |
| <p>© 2023 Culture Code Team Builder. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| <script> | |
| // Show tool section | |
| function showTool(toolId) { | |
| const toolSections = document.querySelectorAll('.tool-section'); | |
| toolSections.forEach(section => { | |
| section.classList.add('hidden'); | |
| }); | |
| document.getElementById(toolId).classList.remove('hidden'); | |
| } | |
| // Show activity details modal | |
| function showActivityDetails(activityName) { | |
| const modal = document.getElementById('activityModal'); | |
| const modalTitle = document.getElementById('modalTitle'); | |
| const modalContent = document.getElementById('modalContent'); | |
| const modalTime = document.getElementById('modalTime'); | |
| const modalGroupSize = document.getElementById('modalGroupSize'); | |
| modalTitle.textContent = activityName; | |
| // Set content based on activity | |
| switch(activityName) { | |
| case 'Two Truths and a Lie': | |
| modalContent.innerHTML = ` | |
| <p class="mb-4"><strong>Purpose:</strong> Build psychological safety through personal sharing and fun deception.</p> | |
| <p class="mb-4"><strong>Instructions:</strong></p> | |
| <ol class="list-decimal pl-5 space-y-2 mb-4"> | |
| <li>Each person prepares two true statements and one false statement about themselves.</li> | |
| <li>Take turns sharing all three statements in random order.</li> | |
| <li>Team members vote on which statement they think is the lie.</li> | |
| <li>The speaker reveals the lie and shares any interesting context about the truths.</li> | |
| </ol> | |
| <p class="mb-2"><strong>Tips:</strong></p> | |
| <ul class="list-disc pl-5 space-y-1"> | |
| <li>Encourage statements that reveal something interesting but not too personal</li> | |
| <li>Model vulnerability by sharing something slightly embarrassing in your truths</li> | |
| <li>Keep it lighthearted - the goal is fun connection, not interrogation</li> | |
| </ul> | |
| `; | |
| modalTime.textContent = '5-10 min'; | |
| modalGroupSize.textContent = '2-10 people'; | |
| break; | |
| case 'Rose, Bud, Thorn': | |
| modalContent.innerHTML = ` | |
| <p class="mb-4"><strong>Purpose:</strong> Create shared vulnerability by discussing recent experiences and challenges.</p> | |
| <p class="mb-4"><strong>Instructions:</strong></p> | |
| <ol class="list-decimal pl-5 space-y-2 mb-4"> | |
| <li>Explain the three categories: Rose (highlight or success), Bud (something you're looking forward to), Thorn (challenge or difficulty).</li> | |
| <li>Give team members 1-2 minutes to think of one item for each category.</li> | |
| <li>Go around the group sharing all three items.</li> | |
| <li>Optionally discuss patterns or offer support for thorns.</li> | |
| </ol> | |
| <p class="mb-2"><strong>Tips:</strong></p> | |
| <ul class="list-disc pl-5 space-y-1"> | |
| <li>Start with your own example to set the tone</li> | |
| <li>Encourage specific examples rather than general statements</li> | |
| <li>Validate thorns without immediately trying to "fix" them</li> | |
| </ul> | |
| `; | |
| modalTime.textContent = '10-15 min'; | |
| modalGroupSize.textContent = '3-15 people'; | |
| break; | |
| // Add more cases for other activities | |
| default: | |
| modalContent.innerHTML = `<p>Detailed instructions for ${activityName} will appear here.</p>`; | |
| modalTime.textContent = '5-15 min'; | |
| modalGroupSize.textContent = '2+ people'; | |
| } | |
| modal.classList.remove('hidden'); | |
| } | |
| // Close modal | |
| function closeModal() { | |
| document.getElementById('activityModal').classList.add('hidden'); | |
| } | |
| // Start activity | |
| function startActivity() { | |
| const activityName = document.getElementById('modalTitle').textContent; | |
| alert(`Starting activity: ${activityName}\n\nTimer and instructions will be displayed to the team.`); | |
| closeModal(); | |
| } | |
| // Pulse check functions | |
| function startPulseCheck() { | |
| document.getElementById('pulseModal').classList.remove('hidden'); | |
| } | |
| function closePulseModal() { | |
| document.getElementById('pulseModal').classList.add('hidden'); | |
| } | |
| function submitPulseCheck() { | |
| alert('Thank you for your feedback! Your responses will help improve our team culture.'); | |
| closePulseModal(); | |
| } | |
| // Initialize radar chart | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const ctx = document.getElementById('cultureRadarChart').getContext('2d'); | |
| const radarChart = new Chart(ctx, { | |
| type: 'radar', | |
| data: { | |
| labels: ['Psychological Safety', 'Shared Vulnerability', 'Purpose Alignment', 'Belonging', 'Continuous Learning'], | |
| datasets: [{ | |
| label: 'Current Culture', | |
| data: [80, 65, 90, 75, 70], | |
| backgroundColor: 'rgba(99, 102, 241, 0.2)', | |
| borderColor: 'rgba(99, 102, 241, 1)', | |
| borderWidth: 2, | |
| pointBackgroundColor: 'rgba(99, 102, 241, 1)', | |
| pointRadius: 4 | |
| }, { | |
| label: 'Target Culture', | |
| data: [90, 85, 95, 90, 85], | |
| backgroundColor: 'rgba(167, 139, 250, 0.2)', | |
| borderColor: 'rgba(167, 139, 250, 1)', | |
| borderWidth: 2, | |
| pointBackgroundColor: 'rgba(167, 139, 250, 1)', | |
| pointRadius: 4, | |
| borderDash: [5, 5] | |
| }] | |
| }, | |
| options: { | |
| scales: { | |
| r: { | |
| angleLines: { | |
| display: true | |
| }, | |
| suggestedMin: 0, | |
| suggestedMax: 100, | |
| ticks: { | |
| stepSize: 20 | |
| } | |
| } | |
| }, | |
| plugins: { | |
| legend: { | |
| position: 'bottom' | |
| } | |
| } | |
| } | |
| }); | |
| }); | |
| </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/culture-builder" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |