ipad mobile app

mobile cloud texteditor

by voodoomonkey

HTML

<div id="cloudnote" data-url="cloudnote" data-role="page">
    <div data-role="header" data-position="fixed" id="top-toolbar" class="light" data-ctheme="light">
        <ul id="buttonbar" class="light" data-ctheme="light">
            <li class="buttonGroup" data-command="toggleTheme" data-ctheme="light">Toggle Theme</li>
            <li class="buttonGroup">Save</li>
            <li class="buttonGroup">Delete</li>
            <li class="buttonGroup">New</li>
            <li class="buttonGroup">Copy</li>
        </ul>
    </div>
    <div data-role="content" id="wrapper">
        <textarea name="" id="editor" rows="" cols=""></textarea>
    </div>
</div>

CSS

* {
    padding:0;
    margin:0
}
#top-toolbar {
    width: 100%;
    height: 40px;
    -webkit-box-shadow: 0 10px 50px rgba(0, 0, 0, .5);
    -moz-box-shadow: 0 10px 50px rgba(0, 0, 0, .5);
    box-shadow: 0 10px 50px rgba(0, 0, 0, .5);
    font-family: sans-serif;
    border-top: none;
}
#top-toolbar.light {
    background-color: #6b6d71;
    color: #403e3d;
    text-shadow: 0 1px 1px #fff;
    font-size: 0.7em;
    letter-spacing: 0.05em;
    font-weight: bold;
    z-index:9999 !important;
    border-bottom: 1px solid #ddd;
    background-image: -webkit-linear-gradient(bottom, #d8d4d2, #fcfcfc);
    background-image: -moz-linear-gradient(bottom, #d8d4d2, #fcfcfc);
    background-image: -o-linear-gradient(bottom, #d8d4d2, #fcfcfc);
    background-image: -ms-linear-gradient(bottom, #d8d4d2, #fcfcfc);
    background-image: linear-gradient(to top, #d8d4d2, #fcfcfc);
}
#top-toolbar.dark
{
       font-size: 0.7em;
    letter-spacing: 0.05em;
    font-weight: bold;
   background-color: #6b6d71;
    -webkit-box-shadow: 0 2px rgba(0, 0, 0, .75);
    -moz-box-shadow: 0 2px rgba(0, 0, 0, .75);
    box-shadow: 0 2px rgba(0, 0, 0, .75);
    background-image: -webkit-linear-gradient(bottom, #2f2f2f, #595959);
    background-image: -moz-linear-gradient(bottom, #2f2f2f, #595959);
    background-image: -o-linear-gradient(bottom, #2f2f2f, #595959);
    background-image: -ms-linear-gradient(bottom, #2f2f2f, #595959);
    background-image: linear-gradient(to top, #2f2f2f, #595959);
}
#buttonbar{
    list-style-type: none;
    padding:5px;
    cursor:pointer;
}
li.buttonGroup {
    padding:7px;
     float:left;
    display:block;
}

#buttonbar.light li.buttonGroup:first-Child {
    -webkit-border-radius: 5px 0 0 5px;
    -moz-border-radius: 5px 0 0 5px;
    border-radius: 5px 0 0 5px;
    background-color: #6b6d71;
    -webkit-box-shadow: 0 1px 1px #fff, inset 0 0 4px #fcfcfc;
    -moz-box-shadow: 0 1px 1px #fff, inset 0 0 4px #fcfcfc;
    box-shadow: 0 1px 1px #fff, inset 0 0 4px...

JavaScript

(function()
{ 
var initialTheme = 'light';
toggleTheme(initialTheme);	
})();

function tapped(event) {
   var touchable = 'ontouchstart' in document.documentElement;
   if((touchable && event.which === 0) || (!touchable && event.which === 1)){
    return true;
  }
  return false;
}

$('.buttonGroup').bind('touchstart click', function(event) {
 if(tapped(event)) {
  $(this).toggleClass('active').siblings().removeClass('active');
   var targetTheme = $(this).data('ctheme');
     switch($(this).data('command')){
         case ('toggleTheme'):
             toggleTheme(targetTheme);
     };
     
}
});

function toggleTheme(style){
    $('#top-toolbar').toggleClass(style);
    $('#buttonbar').toggleClass(style);
}