forked from PrincessRTFM/WebUtil
-
Notifications
You must be signed in to change notification settings - Fork 0
/
niko.html
63 lines (62 loc) · 3.01 KB
/
niko.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
<!DOCTYPE html>
<!--
@desc a point, click, and type creator for dialogue boxes featuring Niko, from the game Oneshot
-->
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<!--
This font file is REQUIRED for the page to work. Rendering of text into
the generated image will not function properly without it, leaving the
font completely wrong. As such, use the standard prefetch link and the
experimental/proposed preload link to try and tell the browser to load
it as soon as possible, as well as the deprecated/removed Chrome-specific
subresource link for older versions.
As a side note, Chrome seems to whinge that this isn't used within a few
seconds from page load, even when text is autoloaded from the URL hash.
The fuck, Chrome.
-->
<link rel="prefetch" href="/css/terminus.ttf" as="font" />
<link rel="subresource" href="/css/terminus.ttf" as="font" />
<link rel="preload" href="/css/terminus.ttf" as="font" />
<title>NikoMaker - Niko died for our suns</title>
<link rel="shortcut icon" type="image/png" href="img/favicon/niko.png" />
<link rel="stylesheet" type="text/css" href="css/nikos.css" id="core-style" />
<link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/ui-darkness/jquery-ui.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/lib/nikofaces.js"></script>
<script type="text/javascript" src="js/niko.browser.js"></script>
</head>
<body>
<div id="interface">
<div id="output">
<canvas id="photoshop" width="608" height="128"></canvas>
<img id="render" width="608" height="128" src="img/niko-background.png" />
</div>
<div id="content">
<label for="message">Message</label>
<p id="errortext" class="ui-state-highlight soften"><span class="ui-icon ui-icon-alert"></span>Your message is too long, only three lines of text can be rendered!</p>
<textarea rows="4" id="message" placeholder="What's Niko going to say?"></textarea>
<span class="label">Expression</span>
<div id="faces"></div>
</div>
</div>
<div id="leftbar" class="sidebar">
<h3>Welcome to NikoMaker!</h3>
<p>
This tool allows you to quickly create an image of Niko (the main character of <a href="https://store.steampowered.com/app/420530/OneShot/">OneShot</a>) saying whatever you like, with any expression from the game!
</p>
<p>
Hover over an element to get more information on it.
</p>
<h4>Quick Basics</h4>
<p>You need to select Niko's expression and write a message to display on the image.</p>
<p>Once you've done that, you can copy or save the created image by right clicking on it.</p>
</div>
<div id="rightbar" class="sidebar">
<h4>Quick Help</h4>
<p id="helpText"><i>Hover over a control for details</i></p>
</div>
</body>
</html>