Calculadora e Assistente de Matemática: HTML, CSS, JavaScript

Abrir no Editor Publique Seu Código

Recomendado

22 September 2025

Trecho de animação de neurônio HTML

12 July 2025

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Математический помощник</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
            color: #e0e0e0;
            min-height: 100vh;
            padding: 15px;
            overflow-x: hidden;
        }

.container {
            max-width: 500px;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            gap: 15px;
            position: relative;
        }

.header {
            background: #2d3748;
            border-radius: 16px;
            padding: 20px;
            text-align: center;
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
            position: relative;
            border: 1px solid #4a5568;
        }

.header h1 {
            color: #63b3ed;
            font-size: 24px;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
        }

.top-controls {
            display: flex;
            gap: 10px;
            margin-bottom: 15px;
        }

.mode-switcher {
            display: flex;
            background: #4a5568;
            border-radius: 12px;
            padding: 5px;
            gap: 5px;
            flex: 1;
        }

.mode-btn {
            flex: 1;
            padding: 12px;
            border: none;
            border-radius: 10px;
            background: transparent;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            color: #cbd5e0;
        }

.mode-btn.active {
            background: #4299e1;
            color: white;
            box-shadow: 0 4px 10px rgba(66, 153, 225, 0.4);
        }

.examples-btn {
            background: #38a169;
            color: white;
            border: none;
            border-radius: 12px;
            padding: 12px 15px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            white-space: nowrap;
            box-shadow: 0 4px 10px rgba(56, 161, 105, 0.4);
        }

.examples-btn:hover {
            background: #2f855a;
            transform: translateY(-2px);
        }

.content {
            background: #2d3748;
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
            border: 1px solid #4a5568;
        }

.calculator {
            display: none;
            flex-direction: column;
            height: 100%;
        }

.calculator.active {
            display: flex;
        }

.calculator-display {
            background: #1a202c;
            border-bottom: 2px solid #4a5568;
            padding: 20px;
            text-align: right;
            font-size: 32px;
            min-height: 80px;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            word-break: break-all;
            color: #e2e8f0;
        }

.calculator-buttons {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 10px;
            padding: 15px;
        }

.calc-btn {
            background: #4a5568;
            border: 2px solid #718096;
            border-radius: 12px;
            padding: 18px 5px;
            font-size: 20px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #e2e8f0;
        }

.calc-btn:hover {
            background: #718096;
        }

.calc-btn:active {
            transform: scale(0.95);
        }

.calc-btn.operator {
            background: #4299e1;
            color: white;
            border-color: #4299e1;
        }

.calc-btn.equals {
            background: #38a169;
            color: white;
            border-color: #38a169;
        }

.calc-btn.clear {
            background: #e53e3e;
            color: white;
            border-color: #e53e3e;
        }

.math-assistant {
            display: none;
            flex-direction: column;
            height: 60vh;
        }

.math-assistant.active {
            display: flex;
        }

.chat-header {
            background: linear-gradient(90deg, #4299e1, #3182ce);
            color: white;
            padding: 18px 20px;
            display: flex;
            align-items: center;
            gap: 12px;
        }

.chat-header .logo {
            font-size: 24px;
            background: rgba(255, 255, 255, 0.2);
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

.chat-header .title {
            font-size: 1.3em;
            font-weight: 600;
        }

.chat-window {
            flex-grow: 1;
            padding: 15px;
            overflow-y: auto;
            background-color: #1a202c;
            display: flex;
            flex-direction: column;
        }

.message {
            max-width: 85%;
            padding: 12px 16px;
            border-radius: 18px;
            margin-bottom: 12px;
            line-height: 1.4;
            word-wrap: break-word;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
            position: relative;
            animation: fadeIn 0.3s ease;
        }

@keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

.message.user {
            background: linear-gradient(135deg, #4299e1, #3182ce);
            color: white;
            align-self: flex-end;
            margin-left: auto;
            border-bottom-right-radius: 5px;
        }

.message.ai {
            background-color: #4a5568;
            border: 1px solid #718096;
            align-self: flex-start;
            margin-right: auto;
            border-bottom-left-radius: 5px;
            color: #e2e8f0;
        }

.typing-indicator {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 12px 16px;
            background-color: #4a5568;
            border: 1px solid #718096;
            border-radius: 18px;
            margin-bottom: 12px;
            align-self: flex-start;
            max-width: 70px;
            border-bottom-left-radius: 5px;
        }

.typing-indicator .dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: #a0aec0;
            animation: typing 1.4s infinite ease-in-out;
        }

.typing-indicator .dot:nth-child(1) { animation-delay: -0.32s; }
        .typing-indicator .dot:nth-child(2) { animation-delay: -0.16s; }

@keyframes typing {
            0%, 80%, 100% { transform: scale(0.8); opacity: 0.5; }
            40% { transform: scale(1); opacity: 1; }
        }

.chat-input {
            display: flex;
            padding: 15px;
            border-top: 1px solid #4a5568;
            background-color: #2d3748;
            gap: 10px;
        }

.chat-input input {
            flex-grow: 1;
            padding: 12px 16px;
            border: 1px solid #4a5568;
            border-radius: 24px;
            font-size: 16px;
            outline: none;
            background-color: #1a202c;
            color: #e2e8f0;
        }

.chat-input input:focus {
            border-color: #4299e1;
        }

.chat-input input::placeholder {
            color: #a0aec0;
        }

.chat-input button {
            background: linear-gradient(135deg, #4299e1, #3182ce);
            color: white;
            border: none;
            border-radius: 50%;
            width: 45px;
            height: 45px;
            cursor: pointer;
            font-size: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

.chat-input button:disabled {
            background: #718096;
            cursor: not-allowed;
        }

.examples-panel {
            position: fixed;
            top: 0;
            right: -100%;
            width: 85%;
            height: 100%;
            background: #2d3748;
            box-shadow: -5px 0 25px rgba(0, 0, 0, 0.4);
            transition: right 0.4s ease;
            z-index: 1000;
            display: flex;
            flex-direction: column;
            padding: 20px;
            overflow-y: auto;
            border-left: 1px solid #4a5568;
        }

.examples-panel.active {
            right: 0;
        }

.examples-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 2px solid #4a5568;
        }

.examples-header h2 {
            color: #63b3ed;
            font-size: 20px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

.close-examples {
            background: none;
            border: none;
            font-size: 24px;
            color: #a0aec0;
            cursor: pointer;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
        }

.close-examples:hover {
            background: #4a5568;
            color: #63b3ed;
        }

.examples-categories {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

.examples-category h3 {
            color: #63b3ed;
            margin-bottom: 12px;
            font-size: 18px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

.examples-list {
            display: grid;
            grid-template-columns: 1fr;
            gap: 10px;
        }

.example-item {
            background: #4a5568;
            border: 1px solid #718096;
            border-radius: 10px;
            padding: 15px;
            font-size: 15px;
            cursor: pointer;
            transition: all 0.2s ease;
            text-align: left;
            color: #e2e8f0;
        }

.example-item:hover {
            background: #718096;
            transform: translateX(5px);
        }

.overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.7);
            z-index: 999;
            display: none;
        }

.overlay.active {
            display: block;
        }

@media (max-width: 380px) {
            .header h1 {
                font-size: 20px;
            }
            
            .top-controls {
                flex-direction: column;
            }
            
            .examples-btn {
                width: 100%;
            }
            
            .calculator-buttons {
                grid-template-columns: repeat(4, 1fr);
                gap: 8px;
                padding: 10px;
            }
            
            .calc-btn {
                padding: 15px 5px;
                font-size: 18px;
            }
            
            .calculator-display {
                padding: 15px;
                font-size: 28px;
                min-height: 70px;
            }
            
            .examples-panel {
                width: 90%;
            }
        }

.chat-window::-webkit-scrollbar {
            width: 6px;
        }

.chat-window::-webkit-scrollbar-track {
            background: #2d3748;
            border-radius: 10px;
        }

.chat-window::-webkit-scrollbar-thumb {
            background: #4a5568;
            border-radius: 10px;
        }
        
        .examples-panel::-webkit-scrollbar {
            width: 6px;
        }

.examples-panel::-webkit-scrollbar-track {
            background: #2d3748;
            border-radius: 10px;
        }

.examples-panel::-webkit-scrollbar-thumb {
            background: #4a5568;
            border-radius: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1><i class="fas fa-calculator"></i> Математический помощник</h1>
            
            <div class="top-controls">
                <div class="mode-switcher">
                    <button class="mode-btn active" id="assistant-btn">
                        <i class="fas fa-robot"></i>
                        <span>Помощник</span>
                    </button>
                    <button class="mode-btn" id="calculator-btn">
                        <i class="fas fa-calculator"></i>
                        <span>Калькулятор</span>
                    </button>
                </div>
                
                <button class="examples-btn" id="examples-btn">
                    <i class="fas fa-lightbulb"></i>
                    <span>Примеры</span>
                </button>
            </div>
        </div>
        
        <div class="content">
            <div class="calculator" id="calculator">
                <div class="calculator-display" id="calc-display">0</div>
                <div class="calculator-buttons">
                    <button class="calc-btn clear" onclick="clearDisplay()">C</button>
                    <button class="calc-btn" onclick="appendToDisplay('(')">(</button>
                    <button class="calc-btn" onclick="appendToDisplay(')')">)</button>
                    <button class="calc-btn operator" onclick="appendToDisplay('/')">/</button>
                    
                    <button class="calc-btn" onclick="appendToDisplay('7')">7</button>
                    <button class="calc-btn" onclick="appendToDisplay('8')">8</button>
                    <button class="calc-btn" onclick="appendToDisplay('9')">9</button>
                    <button class="calc-btn operator" onclick="appendToDisplay('*')">×</button>
                    
                    <button class="calc-btn" onclick="appendToDisplay('4')">4</button>
                    <button class="calc-btn" onclick="appendToDisplay('5')">5</button>
                    <button class="calc-btn" onclick="appendToDisplay('6')">6</button>
                    <button class="calc-btn operator" onclick="appendToDisplay('-')">-</button>
                    
                    <button class="calc-btn" onclick="appendToDisplay('1')">1</button>
                    <button class="calc-btn" onclick="appendToDisplay('2')">2</button>
                    <button class="calc-btn" onclick="appendToDisplay('3')">3</button>
                    <button class="calc-btn operator" onclick="appendToDisplay('+')">+</button>
                    
                    <button class="calc-btn" onclick="appendToDisplay('0')">0</button>
                    <button class="calc-btn" onclick="appendToDisplay('.')">.</button>
                    <button class="calc-btn" onclick="backspace()"><i class="fas fa-backspace"></i></button>
                    <button class="calc-btn equals" onclick="calculate()">=</button>
                </div>
            </div>
            
            <div class="math-assistant active" id="math-assistant">
                <div class="chat-header">
                    <div class="logo">
                        <i class="fas fa-robot"></i>
                    </div>
                    <div class="title">Математический помощник</div>
                </div>
                <div class="chat-window" id="chat-window">
                    <div class="message ai">
                        Привет! Я ваш математический помощник. Могу решать примеры, объяснять математические концепции и помогать с вычислениями. Нажмите кнопку "Примеры" чтобы увидеть примеры запросов!
                    </div>
                </div>
                <div class="chat-input">
                    <input type="text" id="user-input" placeholder="Введите вопрос или выражение...">
                    <button id="send-button">
                        <i class="fas fa-paper-plane"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>

<div class="overlay" id="overlay"></div>
    <div class="examples-panel" id="examples-panel">
        <div class="examples-header">
            <h2><i class="fas fa-lightbulb"></i> Примеры запросов</h2>
            <button class="close-examples" id="close-examples">
                <i class="fas fa-times"></i>
            </button>
        </div>
        
        <div class="examples-categories">
            <div class="examples-category">
                <h3><i class="fas fa-calculator"></i> Вычисления</h3>
                <div class="examples-list">
                    <div class="example-item" onclick="insertExample('15 + 27')">15 + 27</div>
                    <div class="example-item" onclick="insertExample('48 * 3.5')">48 × 3.5</div>
                    <div class="example-item" onclick="insertExample('100 / 4')">100 ÷ 4</div>
                    <div class="example-item" onclick="insertExample('(12 + 8) * 2')">(12 + 8) × 2</div>
                    <div class="example-item" onclick="insertExample('2^3 + 5 * 4')">2³ + 5 × 4</div>
                </div>
            </div>
            
            <div class="examples-category">
                <h3><i class="fas fa-shapes"></i> Геометрия</h3>
                <div class="examples-list">
                    <div class="example-item" onclick="insertExample('Как найти площадь круга?')">Площадь круга</div>
                    <div class="example-item" onclick="insertExample('Объясни теорему Пифагора')">Теорема Пифагора</div>
                    <div class="example-item" onclick="insertExample('Как найти объем шара?')">Объем шара</div>
                    <div class="example-item" onclick="insertExample('Что такое периметр?')">Периметр</div>
                </div>
            </div>
            
            <div class="examples-category">
                <h3><i class="fas fa-function"></i> Алгебра</h3>
                <div class="examples-list">
                    <div class="example-item" onclick="insertExample('Что такое квадратное уравнение?')">Квадратное уравнение</div>
                    <div class="example-item" onclick="insertExample('Объясни что такое логарифм')">Логарифм</div>
                    <div class="example-item" onclick="insertExample('Что такое производная?')">Производная</div>
                    <div class="example-item" onclick="insertExample('Что такое интеграл?')">Интеграл</div>
                </div>
            </div>
            
            <div class="examples-category">
                <h3><i class="fas fa-triangle"></i> Тригонометрия</h3>
                <div class="examples-list">
                    <div class="example-item" onclick="insertExample('Что такое синус и косинус?')">Синус и косинус</div>
                    <div class="example-item" onclick="insertExample('Что такое тангенс?')">Тангенс</div>
                    <div class="example-item" onclick="insertExample('Как решать тригонометрические уравнения?')">Тригонометрические уравнения</div>
                </div>
            </div>
        </div>
    </div>

Calculadora e Assistente de Matemática: HTML, CSS, JavaScript

Recomendado

Trecho de animação de neurônio HTML

florescimento de dados

Um código de Mete

HTML

CSS

JS

Recomendado

Trecho de animação de neurônio HTML

florescimento de dados

Um código de Mete

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS