PageSourceSearch

https://bazaarvr.com/

html bazaarvr.com collected 2026-09-28 06:13:15 UTC 52,587 bytes, 1,267 lines download raw bytes

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.