bye!

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
      body,
      html {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #1a1a1a;
      }

canvas {
        position: absolute;
        top: 0;
        left: 0;
        pointer-events: none;
      }

#container {
        perspective: 1000px;
      }

#box {
        width: 500px;
        height: 600px;
        background-color: #1f1f1f;
        transition: transform 0.1s ease-out;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        border-radius: 20px;
      }

#dispf {
        width: 500px;
        height: 250px;
        border-radius: 20px;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
      }

#links {
        width: 500px;
        height: 60px;
        border-radius: 20px;
        top: 260px;
        background-color: none;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
      }

#misc {
        width: 500px;
        height: 60px;
        top: 520px;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
      }

#circle-img {
        width: 150px;
        height: 150px;
        border-radius: 50%;
        background-color: #fff;
        top: 60px;
        position: absolute;
        box-shadow: 0 0 50px rgba(255, 255, 255, 0.7);
      }

#banner {
        width: 500px;
        top: 0px;
        position: absolute;
        height: 250px;
        border-radius: 20px;
      }

#sno {
        display: none;
      }

.link-container {
        display: inline-block;
        transition: transform 0.3s ease;
      }

.link-img {
        width: 55px;
        height: 55px;
        cursor: pointer;
        margin: 20px;
      }

.link-container:hover {
        transform: scale(1.1);
      }
      
      #bio{
          text-align: center;
          font-family: Arial, sans-serif;
      }
      
        footer {
            position: fixed;
            left: 0;
            bottom: 0;
            width: 100%;
            background-color: none;
            color: #fff;
            text-align: center;
            padding: 10px 0;
            font-family: Arial, sans-serif;
        }

@media screen and (max-width: 580px), (max-height: 630px) {
        #banner,
        #box,
        #dispf,
        #links {
          display: none;
        }

#sno {
          overflow: hidden;
          display: flex;
          justify-content: center;
          align-items: center;
          color: #fff;
          position: absolute;
          width: 100%;
          height: 100%;
        }

#sno {
          display: flex;
        }
      }

.audio-player {
        border-radius: 20px;
        height: 50px;
        width: 350px;
        background: #444;

font-family: arial;
        color: white;
        font-size: 0.75em;
        overflow: hidden;

display: grid;
        grid-template-rows: 6px auto;
        .timeline {
          background: white;
          width: 40%;
          left: 31%;
          top: 25px;
          position: relative;
          cursor: pointer;
          .progress {
            background: #5496ff;
            width: 0%;
            height: 100%;
            transition: 0.25s;
          }
        }
        .controls {
          display: flex;
          align-items: stretch;
          padding: 0 20px;

> * {
            display: flex;
            align-items: center;
          }
          .toggle-play {
            &.play {
              cursor: pointer;
              position: relative;
              left: 0;
              height: 0;
              width: 0;
              border: 7px solid #0000;
              border-left: 13px solid white;
              &:hover {
                transform: scale(1.1);
              }
            }
            &.pause {
              height: 15px;
              width: 20px;
              cursor: pointer;
              position: relative;
              &:before {
                position: absolute;
                left: 0px;
                background: white;
                content: "";
                height: 15px;
                width: 3px;
              }
              &:after {
                position: absolute;
                top: 0;
                right: 8px;
                background: white;
                content: "";
                height: 15px;
                width: 3px;
              }
              &:hover {
                transform: scale(1.1);
              }
            }
          }
          .time > * {
            padding: 2px;
          }
          .volume-container {
            cursor: pointer;
            left: 150px;
            .volume-button {
              height: 26px;
              display: flex;
              align-items: center;
              .volume {
                transform: scale(0.7);
              }
            }

position: relative;
            z-index: 2;
            .volume-slider {
              position: absolute;
              left: -3px;
              top: 15px;
              z-index: -1;
              width: 0;
              top: 20px;
              height: 6px;
              background: white;
              transition: 0.25s;
              left: 35px;
              width: 50px;
              .volume-percentage {
                background: #5496ff;
                height: 100%;
                width: 75%;
              }
            }
          }
        }
      }
    </style>
  </head>
  <body onload="onLoad()">
    <footer>
                mirrors - <a href="https://kman.cloud" style="color:#fff;text-decoration:none;">kman.cloud</a> | 
        <a href="https://kman.lol" style="color:#fff;text-decoration:none;">kman.lol</a> | 
        <a href="https://kman.bio" style="color:#fff;text-decoration:none;">kman.bio</a> | 
        <a href="https://kman.pro" style="color:#fff;text-decoration:none;">kman.pro</a>
    </footer>
    <div id="sno">
      Sorry, this page does not support your device's resolution.
    </div>
    <div id="container">
      <div id="box">
        <div id="misc">
          <div class="audio-player">
            <div class="timeline">
              <div class="progress"></div>
            </div>
            <div class="controls">
              <div class="play-container">
                <div class="toggle-play play"></div>
              </div>
              <div class="time">
                <div class="current">0:00</div>
                <div class="divider">/</div>
                <div class="length"></div>
              </div>
              <div class="volume-container">
                <div class="volume-button">
                  <div class="volume icono-volumeMedium"></div>
                </div>

<div class="volume-slider">
                  <div class="volume-percentage"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div id="links">
          <div class="link-container">
            <img
              class="link-img"
              src="https://kman.bio/assets/discordico.png"
              alt="discordLogo"
            />
          </div>
          <div class="link-container">
            <img
              class="link-img"
              src="https://kman.bio/assets/globe-100.png"
              alt="websiteLogo"
            />
          </div>
        </div>
        <div id="bio">
            Hi my name is Kman, i make cheats in C#!
            I know coding languages such as PHP, JS/CSS/HTML, C#, and python.
        </div>
        <img
          id="banner"
          src="https://cdn.discordapp.com/banners/1186426035072417883/a_c720e3c4fa40bdea88f1e0c3fa113e5b.gif?size=480"
          alt="banner"
        />
        <div id="dispf">
          <img
            id="circle-img"
            src="https://cdn.discordapp.com/avatars/1186426035072417883/05dfb3a420c4f627ec71967e2f0e603e.png"
            alt="Circular Image"
          />
        </div>
      </div>
    </div>
    <canvas id="starCanvas"></canvas>

audio.addEventListener(
        "loadeddata",
        () => {
          audioPlayer.querySelector(".time .length").textContent =
            getTimeCodeFromNum(audio.duration);
          audio.volume = 0.25;
        },
        false,
      );

const timeline = audioPlayer.querySelector(".timeline");
      timeline.addEventListener(
        "click",
        (e) => {
          const timelineWidth = window.getComputedStyle(timeline).width;
          const timeToSeek =
            (e.offsetX / parseInt(timelineWidth)) * audio.duration;
          audio.currentTime = timeToSeek;
        },
        false,
      );

const volumeSlider = audioPlayer.querySelector(
        ".controls .volume-slider",
      );
      volumeSlider.addEventListener(
        "click",
        (e) => {
          const sliderWidth = window.getComputedStyle(volumeSlider).width;
          const newVolume = e.offsetX / parseInt(sliderWidth);
          audio.volume = newVolume;
          audioPlayer.querySelector(
            ".controls .volume-percentage",
          ).style.width = newVolume * 100 + "%";
        },
        false,
      );

setInterval(() => {
        const progressBar = audioPlayer.querySelector(".progress");
        progressBar.style.width =
          (audio.currentTime / audio.duration) * 100 + "%";
        audioPlayer.querySelector(".time .current").textContent =
          getTimeCodeFromNum(audio.currentTime);
      }, 500);

audioPlayer
        .querySelector(".volume-button")
        .addEventListener("click", () => {
          const volumeEl = audioPlayer.querySelector(
            ".volume-container .volume",
          );
          audio.muted = !audio.muted;
          if (audio.muted) {
            volumeEl.classList.remove("icono-volumeMedium");
            volumeEl.classList.add("icono-volumeMute");
          } else {
            volumeEl.classList.add("icono-volumeMedium");
            volumeEl.classList.remove("icono-volumeMute");
          }
        });

function getTimeCodeFromNum(num) {
        let seconds = parseInt(num);
        let minutes = parseInt(seconds / 60);
        seconds -= minutes * 60;
        const hours = parseInt(minutes / 60);
        minutes -= hours * 60;

if (hours === 0)
          return `${minutes}:${String(seconds % 60).padStart(2, 0)}`;
        return `${String(hours).padStart(2, 0)}:${minutes}:${String(
          seconds % 60,
        ).padStart(2, 0)}`;
      }

var box = document.getElementById("box");

document.addEventListener("mousemove", function (e) {
        var mouseX = e.clientX;
        var mouseY = e.clientY;

var rotateY = (mouseX - window.innerWidth / 2) / 100;
        var rotateX = (mouseY - window.innerHeight / 2) / -100;

box.style.transform =
          "rotateY(" + rotateY + "deg) rotateX(" + rotateX + "deg)";
      });

document.addEventListener("DOMContentLoaded", function () {
        const canvas = document.getElementById("starCanvas");
        const ctx = canvas.getContext("2d");

let width = (canvas.width = window.innerWidth);
        let height = (canvas.height = window.innerHeight);
        let stars = [];

window.addEventListener("resize", function () {
          width = canvas.width = window.innerWidth;
          height = canvas.height = window.innerHeight;
        });

function smoothRGB(star) {
          var red = Math.floor(Math.random() * 256);
          var green = Math.floor(Math.random() * 256);
          var blue = Math.floor(Math.random() * 256);

return `rgba(${red}, ${green}, ${blue}, ${star.alpha})`;
        }

class Star {
          constructor(x, y, velocityX, velocityY) {
            this.x = x;
            this.y = y;
            this.finalSize = Math.random() * 1.6;
            this.size = this.finalSize * 2;
            this.alpha = 1;
            this.velocityX = velocityX * 0.005;
            this.velocityY = 1 + Math.random() + velocityY * 0.0;
            this.gravity = 0.01;
            this.drag = 0.97;
            this.turbulence = () => Math.random() * 0.5 - 0.25;
            this.timeElapsed = 0;
            this.red = 255;
            this.green = 255;
            this.blue = 255;
          }

draw() {
            ctx.fillStyle = smoothRGB(this);
            ctx.beginPath();
            ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
            ctx.fill();
          }

update(deltaTime) {
            this.x += this.velocityX + this.turbulence();
            this.velocityX *= this.drag;
            this.y += this.velocityY;
            this.velocityY += this.gravity;
            this.alpha = Math.max(0, this.alpha - 0.01);

this.timeElapsed += deltaTime;
            if (this.timeElapsed < 2000) {
              this.size =
                this.finalSize * 2 - (this.finalSize * this.timeElapsed) / 2000;
            } else {
              this.size = this.finalSize;
            }
          }
        }

let lastMouseX = 0;
        let lastMouseY = 0;
        let mouseVelocityX = 0;
        let mouseVelocityY = 0;

function addStar(e) {
          mouseVelocityX = e.clientX - lastMouseX;
          mouseVelocityY = e.clientY - lastMouseY;
          lastMouseX = e.clientX;
          lastMouseY = e.clientY;

let randomOffsetX = (Math.random() - 0.5) * 100;
          let randomOffsetY = (Math.random() - 0.5) * 100;

stars.push(
            new Star(
              e.clientX,
              e.clientY,
              mouseVelocityX + randomOffsetX,
              mouseVelocityY + randomOffsetY,
            ),
          );
        }

document.addEventListener("mousemove", addStar);

let lastTime = 0;

function update(time = 0) {
          const deltaTime = time - lastTime;
          lastTime = time;

ctx.clearRect(0, 0, width, height);
          stars.forEach((star) => star.update(deltaTime));
          stars.forEach((star) => star.draw());
          stars = stars.filter(
            (star) =>
              star.alpha > 0 && star.y < height && star.x > 0 && star.x < width,
          );
          requestAnimationFrame(update);
        }

update();
      });
    </script>
  </body>
</html>