app.py

import gradio as gr
import os

demo = gr.Blocks()

with demo:
    big_block = gr.HTML("""
    <style>
      #canvas {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        margin: 0;
        background-color: #fff;
      }
      #phone {
        width: 600px;
        height: 750px;
        #min-width: 500px;
        min-height: 600px;
        border: 4px solid #aaa;
        border-radius: 20px;
        overflow: hidden;
        position: relative;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7);
      }
      iframe {
        width: 100%;
        min-height: 600px;
        border: none;
        padding: 0;
        margin: 0;
      }
      @media (max-width: 600px) {
        #phone {
          width: 100%;
          height: 100%;
          border: none;
          box-shadow: none;
          padding: 0;
          margin: 0;
          }
          
        iframe {
          #padding: 2em;
          height: 100%
          min-height= 600px;
          width: 100%
        }
      }
    </style>
    </head>
    <div id?"canvas>    
        <div id="phone">
          <iframe src="https://www.chatbase.co/chatbot-iframe/hf5igEj7UvRUmaXxJXebZ"></iframe>
        </div>
    </div>
    """)

login_user = os.environ['user']
login_pw = os.environ['password']

if __name__ == "__main__":
   demo.launch(auth = (login_user, login_pw), auth_message= "Bitte Nutzernamen und Passwort eingeben")