85 lines
4.5 KiB
Handlebars
85 lines
4.5 KiB
Handlebars
<div class="calculator--wrap tile--calculator" tabindex="0">
|
||
<div class="tile__calc clearfix">
|
||
<button class="tile__skip-calc">Skip calculator</button>
|
||
<div class="tile__display">
|
||
<div class="tile__display__aside--wrap">
|
||
<span class="tile__display__aside" id="expression"></span>
|
||
</div>
|
||
<span class="tile__display__main" id="display"></span>
|
||
|
||
<ul class="tile__options">
|
||
<li class="tile__option tile__option__sci" data-tab="sci"><span>Scientific</span></li>
|
||
<li class="tile__option tile__option__basic tile__option--active" data-tab="basic"><span>Basic</span></li>
|
||
<li class="tile__option tile__option__history" data-tab="history" ><span>History</span></li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="tile__tabs">
|
||
|
||
<!-- scientific keyboard -->
|
||
<div class="tile__calc__col tile__tab__sci">
|
||
<span class="tile__ctrl__toggle">
|
||
<span>RAD</span>
|
||
<label class="tile__ctrl__toggle-indicator">
|
||
<input type="checkbox" id="tile__ctrl__toggle-checkbox">
|
||
<div class="tile__ctrl__toggle-slider tile__ctrl__round-icon"></div>
|
||
</label>
|
||
<span>DEG</span>
|
||
</span>
|
||
<button class="tile__ctrl__btn" value="(">(</button>
|
||
<button class="tile__ctrl__btn" value=")">)</button>
|
||
|
||
<button class="tile__ctrl__btn" value="sin(">sin</button>
|
||
<button class="tile__ctrl__btn" value="cos(">cos</button>
|
||
<button class="tile__ctrl__btn" value="tan(">tan</button>
|
||
<button class="tile__ctrl__btn" value="π">π</button>
|
||
|
||
<button class="tile__ctrl__btn" value="!">x!</button>
|
||
<button class="tile__ctrl__btn" value="<sup>2</sup>">x<sup>2</sup></button>
|
||
<button class="tile__ctrl__btn" value="<sup>3</sup>">x<sup>3</sup></button>
|
||
<button class="tile__ctrl__btn" value="<sup>□</sup>">x<sup>y</sup></button>
|
||
|
||
<button class="tile__ctrl__btn" value="1/(">1/x</button>
|
||
<button class="tile__ctrl__btn" value="√(">√x</button>
|
||
<button class="tile__ctrl__btn" value="<sup>□</sup>√"><sup>x</sup>√y</button>
|
||
<button class="tile__ctrl__btn" value="EE">EE</button>
|
||
|
||
<button class="tile__ctrl__btn" value="log(">log</button>
|
||
<button class="tile__ctrl__btn" value="ln(">ln</button>
|
||
<button class="tile__ctrl__btn" value="e<sup>□</sup>">e<sup>x</sup></button>
|
||
<button class="tile__ctrl__btn" value="e">e</button>
|
||
</div>
|
||
|
||
<!-- numeric keyboard -->
|
||
<div class="tile__calc__col tile__tab__basic">
|
||
<button class="tile__ctrl__btn tile__ctrl--double" id="clear_button" value="C">C</button>
|
||
<button class="tile__ctrl__btn tile__ctrl--ops" value="%">%</button>
|
||
<button class="tile__ctrl__btn tile__ctrl--important" value="÷">÷</button>
|
||
|
||
<button class="tile__ctrl__btn" value="7">7</button>
|
||
<button class="tile__ctrl__btn" value="8">8</button>
|
||
<button class="tile__ctrl__btn" value="9">9</button>
|
||
<button class="tile__ctrl__btn tile__ctrl--important" value="×">×</button>
|
||
|
||
<button class="tile__ctrl__btn" value="4">4</button>
|
||
<button class="tile__ctrl__btn" value="5">5</button>
|
||
<button class="tile__ctrl__btn" value="6">6</button>
|
||
<button class="tile__ctrl__btn tile__ctrl--important" value="-">−</button>
|
||
|
||
<button class="tile__ctrl__btn" value="1">1</button>
|
||
<button class="tile__ctrl__btn" value="2">2</button>
|
||
<button class="tile__ctrl__btn" value="3">3</button>
|
||
<button class="tile__ctrl__btn tile__ctrl--important" value="+">+</button>
|
||
|
||
<button class="tile__ctrl__btn tile__ctrl--double" value="0">0</button>
|
||
<button class="tile__ctrl__btn" value=".">.</button>
|
||
<button class="tile__ctrl__btn tile__ctrl--important" value="=">=</button>
|
||
</div>
|
||
|
||
<!-- the ledger (history) section of the calculators UI -->
|
||
<ul class="tile__calc__col tile__history"></ul>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|