Skip to content

Commit e6529fa

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

File tree

1 file changed

+62
-59
lines changed

1 file changed

+62
-59
lines changed

‎shangchigame.html‎

Lines changed: 62 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -7,81 +7,84 @@
77
<script src="https://cdn.tailwindcss.com"></script>
88
</head>
99
<body class="overflow-auto bg-black text-white p-4">
10-
1110
<label class="block font-bold mb-1">ShangChi:</label>
1211
<meter id="shangchibar" min="0" max="100" value="100" class="w-2/3 h-3 align-middle"></meter>
1312
<span id="shangchiPercentage" class="ml-2">100</span>
14-
1513
<div id="wenvubar" class="float-right -mt-12 mb-2">
1614
<label class="block font-bold">Wenwu:</label>
1715
<span id="wenvuPercentage">100</span>
1816
<meter id="wenvubar1" min="0" max="100" value="100" class="w-2/3 h-3 align-middle"></meter>
1917
</div>
2018

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%;">
19+
<!-- Absolute UI elements require a relative parent for proper alignment! -->
20+
<div class="relative h-[500px] w-[340px] mx-auto">
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>
2832
</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>
3333

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>
34+
<div class=" absolute left-0 bottom-0 w-full pointer-events-none">
35+
<!-- All action buttons are absolutely positioned within this relative parent -->
36+
<button id="regs" class="pointer-events-auto bg-red-700 rounded-full w-[50px] h-[50px] absolute left-[88px] bottom-[60px]"
37+
style="background:url('https://nagasasank.files.wordpress.com/2024/01/download2817293403331269960801411.jpg'); background-size:110%; background-position:center;">
38+
</button>
39+
<button id="regw" class="pointer-events-auto bg-blue-700 rounded-full w-[50px] h-[50px] absolute left-[150px] bottom-[60px]"
40+
style="background:url('https://nagasasank.files.wordpress.com/2024/01/download2818295595353980867943226.jpg'); background-size:100%; background-position:center;">
41+
</button>
42+
<button id="stick" class="pointer-events-auto bg-red-700 rounded-full w-[50px] h-[50px] absolute left-[30px] bottom-[120px]"
43+
style="background:url('https://nagasasank.files.wordpress.com/2024/01/img_20240115_163452-removebg-preview.png'); background-size:110%;">
44+
</button>
45+
<button id="ring1" class="pointer-events-auto h-[10px] w-[15px] absolute left-[60px] bottom-[150px]"
46+
style="transform:rotate(140deg); background:url('https://nagasasank.files.wordpress.com/2024/01/img_20240115_163452-removebg-preview.png'); background-size:110%;">
47+
</button>
48+
<button id="rS" class="pointer-events-auto bg-red-700 rounded-full w-[50px] h-[50px] absolute right-[160px] bottom-[180px] filter hue-rotate-120"
49+
style="background:url('https://nagasasank.files.wordpress.com/2024/01/images__36_-removebg-preview.png'); background-size:150%;">
50+
</button>
51+
<button id="rW" class="pointer-events-auto bg-blue-700 rounded-full w-[50px] h-[50px] absolute right-[50px] bottom-[180px]"
52+
style="background:url('https://nagasasank.files.wordpress.com/2024/01/images__36_-removebg-preview.png'); background-size:150%;">
53+
</button>
54+
<button id="hand" class="pointer-events-auto bg-red-700 rounded-full w-[50px] h-[50px] absolute right-[5px] bottom-[120px]"
55+
style="background:url('https://nagasasank.files.wordpress.com/2024/01/2606a63505eb05cba26aa55ab824c8c1.jpg'); background-size:90%; transform:rotate(290deg) rotateX(180deg);">
56+
</button>
57+
<button id="hand1" class="pointer-events-auto bg-blue-700 rounded-full w-[50px] h-[50px] absolute left-[240px] bottom-[120px]"
58+
style="background:url('https://nagasasank.files.wordpress.com/2024/01/8d8140bf5b28d4dffd7950454133c21f.jpg'); background-size:100%;">
59+
</button>
3860
</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>
4761

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>
62+
<!-- Place toggles above action bar, below the game area -->
63+
<div id="toggleswitch" class="absolute left-2 bottom-[230px] flex flex-col items-center justify-center bg-black rounded-full border-2 border-black w-[90px] h-[90px] mb-3 z-10">
64+
<div class="flex gap-2 mb-1">
65+
<button id="up" class="bg-gray-700 text-white rounded-full px-3 py-1">U</button>
66+
<button id="down" class="bg-gray-700 text-white rounded-full px-3 py-1">D</button>
67+
</div>
68+
<div class="flex gap-2 mb-1">
69+
<button id="right" class="bg-gray-700 text-white rounded-full px-3 py-1">R</button>
70+
<button id="left" class="bg-gray-700 text-white rounded-full px-3 py-1">L</button>
71+
</div>
72+
<div id="toggle" class="w-[40px] h-[40px] rounded-full border-2 border-white mt-1"
73+
style="background:url('https://nagasasank.files.wordpress.com/2024/01/61a680b3b2502989374c6836540dbdc6.jpg'); background-size:90%; transform:rotate(290deg) rotateX(180deg);"></div>
5274
</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>
75+
<div id="toggleswitch1" class="absolute right-2 bottom-[230px] flex flex-col items-center justify-center bg-black rounded-full border-2 border-black w-[90px] h-[90px] mb-3 z-10">
76+
<div class="flex gap-2 mb-1">
77+
<button id="up1" class="bg-gray-700 text-white rounded-full px-3 py-1">U</button>
78+
<button id="down1" class="bg-gray-700 text-white rounded-full px-3 py-1">D</button>
79+
</div>
80+
<div class="flex gap-2 mb-1">
81+
<button id="right1" class="bg-gray-700 text-white rounded-full px-3 py-1">R</button>
82+
<button id="left1" class="bg-gray-700 text-white rounded-full px-3 py-1">L</button>
83+
</div>
84+
<div id="toggle1" class="w-[40px] h-[40px] rounded-full border-2 border-white mt-1"></div>
5685
</div>
57-
<div id="toggle1" class="w-[40px] h-[40px] rounded-full border-2 border-white mt-1"></div>
58-
</div>
5986

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>
87+
</div>
8588

8689
<script>
8790
document.addEventListener("DOMContentLoaded", function () {

0 commit comments

Comments
 (0)