Skip to content

Commit 9add593

Browse files
mrepol742mrepol742
committed
feat: add landing page
- Serve src/components/web/index.html for HTTP requests - Add fs and path imports and send HTML with proper content-type - Add Tailwind-based landing page at src/components/web/index.html - Return 500 on file read errors
1 parent bbaef24 commit 9add593

2 files changed

Lines changed: 166 additions & 2 deletions

File tree

‎src/components/server.ts‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,26 @@
11
import http from "http";
22
import log from "./utils/log";
33
import * as Sentry from "@sentry/node";
4+
import fs from "fs";
5+
import path from "path";
46
import { PORT } from "../config";
57

68
const MAX_PORT_TRIES = 10;
79

810
function startServer(port: number, tries = 0) {
911
const server = http.createServer((req, res) => {
10-
res.writeHead(200, { "Content-Type": "text/plain" });
11-
res.end("Bot is running\n");
12+
const filePath = path.join(__dirname, "web", "index.html");
13+
14+
fs.readFile(filePath, "utf8", (err, data) => {
15+
if (err) {
16+
res.writeHead(500, { "Content-Type": "text/plain" });
17+
res.end("Internal Server Error");
18+
return;
19+
}
20+
21+
res.writeHead(200, { "Content-Type": "text/html" });
22+
res.end(data);
23+
});
1224
});
1325

1426
server.listen(port, () => {

‎src/components/web/index.html‎

Lines changed: 152 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,152 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>Project Canis — WhatsApp Bot</title>
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<script src="https://cdn.tailwindcss.com"></script>
8+
9+
<script>
10+
tailwind.config = {
11+
theme: {
12+
extend: {
13+
colors: {
14+
canis: "#22c55e",
15+
},
16+
},
17+
},
18+
};
19+
</script>
20+
</head>
21+
22+
<body
23+
class="min-h-screen bg-gradient-to-br from-zinc-900 via-black to-zinc-900 text-white flex flex-col"
24+
>
25+
<main class="flex-1 flex items-center justify-center px-6">
26+
<div class="max-w-4xl w-full text-center space-y-8">
27+
<div
28+
class="inline-flex items-center gap-2 px-4 mt-5 py-1.5 rounded-full bg-white/10 border border-white/10 text-sm backdrop-blur"
29+
>
30+
<span
31+
class="w-2 h-2 rounded-full bg-canis animate-pulse"
32+
></span>
33+
Project Canis is alive
34+
</div>
35+
36+
<h1 class="text-4xl sm:text-6xl font-extrabold tracking-tight">
37+
A Smarter
38+
<span class="text-canis">WhatsApp Bot</span><br />
39+
Built for Automation
40+
</h1>
41+
42+
<p class="text-zinc-300 max-w-2xl mx-auto text-lg">
43+
Project Canis is a fast, customizable WhatsApp bot designed
44+
for developers who want full control, clean logic, and zero
45+
fluff.
46+
</p>
47+
48+
<div
49+
class="flex flex-col sm:flex-row gap-4 justify-center pt-4"
50+
>
51+
<a
52+
href="https://github.com/mrepol742/project-canis"
53+
target="_blank"
54+
class="px-8 py-3 rounded-xl bg-canis text-black font-semibold hover:bg-green-400 transition"
55+
>
56+
View on GitHub
57+
</a>
58+
<a
59+
href="https://www.melvinjonesrepol.com/canis-chatbot"
60+
class="px-8 py-3 rounded-xl border border-white/20 hover:bg-white/10 transition"
61+
>
62+
Setup
63+
</a>
64+
</div>
65+
</div>
66+
</main>
67+
68+
<section id="features" class="px-6 pb-24 mt-5">
69+
<div
70+
class="max-w-6xl mx-auto grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6"
71+
>
72+
<div
73+
class="p-6 rounded-2xl bg-white/5 border border-white/10 hover:border-canis/50 transition"
74+
>
75+
<h3 class="text-xl font-semibold mb-2">
76+
⚡ Fast & Lightweight
77+
</h3>
78+
<p class="text-zinc-400">
79+
Minimal overhead. No unnecessary dependencies. Built to
80+
run efficiently.
81+
</p>
82+
</div>
83+
84+
<div
85+
class="p-6 rounded-2xl bg-white/5 border border-white/10 hover:border-canis/50 transition"
86+
>
87+
<h3 class="text-xl font-semibold mb-2">
88+
🧠 Fully Customizable
89+
</h3>
90+
<p class="text-zinc-400">
91+
Modify commands, logic, and flows exactly how you want.
92+
</p>
93+
</div>
94+
95+
<div
96+
class="p-6 rounded-2xl bg-white/5 border border-white/10 hover:border-canis/50 transition"
97+
>
98+
<h3 class="text-xl font-semibold mb-2">
99+
🔌 Easy Integration
100+
</h3>
101+
<p class="text-zinc-400">
102+
Designed to fit into existing systems and APIs with
103+
ease.
104+
</p>
105+
</div>
106+
107+
<div
108+
class="p-6 rounded-2xl bg-white/5 border border-white/10 hover:border-canis/50 transition"
109+
>
110+
<h3 class="text-xl font-semibold mb-2">
111+
🛠 Developer Friendly
112+
</h3>
113+
<p class="text-zinc-400">
114+
Clean structure, readable code, and zero magic.
115+
</p>
116+
</div>
117+
118+
<div
119+
class="p-6 rounded-2xl bg-white/5 border border-white/10 hover:border-canis/50 transition"
120+
>
121+
<h3 class="text-xl font-semibold mb-2">
122+
🔒 Secure by Design
123+
</h3>
124+
<p class="text-zinc-400">
125+
Built with best practices in mind for bot safety and
126+
stability.
127+
</p>
128+
</div>
129+
130+
<div
131+
class="p-6 rounded-2xl bg-white/5 border border-white/10 hover:border-canis/50 transition"
132+
>
133+
<h3 class="text-xl font-semibold mb-2">🚀 Open Source</h3>
134+
<p class="text-zinc-400">
135+
Community-driven and open for contributions.
136+
</p>
137+
</div>
138+
</div>
139+
</section>
140+
141+
<footer
142+
class="border-t border-white/10 py-6 text-center text-zinc-500 text-sm"
143+
>
144+
© <span id="year"></span> Project Canis · Built for developers
145+
</footer>
146+
147+
<script>
148+
document.getElementById("year").textContent =
149+
new Date().getFullYear();
150+
</script>
151+
</body>
152+
</html>

0 commit comments

Comments
 (0)