Add a footer

Author: bramus

demo/index.html

@@ -173,6 +173,10 @@ <h3 class="card-title">
                 </a>
         </div>
     </main>
+    <footer class="demo-footer">
+        <p>Built by <a href="https://www.bram.us/">Bramus</a>, Chrome Developer Relations Engineer at Google.<br>
+        Source Code available <a href="https://github.com/googlechromelabs/view-transitions-toolkit">on GitHub</a> – <a href="https://www.apache.org/licenses/LICENSE-2.0.txt">Apache License, Version 2.0</a></p>
+    </footer>
     <script>
         document.addEventListener('DOMContentLoaded', () => {
             const currentTheme = localStorage.getItem('theme') || 'system';

demo/measure/index.html

@@ -69,6 +69,10 @@ <h3>Functions Used</h3>
 const boxGroupAnimation = getAnimations(t, "box", ViewTransitionPart.Group)[0];
 const boxGroupGeometry = extractGeometry(boxGroupAnimation);</code></pre>
         </div>
+        <footer class="shell-footer">
+            <p>Built by <a href="https://www.bram.us/">Bramus</a>, Chrome Developer Relations Engineer at Google.<br>
+            Source Code available <a href="https://github.com/googlechromelabs/view-transitions-toolkit">on GitHub</a> – <a href="https://www.apache.org/licenses/LICENSE-2.0.txt">Apache License, Version 2.0</a></p>
+        </footer>
     </aside>
 
     <!-- Theme Switcher Logic -->

demo/navigation-types/index.html

@@ -77,6 +77,10 @@ <h3>Functions Used</h3>
 
 useAutoTypes(routeMap);</code></pre>
         </div>
+        <footer class="shell-footer">
+            <p>Built by <a href="https://www.bram.us/">Bramus</a>, Chrome Developer Relations Engineer at Google.<br>
+            Source Code available <a href="https://github.com/googlechromelabs/view-transitions-toolkit">on GitHub</a> – <a href="https://www.apache.org/licenses/LICENSE-2.0.txt">Apache License, Version 2.0</a></p>
+        </footer>
     </aside>
 
     <script>

demo/optimize/index.html

@@ -66,6 +66,10 @@ <h3>Functions Used</h3>
 optimizeGroupAnimations(t, "*"); // All groups
 optimizeGroupAnimations(t, "box-flip", OPTIMIZATION_STRATEGY.SLIDE); // Specific group</code></pre>
         </div>
+        <footer class="shell-footer">
+            <p>Built by <a href="https://www.bram.us/">Bramus</a>, Chrome Developer Relations Engineer at Google.<br>
+            Source Code available <a href="https://github.com/googlechromelabs/view-transitions-toolkit">on GitHub</a> – <a href="https://www.apache.org/licenses/LICENSE-2.0.txt">Apache License, Version 2.0</a></p>
+        </footer>
     </aside>
 
     <script>

demo/playback-control/index.html

@@ -71,6 +71,10 @@ <h3>Functions Used</h3>
 resume(t); // Resumes all VT animations
 scrub(t, position); // Sets animations to 50% playback</code></pre>
         </div>
+        <footer class="shell-footer">
+            <p>Built by <a href="https://www.bram.us/">Bramus</a>, Chrome Developer Relations Engineer at Google.<br>
+            Source Code available <a href="https://github.com/googlechromelabs/view-transitions-toolkit">on GitHub</a> – <a href="https://www.apache.org/licenses/LICENSE-2.0.txt">Apache License, Version 2.0</a></p>
+        </footer>
     </aside>
 
     <script>

demo/scroll-driven-view-transition/index.html

@@ -72,6 +72,10 @@ <h3>Functions Used</h3>
 pause(document.activeViewTransition);
 scrub(document.activeViewTransition, scrollProgress);</code></pre>
         </div>
+        <footer class="shell-footer">
+            <p>Built by <a href="https://www.bram.us/">Bramus</a>, Chrome Developer Relations Engineer at Google.<br>
+            Source Code available <a href="https://github.com/googlechromelabs/view-transitions-toolkit">on GitHub</a> – <a href="https://www.apache.org/licenses/LICENSE-2.0.txt">Apache License, Version 2.0</a></p>
+        </footer>
     </aside>
 
     <script>

demo/styles.css

@@ -599,6 +599,26 @@ code {
   margin: 1.5rem 0;
 }
 
+.demo-footer, .shell-footer {
+  margin-top: 5rem;
+  padding: 2rem 0;
+  text-align: center;
+  font-size: 0.9rem;
+  color: var(--text-secondary);
+  font-style: italic;
+  opacity: 0.7;
+}
+
+.demo-footer a, .shell-footer a {
+  color: var(--accent-color);
+  text-decoration: none;
+  font-weight: 600;
+}
+
+.demo-footer a:hover, .shell-footer a:hover {
+  text-decoration: underline;
+}
+
 /* Responsive Layout for Demo Shells (Viewport < 1130px) */
 @media (max-width: 1129px) {
   .shell-container {