import gradio as gr

def f(instruction):
    # f
    return instruction
css = """
footer {visibility: hidden !important;}
.blockk {
      display: flex;
      align-items: center;
      width: 98%;
      height: auto;
      background-color: #202020;
      color: #fff;
      border-radius: 25px;
      box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
      padding: 20px;
      margin: 20px auto;
      text-align: center;
      transition: 0.5s;
    }

    .blockk:hover {
      transform: scale(0.98);
    }

    .blockk h2 {
      flex-grow: 1;
      font-size: 17px;
      margin: 0px 0px 0px 20px;
      display: flex;
      font-weight: bold;
    }
    .button {
      display: inline-block;
      color: #FFF;
      font-size: 16px;
      padding: 10px 20px;
      border: 3px solid #fff;
      border-radius: 15px;
      text-decoration: none;
      transition: background-color 0.5s ease-in-out;
      font-weight: normal;
    }

    .button:hover {
      background-color: #fff;
      color: #000;
    }
"""
# Создаем интерфейс с помощью Gradio
with gr.Blocks(css=css, theme='YTheme/TehnoX', title="Мои презентации") as demo:
    with gr.Row():
        with gr.Column():
            gr.Markdown("""# **Мои презентации**""")
            with gr.Column():
                    gr.HTML("""<div class="blockk">
                    <h2>SmartLearn</h2>
    <a href="https://docs.google.com/presentation/d/1XcdxCAYjX5w7vSzwzREA0NodD1KQZByYQW-ynCD41PM/edit?usp=drivesdk" class="button">Перейти</a>
  </div>""")


        with gr.Column(visible=False):
            with gr.Column():
                instructions = gr.Textbox(label="empty", visible=False)
                submit_button = gr.Button("empty", variant='primary', visible=False)
            with gr.Column():
                output_markdown = gr.Markdown("""empty""", visible=False)

    submit_button.click(
        fn=f,
        inputs=[instructions],
        outputs=[output_markdown]
    ) 
demo.launch()