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

854 lines
23 KiB
Plaintext
Raw Permalink Blame History

================================================================================
LIQUID GLASS DESIGN SYSTEM PLAYBOOK
Apple-Inspired Glassmorphism
================================================================================
OVERVIEW
--------
This playbook documents the liquid glass (glassmorphism) design system used
throughout the Job-Pages application. This design creates a premium, Apple-like
aesthetic using frosted glass effects, subtle transparency, and smooth transitions.
Last Updated: 2024
Version: 2.0
================================================================================
CORE PRINCIPLES
================================================================================
1. TRANSPARENCY & BLUR
- Use backdrop-blur for frosted glass effects
- Semi-transparent backgrounds (white/40, white/60, white/70, white/80)
- Subtle borders with white/20 to white/40 opacity
- Gradient background provides depth: from-gray-50 via-blue-50/30 to-indigo-50/40
2. DEPTH & SHADOWS
- Layered shadows (shadow-sm, shadow-lg, shadow-xl, shadow-2xl)
- Colored shadows for interactive elements (shadow-indigo-500/30, shadow-indigo-500/50)
- Hover states increase shadow intensity
- Shadow-lg for buttons, shadow-xl for cards, shadow-2xl for modals/dropdowns
3. SMOOTH TRANSITIONS
- All interactive elements use transition-all or transition-colors
- Scale effects on hover (hover:scale-105 for avatars, hover:scale-[1.02] for cards)
- Opacity changes for hover states
- Duration-300 for smooth animations
4. ROUNDED CORNERS
- Standard: rounded-xl (12px) - buttons, inputs
- Large cards: rounded-2xl (16px) - main containers, cards
- Modals: rounded-3xl (24px) - modal content
- Full rounded: rounded-full (for avatars)
================================================================================
BACKGROUND SYSTEM
================================================================================
MAIN PAGE BACKGROUND
--------------------
Class: bg-gradient-to-br from-gray-50 via-blue-50/30 to-indigo-50/40
Purpose: Creates a subtle gradient that provides depth and visual interest
Usage: Applied to <body> element on all pages
Example:
<body class="min-h-screen bg-gradient-to-br from-gray-50 via-blue-50/30 to-indigo-50/40">
This gradient creates the foundation for the glassmorphism effect, allowing
transparent elements to show through with a beautiful backdrop.
================================================================================
NAVIGATION BAR
================================================================================
STANDARD NAVIGATION
-------------------
Classes:
- backdrop-blur-xl
- bg-white/70
- border-b border-white/20
- shadow-sm
- sticky top-0 z-40
Purpose: Creates a frosted glass navigation that stays at the top
Container:
- max-w-7xl mx-auto
- px-4 sm:px-6 lg:px-8
- py-4 sm:py-4 (consistent padding on all screen sizes)
- px-2 (additional horizontal padding)
Example:
<nav class="backdrop-blur-xl bg-white/70 border-b border-white/20 shadow-sm sticky top-0 z-40">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="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">
<!-- Navigation content -->
</div>
</div>
</nav>
NAVIGATION LINKS
----------------
Classes:
- text-indigo-600
- hover:text-indigo-700
- font-medium
- text-sm sm:text-base
- transition-colors
Example:
<a href="dashboard.html" class="text-indigo-600 hover:text-indigo-700 font-medium text-sm sm:text-base transition-colors">← Dashboard</a>
================================================================================
CARDS & CONTAINERS
================================================================================
STANDARD CARD
-------------
Classes:
- backdrop-blur-xl
- bg-white/60
- rounded-2xl
- shadow-xl
- border border-white/30
- p-6
Purpose: Main content cards with glassmorphism effect
Example:
<div class="backdrop-blur-xl bg-white/60 rounded-2xl shadow-xl border border-white/30 p-6">
CARD WITH HOVER EFFECT
----------------------
Additional classes:
- hover:bg-white/70
- hover:shadow-2xl
- hover:border-white/50
- hover:scale-[1.02]
- transition-all duration-300
- cursor-pointer
Example:
<div class="backdrop-blur-xl bg-white/60 rounded-2xl shadow-xl border border-white/30 p-6
hover:bg-white/70 hover:shadow-2xl hover:border-white/50 hover:scale-[1.02]
transition-all duration-300 cursor-pointer">
SEARCH/FILTER CONTAINER
-----------------------
Classes:
- backdrop-blur-xl
- bg-white/60
- rounded-2xl
- shadow-xl
- border border-white/30
- p-6
- mb-6
Example:
<div class="backdrop-blur-xl bg-white/60 rounded-2xl shadow-xl border border-white/30 p-6 mb-6">
MODAL/CONTAINER
---------------
Classes:
- backdrop-blur-2xl
- bg-white/80
- rounded-3xl
- shadow-2xl
- border border-white/30
Backdrop:
- backdrop-blur-sm
- bg-black/20
Example:
<div class="fixed inset-0 backdrop-blur-sm bg-black/20 z-50">
<div class="backdrop-blur-2xl bg-white/80 rounded-3xl shadow-2xl border border-white/30">
<!-- Modal content -->
</div>
</div>
QUICK INFO CARD (Smaller card)
-------------------------------
Classes:
- backdrop-blur-xl
- bg-white/40
- rounded-2xl
- p-4
- border border-white/30
- shadow-lg
Example:
<div class="backdrop-blur-xl bg-white/40 rounded-2xl p-4 border border-white/30 shadow-lg">
================================================================================
BUTTONS
================================================================================
PRIMARY BUTTON (ACTIVE STATE)
------------------------------
Classes:
- backdrop-blur-sm
- bg-indigo-600/90
- text-white
- rounded-xl
- shadow-lg
- hover:bg-indigo-700/90
- hover:shadow-xl
- transition-all
Example:
<button class="backdrop-blur-sm bg-indigo-600/90 text-white rounded-xl shadow-lg
hover:bg-indigo-700/90 hover:shadow-xl transition-all">
SECONDARY BUTTON (INACTIVE STATE)
----------------------------------
Classes:
- backdrop-blur-sm
- text-gray-700
- rounded-xl
- hover:bg-white/40
- transition-all
Example:
<button class="backdrop-blur-sm text-gray-700 rounded-xl hover:bg-white/40 transition-all">
BUTTON GROUP CONTAINER (View Toggle)
-------------------------------------
Classes:
- inline-flex
- rounded-2xl
- border border-white/30
- backdrop-blur-xl
- bg-white/60
- p-1
- shadow-lg
Example:
<div class="inline-flex rounded-2xl border border-white/30 backdrop-blur-xl bg-white/60 p-1 shadow-lg">
<!-- Toggle buttons inside -->
</div>
VIEW TOGGLE BUTTONS
-------------------
Active Button:
- backdrop-blur-sm
- bg-indigo-600/90
- text-white
- rounded-xl
- shadow-lg
- hover:bg-indigo-700/90
- transition-all
Inactive Button:
- backdrop-blur-sm
- text-gray-700
- rounded-xl
- hover:bg-white/40
- transition-all
FORM BUTTONS
------------
Save Button:
- backdrop-blur-sm
- bg-indigo-600/90
- text-white
- rounded-xl
- shadow-lg
- hover:bg-indigo-700/90
- hover:shadow-xl
- transition-all
Cancel Button:
- backdrop-blur-sm
- bg-white/60
- border border-white/40
- text-gray-700
- rounded-xl
- shadow-lg
- hover:bg-white/80
- hover:shadow-xl
- transition-all
MAP BUTTONS (Apple Maps / Google Maps)
---------------------------------------
Apple Maps:
- backdrop-blur-sm
- bg-gray-900/90
- text-white
- rounded-xl
- shadow-lg
- hover:bg-gray-800/90
- hover:shadow-xl
Google Maps:
- backdrop-blur-sm
- bg-blue-600/90
- text-white
- rounded-xl
- shadow-lg
- hover:bg-blue-700/90
- hover:shadow-xl
================================================================================
FORM ELEMENTS
================================================================================
INPUT FIELDS
------------
Classes:
- border border-white/40
- rounded-xl
- backdrop-blur-sm
- bg-white/40
- focus:ring-2
- focus:ring-indigo-500/50
- focus:border-indigo-300/50
- transition-all
- shadow-sm
- px-3 py-2 (or px-4 py-3 for larger inputs)
Example:
<input class="w-full px-3 py-2 border border-white/40 rounded-xl backdrop-blur-sm bg-white/40
focus:ring-2 focus:ring-indigo-500/50 focus:border-indigo-300/50
transition-all shadow-sm">
SEARCH INPUT
------------
Classes:
- Same as input fields
- Larger padding: px-4 py-3
- text-base
Example:
<input class="w-full px-4 py-3 border border-white/40 rounded-xl backdrop-blur-sm bg-white/40
focus:ring-2 focus:ring-indigo-500/50 focus:border-indigo-300/50
outline-none text-base transition-all shadow-sm">
SELECT DROPDOWNS
----------------
Same classes as input fields
Example:
<select class="w-full px-3 py-2 border border-white/40 rounded-xl backdrop-blur-sm bg-white/40
focus:ring-2 focus:ring-indigo-500/50 focus:border-indigo-300/50
transition-all shadow-sm">
================================================================================
AVATARS & ICONS
================================================================================
AVATAR BUTTON
-------------
Classes:
- rounded-full
- bg-gradient-to-br from-indigo-500 via-purple-500 to-pink-500
- w-10 h-10
- shadow-lg shadow-indigo-500/30
- hover:scale-105
- hover:shadow-indigo-500/50
- transition-all duration-300
- flex items-center justify-center
- text-white
Purpose: User avatar with gradient background and smooth hover effect
Example:
<button class="w-10 h-10 rounded-full bg-gradient-to-br from-indigo-500 via-purple-500 to-pink-500
shadow-lg shadow-indigo-500/30 hover:scale-105 hover:shadow-indigo-500/50
transition-all duration-300 flex items-center justify-center text-white">
<span class="text-xs font-semibold">IC</span>
</button>
AVATAR INITIALS
---------------
Classes:
- text-xs
- font-semibold
- text-white
================================================================================
DROPDOWNS & MENUS
================================================================================
DROPDOWN MENU
-------------
Classes:
- backdrop-blur-xl
- bg-white/80
- rounded-2xl
- shadow-2xl
- border border-white/30
- py-2
- overflow-hidden
- absolute right-0 mt-2
- z-50
- w-48
Purpose: User dropdown menu with glassmorphism
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
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 ITEM
-------------
Classes:
- px-4 py-2.5
- text-sm
- text-gray-700
- hover:bg-white/40
- transition-colors
- font-medium
Example:
<a class="block px-4 py-2.5 text-sm text-gray-700 hover:bg-white/40 transition-colors font-medium">
Preferences
</a>
DESTRUCTIVE DROPDOWN ITEM
--------------------------
Classes:
- w-full text-left
- px-4 py-2.5
- text-sm
- text-red-600
- hover:bg-red-50/50
- transition-colors
- font-medium
Example:
<button class="w-full text-left px-4 py-2.5 text-sm text-red-600 hover:bg-red-50/50
transition-colors font-medium">
Logout
</button>
================================================================================
TABLES
================================================================================
TABLE CONTAINER
---------------
Classes:
- backdrop-blur-xl
- bg-white/60
- rounded-2xl
- shadow-xl
- border border-white/30
- overflow-hidden
Example:
<div class="backdrop-blur-xl bg-white/60 rounded-2xl shadow-xl border border-white/30 overflow-hidden">
TABLE HEADER
------------
Classes:
- backdrop-blur-sm
- bg-white/40
Example:
<thead class="backdrop-blur-sm bg-white/40">
TABLE BODY
----------
Classes:
- bg-white/30
- divide-y divide-white/20
Example:
<tbody class="bg-white/30 divide-y divide-white/20">
TABLE CELLS
-----------
Standard cells:
- px-3 sm:px-6
- py-4
- text-sm
- text-gray-900
Header cells:
- px-3 sm:px-6
- py-2 sm:py-3
- text-xs
- font-medium
- text-gray-500
- uppercase
- tracking-wider
================================================================================
MODALS & OVERLAYS
================================================================================
MODAL BACKDROP
--------------
Classes:
- fixed inset-0
- backdrop-blur-sm
- bg-black/20
- overflow-y-auto
- z-50
Example:
<div class="fixed inset-0 backdrop-blur-sm bg-black/20 overflow-y-auto z-50">
MODAL CONTENT
-------------
Classes:
- relative top-0 sm:top-10
- mx-auto
- p-4 sm:p-6
- w-full sm:max-w-7xl (or sm:max-w-4xl for smaller modals)
- backdrop-blur-2xl
- bg-white/80
- rounded-none sm:rounded-3xl
- shadow-2xl
- border border-white/30
- mb-0 sm:mb-10
- min-h-screen sm:min-h-[600px]
Example:
<div class="relative top-0 sm:top-10 mx-auto p-4 sm:p-6 w-full sm:max-w-7xl
backdrop-blur-2xl bg-white/80 rounded-none sm:rounded-3xl shadow-2xl
border border-white/30 mb-0 sm:mb-10 min-h-screen sm:min-h-[600px]">
MODAL CARDS (Inside modal)
---------------------------
Classes:
- backdrop-blur-xl
- bg-white/60
- rounded-2xl
- shadow-xl
- border border-white/30
- p-6
- mb-6
Example:
<div class="backdrop-blur-xl bg-white/60 rounded-2xl shadow-xl border border-white/30 p-6 mb-6">
================================================================================
PREFERENCES PAGE
================================================================================
PREFERENCES CARD
----------------
Classes:
- backdrop-blur-xl
- bg-white/60
- rounded-2xl
- shadow-xl
- border border-white/30
- p-6
PREFERENCE SECTION DIVIDER
---------------------------
Classes:
- border-b border-white/20
- py-4
RADIO BUTTON OPTIONS
--------------------
Container:
- flex flex-col sm:flex-row
- gap-4
Option Label:
- flex items-center
- p-4
- border-2 border-white/30
- backdrop-blur-sm
- bg-white/40
- rounded-2xl
- cursor-pointer
- hover:border-indigo-500/50
- hover:bg-white/60
- transition-all
- shadow-sm
Selected State (via JavaScript):
- border-indigo-500
- bg-indigo-50/50
- shadow-md
Example:
<label class="view-option flex items-center p-4 border-2 border-white/30 backdrop-blur-sm
bg-white/40 rounded-2xl cursor-pointer hover:border-indigo-500/50
hover:bg-white/60 transition-all shadow-sm" data-value="table">
<input type="radio" name="defaultView" value="table" class="sr-only">
<!-- Content -->
</label>
================================================================================
OPACITY LEVELS REFERENCE
================================================================================
BACKGROUND OPACITIES:
- /20 = Very subtle borders and dividers (border-white/20)
- /30 = Standard borders and dividers (border-white/30)
- /40 = Input backgrounds, table rows, option backgrounds (bg-white/40)
- /50 = Hover states, focus rings, selected states (hover:bg-white/50, bg-indigo-50/50)
- /60 = Standard card backgrounds (bg-white/60)
- /70 = Navigation bar (bg-white/70)
- /80 = Dropdowns, modals (bg-white/80)
- /90 = Button backgrounds active state (bg-indigo-600/90, bg-gray-900/90)
BLUR LEVELS:
- backdrop-blur-sm = Subtle blur (4px) - inputs, buttons, table headers
- backdrop-blur-xl = Standard blur (24px) - cards, navigation, dropdowns
- backdrop-blur-2xl = Strong blur (40px) - modals, overlays
================================================================================
SHADOW LEVELS REFERENCE
================================================================================
- shadow-sm = Small shadow (1px) - subtle elevation
- shadow-lg = Large shadow (10px) - buttons, active states, containers
- shadow-xl = Extra large (20px) - cards, main containers
- shadow-2xl = 2X extra large (25px) - modals, dropdowns
COLORED SHADOWS:
- shadow-indigo-500/30 = Subtle colored shadow (avatar default)
- shadow-indigo-500/50 = More prominent colored shadow (avatar hover)
================================================================================
TRANSITION PATTERNS
================================================================================
STANDARD TRANSITION
-------------------
Classes: transition-all duration-300
SMOOTH HOVER
------------
Classes: transition-all duration-300 hover:scale-105
BUTTON TRANSITION
-----------------
Classes: transition-all (includes color, shadow, scale changes)
COLOR TRANSITION
----------------
Classes: transition-colors (for hover state color changes only)
================================================================================
COLOR PALETTE
================================================================================
PRIMARY COLORS:
- indigo-600/90 = Primary button background
- indigo-700/90 = Primary button hover
- indigo-500/30 = Shadow color (subtle)
- indigo-500/50 = Focus ring, stronger shadow, selected states
- indigo-300/50 = Focus border color
GRADIENT COLORS (Avatar):
- from-indigo-500 = Start of gradient
- via-purple-500 = Middle of gradient
- to-pink-500 = End of gradient
TEXT COLORS:
- text-gray-500 = Secondary text, labels
- text-gray-600 = Body text, descriptions
- text-gray-700 = Standard text (inactive buttons, dropdown items)
- text-gray-900 = Headings, important text, dropdown headers
- text-white = Text on colored backgrounds
- text-indigo-600 = Links, active states
- text-indigo-700 = Link hover state
- text-red-600 = Destructive actions (logout)
BORDER COLORS:
- border-white/20 = Subtle borders (navigation, dividers)
- border-white/30 = Standard borders (cards, containers)
- border-white/40 = Input borders
- border-indigo-300/50 = Focus borders
- border-indigo-500 = Selected state borders
BACKGROUND GRADIENT:
- from-gray-50 = Light gray start
- via-blue-50/30 = Light blue middle (30% opacity)
- to-indigo-50/40 = Light indigo end (40% opacity)
================================================================================
COMMON PATTERNS
================================================================================
SEARCH/FILTER CONTAINER
-----------------------
Classes:
- backdrop-blur-xl
- bg-white/60
- rounded-2xl
- shadow-xl
- border border-white/30
- p-6
- mb-6
VIEW TOGGLE BUTTONS
-------------------
Container:
- inline-flex
- rounded-2xl
- border border-white/30
- backdrop-blur-xl
- bg-white/60
- p-1
- shadow-lg
Active Button:
- backdrop-blur-sm
- bg-indigo-600/90
- text-white
- rounded-xl
- shadow-lg
- hover:bg-indigo-700/90
- transition-all
Inactive Button:
- backdrop-blur-sm
- text-gray-700
- rounded-xl
- hover:bg-white/40
- transition-all
MESSAGE CONTAINER
-----------------
Success Message:
- bg-green-50
- border-green-200
- text-green-700
- border
- px-4 py-3
- rounded-xl
- text-sm
- backdrop-blur-sm
Error Message:
- bg-red-50
- border-red-200
- text-red-700
- border
- px-4 py-3
- rounded-xl
- text-sm
- backdrop-blur-sm
================================================================================
RESPONSIVE DESIGN
================================================================================
BREAKPOINTS:
- sm: 640px
- md: 768px
- lg: 1024px
MOBILE (< 640px):
- Single column layouts
- Full-width buttons
- Stacked navigation elements
- Full-screen modals (rounded-none)
- Smaller text sizes (text-sm)
- Reduced padding
TABLET (640px - 1024px):
- Two-column grids where applicable
- Horizontal navigation
- Constrained modals (rounded-3xl)
- Medium text sizes
DESKTOP (> 1024px):
- Multi-column layouts
- Max-width containers (max-w-7xl)
- Side-by-side elements
- Larger text and spacing
================================================================================
IMPLEMENTATION CHECKLIST
================================================================================
When creating a new component with liquid glass style:
[ ] 1. Apply appropriate backdrop-blur level (sm, xl, or 2xl)
[ ] 2. Set semi-transparent background (white/40 to white/80 based on context)
[ ] 3. Add rounded corners (rounded-xl for buttons/inputs, rounded-2xl for cards)
[ ] 4. Include shadow (shadow-lg for buttons, shadow-xl for cards, shadow-2xl for modals)
[ ] 5. Add subtle border (border-white/20 to border-white/40)
[ ] 6. Add transition-all or transition-colors for smooth interactions
[ ] 7. Include hover states with increased opacity/shadow/scale
[ ] 8. Test on gradient background to ensure glass effect is visible
[ ] 9. Ensure proper z-index layering (z-40 for nav, z-50 for modals/dropdowns)
[ ] 10. Verify responsive behavior on mobile, tablet, and desktop
================================================================================
ACCESSIBILITY NOTES
================================================================================
- Ensure sufficient contrast for text readability
- Focus states should be clearly visible (focus:ring-2 focus:ring-indigo-500/50)
- Interactive elements should have clear hover feedback
- Maintain WCAG AA contrast ratios (4.5:1 for normal text)
- Use semantic HTML elements
- Provide keyboard navigation support
- Screen reader friendly labels and ARIA attributes where needed
================================================================================
BROWSER COMPATIBILITY
================================================================================
backdrop-blur requires:
- Chrome 76+
- Firefox 103+
- Safari 9+
- Edge 79+
For older browsers, consider:
- Fallback solid backgrounds
- CSS filters as alternative
- Progressive enhancement approach
================================================================================
PERFORMANCE CONSIDERATIONS
================================================================================
- backdrop-blur can be performance-intensive
- Use sparingly on mobile devices
- Consider will-change: transform for animated elements
- Test on lower-end devices
- Limit the number of blurred layers
- Use backdrop-blur-sm for smaller elements when possible
================================================================================
CURRENT IMPLEMENTATION STATUS
================================================================================
PAGES IMPLEMENTED:
✓ Dashboard (dashboard.html)
✓ Jobs Page (jobs.html)
✓ Notes Page (notes.html)
✓ Preferences Page (preferences.html)
✓ Login Page (index.html) - standard design, not glassmorphism
COMPONENTS IMPLEMENTED:
✓ Navigation bar
✓ User avatar with dropdown
✓ Cards and containers
✓ Search/filter sections
✓ View toggle buttons
✓ Tables
✓ Modals
✓ Form inputs and selects
✓ Buttons (all states)
✓ Preferences page with radio options
================================================================================
END OF PLAYBOOK
================================================================================
Reference in New Issue View Git Blame Copy Permalink