Update index.js

index.js

@@ -4,50 +4,19 @@ const { generateIQC } = require("iqc-canvas");
 const app = express();
 const PORT = process.env.PORT || 7860;
 
-app.get("/", async (req, res) => {
-  const { text, time, battery } = req.query;
+/* ============================= */
+/* RAW ENDPOINT /api             */
+/* ============================= */
+app.get("/api", async (req, res) => {
+  try {
+    const { text, time, battery } = req.query;
 
-  // Kalau tidak ada parameter → tampilkan halaman HTML
-  if (!text || !time) {
-    return res.send(`
-      <html>
-        <head>
-          <title>IQC Canvas Generator</title>
-          <style>
-            body {
-              font-family: Arial;
-              background: #0f172a;
-              color: white;
-              text-align: center;
-              padding: 40px;
-            }
-            input, button {
-              padding: 10px;
-              margin: 10px;
-              border-radius: 8px;
-              border: none;
-            }
-            button {
-              background: #22c55e;
-              color: white;
-              cursor: pointer;
-            }
-          </style>
-        </head>
-        <body>
-          <h1>IQC Canvas Generator</h1>
-          <form method="GET">
-            <input type="text" name="text" placeholder="Chat Text" required /><br/>
-            <input type="text" name="time" placeholder="Time (12.30)" required /><br/>
-            <input type="number" name="battery" placeholder="Battery %" value="100"/><br/>
-            <button type="submit">Generate</button>
-          </form>
-        </body>
-      </html>
-    `);
-  }
+    if (!text || !time) {
+      return res.status(400).json({
+        error: 'Gunakan: /api?text=Halo&time=12.30&battery=90'
+      });
+    }
 
-  try {
     const result = await generateIQC(text, time, {
       baterai: [true, battery || "100"],
       operator: true,
@@ -63,6 +32,156 @@ app.get("/", async (req, res) => {
   }
 });
 
+/* ============================= */
+/* UI PREMIUM ROOT /             */
+/* ============================= */
+app.get("/", async (req, res) => {
+
+  res.send(`
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8" />
+<title>IQC Canvas Premium</title>
+
+<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;800&display=swap" rel="stylesheet">
+
+<style>
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: 'Poppins', sans-serif;
+}
+
+body {
+  min-height: 100vh;
+  background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: white;
+}
+
+.container {
+  width: 95%;
+  max-width: 600px;
+  padding: 40px;
+  border-radius: 25px;
+  backdrop-filter: blur(25px);
+  background: rgba(255,255,255,0.05);
+  box-shadow: 0 0 60px rgba(0,0,0,0.6);
+  text-align: center;
+}
+
+h1 {
+  font-size: 28px;
+  font-weight: 800;
+  margin-bottom: 30px;
+  background: linear-gradient(90deg,#00f5ff,#7b2ff7);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+input {
+  width: 100%;
+  padding: 14px;
+  margin: 12px 0;
+  border-radius: 15px;
+  border: none;
+  outline: none;
+  background: rgba(255,255,255,0.1);
+  color: white;
+  font-size: 14px;
+}
+
+button {
+  width: 100%;
+  padding: 14px;
+  margin-top: 15px;
+  border-radius: 15px;
+  border: none;
+  cursor: pointer;
+  font-weight: 600;
+  font-size: 15px;
+  background: linear-gradient(90deg,#00f5ff,#7b2ff7);
+  color: white;
+  transition: 0.3s;
+}
+
+button:hover {
+  transform: scale(1.03);
+  box-shadow: 0 0 25px #7b2ff7;
+}
+
+.preview {
+  margin-top: 30px;
+  display: none;
+}
+
+.preview img {
+  max-width: 100%;
+  border-radius: 20px;
+  box-shadow: 0 0 40px rgba(0,0,0,0.6);
+}
+
+.footer {
+  margin-top: 25px;
+  font-size: 12px;
+  opacity: 0.6;
+}
+</style>
+</head>
+
+<body>
+
+<div class="container">
+  <h1>IQC Canvas Generator</h1>
+
+  <input type="text" id="text" placeholder="Masukkan text chat..." />
+  <input type="text" id="time" placeholder="Waktu (contoh 12.30)" />
+  <input type="number" id="battery" placeholder="Battery %" value="100" />
+
+  <button onclick="generateImage()">Generate Image</button>
+
+  <div class="preview" id="preview">
+    <img id="resultImage"/>
+  </div>
+
+  <div class="footer">
+    Premium UI • Auto Preview • Endpoint /iqc
+  </div>
+</div>
+
+<script>
+async function generateImage() {
+  const text = document.getElementById("text").value;
+  const time = document.getElementById("time").value;
+  const battery = document.getElementById("battery").value;
+
+  if (!text || !time) {
+    alert("Text dan Time wajib diisi!");
+    return;
+  }
+
+  const url = "/api?text=" + encodeURIComponent(text)
+            + "&time=" + encodeURIComponent(time)
+            + "&battery=" + encodeURIComponent(battery);
+
+  const response = await fetch(url);
+  const blob = await response.blob();
+  const imageUrl = URL.createObjectURL(blob);
+
+  document.getElementById("resultImage").src = imageUrl;
+  document.getElementById("preview").style.display = "block";
+}
+</script>
+
+</body>
+</html>
+  `);
+});
+
 app.listen(PORT, () => {
-  console.log(`Server running on port ${PORT}`);
+  console.log("Server running on port " + PORT);
 });