📖 Website Owner's Manual

1. 🌐 How Your Website Works

Think of your website like a digital storefront window. There are two parts:

🪟 The Window — what customers see at www.rescuerich.com. It shows your services, prices, your photo, and how to call or text you.

🗝️ The Back Office — your admin panel at www.rescuerich.com/admin.html. It's password-protected and is where you go to update anything on your site.

2. 🔑 Getting Into Your Admin Panel

1. Open any web browser (Chrome, Safari, Edge — any of them work)
2. Go to: www.rescuerich.com/admin.html
3. You'll see a password screen
4. Type your password and click "Unlock Admin Panel 🔓"

3. 🏢 Updating Your Business Information

The Business Information section controls the basic details shown across your entire website.

Click inside any field, make your change, then click "💾 Save Changes" at the bottom when done.

4. 📸 Changing Your Photos

Your website shows two special photos: your business logo and your portrait photo (displayed as a circle in the "Meet Your Assistant" section).

How to upload your portrait photo

1. Scroll down to the 📸 Images section
2. Under "Your Photo", click the "📁 Upload Your Photo" button
3. A file browser will open — find and select your photo
4. Wait a few seconds — you'll see a small preview and a ✅ green checkmark when done
5. Click "💾 Save Changes" at the bottom

Quick photo tips

• ✅ Good lighting near a window makes a huge difference
• ✅ Portrait orientation (phone held vertically) works best for the circle crop
• ✅ Wear your work shirt or safety gear — looks professional
• ❌ Avoid very dark photos — they won't show up well
• ❌ Avoid photos where you're very far away — the circle crop will make you tiny

5. 🖼️ Managing Your Gallery

The gallery shows photos of your work — your truck, equipment, or jobs you've done — in the "In the Field" section.

Adding a new gallery photo

1. Scroll to 📸 Images → 📷 Gallery Photos
2. Click "📁 Upload Photo" next to any gallery slot, or click "➕ Add Gallery Slot" first
3. Select a photo from your device — it uploads automatically
4. Fill in the Caption field (e.g., "Jump starting a car on Highway 30")
5. Click "💾 Save Changes"

Removing a gallery photo

1. Find the slot you want to remove
2. Click the red ✕ button on the right
3. Click "💾 Save Changes"

6. 🔧 Managing Your Services & Prices

The Services & Prices section lets you manage your full service menu. You can edit the name, icon, price, and description for any service — and add new services or remove ones you no longer offer.

What you can edit on each service

How to update a service

1. Scroll to 🔧 Services & Prices
2. Find the service you want to update
3. Click into the Name, Price, or Description field and make your changes
4. Click "💾 Save Changes" at the bottom

Changing a service icon

Click the icon button (the emoji shown to the left of the service name) to open the icon picker. You have three ways to choose a new icon:

• Pick from the grid — click any emoji from the 40-icon palette of vehicles, tools, and roadside symbols
• Type or paste an emoji — type any emoji from your keyboard or paste one in the text box
• Upload an image — click "📁 Upload Icon" to use your own image file (JPG, PNG, or WebP)

Clicking an emoji or uploading an image saves the choice immediately and closes the picker.

Adding a new service

1. Click the "➕ Add Service" button at the top of the section
2. A new empty card appears — fill in the name, icon, price, and description
3. Click "💾 Save Changes"

Removing a service

1. Find the service you want to remove
2. Click the red ✕ button on the right side of that service card
3. Click "💾 Save Changes"

Price format tips

Any of these formats work great on the website:

7. ⭐ Managing Customer Reviews

Word of mouth is everything! The reviews section shows testimonials from happy customers.

Adding a new review

1. Scroll to ⭐ Customer Reviews
2. Click "➕ Add Review"
3. Fill in the customer's name (e.g., Sarah M.), their city, and what they said
4. Click the stars to set the star rating
5. Click "💾 Save Changes"

Removing a review

1. Find the review and click "✕ Remove Review"
2. Click "💾 Save Changes"

8. 💾 Saving Your Changes

Nothing is saved until you click the Save button. Always scroll to the bottom and save before closing the page.

9. 🔒 Locking the Admin Panel

When you're done, click the "🔒 Lock" button in the top-right corner of the admin panel. The password screen will reappear and no one can access your admin without the password.

10. 🔐 Changing Your Password

1. Scroll to 🔒 Security — Change Login Password
2. Type your new password in "New Login Password"
   Look for the strength indicator: ⚠️ Weak / ⚡ Medium / ✅ Strong — aim for Strong
3. Type it again in "Confirm Password"
4. Click "🔐 Set Password"
5. Click "💾 Save Changes" to make it permanent

What makes a strong password?

• ✅ Mix uppercase and lowercase letters
• ✅ Add numbers (not just at the end)
• ✅ Add a symbol like !, #, @, or $
• ✅ At least 12 characters long
• ❌ Avoid your name, birthday, or simple words like "password"

Example of a strong password: Tow$Truck77!

11. 📷 Tips for Great Photos

For your portrait photo

• Stand near a window for natural light — it makes a big difference
• Have someone else take the photo rather than a selfie
• Wear your work shirt or safety gear — it looks professional and builds trust
• Smile and look directly at the camera
• Keep the background simple — a wall, your truck, or outdoors works great

For gallery photos of your work

• Before/after shots work great — a car stuck in a ditch, then back on the road
• Show your truck or equipment — customers like to see the gear
• Take photos during daylight — night shots rarely look good on websites
• Get close enough that people can see what's happening

Technical requirements (your phone handles all of this automatically)

• Accepted formats: JPG, PNG, GIF, or WebP
• Maximum size: 10 MB per photo (standard phone photos are well under this)
• The website automatically adjusts photos to fit perfectly in their frames

12. 🛠️ If Something Looks Wrong

"Save failed — cannot reach server"

• Check that you have an internet connection
• Wait 30 seconds and try again
• If it keeps failing, contact your web developer

I saved but don't see changes on the site

• Open your website in a new tab or window
• Try a hard refresh: hold Ctrl and press F5 (Windows) or hold Cmd and press Shift+R (Mac)
• Wait 1–2 minutes — browsers sometimes show a cached old version briefly

I forgot my password

Contact your web developer. They can reset the password directly on the server.

The site looks different on my phone vs. my computer

This is completely normal! Your website automatically adjusts its layout for different screen sizes. On phones, the navigation is replaced by a CALL NOW / TEXT NOW bar at the bottom — which is actually better for customers who are stranded and need to reach you fast.

I accidentally deleted something important

Click the "⬇ Download Backup" button before making changes in the future. If you have a recent backup (config.json file), your web developer can restore it.