Update index.html
Browse files- index.html +59 -56
index.html
CHANGED
|
@@ -25,13 +25,8 @@
|
|
| 25 |
background-size: contain;
|
| 26 |
}
|
| 27 |
|
| 28 |
-
input,
|
| 29 |
-
.shadow-text {
|
| 30 |
-
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);
|
| 31 |
-
}
|
| 32 |
-
|
| 33 |
body {
|
| 34 |
-
|
| 35 |
}
|
| 36 |
|
| 37 |
#edit {
|
|
@@ -118,12 +113,9 @@
|
|
| 118 |
}
|
| 119 |
|
| 120 |
#controller {
|
| 121 |
-
position: fixed;
|
| 122 |
-
bottom: 0;
|
| 123 |
-
right: 0;
|
| 124 |
list-style-type: none;
|
| 125 |
z-index: 32768;
|
| 126 |
-
background: rgba(127, 127, 127, 0.5)
|
| 127 |
}
|
| 128 |
|
| 129 |
#controller .input-group {
|
|
@@ -136,56 +128,16 @@
|
|
| 136 |
font-family: "Noto Sans JP";
|
| 137 |
}
|
| 138 |
</style>
|
|
|
|
| 139 |
<link href="https://getbootstrap.jp/docs/5.0/examples/sticky-footer-navbar/sticky-footer-navbar.css"
|
| 140 |
rel="stylesheet">
|
| 141 |
</head>
|
| 142 |
|
| 143 |
<body class="d-flex flex-column">
|
| 144 |
-
<div id="controller">
|
| 145 |
-
<div class="input-group">
|
| 146 |
-
<label for="upload">
|
| 147 |
-
<button id="uploadButton" type="button" class="btn btn-primary">Set Image</button>
|
| 148 |
-
</label>
|
| 149 |
-
<input id="upload" type="file" class="d-none">
|
| 150 |
-
<label for="faceUpload">
|
| 151 |
-
<button id="faceUploadButton" type="button" class="btn btn-primary">Face Icon</button>
|
| 152 |
-
</label>
|
| 153 |
-
<input id="faceUpload" type="file" class="d-none">
|
| 154 |
-
</div>
|
| 155 |
-
<div class="input-group">
|
| 156 |
-
<button id="render" type="button" class="btn btn-success">Render</button>
|
| 157 |
-
</div>
|
| 158 |
-
<h6>Message Window</h6>
|
| 159 |
-
<div class="input-group">
|
| 160 |
-
<span class="input-group-text">TopColor</span>
|
| 161 |
-
<input type="color" class="form-control form-control-color" id="topColor" value="#AA6465">
|
| 162 |
-
</div>
|
| 163 |
-
<div class="input-group">
|
| 164 |
-
<span class="input-group-text">TopAlpha</span>
|
| 165 |
-
<input type="range" class="form-control form-range" id="topAlpha" value="0.7" step="0.01" max="1">
|
| 166 |
-
</div>
|
| 167 |
-
<div class="input-group">
|
| 168 |
-
<span class="input-group-text">BtmColor</span>
|
| 169 |
-
<input type="color" class="form-control form-control-color" id="btmColor" value="#9198E5">
|
| 170 |
-
</div>
|
| 171 |
-
<div class="input-group">
|
| 172 |
-
<span class="input-group-text">BtmAlpha</span>
|
| 173 |
-
<input type="range" class="form-control form-range" id="btmAlpha" value="0.9" step="0.01" max="1">
|
| 174 |
-
</div>
|
| 175 |
-
<h6>Font</h6>
|
| 176 |
-
<div class="input-group">
|
| 177 |
-
<span class="input-group-text">font-family</span>
|
| 178 |
-
<input type="text" class="form-control" id="fontFamilyInput" value="">
|
| 179 |
-
</div>
|
| 180 |
-
<div class="input-group">
|
| 181 |
-
<span class="input-group-text">font-size</span>
|
| 182 |
-
<input type="range" class="form-control form-range" id="fontSizeInput" value="0.8" step="0.01" min="0.5" max="0.85">
|
| 183 |
-
</div>
|
| 184 |
-
</div>
|
| 185 |
<main class="flex-shrink-0">
|
| 186 |
<div class="container-fluid">
|
| 187 |
<div class="row">
|
| 188 |
-
<div class="col-
|
| 189 |
<div class="row h-75 p-0 m-0">
|
| 190 |
</div>
|
| 191 |
<div id="messageWindow" class="row h-25 p-0 m-0">
|
|
@@ -231,6 +183,50 @@
|
|
| 231 |
</div>
|
| 232 |
</div>
|
| 233 |
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 234 |
</div>
|
| 235 |
</div>
|
| 236 |
</main>
|
|
@@ -273,6 +269,7 @@
|
|
| 273 |
}
|
| 274 |
|
| 275 |
const saveImage = function (image) {
|
|
|
|
| 276 |
let edit = document.getElementById("edit");
|
| 277 |
let result = document.getElementById("result");
|
| 278 |
let naturalAspect = image.naturalWidth / image.naturalHeight;
|
|
@@ -313,9 +310,8 @@
|
|
| 313 |
}
|
| 314 |
document.getElementById("result").addEventListener("click", function (e) {
|
| 315 |
console.log(e.target);
|
| 316 |
-
|
| 317 |
-
|
| 318 |
-
//}
|
| 319 |
let image = document.getElementById("image");
|
| 320 |
document.getElementById("edit").style.backgroundImage = 'url("' + image.getAttribute("src") + '")';
|
| 321 |
createEditor();
|
|
@@ -383,7 +379,14 @@
|
|
| 383 |
}else{
|
| 384 |
f.textContent = 'body { font-family: "'+i.value.trim()+'"; }';
|
| 385 |
}
|
| 386 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 387 |
});
|
| 388 |
</script>
|
| 389 |
</body>
|
|
|
|
| 25 |
background-size: contain;
|
| 26 |
}
|
| 27 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 28 |
body {
|
| 29 |
+
|
| 30 |
}
|
| 31 |
|
| 32 |
#edit {
|
|
|
|
| 113 |
}
|
| 114 |
|
| 115 |
#controller {
|
|
|
|
|
|
|
|
|
|
| 116 |
list-style-type: none;
|
| 117 |
z-index: 32768;
|
| 118 |
+
background: rgba(127, 127, 127, 0.5);
|
| 119 |
}
|
| 120 |
|
| 121 |
#controller .input-group {
|
|
|
|
| 128 |
font-family: "Noto Sans JP";
|
| 129 |
}
|
| 130 |
</style>
|
| 131 |
+
<style id="text-shadow">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);}</style>
|
| 132 |
<link href="https://getbootstrap.jp/docs/5.0/examples/sticky-footer-navbar/sticky-footer-navbar.css"
|
| 133 |
rel="stylesheet">
|
| 134 |
</head>
|
| 135 |
|
| 136 |
<body class="d-flex flex-column">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 137 |
<main class="flex-shrink-0">
|
| 138 |
<div class="container-fluid">
|
| 139 |
<div class="row">
|
| 140 |
+
<div class="col-lg-8 p-0 m-0 relative" id="edit">
|
| 141 |
<div class="row h-75 p-0 m-0">
|
| 142 |
</div>
|
| 143 |
<div id="messageWindow" class="row h-25 p-0 m-0">
|
|
|
|
| 183 |
</div>
|
| 184 |
</div>
|
| 185 |
</div>
|
| 186 |
+
<div class="col-lg-4" id="controller">
|
| 187 |
+
<div class="input-group">
|
| 188 |
+
<label for="upload">
|
| 189 |
+
<button id="uploadButton" type="button" class="btn btn-primary">Set Image</button>
|
| 190 |
+
</label>
|
| 191 |
+
<input id="upload" type="file" class="d-none">
|
| 192 |
+
<label for="faceUpload">
|
| 193 |
+
<button id="faceUploadButton" type="button" class="btn btn-primary">Face Icon</button>
|
| 194 |
+
</label>
|
| 195 |
+
<input id="faceUpload" type="file" class="d-none">
|
| 196 |
+
</div>
|
| 197 |
+
<div class="input-group">
|
| 198 |
+
<button id="render" type="button" class="btn btn-success">Render</button>
|
| 199 |
+
</div>
|
| 200 |
+
<h6>Message Window</h6>
|
| 201 |
+
<div class="input-group">
|
| 202 |
+
<span class="input-group-text">TopColor</span>
|
| 203 |
+
<input type="color" class="form-control form-control-color" id="topColor" value="#AA6465">
|
| 204 |
+
</div>
|
| 205 |
+
<div class="input-group">
|
| 206 |
+
<span class="input-group-text">TopAlpha</span>
|
| 207 |
+
<input type="range" class="form-control form-range" id="topAlpha" value="0.7" step="0.01" max="1">
|
| 208 |
+
</div>
|
| 209 |
+
<div class="input-group">
|
| 210 |
+
<span class="input-group-text">BtmColor</span>
|
| 211 |
+
<input type="color" class="form-control form-control-color" id="btmColor" value="#9198E5">
|
| 212 |
+
</div>
|
| 213 |
+
<div class="input-group">
|
| 214 |
+
<span class="input-group-text">BtmAlpha</span>
|
| 215 |
+
<input type="range" class="form-control form-range" id="btmAlpha" value="0.9" step="0.01" max="1">
|
| 216 |
+
</div>
|
| 217 |
+
<h6>Font</h6>
|
| 218 |
+
<div class="input-group">
|
| 219 |
+
<span class="input-group-text">font-family</span>
|
| 220 |
+
<input type="text" class="form-control" id="fontFamilyInput" value="">
|
| 221 |
+
</div>
|
| 222 |
+
<div class="input-group">
|
| 223 |
+
<span class="input-group-text">font-size</span>
|
| 224 |
+
<input type="range" class="form-control form-range" id="fontSizeInput" value="0.8" step="0.01" min="0.5" max="0.85">
|
| 225 |
+
</div>
|
| 226 |
+
<div class="input-group">
|
| 227 |
+
<button id="textShadowToggle" type="button" class="btn btn-primary">TEXT-STROKE</button>
|
| 228 |
+
</div>
|
| 229 |
+
</div>
|
| 230 |
</div>
|
| 231 |
</div>
|
| 232 |
</main>
|
|
|
|
| 269 |
}
|
| 270 |
|
| 271 |
const saveImage = function (image) {
|
| 272 |
+
document.getElementById("controller").classList.add("d-none");
|
| 273 |
let edit = document.getElementById("edit");
|
| 274 |
let result = document.getElementById("result");
|
| 275 |
let naturalAspect = image.naturalWidth / image.naturalHeight;
|
|
|
|
| 310 |
}
|
| 311 |
document.getElementById("result").addEventListener("click", function (e) {
|
| 312 |
console.log(e.target);
|
| 313 |
+
document.getElementById("result").classList.add("d-none");
|
| 314 |
+
document.getElementById("controller").classList.remove("d-none");
|
|
|
|
| 315 |
let image = document.getElementById("image");
|
| 316 |
document.getElementById("edit").style.backgroundImage = 'url("' + image.getAttribute("src") + '")';
|
| 317 |
createEditor();
|
|
|
|
| 379 |
}else{
|
| 380 |
f.textContent = 'body { font-family: "'+i.value.trim()+'"; }';
|
| 381 |
}
|
| 382 |
+
});
|
| 383 |
+
document.getElementById("textShadowToggle").addEventListener("click", function () {
|
| 384 |
+
this.classList.toggle("opacity-50");
|
| 385 |
+
if(this.classList.contains("opacity-50")){
|
| 386 |
+
document.getElementById("text-shadow").textContent = "";
|
| 387 |
+
}else{
|
| 388 |
+
document.getElementById("text-shadow").textContent = '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);}';
|
| 389 |
+
}
|
| 390 |
});
|
| 391 |
</script>
|
| 392 |
</body>
|