Spaces:

ProPerNounpYK
/

TimeWalker

Running

App Files Files Community

ProPerNounpYK commited on Dec 7, 2024

Commit

ecae3bb

verified ·

1 Parent(s): 164454b

Update index.html

Browse files

Files changed (1) hide show

index.html +176 -18

index.html CHANGED Viewed

@@ -1,19 +1,177 @@
-<!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>
+<head>
+<style>
+  body {
+    margin: 0;
+    overflow: hidden;
+    background: #1a1a1a;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 100vh;
+  }
+  canvas {
+    cursor: pointer;
+  }
+</style>
+</head>
+<body>
+<canvas id="canvas"></canvas>
+<script>
+const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+let particles = [];
+const phrases = [
+  { text: 'Hello everyone.', size: 65, duration: 5000 },
+  { text: 'You have been selected as the next\nTimewalker for our team of Space Guardians.', size: 42, duration: 7000 },
+  { text: 'Repair the collapsing timelines\nand return safely.', size: 42, duration: 6000 },
+  { text: 'Good luck.\n- From the Space Guardians Leader', sizes: [65, 40], spacing: 45, duration: null }
+];
+let currentPhraseIndex = 0;
+let animationFrame;
+let mouseX = 0;
+let mouseY = 0;
+canvas.width = window.innerWidth;
+canvas.height = window.innerHeight;
+class Particle {
+  constructor(x, y, targetX, targetY) {
+    this.x = Math.random() * canvas.width;
+    this.y = Math.random() * canvas.height;
+    this.targetX = targetX;
+    this.targetY = targetY;
+    this.dx = (Math.random() - 0.5) * 8;
+    this.dy = (Math.random() - 0.5) * 8;
+    this.radius = 2;
+    this.alpha = 1;
+    this.fadeSpeed = 0.02;
+  }
+  draw() {
+    ctx.beginPath();
+    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
+    ctx.fillStyle = `rgba(255, 255, 255, ${this.alpha})`;
+    ctx.fill();
+    ctx.closePath();
+  }
+  update() {
+    const distance = Math.hypot(mouseX - this.x, mouseY - this.y);
+    if(distance < 100) {
+      this.x += this.dx;
+      this.y += this.dy;
+    } else {
+      this.x += (this.targetX - this.x) * 0.1;
+      this.y += (this.targetY - this.y) * 0.1;
+    }
+  }
+}
+function createParticles(phrase) {
+  let newParticles = [];
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  const lines = phrase.text.split('\n');
+  lines.forEach((line, index) => {
+    const size = phrase.sizes ? phrase.sizes[index] : phrase.size;
+    const font = index === 0 ? 'Arial' : 'Arial';
+    ctx.font = `${size}px ${font}`;
+    ctx.fillStyle = 'white';
+    ctx.textAlign = 'center';
+    ctx.textBaseline = 'middle';
+    const spacing = phrase.spacing || size * 1.2;
+    const y = (canvas.height/2 - 20) + (index - (lines.length-1)/2) * spacing; // Moved up by 20px
+    ctx.fillText(line, canvas.width/2, y);
+  });
+  const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height).data;
+  for(let y = 0; y < canvas.height; y += 4) {
+    for(let x = 0; x < canvas.width; x += 4) {
+      const index = (y * canvas.width + x) * 4;
+      const alpha = imageData[index + 3];
+      if(alpha > 128) {
+        newParticles.push(new Particle(x, y, x, y));
+      }
+    }
+  }
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  return newParticles;
+}
+function transition() {
+  if(currentPhraseIndex < phrases.length - 1) {
+    currentPhraseIndex++;
+    const currentPhrase = phrases[currentPhraseIndex];
+    particles.forEach(particle => {
+      particle.dx = (Math.random() - 0.5) * 20;
+      particle.dy = (Math.random() - 0.5) * 20;
+      const fadeOut = setInterval(() => {
+        particle.alpha -= particle.fadeSpeed;
+        if(particle.alpha <= 0) clearInterval(fadeOut);
+      }, 50);
+    });
+    setTimeout(() => {
+      particles = createParticles(currentPhrase);
+      particles.forEach(particle => {
+        particle.alpha = 0;
+        const fadeIn = setInterval(() => {
+          particle.alpha += particle.fadeSpeed;
+          if(particle.alpha >= 1) clearInterval(fadeIn);
+        }, 50);
+      });
+    }, 800);
+    if(currentPhrase.duration) {
+      setTimeout(transition, currentPhrase.duration);
+    }
+  }
+}
+function animate() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  particles.forEach(particle => {
+    particle.update();
+    particle.draw();
+  });
+  animationFrame = requestAnimationFrame(animate);
+}
+canvas.addEventListener('mousemove', (e) => {
+  mouseX = e.clientX;
+  mouseY = e.clientY;
+});
+window.addEventListener('resize', () => {
+  canvas.width = window.innerWidth;
+  canvas.height = window.innerHeight;
+  particles = createParticles(phrases[currentPhraseIndex]);
+});
+particles = createParticles(phrases[0]);
+particles.forEach(particle => {
+  particle.alpha = 0;
+  const fadeIn = setInterval(() => {
+    particle.alpha += particle.fadeSpeed;
+    if(particle.alpha >= 1) clearInterval(fadeIn);
+  }, 50);
+});
+animate();
+setTimeout(transition, phrases[0].duration);
+</script>
+</body>
+</html>