mirror of
https://github.com/gmemstr/notdonemywebsite.git
synced 2024-09-19 21:51:10 +01:00
commit
c1109441b1
26
README.md
26
README.md
|
@ -1,19 +1,31 @@
|
||||||
# Not Done My Website
|
# Not Done My Website
|
||||||
|
|
||||||
__Master is currently legacy code. Consider checking out the rewrite branch :)__
|
## Rewrite Goals
|
||||||
|
|
||||||
## Project Outline
|
- [ ] Move frontend to entirely HTML5 w/o framework or PHP
|
||||||
Not Done My Website is a quick webpage generator for developers who don't have time to build a nice under construction webpage and instead would like to just throw something up very quickly. This provides a tool for generating that and also a framework for making your own templates.
|
- [ ] Move backend to Golang or Node.js (undecided as of now)
|
||||||
|
- [ ] Create more templates
|
||||||
|
- [ ] Work out system for easier template additions
|
||||||
|
|
||||||
|
## What is this?
|
||||||
|
|
||||||
|
Not Done My Website is a little utility for generating index page placeholders based on required criteria, whether it's because you're working on your website or just need a placeholder page!
|
||||||
|
|
||||||
## Running
|
## Running
|
||||||
You need to have an instance of PHP running. Then do this in the web folder (e.g htdocs in XAMPP).
|
|
||||||
|
Right now, you need to have an instance of PHP running. This will change during the rewrite, use `master` branch for stability.
|
||||||
|
|
||||||
|
Clone the repository to your webserver.
|
||||||
|
|
||||||
```
|
```
|
||||||
git clone git@github.com:gmemstr/notdonemywebsite.git
|
git clone git@github.com:gmemstr/notdonemywebsite.git
|
||||||
```
|
```
|
||||||
Then go to localhost/notdonemywebsite (or however you have your server set up).
|
|
||||||
|
|
||||||
## Creating Custom Templates
|
Then go to localhost/notdonemywebsite (or however you have your server set up) and generate away.
|
||||||
Custom templates should go in to the `/templates/` folder. They should be .html files (PHP works too but adds a bit of complexity and overall maybe not worth it because the page is returned as a .html), with the CSS included. You may use CDNs to deliver content but keep in mind that the only file the client recieves is the `index.html`.
|
|
||||||
|
## Adding Templates
|
||||||
|
|
||||||
|
Custom templates belong in the `templates/` folder and should be entirely self contained, and preferably minimized as well. Feel free to make a pull request so we can add your template to the repository! These should be .html files.
|
||||||
|
|
||||||
### Keywords for template
|
### Keywords for template
|
||||||
|
|
||||||
|
|
28
assets/app.js
Normal file
28
assets/app.js
Normal file
|
@ -0,0 +1,28 @@
|
||||||
|
console.log("app.js loaded");
|
||||||
|
|
||||||
|
var getTemplateHtml = template => {
|
||||||
|
document.getElementById('iframe').src = "about:blank";
|
||||||
|
fetch('template/'+template+'.html')
|
||||||
|
.then(function(response) {
|
||||||
|
return response.text()
|
||||||
|
})
|
||||||
|
.then(function(html) {
|
||||||
|
document.getElementById('iframe').contentWindow.document.write(html);
|
||||||
|
console.log(document.getElementById('iframe').contentWindow.document)
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
var valueChange = value => {
|
||||||
|
var iframehtml = document.getElementById('iframe').contentWindow.document.getElementById(value);
|
||||||
|
val = document.getElementById(value).value;
|
||||||
|
iframehtml.innerHTML = val
|
||||||
|
}
|
||||||
|
|
||||||
|
var downloadPage = () => {
|
||||||
|
var pageContents = new XMLSerializer().serializeToString(document.getElementById('iframe').contentWindow.document)
|
||||||
|
pageContents = pageContents.replace("rep_DEVNAME", document.getElementById("devname").value)
|
||||||
|
pageContents = pageContents.replace("rep_SNAME", document.getElementById("sitename").value)
|
||||||
|
pageContents = pageContents.replace("rep_SURL", document.getElementById("url").value)
|
||||||
|
|
||||||
|
download(pageContents, "index.html", "text/html")
|
||||||
|
}
|
40
assets/css.css
Normal file
40
assets/css.css
Normal file
|
@ -0,0 +1,40 @@
|
||||||
|
body {
|
||||||
|
padding: 0;
|
||||||
|
margin: 0 auto;
|
||||||
|
font-family: 'Open Sans', sans-serif;
|
||||||
|
}
|
||||||
|
h2 {
|
||||||
|
font-weight: lighter;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav {
|
||||||
|
padding: 5vh;
|
||||||
|
width: 10vw;
|
||||||
|
height: 90vh;
|
||||||
|
background-color: lightblue;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
button, input {
|
||||||
|
display: block;
|
||||||
|
width: 10vw;
|
||||||
|
height: 5vh;
|
||||||
|
}
|
||||||
|
input[type=text] {
|
||||||
|
font-size: 100%;
|
||||||
|
}
|
||||||
|
.themeclr {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
position: absolute;
|
||||||
|
top:0;
|
||||||
|
margin-left: 15vw;
|
||||||
|
/* Comment out background color later*/
|
||||||
|
background-color: #E9E9E9;
|
||||||
|
height: 100vh;
|
||||||
|
width: 85vw;
|
||||||
|
}
|
52
index.html
Normal file
52
index.html
Normal file
|
@ -0,0 +1,52 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<!-- Not Done My Website (c) 2018 Gabriel Simmer
|
||||||
|
This is still being worked on so make sure to git pull -->
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||||
|
<title>I'm not done my website!</title>
|
||||||
|
<meta name="description" content="A website for generating placeholder HTML pages.">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="assets/css.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<!-- Sidebar -->
|
||||||
|
<nav>
|
||||||
|
<!-- Buttons for changing theme -->
|
||||||
|
<div id="themebtns">
|
||||||
|
<h1>I'm not done my website!</h1>
|
||||||
|
<h2>Theme</h2>
|
||||||
|
<button class="themebtn" id="original" onclick="getTemplateHtml('original')">Original</button>
|
||||||
|
<button class="themebtn" id="fork" onclick="getTemplateHtml('fork')">Fork</button>
|
||||||
|
</div>
|
||||||
|
<!-- Colour inputs -->
|
||||||
|
<div id="themeclrs">
|
||||||
|
<h2>Colours</h2>
|
||||||
|
<input type="color" class="themeclr" id="primary">
|
||||||
|
<input type="color" class="themeclr" id="secondary">
|
||||||
|
</div>
|
||||||
|
<div id="inputs">
|
||||||
|
<h2>Values</h2>
|
||||||
|
<label for="sitename">Site name</label>
|
||||||
|
<input type="text" id="sitename" onchange = "valueChange('sitename');" onkeypress = "this.onchange();" onpaste = "this.onchange();" oninput = "this.onchange();">
|
||||||
|
<label for="url">Site URL</label>
|
||||||
|
<input type="text" id="url" onchange = "valueChange('url');" onkeypress = "this.onchange();" onpaste = "this.onchange();" oninput = "this.onchange();">
|
||||||
|
<label for="devname">Developer name</label>
|
||||||
|
<input type="text" id="devname" onchange = "valueChange('devname');" onkeypress = "this.onchange();" onpaste = "this.onchange();" oninput = "this.onchange();">
|
||||||
|
</div>
|
||||||
|
<!-- Captcha and download button -->
|
||||||
|
<div id="submit">
|
||||||
|
<span>This is a captcha</span>
|
||||||
|
<button class="submitbtn" id="downloadbtn" onclick="downloadPage()">Download!</button>
|
||||||
|
<a href="#" style="display:none;" id="dl">dl</a>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
<iframe id="iframe" src="#" frameborder="0" class="content">
|
||||||
|
Hi
|
||||||
|
</iframe>
|
||||||
|
<script type="text/javascript" src="https://rawgit.com/rndme/download/master/download.min.js"></script>
|
||||||
|
<script type="text/javascript" src="assets/app.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
58
index.php
58
index.php
|
@ -1,58 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<!-- Not Done My Website (c) 2018 Gabriel Simmer
|
|
||||||
This is still being worked on so make sure to git pull
|
|
||||||
from time to time! -->
|
|
||||||
<?php
|
|
||||||
// Setting variables
|
|
||||||
$_site = "Not Done My Website";
|
|
||||||
$_page = "Home";
|
|
||||||
$_title = $_site . ' | ' . $_page;
|
|
||||||
?>
|
|
||||||
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
|
|
||||||
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
|
|
||||||
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
|
|
||||||
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
|
||||||
<title><?php echo $_title ?></title>
|
|
||||||
<meta name="description" content="">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
|
|
||||||
<link rel="stylesheet" href="styling/css.css">
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div id="header">
|
|
||||||
<h1><?php echo $_site ?></h1>
|
|
||||||
<h2>Quickly generate temporary webpages</h2>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="creation">
|
|
||||||
<h3>Variables for web page</h3>
|
|
||||||
<!-- Most of the magic takes place in make.php - look there -->
|
|
||||||
<form action="make.php" method="POST">
|
|
||||||
<div id="var">Site name: <input type="text" name="sname" placeholder="Not Done My Website">
|
|
||||||
</div>
|
|
||||||
<div id="var">Site URL: <input type="text" name="surl" placeholder="notdonemy.website">
|
|
||||||
</div>
|
|
||||||
<div id="var">Webmaster: <input type="text" name="devname" placeholder="John D. Oh">
|
|
||||||
</div>
|
|
||||||
<div id="var">Primary Colour: <input type="color" name="pcolour" placeholder="#333333">
|
|
||||||
</div>
|
|
||||||
<div id="var">Secondary Colour: <input type="color" name="scolour" placeholder="#eeeeee">
|
|
||||||
</div>
|
|
||||||
<div id="var">Template:
|
|
||||||
<select id="templates" name="template">
|
|
||||||
<option value="The Original">Original</option>
|
|
||||||
<option value="Forked">Forked</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<button type="submit" value="Check">Generate</button>
|
|
||||||
|
|
||||||
</form>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
54
make.php
54
make.php
|
@ -1,54 +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 :)
|
|
||||||
|
|
||||||
?>
|
|
BIN
ndmw_wireframe.jpg
Normal file
BIN
ndmw_wireframe.jpg
Normal file
Binary file not shown.
After Width: | Height: | Size: 74 KiB |
|
@ -1,49 +0,0 @@
|
||||||
/* Main element styling */
|
|
||||||
*{
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
body{
|
|
||||||
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif
|
|
||||||
}
|
|
||||||
h1{
|
|
||||||
font-size: 3.5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Div Styling */
|
|
||||||
#header{
|
|
||||||
padding-top:1%;
|
|
||||||
padding-bottom: 10px;
|
|
||||||
background-color: lightskyblue;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
.creation{
|
|
||||||
padding-top: 30px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
#var{
|
|
||||||
padding: 5px;
|
|
||||||
line-height: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Input Styling */
|
|
||||||
*:focus {
|
|
||||||
outline: 0;
|
|
||||||
}
|
|
||||||
form{
|
|
||||||
font-size: 125%;
|
|
||||||
}
|
|
||||||
input{
|
|
||||||
padding:3px;
|
|
||||||
border: none;
|
|
||||||
border-bottom: solid 3px deepskyblue;
|
|
||||||
transition: border 0.2s;
|
|
||||||
}
|
|
||||||
input:focus, input.focus {
|
|
||||||
border-bottom: solid 3px dodgerblue;
|
|
||||||
}
|
|
||||||
button{
|
|
||||||
padding: 10px;
|
|
||||||
border: none;
|
|
||||||
border-bottom: solid 3px deepskyblue;
|
|
||||||
}
|
|
|
@ -6,11 +6,10 @@
|
||||||
<title>rep_SNAME - Under Construction</title>
|
<title>rep_SNAME - Under Construction</title>
|
||||||
<meta name="description" content="">
|
<meta name="description" content="">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<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">
|
<style type="text/css">
|
||||||
body{
|
body{
|
||||||
font-family: 'Roboto', sans-serif;
|
font-family: sans-serif;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
background-color: #E9E9E9;
|
background-color: #E9E9E9;
|
||||||
|
@ -23,8 +22,6 @@
|
||||||
|
|
||||||
header {
|
header {
|
||||||
margin-top: -20px;
|
margin-top: -20px;
|
||||||
background-color: rep_PCOLOUR;
|
|
||||||
border-bottom: 5px solid rep_SCOLOUR;
|
|
||||||
padding: 10px 0;
|
padding: 10px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -36,10 +33,7 @@
|
||||||
transform: translate(-50%, -50%);
|
transform: translate(-50%, -50%);
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: rep_SCOLOUR;
|
|
||||||
background-color: rep_PCOLOUR;
|
|
||||||
box-shadow:2px 2px 5px #888;
|
box-shadow:2px 2px 5px #888;
|
||||||
border-bottom: 5px solid rep_SCOLOUR;
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
@ -47,13 +41,13 @@
|
||||||
<body>
|
<body>
|
||||||
<header>
|
<header>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<h1>rep_SNAME</h1>
|
<h1 id="sitename">rep_SNAME</h1>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<h1>Under Construction</h1>
|
<h1>Under Construction</h1>
|
||||||
<p>rep_SNAME is being worked on by rep_DEVNAME!</p> <!-- See README for keywords -->
|
<p><span id="sitename">rep_SNAME</span> is being worked on by <span id="devname">rep_DEVNAME!</span>!</p> <!-- See README for keywords -->
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
|
@ -6,11 +6,10 @@
|
||||||
<title>rep_SNAME</title>
|
<title>rep_SNAME</title>
|
||||||
<meta name="description" content="">
|
<meta name="description" content="">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<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">
|
<style type="text/css">
|
||||||
body{
|
body{
|
||||||
font-family: 'Roboto', sans-serif;
|
font-family: sans-serif;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 40%;
|
top: 40%;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
|
@ -22,7 +21,6 @@
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
background-color: rep_PCOLOUR;
|
|
||||||
box-shadow:2px 2px 5px #888;
|
box-shadow:2px 2px 5px #888;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -30,7 +28,6 @@
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
padding: 6%;
|
padding: 6%;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
background-color: rep_SCOLOUR;
|
|
||||||
box-shadow:2px 2px 5px #888;
|
box-shadow:2px 2px 5px #888;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
@ -38,11 +35,11 @@
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="header">
|
<div class="header">
|
||||||
<h1>rep_SNAME</h1>
|
<h1 id="sitename">rep_SNAME</h1>
|
||||||
</div>
|
</div>
|
||||||
<br />
|
<br />
|
||||||
<div class="content">
|
<div class="content" id="content">
|
||||||
<p>rep_URL is being worked on by rep_DEVNAME!</p> <!-- See README for keywords -->
|
<p><span id="url">rep_URL</span> is being worked on by <span id="devname">rep_DEVNAME!</span></p> <!-- See README for keywords -->
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
Loading…
Reference in a new issue