javascript/6-extrusions/index.html

<html>
    <head>
        <meta charset="utf-8">
        <title>Compute RestHopper Test</title>
        <style>
            body { margin: 0; }
            canvas { width: 100%; height: 100%; }
            input {width: 90%;}
            #container {position: relative;}
            #container canvas, #overlay { position: absolute;}
            #overlay {z-index: 1; width: 100%}
        </style>
    </head>
    <body>
        <div id="container">
            <div id="overlay">
                <div>
                    <input type="range" id="count" name="count" min="1" max="100" value="35" step="1" onmouseup="onSliderChange()" ontouchend="onSliderChange()">
                    <label for="count">Count</label>
                </div>
                <div>
                    <input type="range" id="radius" name="radius" min="0" max="10.00" value="5.00" step="0.1" onmouseup="onSliderChange()" ontouchend="onSliderChange()">
                    <label for="radius">Radius</label>
                </div>
                <div>
                    <input type="range" id="length" name="length" min="0" max="10.00" value="1.00" step="0.1" onmouseup="onSliderChange()" ontouchend="onSliderChange()">
                    <label for="length">Length</label>
                </div>
            </div>

            <div id="canvas"></div>
        </div>

        <script type="text/javascript" src="https://threejs.org/build/three.js"></script>
        <script type="text/javascript" src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
        <script type="text/javascript" src="../common/rhino3dm.js"></script>
        <script type="text/javascript" src="../common/compute.rhino3d.js"></script>
        <script type="text/javascript" src="app.js"></script>
    </body>
</html>