Getting different template on button press works

This commit is contained in:
Gabriel Simmer 2018-03-04 17:06:06 -08:00
parent 9a0e526e2a
commit 392016837b
5 changed files with 5 additions and 165 deletions

View file

@ -1,17 +1,17 @@
console.log("app.js loaded"); console.log("app.js loaded");
var getTemplateHtml = template => { var getTemplateHtml = template => {
fetch('template/template.html') document.getElementById('iframe').src = "about:blank";
fetch('template/'+template+'.html')
.then(function(response) { .then(function(response) {
return response.text() return response.text()
}) })
.then(function(html) { .then(function(html) {
document.getElementById('iframe').contentWindow.document.write(html); document.getElementById('iframe').contentWindow.document.write(html);
console.log(document.getElementById('iframe').contentWindow.document)
}); });
} }
getTemplateHtml("1");
var valueChange = value => { var valueChange = value => {
var iframehtml = document.getElementById('iframe').contentWindow.document.getElementById(value); var iframehtml = document.getElementById('iframe').contentWindow.document.getElementById(value);
val = document.getElementById(value).value; val = document.getElementById(value).value;

View file

@ -17,8 +17,8 @@
<div id="themebtns"> <div id="themebtns">
<h1>I'm not done my website!</h1> <h1>I'm not done my website!</h1>
<h2>Theme</h2> <h2>Theme</h2>
<button class="themebtn" id="original">Original</button> <button class="themebtn" id="original" onclick="getTemplateHtml('original')">Original</button>
<button class="themebtn" id="fork">Fork</button> <button class="themebtn" id="fork" onclick="getTemplateHtml('fork')">Fork</button>
</div> </div>
<!-- Colour inputs --> <!-- Colour inputs -->
<div id="themeclrs"> <div id="themeclrs">

View file

@ -1,53 +0,0 @@
<?php
header('Content-Type: text/plain');
header('Content-Disposition: attachment; filename=index.html');
$sname = $_POST['sname'];
$surl = $_POST['surl'];
$devname = $_POST['devname'];
$pcolour = $_POST['pcolour'];
$scolour = $_POST['scolour'];
$template = $_POST['template'];
$tFile = "template/template.html";
if($template == "The Original"){
$tFile = "template/template.html";
}
if($template == "Forked"){
$tFile = "template/template2.html";
}
$template = fopen($tFile, "r+"); // Change this if you have a custom template filename
$tempContents = fread($template, filesize($tFile));
// Keywords for replacement - see README
$keywords = array("rep_PCOLOUR", "rep_SCOLOUR", "rep_SNAME", "rep_URL", "rep_DEVNAME");
$replacement = array($pcolour, $scolour, $sname, $surl, $devname);
// ---
$contents = str_replace($keywords, $replacement, $tempContents); // Replace the contents of the variable
fclose($template);
/* Debug stuff
echo "$sname ";
echo "$surl ";
echo "$devname ";
echo "$pcolour ";
echo "$scolour ";
*/
echo $contents; // Echo out the generated page
/* Not actually needed but may need to reuse this code later on
*
* $indexfile = fopen("index.html", "w");
* fwrite($indexfile, NULL);
* fclose($indexfile);
*
*/
// Make the client download the file as a .html :)
?>

View file

@ -1,48 +0,0 @@
<!DOCTYPE html>
<!-- Very simple webpage that scales decently -->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>rep_SNAME</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='https://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'>
<style type="text/css">
body{
font-family: 'Roboto', sans-serif;
position: fixed;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #E9E9E9;
}
.header{
font-weight: 700;
padding: 10px;
text-align: center;
background-color: rep_PCOLOUR;
box-shadow:2px 2px 5px #888;
}
.content{
font-weight: 400;
padding: 6%;
text-align: center;
background-color: rep_SCOLOUR;
box-shadow:2px 2px 5px #888;
}
</style>
</head>
<body>
<div class="header">
<h1 id="sitename">rep_SNAME</h1>
</div>
<br />
<div class="content" id="content">
<p><span id="url">rep_URL</span> is being worked on by <span id="devname">rep_DEVNAME!</span></p> <!-- See README for keywords -->
</div>
</body>
</html>

View file

@ -1,59 +0,0 @@
<!DOCTYPE html>
<!-- Very simple webpage that scales decently -->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>rep_SNAME - Under Construction</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='https://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'>
<style type="text/css">
body{
font-family: 'Roboto', sans-serif;
padding: 0;
margin: 0;
background-color: #E9E9E9;
}
.container {
width: 40%;
margin: 0 auto;
}
header {
margin-top: -20px;
background-color: rep_PCOLOUR;
border-bottom: 5px solid rep_SCOLOUR;
padding: 10px 0;
}
.content{
width: 40%;
position: fixed;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
font-weight: 400;
text-align: center;
color: rep_SCOLOUR;
background-color: rep_PCOLOUR;
box-shadow:2px 2px 5px #888;
border-bottom: 5px solid rep_SCOLOUR;
}
</style>
</head>
<body>
<header>
<div class="container">
<h1>rep_SNAME</h1>
</div>
</header>
<div class="content">
<h1>Under Construction</h1>
<p>rep_SNAME is being worked on by rep_DEVNAME!</p> <!-- See README for keywords -->
</div>
</body>
</html>