Spaces:

ApiCheck
/

HappyNewYear

Running

App Files Files Community

ApiCheck commited on Dec 29, 2024

Commit

bbf0df5

verified ·

1 Parent(s): 0d1f496

Update index.html

Browse files

Files changed (1) hide show

index.html +535 -19

index.html CHANGED Viewed

@@ -1,19 +1,535 @@
-<!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 http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Happy New Year 2025</title>
+</head>
+<style>
+    @import url("https://fonts.googleapis.com/css2?family=Bilbo+Swash+Caps&family=Poppins:wght@900&display=swap");
+@import url('https://fonts.googleapis.com/css?family=Montserrat:700|Pacifico');
+*,
+*:after,
+*:before {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  -webkit-transition: all 100ms ease-in;
+  transition: all 100ms ease-in;
+}
+body {
+  background-color: #1a1818;
+  overflow: hidden;
+  height: 100vh;
+}
+.msg {
+  width: 100%;
+  font-family: 'Pacifico', cursive;
+  font-size: 100px;
+  font-weight: bolder;
+  color: #fff;
+  text-align: center;
+  position: absolute;
+  top: 50%;
+  opacity: 0;
+  animation: message 2s ease-in-out 6s forwards;
+}
+@keyframes message {
+  0% {
+    opacity: 0;
+    margin-top: 0;
+  }
+  100% {
+    opacity: 1;
+    margin-top: -200px;
+  }
+}
+.y1 {
+  color: #fff;
+  animation: y1colorful 2s ease-in-out 5.75s forwards;
+}
+.y2 {
+  color: #fff;
+  animation: y2colorful 2s ease-in-out 5.75s forwards;
+}
+.y3 {
+  color: #fff;
+  animation: y3colorful 2s ease-in-out 5.75s forwards;
+}
+.y4 {
+  color: #fff;
+  animation: y4colorful 2s ease-in-out 5.75s forwards;
+}
+@keyframes y1colorful {
+  0% {
+    color: #fff;
+  }
+  100% {
+    color: #10b3ff;
+  }
+}
+@keyframes y2colorful {
+  0% {
+    color: #fff;
+  }
+  100% {
+    color: #07be62;
+  }
+}
+@keyframes y3colorful {
+  0% {
+    color: #fff;
+  }
+  100% {
+    color: #ff8513;
+  }
+}
+@keyframes y4colorful {
+  0% {
+    color: #fff;
+  }
+  100% {
+    color: #fdab14;
+  }
+}
+.old {
+  color: #fff;
+  position: absolute;
+  top: 0%;
+  animation: old_animation 2.5s ease-in-out 4s forwards;
+  margin-left: -80px;
+}
+@keyframes old_animation {
+  0% {
+    top: 0%;
+  }
+  100% {
+    top: -250%;
+  }
+}
+.year {
+  position: absolute;
+  top: 450px;
+  width: 100%;
+  text-align: center;
+}
+.year>span {
+  font-size: 175px;
+  font-weight: 700;
+  font-family: "Poppins", sans-serif;
+  letter-spacing: -12px;
+}
+.first_year {
+  margin-right: 100px;
+}
+.new {
+  position: absolute;
+  right: -100px;
+  animation: new_animation 5s ease-in-out 1.5s forwards;
+}
+@keyframes new_animation {
+  0% {
+    right: -100px;
+  }
+  40% {
+    right: 600px;
+  }
+  90% {
+    right: 600px;
+  }
+  100% {
+    right: 720px;
+    color: yellow;
+  }
+}
+.balloon {
+  width: 100px;
+  height: 120px;
+  border-radius: 50%;
+  background-color: rgb(0, 47, 255);
+  position: absolute;
+  top: 50%;
+  right: -100px;
+  margin-top: -285px;
+  animation: balloon_animation 5s ease-in-out 1.5s forwards;
+}
+.balloon::after {
+  content: "";
+  width: 4px;
+  height: 100px;
+  background-color: #fff;
+  position: absolute;
+  left: 50%;
+  margin-left: -2px;
+  bottom: -100px;
+}
+.balloon::before {
+  content: "";
+  border-style: solid;
+  border-width: 0 10px 20px 10px;
+  border-color: transparent transparent #fd3553 transparent;
+  position: absolute;
+  left: 50%;
+  bottom: -10px;
+  margin-left: -10px;
+}
+@keyframes balloon_animation {
+  0% {
+    right: -120px;
+  }
+  40% {
+    right: 580px;
+  }
+  50% {
+    right: 740px;
+    top: 50%;
+  }
+  100% {
+    right: 740px;
+    top: -200%;
+  }
+}
+.firework {
+  position: relative;
+  opacity: 0;
+  animation: show_fireworks 2s ease-in-out 5s forwards;
+}
+@keyframes show_fireworks {
+  0% {
+    opacity: 0;
+  }
+  99% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.cracker {
+  position: absolute;
+  width: 4px;
+  height: 80px;
+  transform-origin: 50% 100%;
+  overflow: hidden;
+}
+.cracker::before {
+  content: '';
+  background-color: gold;
+  height: 40px;
+  position: absolute;
+  left: 0;
+  right: 0;
+  animation: fire 2s ease-in-out infinite;
+}
+@keyframes fire {
+  0% {
+    top: 100%;
+  }
+  25% {
+    top: 50%;
+  }
+  50% {
+    top: -25%;
+  }
+  75% {
+    top: -50%;
+  }
+  100% {
+    top: -50%;
+  }
+}
+.cracker:nth-child(1) {
+  transform: rotate(0deg) translateY(-15px);
+}
+.cracker:nth-child(2) {
+  transform: rotate(30deg) translateY(-15px);
+}
+.cracker:nth-child(3) {
+  transform: rotate(60deg) translateY(-15px);
+}
+.cracker:nth-child(4) {
+  transform: rotate(90deg) translateY(-15px);
+}
+.cracker:nth-child(5) {
+  transform: rotate(120deg) translateY(-15px);
+}
+.cracker:nth-child(6) {
+  transform: rotate(150deg) translateY(-15px);
+}
+.cracker:nth-child(7) {
+  transform: rotate(180deg) translateY(-15px);
+}
+.cracker:nth-child(8) {
+  transform: rotate(210deg) translateY(-15px);
+}
+.cracker:nth-child(9) {
+  transform: rotate(240deg) translateY(-15px);
+}
+.cracker:nth-child(10) {
+  transform: rotate(270deg) translateY(-15px);
+}
+.cracker:nth-child(11) {
+  transform: rotate(300deg) translateY(-15px);
+}
+.cracker:nth-child(12) {
+  transform: rotate(330deg) translateY(-15px);
+}
+#firework1 {
+  left: 25%;
+  top: 50%;
+  transform: scale(1);
+}
+#firework2 {
+  left: 50%;
+  top: 75%;
+  transform: scale(0.5);
+}
+#firework3 {
+  left: 80%;
+  top: 15%;
+  transform: scale(1.5);
+}
+canvas {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: -1;
+}
+</style>
+<body>
+    <canvas id="Canvas"></canvas>
+    <div class="msg">新年快乐</div>
+    <div class="year">
+        <span class="first_year">
+            <span class="y1">2</span>
+            <span class="y2">0</span>
+            <span class="y3">2</span>
+        </span>
+        <span class="old">4</span>
+        <span class="y4 new">5</span>
+        <div class="balloon"></div>
+    </div>
+    <div class="firework" id="firework1">
+        <div class="cracker"></div>
+        <div class="cracker"></div>
+        <div class="cracker"></div>
+        <div class="cracker"></div>
+        <div class="cracker"></div>
+        <div class="cracker"></div>
+        <div class="cracker"></div>
+        <div class="cracker"></div>
+        <div class="cracker"></div>
+        <div class="cracker"></div>
+        <div class="cracker"></div>
+        <div class="cracker"></div>
+    </div>
+    <div class="firework" id="firework2">
+        <div class="cracker"></div>
+        <div class="cracker"></div>
+        <div class="cracker"></div>
+        <div class="cracker"></div>
+        <div class="cracker"></div>
+        <div class="cracker"></div>
+        <div class="cracker"></div>
+        <div class="cracker"></div>
+        <div class="cracker"></div>
+        <div class="cracker"></div>
+        <div class="cracker"></div>
+        <div class="cracker"></div>
+    </div>
+    <div class="firework" id="firework3">
+        <div class="cracker"></div>
+        <div class="cracker"></div>
+        <div class="cracker"></div>
+        <div class="cracker"></div>
+        <div class="cracker"></div>
+        <div class="cracker"></div>
+        <div class="cracker"></div>
+        <div class="cracker"></div>
+        <div class="cracker"></div>
+        <div class="cracker"></div>
+        <div class="cracker"></div>
+        <div class="cracker"></div>
+    </div>
+</body>
+<script>
+    var c = document.getElementById("Canvas");
+var ctx = c.getContext("2d");
+var cwidth, cheight;
+var shells = [];
+var pass= [];
+var colors = ['#FF5252', '#FF4081', '#E040FB', '#7C4DFF', '#536DFE', '#448AFF', '#40C4FF', '#18FFFF', '#64FFDA', '#69F0AE', '#B2FF59', '#EEFF41', '#FFFF00', '#FFD740', '#FFAB40', '#FF6E40'];
+window.onresize = function() { reset(); }
+reset();
+function reset() {
+  cwidth = window.innerWidth;
+	cheight = window.innerHeight;
+	c.width = cwidth;
+	c.height = cheight;
+}
+function newShell() {
+  var left = (Math.random() > 0.5);
+  var shell = {};
+  shell.x = (1*left);
+  shell.y = 1;
+  shell.xoff = (0.01 + Math.random() * 0.007) * (left ? 1 : -1);
+  shell.yoff = 0.01 + Math.random() * 0.007;
+  shell.size = Math.random() * 6 + 3;
+  shell.color = colors[Math.floor(Math.random() * colors.length)];
+  shells.push(shell);
+}
+function newPass(shell) {
+  var pasCount = Math.ceil(Math.pow(shell.size, 2) * Math.PI);
+  for (i = 0; i < pasCount; i++) {
+    var pas = {};
+    pas.x = shell.x * cwidth;
+    pas.y = shell.y * cheight;
+    var a = Math.random() * 4;
+    var s = Math.random() * 10;
+		pas.xoff = s *  Math.sin((5 - a) * (Math.PI / 2));
+  	pas.yoff = s *  Math.sin(a * (Math.PI / 2));
+    pas.color = shell.color;
+    pas.size = Math.sqrt(shell.size);
+    if (pass.length < 1000) { pass.push(pas); }
+  }
+}
+var lastRun = 0;
+Run();
+function Run() {
+  var dt = 1;
+  if (lastRun != 0) { dt = Math.min(50, (performance.now() - lastRun)); }
+	lastRun = performance.now();
+  //ctx.clearRect(0, 0, cwidth, cheight);
+	ctx.fillStyle = "rgba(0,0,0,0.25)";
+	ctx.fillRect(0, 0, cwidth, cheight);
+  if ((shells.length < 10) && (Math.random() > 0.96)) { newShell(); }
+  for (let ix in shells) {
+    var shell = shells[ix];
+    ctx.beginPath();
+    ctx.arc(shell.x * cwidth, shell.y * cheight, shell.size, 0, 2 * Math.PI);
+    ctx.fillStyle = shell.color;
+    ctx.fill();
+    shell.x -= shell.xoff;
+    shell.y -= shell.yoff;
+    shell.xoff -= (shell.xoff * dt * 0.001);
+    shell.yoff -= ((shell.yoff + 0.2) * dt * 0.00005);
+    if (shell.yoff < -0.005) {
+      newPass(shell);
+      shells.splice(ix, 1);
+    }
+  }
+  for (let ix in pass) {
+    var pas = pass[ix];
+    ctx.beginPath();
+    ctx.arc(pas.x, pas.y, pas.size, 0, 2 * Math.PI);
+    ctx.fillStyle = pas.color;
+    ctx.fill();
+    pas.x -= pas.xoff;
+    pas.y -= pas.yoff;
+    pas.xoff -= (pas.xoff * dt * 0.001);
+    pas.yoff -= ((pas.yoff + 5) * dt * 0.0005);
+    pas.size -= (dt * 0.002 * Math.random())
+    if ((pas.y > cheight)  || (pas.y < -50) || (pas.size <= 0)) {
+        pass.splice(ix, 1);
+    }
+  }
+  requestAnimationFrame(Run);
+}
+</script>
+</html>