KoPKB/lelong
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: move pelelong berlesen functions to operasi and update login and reports (#4)

Browse Source 
Co-authored-by: nurafrinaalimi16 <nurafrinaalimi16@gmail.com>
Reviewed-on: #4
This commit was merged in pull request #4.
This commit is contained in:
ismailmasseran
2026-10-06 11:26:49 +08:00
parent 56ebb153b5
commit b1d393b1a1
37 changed files with 837 additions and 1318 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/css/login.css
Vendored
+49
View File
@@ -0,0 +1,49 @@
* { box-sizing: border-box; }
:root { --teal: #008e95; --teal-dark: #00686e; --yellow: #ffce1b; --ink: #183b3e; }
body { margin: 0; min-height: 100vh; padding: 48px 28px; display: grid; place-items: center; background: #edf4f3; color: var(--ink); font-family: 'Segoe UI', Arial, sans-serif; }
.login-shell { width: min(1100px, 100%); min-height: 680px; display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; border: 1px solid #dbe7e5; border-radius: 26px; background: white; box-shadow: 0 24px 70px #164f4d12; }
.brand-panel { position: relative; overflow: hidden; padding: 48px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: linear-gradient(145deg, #00969b, #007d84); color: white; }
.brand-logo { position: relative; z-index: 1; width: 250px; max-width: 100%; height: auto; }
.brand-copy { position: relative; z-index: 1; margin: 36px 0; }
.eyebrow { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 11px; font-weight: 700; letter-spacing: 2px; }
.eyebrow span { width: 7px; height: 7px; background: var(--yellow); border-radius: 50%; }
h1 { margin: 22px 0; font-size: clamp(34px, 3.5vw, 48px); line-height: 1.2; font-weight: 650; letter-spacing: -1.8px; }
h1 em { color: var(--yellow); font-style: normal; }
.brand-copy p { max-width: 340px; color: #e2f3f3; font-size: 15px; line-height: 1.85; }
.brand-divider { height: 3px; width: 42px; background: var(--yellow); margin: 30px auto 18px; }
.brand-caption { font-size: 12px; color: #e2f3f3; letter-spacing: .4px; }
.brand-bottom { display: flex; align-items: center; gap: 13px; justify-content: center; margin-top: 32px; position: relative; z-index: 1; font-size: 11px; line-height: 1.65; color: #e2f3f3; }
.brand-mark { width: 37px; height: 37px; display: grid; place-items: center; border: 1px solid #ffffff55; border-radius: 10px; color: var(--yellow); font-size: 17px; font-weight: 700; }
.brand-orbit { position: absolute; width: 420px; height: 420px; bottom: -235px; right: -200px; border: 1px solid #ffffff29; border-radius: 50%; box-shadow: 0 0 0 45px #ffffff06, 0 0 0 90px #ffffff05; }
.form-panel { padding: 70px 56px 28px; display: flex; flex-direction: column; justify-content: center; }
.form-content { width: 100%; margin: auto 0; }
.section-label { color: var(--teal-dark); font-size: 10px; font-weight: 700; letter-spacing: 2px; }
h2 { margin: 14px 0 10px; font-size: 36px; letter-spacing: -1.2px; font-weight: 650; }
.form-intro { margin: 0 0 34px; color: #64797a; font-size: 14px; line-height: 1.7; }
.field { margin-bottom: 22px; }
label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 9px; }
input { width: 100%; height: 52px; border: 1px solid #cfddda; border-radius: 9px; padding: 0 15px; background: #fcfdfd; font: inherit; font-size: 14px; color: var(--ink); }
input::placeholder { color: #7c8f90; }
input:focus { outline: 3px solid #008e9524; border-color: var(--teal); background: white; }
input[aria-invalid="true"] { border-color: #b73131; }
.password-field { position: relative; }
.password-field input { padding-right: 72px; }
button, a { -webkit-tap-highlight-color: transparent; }
.password-toggle { position: absolute; right: 8px; top: 6px; height: 40px; padding: 0 10px; border: 0; border-radius: 6px; color: var(--teal-dark); background: transparent; cursor: pointer; font: inherit; font-size: 12px; font-weight: 600; }
.form-links { display: flex; justify-content: flex-end; margin: -6px 0 25px; }
a { color: var(--teal-dark); font-size: 13px; font-weight: 600; text-decoration: none; }
a:hover { text-decoration: underline; }
button:focus-visible, a:focus-visible { outline: 3px solid var(--teal); outline-offset: 4px; }
.submit-button { width: 100%; display: flex; align-items: center; justify-content: center; gap: 18px; min-height: 52px; border: 0; border-radius: 9px; background: var(--yellow); color: #233f3c; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; transition: background .15s; }
.submit-button:hover { background: #f3c112; }
.submit-button span { font-size: 22px; line-height: 1; }
.form-note { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 26px; color: #718483; font-size: 11px; }
.note-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--teal); }
footer { padding-top: 55px; text-align: center; color: #6a7f7d; font-size: 10px; line-height: 1.7; }
.notice { padding: 13px 15px; border-radius: 8px; margin-bottom: 20px; font-size: 13px; line-height: 1.5; }
.notice-success { background: #e5f5ed; color: #216348; }
.notice-error { background: #fff0ee; color: #a32626; }
.field-error { color: #a32626; font-size: 12px; margin: 8px 0 0; line-height: 1.5; }
@media (max-width: 800px) { body { padding: 24px; } .brand-panel { padding: 34px; } .form-panel { padding: 42px 30px 24px; } h1 { font-size: 36px; } }
@media (max-width: 600px) { body { padding: 18px 14px; } .login-shell { grid-template-columns: 1fr; min-height: auto; border-radius: 20px; } .brand-panel { padding: 28px; } .brand-logo { width: 210px; } .brand-copy { margin: 26px 0 0; } .eyebrow { font-size: 9px; } h1 { font-size: 32px; margin: 15px 0 10px; } .brand-copy p, .brand-divider, .brand-caption, .brand-bottom { display: none; } .form-panel { padding: 32px 26px 24px; } h2 { font-size: 30px; } .form-intro { margin-bottom: 25px; } footer { padding-top: 35px; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }