JSFiddle - React, Tailwind, and code Playground

by exe1

HTML

<div id="main">
    
    <div id="mainview"></div>    
    <div id="mainbar"></div>
    <div id="maintop">
            <div class="top_time"></div>
            <div class="top_week"></div>
            <div class="top_date"></div>
    </div> 
    <div id="moviename"></div>
    <input id="anchor" type="hidden" value="" />

</div>

CSS

#main{
    position:fixed;
    top:0px;
    left:0px;
    margin:0;
    padding:0;
    height:720px;
    width:1280px;
    #border: 0px solid red;
    background-color:#111;
    #box-shadow:inset 0px 0px 20px #222;
    overflow:hidden;
}
#moviename
{
    position:fixed;
    top:620px;
    left:0px;
    margin:0;
    padding:0;
    height:70px;
    width:1280px;
    font-size:3em;
    text-align:center;
    #border: 0px solid red;
    font-family: NeoSans;
    #background-color:#888;
    #box-shadow:inset 0px 0px 20px #222;
    overflow:hidden;
    color:#FF7F00;
    text-shadow:0px 0px 25px #000;
}

@font-face
{
    font-family: NeoSans;
    src: url('http://mywidget.tv/ktv/kartina/font/NeoSansPro-Regular.ttf');
}

#mainview{
    position:fixed;
    top:90px;
    margin:0;
    padding:20px;
    height:480px;
    width:1240px;
    #border: 1px solid black;
    background-color:#666;
    box-shadow:inset 0px 0px 20px #000;
    overflow:hidden;
}

















.cover{
    float:left;
    margin:9px;
    #margin:0px;
    width:105px;
    height:144px;
    border: 0px solid #fff;
    border-radius:5px;
    box-shadow:0px 0px 25px #000;
}

.sort{
    float:left;
    padding:10px;
    
    margin:4px;
    width:220px;
    height:24px;
    border: 0px solid #fff;
    border-radius:10px;
    background-color:#222;
    color:white;
    text-align:center;
     box-shadow:5px 5px 10px #444;
}





#mainbar{
    position:absolute;
    top:100px;
    left:-500px;
    margin:0;
    padding:0;
    height:400px;
    width:400px;
    #border: 1px solid #000;
    #background-color:#f00;
    #box-shadow:0px 10px 20px #000;
    #clear:both;
    #overflow:hidden;
}


.menuentry{
    #position:absolute;
    text-align:center;
    #margin:3px;
    padding:5px;
    height:40px;
    width:390px;
    #background-color:#222;
    color:#777;
    font-size:2em;
    font-family: NeoSans;
    #font-weight: bold;
    #text-shadow:0px 0px 2px #000;
    #float:left;
}
.entry_back{
   ...

JavaScript

var sortlist = "http://mywidget.tv/ktv/kartina/vod/get.php?sortlist";
var api = "http://mywidget.tv/ktv/kartina/vod/get.php";
var page = "http://mywidget.tv/ktv/kartina/vod/poster";
loaded = false;
bartimer = null;
sortarray = null;
coverperpage = 30;
coverperline = 10;

var mysortlist =null;
var vodlist = null;

var entryColor = "#222";
var entryColorSel = "#E86F00";

selected = 0;
selectedEntry = 0;
focus = 0;

jQuery(document).ready(function($) {
    showTime();
    $.get( sortlist , function( list ){
        mysortlist = list.sortlist ;
        for ( var idx in mysortlist ){
            //   alert( list[idx].name );
            //sortarray.push( idx );
            $("#mainbar").append('<div id="entry" class="menuentry entry_back">'+ mysortlist[idx].name +'</div>');
        
        } 
        loaded = true;
        select(0);         
        showBar();        
        onEntryEnter();
    }).error( function( xj, status, info)
             { alert(  sortlist + status + info);
    });

    $(document).on('keyup', function(event){
        event.preventDefault()
        var keycode = event.which || event.keyCode; // Ex : 112
        //alert( keycode );
        switch( keycode ){
            case 96: // 0(Einfg)
                toggleBar();
                break;
            case 37: // left
                goLeft();
                break;
            case 39: // right
                goRight();                
                break;
            case 38: // up
                goUp();
                break;
            case 40: // down
                goDown();
                break;
            case 13: // enter
                if( focus == 0 ){
                    focus=1;
                    goEntryDown( true );
                    hideBar();
                }else
                {
                    onEntryEnter();
                }
                break;
            case 27: // escape
                focus=0;
                onSelectEntry( selectedEntry,...