chat examples
Jump to navigation
Jump to search
Examples of how chat transcripts are marked up currently, with the idea of moving towards a microformat for marking up logs/archives of chat sessions (IRC etc.) that are posted on the Web. Next steps are documenting chat-formats, and doing some chat-brainstorming.
Examples in the wild
IRC transcripts
These are plaintext logs with space separated fields, so are posted wrapped in <pre>
12:06 Tantek: what does the datetime stamp represent? 12:07 KevinMarks: in iRC, when it was said 12:07 Tantek: is it a point in time *before* they started speaking? 12:07 Tantek: or *after*? 12:07 Tantek: or somewhere in the *middle*? 12:07 KevinMarks: usually it is quantised to seconds 12:07 KevinMarks: and it is time the msg was received 12:07 Tantek: but the second they started typing or pressed return? 12:08 KevinMarks: prssed return i think
Or as plaintext + <br> (eg http://chocnvodka.blogware.com/blog/_archives/2005/8/25/1169654.html)
(22:20) gturneruk: oh, i just remembered. windows 95 is ten years old today
(22:22) Suw: good god. i mean, i shouldn't be surprised, it being 2005 and all. but still, where did that time go?
(22:22) gturneruk: lost clusters
(22:23) Suw: i obviously need to defrag
xChat2 log format
**** BEGIN LOGGING AT Wed May 14 04:36:29 2003 May 14 04:36:29 --> You are now talking on #test May 14 04:36:29 --- Topic for #test is Test Topic May 14 04:36:29 --- Topic for #test set by nick1 at Thu May 8 18:45:05 May 14 04:58:45 --- You are now known as nick1 May 14 05:03:44 --> nick1 ([email protected]) has joined #test May 14 05:05:48 <nick1> test message May 14 05:10:24 * nick1 test action May 14 05:11:19 <-- nick1 has quit (quit) **** ENDING LOGGING AT Fri Jul 4 00:28:22 2003
Snak log format
Log file opened at: 5/26/04 12:00:11 AM [12:00:11:] nick1: test message [12:10:29:] * nick1 test action [12:13:16:] ***: nick2 ([email protected]) has joined the channel [12:20:35:] ***: nick2 has quit IRC ("Computer going to sleep...") [12:21:31:] ***: You have joined the channel Log file closed at: 5/26/04 2:29:08 AM
Jabber transcripts
Jabber Transcript (from Jabber Dev Meeting)
<font class="timestamp">[15:39:01]</font> <font class="normal"><DaleH></font> hey david, any chance of a pm?<br/>
<font class="timestamp">[15:41:49]</font> <font class="normal"><yipdw></font> sure<br/>
<font class="timestamp">[15:41:58]</font> <font class="normal"><yipdw></font> I'm just swimming in ActiveRecord junk right now :p<br/>
<font class="timestamp">[15:42:08]</font> <font class="emote">stpeter reads <a href="http://coccinella.sourceforge.net/docs/MemoSyncSVG-XMPP.txt">http://coccinella.sourceforge.net/docs/MemoSyncSVG-XMPP.txt</a> :-)</font><br/>
<font class="timestamp">[15:42:52]</font> <font class="normal"><yipdw></font> ooh, that memo expanded since I last read it<br/>
<font class="timestamp">[15:42:55]</font> <font class="normal"><yipdw></font> *re-reads that one*<br/>
<font class="timestamp">[15:46:32]</font> <font class="system">remdeprived leaves the room</font><br/>
<font class="timestamp">[15:46:47]</font> <font class="system">remdeprived joins the room</font><br/>
Coccinella log format
set message([incr uid]) {-type chat -name [email protected] -thread 620c2bff-7e5332c1 -time 20060812T17:04:58 -body hi -tag me}
set message([incr uid]) {-type chat -name echo.example.org -thread 620c2bff-7e5332c1 -time 20060812T17:04:58 -body hi -tag you}
set message([incr uid]) {-type chat -name [email protected] -thread 620c2bff-7e5332c1 -time 20060812T17:05:17 -body {this is a test w
ith a but that replies all my messages} -tag me}
set message([incr uid]) {-type chat -name echo.example.org -thread 620c2bff-7e5332c1 -time 20060812T17:05:17 -body {this is a test wit
h a but that replies all my messages} -tag you}
set message([incr uid]) {-type chat -name [email protected] -thread 620c2bff-7e5332c1 -time 20060812T17:05:26 -body {cool, isn't it?
B-)} -tag me}
set message([incr uid]) {-type chat -name echo.example.org -thread 620c2bff-7e5332c1 -time 20060812T17:05:26 -body {cool, isn't it? B-
)} -tag you}
iChat transcripts
iChat handles timestamps differently, inserting them between statement blocks, every 5 minutes.
12:25 AM Reconnecting to tantekatwork… Kevin Marks: So, iChat shows timestamps between entries Tantek: yes Tantek: what about Adium? 12:30 AM Kevin Marks: my copy is 230 days old...
Bash.org
Bash.org and other QDBs collect funny IRC transcripts and let people vote on them. They use plaintext + <br />, wrapped in <p> http://bash.org/?23396
<Donut[AFK]> HEY EURAKARTE
<Donut[AFK]> INSULT
<Eurakarte> RETORT
<Donut[AFK]> COUNTER-RETORT
<Eurakarte> QUESTIONING OF SEXUAL PREFERENCE
<Donut[AFK]> SUGGESTION TO SHUT THE FUCK UP
<Eurakarte> NOTATION THAT YOU CREATE A VACUUM
<Donut[AFK]> RIPOSTE
<Donut[AFK]> ADDON RIPOSTE
<Eurakarte> COUNTER-RIPOSTE
<Donut[AFK]> COUNTER-COUNTER RIPOSTE
<Eurakarte> NONSENSICAL STATEMENT INVOLVING PLANKTON
<Miles_Prower> RESPONSE TO RANDOM STATEMENT AND THREAT TO BAN OPPOSING SIDES
<Eurakarte> WORDS OF PRAISE FOR FISHFOOD
<Miles_Prower> ACKNOWLEDGEMENT AND ACCEPTENCE OF TERMS
Log Library
Log Library displays a tabular format with divs
<div class="row" name="GusVanNos">
<div class="timestamp">18:36:28</div>
<div class="nick"><GusVanNos></div>
<div class="message">.+. is a lazy way of saying .{2,}</div>
</div>
<div class="row" name="jawong">
<div class="timestamp">18:36:48</div>
<div class="nick"><jawong></div>
<div class="message">your model is waaaay better, xal.</div>
</div>
- row
- timestamp
- nick
- message
JWZ
http://www.jwz.org/hacks/irc2html.pl was used to generate the irc logs for Bar Camp Dallas : http://barcamp.org/f/barcampdallas-irc.html
<table bgcolor="#ffffff">
<tbody>
<tr>
<td bgcolor="#eeeeee" nowrap="nowrap" valign="top">
<font color="#000000">
<i>[2006/01/28 11:21:34] </i>
</font>
</td>
<td bgcolor="#eeeeee" valign="top">
<font color="#000000">
<i>@ jdunck joined channel #barcampdallas</i>
</font>
</td>
</tr>
<tr>
<td nowrap="nowrap" valign="top">
<font color="#000000">
<i>[2006/01/28 11:21:40] </i>
</font>
</td>
<td valign="top">
<font color="#000000">
<i><tantek> is there a subethaedit-compatible client on windows?</i>
</font>
</td>
</tr>
...
MSN Messenger XML Format Logs
Examples at: http://stupidpeople.commo.de/logs/After%20August%202004/, there are a bunch there but not sure how widespread it is. General structure appears to be a Log element wrapper, with toplevel Join and Message elements. It's a little strange how the To element has children indicating all the recepients, normally that would be implicit, but there may be a reason that isn't clear just from this example. Original posting for example: http://microformats.org/discuss/mail/microformats-discuss/2006-February/002937.html Note that these get published with a stylesheet that makes them viewable directly, they appear to be human-directed.
<Log FirstSessionID="1" LastSessionID="1">
<Join Date="9/12/2004" Time="6:48:20 PM" DateTime="2004-09-12T23:48:20.716Z" SessionID="1">
<User FriendlyName="'' Quando não tem oq se ama...É preciso amar oq se tem!!! ''"/>
<Text Style="color:#008000; ">
'' Quando não tem oq se ama...É preciso amar oq se tem!!! '' has been added to the conversation.
</Text>
</Join>
<Message Date="9/12/2004" Time="6:48:20 PM" DateTime="2004-09-12T23:48:20.846Z" SessionID="1">
<From>
<User FriendlyName="Você vive inventando maneiras pra dizer semp pra dizer que me quer!!"/>
</From>
<To>
<User FriendlyName="http://commo.de/StupidPeople/"/>
<User FriendlyName=":@TE ODEIO:@"/>
<User FriendlyName="|I{•------»Victor«------•}I|1 2 3 o corh fregueis! -LLUSSAA EOOOO"/>
<User FriendlyName=""Tô com sono!!! Acho que vo durmi!!!""/>
<User FriendlyName="||||Gabriel||||| A Clockwork Orange.."/>
<User FriendlyName="Pensar para acertar, Calar para resistir, Agir para vencer"/>
<User FriendlyName="*>.Jessy.<*genteeeeeeeemmmmmmm..trokeiser tá aqui:09098217635!!!"/>
</To>
<Text Style="font-family:Sylfaen; color:#ff0000; ">
nossa qnta gente
</Text>
</Message>
</Log>
- Log
- Join
- User
- FriendlyName
- Text
- User
- Message
- From
- User
- To
- User*
- Text
- From
- Join
MSN Messenger Marked Up By Anne van Kesteren
Found at: http://annevankesteren.nl/2005/10/msn-sessions
<p>Late night <abbr title="Microsoft Network">MSN</abbr> sessions…
<ol class="conversation">
<li>
<cite>zcorpan</cite>
<q><code><form></code> does not imply <code><body></code> in <abbr title="Internet Explorer">IE</abbr>6</q>
<li>
<cite>anne</cite>
<q>interesting</q>
<li>
<cite>zcorpan</cite>
<q>it’s worse…</q>
<li>
<cite>zcorpan</cite>
<blockquote><pre><!DOCTYPE html>
<title>001</title>
<style>
div { position:relative; }
form { width:40em; }
</style>
<div>
<form>
<p>test
</form>
</div></pre></blockquote>
<li>
<cite>zcorpan</cite>
<q><code>innerHTML</code> for that:</q>
<li>
<cite>zcorpan</cite>
<blockquote><pre><HTML><HEAD><TITLE>001</TITLE>
<STYLE>
div { position:relative; }
form { width:40em; }
</STYLE>
<FORM></HEAD>
<BODY>
<DIV>
<P>test </FORM></P></DIV></BODY></HTML></pre></blockquote>
<li>
<cite>anne</cite>
<q>ah, totally <abbr>IE</abbr></q>
<li>
<cite>zcorpan</cite>
<q>the contents of the div <ins>are</ins> invisible</q>
<li>
<cite>anne</cite>
<q>hmm…</q>
<li>
<cite>anne</cite>
<q>o well</q>
<li>
<cite>anne</cite>
<q>debugging that sucks</q>
<li>
<cite>anne</cite>
<q>emulating it might be cool</q>
<li>
<cite>anne</cite>
<q>building <abbr>IE</abbr> again</q>
<li>
<cite>zcorpan</cite>
<q>the thought of it hurts my brains</q>
<li>
<cite>zcorpan</cite>
<q><code>javascript:alert(document.getElementsByTagName("!")[0].nodeValue)</code></q>
<li>
<cite>anne</cite>
<q>you’re so crazy</q>
<li>
<cite>zcorpan</cite>
<q>try that in a document that has a doctype declaration, with <abbr>IE</abbr></q>
<li>
<cite>anne</cite>
<q>heh</q>
</ol>
<p>Later on:
<ol class="conversation">
<li>
<cite>zcorpan</cite>
<q>how can a node that is <code>nodeType</code> 8 be returned by <code>getElementsByTagName</code>?</q>
<li>
<cite>anne</cite>
<q>euh, good question</q>
</ol>
- Analysis TBD
ILRT Logger Bot Format
Found at: http://chatlogs.planetrdf.com/swig/, generated by: http://cvs.ilrt.org/cvsweb/redland/logger/, there are three formats: HTML, plain text, and RDF. The RDF format is described on the chat-formats page, this entry discussed the HTML and plain text files, as they appear to be directed at people.
<div class="log">
<p>
<span class="time" id="T00-27-42"><a href="#T00-27-42">00:27:42</a></span>
<span class="nick"><CaptSolo></span>
<span class="comment">Gromgull: nice quote re. x years later</span>
</p>
<p>
<span class="time" id="T00-27-57"><a href="#T00-27-57">00:27:57</a></span>
<span class="nick"><CaptSolo></span>
<span class="comment">Gromgull: what could one do with those 17mb of invalid n3?</span>
</p>
<p>
<span class="time" id="T01-38-48"><a href="#T01-38-48">01:38:48</a></span>
<span class="nick"><karlUshi></span>
<span class="comment">
<a href="http://aaronland.info/python/pyupcoming/">
http://aaronland.info/python/pyupcoming/
</a>
</span>
</p>
</div>
- log
- time
- nick
- comment
- href?
Trillian Format
This is for an AIM chat, but one for a Yahoo! chat looks the same. It is saved as plaintext as well as XML. (user1 is local). This is a description of the plaintext format.
Session Start (user1:user2): Fri Apr 01 17:43:06 2005
[17:43] user2: ping
[17:43] *** Auto-response sent to user2: My hovercraft is full of eels.
[17:46] user1: hey
Session Close (user2): Fri Apr 01 17:47:00 2005
- log
- timestamp
- modifier? user
- message
Skype Format
When viewing archived conversations, this is what you get... What's up definition lists...? Oh yes!
<p>
Created on 2006-02-02 17:00:41.
</p>
<dl>
<dd>
<h3>
2005-10-11
</h3>
</dd>
<dt class="remote">
<a href="callto://" title="[rUsername]">Brian Oberkirch</a>: <span>14:58:25</span>
</dt>
<dd>
Chris
</dd>
<dt class="remote">
<a href="callto://[rUsername]" title="[rUsername]">Brian Oberkirch</a>: <span>14:58:27</span>
</dt>
<dd>
http://www.web20show.com/articles/2005/10/10/episode-3
</dd>
<dt class="local">
Chris Messina: <span>14:58:41</span>
</dt>
<dd>
ok
</dd>
<dt class="remote">
<a href="callto://[rUsername]" title="[rUsername]">Brian Oberkirch</a>: <span>14:58:45</span>
</dt>
<dd>
These guys mention your comment on the 37s thread during their podcast
</dd>
<dt class="local">
Chris Messina: <span>14:58:51</span>
</dt>
<dd>
seriously!?
</dd>
<dt class="local">
Chris Messina: <span>14:58:52</span>
</dt>
<dd>
ack
</dd>
<dt class="remote">
<a href="callto://[rUsername]" title="[rUsername]">Brian Oberkirch</a>: <span>14:59:04</span>
</dt>
<dd>
It's what it says in the transcript
</dd>
</dl>
campfirenow.com
<table class="chat">
<tbody id="chat">
<tr class="timestamp_message message" id="message_2520523" style="">
<td class="date"><span>Apr 26</span></td>
<td class="time"><div>2:10 PM</div></td>
</tr>
<tr class="system_message message" id="message_2520524" style="">
<td class="person"> </td>
<td class="body"><div>The transcript has been cleared</div></td>
</tr>
<tr class="timestamp_message message" id="message_2520953" style="">
<td class="date"><span style="display:none">Apr 26</span></td>
<td class="time"><div>2:20 PM</div></td>
</tr>
<tr class="system_message message" id="message_2520954" style="">
<td class="person"> </td>
<td class="body"><div>The transcript has been cleared</div></td>
</tr>
<tr class="enter_message message user_52792" id="message_2521028" style="">
<td class="person">Scott R.</td>
<td class="body"><div>has entered the room</div></td>
</tr>
<tr class="text_message message user_52792 you" id="message_2521046" style="">
<td class="person"><span>Scott R.</span></td>
<td class="body"><div>so....chat...</div></td>
</tr>
</tbody>
</table>
Reported Speech
I took a transcript of a council meeting and marked it up
<ol style="list-style:disc">
<li><cite>Councilmember Yeager</cite>: <q>And I guess for you Albert on young people's theater, my understanding is it's the same budget recommendation for the organization this year as last year?</q></li>
<li><cite>Albert Balagso</cite>: <q>That's correct. 100% cost recovery as directed in the June budget message last year.</q></li>
<li><cite>Councilmember Yeager</cite>: <q>How is that going to be tracked? I know they didn't get quite to 100% this year. With all the food they were able to collect and all that other kind of stuff, I guess is it a flexible amount? Is it sort of hoping to get to 100 but if it's 90 it's okay? I'm just trying to figure -- I know they're very nervous about their funding and I wasn't quite sure what we could tell them to make them feel more reassured.</q></li>
<li><cite>Albert Balagso</cite>: <q>We have been tracking their cost recovery and they are doing very well. They're very close. In the end our budget balances. We make up from some other part of our overall budget. Over the course of a couple of years or three years, establish a baseline and establish exactly where that is going to be. I'm reluctant to lower the bar and try to get it to 100% because that might be achievable. Staff has worked with the group to see if we can look at revamping some of the services that are out there. Maybe we're doing too much and spending too much versus the return we're getting. So these are things that we're looking at to tighten the strings and try to make it work a little bit better. But they need to take several years of trying to establish exactly what is the capacity and the baseline of what they can recover.</q></li>
</ol>
Live Chat Examples
Microformats Logbot
An example irc transcript from mflogbot uses semantic HTML:
<ol id="log">
<li class="join" id="T090131">[<a href="#T090131"><abbr title="2006-06-10T09:01:31+00:00">09:01:31</abbr></a>] <span>* Kura ([email protected]) has joined #microformats</span></li>
<li class="message" id="T090158">[<a href="#T090158"><abbr title="2006-06-10T09:01:58+00:00">09:01:58</abbr></a>] <<cite>mfbot</cite>> <q>[[hcard]] <a href="http://microformats.org/wiki?title=hcard&diff=0&oldid=6547">http://microformats.org/wiki?title=hcard&diff=0&oldid=6547</a> * 1samaaron * (+16) Examples in the wild -</q></li>
<li class="message" id="T090216">[<a href="#T090216"><abbr title="2006-06-10T09:02:16+00:00">09:02:16</abbr></a>] <<cite>Kura</cite>> <q>tantek: you awake?</q></li>
<li class="message" id="T090252">[<a href="#T090252"><abbr title="2006-06-10T09:02:52+00:00">09:02:52</abbr></a>] <<cite>Marko</cite>> <q>heh I think not coz its a bit late in America atm :D</q></li>
<li class="message" id="T090315">[<a href="#T090315"><abbr title="2006-06-10T09:03:15+00:00">09:03:15</abbr></a>] <<cite>Kura</cite>> <q>Yeah but I was just chatting with an American :)</q></li>
<li class="message" id="T090320">[<a href="#T090320"><abbr title="2006-06-10T09:03:20+00:00">09:03:20</abbr></a>] <<cite>Kura</cite>> <q>they have their night owls</q></li>
<li class="message" id="T090326">[<a href="#T090326"><abbr title="2006-06-10T09:03:26+00:00">09:03:26</abbr></a>] <<cite>Kura</cite>> <q>but crap, hrmmmm...</q></li>
<li class="message" id="T090332">[<a href="#T090332"><abbr title="2006-06-10T09:03:32+00:00">09:03:32</abbr></a>] <<cite>Marko</cite>> <q>heh yeah me too</q></li>
<li class="quit" id="T090334">[<a href="#T090334"><abbr title="2006-06-10T09:03:34+00:00">09:03:34</abbr></a>] <span>* bunnywabbit_ ([email protected]) Quit (Nick collision from services.)</span></li>
</ol>
Loqi indiewebcamp archives
The Loqi bot in the indiewebcamp channel on IRC saves and publishes exceptionally well marked up IRC archives, with lots of microformats and links, including:
Additionally, different markup is used to distinguish:
- messages from nicknames (presumably people) in the channel
- joins to the channel (departures are not logged/shown apparently)
- wiki edits copied in the channel
- tweets copied to the channel
- retweets copied to the channel
Here is a fragment from 2013-10-28:
<div class="logs">
<div id="top" class="skip"><a href="#bottom">jump to bottom</a></div>
...
<div id="t1382987738" class="h-entry line msg-message "><time class="dt-published" datetime="2013-10-28T12:15:38-07:00"><a href="http://indiewebcamp.com/irc/2013-10-28/line/1382987738" class="u-url time" >12:15</a></time> <span class="nick"><<span class="p-author h-card"><a href="http://Tantek.com" class="author p-nickname p-name u-url">tantek</a></span>></span> <span class="p-content p-name">(since we did already have it indiemark explicitly!)</span></div>
<div id="t1382987740" class="h-entry line msg-message "><time class="dt-published" datetime="2013-10-28T19:15:40+00:00"><a href="http://indiewebcamp.com/irc/2013-10-28/line/1382987740" class="u-url time" >12:15</a></time> <span class="nick"><<span class="p-author h-card"><a href="http://waterpigs.co.uk" class="author p-nickname p-name u-url">barnabywalters</a></span>></span> <span class="p-content p-name">tantek: me too, considering it’s on indiemark</span></div>
<div id="t1382987744" class="h-entry line msg-message "><time class="dt-published" datetime="2013-10-28T19:15:44+00:00"><a href="http://indiewebcamp.com/irc/2013-10-28/line/1382987744" class="u-url time" >12:15</a></time> <span class="nick"><<span class="p-author h-card"><a href="http://waterpigs.co.uk" class="author p-nickname p-name u-url">barnabywalters</a></span>></span> <span class="p-content p-name">jinx</span></div>
<div id="t1382987758" class="h-entry line msg-message "><time class="dt-published" datetime="2013-10-28T19:15:58+00:00"><a href="http://indiewebcamp.com/irc/2013-10-28/line/1382987758" class="u-url time" >12:15</a></time> <span class="nick"><<span class="p-author h-card"><a href="http://waterpigs.co.uk" class="author p-nickname p-name u-url">barnabywalters</a></span>></span> <span class="p-content p-name">switching locations</span></div>
<div id="t1382987843" class="h-entry line msg-join "><time class="dt-published" datetime="2013-10-28T12:17:23-07:00"><a href="http://indiewebcamp.com/irc/2013-10-28/line/1382987843" class="u-url time" >12:17</a></time> <span class="p-content p-name">fmarier joined #indiewebcamp</span></div>
<div id="t1382987857" class="h-entry line msg-wiki "><time class="dt-published" datetime="2013-10-28T12:17:37-07:00"><a href="http://indiewebcamp.com/irc/2013-10-28/line/1382987857" class="u-url time" >12:17</a></time> <span class="nick"><<span class="p-author h-card"><span class="p-nickname p-name">Loqi</span></span>></span> <span class="p-content p-name">[[IndieMark]] <a href="http://indiewebcamp.com/wiki/index.php?diff=5635&oldid=5330&rcid=5700">http://indiewebcamp.com/wiki/index.php?diff=5635&oldid=5330&rcid=5700</a> * Tantek.com * (+43) link up navigation and tags a bit</span></div>
<div id="t1382988776" class="h-entry line msg-twitter "><time class="dt-published" datetime="2013-10-28T12:32:56-07:00"><a href="http://twtr.io/eBBQoQEyGY" class="u-url time" >12:32</a></time> <span class="nick"><<a href="https://twitter.com/t" class="author p-author h-card p-url">@<span class="p-name p-nickname">t</span></a>></span> <span class="p-content p-name">Updated: How To Export Your Data From Dopplr <a href="http://tantek.com/2013/294/b1/export-your-data-from-dopplr">http://tantek.com/2013/294/b1/export-your-data-from-dopplr</a> <a href="http://twitter.com/dopplr">@dopplr</a> shutdown in 4 days. #ownyourdata #indieweb (ttk.me t4Sm1)</span></div>
<div id="t1382988826" class="h-entry line msg-twitter retweet"><time class="dt-published" datetime="2013-10-28T12:33:46-07:00"><a href="http://twtr.io/eBBVNt2U7U" class="u-url time" >12:33</a></time> <span class="nick"><<a href="https://twitter.com/fdevillamil" class="author p-author h-card p-url">@<span class="p-name p-nickname">fdevillamil</span></a>></span> <span class="p-content p-name">RT <a href="http://twitter.com/t">@t</a>: Updated: How To Export Your Data From Dopplr <a href="http://tantek.com/2013/294/b1/export-your-data-from-dopplr">http://tantek.com/2013/294/b1/export-your-data-from-dopplr</a> <a href="http://twitter.com/dopplr">@dopplr</a> shutdown in 4 days. #ownyourdata #indieweb (ttk.me t4Sm1)</span></div>
...
<div id="bottom" class="skip"><a href="#top">jump to top</a></div>
</div>