Skip to content

Commit ba337fa

Browse files
nickstenningnickstenning
committed
Polish up demo.html, dev.html
1 parent a1dfd54 commit ba337fa

File tree

2 files changed

+123
-45
lines changed

2 files changed

+123
-45
lines changed

‎demo.html

+105-34
Original file line numberDiff line numberDiff line change
@@ -2,56 +2,127 @@
22
<html lang="en">
33
<head>
44
<meta charset="utf-8">
5-
<title>JS annotation test</title>
5+
<title>Annotator demo</title>
6+
<style>
7+
body {
8+
font-family: Georgia, Cambria, "Times New Roman", Times, serif;
9+
letter-spacing: 0.01rem;
10+
font-size: 22px;
11+
line-height: 1.5;
12+
text-rendering: optimizeLegibility;
13+
-webkit-font-smoothing: antialiased;
14+
}
15+
header, article {
16+
width: 740px;
17+
margin: 2em auto;
18+
}
19+
.highlight {
20+
background: rgba(255, 10, 10, 0.3);
21+
}
22+
</style>
623
</head>
724

825
<body>
926
<header>
10-
<h1>Javascript annotation service test</h1>
27+
<h1>Annotator demonstration</h1>
1128
</header>
1229

13-
<div id="airlock">
14-
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
15-
16-
<h2>Header Level 2</h2>
17-
18-
<ol>
19-
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
20-
<li>Aliquam tincidunt mauris eu risus.</li>
21-
</ol>
22-
23-
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
24-
25-
<h3>Header Level 3</h3>
26-
27-
<ul>
28-
<li id="listone">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
29-
<li id="listtwo">Aliquam tincidunt mauris eu risus.</li>
30-
</ul>
31-
32-
<pre><code>
33-
#header h1 a {
34-
display: block;
35-
width: 300px;
36-
height: 80px;
37-
}
38-
</code></pre>
39-
</div>
30+
<article>
31+
<p>
32+
He was an old man who fished alone in a skiff in the Gulf Stream and he
33+
had gone eighty-four days now without taking a fish. In the first forty
34+
days a boy had been with him. But after forty days without a fish the
35+
boy's parents had told him that the old man was now definitely and
36+
finally <em>salao</em>, which is the worst form of unlucky, and the boy
37+
had gone at their orders in another boat which caught three good fish
38+
the first week. It made the boy sad to see the old man come in each day
39+
with his skiff empty and he always went down to help him carry either
40+
the coiled lines or the gaff and harpoon and the sail that was furled
41+
around the mast. The sail was patched with flour sacks and, furled, it
42+
looked like the flag of permanent defeat.
43+
</p>
44+
<p>
45+
The old man was thin and gaunt with deep wrinkles in the back of his
46+
neck. The brown blotches of the benevolent skin cancer the sun brings
47+
from its reflection on the tropic sea were on his cheeks. The blotches
48+
ran well down the sides of his face and his hands had the deep-creased
49+
scars from handling heavy fish on the cords. But none of these scars
50+
were fresh. They were as old as erosions in a fishless desert.
51+
</p>
52+
<p>
53+
Everything about him was old except his eyes and they were the same
54+
color as the sea and were cheerful and undefeated.
55+
</p>
56+
<p>
57+
&quot;Santiago,&quot; the boy said to him as they climbed the bank from
58+
where the skiff was hauled up. &quot;I could go with you again. We've
59+
made some money.&quot;
60+
</p>
61+
<p>The old man had taught the boy to fish and the boy loved him.</p>
62+
<p>
63+
&quot;No,&quot; the old man said. &quot;You're with a lucky boat. Stay
64+
with them.&quot;
65+
</p>
66+
<p>
67+
&quot;But remember how you went eighty-seven days without fish and then
68+
we caught big ones every day for three weeks.&quot;
69+
</p>
70+
<p>
71+
&quot;I remember,&quot; the old man said. &quot;I know you did not leave
72+
me because you doubted.&quot;
73+
</p>
74+
<p>
75+
&quot;It was papa made me leave. I am a boy and I must obey him.&quot;
76+
</p>
77+
<p>
78+
&quot;I know,&quot; the old man said. &quot;It is quite normal.&quot;
79+
</p>
80+
<p>&quot;He hasn't much faith.&quot;</p>
81+
<p>
82+
&quot;No,&quot; the old man said. &quot;But we have. Haven't we?&quot;
83+
</p>
84+
<p>
85+
&quot;Yes,&quot; the boy said. &quot;Can I offer you a beer on the
86+
Terrace and then we'll take the stuff home.&quot;
87+
</p>
88+
<p>
89+
&quot;Why not?&quot; the old man said. &quot;Between fishermen.&quot;
90+
</p>
91+
<p>
92+
They sat on the Terrace and many of the fishermen made fun of the old
93+
man and he was not angry. Others, of the older fishermen, looked at him
94+
and were sad. But they did not show it and they spoke politely about the
95+
current and the depths they had drifted their lines at and the steady
96+
good weather and of what they had seen. The successful fishermen of that
97+
day were already in and had butchered their marlin out and carried them
98+
laid full length across two planks, with two men staggering at the end
99+
of each plank, to the fish house where they waited for the ice truck to
100+
carry them to the market in Havana. Those who had caught sharks had
101+
taken them to the shark factory on the other side of the cove where they
102+
were hoisted on a block and tackle, their livers removed, their fins cut
103+
off and their hides skinned out and their flesh cut into strips for
104+
salting.
105+
</p>
106+
<p>
107+
When the wind was in the east a smell came across the harbour from the
108+
shark factory; but today there was only the faint edge of the odour
109+
because the wind had backed into the north and then dropped off and it
110+
was pleasant and sunny on the Terrace.
111+
</p>
112+
</article>
40113

41114
<!-- The main Annotator script -->
42115
<script src="pkg/annotator.min.js"></script>
43116
<script>
44117
if (typeof annotator === 'undefined') {
45-
alert("Ooops! it looks like you haven't built the Annotator concatenation file. " +
46-
"Either download a tagged release from GitHub, or build the package " +
47-
"by running `make pkg` (or `./build/tools -a`).");
118+
alert("Oops! it looks like you haven't built Annotator. " +
119+
"Either download a tagged release from GitHub, or build the " +
120+
"package by running `make`");
48121
} else {
49122
var app = new annotator.App();
50123
app.include(annotator.ui.main);
51124
app.start();
52125
}
53126
</script>
54127
</body>
55-
56-
57128
</html>

‎dev.html

+18-11
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,26 @@
22
<html lang="en">
33
<head>
44
<meta charset="utf-8">
5-
<title>JS annotation test</title>
5+
<title>Annotator development</title>
66
<style>
7-
/* This is evil but people do it. This checks that we correctly
8-
calculate the position of the adder and other UI elements in any
9-
situation. */
107
body {
8+
font-family: Georgia, Cambria, "Times New Roman", Times, serif;
9+
letter-spacing: 0.01rem;
10+
font-size: 22px;
11+
line-height: 1.5;
12+
text-rendering: optimizeLegibility;
13+
-webkit-font-smoothing: antialiased;
14+
15+
/* This is evil but people do it. This checks that we correctly
16+
calculate the position of the adder and other UI elements in any
17+
situation. */
1118
position: relative;
1219
margin-top: 3em;
1320
}
21+
article {
22+
width: 80%;
23+
margin: 2em auto;
24+
}
1425
#absolute {
1526
border: 1px solid #eee;
1627
background: #FFFFFF;
@@ -37,11 +48,7 @@
3748
</head>
3849

3950
<body>
40-
<header>
41-
<h1>Javascript annotation service test</h1>
42-
</header>
43-
44-
<div id="airlock">
51+
<article>
4552
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
4653

4754
<h2>Header Level 2</h2>
@@ -103,13 +110,13 @@ <h3>Header Level 3</h3>
103110
</tr>
104111
</tbody>
105112
</table>
106-
</div>
113+
</article>
107114

108115
<script>var annotator = 'noConflictBeforeValue';</script>
109116
<script src="bundle/annotator.js"></script>
110117

111118
<script>
112-
var elem = document.getElementById('airlock');
119+
var elem = document.querySelector('article');
113120
var app = new annotator.App()
114121
.include(annotator.ui.main, {element: elem})
115122
.include(annotator.ui.filter.standalone)

0 commit comments

Comments
 (0)