Spaces:

Jayantsharma46
/

anycoder-e5fc369b

Sleeping

App Files Files Community

Jayantsharma46 commited on 15 days ago

Commit

cbe23f1

verified ·

1 Parent(s): 8986092

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +524 -0

index.html ADDED Viewed

	@@ -0,0 +1,524 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Calculator</title>
+  <style>
+    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+    * {
+      box-sizing: border-box;
+      margin: 0;
+      padding: 0;
+    }
+    body {
+      font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
+      min-height: 100vh;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 1rem;
+    }
+    .container {
+      width: 100%;
+      max-width: 28rem;
+      animation: scaleIn 0.2s ease-out;
+    }
+    @keyframes scaleIn {
+      0% { transform: scale(0.95); opacity: 0; }
+      100% { transform: scale(1); opacity: 1; }
+    }
+    @keyframes fadeIn {
+      0% { opacity: 0; }
+      100% { opacity: 1; }
+    }
+    /* Header */
+    .header {
+      text-align: center;
+      margin-bottom: 2rem;
+    }
+    .title {
+      font-size: 2rem;
+      font-weight: 700;
+      background: linear-gradient(to right, #22d3ee, #c084fc, #f472b6);
+      -webkit-background-clip: text;
+      background-clip: text;
+      color: transparent;
+      margin-bottom: 0.5rem;
+    }
+    .built-with {
+      font-size: 0.75rem;
+      color: #94a3b8;
+      transition: color 0.2s;
+    }
+    .built-with a {
+      color: inherit;
+      text-decoration: none;
+    }
+    .built-with a:hover {
+      color: #22d3ee;
+    }
+    /* Calculator Body */
+    .calculator {
+      background: linear-gradient(to bottom, #1e293b, #0f172a);
+      border-radius: 1.5rem;
+      padding: 1rem;
+      box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
+      border: 1px solid rgba(71, 85, 105, 0.3);
+    }
+    /* Display Screen */
+    .display {
+      background: linear-gradient(to bottom, #0f172a, #1e293b);
+      border-radius: 1rem;
+      padding: 1rem;
+      margin-bottom: 1rem;
+      box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
+      border: 1px solid rgba(71, 85, 105, 0.2);
+    }
+    .display-previous {
+      text-align: right;
+      font-size: 0.875rem;
+      color: #64748b;
+      margin-bottom: 0.25rem;
+      min-height: 1.25rem;
+    }
+    .display-current {
+      text-align: right;
+      font-size: 2.5rem;
+      font-weight: 700;
+      color: white;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    /* History Strip */
+    .history {
+      margin-bottom: 1rem;
+      padding: 0 0.5rem;
+      animation: fadeIn 0.3s ease-out;
+    }
+    .history-items {
+      display: flex;
+      gap: 0.25rem;
+      overflow-x: auto;
+      padding-bottom: 0.5rem;
+    }
+    .history-items::-webkit-scrollbar {
+      display: none;
+    }
+    .history-item {
+      font-size: 0.75rem;
+      color: #64748b;
+      background: rgba(30, 41, 59, 0.5);
+      padding: 0.25rem 0.5rem;
+      border-radius: 0.5rem;
+      white-space: nowrap;
+    }
+    /* Button Grid */
+    .buttons {
+      display: grid;
+      grid-template-columns: repeat(4, 1fr);
+      gap: 0.5rem;
+    }
+    .btn {
+      height: 3.5rem;
+      border-radius: 0.75rem;
+      font-weight: 600;
+      font-size: 1.125rem;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition: all 0.15s ease;
+      border: none;
+      cursor: pointer;
+    }
+    .btn:active {
+      transform: scale(0.95);
+    }
+    .btn:hover {
+      transform: scale(1.05);
+    }
+    .btn-number {
+      background: linear-gradient(to bottom, #e2e8f0, #cbd5e1);
+      color: #1e293b;
+      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    }
+    .btn-number:hover {
+      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    }
+    .btn-operator {
+      background: linear-gradient(to bottom, #f97316, #ea580c);
+      color: white;
+      box-shadow: 0 4px 6px -1px rgba(249, 115, 22, 0.3);
+    }
+    .btn-operator:hover {
+      box-shadow: 0 10px 15px -3px rgba(249, 115, 22, 0.4);
+    }
+    .btn-equals {
+      background: linear-gradient(to bottom, #10b981, #059669);
+      color: white;
+      box-shadow: 0 4px 6px -1px rgba(16, 185, 129, 0.3);
+    }
+    .btn-equals:hover {
+      box-shadow: 0 10px 15px -3px rgba(16, 185, 129, 0.4);
+    }
+    .btn-function {
+      background: linear-gradient(to bottom, #475569, #334155);
+      color: white;
+      box-shadow: 0 4px 6px -1px rgba(71, 85, 105, 0.3);
+    }
+    .btn-function:hover {
+      box-shadow: 0 10px 15px -3px rgba(71, 85, 105, 0.4);
+    }
+    .btn-wide {
+      grid-column: span 2;
+    }
+    /* Footer */
+    .footer {
+      text-align: center;
+      color: #64748b;
+      font-size: 0.75rem;
+      margin-top: 1.5rem;
+    }
+    /* Responsive */
+    @media (min-width: 640px) {
+      .btn {
+        height: 4rem;
+      }
+      .display-current {
+        font-size: 3rem;
+      }
+      .buttons {
+        gap: 0.75rem;
+      }
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <!-- Header -->
+    <div class="header">
+      <h1 class="title">Calculator</h1>
+      <p class="built-with">
+        <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" rel="noopener noreferrer">
+          Built with anycoder
+        </a>
+      </p>
+    </div>
+    <!-- Calculator -->
+    <div class="calculator">
+      <!-- Display -->
+      <div class="display">
+        <div class="display-previous" id="previousDisplay"></div>
+        <div class="display-current" id="currentDisplay">0</div>
+      </div>
+      <!-- History -->
+      <div class="history" id="historyContainer" style="display: none;">
+        <div class="history-items" id="historyItems"></div>
+      </div>
+      <!-- Buttons -->
+      <div class="buttons">
+        <button class="btn btn-function" data-action="clear">AC</button>
+        <button class="btn btn-function" data-action="toggleSign">±</button>
+        <button class="btn btn-function" data-action="percentage">%</button>
+        <button class="btn btn-operator" data-action="divide">÷</button>
+        <button class="btn btn-number" data-digit="7">7</button>
+        <button class="btn btn-number" data-digit="8">8</button>
+        <button class="btn btn-number" data-digit="9">9</button>
+        <button class="btn btn-operator" data-action="multiply">×</button>
+        <button class="btn btn-number" data-digit="4">4</button>
+        <button class="btn btn-number" data-digit="5">5</button>
+        <button class="btn btn-number" data-digit="6">6</button>
+        <button class="btn btn-operator" data-action="subtract">-</button>
+        <button class="btn btn-number" data-digit="1">1</button>
+        <button class="btn btn-number" data-digit="2">2</button>
+        <button class="btn btn-number" data-digit="3">3</button>
+        <button class="btn btn-operator" data-action="add">+</button>
+        <button class="btn btn-number btn-wide" data-digit="0">0</button>
+        <button class="btn btn-number" data-action="decimal">.</button>
+        <button class="btn btn-equals" data-action="equals">=</button>
+      </div>
+    </div>
+    <!-- Footer -->
+    <p class="footer">A beautiful calculator built with HTML, CSS & JavaScript</p>
+  </div>
+  <script>
+    // Calculator State
+    const state = {
+      display: '0',
+      previousValue: null,
+      operation: null,
+      waitingForOperand: false,
+      history: []
+    };
+    // DOM Elements
+    const currentDisplayEl = document.getElementById('currentDisplay');
+    const previousDisplayEl = document.getElementById('previousDisplay');
+    const historyContainer = document.getElementById('historyContainer');
+    const historyItems = document.getElementById('historyItems');
+    // Update Display
+    function updateDisplay() {
+      currentDisplayEl.textContent = state.display;
+      if (state.previousValue !== null && state.operation) {
+        previousDisplayEl.textContent = `${state.previousValue} ${state.operation}`;
+      } else {
+        previousDisplayEl.textContent = '';
+      }
+    }
+    // Update History
+    function updateHistory() {
+      if (state.history.length > 0) {
+        historyContainer.style.display = 'block';
+        historyItems.innerHTML = state.history
+          .map(item => `<span class="history-item">${item}</span>`)
+          .join('');
+      } else {
+        historyContainer.style.display = 'none';
+      }
+    }
+    // Input Digit
+    function inputDigit(digit) {
+      if (state.waitingForOperand) {
+        state.display = digit;
+        state.waitingForOperand = false;
+      } else {
+        state.display = state.display === '0' ? digit : state.display + digit;
+      }
+      updateDisplay();
+    }
+    // Input Decimal
+    function inputDecimal() {
+      if (state.waitingForOperand) {
+        state.display = '0.';
+        state.waitingForOperand = false;
+      } else if (!state.display.includes('.')) {
+        state.display += '.';
+      }
+      updateDisplay();
+    }
+    // Clear
+    function clear() {
+      state.display = '0';
+      state.previousValue = null;
+      state.operation = null;
+      state.waitingForOperand = false;
+      updateDisplay();
+      previousDisplayEl.textContent = '';
+    }
+    // Toggle Sign
+    function toggleSign() {
+      state.display = String(-parseFloat(state.display));
+      updateDisplay();
+    }
+    // Percentage
+    function percentage() {
+      state.display = String(parseFloat(state.display) / 100);
+      updateDisplay();
+    }
+    // Perform Operation
+    function performOperation(nextOperation) {
+      const inputValue = parseFloat(state.display);
+      if (state.previousValue === null) {
+        state.previousValue = inputValue;
+      } else if (state.operation) {
+        const currentValue = state.previousValue || 0;
+        let result;
+        switch (state.operation) {
+          case '+':
+            result = currentValue + inputValue;
+            break;
+          case '-':
+            result = currentValue - inputValue;
+            break;
+          case '×':
+            result = currentValue * inputValue;
+            break;
+          case '÷':
+            result = currentValue / inputValue;
+            break;
+          default:
+            result = inputValue;
+        }
+        state.display = String(result);
+        state.previousValue = result;
+        // Add to history
+        addToHistory(`${currentValue} ${state.operation} ${inputValue} = ${result}`);
+      }
+      state.waitingForOperand = true;
+      state.operation = nextOperation;
+      updateDisplay();
+    }
+    // Calculate
+    function calculate() {
+      if (!state.operation || state.previousValue === null) return;
+      const inputValue = parseFloat(state.display);
+      let result;
+      switch (state.operation) {
+        case '+':
+          result = state.previousValue + inputValue;
+          break;
+        case '-':
+          result = state.previousValue - inputValue;
+          break;
+        case '×':
+          result = state.previousValue * inputValue;
+          break;
+        case '÷':
+          result = state.previousValue / inputValue;
+          break;
+        default:
+          result = inputValue;
+      }
+      addToHistory(`${state.previousValue} ${state.operation} ${inputValue} = ${result}`);
+      state.display = String(result);
+      state.previousValue = null;
+      state.operation = null;
+      state.waitingForOperand = true;
+      updateDisplay();
+    }
+    // Add to History
+    function addToHistory(item) {
+      state.history = [...state.history, item].slice(-5);
+      updateHistory();
+    }
+    // Handle Button Clicks
+    document.querySelectorAll('.btn').forEach(button => {
+      button.addEventListener('click', () => {
+        const digit = button.dataset.digit;
+        const action = button.dataset.action;
+        if (digit !== undefined) {
+          inputDigit(digit);
+        } else if (action) {
+          switch (action) {
+            case 'clear':
+              clear();
+              break;
+            case 'toggleSign':
+              toggleSign();
+              break;
+            case 'percentage':
+              percentage();
+              break;
+            case 'decimal':
+              inputDecimal();
+              break;
+            case 'add':
+              performOperation('+');
+              break;
+            case 'subtract':
+              performOperation('-');
+              break;
+            case 'multiply':
+              performOperation('×');
+              break;
+            case 'divide':
+              performOperation('÷');
+              break;
+            case 'equals':
+              calculate();
+              break;
+          }
+        }
+      });
+    });
+    // Keyboard Support
+    document.addEventListener('keydown', (e) => {
+      const key = e.key;
+      if (key >= '0' && key <= '9') {
+        inputDigit(key);
+      } else if (key === '.') {
+        inputDecimal();
+      } else if (key === '+') {
+        performOperation('+');
+      } else if (key === '-') {
+        performOperation('-');
+      } else if (key === '*') {
+        performOperation('×');
+      } else if (key === '/') {
+        e.preventDefault();
+        performOperation('÷');
+      } else if (key === 'Enter' || key === '=') {
+        calculate();
+      } else if (key === 'Escape') {
+        clear();
+      } else if (key === 'Backspace') {
+        if (!state.waitingForOperand && state.display.length > 1) {
+          state.display = state.display.slice(0, -1);
+        } else {
+          state.display = '0';
+        }
+        updateDisplay();
+      }
+    });
+  </script>
+</body>
+</html>