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>