ScamSupport/support.html at main · AnonymousUser98/ScamSupport · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Contact Support</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="style.css">
</head>
<body>

<header>Support Center</header>

<main>

<!-- TICKET -->
<section id="ticket">
	<h1>Contact Support</h1>

	<div id="emailError" class="error hidden">
		Please enter a valid email address.
	</div>

	<div class="status">
		Many issues can be resolved without contacting support. Before you continue, please check our FAQ.
	</div>

	<label>
		Issue category
		<select>
			<option>Account access</option>
			<option>Billing verification</option>
			<option>Security review</option>
			<option>Unexpected restriction</option>
			<option>Other</option>
		</select>
	</label>

	<label>
		Email address
		<input type="email" id="emailInput" placeholder="someone@example.com">
	</label>

	<label>
		Additional details
		<textarea placeholder="Provide any relevant details about the issue."></textarea>
	</label>

	<button onclick="submitTicket()">Continue</button>
</section>

<!-- ARTICLES -->
<section id="articles" class="hidden">
	<h1>Suggested Help Articles</h1>

	<div class="status">
		Based on your issue, we've found some articles that might help. Please review all recommended articles before contacting support.
	</div>

	<div class="article">
		<a href="help-system.html" target="_blank" onclick="markRead(0)">
			Using our new security system
		</a>
		<p>Learn how to protect your account with our new security features.</p>
	</div>

	<div class="article">
		<a href="help-precheck.html" target="_blank" onclick="markRead(1)">
			Steps to take before contacting support
		</a>
		<p>Answers to common problems that you can easily fix yourself.</p>
	</div>

	<div class="article">
		<a href="help-states.html" target="_blank" onclick="markRead(2)">
			Understanding temporary account states
		</a>
		<p>Learn about our different account states and how it affects your service.</p>
	</div>

	<button id="articlesBtn" onclick="acknowledgeArticles()" disabled>
		Continue to support
	</button>
</section>

<!-- WAIT -->
<section id="waiting" class="hidden">
	<h1>Connecting you to support…</h1>
	<div class="status">
		<span class="spinner"></span>
		Locating the next available agent. Please do not refresh.
	</div>
</section>

<!-- CHAT -->
<section id="chat" class="hidden">
	<h1>Live Support Chat</h1>
	<div class="chat" id="chatBox"></div>

	<label>
		Message
		<input type="text" id="chatInput" placeholder="Type here…">
	</label>

	<button onclick="sendMessage()">Send</button>
</section>

<!-- HOLD -->
<section id="hold" class="hidden">
	<h1>Still working on it</h1>
	<div class="status">
		<span class="spinner"></span>
		Your request is being reviewed by a specialist. Please wait...
	</div>

	<label>
		Please confirm your issue so we can help you better:
		<select>
			<option>I can't access my account.</option>
			<option>I'm having a billing issue.</option>
			<option>I'm having a security-related issue.</option>
			<option>There's an unexpected restriction on my account.</option>
			<option>My problem isn't listed.</option>
		</select>
	</label>

	<button onclick="loopBack()">Confirm and go back to chat</button>
</section>

</main>

<script>
const emailInput = document.getElementById("emailInput");
const emailError = document.getElementById("emailError");
const chatBox = document.getElementById("chatBox");
const articlesBtn = document.getElementById("articlesBtn");

let articlesRead = [false, false, false];
let nloop = 0;

function validEmail(email) {
	return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
}

function submitTicket() {
	if (!validEmail(emailInput.value)) {
		emailError.classList.remove("hidden");
		return;
	}
	emailError.classList.add("hidden");
	swap("ticket", "articles");
}

function markRead(index) {
	articlesRead[index] = true;
	if (articlesRead.every(Boolean)) {
		articlesBtn.disabled = false;
	}
}

function acknowledgeArticles() {
	swap("articles", "waiting");
	setTimeout(connectChat, random(20000, 45000));
}

function connectChat() {
	swap("waiting", "chat");
	botSay("SupportBot", "Thanks for your patience. I’m reviewing your request now.");
	setTimeout(() => swap("chat", "hold"), random(15000, 45000));
}

function loopBack() {
	nloop++
	if (nloop >= 3) {
		// SCAMBAITERS: Put your fake support phone number here (replace the generic one on the next 2 lines).
		document.write("Sorry, but we're having problems on our end. Please contact our customer support line at +1 (800) 555-1234 to talk to a support agent.");
		alert("Sorry, but we're having problems on our end. Please contact our customer support line at +1 (800) 555-1234 to talk to a support agent.");
	}
	swap("hold", "waiting");
	setTimeout(connectChat, random(10000, 15000));
}

function sendMessage() {
	const input = document.getElementById("chatInput");
	if (!input.value.trim()) return;
	userSay("You", input.value);
	input.value = "";
	setTimeout(() => {
		botSay("SupportBot", "Thanks for the update. I’m checking that now.");
	}, random(3000, 5000));
}

function botSay(name, text) {
	const div = document.createElement("div");
	div.className = "msg bot";
	div.textContent = name + ": " + text;
	chatBox.appendChild(div);
	chatBox.scrollTop = chatBox.scrollHeight;
}

function userSay(name, text) {
	const div = document.createElement("div");
	div.className = "msg user";
	div.textContent = name + ": " + text;
	chatBox.appendChild(div);
	chatBox.scrollTop = chatBox.scrollHeight;
}

function swap(hide, show) {
	document.getElementById(hide).classList.add("hidden");
	document.getElementById(show).classList.remove("hidden");
}

function random(min, max) {
	return Math.floor(Math.random() * (max - min)) + min;
}

/* ENTER KEY */
document.addEventListener("keydown", e => {
	if (e.key === "Enter") {
		if (!document.getElementById("ticket").classList.contains("hidden")) submitTicket();
		else if (!document.getElementById("articles").classList.contains("hidden") && !articlesBtn.disabled) acknowledgeArticles();
		else if (!document.getElementById("chat").classList.contains("hidden")) sendMessage();
	}
});
</script>

</body>
</html>