{% extends base %}

{% block body %}

<!-- <script type="text/javascript" src="/static/lib/html2canvas.min.js"></script>
 -->
<div class="col-md-12 card">
    <input id="url" style="width: 300px;">
    <select id="size">
        <option value="320x568">320x568</option>
        <option value="360x640">360x640</option>
        <option value="640x360">640x360</option>
        <option value="375x667">375x667</option>
        <option value="1366x768">1366x768</option>
    </select>
    <button id="renderBtn">展示</button>
</div>

<div class="card">
    <iframe id="frame" style="width: 100%; height: 100%; border: 1px solid #ccc;"></iframe>
</div>

<div id="screenshot"></div>

<script type="text/javascript">
$("#renderBtn").on("click", function () {
    var size = $("#size").val();
    var arr = size.split("x");
    var width = arr[0];
    var height = arr[1];
    $("#frame").css({width: width+"px", height: height+"px"});
    $("#frame").attr("src", $("#url").val());
})
</script>

{% end %}