source: frontend/css.css@ df7f390

Last change on this file since df7f390 was cd64b06, checked in by Kristijan <kristijanzafirovski26@…>, 5 days ago

Added info scraping for escape travel
  • Property mode set to 100644
File size: 6.6 KB
RevLine 
[c164f8f]1body {
2 font-family: Arial, sans-serif;
3 background-color: #f4f4f9;
4 color: #333;
5 margin: 0;
6 padding: 0;
7 display: flex;
8 height: 100vh;
9 overflow: hidden; /* Add this to prevent body overflow */
10}
11
12.top-right {
13 position: absolute;
14 top: 20px;
15 right: 20px;
16}
[cd64b06]17.infoDiv{
18 width:400px;
19}
[c164f8f]20.login-button {
21 background-color: #007bff;
22 color: white;
23 border: none;
24 padding: 10px 20px;
25 border-radius: 5px;
26 cursor: pointer;
27 transition: background-color 0.3s;
28}
29
30.login-button:hover {
31 background-color: #0056b3;
32}
33
34.sidebar {
35 width: 300px;
36 background-color: #ffffff;
37 padding: 20px;
38 box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
39 display: flex;
40 flex-direction: column;
41 align-items: center;
42 justify-content: space-evenly;
43 box-sizing: border-box;
44}
45
46.logo {
47 margin-bottom: 20px;
48}
49
50.logo img {
51 max-width: 100%;
52 height: auto;
53}
54
55.searchBar {
56 width: 100%;
57}
58
59.searchBar form {
60 display: flex;
61 flex-direction: column;
62}
63
64.searchBar label {
65 margin: 10px 0 5px;
66 font-weight: bold;
67}
68
69.searchBar input[type="text"],
70.searchBar input[type="date"],
71.searchBar input[type="number"] {
72 border: 1px solid #ccc;
73 border-radius: 5px;
74 padding: 10px;
75 font-size: 16px;
76 width: 100%;
77 margin-bottom: 20px;
78 box-sizing: border-box;
79}
80
81.searchBar input[type="submit"] {
82 background-color: #007bff;
83 color: #fff;
84 border: none;
85 border-radius: 5px;
86 padding: 10px;
87 font-size: 16px;
88 cursor: pointer;
89 transition: background-color 0.3s ease;
90}
91
92.searchBar input[type="submit"]:hover {
93 background-color: #0056b3;
94}
95
96.content {
97 flex: 1;
98 padding: 20px;
99 overflow-y: auto;
100 overflow-x: hidden; /* Add this to prevent horizontal overflow */
101 box-sizing: border-box;
102}
103
104#givenOptions {
105 width: 100%;
106 margin-top: 20px;
107 padding: 20px;
108 border-radius: 10px;
109 box-sizing: border-box;
110}
111
112.option {
113 display: flex;
114 justify-content: space-between;
115 align-items: center;
116 width: 100%;
117 border: 1px solid #ccc;
118 border-radius: 10px;
119 margin-bottom: 20px;
120 padding: 20px;
121 box-sizing: border-box;
122 box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
123 background-color: #f4f4f9;
124 overflow-x: auto; /* Add this to handle overflow within option */
125}
126.btnWrapper{
127 display: flex;
128 flex-direction: column;
129 justify-content: space-evenly;
130}
131
132.favBtn{
133 display: none;
134}
135.image {
136 width: 100%;
137 max-width: 300px;
138 height: auto;
139 border-radius: 10px;
140 margin-bottom: 15px;
141}
142
143.option-details {
144 display: flex;
145 flex-direction: column;
146 align-items: center;
147 width: calc(100% - 300px); /* Adjust width to fit within option */
148 box-sizing: border-box;
149}
150
151p, h1, h2 {
152 margin: 0;
153 padding: 5px 0;
154 text-align: center;
155}
156
157h1 {
158 font-size: 24px;
159 font-weight: bold;
160}
161
162h2 {
163 font-size: 20px;
164 color: #007bff;
165}
166
167.country {
168 font-size: 18px;
169 color: #555;
170}
171
172.price {
173 font-size: 22px;
174 font-weight: bold;
175 color: #e74c3c;
176}
177
178.loading-overlay {
179 position: fixed;
180 top: 0;
181 left: 0;
182 right: 0;
183 bottom: 0;
184 background-color: rgba(255, 255, 255, 0.8);
185 display: flex;
186 justify-content: center;
187 align-items: center;
188 z-index: 1000;
189 display: none;
190}
191
192.loading-content {
193 text-align: center;
194}
195
196.spinner {
197 border: 8px solid #f3f3f3;
198 border-top: 8px solid #3498db;
199 border-radius: 50%;
200 width: 60px;
201 height: 60px;
202 animation: spin 2s linear infinite;
203}
204
205@keyframes spin {
206 0% { transform: rotate(0deg); }
207 100% { transform: rotate(360deg); }
208}
209
210
211.popup {
212 display: none;
213 position: fixed;
214 z-index: 1000;
215 left: 0;
216 top: 0;
217 width: 100%;
218 height: 100%;
219 overflow: auto;
220 background-color: rgba(0, 0, 0, 0.4);
221}
222
223.popup-content {
224 background-color: #fff;
225 margin: 15% auto;
226 padding: 20px;
227 border: 1px solid #888;
228 width: 80%;
229 max-width: 400px;
230 border-radius: 10px;
231 box-shadow: 0 5px 15px rgba(0,0,0,0.3);
232 text-align: center;
233 display: flex;
234 flex-direction: column;
235 align-items: center;
236}
237
238.close {
239 color: #aaa;
240 align-self: flex-end;
241 font-size: 28px;
242 font-weight: bold;
243 cursor: pointer;
244 margin-bottom: 10px;
245}
246
247.close:hover,
248.close:focus {
249 color: black;
250 text-decoration: none;
251}
252
253form {
254 width: 100%;
255}
256
257form label {
258 margin: 10px 0 5px;
259 font-weight: bold;
260 width: 100%;
261 text-align: left;
262}
263
264form input[type="email"],
265form input[type="password"],
266form input[type="text"] {
267 width: 100%;
268 padding: 10px;
269 margin-bottom: 20px;
270 border: 1px solid #ccc;
271 border-radius: 5px;
272 box-sizing: border-box;
273 font-size: 16px;
274}
275
276.button {
277 width: 100%;
278 padding: 10px;
279 margin: 10px 0;
280 background-color: #007bff;
281 color: white;
282 border: none;
283 border-radius: 5px;
284 cursor: pointer;
285 font-size: 16px;
286 transition: background-color 0.3s;
287}
288
289.button:hover {
290 background-color: #0056b3;
291}
292
293.button[type="button"] {
294 background-color: #dd4b39;
295}
296
297.button[type="button"]:hover {
298 background-color: #c23321;
299}
300
301form p {
302 margin-top: 20px;
303 text-align: center;
304}
305
306form a {
307 color: #007bff;
308}
309
310form a:hover {
311 color: #0056b3;
312}
313
314/* Response Messages */
315.response {
316 margin-top: 10px;
317 color: red;
318}
319
320.accDetails {
321 display: none;
322}
323.overlay {
324 display: none;
325 position: fixed;
326 top: 0;
327 left: 0;
328 width: 100%;
329 height: 100%;
330 background-color: rgba(0, 0, 0, 0.7);
331 z-index: 1000;
332}
333
334.overlay-content {
335 position: relative;
336 margin: 5% auto;
337 padding: 20px;
338 width: 80%;
339 max-width: 1000px;
340 background-color: #fff;
341 display: flex;
342 justify-content: space-between;
343}
344
345.close {
346 position: absolute;
347 top: 10px;
348 right: 25px;
349 color: #aaa;
350 font-size: 35px;
351 font-weight: bold;
352 cursor: pointer;
353}
354
355.close:hover,
356.close:focus {
357 color: #000;
358 text-decoration: none;
359 cursor: pointer;
360}
361
362.saved-trips-container,
363.price-changes-container {
364 width: 48%;
365 overflow-y: auto;
366 max-height: 600px;
367}
368
369h2 {
370 text-align: center;
371}
372
373#savedTripsList,
374#priceChangesList {
375 list-style-type: none;
376 padding: 0;
377}
378
379#savedTripsList .option,
380#priceChangesList .price-change {
381 padding: 10px;
382 margin: 10px 0;
383 border: 1px solid #ccc;
384 border-radius: 5px;
385 background-color: #f4f4f9;
386}
387.btn {
388 margin: 15px;
389 width: 200px;
390 height: 30px;
391 background-color: #007bff;
392 color: white;
393 border: none;
394 border-radius: 5px;
395 cursor: pointer;
396 transition: background-color 0.3s;
397}
398
399.btn:disabled {
400 background-color: grey;
401 cursor: not-allowed;
402 opacity: 0.65;
403}
Note: See TracBrowser for help on using the repository browser.