mirror of
https://github.com/twisterarmy/twister-calm.git
synced 2025-01-14 00:48:12 +00:00
b54e611797
change files order, new DHT indicator in top menu, ‘back’ button in DM conversations, sound notifications (alpha) and new page ‘Options’, few fixes
446 lines
17 KiB
HTML
446 lines
17 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8"/>
|
|
<title>twister</title>
|
|
<link rel="stylesheet" href="css/style.css" type="text/css"/>
|
|
<link 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/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.animate-colors-min.js"></script>
|
|
<script src="js/calm.js"></script>
|
|
<script src="js/options.js"></script>
|
|
<script>$(function(){setInterval("networkUpdate()", 2000); homeIntInit ();})</script>
|
|
|
|
<link rel="icon" type="image/png" href="img/twister_mini.png" />
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<!-- MENU SUPERIOR INIT -->
|
|
<nav class="userMenu">
|
|
<ul>
|
|
<li class="userMenu-home"><a href="#"></a></li>
|
|
<li class="userMenu-config">
|
|
<a class="userMenu-config-dropdown" href="#">
|
|
<div class="config-menu dialog-modal">
|
|
<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="profile-edit.html">Setup account</a>
|
|
<a class="dropdown-menu-item" href="following.html">Following users</a>
|
|
<a class="dropdown-menu-item" href="login.html">Change user</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-dhtindicator"><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">
|
|
<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 -->
|
|
<a class="promoted-posts-only" href="#">Normal posts</a>
|
|
<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" 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>
|
|
<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="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>
|
|
</body>
|
|
</html>
|