Add files via upload

2026-06-03 15:07:37 +02:00 · 2024-07-14 00:26:33 +02:00
parent 8f68820a99
commit d9d8e3c31c
2 changed files with 110 additions and 0 deletions
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Convertisseur de Base</title>
+    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
+    <style>
+      /* Styles existants */
+      .dark {
+        --tw-bg-opacity: 1;
+        background-color: rgba(17, 24, 39, var(--tw-bg-opacity)); /* bg-gray-900 */
+      }
+      .dark .bg-white {
+        --tw-bg-opacity: 1;
+        background-color: rgba(31, 41, 55, var(--tw-bg-opacity)); /* bg-gray-800 */
+      }
+      .dark .text-gray-700 {
+        --tw-text-opacity: 1;
+        color: rgba(229, 231, 235, var(--tw-text-opacity)); /* text-gray-200 */
+      }
+      
+      /* Nouveaux styles pour inputs et selects en thème sombre */
+      .dark .shadow {
+        --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+        box-shadow: var(--tw-shadow);
+      }
+      .dark input[type="text"],
+      .dark select {
+        background-color: rgba(31, 41, 55, var(--tw-bg-opacity)); /* bg-gray-800 */
+        color: rgba(229, 231, 235, var(--tw-text-opacity)); /* text-gray-200 */
+        border-color: rgba(156, 163, 175, var(--tw-border-opacity)); /* border-gray-400 */
+      }
+      .dark input[type="text"]:focus,
+      .dark select:focus {
+        border-color: rgba(99, 102, 241, var(--tw-border-opacity)); /* border-indigo-500 */
+        --tw-ring-opacity: 0.5;
+        --tw-ring-color: rgba(99, 102, 241, var(--tw-ring-opacity)); /* ring-indigo-500 */
+        box-shadow: 0 0 0 2px var(--tw-ring-color);
+      }
+    </style>
+</head>
+<body class="bg-gray-100 p-8">
+  <button id="toggleTheme" class="mt-4 bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">Thème Sombre</button>
+    <div class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden p-5">
+        <div class="mb-4">
+            <h1 class="font-bold text-xl mb-2 text-gray-700">Convertisseur de Base</h1>
+        </div>
+        <div class="mb-4">
+            <label for="baseSource" class="block text-gray-700 text-sm font-bold mb-2">Base de départ:</label>
+            <select id="baseSource" class="shadow border rounded py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"></select>
+        </div>
+        <div class="mb-4">
+            <label for="baseDestination" class="block text-gray-700 text-sm font-bold mb-2">Base d'arrivée:</label>
+            <select id="baseDestination" class="shadow border rounded py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"></select>
+        </div>
+        <div class="mb-4">
+            <label for="numberInput" class="block text-gray-700 text-sm font-bold mb-2">Nombre à convertir:</label>
+            <input type="text" id="numberInput" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
+        </div>
+        <div class="flex items-center justify-between">
+            <button id="convertButton" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">Convertir</button>
+        </div>
+        <div class="mt-4">
+            <label for="resultOutput" class="block text-gray-700 text-sm font-bold mb-2">Résultat:</label>
+            <input type="text" id="resultOutput" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" readonly>
+        </div>
+    </div>
+
+    <script src="main.js"></script>
+</body>
+</html>
@@ -0,0 +1,38 @@
+const convertButton = document.getElementById('convertButton');
+const baseSource = document.getElementById('baseSource');
+const baseDestination = document.getElementById('baseDestination');
+const numberInput = document.getElementById('numberInput');
+const resultOutput = document.getElementById('resultOutput');
+const toggleThemeButton = document.getElementById('toggleTheme');
+
+for (let i = 2; i <= 36; i++) {
+  let option = new Option(i, i);
+  baseSource.add(option.cloneNode(true));
+  baseDestination.add(option);
+}
+
+// Convert and display result with error handling
+convertButton.addEventListener('click', () => {
+    const sourceBase = parseInt(baseSource.value);
+    const destinationBase = parseInt(baseDestination.value);
+    const number = numberInput.value.trim();
+
+    try {
+        if (!number.match(/^[0-9A-F]+$/i)) {
+            throw new Error('Nombre invalide pour la base donnée');
+        }
+        const result = parseInt(number, sourceBase).toString(destinationBase);
+        if (isNaN(result)) {
+            throw new Error('Conversion impossible');
+        }
+        resultOutput.value = result.toUpperCase();
+    } catch (error) {
+        resultOutput.value = 'Erreur';
+    }
+});
+
+// Toggle dark theme
+toggleThemeButton.addEventListener('click', () => {
+    document.body.classList.toggle('dark');
+    toggleThemeButton.textContent = document.body.classList.contains('dark') ? 'Thème Clair' : 'Thème Sombre';
+});