brat-api / index.html
FarelDeveloper's picture
Update index.html
c83139c verified
Raw
History Blame Contribute Delete
4.49 kB
<!doctype html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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 {
margin: 0;
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 {
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: 3rem;
margin: 0 0 14px;
background: var(--grad);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
p.desc {
font-size: 1.15rem;
line-height: 1.7;
color: var(--muted);
margin-bottom: 40px;
}
.actions {
display: flex;
gap: 15px;
justify-content: center;
flex-wrap: wrap;
margin-bottom: 50px;
}
.btn {
padding: 14px 28px;
border-radius: 12px;
font-size: 1rem;
cursor: pointer;
border: none;
background: var(--grad);
color: #fff;
transition: 0.25s ease;
}
.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>
<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>
<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>