Skip to content

Instantly share code, notes, and snippets.

@bennettscience
Last active April 13, 2023 14:46
Show Gist options
  • Save bennettscience/b85b7e028aaba161c8f2 to your computer and use it in GitHub Desktop.
Save bennettscience/b85b7e028aaba161c8f2 to your computer and use it in GitHub Desktop.
Generates an HTML page based on form input data. This source should be hosted as a webpage.
<html>
<head>
<style type="text/css" media="screen"> <!-- Style the template -->
html,body {
margin:0;
padding:0;
}
p {
color:#8f8f8f;
font-family:Arial;
font-size:18px;
line-height: 1;
margin:0.25em 0;
}
form {
width:50%;
margin:0 auto;
text-align: center;
}
input {
margin:15px auto;
padding:5px;
line-height:1.25;
font-size:18px;
}
textarea {
height:150px;
width:inherit;
font-family:Arial;
font-size:18px;
}
</style>
<script type="text/javascript">
// This script grabs data from the template form and generates new HTML source
function createNewWindow() {
// Set the document variables from the form
var title = document.getElementById('title').value
var videoSrc = document.getElementById('video_src').value
var notes = document.getElementById('notes').value
// Create the new pagem set the title and style attributes
var newPage = "<html><head><link rel='stylesheet' type='text/css' media='screen' href='style.css' /><title>"
newPage += title;
newPage += "</title><style type='text/css'>html,body {margin:0;padding:0;}a {display: none;}#main {width:100%;margin:0 auto;height:100%;font-family:'Open Sans',sans-serif;}#main p,#main ol,#main li {font-size:1.8rem;font-size:18px;}#content {width:65%;margin:0 auto;padding:20px;background-color:rgba(225,225,225,0.75);}.video {position: relative;padding-bottom: 56.25%;padding-top: 30px; height: 0; overflow: hidden;}.video iframe,.video object,.video embed,.video video {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}</style></head>";
// Set the body container divs and H1 title
newPage += "<body><div id='main'><div id='content'><h1>" + title + "</h1>";
// Create the HTML5 video container. Source is pulled from the form. Only runs MP4 right now to keep things simple.
newPage += "<div class='video'>";
newPage += "<video controls><source src='" + videoSrc;
newPage += "' type='video/mp4'/>";
newPage += "</video></div <!--video-->"
// End video container, add any notes from the form. Plaintext only.
newPage += "<p>" + notes;
newPage += "<p>";
newPage += "</body></html>";
// Set the download action on the button.
var downlink = document.getElementById('downlink');
downlink.href = 'data:text/plain;charset=utf-8,' + encodeURIComponent(newPage);
var event = new MouseEvent('click');
downlink.dispatchEvent(event);
}
</script>
</head>
<body>
<!-- This is the FORM that users see in the browser -->
<form action="">
<input type="text" id="title" value="Class Name">
<p>This adds a header so you know what page you're showing.</p>
<br/>
<input type="text" id="video_src" value="Video file">
<p>The file to be embedded. Make sure to include the file extension!</p>
<p><i>Ex: video.mp4</i></p>
<br/>
<textarea id="notes" value="Notes/Instructions"></textarea>
<p>Any instructions to be displayed below the video on the page.</p>
<br/>
<input type="button" id="createHtml" value="Create and download page" onclick="createNewWindow();">
<a id="downlink" download="absent.html"></a>
</form>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment