-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
83 lines (70 loc) · 3.5 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
75
76
77
78
79
80
81
82
83
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Endtech Logo Dyer</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/logo.css">
<link rel="icon" href="assets/endtech-logo.ico">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Bitter:ital,wght@0,700;1,300&display=swap" rel="stylesheet">
</head>
<body>
<main>
<h1>Endtech Logo Dyer</h1>
<svg id="logo" xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 649 649">
<g>
<circle class="circle" cx="324" cy="324" r="312" fill="none" stroke-width="24px"></circle>
<path class="face" d="m 78,230 v 162 l 41,24 v -24 l 141,81 v 24 l 40,23 V 358 Z"/>
<path class="medium" d="m 119,416 v -24 l 21,12 z"/>
<path class="light" d="m 99,404 20,12 21,-12 120,69 -20,12 -101,-58 v 24 L 78,416 Z"/>
<path class="medium" d="m 240,485 v 24 l 20,-12 v -24 z"/>
<path class="face" d="m 240,485 v 24 l 60,34 v 70 L 78,485 v -69 l 61,35 v -24 z"/>
<path class="light" d="m 240,509 20,-12 40,23 20,-11.84524 L 340,520 300,543 Z"/>
<path class="medium" d="m 300,520 41,-23 V 335 l -41,23 z"/>
<path class="medium" d="m 300,543 v 70 l 40,-23 v -70 z"/>
<path class="light" d="M 341,335 300,358 78,230 119,207.44745 Z"/>
<path class="dark" d="M 341,335 V 289 L 119,161 v 46.44745 z"/>
<path class="medium" d="M 341,335 V 289 L 562,161 v 46.55794 z"/>
<path class="light" d="m 341,335 40,23 222,-128 -41,-22.44206 z"/>
<path class="dark" d="m 341,335 v 69 l 40,24 v -70 z"/>
<path class="face" d="m 381,358 v 70 l 80,-47 v 186 l 61,-35 V 346 l 20,-11 v 23 l 61,-34 v -94 z"/>
<path class="dark" d="m 461,381 -40,23.49719 V 543 l 40,24 z"/>
<path class="dark" d="m 542,335 v 23 l -20,-12 z"/>
<path class="face" d="m 119,161 222,-128 80,47 -60,35 -20,-12 -101,58 20,12 81,-47 60,35 -80,46 19,12 162,-93 60,35 -222,129 z"/>
<path class="medium" d="m 341,103 v 23 l -81,47 -20,-12 z"/><path class="dark" d="m 341,103 20,12 v 22.67396 L 341,126 Z"/>
<path class="medium" d="m 361,115 v 22.67396 L 382,150 421,126 V 80 Z"/>
<path class="medium" d="m 401,161 v 23 l -61,35 -19,-12 z"/>
</g>
</svg>
<div class="color-pickers">
<label><input type="color" id="light-selector" value="#A61F8A">
<h3>Light shade</h3></label>
<label><input type="color" id="medium-selector" value="#7D1A88">
<h3>Medium shade</h3></label>
<label><input type="color" id="dark-selector" value="#511388">
<h3>Dark shade</h3></label>
<label><input type="color" id="face-selector" value="#D9D4DC">
<h3>Face color</h3></label>
<label><input type="color" id="circle-selector" value="#A79AB0">
<h3>Circle color</h3></label>
</div>
<div class="util">
<label><input type="button" id="randomizer">
<img src="assets/dice.png" alt="🎲"></label>
<label><input type="button" id="download">
<img src="assets/inbox-tray.png" alt="📥" about="a"></label>
<label><input type="button" id="reset">
<img src="assets/counterclockwise-arrows-button.png" alt="🔄"></label>
</div>
</main>
<footer>
<iframe src="https://discord.com/widget?id=476480403612631041&theme=dark" width="350" height="500"
allowtransparency="true" frameborder="0"
sandbox="allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts"
id="discord-widget"></iframe>
</footer>
<script src="https://unpkg.com/[email protected]"></script>
<script src="script.js"></script>
</body>
</html>