 |
Dalam artikel ini, kita akan membahas pembuatan antarmuka pengguna (UI) untuk aplikasi BRI Merchant menggunakan HTML dan CSS. Artikel ini akan menguraikan bagaimana membangun struktur dasar UI, gaya visual, dan elemen-elemen interaktif seperti kartu transaksi, header, serta elemen bantuan dan notifikasi yang dapat digunakan pada platform merchant BRI.
Pendahuluan
BRI Merchant UI dirancang untuk memberikan pengalaman pengguna yang efisien dan intuitif bagi para merchant BRI yang mengelola transaksi dan layanan mereka melalui aplikasi. Dalam aplikasi ini, merchant dapat melacak jumlah transaksi, melihat status program loyalitas, dan mendapatkan informasi penting lainnya dalam bentuk yang mudah dipahami dan diakses.
Pada artikel ini, kita akan menggunakan HTML dan CSS untuk menciptakan desain dan fungsionalitas dasar dari antarmuka pengguna ini. Semua kode yang akan dibahas adalah murni HTML dan CSS, tanpa menggunakan pustaka eksternal atau JavaScript tambahan, memastikan kesederhanaan dan keterbacaan kode.
Struktur HTML
Untuk membangun antarmuka ini, kita akan mulai dengan struktur HTML yang mencakup elemen-elemen dasar seperti header, kartu transaksi, dan badge (penghargaan). Berikut adalah kode dasar HTML yang akan kita gunakan:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BRI Merchant UI</title>
<style>
/* CSS styles di sini */
</style>
</head>
<body>
<div class="header-container">
<div class="header">
<img src="bri_logo.png" alt="BRI Merchant">
<div class="header-icons">
<div class="notification">🔔 2</div>
<div class="help-button">⚙ Bantuan</div>
</div>
</div>
</div>
<div class="container">
<div class="card">
<p>Total Transaksi</p>
<strong>Hari Ini</strong>
<div class="transaction-card">
<h2>Rp0</h2>
<p>0 transaksi dari 0 outlet</p>
<div class="badge-container">
<div class="badge">🔵 Bronze</div>
<div class="badge">🟡 BRIPoin 0</div>
</div>
</div>
</div>
</div>
</body>
</html>
Penjelasan Struktur HTML
-
Elemen
head: Di dalam elemen<head>, kita menentukan meta tag untuk pengaturan karakter dan viewport. Ini penting agar halaman dapat ditampilkan dengan baik pada berbagai perangkat, terutama perangkat mobile.<meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">Juga, kita menetapkan judul halaman dengan
<title>:<title>BRI Merchant UI</title> -
Elemen
body: Bagian utama dari halaman berada di dalam elemen<body>. Di sinilah kita membangun antarmuka pengguna, yang terdiri dari beberapa bagian:-
Header: Menampilkan logo BRI, ikon notifikasi, dan tombol bantuan.
-
Card: Menampilkan informasi transaksi, dengan total transaksi hari ini dan badge untuk status loyalitas dan poin BRIPoin.
-
Desain Visual dengan CSS
Untuk memastikan desain UI terlihat modern dan menarik, kita akan menggunakan CSS untuk memberi gaya pada elemen-elemen di halaman tersebut. Berikut adalah penjelasan tentang bagaimana kita mengimplementasikan setiap bagian dari gaya CSS:
1. Body Styling
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background: #f8f9fa;
}
Bagian ini menetapkan font yang digunakan dalam halaman (Arial), serta mengatur margin dan padding ke nol untuk menghilangkan spasi default. Background halaman diatur menjadi warna abu-abu muda (#f8f9fa), yang memberikan tampilan bersih dan minimalis.
2. Header Styling
.header-container {
position: relative;
height: 200px;
background: linear-gradient(to right, #87CEEB, white);
display: flex;
align-items: flex-start;
justify-content: space-between;
padding: 15px;
}
Pada bagian header, kita menggunakan gradien biru yang menciptakan efek latar belakang yang menarik. Header disusun menggunakan flexbox untuk memastikan elemen-elemen di dalamnya ditempatkan dengan rapi.
.header img {
height: 20px;
}
Logo BRI ditampilkan dengan ukuran yang konsisten.
.header-icons {
display: flex;
align-items: center;
gap: 10px;
}
Ikon notifikasi dan tombol bantuan diatur untuk berada berdampingan dengan spasi di antaranya.
3. Card Styling
.container {
margin-top: -60px;
position: relative;
z-index: 2;
}
.card {
background: white;
margin: 0 20px 20px;
padding: 15px;
border-radius: 10px;
box-shadow: 0px 2px 5px rgba(0,0,0,0.2);
position: relative;
z-index: 2;
}
Di bagian ini, kita mendefinisikan gaya untuk card yang menampilkan informasi transaksi. Card memiliki background putih, dengan radius sudut yang lembut (10px), dan efek bayangan untuk memberikan tampilan tiga dimensi.
4. Transaction Card Styling
.transaction-card {
background: linear-gradient(to right, #2c3e50, #bdc3c7);
padding: 15px;
border-radius: 10px;
color: white;
position: relative;
}
Card untuk informasi transaksi menggunakan gradien warna biru gelap ke abu-abu, yang membedakannya dari card utama. Teks di dalam card ini diatur agar berwarna putih untuk kontras yang lebih baik.
5. Badge Styling
.badge-container {
display: flex;
gap: 10px;
margin-top: 10px;
}
.badge {
display: flex;
align-items: center;
background: rgba(255, 255, 255, 0.2);
padding: 5px 10px;
border-radius: 5px;
width: fit-content;
}
Badges yang menampilkan status seperti "Bronze" dan "BRIPoin" disusun dalam kontainer dengan jarak antar badge yang seragam. Setiap badge memiliki latar belakang transparan dengan sedikit opacity untuk memberikan efek visual yang ringan.
Elemen Interaktif
Pada desain ini, kita juga mengimplementasikan elemen interaktif, seperti ikon notifikasi dan tombol bantuan yang dapat diklik. Walaupun pada kode ini fungsionalitas JavaScript belum ditambahkan, CSS memungkinkan kita untuk menata elemen-elemen tersebut dengan gaya yang sesuai agar tampak lebih menarik dan responsif.
Misalnya, elemen notifikasi diwakili oleh ikon berbentuk lonceng dan angka di sebelahnya, yang menunjukkan jumlah notifikasi baru. Tombol bantuan bertuliskan "Bantuan" akan muncul di sebelah kanan.
Responsivitas
Untuk memastikan UI ini responsif, kita dapat menambahkan media query untuk menyesuaikan tata letak pada perangkat dengan ukuran layar yang lebih kecil, seperti ponsel.
@media screen and (max-width: 768px) {
.header-container {
flex-direction: column;
align-items: center;
}
.header {
justify-content: center;
}
.card {
margin: 10px;
}
}
Media query ini memastikan bahwa pada layar dengan lebar maksimal 768px, elemen header akan disusun secara vertikal dan card akan memiliki margin yang lebih kecil agar tampil lebih optimal pada perangkat mobile.
Kesimpulan
Dengan menggunakan HTML dan CSS, kita dapat membangun antarmuka pengguna yang bersih dan responsif untuk aplikasi BRI Merchant. Desain ini memungkinkan merchant untuk mengakses informasi transaksi dengan mudah, serta memberikan pengalaman pengguna yang menyenangkan dengan elemen interaktif yang menarik. Artikel ini hanya mencakup dasar-dasar pembangunan UI, dan Anda dapat mengembangkannya lebih lanjut dengan menambahkan JavaScript untuk interaktivitas dan fungsionalitas tambahan.
Dengan pendekatan sederhana namun efektif ini, UI BRI Merchant dapat diimplementasikan dengan mudah dan efisien, memberikan manfaat maksimal bagi merchant dalam memantau transaksi dan program loyalitas mereka.
Rate This Article
Thanks for reading: BRI MERCHANT UI HTML KODE Mirip Banget, Sorry, my English is bad:)
