Add new assets and HTML structure for Lupmis 2.0 Design Guidelines

- Created new JavaScript files for map pin, search, and user icons.
- Added index.html with basic structure and linked assets.
- Included vite.svg for the favicon.

README.md

@@ -0,0 +1,35 @@
+# Lupmis 2.0 Design Guidelines
+
+This repository contains the design guideline for Lupmis 2.0. It is intended to give product, design, and engineering teams a shared reference for the visual language, interface patterns, and usability principles used across the platform.
+
+The guide is intentionally practical: it shows how the system should feel in real product contexts, including dashboards, consumer-facing screens, GIS/map experiences, shared components, and usability examples informed by Nielsen heuristics.
+
+## Purpose
+
+Use this guide as a common source of direction when designing, reviewing, or implementing Lupmis 2.0 interfaces. It helps align decisions around layout, component behavior, accessibility, consistency, information hierarchy, and overall product quality.
+
+The goal is not to document every implementation detail. Instead, the guide provides a general design foundation that teams can apply across new and existing product surfaces.
+
+## What Is Included
+
+- Design system overview and component examples
+- Common interface patterns for operational workflows
+- Dashboard and analytics layout references
+- Consumer portal examples
+- GIS and map-based interface examples
+- Usability guidance based on Nielsen heuristics
+- Visual assets used by the guideline experience
+
+## Using The Guide
+
+Open `index.html` in a browser to view the compiled guideline experience.
+
+## Recommended Use
+
+Refer to this guide when:
+
+- Starting a new Lupmis 2.0 feature or screen
+- Reviewing interface consistency across modules
+- Aligning designers and developers on expected behavior
+- Checking whether a UI follows established product patterns
+- Evaluating usability, clarity, and accessibility concerns

assets/ConsumerPortal-Q9gDSGOS.js

@@ -0,0 +1,15 @@
+import{c as i,r as a,j as e,O as u,F as r,i as p}from"./index-mUEXKEer.js";import{C as f}from"./NielsenHeuristics-d7HCIgJi.js";import{E as v}from"./eye-off-Dznbbs9G.js";import{E as b}from"./eye-QHwXAkqY.js";const j=[["rect",{width:"18",height:"11",x:"3",y:"11",rx:"2",ry:"2",key:"1w4ew1"}],["path",{d:"M7 11V7a5 5 0 0 1 10 0v4",key:"fwvmzm"}]],N=i("lock",j);const w=[["path",{d:"m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7",key:"132q7q"}],["rect",{x:"2",y:"4",width:"20",height:"16",rx:"2",key:"izxlao"}]],y=i("mail",w),S="/assets/37fe2c33-dfa4-444f-ad03-9a34352949b1-y7FspjyH.png",k="/assets/1957d89d-66c1-44ae-9846-275775a01370-BriPJkGk.png",z="/assets/6ce4573d-ef2d-4e32-87cf-d487acd1da19-DlLBxN1D.png",L="/assets/c12cadb8-101e-4bdc-9b80-78449fafda2f-C5fJKt8t.png",I=()=>{const[n,c]=a.useState(""),[d,m]=a.useState(""),[s,x]=a.useState(!1),[o,l]=a.useState(!1),h=async t=>{t.preventDefault(),l(!0),setTimeout(()=>{alert(`Login attempted with username: ${n}`),l(!1)},1e3)},g=()=>{alert("Account request form will open")};return e.jsx("div",{className:"min-h-screen bg-muted/30 flex items-center justify-center p-8",children:e.jsxs("div",{className:"w-full max-w-7xl",children:[e.jsxs("div",{className:"grid grid-cols-1 lg:grid-cols-2 gap-8 mb-12",children:[e.jsxs("div",{className:"bg-gradient-to-br from-brand-blue-light/20 to-brand-blue-strong/10 rounded-xl p-10 relative overflow-hidden border border-border",children:[e.jsx("div",{className:"absolute top-4 right-4 opacity-5",children:e.jsx(u,{size:200,color:"var(--brand-blue-strong)"})}),e.jsx("div",{className:"relative rounded-lg overflow-hidden mb-6 shadow-lg",children:e.jsx("img",{src:S,alt:"Ghana map showing land use planning zones",className:"w-full h-auto object-cover"})}),e.jsxs("div",{className:"relative z-10",children:[e.jsx("h1",{className:"mb-4 text-brand-blue-strong",children:"Welcome to LUPMIS"}),e.jsx("p",{className:"text-[length:var(--text-md)] text-foreground/80 leading-relaxed",children:"The Land Use Planning Management Information System provides citizens with access to spatial planning information, application tracking, and land use services. Empowering communities through transparent and accessible planning data."}),e.jsxs("div",{className:"mt-6 space-y-3",children:[e.jsxs("div",{className:"flex items-start gap-3",children:[e.jsx(r,{size:20,color:"var(--brand-green-bright)",className:"mt-1 shrink-0"}),e.jsxs("p",{className:"text-[length:var(--text-sm)] text-foreground/70",children:[e.jsx("strong",{className:"text-foreground",children:"Track Applications:"})," Monitor your planning application status in real-time"]})]}),e.jsxs("div",{className:"flex items-start gap-3",children:[e.jsx(r,{size:20,color:"var(--brand-orange-warm)",className:"mt-1 shrink-0"}),e.jsxs("p",{className:"text-[length:var(--text-sm)] text-foreground/70",children:[e.jsx("strong",{className:"text-foreground",children:"Access Information:"})," View zoning regulations and land use plans"]})]}),e.jsxs("div",{className:"flex items-start gap-3",children:[e.jsx(r,{size:20,color:"var(--brand-blue-strong)",className:"mt-1 shrink-0"}),e.jsxs("p",{className:"text-[length:var(--text-sm)] text-foreground/70",children:[e.jsx("strong",{className:"text-foreground",children:"Submit Requests:"})," Apply for planning permits and services online"]})]})]})]})]}),e.jsx("div",{className:"flex items-center justify-center",children:e.jsxs("div",{className:"w-full max-w-md space-y-8",children:[e.jsxs("div",{className:"flex items-center justify-center gap-8",children:[e.jsx("img",{src:p,alt:"LUSPA - Land Use and Spatial Planning Authority",className:"h-32 w-auto object-contain"}),e.jsx("img",{src:k,alt:"Ministry of Local Government and Rural Development",className:"h-32 w-auto object-contain"})]}),e.jsxs("div",{className:"bg-card rounded-xl border border-border shadow-lg p-8",children:[e.jsx("h2",{className:"mb-6 text-center",children:"Login"}),e.jsxs("form",{onSubmit:h,className:"space-y-6",children:[e.jsxs("div",{className:"space-y-2",children:[e.jsx("label",{htmlFor:"username",className:"block text-[length:var(--text-sm)] font-[weight:var(--font-weight-medium)] text-foreground",children:"Username"}),e.jsxs("div",{className:"relative",children:[e.jsx("div",{className:"absolute left-0 top-0 bottom-0 w-12 bg-muted border-r border-border rounded-l-lg flex items-center justify-center",children:e.jsx(y,{size:18,className:"text-muted-foreground"})}),e.jsx("input",{id:"username",type:"text",value:n,onChange:t=>c(t.target.value),placeholder:"johndoe@email.com",className:`
+                          w-full pl-14 pr-4 py-3 
+                          bg-background border border-border rounded-lg
+                          text-[length:var(--text-sm)] text-foreground
+                          placeholder:text-muted-foreground
+                          focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent
+                          transition-all
+                        `,required:!0})]}),e.jsx("p",{className:"text-[length:var(--text-xs)] text-muted-foreground",children:"Enter your registered email address"})]}),e.jsxs("div",{className:"space-y-2",children:[e.jsx("label",{htmlFor:"password",className:"block text-[length:var(--text-sm)] font-[weight:var(--font-weight-medium)] text-foreground",children:"Password"}),e.jsxs("div",{className:"relative",children:[e.jsx("div",{className:"absolute left-4 top-1/2 -translate-y-1/2",children:e.jsx(N,{size:18,className:"text-muted-foreground"})}),e.jsx("input",{id:"password",type:s?"text":"password",value:d,onChange:t=>m(t.target.value),placeholder:"Enter your password",className:`
+                          w-full pl-12 pr-12 py-3 
+                          bg-background border border-border rounded-lg
+                          text-[length:var(--text-sm)] text-foreground
+                          placeholder:text-muted-foreground
+                          focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent
+                          transition-all
+                        `,required:!0}),e.jsx("button",{type:"button",onClick:()=>x(!s),className:"absolute right-4 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground transition-colors","aria-label":s?"Hide password":"Show password",children:s?e.jsx(v,{size:18}):e.jsx(b,{size:18})})]}),e.jsxs("div",{className:"flex items-center justify-between",children:[e.jsx("p",{className:"text-[length:var(--text-xs)] text-muted-foreground",children:"Minimum 8 characters"}),e.jsx("button",{type:"button",className:"text-[length:var(--text-sm)] font-[weight:var(--font-weight-semibold)] text-primary hover:text-primary/80 transition-colors",children:"Forgot Password?"})]})]}),e.jsx(f,{variant:"primary",size:"lg",className:"w-full",disabled:o,children:o?"Signing In...":"Sign In"})]}),e.jsxs("div",{className:"mt-6 text-center space-y-2",children:[e.jsx("p",{className:"text-[length:var(--text-sm)] text-muted-foreground",children:"Don't have an account?"}),e.jsx("button",{onClick:g,className:"text-[length:var(--text-sm)] font-[weight:var(--font-weight-semibold)] text-primary hover:text-primary/80 transition-colors",children:"Request an Account"})]})]})]})})]}),e.jsxs("footer",{className:"space-y-6",children:[e.jsxs("div",{className:"flex flex-col items-center gap-4",children:[e.jsx("p",{className:"text-[length:var(--text-sm)] text-muted-foreground text-center",children:"Developed with Support from"}),e.jsxs("div",{className:"flex items-center gap-8",children:[e.jsx("img",{src:z,alt:"GIZ Ghana - Deutsche Gesellschaft für Internationale Zusammenarbeit",className:"h-16 w-auto object-contain"}),e.jsx("img",{src:L,alt:"SECO - Swiss State Secretariat for Economic Affairs",className:"h-16 w-auto object-contain"})]})]}),e.jsxs("div",{className:"flex flex-col items-center gap-3 pt-6 border-t border-border",children:[e.jsxs("div",{className:"flex items-center gap-6",children:[e.jsx("a",{href:"#",className:"text-[length:var(--text-sm)] font-[weight:var(--font-weight-semibold)] text-primary hover:text-primary/80 transition-colors",children:"About"}),e.jsx("a",{href:"#",className:"text-[length:var(--text-sm)] font-[weight:var(--font-weight-semibold)] text-primary hover:text-primary/80 transition-colors",children:"Privacy"}),e.jsx("a",{href:"#",className:"text-[length:var(--text-sm)] font-[weight:var(--font-weight-semibold)] text-primary hover:text-primary/80 transition-colors",children:"Terms"})]}),e.jsx("p",{className:"text-[length:var(--text-xs)] text-muted-foreground",children:"© 2025 LUSPA. All Rights Reserved"})]})]})]})})};export{I as ConsumerPortal};

assets/eye-QHwXAkqY.js

@@ -0,0 +1 @@
+import{c}from"./index-mUEXKEer.js";const e=[["path",{d:"M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0",key:"1nclc0"}],["circle",{cx:"12",cy:"12",r:"3",key:"1v7zrd"}]],r=c("eye",e);export{r as E};

assets/eye-off-Dznbbs9G.js

@@ -0,0 +1 @@
+import{c as e}from"./index-mUEXKEer.js";const a=[["path",{d:"M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49",key:"ct8e1f"}],["path",{d:"M14.084 14.158a3 3 0 0 1-4.242-4.242",key:"151rxh"}],["path",{d:"M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143",key:"13bj9a"}],["path",{d:"m2 2 20 20",key:"1ooewy"}]],t=e("eye-off",a);export{t as E};

assets/file-text-BG0u0kR1.js

@@ -0,0 +1 @@
+import{c}from"./index-mUEXKEer.js";const e=[["path",{d:"M21.801 10A10 10 0 1 1 17 3.335",key:"yps3ct"}],["path",{d:"m9 11 3 3L22 4",key:"1pflzl"}]],k=c("circle-check-big",e);const t=[["circle",{cx:"12",cy:"12",r:"10",key:"1mglay"}],["path",{d:"M12 6v6l4 2",key:"mmk7yg"}]],h=c("clock",t);const a=[["path",{d:"M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z",key:"1oefj6"}],["path",{d:"M14 2v5a1 1 0 0 0 1 1h5",key:"wfsgrz"}],["path",{d:"M10 9H8",key:"b1mrlr"}],["path",{d:"M16 13H8",key:"t4e002"}],["path",{d:"M16 17H8",key:"z1uh3a"}]],l=c("file-text",a);export{k as C,l as F,h as a};

assets/map-pin-BhJz-uKs.js

@@ -0,0 +1 @@
+import{c}from"./index-mUEXKEer.js";const a=[["path",{d:"M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0",key:"1r0f0z"}],["circle",{cx:"12",cy:"10",r:"3",key:"ilqhr7"}]],o=c("map-pin",a);export{o as M};

assets/search-wZFAvndP.js

@@ -0,0 +1 @@
+import{c}from"./index-mUEXKEer.js";const e=[["path",{d:"m21 21-4.34-4.34",key:"14j7rj"}],["circle",{cx:"11",cy:"11",r:"8",key:"4ej97u"}]],o=c("search",e);export{o as S};

assets/user-H-bTlvBe.js

@@ -0,0 +1 @@
+import{c}from"./index-mUEXKEer.js";const e=[["path",{d:"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2",key:"975kel"}],["circle",{cx:"12",cy:"7",r:"4",key:"17ys0d"}]],r=c("user",e);export{r as U};

index.html

@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Lupmis 2.0 Design Guidelines</title>
+    <script type="module" crossorigin src="/assets/index-mUEXKEer.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-BYEJWa0a.css">
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>

vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>