uploader.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BPMN engine reader</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://static.robotwebtools.org/EventEmitter2/current/eventemitter2.min.js"></script>
    <script src="https://static.robotwebtools.org/roslibjs/current/roslib.js"></script>
</head>

<body>
    <section id="page">
        <drop>
            <div class="drag-area">
                <div class="icon"><i class="fas fa-cloud-upload-alt"></i></div>
                <header>Drag & Drop to Upload File</header>
                <span>OR</span>
                <button>Browse File</button>
                <input type="file" hidden>
            </div>
        </drop>
        <console>
            <p id="myLog"></p>
        </console>
        <bottons>
            <div class="filename">
                <h1 id="myFile">No file</h1>
            </div>
            <div class="bottons-area">
                <button class="start">Start</button>
            </div>
        </bottons>
    </section>
    <link rel="stylesheet" href="style.css">
    <script src="bundle.js"></script>
</body>

</html>