Hugging Face's logo

Spaces:
ParulPandey
/
Area_and_Perimeter
Running

App Files Community
Pp commited on
Commit
eae8dca
·
verified ·
1 Parent(s): 4a876e7

Update style.css

Browse files
Files changed (1) hide show
  1. style.css +57 -61
style.css CHANGED
@@ -1,91 +1,88 @@
1
  body {
2
- font-family: 'Comic Sans MS', cursive, sans-serif;
3
  margin: 0;
4
- padding: 15px;
5
- text-align: center;
6
- background-color: #f0f8ff;
7
  display: flex;
8
  flex-direction: column;
9
  align-items: center;
10
  min-height: 100vh;
11
  box-sizing: border-box;
 
12
  }
13
 
14
  h1 {
15
- color: #ff6b6b;
16
- text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
17
- margin: 10px 0;
 
18
  }
19
 
20
  .game-container {
21
- border: 6px solid #4CAF50;
22
- border-radius: 12px;
23
- padding: 12px;
24
- background-color: white;
25
- box-shadow: 0 4px 8px rgba(0,0,0,0.1);
26
- max-width: 600px;
27
  width: 100%;
 
28
  }
29
 
30
  .controls {
31
- margin: 10px 0;
32
  display: flex;
33
  justify-content: center;
34
- gap: 15px;
 
35
  }
36
 
37
  button {
38
- padding: 8px 16px;
39
  cursor: pointer;
40
- border: none;
41
- border-radius: 20px;
42
- font-weight: bold;
43
- font-size: 14px;
44
- transition: all 0.2s;
45
- }
46
-
47
- #add-mode {
48
- background-color: #4CAF50;
49
- color: white;
50
- }
51
-
52
- #erase-mode {
53
- background-color: #ff9800;
54
- color: white;
55
  }
56
 
57
  button:hover {
58
- transform: scale(1.05);
 
59
  }
60
 
61
  .mode-active {
62
- box-shadow: 0 0 10px rgba(0,0,0,0.2);
 
 
63
  }
64
 
65
  .grid-wrapper {
66
- border: 3px solid #ff6b6b;
67
- border-radius: 8px;
68
- padding: 5px;
69
- display: inline-block;
70
- background: #ff6b6b;
71
- box-shadow: inset 0 0 8px rgba(0,0,0,0.1);
72
- margin: 10px 0;
73
  }
74
 
75
  .grid {
76
  display: grid;
77
- grid-template-columns: repeat(15, 20px);
78
- grid-template-rows: repeat(15, 20px);
79
- gap: 1px;
80
- background-color: #ff6b6b;
 
 
 
81
  }
82
 
83
  .cell {
84
- width: 20px;
85
- height: 20px;
86
- background-color: white;
87
  cursor: pointer;
88
- transition: all 0.15s;
89
  }
90
 
91
  .cell:hover {
@@ -93,30 +90,29 @@ button:hover {
93
  }
94
 
95
  .cell.filled {
96
- background-color: #4CAF50;
97
- border: 1px solid #3e8e41;
98
- box-shadow: inset 0 0 4px rgba(0,0,0,0.2);
99
  }
100
 
101
  .stats {
102
- margin-top: 15px;
103
- font-size: 18px;
104
  display: flex;
105
  justify-content: center;
106
  gap: 20px;
 
107
  }
108
 
109
  .stat-box {
110
- background-color: #ffeb3b;
111
- padding: 8px 16px;
112
  border-radius: 8px;
113
- border: 2px solid #ff9800;
114
- min-width: 120px;
115
  }
116
 
117
  .stat-value {
118
- font-size: 22px;
119
- font-weight: bold;
120
- color: #e91e63;
121
  }
122
-
 
1
  body {
2
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
3
  margin: 0;
4
+ padding: 20px;
5
+ background-color: #f9f9f9;
 
6
  display: flex;
7
  flex-direction: column;
8
  align-items: center;
9
  min-height: 100vh;
10
  box-sizing: border-box;
11
+ color: #333;
12
  }
13
 
14
  h1 {
15
+ font-size: 28px;
16
+ margin: 20px 0;
17
+ color: #222;
18
+ text-align: center;
19
  }
20
 
21
  .game-container {
22
+ border: 1px solid #e0e0e0;
23
+ border-radius: 16px;
24
+ padding: 24px;
25
+ background-color: #fff;
26
+ box-shadow: 0 8px 16px rgba(0,0,0,0.05);
 
27
  width: 100%;
28
+ max-width: 800px;
29
  }
30
 
31
  .controls {
32
+ margin: 20px 0;
33
  display: flex;
34
  justify-content: center;
35
+ gap: 12px;
36
+ flex-wrap: wrap;
37
  }
38
 
39
  button {
40
+ padding: 10px 18px;
41
  cursor: pointer;
42
+ border: 1px solid #ccc;
43
+ border-radius: 12px;
44
+ font-weight: 500;
45
+ font-size: 15px;
46
+ background-color: #f5f5f5;
47
+ color: #333;
48
+ transition: all 0.2s ease-in-out;
 
 
 
 
 
 
 
 
49
  }
50
 
51
  button:hover {
52
+ background-color: #eaeaea;
53
+ transform: translateY(-1px);
54
  }
55
 
56
  .mode-active {
57
+ border: 2px solid #007aff;
58
+ background-color: #e6f0ff;
59
+ color: #007aff;
60
  }
61
 
62
  .grid-wrapper {
63
+ border: none;
64
+ padding: 10px;
65
+ display: flex;
66
+ justify-content: center;
 
 
 
67
  }
68
 
69
  .grid {
70
  display: grid;
71
+ grid-template-columns: repeat(15, minmax(30px, 1fr));
72
+ grid-template-rows: repeat(15, minmax(30px, 1fr));
73
+ gap: 2px;
74
+ background-color: #ccc;
75
+ border-radius: 8px;
76
+ overflow: hidden;
77
+ max-width: 100%;
78
  }
79
 
80
  .cell {
81
+ width: 100%;
82
+ aspect-ratio: 1 / 1;
83
+ background-color: #fff;
84
  cursor: pointer;
85
+ transition: background-color 0.2s ease;
86
  }
87
 
88
  .cell:hover {
 
90
  }
91
 
92
  .cell.filled {
93
+ background-color: #007aff;
94
+ border: 1px solid #005bb5;
 
95
  }
96
 
97
  .stats {
98
+ margin-top: 20px;
99
+ font-size: 16px;
100
  display: flex;
101
  justify-content: center;
102
  gap: 20px;
103
+ flex-wrap: wrap;
104
  }
105
 
106
  .stat-box {
107
+ background-color: #f2f2f2;
108
+ padding: 10px 16px;
109
  border-radius: 8px;
110
+ border: 1px solid #ddd;
111
+ min-width: 140px;
112
  }
113
 
114
  .stat-value {
115
+ font-size: 20px;
116
+ font-weight: 600;
117
+ color: #444;
118
  }