Hugging Face's logo

Spaces:
Yaswanth56
/
testing_1
Sleeping

App Files Community
Yaswanth56 commited on
Commit
39a8d8e
·
verified ·
1 Parent(s): aaccd9c

Update static/styles.css

Browse files
Files changed (1) hide show
  1. static/styles.css +100 -28
static/styles.css CHANGED
@@ -1,52 +1,124 @@
1
  body {
2
- font-family: Arial, sans-serif;
3
- background-color: #e6f7ec;
4
- padding: 20px;
 
 
 
 
5
  }
6
 
7
- .form-container {
8
- max-width: 600px;
9
- margin: 0 auto;
10
- padding: 20px;
11
- background-color: white;
12
- border-radius: 10px;
13
- box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
 
 
 
 
 
 
14
  }
15
 
16
  h1 {
17
- text-align: center;
18
- color: #333;
 
19
  }
20
 
21
- table {
 
22
  width: 100%;
23
- border-collapse: collapse;
24
- margin-top: 20px;
25
  }
26
 
27
- td {
28
- padding: 10px;
 
 
 
29
  border: 1px solid #ccc;
 
 
 
30
  }
31
 
32
- input[type="number"] {
33
- width: 100%;
34
- padding: 10px;
35
- margin: 10px 0;
36
- border: 1px solid #ccc;
37
- border-radius: 5px;
38
  }
39
 
40
  button {
41
- background-color: #38a169;
 
 
 
 
42
  color: white;
43
- padding: 10px;
44
  border: none;
45
- width: 100%;
46
- border-radius: 5px;
47
  cursor: pointer;
 
48
  }
49
 
50
  button:hover {
51
- background-color: #2f855a;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
52
  }
 
1
  body {
2
+ font-family: 'Arial', sans-serif;
3
+ background: linear-gradient(135deg, #66bb6a, #388e3c); /* Green gradient */
4
+ display: flex;
5
+ justify-content: center;
6
+ align-items: center;
7
+ height: 100vh;
8
+ margin: 0;
9
  }
10
 
11
+ .login-container,
12
+ .rewards-container,
13
+ .apply-rewards-container,
14
+ .rewards-above-container,
15
+ .rewards-below-container {
16
+ background-color: #ffffff;
17
+ padding: 40px;
18
+ border-radius: 20px;
19
+ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
20
+ width: 100%;
21
+ max-width: 400px;
22
+ text-align: center;
23
+ background-color: rgba(255, 255, 255, 0.9);
24
  }
25
 
26
  h1 {
27
+ font-size: 30px;
28
+ color: #388e3c; /* Dark green */
29
+ margin-bottom: 20px;
30
  }
31
 
32
+ .input-group {
33
+ margin: 15px 0;
34
  width: 100%;
 
 
35
  }
36
 
37
+ .input-group input {
38
+ width: 100%;
39
+ padding: 12px;
40
+ font-size: 16px;
41
+ border-radius: 25px;
42
  border: 1px solid #ccc;
43
+ background-color: #f8e0c2;
44
+ outline: none;
45
+ text-align: center;
46
  }
47
 
48
+ .input-group input:focus {
49
+ border-color: #388e3c; /* Dark green on focus */
 
 
 
 
50
  }
51
 
52
  button {
53
+ width: 100%;
54
+ padding: 14px;
55
+ font-size: 16px;
56
+ border-radius: 30px;
57
+ background: linear-gradient(135deg, #66bb6a, #388e3c); /* Green gradient button */
58
  color: white;
 
59
  border: none;
 
 
60
  cursor: pointer;
61
+ transition: background-color 0.3s ease;
62
  }
63
 
64
  button:hover {
65
+ background: linear-gradient(135deg, #388e3c, #66bb6a); /* Darker green on hover */
66
+ }
67
+
68
+ .forgot-link {
69
+ font-size: 12px;
70
+ color: #388e3c;
71
+ text-decoration: none;
72
+ margin-top: 10px;
73
+ }
74
+
75
+ .forgot-link:hover {
76
+ text-decoration: underline;
77
+ }
78
+
79
+ .register-link {
80
+ margin-top: 15px;
81
+ font-size: 12px;
82
+ color: #388e3c;
83
+ }
84
+
85
+ .register-link a {
86
+ color: #388e3c;
87
+ text-decoration: none;
88
+ }
89
+
90
+ .register-link a:hover {
91
+ text-decoration: underline;
92
+ }
93
+
94
+ .error-message {
95
+ color: red;
96
+ font-size: 14px;
97
+ margin-top: 10px;
98
+ text-align: center;
99
+ }
100
+
101
+ .reward-details,
102
+ .apply-rewards-details {
103
+ font-size: 16px;
104
+ color: #388e3c;
105
+ margin-bottom: 20px;
106
+ }
107
+
108
+ .reward-button,
109
+ .apply-rewards-button {
110
+ width: 100%;
111
+ padding: 14px;
112
+ font-size: 16px;
113
+ border-radius: 30px;
114
+ background: linear-gradient(135deg, #66bb6a, #388e3c); /* Green gradient button */
115
+ color: white;
116
+ border: none;
117
+ cursor: pointer;
118
+ transition: background-color 0.3s ease;
119
+ }
120
+
121
+ .reward-button:hover,
122
+ .apply-rewards-button:hover {
123
+ background: linear-gradient(135deg, #388e3c, #66bb6a); /* Darker green on hover */
124
  }