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
|
|
@ -1,14 +1,41 @@
|
|||
console.log("app.js loaded");
|
||||
|
||||
var getTemplateHtml = (template, primary_color="#ffffff", secondary_color="#ffffff") => {
|
||||
const placeHolders = [];
|
||||
|
||||
const getTemplates = () => {
|
||||
fetch('templates.json')
|
||||
.then(function(response) {
|
||||
return response.json()
|
||||
})
|
||||
.then(function(templates) {
|
||||
populateTemplates(templates);
|
||||
getTemplateHtml(templates[0].id);
|
||||
});
|
||||
};
|
||||
|
||||
const populateTemplates = templates => {
|
||||
const templatesContainer = document.getElementById('themebtns');
|
||||
templates.forEach(template => {
|
||||
const button = document.createElement('button');
|
||||
button.setAttribute("class", "themebtn");
|
||||
button.setAttribute('id', template.id);
|
||||
button.addEventListener("click", () => {
|
||||
getTemplateHtml(template.id, template.primary_color, template.secondary_color);
|
||||
});
|
||||
button.textContent = template.name + ' (by ' + template.author + ')';
|
||||
templatesContainer.appendChild(button);
|
||||
});
|
||||
};
|
||||
|
||||
const getTemplateHtml = (template, primary_color="#ffffff", secondary_color="#ffffff") => {
|
||||
document.getElementById('iframe').src = "about:blank";
|
||||
fetch('template/'+template+'.html')
|
||||
.then(function(response) {
|
||||
return response.text()
|
||||
})
|
||||
.then(function(html) {
|
||||
html = parseContent(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);
|
||||
|
||||
|
@ -17,9 +44,49 @@ var getTemplateHtml = (template, primary_color="#ffffff", secondary_color="#ffff
|
|||
document.getElementById("primary").value = primary_color
|
||||
document.getElementById("secondary").value = secondary_color
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
var changeColor = (el) => {
|
||||
const valueChange = value => {
|
||||
const iframehtml = document.getElementById('iframe').contentWindow.document.getElementById(value);
|
||||
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")
|
||||
|
@ -31,26 +98,15 @@ var changeColor = (el) => {
|
|||
divs = iframe_doc.getElementsByClassName("secondary_color")
|
||||
}
|
||||
applyColor(divs, color);
|
||||
}
|
||||
};
|
||||
|
||||
var applyColor = (elements, color) => {
|
||||
const applyColor = (elements, color) => {
|
||||
var i;
|
||||
for (i = 0; i < elements.length; i++) {
|
||||
elements[i].style["background-color"] = color;
|
||||
}
|
||||
}
|
||||
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)
|
||||
getTemplates();
|
||||
|
||||
download(pageContents, "index.html", "text/html")
|
||||
}
|
||||
getTemplateHtml("original");
|
||||
loadPlaceholder();
|
||||
|
|
12
index.html
12
index.html
|
@ -16,11 +16,7 @@
|
|||
<!-- 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>
|
||||
<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>
|
||||
<h2>Template</h2>
|
||||
</div>
|
||||
<!-- Colour inputs -->
|
||||
<div id="themeclrs">
|
||||
|
@ -31,11 +27,11 @@
|
|||
<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();">
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<!-- Captcha and download button -->
|
||||
<div id="submit">
|
||||
|
|
|
@ -12,12 +12,12 @@
|
|||
font-family: sans-serif;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background-color: #E9E9E9;
|
||||
background-color: #a09f9f;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 40%;
|
||||
margin: 0 auto;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
header {
|
||||
|
@ -34,6 +34,9 @@
|
|||
font-weight: 400;
|
||||
text-align: center;
|
||||
box-shadow:2px 2px 5px #888;
|
||||
hover{
|
||||
boeder : 6px 6px 6px 6px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
@ -41,7 +44,7 @@
|
|||
<body>
|
||||
<header>
|
||||
<div class="container">
|
||||
<h1 id="url">rep_URL</h1>
|
||||
<h1 id="url">rep_SURL</h1>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
|
|
|
@ -48,7 +48,7 @@
|
|||
<h1 id="sitename">rep_SNAME</h1>
|
||||
</header>
|
||||
<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>
|
||||
</main>
|
||||
</body>
|
||||
|
|
|
@ -39,7 +39,7 @@
|
|||
</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 -->
|
||||
<p><span id="url">rep_SURL</span> is being worked on by <span id="devname">rep_DEVNAME!</span></p> <!-- See README for keywords -->
|
||||
</div>
|
||||
</body>
|
||||
</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