<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>twister</title>
<link id="stylecss" rel="stylesheet" href="css/style.css" type="text/css"/>
<link id="profilecss" rel="stylesheet" href="css/profile.css" type="text/css"/>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/jQueryPlugins.js"></script>
<script src="js/jquery.jsonrpcclient.js"></script>
<script src="js/jquery.storageapi.js"></script>
<script src="js/options.js"></script>
<script src="js/franc.js"></script>
<script src="js/notify.js"></script>
<script src="js/mobile_abstract.js"></script>
<script src="js/twister_io.js"></script>
<script src="js/polyglot.min.js"></script>
<script src="js/interface_localization.js"></script>
<script src="js/twister_network.js"></script>
<script src="js/twister_user.js"></script>
<script src="js/twister_formatpost.js"></script>
<script src="js/twister_following.js"></script>
<script src="js/twister_timeline.js"></script>
<script src="js/twister_newmsgs.js"></script>
<script src="js/twister_actions.js"></script>
<script src="js/twister_directmsg.js"></script>
<script src="js/interface_common.js"></script>
<script src="js/interface_home.js"></script>
<script src="js/jquery.textcomplete.min.js"></script>
<script src="js/twister-crypto-bundle.js"></script>
<link rel="shortcut icon" type="image/png" href="img/twister_mini.png" />
</head>
<body>
<!-- MENU SUPERIOR INIT -->
<nav class="userMenu">
<ul>
<li class="userMenu-home current"><a href="home.html">
<span class="selectable_theme theme_original label">Home</span>
<span class="selectable_theme theme_nin menu-news"></span>
</a></li>
<li class="userMenu-network selectable_theme theme_original theme_nin"><a class="label" href="network.html">Network</a></li>
<li class="userMenu-config">
<a class="userMenu-config-dropdown">
<div class="config-menu dialog-modal">
<div class="mini-profile-info selectable_theme theme_original">
<div class="mini-profile-photo"><img src="img/grayed_avatar_placeholder_24.png" alt="user-photo"/></div>
<a href="#" class="mini-profile-name">Fulano da Silva</a>
<span class="mini-profile-view">View</span>
</div>
<a class="dropdown-menu-item uri-shortener">URI_shortener</a>
<a class="dropdown-menu-item" href="options.html">Options</a>
<a class="dropdown-menu-item" href="network.html">Network config</a>
<a class="dropdown-menu-item" href="#/account">Setup account</a>
<a class="dropdown-menu-item" href="#/login">Change user</a>
<a class="dropdown-menu-item updates-check-client">Check for client's updates</a>
<a class="dropdown-menu-item dropdown-menu-following" href="#following">Following users</a>
<a class="dropdown-menu-item promoted-posts-only selectable_theme theme_original theme_calm" href="#">Switch to Promoted posts</a>
<a class="dropdown-menu-item direct-messages selectable_theme theme_original theme_calm" href="#">Direct Messages</a>
<a class="dropdown-menu-item groupmessages selectable_theme theme_original theme_calm" href="#">Group Messages</a>
</div>
</a>
</li>
<li class="userMenu-connections">
<a href="#">
<span class="messages-qtd" style="display:none;">0</span>
</a>
</li>
<li class="userMenu-messages">
<a href="#">
<span class="messages-qtd" style="display:none;">0</span>
</a>
</li>
<li class="userMenu-groupmessages">
<a href="#">
<span class="messages-qtd" style="display:none;">0</span>
</a>
</li>
<li class="userMenu-favs"><a href="#"></a></li>
<li class="userMenu-dhtindicator selectable_theme theme_calm"><a href="network.html"></a></li>
<!-- BUSCA -->
<li class="userMenu-search">
<input type="text" class="userMenu-search-field" placeholder="search"/>
<div class="search-results dialog-modal">
<ul class="userMenu-search-sugestions" style="display: none;">
<li><a href="#">Fulano</a></li>
<li><a href="#">Outro Fulano</a></li>
<li><a href="#">Mais outro</a></li>
</ul>
<ul class="userMenu-search-profiles"></ul>
</div>
</li>
</ul>
</nav>
<!-- MENU SUPERIOR END -->
<div class="wrapper">
<!-- LADO ESQUERDO DE MÓDULOS INIT -->
<div class="dashboard left">
<!-- THEME NIN added sub-menu (mentions, messages and edit profile) -->
<ul class="mini-profile-indicators selectable_theme theme_nin">
<li class="userMenu-connections">
<a href="#" title="Mentions"><span class="messages-qtd" style="display:none;">0</span><span>Mentions</span></a>
</li>
<li class="userMenu-groupmessages">
<a href="#" title="Group Messages"><span class="messages-qtd" style="display:none;">0</span><span>Group Messages</span></a>
</li>
<li class="userMenu-messages">
<a href="#" title="Direct Messages"><span class="messages-qtd" style="display:none;">0</span><span>Messages</span></a>
</li>
</ul>
<!-- PROFILE MODULE -->
<div class="module mini-profile">
<div class="mini-profile-info">
<div class="mini-profile-photo"><img src="img/grayed_avatar_placeholder_24.png" alt="user-photo"/></div>
<a href="#" class="mini-profile-name open-profile-modal"></a>
<span class="mini-profile-view">View</span>
</div>
<ul class="module profile-data">
<li><a href="#" class="open-profile-modal"><span class="posts-count"> </span><span class="label">Posts</span></a></li>
<li><a href="#following" class="open-following-page"><span class="following-count"> </span><span class="label">Following</span></a></li>
<li><a class="open-followers"><span class="followers-count"></span><span class="label">Followers</span> *</a></li>
</ul>
<div class="post-area">
<form class="post-area-new">
<textarea placeholder="New Post..."></textarea>
<div class="post-area-extras">
<span class="post-area-attach" style="display: none;">
<input type="file" id="fileInputAttach" style="font-size: 10px; width: 135px;"/>
</span>
<span class="post-area-remaining">140</span>
<button class="undo-unicode disabled" disabled>undo</button>
<button class="post-submit disabled" disabled>post</button>
</div>
</form>
</div>
</div>
<!-- WHO TO FOLLOW MODULE -->
<div class="module who-to-follow" style="display: none;"></div>
<!-- TOP TRENDS MODULE -->
<div class="module toptrends" style="display: none;"></div>
<!-- TWISTDAY REMINDER MODULE -->
<div class="module twistday-reminder" style="display: none;"></div>
<div class="module new-users" style="display: none;"></div>
</div>
<!-- LADO ESQUERDO DE MÓDULOS END -->
<!-- ÁREA DE POSTS INIT -->
<div class="postboard">
<h2>
<span>Postboard</span>
<!-- o botão de novas postagens deve ser ocultado quando o usuário clicá-lo via javascript -->
<button class="postboard-news selectable_theme theme_original theme_calm" style="display: none;"></button>
</h2>
<!-- Tabs to switch between promoted post and normal posts-->
<ul class="promoted-posts-only promoted selectable_theme theme_nin">
<li class="normal-posts active"><span>Normal posts</span></li>
<li class="promoted-posts disabled"><span>Promoted posts</span></li>
</ul>
<!-- Post area on top of postboard -->
<div id="postboard-top" class=" selectable_theme theme_nin">
<div class="post-area">
<form class="post-area-new">
<textarea placeholder="New Post..."></textarea>
<div class="post-area-extras">
<span class="post-area-attach" style="display: none;">
<input type="file" id="fileInputAttach" style="font-size: 10px;"/>
</span>
<span class="post-area-remaining">140</span>
<button class="undo-unicode disabled" disabled>undo</button>
<button class="post-submit disabled" disabled>post</button>
</div>
</form>
</div>
<!-- User's pic -->
<div class="profile-photo"><img src="img/genericPerson.png" alt="user-photo"/></div>
</div>
<!-- END postboard-top -->
<ol id="posts" class="postboard-posts">
</ol>
<div class="postboard-loading" style="display: none;">
<div></div>
</div>
</div>
<!-- ÁREA DE POSTS END -->
<div class="dashboard right"></div>
</div>
<ul id="modals-minimized"></ul>
<!-- TEMPLATES INIT -->
<div id="templates" style="display:none;">
<div id="search-profile-template">
<li>
<div class="mini-profile-info">
<a class="open-profile-modal">
<img class="mini-profile-photo" src="img/grayed_avatar_placeholder_24.png" alt="user-photo" />
<span class="mini-screen-name">@<b></b></span>
<span class="mini-profile-name"></span>
</a>
<button class="follow">Follow</button>
</div>
</li>
</div>
<!-- TEMPLATE DE WHO-TO-FOLLOW MODULE -->
<div id="who-to-follow-template">
<div>
<h3 class="label">Who to Follow</h3>
<small>.</small>
<a class="refresh-users">Refresh</a>
<small>.</small>
<a class="view-all-users" href="#whotofollow">View All</a>
<ol class="follow-suggestions"></ol>
</div>
<div class="loading-roller">
<div></div>
</div>
</div>
<!-- TEMPLATE OF NEW-USERS MODULE -->
<div id="new-users-template">
<div>
<h3 class="label">New Users</h3>
<small>.</small>
<a class="refresh-users">Refresh</a>
<small>.</small>
<a class="view-all-users" href="#newusers">View All</a>
<ol class="follow-suggestions"></ol>
</div>
<div class="loading-roller">
<div></div>
</div>
</div>
<!-- TEMPLATE DE TOP TRENDS MODULE -->
<div id="toptrends-template">
<div>
<h3 class="label">Top Trends</h3>
<small>.</small>
<a class="refresh-toptrends">Refresh</a>
<ol class="toptrends-list"></ol>
</div>
<div class="loading-roller">
<div></div>
</div>
</div>
<!-- TEMPLATE DE TWISTDAY REMINDER MODULE -->
<div id="twistday-reminder-template">
<div>
<h3 class="label">Who's celebrating Twistday</h3>
<small>.</small>
<a class="refresh label">Refresh</a>
<div class="current">
<h4 class="label">Today's luckies:</h4>
<ol class="list">
<!-- use "twistday-reminder-suggestion-template" here -->
</ol>
</div>
<div class="upcoming">
<h4 class="label">Upcoming ones:</h4>
<ol class="list">
<!-- use "twistday-reminder-suggestion-template" here -->
</ol>
</div>
</div>
<div class="loading-roller">
<div></div>
</div>
</div>
<!-- TEMPLATE DE TWISTDAY REMINDER SUGGESTION -->
<li id="twistday-reminder-suggestion-template" class="twister-user">
<div class="twister-user-photo">
<a href="#" class="twister-user-name open-profile-modal">
<img class="twister-user-photo" src="img/grayed_avatar_placeholder_24.png" alt="user-photo"/>
</a>
</div>
<div class="twister-user-info" data-screen-name="">
<a href="#" class="twister-user-name open-profile-modal">
<div class="twister-user-full"></div>
<div class="twister-user-tag"></div>
</a>
</div>
<div>
<span class="twisterday"></span>
</div>
</li>
<div id="template-whotofollow-peer">
<li class="twister-user">
<div class="">
<a href="#" class="twister-user-name open-profile-modal">
<img class="twister-user-photo" src="img/grayed_avatar_placeholder_24.png" alt="user-photo"/>
</a>
</div>
<div class="twister-user-info" data-screen-name="">
<a href="#" class="twister-user-name open-profile-modal">
<span class="twister-user-full"></span>
<span class="twister-user-tag"></span>
</a>
<div class="bio"></div>
<div class="followers">
<span class="label">Followed by</span>
<a href="#" class="twister-by-user-name open-profile-modal">
<span class="followed-by"></span>
</a>
</div>
<a class="twister-user-remove">×</a>
<div class="latest-activity" data-screen-name="" data-id="" data-time="0">
<span class="label">Last activity</span>
<span class="time"></span>
</div>
<button class="follow">Follow</button>
</div>
</li>
</div>
<!-- TEMPLATE DA OL INVÓLUCRO DAS LIST ELEMENTS DO POST EXPANDIDO INIT -->
<ol class="expanded-post">
</ol>
<!-- TEMPLATE DA OL INVÓLUCRO DAS LIST ELEMENTS DO POST EXPANDIDO END -->
<!-- TEMPLATE DOS 3 TIPOS DE LI DO POST EXPANDIDO INIT -->
<li class="ancestor module post">
</li>
<div id="post-preview-template">
<div id="post-preview" class="post-text">
</div>
</div>
<div id="template-post-textarea-edit-bar">
<div class="post-textarea-edit-bar"><!-- TODO add buttons to format text --></div>
</div>
<div id="template-shorten-uri">
<a class="shorten-uri">shorten URL</a>
</div>
<div id="template-post">
<li class="module post" data-time="">
<div class="post-data" data-userpost="" data-content_to_rt="" data-content_to_sigrt=""
data-screen-name="" data-id="" data-text="" data-text-mentions="">
<div class="post-photo"><img class="avatar" src="img/grayed_avatar_placeholder_24.png" alt="user-photo"/></div>
<div class="post-info">
<a href="#" class="post-info-name open-profile-modal"></a>
<span class="post-info-tag"></span>
<a class="post-info-time"><span class="post-info-sent"></span> <span></span></a>
</div>
<p class="post-text"></p>
<div class="post-context" style="display: none;"></div>
<span class="post-expand">Expand</span>
<!-- elementos de interação com o post que são exibidos no hover -->
<div class="post-interactions">
<span class="post-reply">Reply</span>
<span class="post-propagate">Retransmit</span>
<span class="post-favorite">Favorite</span>
</div>
<div class="expanded-content" style="display: none;">
<div class="post-stats">
<div class="stat-count">
<div class="stat-count-value"></div>
<div>Retransmits</div>
</div>
<div class="avatar-row"></div>
</div>
<div class="preview-container">
</div>
<div class="post-reply-content" style="display: block;">
<form class="post-area-new">
<textarea placeholder="Reply..."></textarea>
<div class="post-area-extras">
<span class="post-area-remaining">140</span>
<button class="undo-unicode disabled" disabled>undo</button>
<button class="post-submit disabled" disabled>post</button>
</div>
</form>
</div>
<span class="show-more label">Show more in this conversation...</span>
</div> <!-- expanded-content -->
<div class="new-replies-available"><button></button></div>
</div> <!-- post-data -->
</li>
</div>
<div id="template-post-rt-reference">
<div class="post-rt-reference">
<div class="post-photo"><img class="avatar" src="img/grayed_avatar_placeholder_24.png" alt="user-photo" /></div>
<div class="post-info">
<a href="#" class="post-info-name open-profile-modal"></a>
<span class="post-info-tag"></span>
<a class="post-info-time"><span></span></a>
</div>
<p class="post-text"></p>
</div>
</div>
<div id="template-post-rt-by">
<i class="post-rt-icon"></i>
<div class="post-rt-sign">
<span class="prep">twisted again by</span><a class="open-profile-modal"></a>
</div>
<div class="post-rt-time">
<span class="prep">at</span><span class="time"></span>
</div>
</div>
<!-- template for user links in message (open profile modal) -->
<a id="msg-user-link-template" class="open-profile-modal"></a>
<!-- template for user links in message (open profile modal) -->
<a id="external-page-link-template" rel="nofollow noreferrer" target="_blank"></a>
<!-- template for user links in message (open profile modal) -->
<a id="hashtag-link-template" class="open-hashtag-modal"></a>
<div id="template-link-shortened">
<a class="link-shortened" rel="nofollow noreferrer" target="_blank"></a>
</div>
<div id="template-avatar-tiny">
<a class="open-profile-modal" href="">
<img class="avatar tiny" src="img/grayed_avatar_placeholder_24.png" alt="user-photo"/>
<span class="user-name-tooltip"></span>
</a>
</div>
<li class="descendant module post">
</li>
<div class="modal-wrapper">
<div class="modal-header">
<h3></h3>
<span class="minimize-modal"><b>_</b></span>
<span id="closeModal" class="modal-close">×</span>
<span class="modal-back"><</span>
<span class="mark-all-as-read"></span>
</div>
<div class="modal-content"></div>
<div class="modal-blackout"></div>
</div>
<div id="template-inline-warn">
<div class="inline-warn">
<div class="close">×</div>
<div class="text"></div>
<div class="options">
<div><input type="checkbox" class="never-again" /><span>don't show it again</span></div>
</div>
</div>
</div>
<div class="prompt-wrapper">
<div class="modal-header">
<h3></h3>
<span class="modal-close prompt-close">×</span>
</div>
<div class="modal-content"></div>
<div class="modal-blackout"></div>
</div>
<div id="confirm-popup-template">
<div class="message"></div>
<div class="modal-buttons">
<button class="confirm"></button>
<button class="cancel"></button>
</div>
</div>
<div id="template-account-modal">
<div class="module">
<div>
<div class="avatar">
<img src="img/genericPerson.png"/>
</div>
<input type="text" class="input-name"/>
<h2 class="alias"></h2>
<textarea class="input-bio"></textarea>
<input type="text" class="input-location"/>
<input type="text" class="input-url"/>
<input type="text" class="input-tox"/>
<input type="text" class="input-bitmessage"/>
</div>
<div class="c-buttons">
<button class="toggle-secret-key">Secret Key</button>
<button class="submit-changes">Save Changes</button>
</div>
</div>
<div class="module secret-key-container">
<div class="label">Secret key:</div>
<div class="secret-key"></div>
</div>
<input type="file" accept="image/*" class="input-avatar" style="display: none;"/>
</div>
<div id="template-login-modal">
<div class="module">
<div>
<p class="label">Existing local users</p>
<select class="local-usernames"></select>
</div>
<div>
<button class="login">Login</button>
</div>
</div>
<div class="module create-account">
<div>
<p class="label">Create a new user</p>
<input class="alias" type="textbox" placeholder="Type nickname here"></input>
<div class="availability"></div>
</div>
<div>
<button class="check" disabled>Check availability</button>
<button class="create" disabled>Create this nickname</button>
</div>
</div>
<div class="module import-account">
<div>
<p class="label">Import secret key</p>
<input class="secret-key" type="textbox" placeholder="52-characters secret" size="52"></input>
</div>
<div>
<p class="label">With nickname</p>
<input class="alias" type="textbox" placeholder="Type nickname here"></input>
</div>
<div>
<button class="import" disabled>Import key</button>
</div>
</div>
</div>
<div id="reTwist-modal-template">
<div class="post-area">
<form class="post-area-new open">
<textarea placeholder="New Post..."></textarea>
<div class="post-area-extras">
<span class="post-area-remaining">140</span>
<button class="undo-unicode disabled" disabled>undo</button>
<button class="post-submit disabled" disabled>post</button>
</div>
<div class="modal-buttons">
<span class="switch-mode">Switch to Reply</span>
<button class="modal-propagate">Retransmit</button>
</div>
</form>
</div>
</div>
<div id="reply-modal-template">
<div class="post-area">
<form class="post-area-new open">
<textarea placeholder="New Post..."></textarea>
<div class="post-area-extras">
<span class="switch-mode">Switch to Retransmit</span>
<span class="post-area-remaining">140</span>
<button class="undo-unicode disabled" disabled>undo</button>
<button class="post-submit disabled" disabled>post</button>
</div>
</form>
</div>
</div>
<div id="fav-modal-template">
<div class="post-area">
<div class="modal-buttons">
<button class="modal-fav-public">Public</button>
<button class="modal-fav-private">Private</button>
</div>
</div>
</div>
<!-- MODAL DE DIRECT MESSAGES INIT -->
<!-- Este modal possui dois templates, o primeiro da lista de pessoas que enviaram mensagens e o segundo
com a thread de mensagens individual -->
<div id="template-direct-messages-list">
<ol class="direct-messages-list"></ol>
</div>
<div id="template-direct-messages-list-item">
<li class="module post message">
<div class="post-photo"><img src="img/grayed_avatar_placeholder_24.png" alt="user-photo"/></div>
<div class="post-info">
<a class="post-info-name open-profile-modal"></a>
<span class="post-info-tag">@</span>
<a class="post-info-time"><span></span></a>
</div>
<p class="post-text"></p>
<div class="messages-qtd">0</div>
</li>
</div>
<div class="messages-thread-template">
<ol class="direct-messages-thread">
<!-- use "dm-chat-template" here -->
</ol>
</div>
<!-- cada li é uma mensagem -->
<li id="dm-chat-template" class="module post message">
<div class="post-photo"><img src="img/grayed_avatar_placeholder_24.png" alt="user-photo"/></div>
<div class="post-info">
<a class="post-info-name open-profile-modal"></a>
<a class="post-info-time"><span class="post-info-sent"></span> <span></span></a>
</div>
<p class="post-text"></p>
</li>
<div class="dm-form-template">
<form class="post-area-new open">
<textarea placeholder="New direct message..."></textarea>
<div class="post-area-extras">
<span class="post-area-remaining">140</span>
<button class="undo-unicode disabled" disabled>undo</button>
<button title="Direct messages are encrypted, only you and receiver can read them" style="margin-right:7.5%;" class="dm-submit disabled" disabled>send</button>
</div>
</form>
</div>
<!-- MODAL DE DIRECT MESSAGES INIT -->
<div id="group-messages-profile-modal-control-template">
<div class="group-messages-control b-buttons">
<button class="new">New group</button>
<button class="join">Join group</button>
</div>
</div>
<div id="group-messages-messages-modal-control-template">
<div class="group-messages-control b-buttons">
<button class="profile">Profile</button>
<button class="invite">Invite peers</button>
<button class="leave">Leave group</button>
<div class="invite-form">
<textarea placeholder="@peer1 @peer2 …"></textarea><button disabled>Invite</button>
</div>
</div>
</div>
<div id="group-profile-modal-template">
<div class="profile-card" data-screen-name="">
<div class="profile-card-main">
<div class="profile-bio">
<input class="group-description"></input>
<button class="save a-button" disabled>Save</button>
<button class="cancel a-button">Cancel</button>
</div>
</div>
<div class="profile-card-buttons group-messages-control b-buttons">
<button class="direct-messages-with-user" disabled>Messages</button>
<button class="invite" disabled>Invite peers</button>
<button class="show-secret-key" disabled>Secret Key</button>
<button class="leave" disabled>Leave group</button>
<div class="invite-form">
<textarea placeholder="@peer1 @peer2 …"></textarea><button disabled>Invite</button>
</div>
<div class="secret-key"></div>
</div>
</div>
<div class="members"></div>
</div>
<div id="group-profile-member-template">
<div class="twister-user">
<div>
<a class="twister-user-name open-profile-modal">
<img class="twister-user-photo" src="img/grayed_avatar_placeholder_24.png" alt="user-photo"/>
</a>
</div>
<div class="twister-user-info" data-screen-name="">
<a class="twister-user-name open-profile-modal">
<span class="twister-user-full"></span>
<span class="twister-user-tag"></span>
</a>
<div class="bio"></div>
</div>
</div>
</div>
<div id="group-messages-new-group-template">
<div class="module">
<div>
<p class="label">Group description</p>
<textarea class="description" placeholder="Describe group"></textarea>
</div>
<div>
<p class="label">Peers to invite</p>
<textarea class="invite" placeholder="Invite somebody"></textarea>
</div>
<div>
<button class="create" disabled>Create</button>
</div>
</div>
</div>
<div id="group-messages-join-group-template">
<div class="module">
<div>
<p class="label">Select group(s)</p>
<ul class="groups-list"></ul>
</div>
<div>
<button class="join" disabled>Join</button>
</div>
</div>
<div class="module">
<div>
<p class="label">Import secret key</p>
<input class="secret-key-import" type="textbox" placeholder="52-characters secret" size="52" rows="1"></input>
</div>
<div>
<button class="import-secret-key" disabled>Import key</button>
</div>
</div>
</div>
<div id="groups-list-item-template">
<li>
<input type="checkbox" /> <a class="twister-user-name open-profile-modal"></a> // <span class="description"></span>
</li>
</div>
<!-- MODAL DE PROFILE -->
<div id="profile-modal-template">
<!-- ÁREA DE PROFILE PHOTO INIT -->
<div class="profile-card" data-screen-name="">
<!-- Coloquei a imagem de fundo do card do usuário como background da div
abaixo inline na tag para poder ser alterada dinamicamente
style="background: url(img/imgBack.png) no-repeat center center;"-->
<div class="profile-card-main">
<img class="profile-card-photo" src="img/grayed_avatar_placeholder_24.png"/>
<h1 class="profile-name"></h1>
<h2 class="profile-screen-name">@<b></b></h2>
<div>
<span class="profile-location"></span>
<a class="profile-url" rel="nofollow noreferrer" target="_blank"></a>
</div>
<div class="profile-bio"></div>
<div id="msngrswr">
<div id="toxbtnwr" class="profile-extra-contact">
<a class="profile-tox"><span class="selectable_theme theme_nin">TOX</span></a><a class="tox-ctc"></a>
</div>
<div id="bmbtnwr" class="profile-extra-contact">
<a class="profile-bitmessage"><span class="selectable_theme theme_nin">BitMessage</span></a><a class="bitmessage-ctc"></a>
</div>
</div>
</div>
<div class="twister-user-info">
<div class="clearfix">
<ul class="module profile-data">
<li><a href="#"><span class="posts-count"> </span><span class="label">Posts</span></a></li>
<li><a href="#" class="open-following-modal"><span class="following-count"> </span><span class="label">Following</span></a></li>
<li><a class="open-followers"><span class="followers-count"> </span><span class="label">Followers</span></a></li>
</ul>
</div>
<div class="profile-card-buttons b-buttons">
<button class="follow" href="#">Follow</button>
<button class="direct-messages-with-user" href="#">Direct Messages</button>
<button class="mentions-from-user" href="#">Mentions</button>
<button class="favs-from-user" href="#">Favorites</button>
</div>
</div>
<div class="who-follow"></div>
</div>
<!-- ÁREA DE POSTS END -->
<!-- ÁREA DE POSTS INIT -->
<div class="postboard">
<h2>
<span>Posts</span>
<!-- o botão de novas postagens deve ser ocultado quando o usuário clicá-lo via javascript -->
<button class="postboard-news" style="display:none;"></button>
</h2>
<ol id="profile-posts" class="postboard-posts">
</ol>
</div>
<!-- ÁREA DE POSTS END -->
</div>
<!-- MODAL DE PROFILE END -->
<div id="template-profile-show-more-followers">
<a class="show-more-followers"></a>
</div>
<!-- MODAL DE HASHTAGS -->
<div id="hashtag-modal-template">
<!-- ÁREA DE POSTS INIT -->
<div class="postboard">
<h2>
<span class="selectable_theme theme_original theme_calm">Posts</span>
<!-- o botão de novas postagens deve ser ocultado quando o usuário clicá-lo via javascript -->
<button class="postboard-news" style="display:none;"></button>
</h2>
<ol id="profile-posts" class="postboard-posts">
</ol>
<div class="postboard-loading" style="display: none;">
<div></div>
</div>
</div>
<!-- ÁREA DE POSTS END -->
</div>
<!-- MODAL DE HASHTAGS END -->
<div id="template-followers-list">
<ol class="followers-list">
<div class="loading-roller">
<div></div>
</div>
</ol>
</div>
<div id="template-followers-peer">
<li class="twister-peer">
<div class="avatar"><img src="img/grayed_avatar_placeholder_24.png" alt="avatar" /></div>
<div class="name"></div>
<div class="alias"></div>
<div class="bio"></div>
</li>
</div>
<div id="template-following-list">
<ol class="following-list">
<div class="loading-roller">
<div></div>
</div>
</ol>
</div>
<div id="template-following-peer">
<li>
<div class="mini-profile-info">
<a href="#" class="open-profile-modal">
<img class="mini-profile-photo" src="img/grayed_avatar_placeholder_24.png" alt="user-photo"/>
<span class="mini-profile-name">Fulano da Silva</span>
<span class="mini-screen-name">@<b class="following-screen-name"></b></span>
</a>
<div>
<div class="mini-profile-actions">
<span>Actions ▼</span>
<ul>
<li class="direct-messages-with-user">Send direct message</li>
<!-- TODO <li>Send post</li>-->
<li class="mentions-from-user">Display mentions</li>
<!-- WTF <li>Display retransmissions</li> -->
</ul>
</div>
<div class="following-config">
<button class="follow">Follow</button>
<button class="public-following">Public</button>
</div>
</div>
<div>
<span class="swarm-status" style="display: none;"></span>
</div>
<div class="latest-activity" data-screen-name="" data-id="" data-time="0">
<span class="label">Last activity</span>
<span class="time"></span>
</div>
</div>
</li>
</div>
<!-- MODAL DE FOLLOWING -->
<div id="following-modal-template">
<!-- ÁREA DE PROFILE PHOTO INIT -->
<h2>All users publicly followed by <span class="following-screen-name">@<b></b></span></h2>
<!-- ÁREA DE PROFILE END -->
<!-- ÁREA DE FOLLOWING INIT -->
<ol class="">
<li id="following-by-user-template" style="display: none;">
<div class="mini-following-info" data-screen-name="">
<a href="#" class="open-profile-modal">
<img class="mini-profile-photo" src="img/grayed_avatar_placeholder_24.png" alt="user-photo"/>
<span class="mini-following-name">Fulano da Silva</span>
<span class="mini-screen-name">@
<b class="following-screen-name"></b>
</span>
</a>
</div>
</li>
</ol>
<!-- ÁREA DE FOLLOWERS END -->
</div>
<!-- MODAL DE FOLLOWING END -->
<div id="following-config-modal-template">
<div class="following-config-modal-content">
<span class="following-config-method-message">Which way do you want to follow @</span>
<div class="following-config-method-buttons">
<button class="public-following">Public</button>
<button class="public-following private">Private</button>
</div>
</div>
</div>
<div id="template-uri-shortener-modal-content">
<div class="uri-shortener-control b-buttons">
<button class="shorten-uri">Shorten URL</button>
<button class="clear-cache">Clear cache</button>
</div>
<ol class="uris-list"></ol>
</div>
<div id="template-uri-shortener-uris-list-item">
<li><span class="short"></span><a class="long"></a></li>
</div>
</div>
<!-- TEMPLATES END -->
<audio id="player"></audio>
<audio id="playerSec"></audio>
<!-- hide elements -->
</body>
</html>