A!leys Galerie

using UnityEngine;
using UnityEngine.UI;
using System.Collections;

[RequireComponent(typeof(RectTransform))]
[ExecuteInEditMode]
public class GlassmorphicMenu : MonoBehaviour
{
    [Header("Glassmorphism Settings")]
    [SerializeField] private Color glassColor = new Color(0.2f, 0.2f, 0.2f, 0.2f);
    [SerializeField] private float blurAmount = 1.0f;
    [SerializeField] private float borderThickness = 0.02f;
    [SerializeField] private Color borderColor = new Color(0.8f, 0.8f, 0.8f, 1.0f);

    [Header("Menu Items")]
    [SerializeField] private GameObject[] menuItems;
    [SerializeField] private float itemSpacing = 20f;
    [SerializeField] private AnimationCurve itemAnimationCurve;

    [Header("Animations")]
    [SerializeField] private float fadeDuration = 0.3f;
    [SerializeField] private float blurFadeDuration = 0.5f;
    [SerializeField] private bool animateOnStart = true;

    private Material glassMaterial;
    private Image backgroundImage;
    private Canvas canvas;
    private bool isInitialized = false;

    private void Initialize()
    {
        if (isInitialized) return;

        glassMaterial = new Material(Shader.Find("UI/Glassmorphism"));
        if (glassMaterial == null)
        {
            Debug.LogError("Glassmorphism shader not found. Please import it from the Assets/Shaders folder.");
            return;
        }

        glassMaterial.SetColor("_GlassColor", glassColor);
        glassMaterial.SetFloat("_BlurAmount", blurAmount);
        glassMaterial.SetFloat("_BorderThickness", borderThickness);
        glassMaterial.SetColor("_BorderColor", borderColor);

        backgroundImage = GetComponent<Image>();
        if (backgroundImage == null)
        {
            backgroundImage = gameObject.AddComponent<Image>();
        }
        backgroundImage.material = glassMaterial;

        canvas = GetComponent<Canvas>();
        if (canvas == null) canvas = gameObject.AddComponent<Canvas>();

        isInitialized = true;
    }

    private void Start()
    {
        Initialize();
        if (animateOnStart) StartCoroutine(AnimateMenuEntrance());
    }

    private void OnEnable()
    {
        if (isInitialized) StartCoroutine(AnimateMenuEntrance());
    }

    private void OnDisable()
    {
        StartCoroutine(AnimateMenuExit());
    }

    private IEnumerator AnimateMenuEntrance()
    {
        // Fade in background
        backgroundImage.color = Color.clear;
        yield return AnimateColor(backgroundImage, glassColor.a, fadeDuration, () =>
        {
            glassMaterial.SetFloat("_BorderThickness", borderThickness);
        });

        // Animate items
        for (int i = 0; i < menuItems.Length; i++)
        {
            RectTransform itemRT = menuItems[i].GetComponent<RectTransform>();
            if (itemRT == null) continue;

            float delay = i * 0.1f;
            yield return new WaitForSeconds(delay);

            Vector3 initialScale = itemRT.localScale;
            itemRT.localScale = Vector3.zero;
            itemRT.anchoredPosition = new Vector2(0, itemSpacing * i);

            yield return StartCoroutine(AnimateScaleAndPosition(itemRT, initialScale, itemAnimationCurve, 0.5f));
        }
    }

    private IEnumerator AnimateMenuExit()
    {
        // Animate items out
        for (int i = menuItems.Length - 1; i >= 0; i--)
        {
            RectTransform itemRT = menuItems[i].GetComponent<RectTransform>();
            if (itemRT == null) continue;

            yield return StartCoroutine(AnimateScaleAndPosition(itemRT, Vector3.zero, itemAnimationCurve.Evaluate(1f), 0.3f));
        }

        // Fade out background
        yield return AnimateColor(backgroundImage, 0f, fadeDuration);
        yield return AnimateBlur(blurAmount, 0f, blurFadeDuration);
    }

    private IEnumerator AnimateColor(Image target, float targetAlpha, float duration, System.Action onComplete = null)
    {
        Color startColor = target.color;
        float elapsed = 0f;

        while (elapsed < duration)
        {
            elapsed += Time.deltaTime;
            float t = Mathf.Clamp01(elapsed / duration);
            target.color = Color.Lerp(startColor, new Color(startColor.r, startColor.g, startColor.b, targetAlpha), t);
            yield return null;
        }

        target.color = new Color(startColor.r, startColor.g, startColor.b, targetAlpha);
        if (onComplete != null) onComplete();
    }

    private IEnumerator AnimateScaleAndPosition(RectTransform target, Vector3 targetScale, AnimationCurve curve, float duration)
    {
        Vector3 startScale = target.localScale;
        Vector2 startPosition = target.anchoredPosition;
        float elapsed = 0f;

        while (elapsed < duration)
        {
            elapsed += Time.deltaTime;
            float t = Mathf.Clamp01(elapsed / duration);
            target.localScale = Vector3.Lerp(startScale, targetScale, curve.Evaluate(t));
            target.anchoredPosition = Vector2.Lerp(startPosition, target.anchoredPosition, curve.Evaluate(t));
            yield return null;
        }

        target.localScale = targetScale;
        target.anchoredPosition = target.anchoredPosition;
    }

    private IEnumerator AnimateBlur(float startBlur, float endBlur, float duration)
    {
        float elapsed = 0f;
        float startValue = glassMaterial.GetFloat("_BlurAmount");

        while (elapsed < duration)
        {
            elapsed += Time.deltaTime;
            float t = Mathf.Clamp01(elapsed / duration);
            glassMaterial.SetFloat("_BlurAmount", Mathf.Lerp(startValue, endBlur, t));
            yield return null;
        }

        glassMaterial.SetFloat("_BlurAmount", endBlur);
    }

    // Public methods for external control
    public void CloseMenu()
    {
        OnDisable();
    }

    public void OpenMenu()
    {
        OnEnable();
    }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>404 - Page Not Found</title>
    <style>
        :root {
            --glass-bg: rgba(10, 10, 20, 0.7);
            --glass-border: rgba(255, 255, 255, 0.2);
            --neon-color: #ff00aa;
            --background: linear-gradient(135deg, #0a0a1a, #1a1a3a);
        }

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

        body {
            font-family: 'Arial', sans-serif;
            background: var(--background);
            color: white;
            height: 100vh;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .container {
            width: 90%;
            max-width: 800px;
            height: 90vh;
            background: var(--glass-bg);
            border-radius: 20px;
            border: 1px solid var(--glass-border);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 40px;
            position: relative;
            overflow: hidden;
        }

        .title {
            font-size: 3rem;
            margin-bottom: 20px;
            color: var(--neon-color);
            text-shadow: 0 0 10px var(--neon-color);
            animation: neonPulse 2s infinite alternate;
        }

        .subtitle {
            font-size: 1.2rem;
            color: #aaa;
            margin-bottom: 40px;
            text-align: center;
        }

        .animation-container {
            position: relative;
            width: 100%;
            height: 300px;
        }

        .point {
            position: absolute;
            width: 10px;
            height: 10px;
            background: var(--neon-color);
            border-radius: 50%;
            box-shadow: 0 0 15px var(--neon-color);
            animation: float 6s infinite ease-in-out;
        }

        .easter-egg {
            position: absolute;
            width: 30px;
            height: 30px;
            background: #00ff00;
            border-radius: 50%;
            opacity: 0;
            animation: easterEgg 0.5s infinite;
        }

        .message {
            position: absolute;
            font-size: 1.5rem;
            color: white;
            opacity: 0;
            animation: fadeIn 1s 0.5s forwards;
        }

        @keyframes neonPulse {
            0% { text-shadow: 0 0 10px var(--neon-color); }
            100% { text-shadow: 0 0 20px var(--neon-color); }
        }

        @keyframes float {
            0%, 100% { transform: translateY(0) rotate(0deg); }
            50% { transform: translateY(-30px) rotate(180deg); }
        }

        @keyframes easterEgg {
            0%, 100% { opacity: 0; }
            50% { opacity: 1; }
        }

        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1 class="title">404</h1>
        <p class="subtitle">Page Not Found - Don't Panic</p>

        <div class="animation-container" id="animationContainer">
            <!-- Points will be generated by JavaScript -->
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const container = document.getElementById('animationContainer');
            const pointsCount = 20;
            const easterEgg = document.createElement('div');
            easterEgg.className = 'easter-egg';
            container.appendChild(easterEgg);

            // Generate animated points
            for (let i = 0; i < pointsCount; i++) {
                const point = document.createElement('div');
                point.className = 'point';

                const x = Math.random() * 100;
                const y = Math.random() * 100;
                const size = 5 + Math.random() * 5;
                const delay = Math.random() * 2;
                const rotation = Math.random() * 360;

                point.style.left = `${x}%`;
                point.style.top = `${y}%`;
                point.style.width = `${size}px`;
                point.style.height = `${size}px`;
                point.style.animationDelay = `${delay}s`;
                point.style.transform = `rotate(${rotation}deg)`;

                container.appendChild(point);
            }

            // Easter egg trigger
            document.addEventListener('keydown', (e) => {
                if (e.key === 'Enter') {
                    easterEgg.style.opacity = '1';
                    const message = document.createElement('div');
                    message.className = 'message';
                    message.textContent = 'You found the Easter egg! 🎉';
                    message.style.top = '200px';
                    message.style.left = '50%';
                    message.style.transform = 'translateX(-50%)';
                    container.appendChild(message);
                }
            });

            // Random point color change
            setInterval(() => {
                const points = document.querySelectorAll('.point');
                const randomPoint = points[Math.floor(Math.random() * points.length)];
                const colors = ['#ff00aa', '#00ffaa', '#00aaff', '#aaff00', '#ff0000', '#00ffff'];
                randomPoint.style.background = colors[Math.floor(Math.random() * colors.length)];
            }, 3000);
        });
    </script>
</body>
</html>