jonathands · September 16, 2021 12:11
diff --git a/modelo.html b/modelo.html
 <!DOCTYPE html>
 <html>

 <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Informativo Online: NOME DO SEU ESCRITÓRIO</title>
    <base target="_self">
    <meta name="google" value="notranslate">
    <link rel="shortcut icon" href="/images/cp_ico.png">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <link href="https://fonts.googleapis.com/css?family=Pragati+Narrow" rel="stylesheet">
    <style type="text/css">
        body {
            background-color: #fff;
        }

        .holder {
            font-family: 'Pragati Narrow', sans-serif;
            display: flex;
            align-items: center;
            justify-content: center;
            padding-top: 3em;
        }

        .row {
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            flex-wrap: wrap;
        }

        .row>[class*='col-'] {
            display: flex;
            flex-direction: column;
        }

        .titulo {
            margin: 1.2em auto;
            padding: 2px 0.5em;
            display: block;
            text-align: center;
            color: #eee;
            size: 1rem;
            margin-bottom: -38px
        }

        .titulo:hover {
            color: #aaa;
        }

        @media (min-width: 1200px) {

            .book {
                width: 70%;
            }

        }


        @media (max-width: 767px) {
            .titulo {
                margin-bottom: 0px;
                margin: 2.5em 0;
                color: #333;
            }

            .book {
                width: 15em;
            }

            a:before {
                display: none !important;
            }
        }


        .book {
            padding: 0 0 0 0;
            margin: auto;
            transform: perspective(500px) rotateY(-22deg) translateZ(20px) scale(1);
            -webkit-backface-visibility: hidden;
            outline: 1px solid transparent;
            border: 1px solid #aaa;
            width: 70%;
        }

        .book:hover {
            transform: perspective(500px) rotateY(0deg) translateZ(20px) scale(1.15);
            transition: all 0.3s ease-in-out;
            -webkit-backface-visibility: hidden;
            outline: 1px solid transparent;
        }



        .shelf {
            border-bottom: 30px solid #B19886;
            border-left: 20px solid transparent;
            border-right: 20px solid transparent;
            top: -15px;
            z-index: -10;
            margin-bottom: 1.5em;
        }

        .shelf:after {
            content: '';
            background: #855E42;
            height: 20px;
            width: calc(100% + 40px);
            /*IE9+*/
            position: absolute;
            top: 30px;
            left: 0;
            right: 0;
            z-index: 1;
            margin: 0 -20px;
        }


        .lds-ellipsis {
            display: block;
            position: relative;
            width: 64px;
            height: 64px;
            margin: auto
        }

        .lds-ellipsis div {
            position: absolute;
            top: 27px;
            width: 11px;
            height: 11px;
            border-radius: 50%;
            background: #cef;
            animation-timing-function: cubic-bezier(0, 1, 1, 0);
        }

        .lds-ellipsis div:nth-child(1) {
            left: 6px;
            animation: lds-ellipsis1 0.6s infinite;
        }

        .lds-ellipsis div:nth-child(2) {
            left: 6px;
            animation: lds-ellipsis2 0.6s infinite;
        }

        .lds-ellipsis div:nth-child(3) {
            left: 26px;
            animation: lds-ellipsis2 0.6s infinite;
        }

        .lds-ellipsis div:nth-child(4) {
            left: 45px;
            animation: lds-ellipsis3 0.6s infinite;
        }

        @keyframes lds-ellipsis1 {
            0% {
                transform: scale(0);
            }
            100% {
                transform: scale(1);
            }
        }

        @keyframes lds-ellipsis3 {
            0% {
                transform: scale(1);
            }
            100% {
                transform: scale(0);
            }
        }

        @keyframes lds-ellipsis2 {
            0% {
                transform: translate(0, 0);
            }
            100% {
                transform: translate(19px, 0);
            }
        }
    </style>

 </head>

 <body>
    <div class="text-center lds-ellipsis">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div class="container holder">
        <div id="revistas" class="row">
        </div>
    </div>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <script type="text/javascript">
        let req = new XMLHttpRequest();

        /*** 
        *
        SUE CODIGO DE CLIENTE VAI AQUI 
        *
        ***/
        let publicServiceKey = 'SEUCODIGODECLIENTE';

        req.open('GET', 'https://www.businessinformativos.com.br/Services/Informativos/json?auth=' + publicServiceKey, true);
        req.onload = function () {
            if (req.status >= 200 && req.status < 400) {
                let jsonRev = JSON.parse(req.responseText);
                renderInfos(jsonRev);
            } else {
                alert('Erro ao carregar os informativos');
            }
        }
        req.send();

        function renderInfos(infos) {
            infos.infos.forEach(function (info, i) {
                let el = document.querySelector('#revistas');
                el.innerHTML += '<div class="col-xs-6 col-sm-3 col-md-3  col-lg-3">' +
                    '  <a target="_blank"  href="' + info.hlink + '">' +
                    '	<img src="' + info.mini + '" class="img-responsive book"></a>' +
                    '   <a class="titulo"  href="' + info.hlink + '">' + info.titulo + '</a>' +
                    '</div>';

                let fixedI = i + 1;
                if (fixedI % 4 == 0) {
                    el.innerHTML += '<div class="col-md-12 col-sm-12 hidden-xs shelf"></div>';
                }

                if (fixedI == infos.infos.length) {

                    let imgObj = document.querySelector("img.book");
                    imgObj.addEventListener('load', function () {
                        document.querySelector(".lds-ellipsis").style.display = 'none';
                    }, false);

                    if (fixedI % 4 != 0) {
                        el.innerHTML += '<div class="col-md-12 col-sm-12 hidden-xs shelf"></div>';
                    }
                }

            });
        }

        window.addEventListener('beforeunload', function (event) {
            document.querySelector(".lds-ellipsis").style.display = 'block';
            document.querySelector("#revistas").style.display = 'none';
        });

    </script>

 </body>

 </html>
	<!DOCTYPE html>
	<html>

	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<title>Informativo Online: NOME DO SEU ESCRITÓRIO</title>
	<base target="_self">
	<meta name="google" value="notranslate">
	<link rel="shortcut icon" href="/images/cp_ico.png">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
	<link href="https://fonts.googleapis.com/css?family=Pragati+Narrow" rel="stylesheet">
	<style type="text/css">
	body {
	background-color: #fff;
	}

	.holder {
	font-family: 'Pragati Narrow', sans-serif;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-top: 3em;
	}

	.row {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	flex-wrap: wrap;
	}

	.row>[class*='col-'] {
	display: flex;
	flex-direction: column;
	}

	.titulo {
	margin: 1.2em auto;
	padding: 2px 0.5em;
	display: block;
	text-align: center;
	color: #eee;
	size: 1rem;
	margin-bottom: -38px
	}

	.titulo:hover {
	color: #aaa;
	}

	@media (min-width: 1200px) {

	.book {
	width: 70%;
	}

	}


	@media (max-width: 767px) {
	.titulo {
	margin-bottom: 0px;
	margin: 2.5em 0;
	color: #333;
	}

	.book {
	width: 15em;
	}

	a:before {
	display: none !important;
	}
	}


	.book {
	padding: 0 0 0 0;
	margin: auto;
	transform: perspective(500px) rotateY(-22deg) translateZ(20px) scale(1);
	-webkit-backface-visibility: hidden;
	outline: 1px solid transparent;
	border: 1px solid #aaa;
	width: 70%;
	}

	.book:hover {
	transform: perspective(500px) rotateY(0deg) translateZ(20px) scale(1.15);
	transition: all 0.3s ease-in-out;
	-webkit-backface-visibility: hidden;
	outline: 1px solid transparent;
	}



	.shelf {
	border-bottom: 30px solid #B19886;
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;
	top: -15px;
	z-index: -10;
	margin-bottom: 1.5em;
	}

	.shelf:after {
	content: '';
	background: #855E42;
	height: 20px;
	width: calc(100% + 40px);
	/IE9+/
	position: absolute;
	top: 30px;
	left: 0;
	right: 0;
	z-index: 1;
	margin: 0 -20px;
	}


	.lds-ellipsis {
	display: block;
	position: relative;
	width: 64px;
	height: 64px;
	margin: auto
	}

	.lds-ellipsis div {
	position: absolute;
	top: 27px;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: #cef;
	animation-timing-function: cubic-bezier(0, 1, 1, 0);
	}

	.lds-ellipsis div:nth-child(1) {
	left: 6px;
	animation: lds-ellipsis1 0.6s infinite;
	}

	.lds-ellipsis div:nth-child(2) {
	left: 6px;
	animation: lds-ellipsis2 0.6s infinite;
	}

	.lds-ellipsis div:nth-child(3) {
	left: 26px;
	animation: lds-ellipsis2 0.6s infinite;
	}

	.lds-ellipsis div:nth-child(4) {
	left: 45px;
	animation: lds-ellipsis3 0.6s infinite;
	}

	@keyframes lds-ellipsis1 {
	0% {
	transform: scale(0);
	}
	100% {
	transform: scale(1);
	}
	}

	@keyframes lds-ellipsis3 {
	0% {
	transform: scale(1);
	}
	100% {
	transform: scale(0);
	}
	}

	@keyframes lds-ellipsis2 {
	0% {
	transform: translate(0, 0);
	}
	100% {
	transform: translate(19px, 0);
	}
	}
	</style>

	</head>

	<body>
	<div class="text-center lds-ellipsis">
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	</div>
	<div class="container holder">
	<div id="revistas" class="row">
	</div>
	</div>

	<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
	<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

	<script type="text/javascript">
	let req = new XMLHttpRequest();

	/***
	*
	SUE CODIGO DE CLIENTE VAI AQUI
	*
	***/
	let publicServiceKey = 'SEUCODIGODECLIENTE';

	req.open('GET', 'https://www.businessinformativos.com.br/Services/Informativos/json?auth=' + publicServiceKey, true);
	req.onload = function () {
	if (req.status >= 200 && req.status < 400) {
	let jsonRev = JSON.parse(req.responseText);
	renderInfos(jsonRev);
	} else {
	alert('Erro ao carregar os informativos');
	}
	}
	req.send();

	function renderInfos(infos) {
	infos.infos.forEach(function (info, i) {
	let el = document.querySelector('#revistas');
	el.innerHTML += '<div class="col-xs-6 col-sm-3 col-md-3 col-lg-3">' +
	' <a target="_blank" href="' + info.hlink + '">' +
	' <img src="' + info.mini + '" class="img-responsive book"></a>' +
	' <a class="titulo" href="' + info.hlink + '">' + info.titulo + '</a>' +
	'</div>';

	let fixedI = i + 1;
	if (fixedI % 4 == 0) {
	el.innerHTML += '<div class="col-md-12 col-sm-12 hidden-xs shelf"></div>';
	}

	if (fixedI == infos.infos.length) {

	let imgObj = document.querySelector("img.book");
	imgObj.addEventListener('load', function () {
	document.querySelector(".lds-ellipsis").style.display = 'none';
	}, false);

	if (fixedI % 4 != 0) {
	el.innerHTML += '<div class="col-md-12 col-sm-12 hidden-xs shelf"></div>';
	}
	}

	});
	}

	window.addEventListener('beforeunload', function (event) {
	document.querySelector(".lds-ellipsis").style.display = 'block';
	document.querySelector("#revistas").style.display = 'none';
	});

	</script>

	</body>

	</html>
No results found