jointjs
Version: 
JavaScript diagramming library
47 lines (46 loc) • 1.67 kB
HTML
<html>
    <head>
        <meta charset="utf8"/>
        <title>Jigsaw Puzzle</title>
        <link rel="stylesheet" type="text/css" href="../../build/joint.css" />
        <style>
            body {
                background: black;
                color: #ddd;
            }
            #paper {
                border: 1px solid #ddd;
                background: radial-gradient(ellipse at center, #45484d 0%,#000000 100%);
                margin: auto;
            }
         #controls {
             margin: auto;
             text-align: center;
         }
        </style>
    </head>
    <body>
        <div id="paper"></div>
        <div id="controls">
            <label for="image-picker">Image:</label>
            <select id="image-picker">
                <option value="./images/cow.jpg" selected>cow</option>
                <option value="./images/mountain.jpg">mountain</option>
                <option value="./images/tree.jpg">tree</option>
            </select>
            <label for="size-picker">Size:</label>
            <select id="size-picker">
                <option value="[2,2,200]">small</option>
                <option value="[4,5,100]" selected>normal</option>
                <option value="[20,20,50]">large</option>
            </select>
        </div>
        <!-- Dependencies: -->
        <script src="../../node_modules/jquery/dist/jquery.js"></script>
        <script src="../../node_modules/lodash/lodash.js"></script>
        <script src="../../node_modules/backbone/backbone.js"></script>
        <script src="../../build/joint.js"></script>
        <script src="./src/puzzle.js"></script>
    </body>
</html>