domtronn/index.html

## index.html
<html>
  <head>
    <style>
     body { font-family: sans-serif; width: 100%; }
     div,body { text-align: center; }
     h1,h2,h3,button { color: #2a2a2a; font-family: sans-serif; margin: 0; }
     #browser.success,.success { color: #0bce6b; }
     .failure { color: #ff4e42; }

     .hide { color: rgba(0,0,0,0); }

     h1 { font-size: 2rem; padding-top: 8rem; }
     h2 { font-size: 4rem; }
     h3 { font-size: 8rem; }
     h4 { font-size: 2rem; margin-top: 0rem; }

     .cls { background-color: #ebebeb; height: 15%; width: 800px; margin: 0 auto; }
     .ctr { display: inline-block; padding-top: 4rem; }
     .ctr > * { display: inline-block; margin: 0 4rem; }
     button { display: block; margin: 0 auto; cursor: pointer; -webkit-appearance: button; border: none; font-size: 2rem; padding: 1rem 2rem; border-radius: 1rem; }
     button:hover { color: #ebebeb; background-color: #2a2a2a; }

    </style>

    <script type="module">
     import { detect } from 'https://cdn.skypack.dev/detect-browser';

     const browser = detect()
     console.log('Got browser - ', browser)
     window.browser = browser

     const el = document.getElementById('browser')
     el.innerText = browser.name + '@' + browser.version
     el.classList = 'success'
    </script>

    <script type="module" >
     import { collectMetrics, getDeviceInfo } from "https://cdn.skypack.dev/uxm@next"

     collectMetrics(['cls', 'fid', 'lcp', 'fcp'], metric => {
       console.log('Got metric - ', metric)
       window[`m_` + metric.metricType] = metric.value

       const el = document.getElementById(metric.metricType)
       el.innerText = '✔'
       el.classList = 'success'

       const del = document.getElementById(metric.metricType + '__detail')
       del.innerText = metric.value
       del.classList = ''
     })
    </script>

    <script type="text/javascript">
     window.onload = function () {
       setTimeout(function () {
         const el = document.getElementById('app')
         const div = document.createElement('div')
         div.classList = 'cls'
         el.appendChild(div)
       }, 1200)
     }

     function copy () {
       const browser = window.browser || {}
       const body = `${browser.name},${browser.version},${window.m_fid || ''},${window.m_lcp || ''},${window.m_cls || ''},${window.m_fcp || ''}`
       console.log(body)
       navigator
         .clipboard
         .writeText(body)
         .then(_ => alert(`Copied: ${body}`))
         .catch(_ => alert(_))
     }

    </script>

  </head>

  <body>
    <div id="app"></div>

    <h1>
      Browser WebVital support
    </h1>

    <h2 id="browser" class="hide">
      ...
    </h2>

    <div class="ctr">
      <div>
        <h2>CLS</h2>
        <h3 class="failure" id="cls">✘</h2> <h4 class="hide" id="cls__detail">...</h4>
      </div>

      <div>
        <h2>FID</h2>
        <h3 class="failure" id="fid">✘</h2> <h4 class="hide" id="fid__detail">...</h4>
      </div>

      <div>
        <h2>LCP</h2>
        <h3 class="failure" id="lcp">✘</h2> <h4 class="hide" id="lcp__detail">...</h4>
      </div>

      <div>
        <h2>FCP</h2>
        <h3 class="failure" id="fcp">✘</h2> <h4 class="hide" id="fcp__detail">...</h4>
      </div>

    </div>

    <button onclick="copy()">
      Copy Results
    </button>
  </body>
</html>
	<html>
	<head>
	<style>
	body { font-family: sans-serif; width: 100%; }
	div,body { text-align: center; }
	h1,h2,h3,button { color: #2a2a2a; font-family: sans-serif; margin: 0; }
	#browser.success,.success { color: #0bce6b; }
	.failure { color: #ff4e42; }

	.hide { color: rgba(0,0,0,0); }

	h1 { font-size: 2rem; padding-top: 8rem; }
	h2 { font-size: 4rem; }
	h3 { font-size: 8rem; }
	h4 { font-size: 2rem; margin-top: 0rem; }

	.cls { background-color: #ebebeb; height: 15%; width: 800px; margin: 0 auto; }
	.ctr { display: inline-block; padding-top: 4rem; }
	.ctr > * { display: inline-block; margin: 0 4rem; }
	button { display: block; margin: 0 auto; cursor: pointer; -webkit-appearance: button; border: none; font-size: 2rem; padding: 1rem 2rem; border-radius: 1rem; }
	button:hover { color: #ebebeb; background-color: #2a2a2a; }

	</style>

	<script type="module">
	import { detect } from 'https://cdn.skypack.dev/detect-browser';

	const browser = detect()
	console.log('Got browser - ', browser)
	window.browser = browser

	const el = document.getElementById('browser')
	el.innerText = browser.name + '@' + browser.version
	el.classList = 'success'
	</script>

	<script type="module" >
	import { collectMetrics, getDeviceInfo } from "https://cdn.skypack.dev/uxm@next"

	collectMetrics(['cls', 'fid', 'lcp', 'fcp'], metric => {
	console.log('Got metric - ', metric)
	window[`m_` + metric.metricType] = metric.value

	const el = document.getElementById(metric.metricType)
	el.innerText = '✔'
	el.classList = 'success'

	const del = document.getElementById(metric.metricType + '__detail')
	del.innerText = metric.value
	del.classList = ''
	})
	</script>

	<script type="text/javascript">
	window.onload = function () {
	setTimeout(function () {
	const el = document.getElementById('app')
	const div = document.createElement('div')
	div.classList = 'cls'
	el.appendChild(div)
	}, 1200)
	}

	function copy () {
	const browser = window.browser \|\| {}
	const body = `${browser.name},${browser.version},${window.m_fid \|\| ''},${window.m_lcp \|\| ''},${window.m_cls \|\| ''},${window.m_fcp \|\| ''}`
	console.log(body)
	navigator
	.clipboard
	.writeText(body)
	.then(_ => alert(`Copied: ${body}`))
	.catch(_ => alert(_))
	}

	</script>

	</head>

	<body>
	<div id="app"></div>

	<h1>
	Browser WebVital support
	</h1>

	<h2 id="browser" class="hide">
	...
	</h2>

	<div class="ctr">
	<div>
	<h2>CLS</h2>
	<h3 class="failure" id="cls">✘</h2> <h4 class="hide" id="cls__detail">...</h4>
	</div>

	<div>
	<h2>FID</h2>
	<h3 class="failure" id="fid">✘</h2> <h4 class="hide" id="fid__detail">...</h4>
	</div>

	<div>
	<h2>LCP</h2>
	<h3 class="failure" id="lcp">✘</h2> <h4 class="hide" id="lcp__detail">...</h4>
	</div>

	<div>
	<h2>FCP</h2>
	<h3 class="failure" id="fcp">✘</h2> <h4 class="hide" id="fcp__detail">...</h4>
	</div>

	</div>

	<button onclick="copy()">
	Copy Results
	</button>
	</body>
	</html>