# Miss Belding Kiddie Queen & King Voting Site

A simple yearly voting site for the Kiddie Queen & King contest. Every dollar is a vote: supporters pick a candidate, choose how many votes to buy, and pay through PayPal. It is intentionally static, so it can be hosted almost anywhere (Netlify works great) and it does not store payment information.

The girl and boy with the most confirmed votes when voting closes are crowned Kiddie Queen and Kiddie King.

## What To Change Each Year

Use `admin.html` (the Admin Access link in the footer) for editing. Candidates are managed from a list that opens edit windows, so yearly updates do not require editing code.

- `campaignYear`: set the new contest year.
- `goal`: optional — leave it 0 and the public page hides the goal entirely and just shows what has been given.
- `raisedOffline`: any money raised outside online voting.
- Voting deadline: update the countdown date and deadline message.
- `votePrice`: dollars per vote (normally 1).
- PayPal link: paste the PayPal.me or donate link where vote payments should go.
- Quick vote buttons: the preset vote amounts shown on the form (default 5, 10, 25, 50).
- Candidates: replace last year's candidates with this year's Kiddie Queen and Kiddie King candidates.
- `previousYear`: move last year's winners and total raised into the Last Year section.

## Publishing Changes (no re-upload needed)

The public page loads its content live from the Google Apps Script on every visit. To change anything — candidates, photos, tallies, deadline, PayPal link — open Admin Access, make the change, and click **Publish to Live Site**. The change is public immediately.

`data/campaign.js` is only the fallback shown if the script is unreachable, and the source of the admin password on first setup. **Export campaign.js** is still there for keeping a backup copy.

## Counting Votes

1. Votes arrive in the Google Sheet with payment status **Pending**.
2. Match each row against PayPal to confirm payment (count $1 = 1 vote from the amount actually paid).
3. Open Admin Access, edit the candidate, add the confirmed votes to their tally, and click **Publish to Live Site**.

The public page shows each candidate's tally, marks the current leader in each category with a crown badge, and computes **Raised So Far** as `raisedOffline + total votes × vote price`.

## Admin Portal

Open `admin.html` to use the local admin editor.

Default local password: `MissB2026!!`

The login page has a **Forgot Password? Email Miss Belding** button. Once the Google vote collection script is connected, tapping it emails the admin password to the Miss Belding inbox (the notification email set in `google-apps-script/Code.gs`). To change the password, edit `adminPassword` in `data/campaign.js` and republish.

This password is only for the local/static prototype because it lives in `data/campaign.js`. Before publishing a real public admin portal, connect it to secure hosting with server-side login and a database.

The admin page can:

- update the yearly goal, deadline, and page wording
- update the vote price, PayPal link, and quick vote buttons
- add, edit, and remove candidates (name, category, about text, vote tally)
- upload a photo for each candidate — photos are resized automatically and stored inside the campaign file, and the public page shows them large on each candidate card
- update the yearly header image path
- record last year's Kiddie Queen, Kiddie King, and amount raised
- export a new `campaign.js` file for publishing

## Payment Setup

The safest simple setup is a hosted PayPal link. One link covers every amount — there is no need for separate links per vote amount, and voters are never limited:

- **PayPal.me** (recommended): the site automatically appends the exact vote total, e.g. 25 votes opens `paypal.me/name/25USD` with $25 pre-filled.
- **PayPal donate/checkout link**: the site adds the amount as a URL parameter.

The page redirects voters to PayPal. That keeps sensitive payment details off this site.

## Google Vote Collection

The project includes a Google Apps Script connector in `google-apps-script/Code.gs`.

Setup:

1. Create a new Google Sheet and copy its ID (the long string in the sheet URL) into `CONFIG.sheetId`.
2. Set `CONFIG.notificationEmail` to the address that should be notified of new votes.
3. In the sheet, open **Extensions → Apps Script**, paste `Code.gs`, and deploy as a **Web App** (execute as you, accessible to anyone).
4. Paste the deployed Web App URL into the **Google vote collection script URL** field in Admin Access, then export and publish `campaign.js`.

Each submission adds a row to the "Votes" tab, emails the fundraiser team, sends the voter a confirmation email, and then sends the voter to PayPal.

## Suggested Workflow

1. A supporter opens the site, meets the candidates, and taps "Vote for" their favorite.
2. They enter their name and email, pick how many votes to buy, and tap `Continue to Payment`.
3. The vote details land in the Google Sheet and both sides get an email.
4. The supporter completes payment through PayPal.
5. The fundraiser team confirms the payment, updates the candidate's tally in `admin.html`, and republishes.

## Files

- `index.html`: page structure.
- `styles.css`: visual design.
- `app.js`: page behavior.
- `admin.html`: local admin editor.
- `admin.js`: admin editor behavior.
- `data/campaign.js`: yearly contest data.
- `google-apps-script/Code.gs`: vote collection connector.
- `assets/header-picture.avif`: current header image.
- `assets/miss-belding-logo.avif`: current logo.

## Important Notes

Before accepting live payments, confirm the account owner, nonprofit/tax treatment, refund policy, and reporting needs with the fundraiser treasurer or board. Payment providers change fees and rules, so verify the current terms before publishing the live links.

Because this is a static site, vote tallies shown on the page are updated manually by the fundraiser team after payments are confirmed — they are not live counts.