Spaces:

emroberto
/

serene-pebble-pond

Running

App Files Files Community

emroberto commited on Sep 26, 2025

Commit

394186d

verified ·

1 Parent(s): 27fd16f

DESENVOLVA O SEGUINTE JOGO: 🌊 Jogo: “Pedrinhas na Água”

Browse files

Objetivo:

Simular o ato de jogar pedrinhas num lago, trazendo calma, ritmo e distração suave.

Como funciona:

Tela inicial: aparece um lago calmo, com reflexo do céu.

Interatividade:

A pessoa arrasta o dedo na tela e solta → uma pedrinha cai na água.

Cada toque gera ondas circulares suaves e um som de água relaxante.

Recompensa visual:

Quanto mais pedrinhas joga, mais ondas se sobrepõem de forma hipnótica.

Às vezes surgem peixinhos ou flores de lótus boiando, como surpresa positiva.

Ritmo calmante:

O jogo incentiva a jogar pedrinhas devagar, criando padrões de ondas que lembram meditação.

Pode ter um “modo zen” em que a tela automaticamente gera ondas suaves, só para observar.

Por que funciona?

A ação repetitiva de arrastar e soltar dá sensação de controle.

O som da água e os círculos que se expandem ajudam a regular o foco da mente.

É simples, intuitivo e traz aquela nostalgia de jogar pedrinhas de verdade.

Files changed (2) hide show

README.md +8 -5
index.html +588 -18

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Serene Pebble Pond
-emoji: 🐢
-colorFrom: red
-colorTo: yellow
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: Serene Pebble Pond 🌊
+colorFrom: purple
+colorTo: green
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://deepsite.hf.co).

index.html CHANGED Viewed

@@ -1,19 +1,589 @@
-<!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>Serene Pebble Pond</title>
+    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.7.0/p5.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.7.0/addons/p5.sound.min.js"></script>
+    <style>
+        body, html {
+            margin: 0;
+            padding: 0;
+            overflow: hidden;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+        }
+        #defaultCanvas0 {
+            position: absolute;
+            top: 0;
+            left: 0;
+            z-index: 1;
+        }
+        .ui-overlay {
+            position: absolute;
+            z-index: 10;
+            pointer-events: none;
+            width: 100%;
+            height: 100%;
+        }
+        .ui-element {
+            pointer-events: auto;
+        }
+        .ripple {
+            position: absolute;
+            border-radius: 50%;
+            border: 2px solid rgba(255, 255, 255, 0.6);
+            transform: translate(-50%, -50%);
+            pointer-events: none;
+        }
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(10px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        .fade-in {
+            animation: fadeIn 0.8s ease-out forwards;
+        }
+    </style>
+</head>
+<body class="bg-gradient-to-br from-blue-50 to-green-50 flex items-center justify-center min-h-screen">
+    <!-- Main Canvas for the Pond -->
+    <div id="canvas-container" class="w-full h-full absolute"></div>
+    <!-- UI Overlay -->
+    <div class="ui-overlay flex flex-col items-center justify-between p-6">
+        <!-- Top Bar -->
+        <div class="w-full flex justify-between items-center fade-in">
+            <h1 class="text-3xl font-light text-slate-700 drop-shadow-lg">Serene Pebble Pond</h1>
+            <div class="flex space-x-4">
+                <button id="zenToggle" class="ui-element bg-white/30 backdrop-blur-sm text-slate-700 px-4 py-2 rounded-full shadow-lg hover:bg-white/50 transition-all duration-300 flex items-center space-x-2">
+                    <i data-feather="moon"></i>
+                    <span id="zenText">Modo Zen: OFF</span>
+                </button>
+                <button id="infoBtn" class="ui-element bg-white/30 backdrop-blur-sm text-slate-700 w-10 h-10 rounded-full shadow-lg hover:bg-white/50 transition-all duration-300 flex items-center justify-center">
+                    <i data-feather="info"></i>
+                </button>
+            </div>
+        </div>
+        <!-- Center Instructions -->
+        <div id="instructions" class="text-center bg-black/20 backdrop-blur-sm text-white p-4 rounded-lg shadow-xl fade-in">
+            <p class="text-lg mb-2">Arraste e solte para lançar uma pedrinha</p>
+            <p class="text-sm opacity-80">Força e direção controlam o arremesso</p>
+        </div>
+        <!-- Bottom Stats -->
+        <div class="w-full flex justify-between items-end fade-in">
+            <div class="bg-white/30 backdrop-blur-sm text-slate-700 px-4 py-2 rounded-lg shadow-lg">
+                <p class="text-sm">Pedras lançadas: <span id="pebbleCount">0</span></p>
+            </div>
+            <div class="text-slate-700 text-sm bg-white/30 backdrop-blur-sm px-4 py-2 rounded-lg shadow-lg">
+                <p>Respire. Relaxe. Aproveite o momento.</p>
+            </div>
+        </div>
+    </div>
+    <!-- Info Modal -->
+    <div id="infoModal" class="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-20 hidden">
+        <div class="bg-white rounded-xl shadow-2xl p-6 max-w-md mx-4 fade-in">
+            <div class="flex justify-between items-center mb-4">
+                <h2 class="text-2xl font-light text-slate-700">Sobre o Jogo</h2>
+                <button id="closeModal" class="text-slate-500 hover:text-slate-700">
+                    <i data-feather="x"></i>
+                </button>
+            </div>
+            <p class="text-slate-600 mb-4">
+                Serene Pebble Pond é uma experiência interativa projetada para promover calma e relaxamento. Simule o ato nostálgico de jogar pedrinhas num lago tranquilo.
+            </p>
+            <ul class="text-slate-600 space-y-2 mb-4">
+                <li class="flex items-start">
+                    <i data-feather="check-circle" class="text-green-500 mr-2 mt-1 flex-shrink-0"></i>
+                    <span>Arraste e solte para lançar pedras</span>
+                </li>
+                <li class="flex items-start">
+                    <i data-feather="check-circle" class="text-green-500 mr-2 mt-1 flex-shrink-0"></i>
+                    <span>Observe as ondas hipnóticas se espalharem</span>
+                </li>
+                <li class="flex items-start">
+                    <i data-feather="check-circle" class="text-green-500 mr-2 mt-1 flex-shrink-0"></i>
+                    <span>Ative o Modo Zen para relaxamento automático</span>
+                </li>
+            </ul>
+            <p class="text-sm text-slate-500">Encontre sua paz. 🌿</p>
+        </div>
+    </div>
+    <!-- Custom Ripple Container -->
+    <div id="ripple-container"></div>
+    <script>
+        // Tailwind Config for custom colors
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        'water-blue': '#88C1D0',
+                        'deep-blue': '#4A6FA5',
+                        'leaf-green': '#87A96B',
+                        'lotus-pink': '#E6B8B8',
+                        'fish-orange': '#FF9A76'
+                    }
+                }
+            }
+        }
+        // p5.js Sketch
+        let pond;
+        let pebbles = [];
+        let ripples = [];
+        let fishes = [];
+        let lotuses = [];
+        let zenMode = false;
+        let zenInterval;
+        let pebbleCount = 0;
+        let dragStart = null;
+        let dragVector = null;
+        let splashSound;
+        let ambientSound;
+        function preload() {
+            // In a real scenario, you would load actual sound files
+            // splashSound = loadSound('splash.wav');
+            // ambientSound = loadSound('ambient.mp3');
+        }
+        function setup() {
+            let canvas = createCanvas(windowWidth, windowHeight);
+            canvas.parent('canvas-container');
+            frameRate(60);
+            // Create initial pond background
+            drawPondBackground();
+            // Start ambient sound in a real implementation
+            // if (ambientSound) {
+            //     ambientSound.loop();
+            //     ambientSound.setVolume(0.3);
+            // }
+            // Add some initial decorative elements
+            for (let i = 0; i < 3; i++) {
+                addRandomFish();
+                addRandomLotus();
+            }
+        }
+        function drawPondBackground() {
+            // Gradient background for sky and water
+            drawingContext.save();
+            let gradient = drawingContext.createLinearGradient(0, 0, 0, height);
+            gradient.addColorStop(0, '#E0F7FA'); // Light sky blue
+            gradient.addColorStop(0.6, '#B3E5FC'); // Medium sky blue
+            gradient.addColorStop(0.61, '#4FC3F7'); // Water surface
+            gradient.addColorStop(1, '#0288D1'); // Deep water
+            drawingContext.fillStyle = gradient;
+            drawingContext.fillRect(0, 0, width, height);
+            drawingContext.restore();
+            // Add some subtle water texture
+            drawingContext.save();
+            drawingContext.globalAlpha = 0.1;
+            for (let i = 0; i < 100; i++) {
+                let x = random(width);
+                let y = random(height * 0.6, height);
+                let size = random(2, 5);
+                drawingContext.fillStyle = '#FFFFFF';
+                drawingContext.fillRect(x, y, size, size/3);
+            }
+            drawingContext.restore();
+        }
+        function draw() {
+            // Clear with semi-transparent for trail effect
+            drawingContext.save();
+            drawingContext.globalCompositeOperation = 'source-over';
+            drawingContext.fillStyle = 'rgba(255, 255, 255, 0.05)';
+            drawingContext.fillRect(0, 0, width, height);
+            drawingContext.restore();
+            // Redraw pond background (water area)
+            drawingContext.save();
+            let gradient = drawingContext.createLinearGradient(0, height * 0.6, 0, height);
+            gradient.addColorStop(0, '#4FC3F7');
+            gradient.addColorStop(1, '#0288D1');
+            drawingContext.fillStyle = gradient;
+            drawingContext.fillRect(0, height * 0.6, width, height * 0.4);
+            drawingContext.restore();
+            // Update and draw pebbles
+            for (let i = pebbles.length - 1; i >= 0; i--) {
+                pebbles[i].update();
+                pebbles[i].display();
+                if (pebbles[i].shouldRemove()) {
+                    pebbles.splice(i, 1);
+                }
+            }
+            // Update and draw ripples
+            for (let i = ripples.length - 1; i >= 0; i--) {
+                ripples[i].update();
+                ripples[i].display();
+                if (ripples[i].shouldRemove()) {
+                    ripples.splice(i, 1);
+                }
+            }
+            // Update and draw fishes
+            for (let fish of fishes) {
+                fish.update();
+                fish.display();
+            }
+            // Draw lotuses
+            for (let lotus of lotuses) {
+                lotus.display();
+            }
+            // Draw drag vector if dragging
+            if (dragVector) {
+                drawDragVector();
+            }
+            // Zen mode automatic ripples
+            if (zenMode && frameCount % 120 === 0) {
+                createZenRipple();
+            }
+        }
+        function mousePressed() {
+            if (mouseY > height * 0.6) { // Only in water area
+                dragStart = createVector(mouseX, mouseY);
+            }
+            return false;
+        }
+        function mouseDragged() {
+            if (dragStart) {
+                dragVector = createVector(mouseX - dragStart.x, mouseY - dragStart.y);
+                // Limit vector length for better control
+                dragVector.limit(150);
+            }
+            return false;
+        }
+        function mouseReleased() {
+            if (dragStart && dragVector) {
+                throwPebble(dragStart.x, dragStart.y, dragVector);
+                dragStart = null;
+                dragVector = null;
+            }
+            return false;
+        }
+        function throwPebble(x, y, vector) {
+            // Create pebble
+            let pebble = new Pebble(x, y, vector);
+            pebbles.push(pebble);
+            pebbleCount++;
+            document.getElementById('pebbleCount').textContent = pebbleCount;
+            // Play splash sound in real implementation
+            // if (splashSound) {
+            //     splashSound.play();
+            //     splashSound.setVolume(map(vector.mag(), 0, 150, 0.3, 1.0));
+            // }
+            // Chance to spawn surprise elements
+            if (random() < 0.15) {
+                if (random() < 0.5) {
+                    addRandomFish();
+                } else {
+                    addRandomLotus();
+                }
+            }
+        }
+        function drawDragVector() {
+            drawingContext.save();
+            drawingContext.strokeStyle = 'rgba(255, 255, 255, 0.8)';
+            drawingContext.lineWidth = 2;
+            drawingContext.setLineDash([5, 5]);
+            drawingContext.beginPath();
+            drawingContext.moveTo(dragStart.x, dragStart.y);
+            drawingContext.lineTo(dragStart.x + dragVector.x, dragStart.y + dragVector.y);
+            drawingContext.stroke();
+            // Draw arrow head
+            drawingContext.fillStyle = 'rgba(255, 255, 255, 0.8)';
+            drawingContext.beginPath();
+            drawingContext.translate(dragStart.x + dragVector.x, dragStart.y + dragVector.y);
+            drawingContext.rotate(dragVector.heading());
+            drawingContext.moveTo(0, 0);
+            drawingContext.lineTo(-10, -5);
+            drawingContext.lineTo(-10, 5);
+            drawingContext.closePath();
+            drawingContext.fill();
+            drawingContext.restore();
+        }
+        function createZenRipple() {
+            let x = random(width * 0.2, width * 0.8);
+            let y = random(height * 0.7, height * 0.9);
+            let ripple = new Ripple(x, y, random(5, 15));
+            ripples.push(ripple);
+        }
+        function addRandomFish() {
+            if (fishes.length < 8) { // Limit number of fishes
+                let fish = new Fish();
+                fishes.push(fish);
+            }
+        }
+        function addRandomLotus() {
+            if (lotuses.length < 5) { // Limit number of lotuses
+                let lotus = new Lotus();
+                lotuses.push(lotus);
+            }
+        }
+        function windowResized() {
+            resizeCanvas(windowWidth, windowHeight);
+            drawPondBackground();
+        }
+        // Pebble Class
+        class Pebble {
+            constructor(x, y, velocity) {
+                this.pos = createVector(x, y);
+                this.vel = velocity.copy().mult(0.2); // Scale down velocity
+                this.acc = createVector(0, 0.3); // Gravity
+                this.size = random(8, 15);
+                this.color = [random(180, 220), random(180, 220), random(180, 220)];
+                this.splashCreated = false;
+            }
+            update() {
+                this.vel.add(this.acc);
+                this.pos.add(this.vel);
+                // Check if hit water surface
+                if (!this.splashCreated && this.pos.y > height * 0.6) {
+                    this.createSplash();
+                    this.splashCreated = true;
+                }
+            }
+            display() {
+                drawingContext.save();
+                drawingContext.fillStyle = `rgb(${this.color[0]}, ${this.color[1]}, ${this.color[2]})`;
+                drawingContext.beginPath();
+                drawingContext.arc(this.pos.x, this.pos.y, this.size, 0, TWO_PI);
+                drawingContext.fill();
+                drawingContext.restore();
+            }
+            createSplash() {
+                let ripple = new Ripple(this.pos.x, this.pos.y, this.vel.mag() * 0.5);
+                ripples.push(ripple);
+                // Create HTML ripple effect
+                createHTMLRipple(this.pos.x, this.pos.y);
+            }
+            shouldRemove() {
+                return this.pos.y > height + 50;
+            }
+        }
+        // Ripple Class
+        class Ripple {
+            constructor(x, y, strength) {
+                this.x = x;
+                this.y = y;
+                this.radius = 5;
+                this.maxRadius = strength * 15 + 50;
+                this.speed = map(strength, 0, 75, 1, 3);
+                this.alpha = 1;
+                this.color = [255, 255, 255];
+            }
+            update() {
+                this.radius += this.speed;
+                this.alpha = 1 - (this.radius / this.maxRadius);
+            }
+            display() {
+                if (this.alpha <= 0) return;
+                drawingContext.save();
+                drawingContext.strokeStyle = `rgba(255, 255, 255, ${this.alpha * 0.6})`;
+                drawingContext.lineWidth = 2;
+                drawingContext.beginPath();
+                drawingContext.arc(this.x, this.y, this.radius, 0, TWO_PI);
+                drawingContext.stroke();
+                drawingContext.restore();
+            }
+            shouldRemove() {
+                return this.radius >= this.maxRadius;
+            }
+        }
+        // Fish Class
+        class Fish {
+            constructor() {
+                this.x = random(width);
+                this.y = random(height * 0.7, height * 0.95);
+                this.speed = random(0.5, 2);
+                this.direction = random() < 0.5 ? 1 : -1;
+                this.size = random(15, 25);
+                this.wiggle = 0;
+                this.wiggleSpeed = random(0.1, 0.3);
+                this.color = [255, random(100, 150), random(50, 100)]; // Orange tones
+            }
+            update() {
+                this.x += this.speed * this.direction;
+                this.wiggle += this.wiggleSpeed;
+                // Reverse direction at edges
+                if (this.x < -50 || this.x > width + 50) {
+                    this.direction *= -1;
+                }
+            }
+            display() {
+                drawingContext.save();
+                drawingContext.translate(this.x, this.y + sin(this.wiggle) * 3);
+                drawingContext.scale(this.direction, 1);
+                // Fish body
+                drawingContext.fillStyle = `rgb(${this.color[0]}, ${this.color[1]}, ${this.color[2]})`;
+                drawingContext.beginPath();
+                drawingContext.ellipse(0, 0, this.size, this.size/2, 0, 0, TWO_PI);
+                drawingContext.fill();
+                // Tail
+                drawingContext.beginPath();
+                drawingContext.moveTo(-this.size, 0);
+                drawingContext.lineTo(-this.size - 10, -this.size/2);
+                drawingContext.lineTo(-this.size - 10, this.size/2);
+                drawingContext.closePath();
+                drawingContext.fill();
+                // Eye
+                drawingContext.fillStyle = 'white';
+                drawingContext.beginPath();
+                drawingContext.arc(this.size * 0.6, -this.size/4, this.size/5, 0, TWO_PI);
+                drawingContext.fill();
+                drawingContext.fillStyle = 'black';
+                drawingContext.beginPath();
+                drawingContext.arc(this.size * 0.6, -this.size/4, this.size/10, 0, TWO_PI);
+                drawingContext.fill();
+                drawingContext.restore();
+            }
+        }
+        // Lotus Class
+        class Lotus {
+            constructor() {
+                this.x = random(width * 0.1, width * 0.9);
+                this.y = random(height * 0.7, height * 0.9);
+                this.size = random(30, 50);
+                this.petalCount = int(random(5, 8));
+                this.color = [random(200, 255), random(150, 200), random(150, 200)]; // Pink tones
+                this.wobble = random(TWO_PI);
+            }
+            display() {
+                drawingContext.save();
+                drawingContext.translate(this.x, this.y + sin(this.wobble) * 2);
+                this.wobble += 0.02;
+                // Lotus petals
+                drawingContext.fillStyle = `rgb(${this.color[0]}, ${this.color[1]}, ${this.color[2]})`;
+                for (let i = 0; i < this.petalCount; i++) {
+                    drawingContext.save();
+                    drawingContext.rotate(i * TWO_PI / this.petalCount);
+                    drawingContext.beginPath();
+                    drawingContext.ellipse(this.size * 0.6, 0, this.size * 0.8, this.size * 0.4, 0, 0, TWO_PI);
+                    drawingContext.fill();
+                    drawingContext.restore();
+                }
+                // Center
+                drawingContext.fillStyle = `rgb(${this.color[0] - 50}, ${this.color[1] - 50}, ${this.color[2] - 50})`;
+                drawingContext.beginPath();
+                drawingContext.arc(0, 0, this.size * 0.3, 0, TWO_PI);
+                drawingContext.fill();
+                drawingContext.restore();
+            }
+        }
+        // HTML Ripple Effect
+        function createHTMLRipple(x, y) {
+            const ripple = document.createElement('div');
+            ripple.className = 'ripple';
+            ripple.style.left = x + 'px';
+            ripple.style.top = y + 'px';
+            ripple.style.width = '0px';
+            ripple.style.height = '0px';
+            document.getElementById('ripple-container').appendChild(ripple);
+            setTimeout(() => {
+                ripple.style.transition = 'all 1s ease-out';
+                ripple.style.width = '100px';
+                ripple.style.height = '100px';
+                ripple.style.opacity = '0';
+            }, 10);
+            setTimeout(() => {
+                ripple.remove();
+            }, 1100);
+        }
+        // UI Event Listeners
+        document.getElementById('zenToggle').addEventListener('click', function() {
+            zenMode = !zenMode;
+            const zenText = document.getElementById('zenText');
+            const icon = this.querySelector('i');
+            if (zenMode) {
+                zenText.textContent = 'Modo Zen: ON';
+                this.classList.add('bg-green-200/50');
+                feather.icons['sun'].replace(icon);
+            } else {
+                zenText.textContent = 'Modo Zen: OFF';
+                this.classList.remove('bg-green-200/50');
+                feather.icons['moon'].replace(icon);
+            }
+        });
+        document.getElementById('infoBtn').addEventListener('click', function() {
+            document.getElementById('infoModal').classList.remove('hidden');
+        });
+        document.getElementById('closeModal').addEventListener('click', function() {
+            document.getElementById('infoModal').classList.add('hidden');
+        });
+        // Close modal on background click
+        document.getElementById('infoModal').addEventListener('click', function(e) {
+            if (e.target === this) {
+                this.classList.add('hidden');
+            }
+        });
+        // Initialize feather icons
+        feather.replace();
+    </script>
+</body>
 </html>