Design specification / Page 2 source

Actual built output · Page 2 of 3 · Select the image to enlarge

Source for page 2 of 3 of the actual output. Content is illustrative; educational material and design requirements need author review. Use the shared CSS, settings and referenced files with this excerpt.

Back to preview galleryShared CSS and settingsPrevious pageNext page

Markdown for this page

An excerpt of document.md, split at its explicit page boundary. Separate fixed pages with <!-- wwpo:break -->.

document.md

<!-- wwpo:page flow=fixed -->
# A booking request, step by step

**Proposed behavior / fictional design**

## Sequence diagram

<!-- wwpo:block width=100% align=center -->
![Review and save a booking](assets/diagrams/sequence.mmd "Proposed request sequence")

## Success and conflict

Keep the room and time visible during review. Check availability again when saving; if there is a conflict, let the reader choose another slot.

| Condition | Expected result |
| --- | --- |
| Available | Save and show the booking details |
| Already booked | Explain the conflict and retain input |

Referenced visuals and data

assets/diagrams/sequence.mmd

sequenceDiagram
    actor Reader
    participant Demo
    participant Store
    Reader->>Demo: Choose room and time
    Demo-->>Reader: Show review summary
    Reader->>Demo: Confirm request
    Demo->>Store: Check slot again
    alt Slot available
        Store-->>Demo: Available
        Demo->>Store: Save booking
        Demo-->>Reader: Show saved details
    else Conflict
        Store-->>Demo: Already booked
        Demo-->>Reader: Keep input, explain conflict
    end

Design and reproduction

Headings, spacing, color, tables and page footnotes use the shared CSS and business preset. Page directives and visual definitions shown above also affect the output. The source ZIP on the example overview contains the complete document and required files. Save changes, then preview, validate and export to check them.

Read shared CSS and settings · Example overview