-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
131 lines (117 loc) · 6.08 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script defer src="js/index.js"></script>
<link rel="stylesheet" href="style/bamboo-light.css">
<link rel="stylesheet" href="style/adjustments.css">
<link rel="icon" type="image/x-icon" href="favicon.png">
<meta name="theme-color" content="#d20000">
<title>Flaggen — Preview, Edit and Generate</title>
<meta name="title" content="Flaggen — Preview, Edit and Generate">
<meta name="description" content="Generate a profile picture with your favourite background.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://kagerou.dev/tools/flaggen/">
<meta property="og:title" content="Flaggen — Preview, Edit and Generate">
<meta property="og:description" content="Generate a profile picture with your favourite background.">
<meta property="og:image" content="https://kagerou.dev/tools/flaggen/banner.png">
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="https://kagerou.dev/tools/flaggen/">
<meta property="twitter:title" content="Flaggen — Preview, Edit and Generate">
<meta property="twitter:description" content="Generate a profile picture with your favourite background.">
<meta property="twitter:image" content="https://kagerou.dev/tools/flaggen/banner.png">
<body>
<header>
<h1>
<a href="">flaggen</a>:
flag picture generator
</h1>
<p>
The pictures you upload do no get processed or stored by us.
If you have any issues or want to help improving this website
you can visit our <a target="_blank" href="https://github.com/elderguardian/flaggen">Git Repository.</a>
</p>
</header>
<main>
<section>
<h2>Configuration</h2>
<article>
<label for="imageUploadInput">Profile Picture
<input id="imageUploadInput" onchange="onImageChange()" name="file" type="file" accept="image/*">
</label>
</article>
<article>
<label for="flagSelect">Background image
<select id="flagSelect">
<option value="flags/germanPride.png" selected>German Pride</option>
<option value="flags/german.png">German</option>
<option value="flags/germanGradient.png">German Gradient</option>
<option value="flags/austrian.png">Austria</option>
<option value="flags/austrianPride.png">Austria Pride</option>
<option value="flags/swizz.png">Swizz</option>
<option value="flags/swizzPride.png">Swizz Pride</option>
<option value="flags/kaiserreich.png">Kaiserreich</option>
<option value="flags/poland.jpg">Poland</option>
<option value="flags/polandPride.jpeg">Poland Pride</option>
<option value="flags/america.png">American</option>
<option value="flags/argentinePride.png">Argentine Pride</option>
<option value="flags/bulgarianPride.png">Bulgarian Pride</option>
<option value="flags/chileanPride.png">Chilean Pride</option>
<option value="flags/columbianPride.png">Columbian Pride</option>
<option value="flags/croationPride.png">Croatian Pride</option>
<option value="flags/dutchPride.png">Dutch Pride</option>
<option value="flags/frenchPride.png">French Pride</option>
<option value="flags/greecePride.png">Greece Pride</option>
<option value="flags/hungarianPride.png">Hungarian Pride</option>
<option value="flags/irishPride.png">Irish Pride</option>
<option value="flags/italianPride.png">Italian Pride</option>
<option value="flags/lativanPride.png">Lativan Pride</option>
<option value="flags/mexicoPride.png">Mexican Pride</option>
<option value="flags/paraguayanPride.png">Paraguayan Pride</option>
<option value="flags/peruvianPride.png">Peruvian Pride</option>
<option value="flags/polishPride.png">Polish Pride</option>
<option value="flags/romanianPride.png">Romanian Pride</option>
<option value="flags/russianPride.png">Russian Pride</option>
<option value="flags/spanishPride.png">Spanish Pride</option>
<option value="flags/uk.png">UK</option>
<option value="flags/ukrainianPride.png">Ukrainian Pride</option>
</select>
</label>
</article>
<article>
<label for="paddingRange">Image padding
<input id="paddingRange" type="range" min="0" max="200" value="50">
</label>
<label for="flagOpacity">Flag opacity
<input id="flagOpacity" type="range" min="0" max="100" value="100">
</label>
</article>
<article>
<label for="circularImageCheckbox">
<input type="checkbox" id="circularImageCheckbox">
Round profile picture
</label>
<label for="dontAdjustImageCheckbox">
<input type="checkbox" id="dontAdjustImageCheckbox">
Adjust image to padding
</label>
</article>
</section>
<section id="resultContainer">
<h2>Result</h2>
<canvas id="resultCanvas" style="width: 90%"></canvas>
<label for="circularPreviewCheckbox" style="padding: 20px">
<input type="checkbox" id="circularPreviewCheckbox" onchange="toggleCircularPreview()"/>
Circular Preview
</label>
<button id="downloadCanvas">Download</button>
</section>
</main>
<footer>
<p style="padding-top: 20px">
[Go to <a href="https://github.com/elderguardian/flaggen" target="_blank">GitHub Repository</a>]
</p>
</footer>
</body>
</html>