wschenk/final.final.html

## final.final.html
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>This is my title</title>
  <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="bg-gray-100 text-gray-900">
  <div class="bg-blue-500 pt-16 pb-20 shadow-lg">
    <img src="logo.svg" class="mx-auto h-10 w-auto">
  </div>

  <div class="flex">
    <div class="w-64 p-4">
      <a href="#" onClick="showLogin()" class="block">Login</a>
      <a href="#" onClick="showDirectory()" class="block pt-4">Directory</a>
      <a href="#" onClick="showProfile()" class="block pt-4">Profile</a>
    </div>
    <div id="root" class="w-full"></div>
  </div>

  <template id="login">
    <button class="m-4 px-4 py-2 bg-blue-500 text-gray-100 rounded">Login</button>
  </template>

  <template id="person">
    <div class="w-64 mt-20 border-solid border border-gray-200 rounded-lg">
      <img src="face.jpg" class="h-32 w-32 -mt-16 ml-16 shadow-xl border-2 border-gray-200 rounded-full">
      <h1 class="text-center text-xl font-semibold tracking-light">Will Schenk</h1>
      <h2 class="text-center text-md font-light">COO, CoFounder</h2>
      <a class="text-center block mt-2 font-light" href="mailto:will@happyfuncorp.com">will</a>
    </div>
  </template>


  <template id="profile">
    <img src="face.jpg" class="mx-auto h-32 w-32 rounded-full -mt-16 shadow-xl border-solid border-2 border-gray-300">
    <div class="mx-auto max-w-lg">
      <h1 class="pt-4 text-center text-4xl font-semibold tracking-tight">Will Schenk</h1>
      <h2 class="pb-4 text-center text-xl font-light">COO, CoFounder</h2>
      <p class="leading-relaxed text-justify">

        Will focuses on overall internal management of HappyFunCorp,
        which involves making sure that people are happy and productive,
        that clients are happy with their projects. This involves
        meetings and a lot of psycology.  It's rewarding when
        the company is growing and thriving, but also very different
        from time spent immersed in the fun of computers.
        The career grew out of the hobby, and now that my daily job
        is different from the hobby I can go back to being a
        hobby programmer. Coding for the pleasure of it.
      </p>
    </div>
  </template>
  <script>
    var root = document.querySelector( '#root' );
    var loginTemplate = document.querySelector( '#login' );
    var personTemplate = document.querySelector( '#person' );
    var profileTemplate = document.querySelector( '#profile' );

    function showLogin() {
      root.innerHTML = '';
      root.appendChild( loginTemplate.content.cloneNode(true));
    }

    function showDirectory() {
      // This is a bit hacky
      root.innerHTML = '<div id="container" class="flex flex-wrap justify-around"></div>';
      var container = document.querySelector( "#container" );

      var people = [
        { name: 'Alice', title: 'Title 1', mail: 'alice' },
        { name: 'Bob', title: 'Title 2', mail: 'bob' },
        { name: 'Carol', title: 'Title 3', mail: 'carol' },
        { name: 'Dom', title: 'Title 4', mail: 'dom' },
        { name: 'Elena', title: 'Title 5', mail: 'elena' },
        { name: 'Fineas', title: 'Title 6', mail: 'phinny' },
      ];

      people.forEach( (person) => {
        var tmp = personTemplate.content.cloneNode(true);
        tmp.querySelector("h1").innerText = person.name;
        tmp.querySelector("h2").innerText = person.title;
        tmp.querySelector("a").innerText = person.mail;
        tmp.querySelector("a").href = "mailto:" + person.mail + "@happyfuncorp.com";
        container.appendChild( tmp );
      } )
    }

    function showProfile() {
      root.innerHTML = '';
      root.appendChild( profileTemplate.content.cloneNode(true) );
    }

    showLogin();
  </script>

</body>
</html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>This is my title</title>
	<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
	</head>
	<body class="bg-gray-100 text-gray-900">
	<div class="bg-blue-500 pt-16 pb-20 shadow-lg">
	<img src="logo.svg" class="mx-auto h-10 w-auto">
	</div>

	<div class="flex">
	<div class="w-64 p-4">
	<a href="#" onClick="showLogin()" class="block">Login</a>
	<a href="#" onClick="showDirectory()" class="block pt-4">Directory</a>
	<a href="#" onClick="showProfile()" class="block pt-4">Profile</a>
	</div>
	<div id="root" class="w-full"></div>
	</div>

	<template id="login">
	<button class="m-4 px-4 py-2 bg-blue-500 text-gray-100 rounded">Login</button>
	</template>

	<template id="person">
	<div class="w-64 mt-20 border-solid border border-gray-200 rounded-lg">
	<img src="face.jpg" class="h-32 w-32 -mt-16 ml-16 shadow-xl border-2 border-gray-200 rounded-full">
	<h1 class="text-center text-xl font-semibold tracking-light">Will Schenk</h1>
	<h2 class="text-center text-md font-light">COO, CoFounder</h2>
	<a class="text-center block mt-2 font-light" href="mailto:will@happyfuncorp.com">will</a>
	</div>
	</template>


	<template id="profile">
	<img src="face.jpg" class="mx-auto h-32 w-32 rounded-full -mt-16 shadow-xl border-solid border-2 border-gray-300">
	<div class="mx-auto max-w-lg">
	<h1 class="pt-4 text-center text-4xl font-semibold tracking-tight">Will Schenk</h1>
	<h2 class="pb-4 text-center text-xl font-light">COO, CoFounder</h2>
	<p class="leading-relaxed text-justify">

	Will focuses on overall internal management of HappyFunCorp,
	which involves making sure that people are happy and productive,
	that clients are happy with their projects. This involves
	meetings and a lot of psycology. It's rewarding when
	the company is growing and thriving, but also very different
	from time spent immersed in the fun of computers.
	The career grew out of the hobby, and now that my daily job
	is different from the hobby I can go back to being a
	hobby programmer. Coding for the pleasure of it.
	</p>
	</div>
	</template>
	<script>
	var root = document.querySelector( '#root' );
	var loginTemplate = document.querySelector( '#login' );
	var personTemplate = document.querySelector( '#person' );
	var profileTemplate = document.querySelector( '#profile' );

	function showLogin() {
	root.innerHTML = '';
	root.appendChild( loginTemplate.content.cloneNode(true));
	}

	function showDirectory() {
	// This is a bit hacky
	root.innerHTML = '<div id="container" class="flex flex-wrap justify-around"></div>';
	var container = document.querySelector( "#container" );

	var people = [
	{ name: 'Alice', title: 'Title 1', mail: 'alice' },
	{ name: 'Bob', title: 'Title 2', mail: 'bob' },
	{ name: 'Carol', title: 'Title 3', mail: 'carol' },
	{ name: 'Dom', title: 'Title 4', mail: 'dom' },
	{ name: 'Elena', title: 'Title 5', mail: 'elena' },
	{ name: 'Fineas', title: 'Title 6', mail: 'phinny' },
	];

	people.forEach( (person) => {
	var tmp = personTemplate.content.cloneNode(true);
	tmp.querySelector("h1").innerText = person.name;
	tmp.querySelector("h2").innerText = person.title;
	tmp.querySelector("a").innerText = person.mail;
	tmp.querySelector("a").href = "mailto:" + person.mail + "@happyfuncorp.com";
	container.appendChild( tmp );
	} )
	}

	function showProfile() {
	root.innerHTML = '';
	root.appendChild( profileTemplate.content.cloneNode(true) );
	}

	showLogin();
	</script>

	</body>
	</html>