Spaces:

Marquesduque
/

eng

Running

App Files Files Community

Marquesduque commited on Apr 29, 2025

Commit

10bda5a

verified ·

1 Parent(s): d2f6889

Add 3 files

Browse files

Files changed (3) hide show

README.md +7 -5
index.html +915 -19
prompts.txt +5 -0

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Eng
-emoji: 📉
-colorFrom: gray
-colorTo: indigo
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: eng
+emoji: 🐳
+colorFrom: red
+colorTo: gray
 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 +1,915 @@
-<!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>

+<!DOCTYPE html>
+<html lang="pt-br">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Cacau Adventure - Jogo de Treinamento</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=Poppins:wght@400;600;700&display=swap');
+        body {
+            font-family: 'Poppins', sans-serif;
+            overflow-x: hidden;
+            background-color: #f5f5f5;
+        }
+        .game-container {
+            position: relative;
+            height: 100vh;
+            width: 100%;
+            overflow: hidden;
+            background: linear-gradient(to bottom, #FFF3E0, #FFE0B2);
+        }
+        .platform {
+            position: absolute;
+            background: linear-gradient(to right, #5D4037, #8D6E63);
+            border-radius: 10px;
+            box-shadow: 0 4px 8px rgba(0,0,0,0.3);
+        }
+        .character {
+            position: absolute;
+            width: 60px;
+            height: 80px;
+            transition: all 0.3s ease;
+            z-index: 10;
+        }
+        .chocolate {
+            position: absolute;
+            width: 30px;
+            height: 30px;
+            background: linear-gradient(to bottom, #5D4037, #3E2723);
+            border-radius: 5px;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.3);
+            z-index: 5;
+        }
+        .customer {
+            position: absolute;
+            width: 40px;
+            height: 60px;
+            background: linear-gradient(to bottom, #4FC3F7, #0288D1);
+            border-radius: 5px 5px 0 0;
+            z-index: 5;
+            display: flex;
+            justify-content: center;
+        }
+        .customer:after {
+            content: "";
+            position: absolute;
+            top: -10px;
+            width: 20px;
+            height: 10px;
+            background: #FFCDD2;
+            border-radius: 50% 50% 0 0;
+        }
+        .checkpoint {
+            position: absolute;
+            width: 40px;
+            height: 40px;
+            background: radial-gradient(circle, #FFD700, #FFC400);
+            border-radius: 50%;
+            box-shadow: 0 0 10px #FFD700;
+            z-index: 5;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: white;
+            font-weight: bold;
+        }
+        .level-indicator {
+            position: fixed;
+            top: 20px;
+            left: 20px;
+            background: rgba(255, 255, 255, 0.9);
+            padding: 10px 15px;
+            border-radius: 20px;
+            font-weight: bold;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            z-index: 100;
+            display: flex;
+            align-items: center;
+        }
+        .progress-container {
+            position: fixed;
+            top: 20px;
+            left: 50%;
+            transform: translateX(-50%);
+            width: 60%;
+            background: rgba(255, 255, 255, 0.9);
+            padding: 8px 15px;
+            border-radius: 20px;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            z-index: 100;
+        }
+        .progress-bar {
+            height: 10px;
+            background: #E0E0E0;
+            border-radius: 5px;
+            overflow: hidden;
+            margin-top: 5px;
+        }
+        .progress-fill {
+            height: 100%;
+            background: linear-gradient(to right, #FF9800, #F57C00);
+            transition: width 0.3s ease;
+        }
+        .challenge-popup {
+            position: fixed;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            background: white;
+            padding: 20px;
+            border-radius: 15px;
+            box-shadow: 0 8px 30px rgba(0,0,0,0.2);
+            z-index: 200;
+            width: 90%;
+            max-width: 500px;
+            max-height: 90vh;
+            overflow-y: auto;
+            animation: fadeIn 0.3s ease-out;
+        }
+        .customer-popup {
+            position: fixed;
+            bottom: 20px;
+            left: 50%;
+            transform: translateX(-50%);
+            background: white;
+            padding: 15px;
+            border-radius: 10px;
+            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
+            z-index: 100;
+            max-width: 90%;
+            text-align: center;
+            animation: slideUp 0.3s ease-out;
+        }
+        @keyframes slideUp {
+            from { transform: translate(-50%, 100px); opacity: 0; }
+            to { transform: translate(-50%, 0); opacity: 1; }
+        }
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translate(-50%, -40%); }
+            to { opacity: 1; transform: translate(-50%, -50%); }
+        }
+        .jump-animation {
+            animation: jump 0.5s ease;
+        }
+        @keyframes jump {
+            0% { transform: translateY(0); }
+            50% { transform: translateY(-50px); }
+            100% { transform: translateY(0); }
+        }
+        .collect-animation {
+            animation: collect 0.5s ease forwards;
+        }
+        @keyframes collect {
+            0% { transform: scale(1); }
+            50% { transform: scale(1.5); }
+            100% { transform: scale(0); opacity: 0; }
+        }
+        .completed-level {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            background: rgba(76, 175, 80, 0.9);
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            color: white;
+            z-index: 150;
+            animation: fadeIn 0.5s ease;
+        }
+        .feedback-form {
+            background: white;
+            padding: 20px;
+            border-radius: 10px;
+            width: 90%;
+            max-width: 500px;
+            margin-top: 20px;
+        }
+        .hidden {
+            display: none !important;
+        }
+        .shake {
+            animation: shake 0.5s;
+        }
+        @keyframes shake {
+            0%, 100% { transform: translateX(0); }
+            10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
+            20%, 40%, 60%, 80% { transform: translateX(5px); }
+        }
+        .floating {
+            animation: floating 3s ease-in-out infinite;
+        }
+        @keyframes floating {
+            0%, 100% { transform: translateY(0); }
+            50% { transform: translateY(-10px); }
+        }
+    </style>
+</head>
+<body>
+    <div class="game-container" id="gameContainer">
+        <div class="level-indicator">
+            <i class="fas fa-star mr-2 text-yellow-500"></i>
+            <span>Nível: <span id="currentLevel">1</span> - <span id="levelName">Loja de Chocolate</span></span>
+        </div>
+        <div class="progress-container">
+            <div class="flex justify-between text-sm font-medium">
+                <span>Progresso: <span id="collectedItems">0</span>/<span id="totalItems">0</span></span>
+                <span>Pontos: <span id="points">0</span></span>
+            </div>
+            <div class="progress-bar">
+                <div class="progress-fill" id="progressFill" style="width: 0%"></div>
+            </div>
+        </div>
+        <!-- Character -->
+        <div class="character" id="character">
+            <img src="https://i.imgur.com/JQl5bYt.png" alt="Cacau Show Mascote" style="width:100%;height:100%;object-fit:contain;">
+        </div>
+        <!-- Platforms, items and customers will be added dynamically -->
+    </div>
+    <!-- Challenge Popup -->
+    <div class="challenge-popup hidden" id="challengePopup">
+        <h3 class="font-bold text-xl mb-3 text-center" id="challengeTitle">Desafio do Chocolate</h3>
+        <p class="text-sm mb-4 text-center text-gray-600" id="challengeDescription">Responda corretamente para continuar!</p>
+        <div id="challengeContent" class="mb-4"></div>
+        <div class="flex justify-center">
+            <button onclick="completeChallenge()" class="bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-6 rounded-full text-sm">
+                <i class="fas fa-check mr-2"></i>Confirmar Resposta
+            </button>
+        </div>
+    </div>
+    <!-- Customer Interaction Popup -->
+    <div class="customer-popup hidden" id="customerPopup">
+        <h3 class="font-bold text-lg mb-2" id="customerTitle">Atendimento ao Cliente</h3>
+        <p class="text-sm mb-3" id="customerQuestion">Como posso ajudar?</p>
+        <div id="customerOptions" class="space-y-2"></div>
+    </div>
+    <!-- Feedback Form -->
+    <div class="challenge-popup hidden" id="feedbackPopup">
+        <h3 class="font-bold text-xl mb-3 text-center">Feedback do Treinamento</h3>
+        <p class="text-sm mb-4 text-center text-gray-600">Ajude-nos a melhorar sua experiência!</p>
+        <div class="space-y-4">
+            <div>
+                <label class="block text-sm font-medium text-gray-700 mb-1">Como você avalia este treinamento?</label>
+                <div class="flex justify-between text-2xl">
+                    <i class="fas fa-star text-gray-300 hover:text-yellow-400 cursor-pointer" data-rating="1"></i>
+                    <i class="fas fa-star text-gray-300 hover:text-yellow-400 cursor-pointer" data-rating="2"></i>
+                    <i class="fas fa-star text-gray-300 hover:text-yellow-400 cursor-pointer" data-rating="3"></i>
+                    <i class="fas fa-star text-gray-300 hover:text-yellow-400 cursor-pointer" data-rating="4"></i>
+                    <i class="fas fa-star text-gray-300 hover:text-yellow-400 cursor-pointer" data-rating="5"></i>
+                </div>
+            </div>
+            <div>
+                <label for="feedbackText" class="block text-sm font-medium text-gray-700 mb-1">Comentários ou sugestões:</label>
+                <textarea id="feedbackText" rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-amber-500"></textarea>
+            </div>
+            <div class="flex justify-center">
+                <button onclick="submitFeedback()" class="bg-amber-600 hover:bg-amber-700 text-white font-bold py-2 px-6 rounded-full text-sm">
+                    <i class="fas fa-paper-plane mr-2"></i>Enviar Feedback
+                </button>
+            </div>
+        </div>
+    </div>
+    <script>
+        // Game variables
+        let currentLevel = 1;
+        let characterPosition = { x: 50, y: 100 };
+        let gameSpeed = 5;
+        let scrollPosition = 0;
+        let maxScroll = 3000;
+        let collectedItems = 0;
+        let totalItems = 0;
+        let points = 0;
+        let currentChallenge = null;
+        let currentCustomer = null;
+        let gameRunning = true;
+        let selectedRating = 0;
+        // Level data - focused on Cacau Show training
+        const levels = [
+            {
+                name: "Loja de Chocolate",
+                platforms: [
+                    { x: 0, y: 150, width: 300, height: 20 },
+                    { x: 350, y: 250, width: 200, height: 20 },
+                    { x: 100, y: 400, width: 250, height: 20 },
+                    { x: 400, y: 550, width: 200, height: 20 }
+                ],
+                chocolates: [
+                    { x: 50, y: 110, type: "product", name: "Bombom Trufado" },
+                    { x: 200, y: 210, type: "product", name: "Ovo de Páscoa" },
+                    { x: 150, y: 360, type: "product", name: "Barra 70%" },
+                    { x: 450, y: 510, type: "product", name: "Brigadeiro" }
+                ],
+                customers: [
+                    {
+                        x: 450, y: 190,
+                        question: "Qual o produto mais vendido da Cacau Show?",
+                        options: [
+                            { text: "Bombom Trufado", correct: true, points: 20 },
+                            { text: "Ovo de Páscoa", correct: false, points: 5 },
+                            { text: "Barra de Chocolate", correct: false, points: 5 }
+                        ]
+                    }
+                ],
+                checkpoints: [
+                    {
+                        x: 450, y: 530,
+                        challenge: {
+                            title: "Conhecimento Básico",
+                            description: "Qual o principal ingrediente do chocolate?",
+                            type: "quiz",
+                            options: ["Açúcar", "Leite", "Cacau", "Fermento"],
+                            answer: 2,
+                            points: 30
+                        }
+                    }
+                ]
+            },
+            {
+                name: "Atendimento ao Cliente",
+                platforms: [
+                    { x: 50, y: 750, width: 200, height: 20 },
+                    { x: 300, y: 900, width: 200, height: 20 },
+                    { x: 100, y: 1050, width: 250, height: 20 },
+                    { x: 350, y: 1200, width: 200, height: 20 }
+                ],
+                chocolates: [
+                    { x: 100, y: 710, type: "knowledge", name: "Temperatura" },
+                    { x: 350, y: 860, type: "knowledge", name: "Validade" },
+                    { x: 200, y: 1010, type: "knowledge", name: "Ingredientes" },
+                    { x: 400, y: 1160, type: "knowledge", name: "Armazenamento" }
+                ],
+                customers: [
+                    {
+                        x: 150, y: 730,
+                        question: "Um cliente pergunta sobre produtos sem lactose. O que fazer?",
+                        options: [
+                            { text: "Indicar apenas produtos com selo 'Sem Lactose'", correct: true, points: 25 },
+                            { text: "Dizer que todos os produtos são seguros", correct: false, points: 0 },
+                            { text: "Recomendar produtos ao leite", correct: false, points: 0 }
+                        ]
+                    },
+                    {
+                        x: 400, y: 880,
+                        question: "Como lidar com um cliente insatisfeito?",
+                        options: [
+                            { text: "Ouvir atentamente e oferecer solução", correct: true, points: 30 },
+                            { text: "Chamar o gerente imediatamente", correct: false, points: 10 },
+                            { text: "Ignorar e continuar atendendo", correct: false, points: 0 }
+                        ]
+                    }
+                ],
+                checkpoints: [
+                    {
+                        x: 400, y: 1180,
+                        challenge: {
+                            title: "Temperatura Ideal",
+                            description: "Qual a temperatura ideal para armazenar chocolate?",
+                            type: "quiz",
+                            options: ["10-15°C", "18-22°C", "25-30°C", "Não importa"],
+                            answer: 1,
+                            points: 40
+                        }
+                    }
+                ]
+            },
+            {
+                name: "Promoções e Vendas",
+                platforms: [
+                    { x: 0, y: 1500, width: 300, height: 20 },
+                    { x: 350, y: 1650, width: 200, height: 20 },
+                    { x: 100, y: 1800, width: 250, height: 20 },
+                    { x: 400, y: 1950, width: 200, height: 20 }
+                ],
+                chocolates: [
+                    { x: 50, y: 1460, type: "promo", name: "Páscoa" },
+                    { x: 200, y: 1610, type: "promo", name: "Dia dos Namorados" },
+                    { x: 150, y: 1760, type: "promo", name: "Natal" },
+                    { x: 450, y: 1910, type: "promo", name: "Aniversário" }
+                ],
+                customers: [
+                    {
+                        x: 250, y: 1480,
+                        question: "Como aumentar o ticket médio das vendas?",
+                        options: [
+                            { text: "Sugerir combos e produtos complementares", correct: true, points: 35 },
+                            { text: "Vender apenas o que o cliente pede", correct: false, points: 5 },
+                            { text: "Oferecer desconto em tudo", correct: false, points: 10 }
+                        ]
+                    },
+                    {
+                        x: 450, y: 1660,
+                        question: "Qual a melhor abordagem para vender na Páscoa?",
+                        options: [
+                            { text: "Destacar os ovos premium e kits presentes", correct: true, points: 40 },
+                            { text: "Esperar o cliente escolher sozinho", correct: false, points: 5 },
+                            { text: "Focar apenas nos produtos mais baratos", correct: false, points: 5 }
+                        ]
+                    }
+                ],
+                checkpoints: [
+                    {
+                        x: 450, y: 1930,
+                        challenge: {
+                            title: "Diferenciais Cacau Show",
+                            description: "Qual desses é um diferencial da Cacau Show?",
+                            type: "quiz",
+                            options: [
+                                "Chocolates artesanais",
+                                "Ingredientes premium",
+                                "Processo próprio de fabricação",
+                                "Todas as alternativas"
+                            ],
+                            answer: 3,
+                            points: 50
+                        }
+                    }
+                ]
+            }
+        ];
+        // Initialize the game
+        function initGame() {
+            const gameContainer = document.getElementById('gameContainer');
+            // Clear previous level elements
+            gameContainer.querySelectorAll('.platform, .chocolate, .customer, .checkpoint, .completed-level').forEach(el => el.remove());
+            // Load current level
+            const level = levels[currentLevel - 1];
+            document.getElementById('currentLevel').textContent = currentLevel;
+            document.getElementById('levelName').textContent = level.name;
+            // Create platforms
+            level.platforms.forEach(platform => {
+                const platformElement = document.createElement('div');
+                platformElement.className = 'platform';
+                platformElement.style.left = `${platform.x}px`;
+                platformElement.style.top = `${platform.y}px`;
+                platformElement.style.width = `${platform.width}px`;
+                platformElement.style.height = `${platform.height}px`;
+                gameContainer.appendChild(platformElement);
+            });
+            // Create chocolates/knowledge items
+            totalItems = level.chocolates.length + level.customers.length;
+            collectedItems = 0;
+            updateProgress();
+            level.chocolates.forEach(item => {
+                const itemElement = document.createElement('div');
+                itemElement.className = 'chocolate floating';
+                itemElement.style.left = `${item.x}px`;
+                itemElement.style.top = `${item.y}px`;
+                itemElement.dataset.type = item.type;
+                itemElement.dataset.name = item.name;
+                gameContainer.appendChild(itemElement);
+            });
+            // Create customers
+            level.customers.forEach(customer => {
+                const customerElement = document.createElement('div');
+                customerElement.className = 'customer';
+                customerElement.style.left = `${customer.x}px`;
+                customerElement.style.top = `${customer.y}px`;
+                customerElement.dataset.question = customer.question;
+                customerElement.dataset.options = JSON.stringify(customer.options);
+                gameContainer.appendChild(customerElement);
+            });
+            // Create checkpoints
+            level.checkpoints.forEach(check => {
+                const checkElement = document.createElement('div');
+                checkElement.className = 'checkpoint floating';
+                checkElement.style.left = `${check.x}px`;
+                checkElement.style.top = `${check.y}px`;
+                checkElement.dataset.challenge = JSON.stringify(check.challenge);
+                gameContainer.appendChild(checkElement);
+            });
+            // Reset character position
+            characterPosition = { x: 50, y: 100 };
+            updateCharacterPosition();
+            // Reset scroll
+            scrollPosition = 0;
+            gameContainer.scrollTop = 0;
+            // Start game loop
+            gameRunning = true;
+            requestAnimationFrame(gameLoop);
+        }
+        // Game loop
+        function gameLoop() {
+            if (!gameRunning) return;
+            const gameContainer = document.getElementById('gameContainer');
+            const character = document.getElementById('character');
+            // Auto-scroll down
+            scrollPosition += gameSpeed;
+            gameContainer.scrollTop = scrollPosition;
+            // Check if level completed
+            if (scrollPosition >= maxScroll) {
+                completeLevel();
+                return;
+            }
+            // Check collisions
+            checkCollisions();
+            // Continue loop
+            requestAnimationFrame(gameLoop);
+        }
+        // Update character position
+        function updateCharacterPosition() {
+            const character = document.getElementById('character');
+            character.style.left = `${characterPosition.x}px`;
+            character.style.top = `${characterPosition.y}px`;
+        }
+        // Handle keyboard controls
+        document.addEventListener('keydown', (e) => {
+            if (!gameRunning) return;
+            const moveAmount = 20;
+            switch(e.key) {
+                case 'ArrowLeft':
+                    characterPosition.x = Math.max(0, characterPosition.x - moveAmount);
+                    character.style.transform = 'scaleX(-1)';
+                    break;
+                case 'ArrowRight':
+                    characterPosition.x = Math.min(window.innerWidth - 60, characterPosition.x + moveAmount);
+                    character.style.transform = 'scaleX(1)';
+                    break;
+                case 'ArrowUp':
+                    // Jump animation
+                    character.classList.add('jump-animation');
+                    setTimeout(() => {
+                        character.classList.remove('jump-animation');
+                    }, 500);
+                    break;
+            }
+            updateCharacterPosition();
+        });
+        // Check collisions with items
+        function checkCollisions() {
+            const character = document.getElementById('character');
+            const charRect = character.getBoundingClientRect();
+            // Check chocolates/knowledge items
+            document.querySelectorAll('.chocolate:not(.collect-animation)').forEach(item => {
+                const itemRect = item.getBoundingClientRect();
+                if (isColliding(charRect, itemRect)) {
+                    // Collect item
+                    item.classList.add('collect-animation');
+                    collectedItems++;
+                    // Add points based on item type
+                    const itemType = item.dataset.type;
+                    const pointsToAdd = itemType === 'product' ? 10 :
+                                        itemType === 'knowledge' ? 15 :
+                                        itemType === 'promo' ? 20 : 10;
+                    addPoints(pointsToAdd);
+                    updateProgress();
+                    // Remove item after animation
+                    setTimeout(() => {
+                        item.remove();
+                    }, 500);
+                }
+            });
+            // Check customers
+            document.querySelectorAll('.customer').forEach(customer => {
+                const customerRect = customer.getBoundingClientRect();
+                if (isColliding(charRect, customerRect) && !currentCustomer && !currentChallenge) {
+                    // Found customer - show interaction
+                    showCustomerInteraction({
+                        question: customer.dataset.question,
+                        options: JSON.parse(customer.dataset.options)
+                    });
+                    // Mark customer as interacted
+                    currentCustomer = customer;
+                    customer.style.background = 'linear-gradient(to bottom, #81C784, #4CAF50)';
+                }
+            });
+            // Check checkpoints
+            document.querySelectorAll('.checkpoint').forEach(check => {
+                const checkRect = check.getBoundingClientRect();
+                if (isColliding(charRect, checkRect) && !currentChallenge && !currentCustomer) {
+                    // Found checkpoint - show challenge
+                    showChallenge(JSON.parse(check.dataset.challenge));
+                }
+            });
+        }
+        // Check if two elements are colliding
+        function isColliding(rect1, rect2) {
+            return !(
+                rect1.right < rect2.left ||
+                rect1.left > rect2.right ||
+                rect1.bottom < rect2.top ||
+                rect1.top > rect2.bottom
+            );
+        }
+        // Show challenge popup
+        function showChallenge(challenge) {
+            currentChallenge = challenge;
+            gameRunning = false;
+            const popup = document.getElementById('challengePopup');
+            const content = document.getElementById('challengeContent');
+            document.getElementById('challengeTitle').textContent = challenge.title;
+            document.getElementById('challengeDescription').textContent = challenge.description;
+            // Create challenge content based on type
+            content.innerHTML = '';
+            if (challenge.type === 'quiz') {
+                challenge.options.forEach((option, index) => {
+                    const optionEl = document.createElement('div');
+                    optionEl.className = 'p-3 mb-2 bg-gray-100 rounded-lg cursor-pointer hover:bg-gray-200 transition';
+                    optionEl.textContent = option;
+                    optionEl.onclick = function() {
+                        selectAnswer(index);
+                    };
+                    content.appendChild(optionEl);
+                });
+            }
+            popup.classList.remove('hidden');
+        }
+        // Show customer interaction
+        function showCustomerInteraction(customer) {
+            gameRunning = false;
+            const popup = document.getElementById('customerPopup');
+            const options = document.getElementById('customerOptions');
+            document.getElementById('customerTitle').textContent = "Atendimento ao Cliente";
+            document.getElementById('customerQuestion').textContent = customer.question;
+            // Create options
+            options.innerHTML = '';
+            customer.options.forEach((option, index) => {
+                const optionEl = document.createElement('div');
+                optionEl.className = 'p-2 bg-amber-50 rounded cursor-pointer hover:bg-amber-100 border border-amber-100';
+                optionEl.textContent = option.text;
+                optionEl.onclick = function() {
+                    completeCustomerInteraction(index, customer.options);
+                };
+                options.appendChild(optionEl);
+            });
+            popup.classList.remove('hidden');
+        }
+        // Complete customer interaction
+        function completeCustomerInteraction(selectedIndex, options) {
+            const popup = document.getElementById('customerPopup');
+            popup.classList.add('hidden');
+            const selectedOption = options[selectedIndex];
+            // Add points based on answer
+            addPoints(selectedOption.correct ? selectedOption.points : Math.floor(selectedOption.points/2));
+            // Mark item as collected
+            collectedItems++;
+            updateProgress();
+            // Remove customer
+            if (currentCustomer) {
+                currentCustomer.remove();
+                currentCustomer = null;
+            }
+            gameRunning = true;
+            requestAnimationFrame(gameLoop);
+        }
+        // Select answer in quiz
+        function selectAnswer(index) {
+            document.querySelectorAll('#challengeContent div').forEach((el, i) => {
+                if (i === index) {
+                    el.classList.add('bg-amber-500', 'text-white', 'font-medium');
+                    el.classList.remove('bg-gray-100', 'hover:bg-gray-200');
+                } else {
+                    el.classList.remove('bg-amber-500', 'text-white', 'font-medium');
+                    el.classList.add('bg-gray-100', 'hover:bg-gray-200');
+                }
+            });
+            currentChallenge.selectedAnswer = index;
+        }
+        // Complete challenge
+        function completeChallenge() {
+            const popup = document.getElementById('challengePopup');
+            popup.classList.add('hidden');
+            // Check if answer is selected
+            if (currentChallenge.selectedAnswer === undefined) {
+                alert("Por favor, selecione uma resposta antes de continuar!");
+                return;
+            }
+            // Check if answer is correct
+            const isCorrect = currentChallenge.selectedAnswer === currentChallenge.answer;
+            // Add points based on answer
+            addPoints(isCorrect ? currentChallenge.points : Math.floor(currentChallenge.points/3));
+            // Mark item as collected
+            collectedItems++;
+            updateProgress();
+            // Visual feedback
+            const character = document.getElementById('character');
+            if (!isCorrect) {
+                character.classList.add('shake');
+                setTimeout(() => {
+                    character.classList.remove('shake');
+                }, 500);
+            }
+            currentChallenge = null;
+            gameRunning = true;
+            requestAnimationFrame(gameLoop);
+        }
+        // Add points to score
+        function addPoints(amount) {
+            points += amount;
+            document.getElementById('points').textContent = points;
+            // Visual feedback
+            const pointsElement = document.getElementById('points');
+            pointsElement.classList.add('text-green-500', 'scale-110');
+            setTimeout(() => {
+                pointsElement.classList.remove('text-green-500', 'scale-110');
+            }, 300);
+        }
+        // Update progress bar
+        function updateProgress() {
+            const progress = (collectedItems / totalItems) * 100;
+            document.getElementById('collectedItems').textContent = collectedItems;
+            document.getElementById('totalItems').textContent = totalItems;
+            document.getElementById('progressFill').style.width = `${progress}%`;
+        }
+        // Complete level
+        function completeLevel() {
+            gameRunning = false;
+            const gameContainer = document.getElementById('gameContainer');
+            const completedScreen = document.createElement('div');
+            completedScreen.className = 'completed-level';
+            completedScreen.innerHTML = `
+                <h2 class="text-3xl font-bold mb-4">Nível ${currentLevel} Completo!</h2>
+                <p class="text-xl mb-2">Você coletou ${collectedItems} de ${totalItems} itens</p>
+                <p class="text-xl mb-6">Pontuação: ${points} pontos</p>
+                <button onclick="nextLevel()" class="bg-green-500 hover:bg-green-600 text-white font-bold py-3 px-6 rounded-full text-lg mb-4">
+                    <i class="fas fa-arrow-right mr-2"></i>Próximo Nível
+                </button>
+            `;
+            gameContainer.appendChild(completedScreen);
+        }
+        // Go to next level
+        function nextLevel() {
+            currentLevel++;
+            if (currentLevel <= levels.length) {
+                initGame();
+            } else {
+                // Game completed - show feedback form
+                showFeedbackForm();
+            }
+        }
+        // Show feedback form
+        function showFeedbackForm() {
+            const gameContainer = document.getElementById('gameContainer');
+            const completedScreen = document.createElement('div');
+            completedScreen.className = 'completed-level';
+            completedScreen.innerHTML = `
+                <h2 class="text-3xl font-bold mb-4">Parabéns!</h2>
+                <p class="text-xl mb-6">Você completou todos os níveis de treinamento!</p>
+                <p class="mb-6 text-lg">Pontuação final: ${points} pontos</p>
+            `;
+            gameContainer.appendChild(completedScreen);
+            // Show feedback popup after delay
+            setTimeout(() => {
+                document.getElementById('feedbackPopup').classList.remove('hidden');
+            }, 1000);
+        }
+        // Select rating for feedback
+        document.querySelectorAll('#feedbackPopup .fa-star').forEach(star => {
+            star.addEventListener('click', function() {
+                const rating = parseInt(this.dataset.rating);
+                selectedRating = rating;
+                // Update stars display
+                document.querySelectorAll('#feedbackPopup .fa-star').forEach((s, i) => {
+                    if (i < rating) {
+                        s.classList.add('text-yellow-400');
+                        s.classList.remove('text-gray-300');
+                    } else {
+                        s.classList.remove('text-yellow-400');
+                        s.classList.add('text-gray-300');
+                    }
+                });
+            });
+        });
+        // Submit feedback
+        function submitFeedback() {
+            const feedbackText = document.getElementById('feedbackText').value;
+            // Here you would typically send this data to your server
+            console.log("Feedback submitted:", {
+                rating: selectedRating,
+                comments: feedbackText,
+                points: points,
+                level: currentLevel - 1
+            });
+            // Show confirmation
+            alert("Obrigado pelo seu feedback! Ele nos ajuda a melhorar o treinamento.");
+            // Restart game
+            restartGame();
+        }
+        // Restart game
+        function restartGame() {
+            currentLevel = 1;
+            points = 0;
+            document.getElementById('feedbackPopup').classList.add('hidden');
+            initGame();
+        }
+        // Start the game
+        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=Marquesduque/eng" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>

prompts.txt ADDED Viewed

	@@ -0,0 +1,5 @@

+Crie um jogo de missoes e desafios de tirar foto, gravrvideo fazer checkin e responder questionario
+Quero um bau para resgatar recompensa
+Adicionne um jogo que faca sentido para a empresa cacaushow
+Os desafios devem ser um scenario scrolado para baixo estilo faEr de um videogame e cobformw o usiario vai passanndo de faze o bonequinho vai avancqndo
+Agora analise o nosso historico, eu ja twnho um app criado de engajamento para a empresa cacau show e quero adicionar algum jogo que faca sentido para a empresa com o principal objetivo de treinamento e coleta de informacoes proponha um jogo divertido dinamico desafiador e interarivo para incluir ao app