Spaces:
Running
on
T4
Running
on
T4
app look
Browse files
app.py
CHANGED
@@ -55,12 +55,41 @@ st.markdown("""
|
|
55 |
justify-content: space-between;
|
56 |
align-items: center;
|
57 |
border: 1px solid #333333;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
58 |
}
|
59 |
|
60 |
.demo-text {
|
61 |
-
font-size:
|
62 |
color: #c5c3c0;
|
63 |
font-family: 'Amazon Ember Cd RC 250', sans-serif;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
64 |
}
|
65 |
|
66 |
.demo-button {
|
@@ -71,12 +100,6 @@ st.markdown("""
|
|
71 |
border-radius: 6px;
|
72 |
font-size: 16px;
|
73 |
}
|
74 |
-
|
75 |
-
a .demo-card:hover {
|
76 |
-
background-color: #e46e08 !important;
|
77 |
-
color: black !important;
|
78 |
-
transition: 0.3s;
|
79 |
-
}
|
80 |
</style>
|
81 |
""", unsafe_allow_html=True)
|
82 |
|
@@ -98,7 +121,10 @@ def demo_link_block(icon, title, target_page):
|
|
98 |
st.markdown(f"""
|
99 |
<a href="/{target_page}" target="_self" style="text-decoration: none;">
|
100 |
<div class="demo-card">
|
101 |
-
<div class="demo-text">
|
|
|
|
|
|
|
102 |
</div>
|
103 |
</a>
|
104 |
""", unsafe_allow_html=True)
|
|
|
55 |
justify-content: space-between;
|
56 |
align-items: center;
|
57 |
border: 1px solid #333333;
|
58 |
+
transition: background-color 0.3s ease;
|
59 |
+
position: relative;
|
60 |
+
cursor: pointer;
|
61 |
+
}
|
62 |
+
|
63 |
+
.demo-card:hover {
|
64 |
+
background-color: #e46e08 !important;
|
65 |
+
color: #000 !important;
|
66 |
}
|
67 |
|
68 |
.demo-text {
|
69 |
+
font-size: 28px;
|
70 |
color: #c5c3c0;
|
71 |
font-family: 'Amazon Ember Cd RC 250', sans-serif;
|
72 |
+
display: flex;
|
73 |
+
align-items: center;
|
74 |
+
gap: 10px;
|
75 |
+
}
|
76 |
+
|
77 |
+
.demo-arrow {
|
78 |
+
font-size: 26px;
|
79 |
+
font-weight: bold;
|
80 |
+
color: #fff;
|
81 |
+
opacity: 0;
|
82 |
+
transform: scale(1);
|
83 |
+
transition: all 0.3s ease-in-out;
|
84 |
+
}
|
85 |
+
|
86 |
+
.demo-card:hover .demo-arrow {
|
87 |
+
opacity: 1;
|
88 |
+
color: #000;
|
89 |
+
}
|
90 |
+
|
91 |
+
.demo-card:active .demo-arrow {
|
92 |
+
transform: scale(1.3) rotate(45deg);
|
93 |
}
|
94 |
|
95 |
.demo-button {
|
|
|
100 |
border-radius: 6px;
|
101 |
font-size: 16px;
|
102 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
103 |
</style>
|
104 |
""", unsafe_allow_html=True)
|
105 |
|
|
|
121 |
st.markdown(f"""
|
122 |
<a href="/{target_page}" target="_self" style="text-decoration: none;">
|
123 |
<div class="demo-card">
|
124 |
+
<div class="demo-text">
|
125 |
+
<span>{icon} {title}</span>
|
126 |
+
<span class="demo-arrow">→</span>
|
127 |
+
</div>
|
128 |
</div>
|
129 |
</a>
|
130 |
""", unsafe_allow_html=True)
|