-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathfaq.html
More file actions
123 lines (123 loc) · 7.18 KB
/
faq.html
File metadata and controls
123 lines (123 loc) · 7.18 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Singapling FAQ</title>
<link rel="stylesheet" href="style.css">
<link rel="icon" href="https://cdn-icons-png.flaticon.com/512/3135/3135715.png">
</head>
<body>
<header style="position:relative;text-align:center;padding-top:1.5rem;">
<span class="badge" style="position:absolute;left:2rem;top:1.2rem;">Beta</span>
<img src="images/SingaplingV2-2.png" alt="Singapling Logo" style="width:140px;height:110px;border-radius:1.5rem;box-shadow:0 2px 12px #7f5af033;object-fit:cover;vertical-align:middle;display:block;margin:0 auto 0.5rem auto;">
<nav style="margin-top:1rem;">
<a href="index.html">Home</a>
<a href="faq.html">FAQ</a>
<a href="pricing.html">Pricing</a>
</nav>
<p style="margin-top:0.5rem;">Singapore's freshest, boldest telco. <span style="color:#ff8906">#StayConnected</span></p>
</header>
<main>
<h2>Frequently Asked Questions</h2>
<div id="faq-list">
<div class="faq-item"><h3>What is Singa-pling?</h3><p>Singa-pling is a leading telecommunications company in Singapore, providing mobile, broadband, and TV services. We are committed to providing seamless connectivity and innovative solutions for your digital lifestyle.</p></div>
<div class="faq-item"><h3>How do I contact Singa-pling customer service?</h3><p>You can reach us at 1800-SINGA (1800-74642) or via live chat on our website.</p></div>
<div class="faq-item"><h3>What are Singa-pling's operating hours?</h3><p>Our customer service hotline is available 24/7.</p></div>
<div class="faq-item"><h3>Where are Singa-pling's retail stores located?</h3><p>Find a store near you using our store locator on the Singa-pling website.</p></div>
<div class="faq-item"><h3>What mobile plans does Singa-pling offer?</h3><p>We offer a variety of mobile plans to suit different needs and budgets. See our Pricing page for details.</p></div>
<div class="faq-item"><h3>What is the coverage like for Singa-pling mobile?</h3><p>We have extensive 4G and 5G coverage across Singapore. Check our coverage map on our website.</p></div>
<div class="faq-item"><h3>How do I check my Singa-pling mobile balance?</h3><p>Dial *100# or check your balance via the My Singa-pling app.</p></div>
<div class="faq-item"><h3>How do I top up my Singa-pling prepaid card?</h3><p>Top up online, at convenience stores, or via AXS machines.</p></div>
<div class="faq-item"><h3>What is Singa-pling's broadband speed?</h3><p>We offer broadband speeds up to 1Gbps.</p></div>
<div class="faq-item"><h3>What types of broadband plans are available?</h3><p>Choose from fiber broadband or wireless broadband plans. See our Pricing page for details.</p></div>
<!-- Add more FAQ items as needed -->
</div>
<section id="chatbot-section" style="margin-top:2.5rem;max-width:500px;margin-left:auto;margin-right:auto;background:#f9fafc;padding:1.5rem 1rem;border-radius:1.2rem;box-shadow:0 2px 12px #7f5af022;">
<h3 style="margin-bottom:1rem;display:flex;align-items:center;gap:0.7rem;">
<img src="images/botlah.png" alt="Botlah the Bot" class="chatbot-avatar"> Ask Singapling AI
</h3>
<div id="chat-messages" style="min-height:60px;margin-bottom:1rem;"></div>
<form id="chat-form" style="display:flex;gap:0.5rem;">
<input id="chat-input" type="text" placeholder="Type your question..." style="flex:1;padding:0.5rem 1rem;border-radius:1rem;border:1px solid #e0e7ff;outline:none;" required />
<button type="submit" style="background:#7f5af0;color:#fff;border:none;border-radius:1rem;padding:0.5rem 1.2rem;font-weight:700;cursor:pointer;">Send</button>
</form>
<div id="chat-error" style="color:#ff3333;font-size:0.95rem;margin-top:0.5rem;"></div>
</section>
<script>
async function query(data) {
// TODO: Replace YOUR_SPACE and YOUR_CHATFLOW_ID with your own values below
const response = await fetch(
"https://iamthesuperiorhy-flowise.hf.space/api/v1/prediction/7bf61931-bd82-47d9-9d33-4a38d19209fa",
{
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify(data)
}
);
const result = await response.json();
return result;
}
function renderMarkdown(md) {
// Basic markdown to HTML conversion for chat (bold, italics, code, line breaks, tables)
let html = md
.replace(/\*\*(.*?)\*\*/g, '<b>$1</b>') // bold
.replace(/\*(.*?)\*/g, '<i>$1</i>') // italics
.replace(/`([^`]+)`/g, '<code>$1</code>') // inline code
.replace(/\n/g, '<br>'); // line breaks
// Table: convert markdown table to HTML table
if (/^\s*\|.*\|/m.test(md)) {
html = html.replace(/((?:^\s*\|.*\|\s*\n?)+)/gm, function(table) {
const rows = table.trim().split(/\n/).filter(Boolean);
if (rows.length < 2) return table; // not a table
const header = rows[0].replace(/\|/g, ' ').trim().split(/\s{2,}/);
const aligns = rows[1];
const bodyRows = rows.slice(2).map(r => r.replace(/\|/g, ' ').trim().split(/\s{2,}/));
let htmlTable = '<table class="chat-table"><thead><tr>';
header.forEach(h => htmlTable += `<th>${h}</th>`);
htmlTable += '</tr></thead><tbody>';
bodyRows.forEach(row => {
htmlTable += '<tr>';
row.forEach(cell => htmlTable += `<td>${cell}</td>`);
htmlTable += '</tr>';
});
htmlTable += '</tbody></table>';
return htmlTable;
});
}
return html;
}
document.addEventListener('DOMContentLoaded', function() {
const form = document.getElementById('chat-form');
const input = document.getElementById('chat-input');
const messages = document.getElementById('chat-messages');
const errorDiv = document.getElementById('chat-error');
form.addEventListener('submit', async (e) => {
e.preventDefault();
const userMsg = input.value.trim();
if (!userMsg) return;
messages.innerHTML += `<div class='chat-msg user'><b>You:</b> ${userMsg}</div>`;
input.value = '';
errorDiv.textContent = '';
try {
messages.innerHTML += `<div class='chat-msg bot' style='color:#888;'>BotLah is typing...</div>`;
const response = await query({"question": userMsg});
let botMsg = response.text || JSON.stringify(response);
messages.innerHTML = messages.innerHTML.replace('BotLah is typing...','');
messages.innerHTML += `<div class='chat-msg bot'><b>BotLah:</b> ${renderMarkdown(botMsg)}</div>`;
messages.scrollTop = messages.scrollHeight;
} catch (err) {
errorDiv.textContent = 'Sorry, there was a problem contacting BotLah.';
}
});
});
</script>
</main>
<footer>
© 2025 Singapling. Not a real telco.
</footer>
<!-- Chatbot embed removed for GitHub Pages compatibility. See README for details. -->
</body>
</html>