When the page is loaded a splash is display for about 5 seconds. It contains a heading and an image.
Desktop Screenshot with Cookie Consent
The cookie consent and the use of cookies is independent of the rest of the HTML/CSS/JavaScript. If you want to quickly disable the consent and use of cookies then edit index.html and comment out the line -
<script src="./assets/js/cookies.js"></script>
Change it to:
<!-- <script src="./assets/js/cookies.js"></script> -->
Desktop Screenshot with Cookie Consent
This is a dynamically created gallery. It designed to create the necessary HTML/CSS when the page is loaded. The image URLs are stored in a list. It's only necessary to edit the list and the gallery will change on the next page load.
CSS Grid was used to arrange the images.
Simple Image Gallery
This lightbox is also dynamically created. However, the HTML/CSS is not created until an image is selected from the gallery.
While the lightbox is active page scrolling is disabled.
Simple Image Lightbox
This is just a basic contact form without validation or email capability, and the form fields were laid out using CSS Grid. There is also a character counter for the message box.
Basic Contact Form
This demonstrates dynamic loading of CSS files. There is a collection of CSS files that set the colors.
Color Theme Examples
NOTE: If the cookie consent was accepted the theme choice will be saved to a cookie. If the consent is declined then no cookie will be saved. When the page loads if the consent cookie is present then the theme cookie is read and it's contents contain the theme CSS file name and the ID of the radio button that selected it.
This was created out of necessity. I was testing on my phone and couldn't find my USB cable for remote debugging. And I needed to see some run-time variables and test results. This "devdebug" output is optional and is off by default. To enable it add devdebug in the query:
http[s]://your-webserver/path/to/?devdebug
Optional Debug Data Ouput
From top to bottom the pieces are:
This is some data from the "to top" button.
This is the test result for loading and executing a JavaScript file.
This is the result of detecting the browser.
This is the result of waiting for and responding to CSS events.
First page load, no cookies have been saved.
The cookie consent has been accepted and a theme was saved.