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’s interface is intentionally minimal. The entire app lives in a single HTML file with a header, a centered main area, and a fixed action bar at the bottom. There are no modals, no navigation, no loading states — just the triangle and the controls to care for it.

​
Page layout

The layout is divided into three regions, each with a distinct role:
1

Header (#top-nav)

A fixed top bar that stretches the full width of the viewport. It has a black background and white text at all times — independent of the system colour scheme. Inside it, a flexbox row with justify-content: space-between places two items at opposite ends:
  • Left: an <h1> with the class hero displaying the app title, “Pet Triangle”.
  • Right: a <p> element displaying the author credit, ”💛 JC”.
Both elements have margin: 0 5px, cursor: default, and a transition: all 0.15s ease applied. A box-shadow of 0 12px 12px rgba(0,0,0,0.1) gives the header a subtle lift above the content below it.
2

Main area

A <main> element that takes up the remaining vertical space (flex: 0.9) and uses a flex column layout (flex-direction: column, justify-content: center, align-items: center) to vertically and horizontally center its children. It contains two elements in order:
  1. The #pet-name text input, sitting above the triangle with a margin-bottom: 3rem to provide breathing room.
  2. The #pet SVG triangle, centred in the remaining space.
3

Actions bar (#actions-container)

An absolutely positioned container anchored 20px from the bottom of the viewport (position: absolute; bottom: 20px). It holds the two personalisation and interaction controls stacked vertically:
  1. The #pet-color color picker input, sitting above the button row.
  2. The #button-row div containing the three .action buttons — Feed (🍎), Drink (🥤), and Play (🛝) — laid out in a horizontal row.

​
The triangle SVG

The pet itself is rendered as an inline SVG with the id #pet: 
<svg viewBox="0 0 2048 2048" id="pet">
  <g transform="matrix(2.443914,0,0,2.443914,-1478.568019,-1478.568019)">
    <path d="M1024,605L1443,1443L605,1443L1024,605Z" />
  </g>
</svg>
Breaking this down:
  • Dimensions: the element is sized to 150px × 150px via CSS (width: 150px; height: 150px), making it a compact but clearly visible centrepiece of the layout.
  • ViewBox: 0 0 2048 2048 sets a large internal coordinate space, allowing the path to be defined with high-precision integer coordinates that scale cleanly to any display size.
  • Matrix transform: the <g> element applies a matrix transform — a uniform scale of ~2.44× with negative translations — to centre the triangle path within the viewBox. The path coordinates (M1024,605 L1443,1443 L605,1443) describe an equilateral triangle drawn at the natural centre of the 2048×2048 grid; the transform scales it up to fill the viewBox correctly.
  • Fill: by default, the path inherits the SVG’s fill from CSS. In dark mode, #pet { fill: rgb(100, 100, 100); } overrides this to a mid-grey. The #pet-color color picker and #pet SVG are both referenced in script.js, ready for dynamic fill logic to be wired up.

​
Button styling

All three action buttons share the .action class, which applies a consistent visual style: 
.action {
    border-radius: 8px;
    border: 2px solid black;
    background-color: white;
    font-size: 32px;
    padding: 10px 20px;
    cursor: pointer;
    margin: 0 2px;
    transition: all 0.12s ease;
}

.action:active {
    transform: scale(0.95);
}
Key details:
  • Shape: border-radius: 8px gives each button softly rounded corners.
  • Border: 2px solid black creates a strong, legible outline that matches the color picker’s border weight.
  • Background: white in light mode, black in dark mode (overridden by the prefers-color-scheme: dark media query).
  • Font size: 32px renders the emoji at a comfortable, tappable size without requiring any icon library.
  • Spacing: padding: 10px 20px provides generous tap targets; margin: 0 2px keeps buttons close together without merging them visually.
  • Press animation: transform: scale(0.95) on :active gives immediate tactile feedback on both click and touch. The transition: all 0.12s ease makes the animation snappy without feeling abrupt.

​
Responsive behavior

Pet Triangle is built to work naturally on any screen size:
  • Viewport meta tag: <meta name="viewport" content="width=device-width, initial-scale=1.0"> prevents mobile browsers from applying a default zoom-out, ensuring the interface renders at native scale on phones and tablets.
  • Flexbox centering: the body uses display: flex; flex-direction: column; align-items: center to horizontally center all content, and the <main> element uses justify-content: center to vertically center the pet and its name within the available space.
  • Absolute-positioned action bar: anchoring #actions-container to bottom: 20px keeps the buttons thumb-reachable at the bottom of the screen on mobile, regardless of viewport height.
  • Touch :active fix: the ontouchstart="" attribute on <body> enables CSS :active state firing on iOS Safari, so the button press animation works identically on touch devices as it does with a mouse.
Pet Triangle uses the system font stack — Arial, Helvetica, sans-serif — declared on the body element. No external fonts are requested, no Google Fonts CDN call is made, and no font files are bundled. This means the app renders immediately with zero font-related layout shift, works fully offline after the first load, and respects any custom system fonts the user has configured.

Build docs developers (and LLMs) love

Get started for freeTalk to us