-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
203 lines (186 loc) · 6.67 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
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="author" content="Ken Sugiura" />
<meta name="description" content="A web app for visualizing a body text as a series of circles representing word size." />
<meta name="keywords" content="bubble text, word bubbler, vizualize" />
<!--
Text Bubbles
Visualize text as a series of
bubbles representing word size.
Contributors:
reddit.com/u/krikienoid
reddit.com/u/qi1
reddit.com/u/kylemit
MIT License 2014
-->
<title>Text Bubbles</title>
<!-- Libraries-->
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<!-- TextBubbles -->
<link type="text/css" rel="stylesheet" href="css/textbubbles.css" />
<script type="text/javascript" src="js/textbubbles.js"></script>
<!-- Bubble Options -->
<style type="text/css" id="textbubbles-options"></style>
</head>
<body>
<div class="wrapper-main" data-role="page">
<div class="wrapper-head">
<header class="wrapper-head-title">
<h1>Text Bubbles</h1>
<p>Visualize text as a series of bubbles representing word size.</p>
<hr />
</header>
<aside class="wrapper-head-block">
<input type="radio" class="head-tab-control" name="head-tabs" id="head-tab-opts" />
<h2 class="head-tab-title"><label for="head-tab-opts">Settings</label></h2>
<div class="wrapper-head-content">
<p>
<select id="textbubbles-set-type">
<option value="linear">Linear</option>
<option value="quadratic" selected="selected">Quadratic</option>
<option value="cubic" >Cubic</option>
</select>
Bubble Size
</p>
<p>
<input type="number" min="0" id="textbubbles-set-scale" />
Scale
</p>
<p>
<input type="number" min="0" id="textbubbles-set-spacing" />
Spacing
</p>
<p>
<input type="checkbox" id="textbubbles-set-reveal" />
See Words
<input type="checkbox" id="textbubbles-set-breaks" />
Line Breaks
<input type="checkbox" id="textbubbles-set-gridded" />
Grid
<input type="button" id="textbubbles-set-reset" value="Reset" />
</p>
</div>
</aside>
<aside class="wrapper-head-block">
<input type="radio" class="head-tab-control" name="head-tabs" id="head-tab-text" checked="checked" />
<h2 class="head-tab-title"><label for="head-tab-text">Text Input</label></h2>
<div class="wrapper-head-content">
<textarea id="textbubbles-input" placeholder="Enter text here ...">
The Cat in the Hat
The sun did not shine.
It was too wet to play.
So we sat in the house
All that cold, cold, wet day.
I sat there with Sally.
We sat there, we two.
And I said, “How I wish
We had something to do!”
Too wet to go out
And too cold to play ball.
So we sat in the house.
We did nothing at all.
So all we could do was to
Sit! Sit! Sit! Sit!
And we did not like it.
Not one little bit.
And then
Something went BUMP!
How that bump made us jump!
We looked!
Then we saw him step in on the mat!
We looked!
And we saw him!
The Cat in the Hat!
And he said to us,
“Why do you sit there like that?”
“I know it is wet
And the sun is not sunny.
But we can have
Lots of good fun that is funny!”
“I know some good games we could play,”
Said the cat.
“I know some new tricks,”
Said the Cat in the Hat.
“A lot of good tricks.
I will show them to you.
Your mother
Will not mind at all if I do.”
Then Sally and I
Did not know what to say.
Our mother was out of the house
For the day.
But our fish said, “No! No!
Make that cat go away!
Tell that Cat in the Hat
You do NOT want to play.
He should not be here.
He should not be about.
He should not be here
When your mother is out!”
“Now! Now! Have no fear.
Have no fear!” said the cat.
“My tricks are not bad,”
Said the Cat in the Hat.
“Why, we can have
Lots of good fun, if you wish,
With a game that I call
UP-UP-UP with a fish!”
“Put me down!” said the fish.
“This is no fun at all!
Put me don!” said the fish.
“I do NOT wish to fall!”
“Have no fear!” said the cat.
“I will not let you fall.
I will hold you up high
As I stand on a ball.
With a book on one hand!
And a cup on my hat!
But that is not ALL I can do!’
Said the cat…
</textarea>
</div>
</aside>
<aside class="wrapper-head-block">
<input type="radio" class="head-tab-control" name="head-tabs" id="head-tab-stat" />
<h2 class="head-tab-title"><label for="head-tab-stat">Statistics</label></h2>
<div class="wrapper-head-content">
<p>
Word count:
<span class="stat-out" id="textbubbles-stat-wordnums"></span>
</p>
<p>
Char count (any char):
<span class="stat-out" id="textbubbles-stat-chars"></span>
</p>
<p>
Char count (alphanum):
<span class="stat-out" id="textbubbles-stat-alphnums"></span>
</p>
<p>
Char count (letters):
<span class="stat-out" id="textbubbles-stat-letters"></span>
</p>
<p>
Average word size:
<span class="stat-out" id="textbubbles-stat-avglen"></span>
</p>
<p>
Longest word:
<span class="stat-out" id="textbubbles-stat-longest"></span>
</p>
</div>
</aside>
</div>
<main class="wrapper-body">
<div class="container-bubbles" id="textbubbles-output"></div>
</main>
<a class="corner-button" href="https://github.com/krikienoid/textbubbles">
Link to Github.
</a>
</div>
</body>
</html>