diff --git a/www/viewer/css/style.css b/www/viewer/css/style.css
new file mode 100644
index 0000000..6e5c46f
--- /dev/null
+++ b/www/viewer/css/style.css
@@ -0,0 +1,26 @@
+body {
+ font-family: Abel, Arial;
+
+ -webkit-user-select: none; /* webkit (safari, chrome) browsers */
+ -moz-user-select: none; /* mozilla browsers */
+ -khtml-user-select: none; /* webkit (konqueror) browsers */
+ -ms-user-select: none; /* IE10+ */
+}
+
+div.item {
+ width:300px;
+ height:260px;
+ border:1px solid black;
+ display: inline-block;
+ overflow: hidden;
+ background-color: white;
+ margin-right: 5px;
+}
+
+div.item.selected {
+ background-color: #7cf;
+}
+
+div.item input[type='checkbox'] {
+ position: absolute;
+}
\ No newline at end of file
diff --git a/www/viewer/index.html b/www/viewer/index.html
new file mode 100644
index 0000000..b879447
--- /dev/null
+++ b/www/viewer/index.html
@@ -0,0 +1,22 @@
+
+
+
+ Doodle3D
+
+
+
+
+Actions:
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/www/viewer/js/main.js b/www/viewer/js/main.js
new file mode 100644
index 0000000..5ac2411
--- /dev/null
+++ b/www/viewer/js/main.js
@@ -0,0 +1,104 @@
+var api = 'http://10.0.0.40/d3dapi/sketch/';
+
+$.get(api+'list', function(data) { //?id=00003
+
+ if (data.status=='success') {
+ var list = data.data.list;
+
+ loadSketch(list, function() {
+ console.log('done');
+ });
+ }
+
+ // numSketches = data.data.number_of_sketches;
+
+ // loadSketch(1,function() {
+ // console.log('done');
+ // });
+
+});
+
+function loadSketch(list,cb) {
+
+ // console.log('loadSketch',list.length);
+ var item = list.pop();
+ console.log(item);
+
+ if (list.length>0) {
+ loadSketch(list,function() {
+ cb();
+ })
+ }
+
+ // if (num<=numSketches) {
+
+ // $.get(api+'?id='+num, function(data) {
+
+ // if (data.status=='success') {
+ // console.log('loaded',num)
+ // addItem(num,data.data.data);
+ // } else {
+ // console.log('failed to load',num)
+ // }
+
+ // loadSketch(num+1,function() {
+ // cb();
+ // });
+ // });
+
+ // // cb();
+ // } else {
+ // cb();
+ // }
+ // } else {
+ // console.log('test')
+ // cb();
+ // }
+}
+
+function addItem(num,svgData) {
+ var path = svgData.split('d="')[1].split('"')[0];
+ var item = $('');
+ var svg = '
';
+
+ item.click(function() {
+ $(this).toggleClass('selected');
+ })
+ item.append(svg);
+
+ $('#svgContainer').append(item);
+
+ //''+num+'
');
+}
+
+
+function deleteSelectedSketches() {
+ if (confirm('Do you want to delete '+$('.item.selected').length+' drawings?')) {
+ $('.item.selected').each(function() {
+ var id = $(this).attr('data');
+
+ $.post(api+'delete'+id, {id:id}, function(data) {
+ console.log(data);
+ });
+
+ })
+ $('.item.selected').fadeOut();
+ }
+}
+
+function deleteSketch(num) {
+
+ //var selectedItems = $("input[type=checkbox]:checked");
+ // console.log('deleteSketch',num)
+ //confirm('Are you sure?'+selectedItems.length);
+}
+
+function selectAll() {
+ $('.item').addClass('selected');
+}
+
+function deselectAll() {
+ $('.item').removeClass('selected');
+}
+
+