Update app.py

app.py

@@ -34,7 +34,17 @@ models=[
 o = "V"
 
 t_out = ("""
-<style>
+
+    <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
+    <!--Stylesheets-->
+    <style media="screen">
+      *,
+*:before,
+*:after{
+    padding: 0;
+    margin: 0;
+    box-sizing: border-box;
+}
 #container{
     position: relative;
     width: 200px;
@@ -53,11 +63,75 @@ t_out = ("""
     height: 30px;
     background: red;
 }
-</style>
-<div id="container">
-    <div id="main_image"></div>
-    <div id="overlay_image"></div>
-</div>
+.popup{
+    background-color: #ffffff;
+    width: 420px;
+    padding: 30px 40px;
+    transform: translate(-50%,-50%);
+    left: 50%;
+    top: 50%;
+    border-radius: 8px;
+    font-family: "Poppins",sans-serif;
+    display: none; 
+    text-align: center;
+    position: fixed;
+    width: 200px;
+    height: 200px;
+    top: 0px;
+    left: 0px;
+    z-index:19999;
+}
+.popup button{
+    display: block;
+    margin:  0 0 20px auto;
+    background-color: transparent;
+    font-size: 30px;
+    color: #ffffff;
+    background: #03549a;
+    border-radius: 100%;
+    width: 40px;
+    height: 40px;
+    border: none;
+    outline: none;
+    cursor: pointer;
+}
+.popup h2{
+  margin-top: -20px;
+}
+.popup p{
+    font-size: 14px;
+    text-align: justify;
+    margin: 20px 0;
+    line-height: 25px;
+}
+
+    </style>
+    <div class="popup">
+        <button id="close">&times;</button>
+        <h2>Automatic Pop-Up</h2>
+        <p>
+            Time Out!
+        </p>
+        <a href="#">Let's Go</a>
+    </div>
+
+    <!--Script-->
+    <script type="text/javascript">
+window.addEventListener("load", function(){
+    setTimeout(
+        function open(event){
+            document.querySelector(".popup").style.display = "block";
+        },
+        2000 
+    )
+});
+
+
+document.querySelector("#close").addEventListener("click", function(){
+    document.querySelector(".popup").style.display = "none";
+});
+    </script>
+
 """)