-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
76 lines (67 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>List image style</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<img src="./Cybtekk.svg" alt="CybTEKK" width="200px" height="120px">
<!-- Preview of list style icons -->
<ul id="myList">
<li><span class="adjuster" style="top:0; position:relative;">This is an incredible design tool for creating the
best
<span class="highlight">User Experience</span> for list tags.</span></li>
<li><span class="adjuster" style="top:0; position:relative;">To use this web app, simply drag and drop the
svg / image to <span class="highlight">anywhere</span> in the screen.</span></li>
<li><span class="adjuster" style="top:0; position:relative;">Ideal list image size will be
<span class="highlight">calculated</span> and code will be displayed in the snippet below.</span></li>
</ul>
<!-- List image controls setup -->
<div class="controls">
Move Text Up<button class="up" tabindex="0">➤</button><button class="down"
tabindex="0">➤</button>Move Text Down
<br> <label for="font-size">Change font size (in pixels): </label><input type="text" placeholder="16"
id="font-size" tabindex="0">
</div>
<!-- Code Snipped Start -->
<div class="codeSnippetOutput">
<div class="snippet">
<p class="circles">
<span>𒊹</span><span>𒊹</span><span>𒊹</span>
</p>
<p class="clipboard">
<img src="clipboard.png" alt="" srcset="" height="20px"><span class="tick">✓</span>
</p>
<span class="color4"><</span><span class="color1">li </span><span class="color2">class</span><span
class="color4">="</span><span class="color3">yourIconOnLeft</span><span
class="color4">"><</span><span class="color1">span</span>
<span class="color2">class</span><span class="color4">="</span><span class="color3">codeYouNeed</span><span
class="color4">"</span> <span class="color2">style</span><span class="color4">="</span><span
class="color3">top:0;
position:relative;</span><span class="color4">"></span><span class="algorithm">You can copy the
generated code from
here.</span><span class="color4"></</span><span class="color1">span</span><span
class="color4">></</span><span class="color1">li</span><span class="color4">></span>
</div>
</div>
<!-- Code Snippet End -->
<!-- File Upload and Display Logic -->
<section class="file-upload">
<button class="file-upload-btn" type="button" tabindex="0"
onclick="document.querySelector('.file-upload-input').click()">Upload
An Image</button>
<div class="image-upload-wrap" tabindex="0">
<input class="file-upload-input" type='file' onchange="readURL(this);" accept="image/*" />
<h3 class="drag-text">Drop it here!</h3>
</div>
<p class="highlight">Current List image looks like this:</p>
<img id="list-image" src="./BulletPoints/question-mark.png" alt="uploaded image" />
</section>
</body>
<script src="script.js"></script>
<script src="input-filter.js"></script>
<script src="key-binding.js"></script>
<script src="Clipboard.js"></script>
</html>