Spaces:

buosam
/

skills

Running

App Files Files Community

buosam commited on Sep 15, 2025

Commit

3770377

verified ·

1 Parent(s): dc7dfb3

create a game for employees to develop their skills - Initial Deployment

Browse files

Files changed (4) hide show

README.md +7 -5
index.html +0 -19
prompts.txt +49 -0
skillsgame.html +122 -0

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Skills
-emoji: 🚀
-colorFrom: red
-colorTo: blue
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: skills
+emoji: 🐳
+colorFrom: blue
+colorTo: purple
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +0,0 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

prompts.txt ADDED Viewed

	@@ -0,0 +1,49 @@

+singup page for students and doctors, using Glassmorphism style
+create ice coffee website
+remove menues, make ice fall into coffee glass
+make ice cubes falling into a glass of coffe, make it a landing page
+where is it?
+add a glass of coffe or milkshake
+let the ice cubes fill the glass and once filled let them fall on sides
+web tech (HTML/CSS) + the right animation approach. Pick based on how realistic/interactive you want it:
+Simple, high-quality hero with no interaction → Looping video
+Format: MP4 (H.264) + WebM (VP9) sources (6–8s loop, <3–5 MB)
+Pros: Easiest, looks most realistic (splash, bubbles)
+Notes: Transparent backgrounds work only with WebM alpha (Chrome/Edge). For Safari, use a non-alpha MP4 or design around a solid/light background.
+Crisp UI, vector look, lightweight → Lottie
+Stack: After Effects → Bodymovin (Lottie JSON) → <lottie-player> or a React Lottie component
+Pros: Tiny files, sharp on all DPIs, controllable via JS
+Notes: Best for stylized/2D ice cubes, not photoreal water physics.
+Interactive/physics (cubes bounce/splash on scroll/hover) → JavaScript
+2D physics: Canvas + Matter.js (fast, simpler)
+3D realism: Three.js (+ cannon-es for physics) or preload a GLTF with baked animation
+Pros: Real interactivity
+Notes: Heavier; more engineering and performance tuning.
+Designer-friendly interactive vectors → Rive
+Pros: Tiny, timeline + state machine interactivity
+Notes: Best for stylized assets, not photoreal fluids.
+My recommendation for a landing page hero (balance of quality + effort)
+If you want it to look real: Pre-render a short video (Blender/C4D) of ice cubes dropping into tea/coffee → export MP4 + WebM; autoplay muted, loop, playsinline. Add a still poster image.
+If you want lightweight & easily controllable (and a stylized look): Lottie.
+If you later need click/scroll interactions (e.g., cubes fall as user scrolls), layer GSAP (ScrollTrigger) for timelines, or go Canvas/Three.js if you need physics.
+create a game for employees to develop their skills

skillsgame.html ADDED Viewed

	@@ -0,0 +1,122 @@

+<!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">
+            <!-- Communication Card -->
+            <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>
+            <!-- Problem Solving Card -->
+            <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>
+            <!-- Teamwork Card -->
+            <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();
+        // Game functionality would be added here
+        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>