Merge latest twister-calm sources

css/profile.css

@@ -77,7 +77,7 @@
     color: rgba( 0, 0, 0, .7 );
     background: rgba( 0, 0, 0, .1 );
     border: none;
-    transition: all .2s linear;
+    transition: all 100ms ease-in-out;
 }
 .profile-card .follow,
 .profile-card .profileUnfollow

css/style.css

@@ -368,8 +368,7 @@ input.userMenu-search-field:focus::-ms-input-placeholder {
     padding: 0 20px 0 30px;
     opacity: .7;
 }
-.wrapper
-{
+.wrapper {
     width: 900px;
     margin: 0 auto;
     background: #e0e6f5;
@@ -613,6 +612,9 @@ input.userMenu-search-field:focus::-ms-input-placeholder {
     display: block;
     font-size: 16px;
 }
+
+/* mini profile actions */
+
 .mini-profile-actions
 {
     position: relative;
@@ -760,11 +762,6 @@ input.userMenu-search-field:focus::-ms-input-placeholder {
     color: #fff;
     opacity: .7;
 }
-/*.post-area-new.open textarea + .post-area-extras
-{
-    height: 35px;
-    transition: all .6s linear;
-}*/
 .post-area-new.open > .post-area-extras
 {
     height: 35px;
@@ -993,10 +990,6 @@ input.userMenu-search-field:focus::-ms-input-placeholder {
 }
 .postboard-posts > .post.open
 {
-    /*border-left: none;
-    border-right: none;
-    border-top: solid 2px #e34f42;
-    border-bottom: solid 2px #e34f42;*/
     border: none;
 }
 .postboard-posts > .post:after
@@ -1012,8 +1005,7 @@ input.userMenu-search-field:focus::-ms-input-placeholder {
 }
 .postboard-posts > .post.open:after
 {
-    width: 5px;
-    /*right: -5px;*/
+    width: 3px;
 }
 .post:hover,
 .post .post
@@ -1098,6 +1090,35 @@ input.userMenu-search-field:focus::-ms-input-placeholder {
 {
     color: #76b2ce;
 }
+
+.rt {
+    background: url(img/rt-bg.png);
+    -webkit-transition: all 200ms;
+    -moz-transition: all 200ms;
+    -ms-transition: all 200ms;
+    -o-transition: all 200ms;
+    transition: all 200ms;
+}
+.rt:before {
+    content: "";
+    position: absolute;
+    left: 0;
+    top: 0;
+    background: #ffd42b;
+    width: 3px;
+    height: 100%;
+}
+.rt.open:before {
+    width: 3px;
+}
+.rt-me {
+    background: url(img/rt-me-bg.png);
+    opacity: .7;
+}
+.rt-me:before {
+    background: #a1a1b0;
+}
+
 /* external http links */
 .post-text a[href^="http"] {
     font: italic 13px "Open Sans", sans-serif;
@@ -1170,10 +1191,8 @@ input.userMenu-search-field:focus::-ms-input-placeholder {
     color: #5e8da4;
     text-decoration: none;
 }
-/* Inpost previw */
-.preview-container
-{
-    height: 100px;
+/* Inpost preview */
+.preview-container {
     width: 95%;
     margin: 0 auto;
     overflow: hidden;
@@ -2033,13 +2052,16 @@ input.userMenu-search-field:focus::-ms-input-placeholder {
   }
 }
 /* Options */
+.volumeWrapper {
+    position: absolute;
+    right: 20px;
+    bottom: 20px;
+}
 #playerVol {
     float: right;
-    margin-right: 30px;
 }
 .volValue {
-    float: right;
-    margin-right: -160px;
+    float: left;
     font: 12px "Open Sans", sans-serif;
 }
 .optionsPage .module h1 {
@@ -2050,6 +2072,28 @@ input.userMenu-search-field:focus::-ms-input-placeholder {
     margin-top: 10px;
     font-size: 12px;
 }
+.previewSizeContainer {
+    font-size: 12px;
+}
+.gifCheckBox {
+    float: right;
+    vertical-align: middle;
+}
+.optionsPage .module label.gifCheckBoxLabel {
+    font: 12px "Open Sans", sans-serif;
+    display: block;
+    float: right;
+}
+.optionsPage .trendsFilterWrapper span {
+    font: 12px "Open Sans", sans-serif;
+}
+.optionsPage .trendsFilterWrapper input {
+    margin-right: 10px;
+}
+.optionsPage .customWrapper input[type="text"]{
+    width: 450px;
+}
+
 /* Following page */
 .following ol.following-list > li{
     display: inline-block;
@@ -2084,17 +2128,13 @@ input.userMenu-search-field:focus::-ms-input-placeholder {
 .following ol.following-list .mini-profile-info button {
     margin-top: 5px;
 }
-.gifCheckBox {
-    float: right;
-    vertical-align: middle;
-}
-.optionsPage .module label {
-    font: 12px "Open Sans", sans-serif;
+ol.following-list:after {
+    content: " ";
     display: block;
-    float: right;
+    height: 0;
+    clear: both;
 }
-
-/* Autocomplite*/
+/* Autocomplite old */
 .textcomplete-wrapper textarea {
     display: inline;
 }
@@ -2158,3 +2198,8 @@ p.post-text img {
 .reply textarea{
     margin-top: 20px;
 }
+.bgdl {
+    width: 100%;
+    height: 100%;
+    position: fixed;
+}

following.html

@@ -29,15 +29,16 @@
     <script src="js/calm.js"></script>
     <script src="jquery-emotions/jquery.emotions.js"></script>
     <script src="js/sjcl.js"></script>
+    <script src="js/dl.js"></script>
 
     <script>
-    $(function(){initInterfaceFollowing(); homeIntInit();});
+    $(function(){initInterfaceFollowing(); followingIntInit();});
     </script>
 
   </head>
 
   <body>
-    
+  <div class="bgdl"></div>
   <!-- MENU SUPERIOR INIT--> 
   <nav class="userMenu">
     <ul>
@@ -81,7 +82,7 @@
                 </a>
                 <div>
                     <div class="mini-profile-actions">
-                        <span>Actions ▼</span>
+                        <!-- <span>Actions ▼</span>
                         <ul>
                             <li class="direct-messages-with-user">Sent Direct Message</li>
                             <li>Sent Post to @
@@ -90,7 +91,7 @@
                             <li class="mentions-from-user">Display mentions to @
                                 <b class="following-screen-name"></b>
                             </li>
-                        </ul>
+                        </ul> -->
                     </div>
                     <button class="unfollow">Unfollow</button>
                     <button class="public-following">Public</button>
@@ -169,8 +170,8 @@
             <div style="clearfix:both"></div>
             <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>
+                <!-- <span>twisted again by</span>
+                <a class="post-retransmited-by open-profile-modal" href=""></a> -->
                 
             </div>
             <span class="post-expand">Expand</span>
@@ -317,7 +318,14 @@
                 <span class="profile-location"></span>
                 <a class="profile-url" rel="nofollow" target="_blank"></a>
               </div>
-              <div class="profile-bio">
+              <div class="profile-bio"></div>
+              <div id="msngrswr">
+                <div id="toxbtnwr">
+                  <a class="profile-tox"></a><a class="tox-ctc"></a>
+                </div>
+                <div id="bmbtnwr">
+                  <a class="profile-bitmessage"></a><a class="bitmessage-ctc"></a>
+                </div>
               </div>
             </div>
             <ul class="module profile-data">
@@ -394,7 +402,6 @@
     </div>
     <!-- MODAL DE FOLLOWING END -->
 
-
   </div>
   <!-- TEMPLATES END -->
     

home.html

@@ -27,13 +27,14 @@
     <script src="js/twister_actions.js"></script>
     <script src="js/twister_directmsg.js"></script>
     <script src="js/interface_common.js"></script>
+    <script src="js/franc.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="jquery-emotions/jquery.emotions.js"></script>
     <script src="js/sjcl.js"></script>
     <script>
-    $(function(){setInterval("networkUpdate()", 2000); homeIntInit();});
+    $(function(){homeIntInit()});
     </script>
 
     <link rel="icon" type="image/png" href="img/twister_mini.png" />
@@ -230,8 +231,8 @@
             <div style="clearfix:both"></div>
             <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>
+                <!-- <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 -->

jquery-emotions/jquery.emotions.js

@@ -40,7 +40,7 @@
                 ":(": "frown",
                 "=(": "frown",
                 ":-(": "frown",
-                "8)": "glasses",
+                ":nerd:": "glasses",
                 ":D": "grin",
                 ":-D": "grin",
                 ">:(": "grumpy",
@@ -58,11 +58,15 @@
                 "(-:": "smile",
                 "[:": "smile",
                 "(=": "smile",
+                "8)": "sunglasses",
                 "8|": "sunglasses",
+                "B|": "sunglasses",
+                "B)": "sunglasses",
                 ":p": "tongue",
                 ":P": "tongue",
                 ":/": "unsure",
                 ":\\": "unsure",
+                ":|": "unsure",
                 ";)": "wink",
                 ";-)": "wink",
                 "(;": "wink",

js/calm.js

@@ -12,27 +12,29 @@ $(function(){
 
     $('.tox-ctc').on('click', function(){
     	window.prompt('Press Ctrl/Cmd+C to copy then Enter to close', $(this).attr('data'))
-    })
+    });
     $('.bitmessage-ctc').on('click', function(){
     	window.prompt('Press Ctrl/Cmd+C to copy then Enter to close', $(this).attr('data'))
-    })
+    });
 })
 
-function dhtIndicatorBg(){
-	var bgcolor = '';
-		  if(twisterDhtNodes <= 20){bgcolor = '#770900'
-	}else if(twisterDhtNodes <= 60){bgcolor = '#773400'
-	}else if(twisterDhtNodes <= 90){bgcolor = '#774c00'
-	}else if(twisterDhtNodes <= 120){bgcolor = '#776400'
-	}else if(twisterDhtNodes <= 150){bgcolor = '#707500'
-	}else if(twisterDhtNodes <= 180){bgcolor = '#3f6900'
-	}else if(twisterDhtNodes <= 210){bgcolor = '#005f15'
-	}else if(twisterDhtNodes >= 250){bgcolor = '#009922'
-	}
-	$('.userMenu-dhtindicator').animate({'background-color': bgcolor });
+function dhtIndicator(){
+	requestNetInfo(function () {
+		var bgcolor = '';
+		if(twisterDhtNodes == 0){bgcolor = '#000'
+		}else if(twisterDhtNodes <= 20){bgcolor = '#770900'
+		}else if(twisterDhtNodes <= 60){bgcolor = '#773400'
+		}else if(twisterDhtNodes <= 90){bgcolor = '#774c00'
+		}else if(twisterDhtNodes <= 120){bgcolor = '#776400'
+		}else if(twisterDhtNodes <= 150){bgcolor = '#707500'
+		}else if(twisterDhtNodes <= 180){bgcolor = '#3f6900'
+		}else if(twisterDhtNodes <= 210){bgcolor = '#005f15'
+		}else if(twisterDhtNodes >= 211){bgcolor = '#009922'
+		}
+		$(".userMenu-dhtindicator a").text(twisterDhtNodes);
+		$('.userMenu-dhtindicator').animate({'background-color': bgcolor });
+	});
 };
-setTimeout(dhtIndicatorBg, 300);
-setTimeout(function() {setInterval(dhtIndicatorBg, 2000)}, 400);
 
 function modalDMIntr() {
 	$(".cancel").on('click', function(event){
@@ -57,28 +59,22 @@ function mensAutocomplete(t) {
 	$(t).asuggest(suggests, {
 		'minChunkSize': 2
 	});
-}
+};
 
-function changeStyle() {
-	var style, profile, menu;
-	if(localStorage['theme'] == 'original')
-	{
-		style = 'css/orange/style.css';
-		profile = 'css/orange/profile.css';
-		menu = '.original_menu';
-		$(".userMenu-dhtindicator").hide();
-	}else 
-	{
-		style = 'css/style.css';
-		profile = 'css/profile.css';
-		menu = '.calm_menu';
-	}
-	$('#stylecss').attr('href', style);
-	$('#profilecss').attr('href', profile);
-	setTimeout(function(){$(menu).removeAttr('style')}, 0);
-}
+var mediaPreviewContainer = function () {
+    var opt = $.Options.getOption('previewSize', 'short');
+    $('.preview-container').css('height', opt === 'short' ? '100px' : '100%');
+};
 
 function homeIntInit () {
 	modalDMIntr ();
 	$('textarea').on('click', function() {mensAutocomplete(this)});
-}
+	mediaPreviewContainer();
+	dhtIndicator();
+	setInterval(dhtIndicator, 2000);
+};
+function followingIntInit() {
+	modalDMIntr ();
+	$('textarea').on('click', function() {mensAutocomplete(this)});
+	mediaPreviewContainer();
+};

js/dl.js

@@ -0,0 +1,101 @@
+$(function(){
+
+    var header = $('.bgdl'),
+        canvas = $('<canvas></canvas>').appendTo(header)[0],
+
+        ctx    = canvas.getContext('2d'),
+        color  = 'black',
+        idle   = null, mousePosition;
+
+    canvas.width         = window.innerWidth;
+    canvas.height        = window.innerHeight;
+    canvas.style.display = 'block';
+
+    ctx.fillStyle = color;
+    ctx.lineWidth = .1;
+    ctx.strokeStyle = color;
+
+    var mousePosition = { x: 30 * canvas.width / 100, y: 30 * canvas.height / 100 },
+        dots          = { nb: (canvas.width < 640 ? 35 : 150), distance: 80, d_radius: 150, array: [] };
+
+    function Dot(){
+        this.x = Math.random() * canvas.width;
+        this.y = Math.random() * canvas.height;
+
+        this.vx = -.5 + Math.random();
+        this.vy = -.5 + Math.random();
+
+        this.radius = Math.random();
+    }
+
+    Dot.prototype = {
+        create: function(){
+            ctx.beginPath();
+            ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
+            ctx.fill();
+        },
+
+        animate: function(){
+
+            for(var i = 0, dot=false; i < dots.nb; i++){
+
+                dot = dots.array[i];
+
+                if(dot.y < 0 || dot.y > canvas.height){
+                    dot.vx = dot.vx;
+                    dot.vy = - dot.vy;
+                }else if(dot.x < 0 || dot.x > canvas.width){
+                    dot.vx = - dot.vx;
+                    dot.vy = dot.vy;
+                }
+                dot.x += dot.vx;
+                dot.y += dot.vy;
+            }
+        },
+
+        line: function(){
+            for(var i = 0; i < dots.nb; i++){
+                for(var j = 0; j < dots.nb; j++){
+                    i_dot = dots.array[i];
+                    j_dot = dots.array[j];
+
+                    if((i_dot.x - j_dot.x) < dots.distance && (i_dot.y - j_dot.y) < dots.distance && (i_dot.x - j_dot.x) > - dots.distance && (i_dot.y - j_dot.y) > - dots.distance){
+                        if((i_dot.x - mousePosition.x) < dots.d_radius && (i_dot.y - mousePosition.y) < dots.d_radius && (i_dot.x - mousePosition.x) > - dots.d_radius && (i_dot.y - mousePosition.y) > - dots.d_radius){
+                            ctx.beginPath();
+                            ctx.moveTo(i_dot.x, i_dot.y);
+                            ctx.lineTo(j_dot.x, j_dot.y);
+                            ctx.stroke();
+                            ctx.closePath();
+                        }
+                    }
+                }
+            }
+        }
+    };
+
+    function createDots(){
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        for(var i = 0; i < dots.nb; i++){
+            dots.array.push(new Dot());
+            dot = dots.array[i];
+
+            dot.create();
+        }
+
+        dot.line();
+        dot.animate();
+    }
+
+    idle = setInterval(createDots, 1000/30);
+
+    $(canvas).on('mousemove mouseleave', function(e){
+        if(e.type == 'mousemove'){
+            mousePosition.x = e.pageX;
+            mousePosition.y = e.pageY;
+        }
+        if(e.type == 'mouseleave'){
+            mousePosition.x = canvas.width / 2;
+            mousePosition.y = canvas.height / 2;
+        }
+    });
+});

js/interface_common.js

@@ -187,8 +187,7 @@ function updateHashtagModal(postboard,hashtag) {
     setTimeout( function() {updateHashtagModal(postboard,hashtag);}, 5000);
 }
 
-function openMentionsModal(e)
-{
+function openMentionsModal(e) {
     e.stopPropagation();
     e.preventDefault();
 
@@ -199,10 +198,11 @@ function openMentionsModal(e)
 
     var username;
     var $userInfo = $(this).closest("[data-screen-name]");
-    if( $userInfo.length )
+    if ( $userInfo.length ) {
         username = $userInfo.attr("data-screen-name");
-    else
+    } else {
         username = defaultScreenName;
+    };
 
     var hashtagModalContent = newHashtagModal( username );
     hashtagModalContent.appendTo("." +hashtagModalClass + " .modal-content");
@@ -223,8 +223,7 @@ function newFollowingModal(username) {
     return followingModalContent;
 }
 
-function openFollowingModal(e)
-{
+function openFollowingModal(e) {
     e.stopPropagation();
     e.preventDefault();
 
@@ -296,9 +295,10 @@ var replyInitPopup = function(e, post)
 //abre o menu dropdown de configurações
 var dropDownMenu = function( e )
 {
+    e.stopPropagation();
+    e.preventDefault();
     var $configMenu = $( ".config-menu" );
     $configMenu.slideToggle( "fast" );
-    e.stopPropagation();
 }
 
 //fecha o config menu ao clicar em qualquer lugar da tela
@@ -319,7 +319,7 @@ var postExpandFunction = function( e, postLi )
     var $postsRelated = postLi.find(".related");
 
     var openClass = "open";
-    if( !postLi.hasClass( openClass ) ) {
+    if (!postLi.hasClass(openClass)) {
         originalPost.detach();
         postLi.empty();
         postLi.addClass( openClass );
@@ -338,11 +338,12 @@ var postExpandFunction = function( e, postLi )
         // RTs faces and counter
         requestRTs(originalLi);
 
-        //hed//image preview 
-        postLi.find('.preview-container').css('height', '100%');
-    }
-    else
-    {
+        if ($.Options.getOption('previewSize', 'short') === 'short' && postLi.find('.preview-container')[0].firstChild) {
+
+            var h = postLi.find('.preview-container').children().first().height();
+            postLi.find('.preview-container').animate({'height': h+'px'}, 200);
+        }
+    } else {
         postLi.removeClass( openClass );
         $postInteractionText.text( polyglot.t("Expand") );
 
@@ -353,7 +354,12 @@ var postExpandFunction = function( e, postLi )
             postLi.empty();
             postLi.append(originalPost);
         });
-        postLi.find('.preview-container').css('height', '')
+
+        if ($.Options.getOption('previewSize', 'short') === 'short') {
+            postLi.find('.preview-container').each(function () {
+                if ($(this).html()) $(this).animate({'height': '100px'}, 200);
+            })
+        }
     }
 
     e.stopPropagation();
@@ -488,8 +494,6 @@ var retweetSubmit = function(e)
     closeModal($this);
 }
 
-
-
 function initInterfaceCommon() {
     $( "body" ).on( "click", function(event) { 
         if($(event.target).hasClass('cancel')) closeModal($(this));
@@ -514,5 +518,4 @@ function initInterfaceCommon() {
     $( ".open-hashtag-modal").bind( "click", openHashtagModal );
     $( ".open-following-modal").bind( "click", openFollowingModal );
     $( ".userMenu-connections a").bind( "click", openMentionsModal );
-
 }

js/interface_home.js

@@ -15,7 +15,10 @@ var InterfaceFunctions = function()
     {
         $( ".wrapper .postboard-news").click(function() {
             requestTimelineUpdate("latest",postsPerRefresh,followingUsers,promotedPostsOnly);});
-        $( ".promoted-posts-only").click(function() {
+        $( ".promoted-posts-only").click(function(e) {
+            e.stopPropagation();
+            e.preventDefault();
+            
             promotedPostsOnly = !promotedPostsOnly;
             $(this).text( promotedPostsOnly ? "Promoted posts" : "Normal posts" );
             $(".postboard h2").animate({backgroundColor: promotedPostsOnly ? '#48577d' : '#768fce'}, 200);
@@ -100,8 +103,21 @@ var InterfaceFunctions = function()
     function updateTrendingHashtags()
     {
         $(".toptrends-list").empty();
-        twisterRpc("gettrendinghashtags", [10],
+        twisterRpc("gettrendinghashtags", [100],
                 function(args, ret) {
+                    var opts = {};
+                        opts.all = $.Options.getOption("trendsFilterAll", true);
+                        opts.lat = $.Options.getOption('trendsFilterLat', false);
+                        opts.cyr = $.Options.getOption('trendsFilterCyr', false);
+                        opts.han = $.Options.getOption('trendsFilterHan', false);
+                        opts.cust = $.Options.getOption('trendsFilterCustom', '');
+
+                    if (opts.all || (!opts.all && !opts.lat && !opts.cyr && !opts.han && opts.cust === '')) {
+                        ret = ret.slice(0, 10);
+                    } else {
+                        ret = filterTrends(ret, opts);
+                    }
+
                     for( var i = 0; i < ret.length; i++ ) {
                         var $li = $("<li>");
                         var hashtagLinkTemplate = $("#hashtag-link-template").clone(true);
@@ -118,6 +134,21 @@ var InterfaceFunctions = function()
         setTimeout(updateTrendingHashtags, 20*60*1000);
     }
 }
+function filterTrends(ret, opts) {
+    var isEng = function (str) {return franc(str, {whitelist: ['eng','rus','cmn']}) === 'eng'};
+    var isRus = function (str) {return franc(str, {whitelist: ['eng','rus','cmn']}) === 'rus'};
+    var isCmn = function (str) {return franc(str, {whitelist: ['eng','rus','cmn']}) === 'cmn'};
+
+    var filterArr = opts.cust !== '' ? $.Options.getOption('trendsFilterCustom', '').split(',') : [];
+    var newRet = [];
+
+    for (var i = 0; i < ret.length; i++) {
+        if ( (((opts.lat && isEng(ret[i])) || (opts.cyr && isRus(ret[i])) || (opts.han && isCmn(ret[i])) ) && filterArr.indexOf(ret[i]) === -1) || ((!opts.lat && !opts.cyr && !opts.han) && filterArr.indexOf(ret[i]) === -1)) {
+            newRet.push(ret[i]);
+        };
+        if (newRet.length === 10 || i === ret.length-1) return newRet;
+    }
+}
 
 //***********************************************
 //******************* INIT **************

js/interface_localization.js

@@ -61,6 +61,7 @@ if(preferredLanguage == "en"){
       "download_posts_status": "Downloaded %{portion} posts", // Downloaded 10/30 posts
       "Enable": "Enable",
       "error": "Error: %{error}",
+      "Error code:": "Error code:",
       "error_connecting_to_daemon": "Error connecting to local twister daemon.",
       "Error in 'createwalletuser' RPC.": "Error in 'createwalletuser' RPC.",
       "Error in 'importprivkey'": "Error in 'importprivkey' RPC: %{rpc}",
@@ -75,15 +76,20 @@ if(preferredLanguage == "en"){
       "Following": "Following",
       "Following users": "Following users",
       "Force connection to peer:": "Force connection to peer:",
+      "full": "full",
       "General information": "General information",
       "Generate blocks (send promoted messages)": "Generate blocks (send promoted messages)",
       "Home": "Home", // homepage
       "hours": "%{smart_count} hour |||| %{smart_count} hours",
+      "If it's between users I follow": "If it's between users I follow",
+      "Images preview": "Images preview",
       "Inline image preview": "Inline image preview",
+      "Interface": "Interface",
       "Internal error: lastPostId unknown (following yourself may fix!)": "Internal error: lastPostId unknown (following yourself may fix!)",
       "Keys":"Keys",
       "Known peers:": "Known peers: ",
       "Last block is ahead of your computer time, check your clock.": "Last block is ahead of your computer time, check your clock.",
+      "Media links preview": "Media links preview",
       "Mentions": "Mentions",
       "mentions_at": "Mentions @%{user}",
       "minutes": "%{smart_count} minute |||| %{smart_count} minutes",
@@ -99,6 +105,7 @@ if(preferredLanguage == "en"){
       "Number of blocks in block chain:": "Number of blocks in block chain: ",
       "Number of CPUs to use": "Number of CPUs to use ",
       "Only alphanumeric and underscore allowed.": "Only alphanumeric and underscore allowed.",
+      "Only if I'm in": "Only if I'm in",
       "peer address": "peer address",
       "Private": "Private",
       "Profile": "Profile",
@@ -106,8 +113,11 @@ if(preferredLanguage == "en"){
       "post": "post", // verb - button to post a message
       "Post to promote:": "Post to promote: ",
       "Posts": "Posts",
+      "Posts that begins with another user's @username": "Posts that begins with another user's @username",
+      "Preview size": "Preview size",
       "Promoted posts are needed to run the network infrastructure. If you want to help, start generating blocks and advertise. [en]": "Promoted posts are needed to run the network infrastructure. If you want to help, start generating blocks and advertise. [en]",
       "propagating_nickname": "Propagating nickname %{username} to the network...",
+      "Proxy for images preview": "Proxy for images preview",
       "Public": "Public",
       "Refresh": "Refresh",
       "retransmit_this": "Retransmit this post to your followers?",
@@ -115,6 +125,8 @@ if(preferredLanguage == "en"){
       "Reply...": "Reply...",
       "reply_to": "Reply to %{fullname}",
       "Retransmit": "Retransmit",
+      "retransmitted by": "retransmitted by",
+      "retransmitted your message": "retransmitted your message",
       "Retransmits": "Retransmits",
       "search": "search",
       "seconds": "%{smart_count} second |||| %{smart_count} seconds",
@@ -125,6 +137,9 @@ if(preferredLanguage == "en"){
       "Sent Post to @": "Sent Post to @",
       "Setup account": "Setup account",
       "Sound notifications": "Sound notifications",
+      "Sorry, YouTube retrieve an error with message:": "Sorry, YouTube retrieve an error with message:",
+      "short": "short",
+      "Show all": "Show all",
       "Show QR code":"Show QR code",
       "switch_to_network": "Local daemon is not connected to the network or\n" +
                 "block chain is outdated. If you stay in this page\n" +
@@ -135,7 +150,6 @@ if(preferredLanguage == "en"){
       "There aren't any posts with this hashtag.": "There aren't any posts with this hashtag.",
       "time_ago": "%{time} ago", // 5 minutes ago
       "Time of the last block:": "Time of the last block: ",
-      "twisted again by": "twisted again by ",
       "Type message here": "Type message here",
       "Unfollow": "Unfollow",
       "Update": "Update",
@@ -155,6 +169,8 @@ if(preferredLanguage == "en"){
       "username_undefined": "Username undefined, login required.",
       "View": "View",
       "View All": "View All",
+      "Vimeo links preview": "Vimeo links preview",
+      "Youtube links preview": "Youtube links preview",
       "Who to Follow": "Who to Follow",
       "Your message was sent!": "Your message was sent!",
       "twister login": "twister login",
@@ -176,7 +192,7 @@ if(preferredLanguage == "en"){
       "Terminate Daemon:": "Terminate Daemon:",
       "Exit": "Exit",
       "Save Changes": "Save Changes",
-      "Secret key:": "Secret key:"
+      "Secret key:": "Secret key:",
     };
 }
 
@@ -1023,23 +1039,9 @@ if(preferredLanguage == "fr"){
     };
 }
 
-// translators: sample adding a language
-if(preferredLanguage == "ru"){
-    // polyglot.locale() is used to support plurals
-    // locales currently known by Polyglot.js:
-    /*
-      chinese:   ['id', 'ja', 'ko', 'ms', 'th', 'tr', 'zh'],
-      german:    ['da', 'de', 'en', 'es', 'fi', 'el', 'he', 'hu', 'it', 'nl', 'no', 'pt', 'sv'],
-      french:    ['fr', 'tl'],
-      russian:   ['hr', 'ru'],
-      czech:     ['cs'],
-      polish:    ['pl'],
-      icelandic: ['is']
-    */
 
+if(preferredLanguage == "ru"){
     polyglot.locale("ru");
-
-    // list of the English words and translations
     wordset = {
        "Actions ▼": "Действия ▼", // , comma after each match except the last
        "Active DHT nodes:": "Активные узлы DHT: ",
@@ -1071,6 +1073,7 @@ if(preferredLanguage == "ru"){
        "download_posts_status": "Загружено %{portion} постов", // Downloaded 10/30 posts
        "Enable": "Включено",
        "error": "Ошибка: %{error}",
+       "Error code:": "Код ошибки:",
        "error_connecting_to_daemon": "Ошибка подключения к локальному демону twisterd.",
        "Error in 'createwalletuser' RPC.": "Ошибка при обращении к RPC - при попытке выполнить 'createwalletuser'.",
        "Error in 'importprivkey'": "Ошибка при обращении к RPC - при попытке выполнить 'importprivkey' %{rpc}",
@@ -1085,15 +1088,20 @@ if(preferredLanguage == "ru"){
        "Following": "Читаемых",
        "Following users": "Читаемые пользователи",
        "Force connection to peer:": "Принудительно подключиться к пиру:",
+       "full": "полный",
        "General information": "Основное",
        "Generate blocks (send promoted messages)": "Генерация блоков (отправка рекламных сообщений)",
        "Home": "Главная", // homepage
        "hours": "%{smart_count} час |||| %{smart_count} часов",
+       "If it's between users I follow": "Если упоминание между друзьями",
+       "Images preview": "Отображать изображения",
        "Inline image preview": "Отображать изображения в посте",
+       "Interface": "Интерфейс",
        "Internal error: lastPostId unknown (following yourself may fix!)": "Внутренняя ошибка: lastPostId неизвестен (Попробуйте подписаться сами на себя, это должно помочь!)",
        "Keys":"Клавиши",
        "Known peers:": "Известные пиры: ",
        "Last block is ahead of your computer time, check your clock.": "Последний полученный блок опережает время вашего компьютера, проверьте правильно ли работают часы.",
+       "Media links preview": "Предпросмотр медиа-ссылок",
        "Mentions": "Упоминания",
        "mentions_at": "Упоминания @%{user}",
        "minutes": "%{smart_count} минута |||| %{smart_count} минут",
@@ -1109,6 +1117,7 @@ if(preferredLanguage == "ru"){
        "Number of blocks in block chain:": "Количество блоков в цепочке: ",
        "Number of CPUs to use": "Сколько использовать ядер процессора",
        "Only alphanumeric and underscore allowed.": "Разрешены только латинские буквы, цифры и подчеркивания.",
+       "Only if I'm in": "Если меня упомянули",
        "Options": "Опции",
        "peer address": "адрес пира",
        "Private": "Приватный",
@@ -1117,8 +1126,11 @@ if(preferredLanguage == "ru"){
        "post": "отправить", // verb - button to post a message
        "Post to promote:": "Рекламное сообщение: ",
        "Posts": "Посты",
+       "Posts that begins with another user's @username": "Посты которые начинаются с @username другого пользователя",
+       "Preview size": "Размер области предпросмотра",
        "Promoted posts are needed to run the network infrastructure. If you want to help, start generating blocks and advertise. [en]": "Рекламные сообщения нужны для того, чтобы поддерживать инфраструктуру сети. Если вы хотите помочь, то включите генерацию блоков и распространяйте информацию о сети. [ru]",
        "propagating_nickname": "Распространяю информацию о регистрации %{username} в сеть...",
+       "Proxy for images preview": "Прокси для предпросмотра изображений",
        "Public": "Публичный",
        "Refresh": "Обновить",
        "retransmit_this": "Перепостить данное сообщение своим подписчикам?",
@@ -1126,6 +1138,8 @@ if(preferredLanguage == "ru"){
        "Reply...": "Ответить...",
        "reply_to": "Ответить %{fullname}",
        "Retransmit": "Перепостить",
+       "retransmitted by": "перепостил",
+       "retransmitted your message": "перепостил ваше сообщение",
        "Retransmits": "Репосты",
        "twisted again by": "Перепостил ",
        "search": "поиск",
@@ -1136,8 +1150,11 @@ if(preferredLanguage == "ru"){
        "Sent Direct Message": "Отправить личное сообщение",
        "Sent Post to @": "Отправить сообщение для @",      
        "Setup account": "Настроить аккаунт",
-       "Sound notifications": "Звуковые уведомления",
+       "short": "компактный",
+       "Show all": "Показывать все",
        "Show QR code":"Показать QR код",
+       "Sound notifications": "Звуковые уведомления",
+       "Sorry, YouTube retrieve an error with message:":"К сожалению YouTube вернул ошибку с сообщением:",
        "switch_to_network": "Локальный демон не подключен к сети или\n" +
                  "цепочка блоков устарела. Если вы останитесь на этой странице\n" +
                  "ваши действия могут быть не выполнены.\n" +
@@ -1167,8 +1184,10 @@ if(preferredLanguage == "ru"){
        "username_undefined": "Имя пользователя не определено, требуется войти.",
        "View": "Просмотреть",
        "View All": "Просмотреть всё",
+       "Vimeo links preview": "Предпросмотр ссылок на Vimeo",
        "Who to Follow": "Кого почитать",
        "Your message was sent!": "Ваше сообщение отправлено!",
+       "Youtube links preview": "Предпросмотр ссылок на YouTube",
        "twister login": "Вход в twister",
        "Existing local users": "Предыдущие аккаунты",
        "Or...": "Или...",
@@ -1791,6 +1810,7 @@ var fixedLabels = [
   ".module h1",
   ".module h2",
   ".module label span",
+  "select option",
 
   // following page
   ".following h2",

js/options.js

@@ -102,30 +102,35 @@ var TwisterOptions = function()
 	}
 
 	this.showPreviewOpt = function() {
-		
+		var $gifCheckBox = $('.gifCheckBox');
 		$('.previewOpt').each(function() {
 			this.value = $.Options.getOption(this.id, 'enable');
 		})
 
-		$('.gifCheckBox').prop('checked', $.Options.getOption('imagesPreviewGif', 'true'))
+		$gifCheckBox.prop('checked', $.Options.getOption('imagesPreviewGif', 'true'))
 		
 		if($.Options.getOption('imagesPreview', 'enable') === 'disable'){
-			$('input[type="checkbox"]').prop('disabled', 'true')
+			$gifCheckBox.prop('disabled', 'true')
 		}
 		
 		$('.previewOpt').on('change', function(){
 			$.Options.setOption(this.id, this.value)
 			if (this.id === 'imagesPreview'){
 				switch(this.value){
-					case 'enable': $('.gifCheckBox').prop('disabled', false); break;
-					case 'disable': $('.gifCheckBox').prop('disabled', true); break;
+					case 'enable': $gifCheckBox.prop('disabled', false); break;
+					case 'disable': $gifCheckBox.prop('disabled', true); break;
 				}
 			}
-		})
+		});
 		
-		$('input[type="checkbox"]').on('click', function(){
+		$gifCheckBox.on('click', function(){
 			$.Options.setOption(this.name, this.checked)
-		})
+		});
+		$('input[name="previewSize"]').on('change', function () {
+		    $.Options.setOption(this.name, this.value);
+		});
+		var query = 'input[value=\"'+$.Options.getOption('previewSize', 'short')+'\"]';
+		$(query)[0].checked = true;
 	}
 	this.imgPreviwProxy = function () {
 	    $('#imgPreviewProxy').val($.Options.getOption('imgPreviewProxy', 'disable'));
@@ -139,6 +144,60 @@ var TwisterOptions = function()
 	        $.Options.setOption(this.id, this.value);
 	    })
 	}
+	this.trendsFilter = function () {
+	    var $all = $('[name="trendsFilterAll"]');
+	    var $latin = $('[name="trendsFilterLat"]');
+	    var $cyrillic = $('[name="trendsFilterCyr"]');
+	    var $han = $('[name="trendsFilterHan"]');
+	    var $custom = $('[name="trendsFilterCustom"]');
+
+	    $('[name^="trendsFilter"]').each(function () {
+	        $this = $(this);
+
+	        if ($this.attr("type") === "checkbox") {
+	        	$this.prop('checked', $.Options.getOption(this.name, false));
+	        };
+	        if ($this.attr("type") === "text") $this.val($.Options.getOption(this.name, ""));
+	        if (this.name === 'trendsFilterAll' && $this.prop('checked') === true) {
+				$latin.prop('disabled', true);
+				$cyrillic.prop('disabled', true);
+				$han.prop('disabled', true);
+				$custom.prop('disabled', true);
+			};
+	    })
+
+		$all.on('click', function () {
+		    $.Options.setOption(this.name, this.checked);
+		    $latin.prop('disabled', this.checked);
+			$cyrillic.prop('disabled', this.checked);
+			$han.prop('disabled', this.checked);
+			$custom.prop('disabled', this.checked);
+		});
+		$latin.on('click', function () {
+		    $.Options.setOption(this.name, this.checked);
+		});
+		$cyrillic.on('click', function () {
+		    $.Options.setOption(this.name, this.checked);
+		});
+		$han.on('click', function () {
+		    $.Options.setOption(this.name, this.checked);
+		});
+		$custom.on('keyup', function () {
+		    $.Options.setOption(this.name, this.value);
+		});
+		$custom.on('blur', function () {
+		    var oldArr = $.Options.getOption(this.name, '').split(',');
+		    var newArr = [];
+		    oldArr.forEach(function (element, index, array) {
+		        var tempElem = $.trim(element);
+		        tempElem = tempElem[0] === '#' ? tempElem.slice(1) : tempElem;
+		        newArr.push(tempElem);
+		    });
+		    $.Options.setOption(this.name, newArr.join(','));
+		    $custom.val(newArr.join(','));
+		})
+
+	}
 	this.initOptions = function() {
 		this.soundNotifOptions();
 		this.volumeControl();
@@ -147,6 +206,7 @@ var TwisterOptions = function()
 		this.showPreviewOpt();
 		this.imgPreviwProxy();
 		this.showAlienReply();
+		this.trendsFilter();
 	}
 
 }

js/twister_directmsg.js

@@ -124,8 +124,13 @@ function newDirectMsg(msg,  dm_screenname) {
 }
 
 //dispara o modal de direct messages
-function directMessagesPopup()
+function directMessagesPopup(e)
 {
+    if (e) {
+        e.preventDefault();
+        e.stopPropagation();
+    }
+    
     var directMessagesClass = "directMessages";
     openModal( directMessagesClass );
 

js/twister_formatpost.js

@@ -54,6 +54,8 @@ function postToElem( post, kind ) {
     var elem = $.MAL.getPostTemplate().clone(true);
     elem.removeAttr('id');
     elem.addClass(kind);
+    if ("rt" in userpost) elem.addClass("rt");
+    if ("rt" in userpost && userpost.rt.n === defaultScreenName) elem.addClass("rt-me");
     elem.attr('data-time', t);
 
     var postData = elem.find(".post-data");
@@ -95,13 +97,25 @@ function postToElem( post, kind ) {
     postData.attr("data-reply-to",replyTo);
 
     if( retweeted_by != undefined ) {
-        elem.find(".post-context").show();
-        var retweetedByElem = elem.find(".post-retransmited-by");
+        var postContext = elem.find(".post-context").show();
+        var retweetedByElem = $('<a></a>').addClass('post-retransmited-by open-profile-modal');
         retweetedByElem.attr("href", $.MAL.userUrl(retweeted_by));
         retweetedByElem.text('@'+retweeted_by);
+        retweetedByElem.bind("click", openProfileModal);
+
+        var retweetedByMessageElem = $('<span></span>').addClass('rt-message');
+        if (elem.hasClass('rt-me')) {
+            retweetedByMessageElem.text(" "+polyglot.t("retransmitted your message"));
+            postContext.append(retweetedByElem);
+            postContext.append(retweetedByMessageElem);
+        } else {
+            retweetedByMessageElem.text(polyglot.t("retransmitted by")+" ");
+            postContext.append(retweetedByMessageElem);
+            postContext.append(retweetedByElem);
+        }
     }
 
-    //hed//media preview
+    //media preview
     var previewContainer = elem.find('.preview-container'), postText = elem.find(".post-text"); 
     var postLink = postText.find("a[rel='nofollow']")[0] ? postText.find("a[rel='nofollow']")[0].href : '';
     var ytRegExp = /(?:https?:\/\/)?(?:www\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})(?:\S+)?/i;
@@ -367,18 +381,30 @@ function getYoutubePreview(link, ytid) {
             url: "http://gdata.youtube.com/feeds/api/videos/"+ytid+"?v=2&alt=jsonc",
             dataType: 'jsonp',
             success: function(data) {
-                ytDataStorage[ytid] = {
-                    title: data.data.title,
-                    description: data.data.description.substring(0, 400),
-                    thumbnail: data.data.thumbnail.hqDefault,
-                    link: 'http://youtu.be/'+ytid,
-                    time: Date.now()
-                };
+                if (data.data) {
+                    ytDataStorage[ytid] = {
+                        title: data.data.title,
+                        description: data.data.description.substring(0, 400)+'…',
+                        thumbnail: data.data.thumbnail.hqDefault,
+                        link: 'http://youtu.be/'+ytid,
+                        time: Date.now()
+                    }
+                } else if (data.error) {
+                    ytDataStorage[ytid] = {
+                        title: polyglot.t('Sorry, YouTube retrieve an error with message:')+' '+data.error.message,
+                        description: polyglot.t('Error code:')+' '+data.error.code,
+                        thumbnail: '/img/yt-error.png',
+                        link: 'http://youtu.be/'+ytid,
+                        time: Date.now()
+                    }
+                } else {
+                    console.warn("An error accured with youtube preview retrieve")
+                }
                 localStorage['ytData'] = JSON.stringify(ytDataStorage);
 
                 vidPreviewTmpl.find('img').attr('src', ytDataStorage[ytid].thumbnail);
                 vidPreviewTmpl.find('a').text(ytDataStorage[ytid].title).attr('href', link).attr('target', '_blank');
-                if (ytDataStorage[ytid].description) vidPreviewTmpl.find('p').html(ytDataStorage[ytid].description+'…');
+                if (ytDataStorage[ytid].description) vidPreviewTmpl.find('p').html(ytDataStorage[ytid].description);
                 $('[data-youtube-id='+ytid+']').append(vidPreviewTmpl);
             }
         });
@@ -401,7 +427,7 @@ function getVimeoPreview (link, vimid) {
             success: function(data) {
                 vimDataStorage[vimid] = {
                     title: data[0].title,
-                    description: data[0].description.substring(0, 400),
+                    description: data[0].description.substring(0, 400)+'…',
                     thumbnail: data[0].thumbnail_large,
                     link: data[0].url,
                     time: Date.now()
@@ -410,7 +436,7 @@ function getVimeoPreview (link, vimid) {
 
                 vidPreviewTmpl.find('img').attr('src', vimDataStorage[vimid].thumbnail);
                 vidPreviewTmpl.find('a').text(vimDataStorage[vimid].title).attr('href', link).attr('target', '_blank');
-                if (vimDataStorage[vimid].description) vidPreviewTmpl.find('p').html(vimDataStorage[vimid].description+'…');
+                if (vimDataStorage[vimid].description) vidPreviewTmpl.find('p').html(vimDataStorage[vimid].description);
                 $('[data-vimeo-id='+vimid+']').append(vidPreviewTmpl);
             }
         });

js/twister_io.js

@@ -255,7 +255,7 @@ function getLocation( username, item ){
 function getWebpage( username, item ){
     getProfileResource( username, "url", item,
                       function(args, val) {
-                           if( val.indexOf("://") < 0 ) {
+                           if( val && val.indexOf("://") < 0 ) {
                                val = "http://" + val;
                            }
                            args.item.attr("href", val);

js/twister_network.js

@@ -47,7 +47,6 @@ function requestNetInfo(cbFunc, cbArg) {
                    $(".known-peers").text(twisterdAddrman);
                    $(".blocks").text(twisterdBlocks);
                    $(".dht-nodes").text(twisterDhtNodes);
-                   $(".userMenu-dhtindicator a").text(twisterDhtNodes);
                    $(".version").text(twisterDisplayVersion);
 
                    $(".dht-torrents").text(ret.dht_torrents);

js/twister_newmsgs.js

@@ -9,6 +9,7 @@
 var _knownMentions = {}
 var _lastMentionTime = 0;
 var _newMentions = 0;
+var _lastLocalMentionId = -1;
 var PURGE_OLD_MENTIONS_TIMEOUT = 3600 * 24 * 30; // one month
 
 // process a mention received to check if it is really new
@@ -52,6 +53,7 @@ function saveMentionsToStorage() {
     ns.localStorage.set("knownMentions", _knownMentions);
     ns.localStorage.set("lastMentionTime", _lastMentionTime);
     ns.localStorage.set("newMentions", _newMentions);
+    ns.localStorage.set("lastLocalMentionId",_lastLocalMentionId);
 }
 
 function loadMentionsFromStorage() {
@@ -62,9 +64,26 @@ function loadMentionsFromStorage() {
         _lastMentionTime = ns.localStorage.get("lastMentionTime");
     if( ns.localStorage.isSet("newMentions") )
         _newMentions = ns.localStorage.get("newMentions");
+    if( ns.localStorage.isSet("lastLocalMentionId") )
+        _lastLocalMentionId = ns.localStorage.get("lastLocalMentionId");
 }
 
 function requestMentionsCount() {
+    // first: getmentions from torrents we follow
+    twisterRpc("getmentions", [defaultScreenName, 100, {"since_id":_lastLocalMentionId}],
+           function(args, data) {
+               if( data ) {
+                   for( var i = 0; i < data.length; i++ ) {
+                       _lastLocalMentionId = Math.max(_lastLocalMentionId, data[i]["id"]);
+                       var userpost = data[i]["userpost"];
+                       processMention( userpost["n"], userpost["time"], data[i]);
+                   }
+                   $.MAL.updateNewMentionsUI(_newMentions);
+               }
+           }, null,
+           function(req, ret) {console.log("getmentions API requires twister-core > 0.9.27");}, null);
+
+    // second: get mentions from dht (not-following)
     dhtget( defaultScreenName, "mention", "m",
            function(args, data) {
                if( data ) {

js/twister_timeline.js

@@ -282,7 +282,7 @@ function processNewPostsConfirmation(expected, posts)
     _newPostsPending += posts.length;
 
     //we don't want to produce alert for the posts that won't be displayed
-    var p2h = 1;
+    var p2h = 0;
     for( var i = posts.length-1; i >= 0; i-- ) {
         if (willBeHidden(posts[i])) {
             //posts.splice(i, 1);
@@ -291,7 +291,7 @@ function processNewPostsConfirmation(expected, posts)
     }
     _newPostsPending += posts.length - p2h;
     if( _newPostsPending ) {
-        $.MAL.reportNewPosts(_newPostsPending);
+        $.MAL.reportNewPosts(_newPostsPending-1);
     }
     if( posts.length < expected ) {
         // new DMs have probably been produced by users we follow.

login.html

@@ -21,17 +21,17 @@
     <script src="js/polyglot.min.js"></script>
     <script src="js/interface_localization.js"></script>
     <script src="js/calm.js"></script>
+    <script src="js/dl.js"></script>
 
     <script>
         $(document).ready(function(){initInterfaceLogin()});
-        changeStyle();
     </script>
 
     <link rel="icon" type="image/png" href="img/twister_mini.png" />
   </head>
 
   <body>
-    
+  <div class="bgdl"></div>
   <!-- MENU SUPERIOR INIT-->
   <nav class="userMenu">
     <ul>

network.html

@@ -23,17 +23,17 @@
     <script src="js/twister_network.js"></script>
     <script src="js/interface_common.js"></script>
     <script src="js/calm.js"></script>
+    <script src="js/dl.js"></script>
 
     <script>
         $(document).ready(function(){initInterfaceNetwork()});
-        changeStyle();
     </script>
 
     <link rel="icon" type="image/png" href="img/twister_mini.png" />
   </head>
 
   <body>
-    
+  <div class="bgdl"></div>
   <!-- MENU SUPERIOR INIT-->
   <nav class="userMenu">
     <ul>
@@ -115,6 +115,7 @@
             <label> Mining difficulty: </label>
             <span class="mining-difficulty">0.0</span>
           </li>
+		</ul>
 		
         <h3> Traffic information </h3>
         <ul>

options.html

@@ -21,6 +21,7 @@
     <script src="js/polyglot.min.js"></script>
     <script src="js/interface_localization.js"></script>
     <script src="js/calm.js"></script>
+    <script src="js/dl.js"></script>
     <script>
     $(function(){
       initInterfaceCommon();
@@ -30,7 +31,7 @@
   </head>
 
   <body>
-    
+  <div class="bgdl"></div>
   <!-- MENU SUPERIOR INIT--> 
   <nav class="userMenu">
     <ul>
@@ -55,7 +56,7 @@
 
       <div class="module">
         <h1>Interface</h1>
-          <h2>Language</h2>
+          <h2>Use language</h2>
           <select id="locLang">
             <option value="auto">Auto</option>
             <option value="pt-BR">Braz. Portuguese</option>
@@ -76,6 +77,17 @@
             <option value="only-me">Only if I'm in</option>
             <option value="following">If it's between users I follow</option>
           </select>
+          <div class="trendsFilterWrapper">
+            <h2>Trends filter</h2>
+              <span>all</span> <input type="checkbox" name="trendsFilterAll">
+              <span>latin</span> <input type="checkbox" name="trendsFilterLat">
+              <span>cyrillic</span> <input type="checkbox" name="trendsFilterCyr">
+              <span>han</span> <input type="checkbox" name="trendsFilterHan">
+              <div class="customWrapper">
+                <h2>Custom hashtags (comma-separated)</h2>
+                <input type="text" name="trendsFilterCustom">
+              </div>
+          </div>
       </div>
       <div class="module">
         <h1>Media links preview</h1>
@@ -84,7 +96,7 @@
           <option value="enable">Enable</option>
           <option value="disable">Disable</option>
         </select>
-          <label><span>Display GIF images</span><input class="gifCheckBox" type="checkbox" name="imagesPreviewGif"></label>
+          <label class="gifCheckBoxLabel"><span>Display GIF images</span><input class="gifCheckBox" type="checkbox" name="imagesPreviewGif"></label>
         <h2>Youtube links preview</h2>
         <select name="" id="youtubePreview" class="previewOpt">
           <option value="enable">Enable</option>
@@ -95,36 +107,44 @@
           <option value="enable">Enable</option>
           <option value="disable">Disable</option>
         </select>
+        <h2>Preview size</h2>
+        <div class="previewSizeContainer">
+          <span>full</span> <input type="radio" name="previewSize" value="full">
+          <span>short</span> <input type="radio" name="previewSize" value="short">
+        </div>
         <h2>Proxy for images preview</h2>
         <select name="" id="imgPreviewProxy" class="previewOpt">
           <option value="disable">Disable</option>
-          <option value="https://london-s01-i15-traffic.cyberghostvpn.com/go/browse.php?u=">London</option>
-          <option value="https://losangeles-s02-i01-traffic.cyberghostvpn.com/go/browse.php?u=">Los Angeles</option>
-          <option value="https://frankfurt-s02-i01-traffic.cyberghostvpn.com/go/browse.php?u=">Frankfurt</option>
-          <option value="https://bucharest-s05-i01-traffic.cyberghostvpn.com/go/browse.php?u=">Bucharest</option>
+          <option value="https://us-free-proxy.cyberghostvpn.com/go/browse.php?u=">US</option>
+          <option value="https://gb-free-proxy.cyberghostvpn.com/go/browse.php?u=">GB</option>
+          <option value="https://de-free-proxy.cyberghostvpn.com/go/browse.php?u=">DE</option>
+          <option value="https://ro-free-proxy.cyberghostvpn.com/go/browse.php?u=">RO</option>
         </select>
       </div>
-      <div class="module">
+      <div class="module" style="position:relative;">
         <h1>Sound notifications</h1>
           <h2>Mentions</h2>
           <select name="" id="sndMention" class="sndOpt">
-            <option value="false">none</option>
-            <option value="1">beat</option>
-            <option value="2">pip</option>
-            <option value="3">vibro</option>
-            <option value="4">flip</option>
-            <option value="5">click</option>
+            <option value="false">Disable</option>
+            <option value="1">Beat</option>
+            <option value="2">Pip</option>
+            <option value="3">Vibro</option>
+            <option value="4">Flip</option>
+            <option value="5">Click</option>
           </select><br>
           <h2>Direct Messages</h2>
           <select name="" id="sndDM" class="sndOpt">
-            <option value="false">none</option>
-            <option value="1">beat</option>
-            <option value="2">pip</option>
-            <option value="3">vibro</option>
-            <option value="4">flip</option>
-            <option value="5">click</option>
+            <option value="false">Disable</option>
+            <option value="1">Beat</option>
+            <option value="2">Pip</option>
+            <option value="3">Vibro</option>
+            <option value="4">Flip</option>
+            <option value="5">Click</option>
           </select>
-          <input type="range" name="playerVol" id="playerVol" min="0" max="1" step="0.01"><span class="volValue">0</span>
+          <div class="volumeWrapper">
+            <div class="volValue">0</div>
+            <input type="range" name="playerVol" id="playerVol" min="0" max="1" step="0.01">
+          </div>
           <audio id="player"></audio>
       </div>
 

profile-edit.html

@@ -23,17 +23,17 @@
     <script src="js/interface_common.js"></script>
     <script src="js/interface_profile-edit.js"></script>
     <script src="js/calm.js"></script>
+    <script src="js/dl.js"></script>
 
     <script>
     $(document).ready(function(){initProfileEdit()});
-    changeStyle();
     </script>
 
     <link rel="icon" type="image/png" href="img/twister_mini.png" />
   </head>
 
   <body>
-    
+  <div class="bgdl"></div>
   <!-- MENU SUPERIOR INIT --> 
   <nav class="userMenu">
     <ul>