-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
74 lines (73 loc) · 5.83 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<!DOCTYPE html>
<html>
<head>
<title>Fractal SVG Generator</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500&display=swap" rel="stylesheet">
<!-- Load CSS styles and JS functionality -->
<link rel="stylesheet" href="style.css">
<script type="module" src="./page-function.js"></script>
</head>
<body>
<div class="nav" onclick="location.href='https\:\/\/geowen.dev/';">George Owen</div>
<div class="tool-button" id="github" onclick="location.href='https:\/\/github.com/gowin20/fractal-svg'">
<svg style="display:block; margin:auto;" version="1.1" xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24" ml-update="aware">
<title>Github</title>
<path d="M12 0.75c-6.213 0-11.25 5.037-11.25 11.25s5.037 11.25 11.25 11.25 11.25-5.037 11.25-11.25-5.037-11.25-11.25-11.25zM21.75 12c0 0.001 0 0.002 0 0.004 0 4.454-2.986 8.21-7.066 9.375l-0.069 0.017v-3.648q0-1.298-0.696-1.9c0.516-0.052 0.983-0.137 1.435-0.255l-0.064 0.014c0.479-0.134 0.897-0.312 1.284-0.536l-0.026 0.014c0.425-0.234 0.784-0.531 1.080-0.884l0.005-0.006q0.435-0.529 0.709-1.405t0.274-2.014q0-1.619-1.057-2.757 0.495-1.218-0.107-2.73-0.375-0.121-1.084 0.147c-0.475 0.176-0.88 0.374-1.263 0.607l0.032-0.018-0.509 0.321c-0.77-0.221-1.655-0.348-2.57-0.348s-1.799 0.127-2.638 0.364l0.068-0.016c-0.59-1.127-2.086-1.199-2.837-1.057-0.5 0.797-0.44 2.054-0.094 2.73q-1.057 1.138-1.057 2.757 0 1.138 0.274 2.007t0.703 1.405c0.296 0.363 0.653 0.663 1.059 0.887l0.019 0.009c0.361 0.21 0.779 0.389 1.219 0.513l0.038 0.009c0.389 0.105 0.856 0.189 1.333 0.238l0.039 0.003q-0.535 0.482-0.656 1.379c-0.173 0.084-0.374 0.153-0.585 0.198l-0.017 0.003c-0.214 0.043-0.46 0.067-0.711 0.067-0.018 0-0.036-0-0.054-0l0.003 0q-0.442 0-0.877-0.288t-0.743-0.837c-0.166-0.281-0.383-0.513-0.642-0.691l-0.007-0.005q-0.395-0.268-0.662-0.321l-0.121-0.027c-0.020-0.005-0.044-0.008-0.068-0.008-0.12 0-0.224 0.068-0.275 0.167l-0.001 0.002-0.016 0.031c-0.022 0.041-0.034 0.090-0.034 0.142 0 0.125 0.073 0.232 0.179 0.281l0.002 0.001q0.294 0.134 0.582 0.509c0.159 0.198 0.3 0.422 0.413 0.662l0.009 0.020 0.134 0.308c0.113 0.336 0.318 0.617 0.585 0.82l0.004 0.003c0.25 0.196 0.553 0.337 0.884 0.399l0.013 0.002c0.276 0.054 0.597 0.088 0.925 0.094l0.005 0c0.037 0.001 0.081 0.002 0.125 0.002 0.218 0 0.432-0.018 0.64-0.052l-0.023 0.003 0.308-0.053q0 0.508 0.007 1.191c0.003 0.276 0.005 1.027 0.006 1.582-4.213-1.141-7.262-4.93-7.262-9.431 0-4.014 2.424-7.462 5.889-8.959l0.063-0.024c1.121-0.487 2.426-0.77 3.798-0.77 5.383 0 9.747 4.364 9.747 9.747 0 0.003 0 0.006 0 0.009v-0z"/>
</svg>
</div>
<div class="tool-button" id="hidden-window">
<svg fill="#000" style="display:block; margin:auto;" xmlns="http://www.w3.org/2000/svg" width="25px" height="25px" viewBox="0 0 512 512">
<title>Show controls</title>
<path d="M472,48H40.335a24.027,24.027,0,0,0-24,24V456a24.027,24.027,0,0,0,24,24H472a24.027,24.027,0,0,0,24-24V72A24.027,24.027,0,0,0,472,48Zm-8,32v71.981L48.335,151.49V80ZM48.335,448V183.49L464,183.981V448Z" class="ci-primary"/>
</svg>
</div>
<div class="tool-button" id="download-svg">
<svg fill="#000" style="display:block; margin:auto;" xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 20 20">
<title>Download SVG</title>
<path d="M17 12v5H3v-5H1v5a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-5z"/>
<path d="M10 15l5-6h-4V1H9v8H5l5 6z"/>
</svg>
</div>
<div id="control">
<div id="control-header">
<div class="drag-icon">
<svg xmlns="http://www.w3.org/2000/svg" fill="#444" stroke="#444" class="svg-icon" style="width: 1em; height: 1em;vertical-align: middle;overflow: hidden;" viewBox="0 0 1025 1024" version="1.1"><path d="M585.074876 232.47085h-73.618434 237.427243L511.120686 0.743459 275.188355 232.47085h163.800816v216.122744H218.149858v143.479602h220.839313v216.906175h146.085705V592.073196h219.120563V448.593594h-219.120563V232.47085z m-73.906225 790.04115l219.983936-213.532629H292.91146l218.257191 213.524635zM0.740049 519.478017l217.409809 216.07478V305.113993L0.740049 519.478017z m803.45539-214.364024V735.544803l219.120564-216.07478-219.120564-214.364024z"/>
<title>Drag me</title>
</svg>
</div>
<div id="hide-icon">
<svg xmlns="http://www.w3.org/2000/svg" stroke="#444" class="svg-icon" style="width: 1em; height: 1em;vertical-align: middle;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1"><path d="M960 544H64a32 32 0 1 1 0-64h896a32 32 0 1 1 0 64"/>
<title>Hide controls</title>
</svg>
</div>
</div>
<div class="contents">
<div class="dim">
<label for="pattern">Pattern:</label>
<select name="pattern" id="pattern" style="padding:5px;">
</select>
</div>
<div class="flex">
<div class="dim">
<label for="color">Outline:</label>
<input type="color" id="outline" value="#000000">
</div>
<div class="dim" style="margin-left:10px;">
<label for="color">Fill:</label>
<input type="color" id="fill" value="#ffffff">
</div>
</div>
<div class="dim">
<label for="depth">Depth:</label>
<input type="range" id="depth" min="1" max="6" step="1" value="1">
<span id="depthNumber">1</span>
</div>
<br>
<button class="dim" id="generate">Generate!</button>
</div>
</div>
<div id="result"></div>
</body>
</html>