oliv-components/with.new.templates.01.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Using templates</title>

	<link rel="icon" type="image/png" href="../logo-192x192.png">

	<link rel="stylesheet" href="css/stylesheet.css">
	<link rel="stylesheet" href="css/web-components.css">

	<!-- Minified -->
	<!--script type="module" src="lib/worldmap/world-map.min.js"></script>
	<script type="module" src="lib/splitflap/split-flap-display.min.js"></script-->
	<!-- Debug -->
	<script type="module" src="widgets/worldmap/WorldMap.js"></script>
	<script type="module" src="widgets/splitflap/SplitFlapDisplay.js"></script>

	<!-- HTML imports are now obsolete -->
	<!-- R.I.P. HTML Imports
	<link rel="import" id="import-01" href="templates/world.map.template.html">
	<link rel="import" id="import-02" href="templates/split.flap.template.html">
	-->
	<script src="templates/template.01.js" type="text/javascript"></script>

	<style>
		html {
			height: 100%;
			width: 100%;
		}

		body {
			color: gray;
			font-family: "Helvetica Neue", Verdana, Arial, Helvetica, sans-serif;
			/* background-image: linear-gradient(to bottom right, #4d4d4d, black); */
			background: radial-gradient(at top, red -8%, orange 55%);
			background-repeat: no-repeat;
			background-size: 100% 100%;
		}

		.black-frame {
			padding: 3px;
			margin: 1px;
			border-radius: 5px;
			border: 1px solid silver;
			box-shadow: 3px 3px #ccc;
		}

		.centered {
			text-align: center;
		}

	</style>
</head>
<body>

	<h1 class="black-frame">These are Web Components in HTML Templates</h1>

  	<div w3-include-html="./templates/world.map.template.html"></div>

	<div id="split-flap-placeholder">
		<div w3-include-html="./templates/split.flap.template.html"></div>
	</div>

	<hr/>
	<small>Take a look at the page source (HTML part), it's really worth it.</small>

</body>

<script type="text/javascript">

	if ("import" in document.createElement("link")) {
		// This browser supports HTML5 Imports.
		console.log("HTML imports are supported. Good.");
	} else {
		console.log("No imports here...");
	}

	includeHTML();

</script>
</html>