mirror of
https://github.com/gmemstr/notdonemywebsite.git
synced 2024-09-19 13:41:10 +01:00
Frontend rewrite, live preview but no download yet
This commit is contained in:
Gabriel Simmer
parent
fb0152a739
commit
9a0e526e2a
26
README.md
26
README.md
|
|
@ -1,19 +1,31 @@
|
|||
# Not Done My Website
|
||||
|
||||
__Master is currently legacy code. Consider checking out the rewrite branch :)__
|
||||
## Rewrite Goals
|
||||
|
||||
## Project Outline
|
||||
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 frontend to entirely HTML5 w/o framework or PHP
|
||||
- [ ] 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
|
||||
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
|
||||
```
|
||||
Then go to localhost/notdonemywebsite (or however you have your server set up).
|
||||
|
||||
## Creating Custom Templates
|
||||
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`.
|
||||
Then go to localhost/notdonemywebsite (or however you have your server set up) and generate away.
|
||||
|
||||
## 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
|
||||
|
||||
|
|
|
|||
19
assets/app.js
Normal file
19
assets/app.js
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
console.log("app.js loaded");
|
||||
|
||||
var getTemplateHtml = template => {
|
||||
fetch('template/template.html')
|
||||
.then(function(response) {
|
||||
return response.text()
|
||||
})
|
||||
.then(function(html) {
|
||||
document.getElementById('iframe').contentWindow.document.write(html);
|
||||
});
|
||||
}
|
||||
|
||||
getTemplateHtml("1");
|
||||
|
||||
var valueChange = value => {
|
||||
var iframehtml = document.getElementById('iframe').contentWindow.document.getElementById(value);
|
||||
val = document.getElementById(value).value;
|
||||
iframehtml.innerHTML = val
|
||||
}
|
||||
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;
|
||||
}
|
||||
50
index.html
Normal file
50
index.html
Normal file
|
|
@ -0,0 +1,50 @@
|
|||
<!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">Original</button>
|
||||
<button class="themebtn" id="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">Download!</button>
|
||||
</div>
|
||||
</nav>
|
||||
<iframe id="iframe" src="#" frameborder="0" class="content">
|
||||
Hi
|
||||
</iframe>
|
||||
<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>
|
||||
|
||||
1
make.php
1
make.php
|
|
@ -1,5 +1,4 @@
|
|||
<?php
|
||||
|
||||
header('Content-Type: text/plain');
|
||||
header('Content-Disposition: attachment; filename=index.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;
|
||||
}
|
||||
|
|
@ -38,11 +38,11 @@
|
|||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<h1>rep_SNAME</h1>
|
||||
<h1 id="sitename">rep_SNAME</h1>
|
||||
</div>
|
||||
<br />
|
||||
<div class="content">
|
||||
<p>rep_URL is being worked on by rep_DEVNAME!</p> <!-- See README for keywords -->
|
||||
<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>
|
||||
Loading…
Reference in a new issue