<!DOCTYPE html>
<html>
<head>
<base target="_top">
<!--
The <base> tag specifies the base URL and/or target for all relative URLs in a document.
The <base> tag must have either an href or a target attribute present, or both.
There can only be one single <base> element in a document, and it must be inside the <head> element.
-->
<title>Open another Page App</title>
<style>
h1 {
text-align: center;
margin: 2px;
text-transform: uppercase;
background-color: green;
}
span:hover,
a:hover {
background-color: yellowgreen;
}
body {
background-color: brown;
color: white;
font-size: 2em;
}
a:visited {
color: white;
}
</style>
</head>
<body>
<h1 id="type">Open Another Page App Demo</h1>
<div id="main"><div>Loading...</div>
<label for="username">Username:</label>
<input type="text" id="username" name="fusername">
<ul><!-- here are the real names of html pages -->
<li><a href="?page=meals">Submit and open Meals</a></li>
</ul>
</div>
<script>
//Change base url (href of tag named 'base')
google.script.run
.withSuccessHandler(url => {
$('base').attr('href', url)
})
.getUrl()
</script>
</body>
</html>