midi-device.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body{font-family: Arial, Helvetica, sans-serif; margin: 20px;}
        h1{margin: 0;}
        h2{margin: 0 0 10px 0;}
        .midi{background-color:aliceblue; padding: 20px; border-radius: 10px; display:inline-block; border:solid 3px skyblue}
        .midi p{font-weight: bold}
        .midi li{margin-bottom: 5px;}
        .info{border: solid 3px lightgreen; background-color: snow; padding: 10px; border-radius: 10px; display:inline-block;}
    </style>
    <title>Midi device information</title>
</head>
<body>
    <h1>MIDI device information</h1>
    <p>Display information about the connected midi devices.</p>

    <div class="midi"></div>
    
    <script src="./midi-device.js"></script>
</body>
</html>