# Slidecraft

A self-contained, three-page presentation design studio template. Warm ivory, confident typography, custom geometric illustrations, and an original six-slide concept deck give this template a distinct editorial personality.

## Pages

- `index.html`: layered presentation-art hero, six-slide interactive deck, speaker notes, presentation dialog, SVG downloads, and collection previews.
- `library.html`: ten editable SVG assets, category filters, text search, reset and empty states, native preview dialog, and direct SVG downloads. A URL such as `library.html?asset=slide-roadmap` opens the matching preview.
- `contact.html`: a local project brief builder with native validation, deck scope, slide count, audience, style, a preview, and a downloadable `.txt` brief. No information is submitted or stored.

## Run and customize

Open `index.html`, or serve this directory with any static file server. All links and assets are relative. No installation, external fonts, images, scripts, API keys, analytics, backend, or network calls are needed.

Change the colors in `styles.css`, replace the page copy, and edit the SVG assets in a vector editor or text editor. The six deck entries and speaker notes are in the `slides` array in `app.js`. The library is complete HTML so all assets remain available without JavaScript.

## Original editable assets

Every asset has a `1600 900` viewBox, an accessible title and description, editable vector shapes, and no external references or embedded raster content.

1. `assets/slide-cover.svg` — A fresh perspective.
2. `assets/slide-process.svg` — From thought to story, three-step process.
3. `assets/slide-roadmap.svg` — The way forward, three-phase roadmap.
4. `assets/slide-comparison.svg` — A clearer way, comparison layout.
5. `assets/slide-metrics.svg` — Signals worth noticing, fictional sample metrics.
6. `assets/slide-closing.svg` — Room for what's next.
7. `assets/illustration-orbit.svg` — Ideas in orbit, transparent geometric artwork.
8. `assets/illustration-flow.svg` — A thought takes shape.
9. `assets/background-grid.svg` — Room to think, graph-paper background.
10. `assets/pattern-dots.svg` — Connect the dots, presentation pattern.

Fieldwork and Slidecraft are fictional concepts. All figures, dates, project content, and planning examples are illustrative; there are no client claims or investment outcomes.

## Controls and accessibility

- Use Previous/Next or slide thumbnails in the deck. Left/Right arrow shortcuts work only while focus is inside the deck viewer or presentation dialog, and ignore form fields.
- Speaker notes can be toggled independently. Download SVG always points to the currently selected slide.
- Present opens a native modal occupying the viewport. Close with the button or Escape; focus returns to the opening control.
- Library previews are native modals with Escape, outside click, and restored focus. Modified clicks still open the SVG normally.
- Mobile menu supports Escape, outside click, and focus leaving the menu.
- A skip link, visible keyboard focus, proper form labels, live status messages, and 44-pixel interaction targets are included.
- The footer motion control pauses optional hero animation. System reduced-motion preferences are respected. No content depends on animation.
- Buttons that need JavaScript begin disabled and are enabled only after their handlers are attached. Without JavaScript the artwork, text, navigation, and direct downloads remain available.

## Verification

`node --check app.js` validates script syntax. Assets are valid standalone SVG XML. This template is designed for current browsers supporting native HTML dialogs.