automatic ascii to unicode convertion feature

css/style.css

@@ -1542,6 +1542,17 @@ button.disabled:hover
 #notifyForm p, #choseLanguage p, #keysOpt p {
     margin-top: 15px;
 }
+.suboptions {
+    margin: 5px 30px;
+    border: double 2px rgba( 69, 71, 77, .1 );
+    height: 0px;
+    overflow: hidden;
+    transition: height 1s linear;
+    -webkit-transition: height 1s linear;
+    -moz-transition: height 1s linear;
+    -o-transition: height 1s linear;
+    -ms-transition: height 1s linear;
+}
 
 /* Autocomplite*/
 .textcomplete-wrapper textarea {

following.html

@@ -229,6 +229,7 @@
                         <textarea placeholder="Reply..."></textarea>
                         <div class="post-area-extras">
                             <span class="post-area-remaining">140</span>
+                            <button class="undo-unicode disabled" disabled="true">undo</button>
                             <button class="post-submit disabled" disabled="true">post</button>
                         </div>
                     </form>
@@ -282,6 +283,7 @@
           <textarea placeholder="New Post..."></textarea>
           <div class="post-area-extras">
             <span class="post-area-remaining">140</span>
+            <button class="undo-unicode disabled" disabled="true">undo</button>
             <button class="post-submit disabled" disabled="true">post</button>
           </div>
         </form>
@@ -329,6 +331,7 @@
         <textarea placeholder="New direct message..."></textarea>
         <div class="post-area-extras">
           <span class="post-area-remaining">140</span>
+          <button class="undo-unicode disabled" disabled="true">undo</button>
           <button class="dm-submit disabled" disabled="true">send</button>
         </div>
       </form>

home.html

@@ -127,6 +127,7 @@
             <textarea placeholder="New Post..."></textarea>
             <div class="post-area-extras">
               <span class="post-area-remaining">140</span>
+              <button class="undo-unicode disabled" disabled="true">undo</button>
               <button class="post-submit disabled" disabled="true">post</button>
             </div>
           </form>
@@ -251,6 +252,7 @@
                         <textarea placeholder="Reply..."></textarea>
                         <div class="post-area-extras">
                             <span class="post-area-remaining">140</span>
+                            <button class="undo-unicode disabled" disabled="true">undo</button>
                             <button class="post-submit disabled" disabled="true">post</button>
                         </div>
                     </form>
@@ -305,6 +307,7 @@
           <textarea placeholder="New Post..."></textarea>
           <div class="post-area-extras">
             <span class="post-area-remaining">140</span>
+            <button class="undo-unicode disabled" disabled="true">undo</button>
             <button class="post-submit disabled" disabled="true">post</button>
           </div>
         </form>
@@ -352,6 +355,7 @@
         <textarea placeholder="New direct message..."></textarea>
         <div class="post-area-extras">
           <span class="post-area-remaining">140</span>
+          <button class="undo-unicode disabled" disabled="true">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="true">send</button>
         </div>
       </form>

js/interface_common.js

@@ -424,6 +424,8 @@ function replyTextKeypress(e) {
     var $this = $( this );
     var tweetForm = $this.parents("form");
     if( tweetForm != undefined ) {
+        if ($.Options.getUnicodeConversionOpt() !== "disable")
+            $this.val(convert2Unicodes($this.val(), $this));
         var c = 140 - $this.val().length;
         var remainingCount = tweetForm.find(".post-area-remaining");
         remainingCount.text(c);
@@ -458,6 +460,442 @@ function replyTextKeypress(e) {
     }
 }
 
+/*
+ *  unicode convertion list
+ *  k: original string to be replaced
+ *  u: unicode
+ *  n: index of char to be stored and appended to result
+ */
+var unicodeConversionList = {
+    "ponctuations": [
+        {
+            "k": /\.\.\./,
+            "u": "…",
+            "n": -1
+        },
+        {
+            "k": /\.\../,
+            "u": "‥",
+            "n": 2
+        },
+        {
+            "k": /\?\?/,
+            "u": "⁇",
+            "n": -1
+        },
+        {
+            "k": /\?!/,
+            "u": "⁈",
+            "n": -1
+        },
+        {
+            "k": /!\?/,
+            "u": "⁉",
+            "n": -1
+        },
+        {
+            "k": /!!/,
+            "u": "‼",
+            "n": -1
+        }
+    ],
+    "emotions": [
+        {
+            "k": /:.{0,1}D/,
+            "u": "😃",
+            "n": -1
+        },
+        {
+            "k": /(0|O):-{0,1}\)/i,
+            "u": "😇",
+            "n": -1
+        },
+        {
+            "k": /:beer:/,
+            "u": "🍺",
+            "n": -1
+        },
+        {
+            "k": /3:.{0,1}\)/,
+            "u": "😈",
+            "n": -1
+        },
+        {
+            "k": /<3/,
+            "u":"❤",
+            "n": -1
+        },
+        {
+            "k": /o.O|:\/|:\\/,
+            "u": "😕",
+            "n": -1
+        },
+        {
+            "k": /:\'\(/,
+            "u": "😢",
+            "n": -1
+        },
+        {
+            "k": /(:|=).{0,1}\(/,
+            "u": "😞",
+            "n": -1
+        },
+        {
+            "k": /8(\)<|\|)/,
+            "u": "😎",
+            "n": -1
+        },
+        {
+            "k": /(:|=)-{0,1}(\)|\])/,
+            "u": "😊",
+            "n": -1
+        },
+        {
+            "k": /(\(|\[)-{0,1}(:|=)/,
+            "u": "😊",
+            "n": -1
+        },
+        {
+            "k": /:\*/,
+            "u": "😗",
+            "n": -1
+        },
+        {
+            "k": /\^.{0,1}\^/,
+            "u": "😆",
+            "n": -1
+        },
+        {
+            "k": /:p/i,
+            "u": "😛",
+            "n": -1
+        },
+        {
+            "k": /;-{0,1}\)/,
+            "u": "😉",
+            "n": -1
+        },
+        {
+            "k": /\(-{0,1};/,
+            "u": "😉",
+            "n": -1
+        },
+        {
+            "k": /:(O|0)/,
+            "u": "😮",
+            "n": -1
+        },
+        {
+            "k": /:@/,
+            "u": "😱",
+            "n": -1
+        }
+    ],
+    "signs": [
+        {
+            "k": / tel( |:|=)/i,
+            "u": " ℡",
+            "n": 4
+        },
+        {
+            "k": /^tel( |:|=)/i,
+            "u": "℡",
+            "n": 3
+        },
+        {
+            "k": / fax( |:|=)/i,
+            "u": " ℻",
+            "n": 4
+        },
+        {
+            "k": /^fax( |:|=)/i,
+            "u": "℻",
+            "n": 3
+        }
+    ],
+    "fractions": [
+        {
+            "k": /1\/2/,
+            "u": "½",
+            "n": -1
+        },
+        {
+            "k": /1\/3/,
+            "u": "⅓",
+            "n": -1
+        },
+        {
+            "k": /2\/3/,
+            "u": "⅔",
+            "n": -1
+        },
+        {
+            "k": /1\/4/,
+            "u": "¼",
+            "n": -1
+        },
+        {
+            "k": /3\/4/,
+            "u": "¾",
+            "n": -1
+        },
+        {
+            "k": /1\/5/,
+            "u": "⅕",
+            "n": -1
+        },
+        {
+            "k": /2\/5/,
+            "u": "⅖",
+            "n": -1
+        },
+        {
+            "k": /3\/5/,
+            "u": "⅗",
+            "n": -1
+        },
+        {
+            "k": /4\/5/,
+            "u": "⅘",
+            "n": -1
+        },
+        {
+            "k": /1\/6/,
+            "u": "⅙",
+            "n": -1
+        },
+        {
+            "k": /5\/6/,
+            "u": "⅚",
+            "n": -1
+        },
+        {
+            "k": /1\/7/,
+            "u": "⅐",
+            "n": -1
+        },
+        {
+            "k": /1\/8/,
+            "u": "⅛",
+            "n": -1
+        },
+        {
+            "k": /3\/8/,
+            "u": "⅜",
+            "n": -1
+        },
+        {
+            "k": /5\/8/,
+            "u": "⅝",
+            "n": -1
+        },
+        {
+            "k": /7\/8/,
+            "u": "⅞",
+            "n": -1
+        },
+        {
+            "k": /1\/9/,
+            "u": "⅑",
+            "n": -1
+        },
+        {
+            "k": /1\/10/,
+            "u": "⅒",
+            "n": -1
+        }
+    ]
+};
+
+/*
+ * a stack for undo...
+ * element for the unicodeConversionStack
+ * {
+        k: original string that's replaced
+        u: unicode
+        p: position in string
+        l: length of k
+        m: new string length after convertion
+ * }
+ */
+var unicodeConversionStack = [];
+//we want to handle new typed text after the last conversion.
+var lastConvertedIndex = -1;
+
+function convert2Unicodes(s, ta) {
+
+    var tmp = s;
+
+    //check if there is a deletion...
+    //NOTE: BUGGY... can't handle everytime...
+    if (unicodeConversionStack.length>0 && s.length < unicodeConversionStack[0].m){
+        //check if a replaced unicode was deleted...
+        for (var i=unicodeConversionStack.length-1; i>=0; i--){
+            //get position and check the positions are same...
+            var ni = s.indexOf(unicodeConversionStack[i].u);
+            if (ni > -1 && s[ni] !== unicodeConversionStack[i].p){
+                var op = -1;
+                for (var j=i-1; j>=0; j--){
+                    if (unicodeConversionStack[j].u === unicodeConversionStack[i].u){
+                        if (unicodeConversionStack[j].p === ni){
+                            op = -1;
+                            break;
+                        }
+                        op = unicodeConversionStack[j].p;
+                    }
+                }
+                if (op === -1) {
+                    //remove deleted unicode...
+                    unicodeConversionStack.splice(i, 1);
+                } else {
+                    //update the position of the unicode!
+                    unicodeConversionStack[i].p = ni;
+                }
+            }
+        }
+        unicodeConversionStack[0].m = s.length;
+    }
+
+    if (s.length < lastConvertedIndex)
+        lastConvertedIndex = s.length;
+
+    if ($.Options.getUnicodeConversionOpt() === "enable" || $.Options.getConvertPunctuationsOpt()){
+
+        var list = unicodeConversionList.ponctuations;
+        for (var i=0; i<list.length; i++){
+            var kl = list[i].k.exec(tmp);
+            if (kl && kl.length > 0 && kl.index >= lastConvertedIndex) {
+                var nc = "";
+                if (list[i].n > -1){
+                    //if it's necessary, get any next char to prevent from any data loss
+                    nc = tmp[kl.index + list[i].n];
+                }
+                tmp = tmp.replace(list[i].k, list[i].u + nc);
+                var len = s.length - tmp.length + list[i].u.length;
+                unicodeConversionStack.unshift({
+                    "k": s.substr(kl.index, len),
+                    "u": list[i].u + nc,
+                    "p": kl.index,
+                    "l": len,
+                    "m": tmp.length
+                });
+                s = tmp;
+                lastConvertedIndex = tmp.length;
+            }
+        }
+    }
+
+    if ($.Options.getUnicodeConversionOpt() === "enable"|| $.Options.getConvertEmotionsOpt()){
+
+        var list = unicodeConversionList.emotions;
+        for (var i=0; i<list.length; i++){
+            var kl = list[i].k.exec(tmp);
+            if (kl && kl.length > 0 && kl.index >= lastConvertedIndex) {
+                var nc = "";
+                if (list[i].n > -1){
+                    //if it's necessary, get any next char to prevent from any data loss
+                    nc = tmp[kl.index + list[i].n];
+                }
+                tmp = tmp.replace(list[i].k, list[i].u + nc);
+                var len = s.length - tmp.length + list[i].u.length;
+                unicodeConversionStack.unshift({
+                    "k": s.substr(kl.index, len),
+                    "u": list[i].u + nc,
+                    "p": kl.index,
+                    "l": len,
+                    "m": tmp.length
+                });
+                s = tmp;
+                lastConvertedIndex = tmp.length;
+            }
+        }
+    }
+
+    if ($.Options.getUnicodeConversionOpt() === "enable"|| $.Options.getConvertSignsOpt()){
+
+        var list = unicodeConversionList.signs;
+        for (var i=0; i<list.length; i++){
+            var kl = list[i].k.exec(tmp);
+            if (kl && kl.length > 0 && kl.index >= lastConvertedIndex) {
+                var nc = "";
+                if (list[i].n > -1){
+                    //if it's necessary, get any next char to prevent from any data loss
+                    nc = tmp[kl.index + list[i].n];
+                }
+                tmp = tmp.replace(list[i].k, list[i].u + nc);
+                var len = s.length - tmp.length + list[i].u.length;
+                unicodeConversionStack.unshift({
+                    "k": s.substr(kl.index, len),
+                    "u": list[i].u + nc,
+                    "p": kl.index,
+                    "l": len,
+                    "m": tmp.length
+                });
+                s = tmp;
+                lastConvertedIndex = tmp.length;
+            }
+        }
+    }
+
+    if ($.Options.getUnicodeConversionOpt() === "enable"|| $.Options.getConvertFractionsOpt()){
+
+        var list = unicodeConversionList.fractions;
+        for (var i=0; i<list.length; i++){
+            var kl = list[i].k.exec(tmp);
+            if (kl && kl.length > 0 && kl.index >= lastConvertedIndex) {
+                var nc = "";
+                if (list[i].n > -1){
+                    //if it's necessary, get any next char to prevent from any data loss
+                    nc = tmp[kl.index + list[i].n];
+                }
+                tmp = tmp.replace(list[i].k, list[i].u + nc);
+                var len = s.length - tmp.length + list[i].u.length;
+                unicodeConversionStack.unshift({
+                    "k": s.substr(kl.index, len),
+                    "u": list[i].u + nc,
+                    "p": kl.index,
+                    "l": len,
+                    "m": tmp.length
+                });
+                s = tmp;
+                lastConvertedIndex = tmp.length;
+            }
+        }
+    }
+
+    if (unicodeConversionStack.length > 0){
+        var ub = ta.closest(".post-area-new").find(".undo-unicode");
+        ub.text("undo: " + unicodeConversionStack[0].u);
+        $.MAL.enableButton(ub);
+    } else {
+        $.MAL.disableButton(ta.closest(".post-area-new").find(".undo-unicode"));
+    }
+
+    return tmp;
+}
+
+//BUGGY... if user deletes something in the middle, stack could be deformed...
+function undoLastUnicode(e) {
+    e.stopPropagation();
+    e.preventDefault();
+
+    if (unicodeConversionStack.length === 0)
+        return;
+
+    var uc = unicodeConversionStack.shift();
+
+    $ta = $(this).closest(".post-area-new").find("textarea");
+    var pt = $ta.val();
+
+    if (pt.substr(uc.p, uc.u.length) === uc.u)
+        $ta.val(pt.substr(0,uc.p) + uc.k + pt.substr(uc.p + 2));
+
+    if (unicodeConversionStack.length > 0)
+        $(this).text("undo: " + unicodeConversionStack[0].u);
+    else
+        $.MAL.disableButton($(this));
+}
+
 var postSubmit = function(e)
 {
     e.stopPropagation();
@@ -518,6 +956,11 @@ function initInterfaceCommon() {
     $( ".post-submit").click( postSubmit );
     $( ".modal-propagate").click( retweetSubmit );
 
+    if ($.Options.getUnicodeConversionOpt() === "disable")
+        $( ".undo-unicode" ).click( undoLastUnicode ).css("display", "none");
+    else
+        $( ".undo-unicode" ).click( undoLastUnicode );
+
     var $replyText = $( ".post-area-new textarea" );
     $replyText.on("keyup", replyTextKeypress );
 

js/interface_localization.js

@@ -1742,7 +1742,42 @@ if(preferredLanguage == "tr"){
       "Secret key:": "Gizli anahtar:",
       "Options": "Ayarlar",
       "Switch to Promoted posts": "Destekli Mesajlara Geç",
-      "Switch to Normal posts": "Normal Mesajlara Geç"
+      "Switch to Normal posts": "Normal Mesajlara Geç",
+      "Use language": "Dil ayarla",
+      "Ignore": "Görmezden gel",
+      "Theme": "Tema",
+      "Keys": "Tuşlar",
+      "Sound notifications": "Sesli uyarılar",
+      "Send key": "Gönderme tuşu",
+      "Posts display": "Gönderiler",
+      "Post editor": "Gönderi düzenleyici",
+      "Inline image preview": "Dahili resim ön izleme",
+      "Display": "Göster",
+      "Line feeds": "Satır sonları",
+      "Supported punctuations:": "Desteklenen noktalama işaretleri:",
+      "Supported emotions:": "Desteklenen duygu simgeleri:",
+      "Supported signs:": "Desteklenen işaretler:",
+      "Supported fractions:": "Desteklenen kesirler:",
+      "Automatic unicode conversion options": "Otomatik unicode dönüştürme seçenekleri",
+      "Convert punctuations to unicode": "Noktalama işaretlerini unicode'a dönüştür",
+      "Convert emotions codes to unicode symbols": "Duygu simge kodlarını unicode simgelerine dönüştür",
+      "Convert common signs to unicode": "Yaygın işaretleri unicode'a dönüştür",
+      "Convert fractions to unicode": "Kesirleri unicode'a dönüştür",
+      "Convert all": "Hepsini dönüştür",
+      "Auto": "Otomatik",
+      "Original": "Orjinal",
+      "none": "Hiçbiri",
+      "Custom": "Özel",
+      "Mentions": "Bahsedenler",
+      "You have to log in to post messages.": "Mesaj göndermek için giriş yapmalısınız.",
+      "You have to log in to post replies.": "Cevap göndermek için giriş yapmalısınız.",
+      "You have to log in to retransmit messages.": "Yeniden iletmek için giriş yapmalısınız.",
+      "You have to log in to use direct messages.": "Direk masajları kullanabilmek için giriş yapmalısınız.",
+      "You have to log in to follow users.": "Kullanıcı takip etmek için giriş yapmalısınız.",
+      "You are not following anyone because you are not logged in.": "Giriş yapmadığınız için kimseyi takip etmiyorsunuz.",
+      "You don't have any followers because you are not logged in.": "Giriş yapmadığınız için hiç takipçiniz yok.",
+      "No one can mention you because you are not logged in.": "Giriş yapmadığınız için kimse adınıza mesaj gönderemiyor.",
+      "You don't have any profile because you are not logged in.": "Giriş yapmadığınız için profiliniz yok."
     };
 }
 
@@ -1791,7 +1826,10 @@ var fixedLabels = [
   ".module span",
   ".login span",
   ".login-local-username",
-  ".login input"
+  ".login input",
+
+  //options page
+  "option"
 ];
 $(document).ready(function(){
   for(var i=0;i<fixedLabels.length;i++){

js/options.js

@@ -141,7 +141,74 @@ var TwisterOptions = function()
 
         $('#showPreviewOpt select').on('change', function(){
             $.Options.setOption(this.id, this.value);
-        })
+        });
+    }
+
+    this.getUnicodeConversionOpt = function () {
+        return $.Options.getOption('unicodeConversion', "disable");
+    }
+
+    this.setUnicodeConversionOpt = function () {
+        $("#unicodeConversion")[0].value = this.getUnicodeConversionOpt();
+
+        if (this.getUnicodeConversionOpt() === "custom")
+            $("#unicodeConversionOpt .suboptions")[0].style.height = "230px";
+
+        $("#unicodeConversion").on('change', function () {
+            $.Options.setOption(this.id, this.value);
+            if (this.value === "custom")
+                $("#unicodeConversionOpt .suboptions")[0].style.height = "230px";
+            else
+                $("#unicodeConversionOpt .suboptions")[0].style.height = "0px";
+        });
+    }
+
+    this.getConvertPunctuationsOpt = function() {
+        return $.Options.getOption('convertPunctuationsOpt', false);
+    }
+    
+    this.setConvertPunctuationsOpt = function () {
+        $('#convertPunctuationsOpt')[0].checked = this.getConvertPunctuationsOpt();
+
+        $('#convertPunctuationsOpt').on('change', function(){
+            $.Options.setOption(this.id, this.checked);
+        });
+    }
+
+    this.getConvertEmotionsOpt = function() {
+        return $.Options.getOption('convertEmotionsOpt', false);
+    }
+    
+    this.setConvertEmotionsOpt = function () {
+        $('#convertEmotionsOpt')[0].checked = this.getConvertEmotionsOpt();
+
+        $('#convertEmotionsOpt').on('change', function(){
+            $.Options.setOption(this.id, this.checked);
+        });
+    }
+
+    this.getConvertSignsOpt = function() {
+        return $.Options.getOption('convertSignsOpt', false);
+    }
+    
+    this.setConvertSignsOpt = function () {
+        $('#convertSignsOpt')[0].checked = this.getConvertSignsOpt();
+
+        $('#convertSignsOpt').on('change', function(){
+            $.Options.setOption(this.id, this.checked);
+        });
+    }
+
+    this.getConvertFractionsOpt = function() {
+        return $.Options.getOption('convertFractionsOpt', false);
+    }
+    
+    this.setConvertFractionsOpt = function () {
+        $('#convertFractionsOpt')[0].checked = this.getConvertFractionsOpt();
+
+        $('#convertFractionsOpt').on('change', function(){
+            $.Options.setOption(this.id, this.checked);
+        });
     }
 
     this.InitOptions = function() {
@@ -152,6 +219,11 @@ var TwisterOptions = function()
         this.setTheme();
         this.setLineFeedsOpt();
         this.setShowPreviewOpt();
+        this.setUnicodeConversionOpt();
+        this.setConvertPunctuationsOpt();
+        this.setConvertEmotionsOpt();
+        this.setConvertSignsOpt();
+        this.setConvertFractionsOpt();
     }
 }
 

options.html

@@ -52,7 +52,7 @@
     <div class="language">
 
       <div class="module">
-        <p> Use language </p>
+        <p class="label"> Use language </p>
         <div>
             <form action="" id="selectLanguage">
               <select name="" id="language">
@@ -76,7 +76,7 @@
     <div class="language">
 
       <div class="module">
-        <p> Theme </p>
+        <p class="label"> Theme </p>
         <div>
             <form action="" id="selectTheme">
               <select name="" id="theme">
@@ -91,10 +91,10 @@
     <div class="sounds">
 
       <div class="module">
-        <p> Sound notifications </p>
+        <p class="label"> Sound notifications </p>
         <div>
             <form action="" id="notifyForm">
-              <p>Mentions</p>
+              <p class="label">Mentions</p>
               <select name="" id="sndMention" class="sndOpt">
                 <option value="false">none</option>
                 <option value="1">beat</option>
@@ -103,7 +103,7 @@
                 <option value="4">flip</option>
                 <option value="5">click</option>
               </select><br>
-              <p>Direct Messages</p>
+              <p class="label">Direct Messages</p>
               <select name="" id="sndDM" class="sndOpt">
                 <option value="false">none</option>
                 <option value="1">beat</option>
@@ -121,10 +121,10 @@
 
       <div class="keys">
         <div class="module">
-          <p> Keys </p>
+          <p class="label"> Keys </p>
           <div>
               <form action="" id="keysOpt">
-                <p>Send key</p>
+                <p class="label">Send key</p>
                 <select name="" id="keysSend">
                   <option value="enter">Enter</option>
                   <option value="ctrlenter">Ctrl/Cmd+Enter</option>
@@ -136,7 +136,7 @@
 
     <div class="posts-display">
       <div class="module">
-        <p> Posts display </p>
+        <p class="label"> Posts display </p>
         <div>
             <form action="" id="lineFeedsOpt">
               <p>Line feeds</p>
@@ -148,7 +148,7 @@
         </div>
         <div>
             <form action="" id="showPreviewOpt">
-              <p>Inline image preview</p>
+              <p class="label">Inline image preview</p>
               <select name="" id="displayPreview">
                 <option value="disable">Ignore</option>
                 <option value="enable">Display</option>
@@ -158,6 +158,48 @@
       </div>
     </div>
 
+    <div class="post-editor">
+        <div class="module">
+            <p class="label"> Post editor</p>
+            <br/>
+            <div>
+                <form action="" id="unicodeConversionOpt">
+                    <p class="label">Automatic unicode conversion options</p>
+                    <select name="" id="unicodeConversion">
+                        <option value="disable">Ignore</option>
+                        <option value="enable">Convert all</option>
+                        <option value="custom">Custom</option>
+                    </select>
+                    <div class="suboptions">
+                        <input name="" id="convertPunctuationsOpt" type="checkbox" /> <span class="label">Convert punctuations to unicode</span><br/>
+                        <div>
+                            <label class="label">Supported punctuations: </label>
+                            <span>‥ … ⁇ ⁈ ⁉ ‼</span>
+                        </div> 
+                        <br/>
+                        <input name="" id="convertEmotionsOpt" type="checkbox" /> <span class="label">Convert emotions codes to unicode symbols</span><br/>
+                        <div>
+                            <label class="label">Supported emotions: </label>
+                            <span>😃 😇 🍺 😈 ❤ 😕 😢 😞 😎 😊 😊 😗 😆 😛 😉 😉 😮 😱</span>
+                        </div>
+                        <br/>
+                        <input name="" id="convertSignsOpt" type="checkbox" /> <span class="label">Convert common signs to unicode</span><br/>
+                        <div>
+                            <label class="label">Supported signs:</label>
+                            <span>℡ ℻</span>
+                        </div>
+                        <br/>
+                        <input name="" id="convertFractionsOpt" type="checkbox" /> <span class="label">Convert fractions to unicode</span><br/>
+                        <div>
+                            <label class="label">Supported fractions:</label>
+                            <span>½ ⅓ ⅔ ¼ ¾ ⅕ ⅖ ⅗ ⅘ ⅙ ⅚ ⅐ ⅛ ⅜ ⅝ ⅞ ⅑ ⅒</span>
+                        </div>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </div>
+
   </div>
   </body>
 </html>