index3.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>get.jloads</title>
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
    <link rel="icon" href="/favicon.ico" type="image/x-icon">
<!--    <script src="//get.wapka.pl/js.php?1"></script>-->
<!--    <script src="//get.wapka.pl/js/1"></script>-->
<!--    <script src="//get.wapka.pl/1.js"></script>-->
    <script src="//get.wapka.pl/2.pack.js"></script>


    <style>
        /* GLOBAL */
        img {
            max-width: 100%;
            max-height: 100%;
            display: block; /* remove extra space below image */
        }

        body {
            /*background-color: #fb7e14;*/
            /*color: #fffc60;*/
            font-family: Tahoma;
        }

        .container > .content,
        .container > .footer {
            margin: auto auto;
            width: 100%;
            max-width: 500px;
        }

        .for_image {
            margin: 20px auto;
        }

        .for_image img {
            /*width: 450px;*/
            height: 450px;
            display: block;
            margin-left: auto;
            margin-right: auto;
            /*width: 50%;*/
        }
    </style>

</head>
<body>

<div class="container">

    <div class="content">
        <button onclick="loadPinkCss()" class="pink">Load Pink</button>
        <button onclick="loadBlackCss()">Load Black</button>

        <div class="for_image">...</div>
        <div id="image">image</div>
    </div>

    <div class="footer">
        <h5>
            local: <a href="http://localhost:8080/" rel="nofollow">localhost:8080/</a>
            | production: <a href="https://get.jloads.com/" rel="nofollow">get.jloads.com</a>
            | supported by: <a href="https://softreck.com/" rel="nofollow">softreck.com</a>
            | <a href="https://docs.jloads.com" rel="nofollow">docs</a>
        </h5>
    </div>
</div>


<script>


    function loadPinkCss() {
        loadAll({
            "head" : [
                "demo/css/pink.css"
            ],
            "#image" : [
                "https://logo.jloads.com/4/cover.png"
            ]
        })
    }

    function loadBlackCss() {
        loadAll({
            "head" : [
                "demo/css/black.css"
            ],
            "#image" : [
                "https://logo.jloads.com/6/cover.png"
            ]
        })
    }
</script>


</body>
</html>