GTA
/
training-academy
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 2 Wiki Activity
training-academy/docs/color-palette-rollout.md

4.7 KiB
Raw Blame History

🎨 Color Palette Unification - Phased Rollout Plan

Current Issues Identified

  • Training Academy: Purple theme (#9b59b6, #2d1b3d)
  • Quick Play: Cyan/Blue theme (#00d4ff)
  • Porn Cinema: Uses external CSS files
  • Hypno Gallery: Blue/Purple gradient (#667eea, #764ba2)
  • Inconsistent accent colors, button styles, and opacity values across pages

Phase 1: Define Core Color System ✅

Goal: Create a centralized CSS variables file with theme support

Tasks:

  1. ✅ Create src/styles/color-variables.css with CSS custom properties
  2. ✅ Define primary color palette (default theme)
  3. ✅ Define semantic color tokens (button-primary, header-bg, etc.)
  4. ⏳ Add alternative theme variants (data-theme attribute support)
  5. ⏳ Create theme manager utility for user preference persistence

Files to create: 1 CSS file, 1 JS utility
Status: PARTIALLY COMPLETE - needs theme variants

Phase 2: Update Global Styles

Goal: Convert src/styles/styles.css to use CSS variables + add theme UI

Tasks:

  1. Import color-variables.css into styles.css
  2. Replace hardcoded colors with var(--color-name) references
  3. Update base button styles, typography, containers
  4. Add theme switcher UI component (dropdown/buttons in header)
  5. Test that existing pages still work with default theme

Files to modify: src/styles/styles.css
Files to create: Theme switcher component (can be in styles.css initially)
Estimated time: Medium - careful find & replace + UI component

Phase 3: Update Quick Play

Goal: Convert quick-play.html inline styles to use variables

Tasks:

  1. Import color-variables.css
  2. Replace all hex/rgba colors with CSS variables
  3. Ensure header, buttons, controls match new palette
  4. Test functionality

Files to modify: quick-play.html
Estimated time: Medium - lots of inline styles

Phase 4: Update Training Academy

Goal: Align training-academy.html with unified palette

Tasks:

  1. Import color-variables.css
  2. Convert purple theme to use primary variables
  3. Update header, buttons, training cards, video controls
  4. Test all training modes

Files to modify: training-academy.html
Estimated time: Large - most complex page

Phase 5: Update Porn Cinema

Goal: Standardize porn-cinema styles

Tasks:

  1. Update src/styles/porn-cinema.css to use variables
  2. Convert inline styles in porn-cinema.html
  3. Ensure theater mode styling is consistent
  4. Test video player controls

Files to modify: porn-cinema.html, src/styles/porn-cinema.css
Estimated time: Medium

Phase 6: Remaining Pages

Goal: Complete platform-wide unification

Tasks:

  1. Update hypno-gallery.html
  2. Update user-profile.html
  3. Update player-stats.html
  4. Update any other HTML pages
  5. Final cross-page visual audit

Files to modify: 3-5 HTML files
Estimated time: Medium

Phase 7: Testing & Polish

Goal: Ensure consistency and no regressions

Tasks:

  1. Visual regression testing across all pages
  2. Dark mode support verification
  3. Accessibility contrast ratio checks
  4. Document the color system in README

Implementation Notes

  • Total Estimated Phases: 7
  • Recommended approach: One phase per commit
  • Start with: Phase 1 (Define Core Color System)
  • Branch: Continue on feature/visual-continuity
  • Theme Support: User can switch between color themes via UI control
  • Theme Persistence: Save user preference to localStorage
  • Available Themes:
    • Default (Cyan/Purple)
    • Neon Pink
    • Deep Purple
    • Matrix Green
    • Blood Red
    • (More can be added later)

Color Analysis Reference

Training Academy Colors

  • Primary: #9b59b6 (purple)
  • Background gradient: #1a1a1a → #2d1b3d
  • Accent variations: #c29bd6, #e74c3c (red)
  • Info blue: #3498db

Quick Play Colors

  • Primary: #00d4ff (cyan/neon blue)
  • Background: rgba(0, 0, 0, 0.9)
  • Border: #00d4ff

Hypno Gallery Colors

  • Gradient: #667eea → #764ba2 (blue to purple)
  • Primary: #667eea

Common Patterns

  • Dark backgrounds: rgba(0, 0, 0, 0.7-0.9)

  • Text: #ffffff, #e8e8e8, #ecf0f1

  • Borders: Various with rgba transparency

  • color palette 1 #8386f5 #3d43b4 #041348 #083e12 #1afe49

  • color palette 2
    #f887ff #de004e #860029 #321450 #29132e

  • color palette 3 #ff124f #ff00a0 #fe75fe #7a04eb #120458

  • color palette 4 #7700a6 #fe00fe #defe47 #00b3fe #0016ee

  • color palette 5 #ff2a6d #f70e0eff #aa477eff #005678 #01012b

  • color palette 6 #fff69f #fdd870 #d0902f #a15501 #351409

  • color palette 7 #b0acb0 #e2dddf #85ebd9 #3d898d #2f404d

  • color palette 8 #ff184c #ff577d #ffccdc #0a9cf5 #003062