Booklike is a simple CSS/Javascript framework to create web pages that read like a book. In a landscape window, two pages are displayed side by side like an open book. In a portrait window, two pages are displayed one above the other like an open calendar. The muted Selenized color themes reduce eyestrain: Light mode is the default, but dark mode or the higher contrast white and black modes may be selected (or made the default).
Controls are deliberately minimal and unobtrusive: Clicking on the arrow buttons in the corners turns the pages forward or backward. Or press and hold an arrow to make a slider appear with which you can rapidly scan through pages. From the keyboard, PgDn or Enter pages forward, PgUp or Backspace pages backward, and Home or End jumps to the first or last page.
This file, booklike.html is a template. The idea is to copy the files booklike.{html, css, js} files and the ctheme.{css, js} files to your own working folder. Then you simply edit booklike.html, replacing each "page" div in the "page-holder" div with the HTML content you want on each page.
Because the .js files are ECMA 6 modules, you will need to run a local http server (e.g.- run "python -m http.server" in your working folder) and connect to the localhost URL it creates to display your booklike pages in a local browser while you work on them.
By giving a "page" div an additional "animation" class, you can activate a simple animation control on that page, as shown at the bottom of this page. To use this feature, you must supply your own javascript module which connects to this animation control on any pages you animate.
You can click on the play/pause button to start/stop the animation. Hitting the Spacebar key also toggles start/stop. If the animation has reached the end, clicking the button or hitting spacebar will reset the animation to the beginning. You can drag the slider to position the animation at any intermediate point. After the first play, the animation control fades out to become less obtrusive when the mouse is not over it; reappearing when you move the mouse over it. (If there is an animation on both pages, hitting the Tab key successively will toggle which one the Spacebar controls; the other will fade.)
Animation pages require a javascript function in order to draw frames of the animation. Other pages might also require notifications when they change visibility on page changes. On the "page" div of any such page, put a "data-actionid" attribute. Use this "actionid" to associate your javascript animation methods with that page:
The page argument is the HTML element with class "page" and the corresponding "actionid". See main.js for an simple example.
Controls:
Options: