Update index.html

index.html

@@ -3,63 +3,194 @@
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>Ditss BratX API — Free Text-to-Image</title>
-  <meta name="description" content="Free Brat Text-to-Image API by DitssCloud. Fast, simple, and optimized for developers.">
+  <title>BratX Farel API — Free Text to Image & Video</title>
+
+  <meta name="description" content="BratX Farel API adalah layanan gratis Text-to-Image & Video BRAT style. Cepat, ringan, dan cocok untuk bot, website, dan developer.">
+
   <style>
+    :root {
+      --bg: #0b1025;
+      --card: rgba(255,255,255,0.06);
+      --border: rgba(255,255,255,0.12);
+      --text: #ffffff;
+      --muted: rgba(255,255,255,0.75);
+      --grad: linear-gradient(90deg,#00c6ff,#0072ff);
+    }
+
+    * {
+      box-sizing: border-box;
+    }
+
     body {
-      font-family: Arial, sans-serif;
-      background: #0a0f24;
-      color: #fff;
       margin: 0;
-      padding: 0;
-      text-align: center;
+      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+      background: radial-gradient(circle at top, #121a3a, var(--bg));
+      color: var(--text);
+      min-height: 100vh;
     }
+
     main {
-      padding: 60px 20px;
-      max-width: 700px;
+      max-width: 900px;
       margin: auto;
+      padding: 80px 20px 60px;
+      text-align: center;
     }
+
+    .badge {
+      display: inline-block;
+      padding: 6px 14px;
+      border-radius: 999px;
+      font-size: 0.85rem;
+      background: var(--card);
+      border: 1px solid var(--border);
+      margin-bottom: 20px;
+    }
+
     h1 {
-      font-size: 2.6rem;
-      margin-bottom: 10px;
-      background: linear-gradient(90deg,#00c6ff,#0072ff);
+      font-size: 3rem;
+      margin: 0 0 14px;
+      background: var(--grad);
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
     }
-    p {
-      font-size: 1.1rem;
-      line-height: 1.6;
-      opacity: 0.9;
-      margin-bottom: 35px;
+
+    p.desc {
+      font-size: 1.15rem;
+      line-height: 1.7;
+      color: var(--muted);
+      margin-bottom: 40px;
     }
-    button {
-      background: #0072ff;
-      color: #fff;
-      border: none;
-      padding: 12px 25px;
-      border-radius: 10px;
-      cursor: pointer;
+
+    .actions {
+      display: flex;
+      gap: 15px;
+      justify-content: center;
+      flex-wrap: wrap;
+      margin-bottom: 50px;
+    }
+
+    .btn {
+      padding: 14px 28px;
+      border-radius: 12px;
       font-size: 1rem;
-      transition: 0.25s;
+      cursor: pointer;
+      border: none;
+      background: var(--grad);
+      color: #fff;
+      transition: 0.25s ease;
     }
-    button:hover {
-      background: #005bd1;
-      transform: scale(1.05);
+
+    .btn.secondary {
+      background: transparent;
+      border: 1px solid var(--border);
+    }
+
+    .btn:hover {
+      transform: translateY(-2px) scale(1.04);
+    }
+
+    .cards {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+      gap: 20px;
+      margin-top: 20px;
+    }
+
+    .card {
+      background: var(--card);
+      border: 1px solid var(--border);
+      border-radius: 18px;
+      padding: 22px;
+      text-align: left;
+      backdrop-filter: blur(10px);
+    }
+
+    .card h3 {
+      margin: 0 0 10px;
+      font-size: 1.2rem;
+    }
+
+    .card p {
+      margin: 0;
+      font-size: 0.95rem;
+      color: var(--muted);
+      line-height: 1.6;
+    }
+
+    .code {
+      margin-top: 50px;
+      background: #070b1c;
+      border: 1px solid var(--border);
+      border-radius: 16px;
+      padding: 20px;
+      text-align: left;
+      font-family: monospace;
+      font-size: 0.95rem;
+      overflow-x: auto;
+      color: #b9e4ff;
+    }
+
+    footer {
+      text-align: center;
+      padding: 30px 15px;
+      font-size: 0.85rem;
+      color: rgba(255,255,255,0.55);
     }
   </style>
 </head>
 
 <body>
   <main>
-    <h1>Ditss BratX API</h1>
-    <p>
-      BratX API adalah layanan gratis untuk membuat gambar teks bergaya BRAT
-      secara instan. Dibangun menggunakan FastAPI untuk performa tinggi dan
-      respons super cepat. Cocok untuk pengembang, bot WhatsApp, website,
-      dan aplikasi kreatif lainnya.
+    <div class="badge">🚀 Free & Unlimited API</div>
+
+    <h1>BratX Farel API</h1>
+
+    <p class="desc">
+      BratX Farel API adalah layanan gratis untuk menghasilkan gambar dan video
+      teks bergaya <b>BRAT</b> secara instan. Dibangun dengan FastAPI dan Playwright
+      untuk performa tinggi. Cocok untuk bot WhatsApp, Telegram, website,
+      dan berbagai aplikasi kreatif.
     </p>
 
-    <button onclick="location.href='/docs'">Lihat Dokumentasi</button>
+    <div class="actions">
+      <button class="btn" onclick="location.href='/docs'">Lihat Dokumentasi</button>
+      <button class="btn secondary" onclick="location.href='/api/brat?text=Hello'">Coba API</button>
+    </div>
+
+    <div class="cards">
+      <div class="card">
+        <h3>���� Text to Image</h3>
+        <p>
+          Generate gambar BRAT dari teks secara real-time.
+          Response langsung berupa PNG.
+        </p>
+      </div>
+
+      <div class="card">
+        <h3>🎬 Text to Video</h3>
+        <p>
+          Ubah teks menjadi animasi video BRAT (MP4)
+          tanpa downloader & tanpa delay.
+        </p>
+      </div>
+
+      <div class="card">
+        <h3>⚡ Super Fast</h3>
+        <p>
+          Tanpa rate limit, tanpa auth ribet,
+          siap dipakai publik & developer.
+        </p>
+      </div>
+    </div>
+
+    <div class="code">
+GET /api/brat?text=Halo Dunia<br>
+GET /api/bratvid?text=Halo Dunia
+    </div>
   </main>
+
+  <footer>
+    © 2025 BratX Farel API • Built with FastAPI
+  </footer>
 </body>
 </html>