mirror of
https://github.com/BorysLevytskyi/BitwiseCmd.git
synced 2025-12-23 05:02:48 +01:00
Moving BitwsieCmd to react as primary release
This commit is contained in:
boryslevytskyi
@@ -1,6 +1,7 @@
|
|||||||
(function() {
|
(function() {
|
||||||
|
|
||||||
if(window.location.host != 'bitwisecmd.com' || window.location.hash.indexOf('-notrack') > -1) {
|
if(window.location.host != 'bitwisecmd.com' || window.location.hash.indexOf('-notrack') > -1) {
|
||||||
|
console.log("Analytics not tracked")
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
1
bundle.js.map
Normal file
1
bundle.js.map
Normal file
File diff suppressed because one or more lines are too long
111
css/styles.css
111
css/styles.css
@@ -1 +1,110 @@
|
|||||||
.help ul,.top-links{list-style-type:none}body{font-family:Verdana;font-size:.8em;margin:0;padding:20px 100px 0}.expression,.indicator,.mono{font-family:monospace}code{font-size:1.2em;font-weight:700}.social-container{position:fixed;bottom:10px;right:10px}.top-links{position:absolute;right:10px;top:10px;margin:0}.top-links li{float:left}.top-links a{display:inline-block;padding:10px 15px}.top-links .icon{margin-right:5px}.mono{font-size:1.3em}.expressionInput{width:500px;padding:3px;border:1px solid #d3d3d3}.result{margin:10px 10px 30px}.result .input{margin-bottom:10px}.result .content{padding-left:10px}.result .cur{margin-right:5px}.hashLink{text-decoration:none;margin-left:5px;visibility:hidden}.hashLink:hover{text-decoration:underline;margin-left:5px}.input:hover .hashLink{visibility:visible}.expression .label{font-weight:700;padding-right:5px;text-align:right}.expression .bin{letter-spacing:3px}.expression .byte{margin:0 3px}.expression .flipable{cursor:pointer;opacity:1}.expression .flipable:hover{opacity:.8}.expression-result td{border-top:dotted 1px gray}.expression{font-size:1.5em}.expression .prefix{font-weight:400;display:none;font-size:.9em}.expression .other{font-size:.9em}.expression .sign{text-align:right}.hex .prefix{display:inline}.help{padding:10px}.help ul{margin:0;padding:0}.help p{margin-top:0}.indicator{padding:2px 5px;font-size:1.3em;background:0 0;border:none;cursor:pointer}.error{color:maroon}#view{padding:10px}.cur{color:#d3d3d3}.icon{width:16px;height:16px;display:inline-block}.light .twitter{background:url(../img/twitter-light.png)}.dark .twitter{background:url(../img/twitter-dark.png)}.light .feedback{background:url(../img/feedback-light.png)}.dark .feedback{background:url(../img/feedback-dark.png)}.dark .github{background:url(../img/github-dark.png)}.light .github{background:url(../img/github-light.png)}.light{background:#fafafa}.light a,.light a:visited{color:#222}.light .one{color:#000}.light .zero{color:#888}.light .indicator{color:#ddd}.light .on{color:#121212}.light .prefix{color:#888}.light .other{color:#bbb}.light .hashLink,.light .hashLink:visited{color:#ddd}.light .hashLink:hover{color:#888}.light ul.top-links li:hover{background:#ddd}.dark,.dark .expressionInput{background:#121212;color:#fff}.dark a,.dark a:visited{color:#fff}.dark .indicator{color:#555}.dark .on{color:#fff}.dark .prefix,.dark .zero{color:#999}.dark .other{color:#444}.dark .hashLink,.dark .hashLink:visited{color:#333}.dark .hashLink:hover{color:#999}.dark ul.top-links li:hover{background:#333}@media (max-width:800px){.top-links .link-text{display:none}}@media (max-width:700px){body{padding:10px}.expressionInput{width:500px}}@media (max-width:500px){.expressionInput{width:350px}.top-links a{display:inline-block;padding:5px 10px}}@media (max-width:350px){.expressionInput{width:200px}}
|
body { padding:0; margin:0; height: 100%; overflow: hidden; }
|
||||||
|
html { height: 100% }
|
||||||
|
|
||||||
|
.app-root { font-family: Verdana; font-size: 0.8em; margin: 0; padding: 20px 100px 0 100px; height: 100%; overflow: auto; }
|
||||||
|
code { font-size: 1.2em; font-weight: bold; }
|
||||||
|
|
||||||
|
.top-links { position: absolute; right: 10px; top: 10px; list-style-type: none; margin: 0 }
|
||||||
|
.top-links li { float: left; }
|
||||||
|
.top-links a { display: inline-block; padding: 10px 15px}
|
||||||
|
.top-links .icon { margin-right: 5px; }
|
||||||
|
|
||||||
|
.mono { font-family: monospace; font-size: 1.3em }
|
||||||
|
.expressionInput { width: 500px; padding: 3px; border: solid 1px lightgray; }
|
||||||
|
|
||||||
|
.result { margin: 10px 10px 30px; }
|
||||||
|
.result .input { margin-bottom: 10px; }
|
||||||
|
.result .content { padding-left: 10px}
|
||||||
|
.result .cur { margin-right: 5px; }
|
||||||
|
|
||||||
|
.hashLink { text-decoration: none; margin-left: 5px; visibility: hidden }
|
||||||
|
.hashLink:hover { text-decoration: underline; margin-left: 5px; }
|
||||||
|
.input:hover .hashLink { visibility: visible }
|
||||||
|
|
||||||
|
.expression .label { font-weight: bold; padding-right: 5px; text-align: right; }
|
||||||
|
.expression .bin { letter-spacing: 3px; }
|
||||||
|
.expression .flipable { cursor: pointer; opacity: 1 }
|
||||||
|
.expression .flipable:hover { opacity: 0.8 }
|
||||||
|
.expression .byte { margin: 0 3px; }
|
||||||
|
.expression .flipable { cursor: pointer; opacity: 1 }
|
||||||
|
.expression .flipable:hover { opacity: 0.8 }
|
||||||
|
.expression-result td { border-top: dotted 1px gray; }
|
||||||
|
.expression { font-size: 1.5em; font-family: monospace }
|
||||||
|
.expression .prefix { font-weight: normal; display: none; font-size: 0.9em }
|
||||||
|
.expression .other { font-size: 0.9em}
|
||||||
|
.expression .sign { text-align: right}
|
||||||
|
|
||||||
|
.hex .prefix { display: inline; }
|
||||||
|
|
||||||
|
.help { padding: 10px; }
|
||||||
|
.help ul { list-style-type: none; margin: 0; padding: 0; }
|
||||||
|
.help p { margin-top: 0 }
|
||||||
|
|
||||||
|
.indicator { padding: 2px 5px; font-family: monospace; font-size: 1.3em; background: transparent; border: none; cursor: pointer }
|
||||||
|
.error { color: maroon; }
|
||||||
|
|
||||||
|
#view { padding: 10px}
|
||||||
|
|
||||||
|
.cur { color: lightgray; }
|
||||||
|
|
||||||
|
.icon { width: 16px; height: 16px; display: inline-block; }
|
||||||
|
.light .twitter { background: url('../img/twitter-light.png') }
|
||||||
|
.dark .twitter { background: url('../img/twitter-dark.png') }
|
||||||
|
|
||||||
|
.light .feedback { background: url('../img/feedback-light.png') }
|
||||||
|
.dark .feedback { background: url('../img/feedback-dark.png') }
|
||||||
|
|
||||||
|
.dark .github { background: url('../img/github-dark.png') }
|
||||||
|
.light .github { background: url('../img/github-light.png') }
|
||||||
|
|
||||||
|
/* Light */
|
||||||
|
.light { background: #fafafa; }
|
||||||
|
.light a, .light a:visited { color: #222; }
|
||||||
|
.light .one { color: black; }
|
||||||
|
.light .zero { color: #888; }
|
||||||
|
.light .indicator { color: #ddd; }
|
||||||
|
.light .on { color: #121212; }
|
||||||
|
.light .prefix { color: #888}
|
||||||
|
.light .other { color: #bbb }
|
||||||
|
.light .hashLink, .light .hashLink:visited { color: #ddd }
|
||||||
|
.light .hashLink:hover { color: #888 }
|
||||||
|
.light ul.top-links li:hover { background: #ddd }
|
||||||
|
|
||||||
|
/* Dark */
|
||||||
|
.dark { background: #121212; color: white;}
|
||||||
|
.dark .expression { color: white;}
|
||||||
|
.dark .expressionInput { background: #121212; color: white; }
|
||||||
|
.dark a, .dark a:visited { color: white; }
|
||||||
|
.dark .indicator { color: #555; }
|
||||||
|
.dark .on { color: white; }
|
||||||
|
.dark .zero { color: #999;}
|
||||||
|
.dark .prefix { color: #999}
|
||||||
|
.dark .other { color: #444;}
|
||||||
|
.dark .hashLink, .dark .hashLink:visited { color: #333 }
|
||||||
|
.dark .hashLink:hover { color: #999 }
|
||||||
|
.dark ul.top-links li:hover { background: #333 }
|
||||||
|
.dark .error { color: mediumvioletred}
|
||||||
|
|
||||||
|
/* Top Links Shrink */
|
||||||
|
@media (max-width: 800px) {
|
||||||
|
|
||||||
|
.top-links .link-text { display: none }
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-container{ position:fixed; bottom:10px; right:10px }
|
||||||
|
|
||||||
|
/* Remove margin space on body. Inline top links with header */
|
||||||
|
@media (max-width: 700px) {
|
||||||
|
body { padding: 10px; }
|
||||||
|
.expressionInput { width: 500px; }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Further shrink */
|
||||||
|
@media (max-width: 500px) {
|
||||||
|
.expressionInput { width: 350px; }
|
||||||
|
.top-links a { display: inline-block; padding: 5px 10px}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 350px) {
|
||||||
|
.expressionInput { width: 200px; }
|
||||||
|
}
|
||||||
|
|||||||
Binary file not shown.
|
Before Width: | Height: | Size: 5.3 KiB After Width: | Height: | Size: 6.4 KiB |
208
index.html
208
index.html
@@ -1,175 +1,35 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE>
|
||||||
<html>
|
<html>
|
||||||
<head lang="en">
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="description" content="Free Text Online Bitwise Calculator">
|
<meta name="description" content="Free Text Online Bitwise Calculator">
|
||||||
|
|
||||||
<title>BitwiseCmd</title>
|
<title>BitwiseCmd</title>
|
||||||
<link rel="shortcut icon" href="http://bitwisecmd.com/favicon.ico">
|
<link rel="shortcut icon" href="http://bitwisecmd.com/favicon.ico">
|
||||||
|
<link rel="stylesheet" type="text/css" href="css/styles.css" />
|
||||||
<meta property="og:url" content="http://bitwisecmd.com" />
|
|
||||||
<meta property="og:type" content="website" />
|
<meta property="og:url" content="http://bitwisecmd.com" />
|
||||||
<meta property="og:title" content="BitwiseCmd" />
|
<meta property="og:type" content="website" />
|
||||||
<meta property="og:description" content="Free Text Online Bitwise Calculator" />
|
<meta property="og:title" content="BitwiseCmd" />
|
||||||
<meta property="og:image" content="http://bitwisecmd.com/img/social-avatar.png" />
|
<meta property="og:description" content="Free Text Online Bitwise Calculator" />
|
||||||
|
<meta property="og:image" content="http://bitwisecmd.com/img/social-avatar.png" />
|
||||||
<script src="js/bitwisecmd.js"></script>
|
</head>
|
||||||
|
<body>
|
||||||
<link rel="stylesheet" type="text/css" href="css/styles.css" />
|
<div id="root">Ooops... Something went wrong ¯\_(ツ)_/¯</div>
|
||||||
</head>
|
<script src="bundle.js"></script>
|
||||||
<body id="rootView" class="dark">
|
<script src="analytics.js"></script>
|
||||||
|
|
||||||
<header>
|
<div id="fb-root"></div>
|
||||||
<div class="header">
|
<script>(function(d, s, id) {
|
||||||
<h1>Bitwise<span style="color: #c5c5c5;">Cmd</span> <span>
|
var js, fjs = d.getElementsByTagName(s)[0];
|
||||||
|
if (d.getElementById(id)) return;
|
||||||
</span></h1>
|
js = d.createElement(s); js.id = id;
|
||||||
|
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.5";
|
||||||
<ul class="top-links">
|
fjs.parentNode.insertBefore(js, fjs);
|
||||||
<li>
|
}(document, 'script', 'facebook-jssdk'));</script>
|
||||||
<a href="https://github.com/BorisLevitskiy/BitwiseCmd"><i class="icon github"> </i><span class="link-text">Project on GitHub</span></a>
|
|
||||||
</li>
|
<div class="social-container">
|
||||||
<li>
|
<div class="fb-like" data-href="http://bitwisecmd.com" data-layout="box_count" data-action="like" data-show-faces="false" data-share="true"></div>
|
||||||
<a href="https://twitter.com/BitwiseCmd"><i class="icon twitter"> </i><span class="link-text">Twitter</span></a>
|
</div>
|
||||||
</li>
|
</body>
|
||||||
<li>
|
|
||||||
<a href="mailto:bitwisecmd@gmail.com?subject=Feedback"><i class="icon feedback"> </i><span class="link-text">Send Feedback</span></a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="expressionInput-container">
|
|
||||||
<input id="in" type="text" class="expressionInput mono" data-controller="expressionInputCtrl" placeholder="type expression like '1>>2' or 'help' "/>
|
|
||||||
|
|
||||||
<span data-controller="configPanelCtrl" class="configPnl">
|
|
||||||
<span id="emphasizeBytes" data-cmd="em" class="indicator on" title="Emphasize Bytes">[em]</span>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<div id="output" data-controller="cmdController">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script data-template="helpResultTpl" type="text/template">
|
|
||||||
<div class="help helpResultTpl">
|
|
||||||
<div style="overflow: hidden">
|
|
||||||
<div style="float: left; margin-right: 20px">
|
|
||||||
<p class="section">
|
|
||||||
<strong>Supported Commands</strong>
|
|
||||||
<ul>
|
|
||||||
<li><code>23 ^ 34</code> — type bitwise expression to see result in binary (only positive integers are supported now)</li>
|
|
||||||
<li><code>23 34</code> — type one or more numbers to see their binary representations</li>
|
|
||||||
<li><code>clear</code> — clear output pane</li>
|
|
||||||
<li><code>help</code> — display this help</li>
|
|
||||||
<li><code>em</code> — turn On/Off Emphasize Bytes</li>
|
|
||||||
<li><code>dark</code> — set Dark theme</li>
|
|
||||||
<li><code>light</code> — set Light theme</li>
|
|
||||||
<li><code>about</code> — about the app</li>
|
|
||||||
</ul>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="float:left">
|
|
||||||
<p class="section">
|
|
||||||
<strong>Supported Bitwise Operations</strong><br/>
|
|
||||||
<small>
|
|
||||||
<a href="https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators">
|
|
||||||
as implemented in JavaScript engine
|
|
||||||
</a>
|
|
||||||
</small>
|
|
||||||
<ul>
|
|
||||||
<li><code>&</code> — bitwise AND</li>
|
|
||||||
<li><code>|</code> — bitwise inclusive OR</li>
|
|
||||||
<li><code>^</code> — bitwise exclusive XOR</li>
|
|
||||||
<li><code>~</code> — bitwise NOT</li>
|
|
||||||
<li><code><<</code> — left shift</li>
|
|
||||||
<li><code>>></code> — sign propagating right shift</li>
|
|
||||||
<li><code>>>></code> — zero-fill right shift</li>
|
|
||||||
|
|
||||||
</ul>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<p style="font-style: italic">
|
|
||||||
<strong>Tip:</strong> Use Up and Down keys to navigate trough executed commands.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<script data-template="aboutTpl" type="text/template">
|
|
||||||
<div class="aboutTpl">
|
|
||||||
<p> Created by <a href="http://boryslevytskyi.github.io/">Borys Levytskyi</a>. Please give it a like if BitwiseCmd has helped you in your work.</p>
|
|
||||||
<p>If you have an idea, suggestion or you've spotted a bug here, please send it to <a href="mailto:bitwisecmd@gmail.com?subject=Feedback">bitwisecmd@gmail.com</a> or tweet on <a href="http://twitter.com/BitwiseCmd">@BitwiseCmd</a>. Your feedback is greatly appreciated.</p>
|
|
||||||
<p><a href="https://github.com/BorisLevitskiy/BitwiseCmd">Project on <strong>GitHub</strong></a></p>
|
|
||||||
</div>
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<script data-template="resultView" data-compiled="" type="text/template">
|
|
||||||
<div class="result">
|
|
||||||
<div class="input mono"><span class="cur">></span>{m.input}<a class="hashLink" title="Link for this expression" href="{window.location.pathname}#{m.inputHash}">#</a></div>
|
|
||||||
<div class="content"></div>
|
|
||||||
</div>
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<script data-template="bitwiseExpressionView" data-compiled="" type="text/template">
|
|
||||||
<table class="expression" cellspacing="0">
|
|
||||||
{each itm in m.items}
|
|
||||||
<tr class="{itm.css}">
|
|
||||||
<td class="sign">{itm.sign}</td>
|
|
||||||
<td class="label">{itm.label}</td>
|
|
||||||
<td class="bin">{itm.bin.padLeft(m.maxNumberOfBits, '0')}</td>
|
|
||||||
<td class="other">{itm.other}</td>
|
|
||||||
</tr>
|
|
||||||
{/}
|
|
||||||
</table>
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<script data-template="numbersList" data-compiled="" type="text/template">
|
|
||||||
<table class="expression" cellspacing="0">
|
|
||||||
{each op in m.operands}
|
|
||||||
<tr data-kind="{op.kind}">
|
|
||||||
<td class="label">{op.input}</td>
|
|
||||||
<td class="bin">{op.bin.padLeft(m.bitsSize, '0')}</td>
|
|
||||||
<td class="other">{op.other}</td>
|
|
||||||
</tr>
|
|
||||||
{/}
|
|
||||||
</table>
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<script type="text/javascript">
|
|
||||||
|
|
||||||
var app = window.app;
|
|
||||||
app.bootstrap(document.getElementById('rootView'));
|
|
||||||
|
|
||||||
var cmd = app.get('cmd');
|
|
||||||
var hashArgs = app.get('hashArgs');
|
|
||||||
|
|
||||||
if(hashArgs.commands.length > 0) {
|
|
||||||
hashArgs.commands.forEach(cmd.execute.bind(cmd));
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
cmd.execute('help');
|
|
||||||
cmd.execute('1|2&6');
|
|
||||||
cmd.execute('1<<0x2a');
|
|
||||||
cmd.execute('2 4 8 16 32');
|
|
||||||
}
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<script src="js/analytics.js"></script>
|
|
||||||
|
|
||||||
<div id="fb-root"></div>
|
|
||||||
<script>(function(d, s, id) {
|
|
||||||
var js, fjs = d.getElementsByTagName(s)[0];
|
|
||||||
if (d.getElementById(id)) return;
|
|
||||||
js = d.createElement(s); js.id = id;
|
|
||||||
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.5";
|
|
||||||
fjs.parentNode.insertBefore(js, fjs);
|
|
||||||
}(document, 'script', 'facebook-jssdk'));</script>
|
|
||||||
|
|
||||||
<div class="social-container">
|
|
||||||
<div class="fb-like" data-href="http://bitwisecmd.com" data-layout="box_count" data-action="like" data-show-faces="false" data-share="true"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
</html>
|
||||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user