arch/notdonemywebsite
1
0
Fork 0
mirror of https://github.com/gmemstr/notdonemywebsite.git synced 2024-09-19 13:41:10 +01:00
Code Issues Packages Projects Releases Wiki Activity

merge master

Browse source
This commit is contained in:
Ovidiu Alexandru Toma 2018-10-11 12:25:11 +03:00
parent 1bf66ea5b8 deeada8847
commit c959d5b06c
8 changed files with 299 additions and 63 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

66
.gitignore vendored Normal file
View 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
View file

@ -1,56 +1,112 @@
console.log("app.js loaded");
var 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) {
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);
const placeHolders = [];
secondary_elements = document.getElementById('iframe').contentWindow.document.getElementsByClassName("secondary_color");
applyColor(secondary_elements, secondary_color);
document.getElementById("primary").value = primary_color
document.getElementById("secondary").value = secondary_color
});
}
const getTemplates = () => {
fetch('templates.json')
.then(function(response) {
return response.json()
})
.then(function(templates) {
populateTemplates(templates);
getTemplateHtml(templates[0].id);
});
};
var 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 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);
});
};
var 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
}
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);
primary_elements = document.getElementById('iframe').contentWindow.document.getElementsByClassName("primary_color");
applyColor(primary_elements, primary_color);
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)
secondary_elements = document.getElementById('iframe').contentWindow.document.getElementsByClassName("secondary_color");
applyColor(secondary_elements, secondary_color);
document.getElementById("primary").value = primary_color
document.getElementById("secondary").value = secondary_color
});
};
download(pageContents, "index.html", "text/html")
}
getTemplateHtml("original");
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")
{
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
View file

@ -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">

11
template/fork.html
View file

@ -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>
@ -50,4 +53,4 @@
<p><span id="sitename">rep_SNAME</span> is being worked on by <span id="devname">rep_DEVNAME!</span>!</p> <!-- See README for keywords -->
</div>
</body>
</html>
</html>

2
template/material.html
View file

@ -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>

2
template/original.html
View file

@ -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
View 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
View 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"
}
]