Skip to content

Instantly share code, notes, and snippets.

@tungurlakachakcak

tungurlakachakcak/btCfr.markdown

Created June 28, 2014 14:00
Show Gist options
  • Save tungurlakachakcak/96b3434a86a8c2a85934 to your computer and use it in GitHub Desktop.
Save tungurlakachakcak/96b3434a86a8c2a85934 to your computer and use it in GitHub Desktop.
Download ZIP
A Pen by Valeri Hristov.
Raw
index.html
<html>
<head>
<link type="text/css" rel="stylesheet" href="calc.css"/>
<title>Programmer Calculator</title>
</head>
<body>
<div id="main-calc-form">
<span id="calc-icon">Calculator</span>
<div id="min-open-close-nav">
<form>
<input type="button" name="min" id="minimize" value="_"/>
<input type="button" name="open" id="open" value="&#x274f;"/>
<input type="button" name="close" id="close" value="x"/>
</form>
</div>
<div id="menu">
<select>
<option value="" selected disabled style="display:none">
View
</option>
<option value="std">Standard</option>
<option value="sci">Scientific</option>
<option value="stat">Statistics</option>
</select>
<select>
<option value="" selected disabled style="display:none">Edit</option>
<option value="copy">Copy</option>
<option value="">Paste</option>
</select>
<select>
<option value="" selected disabled style="display:none">Help</option>
<option value="viewHelp">View Help</option>
<option value="">About <Calculator></Calculator></option>
</select>
</div>
<div id="functional-part-calc">
<div id="eval">
<form>
<input type="text" name="eval"/>
</form>
</div>
<div id="binarybs">
<section>
<span>0000</span>
<span>63</span>
<span>0000</span>
<span>31</span>
</section>
<section>
<span>0000</span>
<span class="bad">64</span>
<span>0000</span>
<span class="bad">64</span>
</section>
<section>
<span>0000</span>
<span class="bad">64</span>
<span>0000</span>
<span class="bad">64</span>
</section>
<section>
<span>0000</span>
<span class="bad">63</span>
<span>0000</span>
<span class="bad">31</span>
</section>
<section>
<span>0000</span>
<span >63</span>
<span>0000</span>
<span>31</span>
</section>
<section>
<span>0000</span>
<span class="bad">63</span>
<span>0000</span>
<span class="bad">31</span>
</section>
<section>
<span>0000</span>
<span class="bad">63</span>
<span>0000</span>
<span class="bad">31</span>
</section>
<section>
<span>0000</span>
<span>63</span>
<span>0000</span>
<span>31</span>
</section>
</div>
<div id="buttons">
<div id="radios-wrapper">
<div class="radios">
<form>
<input type="radio" name="hex"/>
<label for="hex">Hex</label>
<br />
<input type="radio" name="dec" id="">
<label for="dec">Dec</label>
<br />
<input type="radio" name="oct" id="">
<label for="oct">Oct</label>
<br />
<input type="radio" name="bin" id="">
<label for="bin">Bin</label>
</form>
</div>
<div class="radios">
<form>
<input type="radio" name="qw"/>
<label for="qw">Qword</label>
<br />
<input type="radio" name="dw" id="">
<label for="dw">Dword</label>
<br />
<input type="radio" name="word" id="">
<label for="word">Word</label>
<br />
<input type="radio" name="byte" id="">
<label for="byte">Byte</label>
</form>
</div>
</div>
<div id="main-buttons">
<table>
<tr>
<td><input type="button" value="" class="assy" disabled></td>
<td><input type="button" value="Mod"></td>
<td><input type="button" value="A" class="assy" disabled></td>
<td><input type="button" value="MC" class="assy"></td>
<td><input type="button" value="MR" class="assy"></td>
<td><input type="button" value="MS" class="assy"></td>
<td><input type="button" value="M+" class="assy"></td>
<td><input type="button" value="M-" class="assy"></td>
</tr>
<tr>
<td><input type="button" value="&#40;"></td>
<td><input type="button" value="&#41;"></td>
<td><input type="button" value="B" class="assy" disabled></td>
<td><input type="button" value="&larr;"></td>
<td><input type="button" value="CE"></td>
<td><input type="button" value="C"></td>
<td><input type="button" value="&#177;"></td>
<td><input type="button" value="&#8730;"></td>
</tr>
<tr>
<td><input type="button" value="RoL"></td>
<td><input type="button" value="RoR"></td>
<td><input type="button" value="C" disabled class="assy"></td>
<td><input type="button" value="7"></td>
<td><input type="button" value="8"></td>
<td><input type="button" value="9"></td>
<td><input type="button" value="/"></td>
<td><input type="button" value="%" class="assy"></td>
</tr>
<tr>
<td><input type="button" value="Or"></td>
<td><input type="button" value="Xor"></td>
<td><input type="button" value="D" disabled class="assy"></td>
<td><input type="button" value="4"></td>
<td><input type="button" value="5"></td>
<td><input type="button" value="6"></td>
<td><input type="button" value="*"></td>
<td><input type="button" value="1/x" class="assy"></td>
</tr>
<tr>
<td><input type="button" value="Lsh"></td>
<td><input type="button" value="Rsh"></td>
<td><input type="button" value="E" disabled class="assy"></td>
<td><input type="button" value="1"></td>
<td><input type="button" value="2"></td>
<td><input type="button" value="3"></td>
<td><input type="button" value="-"></td>
<td rowspan="2"><input type="button" value="=" style="height:63px;"></td>
</tr>
<tr>
<td><input type="button" value="Not"></td>
<td><input type="button" value="And"></td>
<td><input type="button" value="F" disabled class="assy"></td>
<td colspan="2"><input type="button" value="0" style="width:80px;"></td>
<td><input type="button" value="," class="assy"></td>
<td><input type="button" value="+"></td>
</tr>
</table>
</div>
</div>
</div>
</div>
</body>
</html>
Raw
style.css
div, select, option, input, form, body, html, section {
margin: 0;
padding: 0;
}
#main-calc-form {
position: relative;
width:422px;
height: 390px;
background:#FFCC00;
padding:5px;
}
#calc-icon {
display: inline-block;
width:80px;
background-image: url('http://png-1.findicons.com/files/icons/1686/led/16/calculator.png');
background-repeat: no-repeat;
background-position: left;
text-align: right;
padding:2px;
}
#min-open-close-nav {
display: inline-block;
width:93px;
height: 20px;
padding: 2px;
float:right;
}
input[type="button"] {
-moz-box-shadow:inset 0px 1px 0px 0px #dcecfb;
-webkit-box-shadow:inset 0px 1px 0px 0px #dcecfb;
box-shadow:inset 0px 1px 0px 0px #dcecfb;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #bddbfa), color-stop(1, #80b5ea) );
background:-moz-linear-gradient( center top, #bddbfa 5%, #80b5ea 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#bddbfa', endColorstr='#80b5ea');
background-color:#bddbfa;
-webkit-border-top-left-radius:0px;
-moz-border-radius-topleft:0px;
border-top-left-radius:0px;
-webkit-border-top-right-radius:0px;
-moz-border-radius-topright:0px;
border-top-right-radius:0px;
-webkit-border-bottom-right-radius:0px;
-moz-border-radius-bottomright:0px;
border-bottom-right-radius:0px;
-webkit-border-bottom-left-radius:0px;
-moz-border-radius-bottomleft:0px;
border-bottom-left-radius:0px;
text-indent:0px;
border:1px solid #84bbf3;
display:inline-block;
color:#ffffff;
font-family:Arial;
font-size:16px;
font-weight:bold;
font-style:normal;
height:20px;
line-height:20px;
width:25px;
text-decoration:none;
text-align:center;
text-shadow:1px 1px 0px #528ecc;
vertical-align: bottom;
cursor: pointer;
}
#close {
-moz-box-shadow:inset 0px 0px 9px 0px #f29c93;
-webkit-box-shadow:inset 0px 0px 9px 0px #f29c93;
box-shadow:inset 0px 0px 9px 0px #f29c93;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #fe1a00), color-stop(1, #ce0100) );
background:-moz-linear-gradient( center top, #fe1a00 5%, #ce0100 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fe1a00', endColorstr='#ce0100');
background-color:#fe1a00;
-webkit-border-top-left-radius:0px;
-moz-border-radius-topleft:0px;
border-top-left-radius:0px;
-webkit-border-top-right-radius:0px;
-moz-border-radius-topright:0px;
border-top-right-radius:0px;
-webkit-border-bottom-right-radius:0px;
-moz-border-radius-bottomright:0px;
border-bottom-right-radius:0px;
-webkit-border-bottom-left-radius:0px;
-moz-border-radius-bottomleft:0px;
border-bottom-left-radius:0px;
text-indent:0px;
border:1px solid #d83526;
display:inline-block;
color:#ffffff;
font-family:Arial;
font-size:16px;
font-weight:bold;
font-style:normal;
height:20px;
line-height:20px;
width:35px;
text-decoration:none;
text-align:center;
text-shadow:1px 1px 0px #b23e35;
}
#menu {
margin-top:5px;
background: rgb(254,255,255); /* Old browsers */
background: -moz-linear-gradient(top, rgba(254,255,255,1) 16%, rgba(224,224,224,1) 44%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(16%,rgba(254,255,255,1)), color-stop(44%,rgba(224,224,224,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(254,255,255,1) 16%,rgba(224,224,224,1) 44%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(254,255,255,1) 16%,rgba(224,224,224,1) 44%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(254,255,255,1) 16%,rgba(224,224,224,1) 44%); /* IE10+ */
background: linear-gradient(to bottom, rgba(254,255,255,1) 16%,rgba(224,224,224,1) 44%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#feffff', endColorstr='#e0e0e0',GradientType=0 ); /* IE6-9 */
}
#menu select {
border:0;
width:40px;
-webkit-appearance:none;
background: rgb(254,255,255); /* Old browsers */
background: -moz-linear-gradient(top, rgba(254,255,255,1) 16%, rgba(224,224,224,1) 44%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(16%,rgba(254,255,255,1)), color-stop(44%,rgba(224,224,224,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(254,255,255,1) 16%,rgba(224,224,224,1) 44%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(254,255,255,1) 16%,rgba(224,224,224,1) 44%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(254,255,255,1) 16%,rgba(224,224,224,1) 44%); /* IE10+ */
background: linear-gradient(to bottom, rgba(254,255,255,1) 16%,rgba(224,224,224,1) 44%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#feffff', endColorstr='#e0e0e0',GradientType=0 ); /* IE6-9 */
}
#menu select::-ms-expand {
display: none;
}
#functional-part-calc {
width:99.5%;
height: 87%;
border:1px solid black;
background: rgb(254,255,255); /* Old browsers */
background: -moz-linear-gradient(top, rgba(254,255,255,1) 16%, rgba(172,226,212,1) 44%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(16%,rgba(254,255,255,1)), color-stop(44%,rgba(172,226,212,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(254,255,255,1) 16%,rgba(172,226,212,1) 44%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(254,255,255,1) 16%,rgba(172,226,212,1) 44%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(254,255,255,1) 16%,rgba(172,226,212,1) 44%); /* IE10+ */
background: linear-gradient(to bottom, rgba(254,255,255,1) 16%,rgba(172,226,212,1) 44%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#feffff', endColorstr='#ace2d4',GradientType=0 ); /* IE6-9 */
}
#eval {
width:98%;
height:13%;
border:1px solid #C0C0C0;
margin-top:5px;
margin-left:auto;
margin-right:auto;
}
input[type="text"] {
display: inline-block;
width:99%;
height: 40px;
font-family: cursive;
font-size:25px;
text-align: right;
background: rgb(225,255,255); /* Old browsers */
background: -moz-linear-gradient(top, rgba(225,255,255,1) 0%, rgba(225,255,255,1) 7%, rgba(225,255,255,1) 12%, rgba(253,255,255,1) 13%, rgba(230,248,253,1) 30%, rgba(200,238,251,1) 54%, rgba(190,228,248,1) 75%, rgba(177,216,245,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(225,255,255,1)), color-stop(7%,rgba(225,255,255,1)), color-stop(12%,rgba(225,255,255,1)), color-stop(13%,rgba(253,255,255,1)), color-stop(30%,rgba(230,248,253,1)), color-stop(54%,rgba(200,238,251,1)), color-stop(75%,rgba(190,228,248,1)), color-stop(100%,rgba(177,216,245,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(225,255,255,1) 0%,rgba(225,255,255,1) 7%,rgba(225,255,255,1) 12%,rgba(253,255,255,1) 13%,rgba(230,248,253,1) 30%,rgba(200,238,251,1) 54%,rgba(190,228,248,1) 75%,rgba(177,216,245,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(225,255,255,1) 0%,rgba(225,255,255,1) 7%,rgba(225,255,255,1) 12%,rgba(253,255,255,1) 13%,rgba(230,248,253,1) 30%,rgba(200,238,251,1) 54%,rgba(190,228,248,1) 75%,rgba(177,216,245,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(225,255,255,1) 0%,rgba(225,255,255,1) 7%,rgba(225,255,255,1) 12%,rgba(253,255,255,1) 13%,rgba(230,248,253,1) 30%,rgba(200,238,251,1) 54%,rgba(190,228,248,1) 75%,rgba(177,216,245,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(225,255,255,1) 0%,rgba(225,255,255,1) 7%,rgba(225,255,255,1) 12%,rgba(253,255,255,1) 13%,rgba(230,248,253,1) 30%,rgba(200,238,251,1) 54%,rgba(190,228,248,1) 75%,rgba(177,216,245,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e1ffff', endColorstr='#b1d8f5',GradientType=0 ); /* IE6-9 */
}
#binarybs {
width:97%;
height: 20%;
border:1px solid #C0C0C0;
border-radius: 4px;
margin-left:auto;
margin-right:auto;
margin-top:5px;
padding-left:4px;
font-size:14px;
font-family: Consolas;
}
#binarybs span {
display:block;
}
section {
display: inline-block;
width:35px;
height: 100%;
margin-left:8px;
}
.bad {
visibility: hidden;
}
#buttons {
width:98.5%;
height: 61%;
margin-left: auto;
margin-right: auto;
margin-top:3px;
}
.radios {
width:60px;
height: 41%;
margin-top:5px;
padding: 5px;
line-height: 22px;
border:1px solid #C0C0C0;
border-radius: 4px;
font-size:14px;
}
#radios-wrapper {
display: inline-block;
width:75px;
height:210px
}
#main-buttons {
display: inline-block;
position: absolute;
}
#main-buttons input[type="button"] {
width:38px;
height: 30px;
}
#main-buttons input[type="button"]:not(.assy):hover {
background: rgb(140,25,0); /* Old browsers */
background: -moz-linear-gradient(top, rgba(140,25,0,1) 44%, rgba(255,26,0,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(44%,rgba(140,25,0,1)), color-stop(100%,rgba(255,26,0,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(140,25,0,1) 44%,rgba(255,26,0,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(140,25,0,1) 44%,rgba(255,26,0,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(140,25,0,1) 44%,rgba(255,26,0,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(140,25,0,1) 44%,rgba(255,26,0,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8c1900', endColorstr='#ff1a00',GradientType=0 ); /* IE6-9 */
}
input.assy {
background: rgb(245,246,246); /* Old browsers */
background: -moz-linear-gradient(top, rgba(245,246,246,1) 0%, rgba(219,220,226,1) 21%, rgba(184,186,198,1) 36%, rgba(221,223,227,1) 80%, rgba(245,246,246,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(245,246,246,1)), color-stop(21%,rgba(219,220,226,1)), color-stop(36%,rgba(184,186,198,1)), color-stop(80%,rgba(221,223,227,1)), color-stop(100%,rgba(245,246,246,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(245,246,246,1) 0%,rgba(219,220,226,1) 21%,rgba(184,186,198,1) 36%,rgba(221,223,227,1) 80%,rgba(245,246,246,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(245,246,246,1) 0%,rgba(219,220,226,1) 21%,rgba(184,186,198,1) 36%,rgba(221,223,227,1) 80%,rgba(245,246,246,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(245,246,246,1) 0%,rgba(219,220,226,1) 21%,rgba(184,186,198,1) 36%,rgba(221,223,227,1) 80%,rgba(245,246,246,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(245,246,246,1) 0%,rgba(219,220,226,1) 21%,rgba(184,186,198,1) 36%,rgba(221,223,227,1) 80%,rgba(245,246,246,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f6f6', endColorstr='#f5f6f6',GradientType=0 ); /* IE6-9 */
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment