JSFiddle - React, Tailwind, and code Playground

by exe1

HTML

<div id="main">
    <div id="mainlist" >
        <ul id='list2'></ul>
    </div>
    <div id="maininfo">

        <div class="epg_img_big"><img id="epg_img_big" src=""/></div>
        <div class="ch_name">КАНАЛ:<span id="ch_name"></span></div>
        <div class="category">КАТЕГОРИЯ: <span id="category"></span></div>        <div class="ch_program">СЕЙЧАС:<span id="ch_program"></span></div>
        <div class="ch_next">СРОРО:<span id="ch_next"></span></div>
    </div>
    <button id="left">left</button>
    <button id="up">up</button>
    <button id="down">down</button>
    <button id="right">right</button>
</div>
<div id="debug"></div>
<div id="copyright" class="depth">by exe</div>

CSS

#main{
    position:fixed;
    margin:0;
    padding:0;
    height:540px;
    width:960px;
    border: 0px solid red;
    background-color:#222;
}

#mainlist,#maininfo{
    height:455px;
    position:fixed;
    overflow:hidden;
    border: 1px solid black;
    xxbox-shadow:0px 0px 10px #000;
    background-color:#555;
    xxborder-radius:5px;
    width:450px;
    top:40px;
}
#mainlist{
    left: 20px;    
}
#maininfo{    
    left:490px;
}
#now{
    margin:10px;
    height:250px;
    width:93%;
    xxborder-radius:5px;
padding:5px;
    position:absolute;
    xxbox-shadow:0px 0px 10px #000;
    background-color:#999;
    color:#000;
    xxtext-shadow: 0px 1px 10px #000;
}
img{
    float:left;
    xxborder-radius:5px;
    background-color:#444;
    width:40px;
    height:30px;
    xxbox-shadow:0px 0px 10px #444;
    margin-top:4px;
    
}
#chnr{
    float:left;
    margin:0px;
    margin-top:8px;
    width:40px;
    text-align:center;
}
.id{
    width : 50px;
    float:left;
}
#list,#list2{
    margin:0;
    padding:0;
    padding-left:20px;
}


.pname{
    font-size: 10px;
    padding-left:6px;
    width : 60px;
    float:left;
    overflow:hidden;
    	text-overflow: ellipsis;
    height:100%;
}
.pinfo{
    font-size: 15px;
    padding-left:5px;
    width : 247px;
    height:100%;
    overflow:hidden;
    white-space: xnowrap;
    word-break: break-all;
	text-overflow: ellipsis;
    float:left;
    hyphens: auto;
}
.has_archive,.is_favorite,.is_not_favorite{
    height:100%;
    width:5px;
}
.has_archive{
    background-color:#AA0000;
    xxborder-top-right-radius: 3px;
    xxborder-bottom-right-radius:3px;
    float:right; 
}
.is_favorite{
    background-color:#BB6500;
    float:left;
     xxborder-top-left-radius: 3px;
    xxborder-bottom-left-radius: 3px;
}
.is_not_favorite{
    float:left;
    xxborder-top-left-radius: 5px;
    xxborder-bottom-left-radius: 5px;
}
.ukraina{
    color:#FF9999;
    background-color: #555;
}
button{
    position:relative;
   ...

JavaScript

var ukraina = [ 18, 20, 30, 17, 90, 101, 15, 62, 21, 19, 112, 106, 105, 55, 103, 104, 108, 84, 262, 263, 172, 173, 174, 486, 63, 32 ];

    var epg_next = {
        "epg": [
            {
                "ts": "1365804600",
                "progname": "Вести.ru. Пятница\n"
            },
            {
                "ts": "1365806400",
                "progname": "\"Вопрос времени\". Частный космос\n"
            },
            {
                "ts": "1365808200",
                "progname": "Футбол России\n"
            }
        ],
        "servertime": 1365798760    
    };

var chlist =[];
        var scroll = 0;
        var scrollGap = 45;        
        var elementsInView = 10;

        var selected = 0;
        var page = 0;
        var selectedMax = 0;
        var pageMax = 0;

$(function() {    $.getJSON("https://dl.dropboxusercontent.com/u/20956652/samsung/moidom/api/channel_list_all.txt", function(data){
        selectedMax = 0;
        
        for( var idx in data.groups ){
            
            var group = data.groups[idx];
            for( var idy in group.channels ){
                var item = group.channels[idy];   
                item['cat_name'] = group.name;
                item['cat_id'] = group.id;
                item['cat_color'] = group.color;
                chlist[selectedMax] = item;
                addToList( item, selectedMax );
                selectedMax++;
            }
        }
        pageMax = parseInt( selectedMax/elementsInView );
        
        addToInfo( 0 );

        $("#list2 li").hover(
              function () {
                  $(this).css({"box-shadow":"0px 0px 22px #c55311","color":"#F58341","border-color":"#c55311" });
              },
              function () {
                  $(this).css({"box-shadow":"0px 0px 12px #000","color":"#111","border-color":"#111"});
              }
            ); 
        $("#list2 li").eq(selected).trigger('hover').trigger('mouseover');
        
       ...