Spaces:

emolivera
/

artecno

Running

App Files Files Community

emolivera commited on Apr 30, 2025

Commit

2f48437

verified ·

1 Parent(s): 3f99194

Add 2 files

Browse files

Files changed (2) hide show

index.html +209 -498
prompts.txt +2 -1

index.html CHANGED Viewed

@@ -2,536 +2,247 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
-    <title>Somatic Ghost Catcher</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <style>
-        /* Prevent touch highlighting */
-        * {
-            -webkit-tap-highlight-color: transparent;
-            -webkit-touch-callout: none;
-            -webkit-user-select: none;
-            user-select: none;
-        }
-        .neumorphic-dark {
-            background-color: #2d3748;
-            box-shadow: 8px 8px 15px #1a202c, -8px -8px 15px #404958;
-            border-radius: 15px;
-            color: #e2e8f0;
-        }
-        .neumorphic-dark-inset {
-            background-color: #2d3748;
-            box-shadow: inset 5px 5px 10px #1a202c, inset -5px -5px 10px #404958;
-            border-radius: 15px;
-        }
-        .neumorphic-button {
-            background-color: #2d3748;
-            box-shadow: 5px 5px 10px #1a202c, -5px -5px 10px #404958;
-            border-radius: 10px;
-            transition: all 0.2s ease;
         }
-        .neumorphic-button:active {
-            box-shadow: inset 3px 3px 6px #1a202c, inset -3px -3px 6px #404958;
-        }
-        .game-container {
-            position: relative;
-            width: 100%;
-            height: 60vh;
-            min-height: 300px;
-            overflow: hidden;
-            border-radius: 15px;
-            touch-action: none;
-        }
-        #gameCanvas {
-            background-color: #1a202c;
-            width: 100%;
-            height: 100%;
-            display: block;
         }
-        .joystick {
-            position: absolute;
-            width: 80px;
-            height: 80px;
-            background: rgba(45, 55, 72, 0.7);
-            border-radius: 50%;
-            box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            z-index: 10;
-            touch-action: none;
         }
-        .joystick-knob {
-            width: 40px;
-            height: 40px;
-            background: #4a5568;
-            border-radius: 50%;
-            box-shadow: inset 3px 3px 5px rgba(0, 0, 0, 0.2);
         }
-        .progress-container {
-            width: 100%;
-            height: 10px;
-            background-color: #1a202c;
-            border-radius: 5px;
-            overflow: hidden;
         }
-        .progress-bar {
-            height: 100%;
-            background: linear-gradient(90deg, #9f7aea, #667eea);
-            transition: width 0.3s ease;
         }
-        .orientation-warning {
-            display: none;
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            background-color: rgba(0, 0, 0, 0.9);
-            color: white;
-            z-index: 100;
-            flex-direction: column;
-            justify-content: center;
-            align-items: center;
-            padding: 20px;
-            text-align: center;
         }
-        @media (max-width: 640px) {
-            .joystick {
-                width: 70px;
-                height: 70px;
-            }
-            .joystick-knob {
-                width: 35px;
-                height: 35px;
-            }
         }
     </style>
 </head>
-<body class="bg-gray-900 min-h-screen flex flex-col items-center justify-center p-4">
-    <div class="orientation-warning" id="orientationWarning">
-        <svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
-        </svg>
-        <h2 class="text-2xl font-bold mb-4">Device Orientation Required</h2>
-        <p class="mb-6">This game requires access to your device's motion sensors for tilt controls.</p>
-        <button id="requestPermissionBtn" class="neumorphic-button px-6 py-3 text-gray-200 font-medium">
-            Enable Motion Sensors
-        </button>
-        <p class="mt-4 text-gray-400 text-sm">If the button doesn't work, try tapping anywhere on the screen first</p>
-    </div>
-    <div class="w-full max-w-3xl">
-        <header class="flex items-center justify-between mb-8 p-4 neumorphic-dark">
-            <div class="flex items-center">
-                <div class="h-12 w-12 mr-4 flex items-center justify-center bg-purple-500 rounded-lg">
-                    <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z" />
-                    </svg>
                 </div>
-                <h1 class="text-2xl font-bold text-gray-200">Somatic Ghost Catcher</h1>
             </div>
-            <div class="text-gray-400 text-sm">
-                Level <span id="levelDisplay">1</span>
             </div>
-        </header>
-        <div class="mb-6 p-4 neumorphic-dark">
-            <div class="flex justify-between items-center mb-2">
-                <span class="text-gray-300">Progress</span>
-                <span id="scoreDisplay" class="text-gray-300">0%</span>
             </div>
-            <div class="progress-container">
-                <div id="progressBar" class="progress-bar" style="width: 0%"></div>
             </div>
-        </div>
-        <div class="game-container neumorphic-dark-inset mb-6">
-            <canvas id="gameCanvas"></canvas>
-            <div id="joystick" class="joystick" style="bottom: 20px; right: 20px;">
-                <div class="joystick-knob"></div>
             </div>
-        </div>
-        <div class="p-4 neumorphic-dark">
-            <div class="grid grid-cols-2 gap-4">
-                <div class="text-center">
-                    <p class="text-gray-400 mb-1">Device Tilt</p>
-                    <div class="neumorphic-dark-inset p-3 rounded-lg">
-                        <p id="tiltInfo" class="text-gray-300">X: 0°<br>Y: 0°</p>
                     </div>
-                </div>
-                <div class="text-center">
-                    <p class="text-gray-400 mb-1">Ghost Distance</p>
-                    <div class="neumorphic-dark-inset p-3 rounded-lg">
-                        <p id="distanceInfo" class="text-gray-300">0 units</p>
                     </div>
                 </div>
             </div>
         </div>
-        <div class="mt-6 flex justify-center">
-            <button id="startBtn" class="neumorphic-button px-6 py-3 text-gray-200 font-medium">
-                Start Game
             </button>
         </div>
     </div>
     <script>
-        // Game variables
-        let canvas, ctx;
-        let gameRunning = false;
-        let score = 0;
-        let level = 1;
-        let ghost = { x: 0, y: 0, size: 30, speed: 2, dx: 0, dy: 0 };
-        let player = { x: 0, y: 0, size: 20 };
-        let joystickActive = false;
-        let joystickVector = { x: 0, y: 0 };
-        let deviceOrientation = { beta: 0, gamma: 0 };
-        let lastUpdateTime = 0;
-        const ghostColors = ['#9F7AEA', '#667EEA', '#F687B3', '#F6AD55', '#68D391'];
-        let currentGhostColor = ghostColors[0];
-        let animationFrameId = null;
-        let hasPermission = false;
-        // DOM elements
-        const startBtn = document.getElementById('startBtn');
-        const scoreDisplay = document.getElementById('scoreDisplay');
-        const progressBar = document.getElementById('progressBar');
-        const levelDisplay = document.getElementById('levelDisplay');
-        const tiltInfo = document.getElementById('tiltInfo');
-        const distanceInfo = document.getElementById('distanceInfo');
-        const orientationWarning = document.getElementById('orientationWarning');
-        const requestPermissionBtn = document.getElementById('requestPermissionBtn');
-        const joystick = document.getElementById('joystick');
-        const joystickKnob = document.querySelector('.joystick-knob');
-        // Initialize game
-        function initGame() {
-            canvas = document.getElementById('gameCanvas');
-            ctx = canvas.getContext('2d');
-            // Set canvas dimensions
-            resizeCanvas();
-            window.addEventListener('resize', resizeCanvas);
-            // Initialize positions
-            resetGame();
-            // Event listeners
-            startBtn.addEventListener('click', startGame);
-            // Joystick controls for desktop/touch
-            setupJoystick();
-            // Check for device orientation support
-            if (window.DeviceOrientationEvent) {
-                // iOS 13+ requires permission
-                if (typeof DeviceOrientationEvent.requestPermission === 'function') {
-                    orientationWarning.style.display = 'flex';
-                    requestPermissionBtn.addEventListener('click', requestOrientationPermission);
-                    // Also allow clicking anywhere to request permission (iOS quirk)
-                    document.addEventListener('click', requestOrientationPermission, { once: true });
-                } else {
-                    // Other browsers that don't require permission
-                    window.addEventListener('deviceorientation', handleOrientation);
-                    hasPermission = true;
-                }
             } else {
-                console.log('Device orientation not supported');
-                orientationWarning.querySelector('p').textContent = 'Your device does not support motion controls. You can still play with the virtual joystick.';
-                requestPermissionBtn.style.display = 'none';
-                orientationWarning.style.display = 'flex';
-            }
-        }
-        // Request permission for device orientation (iOS 13+)
-        async function requestOrientationPermission() {
-            try {
-                const permissionState = await DeviceOrientationEvent.requestPermission();
-                if (permissionState === 'granted') {
-                    window.addEventListener('deviceorientation', handleOrientation);
-                    hasPermission = true;
-                    orientationWarning.style.display = 'none';
-                    startGame();
-                } else {
-                    orientationWarning.querySelector('p').textContent = 'Permission was denied. You can still play with the virtual joystick.';
-                    requestPermissionBtn.style.display = 'none';
-                }
-            } catch (error) {
-                console.error('Error requesting permission:', error);
-                orientationWarning.querySelector('p').textContent = 'Error requesting permission. You can still play with the virtual joystick.';
-                requestPermissionBtn.style.display = 'none';
             }
         }
-        // Resize canvas to fit container
-        function resizeCanvas() {
-            const container = document.querySelector('.game-container');
-            canvas.width = container.clientWidth;
-            canvas.height = container.height;
-            // Reset positions if game is running
-            if (gameRunning) {
-                player.x = canvas.width / 2;
-                player.y = canvas.height / 2;
-                placeGhost();
-            }
-        }
-        // Reset game state
-        function resetGame() {
-            score = 0;
-            level = 1;
-            updateUI();
-            // Center player
-            player.x = canvas.width / 2;
-            player.y = canvas.height / 2;
-            // Place ghost randomly
-            placeGhost();
-            // Set initial ghost color
-            currentGhostColor = ghostColors[level - 1];
-        }
-        // Place ghost at random position
-        function placeGhost() {
-            const margin = 50;
-            ghost.x = margin + Math.random() * (canvas.width - 2 * margin);
-            ghost.y = margin + Math.random() * (canvas.height - 2 * margin);
-            // Random direction
-            const angle = Math.random() * Math.PI * 2;
-            ghost.dx = Math.cos(angle) * ghost.speed;
-            ghost.dy = Math.sin(angle) * ghost.speed;
-            currentGhostColor = ghostColors[level - 1];
-        }
-        // Start the game
-        function startGame() {
-            if (gameRunning) {
-                // If game is already running, reset it
-                cancelAnimationFrame(animationFrameId);
-                gameRunning = false;
-                resetGame();
-            }
-            gameRunning = true;
-            startBtn.textContent = 'Restart Game';
-            lastUpdateTime = performance.now();
-            // Start game loop
-            gameLoop();
-        }
-        // Game loop
-        function gameLoop(timestamp) {
-            if (!gameRunning) return;
-            animationFrameId = requestAnimationFrame(gameLoop);
-            // Calculate delta time for smooth movement
-            const deltaTime = timestamp - lastUpdateTime;
-            lastUpdateTime = timestamp;
-            // Clear canvas
-            ctx.clearRect(0, 0, canvas.width, canvas.height);
-            // Update game state
-            updateGame(deltaTime);
-            // Draw game elements
-            drawGame();
-        }
-        // Update game state
-        function updateGame(deltaTime) {
-            // Normalize delta time to 60fps reference
-            const timeFactor = deltaTime / (1000 / 60);
-            // Move ghost
-            ghost.x += ghost.dx * timeFactor;
-            ghost.y += ghost.dy * timeFactor;
-            // Bounce ghost off walls
-            if (ghost.x < ghost.size / 2 || ghost.x > canvas.width - ghost.size / 2) {
-                ghost.dx *= -1;
-            }
-            if (ghost.y < ghost.size / 2 || ghost.y > canvas.height - ghost.size / 2) {
-                ghost.dy *= -1;
-            }
-            // Move player based on joystick or device tilt
-            const moveSpeed = 4 * timeFactor;
-            // Use joystick if active, otherwise use device tilt if permission granted
-            if (joystickActive) {
-                player.x += joystickVector.x * moveSpeed;
-                player.y += joystickVector.y * moveSpeed;
-            } else if (hasPermission) {
-                // Map device tilt to movement (gamma for x, beta for y)
-                const tiltX = deviceOrientation.gamma / 30; // Normalize
-                const tiltY = deviceOrientation.beta / 30; // Normalize
-                player.x += tiltX * moveSpeed;
-                player.y += tiltY * moveSpeed;
-                // Update tilt display
-                tiltInfo.textContent = `X: ${Math.round(deviceOrientation.gamma)}°\nY: ${Math.round(deviceOrientation.beta)}°`;
-            }
-            // Keep player within bounds
-            player.x = Math.max(player.size / 2, Math.min(canvas.width - player.size / 2, player.x));
-            player.y = Math.max(player.size / 2, Math.min(canvas.height - player.size / 2, player.y));
-            // Check collision with ghost
-            const dx = player.x - ghost.x;
-            const dy = player.y - ghost.y;
-            const distance = Math.sqrt(dx * dx + dy * dy);
-            // Update distance display
-            distanceInfo.textContent = `${Math.round(distance)} units`;
-            if (distance < (player.size + ghost.size) / 2) {
-                // Caught the ghost!
-                score += 10;
-                // Level up every 50 points
-                if (score % 50 === 0) {
-                    level++;
-                    ghost.speed += 0.5;
-                    levelDisplay.textContent = level;
-                    currentGhostColor = ghostColors[Math.min(level - 1, ghostColors.length - 1)];
-                }
-                updateUI();
-                placeGhost();
-            }
-        }
-        // Draw game elements
-        function drawGame() {
-            // Draw player
-            ctx.fillStyle = '#E2E8F0';
-            ctx.beginPath();
-            ctx.arc(player.x, player.y, player.size / 2, 0, Math.PI * 2);
-            ctx.fill();
-            // Draw ghost
-            ctx.fillStyle = currentGhostColor;
-            ctx.beginPath();
-            ctx.arc(ghost.x, ghost.y, ghost.size / 2, 0, Math.PI * 2);
-            ctx.fill();
-            // Draw glow around ghost
-            const gradient = ctx.createRadialGradient(
-                ghost.x, ghost.y, ghost.size / 2,
-                ghost.x, ghost.y, ghost.size
-            );
-            gradient.addColorStop(0, currentGhostColor);
-            gradient.addColorStop(1, 'transparent');
-            ctx.fillStyle = gradient;
-            ctx.beginPath();
-            ctx.arc(ghost.x, ghost.y, ghost.size, 0, Math.PI * 2);
-            ctx.fill();
-        }
-        // Update UI elements
-        function updateUI() {
-            scoreDisplay.textContent = `${score}%`;
-            progressBar.style.width = `${Math.min(score, 100)}%`;
-        }
-        // Handle device orientation
-        function handleOrientation(event) {
-            deviceOrientation.beta = event.beta; // Front-to-back tilt (y-axis)
-            deviceOrientation.gamma = event.gamma; // Left-to-right tilt (x-axis)
-        }
-        // Setup virtual joystick
-        function setupJoystick() {
-            let joystickStartX, joystickStartY;
-            let joystickCenterX, joystickCenterY;
-            joystick.addEventListener('touchstart', handleJoystickStart);
-            joystick.addEventListener('mousedown', handleJoystickStart);
-            document.addEventListener('touchmove', handleJoystickMove);
-            document.addEventListener('mousemove', handleJoystickMove);
-            document.addEventListener('touchend', handleJoystickEnd);
-            document.addEventListener('mouseup', handleJoystickEnd);
-            function handleJoystickStart(e) {
-                e.preventDefault();
-                joystickActive = true;
-                const rect = joystick.getBoundingClientRect();
-                joystickCenterX = rect.left + rect.width / 2;
-                joystickCenterY = rect.top + rect.height / 2;
-                if (e.type === 'mousedown') {
-                    joystickStartX = e.clientX;
-                    joystickStartY = e.clientY;
-                } else if (e.touches) {
-                    joystickStartX = e.touches[0].clientX;
-                    joystickStartY = e.touches[0].clientY;
-                }
-            }
-            function handleJoystickMove(e) {
-                if (!joystickActive) return;
-                e.preventDefault();
-                let clientX, clientY;
-                if (e.type === 'mousemove') {
-                    clientX = e.clientX;
-                    clientY = e.clientY;
-                } else if (e.touches) {
-                    clientX = e.touches[0].clientX;
-                    clientY = e.touches[0].clientY;
-                }
-                const dx = clientX - joystickStartX;
-                const dy = clientY - joystickStartY;
-                const distance = Math.sqrt(dx * dx + dy * dy);
-                const maxDistance = 40;
-                // Calculate joystick vector (normalized)
-                if (distance > maxDistance) {
-                    joystickVector.x = dx / distance;
-                    joystickVector.y = dy / distance;
-                } else {
-                    joystickVector.x = dx / maxDistance;
-                    joystickVector.y = dy / maxDistance;
-                }
-                // Move joystick knob
-                const knobX = Math.min(maxDistance, Math.max(-maxDistance, dx)) * 0.7;
-                const knobY = Math.min(maxDistance, Math.max(-maxDistance, dy)) * 0.7;
-                joystickKnob.style.transform = `translate(${knobX}px, ${knobY}px)`;
-            }
-            function handleJoystickEnd(e) {
-                if (!joystickActive) return;
-                e.preventDefault();
-                joystickActive = false;
-                joystickVector.x = 0;
-                joystickVector.y = 0;
-                joystickKnob.style.transform = 'translate(0, 0)';
-            }
-        }
-        // Initialize the game when DOM is loaded
-        document.addEventListener('DOMContentLoaded', initGame);
     </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=emolivera/artecno" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>

 <html lang="en">
 <head>
     <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Somatic Learning App Concept</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>
+        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+        body {
+            font-family: 'Inter', sans-serif;
+            background-color: #f8f9fa;
         }
+        .sensor-feedback {
+            animation: pulse 2s infinite;
         }
+        @keyframes pulse {
+            0% { transform: scale(1); }
+            50% { transform: scale(1.05); }
+            100% { transform: scale(1); }
         }
+        .progress-ring {
+            transform: rotate(-90deg);
         }
+        .progress-ring__circle {
+            transition: stroke-dashoffset 0.5s;
         }
+        .microinteraction:hover {
+            transform: translateY(-2px);
+            transition: all 0.2s ease;
         }
+        .haptic-feedback:active {
+            animation: haptic 0.3s;
         }
+        @keyframes haptic {
+            0% { transform: scale(1); }
+            50% { transform: scale(0.98); }
+            100% { transform: scale(1); }
         }
     </style>
 </head>
+<body class="min-h-screen flex items-center justify-center p-4">
+    <div class="w-full max-w-md mx-auto bg-white rounded-3xl shadow-xl overflow-hidden">
+        <!-- App Header -->
+        <div class="bg-indigo-600 text-white p-6">
+            <div class="flex justify-between items-center">
+                <div>
+                    <h1 class="text-2xl font-bold">SomaLearn</h1>
+                    <p class="text-indigo-100 text-sm">Body-aware learning</p>
+                </div>
+                <div class="flex space-x-3">
+                    <button class="microinteraction w-10 h-10 rounded-full bg-indigo-500 flex items-center justify-center">
+                        <i class="fas fa-user"></i>
+                    </button>
+                    <button class="microinteraction w-10 h-10 rounded-full bg-indigo-500 flex items-center justify-center">
+                        <i class="fas fa-cog"></i>
+                    </button>
                 </div>
             </div>
+        </div>
+        <!-- Main Content -->
+        <div class="p-6">
+            <!-- Sensor Feedback Area -->
+            <div class="sensor-feedback mb-8 bg-indigo-50 rounded-2xl p-6 text-center">
+                <div class="relative w-40 h-40 mx-auto mb-4">
+                    <svg class="progress-ring w-full h-full" viewBox="0 0 100 100">
+                        <circle class="progress-ring__circle stroke-indigo-200" stroke-width="8" fill="transparent" r="40" cx="50" cy="50"/>
+                        <circle class="progress-ring__circle stroke-indigo-600" stroke-width="8" fill="transparent" r="40" cx="50" cy="50" stroke-dasharray="251.2" stroke-dashoffset="125.6"/>
+                    </svg>
+                    <div class="absolute inset-0 flex flex-col items-center justify-center">
+                        <i class="fas fa-hand-holding-heart text-3xl text-indigo-600 mb-2"></i>
+                        <span class="text-sm font-medium text-indigo-800">Body Position</span>
+                        <span class="text-xs text-indigo-500">75% optimal</span>
+                    </div>
+                </div>
+                <p class="text-sm text-indigo-800">Adjust your posture to match the demonstration</p>
             </div>
+            <!-- Microlearning Card -->
+            <div class="haptic-feedback bg-white rounded-xl shadow-md p-5 mb-6 border border-gray-100">
+                <div class="flex items-start mb-4">
+                    <div class="bg-indigo-100 p-3 rounded-lg mr-4">
+                        <i class="fas fa-running text-indigo-600"></i>
+                    </div>
+                    <div>
+                        <h3 class="font-semibold text-gray-800">Posture Alignment</h3>
+                        <p class="text-sm text-gray-600">Keep your spine neutral and shoulders relaxed</p>
+                    </div>
+                </div>
+                <div class="flex justify-between items-center">
+                    <div class="flex space-x-1">
+                        <span class="text-xs px-2 py-1 bg-indigo-100 text-indigo-700 rounded-full">2 min</span>
+                        <span class="text-xs px-2 py-1 bg-green-100 text-green-700 rounded-full">Beginner</span>
+                    </div>
+                    <button class="microinteraction px-4 py-2 bg-indigo-600 text-white rounded-lg text-sm font-medium">
+                        Start Practice
+                    </button>
+                </div>
             </div>
+            <!-- Progress Section -->
+            <div class="mb-6">
+                <div class="flex justify-between items-center mb-2">
+                    <h3 class="font-medium text-gray-800">Today's Progress</h3>
+                    <span class="text-sm text-indigo-600">60% complete</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: 60%"></div>
+                </div>
             </div>
+            <!-- Quick Actions -->
+            <div class="grid grid-cols-4 gap-3 mb-6">
+                <button class="haptic-feedback microinteraction flex flex-col items-center justify-center p-3 bg-gray-50 rounded-xl">
+                    <i class="fas fa-book text-indigo-600 mb-1"></i>
+                    <span class="text-xs text-gray-700">Library</span>
+                </button>
+                <button class="haptic-feedback microinteraction flex flex-col items-center justify-center p-3 bg-gray-50 rounded-xl">
+                    <i class="fas fa-chart-line text-indigo-600 mb-1"></i>
+                    <span class="text-xs text-gray-700">Stats</span>
+                </button>
+                <button class="haptic-feedback microinteraction flex flex-col items-center justify-center p-3 bg-gray-50 rounded-xl">
+                    <i class="fas fa-video text-indigo-600 mb-1"></i>
+                    <span class="text-xs text-gray-700">Demo</span>
+                </button>
+                <button class="haptic-feedback microinteraction flex flex-col items-center justify-center p-3 bg-gray-50 rounded-xl">
+                    <i class="fas fa-trophy text-indigo-600 mb-1"></i>
+                    <span class="text-xs text-gray-700">Rewards</span>
+                </button>
             </div>
+            <!-- Upcoming Exercises -->
+            <div>
+                <h3 class="font-medium text-gray-800 mb-3">Next Exercises</h3>
+                <div class="space-y-3">
+                    <div class="haptic-feedback microinteraction flex items-center p-3 bg-gray-50 rounded-lg">
+                        <div class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center mr-3">
+                            <i class="fas fa-walking text-indigo-600"></i>
+                        </div>
+                        <div class="flex-1">
+                            <h4 class="text-sm font-medium text-gray-800">Walking Meditation</h4>
+                            <p class="text-xs text-gray-500">Mindful movement practice</p>
+                        </div>
+                        <i class="fas fa-chevron-right text-gray-400"></i>
                     </div>
+                    <div class="haptic-feedback microinteraction flex items-center p-3 bg-gray-50 rounded-lg">
+                        <div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center mr-3">
+                            <i class="fas fa-lungs text-purple-600"></i>
+                        </div>
+                        <div class="flex-1">
+                            <h4 class="text-sm font-medium text-gray-800">Breath Control</h4>
+                            <p class="text-xs text-gray-500">Diaphragmatic breathing</p>
+                        </div>
+                        <i class="fas fa-chevron-right text-gray-400"></i>
                     </div>
                 </div>
             </div>
         </div>
+        <!-- Bottom Navigation -->
+        <div class="flex justify-around items-center p-4 bg-white border-t border-gray-200">
+            <button class="microinteraction flex flex-col items-center text-indigo-600">
+                <i class="fas fa-home"></i>
+                <span class="text-xs mt-1">Home</span>
+            </button>
+            <button class="microinteraction flex flex-col items-center text-gray-500">
+                <i class="fas fa-compass"></i>
+                <span class="text-xs mt-1">Explore</span>
+            </button>
+            <button class="microinteraction flex flex-col items-center text-gray-500">
+                <i class="fas fa-calendar-alt"></i>
+                <span class="text-xs mt-1">Schedule</span>
+            </button>
+            <button class="microinteraction flex flex-col items-center text-gray-500">
+                <i class="fas fa-inbox"></i>
+                <span class="text-xs mt-1">Inbox</span>
             </button>
         </div>
     </div>
     <script>
+        // Simulate sensor feedback
+        const sensorFeedback = document.querySelector('.sensor-feedback');
+        const progressCircle = document.querySelector('.progress-ring__circle');
+        // Random progress for demo purposes
+        function updateSensorFeedback() {
+            const randomProgress = Math.floor(Math.random() * 60) + 20;
+            const offset = 251.2 - (251.2 * randomProgress / 100);
+            progressCircle.style.strokeDashoffset = offset;
+            // Update text
+            const feedbackText = sensorFeedback.querySelector('p:last-child');
+            const feedbackOptions = [
+                "Great job! Maintain this position",
+                "Small adjustment needed in your shoulders",
+                "Focus on your breathing pattern",
+                "Relax your jaw muscles",
+                "Shift weight slightly to your left"
+            ];
+            feedbackText.textContent = feedbackOptions[Math.floor(Math.random() * feedbackOptions.length)];
+            // Change color based on progress
+            if(randomProgress > 70) {
+                progressCircle.classList.remove('stroke-indigo-600');
+                progressCircle.classList.add('stroke-green-500');
+            } else if(randomProgress > 40) {
+                progressCircle.classList.remove('stroke-green-500', 'stroke-red-500');
+                progressCircle.classList.add('stroke-indigo-600');
             } else {
+                progressCircle.classList.remove('stroke-indigo-600');
+                progressCircle.classList.add('stroke-red-500');
             }
         }
+        // Update every 3 seconds to simulate real-time feedback
+        setInterval(updateSensorFeedback, 3000);
+        // Add microinteractions to all buttons
+        document.querySelectorAll('.microinteraction').forEach(button => {
+            button.addEventListener('click', function() {
+                this.classList.add('active');
+                setTimeout(() => this.classList.remove('active'), 200);
+            });
+        });
+        // Haptic feedback simulation
+        document.querySelectorAll('.haptic-feedback').forEach(element => {
+            element.addEventListener('click', function() {
+                this.style.boxShadow = '0 0 0 3px rgba(99, 102, 241, 0.3)';
+                setTimeout(() => {
+                    this.style.boxShadow = 'none';
+                }, 300);
+            });
+        });
     </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=emolivera/artecno" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>

prompts.txt CHANGED Viewed

@@ -1,3 +1,4 @@
 device tilt not working, optimize for mobile
 check why it doesnt start game
-it doesnt work, browser blocks. sensor

 device tilt not working, optimize for mobile
 check why it doesnt start game
+it doesnt work, browser blocks. sensor
+Your role is that of a User Experience (UX) Design Consultant for a mobile app development project. The task at hand is to refine and enhance the concept of a testing app that utilizes microlearning and microinteraction principles. This involves designing a user-friendly interface, identifying key features, and suggesting ways to effectively incorporate microlearning and microinteraction. You should consider the app's target audience, its purpose, and how it can engage users in a testing environment. The initial concept to work with is "device geared somatic learning." Please provide detailed recommendations to improve this concept. Remember, your responses should be specific to UX design and app development.