Spaces:

Wall06
/

sys-temp-data

Running

App Files Files Community

Wall06 commited on Feb 14

Commit

3ff9928

verified ·

1 Parent(s): aef4d06

Upload 7 files

Browse files

Files changed (8) hide show

.gitattributes +3 -0
Racing F1 GIF by Hello Kitty.gif +3 -0
Sticker by Hello Kitty.gif +3 -0
index.html +80 -19
script.js +73 -0
style.css +58 -28
sys_asset_01.jpeg +3 -0
sys_asset_02.jpeg +0 -0

.gitattributes CHANGED Viewed

@@ -33,3 +33,6 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text

 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+Racing[[:space:]]F1[[:space:]]GIF[[:space:]]by[[:space:]]Hello[[:space:]]Kitty.gif filter=lfs diff=lfs merge=lfs -text
+Sticker[[:space:]]by[[:space:]]Hello[[:space:]]Kitty.gif filter=lfs diff=lfs merge=lfs -text
+sys_asset_01.jpeg filter=lfs diff=lfs merge=lfs -text

Racing F1 GIF by Hello Kitty.gif ADDED Viewed

Git LFS Details

SHA256: dc9cdad535493d2b9ee7e7c82d0c119363ae6908830d92b0d2523839fb653dee
Pointer size: 131 Bytes
Size of remote file: 807 kB

Sticker by Hello Kitty.gif ADDED Viewed

Git LFS Details

SHA256: 05f3560423936c4c257ae7ad163fff3ffbd27aebde039e26a1641029b8ddebbc
Pointer size: 131 Bytes
Size of remote file: 142 kB

index.html CHANGED Viewed

@@ -1,19 +1,80 @@
-<!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>Eesha's Vault ✨</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div id="app">
+        <section id="terminal" class="page active">
+            <div class="terminal-box">
+                <p id="typewriter"></p>
+                <button id="start-btn" class="hidden" onclick="nextSection('welcome')">Unlock the Magic ✨</button>
+            </div>
+        </section>
+        <section id="welcome" class="page hidden">
+            <div class="glass-card">
+                <h2 class="neon-text">TO MY BESTIE ❤️</h2>
+                <img src="sys_asset_01.jpeg" id="main-photo" alt="Special memory gallery for Eesha" class="profile-img" onclick="changePhoto()">
+                <p class="special-msg">"Eesha, you're the main character of this story!"</p>
+                <p class="tap-hint">Tap the photo to see our memories... ✨</p>
+                <button class="pink-btn" onclick="nextSection('game')">Ready to Play? →</button>
+            </div>
+        </section>
+        <section id="game" class="page hidden">
+            <div class="glass-card">
+                <h3 class="neon-text">Catch 10 Kitties!</h3>
+                <div class="score">Power Level: <span id="count">0</span>/10</div>
+                <div id="game-area">
+                    <img src="Sticker by Hello Kitty.gif" id="target" alt="Floating kitty game target" onclick="catchKitty()">
+                </div>
+            </div>
+        </section>
+        <section id="gallery" class="page hidden">
+            <div class="glass-card">
+                <h2 class="neon-text">Achievement Unlocked!</h2>
+                <div class="photo-stack">
+                    <img src="Racing F1 GIF by Hello Kitty.gif" alt="F1 Racing Kitty celebration" class="gallery-gif">
+                </div>
+                <button class="pink-btn" onclick="nextSection('stats')">View Bestie Stats →</button>
+            </div>
+        </section>
+        <section id="stats" class="page hidden">
+            <div class="glass-card">
+                <h2 class="neon-text">FRIENDSHIP ANALYTICS 📈</h2>
+                <div class="stats-grid">
+                    <div class="stat-item"><span class="stat-label">Vibe Match</span><span class="stat-value">100%</span></div>
+                    <div class="stat-item"><span class="stat-label">Secrets Kept</span><span class="stat-value">∞</span></div>
+                </div>
+                <button class="pink-btn" onclick="nextSection('cake-page')">Got a Surprise? 🎂</button>
+            </div>
+        </section>
+        <section id="cake-page" class="page hidden">
+            <div class="glass-card">
+                <h2 class="neon-text">A TREAT FOR YOU! 🎂</h2>
+                <div class="cake-container" onclick="cutCake()" role="button" aria-label="Click to cut the cake">
+                    <div id="cake-left" class="cake-half left">
+                        <div class="topping cherry"></div>
+                        <div class="sprinkles"></div>
+                    </div>
+                    <div id="cake-right" class="cake-half right">
+                        <div class="topping cherry"></div>
+                        <div class="sprinkles"></div>
+                    </div>
+                    <div id="knife" class="knife"></div>
+                </div>
+                <p id="cake-msg" class="special-msg">Click the cake to cut a slice for Eesha!</p>
+                <button class="pink-btn hidden" id="final-btn" onclick="location.reload()">Best Friends Forever ❤️</button>
+            </div>
+        </section>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>

script.js ADDED Viewed

	@@ -0,0 +1,73 @@

+// Data Arrays - Filenames must match your folder exactly
+const photos = ["sys_asset_01.jpeg", "sys_asset_02.jpeg"];
+const messages = [
+    "Hey Eesha ✨",
+    "You’re something special.",
+    "Every memory hits different.",
+    "Pure vibes only.",
+    "You’re irreplaceable.",
+    "Ready for our world?"
+];
+let currentPhotoIdx = 0, lineIdx = 0, charIdx = 0;
+// Security: Disable right-click
+document.addEventListener('contextmenu', event => event.preventDefault());
+function typeWriter() {
+    const terminal = document.getElementById("typewriter");
+    if (lineIdx < messages.length) {
+        if (charIdx === 0) terminal.innerHTML += "> ";
+        if (charIdx < messages[lineIdx].length) {
+            terminal.innerHTML += messages[lineIdx].charAt(charIdx);
+            charIdx++;
+            setTimeout(typeWriter, 40);
+        } else {
+            terminal.innerHTML += "<br>";
+            lineIdx++; charIdx = 0; setTimeout(typeWriter, 600);
+        }
+    } else {
+        document.getElementById("start-btn").classList.remove("hidden");
+    }
+}
+function changePhoto() {
+    currentPhotoIdx = (currentPhotoIdx + 1) % photos.length;
+    document.getElementById("main-photo").src = photos[currentPhotoIdx];
+}
+function nextSection(id) {
+    document.querySelectorAll('.page').forEach(p => p.classList.add('hidden'));
+    document.getElementById(id).classList.remove('hidden');
+    if(id === 'game') moveTarget();
+}
+let score = 0;
+function catchKitty() {
+    score++;
+    document.getElementById("count").innerText = score;
+    if (score >= 10) nextSection('gallery');
+    else moveTarget();
+}
+function moveTarget() {
+    const target = document.getElementById("target");
+    target.style.left = Math.random() * 240 + "px";
+    target.style.top = Math.random() * 190 + "px";
+}
+function cutCake() {
+    const knife = document.getElementById('knife');
+    knife.style.opacity = "1";
+    knife.style.top = "20px";
+    setTimeout(() => {
+        document.getElementById('cake-left').style.transform = "translateX(-35px) rotate(-10deg)";
+        document.getElementById('cake-right').style.transform = "translateX(35px) rotate(10deg)";
+        document.getElementById('cake-msg').innerText = "Perfectly cut for Eesha! 🍰";
+        document.getElementById('final-btn').classList.remove('hidden');
+        knife.style.opacity = "0";
+    }, 500);
+}
+// CRITICAL: Starts the animation when the window loads
+window.onload = typeWriter;

style.css CHANGED Viewed

@@ -1,28 +1,58 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
-}
-h1 {
-	font-size: 16px;
-	margin-top: 0;
-}
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
-}
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
-}
-.card p:last-child {
-	margin-bottom: 0;
-}

+:root {
+    --deep-purple: #1a1a2e;
+    --sunset-pink: #ff007f;
+    --midnight: #2d1b4e;
+    --neon-purple: #bc13fe;
+}
+body {
+    background: linear-gradient(135deg, var(--deep-purple) 0%, var(--midnight) 50%, var(--sunset-pink) 100%);
+    margin: 0; font-family: 'Segoe UI', sans-serif; color: white; height: 100vh; overflow: hidden;
+}
+.page { position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; flex-direction: column; }
+.hidden { display: none !important; }
+/* Privacy & Interaction Fixes */
+img {
+    -webkit-user-drag: none; /* Webkit drag prevention */
+    -webkit-user-select: none; /* Required for Safari - Fixes red error */
+    -ms-user-select: none;
+    user-select: none;
+    pointer-events: none;
+}
+#main-photo, #target, button, .cake-container {
+    pointer-events: auto !important;
+}
+/* Glassmorphism Fix for Safari */
+.glass-card {
+    background: rgba(255, 255, 255, 0.05);
+    -webkit-backdrop-filter: blur(15px); /* Fixes Safari glass effect */
+    backdrop-filter: blur(15px);
+    border: 1px solid rgba(255, 255, 255, 0.1); padding: 30px; border-radius: 25px; text-align: center; width: 85%; max-width: 400px;
+}
+.neon-text { text-shadow: 0 0 10px var(--sunset-pink), 0 0 20px var(--neon-purple); }
+.profile-img { width: 100%; max-height: 400px; object-fit: cover; border-radius: 15px; border: 3px solid var(--sunset-pink); margin: 20px 0; cursor: pointer; }
+button { background: linear-gradient(45deg, var(--sunset-pink), var(--neon-purple)); color: white; border: none; padding: 14px 32px; border-radius: 50px; font-weight: bold; cursor: pointer; margin-top: 10px; }
+/* Cake & Stats Styling */
+.cake-container { position: relative; width: 200px; height: 150px; margin: 40px auto; display: flex; cursor: pointer; }
+.cake-half { width: 100px; height: 100px; background: #ff69b4; border: 3px solid white; position: relative; transition: transform 0.8s ease; }
+.left { border-radius: 100px 0 0 100px; }
+.right { border-radius: 0 100px 100px 0; }
+.topping.cherry { width: 20px; height: 20px; background: red; border-radius: 50%; position: absolute; top: -10px; left: 40px; border: 2px solid white; }
+.sprinkles { width: 100%; height: 100%; position: absolute; background-image: radial-gradient(white 1px, transparent 1px), radial-gradient(#ffff00 1px, transparent 1px); background-size: 15px 15px; }
+.knife { position: absolute; top: -50px; left: 45%; font-size: 2.5rem; transition: 0.5s; opacity: 0; z-index: 20; }
+.knife::after { content: '🔪'; }
+.terminal-box { font-family: 'Courier New', monospace; color: var(--sunset-pink); text-align: left; line-height: 1.6; }
+#game-area { width: 100%; height: 250px; background: rgba(0,0,0,0.4); border-radius: 15px; position: relative; border: 2px solid var(--sunset-pink); overflow: hidden; }
+#target { width: 50px; position: absolute; cursor: pointer; }
+.stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin: 20px 0; }
+.stat-item { background: rgba(255, 255, 255, 0.1); padding: 10px; border-radius: 10px; border: 1px solid var(--sunset-pink); }
+.stat-label { font-size: 0.7rem; color: #ffcae3; display: block; }
+.stat-value { font-size: 1.2rem; font-weight: bold; color: var(--sunset-pink); }

sys_asset_01.jpeg ADDED Viewed

Git LFS Details

SHA256: 0a46edd10873d355ed2ffdade2084a75c66e06543bdf03484cf3260af359ea3f
Pointer size: 131 Bytes
Size of remote file: 103 kB

sys_asset_02.jpeg ADDED Viewed