-
Notifications
You must be signed in to change notification settings - Fork 2
/
support.html
executable file
·182 lines (178 loc) · 7.6 KB
/
support.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Support - Parking Master 3.0</title>
<style>
@font-face {
font-family: "Modern";
src: url(fonts/GlacialIndifference.ttf);
}
html, body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.heading-1 {
font-size: 40px;
font-family: "Modern", Arial, Helvetica, sans-serif;
}
.heading-2 {
font-size: 35px;
font-family: "Modern", Arial, Helvetica, sans-serif;
}
.center {
text-align: center;
}
.input {
position: relative;
padding: 10px;
width: 30%;
border-radius: 0 !important;
border: 1px solid #000;
left: 50%;
margin-left: -15%;
}
.wrapper-1 {
position: relative;
width: 100%;
background: #eee;
margin: 0;
}
div.section {
position: relative;
background: #fefefe;
display: block;
width: 80%;
left: 10%;
padding: 15px;
margin: 5px;
margin-bottom: 0 !important;
border-bottom: 1px solid #ccc;
cursor: default !important;
}
div.section:hover {
background: #dedede;
}
.help-wrapper {
position: relative;
text-align: center;
width: 20%;
left: 40%;
padding-top: 20px;
}
.help-response {
display: block;
margin: 5px;
padding: 5px;
background: #fff;
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1), 0 1px 4px rgba(0, 0, 0, 0.24);
cursor: pointer;
}
.swal-button {
color: #fff !important;
background: #333 !important;
width: unset !important;
box-shadow: none !important;
}
.swal-content__input {
border: 1px solid #333 !important;
}
.swal-modal {
border-radius: 1px;
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1), 0 1px 4px rgba(0, 0, 0, 0.24);
}
</style>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
</head>
<body>
<h1 class="center heading-1" style="margin-top: 80px">How can we help?</h1>
<input placeholder="Type something here..." class="input">
<div class="help-wrapper"></div>
<br style="margin-bottom: 200px">
<div class="wrapper-1">
<h2 class="center heading-2">FAQ</h2>
<div>
<div class="section" onclick="toggleFAQ(this)">How do I play the game? <span style="float: right; text-align: right">+</span></div>
<p style="display: none; position: relative; background: #f9f9f9; width: 80%; left: 10%; padding: 15px; margin: 5px; margin-top: 0 !important">To play, go to the <b>Main Menu</b> and click <button>PLAY</button> (to play multiplayer, see "How do I use multiplayer?")</p>
</div>
<div>
<div class="section" onclick="toggleFAQ(this)">Is there a store? <span style="float: right; text-align: right">+</span></div>
<p style="display: none; position: relative; background: #f9f9f9; width: 80%; left: 10%; padding: 15px; margin: 5px; margin-top: 0 !important">Yes, there is a store. In The Store, you can purchase New Cars, XP Boosters, different Game Modes, and more! Using completely fake currency.</p>
</div>
<div>
<div class="section" onclick="toggleFAQ(this)">How do I use multiplayer? <span style="float: right; text-align: right">+</span></div>
<p style="display: none; position: relative; background: #f9f9f9; width: 80%; left: 10%; padding: 15px; margin: 5px; margin-top: 0 !important">In multiplayer, you can invite friends, play with random players, or even practice with bots! Go to the <b>Main Menu</b> and click <button>MULTIPLAYER</button>. If you would like to start your own lobby, you can do that via <button>CREATE LOBBY</button> > Enter name, and wait for players to join. Or, if you'd like to just join a game, select <button>VIEW LOBBIES</button> and click an active lobby room.</p>
</div>
<div>
<div class="section" onclick="toggleFAQ(this)">How do I sign up? <span style="float: right; text-align: right">+</span></div>
<p style="display: none; position: relative; background: #f9f9f9; width: 80%; left: 10%; padding: 15px; margin: 5px; margin-top: 0 !important">Signing up is completely free! It's also important if you want to bring your game on the go, and save your rewards and points. Go to the <b>Main Menu</b> and click <button>CUSTOMIZE</button>, and select <u>Log in user</u>. If you just need to log in, you can continue here. If you still want to sign up, click <u>signup instead</u>, then fill in your information.</p>
</div>
<div>
<div class="section" onclick="toggleFAQ(this)">How do I reset my password? <span style="float: right; text-align: right">+</span></div>
<p style="display: none; position: relative; background: #f9f9f9; width: 80%; left: 10%; padding: 15px; margin: 5px; margin-top: 0 !important">Did you forget your password? It's fine, we all do that! You can easily reset by going to <b>Main Menu</b> and clicking <button>CUSTOMIZE</button>, then selecting <u>Log in user</u>. There, you can click <u>Forgot your password?</u> and put in the email you signed up with. In the email, click the link and enter the code and New Password.</p>
</div>
<br>
</div>
<script>
function toggleFAQ(div) {
if (div.nextElementSibling.style.display == "block") {
div.nextElementSibling.style.display = "none";
} else {
div.nextElementSibling.style.display = "block";
}
}
let helpList = {};
fetch("/help.json").then((res) => res.json()).then((e) => {
helpList = e;
});
document.querySelector(".input").addEventListener("keydown", function() {
help();
});
function help() {
let text = document.querySelector(".input").value.toLowerCase().trim();
let responses = [];
let otherResponses = [];
if (!text) return;
Object.keys(helpList).forEach(response => {
otherResponses.push(response);
response = response.toLowerCase().trim();
if (response.startsWith(text)) {
responses.push(response);
}
text.split(" ").forEach(x => {
if ((response.match(new RegExp(x, "g")) || []).length >= 2) {
responses.push(response);
}
});
});
if (responses.length <= 0) {
otherResponses.forEach(x => {
if (x.includes(text)) {
responses.push(x);
}
});
}
responses = [...new Set(responses)];
document.querySelector(".help-wrapper").innerHTML = "";
responses.forEach(x => {
x = x.toLowerCase().split(" ").map(function(word) { return word == "i" ? word[0].toUpperCase() + word.substr(1) : word; }).join(" ");
x = x.charAt(0).toUpperCase() + x.slice(1);
document.querySelector(".help-wrapper").innerHTML += `
<div class="help-response" onclick="extendInfo(this, '${btoa(Object.values(helpList)[Object.keys(helpList).indexOf(x)])}')">${x}</div>
`;
});
}
window.addEventListener("load", function() {
if (location.hash) {
document.querySelector(".input").value = location.hash.split("#").splice(1).join("#");
setTimeout(() => help(true), 100);
}
});
function extendInfo(e, i) {
i = atob(i);
swal(i);
}
</script>
</body>
</html>