<script type="text/javascript" src="https://stc.pagseguro.uol.com.br/pagseguro/api/v2/checkout/pagseguro.directpayment.js"></script>

<script type="text/javascript" src="//code.jquery.com/jquery-1.12.4.min.js" charset="utf-8"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>


<script> //Máscaras dos inputs


///////////////////
// jQuery Mask Plugin v1.14.16
// github.com/igorescobar/jQuery-Mask-Plugin
var $jscomp=$jscomp||{};$jscomp.scope={};$jscomp.findInternal=function(a,n,f){a instanceof String&&(a=String(a));for(var p=a.length,k=0;k<p;k++){var b=a[k];if(n.call(f,b,k,a))return{i:k,v:b}}return{i:-1,v:void 0}};$jscomp.ASSUME_ES5=!1;$jscomp.ASSUME_NO_NATIVE_MAP=!1;$jscomp.ASSUME_NO_NATIVE_SET=!1;$jscomp.SIMPLE_FROUND_POLYFILL=!1;
$jscomp.defineProperty=$jscomp.ASSUME_ES5||"function"==typeof Object.defineProperties?Object.defineProperty:function(a,n,f){a!=Array.prototype&&a!=Object.prototype&&(a[n]=f.value)};$jscomp.getGlobal=function(a){return"undefined"!=typeof window&&window===a?a:"undefined"!=typeof global&&null!=global?global:a};$jscomp.global=$jscomp.getGlobal(this);
$jscomp.polyfill=function(a,n,f,p){if(n){f=$jscomp.global;a=a.split(".");for(p=0;p<a.length-1;p++){var k=a[p];k in f||(f[k]={});f=f[k]}a=a[a.length-1];p=f[a];n=n(p);n!=p&&null!=n&&$jscomp.defineProperty(f,a,{configurable:!0,writable:!0,value:n})}};$jscomp.polyfill("Array.prototype.find",function(a){return a?a:function(a,f){return $jscomp.findInternal(this,a,f).v}},"es6","es3");
(function(a,n,f){"function"===typeof define&&define.amd?define(["jquery"],a):"object"===typeof exports&&"undefined"===typeof Meteor?module.exports=a(require("jquery")):a(n||f)})(function(a){var n=function(b,d,e){var c={invalid:[],getCaret:function(){try{var a=0,r=b.get(0),h=document.selection,d=r.selectionStart;if(h&&-1===navigator.appVersion.indexOf("MSIE 10")){var e=h.createRange();e.moveStart("character",-c.val().length);a=e.text.length}else if(d||"0"===d)a=d;return a}catch(C){}},setCaret:function(a){try{if(b.is(":focus")){var c=
b.get(0);if(c.setSelectionRange)c.setSelectionRange(a,a);else{var g=c.createTextRange();g.collapse(!0);g.moveEnd("character",a);g.moveStart("character",a);g.select()}}}catch(B){}},events:function(){b.on("keydown.mask",function(a){b.data("mask-keycode",a.keyCode||a.which);b.data("mask-previus-value",b.val());b.data("mask-previus-caret-pos",c.getCaret());c.maskDigitPosMapOld=c.maskDigitPosMap}).on(a.jMaskGlobals.useInput?"input.mask":"keyup.mask",c.behaviour).on("paste.mask drop.mask",function(){setTimeout(function(){b.keydown().keyup()},
100)}).on("change.mask",function(){b.data("changed",!0)}).on("blur.mask",function(){f===c.val()||b.data("changed")||b.trigger("change");b.data("changed",!1)}).on("blur.mask",function(){f=c.val()}).on("focus.mask",function(b){!0===e.selectOnFocus&&a(b.target).select()}).on("focusout.mask",function(){e.clearIfNotMatch&&!k.test(c.val())&&c.val("")})},getRegexMask:function(){for(var a=[],b,c,e,t,f=0;f<d.length;f++)(b=l.translation[d.charAt(f)])?(c=b.pattern.toString().replace(/.{1}$|^.{1}/g,""),e=b.optional,
(b=b.recursive)?(a.push(d.charAt(f)),t={digit:d.charAt(f),pattern:c}):a.push(e||b?c+"?":c)):a.push(d.charAt(f).replace(/[-\/\\^$*+?.()|[\]{}]/g,"\\$&"));a=a.join("");t&&(a=a.replace(new RegExp("("+t.digit+"(.*"+t.digit+")?)"),"($1)?").replace(new RegExp(t.digit,"g"),t.pattern));return new RegExp(a)},destroyEvents:function(){b.off("input keydown keyup paste drop blur focusout ".split(" ").join(".mask "))},val:function(a){var c=b.is("input")?"val":"text";if(0<arguments.length){if(b[c]()!==a)b[c](a);
c=b}else c=b[c]();return c},calculateCaretPosition:function(a){var d=c.getMasked(),h=c.getCaret();if(a!==d){var e=b.data("mask-previus-caret-pos")||0;d=d.length;var g=a.length,f=a=0,l=0,k=0,m;for(m=h;m<d&&c.maskDigitPosMap[m];m++)f++;for(m=h-1;0<=m&&c.maskDigitPosMap[m];m--)a++;for(m=h-1;0<=m;m--)c.maskDigitPosMap[m]&&l++;for(m=e-1;0<=m;m--)c.maskDigitPosMapOld[m]&&k++;h>g?h=10*d:e>=h&&e!==g?c.maskDigitPosMapOld[h]||(e=h,h=h-(k-l)-a,c.maskDigitPosMap[h]&&(h=e)):h>e&&(h=h+(l-k)+f)}return h},behaviour:function(d){d=
d||window.event;c.invalid=[];var e=b.data("mask-keycode");if(-1===a.inArray(e,l.byPassKeys)){e=c.getMasked();var h=c.getCaret(),g=b.data("mask-previus-value")||"";setTimeout(function(){c.setCaret(c.calculateCaretPosition(g))},a.jMaskGlobals.keyStrokeCompensation);c.val(e);c.setCaret(h);return c.callbacks(d)}},getMasked:function(a,b){var h=[],f=void 0===b?c.val():b+"",g=0,k=d.length,n=0,p=f.length,m=1,r="push",u=-1,w=0;b=[];if(e.reverse){r="unshift";m=-1;var x=0;g=k-1;n=p-1;var A=function(){return-1<
g&&-1<n}}else x=k-1,A=function(){return g<k&&n<p};for(var z;A();){var y=d.charAt(g),v=f.charAt(n),q=l.translation[y];if(q)v.match(q.pattern)?(h[r](v),q.recursive&&(-1===u?u=g:g===x&&g!==u&&(g=u-m),x===u&&(g-=m)),g+=m):v===z?(w--,z=void 0):q.optional?(g+=m,n-=m):q.fallback?(h[r](q.fallback),g+=m,n-=m):c.invalid.push({p:n,v:v,e:q.pattern}),n+=m;else{if(!a)h[r](y);v===y?(b.push(n),n+=m):(z=y,b.push(n+w),w++);g+=m}}a=d.charAt(x);k!==p+1||l.translation[a]||h.push(a);h=h.join("");c.mapMaskdigitPositions(h,
b,p);return h},mapMaskdigitPositions:function(a,b,d){a=e.reverse?a.length-d:0;c.maskDigitPosMap={};for(d=0;d<b.length;d++)c.maskDigitPosMap[b[d]+a]=1},callbacks:function(a){var g=c.val(),h=g!==f,k=[g,a,b,e],l=function(a,b,c){"function"===typeof e[a]&&b&&e[a].apply(this,c)};l("onChange",!0===h,k);l("onKeyPress",!0===h,k);l("onComplete",g.length===d.length,k);l("onInvalid",0<c.invalid.length,[g,a,b,c.invalid,e])}};b=a(b);var l=this,f=c.val(),k;d="function"===typeof d?d(c.val(),void 0,b,e):d;l.mask=
d;l.options=e;l.remove=function(){var a=c.getCaret();l.options.placeholder&&b.removeAttr("placeholder");b.data("mask-maxlength")&&b.removeAttr("maxlength");c.destroyEvents();c.val(l.getCleanVal());c.setCaret(a);return b};l.getCleanVal=function(){return c.getMasked(!0)};l.getMaskedVal=function(a){return c.getMasked(!1,a)};l.init=function(g){g=g||!1;e=e||{};l.clearIfNotMatch=a.jMaskGlobals.clearIfNotMatch;l.byPassKeys=a.jMaskGlobals.byPassKeys;l.translation=a.extend({},a.jMaskGlobals.translation,e.translation);
l=a.extend(!0,{},l,e);k=c.getRegexMask();if(g)c.events(),c.val(c.getMasked());else{e.placeholder&&b.attr("placeholder",e.placeholder);b.data("mask")&&b.attr("autocomplete","off");g=0;for(var f=!0;g<d.length;g++){var h=l.translation[d.charAt(g)];if(h&&h.recursive){f=!1;break}}f&&b.attr("maxlength",d.length).data("mask-maxlength",!0);c.destroyEvents();c.events();g=c.getCaret();c.val(c.getMasked());c.setCaret(g)}};l.init(!b.is("input"))};a.maskWatchers={};var f=function(){var b=a(this),d={},e=b.attr("data-mask");
b.attr("data-mask-reverse")&&(d.reverse=!0);b.attr("data-mask-clearifnotmatch")&&(d.clearIfNotMatch=!0);"true"===b.attr("data-mask-selectonfocus")&&(d.selectOnFocus=!0);if(p(b,e,d))return b.data("mask",new n(this,e,d))},p=function(b,d,e){e=e||{};var c=a(b).data("mask"),f=JSON.stringify;b=a(b).val()||a(b).text();try{return"function"===typeof d&&(d=d(b)),"object"!==typeof c||f(c.options)!==f(e)||c.mask!==d}catch(w){}},k=function(a){var b=document.createElement("div");a="on"+a;var e=a in b;e||(b.setAttribute(a,
"return;"),e="function"===typeof b[a]);return e};a.fn.mask=function(b,d){d=d||{};var e=this.selector,c=a.jMaskGlobals,f=c.watchInterval;c=d.watchInputs||c.watchInputs;var k=function(){if(p(this,b,d))return a(this).data("mask",new n(this,b,d))};a(this).each(k);e&&""!==e&&c&&(clearInterval(a.maskWatchers[e]),a.maskWatchers[e]=setInterval(function(){a(document).find(e).each(k)},f));return this};a.fn.masked=function(a){return this.data("mask").getMaskedVal(a)};a.fn.unmask=function(){clearInterval(a.maskWatchers[this.selector]);
delete a.maskWatchers[this.selector];return this.each(function(){var b=a(this).data("mask");b&&b.remove().removeData("mask")})};a.fn.cleanVal=function(){return this.data("mask").getCleanVal()};a.applyDataMask=function(b){b=b||a.jMaskGlobals.maskElements;(b instanceof a?b:a(b)).filter(a.jMaskGlobals.dataMaskAttr).each(f)};k={maskElements:"input,td,span,div",dataMaskAttr:"*[data-mask]",dataMask:!0,watchInterval:300,watchInputs:!0,keyStrokeCompensation:10,useInput:!/Chrome\/[2-4][0-9]|SamsungBrowser/.test(window.navigator.userAgent)&&
k("input"),watchDataMask:!1,byPassKeys:[9,16,17,18,36,37,38,39,40,91],translation:{0:{pattern:/\d/},9:{pattern:/\d/,optional:!0},"#":{pattern:/\d/,recursive:!0},A:{pattern:/[a-zA-Z0-9]/},S:{pattern:/[a-zA-Z]/}}};a.jMaskGlobals=a.jMaskGlobals||{};k=a.jMaskGlobals=a.extend(!0,{},k,a.jMaskGlobals);k.dataMask&&a.applyDataMask();setInterval(function(){a.jMaskGlobals.watchDataMask&&a.applyDataMask()},k.watchInterval)},window.jQuery,window.Zepto);


/////////////////





 $(document).ready( function() {
   /* Executa a requisição quando o campo CEP perder o foco */
   $('#billingAddressPostalCode').blur(function(){
           /* Configura a requisição AJAX */
           $.ajax({
                url : 'consultar_cep.php', /* URL que será chamada */
                type : 'POST', /* Tipo da requisição */
                data: 'cep=' + $('#billingAddressPostalCode').val(), /* dado que será enviado via POST */
                dataType: 'json', /* Tipo de transmissão */
                success: function(data){
                    if(data.sucesso == 1){
                        $('#billingAddressStreet').val(data.rua);
                        $('#billingAddressDistrict').val(data.bairro);
                        $('#billingAddressCity').val(data.cidade);
                        $('#billingAddressState').val(data.estado);
                        $('#billingAddressNumber').focus();
                        $('#billingAddressCountry').val('Brasil');
                    }
                },

                error: function(data) {
                console.log(data);
                }
           });
   return false;
   })
});
$(document).ready( function() {
   /* Executa a requisição quando o campo CEP perder o foco */
   $('#shippingAddressPostalCode').blur(function(){
           /* Configura a requisição AJAX */
           $.ajax({
                url : 'consultar_cep.php', /* URL que será chamada */
                type : 'POST', /* Tipo da requisição */
                data: 'cep=' + $('#shippingAddressPostalCode').val(), /* dado que será enviado via POST */
                dataType: 'json', /* Tipo de transmissão */
                success: function(data){
                    if(data.sucesso == 1){
                        $('#shippingAddressStreet').val(data.rua);
                        $('#shippingAddressDistrict').val(data.bairro);
                        $('#shippingAddressCity').val(data.cidade);
                        $('#shippingAddressState').val(data.estado);
                        $('#shippingAddressNumber').focus();
                    }
                },

                error: function(data) {
                console.log(data);
                }
           });
   return false;
   })
});




    jQuery(function($){
    $("#creditCardHolderBirthDate").mask("99/99/9999");
    $("#senderCPF").mask("999.999.999-99");
    $("#creditCardHolderCPF").mask("999.999.999-99");
    $("#shippingAddressPostalCode").mask("99999-999");
    $("#billingAddressPostalCode").mask("99999-999");
    });

    PagSeguroDirectPayment.setSessionId('');



    function mudaValorParcelas(total,parcelas)
    {
        frete = document.getElementById('frete').value;
        document.getElementById('installmentValue').value = ((parseFloat(total)+parseFloat(frete))/parcelas).toFixed(2);
        //alert(document.getElementById('installmentValue').value);




    }


    function parcelasDisponiveis() {
        PagSeguroDirectPayment.getInstallments({


            amount: parseFloat($("#frete").val()) + parseFloat($("#total").val()),
            brand: $("#creditCardBrand").val(),

            maxInstallmentNoInterest: 2,

            success: function(response) {
                //console.log(response.installments);
                $("#installmentsWrapper").css('display', "block");


                var installments = response.installments[$("#creditCardBrand").val()];

                var options = '';
                var contador = 0;

                for (var i in installments) {

                    contador++;

                    //if(contador>2) break;


                    var optionItem     = installments[i];
                    var optionQuantity = optionItem.quantity;
                    var optionAmount   = optionItem.installmentAmount;
                    var separador = ' - ';
                    var valorTotalCalculado =
                    (optionAmount * optionQuantity).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,').replace(".", ',');

                    var optionLabel    = (optionQuantity + " x R$ " +
                    (optionAmount.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,').replace(".", ','))
                    + " Total R$ "+ valorTotalCalculado );

                    options += ('<option value="' + optionItem.quantity + separador + optionAmount + '">'
                    + optionLabel +'</option>');




                };

                $("#installmentQuantity").html(options);
                //alert(options);

            },

            error: function(response) {
                //console.log(response);
            },

            complete: function(response) {
            }
        });
    }

    $("#installmentQuantity").change(function() {
        var option = $(this).find("option:selected");
        if (option.length) {
            $("#installmentValue").val( option.attr("valorparcela") );
        }
    });


    function brandCard() {

        PagSeguroDirectPayment.getBrand({
            cardBin: $("#cardNumber").val(),
            success: function(response) {
                $("#creditCardBrand").val(response.brand.name);
                $("#cardNumber").css('border', '1px solid #999');

                if (response.brand.expirable) {
                    $("#expiraCartao").css('display', 'block');
                } else {
                    $("#expiraCartao").css('display', 'none');
                }
                if (response.brand.cvvSize > 0) {
                    $("#cvvCartao").css('display', 'block');
                } else {
                    $("#cvvCartao").css('display', 'none');
                }

                $("#bandeiraCartao").attr('src', 'https://stc.pagseguro.uol.com.br/public/img/payment-methods-flags/68x30/' + response.brand.name + '.png');


                parcelasDisponiveis();

            },

            error: function(response) {
                $("#cardNumber").css('border', '2px solid red');
                $("#cardNumber").focus();
            },

            complete: function(response) {

            }

        });


    }

    function cardToken(){
        document.getElementById('senderHash').value = PagSeguroDirectPayment.getSenderHash();
        PagSeguroDirectPayment.createCardToken({

                cardNumber: $("#cardNumber").val(),
                brand: $("#creditCardBrand").val(),
                cvv: $("#cardCvv").val(),
                expirationMonth: $("#cardExpirationMonth").val(),
                expirationYear: $("#cardExpirationYear").val(),

                success: function (response) {
                    $("#creditCardToken").val(response.card.token);
                },
                error: function (response) {
                    if (response.error) {

                        $("#erroPagSeguro").html("<font color='red'>Erro</font>");


                        $.each(response.errors, function (index, value) {
                            console.log(value);

                            //tratarError(value);
                        });
                    }
                },
                complete: function (response) {

                }

            });


    }



    function tratarError(id) {
    if (id.charAt(0) == '2') id = id.substr(1);

    if (id == "53020" || id == '53021') {
        $("#erroPagSeguro").append("<p>Verifique telefone inserido</p>");
        $("#senderPhone").css('border', '2px solid red');

    } else if (id == "53010" || id == '53011' || id == '53012') {
        $("#erroPagSeguro").append("<p>Verifique o e-mail inserido</p>");
        $("#senderEmail").css('border', '2px solid red');

    } else if (id == "53017") {
        $("#erroPagSeguro").append("<p>Verifique o CPF inserido</p>");
        $("#senderCPF").css('border', '2px solid red');

    } else if (id == "53018" || id == "53019") {
        $("#erroPagSeguro").append("<p>Verifique o DDD inserido</p>");
        $("#senderAreaCode").css('border', '2px solid red');

    } else if (id == "53013" || id == '53014' || id == '53015') {
        $("#erroPagSeguro").append("<p>Verifique o nome inserido</p>");
        $("#senderName").css('border', '2px solid red');

    } else if (id == "53029" || id == '53030') {
        $("#erroPagSeguro").append("<p>Verifique o bairro inserido</p>");
        $("#shippingAddressDistrict").css('border', '2px solid red');

    } else if (id == "53022" || id == '53023') {
        $("#erroPagSeguro").append("<p>Verifique o CEP inserido</p>");
        $("#shippingAddressPostalCode").css('border', '2px solid red');

    } else if (id == "53024" || id == '53025') {
        $("#erroPagSeguro").append("<p>Verifique a rua inserido</p>");
        $("#shippingAddressStreet").css('border', '2px solid red');

    } else if (id == "53026" || id == '53027') {
        $("#erroPagSeguro").append("<p>Verifique o número inserido</p>");
        $("#shippingAddressNumber").css('border', '2px solid red');

    } else if (id == "53033" || id == '53034') {
        $("#erroPagSeguro").append("<p>Verifique o estado inserido</p>");
        $("#shippingAddressState").css('border', '2px solid red');

    } else if (id == "53031" || id == '53032') {
        $("#erroPagSeguro").append("<p>Verifique a cidade informada</p>");
        $("#shippingAddressCity").css('border', '2px solid red');

    } else if (id == '10001') {
        $("#erroPagSeguro").append("<p>Verifique o número do cartão inserido</p>");
        $("#cardNumber").css('border', '2px solid red');

    } else if (id == '10002' || id == '30405') {
        $("#erroPagSeguro").append("<p>Verifique a data de validade do cartão inserido</p>");
        $("#cardExpirationMonth").css('border', '2px solid red');
        $("#cardExpirationYear").css('border', '2px solid red');

    } else if (id == '10004') {
        $("#erroPagSeguro").append("<p>É obrigatorio informar o código de segurança, que se encontra no verso, do cartão</p>");
        $("#cardCvv").css('border', '2px solid red');

    } else if (id == '10006' || id == '10003' || id == '53037') {
        $("#erroPagSeguro").append("<p>Verifique o código de segurança do cartão informado</p>");
        $("#cardCvv").css('border', '2px solid red');

    } else if (id == '30404') {
        $("#erroPagSeguro").append("<p>Ocorreu um erro. Atualize a página e tente novamente!</p>");

    } else if (id == '53047') {
        $("#erroPagSeguro").append("<p>Verifique a data de nascimento do titular do cartão informada</p>");
        $("#creditCardHolderBirthDate").css('border', '2px solid red');

    } else if (id == '53053' || id == '53054') {
        $("#erroPagSeguro").append("<p>Verifique o CEP inserido</p>");
        $("#billingAddressPostalCode").css('border', '2px solid red');

    } else if (id == '53055' || id == '53056') {
        $("#erroPagSeguro").append("<p>Verifique a rua inserido</p>");
        $("#billingAddressStreet").css('border', '2px solid red');

    } else if (id == '53042' || id == '53043' || id == '53044') {
        $("#erroPagSeguro").append("<p>Verifique o nome inserido</p>");
        $("#creditCardHolderName").css('border', '2px solid red');

    } else if (id == '53057' || id == '53058') {
        $("#erroPagSeguro").append("<p>Verifique o número inserido</p>");
        $("#billingAddressNumber").css('border', '2px solid red');

    } else if (id == '53062' || id == '53063') {
        $("#erroPagSeguro").append("<p>Verifique a cidade informada</p>");
        $("#billingAddressCity").css('border', '2px solid red');

    } else if (id == '53045' || id == '53046') {
        $("#erroPagSeguro").append("<p>Verifique o CPF inserido</p>");
        $("#creditCardHolderCPF").css('border', '2px solid red');

    } else if (id == '53060' || id == '53061') {
        $("#erroPagSeguro").append("<p>Verifique o bairro inserido</p>");
        $("#billingAddressDistrict").css('border', '2px solid red');

    } else if (id == '53064' || id == '53065') {
        $("#erroPagSeguro").append("<p>Verifique o estado inserido</p>");
        $("#billingAddressState").css('border', '2px solid red');

    } else if (id == '53051' || id == '53052') {
        $("#erroPagSeguro").append("<p>Verifique telefone inserido</p>");
        $("#billingAddressState").css('border', '2px solid red');

    } else if (id == '53049' || id == '53050') {
        $("#erroPagSeguro").append("<p>Verifique o código de área informado</p>");
        $("#creditCardHolderAreaCode").css('border', '2px solid red');

    } else if (id == '53122') {
        $("#erroPagSeguro").append("<p>Enquanto na sandbox do PagSeguro, o e-mail deve ter o domínio'@sandbox.pagseguro.com.br' (ex.: comprador@sandbox.pagseguro.com.br)</p>");

    }

}

</script>


<!DOCTYPE html>
<html>
<title>Vitrine de Soluções 4sis</title>
<meta charset="ISO-8859-1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="shortcut icon" href="https://www.4sis.com.br/novoLogo.ico" type="image/x-icon" />
<link rel="icon" href="https://www.4sis.com.br/novoLogo.ico" type="image/x-icon" />

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins">
<link rel="stylesheet" href="https://www.w3schools.com/lib/w3-colors-2017.css">
<link rel="stylesheet" href="https://www.w3schools.com/lib/w3-colors-2019.css">
<link rel="stylesheet" href="https://www.w3schools.com/lib/w3-colors-vivid.css">
<link rel="stylesheet" href="https://www.w3schools.com/lib/w3-colors-camo.css">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<meta name="description" content="Vitrine de Soluções 4sis"/>
<meta name="keywords" content="desenvolvimento de sistemas, desenvolvimento de software, desenvolvimento de aplicativos,
gestão de negócios, erp, sistema, programa, software, programa aluguel de trajes, programa locação roupas, erp locação, sistema,
programa, software, loja de aluguel de trajes, loja de locação de roupas, planilha locação traje, planilha aluguel, planilha atendimento,
agenda de atendimento, crm, leads, controle de leads, follow-up de leads, cosultório odontológico,
Programa para controle de ativos"/>
<style>

body,h1,h2,h3,h4,h5,h6 {font-family: "Poppins", sans-serif}
.mySlides {display:none}
.w3-tag, .fa {cursor:pointer}
.w3-tag {height:15px;width:15px;padding:0;margin-top:6px}



</style>

    <meta property="og:url"           content="https://www.estoque.club/loja" />
    <meta property="og:type"          content="website" />
    <meta property="og:title"         content="Vitrine de Soluções 4sis" />
    <meta property="og:description"   content="Layout%20Pr%EF%BF%BD%EF%BF%BD%EF%BF%BDprio%20Site%20Vitrina" />
    <meta property="og:image"         content="" /><div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = 'https://connect.facebook.net/pt_BR/sdk.js#xfbml=1&version=v3.1&appId=219180878642349&autoLogAppEvents=1';
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-56471112-2"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'UA-56471112-2');
</script>

<body style="max-width:1500px;">


<!-- Navbar (sit on top) -->

    <!-- Navbar Tela Grande-->
    <div class="w3-top w3-center w3-text-white" style="background-color: #00b0c8;">

    <div class="w3-row w3-sand w3-hide-small">
            <div class="w3-third w3-center">
                <br><br>
                <a href="index_comoFunciona.php" class="w3-button w3-hover-white w3-medium">
                COMO FUNCIONA <i class="fa fa-question"></i></a>

            </div>
            <div class="w3-third">
                <div class="w3-center w3-padding" style="width:100%;left:0;top:40;">
                <a href="index.php"><img src="http://app.4sis.com.br/4Control/app.files/logos/bd_4control_vitrina_live/logopequeno-ts-1579542727-ts-.png" class="w3-image" style="border: 0;" alt=""></a>
                </div>
            </div>
            <div class="w3-third w3-center">
                <br>
                <a href="index.php#Empresa" class="w3-padding-small w3-button w3-hover-sand w3-hide-small w3-medium">
                <img src="logo4sisBola.png" class="w3-image" style="width:10%; border: 0;" alt=""> VITRINE 4SIS</a>
                <br><a href="index.php#Contato" class="w3-padding-small w3-button w3-hover-sand w3-hide-small w3-medium">
                &nbsp;&nbsp;<i class="fa fa-envelope"></i> CONTATO</a>

            </div>
        </div>

        <div class="w3-hide-medium w3-hide-large w3-white w3-center">
                <a href="tel:+55(12)2012-5003"
                class="w3-button w3-hover-white w3-hide-medium w3-hide-large w3-medium"><i class="fa fa-phone" style="font-size:25px;"></i></a>
                &nbsp;&nbsp;
                <a href="index.php"><img src="http://app.4sis.com.br/4Control/app.files/logos/bd_4control_vitrina_live/logopequeno-ts-1579542727-ts-.png" class="w3-image" style="width:50%;border: 0;"></a>
                &nbsp;&nbsp;
                <a class="w3-button w3-hover-white w3-hide-medium w3-hide-large w3-medium"  target="_blank"
                href="https://api.whatsapp.com/send?phone=551220125003&text=Olá acessei o site Vitrine de Soluções 4sis!"><i class="fa fa-whatsapp" style="font-size:25px;"></i></a>
        </div>

    <a href="javascript:void(0);" onclick="showNav('demo')"
    class="w3-padding-small w3-hide-medium w3-hide-large w3-bar-item w3-btn"><i class="fa fa-bars"></i></a>
    <!--
    <a href="#mostraCadastrar" onclick="jsBusca1('gravaCarrinho.php?mostraCadastrar=1','mostraCadastrar');"
    class="w3-button w3-padding-small w3-hide-small w3-medium w3-bar-item w3-btn">
    <i class="fa fa-user-circle-o" style="color:LightBlue;"></i>&nbsp;MINHA CONTA</a>
    !-->
    <a href="index.php#Novidades" class="w3-button w3-padding-small w3-hide-small w3-medium w3-bar-item w3-btn"><i class="fa fa-star" style="color:yellow;"></i>&nbsp; NOVIDADES</a>
    <a href="index.php#Queridinhos" class="w3-button w3-padding-small w3-hide-small w3-medium w3-bar-item w3-btn"><i class="fa fa-heart" style="color:red;"></i>&nbsp; QUERIDINHOS</a>

        <a href="index.php#Filtros" onclick="document.getElementById('mostraFiltro').style.display='inline'" class="w3-button w3-padding-small w3-hide-large w3-hide-medium w3-medium w3-bar-item w3-btn"><i class="fa fa-filter"></i></a>
    
    <div class="w3-dropdown-hover">
    <button class="w3-button">ENCONTRE SOLUÇÕES</button>
    <div class="w3-dropdown-content w3-bar-block w3-card-4 w3-light-grey">
                        <a href="index.php?produtoId=subFamilia&familiaId=subFamilia&subFamiliaId=$familiaId&txt_ocasiao=1#Produtos1"
                     class="w3-bar-item w3-button w3-small"
                     onclick="document.getElementById('mostraFiltro').style.display='none'"
                     >&nbsp;&nbsp;Consultoria</a>
                                <a href="index.php?produtoId=subFamilia&familiaId=subFamilia&subFamiliaId=$familiaId&txt_ocasiao=3#Produtos1"
                     class="w3-bar-item w3-button w3-small"
                     onclick="document.getElementById('mostraFiltro').style.display='none'"
                     >&nbsp;&nbsp;Desenvolvimento de Software</a>
                                <a href="index.php?produtoId=subFamilia&familiaId=subFamilia&subFamiliaId=$familiaId&txt_ocasiao=8#Produtos1"
                     class="w3-bar-item w3-button w3-small"
                     onclick="document.getElementById('mostraFiltro').style.display='none'"
                     >&nbsp;&nbsp;Loja Virtual</a>
                                <a href="index.php?produtoId=subFamilia&familiaId=subFamilia&subFamiliaId=$familiaId&txt_ocasiao=9#Produtos1"
                     class="w3-bar-item w3-button w3-small"
                     onclick="document.getElementById('mostraFiltro').style.display='none'"
                     >&nbsp;&nbsp;Módulos e Adicionais</a>
                                <a href="index.php?produtoId=subFamilia&familiaId=subFamilia&subFamiliaId=$familiaId&txt_ocasiao=4#Produtos1"
                     class="w3-bar-item w3-button w3-small"
                     onclick="document.getElementById('mostraFiltro').style.display='none'"
                     >&nbsp;&nbsp;Produtos Exclusivos</a>
                                <a href="index.php?produtoId=subFamilia&familiaId=subFamilia&subFamiliaId=$familiaId&txt_ocasiao=2#Produtos1"
                     class="w3-bar-item w3-button w3-small"
                     onclick="document.getElementById('mostraFiltro').style.display='none'"
                     >&nbsp;&nbsp;Sistema de Gestão</a>
                                <a href="index.php?produtoId=subFamilia&familiaId=subFamilia&subFamiliaId=$familiaId&txt_ocasiao=6#Produtos1"
                     class="w3-bar-item w3-button w3-small"
                     onclick="document.getElementById('mostraFiltro').style.display='none'"
                     >&nbsp;&nbsp;Site</a>
                                <a href="index.php?produtoId=subFamilia&familiaId=subFamilia&subFamiliaId=$familiaId&txt_ocasiao=7#Produtos1"
                     class="w3-bar-item w3-button w3-small"
                     onclick="document.getElementById('mostraFiltro').style.display='none'"
                     >&nbsp;&nbsp;Treinamento</a>
                </div>
    </div>


    <!--
    <a title="Meu Carrinho" onclick="document.getElementById('mostrarMeuCarrinho').style.display='block';
    jsBusca1('gravaCarrinho.php?visualizar=1','meuCarrinho');"
    href="#Carrinho"
    class="w3-button w3-padding-small w3-hide-small w3-medium w3-bar-item w3-btn w3-tooltip">
    <i class="fa fa-shopping-cart w3-text-white"></i></a>
    !-->
    <a href="index.php#Endereco" title="Onde Estamos" class="w3-button w3-padding-small w3-hide-small w3-medium w3-bar-item w3-btn">
        <i class="fa fa-map-marker w3-text-white"></i></a>
    <!--
    <a href="https://www.instagram.com/4sis.club/" target="_blank"
    class="w3-button w3-padding-small w3-hide-small w3-medium w3-bar-item w3-btn">
        <i class="fa fa-instagram"></i>&nbsp;INSTAGRAM</a>
    !-->


  </div>

  <!-- Navbar Tela Pequena-->
  <form action="index.php#Produtos" method="post" name="busca2" id="busca2">
  <div class="w3-top w3-bar w3-xxlarge w3-text-white w3-hide w3-hide-large w3-hide-medium" id="demo"
  style="background-color: #00b0c8;">
    <a href="javascript:void(0);" onclick="showNav('demo')"
    class="w3-left w3-padding-small w3-hide-medium w3-hide-large w3-bar-item w3-btn w3-mobile"><i class="fa fa-close" style="font-size:12px;"></i></a>
    <a href="index.php#Empresa" onclick="showNav('demo')" class="w3-button w3-medium w3-bar-item w3-btn w3-mobile">VITRINE 4SIS</a>
    <a href="index_comoFunciona.php" onclick="showNav('demo')" class="w3-button w3-medium w3-bar-item w3-btn w3-mobile">COMO FUNCIONA</a>
    <!-- <a href="#mostraCadastrar" onclick="showNav('demo');jsBusca2('gravaCarrinho.php?mostraCadastrar=1','mostraCadastrar');"
    class="w3-button w3-medium w3-bar-item w3-btn w3-mobile">
    <i class="fa fa-user-circle-o" style="color:LightBlue;"></i>&nbsp;MINHA CONTA</a>!-->
    <a href="index.php#Produtos1" onclick="showNav('demo')" class="w3-button w3-medium w3-bar-item w3-btn w3-mobile">COMPRE</a>
    <a href="index.php#Contato" onclick="showNav('demo')" class="w3-button w3-medium w3-bar-item w3-btn w3-mobile">CONTATO</a>
    <a href="index.php#Endereco" onclick="showNav('demo')" class="w3-button w3-medium w3-bar-item w3-btn w3-mobile">
    <i class="fa fa-map-marker"></i>&nbsp;ONDE ESTAMOS</a>
    <!--
    <a href="#Carrinho"
     onclick="showNav('demo');document.getElementById('mostrarMeuCarrinho').style.display='block';
     jsBusca1('gravaCarrinho.php?visualizar=1','meuCarrinho');" class="w3-button w3-medium w3-bar-item w3-btn w3-mobile">
         <i class="fa fa-shopping-cart w3-text-white"></i></a>
    <a href="https://www.instagram.com/4sis.club/" onclick="showNav('demo')" target="_blank"
    class="w3-button w3-medium w3-bar-item w3-btn w3-mobile">
        <i class="fa fa-instagram"></i>&nbsp;INSTAGRAM</a>
    !-->


</div>

  </form>





<div style="max-width:1500px; margin-left:200px; margin-right:0px; top:50;"><br><style>



#myBtn {
  display: inline;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: green;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
}
#myBtn:hover {
  background-color: #555;
}

#myBtnCarrinho {
  display: inline;
  position: fixed;
  bottom: 80px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: LightBlue;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
}
#myBtnCarrinho:hover {
  background-color: #555;
}


</style>

<a id="myBtn" class="w3-medium w3-btn w3-hide-small"  target="_blank"
href="https://api.whatsapp.com/send?phone=551220125003&text=Olá acessei o site Vitrine de Soluções 4sis!">
whatsapp <i class="fa fa-whatsapp"></i></a>

<a id="myBtnCarrinho" class="w3-medium w3-btn w3-hide-large w3-hide-medium"
href="#Carrinho" onclick="document.getElementById('mostrarMeuCarrinho').style.display='block';
jsBusca1('gravaCarrinho.php?visualizar=1','meuCarrinho');">
<i class="fa fa-shopping-cart"></i></a>

<a id="myBtn" class="w3-medium w3-btn w3-hide-large w3-hide-medium"  target="_blank"
href="https://api.whatsapp.com/send?phone=551220125003&text=Olá acessei o site Vitrine de Soluções 4sis!">
<i class="fa fa-whatsapp"></i></a>

    <meta property="og:url"           content="https://www.4sis.com.br/loja/detalheProduto.php?produto=28" />
    <meta property="og:type"          content="website" />
    <meta property="og:title"         content="Layout Próprio Site Vitrina" />
    <meta property="og:description"   content="Todos os sites Vitrina que ofertamos no estoque.club possuem um Layout Padrão onde você pode apenas trocar cores, colocar seu logotipo e banners.
Esta solução é feita para você, que busca um Layout Próprio que tenha a cara de sua empresa.
O valor que consta correspondem a 20h de Desenvolvimento a distância com calls para nivelamento, que atende a grande maioria dos casos, porém sua necessidade pode requerer mais horas, por isso
entre em contato conosco para entender melhor como funciona antes de adquirir  :)" />
    <meta property="og:image"         content="http://app.4sis.com.br/4Control/app.files/fotosProdutos/bd_4control_vitrina_live/layoutproprio-ts-1585696838-ts-.png" /> 
        <br>


        <a name=''></a>



<!-- Slideshow -->
<br>

                    <div class="w3-modal" style="display:none" id="fotoGrande128">
                    <div class="w3-modal-content">
                    <div class="w3-container w3-center">

                        <span onclick="document.getElementById('fotoGrande128').style.display='none'"
                        class="w3-button w3-display-topright">&times;</span>
                    <br>
                        <img src="http://app.4sis.com.br/4Control/app.files/fotosProdutos/bd_4control_vitrina_live/layoutproprio-ts-1585696838-ts-.png"
                        class="w3-round w3-image"
                        title="Layout Próprio Site Vitrina" >
                    <br>
                    </div></div>
                    </div><div class="w3-container w3-row w3-white">
    <div class="w3-third w3-white">
        <br>
        <div class="w3-row">
            <div class="w3-display-container w3-center mySlides">
                
                    <br><a onclick="document.getElementById('fotoGrande128').style.display='inline'">
                    <img src="http://app.4sis.com.br/4Control/app.files/fotosProdutos/bd_4control_vitrina_live/layoutproprio-ts-1585696838-ts-.png"
                    style="cursor:zoom-in"
                    class="w3-round w3-image w3-hover-opacity"
                    onclick="currentDiv(1)"
                    title="Layout Próprio Site Vitrina" >
                    </a>
                                </div>
                                                        </div>
        <div class="w3-row w3-white w3-margin">
            <!-- Slideshow next/previous buttons -->
            <div class="w3-quarter">
                    <img src="http://app.4sis.com.br/4Control/app.files/fotosProdutos/bd_4control_vitrina_live/layoutproprio-ts-1585696838-ts-.png"
                    class="w3-round w3-image w3-hover-opacity"
                    onclick="currentDiv(1)"
                    title="Layout Próprio Site Vitrina" >
                    </div>
            <div class="w3-quarter"></div>
            <div class="w3-quarter"></div>
            <div class="w3-quarter"></div>
            <div class="w3-quarter"></div>
        </div>
    </div>

    <div class="w3-third w3-white w3-border-right w3-border-left">
        <br><br>
        <div class="w3-container">

                                    <!--<p>Família: <b> . </b></p> --!>
                                    <!-- <p>Unidade de Medida:  <b>un</b></p> --!>
                                    <h3><b>Layout Próprio Site Vitrina</b></h3>
                                    <h7><b>Todos os sites Vitrina que ofertamos no estoque.club possuem um Layout Padrão onde você pode apenas trocar cores, colocar seu logotipo e banners.
Esta solução é feita para você, que busca um Layout Próprio que tenha a cara de sua empresa.
O valor que consta correspondem a 20h de Desenvolvimento a distância com calls para nivelamento, que atende a grande maioria dos casos, porém sua necessidade pode requerer mais horas, por isso
entre em contato conosco para entender melhor como funciona antes de adquirir  :)</b></h7>
                                    <br>
                                    <br>
                                    <!--
                                    <i class="fa fa-star" style="color:gold;"></i>
                                    <i class="fa fa-star" style="color:gold;"></i>
                                    <i class="fa fa-star" style="color:gold;"></i>
                                    <i class="fa fa-star" style="color:gold;"></i>
                                    <i class="fa fa-star" style="color:gold;"></i>
                                    <b>(avalie agora!)</b>
                                    !-->


                                    <!--<p>Cor:  <b></b></p>--!>


                                    <br><br><br>
                                    <h4><b>Envie para um amigo!</b></h4>
                                    <a class="w3-medium w3-btn w3-round w3-light-green"
            target="_blank" title="envie para uma amiga por whatsapp"
            href="https://api.whatsapp.com/send?phone=&text=Olá! Veja o que encontrei no site da Vitrine de Soluções 4sis - https://www.4sis.com.br/loja/detalheProduto.php?produto=28#Layout Próprio Site Vitrina">
            <i class="fa fa-whatsapp" style="font-size:18px;">
            </i></a>
            <!-- <a class="w3-medium w3-btn w3-round w3-indigo"
            target="_blank" title="envie para uma amiga por e-mail"
            href="https://api.whatsapp.com/send?phone=&text=Olá! Veja o que encontrei no site da Vitrine de Soluções 4sis - https://www.4sis.com.br/loja/detalheProduto.php?produto=28#Layout Próprio Site Vitrina">
            <i class="fa fa-envelope" style="font-size:18px;">
            </i></a>!-->
            
            <a class="w3-medium w3-btn w3-round w3-dark-gray"
             title="copie o link e envie para uma amiga "
            href="" onclick="copiar();">
            <i class="fa fa-clone" style="font-size:18px;">
            </i></a>

            


                        </div>        <br>
        <br>
        <br>
    </div>

    <div class="w3-third w3-white">
        <br><br><br>
        <div class="w3-container">
                                    <b>Compre por: R$ 2.500,00</b>
                                    <!-- <br>  !-->
                                    <br>
            <a class="w3-medium w3-btn w3-black w3-round"
            onclick="document.getElementById('aindaNao').style.display='block'";
            >
            <i class="fa fa-shopping-cart"></i> compre</a>


            <div id="aindaNao" class="w3-modal">
            <div class="w3-modal-content">

                <header class="w3-container w3-black">
                    <span onclick="document.getElementById('aindaNao').style.display='none'"
                    class="w3-button w3-display-topright w3-large">&times;</span>
                    <h2>Vitrine de Soluções 4sis</h2>
                </header>

                <div class="w3-container">
                    <p>Como você prefere ser atendido?
                    <br><br>
                    <h4></h4>
                    <p><a class="w3-medium w3-btn w3-round w3-light-green"
            target="_blank" title="entrar em contato por whatsapp"
            href="https://api.whatsapp.com/send?phone=551220125003&text=Gostaria de mais detalhes sobre o item: Layout Próprio Site Vitrina - código: PE003 - R$ R$ 2.500,00">
            <i class="fa fa-whatsapp" style="font-size:18px;">
            </i> falar por whatsapp</a>
            <a class="w3-medium w3-btn w3-round w3-indigo"
             title="entrar em contato por e-mail"
            href="index.php?msg=Gostaria de mais detalhes sobre o item: Layout Próprio Site Vitrina - código: PE003 - R$ R$ 2.500,00#Contato">
            <i class="fa fa-envelope" style="font-size:18px;">
            </i> enviar e-mail</a>
            </p>

                </div>

                <footer class="w3-container w3-black">
                    <p>&nbsp;</p>
                </footer>

            </div>
            </div>


                                    </div>        <br>
        <br>
        <br>
    </div>

</div>
<br><br>

<a name='useCom'></a>
    <div class="w3-container w3-center w3-padding-64">
        <span class="w3-center w3-xxlarge w3-bottombar w3-border-dark-grey">COMPRE JUNTO</span>
        <br><br>
                <div class="w3-row w3-round w3-white w3-margin">
        <!-- Slideshow next/previous buttons -->
        <div class="w3-quarter "><a
                    href="detalheProduto.php?produto=24&detalhe=Loja Virtual#24"
                    class="w3-white w3-round w3-medium"><img src="http://app.4sis.com.br/4Control/app.files/fotosProdutos/bd_4control_vitrina_live/sitelojavirtual-ts-1584803290-ts-.png"
                        class="w3-round w3-image w3-white w3-hover-opacity"
                        alt="Loja Virtual" ></a>
                    </div>
        <div class="w3-quarter "><a
                    href="detalheProduto.php?produto=20&detalhe=Site para Cadastro de Evento#20"
                    class="w3-white w3-round w3-medium"><img src="http://app.4sis.com.br/4Control/app.files/fotosProdutos/bd_4control_vitrina_live/sitecadastroevento-ts-1584735859-ts-.png"
                        class="w3-round w3-image w3-white w3-hover-opacity"
                        alt="Site para Cadastro de Evento" ></a>
                    </div>
        <div class="w3-quarter "><a
                    href="detalheProduto.php?produto=21&detalhe=Site para Lead#21"
                    class="w3-white w3-round w3-medium"><img src="http://app.4sis.com.br/4Control/app.files/fotosProdutos/bd_4control_vitrina_live/sitelead-ts-1584803580-ts-.png"
                        class="w3-round w3-image w3-white w3-hover-opacity"
                        alt="Site para Lead" ></a>
                    </div>
        <div class="w3-quarter "><a
                    href="detalheProduto.php?produto=22&detalhe=Site Catálogo Virtual#22"
                    class="w3-white w3-round w3-medium"><img src="http://app.4sis.com.br/4Control/app.files/fotosProdutos/bd_4control_vitrina_live/sitecatalogovirtual-ts-1584741827-ts-.png"
                        class="w3-round w3-image w3-white w3-hover-opacity"
                        alt="Site Catálogo Virtual" ></a>
                    </div>
        </div>
       <div class="w3-row w3-round w3-margin">
        <!-- Slideshow next/previous buttons -->
        <div class="w3-quarter "><!-- <a
                    href="detalheProduto.php?produto=24&detalhe=Loja Virtual#24"
                    class="w3-button w3-black w3-round w3-medium">complete seu look</a> !-->
                    </div>
        <div class="w3-quarter "><!-- <a
                    href="detalheProduto.php?produto=20&detalhe=Site para Cadastro de Evento#20"
                    class="w3-button w3-black w3-round w3-medium">complete seu look</a> !-->
                    </div>
        <div class="w3-quarter "><!-- <a
                    href="detalheProduto.php?produto=21&detalhe=Site para Lead#21"
                    class="w3-button w3-black w3-round w3-medium">complete seu look</a> !-->
                    </div>
        <div class="w3-quarter "><!-- <a
                    href="detalheProduto.php?produto=22&detalhe=Site Catálogo Virtual#22"
                    class="w3-button w3-black w3-round w3-medium">complete seu look</a> !-->
                    </div>
        </div>
    </div>





<a name='quemGostouTbemAmou'></a>
    <div class="w3-container w3-center w3-padding-64">
        <span class="w3-center w3-xxlarge w3-bottombar w3-border-dark-grey">MAIS SOLUÇÕES</span>
        <br><br><br>
            <div class="w3-row w3-round w3-white w3-margin">
        <!-- Slideshow next/previous buttons -->
        <div class="w3-quarter w3-card-4 w3-center w3-hover-border-black w3-border w3-round-small">
            <h4 style="height:40px;">Loja Virtual</h4>
            <p style="height:300px;"><a
                    href="detalheProduto.php?produto=24&detalhe=Loja Virtual#24"
                    class=" w3-round"><img src="http://app.4sis.com.br/4Control/app.files/fotosProdutos/bd_4control_vitrina_live/sitelojavirtual-ts-1584803290-ts-.png"
                        class="w3-round w3-image w3-white w3-hover-opacity"
                        alt="Loja Virtual" ></a>
                    </p>
            <p>&nbsp;</p>
        </div>
        <div class="w3-quarter w3-card-4 w3-center w3-hover-border-black w3-border w3-round-small">
            <h4 style="height:40px;">Site para Cadastro de Evento</h4>
            <p style="height:300px;"><a
                    href="detalheProduto.php?produto=20&detalhe=Site para Cadastro de Evento#20"
                    class=" w3-round"><img src="http://app.4sis.com.br/4Control/app.files/fotosProdutos/bd_4control_vitrina_live/sitecadastroevento-ts-1584735859-ts-.png"
                        class="w3-round w3-image w3-white w3-hover-opacity"
                        alt="Site para Cadastro de Evento" ></a>
                    </p>
            <p>&nbsp;</p>
        </div>
        <div class="w3-quarter w3-card-4 w3-center w3-hover-border-black w3-border w3-round-small">
            <h4 style="height:40px;">Loja Virtual para Aluguel</h4>
            <p style="height:300px;"><a
                    href="detalheProduto.php?produto=25&detalhe=Loja Virtual para Aluguel#25"
                    class=" w3-round"><img src="http://app.4sis.com.br/4Control/app.files/fotosProdutos/bd_4control_vitrina_live/sitelojavirtualaluguel-ts-1584803879-ts-.png"
                        class="w3-round w3-image w3-white w3-hover-opacity"
                        alt="Loja Virtual para Aluguel" ></a>
                    </p>
            <p>&nbsp;</p>
        </div>
        <div class="w3-quarter w3-card-4 w3-center w3-hover-border-black w3-border w3-round-small">
            <h4 style="height:40px;">3 Banners Capa + 1 Lateral</h4>
            <p style="height:300px;"><a
                    href="detalheProduto.php?produto=26&detalhe=3 Banners Capa + 1 Lateral#26"
                    class=" w3-round"><img src="http://app.4sis.com.br/4Control/app.files/fotosProdutos/bd_4control_vitrina_live/banners-ts-1585683280-ts-.png"
                        class="w3-round w3-image w3-white w3-hover-opacity"
                        alt="3 Banners Capa + 1 Lateral" ></a>
                    </p>
            <p>&nbsp;</p>
        </div>
        </div>





    </div>


<!-- tela grande !-->
<div class="w3-hide-small w3-white w3-sidebar w3-bar-block w3-small" style="width:13%;left:0;top:145;">

        <form action="index.php#Produtos1" method="post" name="busca1" id="busca1">
            <div class="w3-padding w3-center">
            <input class="w3-bar-item w3-input w3-border w3-round" name="txt_busca" id="txt_busca" type="text"
            placeholder="o que procura?"
            value = ><p class="w3-tinny"></p>
            <a href="#"  class="w3-button w3-black w3-round" onClick="document.getElementById('busca1').submit();">
            <i class="fa fa-search"></i>buscar</a>
            </div>
        </form>

        <!--

        <p class="w3-center w3-medium">FILTROS <i class="fa fa-sliders"></i></p>



        <div class="w3-dropdown-hover">
        <a href="index.php?produtoId=subFamilia&familiaId=subFamilia&subFamiliaId=$familiaId&txt_cor=&txt_tamanho=&txt_preco=#Produtos1"
        class=" w3-padding-small w3-border-bottom w3-button w3-medium w3-bar-item w3-btn"></a>

        <div class="w3-dropdown-content w3-bar-block w3-card-4">

                </div>
        </div>

        
        <div class="w3-dropdown-hover">
        <a href="index.php?produtoId=subFamilia&familiaId=subFamilia&subFamiliaId=$familiaId&txt_tamanho=&txt_cor=&txt_preco=#Produtos1"
        class="w3-padding-small w3-border-bottom w3-button w3-medium w3-bar-item w3-btn">TAMANHOS</a>
        <div class="w3-dropdown-content w3-bar-block w3-card-4 w3-padding">
        
        </div>
        </div>

        


        <div class="w3-dropdown-hover">
        <button href="#Produtos1"
        class="w3-padding-small w3-border-bottom w3-button w3-medium w3-bar-item w3-btn">PREÇO</button>
        <div class="w3-dropdown-content w3-bar-block w3-card-4">
                        <a href="index.php?produtoId=subFamilia&familiaId=subFamilia&subFamiliaId=$familiaId&txt_preco=1&txt_cor=&txt_tamanho=#Produtos1"
            class="w3-bar-item w3-button w3-border-bottom">R$ 150 ~ R$ 350</a>
            <a href="index.php?produtoId=subFamilia&familiaId=subFamilia&subFamiliaId=$familiaId&txt_preco=2&txt_cor=&txt_tamanho=#Produtos1"
            class="w3-bar-item w3-button w3-border-bottom">R$ 350 ~ R$ 550</a>
            <a href="index.php?produtoId=subFamilia&familiaId=subFamilia&subFamiliaId=$familiaId&txt_preco=3&txt_cor=&txt_tamanho=#Produtos1"
            class="w3-bar-item w3-button w3-border-bottom">R$ 550 ~ R$ 750</a>
            <a href="index.php?produtoId=subFamilia&familiaId=subFamilia&subFamiliaId=$familiaId&txt_preco=4&txt_cor=&txt_tamanho=#Produtos1"
            class="w3-bar-item w3-button w3-border-bottom">R$ 750 ~ R$ 950</a>
             <a href="index.php?produtoId=subFamilia&familiaId=subFamilia&subFamiliaId=$familiaId&txt_preco=5&txt_cor=&txt_tamanho=#Produtos1"
            class="w3-bar-item w3-button w3-border-bottom">R$ 950 ~ R$ 1150</a>
            <a href="index.php?produtoId=subFamilia&familiaId=subFamilia&subFamiliaId=$familiaId&txt_preco=6&txt_cor=&txt_tamanho=#Produtos1"
            class="w3-bar-item w3-button w3-border-bottom">R$ 1150 ~ R$ 1350</a>
            <a href="index.php?produtoId=subFamilia&familiaId=subFamilia&subFamiliaId=$familiaId&txt_preco=7&txt_cor=&txt_tamanho=#Produtos1"
            class="w3-bar-item w3-button w3-border-bottom">R$ 1350 ~ R$ 1500</a>
            <a href="index.php?produtoId=subFamilia&familiaId=subFamilia&subFamiliaId=$familiaId&txt_preco=8&txt_cor=&txt_tamanho=#Produtos1"
            class="w3-bar-item w3-button w3-border-bottom">R$ 1500 ~ R$ 2000</a>
                    </div>
        </div>

                                
        
        
        
        
        !-->

              <br><br>
       <a href="index_comoFunciona.php">
       <img src="http://app.4sis.com.br/4Control/app.files/fotosNoticia/bd_4control_vitrina_live/estoqueclubpng-ts-1584997831-ts-." class="w3-margin w3-image w3-round w3-hover-opacity w3-hide-small">
       </a>
       






    <div id="listaCarrinho">
    </div>

    <div id="erroPagseguro">
    </div>





</div>

<input type="text" id="copiar" value="https://www.4sis.com.br/loja/detalheProduto.php?produto=28#Layout Próprio Site Vitrina" class="w3-text-white w3-input">
<script>
    function copiar()
    {
    document.getElementById('copiar').select();
    copied = document.execCommand('copy');
    }
</script>
<!-- Contato  Container  -->

<div id='mostraCadastrar'></div>
<a name='Cadastrar'></a>
<div id='mostraDadosCadastro'>

</div>

<br><br><br><br>
<a name='Carrinho'></a>
<div class="w3-container w3-center" style="display: none;" id="mostrarMeuCarrinho">
    <span class="w3-center w3-xxlarge">MEU CARRINHO</span>

    <div id="meuCarrinho">

    </div>


    <div id="meuCarrinhoEnvia" style="visibility: hidden;">
    </div>
    <!--
    <button value="visualizar"
            onclick="jsBusca1('gravaCarrinho.php?visualizar=1','meuCarrinho');"
            class="w3-button w3-white"><i class="fa fa-shopping-cart"></i> mostrar carrinho</button>
    !-->

    <button value="limpar"
            onclick="jsBusca1('gravaCarrinho.php?limpar=1','meuCarrinho');"
            class="w3-button w3-white"><i class="fa fa-close"></i> limpar carrinho</button>


    <button value="enviar"
            onclick="
            jsBusca1('gravaCarrinho.php?mostraComprar=1','mostraComprar');"
            class="w3-button w3-white"><i class="fa fa-shopping-cart"></i> finalizar carrinho</button>






</div>



<a name='finalizaCompra'></a>
<div id='mostraComprar'></div>
<div id='mostraCadastrar'></div>
<div id="erroPagseguro">
</div>



<!-- Footer -->
<footer class="w3-container w3-padding-32 w3-black w3-center">
    <p><i class="fa fa-whatsapp"></i>(12)2012-5003 - (12)2012-5003  <i class="fa fa-at"></i> contato@4sis.com.br</p>
    <p>Rua dos Piquiroes, 40, Sala 312, Parque Residencial Aquarius - São José dos Campos - SP - Cep.: 12246-020</p>
    <div class="w3-row-padding w3-center">
    Powered by <a href="https://www.4sis.com.br">4sis.com.br</a>
    </div>
</footer>

</div>
</body>
</html>
<script>

var myIndex = 0;
carousel();

function carousel() {
  var i;
  var x = document.getElementsByClassName("mySlides");
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  myIndex++;
  if (myIndex > x.length) {myIndex = 1}
  x[myIndex-1].style.display = "block";
  setTimeout(carousel, 5000); // Change image every 2 seconds
}

function w3_open() {
  document.getElementById("mySidebar").style.display = "block";
}

function w3_close() {
  document.getElementById("mySidebar").style.display = "none";
}

// Slideshow script
var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
  showDivs(slideIndex += n);
}

function currentDiv(n) {
  showDivs(slideIndex = n);
}

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("demodots");
  if (n > x.length) {slideIndex = 1}
  if (n < 1) {slideIndex = x.length} ;
  for (i = 0; i < x.length; i++) {
     x[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
     dots[i].className = dots[i].className.replace(" w3-white", "");
  }
  x[slideIndex-1].style.display = "block";
  dots[slideIndex-1].className += " w3-white";
}



function showNav(id) {
    var x = document.getElementById(id);
    if (x.className.indexOf("w3-show") == -1) {
        x.className += " w3-show";
    } else {
        x.className = x.className.replace(" w3-show", "");
    }
}

function cpfMask(inputData, e)
{

		if(document.all) // Internet Explorer
		var tecla = event.keyCode;
		else //Outros Browsers
		var tecla = e.which;

		if(tecla >= 47 && tecla < 58)
	    { // numeros de 0 a 9 e "/"
			  var data = inputData.value;
			  if (data.length == 3)
			  {
	              data = data + '.';
	              inputData.value = data;
	  			  return true;
	          }
	          if (data.length == 7){
	              data = data + '.';
	              inputData.value = data;
	              return true;
	          }
	          if (data.length == 11){
	              data = data + '-';
	              inputData.value = data;
	              return true;
	          }

	    }
	    else if(tecla == 8 || tecla == 0) // Backspace, Delete e setas direcionais(para mover o cursor, apenas para FF)
			return true;
		else
			return false;


 }

function jsSetInnerHTML(campo,value)
{
    document.getElementById(campo).innerHTML = value ;
}
function setValue(field,value)
{
    if(document.getElementById(field))
    {
        document.getElementById(field).value=value;
    }
}

 function strip(html)
  {     html = html.replace(/<br>/g,'\n');
        html = html.replace(/<table>/g,'');
        html = html.replace(/<tr>/g,'');
        html = html.replace(/<td>/g,'');
        html = html.replace(/excluir do carrinho/g,'\n');
        return html.replace(/<(?:.|\n)*?>/gm , '');
  }

var req1;
var id1;
var value1;

function loadXMLDoc1(url)
{
    req1 = null;
    // Procura por um objeto nativo (Mozilla/Safari)
    if (window.XMLHttpRequest) {
        req1 = new XMLHttpRequest();
        req1.onreadystatechange = processReqChange1;
        req1.open("GET", url, true);
        req1.send(null);
    // Procura por uma versao ActiveX (IE)
    } else if (window.ActiveXObject) {

        req1 = new ActiveXObject("Microsoft.XMLHTTP");
        if (req1) {

            req1.onreadystatechange = processReqChange1;
            req1.open("GET", url, true);
            req1.send();
        }
    }
}

function processReqChange1()
{
    // apenas quando o estado for "completado"
    if (req1.readyState == 4) {
        // apenas se o servidor retornar "OK"
        if (req1.status == 200) {
            // procura pela div id e insere o conteudo
            // retornado nela, como texto HTML

 	        	if(value1=='')
            	{
            		document.getElementById(id1).innerHTML = req1.responseText;
            	}
            	else
            	{
            		document.getElementById(id1).value = req1.responseText;
            	}



        } else {
            //alert("Houve um problema ao obter os dados:\n" + req1.statusText);
        }
    }
    else if (req1.readyState < 4)
    {
    	document.getElementById(id1).innerHTML ='<img src="app.images/processando.gif" border="0">';
    }
}

function jsBusca1(url,divid,valueid)
{
    document.getElementById(divid).style.display='block';
    if(valueid != null)
    {
        value1=valueid
    }
    else
    {
        value1='';
    }
    id1=divid;
    loadXMLDoc1(url);
}



var req2;
var id2;
var value2;

function loadXMLDoc2(url)
{
    req2 = null;
    // Procura por um objeto nativo (Mozilla/Safari)
    if (window.XMLHttpRequest) {
        req2 = new XMLHttpRequest();
        req2.onreadystatechange = processReqChange2;
        req2.open("GET", url, true);
        req2.send(null);
    // Procura por uma versao ActiveX (IE)
    } else if (window.ActiveXObject) {

        req2 = new ActiveXObject("Microsoft.XMLHTTP");
        if (req2) {

            req2.onreadystatechange = processReqChange2;
            req2.open("GET", url, true);
            req2.send();
        }
    }
}

function processReqChange2()
{
    // apenas quando o estado for "completado"
    if (req2.readyState == 4) {
        // apenas se o servidor retornar "OK"
        if (req2.status == 200) {
            // procura pela div id e insere o conteudo
            // retornado nela, como texto HTML

 	        	if(value2=='')
            	{
            		document.getElementById(id2).innerHTML = req2.responseText;
            	}
            	else
            	{
            		document.getElementById(id2).value = req2.responseText;
            	}



        } else {
            //alert("Houve um problema ao obter os dados:\n" + req2.statusText);
        }
    }
    else if (req2.readyState < 4)
    {
    	//document.getElementById(id2).innerHTML ='<img src="app.images/processando.gif" border="0">';
    }
}

function jsBusca2(url,divid,valueid)
{   document.getElementById(divid).style.display='block';
    if(valueid != null)
    {
        value2=valueid
    }
    else
    {
        value2='';
    }
    id2=divid;
    loadXMLDoc2(url);
}








</script>