cherryramatisdev/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<style>
  body {
    margin: 0;
    background: black;
    width: 100vw;
    height: 100vh;
  }
  iframe {
    width: 100%;
    height: 100%;
    background: white;
  }
  input {
    padding: 10px;
  }
  button {
    padding: 10px;
    color: white;
    border: 0;
    background: #823AFB;
  }
  .center {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 20px;
  }
</style>
<body>
  <form id="form" class="center">
    <input id="urlinput" type="text" placeholder="Type application full url">
    <button type="submit">Show app</button>
  </form>

  <iframe id="app" frameborder="0"></iframe>

  <script>
    (function () {
      const app = document.getElementById('app')
      app.setAttribute('style', 'display: none;')
      const form = document.getElementById('form')

      const queryParams = new URLSearchParams(window.location.search)
      const url = queryParams.get("url")

      if (!!url) {
        const encodedUrl = url + '?' + queryParams.toString()
        app.setAttribute('src', encodedUrl)
        app.setAttribute('style', 'display: block;')
        form.setAttribute('style', 'display: none;')
        return
      }

      form.addEventListener('submit', (e) => {
        e.preventDefault()

        const inputVal = document.getElementById('urlinput').value
        if (!inputVal.length) return window.alert('Please type a URL')

        const encodedQueryParams = new URLSearchParams(inputVal.split('?')[1])
        const encodedInputVal = inputVal.split('?')[0] + '?' + encodedQueryParams.toString()

        app.setAttribute('src', encodedInputVal)
        app.setAttribute('style', 'display: block;')
        form.setAttribute('style', 'display: none;')
      })
    })();
  </script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title></title>
	</head>
	<style>
	body {
	margin: 0;
	background: black;
	width: 100vw;
	height: 100vh;
	}
	iframe {
	width: 100%;
	height: 100%;
	background: white;
	}
	input {
	padding: 10px;
	}
	button {
	padding: 10px;
	color: white;
	border: 0;
	background: #823AFB;
	}
	.center {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 20px;
	}
	</style>
	<body>
	<form id="form" class="center">
	<input id="urlinput" type="text" placeholder="Type application full url">
	<button type="submit">Show app</button>
	</form>

	<iframe id="app" frameborder="0"></iframe>

	<script>
	(function () {
	const app = document.getElementById('app')
	app.setAttribute('style', 'display: none;')
	const form = document.getElementById('form')

	const queryParams = new URLSearchParams(window.location.search)
	const url = queryParams.get("url")

	if (!!url) {
	const encodedUrl = url + '?' + queryParams.toString()
	app.setAttribute('src', encodedUrl)
	app.setAttribute('style', 'display: block;')
	form.setAttribute('style', 'display: none;')
	return
	}

	form.addEventListener('submit', (e) => {
	e.preventDefault()

	const inputVal = document.getElementById('urlinput').value
	if (!inputVal.length) return window.alert('Please type a URL')

	const encodedQueryParams = new URLSearchParams(inputVal.split('?')[1])
	const encodedInputVal = inputVal.split('?')[0] + '?' + encodedQueryParams.toString()

	app.setAttribute('src', encodedInputVal)
	app.setAttribute('style', 'display: block;')
	form.setAttribute('style', 'display: none;')
	})
	})();
	</script>
	</body>
	</html>