|
| 1 | +<html> |
| 2 | +<head> |
| 3 | + <title>Preview of embedded mobile tracker</title> |
| 4 | + <link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'> |
| 5 | + <style> |
| 6 | + html, body { |
| 7 | + border: 0; |
| 8 | + padding: 0; |
| 9 | + margin: 0; |
| 10 | + height: 100%; |
| 11 | + width: 100%; |
| 12 | + } |
| 13 | + fieldset { |
| 14 | + border:0; |
| 15 | + margin:0; |
| 16 | + padding:0; |
| 17 | + padding-left: 15px; |
| 18 | + } |
| 19 | + body { |
| 20 | + font-family: "Roboto", Helvetica, Arial, sans-serif; |
| 21 | + } |
| 22 | + |
| 23 | + h1 { |
| 24 | + text-align: center; |
| 25 | + font-size: 24px; |
| 26 | + margin-top: 10px; |
| 27 | + margin-bottom: 20px; |
| 28 | + } |
| 29 | + |
| 30 | + h2 { |
| 31 | + border-bottom: 1px solid #00A3D3; |
| 32 | + font-size: 18px; |
| 33 | + margin-bottom: 15px; |
| 34 | + margin-top: 15px; |
| 35 | + padding-left: 5px; |
| 36 | + } |
| 37 | + |
| 38 | + |
| 39 | + #box { |
| 40 | + width: 400px; |
| 41 | + position: absolute; |
| 42 | + left: 50%; |
| 43 | + margin-left: -250px; |
| 44 | + } |
| 45 | + |
| 46 | + #iframe-box { |
| 47 | + position: absolute; |
| 48 | + left: 50%; |
| 49 | + margin-left: -200px; |
| 50 | + } |
| 51 | + |
| 52 | + iframe { |
| 53 | + margin-bottom: 50px; |
| 54 | + } |
| 55 | + |
| 56 | + textarea { |
| 57 | + width: 100%; |
| 58 | + height: 100px; |
| 59 | + } |
| 60 | + </style> |
| 61 | + <script type="text/javascript" language="javascript" src="js/jquery-1.8.3-min.js"></script> |
| 62 | + <script> |
| 63 | + |
| 64 | +var updateCode = function() { |
| 65 | + var prefix = window.location.href.replace("embed-preview.html",""); |
| 66 | + |
| 67 | + $("textarea").html($("#iframe-box").html().trim().replace("index.html?",prefix+"index.html?")); |
| 68 | +} |
| 69 | + |
| 70 | + |
| 71 | +$(window).ready(function() { |
| 72 | + $("#opt_border,#opt_corners").prop("checked",true); |
| 73 | + $("#opt_w,#opt_h").val(400); |
| 74 | + |
| 75 | + // preview update methods |
| 76 | + |
| 77 | + $("#opt_border").on('change', function() { |
| 78 | + var elm = $("#opt_border"); |
| 79 | + |
| 80 | + if(elm.prop("checked")) { |
| 81 | + $("iframe").css({"border":"1px solid #00A3D3"}); |
| 82 | + elm.prop("checked", true); |
| 83 | + } else { |
| 84 | + $("iframe").css({"border":0}); |
| 85 | + elm.prop("checked", false); |
| 86 | + } |
| 87 | + |
| 88 | + updateCode(); |
| 89 | + }); |
| 90 | + $("#opt_corners").on('change', function() { |
| 91 | + var elm = $("#opt_corners"); |
| 92 | + |
| 93 | + if(elm.prop("checked")) { |
| 94 | + $("iframe").css({"border-radius":"25px"}); |
| 95 | + elm.prop("checked", true); |
| 96 | + } else { |
| 97 | + $("iframe").css({"border-radius":0}); |
| 98 | + elm.prop("checked", false); |
| 99 | + } |
| 100 | + |
| 101 | + updateCode(); |
| 102 | + }); |
| 103 | + |
| 104 | + $("#opt_h").on('keyup', function() { |
| 105 | + var elm = $(this); |
| 106 | + $("iframe").prop("height", ""+elm.val()+"px"); |
| 107 | + updateCode(); |
| 108 | + }); |
| 109 | + $("#opt_w").on('keyup', function() { |
| 110 | + var elm = $(this); |
| 111 | + var v = elm.val(); |
| 112 | + |
| 113 | + $("iframe").prop("width", ""+v+"px"); |
| 114 | + $("#iframe-box").css({"margin-left":"-"+(v/2)}); |
| 115 | + |
| 116 | + updateCode(); |
| 117 | + }); |
| 118 | + |
| 119 | + // autoselect all text on focusing textarea |
| 120 | + |
| 121 | + $("textarea").on("click", function() { |
| 122 | + this.select(); |
| 123 | + }); |
| 124 | + |
| 125 | + // init complete, refresh the text box |
| 126 | + updateCode(); |
| 127 | +}); |
| 128 | + </script> |
| 129 | +</head> |
| 130 | +<body> |
| 131 | + <div id="box"> |
| 132 | + <h1>Embed mobile tracker on your page</h1> |
| 133 | + <h2>1. Options</h1> |
| 134 | + <fieldset> |
| 135 | + <input type="checkbox" value="1" id="opt_graph" /> |
| 136 | + <label for="opt_graph">Enable telemetry graph</label> |
| 137 | + <input type="checkbox" value="1" id="opt_graph_open" /> |
| 138 | + <label for="opt_graph_open">Start telemetry graph expanded</label> |
| 139 | + </fieldset> |
| 140 | + <h2>2. Style</h1> |
| 141 | + <fieldset> |
| 142 | + <label for="opt_w">Width:</label> |
| 143 | + <input type="text" value="500" id="opt_w" /> |
| 144 | + <input type="checkbox" value="1" id="opt_border" checked="checked" /> |
| 145 | + <label for="opt_border">Border</label> |
| 146 | + <br /> |
| 147 | + <label for="opt_h">Height:</label> |
| 148 | + <input type="text" value="500" id="opt_h" /> |
| 149 | + <input type="checkbox" value="1" id="opt_corners" checked="checked" /> |
| 150 | + <label for="opt_corners">Rounded corners</label> |
| 151 | + </fieldset> |
| 152 | + <h2>3. Code</h1> |
| 153 | + <textarea id="embed-code" readonly="readonly"></textarea> |
| 154 | + |
| 155 | + <h2>4. Preview</h1> |
| 156 | + <div id="iframe-box"> |
| 157 | + <iframe width="400px" height="400px" src="index.html?embed=1&preview" style="border:1px solid #00A3D3;border-radius:25px;"></iframe> |
| 158 | + </div> |
| 159 | + </div> |
| 160 | +</body> |
| 161 | +</html> |
0 commit comments