make this ui far more amazing , cooler and beautiful for an algorithm generation website...make it as cool and awesome and visually stunning as you can 
"
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Algorithm Wizard 2.0</title>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&family=Fira+Code&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/atom-one-dark.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
    <style>
        :root {
            --primary-color: #4a4cff;
            --secondary-color: #32e0c4;
            --text-color: #333;
            --background-color: #f0f4f8;
            --code-background: #282c34;
            --card-background: #ffffff;
        }

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

        body {
            font-family: 'Poppins', sans-serif;
            background-color: var(--background-color);
            color: var(--text-color);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }

        .container {
            width: 100%;
            max-width: 1200px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .header {
            text-align: center;
            margin-bottom: 40px;
        }

        h1 {
            font-size: 3.5rem;
            color: var(--primary-color);
            margin-bottom: 10px;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
        }

        .subtitle {
            font-size: 1.2rem;
            color: var(--text-color);
            opacity: 0.8;
        }

        .algo-card {
            background-color: var(--card-background);
            border-radius: 20px;
            padding: 40px;
            width: 100%;
            max-width: 800px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            margin-bottom: 40px;
        }

        form {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        label {
            font-weight: 600;
            margin-bottom: 15px;
            font-size: 1.2rem;
            color: var(--primary-color);
        }

        .input-group {
            position: relative;
            width: 100%;
            max-width: 500px;
        }

        input[type="text"] {
            width: 100%;
            padding: 15px 20px;
            border: 2px solid var(--primary-color);
            border-radius: 50px;
            font-size: 1rem;
            transition: all 0.3s ease;
            background-color: var(--background-color);
        }

        input[type="text"]:focus {
            outline: none;
            box-shadow: 0 0 0 3px rgba(74, 76, 255, 0.3);
        }

        .submit-btn {
            position: absolute;
            right: 5px;
            top: 50%;
            transform: translateY(-50%);
            background-color: var(--primary-color);
            color: white;
            border: none;
            border-radius: 50px;
            padding: 10px 20px;
            cursor: pointer;
            font-size: 1rem;
            font-weight: 600;
            transition: all 0.3s ease;
        }

        .submit-btn:hover {
            background-color: var(--secondary-color);
        }

        .loader {
            display: none;
            width: 40px;
            height: 40px;
            border: 4px solid var(--background-color);
            border-top: 4px solid var(--primary-color);
            border-radius: 50%;
            margin: 20px auto;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        #output {
            margin-top: 30px;
            padding: 30px;
            background-color: var(--code-background);
            border-radius: 15px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            font-family: 'Fira Code', monospace;
            font-size: 0.9rem;
            line-height: 1.6;
            max-height: 500px;
            overflow-y: auto;
            width: 100%;
            opacity: 0;
            transform: translateY(20px);
            transition: all 0.5s ease;
        }

        #output.visible {
            opacity: 1;
            transform: translateY(0);
        }

        #output pre {
            margin: 0;
            white-space: pre-wrap;
            word-wrap: break-word;
        }

        .explanation {
            background-color: var(--card-background);
            color: var(--text-color);
            padding: 20px;
            border-radius: 10px;
            margin-top: 20px;
            font-family: 'Poppins', sans-serif;
        }

        .explanation h3 {
            color: var(--primary-color);
            margin-bottom: 15px;
        }

        .explanation ol {
            padding-left: 20px;
        }

        .explanation li {
            margin-bottom: 10px;
        }

        .explanation strong {
            color: var(--secondary-color);
        }

        .example-usage {
            background-color: var(--background-color);
            padding: 15px;
            border-radius: 8px;
            margin-top: 15px;
        }

        .example-usage h4 {
            color: var(--primary-color);
            margin-bottom: 10px;
        }

        .example-output {
            background-color: var(--code-background);
            color: #fff;
            padding: 10px;
            border-radius: 5px;
            font-family: 'Fira Code', monospace;
            margin-top: 10px;
        }
        .features {
            display: flex;
            justify-content: space-around;
            width: 100%;
            margin-top: 40px;
        }

        .feature {
            text-align: center;
            padding: 20px;
            background-color: var(--card-background);
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
        }

        .feature:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
        }

        .feature-icon {
            font-size: 2rem;
            color: var(--primary-color);
            margin-bottom: 10px;
        }

        .feature-title {
            font-weight: 600;
            margin-bottom: 5px;
        }

        .feature-description {
            font-size: 0.9rem;
            color: var(--text-color);
            opacity: 0.8;
        }

        @media (max-width: 768px) {
            .container {
                padding: 20px;
            }

            h1 {
                font-size: 2.5rem;
            }

            .algo-card {
                padding: 30px;
            }

            .features {
                flex-direction: column;
                align-items: center;
            }

            .feature {
                width: 100%;
                max-width: 300px;
                margin-bottom: 20px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>Algorithm Wizard 2.0</h1>
            <p class="subtitle">Conjure powerful algorithms with a wave of your keyboard</p>
        </div>

        <div class="algo-card">
            <form id="algoForm">
                <label for="algorithm">What algorithm do you seek?</label>
                <div class="input-group">
                    <input type="text" id="algorithm" name="algorithm" placeholder="Enter algorithm name...">
                    <button type="submit" class="submit-btn">Conjure</button>
                </div>
            </form>
            <div class="loader" id="loader"></div>
            <div id="output"></div>
        </div>

        <div class="features">
            <div class="feature">
                <div class="feature-icon">🚀</div>
                <h3 class="feature-title">Lightning Fast</h3>
                <p class="feature-description">Generate algorithms in seconds</p>
            </div>
            <div class="feature">
                <div class="feature-icon">🧠</div>
                <h3 class="feature-title">AI-Powered</h3>
                <p class="feature-description">Cutting-edge AI for accurate results</p>
            </div>
            <div class="feature">
                <div class="feature-icon">🔧</div>
                <h3 class="feature-title">Customizable</h3>
                <p class="feature-description">Tailor algorithms to your needs</p>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            gsap.from('.header', { opacity: 0, y: -50, duration: 1, ease: 'power3.out' });
            gsap.from('.algo-card', { opacity: 0, y: 50, duration: 1, delay: 0.5, ease: 'power3.out' });
            gsap.from('.feature', { 
                opacity: 0, 
                y: 50, 
                duration: 1, 
                delay: 1, 
                ease: 'power3.out',
                stagger: 0.2
            });
        });

        document.getElementById('algoForm').addEventListener('submit', async function(event) {
            event.preventDefault();
            const algorithm = document.getElementById('algorithm').value;
            const loader = document.getElementById('loader');
            const output = document.getElementById('output');

            loader.style.display = 'block';
            output.style.display = 'none';
            output.classList.remove('visible');

            try {
                const response = await fetch('/algorithm_generation', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
                    body: `algorithm=${encodeURIComponent(algorithm)}`
                });
                const data = await response.json();

                if (data.error) {
                    output.innerHTML = `<pre><code class="language-plaintext">${data.error}</code></pre>`;
                } else {
                    // Split the response into code and explanation
                    const [code, ...explanationParts] = data.response.split('**Explanation:**');
                    const explanation = explanationParts.join('**Explanation:**').trim();

                    // Format the code
                    const formattedCode = `<pre><code class="language-python">${code.trim()}</code></pre>`;

                    // Format the explanation
                    const formattedExplanation = formatExplanation(explanation);

                    // Combine formatted code and explanation
                    output.innerHTML = formattedCode + formattedExplanation;
                }
                
                output.style.display = 'block';
                gsap.to(output, { opacity: 1, y: 0, duration: 0.5, ease: 'power3.out' });
                output.classList.add('visible');
                hljs.highlightAll();
            } catch (error) {
                console.error('Error fetching algorithm:', error);
                output.innerHTML = '<pre><code class="language-plaintext">Error conjuring algorithm. Please try again later.</code></pre>';
                output.style.display = 'block';
                gsap.to(output, { opacity: 1, y: 0, duration: 0.5, ease: 'power3.out' });
                output.classList.add('visible');
            } finally {
                loader.style.display = 'none';
            }
        });

        function formatExplanation(explanation) {
            // Convert numbered list to HTML ordered list
            explanation = explanation.replace(/(\d+\.)\s/g, '<li>');
            explanation = '<ol>' + explanation + '</ol>';

            // Convert **text** to <strong>text</strong>
            explanation = explanation.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>');

            // Format Example Usage and Output sections
            explanation = explanation.replace(
                /Example Usage:([\s\S]*?)Output:([\s\S]*?)$/,
                '<div class="example-usage"><h4>Example Usage:</h4>$1<h4>Output:</h4><div class="example-output">$2</div></div>'
            );

            return `<div class="explanation"><h3>Explanation:</h3>${explanation}</div>`;
        }
    </script>
</body>
</html>
"