Conference Website Template

Upload the folder to any static host and open index.html. Keep the five HTML files beside assets/ so relative links keep working. There is no build step, framework or package to install.

Serve the files over HTTP or HTTPS to see the page transitions and the live now/next labels. While editing, use any local static server (for example python3 -m http.server in the folder) and open http://localhost:8000/index.html. Opened straight from disk the pages still work, but links load normally without the transition and the clock-driven labels keep their written text.

GSAP, ScrollTrigger and Flip load from a CDN; MapLibre loads on the venue page only, when the map nears the screen. Fonts, images, video, styles and scripts are bundled locally.

1. Identity. Replace "Open Circuit", the dates, the address and the fictional-event note in the header and footer of each page. They are repeated in all five files so each page stands alone.
2. Halls. Rename the three halls in the markup (the feed's A/B/C switch, the home strip, the venue plan, the hall cards) and in the HALLS setting at the top of assets/script.js. STREAMED says which halls have a stream; WALK holds the walking minutes between them.
3. Programme. Edit the session listing in programme.html (see Programme and My Day). Everything clock-driven reads it.
4. Stream and photographs. Swap the files in assets/media/ and assets/img/ keeping the names and proportions, then update alt text and captions to describe what yours show.
5. Colour and type. Edit the tokens at the top of assets/style.css (see Palette and Fonts).
6. Passes and sign-up. Connect the passes page and the footer form to real services before selling anything (see Passes).

Everything visual lives in assets/style.css; everything interactive lives in assets/script.js, one function per feature, each returning early when its markup is absent. assets/page-router.js is the small router underneath the transition (link handling, fetching, history, scroll and focus); you should not need to edit it. Delete a section from the HTML and the rest keeps working.

Hooks you will meet in the markup:

• data-page wraps each page's content and footer. Everything outside it (the header, the feed, the phone bar and the two sheets) persists across page changes and is repeated in every file.
• data-screen marks where a page wants the live picture. Use one per page; a page without one docks the feed. data-screen-hero on it (or its parent) means the transition waits for that slot's image before landing.
• data-rig is the feed itself. data-rig-video is the stream, data-rig-still="b" a hall's still photograph, data-hall="a" the switch buttons.
• data-session on each programme listing item with data-day, data-hall, data-start, data-end and data-track.
• data-pick="session-id" on any button makes it add or remove that session from My Day; data-myday-list renders the list; data-myday-count shows the count.
• data-hold-time, data-hold-chip and data-pass-hold="day" drive the pass hold timer.
• data-fit="one" / data-fit="two" are the masthead lines; data-rise lifts them in on first load.
• data-reveal-group and data-hero-fade give a gentle rise on scroll and on load.

The feed (.rig) is a single element outside the page content, so it never reloads. It has four modes:

• slot: positioned over the page's data-screen slot. It is placed in document coordinates, so it scrolls with the page natively and never trails behind it.
• dock: an 80 by 45 pixel thumbnail in the header beside My Day on desktops (64 by 36 between 768 and 1023 pixels wide; data-bar-dock), or a 96 by 54 thumbnail at the left of the phone bar (data-phone-dock). It docks when less than half of the slot is on screen and flies back when it returns. Both docks are empty places that open only while the feed sits in them (html[data-dock-open]), so the picture is never shown twice and never floats over the page. On a desktop, clicking the header thumbnail (data-rig-expand) opens a larger 280 by 158 picture at the bottom right with hall, pause and back-to-page controls; its arrow button (data-rig-collapse) puts it back in the header. On a phone, tapping the bar thumbnail scrolls back to the page's picture.
• move: flying between the two (0.5s).
• travel: owned by the page transition.

Every slot carries the stream's poster as its own background, so the instant before the feed arrives shows the same picture.

Halls. The A/B/C switch is a radio group (arrow keys move between halls). Hall A plays the stream; halls marked false in STREAMED show their photograph from data-rig-still, a "Not live" label and their next session time from the programme. Switching repaints the --now colour used by now-lines and the current-page marker. On the programme page the picture moves to the chosen hall's lane.

The stream. It is a muted looping video with autoplay loop muted playsinline in the markup: stage-360.mp4 under 700 pixels wide, stage-720.mp4 above. There is deliberately no sound control. To show a real live stream, point the video at your provider's HLS address with their player library, or replace the <video> with their embed inside .rig-frame; docking and the transition move the container, not the video.

Speaker portraits. Portraits from different photographers rarely match, so the grid shows them in monochrome and returns each to colour on hover or focus. To show colour throughout, delete the filter on .face-photo img in assets/style.css.

The "on now" list. Speakers and Passes carry a three-row list of what is on in each hall (data-head-now). Its rows are written in the markup for visitors without JavaScript and repainted from the clock and the programme listing; delete the <aside> to remove it, or add it to any page head with the page-head--now class.

The demo clock. Now/next labels follow a clock that starts at 11:05 on the first day and runs in real time. Add ?t=14:20 to any address to start it elsewhere. Change DEMO_START, DAY_START and DAY_END at the top of assets/script.js, or replace clock.now() with the real time of day once your event is live.

Every same-origin link to a sibling .html page runs the same change: the page moves, the picture stays.

1. Out (0.26s). The page eases 64 pixels to the left (6% of the width on narrow screens) and fades. The feed does not fade with it: it holds where it is and keeps playing. The next page is already being fetched; links prefetch on hover, focus and touch.
2. Hold. Waits for the next page's feed slot image. On a slow connection the visitor watches the stream, not an empty screen.
3. In (0.48s). The new page comes in from the right at its restored scroll position while the feed flies (0.62s) to its place on that page: the page's slot if it is on screen, otherwise the header dock or the phone bar.

Back runs the other way: out to the right, in from the left. The feed lives outside the page and is never replaced, so the stream never restarts. The new page's heading receives focus and is announced. Phones run it a little faster, and reduced motion swaps pages instantly.

Notes for editing:

• Pages are fetched, not reloaded, so scripts inside a fetched page do not run. Put new behaviour in assets/script.js as another init function called from initPage. Every page loads assets/page-router.js before assets/script.js; keep that order on a new page.
• The transition is the leave, hold, enter and reset functions passed to PageRouter.create at the end of assets/script.js (slideOut, slideIn, resetTransition). The distance is in shift() and the durations in timing() (fly is the feed's flight).
• Any sibling HTML file with a data-page wrapper joins the transition automatically. Add data-native-navigation to a link or container to opt out; downloads, new-tab clicks, external links and same-page anchors already behave normally.

Swapping it for a plain crossfade. Remove the page-router.js script tag from every page and add @view-transition { navigation: auto; } to the stylesheet. The browser then crossfades between ordinary page loads where supported, but the feed restarts on each page.

Each session in programme.html is one list item:

In your downloadThe working code for this step, in index.html.

The guide, the home page's now/next strip, the feed's next-session labels, My Day and the passes order all read this one list (other pages fetch it once in the background). Keep the id and data-session equal; they are also the anchor that speaker links point to. Tracks are named in TRACKS at the top of the script and in the filter buttons. ?track=data&day=fri opens the programme filtered.

My Day is kept in the visitor's browser (local storage) and shown in the drawer on every page and in the column beside the guide on wide screens. Picks that overlap are flagged as clashes; consecutive picks in different halls show the walking time from WALK, marked tight when the gap is shorter.

The passes page is a front end only. "Hold this pass" starts a ten-minute hold kept in the browser tab, shown in the header on every page and at display size on the passes page, with spoken warnings at five minutes and one minute. The order suggests the cheapest pass that covers the visitor's My Day picks and explains mismatches. "Check out" shows a demo message: nothing is charged, reserved or sent. Connect your ticketing provider (Tito, Eventbrite or your own checkout) and change the notes before selling passes. Prices live in the markup and in PASSES at the top of the script.

The footer sign-up form is also unwired: point it at your mailing tool (Buttondown, Mailchimp, Formspree or your CRM) and remove its demo note.

The map is MapLibre GL on OpenFreeMap's positron style, with no API key. Set the pin with DEPOT, the station with STATION and the walking line with WALK_ROUTE (longitude, latitude pairs) near initMap in assets/script.js; the bundled route is the real 850 metre footpath route from Leeds station, routed on OpenStreetMap data. Without JavaScript or WebGL a link to OpenStreetMap stays in its place.

The floor plan is inline SVG in venue.html. The halls (data-plan-hall="a") light up from the key or on hover, and the step-free route (data-plan-route) draws as the plan scrolls through the screen.

The stage photograph's screen is a data-screen slot positioned with four percentages (--sx, --sy, --sw, --sh) measured on the photograph. With your own stage photo, measure the screen and change those four values.

Paper sections. Add data-ground="paper" to any <section> to turn it over: the stage and paper tokens swap inside it, so its text, rules, buttons and cards repaint with no extra CSS, and the hall colours switch to their deep inks (--hall-a-ink and so on), which hold contrast on paper. The demo alternates them with dark sections on every page; move the attribute to change the rhythm.

Measured contrast pairs are recorded at the top of assets/style.css. Paper on stage is 15.5:1; every hall colour clears 4.5:1 on its ground. The design keeps two rules: coral only ever means live, and a hall colour only ever means its hall.

Self-hosted latin WOFF2 files in assets/fonts/, all under the SIL Open Font License:

• Anybody (800, width 55 to 70%) for display. The masthead lines are fitted to the full width: the stylesheet sizes each line as width divided by --k, and the script corrects --k from the rendered text once the font loads, so new words stay flush.
• Schibsted Grotesk (400 to 600) for text and interface.
• Spline Sans Mono (500) for times, hall codes and counts.

To change a face, replace the @font-face rules at the top of assets/style.css, the two font preloads in each page's <head> and the --font-* tokens.

The photographs are bundled as graded WebP files in assets/img/ (several at more than one width for phones), and the stream as two H.264 loops with posters in assets/media/. To replace one, keep the file name and proportions, or change the path in the markup, and update its alt text and caption. The Hall B and C photographs also appear inside the feed. The venue stage photograph is cropped tightly around its centre screen, which holds the live picture.

Some photographs contain incidental words: the venue stage photograph has a small sign at its right edge outside the crop, and the lanyards on the passes page carry handwritten name cards.

The people photographed are unrelated to this fictional event; the names beside them are invented. Use portraits of your real speakers, with their permission. Map data © OpenStreetMap contributors (ODbL), tiles by OpenFreeMap.

• Every page is complete without JavaScript: links load pages, the home slot plays the stream, the programme is a dated listing with an "Add to calendar" file per session, and speaker profiles print under their photographs.
• Reduced motion swaps pages instantly, re-seats the feed without movement, pauses the stream behind a play button and shows every reveal at once.
• Programme cards are real buttons with aria-pressed; dragging is an extra, never the only way to add a session. Clashes and changes are announced in a polite live region.
• The menu, My Day and the speaker drawer are native dialogs: focus moves in, Escape and a click outside close them, and focus returns to the button that opened them.
• After a page change focus lands on the new heading, with a visible ring only when the visitor is using the keyboard.
• The hold timer is a role="timer" and announces five minutes and one minute left.

• GSAP with ScrollTrigger and Flip, 3.12+ (the demo pins 3.15.0 from jsDelivr).
• MapLibre GL 4.7.1 from unpkg, venue page only, with OpenFreeMap tiles.
• No smooth-scroll library: the feed is positioned in the document so native scrolling keeps it glued to its slot.

window.gsapContext.revert() stops the router, reverts every page feature (tweens, ScrollTriggers, observers, listeners, the map), returns the feed to rest and removes the reveal gate, leaving a static page.