ESPA WEBSITE PACKAGE
=====================

FILES
-----
index.php                   Homepage (hero, features, about teaser, news, developments, footer)
about.php                   Full "About" page (linked from the homepage's "Read More" and the nav)
news.php                    Full "News & Events" page — lists every item in full, newest first
includes/header.php         Shared topbar + logo + nav — edit ONCE, every page picks it up
includes/footer.php         Shared footer — edit ONCE, every page picks it up
logo.png                    Your real ESPA logo — shown automatically in the header on every page
styles.css                  All site styling — edit colors, fonts, spacing here (shared by every page)
script.js                   Site behaviour — hero carousel, news carousel, nav, forms (shared by every page)
news-data.js                Icon shapes only now — see "ADDING NEWS OR EVENTS" below for the real content
membership-eirgrid.html     EirGrid membership application page (web form + Word download)
membership-esb.html         ESB membership application page (web form + Word download)
espa-hero-background.png    The hero/page-banner backdrop image (sky/field/turbines illustration)
espa-hero-background.svg    Vector source of the same image, editable in Illustrator/Inkscape
ESPA-EirGrid-Membership-Form.docx   Printable/downloadable EirGrid form (also embedded inside membership-eirgrid.html)
ESPA-ESB-Membership-Form.docx       Printable/downloadable ESB form (also embedded inside membership-esb.html)

admin/                       The password-protected admin panel — see below
data/news.json               The live news/event data the admin panel reads and writes
assets/                      Shared images/fonts: the EirGrid form template + Liberation Sans font
form-filler.php               Shared PHP class that draws submitted text onto a form template image
submit-eirgrid.php            Receives EirGrid form submissions, fills the image, emails it to ESPA
submit-esb.php                Same, for the ESB form
mail-config.php               Your SMTP mailbox settings — fill in SMTP_PASSWORD before going live
send-mail.php                  Shared SMTP-sending helper (used by submit-eirgrid.php)
phpmailer/                     The PHPMailer library files send-mail.php relies on — leave as-is
admin/position-editor.php     Visual drag/resize editor for where text lands on the EirGrid form
data/eirgrid-fields.json      The EirGrid field positions the editor above reads and writes
data/esb-fields.json          Same, for the ESB form
uploads/                     Photos uploaded through the admin panel land here
logs/error.log                Private log of real errors from submit-eirgrid.php (see below)

WHY .php NOW (AND WHAT IT DOES AND DOESN'T DO)
--------------------------------------------------
index.html, about.html and news.html are now index.php, about.php and
news.php. To be direct about why: renaming a file to .php does NOT, by
itself, make it more secure — a .php file with no PHP code in it behaves
identically to the same file named .html. What actually changed is that
the header (top bar, logo, nav) and footer, which used to be copy-pasted
into all three pages, now live in ONE place each:

    includes/header.php
    includes/footer.php

Every page pulls them in with a single line (require ...). Edit the logo,
a nav link, or the footer once, and it updates on every page — instead of
needing the same edit made correctly in three separate files, which is
exactly the kind of thing that's easy to get out of sync by hand.

All the .php files, styles.css, script.js and news-data.js must stay
together in the same folder — they load each other by relative filename.
The two membership-*.html files are the exception: each is still a single,
self-contained file (form + styling + script all inline), so they'll work
wherever you drop them, even on their own.

THIS SITE NOW NEEDS A REAL PHP WEB SERVER
-------------------------------------------
Because news is now managed through a real admin panel instead of a plain
text file, the site needs to be served by PHP (most standard web hosting
already does this — cPanel, GoDaddy, Hostinger, etc. all support it out of
the box). Two things that used to work no longer will:

  - Double-clicking index.html to preview it locally won't show any news
    items (the page can't fetch data/news.json without a real server).
    To preview locally, run PHP's built-in server from a terminal in this
    folder: `php -S localhost:8000`, then open http://localhost:8000
    (or use WAMP/XAMPP/MAMP, which you're likely already set up for).
  - You can no longer host this on a plain static host with no PHP support
    (e.g. GitHub Pages on its own). It needs PHP.

ADDING NEWS OR EVENTS (via the admin panel)
---------------------------------------------
1. Go to yoursite.com/admin/ in a browser and log in.
   Default password: espa2026 — CHANGE THIS BEFORE GOING LIVE (see
   "Admin panel setup" below).
2. Click into the "Add a new item" form: title, date, an icon (used only
   if you don't upload a photo), a short summary, an optional photo, and
   the full story — just type it normally, leave a blank line between
   paragraphs, no HTML needed.
3. Click "Add item". It appears immediately on the homepage carousel and
   the full news.html page, for every visitor, automatically sorted with
   the newest date first.
4. Use "Edit" or "Delete" on any existing item the same way.

No code editing needed for any of this — that's the whole point of the
admin panel.

ADJUSTING WHERE TEXT LANDS ON THE FORMS
--------------------------------------------------
If any field's text isn't landing quite where you want on the filled-in
form image (EirGrid or ESB), you don't need to ask for code changes —
there's a visual editor for it. Go to yoursite.com/admin/, log in, then
click "EirGrid positions" or "ESB positions" at the top of the page (or
go straight to admin/position-editor.php?form=eirgrid or ?form=esb).

You'll see the real form with a box over each field. Drag a box to move
it, or drag its bottom-right corner to resize it — the sidebar shows
the exact pixel position as you go, and you can also type numbers in
directly there for pixel-precise placement. Use "Preview with sample
data" any time to see realistic filled-in text before committing to
anything. Nothing on the live site changes until you click "Save
positions" — at that point it's live immediately, no file upload or
code change needed. Use the "Switch to EirGrid/ESB form" link at the
top to move between editing the two.

Under the hood this edits data/eirgrid-fields.json or
data/esb-fields.json — you could also hand-edit those files directly
if you prefer, but the visual editor
is much easier to get pixel-perfect.

ADMIN PANEL SETUP (do this before going live)
-------------------------------------------------
1. Change the password
   Visit yoursite.com/admin/generate-password-hash.php, type your new
   password, and copy the hash it gives you into ADMIN_PASSWORD_HASH in
   admin/config.php (open that file, the exact line is clearly marked).
   Then DELETE admin/generate-password-hash.php from the server — it
   shouldn't stay online after you've used it.

2. File permissions
   Your web server needs permission to write to two places:
     - data/news.json         (so it can save new/edited/deleted items)
     - uploads/                (so it can save uploaded photos)
   On most shared hosting this works automatically; if saving fails with
   a permissions error, set both to be writable by the web server (on
   Linux hosting this is usually `chmod 664 data/news.json` and
   `chmod 755 uploads/` — your host's file manager or support can help
   if you're not comfortable with a terminal).

3. Keep it over HTTPS
   Log in over https:// (not http://) if your hosting offers it (most
   do, often free via Let's Encrypt), so the password isn't sent in the
   clear.

A NOTE ON HOW SECURE THIS IS
-------------------------------
The admin login is checked on the server (not just in the page's
JavaScript), which is real, meaningful protection — unlike a password
built only into a static HTML page. It's a solid fit for a small
association site like this one. It is a single shared password rather
than individual accounts, though, so treat it like you would any shared
office password: change it if a committee member who knew it moves on,
and don't share it outside people who should be able to post news.

TO DO BEFORE GOING LIVE
------------------------
1. Logo
   Already done — logo.png is your real logo and it's already showing in
   the header on every page. To ever change it later, just replace
   logo.png with a new file of the same name (edit once, in one file:
   includes/header.php has the <img> tag, but you won't even need to
   touch that unless you're changing the filename).

2. Contact details
   Phone/email in the top bar and footer are placeholders
   (01 234 5678 / info@espa-test.ie) — find and replace with the real
   ones. Since these now live in includes/header.php and
   includes/footer.php, you only need to make this edit ONCE, in those
   two files, and it applies to every page.

3. Social icons
   In includes/header.php, search for "EDIT ME" above the topbar social
   icons (one edit here covers every page). Facebook / X / LinkedIn /
   Google currently point at each platform's homepage (not a real ESPA
   profile) and open in a new tab — swap in your actual profile URLs.
   Behance has no ESPA profile yet, so that icon links back to index.php
   instead of a dead page; point it at a real Behance profile the same
   way once (if) one exists. The footer social icons in includes/footer.php
   work the same way.

4. Membership form email delivery
   EirGrid: membership-eirgrid.html submits to submit-eirgrid.php on your
   own server. It fills the real EirGrid form image (assets/
   template-eirgrid.png) with the applicant's answers and emails that
   filled image to ESPA as an attachment — sent over real SMTP through
   your own mailbox (using the bundled PHPMailer library), not PHP's
   built-in mail(), which many hosts block or leave unconfigured.
   Before going live:
     a) Open mail-config.php and fill in SMTP_PASSWORD with your real
        mailbox password (the other settings are already filled in from
        your host's mail settings). This is the ONLY file with your
        password in it — never share it or put it anywhere public.
     b) Open submit-eirgrid.php and check RECIPIENT_EMAIL near the top
        is the address you want applications to land in.
     c) Needs PHP hosting with the GD extension — standard on most
        shared hosting (cPanel, Hostinger, GoDaddy, etc). If GD isn't
        available, submissions will fail with a 500 error (see the log,
        point (e) below).
     d) Test it once for real after deploying: submit the form yourself
        and confirm the email arrives with the filled image attached.
        A submission normally completes instantly; if your mail server
        is slow or unreachable, it fails cleanly within about 12
        seconds rather than leaving the visitor waiting.
     e) If the form shows "Something went wrong sending that": open
        logs/error.log (in the same folder as submit-eirgrid.php) — it
        records the real, specific reason every failure happens, even
        though the message shown to visitors always stays generic on
        purpose. The most common causes, in order of likelihood:
          - SMTP_PASSWORD in mail-config.php is still the placeholder,
            or is wrong — the log will say "SMTP send failed: ...
            Could not authenticate."
          - The assets/ folder (or the files inside it) didn't get
            uploaded, or ended up in the wrong place — the log will
            say "Missing file: ..." with the exact path it expected.
          - The GD extension isn't enabled on your hosting — the log
            will say so directly; ask your host to enable it (it's a
            standard, common PHP extension, so most hosts can turn it
            on quickly).
        logs/ is blocked from being viewed in a browser, so this file
        is safe to leave in place — just open it via FTP/file manager.

   ESB: works exactly the same way as EirGrid, described above —
   membership-esb.html submits to submit-esb.php, which fills
   assets/template-esb.png (including the extra "Business Unit" field
   the ESB form has that EirGrid doesn't) and sends it through the same
   mail-config.php / send-mail.php SMTP setup. There's nothing separate
   to configure — fixing RECIPIENT_EMAIL and SMTP_PASSWORD once covers
   both forms.

5. Partner logos
   The homepage's partner strip currently shows plain text placeholders
   (ESPA, Unite the Union, ICTU, Congress, IRN). Swap in real logo images
   when you have them.

6. Admin password
   See "Admin panel setup" above — don't skip this one.

7. Word forms
   The two .docx files are formatted to match your existing EirGrid/ESB
   membership forms (Personal Details, Employment Details, Application to
   Join, Payroll Deduction Request, Office Use, submission instructions).
   Edit them directly in Word if wording, addresses, or the deduction
   percentage ever change — just remember to also update the base64 copy
   embedded in the matching .html file's DOCX_BASE64 constant if you want
   the in-page download button to reflect the edit (or simplest: re-export
   and re-embed, or just replace the download link with a normal file path
   once you're hosting the docx files alongside the HTML).

HOSTING NOTE
------------
Upload every file and folder (including admin/, data/, includes/, logs/,
phpmailer/, and uploads/) to the same folder on your PHP-capable web
host, keeping the folder structure exactly as it is here. Everything
will then find styles.css, script.js, news-data.js, logo.png and
includes/header.php / includes/footer.php right next to it, and the
admin panel will find data/news.json and uploads/ one level up from
itself. Don't forget mail-config.php's SMTP_PASSWORD (see point 4
above) — without it, membership form emails won't send.
