Update index.html
Browse files- index.html +85 -57
index.html
CHANGED
@@ -48,15 +48,16 @@
|
|
48 |
background-repeat: no-repeat;
|
49 |
background-position: center bottom;
|
50 |
background-size: contain;
|
|
|
51 |
}
|
52 |
|
53 |
#edit {
|
54 |
-
/*background: url('ClipBoard.png');*/
|
55 |
background-repeat: no-repeat;
|
56 |
background-size: contain;
|
57 |
}
|
58 |
|
59 |
input {
|
|
|
60 |
background: rgba(0, 0, 0, 0);
|
61 |
border: rgba(0, 0, 0, 0) solid 1px;
|
62 |
width: 100%;
|
@@ -68,6 +69,7 @@
|
|
68 |
}
|
69 |
|
70 |
.shadow-text {
|
|
|
71 |
display: flex;
|
72 |
align-items: center;
|
73 |
z-index: 3;
|
@@ -76,19 +78,7 @@
|
|
76 |
#edit .row2 {
|
77 |
display: flex;
|
78 |
align-items: stretch;
|
79 |
-
padding-left: 0.75rem;
|
80 |
-
}
|
81 |
-
|
82 |
-
.row2-20 {
|
83 |
-
height: 20%;
|
84 |
-
}
|
85 |
|
86 |
-
.row2-25 {
|
87 |
-
height: 25%;
|
88 |
-
}
|
89 |
-
|
90 |
-
.row2-33 {
|
91 |
-
height: 33.3333%;
|
92 |
}
|
93 |
|
94 |
:root {
|
@@ -133,7 +123,6 @@
|
|
133 |
font-size: calc(clamp(100%, 1vh, 5vh))
|
134 |
}
|
135 |
|
136 |
-
|
137 |
#left,
|
138 |
#right {
|
139 |
height: 100%;
|
@@ -217,44 +206,12 @@
|
|
217 |
<div id="messageWindow" class="row">
|
218 |
<div class="col-12 p-0 m-0 h-100">
|
219 |
<div id="mainMassage" class="row">
|
220 |
-
<div id="left" class="col-3 p-0 m-0"
|
221 |
-
<div class="p-0" style="height:100%">
|
222 |
-
<div class="row2 row2-25">
|
223 |
-
<input name="name1" class="text-light" value="">
|
224 |
-
<div class="shadow-text d-none text-light"></div>
|
225 |
-
</div>
|
226 |
-
<div class="row2 row2-25">
|
227 |
-
<input name="name2" class="text-light" value="">
|
228 |
-
<div class="shadow-text d-none text-light"></div>
|
229 |
-
</div>
|
230 |
-
<div class="row2 row2-25">
|
231 |
-
<input name="name3" class="text-light" value="Name">
|
232 |
-
<div class="shadow-text d-none text-light"></div>
|
233 |
-
</div>
|
234 |
-
<div class="row2 row2-25">
|
235 |
-
<input name="name4" class="text-light" value="">
|
236 |
-
<div class="shadow-text d-none text-light"></div>
|
237 |
-
</div>
|
238 |
</div>
|
239 |
</div>
|
240 |
<div id="right" class="col-9 m-0">
|
241 |
<div class="h-100 p-0" id="rightTexts">
|
242 |
-
<div class="row2 row2-25">
|
243 |
-
<input name="text1" class="text-light" value="(1st Line)">
|
244 |
-
<div class="shadow-text d-none text-light"></div>
|
245 |
-
</div>
|
246 |
-
<div class="row2 row2-25">
|
247 |
-
<input name="text2" class="text-light" value="(2nd Line)">
|
248 |
-
<div class="shadow-text d-none text-light"></div>
|
249 |
-
</div>
|
250 |
-
<div class="row2 row2-25">
|
251 |
-
<input name="text3" class="text-light" value="(3rd Line)">
|
252 |
-
<div class="shadow-text d-none text-light"></div>
|
253 |
-
</div>
|
254 |
-
<div class="row2 row2-25">
|
255 |
-
<input name="text4" class="text-light" value="(4th Line)">
|
256 |
-
<div class="shadow-text d-none text-light"></div>
|
257 |
-
</div>
|
258 |
</div>
|
259 |
</div>
|
260 |
</div>
|
@@ -377,11 +334,19 @@
|
|
377 |
<div class="input-group">
|
378 |
<span class="input-group-text bg-secondary text-light">WindowSize</span>
|
379 |
<input name="windowSize" type="range" class="form-control form-range" id="windowSize"
|
380 |
-
value="25" step="1" min="
|
381 |
<span class="input-group-text bg-secondary text-light">Padding</span>
|
382 |
<input name="mainMessagePaddingSize" type="range" class="form-control form-range"
|
383 |
id="mainMessagePaddingSize" value="0" step="0.1" min="0" max="2">
|
384 |
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
385 |
<div class="input-group">
|
386 |
<span class="input-group-text bg-secondary text-light">Render Scale</span>
|
387 |
<input name="renderScale" type="range" class="form-control form-range" id="renderScale"
|
@@ -569,15 +534,78 @@
|
|
569 |
document.getElementById("right").style.paddingTop = document.getElementById("mainMessagePaddingSize").value + 'rem';
|
570 |
document.getElementById("right").style.paddingBottom = document.getElementById("mainMessagePaddingSize").value + 'rem';
|
571 |
|
572 |
-
document.
|
573 |
-
|
574 |
-
|
575 |
-
|
576 |
-
|
577 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
578 |
//linear-gradient(rgba(170, 100, 101, 0.7), rgba(145, 152, 229, 0.9))
|
579 |
let bg = "linear-gradient(rgba(" + hex2rgb(document.getElementById("topColor").value) + ", " + document.getElementById("topAlpha").value + "), rgba(" + hex2rgb(document.getElementById("btmColor").value) + ", " + document.getElementById("btmAlpha").value + "))";
|
580 |
document.getElementById("messageWindow").style.backgroundImage = bg;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
581 |
}
|
582 |
|
583 |
document.querySelectorAll("input").forEach(el => {
|
@@ -614,7 +642,6 @@
|
|
614 |
width: image.naturalWidth,
|
615 |
height: image.naturalHeight,
|
616 |
onclone: (x) => {
|
617 |
-
console.log(x);
|
618 |
x.getElementById("edit").style.width = image.naturalWidth + "px";
|
619 |
x.getElementById("edit").style.height = image.naturalHeight + "px";
|
620 |
x.getElementById("edit").classList.add("m-0");
|
@@ -721,7 +748,8 @@
|
|
721 |
createEditor();
|
722 |
});
|
723 |
const setStroke = function (mode) {
|
724 |
-
let
|
|
|
725 |
let strokeColor = hex2rgb(document.getElementById("strokeColor").value);
|
726 |
let css = '.shadow-text {-webkit-text-stroke: ' + strokeSize + 'px rgb(0, 0, 0) ;paint-order: stroke fill;}'.replaceAll('rgb(0, 0, 0)', 'rgb(' + strokeColor + ')');
|
727 |
let css2 = '#mainMassage input {text-shadow: 1px -0px 0 rgb(0, 0, 0), 1px 0px 0 rgb(0, 0, 0), 1px 1px 0 rgb(0, 0, 0), 0px 1px 0 rgb(0, 0, 0), -1px -1px 0 rgb(0, 0, 0), -1px 0px 0 rgb(0, 0, 0), -1px -1px 0 rgb(0, 0, 0);}'.replaceAll('rgb(0, 0, 0)', 'rgb(' + strokeColor + ')');
|
|
|
48 |
background-repeat: no-repeat;
|
49 |
background-position: center bottom;
|
50 |
background-size: contain;
|
51 |
+
position: relative;
|
52 |
}
|
53 |
|
54 |
#edit {
|
|
|
55 |
background-repeat: no-repeat;
|
56 |
background-size: contain;
|
57 |
}
|
58 |
|
59 |
input {
|
60 |
+
padding: 0 1rem;
|
61 |
background: rgba(0, 0, 0, 0);
|
62 |
border: rgba(0, 0, 0, 0) solid 1px;
|
63 |
width: 100%;
|
|
|
69 |
}
|
70 |
|
71 |
.shadow-text {
|
72 |
+
padding: 0 1rem;
|
73 |
display: flex;
|
74 |
align-items: center;
|
75 |
z-index: 3;
|
|
|
78 |
#edit .row2 {
|
79 |
display: flex;
|
80 |
align-items: stretch;
|
|
|
|
|
|
|
|
|
|
|
|
|
81 |
|
|
|
|
|
|
|
|
|
|
|
|
|
82 |
}
|
83 |
|
84 |
:root {
|
|
|
123 |
font-size: calc(clamp(100%, 1vh, 5vh))
|
124 |
}
|
125 |
|
|
|
126 |
#left,
|
127 |
#right {
|
128 |
height: 100%;
|
|
|
206 |
<div id="messageWindow" class="row">
|
207 |
<div class="col-12 p-0 m-0 h-100">
|
208 |
<div id="mainMassage" class="row">
|
209 |
+
<div id="left" class="col-3 p-0 m-0">
|
210 |
+
<div class="p-0" style="height:100%" id="leftTexts">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
211 |
</div>
|
212 |
</div>
|
213 |
<div id="right" class="col-9 m-0">
|
214 |
<div class="h-100 p-0" id="rightTexts">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
215 |
</div>
|
216 |
</div>
|
217 |
</div>
|
|
|
334 |
<div class="input-group">
|
335 |
<span class="input-group-text bg-secondary text-light">WindowSize</span>
|
336 |
<input name="windowSize" type="range" class="form-control form-range" id="windowSize"
|
337 |
+
value="25" step="1" min="10" max="100">
|
338 |
<span class="input-group-text bg-secondary text-light">Padding</span>
|
339 |
<input name="mainMessagePaddingSize" type="range" class="form-control form-range"
|
340 |
id="mainMessagePaddingSize" value="0" step="0.1" min="0" max="2">
|
341 |
</div>
|
342 |
+
<div class="input-group">
|
343 |
+
<span class="input-group-text bg-secondary text-light">leftLines</span>
|
344 |
+
<input name="leftLineLength" type="number" class="form-control form-number"
|
345 |
+
id="leftLineLength" value="4" step="1" min="1">
|
346 |
+
<span class="input-group-text bg-secondary text-light">rightLines</span>
|
347 |
+
<input name="rightLineLength" type="number" class="form-control form-number"
|
348 |
+
id="rightLineLength" value="4" step="1" min="1">
|
349 |
+
</div>
|
350 |
<div class="input-group">
|
351 |
<span class="input-group-text bg-secondary text-light">Render Scale</span>
|
352 |
<input name="renderScale" type="range" class="form-control form-range" id="renderScale"
|
|
|
534 |
document.getElementById("right").style.paddingTop = document.getElementById("mainMessagePaddingSize").value + 'rem';
|
535 |
document.getElementById("right").style.paddingBottom = document.getElementById("mainMessagePaddingSize").value + 'rem';
|
536 |
|
537 |
+
document.getElementById("rightTexts").textContent = "";
|
538 |
+
for (let i = 0; i < document.getElementById("rightLineLength").value; i++) {
|
539 |
+
let row2 = document.createElement("div");
|
540 |
+
let input = document.createElement("input");
|
541 |
+
let shadowText = document.createElement("div");
|
542 |
+
shadowText.setAttribute("class", "shadow-text d-none text-light");
|
543 |
+
input.name = "rightText" + (i + 1);
|
544 |
+
row2.classList.add("row2");
|
545 |
+
row2.appendChild(input);
|
546 |
+
row2.appendChild(shadowText);
|
547 |
+
input.classList.add("text-light");
|
548 |
+
input.value = "";
|
549 |
+
let v = window.localStorage.getItem(input.name);
|
550 |
+
if (v) {
|
551 |
+
input.value = v;
|
552 |
+
}
|
553 |
+
input.addEventListener("change", function (e) {
|
554 |
+
if (input.name && input.value) {
|
555 |
+
window.localStorage.setItem(input.name, input.value);
|
556 |
+
}
|
557 |
+
if (input.name && !input.value) {
|
558 |
+
window.localStorage.removeItem(input.name);
|
559 |
+
}
|
560 |
+
});
|
561 |
+
document.getElementById("rightTexts").appendChild(row2);
|
562 |
+
}
|
563 |
+
|
564 |
+
document.getElementById("leftTexts").textContent = "";
|
565 |
+
for (let i = 0; i < document.getElementById("leftLineLength").value; i++) {
|
566 |
+
let row2 = document.createElement("div");
|
567 |
+
let input = document.createElement("input");
|
568 |
+
let shadowText = document.createElement("div");
|
569 |
+
shadowText.setAttribute("class", "shadow-text d-none text-light");
|
570 |
+
input.name = "leftText" + (i + 1);
|
571 |
+
row2.classList.add("row2");
|
572 |
+
row2.appendChild(input);
|
573 |
+
row2.appendChild(shadowText);
|
574 |
+
input.classList.add("text-light");
|
575 |
+
input.value = "";
|
576 |
+
let v = window.localStorage.getItem(input.name);
|
577 |
+
if (v) {
|
578 |
+
input.value = v;
|
579 |
+
}
|
580 |
+
input.addEventListener("change", function (e) {
|
581 |
+
if (input.name && input.value) {
|
582 |
+
window.localStorage.setItem(input.name, input.value);
|
583 |
+
}
|
584 |
+
if (input.name && !input.value) {
|
585 |
+
window.localStorage.removeItem(input.name);
|
586 |
+
}
|
587 |
+
});
|
588 |
+
document.getElementById("leftTexts").appendChild(row2);
|
589 |
+
}
|
590 |
+
|
591 |
//linear-gradient(rgba(170, 100, 101, 0.7), rgba(145, 152, 229, 0.9))
|
592 |
let bg = "linear-gradient(rgba(" + hex2rgb(document.getElementById("topColor").value) + ", " + document.getElementById("topAlpha").value + "), rgba(" + hex2rgb(document.getElementById("btmColor").value) + ", " + document.getElementById("btmAlpha").value + "))";
|
593 |
document.getElementById("messageWindow").style.backgroundImage = bg;
|
594 |
+
|
595 |
+
document.querySelectorAll(".row2").forEach(el => {
|
596 |
+
el.style.height = (100 / Array.from(el.parentElement.querySelectorAll(".row2")).length) + "%";
|
597 |
+
});
|
598 |
+
let sparse = 0;
|
599 |
+
if (document.querySelectorAll("#left .row2").length > 1) {
|
600 |
+
sparse = 100 / (document.querySelectorAll("#left .row2").length - 1);
|
601 |
+
}
|
602 |
+
|
603 |
+
document.getElementById("left").style.height = (100 + sparse) + "%";
|
604 |
+
document.getElementById("left").style.top = (-1 * sparse) + "%";
|
605 |
+
document.querySelectorAll("#right input, #left input").forEach(el => {
|
606 |
+
console.log(el.parentNode.offsetHeight);
|
607 |
+
el.style.fontSize = (el.parentNode.offsetHeight * document.querySelector("#fontSizeInput").value) + "px";
|
608 |
+
});
|
609 |
}
|
610 |
|
611 |
document.querySelectorAll("input").forEach(el => {
|
|
|
642 |
width: image.naturalWidth,
|
643 |
height: image.naturalHeight,
|
644 |
onclone: (x) => {
|
|
|
645 |
x.getElementById("edit").style.width = image.naturalWidth + "px";
|
646 |
x.getElementById("edit").style.height = image.naturalHeight + "px";
|
647 |
x.getElementById("edit").classList.add("m-0");
|
|
|
748 |
createEditor();
|
749 |
});
|
750 |
const setStroke = function (mode) {
|
751 |
+
let fontSize = Math.max.apply(null, [document.querySelector("#left input").style.fontSize.replace("px", ""), document.querySelector("#right input").style.fontSize.replace("px", ""), 8]);
|
752 |
+
let strokeSize = Math.ceil(fontSize * document.getElementById("strokeWeight").value);
|
753 |
let strokeColor = hex2rgb(document.getElementById("strokeColor").value);
|
754 |
let css = '.shadow-text {-webkit-text-stroke: ' + strokeSize + 'px rgb(0, 0, 0) ;paint-order: stroke fill;}'.replaceAll('rgb(0, 0, 0)', 'rgb(' + strokeColor + ')');
|
755 |
let css2 = '#mainMassage input {text-shadow: 1px -0px 0 rgb(0, 0, 0), 1px 0px 0 rgb(0, 0, 0), 1px 1px 0 rgb(0, 0, 0), 0px 1px 0 rgb(0, 0, 0), -1px -1px 0 rgb(0, 0, 0), -1px 0px 0 rgb(0, 0, 0), -1px -1px 0 rgb(0, 0, 0);}'.replaceAll('rgb(0, 0, 0)', 'rgb(' + strokeColor + ')');
|