<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html lang='en' class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/zakariamouhid/pen/NdKjJO?limit=all&page=49&q=editor" />
<style class="cp-pen-styles">body {
background-color: #F5F5F5;
margin: 0;
padding: 0;
font-family: sans-serif;
}
.container {
max-width: 600px;
margin: 0 auto;
padding: 50px 10px;
text-align: center;
}
.input label {
display: inline-block;
width: 50%;
line-height: 40px;
color: #212121;
text-align: left;
}
.input div {
box-shadow: 0 1px 2px rgba(0,0,0,0.2);
margin: 0 0 10px;
padding: 10px 2%;
background-color: #FAFAFA;
height: 40px;
}
.input div input {
margin: 0;
width: 50%;
height: 40px;
border: solid 1px #E0E0E0;
box-sizing: border-box;
padding: 0 10px;
color: #212121;
font-size: 16px;
}
button.create {
border: 0;
padding: 15px 20px;
margin: 0 auto 10px;
font-size: 16px;
background-color: #009688;
color: #fff;
box-shadow: 0 3px 7px rgba(0,0,0,0.2);
cursor: pointer;
outline: none;
transition: 0.2s;
}
button.create:hover {
box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}
div.output {
box-shadow: 0 1px 2px rgba(0,0,0,0.2);
background-color: #fff;
padding: 20px 0;
}
div.output label {
font-size: 30px;
color: #999;
}
div.output div {
padding: 0 2%;
margin: 20px 0;
}
div.output div a.a-output {
display: inline-block;
width: 50%;
line-height: 40px;
color: #212121;
transition: 0.2s;
}
div.output div input.output {margin: 0;width: 50%;height: 40px;border: solid 1px #E0E0E0;box-sizing: border-box;padding: 0 10px;color: #212121;font-size: 16px;}
div.output div a.a-output:hover {
color: #009688;
}
div.output img {
max-width: 100%;
background-color: #fff;
}</style></head><body>
<div class="container">
<div class="input"></div>
<button class="create">Create image</button>
<div class="output">
<label>Output</label>
<div>
<a class="a-output" href="#" target="_blank">Go to link</a><input class="output" type="text">
</div>
<img>
</div>
</div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script>
<script >/*
https://placeholdit.imgix.net/~text?txtsize=33&txtcolor=fff&txt=150%C3%97300&bg=333&w=150&h=300
حجم النص
txtsize=33
لون النص
txtcolor=fff
محتوى الصورة
txt=150×300
لون الخلفية
bg=333
عرض الصورة
w=150
إرتفاع الصورة
h=300
*/
function createImage(o) {
return "https://placeholdit.imgix.net/~text?" +
"txtsize=" + o["font-size"] +
"&txtcolor=" + o.color +
"&txt=" + o.content +
"&bg=" + o["background-color"] +
"&w=" + o.width +
"&h=" + o.height;
}
var dom = {
input: document.querySelector("div.input"),
inputs: {
"width": {value: "200px"},
"height": {value: "100px"},
"background-color": {value: "#333333"},
"color": {value: "#ffffff"},
"content": {value: "200×100"},
"font-size": {value: "33px"},
},
button: document.querySelector("button.create"),
output: document.querySelector("div.output input.output"),
aOutput: document.querySelector("div.output a.a-output"),
img: document.querySelector("div.output img"),
};
(function () {
var key;
for (key in dom.inputs) {if (window.CP.shouldStopExecution(1)){break;}
(function (o, name) {
o.div = document.createElement("div");
o.label = document.createElement("label");
o.input = document.createElement("input");
if (typeof o.label.textContent === "undefined") {
o.label.innerText = name;
} else {
o.label.textContent = name;
}
o.type = "text";
o.value && (o.input.value = o.value);
o.div.appendChild(o.label);
o.div.appendChild(o.input);
dom.input.appendChild(o.div);
})(dom.inputs[key], key);
}
window.CP.exitedLoop(1);
})();
dom.button.addEventListener("click", function () {
var o = {
width: dom.inputs.width.input.value,
height: dom.inputs.height.input.value,
"font-size": dom.inputs["font-size"].input.value,
content: encodeURIComponent(dom.inputs.content.input.value),
"background-color": dom.inputs["background-color"].input.value,
color: dom.inputs.color.input.value
};
if (o.width.slice(-2) === "px") {
o.width = o.width.slice(0, -2);
}
if (o.height.slice(-2) === "px") {
o.height = o.height.slice(0, -2);
}
if (o["font-size"].slice(-2) === "px") {
o["font-size"] = o["font-size"].slice(0, -2);
}
if (o.color.slice(0, 1) === "#") {
o.color = o.color.slice(1);
}
if (o["background-color"].slice(0, 1) === "#") {
o["background-color"] = o["background-color"].slice(1);
}
o = createImage(o);
dom.output.value = o;
dom.aOutput.href = o;
dom.img.src = o;
});
//# sourceURL=pen.js
</script>
</body></html>
