quickbuild/templates/Electron App (Advanced)/sections/about.html

A mature, feature-complete application generator with an emphasis on speed

<template class="task-template">
  <div id="about-modal" class="about modal">
    <div class="about-wrapper">
      <header class="about-header">
        <img class="about-logo" src="assets/img/about.png" srcset="assets/img/about.png 1x, assets/img/about@2x.png 2x" alt="Electron API Demos">
      </header>
      <main class="about-sections">
        <section class="about-section play-along">
          <h2>Play Along</h2>
            <p>Use the demo snippets in an Electron app of your own. The <a href="https://github.com/electron/electron-quick-start">Electron Quick Start<span class="u-visible-to-screen-reader">(opens in new window)</span></a> app is a bare-bones setup that pairs with these demos. Follow the instructions here to get it going. You'll need <a href="https://desktop.github.com/">Git<span class="u-visible-to-screen-reader">(opens in new window)</span></a> and <a href="https://nodejs.org/">Node.js<span class="u-visible-to-screen-reader">(opens in new window)</span></a> on your computer to do this.</p>
<pre><code class="language-bash">$ git clone https://github.com/electron/electron-quick-start
$ cd electron-quick-start
$ npm install &amp;&amp; npm start
</code></pre>
        </section>
        <section class="about-section about-code">
          <h2>About the Code</h2>
            <p>The <a href="https://github.com/electron/electron-api-demos">source code of this app<span class="u-visible-to-screen-reader">(opens in new window)</span></a> has been organized with ease of navigation in mind.</p>

            <p>Nearly all (over 90%) of <a href="http://babeljs.io/docs/learn-es2015/">ES2015<span class="u-visible-to-screen-reader">(opens in new window)</span></a> is available to use in Electron <em>without the use of pre-processors</em> because it's a part of <a href="https://developers.google.com/v8/">V8<span class="u-visible-to-screen-reader">(opens in new window)</span></a> which is built into Electron.</p>

            <p>To illustrate this we've made use of <code>const</code>, for unchanging declarations; <code>let</code> for scoped declarations; and template strings like: <code>`Result is ${output}`</code> in the demo snippets.</p>
        </section>
        <footer class="about-section footer">
          <div class="rainbow-button-wrapper">
            <button id="get-started" class="about-button modal-hide">Get Started</button>
          </div>
        </footer>
      </main>
    </div>
  </div>
</template>