forked from yurafuca/5000choyen
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
145 lines (127 loc) · 4.01 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
<!DOCTYPE html>
<html lang="ja">
<link rel="preconnect" href="https://fonts.lug.ustc.edu.cn">
<link href="https://fonts.lug.ustc.edu.cn/css2?family=Noto+Sans+JP:wght@900&family=Noto+Sans+SC:wght@900&family=Noto+Serif+JP:wght@900&family=Noto+Serif+SC:wght@900&display=swap" rel="stylesheet">
<head>
<meta charset="utf-8">
<title>5000兆円ジェネレーター super</title>
<meta name="description" content="今、話題の5000兆円。そんな5000兆円のような画像を生成できる5000兆円ジェネレーターです。好きな文字を入れて素敵な5000兆円ライフを楽しもう!" />
<style type="text/css">
@font-face {
font-family: 'notobk';
src: url('notobk-subset.otf') format('opentype');
}
@font-face {
font-family: 'notoserifbk';
src: url('notoserifbk-subset.otf') format('opentype');
}
div {
display: block;
margin: 10px 0;
}
input[type="radio"] {
display: none;
}
label {
display: inline-block;
color: black;
background-color: lightgray;
padding: 3px 10px;
}
.text-order {
/* display: none; */
}
.text-order input[type="radio"]:checked+label {
color: white !important;
background-color: blue !important;
}
.background-order input[type="radio"]:checked+label {
color: white;
background-color: black;
}
</style>
<script src="settings.js"></script>
<script src="generator.js"></script>
<script src="drawer.js"></script>
<script src="hoshii.js"></script>
<!--<script src="canvasImage.js"></script>-->
<script src="canvas.js"></script>
<script src="main.js"></script>
</head>
<body>
<h1>5000兆円ジェネレーター super</h1>
<div>
<p>
<span>
<!-- eslint-disable -->
5000兆円風の画像を生成するツールです。<font color="blue">`欲しい!`</font> も生成できます。
</span>
</p>
<hr>
<div>
<h4>Contributor</h4>
<span>
作者:
<a href="https://twitter.com/yurafuca">@yurafuca</a>,
</span>
<span>
原作者:
<a href="https://twitter.com/rarity_rare25">@rarity_rare25</a>(<a href="https://rare25.github.io/5000choyen/">5000兆円ジェネレーター</a>)
</span>
</div>
<hr>
<div>
<h4>Changelog</h4>
<p><font color="blue">2018-06-10: 404 NotFound が表示される問題に対応しました</font></p>
</div>
<hr>
</div>
<div>
<canvas id="canvas" width="1500px" height="280px"></canvas>
</div>
<div>
<canvas id="canvas2" width="1500px" height="300px" style="display: none"></canvas>
</div>
<div class="text-order">
<font color="blue">`欲しい!`</font> の描画に
<input id="bar1" type="radio" name="text-order" value="image">
<label for="bar1">元ネタの画像を使う</label>
<input id="bar2" type="radio" name="text-order" value="text" checked>
<label for="bar2">文字を生成する</label>
</div>
<div class="background-order">
画像を保存するとき背景色を
<input id="bar3" type="radio" name="background-order" value="transparent">
<label for="bar3">透明にする</label>
<input id="bar4" type="radio" name="background-order" value="white" checked>
<label for="bar4">白にする</label>
</div>
<div>
<span id="labelTop">赤色の文字</span>
<input type="text" id="textboxTop" size="50" value="" spellcheck="false" oninput="_canvas.redrawTop();">
<br>
<span id="labelBottom">銀色の文字</span>
<input type="text" id="textboxBottom" size="50" value="" spellcheck="false" oninput="_canvas.redrawBottom();">
</div>
<div>
<button type="button" onclick="_canvas.save();">画像を保存する</button>
<button type="button" onclick="_canvas.newtab();">画像を新しいタブで開く</button>
</div>
<div>
<hr>
<p>
`欲しい!` はドラッグできます。
<br>
<video autoplay loop muted style="max-width:600px">
<source src="demo.mp4" type="video/mp4">
<source src="demo.webm" type="video/webm">
</video>
</p>
<hr>
</div>
<div>
ソースコード:
<a href="https://github.com/yurafuca/5000choyen">yurafuca/5000choyen</a>
</div>
</body>
</html>