<body id="background">
<div>
<div class="card">
<div id="header">
<input type="text" id="header-title" value="The Metamorphosis"
style="font-weight: bold;color: #ffffff;">
</div>
<div id="content0">
<textarea id="content0-title"
rows="4">One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections.</textarea>
</div>
<div id="content1" style="flex-direction: column;">
<div>
Target:
<label><input onchange="onTarget(this)" type="radio" name="target" id="target-background"
checked="checked">background</label>
<label><input onchange="onTarget(this)" type="radio" name="target" id="target-header">header</label>
<label><input onchange="onTarget(this)" type="radio" name="target"
id="target-content0">content0</label>
<label><input onchange="onTarget(this)" type="radio" name="target"
id="target-content1">content1</label>
<label><input onchange="onTarget(this)" type="radio" name="target" id="target-footer">footer</label>
</div>
<div id="setprop" style="align-items: center;">
<div>
BG Color:
<input id="background-color" type="color" onchange="onChange(this)">
</div>
<div>
BG Pattern:
<select id="background-image" onchange="onChange(this)">
<option value="none">none</option>
<option value="pattern_a">A</option>
<option value="pattern_b">B</option>
<option value="pattern_c">C</option>
<option value="pattern_d">D</option>
<option value="stripe_1">stripe -</option>
<option value="stripe_2">stripe |</option>
<option value="stripe_3">stripe \</option>
<option value="stripe_4">stripe /</option>
</select>
</div>
<div>
Text Color:
<input id="color" type="color" onchange="onChange(this)">
</div>
<div>
Size(rem):
<input id="font-size" type="number" onchange="onChange(this)" step="0.1" style="width:45px;">
</div>
<div>
Bold:
<input id="font-weight" type="checkbox" onchange="onChange(this)">
</div>
</div>
<pre id="content1-title"></pre>
<button onclick="onDown()">BG Pattern Download</button>
</div>
<div id="footer">
<input type="text" id="footer-title" value="Franz Kafka 1915">
</div>
</div>
The bedding was hardly able to cover it and seemed ready to slide off any moment.
</div>
</body>
</html>body {
background-color: #000000;
}
pre {
white-space: pre-wrap;
word-break: break-all;
}
.card {
margin: 20px;
filter: drop-shadow(0px 0px 2px #222222);
}
.card>div {
display: flex;
align-items: center;
padding: 5px 5px 5px 10px;
}
.card>div:nth-child(1) {
flex: 1;
}
.card>div:nth-child(1)>input,
.card>div:nth-last-child(1)>input {
background-color: rgba(0, 0, 0, 0);
border: none;
width: 100%;
}
.card>div:nth-child(2)>textarea,
.card>div:nth-child(3)>textarea {
background-color: rgba(0, 0, 0, 0);
border: none;
width: 100%;
border-radius: 3px;
vertical-align: top;
font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', sans-serif;
}
.card>div:nth-child(1) {
border-radius: 5px 5px 0px 0px;
}
.card>div:nth-last-child(1) {
border-radius: 0px 0px 5px 5px;
}
#footer-title {
text-align: right;
padding: 0px 10px 0px 0px;
}
#setprop {
display: flex;
}
#setprop>div {
margin-right: 10px;
}var target = 'background';
var cssobj = {
'background': {
'background-color': '#333333',
'background-image': 'pattern_d',
'color': '#999999',
'font-size': '0.9rem',
'font-weight': 'normal'
},
'header': {
'background-color': '#222222',
'background-image': 'pattern_c',
'color': '#FFFFFF',
'font-size': '1rem',
'font-weight': 'bold'
},
'content0': {
'background-color': '#EEEEEE',
'background-image': 'none',
'color': '#000000',
'font-size': '0.9rem',
'font-weight': 'normal'
},
'content1': {
'background-color': '#444444',
'background-image': 'pattern_a',
'color': '#EEEEEE',
'font-size': '0.8rem',
'font-weight': 'normal'
},
'footer': {
'background-color': '#777777',
'background-image': 'stripe_4',
'color': '#333333',
'font-size': '0.8rem',
'font-weight': 'normal'
}
};
function initCSS() {
var keys = Object.keys(cssobj);
keys.map((key, index) => {
setProp(key, 'background-color', cssobj[key]['background-color']);
setProp(key, 'background-image', cssobj[key]['background-image']);
setProp(key, 'color', cssobj[key]['color']);
setProp(key, 'font-size', cssobj[key]['font-size']);
setProp(key, 'font-weight', cssobj[key]['font-weight']);
});
setTarget();
};
function onDown() {
var patternName = cssobj[target]['background-image'];
if (patternName == 'none') {
return;
}
// https://ja.javascript.info/blob
let link = document.createElement('a');
link.download = patternName + '.png';
link.href = getPatternData(patternName);
link.click();
URL.revokeObjectURL(link.href);
}
function onTarget(self) {
target = self.id.substr('target-'.length);
setTarget();
setCSS();
}
function setTarget() {
var style = document.getElementById(target).style;
document.getElementById('background-color').value = rgb2hex(style.backgroundColor);
document.getElementById('background-image').value = cssobj[target]['background-image'];
document.getElementById('color').value = rgb2hex(style.color);
document.getElementById('font-size').value = style['font-size'].replace(/[^0-9.]/g, '');
document.getElementById('font-weight').checked = style['font-weight'] == 'bold';
}
function setCSS() {
var html = '';
html += '#' + target + ' {<br>';
Object.keys(cssobj[target]).forEach((key) => {
if (key == 'background-image' && cssobj[target][key] != 'none') {
var data = getPatternData(cssobj[target][key]);
html += ' ' + key + ': url("' + data + '");<br>';
} else {
html += ' ' + key + ': ' + cssobj[target][key] + ';<br>';
}
});
html += '}';
document.getElementById('content1-title').innerHTML = html;
}
function rgb2hex(rgb) {
var list = rgb.replace(/[^0-9,]/g, '').split(',');
let hex = 0;
list.forEach((n, index) => {
hex += parseInt(n) * Math.pow(256, 2 - index);
})
var str = '000000' + hex.toString(16).toUpperCase();
return '#' + str.substr(str.length - 6);
}
function onChange(self) {
var declaration = self.id;
if (declaration == 'background-color') {
cssobj[target][declaration] = self.value;
setProp(target, declaration, self.value);
} else if (declaration == 'background-image') {
cssobj[target][declaration] = self.value;
setProp(target, declaration, cssobj[target][declaration]);
} else if (declaration == 'color') {
cssobj[target][declaration] = self.value;
setProp(target, declaration, self.value);
} else if (declaration == 'font-size') {
cssobj[target][declaration] = self.value + 'rem';
setProp(target, declaration, self.value + 'rem');
} else if (declaration == 'font-weight') {
cssobj[target][declaration] = self.checked ? 'bold' : 'normal';
setProp(target, declaration, self.checked ? 'bold' : 'normal');
}
}
function setProp(target, declaration, value) {
if (declaration == 'background-color') {
document.getElementById(target).style.backgroundColor = value;
} else if (declaration == 'background-image') {
if (value == 'none') {
document.getElementById(target).style.backgroundImage = 'none';
} else {
var data = getPatternData(value);
document.getElementById(target).style.backgroundImage = 'url("' + data + '")';
}
} else if (declaration == 'color') {
document.getElementById(target).style.color = value;
if (document.getElementById(target + '-title')) {
document.getElementById(target + '-title').style.color = value;
}
} else if (declaration == 'font-size') {
document.getElementById(target).style['font-size'] = value;
if (document.getElementById(target + '-title')) {
document.getElementById(target + '-title').style['font-size'] = value;
}
} else if (declaration == 'font-weight') {
document.getElementById(target).style['font-weight'] = value;
if (document.getElementById(target + '-title')) {
document.getElementById(target + '-title').style['font-weight'] = value;
}
}
setCSS();
}
function getPatternData(name) {
return pngHeader + this[name];
}
var pngHeader = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ1IDc5LjE2MzQ5OSwgMjAxOC8wOC8xMy0xNjo0MDoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkO";
var pattern_a = "kREMzAxNUUxMTM2ODExRUI5NzFBQzFENzAwN0U2Rjg3IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkREMzAxNUUyMTM2ODExRUI5NzFBQzFENzAwN0U2Rjg3Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6REQzMDE1REYxMzY4MTFFQjk3MUFDMUQ3MDA3RTZGODciIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6REQzMDE1RTAxMzY4MTFFQjk3MUFDMUQ3MDA3RTZGODciLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6Fr7uhAAAAI0lEQVR42mL4//+/FBAzwDATIyMjAwhjAJhKJpgATBVAgAEAW5ASMKGRjY0AAAAASUVORK5CYII=";
var pattern_b = "jMwQUExREQ4MTM2OTExRUI5Njg3RkZDRDUyMThGOTlEIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjMwQUExREQ5MTM2OTExRUI5Njg3RkZDRDUyMThGOTlEIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MzBBQTFERDYxMzY5MTFFQjk2ODdGRkNENTIxOEY5OUQiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MzBBQTFERDcxMzY5MTFFQjk2ODdGRkNENTIxOEY5OUQiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz575j4tAAAAJklEQVR42mL4//+/FBAzAIEUiGAAcZAFmUAkIyMjXBIsiqwKIMAAo2kbh0L1vkMAAAAASUVORK5CYII=";
var pattern_c = "jE3NDQ4NkE3MTM2QjExRUJCM0QzQzE3ODJDQTZBRjgxIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjE3NDQ4NkE4MTM2QjExRUJCM0QzQzE3ODJDQTZBRjgxIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MTc0NDg2QTUxMzZCMTFFQkIzRDNDMTc4MkNBNkFGODEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MTc0NDg2QTYxMzZCMTFFQkIzRDNDMTc4MkNBNkFGODEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4BtKsrAAAAL0lEQVR42jSIsQEAMAjCgjf4/4X+YMW2DIQgILt7QHmLmz0lEbYvZkzlkzKPAAMATMUUKZmCkdMAAAAASUVORK5CYII=";
var pattern_d = "jgxOUMwMENCMTMzODExRUJBQ0Y1ODEyMThBODUxQzVBIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjgxOUMwMENDMTMzODExRUJBQ0Y1ODEyMThBODUxQzVBIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6ODE5QzAwQzkxMzM4MTFFQkFDRjU4MTIxOEE4NTFDNUEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6ODE5QzAwQ0ExMzM4MTFFQkFDRjU4MTIxOEE4NTFDNUEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4x6NanAAAAJElEQVR42mL4//8/AxDwggggmxfOAdFQSQZUFSACJAOjAQIMAIoXGFFmFVCnAAAAAElFTkSuQmCC";
var stripe_1 = "jAxRDMwQzQwMTM0MzExRUI5RDc1QzY1NkYwQTI3QThDIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjAxRDMwQzQxMTM0MzExRUI5RDc1QzY1NkYwQTI3QThDIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MDFEMzBDM0UxMzQzMTFFQjlENzVDNjU2RjBBMjdBOEMiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MDFEMzBDM0YxMzQzMTFFQjlENzVDNjU2RjBBMjdBOEMiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6uDnKHAAAAHUlEQVR42mL8//8/AzJgAWJeZAFGdBWM6CoAAgwAKXwGHFeW7ZAAAAAASUVORK5CYII=";
var stripe_2 = "kE3NTRENjgyMTM0RDExRUJBMDAzRjQwNjI0N0YzQTgwIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkE3NTRENjgzMTM0RDExRUJBMDAzRjQwNjI0N0YzQTgwIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QTc1NEQ2ODAxMzREMTFFQkEwMDNGNDA2MjQ3RjNBODAiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QTc1NEQ2ODExMzREMTFFQkEwMDNGNDA2MjQ3RjNBODAiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4VfA3gAAAAHElEQVR42mL4//8/AxDzgmgg4GViQAOEBQACDAAysAkY0mYcuAAAAABJRU5ErkJggg==";
var stripe_3 = "jkwREI0RjdDMTM1MjExRUJCMjQ5RjYwREIwREZBNURFIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjkwREI0RjdEMTM1MjExRUJCMjQ5RjYwREIwREZBNURFIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6OTBEQjRGN0ExMzUyMTFFQkIyNDlGNjBEQjBERkE1REUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6OTBEQjRGN0IxMzUyMTFFQkIyNDlGNjBEQjBERkE1REUiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7lSOxuAAAAI0lEQVR42mL4//8/AxDwggggmxdMwATBNIhAFoTLwAQBAgwANYghSAUNXOMAAAAASUVORK5CYII=";
var stripe_4 = "kY1NEQyODJBMTM1MjExRUI5RjY4RkJGQjE5QzgwRTlBIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkY1NEQyODJCMTM1MjExRUI5RjY4RkJGQjE5QzgwRTlBIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6RjU0RDI4MjgxMzUyMTFFQjlGNjhGQkZCMTlDODBFOUEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6RjU0RDI4MjkxMzUyMTFFQjlGNjhGQkZCMTlDODBFOUEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6bycTNAAAAJUlEQVR42mL4//8/LxAzAAEviGBA5oAkwRyQIJJKBmQOL0CAAQCaFRtONlQYDAAAAABJRU5ErkJggg==";
initCSS();
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.