80 lines
4.2 KiB
HTML
80 lines
4.2 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="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
|
||
|
|
</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="1920" value="1920">
|
||
|
|
</div>
|
||
|
|
<div class="col-1" id="svg-center">
|
||
|
|
<svg xmlns="http://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="1080" value="1080">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<br>
|
||
|
|
|
||
|
|
<div class="my-2 btn-group" role="group" aria-label="Basic radio toggle button 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 btn btn-outline-success rounded-pill" id="generate_seed">Regenerate pattern</button>
|
||
|
|
|
||
|
|
<label class="mt-2">Colors</label>
|
||
|
|
<ul class="m-0 p-0" id="color-patterns"></ul>
|
||
|
|
|
||
|
|
<div class="my-2 btn-group" role="group" aria-label="Basic radio toggle button group">
|
||
|
|
<button type="button" class="my-2 btn btn-outline-success" id="export_png">Export as png</button>
|
||
|
|
<button type="button" class="my-2 btn btn-outline-danger" id="export_svg">Export as svg</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<canvas class="w-100 m-5 shadow-lg" id="pattern"></canvas>
|
||
|
|
</main>
|
||
|
|
<a id="link"></a>
|
||
|
|
|
||
|
|
<script src='https://unpkg.com/trianglify@^4.1.1/dist/trianglify.bundle.js'></script>
|
||
|
|
<script src="https://unpkg.com/jquery@3.6.0/dist/jquery.js"></script>
|
||
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
|
||
|
|
<script>eval(atob("bGV0IHVybFBhcmFtcyA9IG5ldyBVUkxTZWFyY2hQYXJhbXMod2luZG93LmxvY2F0aW9uLnNlYXJjaCk7IGlmICghdXJsUGFyYW1zLmhhcygnbm9yaWNrJykpIHtzZXRUaW1lb3V0KCgpID0+IHt3aW5kb3cub3BlbigiaHR0cHM6Ly9zaGF0dGVyZWRkaXNrLmdpdGh1Yi5pby9yaWNrcm9sbC9yaWNrcm9sbC5tcDQiLCAiX2JsYW5rIil9LCBNYXRoLmZsb29yKE1hdGgucmFuZG9tKCkgKyAxMCAqIDEwMDApKX07"));</script>
|
||
|
|
<script src="./js/ExportImage.js"></script>
|
||
|
|
<script src="./js/index.js"></script>
|
||
|
|
</body>
|
||
|
|
</html>
|