JSFiddle - React, Tailwind, and code Playground

by exe1

HTML

<div id="main">
    
    <div id="mainview"></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;
    z-index:3;
    top:0px;
    left:0px;
    margin:0;
    padding:0;
    height:540px;
    width:960px;
    #border: 0px solid red;
    background-color:#111;
    #box-shadow:inset 0px 0px 20px #222;
    overflow:hidden;
}
#moviename
{
    position:fixed;
    z-index:3;
    top:423px;
    left:0px;
    margin:0;
    padding:0;
    height:70px;
    width:960px;
    font-size:3em;
    text-align:center;
    #border: 0px solid red;
    font-family: NeoSans;
    background-color:#222;
    box-shadow:inset 0px 0px 40px #111;
    overflow:hidden;
    color:#FFF;
    text-shadow:5px 5px 25px #000;
}

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

#mainview{
    position:fixed;
    z-index:4;
    top:34px;
    margin:0;
    padding:15px;
    height:360px;
    width:930px;
    #border: 1px solid black;
    background-color:#666;
    box-shadow:inset 0px 0px 20px #000;
}

















.cover{
    float:left;
    margin:6px;
    #margin:0px;
    width:78.75px;
    height:108px;
    border: 1px solid #000;
    border-radius:5px;
    box-shadow:0px 0px 20px #000;
}

.scaleNormal{
    transform: scale(1);
}

.scaleFocus{
    box-shadow:0px 0px 100px #000;
-webkit-transform: scale(1.4);
-moz-transform: scale(1.4);
-ms-transform: scale(1.4);
-o-transform: scale(1.4);
transform: scale(1.4);
}


.sort{
    float:left;
    padding:7.5px;
    
    margin:3px;
    width:165px;
    height:18px;
    border: 0px solid #fff;
    border-radius:6px;
    background-color:#222;
    color:white;
    text-align:center;
     box-shadow:4px 4px 7px #444;
}


#maintop{
    position:fixed;
    z-index:3;
    top:0px;
    margin:0;
    padding:2px;
    height:34px;
    width:945px;
    #border: 1px solid black;
    background-color:#111;
    box-shadow:inset 0px 0px 15px #000;
    text-align:center;
    color:white;
    background-repeat:no-repeat;
     box-shadow:0px 7px 15px #000;
}

.top_week{
...

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 ;
        loaded = true;
        select(0);             
        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, entryColor, "white" );
                selectedEntry =0;
                $(".menuentry").eq( selected )
                    .css({"height":"42px"});         
                //goDown();
                break;
            default:
                break;                
   ...