Working playground
This commit is contained in:
@@ -3,7 +3,51 @@
|
||||
--color-accent: #00FFFF;
|
||||
--color-text: #FFF;
|
||||
|
||||
--content-width: 800px;
|
||||
|
||||
--font-size-base: 18px;
|
||||
--line-height-base: 26px;
|
||||
--font-family: monospace;
|
||||
|
||||
--space-base: 1rem;
|
||||
}
|
||||
|
||||
.banner {
|
||||
margin-top: 1rem;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin-bottom: 1rem;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.banner {
|
||||
.title {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex: 1;
|
||||
|
||||
.name {
|
||||
color: #1c1b28;
|
||||
background-color: #00FFFF;
|
||||
white-space: nowrap;
|
||||
padding: 5px;
|
||||
|
||||
a {
|
||||
color: unset;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.title::after {
|
||||
background: repeating-linear-gradient(90deg, #00FFFF, #00FFFF 2px, transparent 0, transparent 10px);
|
||||
content: "";
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -36,9 +36,9 @@ new ToolchainBuilder(paths)
|
||||
path: "src/assets/base.css"
|
||||
},
|
||||
{
|
||||
path: "src/playground/dropdown.html",
|
||||
path: "src/playground/playground.html",
|
||||
menuEntry: true,
|
||||
nameOverride: "Dropdown playground"
|
||||
nameOverride: "CSS/HTML playground"
|
||||
}
|
||||
],
|
||||
}),
|
||||
|
||||
@@ -1,39 +0,0 @@
|
||||
<html>
|
||||
<meta>
|
||||
<link href="base.css" rel="stylesheet" />
|
||||
<style>
|
||||
body {
|
||||
background-color: var(--color-background);
|
||||
font-size: 18px;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
color: var(--color-text);
|
||||
|
||||
#css-container {
|
||||
pre {
|
||||
style {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
</meta>
|
||||
|
||||
<body>
|
||||
<div id="css-container">
|
||||
<pre>
|
||||
<style contenteditable="true">
|
||||
#html-container {
|
||||
background-color: brown;
|
||||
}
|
||||
</style>
|
||||
</pre>
|
||||
</div>
|
||||
<div id="html-container" contenteditable="true">
|
||||
</div>
|
||||
<div id="render-container"></div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
130
src/playground/playground.html
Normal file
130
src/playground/playground.html
Normal file
@@ -0,0 +1,130 @@
|
||||
<!DOCTYPE html>
|
||||
<meta>
|
||||
<link href="base.css" rel="stylesheet" />
|
||||
<style>
|
||||
html {
|
||||
line-height: var(--line-height-base);
|
||||
font-size: 18px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-family: var(--font-family);
|
||||
}
|
||||
|
||||
body {
|
||||
max-width: var(--content-width);
|
||||
background-color: var(--color-background);
|
||||
color: var(--color-text);
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
#style-editor {
|
||||
width: 100%;
|
||||
padding: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
background-color: var(--color-background);
|
||||
color: var(--color-text);
|
||||
font-size: 18px;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
outline: none;
|
||||
border: 1px solid var(--color-accent);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#html-editor {
|
||||
width: 100%;
|
||||
padding: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
background-color: var(--color-background);
|
||||
color: var(--color-text);
|
||||
font-size: 18px;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
outline: none;
|
||||
border: 1px solid var(--color-accent);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#preview {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
background-color: var(--color-background);
|
||||
color: var(--color-text);
|
||||
font-size: 18px;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
outline: none;
|
||||
border: 1px solid var(--color-accent);
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style id="style">
|
||||
.square {
|
||||
height: 150px;
|
||||
width: 150px;
|
||||
background-color: #553FF3;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
font-size: 3rem;
|
||||
position: ;
|
||||
border-radius: 30px;
|
||||
border-top-left-radius: 5px;
|
||||
|
||||
}
|
||||
|
||||
span {
|
||||
display: block;
|
||||
position: relative;
|
||||
top: 100px;
|
||||
left: 45px;
|
||||
}
|
||||
</style>
|
||||
<div id="markup" aria-hidden="true" hidden="true" style="display: none;">
|
||||
<div class="square"><span>CSS</span></div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
window.onload = function () {
|
||||
const style = document.getElementById('style').innerHTML;
|
||||
const formattedStyle = style.split("\n").reduce((agg, curr) => {
|
||||
console.log(curr)
|
||||
if (curr === "") return agg;
|
||||
const line = curr.replace('\t', '').replaceAll('\t', ' ');
|
||||
if (agg.length === 0) return line;
|
||||
return agg + "\n" + line;;
|
||||
}, "");
|
||||
console.log(formattedStyle)
|
||||
document.getElementById('style-editor').value = formattedStyle;
|
||||
document.getElementById('style').innerHTML = formattedStyle;
|
||||
|
||||
const markup = document.getElementById('markup').innerHTML;
|
||||
const formattedMarkup = markup.replace('\t', '').replaceAll('\t', ' ').split('\n').filter(line => line !== '').join('\n');
|
||||
document.getElementById('html-editor').value = formattedMarkup;
|
||||
document.getElementById('preview').innerHTML = formattedMarkup;
|
||||
}
|
||||
</script>
|
||||
</meta>
|
||||
|
||||
<body>
|
||||
<div class="banner">
|
||||
<div class="title">
|
||||
<div class="name"><a href="/">Zackarias Montell</a></div>
|
||||
</div>
|
||||
</div>
|
||||
<p>This is an interactive html and css playground built with minimal JS.</p>
|
||||
<div id="preview"></div>
|
||||
<textarea rows="15" autocomplete="false" autocorrect="false" id="style-editor"
|
||||
oninput="document.getElementById('style').innerHTML = this.value">
|
||||
</textarea>
|
||||
<textarea id="html-editor" oninput="document.getElementById('preview').innerHTML=this.value" rows="15"
|
||||
autocomplete="false" autocorrect="false" id="style-editor">
|
||||
</textarea>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -1,10 +1,12 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Page Not Found</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="message">
|
||||
<h2>404</h2>
|
||||
@@ -12,4 +14,5 @@
|
||||
<p>The specified file was not found on this website. Please check the URL for mistakes and try again.</p>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
@@ -85,46 +85,6 @@
|
||||
}
|
||||
|
||||
.profile li {}
|
||||
|
||||
.banner {
|
||||
margin-top: 1rem;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin-bottom: 1rem;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.banner {
|
||||
.title {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex: 1;
|
||||
|
||||
.name {
|
||||
color: #1c1b28;
|
||||
background-color: #00FFFF;
|
||||
white-space: nowrap;
|
||||
padding: 5px;
|
||||
|
||||
a {
|
||||
color: unset;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.title::after {
|
||||
background: repeating-linear-gradient(90deg, #00FFFF, #00FFFF 2px, transparent 0, transparent 10px);
|
||||
content: "";
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
|
||||
@@ -5,6 +5,7 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<link href="base.css" rel="stylesheet" />
|
||||
<style>
|
||||
html {
|
||||
font-family: monospace;
|
||||
@@ -82,46 +83,6 @@
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
.banner {
|
||||
margin-top: 1rem;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin-bottom: 1rem;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.banner {
|
||||
.title {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex: 1;
|
||||
|
||||
.name {
|
||||
color: #1c1b28;
|
||||
background-color: #00FFFF;
|
||||
white-space: nowrap;
|
||||
padding: 5px;
|
||||
|
||||
a {
|
||||
color: unset;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.title::after {
|
||||
background: repeating-linear-gradient(90deg, #00FFFF, #00FFFF 2px, transparent 0, transparent 10px);
|
||||
content: "";
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: #00FFFF;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user