Try to see space!
// ==UserScript==
// @name Hero wars Sky
// @namespace Hero wars Sky
// @version 1.0
// @description Try to see space!
// @author Hamizuse
// @match https://www.hero-wars.com/*
// @icon https://www.google.com/s2/favicons?sz=64&domain=hero-wars.com
// @grant none
// @license MIT
// ==/UserScript==
(function() {
// Get the layout container
const layout = document.querySelector('.layout');
// Create stars container
const starsContainer = document.createElement('div');
starsContainer.style.position = 'absolute';
starsContainer.style.top = '0';
starsContainer.style.left = '0';
starsContainer.style.width = '100%';
starsContainer.style.height = '100%';
starsContainer.style.overflow = 'hidden';
starsContainer.style.zIndex = '0';
starsContainer.style.pointerEvents = 'none';
// Set layout container styles
layout.style.position = 'relative';
layout.style.backgroundColor = '#0a0e29';
layout.style.backgroundImage = 'linear-gradient(to bottom, #0a0e29, #1a1f4b, #2d2a6d)';
layout.style.minHeight = '100vh';
layout.style.color = '#ffffff';
layout.style.fontFamily = "'Arial', sans-serif";
layout.style.overflow = 'hidden';
// Create stars
function createStars() {
const starCount = 200;
for (let i = 0; i < starCount; i++) {
const star = document.createElement('div');
star.style.position = 'absolute';
star.style.backgroundColor = '#ffffff';
star.style.borderRadius = '50%';
// Random position
const left = Math.random() * 100;
const top = Math.random() * 100;
star.style.left = `${left}%`;
star.style.top = `${top}%`;
// Random size (1-3px)
const size = Math.random() * 2 + 1;
star.style.width = `${size}px`;
star.style.height = `${size}px`;
// Random opacity and animation delay
const opacity = Math.random() * 0.8 + 0.2;
const delay = Math.random() * 5;
star.style.opacity = opacity;
star.style.animation = `twinkle ${Math.random() * 3 + 2}s infinite ${delay}s`;
starsContainer.appendChild(star);
}
}
// Add CSS for twinkling animation
const style = document.createElement('style');
style.textContent = `
@keyframes twinkle {
0%, 100% {
opacity: 0.2;
transform: scale(1);
}
50% {
opacity: 1;
transform: scale(1.2);
}
}
.layout::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 200px;
background: linear-gradient(to bottom, rgba(10, 14, 41, 0.8), transparent);
z-index: 1;
}
.layout::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 200px;
background: linear-gradient(to top, rgba(10, 14, 41, 0.8), transparent);
z-index: 1;
}
.layout > * {
position: relative;
z-index: 2;
}
`;
document.head.appendChild(style);
// Create and add stars
createStars();
layout.appendChild(starsContainer);
// Add some shooting stars occasionally
function createShootingStar() {
const shootingStar = document.createElement('div');
shootingStar.style.position = 'absolute';
shootingStar.style.backgroundColor = '#ffffff';
shootingStar.style.height = '2px';
shootingStar.style.width = '0px';
shootingStar.style.boxShadow = '0 0 10px 2px rgba(255, 255, 255, 0.8)';
shootingStar.style.borderRadius = '50%';
const startX = Math.random() * 100;
const startY = Math.random() * 30;
const angle = Math.random() * 30 + 15;
shootingStar.style.left = `${startX}%`;
shootingStar.style.top = `${startY}%`;
shootingStar.style.transform = `rotate(${angle}deg)`;
starsContainer.appendChild(shootingStar);
// Animate shooting star
shootingStar.animate([
{
width: '0px',
opacity: 0
},
{
width: '100px',
opacity: 1
},
{
width: '0px',
opacity: 0
}
], {
duration: 2000,
easing: 'ease-out'
}).onfinish = () => {
starsContainer.removeChild(shootingStar);
};
}
// Create shooting stars at random intervals
setInterval(() => {
if (Math.random() > 0.7) {
createShootingStar();
}
}, 3000);
// Add some content styling for better visibility
const contentElements = layout.querySelectorAll('h1, h2, h3, h4, h5, h6, p, div, span');
contentElements.forEach(el => {
el.style.textShadow = '0 0 10px rgba(255, 255, 255, 0.3)';
});
console.log('Night theme with twinkling stars applied to layout container!');
})();