feat: implement calculator app with pseudo-auth and CI/CD

- Calculator with full keyboard support and click interaction - Pseudo-auth via localStorage (any login accepted) - Dark theme (AntD ConfigProvider + custom styles) - Responsive layout from 320px - CI/CD: service.yaml + .drone.yml for deployment to test-calculator.vigdorov.ru Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-17 21:03:52 +03:00
parent 56fee5cbdf
commit 37c201975c
31 changed files with 5286 additions and 0 deletions
--- a/.drone.yml
+++ b/.drone.yml
@ -0,0 +1,56 @@
+kind: pipeline
+type: kubernetes
+name: ci
+
+steps:
+  - name: prepare
+    image: alpine:3.19
+    environment:
+      GITEA_TOKEN:
+        from_secret: GITEA_TOKEN
+    commands:
+      - apk add --no-cache git bash yq
+      - git clone --depth 1 https://token:$GITEA_TOKEN@git.vigdorov.ru/vigdorov/ci-templates.git .ci
+      - chmod +x .ci/scripts/*.sh
+      - bash .ci/scripts/prepare.sh
+
+  - name: build
+    image: gcr.io/kaniko-project/executor:v1.23.2-debug
+    depends_on: [prepare]
+    environment:
+      HARBOR_USER:
+        from_secret: HARBOR_USER
+      HARBOR_PASSWORD:
+        from_secret: HARBOR_PASSWORD
+    commands:
+      - /busybox/sh .ci/scripts/build.sh
+
+  - name: deploy
+    image: alpine:3.19
+    depends_on: [build]
+    environment:
+      KUBE_CONFIG:
+        from_secret: KUBE_CONFIG
+    commands:
+      - apk add --no-cache bash yq kubectl helm
+      - bash .ci/scripts/deploy.sh
+
+  - name: notify
+    image: appleboy/drone-telegram
+    depends_on: [deploy]
+    settings:
+      token:
+        from_secret: TELEGRAM_TOKEN
+      to:
+        from_secret: TELEGRAM_CHAT_ID
+      format: markdown
+      message: >
+        {{#success build.status}}✅{{else}}❌{{/success}} **{{repo.name}}**
+        Branch: `{{commit.branch}}`
+        {{commit.message}}
+    when:
+      status: [success, failure]
+
+trigger:
+  branch: [master, main]
+  event: [push, custom]
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,6 @@
+node_modules
+dist
+.vite
+*.local
+.claude
+.serena
--- a/eslint.config.js
+++ b/eslint.config.js
@ -0,0 +1,23 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      js.configs.recommended,
+      tseslint.configs.recommended,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+  },
+])
--- a/index.html
+++ b/index.html
@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>calc-tmp</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -0,0 +1,33 @@
+{
+  "name": "test-calculator",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@ant-design/icons": "^6.1.0",
+    "antd": "^6.3.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "react-router-dom": "^7.13.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.1",
+    "@types/node": "^24.10.1",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.1",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "globals": "^16.5.0",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.48.0",
+    "vite": "^7.3.1"
+  }
+}
--- a/public/vite.svg
+++ b/public/vite.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
--- a/service.yaml
+++ b/service.yaml
@ -0,0 +1,7 @@
+service:
+  name: test-calculator
+  type: web-frontend
+
+deploy:
+  namespace: test-calculator
+  domain: test-calculator.vigdorov.ru
--- a/src/App.css
+++ b/src/App.css
@ -0,0 +1,23 @@
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  -webkit-text-size-adjust: 100%;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  background: #000;
+  color: #fff;
+  min-height: 100vh;
+  overflow-x: hidden;
+}
+
+#root {
+  min-height: 100vh;
+}
--- a/src/App.tsx
+++ b/src/App.tsx
@ -0,0 +1,48 @@
+import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
+import { ConfigProvider, theme } from 'antd';
+import { AuthProvider, useAuth } from './context/AuthContext';
+import LoginPage from './pages/LoginPage';
+import CalculatorPage from './pages/CalculatorPage';
+import type { ReactNode } from 'react';
+import './App.css';
+
+function ProtectedRoute({ children }: { children: ReactNode }) {
+  const { user } = useAuth();
+  if (!user) return <Navigate to="/login" replace />;
+  return <>{children}</>;
+}
+
+function GuestRoute({ children }: { children: ReactNode }) {
+  const { user } = useAuth();
+  if (user) return <Navigate to="/" replace />;
+  return <>{children}</>;
+}
+
+export default function App() {
+  return (
+    <ConfigProvider theme={{ algorithm: theme.darkAlgorithm }}>
+    <BrowserRouter>
+      <AuthProvider>
+        <Routes>
+          <Route
+            path="/login"
+            element={
+              <GuestRoute>
+                <LoginPage />
+              </GuestRoute>
+            }
+          />
+          <Route
+            path="/"
+            element={
+              <ProtectedRoute>
+                <CalculatorPage />
+              </ProtectedRoute>
+            }
+          />
+        </Routes>
+      </AuthProvider>
+    </BrowserRouter>
+    </ConfigProvider>
+  );
+}
--- a/src/components/Button/Button.module.css
+++ b/src/components/Button/Button.module.css
@ -0,0 +1,54 @@
+.button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 56px;
+  border: none;
+  border-radius: 12px;
+  font-size: clamp(18px, 4vw, 22px);
+  font-weight: 500;
+  cursor: pointer;
+  transition: background-color 0.12s, transform 0.1s;
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.button:active {
+  transform: scale(0.95);
+}
+
+.default {
+  background: #2d2d2d;
+  color: #fff;
+}
+
+.default:hover {
+  background: #3a3a3a;
+}
+
+.function {
+  background: #a5a5a5;
+  color: #000;
+}
+
+.function:hover {
+  background: #b8b8b8;
+}
+
+.operator {
+  background: #ff9f0a;
+  color: #fff;
+}
+
+.operator:hover {
+  background: #ffb340;
+}
+
+.wide {
+  grid-column: span 2;
+}
+
+.active {
+  filter: brightness(1.35);
+  transform: scale(0.95);
+}
--- a/src/components/Button/Button.tsx
+++ b/src/components/Button/Button.tsx
@ -0,0 +1,28 @@
+import styles from './Button.module.css';
+
+export type ButtonVariant = 'default' | 'function' | 'operator';
+
+interface Props {
+  label: string;
+  variant?: ButtonVariant;
+  wide?: boolean;
+  active?: boolean;
+  onClick: () => void;
+}
+
+export default function Button({ label, variant = 'default', wide, active, onClick }: Props) {
+  const classNames = [
+    styles.button,
+    styles[variant],
+    wide ? styles.wide : '',
+    active ? styles.active : '',
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+  return (
+    <button className={classNames} onClick={onClick}>
+      {label}
+    </button>
+  );
+}
--- a/src/components/Calculator/Calculator.module.css
+++ b/src/components/Calculator/Calculator.module.css
@ -0,0 +1,8 @@
+.calculator {
+  width: calc(100vw - 32px);
+  max-width: 360px;
+  background: #1c1c1e;
+  border-radius: 20px;
+  overflow: hidden;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+}
--- a/src/components/Calculator/Calculator.tsx
+++ b/src/components/Calculator/Calculator.tsx
@ -0,0 +1,17 @@
+import Display from '../Display/Display';
+import Keypad from '../Keypad/Keypad';
+import { useCalculator } from '../../hooks/useCalculator';
+import { useKeyboard } from '../../hooks/useKeyboard';
+import styles from './Calculator.module.css';
+
+export default function Calculator() {
+  const { state, actions } = useCalculator();
+  const activeKey = useKeyboard(actions);
+
+  return (
+    <div className={styles.calculator}>
+      <Display expression={state.expression} display={state.display} />
+      <Keypad actions={actions} activeKey={activeKey} />
+    </div>
+  );
+}
--- a/src/components/Display/Display.module.css
+++ b/src/components/Display/Display.module.css
@ -0,0 +1,36 @@
+.display {
+  padding: 16px 20px 8px;
+  text-align: right;
+  min-height: 90px;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+}
+
+.expression {
+  font-size: clamp(14px, 3.5vw, 16px);
+  color: #888;
+  min-height: 22px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.result {
+  font-size: clamp(32px, 9vw, 44px);
+  font-weight: 300;
+  color: #fff;
+  line-height: 1.2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  transition: font-size 0.15s;
+}
+
+.medium {
+  font-size: clamp(24px, 7vw, 34px);
+}
+
+.small {
+  font-size: clamp(18px, 5vw, 26px);
+}
--- a/src/components/Display/Display.tsx
+++ b/src/components/Display/Display.tsx
@ -0,0 +1,21 @@
+import { formatDisplay } from '../../utils/calculate';
+import styles from './Display.module.css';
+
+interface Props {
+  expression: string;
+  display: string;
+}
+
+export default function Display({ expression, display }: Props) {
+  const formatted = formatDisplay(display);
+  const fontSize = formatted.length > 12 ? 'small' : formatted.length > 8 ? 'medium' : '';
+
+  return (
+    <div className={styles.display}>
+      <div className={styles.expression}>{expression}&nbsp;</div>
+      <div className={`${styles.result} ${fontSize ? styles[fontSize] : ''}`}>
+        {formatted}
+      </div>
+    </div>
+  );
+}
--- a/src/components/Keypad/Keypad.module.css
+++ b/src/components/Keypad/Keypad.module.css
@ -0,0 +1,6 @@
+.keypad {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 10px;
+  padding: 10px;
+}
--- a/src/components/Keypad/Keypad.tsx
+++ b/src/components/Keypad/Keypad.tsx
@ -0,0 +1,56 @@
+import Button from '../Button/Button';
+import type { CalculatorActions } from '../../hooks/useCalculator';
+import styles from './Keypad.module.css';
+
+interface Props {
+  actions: CalculatorActions;
+  activeKey: string | null;
+}
+
+const BUTTON_KEY_MAP: Record<string, string> = {
+  '÷': '/',
+  '×': '*',
+  '−': '-',
+  '+': '+',
+  '=': '=',
+  '.': '.',
+  C: 'C',
+  '⌫': 'Backspace',
+  '%': '%',
+  '±': '±',
+};
+
+export default function Keypad({ actions, activeKey }: Props) {
+  const isActive = (label: string) => {
+    const mapped = BUTTON_KEY_MAP[label] ?? label;
+    return activeKey === mapped;
+  };
+
+  return (
+    <div className={styles.keypad}>
+      <Button label="C" variant="function" active={isActive('C')} onClick={actions.clear} />
+      <Button label="±" variant="function" active={isActive('±')} onClick={actions.toggleSign} />
+      <Button label="%" variant="function" active={isActive('%')} onClick={actions.percent} />
+      <Button label="÷" variant="operator" active={isActive('÷')} onClick={() => actions.inputOperator('/')} />
+
+      <Button label="7" active={isActive('7')} onClick={() => actions.inputDigit('7')} />
+      <Button label="8" active={isActive('8')} onClick={() => actions.inputDigit('8')} />
+      <Button label="9" active={isActive('9')} onClick={() => actions.inputDigit('9')} />
+      <Button label="×" variant="operator" active={isActive('×')} onClick={() => actions.inputOperator('*')} />
+
+      <Button label="4" active={isActive('4')} onClick={() => actions.inputDigit('4')} />
+      <Button label="5" active={isActive('5')} onClick={() => actions.inputDigit('5')} />
+      <Button label="6" active={isActive('6')} onClick={() => actions.inputDigit('6')} />
+      <Button label="−" variant="operator" active={isActive('−')} onClick={() => actions.inputOperator('-')} />
+
+      <Button label="1" active={isActive('1')} onClick={() => actions.inputDigit('1')} />
+      <Button label="2" active={isActive('2')} onClick={() => actions.inputDigit('2')} />
+      <Button label="3" active={isActive('3')} onClick={() => actions.inputDigit('3')} />
+      <Button label="+" variant="operator" active={isActive('+')} onClick={() => actions.inputOperator('+')} />
+
+      <Button label="0" wide active={isActive('0')} onClick={() => actions.inputDigit('0')} />
+      <Button label="." active={isActive('.')} onClick={actions.inputDecimal} />
+      <Button label="=" variant="operator" active={isActive('=')} onClick={actions.calculate} />
+    </div>
+  );
+}
--- a/src/context/AuthContext.tsx
+++ b/src/context/AuthContext.tsx
@ -0,0 +1,39 @@
+import { createContext, useContext, useState, useCallback, type ReactNode } from 'react';
+
+interface AuthContextType {
+  user: string | null;
+  login: (name: string) => void;
+  logout: () => void;
+}
+
+const STORAGE_KEY = 'calculator_user';
+
+const AuthContext = createContext<AuthContextType | null>(null);
+
+export function AuthProvider({ children }: { children: ReactNode }) {
+  const [user, setUser] = useState<string | null>(
+    () => localStorage.getItem(STORAGE_KEY),
+  );
+
+  const login = useCallback((name: string) => {
+    localStorage.setItem(STORAGE_KEY, name);
+    setUser(name);
+  }, []);
+
+  const logout = useCallback(() => {
+    localStorage.removeItem(STORAGE_KEY);
+    setUser(null);
+  }, []);
+
+  return (
+    <AuthContext.Provider value={{ user, login, logout }}>
+      {children}
+    </AuthContext.Provider>
+  );
+}
+
+export function useAuth() {
+  const ctx = useContext(AuthContext);
+  if (!ctx) throw new Error('useAuth must be used within AuthProvider');
+  return ctx;
+}
--- a/src/hooks/useCalculator.ts
+++ b/src/hooks/useCalculator.ts
@ -0,0 +1,192 @@
+import { useReducer, useCallback } from 'react';
+import { calculate } from '../utils/calculate';
+
+interface State {
+  display: string;
+  expression: string;
+  operator: string | null;
+  prevValue: number | null;
+  waitingForOperand: boolean;
+  lastResult: boolean;
+}
+
+type Action =
+  | { type: 'DIGIT'; digit: string }
+  | { type: 'DECIMAL' }
+  | { type: 'OPERATOR'; operator: string }
+  | { type: 'CALCULATE' }
+  | { type: 'CLEAR' }
+  | { type: 'BACKSPACE' }
+  | { type: 'TOGGLE_SIGN' }
+  | { type: 'PERCENT' };
+
+const initialState: State = {
+  display: '0',
+  expression: '',
+  operator: null,
+  prevValue: null,
+  waitingForOperand: false,
+  lastResult: false,
+};
+
+const OPERATOR_SYMBOLS: Record<string, string> = {
+  '+': '+',
+  '-': '−',
+  '*': '×',
+  '/': '÷',
+};
+
+function reducer(state: State, action: Action): State {
+  switch (action.type) {
+    case 'DIGIT': {
+      if (state.waitingForOperand) {
+        return {
+          ...state,
+          display: action.digit,
+          waitingForOperand: false,
+          lastResult: false,
+        };
+      }
+      if (state.lastResult) {
+        return {
+          ...state,
+          display: action.digit,
+          expression: '',
+          operator: null,
+          prevValue: null,
+          lastResult: false,
+        };
+      }
+      const newDisplay = state.display === '0' ? action.digit : state.display + action.digit;
+      if (newDisplay.replace(/[^0-9]/g, '').length > 16) return state;
+      return { ...state, display: newDisplay };
+    }
+
+    case 'DECIMAL': {
+      if (state.waitingForOperand) {
+        return { ...state, display: '0.', waitingForOperand: false, lastResult: false };
+      }
+      if (state.lastResult) {
+        return {
+          ...state,
+          display: '0.',
+          expression: '',
+          operator: null,
+          prevValue: null,
+          lastResult: false,
+        };
+      }
+      if (state.display.includes('.')) return state;
+      return { ...state, display: state.display + '.' };
+    }
+
+    case 'OPERATOR': {
+      const currentValue = parseFloat(state.display);
+      const symbol = OPERATOR_SYMBOLS[action.operator] || action.operator;
+
+      if (state.prevValue !== null && !state.waitingForOperand) {
+        const result = calculate(state.prevValue, state.operator!, currentValue);
+        const resultStr = String(result);
+        if (!isFinite(result)) {
+          return { ...initialState, display: 'Error', expression: '' };
+        }
+        return {
+          ...state,
+          display: resultStr,
+          expression: `${resultStr} ${symbol}`,
+          prevValue: result,
+          operator: action.operator,
+          waitingForOperand: true,
+          lastResult: false,
+        };
+      }
+
+      return {
+        ...state,
+        expression: `${state.display} ${symbol}`,
+        prevValue: currentValue,
+        operator: action.operator,
+        waitingForOperand: true,
+        lastResult: false,
+      };
+    }
+
+    case 'CALCULATE': {
+      if (state.operator === null || state.prevValue === null) return state;
+      if (state.waitingForOperand) return state;
+
+      const currentValue = parseFloat(state.display);
+      const result = calculate(state.prevValue, state.operator, currentValue);
+      const symbol = OPERATOR_SYMBOLS[state.operator] || state.operator;
+
+      if (!isFinite(result)) {
+        return { ...initialState, display: 'Error', expression: '' };
+      }
+
+      return {
+        display: String(result),
+        expression: `${state.prevValue} ${symbol} ${currentValue} =`,
+        operator: null,
+        prevValue: null,
+        waitingForOperand: false,
+        lastResult: true,
+      };
+    }
+
+    case 'CLEAR':
+      return initialState;
+
+    case 'BACKSPACE': {
+      if (state.lastResult || state.waitingForOperand) return state;
+      if (state.display === 'Error') return initialState;
+      const newDisplay = state.display.length > 1 ? state.display.slice(0, -1) : '0';
+      return { ...state, display: newDisplay };
+    }
+
+    case 'TOGGLE_SIGN': {
+      if (state.display === '0' || state.display === 'Error') return state;
+      const toggled = state.display.startsWith('-')
+        ? state.display.slice(1)
+        : '-' + state.display;
+      return { ...state, display: toggled };
+    }
+
+    case 'PERCENT': {
+      const val = parseFloat(state.display);
+      if (isNaN(val)) return state;
+      const result = val / 100;
+      return { ...state, display: String(result), lastResult: true };
+    }
+
+    default:
+      return state;
+  }
+}
+
+export interface CalculatorActions {
+  inputDigit: (digit: string) => void;
+  inputDecimal: () => void;
+  inputOperator: (op: string) => void;
+  calculate: () => void;
+  clear: () => void;
+  backspace: () => void;
+  toggleSign: () => void;
+  percent: () => void;
+}
+
+export function useCalculator() {
+  const [state, dispatch] = useReducer(reducer, initialState);
+
+  const actions: CalculatorActions = {
+    inputDigit: useCallback((digit: string) => dispatch({ type: 'DIGIT', digit }), []),
+    inputDecimal: useCallback(() => dispatch({ type: 'DECIMAL' }), []),
+    inputOperator: useCallback((operator: string) => dispatch({ type: 'OPERATOR', operator }), []),
+    calculate: useCallback(() => dispatch({ type: 'CALCULATE' }), []),
+    clear: useCallback(() => dispatch({ type: 'CLEAR' }), []),
+    backspace: useCallback(() => dispatch({ type: 'BACKSPACE' }), []),
+    toggleSign: useCallback(() => dispatch({ type: 'TOGGLE_SIGN' }), []),
+    percent: useCallback(() => dispatch({ type: 'PERCENT' }), []),
+  };
+
+  return { state, actions };
+}
--- a/src/hooks/useKeyboard.ts
+++ b/src/hooks/useKeyboard.ts
@ -0,0 +1,60 @@
+import { useEffect, useState, useCallback } from 'react';
+import type { CalculatorActions } from './useCalculator';
+
+const KEY_MAP: Record<string, string> = {
+  '0': '0', '1': '1', '2': '2', '3': '3', '4': '4',
+  '5': '5', '6': '6', '7': '7', '8': '8', '9': '9',
+  '.': '.', ',': '.',
+  '+': '+', '-': '-', '*': '*', '/': '/',
+  Enter: '=', '=': '=',
+  Escape: 'C',
+  Backspace: 'Backspace',
+  '%': '%',
+};
+
+export function useKeyboard(actions: CalculatorActions) {
+  const [activeKey, setActiveKey] = useState<string | null>(null);
+
+  const handleKeyDown = useCallback(
+    (e: KeyboardEvent) => {
+      const mapped = KEY_MAP[e.key];
+      if (!mapped) return;
+
+      if (e.key === '/') e.preventDefault();
+
+      setActiveKey(mapped);
+
+      if (mapped >= '0' && mapped <= '9') {
+        actions.inputDigit(mapped);
+      } else if (mapped === '.') {
+        actions.inputDecimal();
+      } else if (['+', '-', '*', '/'].includes(mapped)) {
+        actions.inputOperator(mapped);
+      } else if (mapped === '=') {
+        actions.calculate();
+      } else if (mapped === 'C') {
+        actions.clear();
+      } else if (mapped === 'Backspace') {
+        actions.backspace();
+      } else if (mapped === '%') {
+        actions.percent();
+      }
+    },
+    [actions],
+  );
+
+  const handleKeyUp = useCallback(() => {
+    setActiveKey(null);
+  }, []);
+
+  useEffect(() => {
+    window.addEventListener('keydown', handleKeyDown);
+    window.addEventListener('keyup', handleKeyUp);
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown);
+      window.removeEventListener('keyup', handleKeyUp);
+    };
+  }, [handleKeyDown, handleKeyUp]);
+
+  return activeKey;
+}
--- a/src/main.tsx
+++ b/src/main.tsx
@ -0,0 +1,9 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './App';
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);
--- a/src/pages/CalculatorPage.module.css
+++ b/src/pages/CalculatorPage.module.css
@ -0,0 +1,31 @@
+.wrapper {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 16px;
+  flex-shrink: 0;
+}
+
+.user {
+  color: #888;
+  font-size: 14px;
+}
+
+.logout {
+  color: #888 !important;
+  font-size: 13px;
+}
+
+.main {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 16px;
+}
--- a/src/pages/CalculatorPage.tsx
+++ b/src/pages/CalculatorPage.tsx
@ -0,0 +1,31 @@
+import { Button, Typography } from 'antd';
+import { LogoutOutlined, UserOutlined } from '@ant-design/icons';
+import { useAuth } from '../context/AuthContext';
+import Calculator from '../components/Calculator/Calculator';
+import styles from './CalculatorPage.module.css';
+
+export default function CalculatorPage() {
+  const { user, logout } = useAuth();
+
+  return (
+    <div className={styles.wrapper}>
+      <header className={styles.header}>
+        <Typography.Text className={styles.user}>
+          <UserOutlined /> {user}
+        </Typography.Text>
+        <Button
+          type="text"
+          size="small"
+          icon={<LogoutOutlined />}
+          onClick={logout}
+          className={styles.logout}
+        >
+          Выйти
+        </Button>
+      </header>
+      <main className={styles.main}>
+        <Calculator />
+      </main>
+    </div>
+  );
+}
--- a/src/pages/LoginPage.module.css
+++ b/src/pages/LoginPage.module.css
@ -0,0 +1,27 @@
+.wrapper {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 16px;
+}
+
+.card {
+  width: 100%;
+  max-width: 340px;
+  text-align: center;
+}
+
+.icon {
+  font-size: 48px;
+  color: #1677ff;
+  margin-bottom: 12px;
+}
+
+.title {
+  margin-bottom: 24px !important;
+}
+
+.button {
+  margin-top: 12px;
+}
--- a/src/pages/LoginPage.tsx
+++ b/src/pages/LoginPage.tsx
@ -0,0 +1,48 @@
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Input, Button, Typography } from 'antd';
+import { CalculatorOutlined } from '@ant-design/icons';
+import { useAuth } from '../context/AuthContext';
+import styles from './LoginPage.module.css';
+
+export default function LoginPage() {
+  const [name, setName] = useState('');
+  const { login } = useAuth();
+  const navigate = useNavigate();
+
+  const handleSubmit = () => {
+    const trimmed = name.trim();
+    if (!trimmed) return;
+    login(trimmed);
+    navigate('/', { replace: true });
+  };
+
+  return (
+    <div className={styles.wrapper}>
+      <div className={styles.card}>
+        <CalculatorOutlined className={styles.icon} />
+        <Typography.Title level={3} className={styles.title}>
+          Калькулятор
+        </Typography.Title>
+        <Input
+          size="large"
+          placeholder="Введите логин"
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+          onPressEnter={handleSubmit}
+          autoFocus
+        />
+        <Button
+          type="primary"
+          size="large"
+          block
+          onClick={handleSubmit}
+          disabled={!name.trim()}
+          className={styles.button}
+        >
+          Войти
+        </Button>
+      </div>
+    </div>
+  );
+}
--- a/src/utils/calculate.ts
+++ b/src/utils/calculate.ts
@ -0,0 +1,44 @@
+export function calculate(a: number, operator: string, b: number): number {
+  let result: number;
+
+  switch (operator) {
+    case '+':
+      result = a + b;
+      break;
+    case '-':
+      result = a - b;
+      break;
+    case '*':
+      result = a * b;
+      break;
+    case '/':
+      if (b === 0) return Infinity;
+      result = a / b;
+      break;
+    default:
+      return b;
+  }
+
+  return Math.round(result * 1e12) / 1e12;
+}
+
+export function formatDisplay(value: string): string {
+  if (value === 'Error') return value;
+
+  const num = parseFloat(value);
+  if (isNaN(num)) return '0';
+  if (!isFinite(num)) return 'Error';
+
+  if (value.includes('.') && value.endsWith('0') && !value.includes('e')) {
+    return value;
+  }
+  if (value.endsWith('.')) {
+    return value;
+  }
+
+  if (Math.abs(num) >= 1e16 || (Math.abs(num) < 1e-10 && num !== 0)) {
+    return num.toExponential(6);
+  }
+
+  return value;
+}
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "types": ["vite/client"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}
--- a/tsconfig.json
+++ b/tsconfig.json
@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}
--- a/tsconfig.node.json
+++ b/tsconfig.node.json
@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "types": ["node"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}
--- a/vite.config.ts
+++ b/vite.config.ts
@ -0,0 +1,16 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+export default defineConfig({
+  plugins: [react()],
+  build: {
+    rollupOptions: {
+      output: {
+        manualChunks: {
+          vendor: ['react', 'react-dom', 'react-router-dom'],
+          antd: ['antd', '@ant-design/icons'],
+        },
+      },
+    },
+  },
+})
				`@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>