-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
123 lines (112 loc) · 7.26 KB
/
Copy pathindex.html
File metadata and controls
123 lines (112 loc) · 7.26 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calculator</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="css/style.css">
</head>
<body class="bg-gray-100 flex items-center justify-center min-h-screen">
<div class="calculator-container bg-gray-50 shadow-2xl rounded-lg overflow-hidden" style="width: 320px;">
<!-- Header -->
<div class="header flex items-center justify-between px-3 py-2 bg-gray-50">
<div class="flex items-center gap-2">
<svg class="w-4 h-4" viewBox="0 0 16 16" fill="currentColor">
<path d="M0 0h7v7H0V0zm9 0h7v7H9V0zM0 9h7v7H0V9zm9 0h7v7H9V9z"/>
</svg>
<span class="text-xs font-normal">Calculator</span>
</div>
<div class="flex items-center gap-3">
<button class="text-gray-600 hover:bg-gray-200 w-11 h-8 flex items-center justify-center">−</button>
<button class="text-gray-600 hover:bg-gray-200 w-11 h-8 flex items-center justify-center">□</button>
<button class="hover:bg-gray-200 p-2 rounded">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 16 16">
<path d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z"/>
</svg>
</button>
</div>
</div>
<!-- History Panel (hidden by default) -->
<div id="historyPanel" class="hidden absolute right-6 top-20 bg-white shadow-lg rounded-md w-64 max-h-64 overflow-auto z-50">
<div class="flex items-center justify-between px-3 py-2 border-b">
<strong>History</strong>
<div class="flex items-center gap-2">
<button id="clearHistoryBtn" class="text-sm text-red-500">Clear</button>
<button id="closeHistoryBtn" class="text-sm">Close</button>
</div>
</div>
<ul id="historyList" class="p-2 text-sm"></ul>
</div>
<!-- Calculator Mode -->
<div class="mode-selector px-3 py-2 flex items-center justify-between">
<button class="flex items-center gap-2 text-sm font-semibold hover:bg-gray-200 px-2 py-1 rounded">
<span class="text-sm">☰</span>
</button>
<h1 class="text-lg font-normal">Standard</h1>
<div class="flex items-center gap-3">
<button class="hover:bg-gray-200 p-2 rounded">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 16 16">
<path d="M8 0a1 1 0 0 1 1 1v6h6a1 1 0 1 1 0 2H9v6a1 1 0 1 1-2 0V9H1a1 1 0 0 1 0-2h6V1a1 1 0 0 1 1-1z"/>
</svg>
</button>
<button id="historyBtn" class="text-gray-600 hover:bg-gray-200 w-11 h-8 flex items-center justify-center relative" title="History">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 16 16">
<path d="M8.515 1.019A7 7 0 0 0 8 1V0a8 8 0 0 1 .589.022l-.074.997zm2.004.45a7.003 7.003 0 0 0-.985-.299l.219-.976c.383.086.76.2 1.126.342l-.36.933zm1.37.71a7.01 7.01 0 0 0-.439-.27l.493-.87a8.025 8.025 0 0 1 .979.654l-.615.789a6.996 6.996 0 0 0-.418-.302zm1.834 1.79a6.99 6.99 0 0 0-.653-.796l.724-.69c.27.285.52.59.747.91l-.818.576zm.744 1.352a7.08 7.08 0 0 0-.214-.468l.893-.45a7.976 7.976 0 0 1 .45 1.088l-.95.313a7.023 7.023 0 0 0-.179-.483zm.53 2.507a6.991 6.991 0 0 0-.1-1.025l.985-.17c.067.386.106.778.116 1.17l-1 .025zm-.131 1.538c.033-.17.06-.339.081-.51l.993.123a7.957 7.957 0 0 1-.23 1.155l-.964-.267c.046-.165.086-.332.12-.501zm-.952 2.379c.184-.29.346-.594.486-.908l.914.405c-.16.36-.345.706-.555 1.038l-.845-.535zm-.964 1.205c.122-.122.239-.248.35-.378l.758.653a8.073 8.073 0 0 1-.401.432l-.707-.707z"/>
<path d="M8 1a7 7 0 1 0 4.95 11.95l.707.707A8.001 8.001 0 1 1 8 0v1z"/>
<path d="M7.5 3a.5.5 0 0 1 .5.5v5.21l3.248 1.856a.5.5 0 0 1-.496.868l-3.5-2A.5.5 0 0 1 7 9V3.5a.5.5 0 0 1 .5-.5z"/>
</svg>
</button>
</div>
</div>
<!-- Display -->
<div class="display px-4 py-6 text-right">
<div id="expression" class="text-sm text-gray-500 h-6 mb-1"></div>
<div id="result" class="text-5xl font-light overflow-x-auto">0</div>
</div>
<!-- Memory Buttons (Display Only - Non-functional) -->
<div class="memory-buttons grid grid-cols-6 gap-0 border-b border-gray-300">
<button class="memory-btn" disabled>MC</button>
<button class="memory-btn" disabled>MR</button>
<button class="memory-btn" disabled>M+</button>
<button class="memory-btn" disabled>M−</button>
<button class="memory-btn" disabled>MS</button>
<button class="memory-btn" disabled>M<span class="text-xs">▼</span></button>
</div>
<!-- Calculator Buttons -->
<div class="calculator-buttons grid grid-cols-4 gap-0">
<!-- Row 1 -->
<button class="calc-btn operator-btn" data-action="%">%</button>
<button class="calc-btn operator-btn" data-action="CE">CE</button>
<button class="calc-btn operator-btn" data-action="C">C</button>
<button class="calc-btn operator-btn" data-action="DEL">⌫</button>
<!-- Row 2 -->
<button class="calc-btn operator-btn" data-action="1/x">¹⁄ₓ</button>
<button class="calc-btn operator-btn" data-action="x^2">x²</button>
<button class="calc-btn operator-btn" data-action="sqrt">√x</button>
<button class="calc-btn operator-btn" data-action="/">÷</button>
<!-- Row 3 -->
<button class="calc-btn number-btn" data-number="7">7</button>
<button class="calc-btn number-btn" data-number="8">8</button>
<button class="calc-btn number-btn" data-number="9">9</button>
<button class="calc-btn operator-btn" data-action="*">×</button>
<!-- Row 4 -->
<button class="calc-btn number-btn" data-number="4">4</button>
<button class="calc-btn number-btn" data-number="5">5</button>
<button class="calc-btn number-btn" data-number="6">6</button>
<button class="calc-btn operator-btn" data-action="-">−</button>
<!-- Row 5 -->
<button class="calc-btn number-btn" data-number="1">1</button>
<button class="calc-btn number-btn" data-number="2">2</button>
<button class="calc-btn number-btn" data-number="3">3</button>
<button class="calc-btn operator-btn" data-action="+">+</button>
<!-- Row 6 -->
<button class="calc-btn operator-btn" data-action="+/-">+/−</button>
<button class="calc-btn number-btn" data-number="0">0</button>
<button class="calc-btn number-btn" data-action=".">.</button>
<button class="calc-btn equals-btn" data-action="=">=</button>
</div>
</div>
<script src="js/animation.js"></script>
</body>
</html>