1<!doctype html><html lang="en"><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover"/><meta name="theme-color" content="#000000"/><meta name="keywords" content="bazaarvr, bazaar, bazaar vr, bazaarvr.com, 3D, VR, AR, XR, WebGL, WebXR, Oculus, Vive, ThreeJS, Three.js, JS, React, e-commerce, shop, Store, software, computer, gpu, JavaScript, virtual reality, augmented-reality, ion, engine, game, UI, GUI"><meta name="author" content="BazaarVR"><meta name="description" content="XR Shopping Experiences"/><title>Bazaar</title><link rel="icon" href="/images/icons/new_bazaar_logo_0.png"/><link crossorigin="anonymous" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
1<script crossorigin="anonymous" src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
1<script type="importmap">{ 2 "imports": { 3 "three": "/node_modules/three/build/three.module.js", 4 "three/examples/jsm/": "/node_modules/three/examples/jsm/", 5 "three/addons/": "/node_modules/three/examples/jsm/" 6 } 7 }</script>
7<script src="https://cdn.jsdelivr.net/npm/@jaames/iro@5"></script>
7<link crossorigin="anonymous" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/simple-keyboard@latest/build/css/index.css">
7<script src="https://cdn.jsdelivr.net/npm/simple-keyboard@latest/build/index.js"></script>
7<script src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
7<script src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
7<script src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
7<link crossorigin="anonymous" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css"/><link href="https://fonts.googleapis.com/css2?family=Assistant:wght@400;700&display=swap" rel="stylesheet">
7<script defer="defer" src="/main.js"></script>
7</head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div>
vendor: 63 bytes, line 7
7<script async src="https://www.googletagmanager.com/gtag/js?id=
7G-80ELB8BS11
vendor: 11 bytes, line 7
7"></script>
7<script>
vendor: 152 bytes, lines 7-11
7window.dataLayer = window.dataLayer || []; 8 function gtag(){dataLayer.push(arguments);} 9 gtag('js', new Date()); 10 11 gtag('config', '
11G-80ELB8BS11
vendor: 3 bytes, line 11
11');
11</script>
11<div class="main" hidden><div class="list"><div class="list-item"><input type="checkbox"> <span class="list-item-content">â Buy some Pasta</span><p class="remove-icon" onclick="removeListItem(event)">x</p></div><div class="list-item"><input type="checkbox"> <span class="list-item-content">â Bread</span><p class="remove-icon" onclick="removeListItem(event)">x</p></div><div class="list-item"><input type="checkbox"> <span class="list-item-content">â Coffee</span><p class="remove-icon" onclick="removeListItem(event)">x</p></div><div class="list-item"><input type="checkbox" checked="checked"> <span class="list-item-content">â This is the way</span><p class="remove-icon" onclick="removeListItem(event)">x</p></div><div class="list-item"><input type="checkbox"> <span class="list-item-content">â Try ion Engine</span><p class="remove-icon" onclick="removeListItem(event)">x</p></div></div><form class="form" onsubmit="addListItem(event)"><input id="todo" class="keyboard-input" placeholder="Add item"> <button class="submit-btn">+</button></form></div><div class="simple-keyboard" hidden></div><style>.main { 12 font-family: Arial, Helvetica, sans-serif; 13 padding: 25px; 14 padding-top: 15px; 15 width: 720px; 16 height: 720px; 17 } 18 19 .main * { 20 transition: all 0.3s; 21 } 22 23 .list { 24 display: flex; 25 flex-direction: column; 26 justify-content: flex-start; 27 } 28 29 .list-item { 30 display: flex; 31 flex-direction: row; 32 align-items: center; 33 flex-wrap: nowrap; 34 justify-content: space-between; 35 background: #fffffff2; 36 box-shadow: 0 2px 2px rgba(0,0,0,.15); 37 color: #49403a; 38 font-size: 16px; 39 margin: 0 auto 6px; 40 padding-left: 25px; 41 width: 90%; 42 } 43 44 .list-item:hover { 45 padding-top: 6px; 46 padding-bottom: 6px; 47 box-shadow: 0 5px 5px rgba(0,0,0,.15); 48 } 49 50 .list-item input{ 51 width: 20px; 52 height: 20px; 53 } 54 55 .list-item-content{ 56 overflow: hidden; 57 padding-left: 19px; 58 padding-bottom: 5px; 59 flex-basis: 80%; 60 text-align: left; 61 } 62 63 .remove-icon { 64 padding-left: 20px; 65 padding-right: 20px; 66 padding-top: 14px; 67 padding-bottom: 14px; 68 margin-right: 20px; 69 font-size: 23px; 70 background-color: #94bfce; 71 border-radius: 50%; 72 color: #6b2f31; 73 } 74 75 .remove-icon:hover { 76 color: #cf575b; 77 background-color: #f4e0d4; 78 } 79 80 81 .form{ 82 margin-top: 15px; 83 display: flex; 84 flex-direction: row; 85 align-items: center; 86 flex-wrap: nowrap; 87 justify-content: center; 88 89 color: #49403a; 90 font-size: 16px; 91 max-width: 90%; 92 } 93 94 .form input{ 95 background: rgba(228,228,228,.95); 96 border: none; 97 box-shadow: 0 2px 2px rgba(0,0,0,.15); 98 color: #473e39; 99 font-size: 16px; 100 height: 60px; 101 margin-left: 9%; 102 padding: 0 20px; 103 width: 60%; 104 } 105 106 .submit-btn{ 107 background: rgba(129, 188, 116, 0.95); 108 border: none; 109 border-radius: 0; 110 box-shadow: 0 2px 2px rgba(0,0,0,.15); 111 color: #fff; 112 font-family: 'Arvo', serif; 113 font-size: 22px; 114 height: 60px; 115 width: 60px; 116 } 117 118 .submit-btn:hover { 119 background: rgba(111, 180, 248, 0.95); 120 } 121 122 /** 123 * hg-theme-default theme 124 */ 125 .simple-keyboard.hg-theme-ios { 126 width: 750px; 127 margin: auto; 128 } 129 .simple-keyboard.hg-theme-ios.hg-theme-default .hg-row .hg-button { 130 flex-grow: 1; 131 cursor: pointer; 132 max-width: initial; 133 } 134 .simple-keyboard.hg-theme-ios .hg-row { 135 display: flex; 136 } 137 .simple-keyboard.hg-theme-ios .hg-row:not(:last-child) { 138 margin-bottom: 5px; 139 } 140 .simple-keyboard.hg-theme-ios .hg-row .hg-button:not(:last-child) { 141 margin-right: 5px; 142 } 143 .simple-keyboard.hg-theme-ios .hg-row:nth-child(2) { 144 margin-left: 18px; 145 } 146 .simple-keyboard.hg-theme-ios.hg-theme-default { 147 background-color: rgba(103, 103, 103, 0.8); 148 padding: 5px; 149 border-radius: 5px; 150 } 151 .simple-keyboard.hg-theme-ios.hg-theme-default.hg-layout-custom { 152 background-color: #e5e5e5; 153 padding: 5px; 154 } 155 .simple-keyboard.hg-theme-ios.hg-theme-default .hg-button { 156 border-radius: 5px; 157 box-sizing: border-box; 158 padding: 0; 159 background: white; 160 border-bottom: 1px solid #686868; 161 cursor: pointer; 162 display: flex; 163 align-items: center; 164 justify-content: center; 165 box-shadow: none; 166 font-weight: 400; 167 font-size: 20px; 168 max-width: 60px; 169 min-width: 60px; 170 height: 60px; 171 min-height: 60px; 172 } 173 .simple-keyboard.hg-theme-ios.hg-theme-default .hg-button:active, 174 .simple-keyboard.hg-theme-ios.hg-theme-default .hg-button:focus { 175 background: #e4e4e4; 176 } 177 .simple-keyboard.hg-theme-ios.hg-theme-default .hg-button.hg-functionBtn { 178 background-color: #adb5bb; 179 } 180 .simple-keyboard.hg-theme-ios.hg-theme-default .hg-button.hg-button-space, 181 .simple-keyboard.hg-theme-ios.hg-theme-default .hg-button.hg-button-shift, 182 .simple-keyboard.hg-theme-ios.hg-theme-default 183 .hg-button.hg-button-shiftactivated { 184 background-color: #ffffff; 185 } 186 .simple-keyboard.hg-theme-ios.hg-theme-default .hg-button-space { 187 max-width: 448px; 188 min-width: 448px; 189 } 190 .simple-keyboard.hg-theme-ios.hg-theme-default .hg-button-enter { 191 max-width: 110px; 192 min-width: 110px; 193 } 194 .simple-keyboard.hg-theme-ios.hg-theme-default .hg-button-altright, 195 .simple-keyboard.hg-theme-ios.hg-theme-default .hg-button-back { 196 min-width: 80px; 197 max-width: 80px; 198 } 199 200 201 /** 202 * Custom keybaord design: 203 */ 204 .customKeyboardBtnClass { 205 background-color: #2f2f2f !important; 206 color: white; 207 font-weight: 100 !important; 208 } 209 210 .customKeyboardBtnClass:hover { 211 background-color: #171717 !important; 212 transition-duration: all 600ms; 213 } 214 215 .customKeyboardBtnClass1{ 216 background-color: #2f2f2f !important; 217 color: white; 218 } 219 .customKeyboardBtnClass1:hover { 220 background-color: #171717 !important; 221 transition-duration: all 600ms; 222 }</style>
222<script>// (function () { 223 224 // })(); 225 226 function removeListItem(event) { 227 event.target.parentElement.remove(); 228 } 229 230 231 function addListItem(event) { 232 event.preventDefault(); 233 const val = document.getElementById('todo').value; 234 document.getElementById('todo').setAttribute('value', ''); 235 document.getElementById('todo').value = ''; 236 if (!val) return; 237 238 const listItems = document.getElementsByClassName('list-item'); 239 if (listItems.length > 4) { 240 listItems[0].remove(); 241 } 242 243 const listItemText = `<div class="list-item"> 244 <input type="checkbox"> 245 <span class="list-item-content">â ${val}</span> 246 <p class="remove-icon" onclick="removeListItem(event)">x</p> 247 </div>`; 248 document.getElementsByClassName('list')[0].insertAdjacentHTML( 'beforeend', listItemText ); 249 } 250 251 /* simple-keyboard: */ 252 // For more info checkout the documentation: https://hodgef.com/simple-keyboard/getting-started/ 253 254 let Keyboard = window.SimpleKeyboard.default; 255 256 let keyboard = new Keyboard({ 257 onChange: input => onChange(input), 258 onKeyPress: button => onKeyPress(button), 259 theme: "hg-theme-default hg-theme-ios", 260 layout: { 261 default: [ 262 "q w e r t y u i o p {bksp}", 263 "a s d f g h j k l {enter}", 264 "{shift} z x c v b n m , . {shift}", 265 "{alt} {smileys} {space} {altright} {downkeyboard}" 266 ], 267 shift: [ 268 "Q W E R T Y U I O P {bksp}", 269 "A S D F G H J K L {enter}", 270 "{shiftactivated} Z X C V B N M , . {shiftactivated}", 271 "{alt} {smileys} {space} {altright} {downkeyboard}" 272 ], 273 alt: [ 274 "1 2 3 4 5 6 7 8 9 0 {bksp}", 275 "@ # $ & * ( ) ' \" {enter}", 276 "{shift} % - + = / ; : ! ? {shift}", 277 "{default} {smileys} {space} {back} {downkeyboard}" 278 ], 279 smileys: [ 280 "ð ð ð ð ð ð ð ð ð ð {bksp}", 281 "ð ð¬ ð ð ð± ðª ð¬ ð´ ð¯ {enter}", 282 "ð ð 𤣠ð ð ð ð¡ ð¥ ð ð {shift}", 283 "{default} {smileys} {space} {altright} {downkeyboard}" 284 ] 285 }, 286 display: { 287 "{alt}": ".?123", 288 "{smileys}": "\uD83D\uDE03", 289 "{shift}": "â§", 290 "{shiftactivated}": "â§", 291 "{enter}": "return", 292 "{bksp}": "â«", 293 "{altright}": ".?123", 294 "{downkeyboard}": "ð", 295 "{space}": " ", 296 "{default}": "ABC", 297 "{back}": "â¦" 298 } 299 }); 300 301 /** 302 * Update simple-keyboard when input is changed directly 303 */ 304 document.getElementsByClassName('keyboard-input')[0].addEventListener("input", event => { 305 keyboard.setInput(event.target.value); 306 }); 307 308 309 function onChange(input) { 310 console.log("Input changed", input); 311 document.getElementsByClassName('keyboard-input')[0].value = input; 312 document.getElementsByClassName('keyboard-input')[0].setAttribute('value', input); 313 } 314 315 function onKeyPress(button) { 316 console.log("Button pressed", button); 317 318 /** 319 * Handle toggles 320 */ 321 if (button.includes("{") && button.includes("}")) { 322 handleLayoutChange(button); 323 } 324 } 325 326 function handleLayoutChange(button) { 327 let currentLayout = keyboard.options.layoutName; 328 let layoutName; 329 330 switch (button) { 331 case "{shift}": 332 case "{shiftactivated}": 333 case "{default}": 334 layoutName = currentLayout === "default" ? "shift" : "default"; 335 break; 336 337 case "{alt}": 338 case "{altright}": 339 layoutName = currentLayout === "alt" ? "default" : "alt"; 340 break; 341 342 case "{smileys}": 343 layoutName = currentLayout === "smileys" ? "default" : "smileys"; 344 break; 345 346 default: 347 break; 348 } 349 350 if (layoutName) { 351 keyboard.setOptions({ 352 layoutName: layoutName 353 }); 354 } 355 } 356 357 /* Customizing keyboard styling: */ 358 keyboard.addButtonTheme( 359 "\` 1 2 3 4 5 6 7 8 9 0 - = {bksp} {tab} q w e r t y u i o p [ ] \\ {lock} a s d f g h j k l ; ' " 360 + '{enter} {shift} z x c v b n m , . / {shift} .com @ {space} ~ ! @ # $ % ^ & * ( ) _ + {bksp} {tab} Q W E R T Y U I O P { } | {lock} A S D F G H J K L : " {enter} {shift} Z X C V B N M < > ? {shift} .com @ {space}' 361 + " ð ð ð ð ð ð ð ð ð ð " 362 + " ð ð¬ ð ð ð± ðª ð¬ ð´ ð¯ " 363 + " ð ð 𤣠ð ð ð ð¡ ð¥ ð ð ", 364 'customKeyboardBtnClass' 365 ); 366 keyboard.addButtonTheme( 367 "{default} {alt} {smileys} {altright} {downkeyboard} {shiftactivated} {back}", 368 'customKeyboardBtnClass1' 369 );</script>
369<div id="canvas-container" style="visibility: hidden; display: none;"><canvas id="shoeBodyPartsCanvas"></canvas><canvas id="draftShoeBodyCanvas"></canvas></div><style>* { 370 box-sizing: border-box; 371 -moz-box-sizing: border-box; 372 } 373 374 #canvas-container { 375 display: flex; 376 flex-direction: row; 377 justify-content: center; 378 width: 2048px; 379 height: 2048px; 380 border: 1px solid #896d57; 381 } 382 383 /* #shoeBodyPartsCanvas{ 384 width: 2048px; 385 height: 2048px; 386 background-color: #fff; 387 } */</style><div id="html-page-container" style="visibility: hidden; user-select: none; position: fixed;"><div class="top-section"><div class="avatar-container"><img src="data:image/png;base64,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"/></div><div class="header-container">Welcome, Saul!</div><div class="topright-container">2:45 PM<br/>Thursday, April 13, 2025</div></div><div class="bottom-section"><div id="gallery"><div class="example-header"><h1 class="example-header-headerText">List of todo items:</h1></div><div class="images"><div class="figure" data-example-url="#"><img class="image" alt="image" src="/images/test_image_1.jpeg"><div class="caption"><div class="body"><div class="title">GUI Sample HTML</div></div></div><div class="caption-1"><h3>Description</h3><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p></div></div><div class="figure" data-example-url="#"><img class="image" alt="image" src="/images/test_image_2.jpeg"><div class="caption"><div class="body"><div class="title">HTML Canvas Element</div></div></div></div><div class="figure" data-example-url="#"><img class="image" alt="image" src="/images/test_image_3.jpeg"><div class="caption"><div class="body"><div class="title">Keyboard and Input</div></div></div></div></div><div class="captions-container"><div class="caption-1"><h3>Description</h3><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p></div><div class="caption-2"><h3>Description</h3><p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.</p></div><div class="caption-3"><h3>Description</h3><p>sunt in culpa qui officia deserunt mollit anim id est laborum.</p></div></div></div></div></div><style>/* #html-page-container{ 388 width: 800px; 389 height: 440px; 390 display: flex; 391 flex-direction: column; 392 justify-content: flex-start; 393 padding: 20px; 394 background-color: #4f4f4f83; 395 border-radius: 20px; 396 color: rgb(229, 229, 229); 397 font-family: Arial, Helvetica, sans-serif; 398 } 399 400 .top-section{ 401 display: flex; 402 flex-direction: row; 403 justify-content: flex-start; 404 margin-bottom: 15px; 405 border-bottom: 2px solid rgba(240, 240, 240, 0.703); 406 padding-bottom: 10px; 407 } 408 409 .avatar-container{ 410 display: flex; 411 flex-direction: row; 412 justify-content: center; 413 } 414 415 .avatar-container img{ 416 width: 50px; 417 height: 50px; 418 border-radius: 50%; 419 } 420 421 .header-container{ 422 display: flex; 423 flex-direction: row; 424 justify-content: center; 425 align-items: center; 426 427 font-size: 22px; 428 font-weight: bold; 429 padding-left: 20px; 430 431 } 432 433 .topright-container{ 434 display: flex; 435 flex-direction: column; 436 justify-content: center; 437 margin-left: auto; 438 margin-right: 10px; 439 font-size: 12px; 440 } 441 442 .bottom-section{ 443 display: flex; 444 flex-direction: column; 445 justify-content: center; 446 } 447 448 .bottom-section-header{ 449 display: flex; 450 flex-direction: row; 451 justify-content: left; 452 font-weight: bold; 453 } 454 455 .captions-container{ 456 display: flex; 457 flex-direction: row; 458 justify-content: space-evenly; 459 } 460 .captions-container > div{ 461 width: 26%; 462 } 463 .captions-container p, h3 { 464 margin: 0; 465 font-size: 15px; 466 } 467 .captions-container p{ 468 padding: 4px; 469 font-size: 14px; 470 } 471 472 .caption-1{ 473 margin-left: 25px; 474 } 475 .caption-2{ 476 margin-left: 13px; 477 } 478 .caption-3{ 479 margin-left: 13px; 480 } 481 482 483 #photo-container { 484 margin: 0; 485 display: flex; 486 flex-direction: row; 487 align-items: flex-start; 488 justify-content: center; 489 color: #eee; 490 } 491 #gallery { 492 margin: 0 auto; 493 font-size: 1.6rem; 494 } 495 #gallery h1 { 496 font-weight: bold; 497 } 498 #gallery b { 499 font-weight: bold; 500 } 501 #gallery #header { 502 position: relative; 503 height: 12vh; 504 line-height: 12vh; 505 padding: 0 3vw; 506 } 507 508 #gallery .images { 509 display: flex; 510 flex-direction: row; 511 flex-wrap: wrap; 512 align-items: center; 513 justify-content: space-evenly; 514 margin-bottom: 4px; 515 } 516 517 #gallery .images .figure {
518 border-radius: 12px; 519 position: relative; 520 width: 26%; 521 aspect-ratio : 1 / 1; 522 margin: 0.5vh; 523 background-size: cover; 524 overflow: hidden; 525 cursor: pointer; 526 background: white; 527 font-size: 20px; 528 } 529 530 #gallery .images .figure:hover{ 531 border: 2px solid rgb(254, 180, 172); 532 } 533 534 535 #gallery .images .figure .image { 536 position: relative; 537 display: block; 538 object-fit: cover; 539 min-height: 100%; 540 max-width: 100%; 541 opacity: 1; 542 transition: all 0.3s ease; 543 user-select: none; 544 } 545 #gallery .images .figure .caption { 546 position: absolute; 547 top: 0; 548 left: 0; 549 width: 100%; 550 height: 100%; 551 display: flex; 552 flex-direction: column; 553 align-items: flex-end; 554 justify-content:flex-end; 555 556 transition: all 0.1s ease-in-out; 557 } 558 #gallery .images .figure .body { 559 display: flex; 560 flex-direction: column; 561 align-items: center; 562 justify-content: center; 563 width: 100%; 564 } 565 566 567 #gallery .images .figure .text { 568 position: relative; 569 opacity: 0; 570 transition: all 0.1s ease-in-out; 571 transition-delay: 0.0s; 572 } 573 #gallery .images .figure hr { 574 width: 50%; 575 border: 0; 576 border-bottom: 4px solid rgba(255,255,255,0.2); 577 } 578 #gallery .images .figure:hover .image { 579 opacity: 0.9; 580 } 581 #gallery .images .figure:hover .text { 582 opacity: 1; 583 } 584 585 .caption:hover { 586 opacity: 0 !important; 587 } 588 589 .example-header { 590 display: flex; 591 align-items: center; 592 justify-content: flex-start; 593 padding: 5px; 594 margin: 12px; 595 margin-bottom: 7px; 596 } 597 .example-header-headerText { 598 font-size: 16px; 599 margin: 0; 600 } 601 .text { 602 font-size: 19px; 603 } 604 .title { 605 font-size: 60%; 606 width: 100%; 607 background-color: #eeeeee98; 608 padding: 5px; 609 padding-top: 10px; 610 padding-bottom: 10px; 611 padding-left: 20px; 612 border-top: 1px solid #ccc; 613 color: white; 614 opacity: 0.85; 615 font-weight: bold; 616 } */</style><form class="myForm" method="post" enctype="application/x-www-form-urlencoded" action="#" hidden style="visibility: hidden; position: fixed;"><h3>Sample 3D HTML Form</h3><div><label>ð¹ Text Input</label> <input class="form-input" name="text_input" placeholder="Type text..." required></div><div><label>ð¹ Email</label> <input class="form-input" type="email" name="email_input" placeholder="Type email..."></div><fieldset class="choice-fieldset"><legend>ð¹ Choice Input</legend><p><label class="choice" for="choice_1"><input type="radio" id="choice_1" name="choice_1" required value="car"> Augmented Reality</label></p><p><label class="choice" for="choice_2"><input type="radio" id="choice_2" name="choice_2" required value="van"> Virtual Reality</label></p></fieldset><fieldset class="checkbox-fieldset"><legend>ð¹ Checkbox Input</legend><p><input class="checkbox-input" type="checkbox" id="checkbox_input1" name="checkbox_input1" value="checkbox todo 1"> <label for="checkbox_input1">checkbox todo 1</label></p><p><input class="checkbox-input" type="checkbox" id="checkbox_input2" name="checkbox_input2" value="checkbox todo 2"> <label for="checkbox_input2">checkbox todo 2</label></p></fieldset><div><label>ð¹ Datetime Input</label> <input class="form-input" id="datetime-input" name="datetime_input" required></div><div><label>ð¹ Select Input</label><div class="custom-select select-input-wrap"><select id="select-input" name="select_input"><option value="" selected="selected">Select one...</option><option value="ion 3D Engine">ion 3D Engine</option><option value="ThreeJS">ThreeJS</option><option value="HTML">HTML</option><option value="Javascript">Javascript</option></select></div></div><div><label>ð¹ Range Input</label> <input class="form-input" id="range-input" type="range" id="vol" name="vol" min="0" max="100" value="40"></div><div><label class="textarea-label">ð¹ TextArea Input</label> <textarea class="form-input" name="textarea_input" maxlength="500" placeholder="Type in textarea..."></textarea></div><div id="form-buttons"><input id="reset-btn" type="reset" name="reset" value="Reset"> <input id="submit-btn" type="submit" value="Submit" onclick="return false;"></div></form><style>.myForm { 617 display: flex; 618 flex-direction: column; 619 justify-content: space-evenly; 620 font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; 621 font-size: 16px; 622 width: 450px; 623 height: 820px; 624 padding: 10px; 625 border: 2px solid #4b88cf; 626 color: #294b71; 627 border-radius: 15px; 628 background-color: #fdfdfd28; 629 } 630 631 .myForm * { 632 box-sizing: border-box; 633 } 634 635 .myForm > h3 { 636 color: #4b88cf; 637 margin-top: 4px; 638 639 } 640 641 .myForm > div { 642 display: flex; 643 flex-direction: row; 644 justify-content: flex-start; 645 margin-bottom: 18px; 646 } 647 .myForm > fieldset { 648 margin-bottom: 18px; 649 margin-left: 20px; 650 margin-right: 20px; 651 padding: 15px; 652 } 653 .myForm > fieldset > p { 654 margin-top: 4px; 655 margin-bottom: 4px; 656 margin-left: 40px; 657 } 658 659 .form-input { 660 width: 240px; 661 margin-left: auto; 662 } 663 .myForm input, textarea, select { 664 padding: 7px; 665 border-radius: 7px; 666 border: 1px solid #4b88cf; 667 box-shadow: none; 668 color: #294b71; 669 font-size: 14px; 670 } 671 .myForm > div > label, legend { 672 background-color: #c3eefe; 673 padding: 5px 13px; 674 padding-left: 9px; 675 border-radius: 5px; 676 } 677 678 .textarea-label { 679 max-height: 38px; 680 } 681 682 #select-input { 683 margin-left: auto; 684 width: 240px; 685 padding: 7px; 686 border-radius: 7px; 687 } 688 .select-input-wrap{ 689 margin-left: auto; 690 width: 240px; 691 padding: 7px; 692 border-radius: 7px; 693 border: 1px solid #4b88cf; 694 } 695 696 .myForm textarea { 697 height: 100px; 698 } 699 700 #form-buttons { 701 display: flex; 702 flex-direction: row; 703 justify-content: space-evenly; 704 margin-top: 20px; 705 } 706 707 #reset-btn { 708 padding: 14px 52px; 709 border: none; 710 color: #353535; 711 text-decoration: none; 712 font-weight: bold; 713 border-radius: 5px; 714 transition: all 0.4s; 715 background-color: #ffc670; 716 } 717 #reset-btn:hover { 718 background: #ffe3b9; 719 cursor: pointer; 720 } 721 722 #submit-btn { 723 padding: 14px 52px; 724 border: none; 725 color: #353535; 726 text-decoration: none; 727 font-weight: bold; 728 border-radius: 5px; 729 transition: all 0.4s; 730 background-color: #aaffc9; 731 } 732 #submit-btn:hover { 733 background: #cfffd8; 734 cursor: pointer; 735 } 736 737 738 739 /* The container must be positioned relative: */ 740 .custom-select { 741 position: relative; 742 font-size: 14px; 743 background-color: #fff; 744 padding: 0px 5px !important; 745 746 } 747 .custom-select select { 748 display: none; /*hide original SELECT element: */ 749 } 750 .select-selected { 751 padding: 9px 2px; 752 } 753 754 /* Style the arrow inside the select element: */ 755 .select-selected:after { 756 position: absolute; 757 content: ""; 758 top: 14px; 759 right: 10px; 760 width: 0; 761 height: 0; 762 border: 6px solid transparent; 763 border-color: #4b88cf transparent transparent transparent; 764 } 765 766 /* Point the arrow upwards when the select box is open (active): */ 767 .select-selected.select-arrow-active:after { 768 border-color: transparent transparent #4b88cf transparent; 769 top: 7px; 770 } 771 772 /* style the items (options), including the selected item: */ 773 .select-items div { 774 background-color: #fff; 775 padding: 9px 16px; 776 border: 1px solid transparent; 777 border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent; 778 cursor: pointer; 779 transition: all 0.3s; 780 } 781 782 /* Style items (options): */ 783 .select-items { 784 position: absolute; 785 border: 1px solid #4b88cf; 786 border-bottom-left-radius: 5px; 787 border-bottom-right-radius: 5px; 788 top: 100%; 789 left: 0; 790 right: 0; 791 z-index: 99; 792 } 793 794 /* Hide the items when the select box is closed: */ 795 .select-hide { 796 display: none; 797 } 798 799 .select-items div:hover, .same-as-selected { 800 background-color: #a7d0ff; 801 }</style>
801<script>const myForm = document.getElementsByClassName('myForm')[0]; 802 803 myForm.addEventListener('mouseup', (event) => { 804 Array.from(document.getElementsByClassName('form-input')).forEach((item) => item.style.backgroundColor = '#fff'); 805 }); 806 807 Array.from(document.getElementsByClassName('form-input')).forEach((elm) => { 808 elm.addEventListener('click', (event) => { 809 event.target.style.backgroundColor = '#d4ffe4'; 810 }); 811 }); 812 813 814 /* datetime-input */ 815 $(function() { 816 $('#datetime-input').daterangepicker({ 817 timePicker: true, 818 startDate: moment().startOf('hour'), 819 endDate: moment().startOf('hour').add(32, 'hour'), 820 singleDatePicker: true, 821 locale: { 822 format: 'M/DD hh:mm A' 823 } 824 }); 825 $('.daterangepicker').css('display', 'none'); 826 827 const dateTimePicker = document.getElementsByClassName('daterangepicker')[0]; 828 myForm.appendChild(dateTimePicker); 829 }); 830 831 832 833 /* HTML Select element */ 834 var x, i, j, l, ll, selElmnt, a, b, c; 835 /* Look for any elements with the class "custom-select": */ 836 x = document.getElementsByClassName("custom-select"); 837 l = x.length; 838 for (i = 0; i < l; i++) { 839 selElmnt = x[i].getElementsByTagName("select")[0]; 840 ll = selElmnt.length; 841 /* For each element, create a new DIV that will act as the selected item: */ 842 a = document.createElement("DIV"); 843 a.setAttribute("class", "select-selected"); 844 a.innerHTML = selElmnt.options[selElmnt.selectedIndex].innerHTML; 845 x[i].appendChild(a); 846 /* For each element, create a new DIV that will contain the option list: */ 847 b = document.createElement("DIV"); 848 b.setAttribute("class", "select-items select-hide"); 849 for (j = 1; j < ll; j++) { 850 /* For each option in the original select element, 851 create a new DIV that will act as an option item: */ 852 c = document.createElement("DIV"); 853 c.innerHTML = selElmnt.options[j].innerHTML; 854 c.addEventListener("click", function(e) { 855 /* When an item is clicked, update the original select box, 856 and the selected item: */ 857 var y, i, k, s, h, sl, yl; 858 s = this.parentNode.parentNode.getElementsByTagName("select")[0]; 859 sl = s.length; 860 h = this.parentNode.previousSibling; 861 for (i = 0; i < sl; i++) { 862 if (s.options[i].innerHTML == this.innerHTML) { 863 s.selectedIndex = i; 864 h.innerHTML = this.innerHTML; 865 y = this.parentNode.getElementsByClassName("same-as-selected"); 866 yl = y.length; 867 for (k = 0; k < yl; k++) { 868 y[k].removeAttribute("class"); 869 } 870 this.setAttribute("class", "same-as-selected"); 871 break; 872 } 873 } 874 h.click(); 875 }); 876 b.appendChild(c); 877 } 878 x[i].appendChild(b); 879 880 a.addEventListener("click", function(e) { 881 /* When the select box is clicked, close any other select boxes, 882 and open/close the current select box: */ 883 e.stopPropagation(); 884 closeAllSelect(this); 885 this.nextSibling.classList.toggle("select-hide"); 886 this.classList.toggle("select-arrow-active"); 887 }); 888 } 889 890 function closeAllSelect(elmnt) { 891 /* A function that will close all select boxes in the document, 892 except the current select box: */ 893 var x, y, i, xl, yl, arrNo = []; 894 x = document.getElementsByClassName("select-items"); 895 y = document.getElementsByClassName("select-selected"); 896 xl = x.length; 897 yl = y.length; 898 for (i = 0; i < yl; i++) { 899 if (elmnt == y[i]) { 900 arrNo.push(i) 901 } else { 902 y[i].classList.remove("select-arrow-active"); 903 } 904 } 905 for (i = 0; i < xl; i++) { 906 if (arrNo.indexOf(i)) { 907 x[i].classList.add("select-hide"); 908 } 909 } 910 } 911 912 /* If the user clicks anywhere outside the select box, 913 then close all select boxes: */ 914 myForm.addEventListener("click", closeAllSelect);</script>
914<div id="colorPickerContainer" style="visibility: hidden; user-select: none; position: fixed;"><div id="color-tools"><label for="color-input" id="color-label" style="background-color: red"></label> <input type="checkbox" id="color-input" checked="checked"><div id="clear">Clear</div></div><div id="color-picker"><canvas id="color-block" height="150" width="150"></canvas></div></div><div id="colorStripContainer" style="visibility: hidden; user-select: none; position: fixed;"><canvas id="color-strip" height="150" width="30"></canvas></div><div id="brushPropsContainer" style="visibility: hidden; user-select: none; position: fixed;"><p id="brushSizeResult">Brush Size: 12</p><input type="range" id="brushSizeInput" name="volume" min="0" max="100" value="12"/><p id="brushOpacityResult">Opacity: 80%</p><input type="range" id="brushOpacityInput" name="volume" min="0" max="100" value="80"/></div><style>#colorPickerContainer { 915 height: 230px; 916 width: 240px; 917 display: flex; 918 flex-direction: row; 919 justify-content: center; 920 align-content: center; 921 align-items: center; 922 /* background-color: #4b88cf; */ 923 924 /* border: 2px solid #8cd6fd; 925 border-radius: 10px; */ 926 /* border: 2px solid #8cd6fd; */ 927 } 928 929 #color-input { 930 display: none; 931 } 932 #color-label { 933 /* margin-left: 15px; */ 934 /* position: absolute; */ 935 height: 40px; 936 width: 40px; 937 border-radius: 50%; 938 border: 2px solid #efefef; 939 margin: 5px; 940 941 } 942 #color-input:checked ~ #color-picker { 943 opacity: 1; 944 } 945 #color-picker { 946 /* position: absolute; */ 947 /* display: flex; 948 flex-direction: row; 949 justify-content: center; */ 950 951 /* left: 70px; */ 952 953 /* background-color: white; */ 954 955 /* height: 150px; 956 width: 185px; */ 957 border: 2px solid #cccccc; 958 /* opacity: 0; */ 959 /* padding: 5px; */ 960 961 border-radius: 6px !important; 962 max-height: 154px !important; 963 } 964 965 #color-tools { 966 display: flex; 967 flex-direction: column; 968 justify-content: center; 969 align-content: center; 970 align-items: center; 971 } 972 973 #color-block { 974 /* border-radius: 8px !important; */ 975 /* border: 2px solid #9cd9ed; */ 976 977 /* -webkit-box-shadow: inset 0px 0px 14px #8cd6fd; 978 -moz-box-shadow: inset 0px 0px 14px #8cd6fd; 979 box-shadow: inset 0px 0px 12px #8cd6fd, 0 0 14px #8cd6fd; */ 980 981 /* max-height: 140px !important; */ 982 height: 100%; 983 width: 100%; 984 } 985 986 #clear{ 987 padding: 5px; 988 background: #75797bcb; 989 color: #e8e8e8; 990 border-radius: 5px; 991 transition: all 0.2s; 992 border: 2px solid #e8e8e8; 993 /* margin-bottom: 25px !important; */ 994 margin: 8px; 995 font-size: 14px; 996 /* -webkit-box-shadow: inset 0px 0px 10px #8cd6fd; 997 -moz-box-shadow: inset 0px 0px 10px #8cd6fd; 998 box-shadow: inset 0px 0px 10px #8cd6fd, 0 0 10px #8cd6fd; */ 999 /* box-shadow: inset 0px 1px 0px rgba(255 , 255 , 255 , 0.5), 0px 2px 2px rgba(0 , 0 , 0 , 0.5); */ 1000 } 1001 #clear:hover{ 1002 background: #4dafd0; 1003 cursor: pointer; 1004 } 1005 1006 1007 #colorStripContainer { 1008 height: 150px; 1009 width: 30px; 1010 background-color: #4b88cf; 1011 display: block; 1012 border-radius: 15px !important; 1013 1014 border: 2px solid #8cd6fd; 1015 1016 1017 } 1018 1019 #color-strip { 1020 /* border-radius: 15px !important; */ 1021 /* margin-left: 10px; */ 1022 display: block; 1023 height: 150px; 1024 width: 30px; 1025 background-color: #4b88cf; 1026 } 1027 1028 #colorOpacityContainer { 1029 /* height: 30px; */ 1030 /* width: 150px; */ 1031 1032 background-color: #4b88cf; 1033 display: block; 1034 border-radius: 15px !important; 1035 position: absolute; 1036 bottom: 10px; 1037 1038 } 1039 1040 1041 1042 1043 #brushPropsContainer { 1044 display: flex; 1045 flex-direction: column; 1046 justify-content: center; 1047 align-items: center; 1048 align-content: start; 1049 width: 220px; 1050 height: 130px; 1051 1052 1053 font-size: 13px !important; 1054 color: #ffffff; 1055 font-style: italic; 1056 1057 background-color: #30363a41; 1058 1059 padding: 10px; 1060 border-radius: 10px; 1061 border: 2px solid #d8efff; 1062 1063 } 1064 1065 1066 #brushPropsContainer p { 1067 /* margin-top: 20px; */ 1068 margin-bottom: 4px; 1069 } 1070 1071 #brushSizeResult { 1072 margin-top: 0px; 1073 } 1074 1075 1076 1077 1078 1079 #brushSizeInput { 1080 height: 10px; 1081 width: 150px; 1082 display: block; 1083 1084 -webkit-appearance: none; 1085 appearance: none; 1086 background: transparent; 1087 cursor: pointer; 1088 margin-top: 5px !important; 1089 } 1090 1091 #brushOpacityInput { 1092 height: 10px; 1093 width: 150px; 1094 display: block; 1095 1096 -webkit-appearance: none; 1097 appearance: none; 1098 background: transparent; 1099 cursor: pointer; 1100 1101 margin-top: 5px !important; 1102 } 1103 1104 1105 1106 /********** Range Input Styles **********/ 1107 /* Removes default focus */ 1108 #brushSizeInput:focus { 1109 outline: none !important; 1110 } 1111 1112 /***** Chrome, Safari, Opera and Edge Chromium styles *****/ 1113 /* slider track */ 1114 #brushSizeInput::-webkit-slider-runnable-track { 1115 background-color: #f5f5f5; 1116 border-radius: 0.5rem; 1117 /* height: 0.5rem; */ 1118 height: 5px; 1119 } 1120 1121 /* slider thumb */ 1122 #brushSizeInput::-webkit-slider-thumb { 1123 -webkit-appearance: none; /* Override default look */ 1124 appearance: none; 1125 margin-top: -7px; /* Centers thumb on the track */ 1126 1127 border-radius: 4px !important; 1128 /* border: 1px solid #a1a1a1 !important; */ 1129 border: none; 1130
1131 /*custom styles*/ 1132 background-color: #a154c0; 1133 height: 20px; 1134 width: 7px; 1135 } 1136 1137 #brushSizeInput:focus::-webkit-slider-thumb { 1138 /* border: 1px solid #053a5f; */ 1139 outline: 3px solid #053a5f; 1140 outline-offset: 0.125rem; 1141 1142 /* border-radius: 4px !important; */ 1143 } 1144 1145 /******** Firefox styles ********/ 1146 /* slider track */ 1147 #brushSizeInput::-moz-range-track { 1148 background-color: #f5f5f5 !important; 1149 border-radius: 0.5rem; 1150 /* height: 0.5rem; */ 1151 } 1152 1153 /* slider thumb */ 1154 #brushSizeInput::-moz-range-thumb { 1155 /*border: none; Removes extra border that FF applies*/ 1156 /*border-radius: 0; Removes default border-radius that FF applies*/ 1157 /* border: 2px solid red !important; 1158 border-radius: 4px !important; */ 1159 1160 /*custom styles*/ 1161 /* background-color: #5cd5eb; 1162 height: 20px; 1163 width: 8px; */ 1164 1165 1166 margin-top: -7px; /* Centers thumb on the track */ 1167 1168 border-radius: 4px !important; 1169 /* border: 1px solid #a1a1a1 !important; */ 1170 border: none; 1171 1172 /*custom styles*/ 1173 background-color: #cc8de5; 1174 height: 20px; 1175 width: 7px; 1176 } 1177 1178 #brushSizeInput:focus::-moz-range-thumb { 1179 /* border: 1px solid #053a5f; 1180 outline: 3px solid #053a5f; 1181 outline-offset: 0.125rem; */ 1182 } 1183 1184 1185 1186 1187 1188 1189 1190 1191 /********** Range Input Styles **********/ 1192 /* Removes default focus */ 1193 #brushOpacityInput:focus { 1194 outline: none !important; 1195 } 1196 1197 /***** Chrome, Safari, Opera and Edge Chromium styles *****/ 1198 /* slider track */ 1199 #brushOpacityInput::-webkit-slider-runnable-track { 1200 background-color: #f5f5f5; 1201 border-radius: 0.5rem; 1202 /* height: 0.5rem; */ 1203 height: 5px; 1204 } 1205 1206 /* slider thumb */ 1207 #brushOpacityInput::-webkit-slider-thumb { 1208 -webkit-appearance: none; /* Override default look */ 1209 appearance: none; 1210 margin-top: -7px; /* Centers thumb on the track */ 1211 1212 border-radius: 4px !important; 1213 /* border: 1px solid #a1a1a1 !important; */ 1214 border: none; 1215 1216 /*custom styles*/ 1217 background-color: #a154c0; 1218 height: 20px; 1219 width: 7px; 1220 } 1221 1222 #brushOpacityInput:focus::-webkit-slider-thumb { 1223 /* border: 1px solid #053a5f; */ 1224 outline: 3px solid #053a5f; 1225 outline-offset: 0.125rem; 1226 1227 /* border-radius: 4px !important; */ 1228 } 1229 1230 /******** Firefox styles ********/ 1231 /* slider track */ 1232 #brushOpacityInput::-moz-range-track { 1233 background-color: #f5f5f5 !important; 1234 border-radius: 0.5rem; 1235 /* height: 0.5rem; */ 1236 } 1237 1238 /* slider thumb */ 1239 #brushOpacityInput::-moz-range-thumb { 1240 /*border: none; Removes extra border that FF applies*/ 1241 /*border-radius: 0; Removes default border-radius that FF applies*/ 1242 /* border: 2px solid red !important; 1243 border-radius: 4px !important; */ 1244 1245 /*custom styles*/ 1246 /* background-color: #5cd5eb; 1247 height: 20px; 1248 width: 8px; */ 1249 1250 1251 margin-top: -7px; /* Centers thumb on the track */ 1252 1253 border-radius: 4px !important; 1254 /* border: 1px solid #a1a1a1 !important; */ 1255 border: none; 1256 1257 /*custom styles*/ 1258 background-color: #cc8de5; 1259 height: 20px; 1260 width: 7px; 1261 } 1262 1263 #brushOpacityInput:focus::-moz-range-thumb { 1264 /* border: 1px solid #053a5f; 1265 outline: 3px solid #053a5f; 1266 outline-offset: 0.125rem; */ 1267 }</style></body></html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.