/*
===============================================================================
 This JS file may be used to customize the YunoHost user portal *and* also
 will be loaded in all app pages if the app nginx's conf does include the
 appropriate snippet.
===============================================================================
*/

/*
 * Monkeypatch init_portal to inject the star animation background
 */
init_portal_original = init_portal;
init_portal = function()
{
    init_portal_original();
    
    // Slight delay to ensure the portal DOM is fully ready
    setTimeout(function() {
        var portalContainer = document.querySelector('.ynh-user-portal');
        if (!portalContainer) return;

        // Create a container strictly for the stars
        var starContainer = document.createElement('div');
        starContainer.id = 'star-container';
        portalContainer.appendChild(starContainer);

        // Generate 150 stars
        var numStars = 150;
        for (var i = 0; i < numStars; i++) {
            var star = document.createElement('div');
            star.className = 'star';
            
            // Randomize trajectory angle (0 to 360 degrees)
            var angle = Math.random() * 360;
            // Randomize speed (between 2s and 6s)
            var duration = 2 + Math.random() * 4;
            // Randomize start time so they don't all spawn at once (negative delay starts them mid-animation)
            var delay = Math.random() * -6;

            // Apply these as CSS variables to each individual star
            star.style.setProperty('--angle', angle + 'deg');
            star.style.setProperty('--duration', duration + 's');
            star.style.animationDelay = delay + 's';
            
            starContainer.appendChild(star);
        }
    }, 100);
}

/*
 * Monkey patching example to do custom stuff when loading inside an app
 */
init_portal_button_and_overlay_original = init_portal_button_and_overlay;
init_portal_button_and_overlay = function()
{
    init_portal_button_and_overlay_original();
    // Custom stuff to do when loading inside an app
}
/*
===============================================================================
 This file contain extra CSS rules to customize the YunoHost user portal and
 can be used to customize app tiles, buttons, etc...
===============================================================================
*/

/* Make page texts black */
.user-container h2,
.user-container small,
.user-container .user-mail,
.footer a,
#ynh-logout {
  color: black !important;
  text-shadow: 0px 0px 5px black !important;
}

/* --- BACKGROUND UPDATE --- */
.ynh-user-portal {
  background-color: #000000 !important; /* Solid black */
  background-image: none !important;    /* Remove background image */
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden; /* Prevents scrollbars when stars fly off-screen */
}

/* Ensure the login box and apps stay layered on top of the stars */
.user-container {
  position: relative;
  z-index: 10;
}

#ynh-logout:hover {
  background-color: rgba(220, 20, 60, 0.8) !important;
  color: white !important;
}

/* Apps colors */
.app-tile {
  background-color: rgba(255, 255, 255, 0.5) !important;
  color: black !important;
}
.app-tile:hover {
  background-color: rgba(220, 20, 60, 0.8) !important;
  color: white !important;
}

.app-tile:hover:after,
.app-tile:focus:after,
.app-tile:hover:before,
.app-tile:focus:before {
    background: rgba(220, 20, 60, 0.8) !important;
}

.form-text {background: rgba(121, 123, 131, 0.5);}

.btn, .classic-btn, .large-btn {
  background-color: rgba(255, 255, 255, 0.5) !important;
  color: black !important;
}
.classic-btn:hover, .large-btn:hover {
  background-color: rgba(220, 20, 60, 0.8) !important;
  color: white !important;
  text-decoration: none;
}
.validate-btn:hover {
  background-color: rgba(0, 129, 31, 0.5) !important;
  color: white !important;
}
.link-btn:hover {
  background-color: rgba(255, 239, 0, 0.5) !important;
}

.messages.info {
  background: rgba(220, 20, 60, 0.8) !important;
}
.messages.danger {
  background: rgba(255, 100, 100, 0.8) !important;
}

.control-label {
  background: rgba(0, 0, 0, 0.5);
}
.form-text::placeholder {
  color: #fff;
}

/* Use a custom logo image */
#ynh-logo {
  z-index: 10;
  background-image: url("./cloud.png");
}

/* ===============================================================================
 STAR ANIMATION STYLES 
===============================================================================
*/

#star-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: hidden;
  pointer-events: none; /* Let mouse clicks pass through the stars */
}

.star {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3px;
  height: 3px;
  background: #ffffff;
  border-radius: 50%;
  /* Uses the custom properties set by the JavaScript */
  animation: warpSpeed var(--duration) linear infinite;
}

/* The 3D outward flying effect */
@keyframes warpSpeed {
  0% {
    transform: translate(-50%, -50%) rotate(var(--angle)) translateY(0px) scale(0.1);
    opacity: 0;
  }
  15% {
    opacity: 1; /* Fade in */
  }
  100% {
    /* translateY(100vh) guarantees it flies far enough to leave any screen size */
    transform: translate(-50%, -50%) rotate(var(--angle)) translateY(100vh) scale(3.5);
    opacity: 0; /* Fade out at the edges */
  }
}