Hugging Face's logo

Spaces:
duongve
/
Weather_Dashboard
Sleeping

App Files Community
duongve commited on
Commit
f398e78
·
verified ·
1 Parent(s): e32bc5b

Update static/css/style.css

Browse files
Files changed (1) hide show
  1. static/css/style.css +165 -125
static/css/style.css CHANGED
@@ -1,125 +1,165 @@
1
- html, body {
2
- margin: 0;
3
- padding: 0;
4
- width: 100%;
5
- height: 100%;
6
- font-family: Arial, sans-serif;
7
- background-color: #e0f7fa;
8
- color: #333;
9
- }
10
-
11
- .container {
12
- display: flex;
13
- flex-direction: column;
14
- height: 100%;
15
- }
16
-
17
- header {
18
- text-align: center;
19
- background-color: #42a5f5;
20
- color: white;
21
- padding: 10px;
22
- border-radius: 5px;
23
- }
24
-
25
- main {
26
- flex: 1;
27
- display: flex;
28
- flex-direction: column;
29
- justify-content: space-between;
30
- padding: 20px;
31
- overflow-y: auto;
32
- }
33
-
34
- .content {
35
- display: flex;
36
- justify-content: space-between;
37
- align-items: flex-start;
38
- }
39
-
40
- .search-section, .subscribe-section {
41
- text-align: center;
42
- margin: 20px 0;
43
- }
44
-
45
- .search-section {
46
- flex: 0 0 30%;
47
- display: flex;
48
- flex-direction: column;
49
- align-items: center;
50
- }
51
-
52
- .search-section input, .subscribe-section input {
53
- padding: 10px;
54
- width: 80%;
55
- margin: 5px 0;
56
- }
57
-
58
- .search-section button, .subscribe-section button {
59
- padding: 10px 20px;
60
- margin: 5px;
61
- background-color: #42a5f5;
62
- color: white;
63
- border: none;
64
- border-radius: 5px;
65
- cursor: pointer;
66
- }
67
-
68
- .search-section button#location-button {
69
- background-color: #757575;
70
- }
71
-
72
- .weather-section {
73
- flex: 1;
74
- display: flex;
75
- flex-direction: column;
76
- }
77
-
78
- .current-weather, .forecast {
79
- background-color: #bbdefb;
80
- padding: 20px;
81
- margin: 10px 0;
82
- border-radius: 5px;
83
- }
84
-
85
- .current-weather {
86
- display: flex;
87
- justify-content: space-between;
88
- align-items: center;
89
- }
90
-
91
- .current-weather .weather-details {
92
- flex: 1;
93
- }
94
-
95
- .current-weather .weather-details p {
96
- margin: 5px 0;
97
- }
98
-
99
- .weather-icon {
100
- text-align: center;
101
- flex: 0 0 400px;
102
- }
103
-
104
- .weather-icon img {
105
- width: 50px;
106
- height: 50px;
107
- }
108
-
109
- .forecast {
110
- display: flex;
111
- justify-content: space-between;
112
- }
113
-
114
- .forecast-day {
115
- background-color: #eceff1;
116
- padding: 10px;
117
- border-radius: 5px;
118
- text-align: center;
119
- width: 23%;
120
- }
121
-
122
- .forecast-day img {
123
- width: 40px;
124
- height: 40px;
125
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ html, body {
2
+ margin: 0;
3
+ padding: 0;
4
+ width: 100%;
5
+ height: 100%;
6
+ font-family: Arial, sans-serif;
7
+ background-color: #e0f7fa;
8
+ color: #333;
9
+ }
10
+
11
+ .container {
12
+ display: flex;
13
+ flex-direction: column;
14
+ height: 100%;
15
+ }
16
+
17
+ header {
18
+ text-align: center;
19
+ background-color: #42a5f5;
20
+ color: white;
21
+ padding: 10px;
22
+ border-radius: 5px;
23
+ }
24
+
25
+ main {
26
+ flex: 1;
27
+ display: flex;
28
+ flex-direction: column;
29
+ justify-content: space-between;
30
+ padding: 20px;
31
+ overflow-y: auto;
32
+ }
33
+
34
+ .content {
35
+ display: flex;
36
+ justify-content: space-between;
37
+ align-items: flex-start;
38
+ }
39
+
40
+ .search-section, .subscribe-section {
41
+ text-align: center;
42
+ margin: 20px 0;
43
+ }
44
+
45
+ .search-section {
46
+ flex: 0 0 30%;
47
+ display: flex;
48
+ flex-direction: column;
49
+ align-items: center;
50
+ }
51
+
52
+ .search-section input, .subscribe-section input {
53
+ padding: 10px;
54
+ width: 80%;
55
+ margin: 5px 0;
56
+ }
57
+
58
+ .search-section button, .subscribe-section button {
59
+ padding: 10px 20px;
60
+ margin: 5px;
61
+ background-color: #42a5f5;
62
+ color: white;
63
+ border: none;
64
+ border-radius: 5px;
65
+ cursor: pointer;
66
+ }
67
+
68
+ .search-section button#location-button {
69
+ background-color: #757575;
70
+ }
71
+
72
+ .weather-section {
73
+ flex: 1;
74
+ display: flex;
75
+ flex-direction: column;
76
+ }
77
+
78
+ .current-weather, .forecast {
79
+ background-color: #bbdefb;
80
+ padding: 20px;
81
+ margin: 10px 0;
82
+ border-radius: 5px;
83
+ }
84
+
85
+ .current-weather {
86
+ display: flex;
87
+ justify-content: space-between;
88
+ align-items: center;
89
+ }
90
+
91
+ .current-weather .weather-details {
92
+ flex: 1;
93
+ }
94
+
95
+ .current-weather .weather-details p {
96
+ margin: 5px 0;
97
+ }
98
+
99
+ .weather-icon {
100
+ text-align: center;
101
+ flex: 0 0 400px;
102
+ }
103
+
104
+ .weather-icon img {
105
+ width: 50px;
106
+ height: 50px;
107
+ }
108
+
109
+ .forecast {
110
+ display: flex;
111
+ justify-content: space-between;
112
+ flex-wrap: wrap;
113
+ }
114
+
115
+
116
+ .forecast-row {
117
+ width: 100%;
118
+ display: flex;
119
+ justify-content: space-between;
120
+ }
121
+
122
+ .forecast-day {
123
+ background-color: #eceff1;
124
+ padding: 10px;
125
+ border-radius: 5px;
126
+ text-align: center;
127
+ flex: 0 0 23%;
128
+ box-sizing: border-box;
129
+ margin-bottom: 10px;
130
+ }
131
+
132
+ .forecast-day img {
133
+ width: 40px;
134
+ height: 40px;
135
+ }
136
+
137
+ #city-history {
138
+ margin-top: 10px;
139
+ font-size: 14px;
140
+ }
141
+
142
+ .city-history-item {
143
+ /* cursor: pointer;*/
144
+ color: #1976d2;
145
+ /* text-decoration: underline;*/
146
+ }
147
+
148
+ .search-section button#clear-history-button {
149
+ background-color: #d32f2f;
150
+ }
151
+
152
+ #load-more-btn {
153
+ padding: 10px 20px;
154
+ background-color: #2196F3;
155
+ color: white;
156
+ border: none;
157
+ border-radius: 5px;
158
+ cursor: pointer;
159
+ margin-top: 10px;
160
+ transition: background-color 0.3s ease;
161
+ }
162
+
163
+ #load-more-btn:hover {
164
+ background-color: #0b7dda;
165
+ }