index.html

<!DOCTYPE html>
<html>

<head>
	<title>CityGML Viewer</title>
    <script type="text/javascript" src="sax.js"></script>
    <script type="text/javascript" src="libtess.min.js"></script>
    <script type="text/javascript" src="gl-matrix-min.js"></script>
    <script type="text/javascript" src="proj4.js"></script>
    <script id="vs" type="x-shader/x-vertex">
        #version 300 es
        precision mediump float;

        in vec3 position;
        in vec3 color;
        uniform mat4 projViewModel;
        out vec3 interpolatedColor;

        void main() {
            gl_Position = projViewModel * vec4(position, 1);
            interpolatedColor = color;
        }
    </script>
    <script id="fs" type="x-shader/x-fragment">
        #version 300 es
        precision mediump float;

        in vec3 interpolatedColor;
        out vec4 outputColor;

        void main() {
            outputColor = vec4(interpolatedColor, 1);
        }
    </script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

    <style>
        canvas {
            width: 100%;
            height: 90%;
            padding-left: 0;
            padding-right: 0;
            margin-top: 20px;
            margin-left: auto;
            margin-right: auto;
            display: block;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col mt-2">
                <div class="input-group">
                    <label class="input-group-text" for="input">Open CityGML file for viewing </label>
                    <input class="form-control" id="input" type="file" />
                </div>
            </div>
        </div>
        <div id="progressDiv" class="row" style="display: none;">
            <div class="col">
                <div class="progress" >
                    <div id="progress" style="transition: none;" class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
                  </div>
            </div>
        </div>
    </div>

    <canvas id="viewport"></canvas>
    <script type="text/javascript" src="run_sax.js"></script>
</body>

</html>