Как я могу изменить этот код, чтобы он работал так, как я хочу? [закрыто] ⇐ Javascript

[Anonymous]

Я написал этот код, и он работает в домене ozitoman.com через GitHub. Однако многие части не такие, как мне хотелось, и, поскольку я не до конца понимаю HTML и CSS, я пытался редактировать их с помощью ChatGPT, но безуспешно. Вот что я хочу сделать:
Добавьте ссылки на логотипы, отличные от моего собственного логотипа, в центре.
Сделайте так, чтобы логотип прекращал движение, когда на него наводится курсор, и возобновлял движение, когда курсор удаляется.
Сделайте так, чтобы маленькие луны аккуратно вращались вокруг своих собственных логотипов.
Спасибо за вашу помощь.




ozitoman











window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-HVZH904LRH');



























document.addEventListener("DOMContentLoaded", function() {
const canvas = document.createElement("canvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
canvas.style.position = "fixed";
canvas.style.top = "0";
canvas.style.left = "0";
canvas.style.pointerEvents = "none";
document.body.appendChild(canvas);

const ctx = canvas.getContext("2d");

function getRandomColor() {
const colors = [
{ color: "red", weight: 0.2 },
{ color: "#ffa371", weight: 0.1 },
{ color: "white", weight: 0.2 },
{ color: "#fffa86", weight: 0.2 },
{ color: "#a87bff", weight: 0.3 }
];

const totalWeight = colors.reduce((acc, curr) => acc + curr.weight, 0);
const random = Math.random() * totalWeight;

let cumulativeWeight = 0;
for (const color of colors) {
cumulativeWeight += color.weight;
if (random < cumulativeWeight) {
return color.color;
}
}

return "white";
}

function getRandomSize(minSize, maxSize) {
return Math.random() * (maxSize - minSize) + minSize;
}

function drawRandomStars() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
const numStars = 1500;
const minSize = 0.1;
const maxSize = 3;
for (let i = 0; i < numStars; i++) {
const x = Math.random() * canvas.width;
const y = Math.random() * canvas.height;
const size = getRandomSize(minSize, maxSize);
ctx.fillStyle = getRandomColor();
ctx.fillRect(x, y, size, size);
}
}

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

drawRandomStars();
});




* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
background-color: black;
background-repeat: repeat;
background-attachment: fixed;
background-position: 50% 50%;
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
overflow: hidden;
}

.container {
font-size: 10px;
width: 40em;
height: 40em;
position: relative;
}

.ozitoman {
position: absolute;
top: 12.5em;
left: 12.5em;
width: 15em;
height: 15em;
background-image: url('/vector_logos/ozi_logo.svg');
background-size: cover;
background-color: black;
background-position: center;
border-radius: 50%;
box-shadow: 0 0 3em #daa520;
}

.linkedin, .github, .deviantart, .spotify, .email {
position: absolute;
border-style: solid;
border-color: #fff transparent transparent transparent;
border-width: 0.1em 0.1em 0 0;
border-radius: 50%;
}

.linkedin {
top: 5em;
left: 5em;
width: 30em;
height: 30em;
animation: orbit 10s linear infinite;
}

.github {
top: -2.5em;
left: -2.5em;
width: 45em;
height: 45em;
animation: orbit 12s linear infinite;
}

.deviantart {
top: -10em;
left: -10em;
width: 60em;
height: 60em;
animation: orbit 14s linear infinite;
}

.spotify {
top: -17.5em;
left: -17.5em;
width: 75em;
height: 75em;
animation: orbit 16s linear infinite;
}

.email {
top: -25em;
left: -25em;
width: 90em;
height: 90em;
animation: orbit 18s linear infinite;
}

.moon-1, .moon-2, .moon-3, .moon-4, .moon-5 {
position: absolute;
top: 0;
right: 0;
width: 8.6em;
height: 8.6em;
animation: orbit-moon 2.5s linear infinite;
}

.linkedin::before, .github::before, .deviantart::before, .spotify::before, .email::before {
content: ".";
position: absolute;
border-radius: 50%;
background-size: cover;
background-position: center;
background-color: black;
}

.linkedin::before {
top: 2.1em;
right: 2.1em;
width: 4.5em;
height: 4.5em;
background-image: url('/vector_logos/linkedin.svg');
box-shadow: 0 0 3em #0072b1;
}

.github::before {
top: 4.25em;
right: 4.25em;
width: 4.5em;
height: 4.5em;
background-image: url('/vector_logos/github.svg');
box-shadow: 0 0 3em white;
}

.deviantart::before {
top: 6.45em;
right: 6.45em;
width: 4.5em;
height: 4.5em;
background-image: url('/vector_logos/deviantart.svg');
box-shadow: 0 0 3em #00e59b;
}

.spotify::before {
top: 8.65em;
right: 8.65em;
width: 4.5em;
height: 4.5em;
background-image: url('/vector_logos/spotify.svg');
box-shadow: 0 0 3em #1cc95a;
}

.email::before {
top: 10.85em;
right: 10.85em;
width: 4.5em;
height: 4.5em;
background-image: url('/vector_logos/email.svg');
box-shadow: 0 0 3em #c5221f;
}

.moon-1::before, .moon-2::before, .moon-3::before, .moon-4::before, .moon-5::before {
content: ".";
position: absolute;
border-radius: 50%;
top: 0.8em;
right: 0.2em;
width: 1.2em;
height: 1.2em;
animation: orbit-moon 2.5s linear infinite;
}

.moon-1::before {
background: #0072b1;
}

.moon-2::before {
background: white;
}

.moon-3::before {
background: #00e59b;
}

.moon-4::before {
background: #1cc95a;
}

.moon-5::before {
background: #c5221f;
}

@keyframes orbit {
to {
transform: rotate(360deg);
}
}

@keyframes orbit-moon {
to {
transform: rotate(360deg);
}
}


Подробнее здесь: https://stackoverflow.com/questions/798 ... -as-i-want