From ebe72ec9aaf6382bd66272d974d854707a2e1e11 Mon Sep 17 00:00:00 2001
From: Is Isilon <wassname@wassname.org>
Date: Tue, 19 Jan 2016 08:47:52 +0800
Subject: [PATCH] example

---
 index.html           | 88 +++++++++++++++++++++++++++++++-------------
 svg2cube-frontend.js |  2 +-
 2 files changed, 64 insertions(+), 26 deletions(-)
diff --git a/index.html b/index.html
index ff0cb29..17db6fc 100755
--- a/index.html
+++ b/index.html
@@ -3,50 +3,82 @@
 <head>
     <meta charset="utf-8">
     <title>svg2cube</title>
+    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"></link>
     <style>
-    .thumbnail {
-        height: 15em;
-    }
-    .center-block
-    {
-        text-align:center;
-        display:block;
-    }
-    #svg2cube {
-        display: inline-block;
-        width: 512px;
-    }
+        .thumbnail {
+            height: 10em;
+        }
+
+        .center-block {
+            text-align: center;
+            display: block;
+        }
+
+        #svg2cube {
+        }
     </style>
 </head>
 
-<body class="center-block">
-    <h1>svg2cube - demo</h1>
+<body class="container"><div class="row"><div class="col-sm-6"><div class="">
+    <h1 class=" center-block">svg2cube</h1>
 
 
     <div>
         <p>Fold a svg panel into a cube and take images at isometric angles. </p>
 
-        <p>The buttons allow you to try different parameters. </p>
+        <p>The panel on the right allows you to try different parameters. </p>
     </div>
 
-
+<div class="row"><div class="col-sm-6  center-block">
     <h2>Input</h2>
-    <img src="inputs/panels.svg" class="thumbnail"></img>
-    <h2>Rendered output</h2>
-    <img src="images/result.png"  class="thumbnail" ></img>
-
+    <img src="inputs/panels.svg" class="thumbnail center-block"></img>
+    <br>
+</div><div class="col-sm-6  center-block">
+    <h2>Output</h2>
+    <img src="images/result.png" class="thumbnail  center-block"></img>
+    <br></div></div>
     <h2>Real time output</h2>
-    <div id="loading"><h2>Loading...<h2></div>
+    <div id="loading">
+        <h2>Loading...<h2></div>
     <div id="svg2cube"></div>
-
+</div></div></div>
 </body>
 
 
 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5.1/dat.gui.min.js"></script>
 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
-
-
 <script src="svg2cube-frontend.js"></script>
+<script>
+function has3d() {
+    if (!window.getComputedStyle) {
+        return false;
+    }
+
+    var el = document.createElement('p'),
+        has3d,
+        transforms = {
+            'webkitTransform':'-webkit-transform',
+            'OTransform':'-o-transform',
+            'msTransform':'-ms-transform',
+            'MozTransform':'-moz-transform',
+            'transform':'transform'
+        };
+
+    // Add it to the body to get the computed style.
+    document.body.insertBefore(el, null);
+
+    for (var t in transforms) {
+        if (el.style[t] !== undefined) {
+            el.style[t] = "translate3d(1px,1px,1px)";
+            has3d = window.getComputedStyle(el).getPropertyValue(transforms[t]);
+        }
+    }
+
+    document.body.removeChild(el);
+
+    return (has3d !== undefined && has3d.length > 0 && has3d !== "none");
+}
+</script>
 
 <script>
     var cube1
@@ -60,6 +92,12 @@
 
     window.onload = function() {
 
+        if (!has3d()){
+            var warning = $('<h2>Sorry <a  href="http://caniuse.com/#feat=transforms3d">your browser does not support css-3d</a></h2>')
+            $('#svg2cube').append(warning);
+
+        }
+
         cube1 = new SvgCube.SvgCube('inputs/panels.svg', {
             rotateX: 45,
             clipCircle: false,
@@ -67,7 +105,7 @@
                 "stroke": 'black', // stroke color for outline
                 "stroke-width": 0, // outline width
             },
-            size: 128,
+            size: 256,
         });
 
         var gui = new dat.GUI();
diff --git a/svg2cube-frontend.js b/svg2cube-frontend.js
index 9af5be6..11c1838 100755
--- a/svg2cube-frontend.js
+++ b/svg2cube-frontend.js
@@ -93,7 +93,7 @@
         var o = this.options;
 
         /** Write sides if they have not already been written **/
-        if ($('body>.cube').length === 0) {
+        if ($('body .cube').length === 0) {
             var cube = $('<div class="cube cube2"></div>');
 
             var imageFront = $('' +
