-
Notifications
You must be signed in to change notification settings - Fork 5
/
textorizer.html
103 lines (87 loc) · 4.46 KB
/
textorizer.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
<!DOCTYPE html>
<html>
<head>
<title>textorizer-js</title>
<!-- <link rel="stylesheet" href="style.css"/>-->
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8rc3.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8rc3.custom.min.js"></script>
<script type="text/javascript" src="common.js"></script>
<script type="text/javascript" src="textorizer.js"></script>
<script type="text/javascript" src="t1_view.js"></script>
<script type="text/javascript" src="utils.js"></script>
<script type="text/javascript" src="fontList.js"></script>
<script type="text/javascript" src="seedrandom.js"></script>
<link type="text/css" href="textorizer.css" rel="stylesheet"/>
</head>
<body>
<div id="main">
<div id="panel">
<h1><img style="vertical-align: middle" src="Textorizer_48x48.png" alt="Textorizer"/>Textorizer 1</h1>
<p><small><a href=".">What's this?</a> <a href=".#documentation">Help!</a> <a href="#" id="privacy">privacy concerns?</a></small></p>
<p style="text-align: center">
<img id="input_thumb" height="100px" alt="Select an image file below" src="" style="vertical-align: middle; display:none"/><br/>
</p>
<div id="picture_select">
Change picture:
<input id="file_selector" type="file" accept="image/*;capture=camera"/>
<div id="privacy_popup" title="Privacy" style="display:none">
The image never leaves your computer: we don't upload it anywhere. The whole process happens in your browser.
</div>
<div id="large_formats_popup" title="Large Formats" style="display:none">
To get a larger picture, send an email to max@lapin-bleu.net, including:
<ul>
<li>Your original picture attached</li>
<li>A copy of the text below, under the horizontal line</li>
<li>(optional) the size of the large picture you would like to receive</li>
</ul>
Within a week, you will receive an email reply with a large version of your generated picture.
<br/><hr/><div id="params"></div>
</div>
</div>
<hr/>
<div id="secondary_panel">
<div class="buttons">
<img id="buttons_spinning_wheel" src="spinning_wheel.gif" alt="spinning wheel" style="vertical-align: middle" />
<span id="buttons">
</span>
</div>
<label>Text:</label>
<textarea id="text" cols="20" rows="6"></textarea>
<button id="preview_button" onclick="go()">Render</button>
<label>Seed: <span id="value-seed"></span></label>
<input id="seed_control" type="text">
<label>Image Height: <span id="value-image-height"></span></label>
<div id="height_control"></div>
<button id="render_window">Pop up</button>
<label>Opacity: <span id="value-opacity"></span></label>
<div id="opacity"></div>
<label>Number of Strings: <span id="value-nb-strings"></span></label>
<div id="nb_strings"></div>
<label>Threshold: <span id="value-threshold"></span></label>
<div id="threshold"></div>
<label>Text size: <span id="value-font-size"></span></label>
<div id="font_size"></div>
<label>Font:</label>
<select id="font">
<option>Arial Black</option>
<option>Impact</option>
<option>Helvetica</option>
<option>Times New Roman</option>
</select>
</div>
</div>
<canvas id="output_canvas" width="400" height="400" style="display:none"></canvas>
</div>
<canvas style="display:none" id="input_canvas" width="10" height="10"></canvas>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-3434078-1");
pageTracker._initData();
pageTracker._trackPageview();
</script>
</body>
</html>