Skip to content

Commit 15fa1d2

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

File tree

1 file changed

+70
-43
lines changed

1 file changed

+70
-43
lines changed

‎shangchigame.html‎

Lines changed: 70 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -2,101 +2,128 @@
22
<html lang="en">
33
<head>
44
<title>shangchigame.com</title>
5-
<meta charset="UTF-8">
6-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
77
<script src="https://cdn.tailwindcss.com"></script>
8+
<style>
9+
/* Limit gamebox max size but allow full width */
10+
#gamebox {
11+
max-width: 340px;
12+
width: 90vw;
13+
height: auto;
14+
aspect-ratio: 340 / 400;
15+
}
16+
/* Make action buttons smaller on mobile */
17+
.action-btn {
18+
width: 40px !important;
19+
height: 40px !important;
20+
}
21+
/* Toggle buttons scale */
22+
#toggleswitch, #toggleswitch1 {
23+
width: 70px !important;
24+
height: 90px !important;
25+
left: -35px !important;
26+
right: -35px !important;
27+
bottom: 110px !important;
28+
}
29+
</style>
830
</head>
9-
<body class="bg-black text-white p-4 min-h-screen">
10-
<!-- HP Bars in a Flex Row -->
11-
<div class="flex justify-between items-center mb-4 max-w-[340px] mx-auto">
31+
<body class="bg-black text-white p-4 min-h-screen flex items-center justify-center">
32+
<!-- HP Bars -->
33+
<div class="flex justify-between items-center mb-4 max-w-[340px] w-full px-2">
1234
<div class="flex items-center gap-2">
1335
<span class="font-bold">ShangChi:</span>
14-
<meter id="shangchibar" min="0" max="100" value="100" class="w-32 h-3"></meter>
36+
<meter id="shangchibar" min="0" max="100" value="100" class="w-28 h-3"></meter>
1537
<span id="shangchiPercentage" class="ml-2">100</span>
1638
</div>
1739
<div class="flex items-center gap-2">
1840
<span class="font-bold">Wenwu:</span>
1941
<span id="wenvuPercentage">100</span>
20-
<meter id="wenvubar1" min="0" max="100" value="100" class="w-32 h-3"></meter>
42+
<meter id="wenvubar1" min="0" max="100" value="100" class="w-28 h-3"></meter>
2143
</div>
2244
</div>
2345

24-
<!-- Main GameBox Area -->
25-
<div class="relative h-[400px] w-[340px] mx-auto border-2 border-black rounded-md mb-5 overflow-hidden"
26-
style="background:url('https://nagasasank.files.wordpress.com/2024/01/images283929-1.jpeg');background-size:120%;">
46+
<!-- Game area container -->
47+
<div id="gamebox" class="relative border-2 border-black rounded-md mb-5"
48+
style="background:url('https://nagasasank.files.wordpress.com/2024/01/images283929-1.jpeg'); background-size:120%; background-position:center;">
2749
<!-- Characters -->
28-
<div id="shangchi" class="absolute top-[150px] left-[20px] h-[100px] w-[42px]"
50+
<div id="shangchi" class="absolute top-[37.5%] left-[6%] h-[25%] w-[12%]"
2951
style="background:url('https://nagasasank.files.wordpress.com/2024/01/images__34_-removebg-preview.png'); background-size:cover;">
3052
</div>
31-
<div id="wenvu" class="absolute top-[50px] left-[270px] h-[100px] w-[50px]"
53+
<div id="wenvu" class="absolute top-[12.5%] left-[79%] h-[25%] w-[14.5%]"
3254
style="background:url('https://nagasasank.files.wordpress.com/2024/01/img_20240116_094844-removebg-preview28229-1.png'); background-size:110%;">
3355
</div>
3456
<!-- Land -->
35-
<div id="land" class="absolute top-[50px] h-[150px] w-full brightness-80 left-0"
57+
<div id="land" class="absolute top-[12.5%] left-0 w-full h-[37.5%] brightness-80"
3658
style="background:url('https://nagasasank.files.wordpress.com/2024/01/images284029.jpeg'); background-size:contain;">
3759
</div>
3860

39-
<!-- Action Buttons Area (flex centered at bottom) -->
40-
<div class="absolute left-0 bottom-0 w-full flex justify-center gap-3 pb-3 pointer-events-none">
41-
<button id="regs" class="pointer-events-auto bg-red-700 rounded-full w-[48px] h-[48px]"
61+
<!-- Bottom action buttons center aligned -->
62+
<div class="absolute left-0 right-0 bottom-0 flex justify-center gap-2 pb-2 pointer-events-none">
63+
<button id="regs" class="action-btn pointer-events-auto bg-red-700 rounded-full"
4264
style="background:url('https://nagasasank.files.wordpress.com/2024/01/download2817293403331269960801411.jpg'); background-size:110%; background-position:center;">
4365
</button>
44-
<button id="regw" class="pointer-events-auto bg-blue-700 rounded-full w-[48px] h-[48px]"
66+
<button id="regw" class="action-btn pointer-events-auto bg-blue-700 rounded-full"
4567
style="background:url('https://nagasasank.files.wordpress.com/2024/01/download2818295595353980867943226.jpg'); background-size:100%; background-position:center;">
4668
</button>
4769
</div>
48-
<!-- Misc Action Buttons - evenly spaced above -->
49-
<div class="absolute left-0 right-0 bottom-[65px] flex justify-between px-5 pointer-events-none">
50-
<button id="stick" class="pointer-events-auto bg-red-700 rounded-full w-[42px] h-[42px]"
70+
71+
<!-- Misc action buttons positioned above bottom buttons, spaced evenly -->
72+
<div class="absolute left-0 right-0 bottom-[15%] flex justify-between px-5 pointer-events-none">
73+
<button id="stick" class="action-btn pointer-events-auto bg-red-700 rounded-full"
5174
style="background:url('https://nagasasank.files.wordpress.com/2024/01/img_20240115_163452-removebg-preview.png'); background-size:110%;">
5275
</button>
53-
<div class="flex flex-col gap-2">
54-
<button id="ring1" class="pointer-events-auto h-[18px] w-[24px] mt-2"
55-
style="transform:rotate(140deg);background:url('https://nagasasank.files.wordpress.com/2024/01/img_20240115_163452-removebg-preview.png'); background-size:110%;">
76+
<div class="flex flex-col gap-1">
77+
<button id="ring1" class="pointer-events-auto h-[36px] w-[48px]"
78+
style="transform:rotate(140deg); background:url('https://nagasasank.files.wordpress.com/2024/01/img_20240115_163452-removebg-preview.png'); background-size:110%;">
5679
</button>
57-
<button id="rS" class="pointer-events-auto bg-red-700 rounded-full w-[42px] h-[42px] filter hue-rotate-120"
80+
<button id="rS" class="action-btn pointer-events-auto bg-red-700 rounded-full filter hue-rotate-120"
5881
style="background:url('https://nagasasank.files.wordpress.com/2024/01/images__36_-removebg-preview.png'); background-size:150%;">
5982
</button>
60-
<button id="rW" class="pointer-events-auto bg-blue-700 rounded-full w-[42px] h-[42px]"
83+
<button id="rW" class="action-btn pointer-events-auto bg-blue-700 rounded-full"
6184
style="background:url('https://nagasasank.files.wordpress.com/2024/01/images__36_-removebg-preview.png'); background-size:150%;">
6285
</button>
6386
</div>
64-
<div class="flex flex-col gap-2">
65-
<button id="hand" class="pointer-events-auto bg-red-700 rounded-full w-[42px] h-[42px] ml-auto"
87+
<div class="flex flex-col gap-1">
88+
<button id="hand" class="action-btn pointer-events-auto bg-red-700 rounded-full ml-auto"
6689
style="background:url('https://nagasasank.files.wordpress.com/2024/01/2606a63505eb05cba26aa55ab824c8c1.jpg'); background-size:90%; transform:rotate(290deg) rotateX(180deg);">
6790
</button>
68-
<button id="hand1" class="pointer-events-auto bg-blue-700 rounded-full w-[42px] h-[42px] ml-auto"
69-
style="background:url('https://nagasasank.files.wordpress.com/2024/01/8d8140bf5b28d4dffd7950454133c21f.jpg');background-size:100%;">
91+
<button id="hand1" class="action-btn pointer-events-auto bg-blue-700 rounded-full ml-auto"
92+
style="background:url('https://nagasasank.files.wordpress.com/2024/01/8d8140bf5b28d4dffd7950454133c21f.jpg'); background-size:100%;">
7093
</button>
7194
</div>
7295
</div>
73-
<!-- Toggle Controls (Left & Right) -->
74-
<div id="toggleswitch" class="absolute left-[-45px] bottom-[210px] flex flex-col items-center bg-black rounded-full border-2 border-black w-[70px] h-[90px] z-10">
96+
97+
<!-- Left and right toggle button groups -->
98+
<div id="toggleswitch" class="absolute -left-9 bottom-[27.5%] flex flex-col items-center bg-black rounded-full border-2 border-black w-[70px] h-[90px] z-10">
7599
<div class="flex gap-2 mt-2">
76-
<button id="up" class="bg-gray-700 text-white rounded-full px-[10px] py-[4px]">U</button>
77-
<button id="down" class="bg-gray-700 text-white rounded-full px-[10px] py-[4px]">D</button>
100+
<button id="up" class="bg-gray-700 text-white rounded-full px-2 py-1">U</button>
101+
<button id="down" class="bg-gray-700 text-white rounded-full px-2 py-1">D</button>
78102
</div>
79103
<div class="flex gap-2 mb-1">
80-
<button id="right" class="bg-gray-700 text-white rounded-full px-[10px] py-[4px]">R</button>
81-
<button id="left" class="bg-gray-700 text-white rounded-full px-[10px] py-[4px]">L</button>
104+
<button id="right" class="bg-gray-700 text-white rounded-full px-2 py-1">R</button>
105+
<button id="left" class="bg-gray-700 text-white rounded-full px-2 py-1">L</button>
82106
</div>
83-
<div id="toggle" class="w-[32px] h-[32px] rounded-full border-2 border-white mt-1"
84-
style="background:url('https://nagasasank.files.wordpress.com/2024/01/61a680b3b2502989374c6836540dbdc6.jpg');background-size:90%;transform:rotate(290deg) rotateX(180deg);"></div>
107+
<div id="toggle" class="w-8 h-8 rounded-full border-2 border-white mt-1"
108+
style="background:url('https://nagasasank.files.wordpress.com/2024/01/61a680b3b2502989374c6836540dbdc6.jpg'); background-size:90%; transform:rotate(290deg) rotateX(180deg);"></div>
85109
</div>
86-
<div id="toggleswitch1" class="absolute right-[-45px] bottom-[210px] flex flex-col items-center bg-black rounded-full border-2 border-black w-[70px] h-[90px] z-10">
110+
<div id="toggleswitch1" class="absolute -right-9 bottom-[27.5%] flex flex-col items-center bg-black rounded-full border-2 border-black w-[70px] h-[90px] z-10">
87111
<div class="flex gap-2 mt-2">
88-
<button id="up1" class="bg-gray-700 text-white rounded-full px-[10px] py-[4px]">U</button>
89-
<button id="down1" class="bg-gray-700 text-white rounded-full px-[10px] py-[4px]">D</button>
112+
<button id="up1" class="bg-gray-700 text-white rounded-full px-2 py-1">U</button>
113+
<button id="down1" class="bg-gray-700 text-white rounded-full px-2 py-1">D</button>
90114
</div>
91115
<div class="flex gap-2 mb-1">
92-
<button id="right1" class="bg-gray-700 text-white rounded-full px-[10px] py-[4px]">R</button>
93-
<button id="left1" class="bg-gray-700 text-white rounded-full px-[10px] py-[4px]">L</button>
116+
<button id="right1" class="bg-gray-700 text-white rounded-full px-2 py-1">R</button>
117+
<button id="left1" class="bg-gray-700 text-white rounded-full px-2 py-1">L</button>
94118
</div>
95-
<div id="toggle1" class="w-[32px] h-[32px] rounded-full border-2 border-white mt-1"></div>
119+
<div id="toggle1" class="w-8 h-8 rounded-full border-2 border-white mt-1"></div>
96120
</div>
97121
</div>
98122

99123

124+
125+
126+
100127
<script>
101128
document.addEventListener("DOMContentLoaded", function () {
102129
const shangchiDiv = document.getElementById("shangchi");

0 commit comments

Comments
 (0)