Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/mr-sunset/pet-triangle/llms.txt

Use this file to discover all available pages before exploring further.

Pet Triangle provides two personalization controls — a text input for the pet’s name and a color picker for its fill color. Both controls are rendered directly in the browser with no page reload needed, and their DOM elements are referenced in script.js for wiring up interactive behavior.

​
Setting a pet name

The #pet-name input sits above the triangle SVG in the main area. Click or tap anywhere on it to start typing a name for your pet. 
<input type="text" id="pet-name" max="30" placeholder="Pet name">
The field is designed to blend into the page rather than call attention to itself:
  • Background: fully transparent, so it inherits the page background.
  • Border: none by default — it looks like plain centered text until you interact with it.
  • Text alignment: centered, matching the visual balance of the layout.
  • Font size: xx-large, giving the name the same visual weight as the triangle beneath it.
  • Placeholder: "Pet name" — shown in the browser’s default placeholder colour until you type.
  • Maximum length: 30 characters (max="30"), keeping names from overflowing the layout.
When the field is focused, a 2px solid outline appears around it so you always know where your cursor is. The outline colour adapts to the current colour scheme: black in light mode, white in dark mode (see Dark mode below).

​
Changing the triangle’s color

The #pet-color input is a standard HTML color picker, styled to look like a pill-shaped swatch rather than the browser’s default square widget. 
<input type="color" id="pet-color">
Click or tap the swatch to open the browser’s native color picker dialog. The #pet-color input and the #pet SVG element are both referenced in script.js, ready for color-change logic to be connected. The custom styling applied to the input makes it feel native to the app’s design:
PropertyValueEffect
width200pxWide enough to show the current colour clearly
height30pxCompact, sits neatly in the actions bar
border-radius20pxPill shape — fully rounded ends
border2px solid blackCrisp outline matching the action buttons
overflowhiddenKeeps the swatch colour contained within the pill shape
Like the action buttons, the color picker responds to clicks and taps with a subtle press animation (transform: scale(0.95)) over a 0.12s ease transition. The picker’s internal swatch area is also restyled using vendor-prefixed pseudo-elements to strip browser default padding and borders and enforce the pill shape consistently: 
#pet-color::-webkit-color-swatch-wrapper {
    padding: 0;
    border: none;
    background: transparent;
}

#pet-color::-webkit-color-swatch {
    border: 2px solid black;
    border-radius: 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    box-sizing: border-box;
}

#pet-color::-moz-color-swatch {
    border: 2px solid black;
    border-radius: 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    box-sizing: border-box;
}
The -webkit- rules target Chrome, Edge, and Safari; the -moz- rule targets Firefox. Together they produce a consistent pill-shaped swatch across all major desktop and mobile browsers.

​
Dark mode

Pet Triangle automatically adapts to your operating system’s colour scheme via the CSS prefers-color-scheme: dark media query. No toggle or setting is required — if your system is in dark mode, the app switches automatically. 
@media (prefers-color-scheme: dark) {
  body {
    background-color: rgb(20, 20, 20);
    color: white;
  }
  #pet { fill: rgb(100, 100, 100); }
  .action {
    background-color: black;
    border: 2px solid white;
    color: white;
  }
}
The changes in dark mode are:
  • Background: the page background switches from white to rgb(20, 20, 20) — a near-black that’s easier on the eyes than pure black.
  • Text: all text, including the pet name input, becomes white.
  • Triangle fill: the #pet SVG path fill changes to rgb(100, 100, 100), a mid-grey that stands out against the dark background without being harsh.
  • Action buttons: background becomes black, border and text colour become white — inverting the light-mode scheme.
  • Focused name input: the focus outline switches from black to white so it remains visible against dark backgrounds.
  • Color picker: the color-scheme: dark declaration on #pet-color hints to the browser to render the native color picker dialog in dark mode as well.
The entered name is not saved between sessions — closing or refreshing the page resets it to the placeholder. There is no localStorage integration in the current version of the app.

Build docs developers (and LLMs) love

Get started for freeTalk to us