mirror of
https://github.com/arthur-pbty/site-convertisseur-de-base.git
synced 2026-06-03 15:07:37 +02:00
Arthur
72 lines
3.7 KiB
HTML
72 lines
3.7 KiB
HTML
<!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> |