-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
125 lines (125 loc) · 6.17 KB
/
index.html
File metadata and controls
125 lines (125 loc) · 6.17 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
124
125
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Singapling – Singapore's Newest Telco</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;">
<p style="margin-top:0.5rem;">Singapore's freshest, boldest telco. <span style="color:#ff8906">#StayConnected</span></p>
<nav style="margin-top:1rem;">
<a href="index.html">Home</a>
<a href="faq.html">FAQ</a>
<a href="pricing.html">Pricing</a>
</nav>
</header>
<main>
<h2>Welcome to Singapling!</h2>
<p>Experience next-gen connectivity, exclusive rewards, and a vibe that’s totally <b>you</b>. Join the movement and see why everyone’s switching to Singapling.</p>
<img src="images/GenZMobile.jpeg" alt="Gen Z Mobile" style="width:100%;max-width:400px;display:block;margin:2rem auto 1rem auto;border-radius:1.5rem;box-shadow:0 2px 16px #7f5af033;">
<h3>Why Singapling?</h3>
<ul>
<li>🔥 Superfast 5G & Fiber</li>
<li>🎁 Rewards & exclusive offers</li>
<li>💬 24/7 support (with AI!)</li>
<li>🌱 Eco-friendly & community-driven</li>
</ul>
<h3>AI Chatbot</h3>
<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 src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script>
// TODO: Replace YOUR_SPACE and YOUR_CHATFLOW_ID with your own values below
async function query(data) {
const response = await fetch(
"https://hello-12345-flowise.hf.space/api/v1/prediction/321fac51-f5a1-4ef9-aed8-2d9b53a4ec99",
{
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify(data)
}
);
const result = await response.json();
return result;
}
function renderMarkdown(md) {
// Use marked.js for full markdown support
if (window.marked) {
return window.marked.parse(md);
}
// fallback: basic markdown to HTML conversion
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 (basic)
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. <br> Made for Gen Z.
</footer>
<!-- Chatbot embed removed for GitHub Pages compatibility. See README for details. -->
</body>
</html>