Added new logo for navigation. New layout. Restructured Rendering Sho…

…wcase.
weacw · Apr 5, 2019 · 96acbbe · 96acbbe
1 parent d42a3e1
commit 96acbbe
Show file tree

Hide file tree

Showing 98 changed files with 801 additions and 593 deletions.
diff --git a/LICENSE b/LICENSE
@@ -187,7 +187,7 @@
       same "printed page" as the copyright notice for easier
       identification within third-party archives.
 
-   Copyright 2018 Google
+   Copyright 2019 Google
 
    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.

diff --git a/examples/accessibility.html b/examples/accessibility.html
@@ -1,6 +1,6 @@
 <!--
 /*
- * Copyright 2018 Google Inc. All Rights Reserved.
+ * Copyright 2019 Google Inc. All Rights Reserved.
  * Licensed under the Apache License, Version 2.0 (the 'License');
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at

diff --git a/examples/accessibility/auto-rotate.html b/examples/accessibility/auto-rotate.html
@@ -1,6 +1,6 @@
 <!--
 /*
- * Copyright 2018 Google Inc. All Rights Reserved.
+ * Copyright 2019 Google Inc. All Rights Reserved.
  * Licensed under the Apache License, Version 2.0 (the 'License');
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at

diff --git a/examples/accessibility/controls.html b/examples/accessibility/controls.html
@@ -1,6 +1,6 @@
 <!--
 /*
- * Copyright 2018 Google Inc. All Rights Reserved.
+ * Copyright 2019 Google Inc. All Rights Reserved.
  * Licensed under the Apache License, Version 2.0 (the 'License');
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at

diff --git a/examples/accessibility/multiple.html b/examples/accessibility/multiple.html
@@ -1,6 +1,6 @@
 <!--
 /*
- * Copyright 2018 Google Inc. All Rights Reserved.
+ * Copyright 2019 Google Inc. All Rights Reserved.
  * Licensed under the Apache License, Version 2.0 (the 'License');
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at

diff --git a/examples/accessibility/poster.html b/examples/accessibility/poster.html
@@ -1,6 +1,6 @@
 <!--
 /*
- * Copyright 2018 Google Inc. All Rights Reserved.
+ * Copyright 2019 Google Inc. All Rights Reserved.
  * Licensed under the Apache License, Version 2.0 (the 'License');
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at

diff --git a/examples/accessibility/reveal.html b/examples/accessibility/reveal.html
@@ -1,6 +1,6 @@
 <!--
 /*
- * Copyright 2018 Google Inc. All Rights Reserved.
+ * Copyright 2019 Google Inc. All Rights Reserved.
  * Licensed under the Apache License, Version 2.0 (the 'License');
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at

diff --git a/examples/animation.html b/examples/animation.html
@@ -1,6 +1,6 @@
 <!--
 /*
- * Copyright 2018 Google Inc. All Rights Reserved.
+ * Copyright 2019 Google Inc. All Rights Reserved.
  * Licensed under the Apache License, Version 2.0 (the 'License');
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
@@ -43,25 +43,25 @@
   <!--<script src="../node_modules/@magicleap/prismatic/prismatic.min.js"></script>-->
 
 </head>
-<body class="multiple-samples">
-
-  <div id="header">
-    <a class="icon-button icon-return" href="../index.html"></a>
-    <a class="icon-github icon-button" href="https://github.com/GoogleWebComponents/model-viewer/blob/master/examples/lighting-and-environment.html"></a>
-  </div>
-
-  <div class="center intro">
-    <h2>Animation</h2>
-    <h4>This page showcases how you can control models with animations</h4>
-  </div>
+<body>
 
   <div class="sample">
     <div class="demo" id="demo-container-1"></div>
     <div class="content">
+
+      <div id="header">
+        <a class="icon-button icon-modelviewer" href="../index.html"></a>
+        <a class="icon-github icon-button" href="https://github.com/GoogleWebComponents/model-viewer/blob/master/examples/lighting-and-environment.html"></a>
+      </div>
+
       <div class="wrapper">
-        <div class="index">1</div>
-        <h2>Automatically play animations with the
-          <span class="attribute">autoplay</span> attribute</h2>
+
+        <div id="intro">
+          <h3>Animation</h3>
+          <p>Use &lt;model-viewer&gt; to show off your animated models. This page showcases how you can control models with animations</p>
+        </div>
+
+        <h2 class="demo-title">Automatically play animations with the<span class="attribute">autoplay</span> attribute</h2>
         <example-snippet stamp-to="demo-container-1" highlight-as="html">
           <template>
             <model-viewer
@@ -80,8 +80,8 @@ <h2>Automatically play animations with the
     <div class="demo" id="demo-container-2"></div>
     <div class="content">
       <div class="wrapper">
-        <div class="index">2</div>
-        <h2>Select a specific animation with <span class="attribute">animation-name</span></h2>
+
+        <h2 class="demo-title">Select a specific animation with <span class="attribute">animation-name</span></h2>
         <example-snippet stamp-to="demo-container-2" highlight-as="html">
           <template>
             <model-viewer
@@ -101,8 +101,8 @@ <h2>Select a specific animation with <span class="attribute">animation-name</spa
     <div class="demo" id="demo-container-3"></div>
     <div class="content">
       <div class="wrapper">
-        <div class="index">3</div>
-        <h2>Animations crossfade when you change them</h2>
+
+        <h2 class="demo-title">Animations crossfade when you change them</h2>
         <example-snippet stamp-to="demo-container-3" highlight-as="html">
           <template>
             <model-viewer
@@ -134,8 +134,8 @@ <h2>Animations crossfade when you change them</h2>
     <div class="demo" id="demo-container-4"></div>
     <div class="content">
       <div class="wrapper">
-        <div class="index">4</div>
-        <h2>A paused model shows the first frame of the configured animation</h2>
+
+        <h2 class="demo-title">A paused model shows the first frame of the configured animation</h2>
         <example-snippet stamp-to="demo-container-4" highlight-as="html">
           <template>
             <model-viewer
@@ -163,11 +163,10 @@ <h2>A paused model shows the first frame of the configured animation</h2>
 
   <div class="footer">
     <div class="attribution">
-      RobotExpressive by <a href="https://www.patreon.com/quaternius">Tomás Laulhé</a>,
-      licensed under <a href="https://creativecommons.org/publicdomain/zero/1.0/">CC0</a>
-      (<a href="https://github.com/mrdoob/three.js/tree/dev/examples/models/gltf/RobotExpressive">source</a>)
+      <a href="https://github.com/mrdoob/three.js/tree/dev/examples/models/gltf/RobotExpressive">RobotExpressive</a> by <a href="https://www.patreon.com/quaternius">Tomás Laulhé</a>,
+      licensed under <a href="https://creativecommons.org/publicdomain/zero/1.0/">CC0</a>.
     </div>
-    <div class="copyright">©Copyright 2018 Google Inc. Licensed under the Apache License 2.0.</div>
+    <div class="copyright">©Copyright 2019 Google Inc. Licensed under the Apache License 2.0.</div>
 
   <script src="./scripts/helpers.js"></script>
 

diff --git a/examples/assets/ic_github_black_24dp.svg b/examples/assets/ic_github_black_24dp.svg
diff --git a/examples/assets/ic_model_viewer.svg b/examples/assets/ic_model_viewer.svg
diff --git a/examples/assets/ic_modelviewer.svg b/examples/assets/ic_modelviewer.svg
diff --git a/examples/augmented-reality.html b/examples/augmented-reality.html
@@ -1,6 +1,6 @@
 <!--
 /*
- * Copyright 2018 Google Inc. All Rights Reserved.
+ * Copyright 2019 Google Inc. All Rights Reserved.
  * Licensed under the Apache License, Version 2.0 (the 'License');
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
@@ -24,18 +24,6 @@
   <link type="text/css" href="styles/examples.css" rel="stylesheet" />
   <link rel="shortcut icon" type="image/png" href="assets/favicon.png"/>
 
-  <style>
-    @media only screen and (max-width: 800px) {
-      #demo-container {
-        height: 450px;
-      }
-      model-viewer {
-        padding-top: 60px;
-        background-color: #222;
-      }
-    }
-  </style>
-
   <!-- The following libraries and polyfills are recommended to maximize browser support -->
 
   <!-- 🚨 REQUIRED: Web Components polyfill to support Edge and Firefox < 63 -->
@@ -55,43 +43,42 @@
 
 </head>
 <body>
-
-  <div id="header">
-    <a class="icon-button icon-return" href="../index.html"></a>
-    <a class="icon-github icon-button" href="https://github.com/GoogleWebComponents/model-viewer/blob/master/examples/augmented-reality.html"></a>
-  </div>
-
   <div class="sample">
-      <div id="demo-container" class="demo">
-        <example-snippet stamp-to="demo-container" highlight-as="html">
-            <template>
-                <model-viewer src="assets/Astronaut.glb"
-                    alt="A 3D model of an astronaut"
-                    background-color="#222"
-                    ios-src="assets/Astronaut.usdz"
-                    magic-leap
-                    unstable-webxr></model-viewer>
-            </template>
-        </example-snippet>
-      </div>
+      <div id="demo-container" class="demo"></div>
       <div class="content">
+        <div id="header">
+          <a class="icon-button icon-modelviewer" href="../index.html"></a>
+          <a class="icon-github icon-button" href="https://github.com/GoogleWebComponents/model-viewer/blob/master/examples/augmented-reality.html"></a>
+        </div>
         <div class="wrapper">
-          <div class="center heading">
-            <h2>Augmented Reality</h2>
+          <div class="heading">
+            <h2 class="demo-title">Augmented Reality</h2>
             <h4>This demonstrates several augmented reality features, including <span class="attribute">unstable-webxr</span>, <span class="attribute">magic-leap</span> and <span class="attribute">ios-src</span>.</h4>
           </div>
-          <!-- <h4 class="">iOS, Magic Leap & WebXR</h4> -->
+
+          <example-snippet stamp-to="demo-container" highlight-as="html">
+              <template>
+                  <model-viewer src="assets/Astronaut.glb"
+                      alt="A 3D model of an astronaut"
+                      background-color="#222"
+                      ios-src="assets/Astronaut.usdz"
+                      magic-leap
+                      unstable-webxr></model-viewer>
+              </template>
+          </example-snippet>
+
+          <h3 style="margin-top: 40px;">iOS, Magic Leap & WebXR</h3>
           <ul class="list-attribute">
             <li>
-              <h4>ios-src</h4>
+              <div>ios-src</div>
               <p>Provides augmented reality on supported iOS 12+ devices via AR Quick Look, but requires an additional USDZ model.</p>
             </li>
             <li>
-              <h4>magic-leap</h4>
+              <div>magic-leap</div>
               <p>Provides augmented reality on Magic Leap's Helio browser. Requires that the primary model be a GLB file, and the <a href="https://www.npmjs.com/package/@magicleap/prismatic">@magicleap/prismatic</a> library.</p>
             </li>
             <li>
-              <h4>unstable-webxr</h4>
+              <div>unstable-webxr</div>
               <p>Provides augmented reality via the experimental <a href="https://immersive-web.github.io/webxr/">WebXR Device API</a>, implemented in Chrome Canary only behind flags. For more information see the <a href="https://codelabs.developers.google.com/codelabs/ar-with-webxr/#1">AR with WebXR Codelab</a>.</p>
             </li>
           </ul>
@@ -102,11 +89,10 @@ <h4>unstable-webxr</h4>
 
   <div class="footer">
     <div class="attribution">
-      Astronaut by <a href="https://poly.google.com/user/4aEd8rQgKu2">Poly</a>,
-      licensed under <a href="https://creativecommons.org/licenses/by/2.0/">CC-BY</a>
-      (<a href="https://poly.google.com/view/dLHpzNdygsg">source</a>)
+      <a href="https://poly.google.com/view/dLHpzNdygsg">Astronaut</a> by <a href="https://poly.google.com/user/4aEd8rQgKu2">Poly</a>,
+      licensed under <a href="https://creativecommons.org/licenses/by/2.0/">CC-BY</a>.
     </div>
-    <div class="copyright">©Copyright 2018 Google Inc. Licensed under the Apache License 2.0.</div>
+    <div class="copyright">©Copyright 2019 Google Inc. Licensed under the Apache License 2.0.</div>
   </div>
 
   <!-- Documentation-specific dependencies: -->

diff --git a/examples/dependencies/index.js b/examples/dependencies/index.js
@@ -1,5 +1,5 @@
 /*
- * Copyright 2018 Google Inc. All Rights Reserved.
+ * Copyright 2019 Google Inc. All Rights Reserved.
  * Licensed under the Apache License, Version 2.0 (the 'License');
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at