chadlavi/preact-template.html

## preact-template.html
<!-- cf. https://gist.github.com/chadlavi/da917425f0fe382a8a049d3908638995 -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Preact</title>
  <style>
    /* Loading spinner styles. Delete this style tag if you remove the loading spinner. */
    :root {
        background-color: white;
        color: black;
      --loading-color: #eee;
    }

    /* remove this if you don't want automatic dark mode */
    @media (prefers-color-scheme: dark) {
      :root {
        background-color: #111;
        color: white;
        --loading-color: #333;
      }
    }

    #loading {
      display: flex;
      justify-content: center;
      align-items: center;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
    }

    .loading-ring {
      display: inline-block;
      position: relative;
      width: 80px;
      height: 80px;
    }

    .loading-ring div {
      box-sizing: border-box;
      display: block;
      position: absolute;
      width: 64px;
      height: 64px;
      margin: 8px;
      border: 8px solid var(--loading-color);
      border-radius: 50%;
      animation: loading-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
      border-color: var(--loading-color) transparent transparent transparent;
    }

    .loading-ring div:nth-child(1) {
      animation-delay: -0.45s;
    }

    .loading-ring div:nth-child(2) {
      animation-delay: -0.3s;
    }

    .loading-ring div:nth-child(3) {
      animation-delay: -0.15s;
    }

    @keyframes loading-ring {
      0% {
        transform: rotate(0deg);
      }

      100% {
        transform: rotate(360deg);
      }
    }
  </style>
  <style>
    /* Put your styles here */
  </style>
</head>
<body>
  <div id="root">
    <!-- This is the loading spinner, if you remove it be sure to delete its styles and remove it from the render below -->
    <div id="loading">
      <div class="loading-ring">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
  </div>
  <script type="module">
    "use strict";

    /**
     * The version of html is specified below to reduce load time for slower
     * internet connections. Check what the latest version is when using this!
     */
    import {
      html,
      render,
      // useState,
    } from "https://unpkg.com/htm@3.0.4/preact/standalone.module.js";

    const App = () => {
      return html`<div id="app">Hello, world!</div>`;
    }

    render(
      html`<${App} />`,
      document.getElementById("root"),
      /**
       * The third argument is the element to be replaced with the rendered
       * content. Remove this is you get rid of the loading spinner!
       */
      document.getElementById("loading")
    );
  </script>
</body>
</html>
	<!-- cf. https://gist.github.com/chadlavi/da917425f0fe382a8a049d3908638995 -->
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Preact</title>
	<style>
	/* Loading spinner styles. Delete this style tag if you remove the loading spinner. */
	:root {
	background-color: white;
	color: black;
	--loading-color: #eee;
	}

	/* remove this if you don't want automatic dark mode */
	@media (prefers-color-scheme: dark) {
	:root {
	background-color: #111;
	color: white;
	--loading-color: #333;
	}
	}

	#loading {
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	}

	.loading-ring {
	display: inline-block;
	position: relative;
	width: 80px;
	height: 80px;
	}

	.loading-ring div {
	box-sizing: border-box;
	display: block;
	position: absolute;
	width: 64px;
	height: 64px;
	margin: 8px;
	border: 8px solid var(--loading-color);
	border-radius: 50%;
	animation: loading-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
	border-color: var(--loading-color) transparent transparent transparent;
	}

	.loading-ring div:nth-child(1) {
	animation-delay: -0.45s;
	}

	.loading-ring div:nth-child(2) {
	animation-delay: -0.3s;
	}

	.loading-ring div:nth-child(3) {
	animation-delay: -0.15s;
	}

	@keyframes loading-ring {
	0% {
	transform: rotate(0deg);
	}

	100% {
	transform: rotate(360deg);
	}
	}
	</style>
	<style>
	/* Put your styles here */
	</style>
	</head>
	<body>
	<div id="root">
	<!-- This is the loading spinner, if you remove it be sure to delete its styles and remove it from the render below -->
	<div id="loading">
	<div class="loading-ring">
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	</div>
	</div>
	</div>
	<script type="module">
	"use strict";

	/**
	* The version of html is specified below to reduce load time for slower
	* internet connections. Check what the latest version is when using this!
	*/
	import {
	html,
	render,
	// useState,
	} from "https://unpkg.com/htm@3.0.4/preact/standalone.module.js";

	const App = () => {
	return html`<div id="app">Hello, world!</div>`;
	}

	render(
	html`<${App} />`,
	document.getElementById("root"),
	/**
	* The third argument is the element to be replaced with the rendered
	* content. Remove this is you get rid of the loading spinner!
	*/
	document.getElementById("loading")
	);
	</script>
	</body>
	</html>