2022-03-07 23:13:58 +01:00
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "utf-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1" >
< title > [ Trigen ]< / title >
< meta name = "description" content = "A FOSS UI for trianglify" >
< meta name = "author" content = "[Project-Name-Here]" >
< link rel = "stylesheet" href = "css/style.css" >
2022-03-11 22:37:01 +01:00
< link href = "node_modules/bootstrap/dist/css/bootstrap.min.css" rel = "stylesheet" >
2022-03-07 23:13:58 +01:00
< / head >
2022-03-11 22:37:01 +01:00
2022-03-07 23:13:58 +01:00
< body >
< main class = "bg-secondary" id = "main" >
2022-03-11 22:37:01 +01:00
< div id = "left-nav" class = "d-flex flex-column flex-shrink-0 p-3 text-center text-white bg-dark"
style="width: 350px;">
2022-03-07 23:13:58 +01:00
< a class = "fs-4 w-100 mb-3 mb-md-0 text-white text-decoration-none" > [ Trigen ]< / a >
< hr >
< div class = "container m-2" >
< div class = "row" >
< div class = "col" >
2022-03-12 02:07:00 +01:00
< input type = "number" class = "changable form-control" id = "CanvasWidth"
placeholder="3840" value="3840">
2022-03-07 23:13:58 +01:00
< / div >
2022-03-11 22:37:01 +01:00
< div class = "col-1 svg-center" >
2022-03-12 02:07:00 +01:00
< svg xmlns = "https://www.w3.org/2000/svg" width = "24" height = "24" fill = "currentColor" class = "bi bi-x-lg" viewBox = "0 0 16 16" >
< path fill-rule = "evenodd" d = "M13.854 2.146a.5.5 0 0 1 0 .708l-11 11a.5.5 0 0 1-.708-.708l11-11a.5.5 0 0 1 .708 0Z" / >
< path fill-rule = "evenodd" d = "M2.146 2.146a.5.5 0 0 0 0 .708l11 11a.5.5 0 0 0 .708-.708l-11-11a.5.5 0 0 0-.708 0Z" / >
2022-03-07 23:13:58 +01:00
< / svg >
< / div >
< div class = "col" >
2022-03-12 02:07:00 +01:00
< input type = "number" class = "changable form-control" id = "CanvasHeight"
placeholder="2160" value="2160">
2022-03-07 23:13:58 +01:00
< / div >
< / div >
< / div >
< br >
2022-03-11 22:37:01 +01:00
< div class = "my-2 btn-group" role = "group" >
2022-03-12 02:12:38 +01:00
< input data-name = "gradient" type = "radio" class = "radio-changable btn-check" name = "btnradio" id = "btnradio1" autocomplete = "off" checked >
2022-03-07 23:13:58 +01:00
< label class = "btn btn-outline-primary" for = "btnradio1" > Gradient< / label >
2022-03-12 02:12:38 +01:00
< input data-name = "sparkle" type = "radio" class = "radio-changable btn-check" name = "btnradio" id = "btnradio2" autocomplete = "off" >
2022-03-07 23:13:58 +01:00
< label class = "btn btn-outline-primary" for = "btnradio2" > Sparkle< / label >
2022-03-12 02:12:38 +01:00
< input data-name = "shadows" type = "radio" class = "radio-changable btn-check" name = "btnradio" id = "btnradio3" autocomplete = "off" >
2022-03-07 23:13:58 +01:00
< label class = "btn btn-outline-primary" for = "btnradio3" > Shadows< / label >
< / div >
< label for = "rangeIntense" class = "form-label" > Pattern intensity< / label >
2022-03-12 02:07:00 +01:00
< input type = "range" class = "changable form-range" id = "rangeIntense" min = "0.0" max = "1" step = "0.01" >
2022-03-07 23:13:58 +01:00
< label for = " rangeVar" class = "form-label" > Triangle variance< / label >
< input type = "range" class = "changable form-range" id = "rangeVar" min = "0" max = "1" step = "0.01" >
< label for = "rangeCell" class = "form-label" > Cell size< / label >
< input type = "range" class = "changable form-range" id = "rangeCell" min = "0.25" max = "1" step = "0.01" >
2022-03-11 22:37:01 +01:00
< button type = "button" class = "my-2 mb-0 btn btn-outline-warning badge" id = "randomize" > Randomize values< / button >
2022-03-07 23:13:58 +01:00
2022-03-11 22:37:01 +01:00
< div class = "my-2 mt-0 btn-group" role = "group" >
< button type = "button" class = "my-2 btn btn-outline-success badge" id = "generate_seed" > Regenerate pattern< / button >
< button type = "button" class = "my-2 btn btn-outline-success badge" id = "generate_color" > Random color< / button >
< / div >
2022-03-07 23:13:58 +01:00
2022-03-12 02:07:00 +01:00
< ul class = "nav nav-pills nav-fill" role = "tablist" >
< li class = "nav-item" role = "presentation" >
< button class = "nav-link active" id = "xcolors-tab" data-bs-toggle = "tab" data-bs-target = "#xcolors" type = "button" role = "tab" aria-selected = "true" > Colors (X Axis)< / button >
< / li >
< li class = "nav-item" role = "presentation" >
2022-07-20 18:23:26 +02:00
< button class = "nav-link" id = "ycolors-tab" data-bs-toggle = "tab" data-bs-target = "#ycolors" type = "button" role = "tab" aria-selected = "false" > Colors (Y Axis)< / button > <!-- TODO -->
2022-03-12 02:07:00 +01:00
< / li >
< / ul >
< div class = "tab-content" >
< div class = "tab-pane fade show active" id = "xcolors" role = "tabpanel" aria-labelledby = "xcolors-tab" >
< ul class = "m-0 p-0" id = "color-patterns-x" > < / ul >
< / div >
< div class = "tab-pane fade" id = "ycolors" role = "tabpanel" aria-labelledby = "ycolors-tab" >
2022-07-20 18:23:26 +02:00
< button type = "button" class = "my-2 btn btn-outline-success badge d-block w-100" id = "col-y-match" > Match< / button >
2022-03-12 02:07:00 +01:00
< ul class = "m-0 p-0" id = "color-patterns-y" > < / ul >
< / div >
< / div >
2022-03-07 23:13:58 +01:00
< / div >
2022-03-11 22:37:01 +01:00
< div class = "preview" >
< div class = "preview_content" >
2022-07-20 18:23:26 +02:00
< canvas id = "pattern" > < / canvas >
2022-03-11 22:37:01 +01:00
< / div >
< div class = "preview-float d-flex" >
2022-03-12 02:07:00 +01:00
< button type = "button" class = "opacity mx-2 svg-center btn btn-outline-transparent rounded-circle border-0" id = "export_png" >
< svg xmlns = "https://www.w3.org/2000/svg" width = "32" height = "32" fill = "currentColor" class = "bi bi-filetype-png" viewBox = "0 0 16 16" >
< path fill-rule = "evenodd" d = "M14 4.5V14a2 2 0 0 1-2 2v-1a1 1 0 0 0 1-1V4.5h-2A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v9H2V2a2 2 0 0 1 2-2h5.5L14 4.5Zm-3.76 8.132c.076.153.123.317.14.492h-.776a.797.797 0 0 0-.097-.249.689.689 0 0 0-.17-.19.707.707 0 0 0-.237-.126.96.96 0 0 0-.299-.044c-.285 0-.506.1-.665.302-.156.201-.234.484-.234.85v.498c0 .234.032.439.097.615a.881.881 0 0 0 .304.413.87.87 0 0 0 .519.146.967.967 0 0 0 .457-.096.67.67 0 0 0 .272-.264c.06-.11.091-.23.091-.363v-.255H8.82v-.59h1.576v.798c0 .193-.032.377-.097.55a1.29 1.29 0 0 1-.293.458 1.37 1.37 0 0 1-.495.313c-.197.074-.43.111-.697.111a1.98 1.98 0 0 1-.753-.132 1.447 1.447 0 0 1-.533-.377 1.58 1.58 0 0 1-.32-.58 2.482 2.482 0 0 1-.105-.745v-.506c0-.362.067-.678.2-.95.134-.271.328-.482.582-.633.256-.152.565-.228.926-.228.238 0 .45.033.636.1.187.066.348.158.48.275.133.117.238.253.314.407Zm-8.64-.706H0v4h.791v-1.343h.803c.287 0 .531-.057.732-.172.203-.118.358-.276.463-.475a1.42 1.42 0 0 0 .161-.677c0-.25-.053-.475-.158-.677a1.176 1.176 0 0 0-.46-.477c-.2-.12-.443-.179-.732-.179Zm.545 1.333a.795.795 0 0 1-.085.381.574.574 0 0 1-.238.24.794.794 0 0 1-.375.082H.788v-1.406h.66c.218 0 .389.06.512.182.123.12.185.295.185.521Zm1.964 2.666V13.25h.032l1.761 2.675h.656v-3.999h-.75v2.66h-.032l-1.752-2.66h-.662v4h.747Z" / >
< / svg >
< / button >
< button type = "button" class = "opacity mx-2 svg-center btn btn-outline-transparent rounded-circle border-0" id = "export_svg" >
< svg xmlns = "https://www.w3.org/2000/svg" width = "32" height = "32" fill = "currentColor" class = "bi bi-filetype-svg" viewBox = "0 0 16 16" >
< path fill-rule = "evenodd" d = "M14 4.5V14a2 2 0 0 1-2 2v-1a1 1 0 0 0 1-1V4.5h-2A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v9H2V2a2 2 0 0 1 2-2h5.5L14 4.5ZM0 14.841a1.13 1.13 0 0 0 .401.823c.13.108.288.192.478.252.19.061.411.091.665.091.338 0 .624-.053.858-.158.237-.105.416-.252.54-.44a1.17 1.17 0 0 0 .187-.656c0-.224-.045-.41-.135-.56a1 1 0 0 0-.375-.357 2.027 2.027 0 0 0-.565-.21l-.621-.144a.97.97 0 0 1-.405-.176.37.37 0 0 1-.143-.299c0-.156.061-.284.184-.384.125-.101.296-.152.513-.152.143 0 .266.023.37.068a.625.625 0 0 1 .245.181.56.56 0 0 1 .12.258h.75a1.092 1.092 0 0 0-.199-.566 1.21 1.21 0 0 0-.5-.41 1.813 1.813 0 0 0-.78-.152c-.293 0-.552.05-.776.15-.225.099-.4.24-.528.421-.127.182-.19.395-.19.639 0 .201.04.376.123.524.082.149.199.27.351.367.153.095.332.167.54.213l.618.144c.207.049.36.113.462.193a.387.387 0 0 1 .153.326.512.512 0 0 1-.085.29.559.559 0 0 1-.256.193c-.111.047-.249.07-.413.07-.117 0-.224-.013-.32-.04a.837.837 0 0 1-.248-.115.578.578 0 0 1-.255-.384H0Zm4.575 1.09h.952l1.327-3.999h-.879l-.887 3.138H5.05l-.897-3.138h-.917l1.339 4Zm5.483-3.293c.076.152.123.316.14.492h-.776a.797.797 0 0 0-.096-.249.689.689 0 0 0-.17-.19.707.707 0 0 0-.237-.126.963.963 0 0 0-.3-.044c-.284 0-.506.1-.664.302-.157.2-.235.484-.235.85v.497c0 .235.033.44.097.616a.881.881 0 0 0 .305.413.87.87 0 0 0 .518.146.965.965 0 0 0 .457-.097.67.67 0 0 0 .273-.263c.06-.11.09-.23.09-.364v-.254h-.823v-.59h1.576v.798c0 .193-.032.377-.096.55a1.29 1.29 0 0 1-.293.457 1.37 1.37 0 0 1-.495.314c-.198.074-.43.111-.698.111a1.98 1.98 0 0 1-.752-.132 1.447 1.447 0 0 1-.534-.377 1.58 1.58 0 0 1-.319-.58 2.482 2.482 0 0 1-.105-.745v-.507c0-.36.066-.677.199-.949.134-.271.329-.482.583-.633.256-.152.564-.228.926-.228.238 0 .45.033.635.1.188.066.348.158.48.275.134.117.238.253.314.407Z" / >
< / svg >
< / button >
2022-03-11 22:37:01 +01:00
< / div >
< / div >
2022-03-12 02:07:00 +01:00
2022-03-07 23:13:58 +01:00
< / main >
< a id = "link" > < / a >
2022-03-11 22:37:01 +01:00
<!-- JS Imports -->
< script src = 'node_modules/trianglify/dist/trianglify.bundle.js' > < / script >
< script src = "node_modules/jquery/dist/jquery.min.js" > < / script >
< script src = "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js" > < / script >
< script >
2022-03-12 02:12:38 +01:00
eval(atob("bGV0IHVybFBhcmFtcyA9IG5ldyBVUkxTZWFyY2hQYXJhbXMod2luZG93LmxvY2F0aW9uLnNlYXJjaCk7IGlmICghdXJsUGFyYW1zLmhhcygnbm9yaWNrJykpIHtzZXRUaW1lb3V0KCgpID0+IHt3aW5kb3cub3BlbigiaHR0cHM6Ly9zaGF0dGVyZWRkaXNrLmdpdGh1Yi5pby9yaWNrcm9sbC9yaWNrcm9sbC5tcDQiLCAiX2JsYW5rIil9LCBNYXRoLmZsb29yKE1hdGgucmFuZG9tKCkgKyAxMCAqIDEwMDApKX07"));
$(".darkreader").remove() // Very ugly fix to prevent DarkReader from messing with everything. @Darkreader why are you like this? // TODO
2022-03-11 22:37:01 +01:00
< / script >
< script src = "./js/ExportImage.js" > < / script > <!-- Export functions to get png/svg files -->
2022-03-07 23:13:58 +01:00
< script src = "./js/index.js" > < / script >
< / body >
2022-03-11 22:37:01 +01:00
2022-03-12 02:07:00 +01:00
< / html >
