cpq/pwa-preact-bulma.html

## pwa-preact-bulma.html
<!DOCTYPE html>
<html>
  <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>mDash Smart Light</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://unpkg.com/preact"></script>

    <style>
      select,input,label::before,textarea,.button,.btn:focus,.btn:active:focus,.btn.active:focus,.btn.focus,.btn:active.focus,.btn.active.focus { outline: none; box-shadow:none !important; }
      html,body {height: 100%;}
      .main { display: flex; min-height: 100vh; flex-direction: column; max-width: 480px; margin: 0 auto; }
      .page { flex: 1; }
    </style>
  </head>

  <body></body>

  <script>
    var h = preact.h;  // Make an alias for Preact's rendering function

		var Tab1 = function(props) {
			return h('section', {class:'hero has-text-centered has-background-warning'}, 'tab1');
		};

		var Tab2 = function(props) {
			return h('div', {}, 'tab2');
		};

		var App = function(props) {
			var self = this;
			self.componentDidMount = function() { self.setState({cnt: 1, tab: Tab1}); };
			var header = h('nav', {class: 'has-background-white-ter navbar'},
				h('div', {class:'image is-64x64 navbar-item'},
					h('img', {src: 'http://images.clipartpanda.com/watermelon-clipart-Watermelon_simple.svg'}), '\u00a0', 'myApp'));
			var mkTabButton = function(title, icon, tab) {
				var onClick = function() { self.setState({tab: tab}); };
				return h('li', {onClick: onClick, class: tab == self.state.tab ? 'is-active' : ''}, h('a', {}, h('span', {class:'icon'}, h('i', {class: 'fa ' + icon})), title));
			};
      var footer = h('footer', {class:''},
        h('div', {class:'tabs is-toggle is-fullwidth'},
          h('ul', {class: ''},
						mkTabButton('My Devices', 'fa-diamond', Tab1),
						mkTabButton('Add New Device', 'fa-plus-circle', Tab2),
					)));

      return h('div', {class:'main box is-paddingless'},
        h('div', {class:'page'}, header, h(self.state.tab || Tab1)), footer);
    };

    preact.render(h(App), document.body);
  </script>
</html>
	<!DOCTYPE html>
	<html>
	<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>mDash Smart Light</title>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	<script src="https://unpkg.com/preact"></script>

	<style>
	select,input,label::before,textarea,.button,.btn:focus,.btn:active:focus,.btn.active:focus,.btn.focus,.btn:active.focus,.btn.active.focus { outline: none; box-shadow:none !important; }
	html,body {height: 100%;}
	.main { display: flex; min-height: 100vh; flex-direction: column; max-width: 480px; margin: 0 auto; }
	.page { flex: 1; }
	</style>
	</head>

	<body></body>

	<script>
	var h = preact.h; // Make an alias for Preact's rendering function

	var Tab1 = function(props) {
	return h('section', {class:'hero has-text-centered has-background-warning'}, 'tab1');
	};

	var Tab2 = function(props) {
	return h('div', {}, 'tab2');
	};

	var App = function(props) {
	var self = this;
	self.componentDidMount = function() { self.setState({cnt: 1, tab: Tab1}); };
	var header = h('nav', {class: 'has-background-white-ter navbar'},
	h('div', {class:'image is-64x64 navbar-item'},
	h('img', {src: 'http://images.clipartpanda.com/watermelon-clipart-Watermelon_simple.svg'}), '\u00a0', 'myApp'));
	var mkTabButton = function(title, icon, tab) {
	var onClick = function() { self.setState({tab: tab}); };
	return h('li', {onClick: onClick, class: tab == self.state.tab ? 'is-active' : ''}, h('a', {}, h('span', {class:'icon'}, h('i', {class: 'fa ' + icon})), title));
	};
	var footer = h('footer', {class:''},
	h('div', {class:'tabs is-toggle is-fullwidth'},
	h('ul', {class: ''},
	mkTabButton('My Devices', 'fa-diamond', Tab1),
	mkTabButton('Add New Device', 'fa-plus-circle', Tab2),
	)));

	return h('div', {class:'main box is-paddingless'},
	h('div', {class:'page'}, header, h(self.state.tab \|\| Tab1)), footer);
	};

	preact.render(h(App), document.body);
	</script>
	</html>