A Window With Tabs and Groups

Set your listening preferences

Today's mood

Nicki Minaj

Bell Towers

The Glamorous Monique

EN. V

Try this to get some attention

``` -------------------------------- ### Implement HTML Title Bar with Multiple Control Buttons Source: https://botoxparty.github.io/XP.css/index Provides examples of creating flexible title bars with various control buttons (Minimize, Restore, Close, Help) using `aria-label` for assistive technologies, demonstrating how to customize title bar configurations for different window types. ```html

A Title Bar

A Helpful Bar

``` -------------------------------- ### Indeterminate Progress Bar HTML Example Source: https://botoxparty.github.io/XP.css/index Illustrates an indeterminate progress bar using the `` HTML element without a `value` attribute. This indicates an ongoing operation where the total progress or estimated time is unknown. ```html ``` -------------------------------- ### Demonstrate HTML Checkbox States and Grouping Source: https://botoxparty.github.io/XP.css/index This example showcases various checkbox states, including checked and disabled, using standard HTML attributes. Wrapping each input in a `div` with the `field-row` class ensures consistent spacing and proper grouping of related controls, maintaining visual alignment. ```HTML

I am checked

I am inactive

I am inactive but still checked

``` -------------------------------- ### Nested and Expandable TreeView with xp.css Source: https://botoxparty.github.io/XP.css/index This advanced tree view example demonstrates how to create nested and expandable sections within an `xp.css` tree view. Nested `ul` elements provide indentation for hierarchical relationships, while `details` and `summary` tags enable collapsible sections, enhancing user interaction and content organization. ```HTML

Table of Contents
What is web development?
CSS
- Selectors
- Specificity
- Properties
JavaScript
- Avoid at all costs
- Unless
  - Avoid
  - At
    
    Avoid
    
    At
    
    All
    
    Cost
  - All
  - Cost
HTML
Special Thanks

``` -------------------------------- ### Basic TreeView Component in xp.css Source: https://botoxparty.github.io/XP.css/index This HTML snippet shows the fundamental structure for creating a tree view component using `xp.css`. An unordered list (`ul`) with the `tree-view` class serves as the container, and its list items (`li`) represent the nodes. This basic setup allows for displaying hierarchical data in a simple, indented outline. ```HTML

We can put
✨ Whatever ✨
We want in here

``` -------------------------------- ### Implementing a Status Bar in xp.css Source: https://botoxparty.github.io/XP.css/index This example illustrates how to add a status bar to a window using `xp.css`. The main status bar container uses the `status-bar` class, while individual text elements within it are styled with `status-bar-field`. This mimics the classic Windows status bar behavior, displaying contextual information at the bottom of a window. ```HTML

A Window With A Status Bar

There are just so many possibilities:

A Task Manager
A Notepad
Or even a File Explorer!

Press F1 for help

Slide 1

CPU Usage: 14%

``` -------------------------------- ### Implement HTML Radio Buttons with Checked and Disabled States Source: https://botoxparty.github.io/XP.css/index This example illustrates how to apply the `checked` and `disabled` HTML attributes to radio buttons. The `checked` attribute pre-selects a radio button, while the `disabled` attribute makes it unclickable and visually distinct, preventing user interaction. ```HTML

Peanut butter should be smooth

I understand why people like crunchy peanut butter

Crunchy peanut butter is good

``` -------------------------------- ### HTML GroupBox with Fieldset Source: https://botoxparty.github.io/XP.css/index Demonstrates how to create a basic group box using the HTML `

` tag to organize a set of controls. This structure provides a rectangular frame with a sunken outer border and a raised inner border, resembling an engraved box around the contained elements. This example shows radio buttons within the group box. ```html

Select one:

Diners

Drive-Ins

Dives

``` -------------------------------- ### Render Basic HTML Dropdown List Source: https://botoxparty.github.io/XP.css/index Demonstrates how to create a simple dropdown list using the HTML ` ``` -------------------------------- ### HTML for a Basic Windows XP-style Window Structure Source: https://botoxparty.github.io/XP.css/index This snippet provides the foundational HTML for rendering a complete Windows XP-style window. It includes the outer `window` container, a `title-bar` with text, and control buttons for minimize, maximize, and close actions. The `style` attribute demonstrates how to set a custom width for the window. ```html

A Complete Window

``` -------------------------------- ### HTML for a Windows XP-style Command Prompt Simulation Source: https://botoxparty.github.io/XP.css/index This snippet demonstrates how to create a visual representation of a Windows XP command prompt within a standard window frame. It utilizes the `

` tag inside the `window-body` to preserve whitespace and line breaks, effectively mimicking the appearance of a console output with preformatted text.

```html

  
    Command Prompt
    
      
      
      
    
  
  
    Microsoft❮R❯ Windows DOS
❮C❯ Copyright Microsoft Corp 1990-2001.
      
C:\WINDOWS\SYSTEM32> You can build a command line easily with a window and pre tag
    
  

```

--------------------------------

### Create a Basic HTML Checkbox with Label

Source: https://botoxparty.github.io/XP.css/index

This snippet demonstrates how to create a standard checkbox. It is crucial to pair the `` with a `` element using matching `for` and `id` attributes for accessibility and improved user experience, allowing users to click the label to toggle the checkbox.

```HTML

This is a checkbox
```

--------------------------------

### Create a Basic HTML Button

Source: https://botoxparty.github.io/XP.css/index

This code demonstrates the fundamental HTML structure for a standard button. XP.css automatically styles this `
```

--------------------------------

### Create Basic HTML Title Bar with Close Button

Source: https://botoxparty.github.io/XP.css/index

Shows how to construct a fundamental window title bar component using `div` elements with `title-bar`, `title-bar-text`, and `title-bar-controls` classes, including a basic close button enhanced with `aria-label` for accessibility.

```html

  A Title Bar
  
    
  

```

--------------------------------

### HTML Single-line Text Box

Source: https://botoxparty.github.io/XP.css/index

Shows how to create a standard single-line text input field using ``. It emphasizes the importance of providing a corresponding `` with a properly set `for` attribute for accessibility, and wrapping both in a container with the `field-row` class for consistent styling.

```html

  Occupation
  

```

--------------------------------

### Creating a Tabbed Interface with xp.css

Source: https://botoxparty.github.io/XP.css/index

This HTML snippet demonstrates how to construct a tabbed interface using `xp.css` classes. It utilizes `input` elements for tab selection, `label` elements for tab headers, and `article` tags with `role="tabpanel"` and `hidden` attributes for tab content. The structure allows for easy switching between different content sections.

```HTML

  
    My Tabbed Window
  
  
    
      
      About
      
      Food
    
    
      
        You create the content for each tab by using an article tag.
      
      
    

    
      
        You create the content for each tab by using an article tag.
      
      
    
    
      
      
    
  

```

--------------------------------

### Import XP.css Styles in JavaScript

Source: https://botoxparty.github.io/XP.css/index

For JavaScript-based projects, import the XP.css stylesheet directly into your main JavaScript file or component. This allows bundlers to process and include the CSS, applying the Windows XP theme to your application's elements.

```JavaScript
// For XP
import "xp.css/dist/XP.css";
```

--------------------------------

### HTML Basic Slider Input

Source: https://botoxparty.github.io/XP.css/index

Illustrates the creation of a basic slider control using ``. This element provides a bar that defines a range and an indicator to show the current value, commonly used for adjustments like volume or brightness.

```html

  Volume:
  Low
  
  High

```

--------------------------------

### Import 98.css Styles in JavaScript

Source: https://botoxparty.github.io/XP.css/index

For JavaScript-based projects, import the 98.css stylesheet directly into your main JavaScript file or component. This allows bundlers to process and include the CSS, applying the Windows 98 theme to your application's elements.

```JavaScript
// For 98
import "xp.css/dist/98.css";
```

--------------------------------

### HTML Multi-line Text Area

Source: https://botoxparty.github.io/XP.css/index

Explains how to create a multi-line text input control using the `` element. This is suitable for capturing longer user inputs such as notes, comments, or detailed descriptions, allowing users to enter and edit multiple lines of text.

```html
<div class="field-row-stacked" style="width: 200px">
  <label for="text24">Additional notes</label>
  <textarea id="text24" rows="8">

``` -------------------------------- ### Create Accessible HTML Tabs with ARIA Roles Source: https://botoxparty.github.io/XP.css/index This snippet provides the foundational HTML structure for a tabbed interface, emphasizing accessibility through ARIA roles. It uses a `menu` with `role="tablist"` for the tab navigation, `button` elements with `role="tab"` and `aria-controls` for individual tabs, and `article` elements with `role="tabpanel"` for the corresponding content panels. The `aria-selected` attribute indicates the currently active tab. ```HTML

Tab Content

You create the tabs, you would use a menu role="tablist" element then for the tab titles you use a button with the aria-controls parameter set to match the relative role="tabpanel"'s element.

Read more at MDN Web docs - ARIA: tab role

``` -------------------------------- ### Implement Basic HTML Radio Buttons with Grouping Source: https://botoxparty.github.io/XP.css/index This snippet demonstrates how to create a group of mutually exclusive radio buttons using the `input type="radio"` element. Radio buttons are grouped by assigning them the same `name` attribute. Each input is wrapped in a `div` with the `field-row` class for consistent spacing and styling. ```HTML

Yes

``` -------------------------------- ### Set Default Selected Option in HTML Dropdown Source: https://botoxparty.github.io/XP.css/index Illustrates how to pre-select a specific option in an HTML dropdown list by applying the `selected` attribute to one of the `

Tab Content

More...

Tab 3