“`
TASK: Convert a local diary HTML viewer into a WordPress full-screen embed script.
YOU WILL BE GIVEN:
1. A local read-all.html file that displays diary images sequentially in a browser
2. The WordPress upload path where the images have been uploaded (e.g. /wp-content/uploads/FolderName/)
YOUR JOB:
Produce a single HTML block that can be pasted into a WordPress page using the Custom HTML block editor.
REQUIREMENTS:
1. FULL-SCREEN OVERRIDE
The script must override the WordPress theme completely. Use a fixed-position
container with z-index: 99999 covering 100vw x 100vh. Hide the theme header,
footer, sidebar and navigation using:
header, footer, .sidebar, .nav-menu, #masthead, #colophon { display: none !important; }
2. IMAGE PATH
Replace the local src paths from the read-all.html with the correct WordPress
upload path provided. Images should be served from that path, not locally.
3. IMAGE COUNT
Count the images listed in the read-all.html and set totalPages accordingly.
Images are named sequentially starting from img000.jpeg (zero-padded to 3 digits).
4. LAZY LOADING
Add loading=”lazy” to each image element for performance.
5. STYLING
Use this styling (copy exactly):
– Background: #111
– Max image width: 960px, centred
– Image border: 3px solid #666, border-radius 6px, box-shadow 0 6px 12px rgba(0,0,0,0.4)
– Page label below each image: color #ccc, font-size 15px, font-weight 600, sans-serif
– Label format: “Page N – imgXXX.jpeg”
6. OUTPUT
Deliver the finished script in a single code box, ready to paste into WordPress.
Do not explain or reformat — just output the code block.
EXAMPLE STRUCTURE (follow this pattern exactly):
```