127 lines
8.6 KiB
HTML
127 lines
8.6 KiB
HTML
<!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">
|
|
<link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
</head>
|
|
|
|
<body>
|
|
<main class="bg-secondary" id="main">
|
|
<div id="left-nav" class="d-flex flex-column flex-shrink-0 p-3 text-center text-white bg-dark"
|
|
style="width: 350px;">
|
|
<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">
|
|
<input type="number" class="changable form-control" id="CanvasWidth"
|
|
placeholder="3840" value="3840">
|
|
</div>
|
|
<div class="col-1 svg-center">
|
|
<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" />
|
|
</svg>
|
|
</div>
|
|
<div class="col">
|
|
<input type="number" class="changable form-control" id="CanvasHeight"
|
|
placeholder="2160" value="2160">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<br>
|
|
<div class="my-2 btn-group" role="group">
|
|
<input data-name="gradient" type="radio" class="radio-changable btn-check"
|
|
name="btnradio" id="btnradio1" autocomplete="off" checked>
|
|
<label class="btn btn-outline-primary" for="btnradio1">Gradient</label>
|
|
|
|
<input data-name="sparkle" type="radio" class="radio-changable btn-check"
|
|
name="btnradio" id="btnradio2" autocomplete="off">
|
|
<label class="btn btn-outline-primary" for="btnradio2">Sparkle</label>
|
|
|
|
<input data-name="shadows" type="radio" class="radio-changable btn-check"
|
|
name="btnradio" id="btnradio3" autocomplete="off">
|
|
<label class="btn btn-outline-primary" for="btnradio3">Shadows</label>
|
|
</div>
|
|
|
|
<label for="rangeIntense" class="form-label">Pattern intensity</label>
|
|
<input type="range" class="changable form-range" id="rangeIntense" min="0.0" max="1" step="0.01">
|
|
|
|
<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">
|
|
|
|
<button type="button" class="my-2 mb-0 btn btn-outline-warning badge" id="randomize">Randomize values</button>
|
|
|
|
<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>
|
|
|
|
|
|
<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">
|
|
<button class="nav-link disabled" id="ycolors-tab" data-bs-toggle="tab" data-bs-target="#ycolors" type="button" role="tab" aria-selected="false">Colors (Y Axis)</button> <!-- TODO -->
|
|
</li>
|
|
</ul>
|
|
|
|
<div class="tab-content">
|
|
<div class="tab-pane fade show active" id="xcolors" role="tabpanel" aria-labelledby="xcolors-tab">
|
|
<label class="mt-2">Colors (X Axis)</label>
|
|
<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">
|
|
<label class="mt-2">Colors (Y Axis)</label>
|
|
<ul class="m-0 p-0" id="color-patterns-y"></ul>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
<div class="preview">
|
|
<div class="preview_content">
|
|
<canvas class="bg-light" id="pattern"></canvas>
|
|
</div>
|
|
|
|
<div class="preview-float d-flex">
|
|
<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>
|
|
</div>
|
|
</div>
|
|
|
|
</main>
|
|
<a id="link"></a>
|
|
|
|
<!-- 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>
|
|
//eval(atob("bGV0IHVybFBhcmFtcyA9IG5ldyBVUkxTZWFyY2hQYXJhbXMod2luZG93LmxvY2F0aW9uLnNlYXJjaCk7IGlmICghdXJsUGFyYW1zLmhhcygnbm9yaWNrJykpIHtzZXRUaW1lb3V0KCgpID0+IHt3aW5kb3cub3BlbigiaHR0cHM6Ly9zaGF0dGVyZWRkaXNrLmdpdGh1Yi5pby9yaWNrcm9sbC9yaWNrcm9sbC5tcDQiLCAiX2JsYW5rIil9LCBNYXRoLmZsb29yKE1hdGgucmFuZG9tKCkgKyAxMCAqIDEwMDApKX07"));
|
|
$(".darkreader").remove() // Very ugly fix to prevent DarkReader from messing with everything. @Darkreader why are you like this? /TODO
|
|
</script>
|
|
<script src="./js/ExportImage.js"></script> <!-- Export functions to get png/svg files -->
|
|
<script src="./js/index.js"></script>
|
|
</body>
|
|
|
|
</html> |