Update templates/search.html
Browse files- templates/search.html +49 -8
templates/search.html
CHANGED
|
@@ -123,16 +123,46 @@
|
|
| 123 |
align-items: center;
|
| 124 |
z-index: 1000;
|
| 125 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 126 |
.search-bar-container {
|
| 127 |
position: absolute;
|
| 128 |
-
left:
|
| 129 |
top: 50%;
|
| 130 |
transform: translateY(-50%);
|
| 131 |
display: flex;
|
| 132 |
align-items: center;
|
| 133 |
width: 300px;
|
| 134 |
-
max-width: 90
|
| 135 |
-
position: relative;
|
| 136 |
}
|
| 137 |
.search-bar-container input {
|
| 138 |
width: 100%;
|
|
@@ -237,12 +267,18 @@
|
|
| 237 |
height: 60px;
|
| 238 |
padding: 10px;
|
| 239 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 240 |
.search-bar-container {
|
| 241 |
-
width: 80
|
| 242 |
-
max-width: 100
|
| 243 |
-
left:
|
| 244 |
-
top: 50%;
|
| 245 |
-
transform: translateY(-50%);
|
| 246 |
}
|
| 247 |
.search-bar-container input {
|
| 248 |
padding: 6px 35px 6px 35px;
|
|
@@ -302,6 +338,11 @@
|
|
| 302 |
</head>
|
| 303 |
<body>
|
| 304 |
<div class="fixed-top-bar">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 305 |
<div class="avatar-dropdown-container">
|
| 306 |
<div class="avatar-icon">
|
| 307 |
<span>{{ first_letter }}</span>
|
|
|
|
| 123 |
align-items: center;
|
| 124 |
z-index: 1000;
|
| 125 |
}
|
| 126 |
+
.back-arrow-container {
|
| 127 |
+
position: absolute;
|
| 128 |
+
left: 10px;
|
| 129 |
+
top: 50%;
|
| 130 |
+
transform: translateY(-50%);
|
| 131 |
+
display: flex;
|
| 132 |
+
align-items: center;
|
| 133 |
+
justify-content: center;
|
| 134 |
+
}
|
| 135 |
+
.back-arrow {
|
| 136 |
+
width: 36px;
|
| 137 |
+
height: 36px;
|
| 138 |
+
border-radius: 50%;
|
| 139 |
+
background: linear-gradient(45deg, #FFA07A, #FFB347);
|
| 140 |
+
display: flex;
|
| 141 |
+
align-items: center;
|
| 142 |
+
justify-content: center;
|
| 143 |
+
color: white;
|
| 144 |
+
font-size: 20px;
|
| 145 |
+
cursor: pointer;
|
| 146 |
+
transition: transform 0.2s ease, background-color 0.2s ease;
|
| 147 |
+
text-decoration: none;
|
| 148 |
+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
| 149 |
+
}
|
| 150 |
+
.back-arrow:hover {
|
| 151 |
+
background: linear-gradient(45deg, #FF8C61, #FF9E2C);
|
| 152 |
+
transform: scale(1.1);
|
| 153 |
+
}
|
| 154 |
+
.back-arrow:active {
|
| 155 |
+
transform: scale(0.95);
|
| 156 |
+
}
|
| 157 |
.search-bar-container {
|
| 158 |
position: absolute;
|
| 159 |
+
left: 60px;
|
| 160 |
top: 50%;
|
| 161 |
transform: translateY(-50%);
|
| 162 |
display: flex;
|
| 163 |
align-items: center;
|
| 164 |
width: 300px;
|
| 165 |
+
max-width: calc(90% - 60px);
|
|
|
|
| 166 |
}
|
| 167 |
.search-bar-container input {
|
| 168 |
width: 100%;
|
|
|
|
| 267 |
height: 60px;
|
| 268 |
padding: 10px;
|
| 269 |
}
|
| 270 |
+
.back-arrow-container {
|
| 271 |
+
left: 8px;
|
| 272 |
+
}
|
| 273 |
+
.back-arrow {
|
| 274 |
+
width: 32px;
|
| 275 |
+
height: 32px;
|
| 276 |
+
font-size: 18px;
|
| 277 |
+
}
|
| 278 |
.search-bar-container {
|
| 279 |
+
width: calc(80% - 50px);
|
| 280 |
+
max-width: calc(100% - 50px);
|
| 281 |
+
left: 50px;
|
|
|
|
|
|
|
| 282 |
}
|
| 283 |
.search-bar-container input {
|
| 284 |
padding: 6px 35px 6px 35px;
|
|
|
|
| 338 |
</head>
|
| 339 |
<body>
|
| 340 |
<div class="fixed-top-bar">
|
| 341 |
+
<div class="back-arrow-container">
|
| 342 |
+
<a href="{{ url_for('menu') }}" class="back-arrow" aria-label="Back to Menu">
|
| 343 |
+
<i class="bi bi-arrow-left"></i>
|
| 344 |
+
</a>
|
| 345 |
+
</div>
|
| 346 |
<div class="avatar-dropdown-container">
|
| 347 |
<div class="avatar-icon">
|
| 348 |
<span>{{ first_letter }}</span>
|