| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Skills Development Game</title> |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap" rel="stylesheet"> |
| <style> |
| body { |
| font-family: 'Poppins', sans-serif; |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
| min-height: 100vh; |
| } |
| .game-card { |
| backdrop-filter: blur(16px) saturate(180%); |
| -webkit-backdrop-filter: blur(16px) saturate(180%); |
| background-color: rgba(255, 255, 255, 0.15); |
| border-radius: 12px; |
| border: 1px solid rgba(255, 255, 255, 0.125); |
| } |
| .skill-bubble { |
| transition: all 0.3s ease; |
| cursor: pointer; |
| } |
| .skill-bubble:hover { |
| transform: scale(1.1); |
| } |
| </style> |
| </head> |
| <body class="text-white"> |
| <div class="container mx-auto px-4 py-12"> |
| <div class="text-center mb-12"> |
| <h1 class="text-4xl font-bold mb-4">Skill Builder Challenge</h1> |
| <p class="text-xl opacity-80">Develop your professional skills through interactive challenges</p> |
| </div> |
|
|
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
| |
| <div class="game-card p-6"> |
| <div class="flex items-center mb-4"> |
| <div class="w-12 h-12 rounded-full bg-purple-200 flex items-center justify-center mr-4"> |
| <i data-feather="message-circle" class="text-purple-700"></i> |
| </div> |
| <h3 class="text-xl font-semibold">Communication</h3> |
| </div> |
| <p class="mb-6 opacity-80">Improve your verbal and written communication skills.</p> |
| <div class="flex flex-wrap gap-3 mb-6"> |
| <div class="skill-bubble px-4 py-2 bg-white bg-opacity-20 rounded-full">Active Listening</div> |
| <div class="skill-bubble px-4 py-2 bg-white bg-opacity-20 rounded-full">Presentation</div> |
| <div class="skill-bubble px-4 py-2 bg-white bg-opacity-20 rounded-full">Feedback</div> |
| </div> |
| <button class="w-full py-3 rounded-lg bg-white text-purple-700 font-medium hover:bg-opacity-90 transition">Start Challenge</button> |
| </div> |
|
|
| |
| <div class="game-card p-6"> |
| <div class="flex items-center mb-4"> |
| <div class="w-12 h-12 rounded-full bg-blue-200 flex items-center justify-center mr-4"> |
| <i data-feather="code" class="text-blue-700"></i> |
| </div> |
| <h3 class="text-xl font-semibold">Problem Solving</h3> |
| </div> |
| <p class="mb-6 opacity-80">Enhance your critical thinking and analytical abilities.</p> |
| <div class="flex flex-wrap gap-3 mb-6"> |
| <div class="skill-bubble px-4 py-2 bg-white bg-opacity-20 rounded-full">Analysis</div> |
| <div class="skill-bubble px-4 py-2 bg-white bg-opacity-20 rounded-full">Decision Making</div> |
| <div class="skill-bubble px-4 py-2 bg-white bg-opacity-20 rounded-full">Creativity</div> |
| </div> |
| <button class="w-full py-3 rounded-lg bg-white text-blue-700 font-medium hover:bg-opacity-90 transition">Start Challenge</button> |
| </div> |
|
|
| |
| <div class="game-card p-6"> |
| <div class="flex items-center mb-4"> |
| <div class="w-12 h-12 rounded-full bg-green-200 flex items-center justify-center mr-4"> |
| <i data-feather="users" class="text-green-700"></i> |
| </div> |
| <h3 class="text-xl font-semibold">Teamwork</h3> |
| </div> |
| <p class="mb-6 opacity-80">Build collaboration and leadership capabilities.</p> |
| <div class="flex flex-wrap gap-3 mb-6"> |
| <div class="skill-bubble px-4 py-2 bg-white bg-opacity-20 rounded-full">Collaboration</div> |
| <div class="skill-bubble px-4 py-2 bg-white bg-opacity-20 rounded-full">Conflict Resolution</div> |
| <div class="skill-bubble px-4 py-2 bg-white bg-opacity-20 rounded-full">Delegation</div> |
| </div> |
| <button class="w-full py-3 rounded-lg bg-white text-green-700 font-medium hover:bg-opacity-90 transition">Start Challenge</button> |
| </div> |
| </div> |
|
|
| <div class="mt-12 text-center"> |
| <p class="mb-4 opacity-80">Track your progress and unlock achievements</p> |
| <div class="flex justify-center gap-4"> |
| <div class="w-16 h-16 rounded-full bg-yellow-400 bg-opacity-20 flex items-center justify-center"> |
| <i data-feather="award" class="text-yellow-400"></i> |
| </div> |
| <div class="w-16 h-16 rounded-full bg-red-400 bg-opacity-20 flex items-center justify-center"> |
| <i data-feather="bar-chart-2" class="text-red-400"></i> |
| </div> |
| <div class="w-16 h-16 rounded-full bg-purple-400 bg-opacity-20 flex items-center justify-center"> |
| <i data-feather="trending-up" class="text-purple-400"></i> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
| <script> |
| feather.replace(); |
| |
| |
| document.querySelectorAll('.skill-bubble').forEach(bubble => { |
| bubble.addEventListener('click', function() { |
| this.classList.toggle('bg-opacity-40'); |
| this.classList.toggle('ring-2'); |
| this.classList.toggle('ring-white'); |
| }); |
| }); |
| </script> |
| </body> |
| </html> |
