<!DOCTYPE html>
<html lang="ka">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>კალკულატორი</title>
<style>
:root{
--bg: #0e0e10; /* გვერდის ფონი */
--panel: #16161a; /* კალკულატორის კორპუსი */
--key: #222227; /* სტანდარტული ღილაკი */
--key-acc: #2b2b32; /* დამხმარე ღილაკები (AC, %, ⌫) */
--key-op: #3a2a1a; /* ოპერატორები */
--op-active: #c46a00; /* აქტიური ოპერატორი */
--eq: #ff7a00; /* = ღილაკი */
--text: #ffffff; /* თეთრი წარწერები */
--muted: #c9cad1; /* რბილი ტექსტი */
--border: #2a2a31; /* ჩარჩოები */
--shadow: 0 6px 30px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial; background:var(--bg); color:var(--text); display:grid; place-items:center; min-height:100vh;}
.wrap{width:min(92vw,420px);}
.hint{color:var(--muted); font-size:12px; margin:10px 2px; display:flex; justify-content:space-between}
.calc{background:var(--panel); border:1px solid var(--border); border-radius:22px; box-shadow:var(--shadow); overflow:hidden}
.display{ padding:22px 18px 10px; background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0)); text-align:right}
.screen{ font-variant-numeric:tabular-nums; font-weight:700; line-height:1.2; word-break:break-word; color:var(--text); font-size:36px; min-height:2.2em }
.keys{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; padding:14px; background:rgba(255,255,255,0.02) }
button{ appearance:none; border:none; border-radius:16px; padding:16px 0; font-size:20px; color:var(--text); background:var(--key); cursor:pointer; box-shadow:inset 0 -2px 0 rgba(0,0,0,.25); transition:transform .03s ease, filter .15s ease, background .2s}
button:active{ transform:scale(.99) }
button:hover{ filter:brightness(1.05) }
.acc{ background:var(--key-acc) }
.op{ background:var(--key-op) }
.op.active{ outline:2px solid var(--op-active) }
.eq{ background:var(--eq); color:#131314; font-weight:700 }
.span-2{ grid-column:span 2; }
.kbd{ display:inline-block; border:1px solid var(--border); padding:2px 6px; border-radius:6px; color:var(--muted) }
.footer{ color:var(--muted); font-size:12px; margin:8px 2px }
</style>
</head>
<body>
<div class="wrap" id="root" tabindex="0" aria-label="კალკულატორი">
<div class="hint"><span>კლავიატურაც მუშაობს</span><span id="op-indicator"></span></div>
<div class="calc">
<div class="display">
<div id="screen" class="screen">0</div>
</div>
<div class="keys">
<button class="acc" data-action="clear">AC</button>
<button class="acc" data-action="sign">±</button>
<button class="acc" data-action="percent">%</button>
<button class="op" data-op="/">÷</button>
<button data-digit>7</button>
<button data-digit>8</button>
<button data-digit>9</button>
<button class="op" data-op="*">×</button>
<button data-digit>4</button>
<button data-digit>5</button>
<button data-digit>6</button>
<button class="op" data-op="-">-</button>
<button data-digit>1</button>
<button data-digit>2</button>
<button data-digit>3</button>
<button class="op" data-op="+">+</button>
<button class="span-2" data-digit>0</button>
<button data-dot>. </button>
<button class="eq" data-action="equals">=</button>
<button class="span-2 acc" data-action="back">⌫</button>
</div>
</div>
<div class="footer">
<span class="kbd">Enter/ =</span> გამოითვლის · <span class="kbd">Backspace</span> წაშლა · <span class="kbd">Esc</span> AC
</div>
</div>
<script>
(function(){
const screen = document.getElementById('screen');
const root = document.getElementById('root');
const opIndicator = document.getElementById('op-indicator');
let first = null; // number|null
let op = null; // '+','-','*','/'|null
let waiting = false; // ველოდებით მეორე ოპერანდს
function setDisplay(v){ screen.textContent = v; }
function getDisplay(){ return screen.textContent; }
function inputDigit(d){
let cur = getDisplay();
if(waiting){ cur = '0'; waiting=false; }
if(cur === '0') cur = d; else cur += d;
if(cur.replace('-', '').length > 14) return; // ლიმიტი
setDisplay(cur);
}
function inputDot(){
let cur = getDisplay();
if(waiting){ cur = '0'; waiting=false; }
if(!cur.includes('.')) setDisplay(cur + '.');
}
function clearAll(){ first=null; op=null; waiting=false; setDisplay('0'); updateOpUI(); }
function back(){ const cur=getDisplay(); setDisplay(cur.length>1? cur.slice(0,-1):'0'); }
function toggleSign(){ const cur=getDisplay(); if(cur!== '0') setDisplay(cur.startsWith('-')? cur.slice(1): '-' + cur); }
function percent(){ const n=parseFloat(getDisplay()); if(!isNaN(n)) setDisplay(trim(n/100)); }
function chooseOperator(next){
const input = parseFloat(getDisplay());
if(first===null){ first = input; }
else if(op!==null && !waiting){ first = compute(first, input, op); setDisplay(String(trim(first))); }
op = next; waiting = true; updateOpUI();
}
function equals(){
if(op===null || first===null) return; const input=parseFloat(getDisplay());
const result=compute(first,input,op);
setDisplay(String(trim(result))); first=null; op=null; waiting=false; updateOpUI();
}
function compute(a,b,operator){
switch(operator){
case '+': return a+b;
case '-': return a-b;
case '*': return a*b;
case '/': return b===0 ? NaN : a/b;
default: return b;
}
}
function trim(n){ return parseFloat(n.toFixed(10)); }
function updateOpUI(){
opIndicator.textContent = op ? `ოპერატორი: ${op}` : '';
document.querySelectorAll('.op').forEach(btn=>{
btn.classList.toggle('active', btn.dataset.op===op);
});
}
// Mouse/touch
document.querySelectorAll('[data-digit]').forEach(btn=>{
btn.addEventListener('click', ()=> inputDigit(btn.textContent.trim()));
});
document.querySelector('[data-dot]').addEventListener('click', inputDot);
document.querySelector('[data-action="clear"]').addEventListener('click', clearAll);
document.querySelector('[data-action="back"]').addEventListener('click', back);
document.querySelector('[data-action="sign"]').addEventListener('click', toggleSign);
document.querySelector('[data-action="percent"]').addEventListener('click', percent);
document.querySelector('[data-action="equals"]').addEventListener('click', equals);
document.querySelectorAll('.op').forEach(btn=>{
btn.addEventListener('click', ()=> chooseOperator(btn.dataset.op));
});
// Keyboard
root.focus();
root.addEventListener('keydown', (e)=>{
const k=e.key;
if(/^[0-9]$/.test(k)) return void inputDigit(k);
if(k==='.') return void inputDot();
if(k==='+'||k==='-'||k==='*'||k==='/') return void chooseOperator(k);
if(k==='Enter' || k==='=') return void equals();
if(k==='Backspace') return void back();
if(k==='%') return void percent();
if(k==='Escape') return void clearAll();
});
})();
</script>
</body>
</html>
