-
Notifications
You must be signed in to change notification settings - Fork 0
/
phoneversion.html
252 lines (222 loc) · 9.25 KB
/
phoneversion.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fine Calculator</title>
<style>
body {
background-color: #121212;
color: #ffffff;
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
flex-direction: column;
padding: 20px;
}
.main-container {
display: flex;
flex-direction: column;
width: 100%;
max-width: 800px;
}
.container {
background-color: #1e1e1e;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
width: 100%;
margin-bottom: 20px;
}
h1 {
text-align: center;
color: #f44336;
}
label, select, button, input {
display: block;
width: 100%;
margin-bottom: 15px;
}
select, button, input {
padding: 10px;
border-radius: 5px;
border: none;
font-size: 16px;
}
select, input {
background-color: #333333;
color: #ffffff;
}
button {
background-color: #f44336;
color: #000000;
cursor: pointer;
transition: background-color 0.3s ease;
}
button:hover {
background-color: #f11906;
}
#result {
font-size: 14px;
margin-top: 10px;
color: #f44336;
height: 20px;
width: 100%;
overflow: hidden;
}
.secondary-color-container {
background-color: #1e1e1e;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
.secondary-color-container h2 {
text-align: center;
font-size: 16px;
color: #f44336;
margin-bottom: 10px;
}
#secondaryColorInput {
background-color: #333333;
color: #ffffff;
}
.indicator {
text-align: center;
margin-bottom: 10px;
}
.indicator img {
max-width: 100%;
}
</style>
</head>
<body>
<div class="main-container">
<div class="container">
<h1>MFP Fine Calculator</h1>
<form id="fineCalculator">
<label for="rank">Rank:</label>
<select id="rank">
<option value="Private - CPL">Private - CPL</option>
<option value="SGT - SSGT">SGT - SSGT</option>
<option value="WO (+CCSG)">WO (+CCSG)</option>
</select>
<label for="offense">Offense:</label>
<select id="offense">
<option value="Treason">Treason</option>
<option value="Conspiracy">Conspiracy</option>
<option value="Gunrunning">Gunrunning</option>
<option value="Murder">Murder</option>
<option value="General Theft">General Theft</option>
<option value="Bounty Theft">Bounty Theft</option>
<option value="Insubordination">Insubordination</option>
<option value="Improper Hat/Mask">Improper Hat/Mask</option>
<option value="Improper Behavior">Improper Behavior</option>
<option value="Disrespect">Disrespect</option>
<option value="Intent">Intent</option>
</select>
<label for="offenseCount">Offense Count:</label>
<select id="offenseCount">
<option value="1">First Offense</option>
<option value="2">Second Offense</option>
<option value="3">Third Offense</option>
<option value="4">Fourth Offense</option>
</select>
<button type="button" onclick="calculateFine()">Calculate Fine</button>
</form>
<h2 id="result"></h2>
</div>
<div class="secondary-color-container">
<div class="indicator">
<span>Due to complaints:</span>
<img src="siteimages/image11.png" alt="Indicator Image">
</div>
<h2>You can now change the secondary color</h2>
<label for="secondaryColorInput">Enter HEX code:</label>
<input type="text" id="secondaryColorInput" placeholder="#f44336">
<button type="button" onclick="changeSecondaryColor()">Apply Color</button>
</div>
</div>
<script>
const fines = {
"Private - CPL": {
"Treason": ["Dishonorable Discharge", "Bar"],
"Conspiracy": ["Dishonorable Discharge", "Bar"],
"Gunnunning": ["Dishonorable Discharge", "Bar"],
"Murder": ["400 Pound Fine", "600 Pound/Log Fine", "Dishonorable Discharge"],
"General Theft": ["200 Pound Fine", "300 Pound/Log Fine", "Dishonorable Discharge"],
"Bounty Theft": ["400 Pound Fine", "600 Pound/Log Fine", "Dishonorable Discharge"],
"Insubordination": ["50 Iron Ingots", "General Discharge", "Dishonorable Discharge"],
"Improper Uniform": ["300 Pound Fine", "400 Pine Logs", "General Discharge", "Dishonorable Discharge"],
"Improper Behavior": ["400 Pound Fine", "400 Pine Logs", "General Discharge", "Dishonorable Discharge"],
"Disrespect": ["300 Pound Fine", "200 Pine Logs", "General Discharge", "Dishonorable Discharge"],
"Intent": ["300 Pound Fine", "200 Pine Logs", "General Discharge", "Dishonorable Discharge"]
},
"SGT - SSGT": {
"Treason": ["Bar"],
"Conspiracy": ["Dishonorable Discharge", "Bar"],
"Gunnunning": ["Dishonorable Discharge", "Bar"],
"Murder": ["1000 Pound Fine", "2000 Pound/1000 Log Fine", "Dishonorable Discharge"],
"General Theft": ["500 Pound Fine", "1000 Pound/500 Log Fine", "Dishonorable Discharge"],
"Bounty Theft": ["1500 Pound Fine", "2000 Pound/800 Log Fine", "Dishonorable Discharge"],
"Insubordination": ["100 Iron Ingots", "DD (2 Week Penal)", "Dishonorable Discharge"],
"Improper Uniform": ["500 Pound Fine", "600 Pine Logs", "General Discharge", "Dishonorable Discharge"],
"Improper Behavior": ["800 Pound Fine", "800 Pine Logs", "General Discharge", "Dishonorable Discharge"],
"Disrespect": ["500 Pound Fine", "600 Pine Logs", "General Discharge", "Dishonorable Discharge"],
},
"WO (+CCSG)": {
"Treason": ["Bar"],
"Conspiracy": ["Dishonorable Discharge", "Bar"],
"Gunnunning": ["Dishonorable Discharge", "Bar"],
"Murder": ["1500 Pound Fine", "3000 Pound/500 Iron Fine", "Dishonorable Discharge"],
"General Theft": ["750 Pound Fine", "1500 Pound/250 Iron Fine", "Dishonorable Discharge"],
"Bounty Theft": ["2000 Pound Fine", "3000 Pound/350 Iron Fine", "Dishonorable Discharge"],
"Insubordination": ["250 Iron Ingots", "DD (2 Week Penal)", "Dishonorable Discharge"],
"Improper Uniform": ["1500 Pound Fine", "100 Iron Ingots", "600 Pine Logs", "Dishonorable Discharge"],
"Improper Behavior": ["2500 Pound Fine", "300 Pine Logs", "600 Pine Logs", "Dishonorable Discharge"],
"Disrespect": ["1500 Pound Fine", "3000 Pound/100 Iron Fine", "600 Pine Logs", "Dishonorable Discharge"],
"Intent": ["1500 Pound Fine", "3000 Pound/100 Iron Fine", "600 Pine Logs", "Dishonorable Discharge"]
}
};
function calculateFine() {
const rank = document.getElementById("rank").value;
const offense = document.getElementById("offense").value;
const offenseCount = document.getElementById("offenseCount").value;
const fine = fines[rank][offense][offenseCount - 1] || "Bar";
document.getElementById("result").innerText = `Fine for ${rank}, ${offense}, ${offenseCount} is: ${fine}`;
}
window.addEventListener('load', applySavedColor);
function changeSecondaryColor() {
const color = document.getElementById("secondaryColorInput").value;
document.documentElement.style.setProperty('--secondary-color', color);
document.querySelectorAll('h1, h2, #result').forEach(element => {
element.style.color = color;
});
document.querySelectorAll('button').forEach(button => {
button.style.backgroundColor = color;
button.style.color = "#000000";
});
saveColorToLocalStorage(color);
}
function saveColorToLocalStorage(color) {
localStorage.setItem('secondaryColor', color);
}
function loadColorFromLocalStorage() {
return localStorage.getItem('secondaryColor');
}
function applySavedColor() {
const savedColor = loadColorFromLocalStorage();
if (savedColor) {
document.getElementById("secondaryColorInput").value = savedColor;
changeSecondaryColor();
}
}
</script>
</body>
</html>