app.py

import gradio as gr

# Read the HTML file
with open("index.html", "r", encoding="utf-8") as f:
    html_content = f.read()

# Create Gradio interface with custom HTML
with gr.Blocks(
    theme=gr.themes.Base(
        primary_hue="red",
        secondary_hue="blue",
    ).set(
        body_background_fill="linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%)",
        body_background_fill_dark="linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%)",
    ),
    css="""
    body {
        background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%) !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .gradio-container {
        background: transparent !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    #html-component {
        height: auto !important;
        min-height: 100vh !important;
        width: 100% !important;
    }
    .contain {
        background: transparent !important;
    }
    .app {
        background: transparent !important;
    }
    main {
        background: transparent !important;
    }
    /* Hide Gradio footer */
    footer {
        display: none !important;
    }
    .footer {
        display: none !important;
    }
    .gradio-container footer {
        display: none !important;
    }
""") as demo:
    gr.HTML(html_content, elem_id="html-component")

if __name__ == "__main__":
    demo.launch()