Pet Triangle is a single-page browser app that brings a humble SVG triangle to life as your very own virtual pet, inspired by the Tamagotchi toys of the 1990s. There are no frameworks to install, no build steps to run, and no servers to spin up — just three files of pure HTML, CSS, and JavaScript that you open directly in any modern browser and start playing with immediately.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.
How it works
Pet Triangle is split across exactly three files, each with a clear responsibility:index.html
The single HTML page that defines the entire UI: a text input for your pet’s name, the SVG triangle rendered as the pet itself, a color picker to style it, and three action buttons — 🍎 Feed, 🥤 Drink, and 🛝 Play — each displaying a running counter.
style.css
Handles all visual presentation: full-viewport flexbox layout, the black top navigation bar, rounded pill-shaped color picker, action button styles with press animations, and a complete dark mode theme via a
prefers-color-scheme: dark media query.script.js
Registers a
DOMContentLoaded listener and captures references to the buttons, counters, color picker, and name input — laying the groundwork for interactive logic to be added.Key features
- Triangle SVG pet — the pet is a scalable vector graphic triangle centered on the page, inheriting whatever fill color you choose
- Custom pet name — a large, borderless text input at the top of the page lets you give your triangle a personal identity
- Color picker — a styled
<input type="color">element lets you repaint your pet instantly with any color from the browser’s native color chooser - Feed / Drink / Play buttons — three action buttons (🍎 Feed, 🥤 Drink, 🛝 Play) each contain a
<span>counter badge initialized to0, ready to be wired up to interaction logic - Dark mode support — the app automatically switches to a dark background, white text, and a grey pet triangle when your OS or browser is set to dark mode, with no extra configuration needed
- Zero dependencies — no npm, no CDN links, no external libraries; the entire app is self-contained in three plain files
Browser support
Pet Triangle works in any modern browser that supports inline SVG and the native<input type="color"> element — which covers every current release of Chrome, Firefox, Safari, and Edge. Because the app is a single static HTML file, there is nothing to install and nothing to compile; just open index.html and your pet is ready.
Pet Triangle has no persistence layer — there is no localStorage, no server, and no database. Closing or reloading the tab starts a completely fresh session.