Hugging Face's logo

Spaces:
henztech
/
Test
Running

App Files Community
henztech commited on
Commit
feb801e
·
verified ·
1 Parent(s): c35d0ed

Update style.css

Browse files
Files changed (1) hide show
  1. style.css +165 -18
style.css CHANGED
@@ -1,28 +1,175 @@
1
  body {
2
- padding: 2rem;
3
- font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 
 
4
  }
5
 
6
- h1 {
7
- font-size: 16px;
8
- margin-top: 0;
 
 
 
 
 
 
 
9
  }
10
 
11
- p {
12
- color: rgb(107, 114, 128);
13
- font-size: 15px;
14
- margin-bottom: 10px;
15
- margin-top: 5px;
16
  }
17
 
18
- .card {
19
- max-width: 620px;
20
- margin: 0 auto;
21
- padding: 16px;
22
- border: 1px solid lightgray;
23
- border-radius: 16px;
24
  }
25
 
26
- .card p:last-child {
27
- margin-bottom: 0;
 
 
 
 
 
 
 
28
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
  body {
2
+ margin: 0;
3
+ font-family: Arial, sans-serif;
4
+ background: linear-gradient(to bottom, #00c853, #b2ff59);
5
+ color: #333;
6
  }
7
 
8
+ .splash-screen {
9
+ display: flex;
10
+ flex-direction: column;
11
+ justify-content: center;
12
+ align-items: center;
13
+ height: 100vh;
14
+ background: linear-gradient(to bottom right, #00c853, #b2ff59);
15
+ color: white;
16
+ text-align: center;
17
+ padding: 2rem;
18
  }
19
 
20
+ .splash-screen h1 {
21
+ font-size: 2rem;
22
+ margin-bottom: 1rem;
 
 
23
  }
24
 
25
+ .splash-screen p {
26
+ font-size: 1.2rem;
27
+ margin-bottom: 2rem;
 
 
 
28
  }
29
 
30
+ .splash-screen button {
31
+ padding: 0.75rem 2rem;
32
+ border: none;
33
+ background: white;
34
+ color: #00c853;
35
+ border-radius: 10px;
36
+ font-size: 1rem;
37
+ font-weight: bold;
38
+ cursor: pointer;
39
  }
40
+
41
+ .app {
42
+ padding: 1rem;
43
+ }
44
+
45
+ header h1 {
46
+ font-size: 1.5rem;
47
+ margin: 0;
48
+ }
49
+
50
+ .balance-section {
51
+ background: white;
52
+ border-radius: 12px;
53
+ padding: 1rem;
54
+ margin-top: 1rem;
55
+ }
56
+
57
+ .balance-info {
58
+ display: flex;
59
+ justify-content: space-between;
60
+ align-items: center;
61
+ }
62
+
63
+ .action-buttons {
64
+ margin-top: 1rem;
65
+ display: flex;
66
+ gap: 1rem;
67
+ }
68
+
69
+ .action-buttons button {
70
+ flex: 1;
71
+ padding: 0.5rem;
72
+ border-radius: 8px;
73
+ background: #eee;
74
+ border: none;
75
+ font-weight: bold;
76
+ }
77
+
78
+ .tiles {
79
+ display: grid;
80
+ grid-template-columns: repeat(2, 1fr);
81
+ gap: 1rem;
82
+ margin-top: 1rem;
83
+ }
84
+
85
+ .tile {
86
+ background: white;
87
+ padding: 1rem;
88
+ border-radius: 12px;
89
+ text-align: center;
90
+ }
91
+
92
+ .tile img {
93
+ width: 30px;
94
+ height: 30px;
95
+ margin-bottom: 0.5rem;
96
+ }
97
+
98
+ .payment-section {
99
+ text-align: center;
100
+ margin-top: 1rem;
101
+ }
102
+
103
+ #payBtn {
104
+ font-size: 2rem;
105
+ padding: 1rem;
106
+ border-radius: 50%;
107
+ background: black;
108
+ color: white;
109
+ border: none;
110
+ }
111
+
112
+ .payment-history {
113
+ margin-top: 2rem;
114
+ }
115
+
116
+ .history-item {
117
+ background: white;
118
+ padding: 1rem;
119
+ border-radius: 8px;
120
+ margin-top: 0.5rem;
121
+ cursor: pointer;
122
+ }
123
+
124
+ .modal, .receipt {
125
+ position: fixed;
126
+ top: 0; left: 0;
127
+ width: 100%;
128
+ height: 100%;
129
+ background: rgba(0,0,0,0.7);
130
+ display: none;
131
+ justify-content: center;
132
+ align-items: center;
133
+ z-index: 1000;
134
+ }
135
+
136
+ .modal-content, .receipt-content {
137
+ background: white;
138
+ padding: 2rem;
139
+ border-radius: 12px;
140
+ width: 90%;
141
+ max-width: 400px;
142
+ text-align: center;
143
+ }
144
+
145
+ .modal-content input, .modal-content select {
146
+ display: block;
147
+ width: 100%;
148
+ margin: 1rem 0;
149
+ padding: 0.5rem;
150
+ border-radius: 8px;
151
+ border: 1px solid #ccc;
152
+ }
153
+
154
+ .receipt-content .circle {
155
+ width: 60px;
156
+ height: 60px;
157
+ background: red;
158
+ color: white;
159
+ border-radius: 50%;
160
+ display: flex;
161
+ align-items: center;
162
+ justify-content: center;
163
+ font-size: 1.5rem;
164
+ margin: 0 auto 1rem;
165
+ }
166
+
167
+ .check {
168
+ font-weight: bold;
169
+ margin: 1rem 0;
170
+ font-size: 1.2rem;
171
+ }
172
+
173
+ .receipt-details p {
174
+ margin: 0.5rem 0;
175
+ }