Pernah ngerasa malu pas buka halaman login Roundcube di depan klien? Polos, kusam, kayak halaman error tahun 90-an. Padahal, first impression itu segalanya, bro!
Bayangin kalau login page-mu tiba-tiba berubah jadi layar hijau berkilau ala film The Matrix—hujan kode, efek neon, dan form login melayang di atasnya. Kesan profesional, modern, dan keren langsung nempel!
Yang lebih epic: Kamu nggak perlu install plugin, nggak perlu utak-atik file inti, dan aman dari update Roundcube. Cukup 1 file dan 1 kali copy-paste—beres!
🔥 Langkah Instan: 3 Menit Selesai!
1. Buka File head.html
Lokasi pasti:
/usr/share/roundcube/skins/elastic/includes/head.html(Atau sesuaikan dengan path instalasi Roundcube-mu)
2. Edit dengan sudo (biar aman)
sudo nano /usr/share/roundcube/skins/elastic/includes/head.htmlKalau muncul error permission? Tenang, pakai
sudosudah cukup. Percaya deh, file ini memang didesain untuk dikustom.
3. Tempel Kode Sakti Ini di PALING BAWAH
Salin semua kode di bawah, tempelkan setelah semua isi head.html yang sudah ada.
<style>
/* Canvas latar belakang - tidak mengganggu interaksi */
#matrix-canvas {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
pointer-events: none;
opacity: 0.85;
}
/* Form login jadi transparan dengan efek kaca (glassmorphism) */
#layout-content {
background: rgba(255, 255, 255, 0.88) !important;
backdrop-filter: blur(6px);
border-radius: 20px;
padding: 30px 35px !important;
box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
margin: 6% auto !important;
max-width: 420px !important;
position: relative;
z-index: 1;
transition: all 0.3s ease;
}
/* Mode gelap otomatis */
.dark-mode #layout-content {
background: rgba(20, 22, 30, 0.92) !important;
border: 1px solid rgba(255,255,255,0.1);
}
/* Tombol login melebar */
#login-form .formbuttons .button {
width: 100% !important;
border-radius: 50px !important;
font-weight: bold;
letter-spacing: 1px;
}
/* Efek hover pada form */
#layout-content:hover {
transform: scale(1.01);
box-shadow: 0 12px 60px rgba(0, 0, 0, 0.6);
}
</style>
<canvas id="matrix-canvas"></canvas>
<script>
(function() {
const canvas = document.getElementById('matrix-canvas');
const ctx = canvas.getContext('2d');
let w, h;
function resize() {
w = canvas.width = window.innerWidth;
h = canvas.height = window.innerHeight;
}
resize();
window.addEventListener('resize', resize);
// Karakter keren: angka, huruf, dan simbol Jepang biar makin autentik
const chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZｦｱｲｳｴｵｶｷｸｹｺｻｼｽｾｿﾀﾁﾂﾃﾄﾅﾆﾇﾈﾉﾊﾋﾌﾍﾎﾏﾐﾑﾒﾓﾔﾕﾖﾗﾘﾙﾚﾛﾜﾝ';
const charArray = chars.split('');
const fontSize = 16;
let columns, drops;
function initDrops() {
columns = Math.floor(w / fontSize);
drops = [];
for (let i = 0; i < columns; i++) {
drops[i] = Math.floor(Math.random() * -100);
}
}
initDrops();
function draw() {
// Jejak kabur (trailing effect)
ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
ctx.fillRect(0, 0, w, h);
ctx.font = fontSize + 'px monospace';
for (let i = 0; i < drops.length; i++) {
const char = charArray[Math.floor(Math.random() * charArray.length)];
const brightness = Math.random() * 0.8 + 0.2;
ctx.fillStyle = `rgba(0, ${Math.floor(200 * brightness)}, 0, ${brightness})`;
const x = i * fontSize;
const y = drops[i] * fontSize;
ctx.fillText(char, x, y);
// Reset ke atas setelah mencapai bawah
if (y > h && Math.random() > 0.975) {
drops[i] = 0;
}
drops[i]++;
}
requestAnimationFrame(draw);
}
draw();
window.addEventListener('resize', function() {
resize();
initDrops();
});
})();
</script>4. Simpan & Lihat Hasilnya!
- Nano:
Ctrl+O,Enter,Ctrl+X - Refresh browser dengan
Ctrl+F5(hard refresh)
Tadaa! Sekarang halaman login Roundcube-mu berubah jadi panggung digital yang memukau. Klien pasti bertanya, “Wah, ini webmail canggih dari mana?”
✨ Kenapa Metode Ini Lebih Cerdas?
- ✅ Nggak sentuh file inti → Update Roundcube aman.
- ✅ Nggak pakai plugin → Ringan, cepat, tanpa konflik.
- ✅ Kode ringan & responsif → Jalan mulus di HP, tablet, desktop.
- ✅ Dark mode support → Otomatis menyesuaikan tema.
- ✅ Efek kaca (glass) → Terlihat premium.
🧙♂️ Mau Lebih Gila Lagi? (Bonus)
Kode di atas udah kece, tapi kalau kamu merasa kurang greget, coba utak-atik sedikit:
- Ubah kecepatan hujan – Ganti angka
0.975menjadi0.99(lebih lambat) atau0.95(lebih cepat). - Warna hologram – Ganti
rgba(0, ... )menjadi warna biru atau ungu, misalrgba(0, 150, 255, ...). - Tambahkan logo melayang – Sisipkan tag
<img>di atas form.
Tapi ingat, jangan terlalu rame biar tetap elegan!
🔥 Stop! Jangan Lewatkan!
Kalau kamu suka tutorial kaya gini, ada banyak lagi trik rahasia untuk Roundcube:
- Ganti Background dengan Video Cinematic (biar kayak landing page Apple)
- Pasang Captcha Biar Aman dari Brute Force (tanpa plugin!)
- Buat Halaman Login Multi-Bahasa Otomatis (sesuai browser)
Ikuti Kelas Offlinenya agar bisa lancar jaya bongkar langsung nempel seketika!
