KoPKB/My-KOPKB
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

DONE: digital card with profile display: WIP: membership condition on letter, is_first_time column in users table

Browse Source
This commit is contained in:
ISMAIL MASSERAN
2026-07-06 09:43:58 +08:00
parent 61345e9cf0
commit ac8f00175a
34 changed files with 1662 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files
be/Modules/User/Resources/Views/digital-card/back.blade.php
+166
View File
@@ -0,0 +1,166 @@
<!DOCTYPE html>
<html lang="ms">
<head>
<meta charset="utf-8">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
width: 840px;
height: 540px;
overflow: hidden;
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.card {
position: relative;
width: 840px;
height: 540px;
overflow: hidden;
border-radius: 16px;
color: #eff6ff;
background: linear-gradient(to bottom right, #1e3a8a, #1e40af, #2563eb);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
outline: 1px solid rgba(255, 255, 255, 0.2);
padding: 24px;
}
.orb-1 {
position: absolute;
right: -48px;
top: -48px;
width: 176px;
height: 176px;
border-radius: 9999px;
background: rgba(255, 255, 255, 0.1);
}
.orb-2 {
position: absolute;
bottom: -64px;
left: -40px;
width: 192px;
height: 192px;
border-radius: 9999px;
background: rgba(255, 255, 255, 0.05);
}
.content {
position: relative;
display: flex;
flex-direction: column;
height: 100%;
min-height: 0;
}
.header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
flex-shrink: 0;
}
.logo {
height: 36px;
width: auto;
filter: brightness(0) invert(1);
}
.badge {
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.18em;
opacity: 0.75;
text-align: right;
}
.main {
display: flex;
flex: 1;
min-height: 0;
align-items: center;
gap: 24px;
margin-top: 20px;
}
.qr-wrap {
flex-shrink: 0;
border-radius: 8px;
background: #ffffff;
padding: 12px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.qr-wrap img {
display: block;
width: 144px;
height: 144px;
}
.info {
display: flex;
min-width: 0;
flex: 1;
flex-direction: column;
justify-content: center;
gap: 20px;
}
.info p {
font-size: 18px;
line-height: 1.375;
opacity: 0.85;
}
.label {
font-size: 14px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.1em;
opacity: 0.6;
}
.member-number {
margin-top: 2px;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
font-size: 36px;
font-weight: 600;
letter-spacing: 0.1em;
}
.footer {
flex-shrink: 0;
margin-top: 16px;
padding-top: 12px;
border-top: 1px solid rgba(255, 255, 255, 0.15);
text-align: center;
}
.footer p {
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.2em;
opacity: 0.5;
}
</style>
</head>
<body>
<div class="card">
<div class="orb-1"></div>
<div class="orb-2"></div>
<div class="content">
<div class="header">
@if ($logoDataUri)
<img src="{{ $logoDataUri }}" alt="" class="logo">
@endif
<div class="badge">Belakang · Kod QR</div>
</div>
<div class="main">
<div class="qr-wrap">
<img src="{{ $qrDataUri }}" alt="Kod QR profil anggota">
</div>
<div class="info">
<p>Imbas untuk sahkan profil anggota MyKOPKB.</p>
<div>
<div class="label">No. Anggota</div>
<div class="member-number">{{ $memberNumber }}</div>
</div>
</div>
</div>
<div class="footer">
<p>Koperasi Permodalan Kelantan Berhad (KOPKB)</p>
</div>
</div>
</div>
</body>
</html>
be/Modules/User/Resources/Views/digital-card/front.blade.php
+214
View File
@@ -0,0 +1,214 @@
<!DOCTYPE html>
<html lang="ms">
<head>
<meta charset="utf-8">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
width: 840px;
height: 540px;
overflow: hidden;
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.card {
position: relative;
width: 840px;
height: 540px;
overflow: hidden;
border-radius: 16px;
color: #eff6ff;
background: linear-gradient(to bottom right, #1e3a8a, #1e40af, #1d4ed8);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
outline: 1px solid rgba(255, 255, 255, 0.2);
padding: 32px;
}
.orb-1 {
position: absolute;
right: -40px;
top: -40px;
width: 192px;
height: 192px;
border-radius: 9999px;
background: rgba(255, 255, 255, 0.1);
}
.orb-2 {
position: absolute;
bottom: -48px;
left: -32px;
width: 208px;
height: 208px;
border-radius: 9999px;
background: rgba(255, 255, 255, 0.05);
}
.avatar {
position: absolute;
top: 50%;
right: 24px;
transform: translateY(-50%);
width: 112px;
height: 112px;
overflow: hidden;
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.25);
background: rgba(255, 255, 255, 0.1);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.avatar img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.avatar-fallback {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.15);
font-size: 18px;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.content {
position: relative;
display: flex;
flex-direction: column;
height: 100%;
min-height: 0;
}
.header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
flex-shrink: 0;
}
.logo {
height: 40px;
width: auto;
filter: brightness(0) invert(1);
}
.badge {
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.2em;
opacity: 0.8;
text-align: right;
}
.main {
display: flex;
flex: 1;
min-height: 0;
flex-direction: column;
justify-content: center;
gap: 16px;
padding: 8px 0;
}
.label {
font-size: 14px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.1em;
opacity: 0.7;
}
.member-number {
margin-top: 2px;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
font-size: 48px;
font-weight: 600;
letter-spacing: 0.15em;
}
.company-block {
min-width: 0;
padding-right: 152px;
}
.company-value {
font-size: 20px;
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.footer {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 12px;
flex-shrink: 0;
padding-top: 16px;
border-top: 1px solid rgba(255, 255, 255, 0.15);
}
.footer-name {
min-width: 0;
flex: 1;
font-size: 24px;
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.footer-type {
flex-shrink: 0;
text-align: right;
font-size: 24px;
font-weight: 600;
}
.footer-sub {
margin-top: 2px;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 0.05em;
opacity: 0.6;
}
</style>
</head>
<body>
<div class="card">
<div class="orb-1"></div>
<div class="orb-2"></div>
<div class="avatar">
@if ($avatarDataUri)
<img src="{{ $avatarDataUri }}" alt="{{ $memberName }}">
@else
<div class="avatar-fallback">{{ $avatarInitials }}</div>
@endif
</div>
<div class="content">
<div class="header">
@if ($logoDataUri)
<img src="{{ $logoDataUri }}" alt="" class="logo">
@endif
<div class="badge">Kad Digital</div>
</div>
<div class="main">
<div>
<div class="label">No. Anggota</div>
<div class="member-number">{{ $memberNumber }}</div>
</div>
<div class="company-block">
<div class="label">Unit</div>
<div class="company-value">{{ $companyName }}</div>
</div>
</div>
<div class="footer">
<div>
<div class="footer-name">{{ $memberName }}</div>
<div class="footer-sub">Nama</div>
</div>
<div>
<div class="footer-type">{{ $memberType }}</div>
<div class="footer-sub">Jenis Anggota</div>
</div>
</div>
</div>
</div>
</body>
</html>