Update index.html
Browse files- index.html +167 -60
index.html
CHANGED
@@ -26,8 +26,6 @@
|
|
26 |
background-size: contain;
|
27 |
}
|
28 |
|
29 |
-
body {}
|
30 |
-
|
31 |
#edit {
|
32 |
/*background: url('ClipBoard.png');*/
|
33 |
background-repeat: no-repeat;
|
@@ -56,6 +54,10 @@
|
|
56 |
align-items: stretch;
|
57 |
}
|
58 |
|
|
|
|
|
|
|
|
|
59 |
.row2-25 {
|
60 |
height: 25%;
|
61 |
}
|
@@ -66,16 +68,43 @@
|
|
66 |
|
67 |
:root {
|
68 |
--messageWindowSize: 25%;
|
|
|
|
|
69 |
}
|
|
|
70 |
#emptySpace {
|
71 |
height: calc(100% - var(--messageWindowSize));
|
72 |
}
|
|
|
73 |
#messageWindow {
|
74 |
margin: 0;
|
75 |
padding: 0;
|
76 |
height: var(--messageWindowSize);
|
77 |
}
|
78 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
79 |
|
80 |
#left,
|
81 |
#right {
|
@@ -142,45 +171,59 @@
|
|
142 |
<div class="col-lg-8 p-0 m-0 relative" id="edit">
|
143 |
<div id="emptySpace" class="row p-0 m-0">
|
144 |
</div>
|
145 |
-
<div id="messageWindow" class="row
|
146 |
-
<div
|
147 |
-
<div
|
148 |
-
<div class="
|
149 |
-
<
|
150 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
151 |
</div>
|
152 |
-
<div class="
|
153 |
-
<
|
154 |
-
|
155 |
-
|
156 |
-
|
157 |
-
|
158 |
-
|
159 |
-
|
160 |
-
|
161 |
-
|
162 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
163 |
</div>
|
164 |
</div>
|
165 |
-
|
166 |
-
|
167 |
-
|
168 |
-
<div
|
169 |
-
|
170 |
-
|
171 |
-
</div>
|
172 |
-
<div
|
173 |
-
|
174 |
-
<div class="shadow-text d-none text-light"></div>
|
175 |
-
</div>
|
176 |
-
<div class="row2 row2-25">
|
177 |
-
<input class="text-light" value="(3行目のテキスト)">
|
178 |
-
<div class="shadow-text d-none text-light"></div>
|
179 |
-
</div>
|
180 |
-
<div class="row2 row2-25">
|
181 |
-
<input class="text-light" value="(4行目のテキスト)">
|
182 |
-
<div class="shadow-text d-none text-light"></div>
|
183 |
-
</div>
|
184 |
</div>
|
185 |
</div>
|
186 |
</div>
|
@@ -193,60 +236,72 @@
|
|
193 |
</label>
|
194 |
<input id="upload" type="file" class="d-none">
|
195 |
<input id="faceUpload" type="file" class="d-none">
|
196 |
-
|
197 |
-
<div class="input-group">
|
198 |
<label for="faceUpload">
|
199 |
<button id="faceUploadButton" type="button" class="btn btn-primary">Face Icon</button>
|
200 |
</label>
|
201 |
<label for="faceRemove">
|
202 |
<button id="faceRemoveButton" type="button" class="btn btn-danger">Remove Icon</button>
|
203 |
</label>
|
204 |
-
|
205 |
-
<div class="input-group">
|
206 |
<button id="render" type="button" class="btn btn-success">Render</button>
|
207 |
</div>
|
208 |
<p><u>画像は全てキャッシュで処理されサーバーには一切送信されません。</u></p>
|
209 |
<h6>Message Window</h6>
|
210 |
<div class="input-group">
|
211 |
<span class="input-group-text">WindowSize</span>
|
212 |
-
<input type="range" class="form-control form-range" id="windowSize" value="25"
|
|
|
213 |
</div>
|
214 |
<div class="input-group">
|
215 |
<span class="input-group-text">TopColor</span>
|
216 |
-
<input type="color" class="form-control form-control-color" id="topColor"
|
|
|
217 |
</div>
|
218 |
<div class="input-group">
|
219 |
<span class="input-group-text">TopAlpha</span>
|
220 |
-
<input type="range" class="form-control form-range" id="topAlpha" value="0.7"
|
221 |
-
max="1">
|
222 |
</div>
|
223 |
<div class="input-group">
|
224 |
<span class="input-group-text">BtmColor</span>
|
225 |
-
<input type="color" class="form-control form-control-color" id="btmColor"
|
|
|
226 |
</div>
|
227 |
<div class="input-group">
|
228 |
<span class="input-group-text">BtmAlpha</span>
|
229 |
-
<input type="range" class="form-control form-range" id="btmAlpha" value="0.9"
|
230 |
-
max="1">
|
231 |
</div>
|
232 |
<h6>Font</h6>
|
233 |
<div class="input-group">
|
234 |
<span class="input-group-text">font-family</span>
|
235 |
-
<input type="text" class="form-control" id="fontFamilyInput" value="">
|
236 |
</div>
|
237 |
<div class="input-group">
|
238 |
<span class="input-group-text">font-size</span>
|
239 |
-
<input type="range" class="form-control form-range" id="fontSizeInput"
|
240 |
-
min="0.5" max="1">
|
241 |
</div>
|
242 |
<div class="input-group">
|
243 |
-
<button id="
|
|
|
|
|
|
|
|
|
|
|
|
|
244 |
</div>
|
245 |
<h6>Advanced</h6>
|
246 |
<div class="input-group">
|
247 |
<span class="input-group-text">Render Scale</span>
|
248 |
-
<input type="range" class="form-control form-range" id="renderScale"
|
249 |
-
min="1" max="4">
|
|
|
|
|
|
|
|
|
|
|
250 |
</div>
|
251 |
</div>
|
252 |
</div>
|
@@ -284,11 +339,25 @@
|
|
284 |
document.querySelectorAll("#right input, #left input").forEach(el => {
|
285 |
el.style.fontSize = (el.parentNode.offsetHeight * document.querySelector("#fontSizeInput").value) + "px";
|
286 |
});
|
|
|
|
|
|
|
287 |
//linear-gradient(rgba(170, 100, 101, 0.7), rgba(145, 152, 229, 0.9))
|
288 |
let bg = "linear-gradient(rgba(" + hex2rgb(document.getElementById("topColor").value) + ", " + document.getElementById("topAlpha").value + "), rgba(" + hex2rgb(document.getElementById("btmColor").value) + ", " + document.getElementById("btmAlpha").value + "))";
|
289 |
document.getElementById("messageWindow").style.backgroundImage = bg;
|
290 |
}
|
291 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
292 |
const saveImage = function (image) {
|
293 |
document.getElementById("controller").classList.add("d-none");
|
294 |
let edit = document.getElementById("edit");
|
@@ -344,13 +413,10 @@
|
|
344 |
});
|
345 |
});
|
346 |
|
347 |
-
|
348 |
let image = document.getElementById("image");
|
349 |
document.getElementById("edit").style.backgroundImage = 'url("' + image.getAttribute("src") + '")';
|
350 |
createEditor();
|
351 |
|
352 |
-
|
353 |
-
|
354 |
document.getElementById("upload").addEventListener("change", function () {
|
355 |
let reader = new FileReader();
|
356 |
let u = this;
|
@@ -386,6 +452,9 @@
|
|
386 |
document.getElementById("faceUploadButton").addEventListener("click", function () {
|
387 |
document.getElementById("faceUpload").click();
|
388 |
});
|
|
|
|
|
|
|
389 |
|
390 |
document.getElementById("faceRemoveButton").addEventListener("click", function () {
|
391 |
let face = document.getElementById("face");
|
@@ -410,15 +479,53 @@
|
|
410 |
});
|
411 |
document.getElementById("windowSize").addEventListener("change", function () {
|
412 |
document.documentElement.style.setProperty('--messageWindowSize', this.value + "%");
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
413 |
});
|
414 |
-
document.getElementById("
|
|
|
415 |
this.classList.toggle("opacity-50");
|
416 |
if (this.classList.contains("opacity-50")) {
|
417 |
document.getElementById("text-shadow").textContent = "";
|
418 |
} else {
|
419 |
-
document.getElementById("text-shadow").textContent = 'input, .shadow-text {text-
|
420 |
}
|
421 |
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
422 |
</script>
|
423 |
</body>
|
424 |
|
|
|
26 |
background-size: contain;
|
27 |
}
|
28 |
|
|
|
|
|
29 |
#edit {
|
30 |
/*background: url('ClipBoard.png');*/
|
31 |
background-repeat: no-repeat;
|
|
|
54 |
align-items: stretch;
|
55 |
}
|
56 |
|
57 |
+
.row2-20 {
|
58 |
+
height: 20%;
|
59 |
+
}
|
60 |
+
|
61 |
.row2-25 {
|
62 |
height: 25%;
|
63 |
}
|
|
|
68 |
|
69 |
:root {
|
70 |
--messageWindowSize: 25%;
|
71 |
+
--mainMassageHeight: 100%;
|
72 |
+
--userInterfaceHeight: 20%;
|
73 |
}
|
74 |
+
|
75 |
#emptySpace {
|
76 |
height: calc(100% - var(--messageWindowSize));
|
77 |
}
|
78 |
+
|
79 |
#messageWindow {
|
80 |
margin: 0;
|
81 |
padding: 0;
|
82 |
height: var(--messageWindowSize);
|
83 |
}
|
84 |
|
85 |
+
#mainMassage {
|
86 |
+
height: var(--mainMassageHeight);
|
87 |
+
}
|
88 |
+
|
89 |
+
#userInterface {
|
90 |
+
font-family: Georgia, 'Times New Roman', Times, serif;
|
91 |
+
height: var(--userInterfaceHeight);
|
92 |
+
width: 100%;
|
93 |
+
display: flex;
|
94 |
+
margin: 0;
|
95 |
+
padding: 0;
|
96 |
+
justify-content: space-evenly;
|
97 |
+
align-items: center;
|
98 |
+
}
|
99 |
+
|
100 |
+
#userInterface>* {
|
101 |
+
width: 100%;
|
102 |
+
height: 100%;
|
103 |
+
text-align: center;
|
104 |
+
background-color: rgba(0, 0, 0, 0.25);
|
105 |
+
border: 1px dashed rgba(255, 255, 255, 0.5);
|
106 |
+
}
|
107 |
+
|
108 |
|
109 |
#left,
|
110 |
#right {
|
|
|
171 |
<div class="col-lg-8 p-0 m-0 relative" id="edit">
|
172 |
<div id="emptySpace" class="row p-0 m-0">
|
173 |
</div>
|
174 |
+
<div id="messageWindow" class="row">
|
175 |
+
<div class="col-12 p-0 m-0 h-100">
|
176 |
+
<div id="mainMassage" class="row">
|
177 |
+
<div id="left" class="col-3 p-0 m-0" style="height:133%;position:relative;top:-33%;">
|
178 |
+
<div class="p-0" style="height:100%">
|
179 |
+
<div class="row2 row2-25">
|
180 |
+
<input name="name1" class="text-light" value="">
|
181 |
+
<div class="shadow-text d-none text-light"></div>
|
182 |
+
</div>
|
183 |
+
<div class="row2 row2-25">
|
184 |
+
<input name="name2" class="text-light" value="">
|
185 |
+
<div class="shadow-text d-none text-light"></div>
|
186 |
+
</div>
|
187 |
+
<div class="row2 row2-25">
|
188 |
+
<input name="name3" class="text-light" value="キャラ名">
|
189 |
+
<div class="shadow-text d-none text-light"></div>
|
190 |
+
</div>
|
191 |
+
<div class="row2 row2-25">
|
192 |
+
<input name="name4" class="text-light" value="">
|
193 |
+
<div class="shadow-text d-none text-light"></div>
|
194 |
+
</div>
|
195 |
+
</div>
|
196 |
</div>
|
197 |
+
<div id="right" class="col-9 p-0 m-0">
|
198 |
+
<div class="h-100 p-0" id="rightTexts">
|
199 |
+
<div class="row2 row2-25">
|
200 |
+
<input name="text1" class="text-light" value="(1行目のテキスト)">
|
201 |
+
<div class="shadow-text d-none text-light"></div>
|
202 |
+
</div>
|
203 |
+
<div class="row2 row2-25">
|
204 |
+
<input name="text2" class="text-light" value="(2行目のテキスト)">
|
205 |
+
<div class="shadow-text d-none text-light"></div>
|
206 |
+
</div>
|
207 |
+
<div class="row2 row2-25">
|
208 |
+
<input name="text3" class="text-light" value="(3行目のテキスト)">
|
209 |
+
<div class="shadow-text d-none text-light"></div>
|
210 |
+
</div>
|
211 |
+
<div class="row2 row2-25">
|
212 |
+
<input name="text4" class="text-light" value="(4行目のテキスト)">
|
213 |
+
<div class="shadow-text d-none text-light"></div>
|
214 |
+
</div>
|
215 |
+
</div>
|
216 |
</div>
|
217 |
</div>
|
218 |
+
<div id="userInterface" class="text-light d-none">
|
219 |
+
<div>Q-Save</div>
|
220 |
+
<div>Q-Load</div>
|
221 |
+
<div>Save</div>
|
222 |
+
<div>Load</div>
|
223 |
+
<div>Auto</div>
|
224 |
+
<div>Skip</div>
|
225 |
+
<div>Log</div>
|
226 |
+
<div>Config</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
227 |
</div>
|
228 |
</div>
|
229 |
</div>
|
|
|
236 |
</label>
|
237 |
<input id="upload" type="file" class="d-none">
|
238 |
<input id="faceUpload" type="file" class="d-none">
|
239 |
+
<div class="vr"></div>
|
|
|
240 |
<label for="faceUpload">
|
241 |
<button id="faceUploadButton" type="button" class="btn btn-primary">Face Icon</button>
|
242 |
</label>
|
243 |
<label for="faceRemove">
|
244 |
<button id="faceRemoveButton" type="button" class="btn btn-danger">Remove Icon</button>
|
245 |
</label>
|
246 |
+
<div class="vr"></div>
|
|
|
247 |
<button id="render" type="button" class="btn btn-success">Render</button>
|
248 |
</div>
|
249 |
<p><u>画像は全てキャッシュで処理されサーバーには一切送信されません。</u></p>
|
250 |
<h6>Message Window</h6>
|
251 |
<div class="input-group">
|
252 |
<span class="input-group-text">WindowSize</span>
|
253 |
+
<input name="windowSize" type="range" class="form-control form-range" id="windowSize" value="25"
|
254 |
+
step="1" min="16" max="30">
|
255 |
</div>
|
256 |
<div class="input-group">
|
257 |
<span class="input-group-text">TopColor</span>
|
258 |
+
<input name="topColor" type="color" class="form-control form-control-color" id="topColor"
|
259 |
+
value="#AA6465">
|
260 |
</div>
|
261 |
<div class="input-group">
|
262 |
<span class="input-group-text">TopAlpha</span>
|
263 |
+
<input name="topAlpha" type="range" class="form-control form-range" id="topAlpha" value="0.7"
|
264 |
+
step="0.01" max="1">
|
265 |
</div>
|
266 |
<div class="input-group">
|
267 |
<span class="input-group-text">BtmColor</span>
|
268 |
+
<input name="btmColor" type="color" class="form-control form-control-color" id="btmColor"
|
269 |
+
value="#9198E5">
|
270 |
</div>
|
271 |
<div class="input-group">
|
272 |
<span class="input-group-text">BtmAlpha</span>
|
273 |
+
<input name="btmAlpha" type="range" class="form-control form-range" id="btmAlpha" value="0.9"
|
274 |
+
step="0.01" max="1">
|
275 |
</div>
|
276 |
<h6>Font</h6>
|
277 |
<div class="input-group">
|
278 |
<span class="input-group-text">font-family</span>
|
279 |
+
<input name="fontFamilyInput" type="text" class="form-control" id="fontFamilyInput" value="">
|
280 |
</div>
|
281 |
<div class="input-group">
|
282 |
<span class="input-group-text">font-size</span>
|
283 |
+
<input name="fontSizeInput" type="range" class="form-control form-range" id="fontSizeInput"
|
284 |
+
value="0.8" step="0.01" min="0.5" max="1">
|
285 |
</div>
|
286 |
<div class="input-group">
|
287 |
+
<button id="textShadowToggleA" type="button" class="btn btn-primary">Text-Stroke
|
288 |
+
(TypeA)</button>
|
289 |
+
<button id="textShadowToggleB" type="button" class="btn btn-primary opacity-50">Text-Stroke
|
290 |
+
(TypeB)</button>
|
291 |
+
<div class="vr"></div>
|
292 |
+
<button id="userInterfaceToggle" type="button"
|
293 |
+
class="btn btn-primary opacity-50">Fake-UI</button>
|
294 |
</div>
|
295 |
<h6>Advanced</h6>
|
296 |
<div class="input-group">
|
297 |
<span class="input-group-text">Render Scale</span>
|
298 |
+
<input name="renderScale" type="range" class="form-control form-range" id="renderScale"
|
299 |
+
value="2" step="0.5" min="1" max="4">
|
300 |
+
</div>
|
301 |
+
<div class="input-group">
|
302 |
+
<label for="upload">
|
303 |
+
<button id="resetStorage" type="button" class="btn btn-danger">ResetCookies</button>
|
304 |
+
</label>
|
305 |
</div>
|
306 |
</div>
|
307 |
</div>
|
|
|
339 |
document.querySelectorAll("#right input, #left input").forEach(el => {
|
340 |
el.style.fontSize = (el.parentNode.offsetHeight * document.querySelector("#fontSizeInput").value) + "px";
|
341 |
});
|
342 |
+
document.querySelectorAll("#userInterface >div").forEach(el => {
|
343 |
+
el.style.fontSize = (el.parentNode.offsetHeight * 0.65) + "px";
|
344 |
+
});
|
345 |
//linear-gradient(rgba(170, 100, 101, 0.7), rgba(145, 152, 229, 0.9))
|
346 |
let bg = "linear-gradient(rgba(" + hex2rgb(document.getElementById("topColor").value) + ", " + document.getElementById("topAlpha").value + "), rgba(" + hex2rgb(document.getElementById("btmColor").value) + ", " + document.getElementById("btmAlpha").value + "))";
|
347 |
document.getElementById("messageWindow").style.backgroundImage = bg;
|
348 |
}
|
349 |
|
350 |
+
document.querySelectorAll("input").forEach(el => {
|
351 |
+
addEventListener("change", function (e) {
|
352 |
+
if (el.name && el.value) {
|
353 |
+
window.localStorage.setItem(el.name, el.value);
|
354 |
+
}
|
355 |
+
if (el.name && !el.value) {
|
356 |
+
window.localStorage.removeItem(el.name);
|
357 |
+
}
|
358 |
+
});
|
359 |
+
})
|
360 |
+
|
361 |
const saveImage = function (image) {
|
362 |
document.getElementById("controller").classList.add("d-none");
|
363 |
let edit = document.getElementById("edit");
|
|
|
413 |
});
|
414 |
});
|
415 |
|
|
|
416 |
let image = document.getElementById("image");
|
417 |
document.getElementById("edit").style.backgroundImage = 'url("' + image.getAttribute("src") + '")';
|
418 |
createEditor();
|
419 |
|
|
|
|
|
420 |
document.getElementById("upload").addEventListener("change", function () {
|
421 |
let reader = new FileReader();
|
422 |
let u = this;
|
|
|
452 |
document.getElementById("faceUploadButton").addEventListener("click", function () {
|
453 |
document.getElementById("faceUpload").click();
|
454 |
});
|
455 |
+
document.getElementById("resetStorage").addEventListener("click", function () {
|
456 |
+
window.localStorage.clear()
|
457 |
+
});
|
458 |
|
459 |
document.getElementById("faceRemoveButton").addEventListener("click", function () {
|
460 |
let face = document.getElementById("face");
|
|
|
479 |
});
|
480 |
document.getElementById("windowSize").addEventListener("change", function () {
|
481 |
document.documentElement.style.setProperty('--messageWindowSize', this.value + "%");
|
482 |
+
createEditor();
|
483 |
+
});
|
484 |
+
document.getElementById("textShadowToggleA").addEventListener("click", function () {
|
485 |
+
document.getElementById("textShadowToggleB").classList.add("opacity-50");
|
486 |
+
this.classList.toggle("opacity-50");
|
487 |
+
if (this.classList.contains("opacity-50")) {
|
488 |
+
document.getElementById("text-shadow").textContent = "";
|
489 |
+
} else {
|
490 |
+
document.getElementById("text-shadow").textContent = '#mainMassage input, .shadow-text {text-shadow: 1px -0px 0 rgba(0, 0, 0, 0.8), 1px 0px 0 rgba(0, 0, 0, 0.8), 1px 1px 0 rgba(0, 0, 0, 0.8), 0px 1px 0 rgba(0, 0, 0, 0.8), -1px -1px 0 rgba(0, 0, 0, 0.8), -1px 0px 0 rgba(0, 0, 0, 0.8), -1px -1px 0 rgba(0, 0, 0, 0.8);}';
|
491 |
+
}
|
492 |
});
|
493 |
+
document.getElementById("textShadowToggleB").addEventListener("click", function () {
|
494 |
+
document.getElementById("textShadowToggleA").classList.add("opacity-50");
|
495 |
this.classList.toggle("opacity-50");
|
496 |
if (this.classList.contains("opacity-50")) {
|
497 |
document.getElementById("text-shadow").textContent = "";
|
498 |
} else {
|
499 |
+
document.getElementById("text-shadow").textContent = '#mainMassage input, .shadow-text {-webkit-text-stroke: 1px black;paint-order: stroke fill;}';
|
500 |
}
|
501 |
});
|
502 |
+
document.getElementById("userInterfaceToggle").addEventListener("click", function () {
|
503 |
+
this.classList.toggle("opacity-50");
|
504 |
+
if (!this.classList.contains("opacity-50")) {
|
505 |
+
document.documentElement.style.setProperty('--mainMassageHeight', "80%");
|
506 |
+
document.getElementById("userInterface").classList.remove("d-none");
|
507 |
+
createEditor();
|
508 |
+
} else {
|
509 |
+
document.documentElement.style.setProperty('--mainMassageHeight', "100%");
|
510 |
+
document.getElementById("userInterface").classList.add("d-none");
|
511 |
+
createEditor();
|
512 |
+
}
|
513 |
+
});
|
514 |
+
|
515 |
+
|
516 |
+
document.querySelectorAll("input").forEach(el => {
|
517 |
+
let v = window.localStorage.getItem(el.name);
|
518 |
+
if (v) {
|
519 |
+
el.value = v;
|
520 |
+
let evt = new Event("change");
|
521 |
+
el.dispatchEvent(evt)
|
522 |
+
}
|
523 |
+
});
|
524 |
+
document.querySelectorAll("#userInterface > div").forEach(el => {
|
525 |
+
el.addEventListener("click", function(){
|
526 |
+
document.getElementById("render").click();
|
527 |
+
});
|
528 |
+
});
|
529 |
</script>
|
530 |
</body>
|
531 |
|