Spaces:

Altaire
/

marcia

Running

App Files Files Community

Altaire commited on Mar 30, 2025

Commit

f72df2f

verified ·

1 Parent(s): 768125a

Add 2 files

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +424 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Marcia
-emoji: 🏢
-colorFrom: yellow
-colorTo: purple
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: marcia
+emoji: 🐳
+colorFrom: blue
+colorTo: blue
 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,424 @@
-<!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="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Marcia's Shopping Adventure</title>
+    <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=Press+Start+2P&family=VT323&display=swap');
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            image-rendering: pixelated;
+        }
+        body {
+            background-color: #2b2b4b;
+            color: #f0f0f0;
+            font-family: 'VT323', monospace;
+            overflow: hidden;
+            height: 100vh;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+        #game-container {
+            position: relative;
+            width: 800px;
+            height: 600px;
+            border: 8px solid #7c45a3;
+            border-radius: 5px;
+            background-color: #151522;
+            box-shadow: 0 0 30px rgba(124, 69, 163, 0.7);
+            overflow: hidden;
+        }
+        #game-canvas {
+            width: 100%;
+            height: 100%;
+        }
+        #start-screen, #game-over-screen {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            background-color: rgba(21, 21, 34, 0.9);
+            z-index: 10;
+        }
+        #game-over-screen {
+            display: none;
+        }
+        h1 {
+            font-family: 'Press Start 2P', cursive;
+            font-size: 3rem;
+            color: #ff7cbc;
+            text-shadow: 5px 5px 0 #7c45a3;
+            margin-bottom: 2rem;
+            text-align: center;
+        }
+        h2 {
+            font-family: 'Press Start 2P', cursive;
+            font-size: 1.5rem;
+            color: #8dffcd;
+            margin-bottom: 1.5rem;
+            text-align: center;
+        }
+        p {
+            font-size: 1.8rem;
+            margin-bottom: 2rem;
+            text-align: center;
+            max-width: 80%;
+            line-height: 1.4;
+        }
+        button {
+            background-color: #7c45a3;
+            color: white;
+            border: none;
+            padding: 15px 30px;
+            font-family: 'VT323', monospace;
+            font-size: 1.8rem;
+            cursor: pointer;
+            border-radius: 5px;
+            transition: all 0.3s;
+            box-shadow: 0 5px 0 #512d6d;
+            margin-top: 1rem;
+        }
+        button:hover {
+            background-color: #9b5dc6;
+            transform: translateY(-3px);
+            box-shadow: 0 8px 0 #512d6d;
+        }
+        button:active {
+            transform: translateY(2px);
+            box-shadow: 0 3px 0 #512d6d;
+        }
+        #hud {
+            position: absolute;
+            top: 10px;
+            left: 10px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 5;
+        }
+        .hud-item {
+            background-color: rgba(21, 21, 34, 0.8);
+            border: 3px solid #7c45a3;
+            border-radius: 5px;
+            padding: 10px;
+            font-size: 1.5rem;
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+        #items-collected {
+            position: absolute;
+            top: 10px;
+            right: 10px;
+            background-color: rgba(21, 21, 34, 0.8);
+            border: 3px solid #7c45a3;
+            border-radius: 5px;
+            padding: 10px;
+            font-size: 1.5rem;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 5;
+        }
+        .item-slot {
+            width: 40px;
+            height: 40px;
+            background-color: #2b2b4b;
+            border: 2px solid #7c45a3;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            font-size: 1.2rem;
+        }
+        .item-slot.filled {
+            background-color: #ff7cbc;
+            color: #151522;
+        }
+        #shopping-list {
+            position: absolute;
+            bottom: 10px;
+            left: 10px;
+            background-color: rgba(21, 21, 34, 0.8);
+            border: 3px solid #7c45a3;
+            border-radius: 5px;
+            padding: 10px;
+            font-size: 1.5rem;
+            display: flex;
+            flex-direction: column;
+            gap: 5px;
+            z-index: 5;
+            max-width: 300px;
+        }
+        .list-item {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+        .list-item.completed {
+            color: #8dffcd;
+            text-decoration: line-through;
+        }
+        #timer-bar {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 10px;
+            background-color: #2b2b4b;
+            z-index: 5;
+        }
+        #timer-progress {
+            height: 100%;
+            width: 100%;
+            background-color: #ff7cbc;
+            transition: width 0.1s linear;
+        }
+        #store {
+            position: absolute;
+            bottom: 0;
+            right: 0;
+            width: 300px;
+            height: 150px;
+            background-color: rgba(124, 69, 163, 0.7);
+            border-top-left-radius: 10px;
+            display: flex;
+            flex-direction: column;
+            padding: 10px;
+            z-index: 5;
+        }
+        .shelf {
+            display: flex;
+            gap: 10px;
+            margin-bottom: 10px;
+        }
+        .store-item {
+            width: 50px;
+            height: 50px;
+            background-color: #2b2b4b;
+            border: 2px solid #ff7cbc;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            font-size: 1.5rem;
+            cursor: pointer;
+            transition: transform 0.2s;
+        }
+        .store-item:hover {
+            transform: scale(1.1);
+            background-color: #ff7cbc;
+            color: #151522;
+        }
+        #character {
+            position: absolute;
+            width: 60px;
+            height: 80px;
+            background-color: #ff7cbc;
+            border-radius: 50% 50% 0 0;
+            z-index: 2;
+            transition: transform 0.2s;
+        }
+        #character::before {
+            content: '';
+            position: absolute;
+            top: 15px;
+            left: 20px;
+            width: 20px;
+            height: 20px;
+            background-color: #151522;
+            border-radius: 50%;
+            box-shadow: 25px 0 #151522;
+        }
+        #character::after {
+            content: '';
+            position: absolute;
+            bottom: 10px;
+            left: 15px;
+            width: 30px;
+            height: 40px;
+            background-color: #9b5dc6;
+            border-radius: 10px;
+        }
+        .collectible {
+            position: absolute;
+            width: 30px;
+            height: 30px;
+            background-color: #8dffcd;
+            border-radius: 50%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            font-size: 1.2rem;
+            z-index: 1;
+        }
+        .obstacle {
+            position: absolute;
+            background-color: #512d6d;
+            z-index: 1;
+        }
+        #confetti {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            pointer-events: none;
+            z-index: 20;
+        }
+        .confetti-piece {
+            position: absolute;
+            width: 10px;
+            height: 10px;
+            background-color: #ff7cbc;
+            opacity: 0;
+        }
+        #pause-btn {
+            position: absolute;
+            top: 10px;
+            right: 10px;
+            background: none;
+            border: none;
+            color: white;
+            font-size: 2rem;
+            cursor: pointer;
+            z-index: 5;
+        }
+        @keyframes marcia-walk {
+            0% { transform: rotate(-5deg); }
+            50% { transform: rotate(5deg); }
+            100% { transform: rotate(-5deg); }
+        }
+        @keyframes item-bounce {
+            0% { transform: translateY(0); }
+            50% { transform: translateY(-10px); }
+            100% { transform: translateY(0); }
+        }
+        .walking {
+            animation: marcia-walk 0.5s infinite;
+        }
+    </style>
+</head>
+<body>
+    <div id="game-container">
+        <div id="timer-bar"><div id="timer-progress"></div></div>
+        <button id="pause-btn"><i class="fas fa-pause"></i></button>
+        <div id="hud">
+            <div class="hud-item">
+                <i class="fas fa-heart" style="color: #ff7cbc;"></i>
+                <span id="health">3</span>
+            </div>
+            <div class="hud-item">
+                <i class="fas fa-coins" style="color: #ffd700;"></i>
+                <span id="money">100</span>
+            </div>
+        </div>
+        <div id="items-collected">
+            <div class="item-slot" id="slot1"></div>
+            <div class="item-slot" id="slot2"></div>
+            <div class="item-slot" id="slot3"></div>
+            <div class="item-slot" id="slot4"></div>
+        </div>
+        <div id="shopping-list">
+            <h3>Shopping List:</h3>
+            <div class="list-item" id="item1"><i class="fas fa-square"></i> <span>Bread</span></div>
+            <div class="list-item" id="item2"><i class="fas fa-square"></i> <span>Milk</span></div>
+            <div class="list-item" id="item3"><i class="fas fa-square"></i> <span>Eggs</span></div>
+            <div class="list-item" id="item4"><i class="fas fa-square"></i> <span>Fruits</span></div>
+        </div>
+        <div id="store">
+            <h3>Marcia's Shop</h3>
+            <div class="shelf">
+                <div class="store-item" data-item="🍞" data-price="10">🍞</div>
+                <div class="store-item" data-item="🥛" data-price="15">🥛</div>
+                <div class="store-item" data-item="🥚" data-price="20">🥚</div>
+                <div class="store-item" data-item="🍎" data-price="25">🍎</div>
+            </div>
+            <div class="shelf">
+                <div class="store-item" data-item="🍪" data-price="30">🍪</div>
+                <div class="store-item" data-item="🍫" data-price="35">🍫</div>
+                <div class="store-item" data-item="🍵" data-price="40">🍵</div>
+                <div class="store-item" data-item="🛒" data-price="50">🛒</div>
+            </div>
+        </div>
+        <div id="character"></div>
+        <div id="confetti"></div>
+        <div id="start-screen">
+            <h1>Marcia's Shopping Adventure</h1>
+            <p>Help Marcia collect all the items on her shopping list before time runs out!</p>
+            <p>Avoid obstacles and spend your money wisely at the store.</p>
+            <button id="start-btn">START GAME</button>
+            <div style="margin-top: 2rem; font-size: 1.2rem;">
+                <p>Use <i class="fas fa-arrow-up"></i> <i class="fas fa-arrow-down"></i>
+                <i class="fas fa-arrow-left"></i> <i class="fas fa-arrow-right"></i> to move</p>
+                <p>Press <i class="fas fa-space-shuttle"></i> to buy items at the store</p>
+            </div>
+        </div>
+        <div id="game-over-screen">
+            <h1>GAME OVER</h1>
+            <h2 id="result-message"></h2>
+            <p id="score-display"></p>
+            <button id="restart-btn">PLAY AGAIN</button>
+        </div>
+    </div>
+    <script>
+        // Game elements
+        const gameContainer = document.getElementById('game-container');
+        const character = document.getElementById('character');
+        const startScreen = document.getElementById('start-screen');
+        const gameOverScreen = document.getElementById('game-over-screen');
+        const startBtn
+</html>