<html><head><base href="/" />
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Buildify - System Maintenance</title>
<style>
    @font-face {
        font-family: 'Inconsolata';
        src: url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;700&display=swap');
    }

    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: 'Inconsolata', monospace;
    }

    body {
        background: #0a0a0a;
        color: #ffffff;
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow-x: hidden;
        overflow-y: auto;
        padding: 4rem 0;
        position: relative;
    }

    body::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(45deg, #0a0a0a, #1a1a2e, #0a0a0a);
        background-size: 400% 400%;
        z-index: -1;
        animation: gradientBG 15s ease infinite;
    }

    @keyframes gradientBG {
        0% {
            background-position: 0% 50%;
        }
        50% {
            background-position: 100% 50%;
        }
        100% {
            background-position: 0% 50%;
        }
    }

    .star {
        position: fixed;
        pointer-events: none;
        animation: fall 2s linear forwards; /* Changed from 1s to 2s for slower fall */
    }

    @keyframes fall {
        0% {
            transform: translateY(0) rotate(0deg) scale(1);
        }
        100% {
            transform: translateY(100vh) rotate(360deg) scale(0.2);
            opacity: 0;
        }
    }

    .container {
        text-align: center;
        padding: 2rem;
        position: relative;
        z-index: 1;
        max-width: 800px;
        margin: 0 auto;
    }

    .logo {
        margin-bottom: 2rem;
        transform: scale(1.2);
    }

    h1 {
        font-size: 3rem;
        margin-bottom: 1.5rem;
        background: linear-gradient(45deg, #8b5cf6, #9333ea);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        text-shadow: 0 0 30px rgba(139, 92, 246, 0.3);
    }

    p {
        font-size: 1.2rem;
        color: #9ca3af;
        max-width: 600px;
        margin: 0 auto 2rem;
        line-height: 1.8;
    }

    .status {
        background: rgba(139, 92, 246, 0.15);
        border: 1px solid rgba(139, 92, 246, 0.3);
        padding: 1.2rem 2.5rem;
        border-radius: 16px;
        display: inline-flex;
        align-items: center;
        gap: 1rem;
        margin-bottom: 2.5rem;
        box-shadow: 0 0 20px rgba(139, 92, 246, 0.1);
    }

    .pulse {
        width: 14px;
        height: 14px;
        background: #8b5cf6;
        border-radius: 50%;
        animation: pulse 2s infinite;
    }

    .gears {
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        opacity: 0.1;
        z-index: 0;
    }

    .thank-you-note {
        background: rgba(139, 92, 246, 0.08);
        border: 1px solid rgba(139, 92, 246, 0.2);
        padding: 2.5rem;
        border-radius: 16px;
        margin-top: 3rem;
        text-align: left;
        box-shadow: 0 0 30px rgba(139, 92, 246, 0.05);
        backdrop-filter: blur(10px);
    }

    .signature {
        margin-top: 1.5rem;
        color: #8b5cf6;
        font-style: italic;
        border-top: 1px solid rgba(139, 92, 246, 0.2);
        padding-top: 1.5rem;
    }

    @keyframes pulse {
        0% {
            transform: scale(0.95);
            box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.7);
        }
        70% {
            transform: scale(1);
            box-shadow: 0 0 0 10px rgba(139, 92, 246, 0);
        }
        100% {
            transform: scale(0.95);
            box-shadow: 0 0 0 0 rgba(139, 92, 246, 0);
        }
    }

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

    @keyframes float {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-20px); }
    }

    .gear {
        animation: spin 10s linear infinite;
        transform-origin: center;
        fill: #8b5cf6;
    }

    .gear-reverse {
        animation: spin 10s linear infinite reverse;
    }

    .floating-element {
        animation: float 6s ease-in-out infinite;
    }

    .eta {
        font-size: 1rem;
        color: #6b7280;
        margin-top: 2.5rem;
        background: rgba(139, 92, 246, 0.05);
        padding: 1rem 2rem;
        border-radius: 12px;
        display: inline-block;
    }

    #countdown {
        font-weight: bold;
        color: #8b5cf6;
    }
</style>
</head>
<body>
    <svg class="gears" viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg">
        <path class="gear" d="M200,400 l50,-20 20,-50 20,50 50,20 -50,20 -20,50 -20,-50 z" />
        <path class="gear gear-reverse" d="M600,600 l70,-30 30,-70 30,70 70,30 -70,30 -30,70 -30,-70 z" />
        <path class="gear" d="M800,200 l40,-15 15,-40 15,40 40,15 -40,15 -15,40 -15,-40 z" />
        <path class="gear gear-reverse" d="M300,700 l60,-25 25,-60 25,60 60,25 -60,25 -25,60 -25,-60 z" />
        <path class="gear floating-element" d="M500,300 l45,-18 18,-45 18,45 45,18 -45,18 -18,45 -18,-45 z" />
        <circle class="floating-element" cx="150" cy="150" r="20" fill="#8b5cf6" opacity="0.5" />
        <circle class="floating-element" cx="850" cy="850" r="15" fill="#9333ea" opacity="0.5" />
    </svg>

    <div class="container">
        <div class="logo">
            <svg width="180" height="50" viewBox="0 0 180 50">
                <text x="10" y="35" fill="#8b5cf6" font-size="35" font-weight="bold">Buildify</text>
            </svg>
        </div>
        
        <h1>System Maintenance</h1>
        
        <div class="status">
            <div class="pulse"></div>
            <span>Maintenance in Progress</span>
        </div>

        <p>We're currently performing scheduled maintenance to improve your Buildify experience. Our team is working hard to bring you new features and improvements.</p>
        
        <p>We'll be back online shortly. Thank you for your patience!</p>

        <div class="eta">
            Estimated time remaining: <span id="countdown">25:00</span> minutes
        </div>

        <div class="thank-you-note">
            <p>Dear Buildify Community,</p>
            <p>We wanted to take a moment to express our sincere gratitude for your continued support and patience during this maintenance period. We're working on implementing some exciting new features that will make your experience even better.</p>
            <p>Your trust in our platform means the world to us, and we're committed to delivering the best possible service.</p>
            <div class="signature">
                - AltzTechz, Rockz, and Jenson Ayres<br>
                The Buildify Team
            </div>
        </div>
    </div>

    <script>
        let lastStarTime = 0;
        const minStarInterval = 200; // Minimum time between stars in milliseconds

        document.addEventListener('mousemove', function(e) {
            const currentTime = Date.now();
            
            // Only create a star if enough time has passed since the last one
            if (currentTime - lastStarTime >= minStarInterval) {
                const star = document.createElement('div');
                star.className = 'star';
                
                // Random size between 10 and 30
                const size = Math.random() * 20 + 10;
                
                star.innerHTML = `
                    <svg width="${size}" height="${size}" viewBox="0 0 20 20">
                        <path d="M10 1 L12 7 L18 7 L13 11 L15 17 L10 13 L5 17 L7 11 L2 7 L8 7 Z" 
                              fill="#8b5cf6" 
                              opacity="${Math.random() * 0.5 + 0.3}"/>
                    </svg>
                `;
                star.style.left = e.clientX + 'px';
                star.style.top = e.clientY + 'px';
                document.body.appendChild(star);
                
                // Update last star time
                lastStarTime = currentTime;
                
                // Remove star after animation completes
                setTimeout(() => {
                    star.remove();
                }, 2000); // Changed from 1000 to 2000 to match the new animation duration
            }
        });
    </script>
</body>
</html>