Spaces:

Shade44
/

Shade

No application file

App Files Files Community

Shade44 commited on Feb 14

Commit

2b85087

verified ·

1 Parent(s): a298b76

Upload 6 files

Browse files

Files changed (7) hide show

.gitattributes +3 -0
Me.png +3 -0
README.md +1 -11
flower.png +3 -0
index.html +278 -19
qr.jpeg +0 -0
song.mp3 +3 -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
+flower.png filter=lfs diff=lfs merge=lfs -text
+Me.png filter=lfs diff=lfs merge=lfs -text
+song.mp3 filter=lfs diff=lfs merge=lfs -text

Me.png ADDED Viewed

Git LFS Details

SHA256: fa26c590b2693a849e8de8044ea2c100ca251dbf36c7b80b4c80ed9f106f9271
Pointer size: 131 Bytes
Size of remote file: 209 kB

README.md CHANGED Viewed

@@ -1,11 +1 @@
----
-title: Shade
-emoji: 🦀
-colorFrom: red
-colorTo: red
-sdk: static
-pinned: false
-short_description: for one day
----
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference


1	+ Valentine_Date_no_is_not_an_option

flower.png ADDED Viewed

Git LFS Details

SHA256: 9320a53999ffaafdec06818ce315b095db5c9c6cc7d67a9c830921268bef8f33
Pointer size: 131 Bytes
Size of remote file: 172 kB

index.html CHANGED Viewed

@@ -1,19 +1,278 @@
-<!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>Be My Valentine 💘</title>
+<!-- Confetti -->
+<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.6.0/dist/confetti.browser.min.js"></script>
+<style>
+*{
+  box-sizing:border-box;
+  margin:0;
+  padding:0;
+}
+body{
+  min-height:100vh;
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  background:linear-gradient(-45deg,#ff9a9e,#fad0c4,#fbc2eb,#a18cd1);
+  background-size:400% 400%;
+  animation:bgMove 12s ease infinite;
+  font-family:sans-serif;
+  overflow:hidden;
+}
+@keyframes bgMove{
+  0%{background-position:0% 50%;}
+  50%{background-position:100% 50%;}
+  100%{background-position:0% 50%;}
+}
+/* CARD */
+.card{
+  width:min(92%,420px);
+  padding:40px 30px;
+  background:rgba(255,255,255,0.8);
+  border-radius:28px;
+  text-align:center;
+  box-shadow:0 30px 80px rgba(0,0,0,0.25);
+  transition:0.6s ease;
+}
+/* fade out card */
+.card.hide{
+  opacity:0;
+  transform:scale(0.9);
+  pointer-events:none;
+}
+.emoji{
+  font-size:60px;
+  margin-bottom:12px;
+}
+h2{
+  margin-bottom:30px;
+}
+.buttons{
+  position:relative;
+  height:70px;
+}
+button{
+  position:absolute;
+  padding:12px 30px;
+  border-radius:40px;
+  border:none;
+  cursor:pointer;
+}
+#yes{
+  left:12%;
+  background:#ff4d6d;
+  color:white;
+}
+#no{
+  left:55%;
+}
+/* FLOWER */
+.flower{
+  position:absolute;
+  top:30%;
+  left:85%;
+  animation:scale 4s linear infinite;
+}
+@keyframes scale{
+  from{transform:scale(1);}
+  to{transform:scale(4);}
+}
+/* RESULT SECTION (QR + ME) */
+.result{
+  position:absolute;
+  top:50%;
+  left:50%;
+  transform:translate(-50%,-50%);
+  display:flex;
+  gap:60px;
+  align-items:center;
+  opacity:0;
+  pointer-events:none;
+  transition:0.8s ease;
+}
+/* show result */
+.result.show{
+  opacity:1;
+  pointer-events:auto;
+}
+/* QR */
+.qr img{
+  width:260px;
+  border-radius:20px;
+  box-shadow:0 20px 50px rgba(0,0,0,0.3);
+}
+/* ME IMAGE */
+.me{
+  transform:scale(0) rotate(0deg);
+}
+.result.show .me{
+  animation:growRotate 2.5s ease forwards;
+}
+@keyframes growRotate{
+  from{
+    transform:scale(0) rotate(0deg);
+  }
+  to{
+    transform:scale(1.6) rotate(360deg);
+  }
+}
+.me img{
+  width:200px;
+  border-radius:20px;
+}
+/* Floating hearts */
+.heart{
+  position:absolute;
+  bottom:-20px;
+  animation:floatUp linear forwards;
+}
+@keyframes floatUp{
+  from{transform:translateY(0);opacity:1;}
+  to{transform:translateY(-120vh);opacity:0;}
+}
+</style>
+</head>
+<body>
+<audio id="bgMusic" src="song.mp3" loop></audio>
+<!-- CARD -->
+<div class="card">
+  <div class="emoji">🐸❤️</div>
+  <h2>Aavash,<br>Will you be my Valentine?</h2>
+  <div class="buttons">
+    <button id="yes">Yes 💖</button>
+    <button id="no">No 😠</button>
+  </div>
+</div>
+<!-- FLOWER -->
+<div class="flower">
+  <img src="flower.png" width="120">
+</div>
+<!-- RESULT (QR + ME side by side) -->
+<div class="result">
+  <div class="qr">
+    <h2>Sittai maa kaa paainxa?! 💕</h2>
+    <marquee scrollamount="4"><b></b>QR bhitra rakhera pathaudai xu mero maya, ma timilai...scan garideuna hai</marquee></b></marquee>
+    <img src="qr.jpeg">
+  </div>
+  <div class="me">
+    <img src="Me.png">
+  </div>
+</div>
+<!-- Sounds -->
+<audio id="hoverSound" src="https://assets.mixkit.co/sfx/preview/mixkit-cartoon-voice-laugh-343.mp3"></audio>
+<audio id="yesSound" src="https://assets.mixkit.co/sfx/preview/mixkit-achievement-bell-600.mp3"></audio>
+<script>
+const noBtn=document.getElementById("no");
+const yesBtn=document.getElementById("yes");
+const card=document.querySelector(".card");
+const result=document.querySelector(".result");
+const hoverSound=document.getElementById("hoverSound");
+const yesSound=document.getElementById("yesSound");
+/* Move NO button */
+noBtn.addEventListener("mouseenter",()=>{
+  hoverSound.currentTime=0;
+  hoverSound.play();
+  const cardRect=card.getBoundingClientRect();
+  const btnRect=noBtn.getBoundingClientRect();
+  const maxX=cardRect.width-btnRect.width-10;
+  const maxY=cardRect.height-btnRect.height-10;
+  noBtn.style.left=Math.random()*maxX+"px";
+  noBtn.style.top=Math.random()*maxY+"px";
+});
+/* YES CLICK */
+yesBtn.addEventListener("click",()=>{
+  yesSound.play();
+  confetti({
+    particleCount:260,
+    spread:120,
+    origin:{y:0.65}
+  });
+  /* smooth transition */
+  card.classList.add("hide");
+  setTimeout(()=>{
+    result.classList.add("show");
+  },500);
+});
+/* Floating hearts */
+function createHeart(){
+  const heart=document.createElement("div");
+  heart.className="heart";
+  heart.innerHTML=Math.random()>0.5?"❤️":"💗";
+  heart.style.left=Math.random()*100+"vw";
+  heart.style.fontSize=Math.random()*22+14+"px";
+  heart.style.animationDuration=Math.random()*3+4+"s";
+  document.body.appendChild(heart);
+  setTimeout(()=>heart.remove(),8000);
+}
+setInterval(createHeart,380);
+const bgMusic = document.getElementById("bgMusic");
+/* Start music when page loads */
+window.addEventListener("load", () => {
+  bgMusic.currentTime = 16; // start from 16 seconds
+  bgMusic.play().catch(() => {
+    // browsers block autoplay sometimes
+    // so start on first user click
+    document.addEventListener("click", () => {
+      bgMusic.currentTime = 16;
+      bgMusic.play();
+    }, { once: true });
+  });
+});
+</script>
+</body>
+</html>

qr.jpeg ADDED Viewed

song.mp3 ADDED Viewed

	@@ -0,0 +1,3 @@

+version https://git-lfs.github.com/spec/v1
+oid sha256:9b91062d83bd81d2a9c04c0d050c2b60017a10b891291bf0548797e8109ef41f
+size 7288300