Hugging Face's logo

Spaces:
GarGerry
/
Flux-web
Running

App Files Community
GarGerry commited on
Commit
602273a
·
verified ·
1 Parent(s): 07012de

Update style.css

Browse files
Files changed (1) hide show
  1. style.css +71 -46
style.css CHANGED
@@ -1,59 +1,84 @@
 
1
  body {
2
- font-family: Arial, sans-serif;
3
- margin: 0;
4
- padding: 0;
5
- height: 100vh;
6
- background: #1a1a1a;
7
- display: flex;
8
- justify-content: center;
9
- align-items: center;
10
  }
11
 
 
12
  .game-container {
13
- position: relative;
14
- width: 80%;
15
- height: 80%;
16
- border: 2px solid #00ffcc;
17
- background-color: #0f0f0f;
18
- overflow: hidden;
19
- border-radius: 15px;
20
  }
21
 
22
- .falling-ball {
23
- position: absolute;
24
- width: 50px;
25
- height: 50px;
26
- background: linear-gradient(45deg, #00ffcc, #00bfff);
27
- border-radius: 50%;
28
- box-shadow: 0 0 15px 5px rgba(0, 255, 204, 0.7);
29
- animation: glow 1.5s ease-in-out infinite alternate;
 
 
 
30
  }
31
 
32
- .catcher {
33
- position: absolute;
34
- bottom: 0;
35
- width: 120px;
36
- height: 20px;
37
- background: linear-gradient(45deg, #00ffcc, #00bfff);
38
- border-radius: 10px;
39
- box-shadow: 0 0 20px rgba(0, 255, 204, 0.8);
40
- transition: all 0.2s ease-in-out;
 
 
41
  }
42
 
43
- #score {
44
- position: absolute;
45
- top: 10px;
46
- left: 10px;
47
- font-size: 24px;
48
- color: #00ffcc;
49
- text-shadow: 0 0 10px rgba(0, 255, 204, 0.7);
 
 
 
 
50
  }
51
 
52
- @keyframes glow {
53
- 0% {
54
- box-shadow: 0 0 10px 5px rgba(0, 255, 204, 0.5);
55
- }
56
- 100% {
57
- box-shadow: 0 0 20px 10px rgba(0, 255, 204, 1);
58
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
59
  }
 
1
+ /* General Body Styling */
2
  body {
3
+ margin: 0;
4
+ padding: 0;
5
+ background: linear-gradient(90deg, #000428, #004e92);
6
+ font-family: Arial, sans-serif;
7
+ overflow: hidden;
 
 
 
8
  }
9
 
10
+ /* Game Container */
11
  .game-container {
12
+ position: relative;
13
+ width: 100vw;
14
+ height: 80vh; /* Reduced height for controls */
15
+ border: 3px solid #00ffcc;
16
+ overflow: hidden;
17
+ box-shadow: 0 0 20px #00ffcc;
 
18
  }
19
 
20
+ /* Ball */
21
+ .ball {
22
+ position: absolute;
23
+ top: 0;
24
+ left: 50%;
25
+ width: 20px;
26
+ height: 20px;
27
+ background: radial-gradient(circle, #ff00cc, #ff0066);
28
+ border-radius: 50%;
29
+ box-shadow: 0 0 15px #ff0066;
30
+ transform: translate(-50%, -50%);
31
  }
32
 
33
+ /* Platform */
34
+ .platform {
35
+ position: absolute;
36
+ bottom: 5%;
37
+ left: 50%;
38
+ width: 100px;
39
+ height: 20px;
40
+ background: linear-gradient(90deg, #00ffcc, #0066ff);
41
+ border-radius: 10px;
42
+ box-shadow: 0 0 20px #00ffcc;
43
+ transform: translateX(-50%);
44
  }
45
 
46
+ /* Score Board */
47
+ .score-board {
48
+ position: absolute;
49
+ top: 10px;
50
+ left: 10px;
51
+ font-size: 1.5em;
52
+ color: #ffffff;
53
+ background: rgba(0, 0, 0, 0.5);
54
+ padding: 10px 20px;
55
+ border-radius: 10px;
56
+ box-shadow: 0 0 10px #00ffcc;
57
  }
58
 
59
+ /* Controls */
60
+ .controls {
61
+ display: flex;
62
+ justify-content: center;
63
+ align-items: center;
64
+ gap: 20px;
65
+ margin-top: 10px;
66
+ }
67
+
68
+ .controls button {
69
+ background: linear-gradient(90deg, #ff0066, #ffcc00);
70
+ color: white;
71
+ border: none;
72
+ border-radius: 10px;
73
+ padding: 10px 20px;
74
+ font-size: 1.5em;
75
+ box-shadow: 0 0 10px #ff0066;
76
+ cursor: pointer;
77
+ outline: none;
78
+ transition: transform 0.2s, box-shadow 0.2s;
79
+ }
80
+
81
+ .controls button:hover {
82
+ transform: scale(1.1);
83
+ box-shadow: 0 0 15px #ffcc00;
84
  }