A Pen by Valeri Hristov on CodePen.
Created
June 28, 2014 14:00
-
-
Save pancanin/96b3434a86a8c2a85934 to your computer and use it in GitHub Desktop.
A Pen by Valeri Hristov.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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="❏"/> | |
| <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="("></td> | |
| <td><input type="button" value=")"></td> | |
| <td><input type="button" value="B" class="assy" disabled></td> | |
| <td><input type="button" value="←"></td> | |
| <td><input type="button" value="CE"></td> | |
| <td><input type="button" value="C"></td> | |
| <td><input type="button" value="±"></td> | |
| <td><input type="button" value="√"></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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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