Untitled

avatar
unknown
plain_text
2 years ago
3.4 kB
9
Indexable
<!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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
    <style>
        /* Custom styles for calculator buttons */
        .calc-button {
            width: 80px;
            height: 80px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border: none;
            margin: 5px;
            border-radius: 10px;
        }

        /* Style for the dark button (e.g., for the "=" button) */
        .dark-button {
            background-color: #333;
            color: white;
        }
    </style>
</head>

<body class="bg-gray-100 flex items-center justify-center h-screen">
    <div class="bg-white p-6 rounded-lg shadow-lg">
        <!-- Calculator display -->
        <div class="flex items-center justify-between border-b border-gray-300 pb-3">
            <h1 class="text-2xl font-semibold">Обычный</h1>
            <i class="fas fa-history"></i>
            <h2 class="text-5xl font-semibold">0</h2>
        </div>

        <!-- Calculator buttons -->
        <div class="grid grid-cols-4 gap-4 mt-4">
            <!-- First row -->
            <button class="calc-button">MC</button>
            <button class="calc-button">MR</button>
            <button class="calc-button">M+</button>
            <button class="calc-button">M-</button>
            <button class="calc-button">MS</button>

            <!-- Second row -->
            <button class="calc-button">%</button>
            <button class="calc-button">CE</button>
            <button class="calc-button">C</button>
            <button class="calc-button"><i class="fas fa-backspace"></i></button>

            <!-- Third row -->
            <button class="calc-button">1/x</button>
            <button class="calc-button">x<sup>2</sup></button>
            <button class="calc-button">√x</button>
            <button class="calc-button">/</button>

            <!-- Fourth row -->
            <button class="calc-button">7</button>
            <button class="calc-button">8</button>
            <button class="calc-button">9</button>
            <button class="calc-button">X</button>

            <!-- Fifth row -->
            <button class="calc-button">4</button>
            <button class="calc-button">5</button>
            <button class="calc-button">6</button>
            <button class="calc-button">-</button>

            <!-- Sixth row -->
            <button class="calc-button">1</button>
            <button class="calc-button">2</button>
            <button class="calc-button">3</button>
            <button class="calc-button">+</button>

            <!-- Seventh row -->
            <button class="calc-button">+/-</button>
            <button class="calc-button">0</button>
            <button class="calc-button">,</button>
            <button class="calc-button dark-button">=</button>
        </div>
    </div>

    <script>
        // JavaScript functionality will be added here if necessary.
    </script>
</body>

</html>
Editor is loading...
Leave a Comment