Hugging Face's logo

Spaces:
djrana
/
text-to-image
Running

App Files
xp3857 commited on
Commit
d0371fc
•
1 Parent(s): 7dd61d0

Update app.py

Browse files
Files changed (1) hide show
  1. app.py +86 -60
app.py CHANGED
@@ -35,77 +35,103 @@ o = "V"
35
 
36
  t_out = ("""
37
  <head>
38
- <style>
39
- /* Popup container */
40
- .popup {
41
- position: relative;
42
- display: inline-block;
43
- cursor: pointer;
 
 
 
 
 
 
 
 
 
44
  }
45
-
46
- /* The actual popup (appears on top) */
47
- .popup .popuptext {
48
- visibility: hidden;
49
- width: 160px;
50
- background-color: #555;
51
- color: #fff;
52
- text-align: center;
53
- border-radius: 6px;
54
- padding: 8px 0;
55
- position: absolute;
56
- z-index: 1;
57
- bottom: 125%;
58
- left: 50%;
59
- margin-left: -80px;
60
  }
61
-
62
- /* Popup arrow */
63
- .popup .popuptext::after {
64
- content: "";
65
- position: absolute;
66
- top: 100%;
67
- left: 50%;
68
- margin-left: -5px;
69
- border-width: 5px;
70
- border-style: solid;
71
- border-color: #555 transparent transparent transparent;
 
72
  }
73
-
74
- /* Toggle this class when clicking on the popup container (hide and show the popup) */
75
- .popup .show {
76
- visibility: visible;
77
- -webkit-animation: fadeIn 1s;
78
- animation: fadeIn 1s
 
 
 
 
 
 
 
79
  }
80
-
81
- /* Add animation (fade in the popup) */
82
- @-webkit-keyframes fadeIn {
83
- from {opacity: 0;}
84
- to {opacity: 1;}
85
  }
86
-
87
- @keyframes fadeIn {
88
- from {opacity: 0;}
89
- to {opacity:1 ;}
 
90
  }
91
-
92
- </style>
 
 
 
 
 
 
 
 
 
 
 
93
  </head>
94
  <body>
95
- <div class="popup" onclick="myFunction()">Click me!
96
- <span class="popuptext" id="myPopup">Popup text...</span>
97
- </div>
98
-
99
- // When the user clicks on <div>, open the popup
100
- function myFunction() {
101
- var popup = document.getElementById("myPopup");
102
- popup.classList.toggle("show");
103
- }
104
-
 
 
 
 
 
 
 
 
 
 
 
 
 
 
105
  </body>
106
 
107
 
108
-
109
  """)
110
 
111
 
 
35
 
36
  t_out = ("""
37
  <head>
38
+
39
+ <!--====== Design by foolishdeveloper.com =====-->
40
+
41
+
42
+ <title>Automatic Popup</title>
43
+ <!--Google Fonts-->
44
+ <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
45
+ <!--Stylesheets-->
46
+ <style media="screen">
47
+ *,
48
+ *:before,
49
+ *:after{
50
+ padding: 0;
51
+ margin: 0;
52
+ box-sizing: border-box;
53
  }
54
+ body{
55
+ background-color: #0855ae;
 
 
 
 
 
 
 
 
 
 
 
 
 
56
  }
57
+ .popup{
58
+ background-color: #ffffff;
59
+ width: 420px;
60
+ padding: 30px 40px;
61
+ position: absolute;
62
+ transform: translate(-50%,-50%);
63
+ left: 50%;
64
+ top: 50%;
65
+ border-radius: 8px;
66
+ font-family: "Poppins",sans-serif;
67
+ display: none;
68
+ text-align: center;
69
  }
70
+ .popup button{
71
+ display: block;
72
+ margin: 0 0 20px auto;
73
+ background-color: transparent;
74
+ font-size: 30px;
75
+ color: #ffffff;
76
+ background: #03549a;
77
+ border-radius: 100%;
78
+ width: 40px;
79
+ height: 40px;
80
+ border: none;
81
+ outline: none;
82
+ cursor: pointer;
83
  }
84
+ .popup h2{
85
+ margin-top: -20px;
 
 
 
86
  }
87
+ .popup p{
88
+ font-size: 14px;
89
+ text-align: justify;
90
+ margin: 20px 0;
91
+ line-height: 25px;
92
  }
93
+ a{
94
+ display: block;
95
+ width: 150px;
96
+ position: relative;
97
+ margin: 10px auto;
98
+ text-align: center;
99
+ background-color: #0f72e5;
100
+ border-radius: 20px;
101
+ color: #ffffff;
102
+ text-decoration: none;
103
+ padding: 8px 0;
104
+ }
105
+ </style>
106
  </head>
107
  <body>
108
+ <div class="popup">
109
+ <button id="close">&times;</button>
110
+ <h2>Automatic Pop-Up</h2>
111
+ <p>
112
+ Time Out!
113
+ </p>
114
+ <a href="#">Let's Go</a>
115
+ </div>
116
+ <!--Script-->
117
+ <script type="text/javascript">
118
+ window.addEventListener("load", function(){
119
+ setTimeout(
120
+ function open(event){
121
+ document.querySelector(".popup").style.display = "block";
122
+ },
123
+ 2000
124
+ )
125
+ });
126
+
127
+
128
+ document.querySelector("#close").addEventListener("click", function(){
129
+ document.querySelector(".popup").style.display = "none";
130
+ });
131
+ </script>
132
  </body>
133
 
134
 
 
135
  """)
136
 
137