diff options
1 files changed, 122 insertions, 0 deletions
| -rw-r--r-- | tools/resizer/index.html | 122 |
diff --git a/tools/resizer/index.html b/tools/resizer/index.html new file mode 100644 index 0000000..7c38b6e --- /dev/null +++ b/tools/resizer/index.html @@ -0,0 +1,122 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8" /> + <meta name="robots" content="index, follow" /> + <meta name="viewport" content="width=device-width, initial-scale=1.0" /> + <meta http-equiv="X-UA-Compatible" content="IE=edge"> + <meta name="author" content="https://github.com/picturepan2/spectre" /> + <title>Spectre.css Responsive Resizer</title> + <link rel="stylesheet" href="../../dist/spectre.min.css" /> + <link rel="stylesheet" href="../../demo/font/style.css" /> + <link rel="stylesheet" href="assets/css/app.css" /> + <script src="assets/js/jquery-2.2.3.min.js"></script> + <script> + $(document).ready(function() { + var target = $('#viewport'); + var width = $('#device').width(); + var addressClean = ''; + var addressRaw = ''; + + $('.option-default').text('Current - ' + width).val(width); + checksize(width); + load('https://picturepan2.github.io/spectre'); + + $('#superbar').submit(function() { + load( $('#address').val() ); + return false; + }); + + $('#address').focus(function() { + $(this).val(addressRaw); + }); + $('#address').blur(function() { + $(this).val(addressClean); + }); + + $('#refresh').click(function() { + target.attr('src', target.attr('src')); + }); + + $('#sizes').change(function() { + var newWidth = $('#sizes option:selected').val(); + $('#device').width(newWidth); + checksize(newWidth); + }); + + function load( url ) { + if (url.search(/^http[s]?\:\/\//) == -1) { + url = 'http://' + url; + } + target.attr('src', url); + addressRaw = url; + addressClean = url.replace('http://', '').replace('https://', ''); + + $('#address').val(addressClean).blur(); + } + function checksize( width ) { + if ( width <= 600 ) { + $('#device').removeClass('desktop').addClass('mobile'); + } else { + $('#device').removeClass('mobile').addClass('desktop'); + } + } + }); + </script> +</head> +<body class="app-container"> + <section id="device" class="device"> + <div class="browser shadow"> + <header class="browser-header navbar"> + <div class="navbar-section navbar-section-btns"> + <div class="browser-action red"></div> + <div class="browser-action yellow"></div> + <div class="browser-action green"></div> + </div> + <div class="navbar-section"> + <form id="superbar" class="rel" method="post" autocomplete="off"> + <input id="address" class="form-input" type="text" placeholder="enter website address" /> + <button id="refresh" class="btn btn-link btn-refresh btn-action abs"> + <i class="icon icon-refresh"></i> + </button> + <input type="submit" class="hide" value="go"> + </form> + </div> + <div class="navbar-section text-right"> + <div class="meta"> + <select id="sizes" class="form-select"> + <option class="option-default">loading</option> + <option value="1440">Desktop - 1440</option> + <option value="1280">Desktop - 1280</option> + <option value="1024">Desktop - 1024</option> + <option value="960">Desktop - 960</option> + <option value="840">Tablet - 840</option> + <option value="720">Tablet - 720</option> + <option value="600">Tablet - 600</option> + <option value="480">Mobile - 480</option> + <option value="400">Mobile - 400</option> + <option value="360">Mobile - 360</option> + </select> + </div> + </div> + </header> + <div class="browser-body"> + <iframe id="viewport" width="100%" height="100%" frameborder="0" scrolling="auto" allowtrancparency="true"></iframe> + </div> + <footer class="browser-footer"></footer> + </div> + </section> + <section class="copyright"> + <h1>Responsive Resizer v0.1.2</h1> + </section> + <script> + (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ + (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), + m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) + })(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); + + ga('create', 'UA-2702768-8', 'auto'); + ga('send', 'pageview'); + </script> +</body> +</html> |