Add files via upload

opiobrian · Nov 18, 2024 · a4d138e · a4d138e
commit a4d138e
Showing 1 changed file with 150 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,150 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>OpioCalc Scientific Calculator</title>
+  <style>
+    body {
+      font-family: Arial, sans-serif;
+      background: url('background.jpg') no-repeat center center fixed;
+      background-size: cover;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 100vh;
+      margin: 0;
+    }
+    .calculator {
+      background: rgba(255, 255, 255, 0.85);
+      padding: 20px;
+      border-radius: 10px;
+      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
+      width: 350px;
+    }
+    .display {
+      width: 100%;
+      padding: 10px;
+      font-size: 1.5rem;
+      text-align: right;
+      border: none;
+      background: #f0f0f0;
+      border-radius: 5px;
+      margin-bottom: 10px;
+    }
+    .buttons {
+      display: grid;
+      grid-template-columns: repeat(5, 1fr);
+      gap: 10px;
+    }
+    button {
+      padding: 15px;
+      font-size: 1rem;
+      border: none;
+      border-radius: 5px;
+      background: #6200ea;
+      color: white;
+      cursor: pointer;
+    }
+    button:hover {
+      background: #3700b3;
+    }
+    button.clear, button.equals {
+      grid-column: span 2;
+      background: #d32f2f;
+    }
+    button.clear:hover, button.equals:hover {
+      background: #b71c1c;
+    }
+  </style>
+</head>
+<body onload="initializeCalculator()">
+  <div class="calculator">
+    <input type="text" class="display" id="display" disabled />
+    <div class="buttons">
+      <button onclick="clearDisplay()" class="clear">C</button>
+      <button onclick="appendValue('(')">(</button>
+      <button onclick="appendValue(')')">)</button>
+      <button onclick="appendValue('^')">^</button>
+      <button onclick="appendValue('/')">÷</button>
+      <button onclick="appendValue('sin(')">sin</button>
+      <button onclick="appendValue('cos(')">cos</button>
+      <button onclick="appendValue('tan(')">tan</button>
+      <button onclick="appendValue('sqrt(')">√</button>
+      <button onclick="appendValue('*')">×</button>
+      <button onclick="appendValue('7')">7</button>
+      <button onclick="appendValue('8')">8</button>
+      <button onclick="appendValue('9')">9</button>
+      <button onclick="appendValue('log(')">log</button>
+      <button onclick="appendValue('-')">−</button>
+      <button onclick="appendValue('4')">4</button>
+      <button onclick="appendValue('5')">5</button>
+      <button onclick="appendValue('6')">6</button>
+      <button onclick="appendValue('ln(')">ln</button>
+      <button onclick="appendValue('+')">+</button>
+      <button onclick="appendValue('1')">1</button>
+      <button onclick="appendValue('2')">2</button>
+      <button onclick="appendValue('3')">3</button>
+      <button onclick="appendValue('e')">e</button>
+      <button onclick="calculate()">=</button>
+      <button onclick="appendValue('0')">0</button>
+      <button onclick="appendValue('.')">.</button>
+      <button onclick="appendValue('pi')">π</button>
+      <button onclick="appendValue('!')">!</button>
+    </div>
+  </div>
+  <script>
+    // Initialize calculator with welcome message
+    function initializeCalculator() {
+      const display = document.getElementById('display');
+      display.value = 'Welcome to OpioCalc!';
+      setTimeout(() => display.value = '', 10000);
+    }
+
+    // Append value to display
+    function appendValue(value) {
+      const display = document.getElementById('display');
+      display.value += value;
+    }
+
+    // Clear display
+    function clearDisplay() {
+      const display = document.getElementById('display');
+      display.value = '';
+    }
+
+    // Calculate the result
+    function calculate() {
+      const display = document.getElementById('display');
+      let expression = display.value
+        .replace('pi', Math.PI)
+        .replace('e', Math.E)
+        .replace('^', '**')
+        .replace('!', 'factorial');
+
+      try {
+        display.value = eval(expression);
+      } catch (error) {
+        display.value = 'Error';
+      }
+    }
+
+    // Factorial function for single number input
+    function factorial(n) {
+      if (n === 0 || n === 1) return 1;
+      for (let i = n - 1; i >= 1; i--) {
+        n *= i;
+      }
+      return n;
+    }
+
+    // Helper functions for common math operations
+    function sin(x) { return Math.sin(x); }
+    function cos(x) { return Math.cos(x); }
+    function tan(x) { return Math.tan(x); }
+    function log(x) { return Math.log10(x); }
+    function ln(x) { return Math.log(x); }
+    function sqrt(x) { return Math.sqrt(x); }
+  </script>
+</body>
+</html>