HTML Structure Analysis
Relevant source files
The following files were used as context for generating this wiki page:
The HTML structure of the Solo System project is designed to provide a gamified task management interface inspired by "Solo Leveling." The primary purpose of this structure is to display user statistics, real-time clocks, and a dynamic list of quests or "tasks" that reward or penalize the user based on completion. The architecture relies on a single-page layout that combines semantic HTML5, CSS variables for theming, and embedded JavaScript for state management.
The structure is consistent across the main entry point (index.html) and the quest-specific interface (Quest.html), both featuring a dark-themed UI with blue and red accents to signify "System" and "Penalty" states respectively.
Sources: index.html:1-100, Quest.html:1-100
Core UI Components
The interface is divided into three primary functional blocks: the Header, the Stats Panel, and the Tasks Container. These components are styled using CSS flexbox to ensure vertical alignment and centering.
1. Header and Time Display
The header contains the system title and a dynamic clock. The clock is localized to Saudi Arabian time (Asia/Riyadh) and updates every second via a setInterval function in the script section.
Sources: index.html:71-74, Quest.html:218-220
2. Stats Panel
This component acts as the user's "Status Window." It includes:
- Level Badge: Displays the current level (
LVL. X). - Rank Display: A large alphanumeric character (F through R) representing the user's tier.
- XP Bar: A visual progress bar showing advancement toward the next level requirement.
- Status Message: A contextual area for reward info or penalty warnings.
Sources: index.html:76-91, Quest.html:76-91
3. Tasks Container
The tasks container is an empty div at runtime, populated dynamically by the render() function. Each task is represented as a "Task Card" containing a checkbox, the task description, and a category badge (e.g., Physical, Discipline, Mental).
Sources: index.html:93, index.html:206-214
Data Structure and Logic Flow
The system's logic is embedded directly within the HTML files, utilizing localStorage for persistence. The data structure tracks user progress and the state of daily quests.
Data Model
The system state is stored in a JSON object titled solo_penalty_v1.
| Field | Type | Description |
|---|---|---|
points | Number | The cumulative XP earned by the user. |
lastUpdate | String | The last date (KSA) the tasks were generated. |
dailyTasks | Array | List of current tasks for the day and their status. |
lastPenalty | Number | The value of the last penalty applied for missed tasks. |
Sources: index.html:120-122, Quest.html:120-122
Application Logic Flow
The application follows a specific lifecycle upon loading: it checks the date, applies penalties for the previous day's missed tasks, generates new tasks if necessary, and then renders the UI.
Sources: index.html:168-193, Quest.html:168-193
Styling and Themes
The project uses CSS variables defined in the :root pseudo-class to maintain consistency across the interface.
| Variable | Hex Code | Purpose |
|---|---|---|
--system-blue | #00d2ff | Primary UI accents, borders, and level badges. |
--system-dark | #050510 | Background color for the page body. |
--penalty-red | #ff4d4d | Highlights for penalty messages and high-tier ranks. |
The UI employs a radial-gradient background to create a depth effect, simulating a digital "HUD" (Heads-Up Display).
Sources: index.html:8-13, Quest.html:8-13
Task Generation Engine
Tasks are categorized into physical, discipline, and mental. The system selects a subset of these based on the user's current rank-determined difficulty (diff).
| Difficulty Key | Rank Association | Task Source |
|---|---|---|
f | Rank F/E | Easiest (e.g., 10 Pushups) |
d | Rank D/C/B | Moderate (e.g., 25 Pushups) |
a | Rank A/S | Advanced (e.g., 50 Pushups) |
r | Rank SS/R | Extreme (e.g., 100 Pushups) |
Sources: index.html:107-118, index.html:124-133
The HTML structure serves as a container for this logic, ensuring that the DOM elements (lvl-display, rank-display, xp-bar) are updated immediately when a user toggles a task's completion status via the toggleTask(i) function.
Sources: index.html:195-202, Quest.html:195-202
The Solo System's HTML structure is a cohesive integration of presentation and logic, facilitating a persistent, daily interaction loop for user habit tracking.