Hugging Face's logo

Spaces:
Sergidev
/
1kcoinsA
Runtime error

App Files Community
Sergidev commited on
Commit
f75e86a
·
verified ·
1 Parent(s): c87b284

Update static/css/style.css

Browse files
Files changed (1) hide show
  1. static/css/style.css +71 -22
static/css/style.css CHANGED
@@ -3,34 +3,40 @@ body {
3
  display: flex;
4
  flex-direction: column;
5
  align-items: center;
6
- justify-content: space-between;
7
  height: 100vh;
8
  margin: 0;
9
- padding: 20px;
10
- box-sizing: border-box;
11
  }
12
 
13
  #stats {
14
  display: flex;
15
  justify-content: space-between;
16
  width: 100%;
17
- font-size: 18px;
 
 
18
  }
19
 
20
  #game-area {
 
21
  display: flex;
22
  flex-direction: column;
 
23
  align-items: center;
24
  }
25
 
26
  #coin {
27
  width: 100px;
28
  height: 100px;
 
29
  border-radius: 50%;
30
- background-color: #CD7F32;
31
- margin: 20px;
32
  cursor: pointer;
33
- transition: transform 0.3s;
 
 
 
 
 
34
  }
35
 
36
  #coin:hover {
@@ -42,51 +48,94 @@ body {
42
  justify-content: center;
43
  align-items: center;
44
  width: 100%;
 
 
 
 
 
 
 
 
 
45
  }
46
 
47
- .shop-coin {
48
  width: 50px;
49
  height: 50px;
50
  border-radius: 50%;
51
- margin: 0 10px;
52
  cursor: pointer;
53
- transition: transform 0.3s;
54
- }
55
-
56
- .shop-coin:hover {
57
- transform: scale(1.1);
58
  }
59
 
60
- .shop-coin.selected {
61
- border: 2px solid #000;
62
  }
63
 
64
  #mint-button {
 
 
 
65
  padding: 10px 20px;
 
 
 
66
  font-size: 16px;
 
67
  cursor: pointer;
 
68
  }
69
 
70
  #game-over {
71
- display: none;
 
 
 
 
 
 
72
  flex-direction: column;
 
73
  align-items: center;
 
 
74
  }
75
 
76
  #leaderboard {
77
  margin-top: 20px;
 
78
  }
79
 
80
  #leaderboard table {
 
81
  border-collapse: collapse;
82
  }
83
 
84
  #leaderboard th, #leaderboard td {
85
- border: 1px solid #ddd;
86
- padding: 8px;
87
- text-align: left;
 
 
 
 
 
 
 
 
 
88
  }
89
 
90
- #leaderboard th {
91
- background-color: #f2f2f2;
 
 
 
 
 
 
 
 
 
 
92
  }
 
3
  display: flex;
4
  flex-direction: column;
5
  align-items: center;
 
6
  height: 100vh;
7
  margin: 0;
8
+ background-color: #f0f0f0;
 
9
  }
10
 
11
  #stats {
12
  display: flex;
13
  justify-content: space-between;
14
  width: 100%;
15
+ padding: 10px;
16
+ background-color: #333;
17
+ color: white;
18
  }
19
 
20
  #game-area {
21
+ flex-grow: 1;
22
  display: flex;
23
  flex-direction: column;
24
+ justify-content: center;
25
  align-items: center;
26
  }
27
 
28
  #coin {
29
  width: 100px;
30
  height: 100px;
31
+ background-color: #ffd700;
32
  border-radius: 50%;
 
 
33
  cursor: pointer;
34
+ display: flex;
35
+ justify-content: center;
36
+ align-items: center;
37
+ font-size: 24px;
38
+ font-weight: bold;
39
+ transition: transform 0.3s ease-in-out;
40
  }
41
 
42
  #coin:hover {
 
48
  justify-content: center;
49
  align-items: center;
50
  width: 100%;
51
+ padding: 10px;
52
+ background-color: #ddd;
53
+ }
54
+
55
+ .shop-item {
56
+ display: flex;
57
+ flex-direction: column;
58
+ align-items: center;
59
+ margin: 0 10px;
60
  }
61
 
62
+ .coin-icon {
63
  width: 50px;
64
  height: 50px;
65
  border-radius: 50%;
66
+ margin-bottom: 5px;
67
  cursor: pointer;
68
+ border: 2px solid transparent;
 
 
 
 
69
  }
70
 
71
+ .coin-icon.selected {
72
+ border-color: #333;
73
  }
74
 
75
  #mint-button {
76
+ background-color: #4CAF50;
77
+ border: none;
78
+ color: white;
79
  padding: 10px 20px;
80
+ text-align: center;
81
+ text-decoration: none;
82
+ display: inline-block;
83
  font-size: 16px;
84
+ margin: 4px 2px;
85
  cursor: pointer;
86
+ border-radius: 5px;
87
  }
88
 
89
  #game-over {
90
+ position: fixed;
91
+ top: 0;
92
+ left: 0;
93
+ width: 100%;
94
+ height: 100%;
95
+ background-color: rgba(0, 0, 0, 0.8);
96
+ display: flex;
97
  flex-direction: column;
98
+ justify-content: center;
99
  align-items: center;
100
+ color: white;
101
+ z-index: 1000;
102
  }
103
 
104
  #leaderboard {
105
  margin-top: 20px;
106
+ width: 300px;
107
  }
108
 
109
  #leaderboard table {
110
+ width: 100%;
111
  border-collapse: collapse;
112
  }
113
 
114
  #leaderboard th, #leaderboard td {
115
+ border: 1px solid white;
116
+ padding: 5px;
117
+ text-align: center;
118
+ }
119
+
120
+ #initials-form {
121
+ margin-top: 20px;
122
+ }
123
+
124
+ #initials-input {
125
+ padding: 5px;
126
+ font-size: 16px;
127
  }
128
 
129
+ #submit-score, #play-again {
130
+ background-color: #4CAF50;
131
+ border: none;
132
+ color: white;
133
+ padding: 10px 20px;
134
+ text-align: center;
135
+ text-decoration: none;
136
+ display: inline-block;
137
+ font-size: 16px;
138
+ margin: 4px 2px;
139
+ cursor: pointer;
140
+ border-radius: 5px;
141
  }