base index
diff --git a/player/index.html b/player/index.html
index 624eecd..d0aeabd 100644
--- a/player/index.html
+++ b/player/index.html
@@ -2,27 +2,6 @@
 <meta charset="UTF-8">
 <head>
     <style>
-
-        .bm_color1 {
-            fill: #EC592B;
-            stroke: #EC592B;
-        }
-
-        .bm_color2 {
-            fill: #F8C916;
-            stroke: #F8C916;
-        }
-
-        .bm_color3 {
-            fill: #3CC6F2;
-            stroke: #3CC6F2;
-        }
-
-        .bm_color4 {
-            fill: #7A54A2;
-            stroke: #7A54A2;
-        }
-
         body{
             background-color:#ccc;
             margin: 0px;
@@ -31,8 +10,8 @@
         }
         #bodymovin{
             background-color:#fff;
-            width:300px;
-            height:300px;
+            width:100%;
+            height:100%;
             /*width:800px;
             height:500px;*/
             display:block;
@@ -112,53 +91,23 @@
     <script src="js/utils/expressions/LayerInterface.js"></script>
     <!-- endbuild -->
     <script src="js/module.js"></script>
-    <script src="http://lab.nearpod.com/bodymovin/demo/colors/jscolor.min.js"></script>
     <!-- <script src="bodymovin.js"></script> -->
 </head>
 <body>
-<div class="colorControls">
-    <input class="jscolor" value="EC592B" id="color1">
-    <input class="jscolor" value="F8C916" id="color2">
-    <input class="jscolor" value="3CC6F2" id="color3">
-    <input class="jscolor" value="7A54A2" id="color4">
-</div>
 <div id="bodymovin"></div>
 
 <script>
-    var sheet = document.styleSheets[0];
-    var rules = sheet.cssRules || sheet.rules;
-    var color1 = document.getElementById('color1');
-    var color2 = document.getElementById('color2');
-    var color3 = document.getElementById('color3');
-    var color4 = document.getElementById('color4');
 
-
-
-    function changeRuleColor(rule, color) {
-        rules[rule].style.fill = '#' + color;
-        rules[rule].style.stroke = '#' + color;
-    }
-
-    function checkColor() {
-        changeRuleColor(0, color1.value);
-        changeRuleColor(1, color2.value);
-        changeRuleColor(2, color3.value);
-        changeRuleColor(3, color4.value);
-    }
-
-    setInterval(checkColor, 10);
-
-    var bodymovinContainer = document.getElementById('bodymovin');
     var count = 0;
     var animData = {
         container: document.getElementById('bodymovin'),
-        renderer: 'svg',
+        renderer: 'canvas',
         loop: true,
         prerender: false,
         autoplay: true,
         autoloadSegments: false,
         //animationData: anim2
-        path: 'exports/render/gift.json'
+        path: 'exports/bm/data.json'
     };
 
     var anim;