/
demo.html
121 lines (98 loc) · 8.76 KB
/
demo.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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Encouraging Commentary: Test Thread</title>
<link rel="stylesheet" href="demo/reset.css" type="text/css" media="screen" />
<link rel="stylesheet" href="demo/demo.css" type="text/css" media="screen" />
<link rel="stylesheet" href="stylesheets/base.css" type="text/css" media="screen" />
</head>
<body>
<h1>Encouraged Commentary</h1>
<p>Below is a simple demo of the encouraged commentary system.</p>
<div class="quotable">
<h2>Quotable Content</h2>
<p>This is some quotable content. Setup as an example. You can highlight any of the text in this section of the site and use the respond button to quote it.</p>
<h2>This is Another Heading</h2>
<p>You can highlight across multiple paragraphs and headings without issue.</p>
</div>
<h3 id="comments">3 Responses to “Test Article”</h3>
<div class="navigation">
<div class="alignleft"></div>
<div class="alignright"></div>
</div>
<ol class="commentlist sorted-commentary">
<li class="comment even thread-even depth-1" id="comment-33">
<div id="div-comment-33">
<div class="comment-author vcard">
<img alt='' src='http://www.gravatar.com/avatar/dc36565cc2376197358fa27ed4c47253?s=32&d=http%3A%2F%2Fwww.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G' class='avatar avatar-32 photo' height='32' width='32' /> <cite class="fn"><a href='http://example.com' rel='external nofollow' class='url comment-author-name'>Jon Doe</a></cite> <span class="says">says:</span> </div>
<div class="comment-meta commentmetadata"><a href="http://sites/PERSONAL/DontTrustThisGuy.com/dttg/wordpress/?p=14&cpage=1#comment-33" class="comment-permalink">January 4, 2009 at 4:25 pm</a></div>
<div class="entry-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer faucibus. In vitae enim. Phasellus placerat, metus sit amet mollis consectetur, tortor urna gravida magna, sed auctor nulla elit eu elit. Quisque turpis nulla, tristique ac, pretium eget, malesuada et, est. Donec mauris leo, adipiscing eget, facilisis non, ornare consequat, libero. Ut eleifend nulla in magna. Sed in ante eu turpis bibendum vulputate. Aliquam eleifend tortor a eros. Donec dui. Nam ligula. Vestibulum et nisl. Donec in odio. Proin tincidunt magna sit amet sem. Mauris ac purus. Fusce vel sapien. Vivamus lorem nulla, porttitor id, accumsan ut, feugiat sed, magna. Suspendisse quam lectus, consectetur eu, vulputate eget, faucibus quis, risus.</p>
<p>Fusce neque. Etiam elementum venenatis justo. Duis dapibus, orci quis eleifend placerat, orci purus interdum lorem, at hendrerit enim dui non purus. Suspendisse vitae eros. Pellentesque nec sem. Maecenas mattis ornare metus. Proin odio neque, ultricies sed, convallis vel, sodales eget, lacus. In velit ligula, mollis eu, posuere ac, consequat ac, enim. Etiam et nisl. Maecenas nec erat. Aliquam vel orci eget mi luctus venenatis. Fusce scelerisque interdum eros. Mauris faucibus, nunc sit amet sollicitudin congue, nulla massa faucibus neque, a tempor ipsum mauris vitae justo.</p>
</div>
<div class="reply">
</div>
</div>
</li>
<li class="comment odd alt thread-odd thread-alt depth-1" id="comment-34">
<div id="div-comment-34">
<div class="comment-author vcard">
<img alt='' src='http://www.gravatar.com/avatar/9e26471d35a78862c17e467d87cddedf?s=32&d=http%3A%2F%2Fwww.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G' class='avatar avatar-32 photo' height='32' width='32' /> <cite class="fn"><a href='http://example.com' rel='external nofollow' class='url comment-author-name'>Jane Doe</a></cite> <span class="says">says:</span> </div>
<div class="comment-meta commentmetadata"><a href="http://sites/PERSONAL/DontTrustThisGuy.com/dttg/wordpress/?p=14&cpage=1#comment-34" class="comment-permalink">January 4, 2009 at 4:26 pm</a></div>
<div class="entry-content">
<p><a href="http://sites/PERSONAL/DontTrustThisGuy.com/dttg/wordpress/?p=14#comment-33" rel="nofollow">@Jon Doe</a>:</p>
<blockquote><p>Phasellus placerat, metus sit amet mollis consectetur, tortor urna gravida magna, sed auctor nulla elit eu elit. Quisque turpis nulla, tristique ac, pretium eget, malesuada et, est. Donec mauris leo, adipiscing eget, facilisis non, ornare consequat, libero. Ut eleifend nulla in magna. Sed in ante eu turpis bibendum vulputate. </p></blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce magna justo, tempus.</p>
</div>
<div class="reply">
</div>
</div>
</li>
<li class="comment even thread-even depth-1" id="comment-35">
<div id="div-comment-35">
<div class="comment-author vcard">
<img alt='' src='http://www.gravatar.com/avatar/dc36565cc2376197358fa27ed4c47253?s=32&d=http%3A%2F%2Fwww.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G' class='avatar avatar-32 photo' height='32' width='32' /> <cite class="fn"><a href='http://example.com' rel='external nofollow' class='url comment-author-name'>Jon Doe</a></cite> <span class="says">says:</span> </div>
<div class="comment-meta commentmetadata"><a href="http://sites/PERSONAL/DontTrustThisGuy.com/dttg/wordpress/?p=14&cpage=1#comment-35" class="comment-permalink">January 4, 2009 at 4:27 pm</a></div>
<div class="entry-content">
<p><a href="http://sites/PERSONAL/DontTrustThisGuy.com/dttg/wordpress/?p=14#comment-34" rel="nofollow">@Jane Doe</a>:</p>
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></blockquote>
<p>Etiam pharetra risus eget nisi. Donec rhoncus ipsum ut metus. Nulla sollicitudin sagittis elit. Mauris tincidunt mauris non massa. Suspendisse eleifend, lectus vitae vulputate elementum, magna elit vestibulum diam, id vehicula diam tortor eu purus. Donec eros neque, condimentum sed, blandit vitae, molestie eu, neque. Mauris rhoncus urna in felis. Mauris risus. Aenean et nibh a dolor ornare sodales. Etiam rutrum, turpis in porttitor semper, felis mi elementum lorem, quis elementum magna dui ac ipsum. Sed tellus.</p></div>
<div class="reply">
</div>
</div>
</li>
</ol>
<div class="navigation">
<div class="alignleft"></div>
<div class="alignright"></div>
</div>
<div id="respond">
<form action="demo.html" method="post" id="commentform" class="encouraged-form">
<h3>Leave a Reply</h3>
<div class="cancel-comment-reply">
<small><a rel="nofollow" id="cancel-comment-reply-link" href="/PERSONAL/DontTrustThisGuy.com/dttg/wordpress/?p=14#respond" style="display:none;">Click here to cancel reply.</a></small>
</div>
<p><input type="text" name="author" id="author" value="Jon Doe" size="22" tabindex="1" aria-required='true' />
<label for="author"><small>Name (required)</small></label></p>
<p><input type="text" name="email" id="email" value="jon@example.com" size="22" tabindex="2" aria-required='true' />
<label for="email"><small>Mail (will not be published) (required)</small></label></p>
<p><input type="text" name="url" id="url" value="http://example.com" size="22" tabindex="3" />
<label for="url"><small>Website</small></label></p>
<!--<p><small><strong>XHTML:</strong> You can use these tags: <code><a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> </code></small></p>-->
<p><textarea name="comment" id="comment" cols="100%" rows="10" tabindex="4"></textarea></p>
<p><input name="submit" type="submit" id="submit" tabindex="5" value="Submit Comment" />
<input type='hidden' name='comment_post_ID' value='14' id='comment_post_ID' />
<input type='hidden' name='comment_parent' id='comment_parent' value='0' />
</p>
</form>
</div>
<!-- end -->
</div>
<script type="text/javascript" charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<script src="javascript/jquery/jquery.scrollTo-min.js" type="text/javascript"></script>
<script src="javascript/jquery/encouraged-commentary-min.js" type="text/javascript"></script>
<p>THIS ELEMENT SHOULD ALWAYS PRINT LAST.</p>
</body>
</html>