tpl/sponsors.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>${sponsors} - ${software_name_}</title>
    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon" />
    <link rel="icon" href="../favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="../style/base.css">
    <style>
        .sponsor_tips
        {
            padding: 8px;
        }
        .sponsor_buttons
        {
            height: 32px;
            padding: 8px 0 8px 0;
        }
    </style>
    ${@import tpl/tpl_analysis.html}
</head>
<body>

<div class="central">
    ${@import tpl/tpl_nav_root.html}
    ${@import tpl/tpl_header.html}

    <div class="body">

        <div style="padding: 4px">
            <div class="sponsor_buttons">
                <div class="tips_" style="display: inline-block;float: left;margin: 0">${filecxx_sponsor_list_tips_}</div>
                <div class="buttons_" style="float: right">
                    <a class="button" style="cursor: pointer" href="https://w.filecxx.com" target="_blank" ref="nofollow">${join}</a>
                </div>
            </div>

            <table class="grid" style="width: 100%">
                <thead>
                <tr>
                    <td style="width: 128px;">${sponsor_logo}</td>
                    <td>${ad}</td>
                    <td style="width: 120px">${name}</td>
                    <td style="width: 120px">${payment_balance_} (USD)</td>
                </tr>
                </thead>
                <tbody id="sponsors_tbody">

                </tbody>
            </table>
        </div>

        <div class="section"></div>
        <div class="section sponsor_tips">
            <h2>[${sponsors} / ${contributors}] ${privileges}:</h2>
            <div>
                <p>${sponsor_privilege1}</p>
                <p>${sponsor_privilege2}</p>
                <p>${sponsor_privilege3}</p>
                <p>${sponsor_privilege4}</p>
                <p>${sponsor_privilege5}</p>
                <p>${sponsor_privilege6}</p>
                <p>...</p>
            </div>
        </div>
    </div>

    ${@import tpl/tpl_footer.html}
</div>

<script>
    load_sponsors = function(list)
    {
        if(!(list instanceof Array)){
            return;
        }
        var tbody = document.getElementById("sponsors_tbody");

        for(var i=0;i<list.length;++i)
        {
            var row     = list[i];
            var tr      = document.createElement("tr");
            var name    = document.createElement("td");
            var logo    = document.createElement("td");
            var text    = document.createElement("td");
            var balance = document.createElement("td");

            logo.innerHTML    = "<img src='http://w.filecxx.com/tpl/"+row.logo+"' style='max-height: 150px;max-width: 250px'>";
            text.innerText    = row.text;
            name.innerText    = row.name;
            balance.innerHTML = row.balance;

            tr.appendChild(logo);
            tr.appendChild(text);
            tr.appendChild(name);
            tr.appendChild(balance);

            tbody.appendChild(tr);
        }
    }
</script>
<script src="https://w.filecxx.com/action.php?act=sponsors&callback=load_sponsors"></script>
<script src="../script/base.js"></script>
</body>
</html>