Skip to content

Commit af9c36c

Browse files
CWXDEVCWXDEV
committed
add html used for mod page
1 parent 109ca52 commit af9c36c

1 file changed

Lines changed: 306 additions & 0 deletions

File tree

‎src/ModPage/ModPage.html‎

Lines changed: 306 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,306 @@
1+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/img-comparison-slider@8/dist/styles.css" />
2+
3+
<style>
4+
.pgap {
5+
margin: 5px 0;
6+
}
7+
8+
.modheader {
9+
font-size: 30px;
10+
}
11+
12+
.modbox {
13+
border: 2px solid gray;
14+
border-radius: 5px;
15+
text-align: center;
16+
margin: 20px;
17+
padding: 10px;
18+
}
19+
20+
div.modbox div.tabs {
21+
overflow: hidden;
22+
border-bottom: 1px solid rgb(62, 68, 70);
23+
padding: 5px;
24+
color: white;
25+
}
26+
27+
div.tabs button {
28+
padding: 8px;
29+
}
30+
31+
div.tabs button.tablink {
32+
background-color: inherit;
33+
border: none !important;
34+
outline: none;
35+
cursor: pointer;
36+
transition: background-color 0.3s;
37+
color: white;
38+
}
39+
40+
div.tabs button.tablink:hover {
41+
background-color: rgb(43, 47, 49) !important;
42+
}
43+
44+
div.tabs button.tablink.active {
45+
background-color: rgb(53, 57, 59) !important;
46+
}
47+
48+
.tabcontent {
49+
display: none;
50+
padding: 20px;
51+
border-top: none;
52+
}
53+
54+
table {
55+
width: 100%;
56+
border-collapse: collapse;
57+
}
58+
59+
table,
60+
th,
61+
td {
62+
border: 1px solid black;
63+
}
64+
65+
th,
66+
td {
67+
padding: 10px;
68+
text-align: left;
69+
}
70+
71+
.modimg {
72+
max-width: 100%;
73+
max-height: 100%;
74+
}
75+
76+
.img-comp-container {
77+
position: relative;
78+
height: 400px;
79+
/*should be the same height as the images*/
80+
}
81+
82+
.img-comp-img {
83+
position: absolute;
84+
width: auto;
85+
height: auto;
86+
overflow: hidden;
87+
}
88+
89+
.img-comp-img img {
90+
display: block;
91+
vertical-align: middle;
92+
}
93+
94+
* {
95+
box-sizing: border-box;
96+
}
97+
98+
.img-comp-slider {
99+
position: absolute;
100+
z-index: 9;
101+
cursor: ew-resize;
102+
/*set the appearance of the slider:*/
103+
width: 40px;
104+
height: 40px;
105+
background-color: #2196F3;
106+
opacity: 0.7;
107+
border-radius: 50%;
108+
}
109+
110+
img-comparison-slider {
111+
max-width: 100%;
112+
max-height: 100%;
113+
}
114+
115+
img-comparison-slider img {
116+
max-width: 100%;
117+
max-height: 100%;
118+
}
119+
120+
.modbox iframe {
121+
display: block;
122+
border: none;
123+
width: 100%;
124+
height: 100%;
125+
min-height: 300px;
126+
max-height: 100%;
127+
padding: 0;
128+
margin: 0;
129+
}
130+
</style>
131+
132+
<div class="modbox">
133+
<p class="pgap modheader" style="text-decoration: underline;">ABOUT</p>
134+
<p class="pgap">I got fed up with maintaining multiple mods, so I combined them into one.</p>
135+
<p class="pgap" style="color: green; text-decoration: underline;">They all start disabled</p>
136+
<p class="pgap modheader" style="color: green;">Use the F12 config menu to turn things on/off and configure.</p>
137+
<p class="pgap">Placeholder images will be updated</p>
138+
</div>
139+
140+
<div class="modbox">
141+
142+
<div class="tabs">
143+
<button class="tablink active" onclick="openTab(event, 'BushWhacker')">BushWhacker</button>
144+
<button class="tablink" onclick="openTab(event, 'GrassCutter')">GrassCutter</button>
145+
<button class="tablink" onclick="openTab(event, 'EnvironmentEnjoyer')">EnvironmentEnjoyer</button>
146+
<button class="tablink" onclick="openTab(event, 'MasterKey')">MasterKey</button>
147+
<button class="tablink" onclick="openTab(event, 'InventoryViewer')">InventoryViewer</button>
148+
<button class="tablink" onclick="openTab(event, 'SpaceUser')">SpaceUser</button>
149+
<button class="tablink" onclick="openTab(event, 'TradingPlayerView')">TradingPlayerView</button>
150+
<button class="tablink" onclick="openTab(event, 'WeatherPatcher')">WeatherPatcher</button>
151+
<button class="tablink" onclick="openTab(event, 'PainkillerDesat')">PainkillerDesat</button>
152+
<button class="tablink" onclick="openTab(event, 'AlarmReplacer')">AlarmReplacer</button>
153+
</div>
154+
155+
<div id="BushWhacker" class="tabcontent" style="display: block;">
156+
<p class="pgap">BushWhacker</p>
157+
<img class="modimg" src="https://i.imgur.com/C5p8gdw.gif" alt="BushWhacker gif">
158+
<p class="pgap">Disables collision with bushes, so you can run through them like the good old days.</p>
159+
</div>
160+
161+
<div id="GrassCutter" class="tabcontent">
162+
<p class="pgap">GrassCutter</p>
163+
<img-comparison-slider>
164+
<img slot="first" src="https://i.imgur.com/vDtjj0k.png">
165+
<img slot="second" src="https://i.imgur.com/GjNTv2s.png">
166+
</img-comparison-slider>
167+
<p class="pgap">Disables Grass from being visable, might help with performance for some.</p>
168+
</div>
169+
170+
<div id="EnvironmentEnjoyer" class="tabcontent">
171+
<p class="pgap">EnvironmentEnjoyer</p>
172+
<img-comparison-slider>
173+
<img slot="first" src="https://i.imgur.com/zdehZ4n.png">
174+
<img slot="second" src="https://i.imgur.com/Q5wIPaM.png">
175+
</img-comparison-slider>
176+
<p class="pgap">Disables Trees and Bushes from being visable, looks mighty weird.</p>
177+
</div>
178+
179+
<div id="MasterKey" class="tabcontent">
180+
<p class="pgap">MasterKey</p>
181+
<img class="modimg" src="https://i.imgur.com/BBmp2yR.gif" alt="MasterKey gif">
182+
<p class="pgap">Disables Trees and Bushes from being visable, looks mighty weird.</p>
183+
</div>
184+
185+
<div id="InventoryViewer" class="tabcontent">
186+
<p class="pgap">InventoryViewer</p>
187+
<img-comparison-slider>
188+
<img slot="first" src="https://i.imgur.com/6G5XXd4.png">
189+
<img slot="second" src="https://i.imgur.com/P5FE5WM.png">
190+
</img-comparison-slider>
191+
<p class="pgap">Debug tool to see everything the corpses have on them (including prison wallet).</p>
192+
</div>
193+
194+
<div id="SpaceUser" class="tabcontent">
195+
<p class="pgap">SpaceUser</p>
196+
<img class="modimg" src="https://i.imgur.com/lqBlUrt.gif" alt="SpaceUser gif">
197+
<p class="pgap">Adds ability to hit space to confirm splitting of stacks and buying from flea.</p>
198+
</div>
199+
200+
<div id="TradingPlayerView" class="tabcontent">
201+
<p class="pgap">TradingPlayerView</p>
202+
<img-comparison-slider>
203+
<img slot="first" src="https://i.imgur.com/jdsVS3u.png">
204+
<img slot="second" src="https://i.imgur.com/l9lm3od.png">
205+
</img-comparison-slider>
206+
<p class="pgap">Removes that stupid ass box that comes up when selling to a trader and you hover a junk box and
207+
it spams you saying items cant be sold.</p>
208+
</div>
209+
210+
<div id="WeatherPatcher" class="tabcontent">
211+
<p class="pgap">WeatherDebugMode</p>
212+
<img-comparison-slider>
213+
<img slot="first" src="https://i.imgur.com/ir7lGm7.png">
214+
<img slot="second" src="https://i.imgur.com/B9wCtBF.png">
215+
</img-comparison-slider>
216+
<p class="pgap">FogRemover</p>
217+
<img-comparison-slider>
218+
<img slot="first" src="https://i.imgur.com/ENfhBEQ.png">
219+
<img slot="second" src="https://i.imgur.com/HknznHs.png">
220+
</img-comparison-slider>
221+
<p class="pgap">WeatherPatcher is split into two.</p>
222+
<p class="pgap">FogRemover - on/off (removes all fog) - including scopes.</p>
223+
<p class="pgap">WeatherDebugMode - on/off (makes weather sunny).</p>
224+
</div>
225+
226+
<div id="PainkillerDesat" class="tabcontent">
227+
<p class="pgap">PainkillerDesat</p>
228+
<img-comparison-slider>
229+
<img slot="first" src="https://i.imgur.com/7rKEDRz.png">
230+
<img slot="second" src="https://i.imgur.com/rJ0cDkG.png">
231+
</img-comparison-slider>
232+
<p class="pgap">Removes all effects with taking painkillers, goldenbalm wiggle effect, desaturation, radial
233+
blur.</p>
234+
</div>
235+
236+
<div id="AlarmReplacer" class="tabcontent">
237+
<p class="pgap">AlarmReplacer</p>
238+
<iframe src="https://www.youtube.com/embed/lIkfWrlpju8" title="" frameborder="0"
239+
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
240+
referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
241+
<p class="pgap">Gives you the ability to replace the alarm with a sound of your choice.</p>
242+
<p class="pgap">Place sound file you want to use in the Bepinex/plugins/CWX/Sounds folder (Currently only supports .WAV files)</p>
243+
<p class="pgap">MUSE BE ENABLED BEFORE ENTERING RAID</p>
244+
</div>
245+
246+
</div>
247+
248+
<div class="modbox">
249+
<p class="pgap modheader" style="text-decoration: underline;">HOW TO INSTALL</p>
250+
<img class="modimg" src="https://i.imgur.com/mZ1aLrW.gif" alt="Install Gif">
251+
</div>
252+
253+
<div class="modbox">
254+
<p class="pgap modheader" style="text-decoration: underline;">LICENSE</p>
255+
<p class="pgap">License allows anyone to use the code, just give credit is all I ask.</p>
256+
</div>
257+
258+
<div class="modbox">
259+
<p class="pgap modheader" style="text-decoration: underline;">TODO:</p>
260+
<p class="pgap">Look into other ways to activate and deactivate gameobjects to avoid stutter.</p>
261+
<p class="pgap">Fix up botmonitor. (use nookies)</p>
262+
</div>
263+
264+
<div class="modbox">
265+
<p class="pgap modheader" style="text-decoration: underline;">SUPPORT</p>
266+
<p class="pgap">If you would like to support me, please consider my Ko-Fi Link:</p>
267+
<a href="https://ko-fi.com/cwxdev">Ko-Fi link for CWX</a>
268+
</div>
269+
270+
<script>
271+
// This is 100% GPT code, im too lazy :)
272+
function openTab(evt, tabName) {
273+
// Declare all variables
274+
let i, tabcontent, tablinks;
275+
276+
// Get all elements with class="tabcontent" and hide them
277+
tabcontent = document.getElementsByClassName("tabcontent");
278+
for (i = 0; i < tabcontent.length; i++) {
279+
tabcontent[i].style.display = "none";
280+
}
281+
282+
// Get all elements with class="tablink" and remove the class "active"
283+
tablinks = document.getElementsByClassName("tablink");
284+
for (i = 0; i < tablinks.length; i++) {
285+
tablinks[i].className = tablinks[i].className.replace(" active", "");
286+
}
287+
288+
// Show the current tab, and add an "active" class to the button that opened the tab
289+
document.getElementById(tabName).style.display = "block";
290+
evt.currentTarget.className += " active";
291+
}
292+
293+
// Set the default open tab
294+
document.addEventListener("DOMContentLoaded", function () {
295+
document.querySelector(".tablink").click();
296+
});
297+
298+
// Get rid of ugly teaser section
299+
let teaser = document.getElementsByClassName("filebaseFileTeaser");
300+
for (let i = 0; i < teaser.length; i++) {
301+
teaser[i].style.display = "none";
302+
}
303+
304+
</script>
305+
306+
<script defer src="https://cdn.jsdelivr.net/npm/img-comparison-slider@8/dist/index.js"></script>

0 commit comments

Comments
 (0)