HTML
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Área de teste</title>
<!-- Fontes -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700,800" rel="stylesheet">
<!-- Folha de estilo | UTILIZE ESSA FOLHA! -->
<link href="style.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- INICIO DO CÓDIGO DO BANNER -->
<div class="smart-banner">
<!-- ICONE PADRÃO -->
<img class="icon" src="http://www.freeiconspng.com/uploads/windows-8-start-button-icon-6.png">
<div class="meta">
<span class="name">Workana App</span>
<small class="author">Fabrizio Feitosa</small>
</div>
<!-- LINK DA LOJA E TEXTO DO BOTAO PADRÃO-->
<a class="btn" href="LINK PADRÃO APP" target="itunes_store">Free</a>
<a class="close" href="#close">×</a>
</div>
<!-- FIM DO CÓDIGO -->
<!-- APENAS EXIBINDO UM TEXTO NA PÁGINA. NADA IMPORTANTE -->
<h1 class="android" id="android" style="display: none;">Android</h1>
<h1 class="ios" id="ios" style="display: none;">iOS</h1>
<!-- jQuery (JavaScript plugins) | CHAME TUDO DAQUI PRA BAIXO! -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<!-- Script SmartApp -->
<script type="text/javascript" src="smartApp.js"></script>
</body>
</html>
CSS
@charset "utf-8";
/* CSS Document */
/*body {
font-family: 'Open Sans', sans-serif !important;
color: #ffffff !important;
background: #587397;
}*/
.clearfix {
zoom: 1;
}
.clearfix:before,
.clearfix:after {
content: " ";
/* 1 */
display: table;
/* 2 */
}
.clearfix:after {
clear: both;
}
.smart-banner {
color: #000000;
zoom: 1;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
background: #d1d1d1;
background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #d1d1d1), color-stop(1, #f8f8f8));
background: -ms-linear-gradient(bottom, #d1d1d1, #f8f8f8);
background: -moz-linear-gradient(center bottom, #d1d1d1 0%, #f8f8f8 100%);
padding: 10px 10px 10px 31px;
position: relative;
-webkit-transition: margin-top 0.3s linear;
z-index: 1001;
}
.smart-banner:before,
.smart-banner:after {
content: " ";
/* 1 */
display: table;
/* 2 */
}
.smart-banner:after {
clear: both;
}
.smart-banner.closed {
margin-top: -100%;
}
.smart-banner .meta {
float: left;
padding-top: 7px;
}
.smart-banner .name {
font-size: 12px;
width: 163px;
overflow: hidden;
text-overflow: ellipsis;
display: block;
white-space: nowrap;
}
.smart-banner .author {
display: block;
font-size: 11px;
color: #888;
padding-top: 2px;
}
.smart-banner .icon {
height: 50px;
width: 50px;
border-radius: 7.8125px;
vertical-align: top;
box-shadow: 0 1px 3px black;
float: left;
margin: 0 10px;
}
.smart-banner .close {
position: absolute;
width: 30px;
padding: 25px 0;
border-right: inset 1px rgba(0, 0, 0, 0.3);
left: 0;
top: 0;
bottom: 0;
vertical-align: middle;
text-align: center;
text-decoration: none;
color: rgba(0, 0, 0, 0.3);
}
.smart-banner .btn {
text-decoration: none;
margin-top: 10px;
float: right;
color: white;
padding: 2px 9px 5px 9px;
font-family: 'Helvetica Neue', Helvetica, sans-serif;
font-weight: bold;
font-size: 12px;
-webkit-border-radius: 4px;
border-radius: 4px;
background: #303030;
background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #303030), color-stop(1, #838383));
background: -ms-linear-gradient(bottom, #303030, #838383);
background: -moz-linear-gradient(center bottom, #303030 0%, #838383 100%);
/*background: -webkit-gradient(linear, left top, left bottom,
from(#838383),
color-stop(.49, #444444),
color-stop(.49,#303030),
to(#333333));*/
border: solid 1px rgba(79, 79, 79, 0.75);
}
JAVASCRIPT
/*
SCRIPT DE VERIFICAÇÃO DE DISPOSITIVO
Por Fabrizio Feitosa | behance.net/fabriziofeitosa
*/
var ua = navigator.userAgent.toLowerCase();
var uMobile = '';
// === iPhone, Windows Phone, Android, etc. ===
// Lista de substrings a procurar para ser identificado como mobile WAP
uMobile = '';
uMobile += 'iphone;ipod;windows phone;android;iemobile 8';
// Sapara os itens individualmente em um array
v_uMobile = uMobile.split(';');
var boolMovel = '';
// percorre todos os itens
for (i=0;i<=v_uMobile.length;i++){
// Descobrir se é mobile
if (ua.indexOf(v_uMobile[i]) != -1){
boolMovel = true;
}
// Descobrir se é iphone ou um ipad
if (ua.indexOf("iphone") != -1 || ua.indexOf("ipad") != -1 || boolMovel === true) {
// Link Apple Store
$(".smart-banner > .btn").attr("href", "https://itunes.apple.com/us/app/i-can-has-cheezburger-official/id381442338?mt=8&uo=4");
}
// Descobrir se é Android
if (ua.indexOf("android") != -1 || boolMovel === true) {
// Link Play Store | Mais informações: https://developer.android.com/distribute/marketing-tools/linking-to-google-play.html
$(".smart-banner > .btn").attr("href", "http://play.google.com/store/apps/details?id=<package_name>");
}
}
// É mobile Mobile? Sim! Então vamos mostrar a barra.
if (boolMovel === true){
// Ocultar quando desktop
$(".smart-banner").show();
}
// ANIMAÇÃO AO CLICAR NO X
$(document).on('click', '.smart-banner .close', function (event) {
event.preventDefault();
var $banner = $('.smart-banner');
$banner.css('margin-top',0 - $banner.outerHeight() - 10);
// SETANDO COOKIE | Ex.: setCookie('Nome',horas);
setCookie('SmartApp',10);
});
// ESCONDER SE HOUVER COOKIE
if( getCookie('SmartApp') ) {
$(".smart-banner").hide();
}
// --------------------------------------------------------------------- //
// Criar Cookie
function setCookie(name,extime) { //função universal para criar cookie
var expires;
var date;
var value;
date = new Date(); // criando o COOKIE com a data atual
//date.setTime(date.getTime()+(extime*60*60*1000));
date.setTime(date.getTime()+(extime*1000)); // Teste em segundos
expires = date.toUTCString();
value = "12Horas";
document.cookie = name+"="+value+"; expires="+expires+"; path=/";
}
// Ler
function getCookie(name) {
var c_name = document.cookie; // listando o nome de todos os cookies
if(c_name!==undefined && c_name.length > 0) { // verificando se o mesmo existe
var posCookie = c_name.indexOf(name); // checando se existe o name
if (posCookie >= 0) { //se existir o cookie retorna TRUE
return true;
}
else return false;
}
}
// Deletar
function deleteCookie(name) {
setCookie(name,-1); // deletando o cookie
}
