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 needs no install, no build, and no server. The fastest way to get started is to clone the repo and open index.html directly — your pet triangle will be alive in your browser within seconds.
1

Clone the repository

Clone the project from GitHub and move into the project directory:
git clone https://github.com/mr-sunset/pet-triangle.git
cd pet-triangle
2

Open the app

Open index.html directly in your default browser using the command for your operating system:
open index.html
Your browser will load the file from the local filesystem — no local server required.
3

Meet your triangle

Once the page loads you will see:
  • A black top navigation bar with the title “Pet Triangle”
  • A name input field centered near the top of the page, ready for you to type your pet’s name
  • A black triangle SVG displayed prominently in the center of the screen — that is your pet
  • A color picker styled as a rounded pill directly below the triangle
  • Three action buttons at the bottom of the page: 🍎 Feed, 🥤 Drink, and 🛝 Play, each showing a counter starting at 0
4

Care for your pet

Now that you are acquainted, take care of your triangle:
  1. Name your pet — click the name input at the top and type any name you like (up to 30 characters)
  2. Pick a color — click the color picker pill to open your browser’s native color chooser and select a fill color for the triangle; it updates immediately
  3. Perform care actions — click 🍎 Feed, 🥤 Drink, or 🛝 Play at any time; each button displays a counter badge that starts at 0 (counter logic is not yet implemented)

Hosting on a static server

Because Pet Triangle is a plain set of static files, it can be served from any static file host or local HTTP server with no configuration. To preview it over HTTP using Python’s built-in server, run the following command from inside the project directory:
python3 -m http.server 8080
Then open your browser and navigate to http://localhost:8080 to see Pet Triangle served over HTTP just as it would be on a production static host.
For a smoother development experience, use a live-reload tool such as the Live Server extension for VS Code. It automatically refreshes the browser whenever you save a change to index.html, style.css, or script.js — no manual reloads needed.

Build docs developers (and LLMs) love