diff options
| author | Charles Cabergs <me@cacharle.xyz> | 2020-11-09 17:39:05 +0100 |
|---|---|---|
| committer | Charles Cabergs <me@cacharle.xyz> | 2020-11-09 17:39:05 +0100 |
| commit | 9d2c650d7cadf57ecef3d5a1d39f5f98e298ec64 (patch) | |
| tree | ed33badc6aa8305a5e6ea688a6a08e532c92d268 /utils/fractal_tree | |
| parent | f47491b3a89ba769760bb555ea72f1416cb0cb08 (diff) | |
| download | cacharle.xyz-9d2c650d7cadf57ecef3d5a1d39f5f98e298ec64.tar.gz cacharle.xyz-9d2c650d7cadf57ecef3d5a1d39f5f98e298ec64.tar.bz2 cacharle.xyz-9d2c650d7cadf57ecef3d5a1d39f5f98e298ec64.zip | |
Trying to DRY the html with templatestemplates
Diffstat (limited to 'utils/fractal_tree')
| -rw-r--r-- | utils/fractal_tree/index.ejs | 16 | ||||
| -rw-r--r-- | utils/fractal_tree/index.html | 43 | ||||
| -rw-r--r-- | utils/fractal_tree/style.css | 14 |
3 files changed, 30 insertions, 43 deletions
diff --git a/utils/fractal_tree/index.ejs b/utils/fractal_tree/index.ejs new file mode 100644 index 0000000..088dd83 --- /dev/null +++ b/utils/fractal_tree/index.ejs @@ -0,0 +1,16 @@ +<h1>fractal tree</h1> + +<canvas width="500" height="500" id="tree-canvas"></canvas> + +<div class="settings"> + <div class="settings-item"> + <label>depth</label> + <input id="depth" min="1" max="11" value="9" type="range"/> + </div> + <div class="settings-item"> + <label>angle</label> + <input id="angle" min="1" max="180" value="45" type="range"/> + </div> +</div> + +<script src="script.js" type="text/javascript"></script> diff --git a/utils/fractal_tree/index.html b/utils/fractal_tree/index.html deleted file mode 100644 index 5c4adf2..0000000 --- a/utils/fractal_tree/index.html +++ /dev/null @@ -1,43 +0,0 @@ -<!DOCTYPE html> - -<html> - <head> - <title>cacharle - fractal tree</title> - <link rel="stylesheet" type="text/css" href="../../style.css"/> - <meta charset="utf-8"/> - <link rel="icon" type="image/png" href="../../favicon.png" /> - <style> - .settings-item { - margin-top: 10px; - display: flex; - justify-content: flex-start; - align-items: center; - } - .settings-item label { - margin-right: 5px; - } - .settings-item input { - min-width: 200px; - } - </style> - </head> - - <body><div id="page-wrapper"> - <h1>fractal tree</h1> - - <canvas width="500" height="500" id="tree-canvas"></canvas> - - <div class="settings"> - <div class="settings-item"> - <label>depth</label> - <input id="depth" min="1" max="11" value="9" type="range"/> - </div> - <div class="settings-item"> - <label>angle</label> - <input id="angle" min="1" max="180" value="45" type="range"/> - </div> - </div> - - </div></body> - <script src="script.js" type="text/javascript"></script> -</html> diff --git a/utils/fractal_tree/style.css b/utils/fractal_tree/style.css new file mode 100644 index 0000000..788de38 --- /dev/null +++ b/utils/fractal_tree/style.css @@ -0,0 +1,14 @@ +.settings-item { + margin-top: 10px; + display: flex; + justify-content: flex-start; + align-items: center; +} + +.settings-item label { + margin-right: 5px; +} + +.settings-item input { + min-width: 200px; +} |