vendure/docs/layouts/partials/intro.html

<div class="vendure-intro">
    <div class="intro-container">
        <div class="scene scene-0">
            <div class="cube cube1">
                <div class="cube__face cube__face--front">
                    <div class="intro-admin-ui">
                        <div class="intro-top-bar">admin ui</div>
                        <div class="intro-content">
                            <ul class="intro-nav">
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                            </ul>
                            <ul class="intro-list-view">
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="cube__face cube__face--back"></div>
                <div class="cube__face cube__face--right"></div>
                <div class="cube__face cube__face--left"></div>
                <div class="cube__face cube__face--top"></div>
                <div class="cube__face cube__face--bottom"></div>
            </div>
            <div class="cube cube2">
                <div class="cube__face cube__face--front">
                    <div class="intro-terminal">
                        <div class="intro-terminal-controls"></div>
                        <div class="intro-text-area"></div>
                        <div class="intro-gql-logo">
                            <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEACAMAAABrrFhUAAAAn1BMVEUAAADoPbXoPrXxh9DzmNbxhtDpRbjpQrbrVb3rS7noP7XuasXxhM/oP7XpQbbrUbzrWL7pQLbtZMPpQbbsXsHrUrzpQ7fsYcLtZ8TpQ7fqSLnqTrvrVr7vd8rqSbnrUbzpQrbsW7/sXcDqS7roQLXpSLjpRbjpR7jqSrnpRLfqTbrpRrjqS7rqT7vpQrbsWr/qSrnpR7jrVb3rUrzoPLQ23Ut2AAAANHRSTlMA/fgNAwnEvmpE8hIH9edfOuob4idYzSEW055wPwuYUdkxK4bupLmtjch4s39m3jWSqEdL1MFtPgAADYpJREFUeAHtnXeTozgTxlsgBxMMGJwD45yzvv9ne6/e3arRejQ0vaPRMti/P+/qbvCDQnc/jQQv/hUvuJ2E9zS9h4nN4eng3WCyjR2LMcuJt5MgeS4NvNEgZkKCxYNGBZ4FHl4d8QHnGnJ4CtxDUyhpHlx4AmZ7Jj6B7WdQesKOyKATQskJ+yKTfskVmHUEQmcGJcbdC5S9C6WFH5hAYQcOZSVsihw0QygplavIxbUC5eTmiFw4DSglfCByMuBQRpJY5CROoIwETOSEBeWeATgDKCFuR+Sm40L5SJoiN80EysfIF7nxR1A+UiZyw1IoH22KAO2XAKXiNQVei+BrG3wFQq9QONmL3Ky7UDbc4RtlF+jXXSgTlbTKBAmrdvegLPDz0hFknMGUQynozpvir4gPrTJM/mOfib+EdQIbfjbebWWJL2Dtbx78XPh04IgvspjM4KfSOsRCA6ddD34idtBh4hGrekJ+7dYSj7Bteww/DT7aK35J/9i7IrZYSxUx+esRhx9Fclkocrx5FxoLZMrfoLuJxAeiTQI/h95OMdD95ZmDvRcIKxd4uPbFI+xt6MLPYNzeMvEIq6YVAAgsgWAdkf9FwVG/PvH79bU6AqXfzR5EBUc9gS+/J7DcIbJddiKf/YcfdZZb8c4c/s9s8skyUmTc7CV8GkurXQPcWSMNgrQxc2EkydY8Z28kLhQV715jWZu4NxDvTDyQ4BfxzrKSGUqsbt4PSnpPu/eM7u5I//whwE3epEQ4VQST9ETZfNKLBPLuShoXO3hgKL3rmoukE8VLlO1jn2Gp3NGSVsAePNCrSvIMkYSyEIky9Rm7fWldbMMHUl/aNRO0pGDtDUbHvGLbHofPmE5yjFI+l6u+Y6SJbsMJ80sB99RPTIf3RvXLulatrpbz9nSsSnp3udaps/QTohHWRhmFH1ZYP2+iPJ6258tVtVpbX+ph72sq2LdL32HiNyyq7Wb84a8FHZanpFtZqt+vBN+ox4hcWEYTZT7b1aL3J3Y6l4YNf4vdXj3KzpqTM0eT3rpLmOHYKiFHWUIRZYVcHiiT5qNMzkoSiQIP5R8nR6Ot96Q3Uvz7TRcAW+PV1Jlin5BIlHH2+99rSUuFQiQa42FTqGHV0a8fpXwj8qdP6l2+6sInuDVlpCCPuKxEefSp+9IcjoFIb5KRuMYBh7FyTlZT+S9hcZ4EEisiuXYt9YAHcUaSPekBidaaiQycYXhVJr3yn8EifRlVtnDh+astzvI8dEQG7NoCAu5VZOMv1EmvksdcT4kiXxyBEnWiHDkim6ULufEuTFBAIrPxWs72OWRxEO/sbVDjNfaWoMI2HuTl6Gs1sdr+Q70nA7lmZAVIzZ2GH0BOZm+CSLxrZfym7R8VPwS5athpaXVd3maQC28iaDiTKWSwY3/UfBHkujE76PXdJh7kIYwEAbRCMztJUt0B5SatcPEUqUBZgkIUQg44aQCw/tHOP54GHqBwwn/g1mne+4Rr+LKFWKXFXyh1yCCJMuFbHCQgx3HQOj0ypTUsGlwKyVBYHVC8tcjN3AMdizqybWBU5iI3Vw//64Q9cAMKqNs6HjhgbAg7YQswQsLesqoAAhLYEUNHNZUVYccOtbb1v2EpFh7a05MH2pilf4gwFBqaugnJHSF9xNvQcYZAGLQoiynIYOk9AqmAIHFeiPwcAGNOESAECUKBBwcrIUmEFAHmekfAGWTwEh8OUkQ0MAJ0rQG4FSSDG0XG1oA2o++qgJb5r2PAQIwEA7sAPQ6oVUACMXpwKFaSxLimbdWi6nkBCdTqw6GYiRIXrZGgdxVaPvNv55zDGtaQgIm8XLnObDBOCKs4CUVDQUtHAs+OgDOLRU6WHkggDR808JYSCW9JeGUaP2/zUw2RnJZIMvV1VoRgtBC5WNk5Y3kPUJBcAnl4e6WtJkgYAn6aL5uLz0BHlU3ekCFAGAAI05PIwaACn2Gv1dE3nQPLVU+oDIi+AL78ovRnOetgXSBDryjN+jqdIajg3mCUaqnpaaspppFAYBePkIthlVGnzvVUdXUZRXzoYDGQq7U/wMPr+qqVi04jp6/gIf0B6xaQaA2sjDT4yBEriODG6TKK+DEjLbYGPSBi7yKhhm1vPKcVdJoCgkajiN+2hB4h4ndfEtGmpSN+xaEvKa1NhPRu0LCD2sc+wUHIKRmMBnrb3N4WDwcf+gT92hf6qu37pC9psKgephzLYSlWkH6jiE8PVWkO+v3J3f5ir/Bc2tPHpKLy2gYU/UYRjKVBOMd6hUlusdUAjHOM17HohBHpzNmGJc8YowJUlrgVhIPUVysFFiB1qKkH3Sjy0+IK4NbodTCgG0W9wgmAPCYdRNqiCpB8wQoiTa6kmAIQlio6HmF5NS8AfbPSYBQVToAxyQqigxtF5gWgB6x06EG2eQHwlIUOmmYVToAd3QrSbxSZFQApW+jnpjCKiiIAv2CFKzpIsY0XSoARoSVal1FUJAHsPaEPSZNRtLILJAClJVqbUXQsjgC4gUWHbroZFoBuYdJB5trcvADUtUk/uPFuUADkdBwdIPttxbwAxEYW/cze0IjLsAB0K4gO3n5lSAAzVhChjbpuWAANLdEGjCKTAhAaWunQm3CNC4BUqgxcW9gMjQpgygqiG0WmBECq1SbA1x2DAriKlmgT1JUOjAEBzFlBdKPIiACIZ2mOu9qFNSwA3yg+bzRDRfVJpgEB6B+4mqiORSPzApA7V+jQP8s2IAASkpqkq65CGRSgp2iJNslRXYc0J4DOlmg9bdQGBDBsBRGPZzEgAHI6jgmQRzAgANLFbgTFILwZEQCZgCZAliEDAhi1gijn7ZgQwKwVhNO25FDEgAAmrSB6G7UZARQXJRgFSUeMCIB/0WoExXk7BgQwbwVRztsxIYB5K4hiFBkRgHI6jmGjaGhCAPNWEPW8ne8VwLwVRDaKvlcA/HQcsyie6DsFUOhtHsye/EYBFDMOxbxR9I0CqNZc82Cntn2jABpOxzHQRv2NAnQVcZd5kDalhCoA4dNZ/HQc4yiyE42fztq3Pz6edizzVhDdKLKcPz6evtlfuDtz5dPPpjSMVKFQ40vX7NA4r33sYkzzYG3UGq/ZqcfY1ajFAbvONaYfoeFeLORy3GKBXOhrTVwg0Vsy+l0N5qDfi8GuPSDgDpjIxN9xKBR8Z4lMGOmanTkTCE4bCkXg6Lxmp+0IlNMUTKLhADw/oGRXOGsbCoO9FhiE7JVvRB6s4GfsgfRW1mlT4OAFUYP0tlqP1NwIYWAIGB4ABBdHSnkR9hUoBJW9yMkpAdB4uno0hUIwjbQerDwQuRl6lQLgDYXOo7XdjshNXCsEschNvwcYs0iUmMUZMO6WKDEsBYyAiRJCqJIORanZAcZOlJrDawRk81oDXrvA9InjAHokWC0EeiNBTsgFNnbF/vdUCLekLrnObFAsJjP497QujHAzEqkegBMfWmAEPbeQv3XpFSH6resm4bR76Df0miD93n2TzCYLQaA5JVSFCSwuCfwLeruTILHhBF+AxGnYA9OM21smSPS7BGeICKu2x2ASHqq7F/S4eXzOBBX/GnIwRrKJBBFG+bzZRt1hxRhpbrpgBnf4xh7vPRkgo5YNbI39Ac5utLbEI6xfd03YAGmVfQxHvJ2f7Y73NHaIREcO47YiALFqdw++F35ePr5rZzIFAK+eMSusi0vWuR5/Gvv8umantYsVY2M55fCNdOfNx9+2uv0Snd8+jQnjekVfl1i06cpxiNHo2D322eO0O7rv6mwi9fp8hr9inK6c7Gt2vNvKUoyQow36Uf615rz7eM2OeMDZp2P4W8aNS8dh4jcsqu4eB7gtvZOHUakZPh04H+bbmSuu2Ynen9jpbEbjL/YKh8fNulatrpbzYGqrstF500Si3Do8rjislipltqfBfLmqVmvXzTF09Yjv2WOPf/5qlo4iOt61vjXpZW9DN+uJxxlPrB3vXlMsBVs8OqZfeyYvxUXCrb8ploK1nkQ5uSzo3b+mUW9B0SXRn/TSx5YZeHj1FUWoYU930nva9aBIIBk6q6YVnUkvfX8xSW94UgZiHBRwd9ZoB0G7MXM5Pq0M1d/0L1hSvCbjzerLTuSz//CjzrI+8/Ck10AFVv+WJUXsEuP7ssn+DLGv9/Hj1sqMZRkGKvXW6u69a6RKs3x5dKuS3sGUQ0HBw1b5B/TmkVASzXtyeE1PLwxDSFzkITxdMfEJbDWVEyz1FCo4SKIc2KO+yKA/wpPen4KrTJRrJ8S9CyYf4l456S0YePmKjEUPpMxDL2DSwZPeH4GXSrs5nWiTgAHMmBh0fCSdNoBRG8to0ltAI9Nk0ltAK9to0lv8ZobazYPSMVuJ3NShVNAbEAccygS9BbXjQvlICHFxM4HyMfIJIdAIykfKSF3t5aNNEaD9EuA1BZ56EXRGr23wuQOhrfvsoTCUkYDyZUsZSWL6SRdPOgcGHEpJwxG5WIygnFSuIhdLD0pK2BQ5aIZQVviBCRS2g/Li7gXK2oUSM+sIhG0CpSbsi0z6Zyg5YeYY2J6h9Mz2n7fIrBN4AtxDUyhp7lx4Cnio6ptYIJ0wpcIbTU5MSLDTZOTBM8G7wWQbOxZjlhNvJ0GXw9PB7W54T9N72LU5vHjxj/gff2MyxP2hfRQAAAAASUVORK5CYII=">
                        </div>
                    </div>
                    <div class="data-flow-left"></div>
                    <div class="data-flow-right"></div>
                </div>
                <div class="cube__face cube__face--back"></div>
                <div class="cube__face cube__face--right"></div>
                <div class="cube__face cube__face--left"></div>
                <div class="cube__face cube__face--top"></div>
                <div class="cube__facecube__face--bottom"></div>
            </div>
            <div class="cube cube3">
                <div class="cube__face cube__face--front">
                    <div class="intro-storefront">
                        <div class="intro-top-bar">
                            storefront
                        </div>
                        <ul class="intro-content">
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                        </ul>
                    </div>
                </div>
                <div class="cube__face cube__face--back"></div>
                <div class="cube__face cube__face--right"></div>
                <div class="cube__face cube__face--left"></div>
                <div class="cube__face cube__face--top"></div>
                <div class="cube__face cube__face--bottom"></div>
            </div>
        </div>
        <div class="intro-controls">
            <button id="replay" title="replay animation"><img src="{{ "svg/clr-icon-replay-all.svg" | relURL }}"></button>
            <div class="jump">
                <button id="scene-0-button" title="jump to animation scene 0"></button>
                <button id="scene-1-button" title="jump to animation scene 1"></button>
                <button id="scene-2-button" title="jump to animation scene 2"></button>
                <button id="scene-3-button" title="jump to animation scene 3"></button>
                <button id="scene-4-button" title="jump to animation scene 4"></button>
                <button id="scene-5-button" title="jump to animation scene 5"></button>
                <button id="scene-6-button" title="jump to animation scene 6"></button>
            </div>
        </div>
        <div class="intro-title">
            <h1>vendure</h1>
            <div class="subhead">
                A modern, headless <a href="https://graphql.org/">GraphQL</a>-based e-commerce framework built with <a href="http://www.typescriptlang.org">TypeScript</a> & <a href="https://nodejs.org">Nodejs</a>
            </div>
            <img src="{{ "svg/clr-icon-angle.svg" | relURL }}" class="more-icon" />
        </div>
    </div>
</div>