hkais commited on
Commit
798ac57
·
verified ·
1 Parent(s): b574a73

Add 1 files

Browse files
Files changed (1) hide show
  1. index.html +29 -18
index.html CHANGED
@@ -463,36 +463,52 @@
463
  const orbits = document.querySelectorAll('.orbit');
464
 
465
  // Store base animation durations
466
- const baseDurations = {};
467
- orbits.forEach(orbit => {
468
- const style = window.getComputedStyle(orbit);
469
- baseDurations[orbit.className.split(' ')[0]] = parseFloat(style.animationDuration);
470
- });
 
 
 
 
 
471
 
472
  // Animation control
473
  let isPlaying = true;
474
  let speedFactor = 1;
475
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
476
  // Play/pause functionality
477
  playBtn.addEventListener('click', function() {
478
  if (!isPlaying) {
479
- orbits.forEach(orbit => {
480
- orbit.style.animationPlayState = 'running';
481
- });
482
  isPlaying = true;
483
  playBtn.classList.add('active');
484
  pauseBtn.classList.remove('active');
 
485
  }
486
  });
487
 
488
  pauseBtn.addEventListener('click', function() {
489
  if (isPlaying) {
490
- orbits.forEach(orbit => {
491
- orbit.style.animationPlayState = 'paused';
492
- });
493
  isPlaying = false;
494
  pauseBtn.classList.add('active');
495
  playBtn.classList.remove('active');
 
496
  }
497
  });
498
 
@@ -500,12 +516,7 @@
500
  speedControl.addEventListener('input', function() {
501
  speedFactor = parseFloat(this.value);
502
  speedValue.textContent = `${speedFactor.toFixed(1)}x`;
503
-
504
- orbits.forEach(orbit => {
505
- const orbitClass = orbit.className.split(' ')[0];
506
- const baseDuration = baseDurations[orbitClass];
507
- orbit.style.animationDuration = `${baseDuration / speedFactor}s`;
508
- });
509
  });
510
 
511
  // Toggle labels
@@ -552,5 +563,5 @@
552
  updateLabelPositions();
553
  });
554
  </script>
555
- <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <a href="https://enzostvs-deepsite.hf.space" style="color: #fff;" target="_blank" >DeepSite</a> <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;"></p></body>
556
  </html>
 
463
  const orbits = document.querySelectorAll('.orbit');
464
 
465
  // Store base animation durations
466
+ const baseDurations = {
467
+ 'mercury-orbit': 4,
468
+ 'venus-orbit': 10,
469
+ 'earth-orbit': 15,
470
+ 'mars-orbit': 28,
471
+ 'jupiter-orbit': 95,
472
+ 'saturn-orbit': 230,
473
+ 'uranus-orbit': 680,
474
+ 'neptune-orbit': 1330
475
+ };
476
 
477
  // Animation control
478
  let isPlaying = true;
479
  let speedFactor = 1;
480
 
481
+ // Function to update animations based on speed
482
+ function updateAnimations() {
483
+ orbits.forEach(orbit => {
484
+ const orbitClass = Array.from(orbit.classList).find(cls => cls.endsWith('-orbit'));
485
+ if (orbitClass) {
486
+ const baseDuration = baseDurations[orbitClass];
487
+ orbit.style.animationDuration = `${baseDuration / speedFactor}s`;
488
+ orbit.style.animationPlayState = isPlaying ? 'running' : 'paused';
489
+ }
490
+ });
491
+ }
492
+
493
+ // Initialize animations
494
+ updateAnimations();
495
+
496
  // Play/pause functionality
497
  playBtn.addEventListener('click', function() {
498
  if (!isPlaying) {
 
 
 
499
  isPlaying = true;
500
  playBtn.classList.add('active');
501
  pauseBtn.classList.remove('active');
502
+ updateAnimations();
503
  }
504
  });
505
 
506
  pauseBtn.addEventListener('click', function() {
507
  if (isPlaying) {
 
 
 
508
  isPlaying = false;
509
  pauseBtn.classList.add('active');
510
  playBtn.classList.remove('active');
511
+ updateAnimations();
512
  }
513
  });
514
 
 
516
  speedControl.addEventListener('input', function() {
517
  speedFactor = parseFloat(this.value);
518
  speedValue.textContent = `${speedFactor.toFixed(1)}x`;
519
+ updateAnimations();
 
 
 
 
 
520
  });
521
 
522
  // Toggle labels
 
563
  updateLabelPositions();
564
  });
565
  </script>
566
+ </body>
567
  </html>