-
Notifications
You must be signed in to change notification settings - Fork 32
/
index.html
executable file
·120 lines (97 loc) · 7.66 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<!doctype html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>RWD Calculator v0.6 | a thing from alwaystwisted.com</title>
<meta name="description" content="">
<meta name="author" content="Stuart Robson, Always Twisted, [email protected]">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="css/style2.css">
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script type="text/javascript" src="http://use.typekit.com/jkb5lvi.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<script src="js/libs/respond.min.js"></script>
</head>
<body>
<a href="https://github.com/sturobson/Responsive-Calculator"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_green_007200.png" alt="Fork me on GitHub"></a>
<header>
<h1 class="tk.chunk">The Responsive Calculator</h1>
<h2>{ turning pixels into percentages }</h2>
</header>
<section>
<p>Just a simple calculator to help turn your PSD pixel perfection into the start of your responsive website.</p>
</section>
<div class="calc function-pane">
<label id="boxcheckbox" for="boxsizing">Add - * { box-sizing: border-box; } ? </label>
<input type="checkbox" id="boxsizing" lable="boxsizing">
<form id="result">
<label for="selector">element</label>
<input type="text" id="element" label="element" placeholder="body">
<label for="target">target</label>
<input type="number" id="target" label="target" placeholder="980px">
<label for="context">context</label>
<input type="number" id="context" label="context" placeholder="1024px">
<label for="border">border</label>
<input type="text" id="border" label="border" placeholder="10px">
<label for="margin">margin</label>
<input type="text" id="margin" label="margin" placeholder="10px">
<label for="padding">padding</label>
<input type="text" id="padding" label="padding" placeholder="10px">
<input type="submit" id="results">
<input type="submit" id="last" value="Clear Last">
<input type="submit" id="clear" value="Clear All">
</form>
</div>
<div class="calc results-pane">
<div id="code-results">
<div id="boxsizingcss">
<p>* {</p>
<p>-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */</p>
<p>-moz-box-sizing: border-box; /* Firefox, other Gecko */</p>
<p>box-sizing: border-box; /* Opera/IE 8+ */</p>
<p>}</p>
</div>
<div id="coderesults">
</div>
</div>
<footer>
<p>Created with love, tears and help by <a href="http://www.twitter.com/sturobson/">@sturobson</a></p>
<p>This is just an initial release, I'd love for this to do so much more. <a href="mailto:[email protected]">Can you help?</a></p>
<p>Why not take a look at my <a href="http://www.alwaystwisted.com/">blog over on alwaystwisted.com</a>
<h4>Buy Me Haribo</h4>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="encrypted" value="-----BEGIN PKCS7-----MIIHRwYJKoZIhvcNAQcEoIIHODCCBzQCAQExggEwMIIBLAIBADCBlDCBjjELMAkGA1UEBhMCVVMxCzAJBgNVBAgTAkNBMRYwFAYDVQQHEw1Nb3VudGFpbiBWaWV3MRQwEgYDVQQKEwtQYXlQYWwgSW5jLjETMBEGA1UECxQKbGl2ZV9jZXJ0czERMA8GA1UEAxQIbGl2ZV9hcGkxHDAaBgkqhkiG9w0BCQEWDXJlQHBheXBhbC5jb20CAQAwDQYJKoZIhvcNAQEBBQAEgYCa2kBQfzcjXFjvuLb2HeyjMktAXPq/3PQgEhw3cgTfnGz9ChD39gnh3HDyLHARg/q8uo1avS/QehGckb5GBKP7qmHS3AJpRa8iyr9rVVFto1ThYZ8pkaLU7zqDrA5cJkhxIf2x1lx04I6YVMr+MXIvtDMfqdMb1Ec/j+BVtwtKTzELMAkGBSsOAwIaBQAwgcQGCSqGSIb3DQEHATAUBggqhkiG9w0DBwQI/ShUQkkd/1CAgaCdMXORrmahkeUQdujqbCXCo8VznMsW99s64xE8WYZKLB9vYPWnqPQTkRBpZfcJ04lBXL31JwiRdLxDs5Q7lOs6/J9ez2t5+euzM+b2up6kLHW32GGMlYaS6FKxsQrlWFw+udTyTH2ckZkUfTGb/V/HaCmLxIueG8Z2clS0aqkLrGMkanR58nRqsAbV7XJcFLPUJMZNCTPFPDh/N3vaQRproIIDhzCCA4MwggLsoAMCAQICAQAwDQYJKoZIhvcNAQEFBQAwgY4xCzAJBgNVBAYTAlVTMQswCQYDVQQIEwJDQTEWMBQGA1UEBxMNTW91bnRhaW4gVmlldzEUMBIGA1UEChMLUGF5UGFsIEluYy4xEzARBgNVBAsUCmxpdmVfY2VydHMxETAPBgNVBAMUCGxpdmVfYXBpMRwwGgYJKoZIhvcNAQkBFg1yZUBwYXlwYWwuY29tMB4XDTA0MDIxMzEwMTMxNVoXDTM1MDIxMzEwMTMxNVowgY4xCzAJBgNVBAYTAlVTMQswCQYDVQQIEwJDQTEWMBQGA1UEBxMNTW91bnRhaW4gVmlldzEUMBIGA1UEChMLUGF5UGFsIEluYy4xEzARBgNVBAsUCmxpdmVfY2VydHMxETAPBgNVBAMUCGxpdmVfYXBpMRwwGgYJKoZIhvcNAQkBFg1yZUBwYXlwYWwuY29tMIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQDBR07d/ETMS1ycjtkpkvjXZe9k+6CieLuLsPumsJ7QC1odNz3sJiCbs2wC0nLE0uLGaEtXynIgRqIddYCHx88pb5HTXv4SZeuv0Rqq4+axW9PLAAATU8w04qqjaSXgbGLP3NmohqM6bV9kZZwZLR/klDaQGo1u9uDb9lr4Yn+rBQIDAQABo4HuMIHrMB0GA1UdDgQWBBSWn3y7xm8XvVk/UtcKG+wQ1mSUazCBuwYDVR0jBIGzMIGwgBSWn3y7xm8XvVk/UtcKG+wQ1mSUa6GBlKSBkTCBjjELMAkGA1UEBhMCVVMxCzAJBgNVBAgTAkNBMRYwFAYDVQQHEw1Nb3VudGFpbiBWaWV3MRQwEgYDVQQKEwtQYXlQYWwgSW5jLjETMBEGA1UECxQKbGl2ZV9jZXJ0czERMA8GA1UEAxQIbGl2ZV9hcGkxHDAaBgkqhkiG9w0BCQEWDXJlQHBheXBhbC5jb22CAQAwDAYDVR0TBAUwAwEB/zANBgkqhkiG9w0BAQUFAAOBgQCBXzpWmoBa5e9fo6ujionW1hUhPkOBakTr3YCDjbYfvJEiv/2P+IobhOGJr85+XHhN0v4gUkEDI8r2/rNk1m0GA8HKddvTjyGw/XqXa+LSTlDYkqI8OwR8GEYj4efEtcRpRYBxV8KxAW93YDWzFGvruKnnLbDAF6VR5w/cCMn5hzGCAZowggGWAgEBMIGUMIGOMQswCQYDVQQGEwJVUzELMAkGA1UECBMCQ0ExFjAUBgNVBAcTDU1vdW50YWluIFZpZXcxFDASBgNVBAoTC1BheVBhbCBJbmMuMRMwEQYDVQQLFApsaXZlX2NlcnRzMREwDwYDVQQDFAhsaXZlX2FwaTEcMBoGCSqGSIb3DQEJARYNcmVAcGF5cGFsLmNvbQIBADAJBgUrDgMCGgUAoF0wGAYJKoZIhvcNAQkDMQsGCSqGSIb3DQEHATAcBgkqhkiG9w0BCQUxDxcNMTIwNDExMjIwNjU1WjAjBgkqhkiG9w0BCQQxFgQUHcnyQWcENX7iJxe8Lh9Ky6ahwNswDQYJKoZIhvcNAQEBBQAEgYAGiE5nQlEmlJIqDvZ3+rbeeqzQlw6V/ISaFaOdAHbSs2MwJBSMbcb3W/bnm0j3KgwtV3iZujDIJLkQOn0S5WSBHBD6VqOVufeTQqdb8HAhDMiPLdlYunDtXED/sjdmdU0cZtfbFJnQv35kEttueqYbeqsh3b7suqvIGme7uHE42g==-----END PKCS7-----
">
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypalobjects.com/en_GB/i/scr/pixel.gif" width="1" height="1">
</form>
<h4>Share</h4>
<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://www.rwdcalc.com" data-text="Check out @RWDCalc a little responsive web designer development tool - www.rwdcalc.com">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</footer>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.1.min.js"><\/script>')</script>
<!-- scripts concatenated and minified via ant build script-->
<script src="js/plugins.js"></script>
<script src="js/script.js"></script>
<!-- end scripts-->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-30234812-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<!--[if lt IE 7 ]>
<script src="//ajax.googleapis.com/ajax/libs/chrome-frame/1.0.2/CFInstall.min.js"></script>
<script>window.attachEvent("onload",function(){CFInstall.check({mode:"overlay"})})</script>
<![endif]-->
</body>
</html>