Skip to content

Instantly share code, notes, and snippets.

@msalmanrafadhlih

msalmanrafadhlih/README.md

Last active July 31, 2026 07:59
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save msalmanrafadhlih/79928d89503c29dd71b0a55fde9cbb42 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save msalmanrafadhlih/79928d89503c29dd71b0a55fde9cbb42 to your computer and use it in GitHub Desktop.
Download ZIP
HTML template kartu biodata bahasa pemrograman.
Raw
README.md

Generate Biodata Bahasa Pemrograman

Prompt ini dirancang atas dasar keingintahuan tentang gambaran besar sebuah bahasa pemrograman, dengan di bumbui interface html yang menarik dan dapat di tampilkan sebagai card component di web pages.

Cara pemakaian:

  • Download kode html di link ini: Atau copy file .html dibawah!
  • Buka Gemini AI
  • Upload file html
  • Set ke mode canvas
  • Paste prompt yang sudah disediakan dibawah ini!
Aku lampirkan file HTML template kartu biodata bahasa pemrograman.

Tugas kamu: isi SEMUA placeholder berformat {{...}} di dalam file itu sesuai data bahasa pemrograman yang aku sebutkan, TANPA mengubah struktur HTML, class, atau CSS apa pun. Kembalikan seluruh isi file HTML yang sudah lengkap terisi (bukan potongan, bukan penjelasan tambahan).

Aturan pengisian:
- {{INISIAL}}: 1-2 huruf inisial nama bahasa (contoh: Rust -> R)
- {{NAMA_BAHASA}}, {{TAHUN_RILIS}}, {{PENCIPTA}}: sesuai fakta bahasa tersebut
- {{DESKRIPSI}}: satu kalimat deskripsi singkat, boleh witty/menarik
- {{MOTTO}}: filosofi utama bahasa ini
- {{CONTOH_KODE}}: contoh kode sederhana (hello world atau sejenisnya), escape karakter < > & jika perlu agar valid HTML
- {{SPESIALISASI}}: kegunaan utama bahasa ini
- {{EXTENSION}}: ekstensi file resmi
- {{SISTEM_TIPE}}: Static/Dynamic & Strong/Weak
- {{KEPRIBADIAN}}: gaya/karakter bahasa ini ditulis 1-2 kalimat, boleh sedikit personifikasi
- {{BINTANG_KESULITAN}}: gunakan simbol ★ dan ☆ total 5 karakter (contoh: ★★★★☆)
- {{PACKAGE_MANAGER}}: alat pengelola paket resmi
- {{URL_DOCS}} dan {{LABEL_DOCS}}: URL resmi dokumentasi/GitHub bahasa ini, dan teks label singkatnya
- {{STAT_PERFORMANCE}}, {{STAT_SAFETY}}, {{STAT_RUNTIME}}, {{STAT_MEMORY}}, {{STAT_COMPILE}}: angka 0-100 sesuai penilaianmu terhadap bahasa ini (isi angka polos tanpa tanda %, karena placeholder yang sama dipakai dua kali: satu untuk lebar bar style="width:{{...}}%" dan satu untuk teks angka — pastikan kedua kemunculan diisi angka yang SAMA)
- {{FRAMEWORK_1}}, {{FRAMEWORK_2}}, {{FRAMEWORK_3}}: 3 framework/library paling terkenal
- {{ROLE_1}}, {{ROLE_2}}, {{ROLE_3}}: kategori platform/penggunaan bahasa ini (pilih dari: General Purpose, Webdev BE/FE, MobileDev, DesktopApps, Data Science, AI/ML, Gamedev, System, Embedded/IoT, Database, Scripting, Automation, Cloud/DevOps/Infrastruktur, Functional Programming, Config, dll). Boleh tambah baris <span class="badge accent">...</span> lagi kalau rolenya lebih dari 3
- {{PROYEK_TERKENAL}}: contoh proyek nyata yang dibangun dengan bahasa ini
- {{POPULARITAS}}: seberapa populer dan siapa saja penggunanya (berdasarkan profesi)
- {{KEUNGGULAN}}: keunggulan utama, 1 kalimat
- {{BATASAN}}: keterbatasan utama, 1 kalimat

NOTE: jangan dulu Generate kode canvasnya sebelum aku sebutkan bahasa pemrograman apa yang aku ingin kamu buatkan!
aku akan sebutkan bahasa pemrogramannya satu per satu, kemudia baru kamu generate file html-nya!
Raw
index.html
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{NAMA_BAHASA}} — Biodata Bahasa Pemrograman</title>
<style>
:root {
--bg: #0d0d0f;
--card-bg: #18181b;
--card-bg-soft: #202024;
--border: #2c2c30;
--text-primary: #f4f4f3;
--text-secondary: #a3a3a0;
--text-muted: #6b6b68;
--accent: #3b82f6;
--accent-bg: rgba(59, 130, 246, 0.14);
--accent-text: #93c5fd;
--success: #22c55e;
--danger: #ef4444;
--radius: 10px;
--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
--font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}
* { box-sizing: border-box; }
body {
margin: 0;
padding: 48px 16px;
background: var(--bg);
font-family: var(--font-sans);
color: var(--text-primary);
display: flex;
justify-content: center;
}
.card {
width: 100%;
max-width: 640px;
background: var(--card-bg);
border: 1px solid var(--border);
border-radius: 16px;
padding: 28px 32px;
}
.label {
display: block;
font-size: 12px;
color: var(--text-muted);
margin-bottom: 4px;
text-transform: uppercase;
letter-spacing: 0.03em;
}
.header {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 16px;
}
.avatar {
flex-shrink: 0;
width: 48px;
height: 48px;
border-radius: 50%;
background: var(--accent-bg);
color: var(--accent-text);
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 16px;
}
.header h1 {
margin: 0;
font-size: 19px;
font-weight: 600;
}
.header h1 .year {
color: var(--text-muted);
font-weight: 400;
font-size: 14px;
}
.creator {
margin: 2px 0 0;
font-size: 13px;
color: var(--text-secondary);
}
.difficulty {
margin-left: auto;
text-align: right;
}
.difficulty .stars {
display: block;
font-size: 15px;
color: var(--accent-text);
}
blockquote {
margin: 0 0 14px;
padding-left: 12px;
border-left: 2px solid var(--border);
font-size: 15px;
font-style: italic;
color: var(--text-secondary);
}
.motto {
font-size: 13px;
color: var(--text-secondary);
margin: 0 0 14px;
}
.motto strong {
color: var(--text-primary);
font-weight: 500;
}
pre {
background: var(--card-bg-soft);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 12px 14px;
overflow-x: auto;
margin: 0 0 18px;
}
pre code {
font-family: var(--font-mono);
font-size: 12.5px;
color: var(--text-primary);
white-space: pre;
}
.grid-2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin-bottom: 18px;
}
.grid-2 p {
margin: 0;
font-size: 13px;
color: var(--text-secondary);
line-height: 1.5;
}
.facts {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
padding: 12px 0;
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
margin-bottom: 18px;
}
.facts p {
margin: 0;
font-size: 13px;
}
.facts a {
color: var(--accent-text);
text-decoration: none;
}
.stats { margin-bottom: 18px; }
.stat-row {
display: grid;
grid-template-columns: 112px 1fr 30px;
align-items: center;
gap: 8px;
font-size: 12px;
margin-top: 6px;
}
.stat-row span:first-child { color: var(--text-secondary); }
.stat-row .val { color: var(--text-muted); text-align: right; }
.bar {
height: 6px;
background: var(--border);
border-radius: 3px;
overflow: hidden;
}
.bar .fill {
height: 6px;
background: var(--accent);
border-radius: 3px;
}
.section { margin-bottom: 18px; }
.badges {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.badge {
font-size: 12px;
padding: 4px 10px;
border-radius: var(--radius);
}
.badge.outline {
border: 1px solid var(--border);
color: var(--text-secondary);
}
.badge.accent {
background: var(--accent-bg);
color: var(--accent-text);
}
.proscons {
border-top: 1px solid var(--border);
padding-top: 16px;
margin-bottom: 0;
}
.proscons .label.success { color: var(--success); text-transform: none; font-size: 13px; }
.proscons .label.danger { color: var(--danger); text-transform: none; font-size: 13px; }
@media (max-width: 480px) {
.card { padding: 22px 18px; }
.grid-2, .facts { grid-template-columns: 1fr 1fr; }
}
</style>
</head>
<body>
<div class="card">
<div class="header">
<div class="avatar">{{INISIAL}}</div>
<div>
<h1>{{NAMA_BAHASA}} <span class="year">({{TAHUN_RILIS}})</span></h1>
<p class="creator">oleh {{PENCIPTA}}</p>
</div>
<div class="difficulty">
<span class="label" style="margin-bottom:2px;">Kesulitan</span>
<span class="stars">{{BINTANG_KESULITAN}}</span>
</div>
</div>
<blockquote>"{{DESKRIPSI}}"</blockquote>
<p class="motto"><strong>Motto:</strong> {{MOTTO}}</p>
<pre><code>{{CONTOH_KODE}}</code></pre>
<div class="grid-2">
<div>
<span class="label">Spesialisasi</span>
<p>{{SPESIALISASI}}</p>
</div>
<div>
<span class="label">Kepribadian</span>
<p>{{KEPRIBADIAN}}</p>
</div>
</div>
<div class="facts">
<div>
<span class="label">Extension</span>
<p>{{EXTENSION}}</p>
</div>
<div>
<span class="label">Sistem tipe</span>
<p>{{SISTEM_TIPE}}</p>
</div>
<div>
<span class="label">Package manager</span>
<p>{{PACKAGE_MANAGER}}</p>
</div>
<div>
<span class="label">Docs / GitHub</span>
<p><a href="{{URL_DOCS}}">{{LABEL_DOCS}}</a></p>
</div>
</div>
<div class="stats">
<span class="label">Stat</span>
<div class="stat-row">
<span>Performance</span>
<div class="bar"><div class="fill" style="width:{{STAT_PERFORMANCE}}%"></div></div>
<span class="val">{{STAT_PERFORMANCE}}</span>
</div>
<div class="stat-row">
<span>Safety</span>
<div class="bar"><div class="fill" style="width:{{STAT_SAFETY}}%"></div></div>
<span class="val">{{STAT_SAFETY}}</span>
</div>
<div class="stat-row">
<span>Runtime speed</span>
<div class="bar"><div class="fill" style="width:{{STAT_RUNTIME}}%"></div></div>
<span class="val">{{STAT_RUNTIME}}</span>
</div>
<div class="stat-row">
<span>Memory safety</span>
<div class="bar"><div class="fill" style="width:{{STAT_MEMORY}}%"></div></div>
<span class="val">{{STAT_MEMORY}}</span>
</div>
<div class="stat-row">
<span>Compile time</span>
<div class="bar"><div class="fill" style="width:{{STAT_COMPILE}}%"></div></div>
<span class="val">{{STAT_COMPILE}}</span>
</div>
</div>
<div class="section">
<span class="label">Framework / library</span>
<div class="badges">
<span class="badge outline">{{FRAMEWORK_1}}</span>
<span class="badge outline">{{FRAMEWORK_2}}</span>
<span class="badge outline">{{FRAMEWORK_3}}</span>
</div>
</div>
<div class="section">
<span class="label">Role</span>
<div class="badges">
<span class="badge accent">{{ROLE_1}}</span>
<span class="badge accent">{{ROLE_2}}</span>
<span class="badge accent">{{ROLE_3}}</span>
<!-- tambah/kurangi <span class="badge accent">{{ROLE_N}}</span> sesuai kebutuhan -->
</div>
</div>
<div class="grid-2">
<div>
<span class="label">Proyek terkenal</span>
<p>{{PROYEK_TERKENAL}}</p>
</div>
<div>
<span class="label">Popularitas</span>
<p>{{POPULARITAS}}</p>
</div>
</div>
<div class="grid-2 proscons">
<div>
<span class="label success">✓ Keunggulan</span>
<p>{{KEUNGGULAN}}</p>
</div>
<div>
<span class="label danger">✕ Batasan</span>
<p>{{BATASAN}}</p>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment