UI Design System
Relevant source files
The following files were used as context for generating this wiki page:
The UI Design System of the Solo System project is a web-based interface designed to simulate a "system" interface inspired by "Solo Leveling." It utilizes a dark, high-contrast aesthetic with neon accents to provide users with a gamified task management experience. The system is built primarily using HTML5, CSS3 (using CSS variables), and vanilla JavaScript to handle state synchronization between the data model and the visual representation.
The interface is structured to be responsive and mobile-first, centering its core components—the Status Header, Stats Panel, and Task Container—within a narrow, focused column. The design emphasizes real-time feedback through progress bars, dynamic color changes based on user rank, and immediate status messages.
Sources: index.html:10-40, Quest.html:12-60
Visual Identity and Theming
The system's visual identity is defined by a specific set of CSS variables and background treatments that establish a "cyber-technological" atmosphere.
Color Palette and Variables
The system uses CSS root variables to ensure consistency across different components.
| Variable Name | Value | Purpose |
|---|---|---|
--system-blue | #00d2ff | Primary accent color, borders, and active indicators |
--system-dark | #050510 | Primary background color |
--penalty-red | #ff4d4d | Error states and penalty notifications |
Sources: index.html:11-15, Quest.html:13-17
Background and Typography
The application uses a radial gradient to create depth, simulating a glowing screen.
- Background:
radial-gradient(circle at top, #1a2a4f 0%, #050510 70%) - Typography: The system defaults to
'Segoe UI', sans-serifwith a base color of#eee.
Sources: index.html:17-25, Quest.html:19-27
Core UI Components
The UI is composed of three primary functional blocks that interact with the underlying systemData object.
1. Stats Panel
The Stats Panel is the central hub for player progression. It displays the current level, rank, total experience points (XP), and a progress bar.
- Level Badge: Positioned absolutely at the top-left of the panel with a blue background and bold text.
- Rank Display: Features large, high-impact typography (
4.5rem) that changes color based on the user's rank configuration. - XP Progress Bar: A container with a nested bar that adjusts its width property based on calculated level progress.
Sources: index.html:31-60, Quest.html:33-62, Quest.html:147-152
2. Task Cards
Tasks are rendered as interactive cards within the tasks-container.
- Visual State: Completed tasks are styled with
opacity: 0.3,filter: grayscale(1), and a green right border (#00ffaa). - Interaction: Each card functions as a clickable element that toggles a checkbox and updates the global system state.
- Badges: Tasks include category badges (e.g., "جسدي", "انضباط") to provide context at a glance.
Sources: index.html:65-73, Quest.html:67-75, Quest.html:206-215
Data-to-UI Flow
The interface is reactive to changes in the localStorage state. When a user interacts with a task, the JavaScript logic updates the data model and triggers a re-render of the UI components.
The diagram shows the flow from a user interaction to the final visual update.
Sources: Quest.html:195-218
Rank and Level Calculation Logic
The UI dynamically adjusts its appearance based on the getRankConfig function. This function returns specific colors and requirements that the updateUI function applies to the DOM.
| Rank | Points Required | UI Color | Reward/Penalty |
|---|---|---|---|
| R | 3000+ | #ff4d4d (Red) | +6 / -8 |
| S | 1200+ | #00ffaa (Green) | +4 / -6 |
| A | 800+ | #ffdd57 (Yellow) | +4 / -6 |
| F | 0-69 | #888 (Grey) | +2 / -3 |
Sources: Quest.html:113-125
Dynamic Status Messaging
The system includes a status messaging area below the XP bar that provides contextual information to the user.
The sequence diagram illustrates how the status message switches between normal operation and penalty warnings.
Sources: Quest.html:154-161, index.html:154-161
Implementation Details
CSS Component Classes
| Class Name | Description |
|---|---|
.header | Centered top section containing the system title and Saudi time clock. |
.stats-panel | Glassmorphism-style container with rgba(10, 20, 40, 0.9) background and blue glow. |
.xp-bar | Linear gradient bar (#00d2ff to #3a7bd5) with CSS transition for smooth movement. |
.category-badge | Small bordered label used within task cards to denote task types. |
Sources: index.html:27-75, Quest.html:29-77
Real-time Elements
The UI features a real-time clock synced to the Asia/Riyadh timezone, formatted in Arabic (ar-SA). This is updated every 1000ms using setInterval.
Sources: Quest.html:220-222
The UI Design System effectively translates game mechanics into a functional web interface by leveraging modern CSS for atmosphere and JavaScript for state-driven visual updates. The use of consistent variables and centralized UI update functions ensures that the system remains maintainable as new ranks or task types are added.