-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
135 lines (123 loc) · 4.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
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
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<!doctype html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width initial-scale=1.0">
<title>Textinorator 5000</title>
<link rel="stylesheet" href="./main.css"></link>
<link rel="stylesheet" href="./css/colors.css"></link>
<link rel="stylesheet" href="./css/apply-colors.css"></link>
<link rel="stylesheet" href="./css/tool.css"></link>
<link rel="apple-touch-icon" href="html/icons/icon-192.webp"/>
<link rel="manifest" href="manifest.json">
<link rel="icon" type="image/x-icon" href="html/icons/icon-192.webp">
<script src="./js/dark-mode.js"></script>
</head>
<body>
<main>
<script src="./js/init-module.js"></script>
<div id="container" class="container full-screen-sans-controls">
<div class="canvas-scrollable">
<div class="canvas-parent">
<div class="horizontal-spacer"></div>
<div class="canvas-spot"></div>
<div class="horizontal-spacer"></div>
</div>
</div>
</div>
<div class="tool-controls-container">
<div class="horizontal-spacer"></div>
<div id="tool-controls" class="tool-controls full-screen-snap-bottom">
<div class="tool-selector">
<button class="select-text-tool-button tool-button tool-button-selected">Text</button>
<button class="select-draw-tool-button tool-button">Draw</button>
<button class="select-undo-tool-button tool-button"
style="display: none;">Undo</button>
</div>
<div style="display: none;"
class="tool-settings-instance draw-tool-settings">
<div class="color-choice"></div>
<label for="draw-stroke-width">Line Width:</label>
<input type="number"
id="draw-stroke-width"
class="draw-stroke-width"
value="10"/>
</div>
<div class="tool-settings-instance text-tool-settings">
<label for="text-setter">Selected Text:</label>
<input type="text" id="text-setter" class="text-setter"/>
<button class="delete-text">Delete Text</button>
<br>
<div class="color-choice"></div>
<details>
<summary>Font Properties</summary>
<div class="font-properties">
<label for="font-size-setter">Font Size:</label>
<input type="number" id="font-size-setter" class="font-size-setter"/>
<br>
<label for="font-color-fill">Font Color Fill:</label>
<input type="color" id="font-color-fill" class="font-color-fill"/>
<br>
<label for="font-color-stroke">Font Color Stroke:</label>
<input type="color" id="font-color-stroke" class="font-color-stroke"/>
<br>
<label for="font-name-setter">Font Name:</label>
<input type="text" id="font-name-setter" class="font-name-setter"/>
<br>
<label for="font-italic">Italic</label>
<input type="checkbox"
id="font-italic"
class="font-italic"/>
<br>
<label for="font-bold">Bold</label>
<input type="checkbox"
id="font-bold"
class="font-bold"/>
<br>
<div class="font-stroke-properties">
<div>Font Stroke Properties:</div>
<input type="radio" id="font-stroke-none"
class="font-stroke-none"
name="font-stroke" value="none">
<label for="font-stroke-none">No font stroke</label>
<br>
<input type="radio" id="font-stroke-stroke"
class="font-stroke-stroke"
name="font-stroke" value="stroke">
<label for="font-stroke-stroke">Stroke font</label><br>
<input type="radio" id="font-stroke-shadow"
class="font-stroke-shadow"
name="font-stroke" value="shadow">
<label for="font-stroke-shadow">Font shadow</label>
</div>
<label for="font-stroke-width">Font stroke width:</label>
<input type="number" id="font-stroke-width" class="font-stroke-width"/>
<br>
<label for="font-vertical">Vertical text:</label>
<input type="checkbox"
id="font-vertical"
class="font-vertical"/>
</div>
</div>
</details>
</div>
<div class="horizontal-spacer"></div>
</div>
<div id="general-controls" class="general-controls">
<label for="image-picker">Base Image:</label>
<input type="file" id="image-picker" class="image-picker"/>
<br>
<label for="image-name">Image Name</label>
<input type="text" id="image-name" class="image-name"/>
<br>
<button class="download-image">Download Image</button>
</div>
</main>
<footer>
<a href="./html/options.html">options</a>
<a href="./html/license.html">license</a>
<button id="dark-toggle" onclick="toggleDarkmode()">toggle darkmode</button>
<a href="https://github.com/gaycodegal/Textinorator-5000">source code</a>
</footer>
</body>
</html>