-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
102 lines (97 loc) · 4.86 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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Untitled Sans font</title>
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<div id="controller">
<div class="edit">
<p class="l-text"></p>
<div class="size-wrapper">
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_7_54)">
<rect width="28" height="28" fill="" />
<path
d="M14.352 28H17.616L10.728 10.864H7.152L0.264 28H3.384L5.016 23.8H12.744L14.352 28ZM8.88 13.936H8.952L11.784 21.328H6L8.88 13.936Z"
fill="var(--color)" />
<path
d="M26.372 28H28.276L24.258 18.004H22.172L18.154 28H19.974L20.926 25.55H25.434L26.372 28ZM23.18 19.796H23.222L24.874 24.108H21.5L23.18 19.796Z"
fill="var(--color)" />
</g>
<defs>
<clipPath id="clip0_7_54">
<rect width="28" height="28" fill="" />
</clipPath>
</defs>
</svg>
<input type="range" class="slider" id="font-size" step="0.1" value="226" min="20" max="226">
<p class="sm-text">67px</p>
</div>
<div class="size-wrapper">
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_7_60)">
<rect width="28" height="28" fill="" />
<path
d="M19.352 28H22.616L15.728 10.864H12.152L5.264 28H8.384L10.016 23.8H17.744L19.352 28ZM13.88 13.936H13.952L16.784 21.328H11L13.88 13.936Z"
fill="var(--color)" />
<line x1="23" y1="7.5" x2="5" y2="7.5" stroke="var(--color)" />
</g>
<defs>
<clipPath id="clip0_7_60">
<rect width="28" height="28" fill="" />
</clipPath>
</defs>
</svg>
<input type="range" class="slider" id="line-height" step="0.1" min="1" max="4">
<p class="sm-text">67px</p>
</div>
<div class="size-wrapper">
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_7_59)">
<rect width="28" height="28" fill="" />
<path
d="M19.352 28H22.616L15.728 10.864H12.152L5.264 28H8.384L10.016 23.8H17.744L19.352 28ZM13.88 13.936H13.952L16.784 21.328H11L13.88 13.936Z"
fill="var(--color)" />
<line x1="2.5" y1="10" x2="2.5" y2="28" stroke="var(--color)" />
<line x1="25.5" y1="10" x2="25.5" y2="28" stroke="var(--color)" />
</g>
<defs>
<clipPath id="clip0_7_59">
<rect width="28" height="28" fill="" />
</clipPath>
</defs>
</svg>
<input type="range" class="slider" id="letter-spacing" step="0.1" value="0" min="0" max="20">
<p class="sm-text">67px</p>
</div>
</div>
</div>
<div id="edit" onclick="toggleIcon()">
<svg width='26' height='26' viewBox='0 0 26 26' fill='none' xmlns='http://www.w3.org/2000/svg'>
<path d='M0 4H25.5' stroke='black' stroke-width='2' />
<circle cx='5' cy='4' r='4' fill='black' />
<circle cx='5' cy='4' r='2' fill='var(--edit)' />
<path d='M0 13H25.5' stroke='black' stroke-width='2' />
<circle cx='13' cy='13' r='4' fill='black' />
<circle cx='13' cy='13' r='2' fill='var(--edit)' />
<path d='M0 22H25.5' stroke='black' stroke-width='2' />
<circle cx='20' cy='22' r='4' fill='black' />
<circle cx='20' cy='22' r='2' fill='var(--edit)' />
</svg>
</div>
<div id="editable" contenteditable="true" autocomplete="off" autocorrect="off" autocapitalize="off"
spellcheck="false">
Untitled <br> Sans.
</div>
<div class="color-selection">
<div onclick="removeHandler()" class="palette-dark"></div>
<div id="req" class="palette"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
<script src="main.js"></script>
</body>
</html>