Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/windows-98/llms.txt

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

The Contact page lives at /contact and is styled as a classic personal-site guestbook from the late 1990s. The window uses a stardust texture background and is split into two halves: a form on the left where visitors can leave their name/handle and a message, and a Recent Visitors list on the right that displays prior entries. A <marquee> element scrolls an anti-spam message above the form inputs, and three decorative 88×31 web badges are shown below the submit buttons.
The guestbook form is front-end only. There is no backend, database, or API connected to this page. Submitted entries are stored in React component state and are lost on page refresh or navigation. Submission feedback is delivered via the browser’s native alert() dialog — alert("Thanks for signing my guestbook!") — not a toast or inline confirmation. Do not use this form expecting messages to be received or stored permanently.

​
Win98 Window configuration

PropertyValue
Window titleSign My Guestbook
Title bar iconmail (Lucide), magenta
Width800 px
Height600 px
Interior backgroundStardust texture (bg-[url(...stardust.png)])

​
Left half — guestbook form

The form contains two input fields and two action buttons:
ElementTypePurpose
Name / Handle<input type="text">Visitor’s display name (required)
Message<textarea>Free-text message body (required)
Submit<button type="submit">Prepends entry to visitors list, fires alert()
Clear<button type="reset">Resets both form fields to empty strings
A <marquee> element scrolls the following text above the form inputs: 
Don't forget to sign the guestbook before you leave! ~*~ No spam plz ~*~
On submit, the component checks that both the name field (r) and message field (i) are non-empty, then prepends the new entry to the visitors state array so it appears at the top of the Recent Visitors list. The browser then fires alert("Thanks for signing my guestbook!") and both fields are cleared. 
// In main.js — Contact component submit handler
const handleSubmit = (e) => {
  e.preventDefault();
  if (r && i) {
    setVisitors([{ name: r, date: new Date().toLocaleDateString(), message: i }, ...visitors]);
    setName("");
    setMessage("");
    alert("Thanks for signing my guestbook!");
  }
};

​
88×31 web badges

Three decorative badges sit below the submit buttons, rendered as styled <div> elements inside a flex row:
Badge labelBackgroundText color
IE 4.0bg-blue-600white
RSS FEEDbg-orange-500white
VALID HTMLbg-blacktext-green-400
Each badge is exactly 88 × 31 px, matching the classic web badge standard.

​
Right half — Recent Visitors list

The right panel shows a scrollable list of guestbook entries. Three default entries are hard-coded in the initial visitors state via the Pd array:
NameDateMessage
CoolDude9910/12/1999”Awesome site! Added u to my webring.”
xX_Angel_Xx04/05/2001”luv the colors <3 plz sign my guestbook back!”
WebMaster_Dan11/20/2003”Your HTML is very clean. Good use of tables.”
Each entry renders as a small card with the name, date, and message. The very first entry in the list (index 0) always displays a “NEW!” badge in yellow/red, regardless of whether it was just submitted or is a default entry.

​
Customizing the Contact page

Edit the Pd array in main.js that seeds the initial visitors state:
// In main.js — Contact component (Pd array)
const Pd = [
  { name: "CoolDude99",     date: "10/12/1999", message: "Awesome site! Added u to my webring." },
  { name: "xX_Angel_Xx",   date: "04/05/2001", message: "luv the colors <3 plz sign my guestbook back!" },
  { name: "WebMaster_Dan", date: "11/20/2003", message: "Your HTML is very clean. Good use of tables." },
];
Find the alert() call in the submit handler and replace the string:
alert("Your message has been received — ty!! 💾");
Find the <marquee> element inside the Contact component JSX and update its content:
<marquee className="font-mono text-xs text-retro-magenta bg-black px-2 py-1 border border-retro-darkgray">
  Your custom scrolling message here
</marquee>
<marquee> is a deprecated HTML element but is intentionally used here as part of the retro aesthetic. It functions in all modern browsers despite being non-standard.

Win98Window

Window chrome props for this page’s title bar and dimensions.

Blog

The Webrings & Writings page — where the webring navigation lives.

Visitor Counter

The persistent localStorage-backed visit counter shown in the Taskbar.

Theming

How to update the stardust background texture and color tokens.

Build docs developers (and LLMs) love

Get started for freeTalk to us