css keyboard

by LimitedWard

HTML

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<span class="keyboard">
    <div class="keyboard-close"></div>
    <div class="keyboard-minimize"></div>
    <div class="keyboard-handle"></div>
    <ul class="keyboard-row">
        <li data-shift="~">`</li>
        <li data-shift="!">1</li>
        <li data-shift="@">2</li>
        <li data-shift="#">3</li>
        <li data-shift="$">4</li>
        <li data-shift="%">5</li>
        <li data-shift="^">6</li>
        <li data-shift="&">7</li>
        <li data-shift="*">8</li>
        <li data-shift="(">9</li>
        <li data-shift=")">0</li>
        <li data-shift="_">-</li>
        <li data-shift="+">=</li>
        <li data-shift="&#x232B;" class="keyboard-delete">&#x232B;</li>
    </ul>
    <ul class="keyboard-row">
        <li data-shift="tab" class="keyboard-tab">tab</li>
        <li data-shift="Q">q</li>
        <li data-shift="W">w</li>
        <li data-shift="E">e</li>
        <li data-shift="R">r</li>
        <li data-shift="T">t</li>
        <li data-shift="Y">y</li>
        <li data-shift="U">u</li>
        <li data-shift="I">i</li>
        <li data-shift="O">o</li>
        <li data-shift="P">p</li>
        <li data-shift="{">[</li>
        <li data-shift="}">]</li>
        <li data-shift="|">\</li>
    </ul>
    <ul class="keyboard-row">
        <li data-shift="&lt;span class=&quot;keyboard-capslock-light&quot;&gt;&lt;/span&gt;caps" class="keyboard-capslock"><span class="keyboard-capslock-light"></span>caps</li>
        <li data-shift="A">a</li>
        <li data-shift="S">s</li>
        <li data-shift="D">d</li>
        <li data-shift="F">f</li>
        <li data-shift="G">g</li>
        <li data-shift="H">h</li>
        <li data-shift="J">j</li>
        <li data-shift="K">k</li>
        <li data-shift="L">l</li>
        <li data-shift=":">;</li>
        <li data-shift="&quot;">'</li>
        <li data-shift="enter" class="keyboard-enter">enter</li>
    </ul>
    <ul...

CSS

/*.body {
    margin:0;
    padding:0;
}*/
.keyboard {
    background:rgb(200,200,200);
    padding:0 5px 5px 5px;
    border-radius:6px;
    font: 12px/1.5 'Varela Round', Helvetica, Verdana, Sans-Serif;
    color:rgb(100,100,100);
    display:inline-block;
    width:500px;
    position:fixed;
    box-shadow:
        0 0 0 3px rgb(150,150,150);
    text-align:center;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: moz-none;
    -ms-user-select: none;
    left: 50%;
    top: 50%;
    margin-left: -250px;
    margin-top:-100px;
    user-select: none;
    /*transform: perspective(600px) rotateX(45deg);
    -webkit-transform: perspective(500px) rotateX(45deg);*/
}
.keyboard-close, .keyboard-minimize {
    cursor:pointer;
    position:absolute;
    height:8px;
    width:8px;
    border-radius:6px;
    top:2px;
    z-index:1;
    box-shadow:0 2px 3px rgb(150,150,150);
}
.keyboard-close {
    background:rgb(250,50,50);
    left:3px;
    border:2px solid rgb(200,50,50);
}
.keyboard-minimize {
    background:rgb(250,250,50);
    left:18px;
    border:2px solid rgb(200,150,50);
}
.keyboard-handle {
    position:relative;
    cursor:move;
    padding-top:10px;
    height:3px;
    padding-bottom:5px;
}
.keyboard-handle:after {
    content:'';
    position:absolute;
    width:100px;
    height:3px;
    border-top:1px solid rgb(150,150,150);
    border-bottom:1px solid rgb(150,150,150);
    left:50%;
    top:50%;
    margin-left:-50px;
    margin-top:-3px;
}
.keyboard-handle:before {
    content:'';
    position:absolute;
    width:100px;
    height:3px;
    border-top:1px solid rgb(220,220,220);
    border-bottom:1px solid rgb(220,220,220);
    left:50%;
    top:50%;
    margin-left:-50px;
    margin-top:-4px;
}
ul.keyboard-row {
    list-style-type:none;
    height:30px;
    padding:0;
    margin:0;
    padding-bottom:5px;
    position:relative;
    overflow:hidden;
}
ul.keyboard-row:last-child {
   ...

JavaScript

$(document).ready( function() {
    $( '.keyboard' ).draggable({handle: '.keyboard-handle'});
    /*$('.keyboard-capslock').click(function(e) {
        $(this).find('.keyboard-capslock-light').toggleClass('keyboard-capslock-light-on');
    });*/
    var minimized = false;
    $('.keyboard-minimize').click(function(e) {
        if(!minimized)
        {
            $(this).parent().find('ul').animate({height: 0, opacity: 0, padding: 0},'normal');
            $(this).parent().draggable('disable').animate({width: '175px', left: '50%', top: '100%', marginLeft: '-88px', marginTop:'-20px'}, 'normal');
            minimized = true;
        }
        else
        {
            $(this).parent().find('ul').slideDown(200).animate({height: '30px', opacity: 1, paddingBottom: '5px'},'normal');
            $(this).parent().animate({width: '500px',left: '50%', top: '50%', marginLeft: '-250px', marginTop:'-100px'}, 'normal').draggable('enable');
            minimized = false;
        }
    });
    $('.keyboard-close').click(function(e) {
        $(this).parent().animate({height: 0, opacity: 0}, 'normal', function() {
            $(this).remove();
        });
    });
    var shiftEnabled = false;
    $('.keyboard-shift').click(function(e) {
        if (!shiftEnabled)
        {
            $('.keyboard-shift').addClass('keyboard-pressed');

            shiftEnabled = true;
        }
        else
        {
            $('li.keyboard-shift').removeClass('keyboard-pressed');
            shiftEnabled = false;
        }
        var keyboardKeys = $('.keyboard').find('li');
        $.each(keyboardKeys, function(i) {
            var temp = $(this).attr('data-shift');
            $(this).attr('data-shift', $(this).html());
            $(this).html(temp);
        });
    });
    $('.keyboard-capslock').click(function(e) {
        var keyboardKeys = $('.keyboard').find('li');
        $.each(keyboardKeys, function(i) {
            var temp = $(this).attr('data-shift');
           ...