mirror of
https://github.com/gmemstr/notdonemywebsite.git
synced 2024-09-19 21:51:10 +01:00
merge master
This commit is contained in:
commit
c959d5b06c
66
.gitignore
vendored
Normal file
66
.gitignore
vendored
Normal file
|
@ -0,0 +1,66 @@
|
||||||
|
# Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion, Android Studio and WebStorm
|
||||||
|
# Reference: https://intellij-support.jetbrains.com/hc/en-us/articles/206544839
|
||||||
|
|
||||||
|
# User-specific stuff
|
||||||
|
.idea/**/workspace.xml
|
||||||
|
.idea/**/tasks.xml
|
||||||
|
.idea/**/usage.statistics.xml
|
||||||
|
.idea/**/dictionaries
|
||||||
|
.idea/**/shelf
|
||||||
|
|
||||||
|
# Generated files
|
||||||
|
.idea/**/contentModel.xml
|
||||||
|
|
||||||
|
# Sensitive or high-churn files
|
||||||
|
.idea/**/dataSources/
|
||||||
|
.idea/**/dataSources.ids
|
||||||
|
.idea/**/dataSources.local.xml
|
||||||
|
.idea/**/sqlDataSources.xml
|
||||||
|
.idea/**/dynamic.xml
|
||||||
|
.idea/**/uiDesigner.xml
|
||||||
|
.idea/**/dbnavigator.xml
|
||||||
|
|
||||||
|
# Gradle
|
||||||
|
.idea/**/gradle.xml
|
||||||
|
.idea/**/libraries
|
||||||
|
|
||||||
|
# Gradle and Maven with auto-import
|
||||||
|
# When using Gradle or Maven with auto-import, you should exclude module files,
|
||||||
|
# since they will be recreated, and may cause churn. Uncomment if using
|
||||||
|
# auto-import.
|
||||||
|
# .idea/modules.xml
|
||||||
|
# .idea/*.iml
|
||||||
|
# .idea/modules
|
||||||
|
|
||||||
|
# CMake
|
||||||
|
cmake-build-*/
|
||||||
|
|
||||||
|
# Mongo Explorer plugin
|
||||||
|
.idea/**/mongoSettings.xml
|
||||||
|
|
||||||
|
# File-based project format
|
||||||
|
*.iws
|
||||||
|
|
||||||
|
# IntelliJ
|
||||||
|
out/
|
||||||
|
|
||||||
|
# mpeltonen/sbt-idea plugin
|
||||||
|
.idea_modules/
|
||||||
|
|
||||||
|
# JIRA plugin
|
||||||
|
atlassian-ide-plugin.xml
|
||||||
|
|
||||||
|
# Cursive Clojure plugin
|
||||||
|
.idea/replstate.xml
|
||||||
|
|
||||||
|
# Crashlytics plugin (for Android Studio and IntelliJ)
|
||||||
|
com_crashlytics_export_strings.xml
|
||||||
|
crashlytics.properties
|
||||||
|
crashlytics-build.properties
|
||||||
|
fabric.properties
|
||||||
|
|
||||||
|
# Editor-based Rest Client
|
||||||
|
.idea/httpRequests
|
||||||
|
|
||||||
|
# Android studio 3.1+ serialized cache file
|
||||||
|
.idea/caches/build_file_checksums.ser
|
154
assets/app.js
154
assets/app.js
|
@ -1,56 +1,112 @@
|
||||||
console.log("app.js loaded");
|
console.log("app.js loaded");
|
||||||
|
|
||||||
var getTemplateHtml = (template, primary_color="#ffffff", secondary_color="#ffffff") => {
|
const placeHolders = [];
|
||||||
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)
|
|
||||||
primary_elements = document.getElementById('iframe').contentWindow.document.getElementsByClassName("primary_color");
|
|
||||||
applyColor(primary_elements, primary_color);
|
|
||||||
|
|
||||||
secondary_elements = document.getElementById('iframe').contentWindow.document.getElementsByClassName("secondary_color");
|
const getTemplates = () => {
|
||||||
applyColor(secondary_elements, secondary_color);
|
fetch('templates.json')
|
||||||
document.getElementById("primary").value = primary_color
|
.then(function(response) {
|
||||||
document.getElementById("secondary").value = secondary_color
|
return response.json()
|
||||||
});
|
})
|
||||||
}
|
.then(function(templates) {
|
||||||
|
populateTemplates(templates);
|
||||||
|
getTemplateHtml(templates[0].id);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
var changeColor = (el) => {
|
const populateTemplates = templates => {
|
||||||
color = el.value
|
const templatesContainer = document.getElementById('themebtns');
|
||||||
iframe_doc = document.getElementById('iframe').contentWindow.document
|
templates.forEach(template => {
|
||||||
if(el.id == "primary")
|
const button = document.createElement('button');
|
||||||
{
|
button.setAttribute("class", "themebtn");
|
||||||
divs = iframe_doc.getElementsByClassName("primary_color")
|
button.setAttribute('id', template.id);
|
||||||
}
|
button.addEventListener("click", () => {
|
||||||
else
|
getTemplateHtml(template.id, template.primary_color, template.secondary_color);
|
||||||
{
|
});
|
||||||
divs = iframe_doc.getElementsByClassName("secondary_color")
|
button.textContent = template.name + ' (by ' + template.author + ')';
|
||||||
}
|
templatesContainer.appendChild(button);
|
||||||
applyColor(divs, color);
|
});
|
||||||
}
|
};
|
||||||
|
|
||||||
var applyColor = (elements, color) => {
|
const getTemplateHtml = (template, primary_color="#ffffff", secondary_color="#ffffff") => {
|
||||||
var i;
|
document.getElementById('iframe').src = "about:blank";
|
||||||
for (i = 0; i < elements.length; i++) {
|
fetch('template/'+template+'.html')
|
||||||
elements[i].style["background-color"] = color;
|
.then(function(response) {
|
||||||
}
|
return response.text()
|
||||||
}
|
})
|
||||||
var valueChange = value => {
|
.then(function(html) {
|
||||||
var iframehtml = document.getElementById('iframe').contentWindow.document.getElementById(value);
|
html = parseContent(html);
|
||||||
val = document.getElementById(value).value;
|
document.getElementById('iframe').contentWindow.document.write(html);
|
||||||
iframehtml.innerHTML = val
|
primary_elements = document.getElementById('iframe').contentWindow.document.getElementsByClassName("primary_color");
|
||||||
}
|
applyColor(primary_elements, primary_color);
|
||||||
|
|
||||||
var downloadPage = () => {
|
secondary_elements = document.getElementById('iframe').contentWindow.document.getElementsByClassName("secondary_color");
|
||||||
var pageContents = new XMLSerializer().serializeToString(document.getElementById('iframe').contentWindow.document)
|
applyColor(secondary_elements, secondary_color);
|
||||||
pageContents = pageContents.replace("rep_DEVNAME", document.getElementById("devname").value)
|
document.getElementById("primary").value = primary_color
|
||||||
pageContents = pageContents.replace("rep_SNAME", document.getElementById("sitename").value)
|
document.getElementById("secondary").value = secondary_color
|
||||||
pageContents = pageContents.replace("rep_SURL", document.getElementById("url").value)
|
});
|
||||||
|
};
|
||||||
|
|
||||||
download(pageContents, "index.html", "text/html")
|
const valueChange = value => {
|
||||||
}
|
const iframehtml = document.getElementById('iframe').contentWindow.document.getElementById(value);
|
||||||
getTemplateHtml("original");
|
if(!iframehtml) return;
|
||||||
|
const val = document.getElementById(value).value;
|
||||||
|
iframehtml.innerHTML = val
|
||||||
|
};
|
||||||
|
|
||||||
|
const downloadPage = () => {
|
||||||
|
let pageContents = new XMLSerializer().serializeToString(document.getElementById('iframe').contentWindow.document);
|
||||||
|
pageContents = parseContent(pageContents);
|
||||||
|
download(pageContents, "index.html", "text/html")
|
||||||
|
};
|
||||||
|
|
||||||
|
const parseContent = pageContents => {
|
||||||
|
placeHolders.forEach(ph => {
|
||||||
|
const val = document.getElementById(ph.id).value;
|
||||||
|
if(val) {
|
||||||
|
const re = new RegExp(ph.text, 'g');
|
||||||
|
pageContents = pageContents.replace(re, val);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return pageContents
|
||||||
|
};
|
||||||
|
|
||||||
|
const loadPlaceholder = () => {
|
||||||
|
const inputs = document.querySelectorAll('#inputs [type=text]');
|
||||||
|
inputs.forEach(input => {
|
||||||
|
const ph = {}
|
||||||
|
const attrs = input.attributes;
|
||||||
|
for(let i = attrs.length - 1; i >= 0; i--) {
|
||||||
|
if(attrs[i].name === 'id') {
|
||||||
|
ph['id'] = attrs[i].value;
|
||||||
|
} else if( attrs[i].name === 'data-placeholder') {
|
||||||
|
ph['text'] = attrs[i].value;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
placeHolders.push(ph);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const changeColor = (el) => {
|
||||||
|
color = el.value
|
||||||
|
iframe_doc = document.getElementById('iframe').contentWindow.document
|
||||||
|
if(el.id == "primary")
|
||||||
|
{
|
||||||
|
divs = iframe_doc.getElementsByClassName("primary_color")
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
divs = iframe_doc.getElementsByClassName("secondary_color")
|
||||||
|
}
|
||||||
|
applyColor(divs, color);
|
||||||
|
};
|
||||||
|
|
||||||
|
const applyColor = (elements, color) => {
|
||||||
|
var i;
|
||||||
|
for (i = 0; i < elements.length; i++) {
|
||||||
|
elements[i].style["background-color"] = color;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
getTemplates();
|
||||||
|
|
||||||
|
loadPlaceholder();
|
||||||
|
|
12
index.html
12
index.html
|
@ -16,11 +16,7 @@
|
||||||
<!-- Buttons for changing theme -->
|
<!-- Buttons for changing theme -->
|
||||||
<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>Template</h2>
|
||||||
<button class="themebtn" id="original" onclick="getTemplateHtml('original')">Original</button>
|
|
||||||
<button class="themebtn" id="fork" onclick="getTemplateHtml('fork')">Fork</button>
|
|
||||||
<button class="themebtn" id="material" onclick="getTemplateHtml('material')">Material</button>
|
|
||||||
<button class="themebtn" id="color_test" onclick="getTemplateHtml('color_test', '#f5f5dd', '#fec1cb')">Color Test</button>
|
|
||||||
</div>
|
</div>
|
||||||
<!-- Colour inputs -->
|
<!-- Colour inputs -->
|
||||||
<div id="themeclrs">
|
<div id="themeclrs">
|
||||||
|
@ -31,11 +27,11 @@
|
||||||
<div id="inputs">
|
<div id="inputs">
|
||||||
<h2>Values</h2>
|
<h2>Values</h2>
|
||||||
<label for="sitename">Site name</label>
|
<label for="sitename">Site name</label>
|
||||||
<input type="text" id="sitename" onchange = "valueChange('sitename');" onkeypress = "this.onchange();" onpaste = "this.onchange();" oninput = "this.onchange();">
|
<input type="text" id="sitename" data-placeholder="rep_SNAME" onchange = "valueChange('sitename');" onkeypress = "this.onchange();" onpaste = "this.onchange();" oninput = "this.onchange();">
|
||||||
<label for="url">Site URL</label>
|
<label for="url">Site URL</label>
|
||||||
<input type="text" id="url" onchange = "valueChange('url');" onkeypress = "this.onchange();" onpaste = "this.onchange();" oninput = "this.onchange();">
|
<input type="text" id="url" data-placeholder="rep_SURL" onchange = "valueChange('url');" onkeypress = "this.onchange();" onpaste = "this.onchange();" oninput = "this.onchange();">
|
||||||
<label for="devname">Developer name</label>
|
<label for="devname">Developer name</label>
|
||||||
<input type="text" id="devname" onchange = "valueChange('devname');" onkeypress = "this.onchange();" onpaste = "this.onchange();" oninput = "this.onchange();">
|
<input type="text" id="devname" data-placeholder="rep_DEVNAME" onchange = "valueChange('devname');" onkeypress = "this.onchange();" onpaste = "this.onchange();" oninput = "this.onchange();">
|
||||||
</div>
|
</div>
|
||||||
<!-- Captcha and download button -->
|
<!-- Captcha and download button -->
|
||||||
<div id="submit">
|
<div id="submit">
|
||||||
|
|
|
@ -12,12 +12,12 @@
|
||||||
font-family: sans-serif;
|
font-family: sans-serif;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
background-color: #E9E9E9;
|
background-color: #a09f9f;
|
||||||
}
|
}
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
width: 40%;
|
width: 40%;
|
||||||
margin: 0 auto;
|
margin: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
header {
|
header {
|
||||||
|
@ -34,6 +34,9 @@
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
box-shadow:2px 2px 5px #888;
|
box-shadow:2px 2px 5px #888;
|
||||||
|
hover{
|
||||||
|
boeder : 6px 6px 6px 6px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
@ -41,7 +44,7 @@
|
||||||
<body>
|
<body>
|
||||||
<header>
|
<header>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<h1 id="url">rep_URL</h1>
|
<h1 id="url">rep_SURL</h1>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
|
|
|
@ -48,7 +48,7 @@
|
||||||
<h1 id="sitename">rep_SNAME</h1>
|
<h1 id="sitename">rep_SNAME</h1>
|
||||||
</header>
|
</header>
|
||||||
<main>
|
<main>
|
||||||
<p>We're working hard to get <span id="url">rep_URL</span> online! Hang tight :)</p>
|
<p>We're working hard to get <span id="url">rep_SURL</span> online! Hang tight :)</p>
|
||||||
<p class="pull-right"> - <span id="devname">rep_DEVNAME</span></p>
|
<p class="pull-right"> - <span id="devname">rep_DEVNAME</span></p>
|
||||||
</main>
|
</main>
|
||||||
</body>
|
</body>
|
||||||
|
|
|
@ -39,7 +39,7 @@
|
||||||
</div>
|
</div>
|
||||||
<br />
|
<br />
|
||||||
<div class="content" id="content">
|
<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 -->
|
<p><span id="url">rep_SURL</span> is being worked on by <span id="devname">rep_DEVNAME!</span></p> <!-- See README for keywords -->
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
91
template/typewriter.html
Normal file
91
template/typewriter.html
Normal file
|
@ -0,0 +1,91 @@
|
||||||
|
<!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">
|
||||||
|
|
||||||
|
<style type="text/css">
|
||||||
|
html, body {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
color: #000000;
|
||||||
|
}
|
||||||
|
.flex-container {
|
||||||
|
height: 100%;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -moz-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: -webkit-flex;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.row {
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
.flex-item {
|
||||||
|
padding: 5px;
|
||||||
|
margin: 10px;
|
||||||
|
line-height: 20px;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 2em;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
#content {
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="flex-container">
|
||||||
|
<div class="row">
|
||||||
|
<div class="flex-item">
|
||||||
|
<div id="content">
|
||||||
|
<span id="sitename">rep_SNAME</span> is being worked on by <span id="devname">rep_DEVNAME!</span>
|
||||||
|
</div>
|
||||||
|
<div id="paper"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script>
|
||||||
|
|
||||||
|
const init = function() {
|
||||||
|
let pos = 0;
|
||||||
|
let on = false;
|
||||||
|
|
||||||
|
const paper = document.getElementById('paper');
|
||||||
|
|
||||||
|
const typechar = function() {
|
||||||
|
const content = document.getElementById('content');
|
||||||
|
const text = content.textContent.trim();
|
||||||
|
let wait = false;
|
||||||
|
paper.innerText = text.substr(0, pos) + (on ? '_' : '');
|
||||||
|
if(on) {
|
||||||
|
on = false;
|
||||||
|
pos++;
|
||||||
|
if(pos > text.length) {
|
||||||
|
wait = true;
|
||||||
|
pos = 0;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
on = true;
|
||||||
|
}
|
||||||
|
setTimeout(function() {
|
||||||
|
typechar();
|
||||||
|
}, wait ? 1500 : 150);
|
||||||
|
};
|
||||||
|
typechar();
|
||||||
|
};
|
||||||
|
init();
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
24
templates.json
Normal file
24
templates.json
Normal file
|
@ -0,0 +1,24 @@
|
||||||
|
[
|
||||||
|
{
|
||||||
|
"id": "original",
|
||||||
|
"name": "Original",
|
||||||
|
"author": "gmemstr"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "material",
|
||||||
|
"name": "Material",
|
||||||
|
"author": "gmemstr"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "fork",
|
||||||
|
"name": "Fork",
|
||||||
|
"author": "gmemstr"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "color_test",
|
||||||
|
"name": "Color Test",
|
||||||
|
"author": "ovidThomas",
|
||||||
|
"primary_color": "#f5f5dd",
|
||||||
|
"secondary_color": "#fec1cb"
|
||||||
|
}
|
||||||
|
]
|
Loading…
Reference in a new issue