Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/retrowin/llms.txt

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

The Contact page is accessible at /contact via the Guestbook desktop icon. It renders a RetroWindow titled “sign_my_guestbook.htm” with address http://127.0.0.1/sign_my_guestbook.htm, positioned at x: 300, y: 50 and sized at 450×500 px. The window interior uses a yellow (#FFFFCC) background with a CSS repeating-linear-gradient that draws horizontal ruled lines every 24 px — mimicking a page torn from a lined notebook. The form is entirely client-side: submission sets a local submitted boolean state and shows a thank-you message.

​
Visual Layout

​
Heading

A large VT323-font heading ”* Sign My Guestbook *” is centered at the top in blue-800, evoking the tilde-and-asterisk decoration style common in early personal homepages.

​
The Form

The form has four fields, two action buttons, and a reset:
FieldTypeRequiredDefault Value
Name / HandletextYes—
EmailemailNo—
Website URLurlNohttp://
Messagetextarea (4 rows)Yes—
Each input is styled with a win98-inset class that applies a sunken border, and focuses to a pale yellow background (focus:bg-yellow-50).

​
Action Buttons

Two buttons sit at the bottom of the form, centered with a gap:
  • POST!!1! — type="submit", styled in win-pink bold text. Triggers form submission.
  • Clear — type="reset", restores all fields to their default values.

​
Submission State

When the form is submitted, the submitted state variable flips to true. The form is replaced by:
  • A green bold heading: “THANKS FOR SIGNING!!!1!”
  • A Sign Again button that resets submitted to false, restoring the form.
Form submission is handled entirely in the browser. No data is sent to any server by default. The onSubmit handler calls e.preventDefault() and sets submitted(true) — nothing more. You must add backend integration yourself if you want to collect messages.

​
Customization

The Contact page is implemented in the od() function in assets/main.js.

​
Adding Real Backend Integration

Replace the client-side-only onSubmit handler with a fetch call to your own API endpoint: 
const handleSubmit = async (e) => {
  e.preventDefault();
  const formData = new FormData(e.target);

  await fetch("/api/guestbook", {
    method: "POST",
    body: JSON.stringify({
      name:    formData.get("name"),
      email:   formData.get("email"),
      website: formData.get("website"),
      message: formData.get("message"),
    }),
    headers: { "Content-Type": "application/json" },
  });

  setSubmitted(true);
};
Give each input a name attribute matching the keys above so FormData can pick them up: 
<input required type="text" name="name" className="w-full win98-inset px-2 py-1 ..." />

​
Customising the Submission Message

Find the success state JSX block — rendered when submitted === true — and update the heading and button text: 
{submitted ? (
  <div className="text-center font-sans mt-10">
    <h3 className="text-xl font-bold text-green-600 mb-4">
      THANKS FOR SIGNING!!!1!
    </h3>
    <button onClick={() => setSubmitted(false)} className="win98-btn">
      Sign Again
    </button>
  </div>
) : (
  /* form ... */
)}

​
Changing the Lined Paper Background

The background style is applied as an inline style on the outer <div>: 
<div
  className="bg-[#FFFFCC] p-6 min-h-full border border-win-gray"
  style={{
    backgroundImage: "repeating-linear-gradient(transparent, transparent 23px, #ccc 24px)",
  }}
>
To change the paper color, update bg-[#FFFFCC] to any Tailwind or arbitrary color. To change the line spacing, adjust 23px and 24px together (the gap plus the 1 px rule).

​
Adjusting the Window Position and Size

The RetroWindow for this page opens near the top-right of the desktop by default. To reposition it, edit the defaultPosition prop: 
<RetroWindow
  title="sign_my_guestbook.htm"
  url="http://127.0.0.1/sign_my_guestbook.htm"
  defaultPosition={{ x: 300, y: 50 }}
  width={450}
  height={500}
>
The Website URL input is pre-filled with http:// via defaultValue. This is the same UX pattern that GeoCities used when prompting visitors for their homepage. If you want a blank field instead, remove the defaultValue prop entirely.

Build docs developers (and LLMs) love

Get started for freeTalk to us