-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
64 lines (59 loc) · 3.73 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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>FactImageGen</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700" rel="stylesheet">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<h1>Fact Image Generator</h1>
<main id="content">
<div id="left-side">
<canvas id="canv"></canvas>
</div>
<div id="right-side">
<b>Content</b>
<label for="text">Text </label><input type="text" id="text" value="A study shows that bla if you bla then bla lol bla"><br>
<label for="text-color">Text Color </label><input type="color" id="text-color" value="#FFFFFF">
<label for="text-size">Text Size </label><input type="number" id="text-size" value="60"><br>
<label for="text-maxlength">Text Max Length (in px) </label><input type="number" id="text-maxlength" value="850">
<label for="text-lineheight">Text Line height </label><input type="number" id="text-lineheight" value="70">
<label for="text-offset">Text Letter Offset </label><input type="number" id="text-offset" value="-1"><br>
<label for="text-outline-size">Text Outline Size </label><input type="number" id="text-outline-size" value="3">
<label for="text-outline-color">Text Outline Color </label><input type="color" id="text-outline-color" value="#000000"><br>
<hr>
<b>Background</b>
<label for="bg-image-url-enable">Load from URL </label><input type="checkbox" id="bg-image-url-enable" checked>
<label for="bg-image-url">Background Image URL </label><input type="url" id="bg-image-url" value="https://i.imgur.com/2iim84u.png"><br>
<label for="bg-image">Background Image </label><input type="file" id="bg-image" accept="image/*"><br>
<label for="bg-scale">Background Scale </label><input type="number" id="bg-scale" value="100"><br>
<label for="bg-blur">Background Blur Radius </label><input type="number" id="bg-blur" value="5">
<label for="bg-brightness">Background Brightness </label><input type="number" id="bg-brightness" value="100">
<label for="bg-contrast">Background Contrast </label><input type="number" id="bg-contrast" value="100">
<hr>
<b>Watermark</b>
<label for="watermark-image">Watermark Image </label><input type="file" id="watermark-image" accept="image/*"><br>
<label for="watermark-margin-y">Watermark Y Bottom Margin </label><input type="number" id="watermark-margin-y" value="100"><br>
<label for="watermark-scale">Watermark Scale </label><input type="number" id="watermark-scale" value="100">
<hr>
<b>Logo</b>
<label for="logo-image">Logo Image </label><input type="file" id="logo-image" accept="image/*"><br>
<label for="logo-position-x">Logo X Position </label><input type="number" id="logo-position-x" value="30">
<label for="logo-position-y">Logo Y Position </label><input type="number" id="logo-position-y" value="30"><br>
<label for="logo-scale">Logo Scale </label><input type="number" id="logo-scale" value="45">
<hr>
<b>Size</b>
<label for="image-width">Image Width </label><input type="number" id="image-width" value="1024">
<label for="image-height">Image Height </label><input type="number" id="image-height" value="1024">
<hr>
</div>
</main>
<footer>
<a href="https://github.com/k4ds3/FactImageGen">Source Code / GitHub</a>
</footer>
<img src="#" style="display: none" id="img-bg">
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>