Skip to content

Commit c0dee53

Browse files
NSSTUDIO-htmlNSSTUDIO-html
authored
Update shangchigame.html
Signed-off-by: NAGA SASANK <rockingshooters7@gmail.com>
1 parent 2d1a3b5 commit c0dee53

File tree

1 file changed

+82
-295
lines changed

1 file changed

+82
-295
lines changed

‎shangchigame.html‎

Lines changed: 82 additions & 295 deletions
Original file line numberDiff line numberDiff line change
@@ -1,301 +1,88 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
13
<head>
2-
<title>shangchigame.com</title>
3-
<meta charset="UTF-8">
4+
<title>shangchigame.com</title>
5+
<meta charset="UTF-8">
46
<meta name="viewport" content="width=420, initial-scale=1.0">
5-
<style>
6-
7-
body{
8-
overflow:auto;
9-
background:black;
10-
color:white;
11-
}
12-
#gamebox{
13-
height:400px;
14-
width:340px;
15-
border:2px groove black;
16-
position:relative;
17-
bottom:30px;
18-
background:url('https://nagasasank.files.wordpress.com/2024/01/images283929-1.jpeg');
19-
background-size:120%;
20-
}
21-
#wenvubar{
22-
position:relative;
23-
bottom:38px;
24-
}
25-
#land{
26-
background-color:black;
27-
height:150px;
28-
width:340px;
29-
position:relative;
30-
top:50px;
31-
filter: brightness(80%);
32-
background:url('https://nagasasank.files.wordpress.com/2024/01/images284029.jpeg');
33-
background-size:contain;
34-
}
35-
#shangchi{
36-
background-color:red;
37-
height:100px;
38-
width:42px;
39-
position: relative;
40-
top:150px;
41-
left:20px; background:url('https://nagasasank.files.wordpress.com/2024/01/images__34_-removebg-preview.png');
42-
background-size:cover;
43-
}
44-
#wenvu{
45-
background-color:blue;
46-
height:100px;
47-
width:50px;
48-
position: relative;
49-
left:270px;
50-
top:50px;
51-
background:url('https://nagasasank.files.wordpress.com/2024/01/img_20240116_094844-removebg-preview28229-1.png');
52-
background-size:110%;
53-
}
54-
#toggleswitch{
55-
align:center;
56-
height:90px;
57-
width:90px;
58-
background-color:black;
59-
border-radius:50px;
60-
border:2px inset black;
61-
62-
}
63-
#toggle{
64-
height:40px;
65-
width:40px;
66-
background-color:red;
67-
position:relative;
68-
bottom:18px;
69-
left:24px;
70-
border-radius:50px;
71-
border:2px outset white;
72-
background:url('https://nagasasank.files.wordpress.com/2024/01/61a680b3b2502989374c6836540dbdc6.jpg');
73-
background-size:90%;
74-
transform:rotate(290deg) rotateX(180deg);
75-
}
76-
#toggleswitch1{
77-
align:center;
78-
height:90px;
79-
width:90px;
80-
background-color:black;
81-
position:relative;
82-
left:250px;
83-
bottom:90px;
84-
border-radius:50px;
85-
border:2px outset black;
86-
}
87-
button{
88-
color:white;
89-
}
90-
#toggle1{
91-
height:40px;
92-
width:40px;
93-
background-color:blue;
94-
position:relative;
95-
bottom:18px;
96-
left:24px;
97-
border-radius:50px;
98-
border:2px outset black;
99-
background:url('https://nagasasank.files.wordpress.com/2024/01/1e5593242469e837941032af20ae2796.jpg');
100-
background-size:cover;
101-
background-position:left;
102-
transform:rotate(250deg) rotateX(180deg);
103-
}
104-
meter::-webkit-meter-optimum-value {
105-
background: var(--meter-accent-color);
106-
}
107-
#shangchibar{
108-
--meter-accent-color: red;
109-
}
110-
#wenvubar{
111-
--meter-accent-color: blue;
112-
}
113-
#up,#up1{
114-
position:relative;
115-
left:32px;
116-
background:none;
117-
border:none;
118-
}
119-
#down,#down1{
120-
position:relative;
121-
top:70px;
122-
left:8px;
123-
background:none;
124-
border:none;
125-
}
126-
#left,#left1{
127-
position:relative;
128-
top:12px;
129-
right:2px;
130-
background:none;
131-
border:none;
132-
}
133-
#right,#right1{
134-
135-
position:relative;
136-
top:33px;
137-
left:15px;
138-
background:none;
139-
border:none;
140-
}
141-
#stick{
142-
background-color:red;
143-
border-radius:50px;
144-
height:50px;
145-
width:50px;
146-
position:relative;
147-
right:10px;
148-
bottom:140px;
149-
background:url('https://nagasasank.files.wordpress.com/2024/01/images__42_-removebg-preview.png');
150-
background-size:70%;
151-
}
152-
#ring1{
153-
background-color:blue;
154-
border-radius:50px;
155-
height:50px;
156-
width:50px;
157-
position:relative;
158-
left:30px;
159-
bottom:140px;
160-
background:url('https://nagasasank.files.wordpress.com/2024/01/img_20240115_163452-removebg-preview.png');
161-
background-size:110%;
162-
}
163-
#regs{
164-
background-color:red;
165-
border-radius:50px;
166-
height:50px;
167-
width:50px;
168-
position:relative;
169-
left:88px;
170-
bottom:200px;
171-
background:url('https://nagasasank.files.wordpress.com/2024/01/download2817293403331269960801411.jpg');
172-
background-size:110%;
173-
background-position:center;
174-
175-
}
176-
#regw{
177-
background-color:blue;
178-
border-radius:50px;
179-
height:50px;
180-
width:50px;
181-
position:relative;
182-
left:150px;
183-
bottom:200px;
184-
background:url('https://nagasasank.files.wordpress.com/2024/01/download2818295595353980867943226.jpg');
185-
background-size:100%;
186-
background-position:center;
187-
}
188-
#rS{
189-
background-color:red;
190-
border-radius:50px;
191-
height:50px;
192-
width:50px;
193-
position:relative;
194-
right:160px;
195-
bottom:90px;
196-
background:url('https://nagasasank.files.wordpress.com/2024/01/images__36_-removebg-preview.png');
197-
background-size:150%;
198-
filter: hue-rotate(120deg);
199-
}
200-
#rW{
201-
background-color:blue;
202-
border-radius:50px;
203-
height:50px;
204-
width:50px;
205-
position:relative;
206-
right:50px;
207-
bottom:90px;
208-
background:url('https://nagasasank.files.wordpress.com/2024/01/images__36_-removebg-preview.png');
209-
background-size:150%;
210-
}
211-
#hand{
212-
background-color:red;
213-
border-radius:50px;
214-
height:50px;
215-
width:50px;
216-
position:relative;
217-
right:5px;
218-
bottom:140px;
219-
background:url('https://nagasasank.files.wordpress.com/2024/01/2606a63505eb05cba26aa55ab824c8c1.jpg');
220-
background-size:90%;
221-
transform:rotate(290deg) rotateX(180deg);
222-
223-
}
224-
#hand1{
225-
background-color:blue;
226-
border-radius:50px;
227-
height:50px;
228-
width:50px;
229-
position:relative;
230-
left:240px;
231-
bottom:140px;
232-
233-
234-
background:url('https://nagasasank.files.wordpress.com/2024/01/8d8140bf5b28d4dffd7950454133c21f.jpg');
235-
background-size:100%;
236-
}
237-
#ring{
238-
239-
height:10px;
240-
width:15px;
241-
transform:rotate(140deg); background:url('https://nagasasank.files.wordpress.com/2024/01/img_20240115_163452-removebg-preview.png');
242-
background-size:110%;
243-
}
244-
.stick{
245-
246-
height:70px;
247-
width:200px;
248-
background:darkred;
249-
250-
251-
}
252-
.ring-ball{
253-
background:url('https://nagasasank.files.wordpress.com/2024/01/img_20240115_163452-removebg-preview.png');
254-
background-size:cover;
255-
filter:hue-rotate(120deg);
256-
transform:rotate(50deg);
257-
}
258-
.ringball{
259-
background:url('https://nagasasank.files.wordpress.com/2024/01/img_20240115_163452-removebg-preview.png');
260-
background-size:cover;
261-
}
262-
</style>
263-
7+
<script src="https://cdn.tailwindcss.com"></script>
2648
</head>
265-
<body>
266-
<label>ShangChi:</label><br>
267-
<meter id="shangchibar" min="0"max="100"value="100"></meter><span id="shangchiPercentage">100</span>
268-
<div align="right"id="wenvubar">
269-
<label>Wenwu:</label><br>
270-
<span id="wenvuPercentage">100</span>
271-
<meter id="wenvubar1" min="0"max="100"value="100"></meter></div>
272-
<div id="gamebox">
273-
<div id="shangchi"></div>
274-
<div id="wenvu"></div>
275-
<div id="land"></div>
276-
</div>
277-
<div id="toggleswitch">
278-
<button id="up">U</button>
279-
<button id="down">D</button>
280-
<button id="right">R</button>
281-
<button id="left">L</button>
282-
<div id="toggle"></div>
283-
</div>
284-
<div id="toggleswitch1">
285-
<button id="up1">U</button>
286-
<button id="down1">D</button>
287-
<button id="right1">R</button>
288-
<button id="left1">L</button>
289-
<div id="toggle1"></div>
290-
</div>
291-
<button id="regs"></button>
292-
<button id="regw"></button>
293-
<button id="stick"></button>
294-
<button id="ring1"></button>
295-
<button id="rS"></button>
296-
<button id="rW"></button>
297-
<button id="hand"></button>
298-
<button id="hand1"></button>
9+
<body class="overflow-auto bg-black text-white p-4">
10+
11+
<label class="block font-bold mb-1">ShangChi:</label>
12+
<meter id="shangchibar" min="0" max="100" value="100" class="w-2/3 h-3 align-middle"></meter>
13+
<span id="shangchiPercentage" class="ml-2">100</span>
14+
15+
<div id="wenvubar" class="float-right -mt-12 mb-2">
16+
<label class="block font-bold">Wenwu:</label>
17+
<span id="wenvuPercentage">100</span>
18+
<meter id="wenvubar1" min="0" max="100" value="100" class="w-2/3 h-3 align-middle"></meter>
19+
</div>
20+
21+
<div id="gamebox" class="relative h-[400px] w-[340px] border-2 border-black rounded-md mb-4"
22+
style="background:url('https://nagasasank.files.wordpress.com/2024/01/images283929-1.jpeg'); background-size:120%;">
23+
<div id="shangchi" class="absolute top-[150px] left-[20px] h-[100px] w-[42px]"
24+
style="background:url('https://nagasasank.files.wordpress.com/2024/01/images__34_-removebg-preview.png'); background-size:cover;">
25+
</div>
26+
<div id="wenvu" class="absolute top-[50px] left-[270px] h-[100px] w-[50px]"
27+
style="background:url('https://nagasasank.files.wordpress.com/2024/01/img_20240116_094844-removebg-preview28229-1.png'); background-size:110%;">
28+
</div>
29+
<div id="land" class="absolute top-[50px] h-[150px] w-[340px] brightness-80"
30+
style="background:url('https://nagasasank.files.wordpress.com/2024/01/images284029.jpeg'); background-size:contain;">
31+
</div>
32+
</div>
33+
34+
<div id="toggleswitch" class="flex flex-col items-center justify-center bg-black rounded-full border-2 border-black w-[90px] h-[90px] mb-3">
35+
<div class="flex gap-2 mb-1">
36+
<button id="up" class="bg-gray-700 text-white rounded-full px-3 py-1">U</button>
37+
<button id="down" class="bg-gray-700 text-white rounded-full px-3 py-1">D</button>
38+
</div>
39+
<div class="flex gap-2 mb-1">
40+
<button id="right" class="bg-gray-700 text-white rounded-full px-3 py-1">R</button>
41+
<button id="left" class="bg-gray-700 text-white rounded-full px-3 py-1">L</button>
42+
</div>
43+
<div id="toggle" class="w-[40px] h-[40px] rounded-full border-2 border-white mt-1"
44+
style="background:url('https://nagasasank.files.wordpress.com/2024/01/61a680b3b2502989374c6836540dbdc6.jpg'); background-size:90%; transform:rotate(290deg) rotateX(180deg);">
45+
</div>
46+
</div>
47+
48+
<div id="toggleswitch1" class="flex flex-col items-center justify-center bg-black rounded-full border-2 border-black w-[90px] h-[90px] mb-3">
49+
<div class="flex gap-2 mb-1">
50+
<button id="up1" class="bg-gray-700 text-white rounded-full px-3 py-1">U</button>
51+
<button id="down1" class="bg-gray-700 text-white rounded-full px-3 py-1">D</button>
52+
</div>
53+
<div class="flex gap-2 mb-1">
54+
<button id="right1" class="bg-gray-700 text-white rounded-full px-3 py-1">R</button>
55+
<button id="left1" class="bg-gray-700 text-white rounded-full px-3 py-1">L</button>
56+
</div>
57+
<div id="toggle1" class="w-[40px] h-[40px] rounded-full border-2 border-white mt-1"></div>
58+
</div>
59+
60+
<button id="regs" class="bg-red-700 rounded-full w-[50px] h-[50px] absolute left-[88px] -bottom-[200px]"
61+
style="background:url('https://nagasasank.files.wordpress.com/2024/01/download2817293403331269960801411.jpg'); background-size:110%; background-position:center;">
62+
</button>
63+
<button id="regw" class="bg-blue-700 rounded-full w-[50px] h-[50px] absolute left-[150px] -bottom-[200px]"
64+
style="background:url('https://nagasasank.files.wordpress.com/2024/01/download2818295595353980867943226.jpg'); background-size:100%; background-position:center;">
65+
</button>
66+
67+
<button id="stick" class="bg-red-700 rounded-full w-[50px] h-[50px] absolute left-[30px] -bottom-[140px]"
68+
style="background:url('https://nagasasank.files.wordpress.com/2024/01/img_20240115_163452-removebg-preview.png'); background-size:110%;">
69+
</button>
70+
<button id="ring1" class="h-[10px] w-[15px] absolute left-[60px] -bottom-[110px]"
71+
style="transform:rotate(140deg); background:url('https://nagasasank.files.wordpress.com/2024/01/img_20240115_163452-removebg-preview.png'); background-size:110%;">
72+
</button>
73+
<button id="rS" class="bg-red-700 rounded-full w-[50px] h-[50px] absolute right-[160px] -bottom-[90px] filter hue-rotate-120"
74+
style="background:url('https://nagasasank.files.wordpress.com/2024/01/images__36_-removebg-preview.png'); background-size:150%;">
75+
</button>
76+
<button id="rW" class="bg-blue-700 rounded-full w-[50px] h-[50px] absolute right-[50px] -bottom-[90px]"
77+
style="background:url('https://nagasasank.files.wordpress.com/2024/01/images__36_-removebg-preview.png'); background-size:150%;">
78+
</button>
79+
<button id="hand" class="bg-red-700 rounded-full w-[50px] h-[50px] absolute right-[5px] -bottom-[140px]"
80+
style="background:url('https://nagasasank.files.wordpress.com/2024/01/2606a63505eb05cba26aa55ab824c8c1.jpg'); background-size:90%; transform:rotate(290deg) rotateX(180deg);">
81+
</button>
82+
<button id="hand1" class="bg-blue-700 rounded-full w-[50px] h-[50px] absolute left-[240px] -bottom-[140px]"
83+
style="background:url('https://nagasasank.files.wordpress.com/2024/01/8d8140bf5b28d4dffd7950454133c21f.jpg'); background-size:100%;">
84+
</button>
85+
29986
<script>
30087
document.addEventListener("DOMContentLoaded", function () {
30188
const shangchiDiv = document.getElementById("shangchi");

0 commit comments

Comments
 (0)