-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
158 lines (147 loc) · 6.62 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
150
151
152
153
154
155
156
157
158
<!DOCTYPE html>
<html lang="en-US">
<head id='top'>
<title>GT-Artist</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no">
<link rel="apple-touch-icon" sizes="180x180" href="res/favicons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="res/favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="192x192" href="res/favicons/android-chrome-192x192.png">
<link rel="icon" type="image/png" sizes="16x16" href="res/favicons/favicon-16x16.png">
<link rel="manifest" href="res/favicons/manifest.json">
<link rel="mask-icon" href="res/favicons/safari-pinned-tab.svg" color="#2c3e50">
<link rel="shortcut icon" href="res/favicons/favicon.ico">
<meta name="msapplication-config" content="res/favicons/browserconfig.xml">
<meta name="theme-color" content="#2c3e50">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway:500" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Cabin" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">
</head>
<body>
<ul id='barUl' class='remove'>
<li><a class='LB' href="#top">Home</a></li>
<li><a class='LB' href="#about" >About</a></li>
<li><a class='LB' href="#faq">FAQ</a></li>
<li><button class='RB' id='startBtn'>START</button></li>
<li><a class='RB' href="#options"><i class="material-icons">settings</i></a></li>
<li><input id="fileUpload" type="file"><label class='RB' for="fileUpload">Choose a file</label></li>
</ul>
<div id="tlkio" class='remove' data-channel="GT-Artist"></div>
<header class='center'>
<div id='title' class='dnon'>Welcome to GT-Artist</div>
<a href='#art' id='downArrow'><i style='font-size: 4vw;' class="material-icons">keyboard_arrow_down</i></a>
</header>
<div id='content'>
<hr class='r'>
<div class='bg2'>
<h1 id='art'>Generated Art</h1>
<p id='canvasPlaceHolder' class='box center'>Nothing here yet</p>
<div class='center'>
<div id='canvasContent' class='left dnon'>
<div id='canvasBox'>
<canvas id='artCanvas'></canvas>
</div>
<div id='canvasButtons'>
<button id='genLinks' class='btn'>Generate Image File</button>
<div id='links' class='dnon'>
<a id='oLink' target='_blank'><button class='btn'>Open Image In New Tab</button></a>
<a id='dLink'><button class='btn'>Download</button></a>
</div>
</div>
</div>
</div>
<hr>
</div>
<div class='bg1'>
<h1 id='options'>Options</h1>
<div class='box'>
<ul id='opt'>
<li class='ulh'>
<input id='resize' type='checkbox'>
<label for='resize'>Resize?</label>
</li>
<li>
<div id='rTable' class='dnon'>
<table>
<tr>
<td>Width :</td>
<td class='wide'><input class='wide' id='bWidth' type="range" min=10 max=200 value=100></td>
<td><span>100</span> blocks </td>
</tr>
<tr>
<td>Height :</td>
<td class='wide'><input class='wide' id='bHeight' type="range" min=10 max=200 value=100></td>
<td><span>100</span> blocks</td>
</tr>
<tr>
<td colspan=3>
<input id='aspectRatio' type='checkbox' checked>
<label for='aspectRatio'> Keep aspect ratio</label>
</td>
</tr>
</table>
</div>
</li>
<!-- Not Implemented -->
<!-- <li class='ulh'>
<input id='paint' type='checkbox'>
<label for='paint'>Use painted blocks?</label>
</li>
<li class='ulh'>
<input id='glue' type='checkbox'>
<label for='glue'>Use block glue?</label>
</li> -->
</ul>
</div>
<hr>
</div>
<div class='bg2'>
<h1 id='about'>About</h1>
<div class='box center'>
<p>
GT-Artist is pixel art program that automaticaly makes pixel art from selected blocks of Growtopia by any kind of picture.<br>
</p>
<p>
This project is for education and entertainment purposes only so we do not seeking any profit from it.<br>
Also, this is for helping Growtopia players to make pixel art in Growtopia game or even to look how any picture<br>
looks like if it would be made from Growtopia blocks.<br>
</p>
<p>
If you choosed a file and system still says that you need to choose it, that means your browser is not supported<br>
and we recomend you to use or dowload other browser such as Google Chrome or other.<br>
</p>
<p>
Note That GT-Artist is just a pixel art program and does not communicate with Growtopia in any way.<br>
</p>
<p>
Credits:<br>
This project contains and uses sprite sheet from Growtopia (the game) owned by Ubisoft Entertainment.<br>
<a target='_blank' href="http://www.growtopiagame.com">http://www.growtopiagame.com</a><br>
</p>
</div>
<hr>
</div>
<div class='bg1'>
<h1 id='faq'>FAQ</h1>
<div class='box center'>
<h3>How do I download image?</h3>
<p>
On some PC browsers you can just simply right click on canvas and press download.
If this is not avaialble then press 'Generate image file' button and wait little bit, then press 'Download'.
also you can press 'Open in new window' button, right click (long press on mobile) image and choose download option.
</p>
<h3>How to view generated art in fullscreen?</h3>
<p>
You should double click (double tap) on art box to achieve this effect...
</p>
</div>
<hr>
</div>
</div>
<script src="https://tlk.io/embed.js" type="text/javascript" async></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="js/velocity.min.js"></script>
<script src="js/scripts.js"></script>
</body>
</html>