Cardoza_Construction/Prism_old
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
13bb6542bcf3d805484b2ebf7a357fa18465a217
Prism_old/UI_LAYOUT_DESIGN.txt
T
eewing 13bb6542bc Mass UI Updates
2025-12-15 14:54:29 -06:00

1188 lines
34 KiB
Plaintext
Raw Blame History

================================================================================
JOB-PAGES APPLICATION - UI LAYOUT AND DESIGN DOCUMENTATION
Liquid Glass Design System
================================================================================
This document describes the complete layout, design, and visual structure of the
Job-Pages application with the Apple-inspired liquid glass (glassmorphism) design.
Last Updated: 2024
Version: 2.0
================================================================================
TECHNOLOGY STACK
================================================================================
- Frontend Framework: Vanilla HTML/CSS/JavaScript
- CSS Framework: Tailwind CSS (via CDN)
- Rich Text Editor: Quill.js (for notes editing)
- Authentication: PocketBase
- Design System: Liquid Glass (Glassmorphism) with gradient backgrounds
- User Preferences: Stored in PocketBase users collection PRISM JSON column
================================================================================
OVERALL DESIGN THEME
================================================================================
DESIGN PHILOSOPHY:
- Apple-inspired liquid glass aesthetic
- Glassmorphism with backdrop blur effects
- Semi-transparent elements with frosted glass appearance
- Smooth transitions and hover effects
- Premium, modern, clean interface
COLOR SCHEME:
- Primary: Indigo (#4F46E5 / indigo-600)
- Gradient Avatar: Indigo → Purple → Pink
- Background: Gradient from-gray-50 via-blue-50/30 to-indigo-50/40
- Text: Dark gray (#1F2937 / gray-900) for headings, medium gray (#4B5563 / gray-600) for body
- Error: Red (#DC2626 / red-600)
- Success: Green (#059669 / green-600)
- Borders: White with opacity (white/20 to white/40)
TYPOGRAPHY:
- Headings: Bold, large (text-xl to text-3xl)
- Body: Medium weight, readable sizes (text-sm to text-base)
- Labels: Medium weight, small to medium (text-sm to text-base)
- Font weights: font-medium, font-semibold, font-bold
SPACING:
- Consistent padding: p-4, p-6, p-8
- Consistent margins: mb-4, mb-6, mb-8
- Gap spacing: gap-4, gap-6
- Navigation padding: py-4 sm:py-4 (consistent on all screen sizes)
BORDER RADIUS:
- Standard: rounded-xl (12px) - buttons, inputs
- Large: rounded-2xl (16px) - cards, containers
- Extra Large: rounded-3xl (24px) - modals
- Full: rounded-full - avatars
SHADOWS:
- Small: shadow-sm - subtle elevation
- Large: shadow-lg - buttons, containers
- Extra Large: shadow-xl - cards
- 2X Large: shadow-2xl - modals, dropdowns
- Colored: shadow-indigo-500/30, shadow-indigo-500/50 - avatars
BLUR EFFECTS:
- Small: backdrop-blur-sm (4px) - inputs, buttons, table headers
- Standard: backdrop-blur-xl (24px) - cards, navigation, dropdowns
- Strong: backdrop-blur-2xl (40px) - modals, overlays
RESPONSIVE DESIGN:
- Mobile-first approach
- Breakpoints: sm (640px), md (768px), lg (1024px)
- Flexible layouts with grid and flexbox
- Full-width on mobile, constrained max-width on desktop (max-w-7xl)
- Sticky navigation on all screen sizes
================================================================================
NAVIGATION BAR / MENU BAR (All Pages)
================================================================================
OVERVIEW
--------
The navigation bar is consistent across all pages (except login) and uses
liquid glass design with glassmorphism effects. It includes user avatar,
dropdown menu, and optional back navigation links.
STRUCTURE
---------
- Container: <nav> element
- Position: Sticky at top of page
- Z-index: z-40 (below modals which use z-50)
NAVIGATION BAR CONTAINER
------------------------
Classes:
- backdrop-blur-xl
- bg-white/70
- border-b border-white/20
- shadow-sm
- sticky top-0 z-40
Purpose: Creates frosted glass navigation that stays at top while scrolling
Example:
<nav class="backdrop-blur-xl bg-white/70 border-b border-white/20 shadow-sm sticky top-0 z-40">
INNER CONTAINER
---------------
Classes:
- max-w-7xl mx-auto
- px-4 sm:px-6 lg:px-8
FLEX CONTAINER
--------------
Classes:
- flex flex-col sm:flex-row
- justify-between
- items-center
- h-16 sm:h-auto
- py-4 sm:py-4
- gap-4 sm:gap-0
- px-2
Layout:
- Mobile: Vertical stack (flex-col)
- Desktop: Horizontal (flex-row)
- Consistent padding on all screen sizes (py-4 sm:py-4)
LEFT SIDE (Optional - Back Link)
---------------------------------
Classes:
- flex items-center gap-4
- w-full sm:w-auto
Back Link (when present):
- Color: text-indigo-600
- Hover: hover:text-indigo-700
- Weight: font-medium
- Size: text-sm sm:text-base
- Transition: transition-colors
- Text: "← Dashboard" or "← [Page Name]"
Example:
<div class="flex items-center gap-4 w-full sm:w-auto">
<a href="dashboard.html" class="text-indigo-600 hover:text-indigo-700
font-medium text-sm sm:text-base transition-colors">← Dashboard</a>
</div>
RIGHT SIDE (User Avatar & Dropdown)
------------------------------------
Classes:
- flex flex-col sm:flex-row
- items-center gap-3
- w-full sm:w-auto
- relative
- justify-end sm:justify-start
Purpose: Contains user avatar button and dropdown menu
- On mobile: Stays right-aligned (justify-end)
- On desktop: Normal flow (justify-start)
USER AVATAR BUTTON
------------------
Container:
- relative (for dropdown positioning)
Button:
- Size: w-10 h-10
- Shape: rounded-full
- Gradient: bg-gradient-to-br from-indigo-500 via-purple-500 to-pink-500
- Display: flex items-center justify-center
- Text: text-white
- Font: font-medium text-sm
- Shadow: shadow-lg shadow-indigo-500/30
- Hover: hover:scale-105 hover:shadow-indigo-500/50
- Transition: transition-all duration-300
- Focus: focus:outline-none
Initials:
- Size: text-xs
- Weight: font-semibold
- Color: text-white
Example:
<div class="relative">
<button class="w-10 h-10 rounded-full bg-gradient-to-br from-indigo-500
via-purple-500 to-pink-500 flex items-center justify-center
text-white font-medium text-sm hover:scale-105 focus:outline-none
transition-all duration-300 shadow-lg shadow-indigo-500/30
hover:shadow-indigo-500/50">
<span class="text-xs font-semibold">IC</span>
</button>
</div>
USER DROPDOWN MENU
------------------
Container:
- Position: absolute right-0 mt-2
- Width: w-48
- Background: backdrop-blur-xl bg-white/80
- Border radius: rounded-2xl
- Shadow: shadow-2xl
- Border: border border-white/30
- Padding: py-2
- Z-index: z-50
- Overflow: overflow-hidden
- Hidden by default: hidden class
Example:
<div class="hidden absolute right-0 mt-2 w-48 backdrop-blur-xl bg-white/80
rounded-2xl shadow-2xl border border-white/30 py-2 z-50 overflow-hidden">
DROPDOWN HEADER
---------------
Classes:
- px-4 py-3
- border-b border-white/20
Content:
- Label: "Signed in as"
* Size: text-xs
* Color: text-gray-500
* Weight: font-medium
- Email: User email address
* Size: text-sm
* Weight: font-semibold
* Color: text-gray-900
* Truncate: truncate
* Margin top: mt-0.5
Example:
<div class="px-4 py-3 border-b border-white/20">
<p class="text-xs text-gray-500 font-medium">Signed in as</p>
<p class="text-sm font-semibold text-gray-900 truncate mt-0.5">user@example.com</p>
</div>
DROPDOWN ITEMS
--------------
Standard Item (Preferences link):
- Display: block
- Padding: px-4 py-2.5
- Text: text-sm text-gray-700
- Hover: hover:bg-white/40
- Transition: transition-colors
- Weight: font-medium
- Focus: focus:outline-none
Example:
<a href="preferences.html" class="block px-4 py-2.5 text-sm text-gray-700
hover:bg-white/40 focus:outline-none transition-colors font-medium">
Preferences
</a>
Destructive Item (Logout):
- Width: w-full
- Alignment: text-left
- Padding: px-4 py-2.5
- Text: text-sm text-red-600
- Hover: hover:bg-red-50/50
- Transition: transition-colors
- Weight: font-medium
- Focus: focus:outline-none
Example:
<button class="w-full text-left px-4 py-2.5 text-sm text-red-600
hover:bg-red-50/50 focus:outline-none transition-colors font-medium">
Logout
</button>
DROPDOWN FUNCTIONALITY
----------------------
- Toggle: Click avatar button to show/hide dropdown
- Close on outside click: JavaScript event listener
- Close on item click: Automatic (navigation or logout)
RESPONSIVE BEHAVIOR
-------------------
Mobile (< 640px):
- Navigation stacks vertically
- Avatar stays right-aligned (justify-end)
- Full-width elements where needed
Desktop (≥ 640px):
- Navigation horizontal layout
- Avatar in normal flow
- Optimal spacing
PAGES WITH NAVIGATION
---------------------
✓ Dashboard (dashboard.html)
- No back link
- Avatar and dropdown only
✓ Jobs Page (jobs.html)
- Back link: "← Dashboard"
- Avatar and dropdown
✓ Notes Page (notes.html)
- Back link: "← Dashboard"
- Avatar and dropdown
✓ Preferences Page (preferences.html)
- Back link: "← Dashboard"
- Avatar and dropdown
✗ Login Page (index.html)
- No navigation bar (separate design)
================================================================================
PAGE 1: LOGIN PAGE (index.html)
================================================================================
LAYOUT STRUCTURE:
- Full-screen centered layout
- Single centered card on gradient background
BACKGROUND:
- Gradient: from-blue-50 to-indigo-100
- Full viewport height: min-h-screen
- Centered content with flexbox: flex items-center justify-center
- Padding: p-4
MAIN CARD:
- Container: max-w-md, full width on mobile
- Background: bg-white (solid, not glassmorphism for login)
- Border radius: rounded-lg
- Shadow: shadow-xl
- Padding: p-8
- Centered content
CARD HEADER:
- Text alignment: text-center
- Margin bottom: mb-8
- Title: "Job Tracking"
* Size: text-3xl
* Weight: font-bold
* Color: text-gray-800
* Margin bottom: mb-2
- Subtitle: "Sign in to your account"
* Color: text-gray-600
FORM ELEMENTS:
- Form container: space-y-6 (vertical spacing between elements)
ERROR MESSAGE (Hidden by default):
- Container: hidden (shown on error)
- Background: bg-red-50
- Border: border border-red-200
- Text color: text-red-700
- Padding: px-4 py-3
- Border radius: rounded-lg
- Font size: text-sm
INPUT FIELDS:
- Container: Full width with label above
- Label:
* Display: block
* Font: text-sm font-medium
* Color: text-gray-700
* Margin bottom: mb-2
- Input:
* Width: w-full
* Padding: px-4 py-3
* Border: border border-gray-300
* Border radius: rounded-lg
* Focus: focus:ring-2 focus:ring-indigo-500 focus:border-transparent
* Outline: outline-none
* Transition: transition
* Font size: text-base
* Placeholder: Light gray text
SUBMIT BUTTON:
- Width: w-full
- Background: bg-indigo-600
- Text color: text-white
- Padding: py-3 px-4
- Border radius: rounded-lg
- Font: font-medium
- Hover: hover:bg-indigo-700
- Focus: focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2
- Disabled: disabled:opacity-50 disabled:cursor-not-allowed
- Transition: transition
================================================================================
PAGE 2: DASHBOARD (dashboard.html)
================================================================================
LAYOUT STRUCTURE:
- Full-width layout with navigation header
- Constrained content area (max-w-7xl)
- Multiple sections: header, cards, stats, quick actions
BACKGROUND:
- Gradient: bg-gradient-to-br from-gray-50 via-blue-50/30 to-indigo-50/40
- Full height: min-h-screen
NAVIGATION HEADER:
- Background: backdrop-blur-xl bg-white/70
- Shadow: shadow-sm
- Border bottom: border-b border-white/20
- Position: sticky top-0 z-40
- Container: max-w-7xl mx-auto
- Padding: px-4 sm:px-6 lg:px-8
- Height: h-16 on desktop, auto on mobile
- Layout: Flexbox, space-between on desktop, column on mobile
- Responsive: flex-col sm:flex-row
- Inner padding: py-4 sm:py-4 gap-4 sm:gap-0 px-2
NAVIGATION CONTENT:
- Right side (avatar and dropdown):
* User avatar button:
- Size: w-10 h-10
- Gradient: bg-gradient-to-br from-indigo-500 via-purple-500 to-pink-500
- Shadow: shadow-lg shadow-indigo-500/30
- Hover: hover:scale-105 hover:shadow-indigo-500/50
- Transition: transition-all duration-300
- Rounded: rounded-full
* User dropdown:
- Background: backdrop-blur-xl bg-white/80
- Border: border border-white/30
- Shadow: shadow-2xl
- Rounded: rounded-2xl
- Padding: py-2
- Overflow: overflow-hidden
- Width: w-48
- Z-index: z-50
* Dropdown items:
- Header: px-4 py-3 border-b border-white/20
- Items: px-4 py-2.5 text-sm
- Hover: hover:bg-white/40
- Destructive (logout): text-red-600 hover:bg-red-50/50
MAIN CONTENT AREA:
- Container: max-w-7xl mx-auto
- Padding: px-4 sm:px-6 lg:px-8 py-8
PAGE HEADER:
- Title: "Welcome, [User Name]"
* Size: text-xl sm:text-2xl
* Weight: font-bold
* Color: text-gray-800
* Margin bottom: mb-2
- Subtitle: "Manage your job records and tracking"
* Size: text-sm sm:text-base
* Color: text-gray-600
DASHBOARD CARDS SECTION:
- Grid layout: grid-cols-1 md:grid-cols-2
- Gap: gap-6
- Margin bottom: mb-8
DASHBOARD CARD:
- Background: backdrop-blur-xl bg-white/60
- Border radius: rounded-2xl
- Shadow: shadow-xl
- Border: border border-white/30
- Padding: p-6
- Hover: hover:bg-white/70 transition-all duration-300
CARD STRUCTURE:
- Icon container:
* Size: w-12 h-12
* Background: bg-indigo-100
* Border radius: rounded-lg
* Centered: flex items-center justify-center
* Icon: SVG, w-6 h-6, color: text-indigo-600
- Title: "Job Tracking" or "Employee Reports"
* Size: text-lg
* Weight: font-semibold
* Color: text-gray-800
- Description: "View and manage job information"
* Size: text-sm
* Color: text-gray-600
* Margin: mb-4
- Link: "View Jobs →" or "View Reports →"
* Color: text-indigo-600
* Hover: hover:text-indigo-700
* Weight: font-medium
* Size: text-sm
QUICK STATS SECTION:
- Background: backdrop-blur-xl bg-white/60
- Border radius: rounded-2xl
- Shadow: shadow-xl
- Border: border border-white/30
- Padding: p-4 sm:p-6
- Margin bottom: mb-6 sm:mb-8
- Title: "Quick Stats"
* Size: text-base sm:text-lg
* Weight: font-semibold
* Color: text-gray-800
* Margin bottom: mb-4
STATS GRID:
- Grid: grid-cols-1 sm:grid-cols-3
- Gap: gap-4
STAT CARD:
- Layout: text-center
- Padding: p-4 sm:p-6
- Background: bg-indigo-50 (or green-50, purple-50)
- Border radius: rounded-lg
- Border: border border-indigo-100 (or green-100, purple-100)
- Hover: hover:shadow-md
- Transition: transition-shadow
- Number:
* Size: text-3xl sm:text-4xl
* Weight: font-bold
* Color: text-indigo-600 (or green-600, purple-600)
* Margin bottom: mb-2
* Loading state: animate-pulse with "..." placeholder
- Label:
* Size: text-xs sm:text-sm
* Weight: font-medium
* Color: text-gray-700
QUICK ACTIONS SECTION:
- Background: backdrop-blur-xl bg-white/60
- Border radius: rounded-2xl
- Shadow: shadow-xl
- Border: border border-white/30
- Padding: p-4 sm:p-6
- Title: "Quick Actions"
* Size: text-base sm:text-lg
* Weight: font-semibold
* Color: text-gray-800
* Margin bottom: mb-4
QUICK ACTIONS GRID:
- Grid: grid-cols-1 md:grid-cols-2
- Gap: gap-4
QUICK ACTION ITEM:
- Layout: flex items-center
- Padding: p-4
- Border: border border-gray-200
- Border radius: rounded-lg
- Hover: hover:bg-gray-50 hover:border-indigo-300 (or green-300 for reports)
- Transition: transition-colors
- Icon container:
* Size: w-10 h-10
* Background: bg-indigo-100 (or green-100 for reports)
* Border radius: rounded-lg
* Centered: flex items-center justify-center
* Margin right: mr-4
* Flex shrink: flex-shrink-0
* Icon: SVG, w-5 h-5, color: text-indigo-600 (or green-600)
- Text container:
* Min width: min-w-0
* Title:
- Weight: font-medium
- Color: text-gray-900
- Size: text-sm sm:text-base
* Description:
- Size: text-xs sm:text-sm
- Color: text-gray-500
================================================================================
PAGE 3: JOBS PAGE (jobs.html)
================================================================================
LAYOUT STRUCTURE:
- Same navigation header as dashboard
- Main content area with search, filters, view toggle, table/cards, and modal
NAVIGATION HEADER:
- Same as dashboard with addition:
* Back link: "← Dashboard"
- Color: text-indigo-600
- Hover: hover:text-indigo-700
- Weight: font-medium
- Size: text-sm sm:text-base
- Transition: transition-colors
- Positioned before title
MAIN CONTENT AREA:
- Container: max-w-7xl mx-auto
- Padding: px-4 sm:px-6 lg:px-8 py-8
MESSAGE CONTAINER:
- Container for success/error messages
- Margin bottom: mb-4
- Messages:
* Success: bg-green-50 border-green-200 text-green-700
* Error: bg-red-50 border-red-200 text-red-700
* Padding: px-4 py-3
* Border radius: rounded-xl
* Backdrop blur: backdrop-blur-sm
SEARCH AND FILTER SECTION:
- Background: backdrop-blur-xl bg-white/60
- Border radius: rounded-2xl
- Shadow: shadow-xl
- Border: border border-white/30
- Padding: p-6
- Margin bottom: mb-6
- Layout: flex flex-col gap-4
SEARCH BAR:
- Width: w-full
- Padding: px-4 py-3
- Border: border border-white/40
- Border radius: rounded-xl
- Background: backdrop-blur-sm bg-white/40
- Focus: focus:ring-2 focus:ring-indigo-500/50 focus:border-indigo-300/50
- Outline: outline-none
- Font size: text-base
- Transition: transition-all
- Shadow: shadow-sm
- Placeholder: "Search by job number, name, or client..."
FILTER BUTTONS:
- Layout: flex flex-wrap gap-1.5
- Buttons:
* Active state (All):
- Background: bg-indigo-600
- Text: text-white
- Hover: hover:bg-indigo-700
* Inactive state (Estimator/Status filters):
- Background: Pastel colors based on filter type
- Text: Matching text colors
- Hover: Darker shade
* Common styles:
- Flex: flex-1 sm:flex-none
- Padding: px-3 py-1.5
- Border radius: rounded-md
- Size: text-xs
- Weight: font-medium
- Transition: transition
- Focus: focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-1
VIEW TOGGLE:
- Container: mb-4 flex justify-end
- Toggle container:
* Background: backdrop-blur-xl bg-white/60
* Border: border border-white/30
* Border radius: rounded-2xl
* Padding: p-1
* Shadow: shadow-lg
* Layout: inline-flex
- Active button:
* Background: backdrop-blur-sm bg-indigo-600/90
* Text: text-white
* Border radius: rounded-xl
* Shadow: shadow-lg
* Hover: hover:bg-indigo-700/90
- Inactive button:
* Background: backdrop-blur-sm (transparent)
* Text: text-gray-700
* Border radius: rounded-xl
* Hover: hover:bg-white/40
JOBS TABLE VIEW:
- Container: backdrop-blur-xl bg-white/60 rounded-2xl shadow-xl border border-white/30 overflow-hidden
- Table container: overflow-x-auto
- Table structure: min-w-full divide-y divide-gray-200
- Header: backdrop-blur-sm bg-white/40
- Body: bg-white/30 divide-y divide-white/20
- Cells: px-3 sm:px-6 py-4 text-sm text-gray-900
JOBS CARD VIEW:
- Container: space-y-4
- Card structure:
* Background: backdrop-blur-xl bg-white/60
* Border radius: rounded-2xl
* Shadow: shadow-xl
* Border: border border-white/30
* Padding: p-6
* Hover: hover:shadow-2xl hover:border-white/50 hover:bg-white/70 hover:scale-[1.02]
* Transition: transition-all duration-300
* Cursor: cursor-pointer
- Card content:
* Job number: text-xl font-semibold text-gray-900
* Job name: text-base text-gray-600
* Grid layout: grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4
* Client section with phone number link
* Estimator badge
* Status badge
* Address section (if available):
- Address text
- Apple Maps button: backdrop-blur-sm bg-gray-900/90 rounded-xl shadow-lg
- Google Maps button: backdrop-blur-sm bg-blue-600/90 rounded-xl shadow-lg
* Type and Division in nested grid
PAGINATION:
- Container: mt-4 flex justify-between items-center
- Styled pagination controls
JOB DASHBOARD MODAL:
- Overlay:
* Position: fixed inset-0
* Background: backdrop-blur-sm bg-black/20
* Overflow: overflow-y-auto
* Z-index: z-50
* Hidden by default: hidden class
MODAL CONTENT:
- Container:
* Position: relative top-0 sm:top-10
* Margin: mx-auto
* Padding: p-4 sm:p-6
* Width: w-full sm:max-w-7xl
* Shadow: shadow-2xl
* Border radius: rounded-none sm:rounded-3xl
* Background: backdrop-blur-2xl bg-white/80
* Border: border border-white/30
* Margin bottom: mb-0 sm:mb-10
* Min height: min-h-screen sm:min-h-[600px]
MODAL HEADER:
- Background: backdrop-blur-xl bg-white/60 rounded-2xl shadow-xl border border-white/30 p-6 mb-6
- Layout: flex flex-col lg:flex-row justify-between items-start gap-4
- Title: "Job Dashboard"
* Size: text-2xl
* Weight: font-bold
* Color: text-gray-900
* Margin bottom: mb-2
- Quick Info Card:
* Background: backdrop-blur-xl bg-white/40
* Border radius: rounded-2xl
* Padding: p-4
* Border: border border-white/30
* Shadow: shadow-lg
* Min width: min-w-[250px]
MODAL TABS:
- Border bottom: border-b border-gray-200
- Navigation: flex space-x-8 overflow-x-auto
- Tab buttons:
* Active:
- Border: border-indigo-500
- Text: text-indigo-600
- Border bottom: border-b-2
- Weight: font-medium
- Size: text-sm
- Padding: py-2 px-1
- White space: whitespace-nowrap
* Inactive:
- Border: border-transparent
- Text: text-gray-500
- Hover: hover:text-gray-700 hover:border-gray-300
- Border bottom: border-b-2
- Weight: font-medium
- Size: text-sm
- Padding: py-2 px-1
- White space: whitespace-nowrap
TABS:
1. Overview (always visible)
2. Team & Client
3. Dates & Links
4. Status Flags
5. Notes (hidden for new jobs, shown for existing)
MODAL FORM SECTIONS:
- Each section in a card:
* Background: backdrop-blur-xl bg-white/60
* Border radius: rounded-2xl
* Shadow: shadow-xl
* Border: border border-white/30
* Padding: p-6
- Section title:
* Size: text-lg
* Weight: font-semibold
* Color: text-gray-900
* Margin bottom: mb-4
FORM FIELDS (Grid Layout):
- Grid: grid-cols-1 sm:grid-cols-2
- Gap: gap-4
FORM FIELD STYLING:
- Label:
* Display: block
* Size: text-sm
* Weight: font-medium
* Color: text-gray-700
* Margin bottom: mb-1
- Input/Select:
* Width: w-full
* Padding: px-3 py-2
* Border: border border-white/40
* Border radius: rounded-xl
* Background: backdrop-blur-sm bg-white/40
* Focus: focus:ring-2 focus:ring-indigo-500/50 focus:border-indigo-300/50
* Outline: outline-none
* Font size: text-base
* Transition: transition-all
* Shadow: shadow-sm
FORM BUTTONS:
- Layout: flex flex-col sm:flex-row justify-end
- Spacing: space-y-2 sm:space-y-0 sm:space-x-3
- Padding top: pt-4
- Border top: border-t border-gray-200
- Cancel button:
* Width: w-full sm:w-auto
* Padding: px-6 py-2.5
* Background: backdrop-blur-sm bg-white/60
* Border: border border-white/40
* Text: text-gray-700
* Border radius: rounded-xl
* Shadow: shadow-lg
* Hover: hover:bg-white/80 hover:shadow-xl
* Transition: transition-all
- Save button:
* Width: w-full sm:w-auto
* Padding: px-6 py-2.5
* Background: backdrop-blur-sm bg-indigo-600/90
* Text: text-white
* Border radius: rounded-xl
* Shadow: shadow-lg
* Hover: hover:bg-indigo-700/90 hover:shadow-xl
* Transition: transition-all
NOTES SECTION:
- Add Note button:
* Background: bg-indigo-600
* Text: text-white
* Padding: px-3 py-1.5
* Border radius: rounded-lg
* Size: text-sm
* Weight: font-medium
* Hover: hover:bg-indigo-700
- Notes list:
* Container: space-y-4
* Max height: max-h-[500px]
* Overflow: overflow-y-auto
- Add Note form:
* Hidden by default: hidden
* Background: bg-gray-50
* Padding: p-4
* Border radius: rounded-lg
* Border: border border-gray-200
================================================================================
PAGE 4: NOTES PAGE (notes.html)
================================================================================
LAYOUT STRUCTURE:
- Same navigation header as jobs page
- Main content with table and modal
NAVIGATION HEADER:
- Same as jobs page
- Title: "Employee Reports"
MAIN CONTENT AREA:
- Container: max-w-7xl mx-auto
- Padding: px-4 sm:px-6 lg:px-8 py-8
PAGE HEADER:
- Layout: flex flex-col sm:flex-row justify-between items-start sm:items-center
- Gap: gap-4
- Margin bottom: mb-6
- Title: "Job Notes"
* Size: text-xl sm:text-2xl
* Weight: font-bold
* Color: text-gray-800
* Margin bottom: mb-2
- Subtitle: "Manage job notes and reports"
* Size: text-sm sm:text-base
* Color: text-gray-600
- Add Note Button:
* Background: bg-indigo-600
* Text: text-white
* Padding: px-4 sm:px-6 py-2 sm:py-3
* Border radius: rounded-lg
* Size: text-sm sm:text-base
* Weight: font-medium
* Hover: hover:bg-indigo-700
* Focus: focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2
* Width: w-full on mobile, auto on desktop
* Text: "+ Add Note"
MESSAGE CONTAINER:
- Same as jobs page
REPORTS TABLE CONTAINER:
- Hidden by default: hidden class
- Background: backdrop-blur-xl bg-white/60
- Border radius: rounded-2xl
- Shadow: shadow-xl
- Border: border border-white/30
- Overflow: overflow-hidden
================================================================================
PAGE 5: PREFERENCES PAGE (preferences.html)
================================================================================
LAYOUT STRUCTURE:
- Same navigation header as other pages
- Main content with preferences form
NAVIGATION HEADER:
- Same as other pages
- Back link: "← Dashboard"
MAIN CONTENT AREA:
- Container: max-w-4xl mx-auto
- Padding: px-4 sm:px-6 lg:px-8 py-8
PAGE HEADER:
- Title: "Preferences"
* Size: text-2xl sm:text-3xl
* Weight: font-bold
* Color: text-gray-900
* Margin bottom: mb-2
- Subtitle: "Customize your Job-Pages experience"
* Size: text-sm sm:text-base
* Color: text-gray-600
PREFERENCES FORM:
- Container: backdrop-blur-xl bg-white/60 rounded-2xl shadow-xl border border-white/30 p-6
- Layout: space-y-6
DARK MODE SECTION:
- Layout: flex items-center justify-between
- Padding: py-4
- Border bottom: border-b border-white/20
- Title: "Dark Mode"
* Size: text-lg
* Weight: font-semibold
* Color: text-gray-900
* Margin bottom: mb-1
- Description: "Switch between light and dark themes"
* Size: text-sm
* Color: text-gray-600
- Toggle switch: Custom styled checkbox with toggle appearance
DEFAULT VIEW SECTION:
- Padding: py-4
- Border bottom: border-b border-white/20
- Title: "Default View"
* Size: text-lg
* Weight: font-semibold
* Color: text-gray-900
* Margin bottom: mb-2
- Description: "Choose your preferred default view for the jobs page"
* Size: text-sm
* Color: text-gray-600
* Margin bottom: mb-4
- Options container: flex flex-col sm:flex-row gap-4
VIEW OPTION (Radio Button):
- Label container:
* Layout: flex items-center
* Padding: p-4
* Border: border-2 border-white/30
* Background: backdrop-blur-sm bg-white/40
* Border radius: rounded-2xl
* Cursor: cursor-pointer
* Hover: hover:border-indigo-500/50 hover:bg-white/60
* Transition: transition-all
* Shadow: shadow-sm
- Selected state (via JavaScript):
* Border: border-indigo-500
* Background: bg-indigo-50/50
* Shadow: shadow-md
- Radio input: sr-only (screen reader only)
- Content:
* Icon: SVG, w-6 h-6, text-gray-400 (text-indigo-600 when selected)
* Title: font-medium text-gray-900 (text-indigo-600 when selected)
* Description: text-sm text-gray-500
SAVE BUTTON:
- Layout: flex justify-end pt-4
- Button:
* Padding: px-6 py-2.5
* Background: backdrop-blur-sm bg-indigo-600/90
* Text: text-white
* Border radius: rounded-xl
* Shadow: shadow-lg
* Hover: hover:bg-indigo-700/90 hover:shadow-xl
* Transition: transition-all
================================================================================
INTERACTIVE ELEMENTS AND STATES
================================================================================
BUTTON STATES:
- Default: Base styles with backdrop-blur and semi-transparent background
- Hover: Darker background color, increased shadow, scale effect
- Focus: Ring outline (focus:ring-2 focus:ring-indigo-500/50)
- Disabled: Reduced opacity (disabled:opacity-50 disabled:cursor-not-allowed)
- Active: Applied to filter buttons and view toggle when selected
INPUT STATES:
- Default: Border white/40, backdrop-blur-sm bg-white/40
- Focus: Ring indigo-500/50, border indigo-300/50
- Error: Red border and background (shown in error messages)
LOADING STATES:
- Pulse animation: animate-pulse
- Spinner: animate-spin
- Placeholder text: "Loading..." or "..."
- Loading row in tables: Centered text-gray-500
MODAL STATES:
- Hidden: hidden class (display: none)
- Visible: Remove hidden class
- Full screen on mobile, centered on desktop
- Backdrop blur effect on overlay
CARD STATES:
- Default: backdrop-blur-xl bg-white/60
- Hover: hover:bg-white/70 hover:shadow-2xl hover:border-white/50 hover:scale-[1.02]
- Transition: transition-all duration-300
AVATAR STATES:
- Default: Gradient background with shadow-lg shadow-indigo-500/30
- Hover: hover:scale-105 hover:shadow-indigo-500/50
- Transition: transition-all duration-300
DROPDOWN STATES:
- Hidden: hidden class
- Visible: Remove hidden class
- Items: hover:bg-white/40 (or hover:bg-red-50/50 for destructive)
================================================================================
RESPONSIVE BEHAVIOR
================================================================================
MOBILE (< 640px):
- Single column layouts
- Full-width buttons
- Stacked navigation elements
- Full-screen modals (rounded-none)
- Smaller text sizes (text-sm)
- Reduced padding
- Avatar stays right-aligned (justify-end)
TABLET (640px - 1024px):
- Two-column grids where applicable
- Horizontal navigation
- Constrained modals (rounded-3xl)
- Medium text sizes
- Flexible layouts
DESKTOP (> 1024px):
- Multi-column layouts
- Max-width containers (max-w-7xl)
- Side-by-side elements
- Larger text and spacing
- Optimal glassmorphism visibility
================================================================================
ICONS AND VISUAL ELEMENTS
================================================================================
ICONS USED (SVG):
- Table icon (View toggle)
- Grid/Cards icon (View toggle)
- Arrow right icon (Card view, navigation)
- Close/X icon (Modals)
- Location icon (Address section)
- User/People icon (Dashboard)
- Document icon (Dashboard)
ICON STYLING:
- Stroke-based SVG icons
- Current color inheritance
- Sizes: w-5 h-5, w-6 h-6
- Rounded icon containers with colored backgrounds (where applicable)
BADGES:
- Estimator badges: Pastel colored backgrounds
* Steve: bg-orange-100 text-orange-800
* Beth: bg-blue-100 text-blue-800
* Timothy: bg-purple-100 text-purple-800
* Others: bg-gray-100 text-gray-800
- Status badges: Color-coded based on status
* Billed: bg-purple-200 text-purple-800
* Est Hold: bg-orange-200 text-orange-800
* Est Sent/Follow Up: bg-yellow-200 text-yellow-800
* Estimating: bg-blue-200 text-blue-800
* In Progress/Awarded: bg-green-200 text-green-800
* Not Awarded/Not Bidding: bg-red-200 text-red-800
* Archive: bg-gray-200 text-gray-700
================================================================================
ANIMATIONS AND TRANSITIONS
================================================================================
TRANSITIONS:
- All interactive elements: transition-all or transition-colors
- Duration: duration-300 for smooth animations
- Hover effects: Smooth color, shadow, and scale changes
- Shadow changes: Included in transition-all
ANIMATIONS:
- Pulse: animate-pulse (for loading states)
- Spin: animate-spin (for loading spinners)
- Scale: hover:scale-105 (avatars), hover:scale-[1.02] (cards)
================================================================================
USER PREFERENCES SYSTEM
================================================================================
STORAGE:
- Location: PocketBase users collection
- Column: PRISM (JSON)
- Key: "Job-Pages" (isolated from other applications)
- Structure:
{
"Job-Pages": {
"darkMode": boolean,
"defaultView": "table" | "card"
}
}
PREFERENCES AVAILABLE:
1. Dark Mode
- Toggle switch
- Applied immediately on change
- Persists across sessions
2. Default View
- Radio button selection
- Options: Table View, Card View
- Applied on jobs page load
- Can be overridden by user selection during session
ACCESS:
- Preferences page accessible from user dropdown menu
- Link: "Preferences" in dropdown
- All pages initialize dark mode from preferences on load
================================================================================
ACCESSIBILITY FEATURES
================================================================================
- Focus states: Visible ring outlines on all interactive elements
- Semantic HTML: Proper use of headings, labels, forms
- ARIA attributes: Implicit through semantic HTML
- Keyboard navigation: All interactive elements are keyboard accessible
- Color contrast: High contrast text on backgrounds
- Responsive text: Scales appropriately on different screen sizes
- Screen reader support: sr-only class for hidden but accessible elements
================================================================================
PERFORMANCE OPTIMIZATIONS
================================================================================
- backdrop-blur used strategically (not on every element)
- Transitions optimized with transition-all
- Lazy loading for modals and heavy content
- Efficient DOM updates
- Minimal re-renders
================================================================================
CURRENT IMPLEMENTATION STATUS
================================================================================
PAGES:
✓ Login Page (index.html) - Standard design
✓ Dashboard (dashboard.html) - Full liquid glass
✓ Jobs Page (jobs.html) - Full liquid glass
✓ Notes Page (notes.html) - Full liquid glass
✓ Preferences Page (preferences.html) - Full liquid glass
COMPONENTS:
✓ Navigation bar with glassmorphism
✓ User avatar with gradient and dropdown
✓ Cards and containers
✓ Search/filter sections
✓ View toggle buttons
✓ Tables with glassmorphism
✓ Modals with glassmorphism
✓ Form inputs and selects
✓ Buttons (all states)
✓ Preferences page with interactive radio options
✓ Job cards with address and map buttons
✓ Badges (estimator and status)
FEATURES:
✓ Dark mode preference (stored in PRISM)
✓ Default view preference (stored in PRISM)
✓ User preferences persistence
✓ Responsive design
✓ Smooth transitions and animations
================================================================================
END OF DOCUMENTATION
================================================================================
Reference in New Issue View Git Blame Copy Permalink