<!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 theme_nin_night menu-news" > < / span >
< / a > < / li >
< li class = "userMenu-network selectable_theme theme_original theme_nin theme_nin_night" > < 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/genericPerson.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 >
< a class = "dropdown-menu-item" href = "https://github.com/twisterarmy/twister-html/issues" target = "_blank" > Feedback< / a >
< a class = "dropdown-menu-item" href = "https://twisterarmy.github.io" target = "_blank" > Project Website< / a >
< a class = "dropdown-menu-item" href = "https://twisterarmy.github.io/donate" target = "_blank" > Donate< / 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 theme_nin_night" >
< 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/genericPerson.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 theme_nin_night" >
< 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 theme_nin_night" >
< 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/genericPerson.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/genericPerson.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/genericPerson.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" > < span > × < / span > < / 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/genericPerson.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-translate" > Translate< / span >
< 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/genericPerson.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/genericPerson.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" > < span > × < / span > < / 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/genericPerson.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/genericPerson.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/genericPerson.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/genericPerson.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 theme_nin_night" > 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 theme_nin_night" > 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/genericPerson.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/genericPerson.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/genericPerson.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 >
