derekmc · June 8, 2025 14:18
diff --git a/livetest.html b/livetest.html
 <html>
  <body class='fill'>
    <iframe id='frame1'></iframe>
    <textarea id='text1'></textarea>
    <p>
      <button id='button_update' onclick='toggleUpdate()'>Auto-Update</button>
    </p>
    <style>
      #frame1, #text1{
        display: block;
        width: 300px;
        height: 200px;
        border: 2px solid black;
        font-family: monospace;
        box-sizing: border-box;
     }
     .fill #frame1, .fill #text1{
        width: calc(100vw);
        height: calc(50vh - 33px);
      }
      .fill{
        margin: 0;
        overflow: hidden;
        text-align: center;
      }
      button{
        background: #fff;
        color: #000;
        border: 2px solid #000;
        padding: 8px;
      }
      button.stuck{
        border: 2px solid #bbb;
        background: #000;
        color:#ddd;
      }
    </style>
    <script>
      let key = '--livetest-src--'
      let page0 = `<${''}h1> Test Page<${''}/h1>`
      let auto = false
      let updateTime = 15*1000
      let shortPause = 400
      
      init()
      function init(){
        let src = page0
        let saved = localStorage.getItem(key)
        if(saved){
          src = saved
        }
        id('text1').value = src
        window.addEventListener('keydown', keydown)
      }
      function toggleUpdate(){
        if(auto){
          clearInterval(auto)
          auto = null
          id('button_update').classList.remove('stuck')
        }else{
          id('button_update').classList.add('stuck')
          auto = setInterval(update, updateTime)
          setTimeout(update, shortPause)
        }
      }
        
      function update(){
        let src = id('text1').value
        localStorage.setItem(key, src)
        id('frame1').srcdoc = '<'+'p> Updating... <'+'/p>'
        setTimeout(()=>{id('frame1').srcdoc = src}, 4*shortPause)
      } 
      function id(x){
        return document.getElementById(x)
      }
      function keydown(e){
        if(e.ctrlKey && e.keyCode == 13){
          toggleUpdate()
        }
      }
    </script>
  </body>
 </html>
	<html>
	<body class='fill'>
	<iframe id='frame1'></iframe>
	<textarea id='text1'></textarea>
	<p>
	<button id='button_update' onclick='toggleUpdate()'>Auto-Update</button>
	</p>
	<style>
	#frame1, #text1{
	display: block;
	width: 300px;
	height: 200px;
	border: 2px solid black;
	font-family: monospace;
	box-sizing: border-box;
	}
	.fill #frame1, .fill #text1{
	width: calc(100vw);
	height: calc(50vh - 33px);
	}
	.fill{
	margin: 0;
	overflow: hidden;
	text-align: center;
	}
	button{
	background: #fff;
	color: #000;
	border: 2px solid #000;
	padding: 8px;
	}
	button.stuck{
	border: 2px solid #bbb;
	background: #000;
	color:#ddd;
	}
	</style>
	<script>
	let key = '--livetest-src--'
	let page0 = `<${''}h1> Test Page<${''}/h1>`
	let auto = false
	let updateTime = 15*1000
	let shortPause = 400

	init()
	function init(){
	let src = page0
	let saved = localStorage.getItem(key)
	if(saved){
	src = saved
	}
	id('text1').value = src
	window.addEventListener('keydown', keydown)
	}
	function toggleUpdate(){
	if(auto){
	clearInterval(auto)
	auto = null
	id('button_update').classList.remove('stuck')
	}else{
	id('button_update').classList.add('stuck')
	auto = setInterval(update, updateTime)
	setTimeout(update, shortPause)
	}
	}

	function update(){
	let src = id('text1').value
	localStorage.setItem(key, src)
	id('frame1').srcdoc = '<'+'p> Updating... <'+'/p>'
	setTimeout(()=>{id('frame1').srcdoc = src}, 4*shortPause)
	}
	function id(x){
	return document.getElementById(x)
	}
	function keydown(e){
	if(e.ctrlKey && e.keyCode == 13){
	toggleUpdate()
	}
	}
	</script>
	</body>
	</html>