diff --git a/under_construction/assets/scripts/Controller.js b/under_construction/assets/scripts/Controller.js
index bac8b0e..e22c6cc 100644
--- a/under_construction/assets/scripts/Controller.js
+++ b/under_construction/assets/scripts/Controller.js
@@ -194,7 +194,7 @@ function loadLocalHint(uri) {
     HTML_Canvas_hint.getContext("2d").clearRect(0, 0, HTML_Canvas_hint.width, HTML_Canvas_hint.height);
     var hintNodeTexture = spHintNode.getComponent('cc.Sprite').spriteFrame.getTexture();
     hintNodeTexture.initWithElement(HTML_Canvas_hint);
-    hintNodeTexture.handleLoadedTexture();
+    hintNodeTexture.handleLoadedTexture(true);
 
     var tempDiv = document.getElementById("tempDivHint");
     if (tempDiv === null) {
@@ -210,19 +210,21 @@ function loadLocalHint(uri) {
     var img = document.getElementById('imgheadHint');
     img.onload = function () {
         if (this.complete) {
-            var w = parseFloat(this.width);
-            var h = parseFloat(this.height);
+            setTimeout(function () {
+                var w = parseFloat(img.width);
+                var h = parseFloat(img.height);
 
-            HTML_Canvas_hint.width = parseInt(w);
-            HTML_Canvas_hint.height = parseInt(h);
-            HTML_Canvas_hint.getContext("2d").drawImage(this, 0, 0, HTML_Canvas_hint.width, HTML_Canvas_hint.height);
+                HTML_Canvas_hint.width = parseInt(w);
+                HTML_Canvas_hint.height = parseInt(h);
+                HTML_Canvas_hint.getContext("2d").drawImage(img, 0, 0, HTML_Canvas_hint.width, HTML_Canvas_hint.height);
 
-            var hintNodeTex = spHintNode.getComponent('cc.Sprite').spriteFrame.getTexture();
-            hintNodeTex.initWithElement(HTML_Canvas_hint);
-            hintNodeTex.handleLoadedTexture(true);
+                var hintNodeTex = spHintNode.getComponent('cc.Sprite').spriteFrame.getTexture();
+                hintNodeTex.initWithElement(HTML_Canvas_hint);
+                hintNodeTex.handleLoadedTexture(true);
 
 
-            hasHint = true;
+                hasHint = true;
+            }, 500);
         }
     }
     img.src = uri;
diff --git a/web_code/assets/texture/clear.png b/web_code/assets/texture/clear.png
new file mode 100644
index 0000000..b732ee3
Binary files /dev/null and b/web_code/assets/texture/clear.png differ
diff --git a/web_code/assets/texture/clear.png.meta b/web_code/assets/texture/clear.png.meta
new file mode 100644
index 0000000..6dd2c65
--- /dev/null
+++ b/web_code/assets/texture/clear.png.meta
@@ -0,0 +1,30 @@
+{
+  "ver": "1.0.0",
+  "uuid": "6511e960-bd0c-4423-806b-54b4c36e2d98",
+  "type": "sprite",
+  "wrapMode": "clamp",
+  "filterMode": "bilinear",
+  "subMetas": {
+    "clear": {
+      "ver": "1.0.3",
+      "uuid": "e41b94bc-f374-4ce3-b58f-c64cae3c2434",
+      "rawTextureUuid": "6511e960-bd0c-4423-806b-54b4c36e2d98",
+      "trimType": "auto",
+      "trimThreshold": 1,
+      "rotated": false,
+      "offsetX": 0,
+      "offsetY": 0,
+      "trimX": 0,
+      "trimY": 0,
+      "width": 128,
+      "height": 128,
+      "rawWidth": 128,
+      "rawHeight": 128,
+      "borderTop": 0,
+      "borderBottom": 0,
+      "borderLeft": 0,
+      "borderRight": 0,
+      "subMetas": {}
+    }
+  }
+}
\ No newline at end of file
diff --git a/web_code/assets/texture/eraser.png b/web_code/assets/texture/eraser.png
new file mode 100644
index 0000000..654cf14
Binary files /dev/null and b/web_code/assets/texture/eraser.png differ
diff --git a/web_code/assets/texture/eraser.png.meta b/web_code/assets/texture/eraser.png.meta
new file mode 100644
index 0000000..ea9f277
--- /dev/null
+++ b/web_code/assets/texture/eraser.png.meta
@@ -0,0 +1,30 @@
+{
+  "ver": "1.0.0",
+  "uuid": "39c96e01-73d5-4a24-a151-5b581726759c",
+  "type": "sprite",
+  "wrapMode": "clamp",
+  "filterMode": "bilinear",
+  "subMetas": {
+    "eraser": {
+      "ver": "1.0.3",
+      "uuid": "618e308e-c346-4158-b456-07ff7c7ae7dd",
+      "rawTextureUuid": "39c96e01-73d5-4a24-a151-5b581726759c",
+      "trimType": "auto",
+      "trimThreshold": 1,
+      "rotated": false,
+      "offsetX": 0,
+      "offsetY": 0,
+      "trimX": 3,
+      "trimY": 0,
+      "width": 122,
+      "height": 128,
+      "rawWidth": 128,
+      "rawHeight": 128,
+      "borderTop": 0,
+      "borderBottom": 0,
+      "borderLeft": 0,
+      "borderRight": 0,
+      "subMetas": {}
+    }
+  }
+}
\ No newline at end of file
diff --git a/web_code/assets/texture/github.png b/web_code/assets/texture/github.png
new file mode 100644
index 0000000..113a519
Binary files /dev/null and b/web_code/assets/texture/github.png differ
diff --git a/web_code/assets/texture/github.png.meta b/web_code/assets/texture/github.png.meta
new file mode 100644
index 0000000..a53b930
--- /dev/null
+++ b/web_code/assets/texture/github.png.meta
@@ -0,0 +1,30 @@
+{
+  "ver": "1.0.0",
+  "uuid": "6489523f-0da5-4bb7-855f-ee889a0169ae",
+  "type": "sprite",
+  "wrapMode": "clamp",
+  "filterMode": "bilinear",
+  "subMetas": {
+    "github": {
+      "ver": "1.0.3",
+      "uuid": "1e999005-3002-43a5-889d-f0b4df11ec16",
+      "rawTextureUuid": "6489523f-0da5-4bb7-855f-ee889a0169ae",
+      "trimType": "auto",
+      "trimThreshold": 1,
+      "rotated": false,
+      "offsetX": 0,
+      "offsetY": 0,
+      "trimX": 0,
+      "trimY": 1,
+      "width": 128,
+      "height": 126,
+      "rawWidth": 128,
+      "rawHeight": 128,
+      "borderTop": 0,
+      "borderBottom": 0,
+      "borderLeft": 0,
+      "borderRight": 0,
+      "subMetas": {}
+    }
+  }
+}
\ No newline at end of file
diff --git a/web_code/assets/texture/hint.png b/web_code/assets/texture/hint.png
new file mode 100644
index 0000000..e9d1bf0
Binary files /dev/null and b/web_code/assets/texture/hint.png differ
diff --git a/web_code/assets/texture/hint.png.meta b/web_code/assets/texture/hint.png.meta
new file mode 100644
index 0000000..3f90e98
--- /dev/null
+++ b/web_code/assets/texture/hint.png.meta
@@ -0,0 +1,30 @@
+{
+  "ver": "1.0.0",
+  "uuid": "8067bb52-a1f6-447d-9a61-c2ffe627f582",
+  "type": "sprite",
+  "wrapMode": "clamp",
+  "filterMode": "bilinear",
+  "subMetas": {
+    "hint": {
+      "ver": "1.0.3",
+      "uuid": "9726eb13-68b0-4053-839b-a1a8a3e02f29",
+      "rawTextureUuid": "8067bb52-a1f6-447d-9a61-c2ffe627f582",
+      "trimType": "auto",
+      "trimThreshold": 1,
+      "rotated": false,
+      "offsetX": 0,
+      "offsetY": 0,
+      "trimX": 0,
+      "trimY": 0,
+      "width": 21,
+      "height": 21,
+      "rawWidth": 21,
+      "rawHeight": 21,
+      "borderTop": 0,
+      "borderBottom": 0,
+      "borderLeft": 0,
+      "borderRight": 0,
+      "subMetas": {}
+    }
+  }
+}
\ No newline at end of file
diff --git a/web_code/assets/texture/loading.png b/web_code/assets/texture/loading.png
new file mode 100644
index 0000000..84bf501
Binary files /dev/null and b/web_code/assets/texture/loading.png differ
diff --git a/web_code/assets/texture/loading.png.meta b/web_code/assets/texture/loading.png.meta
new file mode 100644
index 0000000..83b02d9
--- /dev/null
+++ b/web_code/assets/texture/loading.png.meta
@@ -0,0 +1,30 @@
+{
+  "ver": "1.0.0",
+  "uuid": "d3d2abf6-d6ec-4bd1-b97d-b390e72502ac",
+  "type": "sprite",
+  "wrapMode": "clamp",
+  "filterMode": "bilinear",
+  "subMetas": {
+    "loading": {
+      "ver": "1.0.3",
+      "uuid": "92e1e7c0-bc4d-4fd2-82ee-44694d832851",
+      "rawTextureUuid": "d3d2abf6-d6ec-4bd1-b97d-b390e72502ac",
+      "trimType": "auto",
+      "trimThreshold": 1,
+      "rotated": false,
+      "offsetX": 0,
+      "offsetY": 0,
+      "trimX": 32,
+      "trimY": 0,
+      "width": 64,
+      "height": 128,
+      "rawWidth": 128,
+      "rawHeight": 128,
+      "borderTop": 0,
+      "borderBottom": 0,
+      "borderLeft": 0,
+      "borderRight": 0,
+      "subMetas": {}
+    }
+  }
+}
\ No newline at end of file
diff --git a/web_code/assets/texture/pencil.png b/web_code/assets/texture/pencil.png
new file mode 100644
index 0000000..ff33629
Binary files /dev/null and b/web_code/assets/texture/pencil.png differ
diff --git a/web_code/assets/texture/pencil.png.meta b/web_code/assets/texture/pencil.png.meta
new file mode 100644
index 0000000..c3be774
--- /dev/null
+++ b/web_code/assets/texture/pencil.png.meta
@@ -0,0 +1,30 @@
+{
+  "ver": "1.0.0",
+  "uuid": "4b64e92a-7987-4e83-ae03-b4e882d86c72",
+  "type": "sprite",
+  "wrapMode": "clamp",
+  "filterMode": "bilinear",
+  "subMetas": {
+    "pencil": {
+      "ver": "1.0.3",
+      "uuid": "994047c6-b97d-4314-b65e-242c4018dd6b",
+      "rawTextureUuid": "4b64e92a-7987-4e83-ae03-b4e882d86c72",
+      "trimType": "auto",
+      "trimThreshold": 1,
+      "rotated": false,
+      "offsetX": 0,
+      "offsetY": 0,
+      "trimX": 0,
+      "trimY": 0,
+      "width": 128,
+      "height": 128,
+      "rawWidth": 128,
+      "rawHeight": 128,
+      "borderTop": 0,
+      "borderBottom": 0,
+      "borderLeft": 0,
+      "borderRight": 0,
+      "subMetas": {}
+    }
+  }
+}
\ No newline at end of file
diff --git a/web_code/assets/texture/right-arrow.png b/web_code/assets/texture/right-arrow.png
new file mode 100644
index 0000000..1bcdbea
Binary files /dev/null and b/web_code/assets/texture/right-arrow.png differ
diff --git a/web_code/assets/texture/right-arrow.png.meta b/web_code/assets/texture/right-arrow.png.meta
new file mode 100644
index 0000000..b0120b6
--- /dev/null
+++ b/web_code/assets/texture/right-arrow.png.meta
@@ -0,0 +1,30 @@
+{
+  "ver": "1.0.0",
+  "uuid": "f3e484a6-e102-4f96-ab1a-3885cdb12154",
+  "type": "sprite",
+  "wrapMode": "clamp",
+  "filterMode": "bilinear",
+  "subMetas": {
+    "right-arrow": {
+      "ver": "1.0.3",
+      "uuid": "30c8483d-f4b9-4bf4-a9dd-f92bc217f4b5",
+      "rawTextureUuid": "f3e484a6-e102-4f96-ab1a-3885cdb12154",
+      "trimType": "auto",
+      "trimThreshold": 1,
+      "rotated": false,
+      "offsetX": 0,
+      "offsetY": 0,
+      "trimX": 6,
+      "trimY": 6,
+      "width": 116,
+      "height": 116,
+      "rawWidth": 128,
+      "rawHeight": 128,
+      "borderTop": 0,
+      "borderBottom": 0,
+      "borderLeft": 0,
+      "borderRight": 0,
+      "subMetas": {}
+    }
+  }
+}
\ No newline at end of file