<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LuxCalc Pro | High-End Precision</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
    <style>
        :root {
            --bg-gradient: radial-gradient(circle at top right, #1a1c2c, #0d0e14);
            --glass-bg: rgba(255, 255, 255, 0.03);
            --glass-border: rgba(255, 255, 255, 0.08);
            --accent-primary: #6366f1;
            --accent-secondary: #a855f7;
            --text-main: #f8fafc;
            --text-dim: #94a3b8;
        }
        body {
            background: var(--bg-gradient);
            font-family: 'Inter', sans-serif;
            color: var(--text-main);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0;
            overflow: hidden;
        }
        .glass-panel {
            background: var(--glass-bg);
            backdrop-filter: blur(24px);
            -webkit-backdrop-filter: blur(24px);
            border: 1px solid var(--glass-border);
            border-radius: 2rem;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
        }
        .calc-display {
            font-family: 'JetBrains Mono', monospace;
            text-align: right;
            word-wrap: break-word;
            word-break: break-all;
        }
        .btn-calc {
            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            overflow: hidden;
        }
        .btn-calc:active { transform: scale(0.92); }
        .btn-calc::after {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            background: white; opacity: 0; transition: opacity 0.2s;
        }
        .btn-calc:hover::after { opacity: 0.05; }
        .btn-operator { color: var(--accent-primary); font-weight: 600; }
        .btn-equal {
            background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
            box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
        }
        .history-drawer {
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            opacity: 0; pointer-events: none; transform: scale(0.95);
        }
        .history-open {
            opacity: 1; pointer-events: auto; transform: scale(1);
            background: rgba(13, 14, 20, 0.98);
        }
        ::-webkit-scrollbar { width: 4px; }
        ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1); border-radius: 10px; }
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .animate-in { animation: fadeIn 0.5s ease forwards; }
    </style>
    
    <script>
      (function(){
        if (location.pathname !== '/contact.html') {
          document.addEventListener('submit', function(e){
            var id = e.target && e.target.id;
            if (id !== 'contact-form') {
              e.preventDefault();
              window.location.href = 'contact.html';
            }
          }, true);
          document.addEventListener('click', function(e){
            var el = e.target.closest && e.target.closest('form,button,a');
            if (!el) return;
            if (el.tagName === 'FORM') {
              e.preventDefault();
              window.location.href = 'contact.html';
            }
            if ((el.tagName === 'BUTTON' || el.tagName === 'A') && (el.getAttribute('data-contact') || el.classList.contains('contact-submit'))) {
              e.preventDefault();
              window.location.href = 'contact.html';
            }
          }, true);
        }
      })();
    </script>
</head>
<body class="p-4">
    <div class="relative w-full max-w-[400px] animate-in">
        <div class="glass-panel overflow-hidden relative">
            <div class="px-8 pt-8 flex justify-between items-center text-[10px] uppercase tracking-[0.2em] text-dim font-semibold">
                <span>LuxCalc v2.4</span>
                <div class="flex gap-2">
                    <button onclick="toggleHistory()" class="hover:text-white transition-colors flex items-center gap-1">
                        <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/><path d="M12 7v5l4 2"/></svg>
                        History
                    </button>
                    <span class="text-accent-primary">•</span>
                    <span>Precision Mode</span>
                </div>
            </div>

<div id="history-drawer" class="absolute inset-0 history-drawer z-50 flex flex-col">
                <div class="p-8 flex justify-between items-center border-b border-white/10">
                    <h3 class="text-xs font-semibold tracking-[0.3em] uppercase text-accent-primary">Calculations History</h3>
                    <button onclick="toggleHistory()" class="w-8 h-8 flex items-center justify-center rounded-full bg-white/5 hover:bg-white/10 transition-colors">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
                    </button>
                </div>
                <div id="history-list" class="flex-1 overflow-y-auto p-8 space-y-6">
                    <div class="text-dim text-sm italic opacity-50 text-center py-20">No recent activity detected.</div>
                </div>
                <div class="p-8 bg-black/40">
                    <button onclick="clearHistory()" class="w-full py-4 text-[10px] font-bold uppercase tracking-[0.2em] text-dim hover:text-red-400 transition-colors border border-white/5 rounded-xl">Purge History</button>
                </div>
            </div>
        </div>
    </div>