String css = R"( body { font-family: 'Arial', sans-serif; text-align: center; background-color: #3498db; color: #fff; margin: 0; padding: 0; display: inline-grid; flex-wrap: wrap; justify-content: space-around; align-items: center; height: 100px; } h1 { color: #349; margin-top: 20px; } form { margin: auto; max-width: 80%; } input { padding: 1em; margin: 1em 0; width: 100%; } .buttons { list-style: none; padding: 0; } .button { display: inline-block; background-color: #2980b9; color: #fff; /*! padding: 15px; */ margin: 5px; border: none; border-radius: 5px; cursor: pointer; transition: background-color 0.3s ease; width: 150px; } .button:hover { background-color: #2471a3; } .buttons.data { display: flex; li { width: 150px; } } li { display: block; margin: 10px 0; } .notification { position: fixed; top: 10px; right: 10px; background-color: #2ecc71; color: #fff; padding: 10px; border-radius: 5px; display: none; } .button.low { background-color: red; } .button.high { background-color: green;} .control-container { background: #C0C0C0; width: 128px; height: 64px; margin: 10px; display: flex; flex-direction: column; justify-content: center; align-items: center; border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); transition: background-color 0.3s ease-in-out; /* Ajout de la transition */ } h2,button { margin: 0; font-size: 1rem; } p { font-size: 1.2rem; margin-top: 20px; } /* Ajout des styles au survol ou au clic */ .control-container:hover, .control-container:active { background-color: #a0a0a0; } .arcade-button { display: inline-block; position: relative; width: 150px; height: 150px; background-color: #3498db; border: 10px solid #2c3e50; border-radius: 50%; overflow: hidden; cursor: pointer; transition: background-color 0.3s ease-in-out; } .arcade-button:hover { background-color: #2980b9; } .button-content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #ecf0f1; font-size: 1.5rem; text-align: center; } )";