[REF] github page: move page to docs folder on master branch

Currently, some of the things on the playground must be changed directly
on the master branch while other things require checking out the
gh-pages branch and making the modifications there. Even when changes
need to be made on the master branch, all changes that are not direcly
in owl itself need to be copied by hand to the gh-pages branch.

This commit moves all files that exist on the gh-pages branch to the
master branch in the docs folder, this change will require configuring
the github page to use the docs folder instead of a separate branch, but
will make maintenance of the github page and playground easier going
forward.

docs/playground/templates.xml

@@ -0,0 +1,59 @@
+<templates>
+  <div t-name="TabbedEditor" class="tabbed-editor" t-att-style="props.style">
+    <div class="tabBar" t-att-class="{resizeable: props.resizeable}" t-on-mousedown="onMouseDown">
+        <t t-foreach="['js', 'xml', 'css']" t-as="tab" t-key="tab">
+            <a t-ref="{{tab}}" t-if="props[tab] !== false" t-key="tab" class="tab flash" t-att-class="{active: state.currentTab===tab}" t-on-click="() => setTab(tab)">
+                <t t-esc="tab"/>
+            </a>
+        </t>
+    </div>
+    <div class="code-editor" t-ref="editor"></div>
+  </div>
+
+  <div t-name="Root" class="playground">
+      <div class="left-bar" t-att-class="{split: state.splitLayout}"
+           t-att-style="leftPaneStyle">
+        <div class="menubar">
+          <a class="btn run-code flash" t-on-click="runCode" title="Execute this Code">▶ Run</a>
+          <select t-on-change="onSampleChange">
+            <option t-foreach="samples" t-as="sample" t-key="sample_index">
+              <t t-esc="sample.description"/>
+            </option>
+          </select>
+          <a class="btn flash" t-on-click="exportStandaloneApp" title="Download zip that bundles this app with a tiny python web server"><i class="fas fa-download"></i></a>
+          <a class="layout-selector flash" t-on-click="toggleLayout" title="Toggle Layout"><i class="fas"  t-att-class="state.splitLayout ?  'fa-toggle-on' : 'fa-toggle-off'"></i></a>
+          <a class="btn flash share-code" t-on-click="shareCode" title="Copy a link to this playground"><span>Share</span><span class="copied-notification" t-if="state.copied">Copied link to clipboard!</span></a>
+        </div>
+        <TabbedEditor
+            js="state.js"
+            css="!state.splitLayout and state.css"
+            xml="!state.splitLayout and state.xml"
+            style="topEditorStyle"
+            updateCode="updateCode"/>
+        <t t-if="state.splitLayout">
+          <div class="separator horizontal"/>
+          <TabbedEditor
+             js="false"
+             css="state.css"
+             xml="state.xml"
+             resizeable="true"
+             updatePanelHeight.bind="updatePanelHeight"
+             updateCode="updateCode"/>
+        </t>
+      </div>
+      <div class="separator vertical" t-on-mousedown="onMouseDown"/>
+      <div class="right-pane">
+        <div class="welcome" t-if="state.displayWelcome">
+          <div>🦉 Odoo Web Library 🦉</div>
+          <div>v<t t-esc="version"/></div>
+          <div class="url"><a href="https://github.com/odoo/owl">https://github.com/odoo/owl</a></div>
+          <div class="note">
+            <p>
+              Note: these examples make use of recent features of Javascript, and require a recent browser to work without a transpilation step! Among other things, it uses class fields and import maps. If you encounter issues, make sure your browser is up to date.
+            </p>
+          </div>
+        </div>
+        <div class="content" t-ref="content"/>
+      </div>
+  </div>
+</templates>