<!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.min.js" > < / script >
< script src = "js/jQueryPlugins.js" > < / script >
< script src = "js/jquery.json-2.4.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/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.js" > < / script >
< script src = "js/calm.js" > < / script >
< script >
$(function(){setTimeout(mensAutocomplete, 800);})
changeStyle();
< / script > <!-- calm init for autocomplete -->
< link rel = "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< / a > < / li >
< li class = "userMenu-network" > < a href = "network.html" > Network< / a > < / li >
< li class = "userMenu-profile" > < a href = "profile-edit.html" > Profile< / a > < / li >
< li class = "userMenu-config" >
< a class = "userMenu-config-dropdown" href = "#" >
< div class = "config-menu dialog-modal" >
< 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" > Fulano da Silva< / a >
< span class = "mini-profile-view" > View< / span >
< / div >
< a class = "dropdown-menu-item" href = "options.html" > Options< / a >
< a class = "dropdown-menu-item" href = "profile-edit.html" > Setup account< / a >
< a class = "dropdown-menu-item" href = "following.html" > Following users< / a >
< a class = "dropdown-menu-item" href = "network.html" > Network config< / a >
< a class = "dropdown-menu-item" href = "login.html" > Change user< / a >
< a class = "dropdown-menu-item promoted-posts-only" href = "#" > Switch to Promoted posts< / a >
< a class = "direct-messages dropdown-menu-item" href = "#" > Direct Messages< / a >
< / div >
< / a >
< / li >
< li class = "userMenu-connections" >
< a href = "#" >
< span class = "messages-qtd" style = "display:none;" > 12< / span >
< / a >
< / li >
< li class = "userMenu-messages" >
< a href = "#" >
< span class = "messages-qtd" style = "display:none;" > 12< / span >
< / 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" >
< li id = "search-profile-template" style = "display: none;" >
< div class = "mini-profile-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-screen-name" > @< b > < / b > < / span >
< span class = "mini-profile-name" > < / span >
< / a >
< button class = "follow" > Follow< / button >
< / div >
< / li >
< / ul >
< / div >
< / li >
< / ul >
< / nav >
<!-- MENU SUPERIOR END -->
< div class = "wrapper" >
<!-- LADO ESQUERDO DE MÓDULOS INIT -->
< div class = "dashboard" >
<!-- PROFILE MODULE INIT -->
< 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.html" > < span class = "following-count" > < / span > < span class = "label" > Following< / span > < / a > < / li >
< li > < a href = "#" > < 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-remaining" > 140< / span >
< button class = "post-submit disabled" disabled = "true" > post< / button >
< / div >
< / form >
< / div >
< / div >
<!-- PROFILE MODULE INIT -->
<!-- WHO TO FOLLOW MODULE INIT -->
< div class = "module who-to-follow" >
< h3 > Who to Follow< / h3 >
< a class = "refresh-users" > Refresh< / a >
< a class = "view-all-users" > View All< / a >
< ol class = "follow-suggestions" >
<!-- use "follow - suggestion - template" here -->
< / ol >
< / div >
<!-- WHO TO FOLLOW MODULE END -->
<!-- WHO TO FOLLOW MODULE INIT -->
< div class = "module toptrends" >
< h3 > Top Trends< / h3 >
< ol class = "toptrends-list" >
<!-- use "follow - suggestion - template" here -->
< / ol >
< / div >
<!-- WHO TO FOLLOW MODULE END -->
< / div >
<!-- LADO ESQUERDO DE MÓDULOS END -->
<!-- ÁREA DE POSTS INIT -->
< div class = "postboard" >
< h2 >
Postboard
<!-- 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 = "posts" class = "postboard-posts" >
<!-- use "post - template" here -->
< / ol >
< div class = "postboard-loading" style = "display: none;" >
< div > < / div >
< / div >
< / div >
<!-- ÁREA DE POSTS END -->
< / div >
<!-- TEMPLATES INIT -->
< div id = "templates" style = "display:none;" >
<!-- TEMPLATE DE WHO - TO - FOLLOW SUGGESTION -->
< li id = "follow-suggestion-template" 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-tag" > < / span >
< / a >
< 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 >
< button class = "follow" > Follow< / button >
< / div >
< / li >
<!-- 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 >
< li id = "post-template" 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" > < / a >
< / div >
< p class = "post-text" > < / p >
< div class = "post-context" style = "display: none;" >
< i class = "post-retransmited-icon" > < / i >
< span > twisted again by< / span >
< a class = "post-retransmited-by open-profile-modal" href = "" > < / a >
< / 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;" >
< ul class = "post-stats" style = "display: none;" >
< li class = "stat-count" >
< span class = "stat-count-value" > < / span >
< span > Retransmits< / span >
< / li >
< li class = "avatar-row" >
<!-- use "avatar - row - template" here -->
< / li >
< / ul >
< 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 = "post-submit disabled" disabled = "true" > post< / button >
< / div >
< / form >
< / div >
< / div > <!-- expanded - content -->
< / div > <!-- post - data -->
< / li > <!-- post - template -->
<!-- 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" target = "_blank" > < / a >
<!-- template for user links in message (open profile modal) -->
< a id = "hashtag-link-template" class = "open-hashtag-modal" > < / a >
<!-- template para ir dentro de avatar - row -->
< a id = "avatar-row-template" class = "open-profile-modal" href = "" >
< img class = "size24" src = "img/grayed_avatar_placeholder_24.png" alt = "user-photo" / >
< span class = "user-name-tooltip" > < / span >
< / a >
< li class = "descendant module post" >
< / li >
<!-- TEMPLATE INVÓLUCRO DO POST EXPANDIDO END -->
<!-- TEMPLATE DO MODAL GENÉRICO INIT -->
< div class = "modal-blackout cancel" >
< div class = "modal-wrapper" >
< div class = "modal-header" >
< h3 > < / h3 >
< span id = "closeModal" class = "modal-close cancel" > × < / span >
< span class = "modal-back" > < < / span >
< / div >
< div class = "modal-content" > < / div >
< div class = "modal-buttons" >
< button class = "modal-cancel cancel" > Cancel< / button >
< button class = "modal-propagate" > Retransmit< / button >
< / div >
< / div >
< / div >
<!-- TEMPLATE DO MODAL GENÉRICO END -->
<!-- MODAL DE RETWEET INIT -->
<!-- MODAL DE RETWEET END -->
<!-- MODAL DE REPLY INIT -->
< 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 = "post-area-remaining" > 140< / span >
< button class = "post-submit disabled" disabled = "true" > post< / button >
< / div >
< / form >
< / div >
<!-- use "module post" here -->
< / div >
<!-- MODAL DE REPLY END -->
<!-- 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 class = "direct-messages-template" >
< ol class = "direct-messages-list" >
<!-- use "dm - snippet - template here -->
< / ol >
< / div >
< li id = "dm-snippet-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 href = "#" class = "post-info-name open-profile-modal" > < / a >
< span class = "post-info-tag" > @< / span >
< a href = "#" class = "post-info-time" title = "" > 10min< / a >
< / div >
<!-- o texto do post (restrição de caracteres?) -->
< p class = "post-text" > < / p >
< / li >
< 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 >
< a href = "#" class = "post-info-time" title = "08/10/13 às 18:00" > 10min< / a >
< 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 title = "Direct messages are encrypted, only you and receiver can read them" style = "margin-right:7.5%;" class = "dm-submit disabled" disabled = "true" > send< / button >
< / div >
< / form >
< / div >
<!-- MODAL DE DIRECT MESSAGES INIT -->
<!-- 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 class = "profile-contact" >
< span class = "profile-location" > < / span >
< a class = "profile-url" rel = "nofollow" target = "_blank" > < / a >
< / div >
< div class = "profile-bio" >
< / div >
< / div >
< 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 href = "#" > < span class = "followers-count" > < / span > < span class = "label" > Followers< / span > < / a > < / li >
< / ul >
< button class = "followButton follow" href = "#" > Follow< / button >
< button class = "direct-messages-with-user" href = "#" > Direct Messages< / button >
< / 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 -->
<!-- MODAL DE HASHTAGS -->
< div id = "hashtag-modal-template" >
<!-- ÁREA DE POSTS INIT -->
< div class = "postboard" >
< h2 >
Posts
<!-- 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 HASHTAGS END -->
<!-- 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 >
<!-- TEMPLATES END -->
< audio id = "player" > < / audio >
< audio id = "playerSec" > < / audio >
<!-- hide elements -->
< / body >
< / html >
