import gradio as gr

# Simple CSS for styling
css = """
.main-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 40px 20px;
    text-align: center;
}
.redirect-box {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 20px;
    padding: 60px 40px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    margin: 20px auto;
}
.redirect-box h1 {
    color: white;
    font-size: 2.5em;
    margin-bottom: 20px;
}
.redirect-box p {
    color: white;
    font-size: 1.3em;
    margin-bottom: 30px;
    opacity: 0.95;
}
.redirect-link {
    display: inline-block;
    background: white;
    color: #667eea;
    padding: 15px 40px;
    border-radius: 30px;
    text-decoration: none;
    font-size: 1.2em;
    font-weight: bold;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.redirect-link:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}
"""

# Create Gradio app
with gr.Blocks(css=css, title="Redirect to FLUX VIDEO") as demo:
    gr.HTML("""
    <div class="main-container">
        <div class="redirect-box">
            <h1>🎨 Welcome to FLUX VIDEO Generation</h1>
            <p>Please visit our latest version for the best experience</p>
            <a href="https://huggingface.co/spaces/ginigen/Flux-VIDEO" 
               target="_blank" 
               class="redirect-link">
                Go to FLUX VIDEO →
            </a>
        </div>
    </div>
    """)

# Launch the app
demo.launch()