Skip to content

Commit d1f9a2d

Browse files
kilsw1chkilsw1ch
committed
added home page
1 parent f7097f6 commit d1f9a2d

File tree

4 files changed

+306
-142
lines changed

4 files changed

+306
-142
lines changed

‎carrom.html‎

Lines changed: 169 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,169 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
6+
<title>carrom counter</title>
7+
<link rel="stylesheet" href="carrom.css">
8+
9+
<!-- <link rel="icon" href="media/icon.png"> -->
10+
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
11+
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined">
12+
</head>
13+
14+
<body>
15+
16+
<div class="player1" id="player1">
17+
18+
<p>baba</p>
19+
<span id="p1score">0</span>
20+
<button class="decbtn" id="p1dec"><span class="material-icons">remove</span></button>
21+
<button class="ranibtn" id="p1rani"><span class="material-symbols-outlined">crown</span></button>
22+
</div>
23+
24+
<div class="player2" id="player2">
25+
<p>dada</p>
26+
<span id="p2score">0</span>
27+
<button class="decbtn" id="p2dec"><span class="material-icons">remove</span></button>
28+
<button class="ranibtn" id="p2rani"><span class="material-symbols-outlined">crown</span></button>
29+
</div>
30+
31+
<div class="player3" id="player3">
32+
<p>rohan</p>
33+
<span id="p3score">0</span>
34+
<button class="decbtn" id="p3dec"><span class="material-icons">remove</span></button>
35+
<button class="ranibtn" id="p3rani"><span class="material-symbols-outlined">crown</span></button>
36+
</div>
37+
38+
<div class="player4" id="player4">
39+
<p>ma</p>
40+
<span id="p4score">0</span>
41+
<button class="decbtn" id="p4dec"><span class="material-icons">remove</span></button>
42+
<button class="ranibtn" id="p4rani"><span class="material-symbols-outlined">crown</span></button>
43+
</div>
44+
45+
<div class="totaldiv">
46+
<span id="displayedtotal">19</span>
47+
</div>
48+
49+
<div class="bottombar">
50+
51+
<span class="statsbtn" id="statsbtn"><span class="material-icons">bar_chart</span></span>
52+
53+
<span class="resetbtn" id="resetbtn"><span class="material-icons">replay</span></span>
54+
55+
<span class="newbtn" id="newbtn"><span class="material-icons">add</span></span>
56+
</div>
57+
58+
<div class="statwindow" id="statwindow">
59+
60+
<div class="statchild">
61+
62+
<button id="closebtn"><span class="material-icons">close</span></button>
63+
64+
<table id="stattable">
65+
66+
<tr>
67+
<th>Player</th>
68+
<th>Total</th>
69+
<th>Average</th>
70+
</tr>
71+
72+
<tr style="background-color: #fdfd96; color: #000;">
73+
<td>baba</td>
74+
<td id="p1total"></td>
75+
<td id="p1avg"></td>
76+
</tr>
77+
78+
<tr style="background-color: #FFB3BA; color: #000;">
79+
<td>dada</td>
80+
<td id="p2total"></td>
81+
<td id="p2avg"></td>
82+
</tr>
83+
84+
<tr style="background-color: #B8E2B8; color: #000;">
85+
<td>rohan</td>
86+
<td id="p3total"></td>
87+
<td id="p3avg"></td>
88+
</tr>
89+
90+
<tr style="background-color: #A7C6ED; color: #000;">
91+
<td>ma</td>
92+
<td id="p4total"></td>
93+
<td id="p4avg"></td>
94+
</tr>
95+
</table>
96+
97+
<p id="gamesplayed" style="position: absolute; top: 45%; left: 5%;">Games played : 0</p>
98+
99+
<table id="gametable">
100+
101+
<tr id="g1stat">
102+
<td style="background-color: #fdfd96">1</td>
103+
<td style="background-color: #FFB3BA">2</td>
104+
<td style="background-color: #B8E2B8">3</td>
105+
<td style="background-color: #A7C6ED">4</td>
106+
</tr>
107+
108+
<tr id="g2stat">
109+
<td style="background-color: #fdfd96"></td>
110+
<td style="background-color: #FFB3BA"></td>
111+
<td style="background-color: #B8E2B8"></td>
112+
<td style="background-color: #A7C6ED"></td>
113+
</tr>
114+
115+
<tr id="g3stat">
116+
<td style="background-color: #fdfd96"></td>
117+
<td style="background-color: #FFB3BA"></td>
118+
<td style="background-color: #B8E2B8"></td>
119+
<td style="background-color: #A7C6ED"></td>
120+
</tr>
121+
122+
<tr id="g4stat">
123+
<td style="background-color: #fdfd96"></td>
124+
<td style="background-color: #FFB3BA"></td>
125+
<td style="background-color: #B8E2B8"></td>
126+
<td style="background-color: #A7C6ED"></td>
127+
</tr>
128+
129+
<tr id="g5stat">
130+
<td style="background-color: #fdfd96"></td>
131+
<td style="background-color: #FFB3BA"></td>
132+
<td style="background-color: #B8E2B8"></td>
133+
<td style="background-color: #A7C6ED"></td>
134+
</tr>
135+
136+
<tr id="g6stat">
137+
<td style="background-color: #fdfd96"></td>
138+
<td style="background-color: #FFB3BA"></td>
139+
<td style="background-color: #B8E2B8"></td>
140+
<td style="background-color: #A7C6ED"></td>
141+
</tr>
142+
143+
<tr id="g7stat">
144+
<td style="background-color: #fdfd96"></td>
145+
<td style="background-color: #FFB3BA"></td>
146+
<td style="background-color: #B8E2B8"></td>
147+
<td style="background-color: #A7C6ED"></td>
148+
</tr>
149+
</table>
150+
</div>
151+
</div>
152+
153+
<div class="confirmwindow" id="confirmwindow">
154+
155+
<div class="confirmchild">
156+
157+
<p style="padding-top: 5%;">Start a new game?</p>
158+
159+
<button id="nobtn" style="position: absolute; top: 60%; left: 16%;">Cancel</button>
160+
161+
<button id="yesbtn" style="position: absolute; top: 60%; right: 16%;">Yes</button>
162+
</div>
163+
</div>
164+
165+
</body>
166+
167+
<script src="carrom.js"></script>
168+
169+
</html>

‎index.css‎

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
*{
2+
padding: 0;
3+
margin: 0;
4+
}
5+
6+
body{
7+
background-color: #F9E2B3;
8+
font-size: 4rem;
9+
color: #333;
10+
}
11+
12+
#title{
13+
padding-top: 20%;
14+
text-align: center;
15+
font-size: 7rem;
16+
}
17+
18+
.radio {
19+
/* margin: 10px 0; */
20+
/* position: relative; */
21+
}
22+
/* Hide the default radio button */
23+
.radio input {
24+
position: absolute;
25+
opacity: 0;
26+
/* cursor: pointer; */
27+
}
28+
/* Create a custom radio button */
29+
.radio label {
30+
position: relative;
31+
padding-left: 70px;
32+
/* cursor: pointer; */
33+
}
34+
/* Custom radio button design */
35+
.radio label::before {
36+
content: '';
37+
position: absolute;
38+
left: 0;
39+
top: 50%;
40+
transform: translateY(-50%);
41+
width: 50px;
42+
height: 50px;
43+
border: 2px solid #333;
44+
border-radius: 50%;
45+
background-color: white;
46+
}
47+
/* Checked state */
48+
.radio input:checked + label::before {
49+
background-color: #333;
50+
}
51+
/* Optional: Add a dot for checked state */
52+
.radio input:checked + label::after {
53+
content: '';
54+
position: absolute;
55+
left: 7%;
56+
top: 50%;
57+
transform: translateY(-50%);
58+
width: 25px;
59+
height: 25px;
60+
border-radius: 50%;
61+
background-color: white;
62+
/* Adjust dot position and appearance here */
63+
}
64+
65+
#names1v1{
66+
67+
68+
69+
input{
70+
/* outline: none; */
71+
font-size: 4rem;
72+
width: 50%;
73+
}
74+
75+
#p1name{
76+
background-color: #fdfd96;
77+
}
78+
79+
#p2name{
80+
background-color: #FFB3BA;
81+
}
82+
83+
84+
}
85+
86+
#names2v2{
87+
88+
visibility: hidden;
89+
/* display: none; */
90+
91+
input{
92+
/* outline: none; */
93+
font-size: 4rem;
94+
width: 50%;
95+
}
96+
97+
#p3name{
98+
background-color: #B8E2B8;
99+
}
100+
101+
#p4name{
102+
background-color: #A7C6ED;
103+
}
104+
}

0 commit comments

Comments
 (0)