Responsive Layout

Relevant source files

The following files were used as context for generating this wiki page:

• index.html
• Quest.html
• README.md

Introduction

The Responsive Layout of the Solo Leveling Penalty System is designed to provide a high-fidelity, mobile-first interface that mimics the "System" interface from the Solo Leveling series. It utilizes CSS Flexbox and modern CSS properties to ensure that the quest tracking and character status panels remain centered and functional across various screen sizes.

The layout is characterized by a dark, gamified aesthetic using radial gradients and neon blue accents. It prioritizes readability and interaction, ensuring that task cards and progress bars adapt dynamically to the viewport height and width.
Sources: index.html:10-30, Quest.html:10-30

Visual Architecture

The system employs a centralized column-based architecture. The primary container uses a flexbox layout to align the header, status panel, and task list vertically along the center of the viewport.

Core Layout Components

The layout is structured into three main containers:

• Header: Contains the system title and a real-time clock synced to Riyadh time.
• Stats Panel: A high-density information card displaying Level, Rank, and XP progress.
• Tasks Container: A list-based container for interactive task cards.

The diagram above illustrates the vertical nesting of components within the 500px constrained layout.
Sources: index.html:17-40, Quest.html:17-40

CSS Styling and Responsiveness

The responsiveness is achieved through a combination of percentage-based widths and max-width constraints, ensuring the UI does not exceed 500px on desktop but fills the screen on mobile devices.

Layout Constraints

Element	Width Property	Max-Width	Display Mode
body	100%	N/A	flex / column / center
.header	100%	500px	block
.stats-panel	100%	500px	relative
.tasks-container	100%	500px	block

Sources: index.html:17-25, Quest.html:17-25

Dynamic UI Elements

The interface includes several elements that change state based on user interaction or data updates:

1. XP Bar: Uses a transition property transition: width 0.6s ease-in-out to animate progress changes.
2. Task Cards: Change opacity and apply a grayscale filter when the completed class is added.
3. Rank Display: Dynamically updates text color and text shadow based on the user's current point threshold.

/* Styling for task completion state */
.task-card.completed { 
    border-right-color: #00ffaa; 
    opacity: 0.3; 
    filter: grayscale(1); 
}

/* XP Bar transition */
.xp-bar { 
    height: 100%; 
    width: 0%; 
    background: linear-gradient(90deg, #00d2ff, #3a7bd5); 
    transition: width 0.6s ease-in-out; 
}

Sources: index.html:50-60, Quest.html:50-60

Component Alignment Logic

The layout uses specific Flexbox patterns to maintain the "System" aesthetic:

• Rank Information: Uses justify-content: space-between and align-items: flex-end to position the large rank letter (e.g., "F") against the total XP value.
• Task Cards: Uses display: flex and align-items: center to align the checkbox, task description, and category badge. The category badge is pushed to the far right using margin-right: auto (in RTL layout).

This sequence shows how the layout reflects internal state changes through DOM manipulation.
Sources: index.html:103-120, Quest.html:103-120

Conclusion

The Responsive Layout of the Solo-System- project provides a robust, visually immersive experience. By utilizing a fixed-width container logic (max-width: 500px) and flexbox alignment, it ensures that the character-leveling experience remains consistent and readable across both desktop and mobile web browsers.
Sources: index.html:1-70, Quest.html:1-70