<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Calculatrice V10 Pro</title>
    <link rel="stylesheet" href="styles.css">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;600&family=Poppins:wght@400;500;600&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
    <div class="app-loader">
        <div class="loader-content">
            <i class="fas fa-calculator"></i>
            <span>Chargement...</span>
        </div>
    </div>

    <div class="app-container">
        <div class="progress-bar"></div>

        <nav class="top-nav">
            <div class="app-title">
                <i class="fas fa-calculator"></i>
                <span>Calculatrice Pro V10</span>
            </div>
            <div class="mode-switcher">
                <button class="mode-btn active" data-mode="standard">Standard</button>
                <button class="mode-btn" data-mode="scientific">Scientifique</button>
                <button class="mode-btn" data-mode="programmer">Programmeur</button>
                <button class="mode-btn" data-mode="graphing">Graphique</button>
            </div>
            <div class="settings-bar">
                <button id="theme-toggle" class="settings-btn" title="Changer de thème">
                    <i class="fas fa-moon"></i>
                </button>
                <button id="toggle-angle-unit" class="settings-btn" title="Changer l'unité d'angle">RAD</button>
                <select id="language-select" class="settings-btn">
                    <option value="fr">FR</option>
                    <option value="en">EN</option>
                    <option value="es">ES</option>
                </select>
                <button id="settings-menu" class="settings-btn" title="Paramètres">
                    <i class="fas fa-cog"></i>
                </button>
                <button id="help-btn" class="settings-btn" title="Aide">
                    <i class="fas fa-question-circle"></i>
                </button>
            </div>
        </nav>

        <div class="quick-tips">
            <div class="tip">
                <i class="fas fa-lightbulb"></i>
                <span>Astuce : Utilisez Tab pour naviguer</span>
            </div>
        </div>

        <div class="main-content">
            <div class="side-panel left-panel">
                <div class="favorites-section">
                    <h3>Favoris</h3>
                    <div class="favorites-list" id="favorites-list"></div>
                    <button class="add-favorite-btn">
                        <i class="fas fa-plus"></i> Ajouter aux favoris
                    </button>
                </div>
                <div class="formulas-section">
                    <h3>Formules</h3>
                    <select id="formula-category">
                        <option value="geometry">Géométrie</option>
                        <option value="physics">Physique</option>
                        <option value="finance">Finance</option>
                    </select>
                    <div class="formula-list" id="formula-list"></div>
                </div>
            </div>

            <div class="calculator-container">
                <div class="calculator">
                    <div class="calculator-header">
                        <div class="status-bar">
                            <div class="memory-indicator" title="Mémoire active"></div>
                            <div class="mode-indicator">Standard</div>
                            <div class="angle-indicator">RAD</div>
                        </div>
                        <div class="expression-display"></div>
                        <div class="previous-operation"></div>
                        <input type="text" class="calculator-screen" value="" disabled />
                    </div>
                    
                    <div class="calculator-keys">
                        <div class="advanced-functions">
                            <button type="button" class="scientific special" value="pow2">x²</button>
                            <button type="button" class="scientific special" value="pow3">x³</button>
                            <button type="button" class="scientific special" value="pow">xʸ</button>
                            <button type="button" class="scientific special" value="sqrt">√</button>
                            <button type="button" class="scientific special" value="cbrt">∛</button>
                            <button type="button" class="scientific special" value="nroot">ⁿ√</button>
                            <button type="button" class="scientific special" value="log">log</button>
                            <button type="button" class="scientific special" value="ln">ln</button>
                            <button type="button" class="scientific special" value="exp">exp</button>
                            <button type="button" class="scientific special" value="pi">π</button>
                            <button type="button" class="scientific special" value="e">e</button>
                            <button type="button" class="scientific special" value="abs">|x|</button>
                        </div>

                        <div class="main-keys">
                            <button type="button" class="function special" value="(">(</button>
                            <button type="button" class="function special" value=")">)</button>
                            <button type="button" class="operator special" value="%">%</button>
                            <button type="button" class="all-clear special" value="all-clear">AC</button>

                            <button type="button" class="scientific special" value="sin">sin</button>
                            <button type="button" class="scientific special" value="cos">cos</button>
                            <button type="button" class="scientific special" value="tan">tan</button>
                            <button type="button" class="operator special" value="/">÷</button>

                            <button type="button" class="number" value="7">7</button>
                            <button type="button" class="number" value="8">8</button>
                            <button type="button" class="number" value="9">9</button>
                            <button type="button" class="operator special" value="*">×</button>

                            <button type="button" class="number" value="4">4</button>
                            <button type="button" class="number" value="5">5</button>
                            <button type="button" class="number" value="6">6</button>
                            <button type="button" class="operator special" value="-">−</button>

                            <button type="button" class="number" value="1">1</button>
                            <button type="button" class="number" value="2">2</button>
                            <button type="button" class="number" value="3">3</button>
                            <button type="button" class="operator special" value="+">+</button>

                            <button type="button" class="number zero" value="0">0</button>
                            <button type="button" class="decimal" value=".">.</button>
                            <button type="button" class="delete special" value="delete">
                                <i class="fas fa-backspace"></i>
                            </button>
                            <button type="button" class="equal-sign special" value="=">=</button>
                        </div>

                        <div class="memory-panel">
                            <button type="button" class="memory special" value="mc">MC</button>
                            <button type="button" class="memory special" value="mr">MR</button>
                            <button type="button" class="memory special" value="m+">M+</button>
                            <button type="button" class="memory special" value="m-">M-</button>
                            <button type="button" class="memory special" value="ms">MS</button>
                        </div>
                    </div>
                </div>

                <div class="graph-section" style="display: none;">
                    <div class="graph-controls">
                        <input type="text" id="function-input" placeholder="f(x) = ">
                        <button id="plot-btn">Tracer</button>
                        <div class="range-inputs">
                            <input type="number" id="x-min" placeholder="X min">
                            <input type="number" id="x-max" placeholder="X max">
                        </div>
                    </div>
                    <canvas id="graph-canvas"></canvas>
                </div>

                <div class="programmer-mode" style="display: none;">
                    <div class="base-buttons">
                        <button class="base-btn active" data-base="dec">DEC</button>
                        <button class="base-btn" data-base="hex">HEX</button>
                        <button class="base-btn" data-base="oct">OCT</button>
                        <button class="base-btn" data-base="bin">BIN</button>
                    </div>
                    <div class="base-displays">
                        <div class="base-display">
                            <label>HEX:</label>
                            <input type="text" id="hex-display" readonly>
                        </div>
                        <div class="base-display">
                            <label>DEC:</label>
                            <input type="text" id="dec-display" readonly>
                        </div>
                        <div class="base-display">
                            <label>OCT:</label>
                            <input type="text" id="oct-display" readonly>
                        </div>
                        <div class="base-display">
                            <label>BIN:</label>
                            <input type="text" id="bin-display" readonly>
                        </div>
                    </div>
                </div>
            </div>

            <div class="side-panel right-panel">
                <div class="history-section">
                    <div class="history-header">
                        <h3>Historique</h3>
                        <div class="history-controls">
                            <input type="text" id="history-search" placeholder="Rechercher...">
                            <button id="clear-history" class="history-btn" title="Effacer l'historique">
                                <i class="fas fa-trash"></i>
                            </button>
                            <button id="export-history" class="history-btn" title="Exporter l'historique">
                                <i class="fas fa-download"></i>
                            </button>
                        </div>
                    </div>
                    <div class="history-filters">
                        <button class="filter-btn active" data-filter="all">Tout</button>
                        <button class="filter-btn" data-filter="basic">Base</button>
                        <button class="filter-btn" data-filter="scientific">Scientifique</button>
                        <button class="filter-btn" data-filter="programmer">Programmeur</button>
                    </div>
                    <ul id="history-list"></ul>
                </div>

                <div class="conversion-panel">
                    <div class="panel-header">
                        <h2>Conversions</h2>
                    </div>
                    <div class="conversion-content">
                        <select id="conversion-type">
                            <option value="length">Longueur</option>
                            <option value="mass">Masse</option>
                            <option value="temperature">Température</option>
                            <option value="currency">Devise</option>
                        </select>
                        <div class="conversion-inputs">
                            <div class="conversion-input">
                                <input type="number" id="from-value">
                                <select id="from-unit"></select>
                            </div>
                            <div class="conversion-input">
                                <input type="number" id="to-value" disabled>
                                <select id="to-unit"></select>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="stats-panel" style="display: none;">
                <h3>Statistiques</h3>
                <div class="stats-grid">
                    <div class="stat-item">
                        <span class="stat-label">Moyenne</span>
                        <span class="stat-value" id="stat-mean">0</span>
                    </div>
                    <div class="stat-item">
                        <span class="stat-label">Médiane</span>
                        <span class="stat-value" id="stat-median">0</span>
                    </div>
                    <div class="stat-item">
                        <span class="stat-label">Écart type</span>
                        <span class="stat-value" id="stat-stddev">0</span>
                    </div>
                </div>
                <div class="data-input">
                    <textarea id="stats-data" placeholder="Entrez vos données (séparées par des virgules)"></textarea>
                    <button id="calculate-stats">Calculer</button>
                </div>
            </div>
        </div>
    </div>

    <div class="settings-modal" id="settings-modal">
        <div class="modal-content">
            <h2>Paramètres</h2>
            <div class="settings-section">
                <h3>Apparence</h3>
                <div class="setting-item">
                    <label>Thème</label>
                    <select id="theme-select">
                        <option value="dark">Sombre</option>
                        <option value="light">Clair</option>
                        <option value="auto">Système</option>
                    </select>
                </div>
            </div>
            <div class="settings-section">
                <h3>Calculs</h3>
                <div class="setting-item">
                    <label>Précision décimale</label>
                    <input type="number" id="decimal-precision" min="0" max="10" value="8">
                </div>
            </div>
            <button class="close-modal">Fermer</button>
        </div>
    </div>

    <div class="shortcuts-modal" id="shortcuts-modal">
        <div class="modal-content">
            <h2>Raccourcis clavier</h2>
            <div class="shortcuts-list">
                <!-- Les raccourcis seront générés dynamiquement -->
            </div>
            <button class="customize-shortcuts-btn">Personnaliser</button>
        </div>
    </div>

    <div class="help-modal" id="help-modal">
        <div class="modal-content">
            <h2>Guide d'utilisation</h2>
            <div class="help-sections">
                <div class="help-section">
                    <h3>Fonctions de base</h3>
                    <ul>
                        <li>Opérations arithmétiques standard</li>
                        <li>Fonctions scientifiques</li>
                        <li>Gestion de la mémoire</li>
                    </ul>
                </div>
                <div class="help-section">
                    <h3>Fonctionnalités avancées</h3>
                    <ul>
                        <li>Mode graphique</li>
                        <li>Conversions d'unités</li>
                        <li>Mode programmeur</li>
                    </ul>
                </div>
                <div class="help-section">
                    <h3>Astuces</h3>
                    <ul>
                        <li>Utilisez les raccourcis clavier</li>
                        <li>Personnalisez vos paramètres</li>
                        <li>Exportez votre historique</li>
                    </ul>
                </div>
            </div>
            <button class="close-modal">Fermer</button>
        </div>
    </div>

    <div class="toast-container"></div>

    <script src="script.js"></script>
</body>
</html> 