App Tema - Contro Auto Apk

by DanielSTh

HTML

<link href='http://fonts.googleapis.com/css?family=Dosis:500' rel='stylesheet' type='text/css'/>
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"/>
<div id="confignav">
    Aqui el menu de la configuracion :D<br/>
    como todos saebn es asi todo esto para todos ustedes<br/>solo estoy poniendo contenido y ada mas por k no me acuerdo del loren XD
</div>

    <header>
    <div class="logo"><img src="https://fbcdn-profile-a.akamaihd.net/hprofile-ak-xpf1/v/t1.0-1/p50x50/1507089_343839752480555_5898978001528452060_n.png?oh=e8dfd1bd0060239ca2b55bf586647d6d&oe=55D6F72E&__gda__=1440363858_afadb4fa7eba6927d0550caa1999403f"/></div>
    <nav>
        <ul>
            <li onclick="#cont_box" id="abrir_box" ><i class="fa fa-unlock-alt"></i></li>
            <li><i class="fa fa-lock"></i></li>
            <li><i class="fa fa-tasks"></i></li>
            <li id="config" ><i class="fa fa-cogs"></i></li>             
        </ul>
        
    </nav>
         
</header>

<section class="contenido">
<div id="cont_box">
¿Desea abrir las puertas de su auto?           
        
        <br/><a href="#" class="boton_s"><i class="fa fa-check"></i> Aceptar</a>
          <a href="#" id="cerrar_box"><i class="fa fa-times-circle-o"></i> Cancelar</a>
    </div> 
        
        <div id="tabs-container">
    <ul class="tabs-menu">
        <li class="current"><a href="#tab-1"><i class="fa fa-tachometer"></i> Inicio</a></li>
        <li><a href="#tab-2"><i class="fa fa-wifi"></i> Bluetooth</a></li>
        <li><a href="#tab-3"><i class="fa fa-info-circle"></i> Informacíon</a></li>
        <li><a href="#tab-4"><i class="fa fa-paper-plane-o"></i> Contactos</a></li>
    </ul>
    <div class="tab">
        <div id="tab-1" class="tab-content">
            <img alt="cute girl" src="http://1.bp.blogspot.com/-ZtzYuSrCWpw/VASEoV_p1FI/AAAAAAAAFmI/Xg3mDwyEvWY/s1600/ads%2B970.png" />
            <p><h1>Control  SmartPhone - Bloetooth</h1>Lorem ipsum...

CSS

@import url(http://fonts.googleapis.com/css?family=Dosis:500);

body{padding:0;margin:0;background:#F5F5F5;font-family: 'Dosis', sans-serif;}

header{
  background:#fff;
  height: 55px;
  z-index: 9998;
  -moz-box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.12);
  -webkit-box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.12);
  box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.12);
}
h1{color:#414852}
header .logo img {width: 50px;  margin: 5px; float: left;}
header nav ul{ margin-top: 12px;   margin-right: 10px; list-style: none; color:#788188 ;  width: 50%;  float: right;}
header nav ul li{ 
  width: 50px;
  display: inline-block;
  border: 1px solid #E4E4E4;
  text-align: center;
  padding: 5px;
}
header nav ul li:active{border-color:#A1A1A1; background:#E4E4E4;}
#confignav {
    padding: 1px;
    text-align: left;
    background: #EDF2F3;
}

#confignav {
  padding: 24px;
  color: #f5f5f5;
  display: none;
  overflow: hidden;
  background: rgba(60, 44, 10, 0.5) url('http://1.bp.blogspot.com/-JvrGJOmfefw/VLBj1ico-KI/AAAAAAAAIlA/SoLbDLtxGbc/s1600/11-1100x575.jpg') fixed center;
  background-size: cover;
  background-blend-mode: overlay;
  box-shadow: inset 0 0 50px #303030;
}

.contenido{ 
  color: #858585;
  background: #fff;
  margin: 10px;

}
#cont_box{
  line-height: 50px;
  position: fixed;
  background: #fff;
  display: none;
  top: 25px;
  left: 0px;
  margin: 0 20%;
  padding: 20px;
  width: 60%;
  border: 1px solid #d9dadc;
  box-shadow: 0 0 5px 9000px rgba(0,0,0,0.15);
  border-radius: 2px;
  color: #9eb2c0;
  text-align: center;
  z-index: 99999;

}
#cerrar_box{
  background: #f05050;
  color: #fff;
  padding: 6px 10px;
  text-decoration: none;
  text-transform: uppercase;
    
}
.boton_s{
  background: #1ab667;
  color: #fff;
  padding: 6px 10px;
  text-decoration: none;
  text-transform: uppercase;
    
}
/* Menu Tabla */
.tabs-menu {
  height: 100%;
  float: left;
  list-style: none;
  clear: both;
  width: 30%;
  padding: 0;
  margin: 0;
}

.tabs-menu li {
   ...

JavaScript

// Spoiler
$(document).ready(function() {
    $("#config").click(function() {
        $("#confignav").slideToggle("normal");
    });
});


// PopUp Cuadro
$("#abrir_box").click(function(){
    $("#cont_box").css("display", "block");
  });

  $("#cerrar_box").click(function(){
    $("#cont_box").css("display", "none");
  }); 

//Menu Tabla
$(document).ready(function() {
    $(".tabs-menu a").click(function(event) {
        event.preventDefault();
        $(this).parent().addClass("current");
        $(this).parent().siblings().removeClass("current");
        var tab = $(this).attr("href");
        $(".tab-content").not(tab).css("display", "none");
        $(tab).fadeIn();
    });
});