-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
149 lines (149 loc) · 8.15 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
136
137
138
139
140
141
142
143
144
145
146
147
148
149
<!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">
<meta name="description" content="UPUP 舉牌加油小人產生器！現在就一起來讓加油小人說出你的心聲！">
<title data-lang="title">UPUP to You</title>
<link href="materials/fav.ico" rel="icon" />
<link rel="apple-touch-icon" href="materials/favicon.png" />
<link rel="manifest" href="manifest.json" />
<link href="https://jerrychan7.github.io/webPixelUIengine/release/all.css" rel="stylesheet" />
<!-- <link href="-all.css" rel="stylesheet" /> -->
<link href="index.css" rel="stylesheet" />
<script src="index.js" type="module"></script>
</head>
<body>
<aside>
<h1 class="sect-logo logo"><span>UP</span> <span>UP</span></h1>
<div class="sect-info">
<select id="lang-selector" class="pui" bsize="2">
<option value="en" selected>English</option>
<option value="zh-CN">简体中文</option>
<option value="zh-TW">繁體中文</option>
<option value="ja">日本語</option>
</select><br/>
<p data-lang="info">Materials and copyright belong to <a href="https://www.haniboi.com/">Haniboi</a>. The <a href="http://upuptoyou.com/">original web page</a> is no longer valid, this project provides more customization options.</p>
</div>
<fieldset class="sect-msg">
<legend data-lang="your_message_here">YOUR MESSAGE HERE</legend>
<textarea class="pui" bsize="2" id="words" data-lang="msg_placeholder" placeholder="Write a message... lay it out with spaces, and newlines!"></textarea>
<!-- 排列方式：从左到右，从上到下。 -->
<br/>
<a class="icon space-key pui-btn" size="2" title="insert a empty space" id="btn-insert-space"></a>
<a class="icon refresh pui-btn" size="2" title="regenerate" id="btn-refresh"></a>
<a class="icon download pui-btn" size="2" title="download this picture" id="btn-download" download="upup.png" target="_blank"></a>
</fieldset>
<fieldset class="sect-bg-color">
<legend data-lang="background_colors">BACKGROUND COLORS</legend>
<a data-color="transparent" class="color-block stripe-bg pui-btn" size="1"></a>
<a data-color="#FFFFFF" class="color-block pui-btn" size="1"></a>
<a data-color="#E50012" class="color-block pui-btn" size="1"></a>
<a data-color="#EA5415" class="color-block pui-btn" size="1"></a>
<a data-color="#f49ec0" class="color-block pui-btn" size="1"></a>
<a data-color="#f6f08b" class="color-block pui-btn" size="1"></a>
<a data-color="#FFFF99" class="color-block pui-btn" size="1"></a>
<a data-color="#c1d540" class="color-block pui-btn" size="1"></a>
<a data-color="#60c3ba" class="color-block pui-btn" size="1"></a>
<a data-color="#77cff0" class="color-block pui-btn" size="1"></a>
<a data-color="#980c7e" class="color-block pui-btn" size="1"></a>
<br />
<label data-lang="custom_bg_color">CUSTOM:</label> <input type="color" class="color-block pui" value="#008888" size="1" />
</fieldset>
<fieldset class="sect-style">
<legend data-lang="style">style</legend>
<button class="pui warning" size="2" data-lang="facebook_cover">FACEBOOK COVER</button>
<button class="pui warning" size="2" data-lang="square">SQUARE</button>
<br />
<button class="pui warning" size="2" data-lang="auto_square">AUTO SQUARE</button>
<button class="pui warning" size="2" data-lang="auto_size">AUTO SIZE</button>
</fieldset>
<details class="sect-adv-setting">
<summary>
<i class="pui-icon triangle clip right"></i><fieldset><legend data-lang="adv_settings">
Advanced Settings
</legend></fieldset><i class="pui-icon triangle clip left"></i>
</summary>
<div class="content">
<fieldset class="sect-size">
<legend class="inline" data-lang="size">SIZE</legend>
<div class="radio-group">
<label data-size="facebook_cover"><input type="radio" class="pui triangle" name="size" />
<span data-lang="facebook_cover">FACEBOOK COVER</span> (850 × 315)</label><br />
<label data-size="square"><input type="radio" class="pui triangle" name="size" />
<span data-lang="square">SQUARE</span> (500 × 500)</label><br />
<label data-size="auto_square"><input type="radio" class="pui triangle" name="size" />
<span data-lang="square">AUTO SQUARE</span> (<span class="squareSizeEcho"></span> × <span class="squareSizeEcho"></span>)</label><br />
<label data-size="auto_size"><input type="radio" class="pui triangle" name="size" checked />
<span data-lang="auto_size">AUTO</span> (<span id="autoSizeEchoW"></span> × <span id="autoSizeEchoH"></span>)</label><br />
<label data-size="custom"><input type="radio" class="pui triangle" name="size" />
<span data-lang="custom_size">CUSTOM</span>
<span><input type="number" id="sizeW" class="pui" bsize="1" value="500"> W × <input type="number" id="sizeH" class="pui" bsize="1" value="500"> H</span></label>
</div>
</fieldset>
<fieldset class="sect-layout">
<legend data-lang="layout">Layout</legend>
<span data-lang="preset">Preset:</span><br />
<button class="pui success" size="2" data-preset="fb" data-lang="preset_fb_cover">fb cover</button>
<button class="pui success" size="2" data-preset="square" data-lang="preset_square">square</button>
<button class="pui success" size="2" data-preset="compact" data-lang="preset_compact">compact</button>
<table>
<tr>
<td>rotate:</td>
<td><input class="pui hollow success" bsize="2" type="range" min="-90" max="0" value="-23.5" step="0.5" id="rotate"/></td>
<td><span></span></td>
</tr>
<tr>
<td>gapX:</td>
<td><input class="pui hollow success" bsize="2" type="range" min="-300" max="300" value="0" step="1" id="gapX"/></td>
<td><span></span></td>
</tr>
<tr>
<td>gapY:</td>
<td><input class="pui hollow success" bsize="2" type="range" min="-300" max="300" value="0" step="1" id="gapY"/></td>
<td><span></span></td>
</tr>
<tr>
<td>shear:</td>
<td><input class="pui hollow success" bsize="2" type="range" min="-5" max="5" value="-0.585" step="0.005" id="shear"/></td>
<td><span></span></td>
</tr>
<tr>
<td>zoom:</td>
<td><input class="pui hollow success" bsize="2" type="range" min="0.1" max="2.5" value="1" step="0.05" id="zoom"/></td>
<td><span></span></td>
</tr>
<tr>
<td>offsetX:</td>
<td><input class="pui hollow success" bsize="2" type="range" min="-500" max="500" value="0" step="1" id="offsetX"/></td>
<td><span></span></td>
</tr>
<tr>
<td>offsetY:</td>
<td><input class="pui hollow success" bsize="2" type="range" min="-500" max="500" value="0" step="1" id="offsetY"/></td>
<td><span></span></td>
</tr>
</table>
</fieldset>
<fieldset class="sect-fg-color">
<legend data-lang="foreground_colors">FOREGROUND COLORS</legend>
<a data-color="transparent" class="color-block stripe-bg pui-btn" size="1"></a>
<a data-color="#FFF100" class="color-block pui-btn" size="1"></a>
<label data-lang="custom_fg_color">CUSTOM:</label> <input type="color" class="color-block pui" value="#ffb6c1" size="1" />
</fieldset>
<!-- <fieldset><legend>字体</legend></fieldset> -->
</div>
</details>
<footer>
Copyright © <a href="https://www.haniboi.com/">Haniboi Ltd.</a><br />
Author of this page jerrychan7@github.
</footer>
</aside>
<main class="stripe-bg">
<img id="output" style="display: none;" />
<canvas></canvas>
</main>
<!-- size: auto cover square 自定义 -->
</body>
</html>