Update app.py
Browse files
app.py
CHANGED
@@ -219,6 +219,40 @@ css_and_html = """
|
|
219 |
.gr-form {
|
220 |
background-color: transparent !important;
|
221 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
222 |
</style>
|
223 |
|
224 |
<div id="app-header">
|
@@ -229,19 +263,19 @@ css_and_html = """
|
|
229 |
<p>Unleash your imagination with AI-powered generative art</p>
|
230 |
<div class="concept-container">
|
231 |
<div class="concept">
|
232 |
-
<
|
233 |
<div class="concept-description">Illustration Style</div>
|
234 |
</div>
|
235 |
<div class="concept">
|
236 |
-
<
|
237 |
<div class="concept-description">Line Art</div>
|
238 |
</div>
|
239 |
<div class="concept">
|
240 |
-
<
|
241 |
<div class="concept-description">Midjourney Style</div>
|
242 |
</div>
|
243 |
<div class="concept">
|
244 |
-
<
|
245 |
<div class="concept-description">Hanfu Anime</div>
|
246 |
</div>
|
247 |
</div>
|
|
|
219 |
.gr-form {
|
220 |
background-color: transparent !important;
|
221 |
}
|
222 |
+
.concept {
|
223 |
+
position: relative;
|
224 |
+
transition: transform 0.3s, box-shadow 0.3s;
|
225 |
+
border-radius: 15px;
|
226 |
+
overflow: hidden;
|
227 |
+
background: rgba(255, 255, 255, 0.1);
|
228 |
+
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
|
229 |
+
width: 150px;
|
230 |
+
height: 150px;
|
231 |
+
display: flex;
|
232 |
+
flex-direction: column;
|
233 |
+
justify-content: center;
|
234 |
+
align-items: center;
|
235 |
+
}
|
236 |
+
.concept:hover {
|
237 |
+
transform: translateY(-10px) rotate(3deg);
|
238 |
+
box-shadow: 0 15px 30px rgba(0,0,0,0.4);
|
239 |
+
}
|
240 |
+
.concept-emoji {
|
241 |
+
font-size: 60px;
|
242 |
+
margin-bottom: 10px;
|
243 |
+
}
|
244 |
+
.concept-description {
|
245 |
+
background-color: rgba(110, 72, 170, 0.8);
|
246 |
+
color: white;
|
247 |
+
padding: 10px;
|
248 |
+
font-size: 0.9em;
|
249 |
+
text-align: center;
|
250 |
+
width: 100%;
|
251 |
+
position: absolute;
|
252 |
+
bottom: 0;
|
253 |
+
}
|
254 |
+
|
255 |
+
|
256 |
</style>
|
257 |
|
258 |
<div id="app-header">
|
|
|
263 |
<p>Unleash your imagination with AI-powered generative art</p>
|
264 |
<div class="concept-container">
|
265 |
<div class="concept">
|
266 |
+
<div class="concept-emoji">🎨</div>
|
267 |
<div class="concept-description">Illustration Style</div>
|
268 |
</div>
|
269 |
<div class="concept">
|
270 |
+
<div class="concept-emoji">✏️</div>
|
271 |
<div class="concept-description">Line Art</div>
|
272 |
</div>
|
273 |
<div class="concept">
|
274 |
+
<div class="concept-emoji">🌌</div>
|
275 |
<div class="concept-description">Midjourney Style</div>
|
276 |
</div>
|
277 |
<div class="concept">
|
278 |
+
<div class="concept-emoji">👘</div>
|
279 |
<div class="concept-description">Hanfu Anime</div>
|
280 |
</div>
|
281 |
</div>
|