### Clone and Install PSone.css Project (Shell) Source: https://github.com/micah5/psone.css/blob/master/README.md Instructions for setting up the development environment for PSone.css. This involves cloning the repository, navigating into the project directory, and installing dependencies using npm. ```sh git clone https://github.com/YOUR_GITHUB_USERNAME/PSone.css.git cd PSone.css npm install ``` -------------------------------- ### Run PSone.css Development Server (Shell) Source: https://github.com/micah5/psone.css/blob/master/README.md Command to start the development server for making changes to the demo page. This command typically rebuilds the project and serves it locally for live preview. ```sh npm run dev ``` -------------------------------- ### PSone.css Radio Button Example Source: https://context7.com/micah5/psone.css/llms.txt Provides an example of custom radio buttons styled in PSone.css, mimicking the PS1 memory card selection screen. This includes checked and unchecked states with interactive elements. ```html
``` -------------------------------- ### PSone.css Button Examples Source: https://context7.com/micah5/psone.css/llms.txt Demonstrates various button styles available in PSone.css, including normal, primary, success, warning, error, and disabled states. These buttons are styled after Tekken 3 menus. ```html ``` -------------------------------- ### PSone.css Container Examples Source: https://context7.com/micah5/psone.css/llms.txt Shows different container styles in PSone.css, including default, dark, and light variants, inspired by Final Fantasy VII dialog boxes. These provide distinct visual framing for content. ```html

Kick! Punch! It's all in the mind.

You see, the island is the site of a secret nuclear weapons disposal facility.

Crash, Crash? Are you there Crash?

``` -------------------------------- ### Complete PS1 Game Menu Example using PSone.css Source: https://context7.com/micah5/psone.css/llms.txt A full HTML page demonstrating the integration of various PSone.css components to create a retro 'PS1 Game Menu' interface. It includes a header, menu options, a settings form with radio buttons and text inputs, and a loading progress bar, all styled with the PS1 aesthetic. ```html PS1 Game Menu

Main Menu

Press to continue

Settings

Please wait...
``` -------------------------------- ### PSone.css Progress Bar Examples Source: https://context7.com/micah5/psone.css/llms.txt Illustrates various progress bar styles in PSone.css, including default, primary, success, warning, error, and indeterminate states. These are styled after Metal Gear Solid elements. ```html
Default
Primary
Success
Warning
Error
Indeterminate
``` -------------------------------- ### Install PSone.css via CDN Source: https://context7.com/micah5/psone.css/llms.txt Integrate PSone.css into your HTML project by including its minified CSS file via a CDN link in the head section of your document. This enables all PSone.css styling for your web page. ```html

Your PS1-styled content here

``` -------------------------------- ### PSone.css Radio Button Component (HTML) Source: https://github.com/micah5/psone.css/blob/master/README.md Provides an example of a styled radio button, mimicking the PS1 memory card screen's appearance. It uses a label, input type 'radio', and span elements with specific classes ('option', 'click') for styling. ```html ``` -------------------------------- ### HTML Text Inputs with PS1 Styling Source: https://context7.com/micah5/psone.css/llms.txt Demonstrates various text input field styles, including basic, placeholder, disabled, and complete form examples, using PSone.css classes for a retro PlayStation look. These inputs are purely styled with CSS and do not require any JavaScript for functionality. ```html

User Information

``` -------------------------------- ### HTML PlayStation Controller Icons using PSone.css Source: https://context7.com/micah5/psone.css/llms.txt Provides HTML snippets for rendering various PlayStation controller icons, including face buttons, D-pad arrows, special buttons (Start, Select), and shoulder buttons (L1, L2, L3, R1, R2, R3). It also shows how to display the PS1 logo and add a clickable effect to icons. ```html ``` -------------------------------- ### Run PSone.css Storybook (Shell) Source: https://github.com/micah5/psone.css/blob/master/README.md Command to run Storybook for visual testing of PSone.css components. Storybook allows developers to develop UI components in isolation. ```sh npm run storybook ``` -------------------------------- ### PSone.css Container Components (HTML) Source: https://github.com/micah5/psone.css/blob/master/README.md Demonstrates the usage of the 'container' component with different variants ('dark', 'light') to style content blocks, inspired by Final Fantasy VII's UI. These containers group related information with distinct visual themes. ```html

Kick! Punch! It's all in the mind.

You see, the island is the site of a secret nuclear weapons disposal facility.

Crash, Crash? Are you there Crash? ... Are you there Crash?

``` -------------------------------- ### PSone.css Input Field Components (HTML) Source: https://github.com/micah5/psone.css/blob/master/README.md Demonstrates styled input fields within a 'field' container, inspired by Final Fantasy VII. Includes a default input and an input with a placeholder, using the 'input' class for styling. ```html
``` -------------------------------- ### PSone.css Button Components (HTML) Source: https://github.com/micah5/psone.css/blob/master/README.md Shows how to create various styled buttons using the 'btn' class, with modifiers for 'primary', 'success', 'warning', and 'error' states, inspired by Tekken 3. These buttons provide visual feedback for user interactions. ```html ``` -------------------------------- ### Basic CSS Styles for PSone.css Source: https://github.com/micah5/psone.css/blob/master/index.html This CSS code defines basic styles for the PSone.css framework, including font families, margins, heights, and positioning for various elements. It also includes media queries to adjust styles for different screen widths, ensuring responsiveness. ```css .play { font-family:"Play"; } .logo { margin: 0 2rem 0 2rem; height: 50px; } .fork-me { position: absolute; right: 0; top: 0; } @media only screen and (max-width: 768px) { .play > .logo { height: 50px; margin-bottom: 40px; } .play { margin-left: 1rem; } .container { width: 90%; } .buttons { display: flex; flex-flow: column wrap; align-items: center; } .containers { width: calc(100% - .5em); } .title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-sizing: border-box; width: 260px; height: 24px; font-size: 50px; line-height: 0px; } .progress:not(:first-child) { margin-top: 35px; } .progress:first-child { margin-top: 10px; } .controller-buttons { margin: 1rem; display: flex; align-items: center; flex-flow: row wrap; } .progress > .subtitle { position: absolute; top: .44em; left: 20%; display: block; } h1 { font-size: 1.7em; } .footer { text-align: center; } .logo { margin-top: .5em; } .fork-me { top: .5em; } .input { width: 90%; } } @media only screen and (min-width: 769px) { .progress > .subtitle { position: absolute; top: .44em; left: 15%; display: block; } .controller-buttons { margin: 1rem; display: flex; align-items: center; flex-flow: row wrap; } } @media only screen and (min-width: 320px) and (max-width: 321px) { body { width: calc(100% + .5em) } h1 { font-size: 1.7em; } } ``` -------------------------------- ### PSone.css Progress Bar Components (HTML) Source: https://github.com/micah5/psone.css/blob/master/README.md Illustrates the implementation of progress bars using 'progress' and 'bar' classes, including different color variants ('primary', 'success', 'warning', 'error') and an 'indeterminate' state, inspired by Metal Gear Solid 1. The 'bar' div's width style attribute controls the progress percentage. ```html
Default
primary
success
warning
error
indeterminate
``` -------------------------------- ### Link PSone.css Stylesheet Source: https://github.com/micah5/psone.css/blob/master/README.md Include this HTML tag in your project's head section to apply the PSone.css styling. This is the primary way to integrate the framework into your web page. ```html ``` -------------------------------- ### HTML Dance Dance Revolution (DDR) Icons Source: https://context7.com/micah5/psone.css/llms.txt Displays Dance Dance Revolution-style arrow icons using PSone.css. This snippet shows the basic implementation of DDR arrow icons, which can be used to mimic the visual style of the popular rhythm game. ```html ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.