From 8e8f31fc5b238a36204881521f33a89fb86c844b Mon Sep 17 00:00:00 2001 From: Nicholas Ward Date: Tue, 19 Aug 2025 08:50:40 -0500 Subject: [PATCH] add documents for style mockups --- mockup/index.html | 55 ++++++++++++++++++++++ mockup/styles.css | 113 ++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 168 insertions(+) create mode 100644 mockup/index.html create mode 100644 mockup/styles.css diff --git a/mockup/index.html b/mockup/index.html new file mode 100644 index 0000000..d2a0dc0 --- /dev/null +++ b/mockup/index.html @@ -0,0 +1,55 @@ + + + + + + + Plant Manager + + + + +
+ + + +
+
+

Dashboard

+
+ +
+
+

Welcome

+

This is plant manager dashboard.

+
+ +
+

Status Badges

+
+ Active + Pending + Error +
+
+ +
+
+
+ + + \ No newline at end of file diff --git a/mockup/styles.css b/mockup/styles.css new file mode 100644 index 0000000..cc0f60d --- /dev/null +++ b/mockup/styles.css @@ -0,0 +1,113 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body, +html { + height: 100%; + font-family: 'Univers LT Pro',-apple-system,system-ui,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',sans-serif; + color: #111827; +} + +.app { + display: flex; + height: 100%; +} + +.sidebar { + width: 240px; + background: #fff; + border-right: 1px solid #e5e7eb; + display: flex; + flex-direction: column; +} + +.sidebar-header { + height: 60px; + display: flex; + align-items: center; + justify-content: center; + border-bottom: 1px solid #e5e7eb; + font-weight: 600; +} + +.sidebar-nav { + flex: 1; + padding: 1rem; + display: flex; + flex-direction: column; + gap: 0.5rem; +} + +.sidebar-nav a { + text-decoration: none; + font-size: 14px; + color: #374151; + padding: 8px 12px; + border-radius: 6px; +} + +.sidebar-nav a:hover { + background: #f3f4f6; +} + +.sidebar-footer { + padding: 1rem; + border-top: 1px solid #e5e7eb; +} + +.main { + flex: 1; + display: flex; + flex-direction: column; +} + +.header { + height: 60px; + background: #fff; + border-bottom: 1px solid #e5e7eb; + display: flex; + justify-content: space-between; + align-items: center; + padding: 0 1rem; +} + +.content { + display: flex; + flex: 1; + overflow-y: auto; + flex-direction: column; +} + +.card { + background: #fff; + padding: 1rem; +} + +.card h3 { + margin-bottom: 0.5rem; + font-weight: 600; +} + +.badge { + display: inline-block; + padding: 4px 10px; + font-size: 12px; + font-weight: 500; + border-radius: 9999px; + color: #fff; +} + +.badge-success { + background: #16a34a; +} + +.badge-warning { + background: #f59e0b; +} + +.badge-error { + background: #dc2626; +} \ No newline at end of file