Hugging Face's logo

Spaces:
GarGerry
/
Testinghh
Running

App Files Community
GarGerry commited on
Commit
2a60bf4
·
verified ·
1 Parent(s): 830d5f1

Update style.css

Browse files
Files changed (1) hide show
  1. style.css +113 -46
style.css CHANGED
@@ -1,4 +1,4 @@
1
- /* Reset and Global Styles */
2
  * {
3
  margin: 0;
4
  padding: 0;
@@ -7,95 +7,162 @@
7
 
8
  body {
9
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
10
- background: #001f3f; /* Dark blue */
11
- color: #fff;
12
  display: flex;
13
  justify-content: center;
14
- align-items: center;
15
- height: 100vh;
16
- overflow-y: auto; /* Allow vertical scrolling */
17
  padding: 20px;
 
18
  }
19
 
20
  .container {
21
- background: #fff;
22
- border-radius: 15px;
23
- box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
24
  padding: 40px;
25
  width: 100%;
26
- max-width: 600px;
27
- text-align: center;
28
- color: #333;
29
  }
30
 
31
  header h1 {
32
- margin-bottom: 20px;
 
 
 
33
  }
34
 
35
  label {
36
  display: block;
37
- margin: 15px 0 5px;
38
  font-weight: bold;
39
- font-size: 14px;
 
40
  }
41
 
42
- input, select {
 
43
  width: 100%;
44
- padding: 10px;
45
- margin-bottom: 15px;
46
  border: 1px solid #ccc;
47
- border-radius: 5px;
48
- font-size: 16px;
 
49
  }
50
 
51
- button {
52
- background-color: #87CEFA; /* Sky Blue */
53
- border: none;
54
- border-radius: 8px;
55
- padding: 12px 20px;
 
 
 
 
56
  font-size: 16px;
57
- color: white;
58
- font-weight: bold;
59
- cursor: pointer;
60
- box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
61
- transition: background-color 0.3s ease;
62
  }
63
 
64
- button:hover {
65
- background-color: #5faad7; /* Darker blue */
 
 
 
66
  }
67
 
68
  #swapButton {
69
- background: #87CEFA;
70
- color: white;
71
- margin: 10px auto;
72
- display: block;
73
- width: auto;
 
 
 
 
 
 
 
 
74
  }
75
 
76
- #result {
 
 
 
 
77
  margin-top: 20px;
78
  font-size: 18px;
79
  font-weight: bold;
80
- color: #001f3f;
81
- background-color: #f0f0f0;
 
 
 
 
 
 
 
82
  padding: 15px;
83
- border-radius: 8px;
 
 
 
 
 
 
 
 
 
 
 
84
  }
85
 
86
  footer {
87
- margin-top: 20px;
88
  font-size: 14px;
89
- color: #ccc;
 
90
  }
91
 
92
- /* Responsive Styles */
93
  @media (max-width: 768px) {
94
  .container {
95
- padding: 30px;
 
96
  }
97
 
98
- button {
 
 
 
 
99
  font-size: 14px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
100
  }
101
  }
 
1
+ /* Reset styles */
2
  * {
3
  margin: 0;
4
  padding: 0;
 
7
 
8
  body {
9
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
10
+ background: #001F3F; /* Background biru tua */
 
11
  display: flex;
12
  justify-content: center;
13
+ align-items: flex-start; /* Posisi atas */
14
+ min-height: 100vh;
 
15
  padding: 20px;
16
+ overflow-y: auto; /* Scroll vertikal */
17
  }
18
 
19
  .container {
20
+ background: #ffffff;
21
+ border-radius: 20px;
22
+ box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15); /* Bayangan tegas */
23
  padding: 40px;
24
  width: 100%;
25
+ max-width: 600px; /* Ukuran lebih besar */
26
+ margin-bottom: 20px;
 
27
  }
28
 
29
  header h1 {
30
+ font-size: 28px; /* Ukuran header lebih besar */
31
+ color: #333;
32
+ text-align: center;
33
+ margin-bottom: 30px;
34
  }
35
 
36
  label {
37
  display: block;
38
+ font-size: 16px;
39
  font-weight: bold;
40
+ margin-bottom: 8px;
41
+ color: #555;
42
  }
43
 
44
+ input {
45
+ padding: 15px;
46
  width: 100%;
47
+ font-size: 18px; /* Font input lebih besar */
48
+ border-radius: 10px;
49
  border: 1px solid #ccc;
50
+ margin-bottom: 20px;
51
+ text-align: center;
52
+ font-weight: bold;
53
  }
54
 
55
+ .currency-selectors {
56
+ display: flex;
57
+ align-items: center;
58
+ justify-content: space-between;
59
+ margin-bottom: 20px;
60
+ }
61
+
62
+ .input-group select {
63
+ padding: 15px;
64
  font-size: 16px;
65
+ border-radius: 10px;
66
+ border: 1px solid #ccc;
67
+ width: 100%;
 
 
68
  }
69
 
70
+ /* Tombol swap */
71
+ .swap-group {
72
+ display: flex;
73
+ justify-content: center;
74
+ margin: 20px 0;
75
  }
76
 
77
  #swapButton {
78
+ background-color: #ffffff;
79
+ color: #007BFF;
80
+ border: 2px solid #ccc;
81
+ border-radius: 50%;
82
+ width: 60px;
83
+ height: 60px;
84
+ display: flex;
85
+ justify-content: center;
86
+ align-items: center;
87
+ cursor: pointer;
88
+ font-size: 22px; /* Ukuran font lebih besar */
89
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
90
+ transition: background-color 0.3s ease;
91
  }
92
 
93
+ #swapButton:hover {
94
+ background-color: #f1f1f1;
95
+ }
96
+
97
+ .result-box {
98
  margin-top: 20px;
99
  font-size: 18px;
100
  font-weight: bold;
101
+ color: #333;
102
+ background-color: #f8f8f8;
103
+ padding: 20px;
104
+ border-radius: 10px;
105
+ text-align: center;
106
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
107
+ }
108
+
109
+ button[type="submit"] {
110
  padding: 15px;
111
+ background-color: #00BFFF; /* Warna biru langit */
112
+ color: white;
113
+ border: none;
114
+ border-radius: 10px;
115
+ font-size: 18px; /* Font lebih besar */
116
+ cursor: pointer;
117
+ width: 100%;
118
+ transition: background-color 0.3s ease;
119
+ }
120
+
121
+ button[type="submit"]:hover {
122
+ background-color: #1E90FF; /* Warna biru hover */
123
  }
124
 
125
  footer {
126
+ margin-top: 30px;
127
  font-size: 14px;
128
+ color: #666;
129
+ text-align: center;
130
  }
131
 
132
+ /* Responsiveness */
133
  @media (max-width: 768px) {
134
  .container {
135
+ padding: 20px;
136
+ max-width: 95%;
137
  }
138
 
139
+ input {
140
+ font-size: 16px; /* Font input lebih kecil untuk mobile */
141
+ }
142
+
143
+ select {
144
  font-size: 14px;
145
+ padding: 12px;
146
+ }
147
+
148
+ #swapButton {
149
+ width: 50px;
150
+ height: 50px;
151
+ font-size: 20px;
152
+ }
153
+
154
+ button[type="submit"] {
155
+ font-size: 16px;
156
+ padding: 12px;
157
+ }
158
+
159
+ header h1 {
160
+ font-size: 24px;
161
+ }
162
+ }
163
+
164
+ @media (min-width: 769px) {
165
+ .container {
166
+ max-width: 700px;
167
  }
168
  }