Hugging Face's logo

Spaces:
fLausch
/
beatvault-legacy
Running

App Files Community
fLausch commited on
Commit
932559a
·
verified ·
1 Parent(s): c9ac001

i dont see the mandelbrot background

Browse files
Files changed (2) hide show
  1. index.html +1 -1
  2. script.js +6 -7
index.html CHANGED
@@ -69,7 +69,7 @@
69
  <script src="https://unpkg.com/feather-icons"></script>
70
  </head>
71
  <body class="text-gray-100 min-h-screen font-sans overflow-x-hidden">
72
- <div class="psychedelic-bg"></div>
73
  <!-- Navigation Component -->
74
  <script src="components/navigation.js"></script>
75
  <custom-navigation></custom-navigation>
 
69
  <script src="https://unpkg.com/feather-icons"></script>
70
  </head>
71
  <body class="text-gray-100 min-h-screen font-sans overflow-x-hidden">
72
+ <div class="psychedelic-bg" id="psychedelic-bg"></div>
73
  <!-- Navigation Component -->
74
  <script src="components/navigation.js"></script>
75
  <custom-navigation></custom-navigation>
script.js CHANGED
@@ -336,7 +336,6 @@ function debounce(func, wait) {
336
  timeout = setTimeout(later, wait);
337
  };
338
  }
339
-
340
  // Mandelbrot Background Animation
341
  // Extracted from fLau & blauschig V4.20
342
  // This script creates a animated Mandelbrot fractal background
@@ -348,11 +347,11 @@ function initializeMandelbrotBackground() {
348
  canvas.style.left = '0';
349
  canvas.style.width = '100%';
350
  canvas.style.height = '100%';
351
- canvas.style.zIndex = '-3'; // Hinter den Inhalten
352
- canvas.style.pointerEvents = 'none'; // Keine Interaktion
353
 
354
  // Append to psychedelic-bg container or body
355
- const psychedelicBg = document.querySelector('.psychedelic-bg');
356
  if (psychedelicBg) {
357
  psychedelicBg.appendChild(canvas);
358
  } else {
@@ -381,11 +380,11 @@ function initializeMandelbrotBackground() {
381
  ctx.fillStyle = 'rgba(0,0,0,0.05)';
382
  ctx.fillRect(0, 0, canvas.width, canvas.height);
383
 
384
- ctx.font = '0.75rem monospace';
385
  ctx.textAlign = 'center';
386
  ctx.textBaseline = 'middle';
387
 
388
- const density = 15;
389
 
390
  for(let x = density; x < canvas.width; x += density) {
391
  for(let y = density; y < canvas.height; y += density) {
@@ -409,7 +408,7 @@ function initializeMandelbrotBackground() {
409
  const hue = (i * 15 + time * 30) % 360;
410
  const textPosition = Math.floor((x + y + time * 100) / density) % chars.length;
411
  const char = chars[textPosition];
412
- ctx.fillStyle = `hsla(${hue}, 100%, 70%, ${i/20 * 0.9})`;
413
  ctx.fillText(char, x, y);
414
  }
415
  }
 
336
  timeout = setTimeout(later, wait);
337
  };
338
  }
 
339
  // Mandelbrot Background Animation
340
  // Extracted from fLau & blauschig V4.20
341
  // This script creates a animated Mandelbrot fractal background
 
347
  canvas.style.left = '0';
348
  canvas.style.width = '100%';
349
  canvas.style.height = '100%';
350
+ canvas.style.zIndex = '-1'; // Make sure it's behind content
351
+ canvas.style.pointerEvents = 'none'; // No interaction
352
 
353
  // Append to psychedelic-bg container or body
354
+ const psychedelicBg = document.getElementById('psychedelic-bg');
355
  if (psychedelicBg) {
356
  psychedelicBg.appendChild(canvas);
357
  } else {
 
380
  ctx.fillStyle = 'rgba(0,0,0,0.05)';
381
  ctx.fillRect(0, 0, canvas.width, canvas.height);
382
 
383
+ ctx.font = '12px monospace';
384
  ctx.textAlign = 'center';
385
  ctx.textBaseline = 'middle';
386
 
387
+ const density = 20;
388
 
389
  for(let x = density; x < canvas.width; x += density) {
390
  for(let y = density; y < canvas.height; y += density) {
 
408
  const hue = (i * 15 + time * 30) % 360;
409
  const textPosition = Math.floor((x + y + time * 100) / density) % chars.length;
410
  const char = chars[textPosition];
411
+ ctx.fillStyle = `hsla(${hue}, 100%, 70%, ${i/20 * 0.8})`;
412
  ctx.fillText(char, x, y);
413
  }
414
  }