JSFiddle - React, Tailwind, and code Playground

by exe1

HTML

<div id="main">
    <div id="wall" >
        <ul id='list'></ul>
    </div>
     <div id="maintitle">НАПРОЛОМ</div>
    
     <div id="maininfo">
         <div id="i_genre">i_genre</div>
         <div id="i_country">i_country</div>
         <div id="i_rating">i_rating</div>
         <div id="i_description">description</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;
        top:0px;
    left:0px;
    height:540px;
    width:960px;
    border: 0px solid red;
    background-color:#999;
    box-shadow:inset 0px 0px 20px #222;
}
@font-face
{
    font-family: MC360;
    src: url('http://mywidget.tv/teka/MC360.ttf');
}

#maininfo{
    width:920px;
    left:25px;
    top:390px;
    
    height:120px;
    
    position:fixed;
    overflow:hidden;
   border: 1px solid black;  
    #border-radius:5px;

        background-color:#ccc;
}
#i_description{
     position:absolute;
    height:92%;
    top:0px;
    width:65%;
    padding:5px;
    left:35%;
    #background-color:green;
}
#i_genre,#i_country,#i_rating{
    position:relative;
    padding:5px;
   width:34%;
}
#wall{
    left:30px;
    top:40px;   
    height:292px;
    position:fixed;
    overflow:hidden;
   #border: 1px solid black;
    #box-shadow:10px 0px 20px #222;
    #border-radius:5px;
    width:912px;
    #background-color:red;
    background-color:#ddd;
}
#maintitle{
    left:25px;
    top:335px;   
    width:915px;
    height:45px;
    position:fixed;
    overflow:hidden;
   border: 1px solid #555;
    #box-shadow:10px 0px 20px #222;
    #border-radius:5px;
    
    #background-color:red;
    text-align:center;
    font-size:2.5em;
    padding:2px;
    background-color:#ddd;
    #text-shadow:0 10px 20px #000;
    font-weight:600;
    font-family:MC360;
}



#info_logo{
    position:absolute;
    top:5px;
    left:5px;
    border:1px solid black;
    background-color:#111;
    border-radius:10px;
    box-shadow:0px 30px 30px -5px #555;
    width:168px;
    height:232px;
    border:1px solid #111;
}


#list{
    margin:0px;
    padding:0px;
    #padding-left:20px;
    #background-color:red;
}


#list li{
    float:left;
   
    #padding:0.5px;
background-color:#000;
    #border: 1px solid #000;
    list-style-type:none;
    #border-radius:5px;
     #box-shadow:0px 30px 30px -5px #555;
}
#list li div{
     float:left;
...

JavaScript

coverpage = "http://mywidget.tv/teka/cover/";
mymovies = null;
//mlist = "https://dl.dropboxusercontent.com/u/20956652/samsung/tmp/mlist.txt";
mlist = "http://mywidget.tv/ktv/kartina/vod/get.php?nums=16&page=1";

max = 16;
selected = 0;

jQuery(document).ready(function($) {
    $.get( mlist , function( movies ){
        //alert( movies.rows.length );
        mymovies = movies.rows;
        if( 0 < mymovies.length )
        for(idx=0;idx < mymovies.length;idx++){
            addToList( mymovies[idx] );
        }
        
        selectItem( 0 );
        
        $("#down").click(function(){  
            checkPos( 0, 1 );
        });
        $("#up").click(function(){
            checkPos( 0, -1 );
        });
        $("#right").click(function(){  
            checkPos( 1, 0 );
        });
        $("#left").click(function(){
            checkPos( -1, 0 );
        });
        
        
    }).error( function( xj, status, info ){ alert(  mlist + status + info);});

 });


function selectItem( selpos )
{
    $("#maintitle").html( mymovies[selpos].name + "( " + mymovies[selpos].year + " )" );
    $("#i_description").html( mymovies[selpos].description );
    $("#i_genre").html( mymovies[selpos].genre_str );        
    $("#i_country").html( mymovies[selpos].country );        
    $("#i_rating").html( "KinoPoisk: " + mymovies[selpos].rate_kinopoisk );
    $("ul#list li img").eq( selpos ).css("background-image","url('http://mywidget.tv/teka/cover_selected.png')");
}


function checkPos( lr, ud )
{
    $("ul#list li img").eq( selected ).css("background-image","url('http://mywidget.tv/teka/cover_shadow.png')");
    
    var max = mymovies.length;
    
    if(lr) selected += lr;
    if(ud) selected += ud*8;
    
    if( 0 > selected)
        selected = max-1;
    
    if( selected >= max )
        selected =0;       
    
    var selpos = selected%16;
    selectItem( selpos );
}


function addToList( movie )
{       
    var element = $("<li>");
   ...