electron/atom/browser/default_app/index.html

<html>
<head>
  <title>Electron</title>
  <style>
    body {
      color: #45828E;
      background-color: #A5ECFA;
      font-family: 'Helvetica Neue', 'Open Sans', Helvetica, Arial, sans-serif;
      padding: 0;
      margin: 0;
    }

    .container {
      padding: 15px 30px;
    }

    h2 {
      background-color: #76C7D7;
      color: #FAF7F3;
      font-weight: 400;
      padding: 15px 30px;
      margin: 0;
    }

    a {
      color: #39AEC6;
      text-decoration: none;
    }

    a:hover {
      text-decoration: underline;
    }

    pre, code {
      font-family: "Menlo","Lucida Console",monospace;
      border: 1px solid #076274;
      background-color: #076274;
      color: #C5F3FC;
      border-radius: 3px;
    }

    pre {
      white-space: pre-wrap;
      font-size: 13px;
      line-height: 19px;
      overflow: auto;
      padding: 6px 10px;
    }

    code {
      padding: 1px 4px 1px 4px;
      font-size: 13px;
    }

    #holder {
      border: 2px dashed #448691;
      margin: 0 auto;
      height: 300px;
      color: #45828E;
      font-size: 40px;
      line-height: 300px;
      text-align: center;
      -webkit-user-select: none;
    }

    #holder.hover {
      background-color: #7BDCEF;
    }
  </style>
</head>
<body>
  <script>
    const electron = require('electron');
    const remote = electron.remote;
    const shell = electron.shell;

    var execPath = remote.process.execPath;
    var command = execPath + ' path-to-your-app';

    document.onclick = function(e) {
      e.preventDefault();
      if (e.target.tagName == 'A')
        shell.openExternal(e.target.href);
      return false;
    };
    document.ondragover = document.ondrop = function(e) {
      e.preventDefault();
      return false;
    };
  </script>

  <h2>
    <script>
      document.write(`Welcome to Electron ${process.versions.electron}`)
    </script>
  </h2>

  <div class="container">

    <p>
    To run your app with Electron, execute the following command in your
    Console (or Terminal):
    </p>

    <script>document.write('<pre>' + command + '</pre>')</script>

    <p>
    The <code>path-to-your-app</code> should be the path to your own Electron
    app.
    </p>

    <p>You can read the
    <script>
      document.write(
        `<a href='https://github.com/atom/electron/blob/v${process.versions.electron}/docs/tutorial/quick-start.md'>quick start</a>`
      );
    </script>
    guide in Electron's
    <script>
      document.write(
        `<a href='https://github.com/atom/electron/tree/v${process.versions.electron}/docs#readme'>docs</a>`
      );
    </script>
    to learn how to write one.
    </p>

    <p>
    Or you can just drag your app here to run it:
    </p>

    <div id="holder">
      Drag your app here to run it
    </div>

  </div>

  <script>
    var holder = document.getElementById('holder');
    holder.ondragover = function () {
      this.className = 'hover';
      return false;
    };
    holder.ondragleave = holder.ondragend = function () {
      this.className = '';
      return false;
    };
    holder.ondrop = function (e) {
      this.className = '';
      e.preventDefault();

      var file = e.dataTransfer.files[0];
      require('child_process').execFile(execPath, [file.path], {
        detached: true, stdio: 'ignore'
      }).unref();
      return false;
    };
  </script>
</body>
</html>
Add partial APIs for WebContents and NavigationController. 2013-04-18 15:09:53 +08:00			`<html>`
			`<head>`
Atom Shell -> Electron 2015-04-08 10:16:10 -07:00			`<title>Electron</title>`
Add some styles. 2014-05-05 16:02:52 +08:00			`<style>`
			`body {`
Use colors from Electron site 2016-02-17 09:51:24 -08:00			`color: #45828E;`
			`background-color: #A5ECFA;`
			`font-family: 'Helvetica Neue', 'Open Sans', Helvetica, Arial, sans-serif;`
Update header style 2016-02-17 10:01:18 -08:00			`padding: 0;`
			`margin: 0;`
			`}`

			`.container {`
			`padding: 15px 30px;`
Add some styles. 2014-05-05 16:02:52 +08:00			`}`

			`h2 {`
Update header style 2016-02-17 10:01:18 -08:00			`background-color: #76C7D7;`
			`color: #FAF7F3;`
Add some styles. 2014-05-05 16:02:52 +08:00			`font-weight: 400;`
Update header style 2016-02-17 10:01:18 -08:00			`padding: 15px 30px;`
			`margin: 0;`
Add some styles. 2014-05-05 16:02:52 +08:00			`}`

			`a {`
Use colors from Electron site 2016-02-17 09:51:24 -08:00			`color: #39AEC6;`
Add some styles. 2014-05-05 16:02:52 +08:00			`text-decoration: none;`
			`}`
Use colors from Electron site 2016-02-17 09:51:24 -08:00
Add some styles. 2014-05-05 16:02:52 +08:00			`a:hover {`
			`text-decoration: underline;`
			`}`

			`pre, code {`
			`font-family: "Menlo","Lucida Console",monospace;`
Use background color as border color 2016-02-17 10:21:05 -08:00			`border: 1px solid #076274;`
Use colors from Electron site 2016-02-17 09:51:24 -08:00			`background-color: #076274;`
			`color: #C5F3FC;`
Add some styles. 2014-05-05 16:02:52 +08:00			`border-radius: 3px;`
			`}`

			`pre {`
			`white-space: pre-wrap;`
			`font-size: 13px;`
			`line-height: 19px;`
			`overflow: auto;`
			`padding: 6px 10px;`
			`}`
Enable dragging to open an app. 2014-05-05 16:30:37 +08:00
Use colors from Electron site 2016-02-17 09:51:24 -08:00			`code {`
			`padding: 1px 4px 1px 4px;`
			`font-size: 13px;`
			`}`

Enable dragging to open an app. 2014-05-05 16:30:37 +08:00			`#holder {`
Tweak holder styles 2016-02-17 09:53:16 -08:00			`border: 2px dashed #448691;`
Enable dragging to open an app. 2014-05-05 16:30:37 +08:00			`margin: 0 auto;`
			`height: 300px;`
Tweak holder styles 2016-02-17 09:53:16 -08:00			`color: #45828E;`
Enable dragging to open an app. 2014-05-05 16:30:37 +08:00			`font-size: 40px;`
			`line-height: 300px;`
			`text-align: center;`
Linkify the docs in default_app. 2014-05-05 16:46:25 +08:00			`-webkit-user-select: none;`
Enable dragging to open an app. 2014-05-05 16:30:37 +08:00			`}`
Use colors from Electron site 2016-02-17 09:51:24 -08:00
Enable dragging to open an app. 2014-05-05 16:30:37 +08:00			`#holder.hover {`
Only change background on hover 2016-02-17 10:07:32 -08:00			`background-color: #7BDCEF;`
Enable dragging to open an app. 2014-05-05 16:30:37 +08:00			`}`
Add some styles. 2014-05-05 16:02:52 +08:00			`</style>`
Add partial APIs for WebContents and NavigationController. 2013-04-18 15:09:53 +08:00			`</head>`
			`<body>`
Show a friendly guide when atom-shell is opened without app. 2014-05-05 15:45:50 +08:00			`<script>`
Use require('electron') in Electron's code 2015-11-12 18:28:04 +08:00			`const electron = require('electron');`
			`const remote = electron.remote;`
			`const shell = electron.shell;`

			`var execPath = remote.process.execPath;`
Show a friendly guide when atom-shell is opened without app. 2014-05-05 15:45:50 +08:00			`var command = execPath + ' path-to-your-app';`
Add a context menu for the initial default app. 2013-05-14 21:39:00 +08:00
Linkify the docs in default_app. 2014-05-05 16:46:25 +08:00			`document.onclick = function(e) {`
			`e.preventDefault();`
			`if (e.target.tagName == 'A')`
Use require('electron') in Electron's code 2015-11-12 18:28:04 +08:00			`shell.openExternal(e.target.href);`
Linkify the docs in default_app. 2014-05-05 16:46:25 +08:00			`return false;`
			`};`
Enable dragging to open an app. 2014-05-05 16:30:37 +08:00			`document.ondragover = document.ondrop = function(e) {`
			`e.preventDefault();`
			`return false;`
Linkify the docs in default_app. 2014-05-05 16:46:25 +08:00			`};`
Add a context menu for the initial default app. 2013-05-14 21:39:00 +08:00			`</script>`
Show a friendly guide when atom-shell is opened without app. 2014-05-05 15:45:50 +08:00
Make links to docs, point to the correct version - Links to docs in the default app, pointed to the docs in the master branch. I changed them to point to the docs that match Electron's version. - Added Electron's version to the header of the default app, so it will be easier to figure out what version is currently running. 2015-11-21 02:26:59 +02:00			`<h2>`
			`<script>`
Remove v before version 2016-02-17 10:01:35 -08:00			document.write(`Welcome to Electron ${process.versions.electron}`)
Make links to docs, point to the correct version - Links to docs in the default app, pointed to the docs in the master branch. I changed them to point to the docs that match Electron's version. - Added Electron's version to the header of the default app, so it will be easier to figure out what version is currently running. 2015-11-21 02:26:59 +02:00			`</script>`
			`</h2>`
Show a friendly guide when atom-shell is opened without app. 2014-05-05 15:45:50 +08:00
Update header style 2016-02-17 10:01:18 -08:00			`<div class="container">`
Show a friendly guide when atom-shell is opened without app. 2014-05-05 15:45:50 +08:00
Update header style 2016-02-17 10:01:18 -08:00			`<p>`
under -> in 2016-02-17 10:11:35 -08:00			`To run your app with Electron, execute the following command in your`
Update header style 2016-02-17 10:01:18 -08:00			`Console (or Terminal):`
			`</p>`
Show a friendly guide when atom-shell is opened without app. 2014-05-05 15:45:50 +08:00
Update header style 2016-02-17 10:01:18 -08:00			`<script>document.write('<pre>' + command + '</pre>')</script>`

			`<p>`
			`The <code>path-to-your-app</code> should be the path to your own Electron`
Add docs sentence in new paragraph 2016-02-17 10:02:53 -08:00			`app.`
			`</p>`

			`<p>You can read the`
Update header style 2016-02-17 10:01:18 -08:00			`<script>`
			`document.write(`
			`<a href='https://github.com/atom/electron/blob/v${process.versions.electron}/docs/tutorial/quick-start.md'>quick start</a>`
			`);`
			`</script>`
			`guide in Electron's`
			`<script>`
			`document.write(`
			`<a href='https://github.com/atom/electron/tree/v${process.versions.electron}/docs#readme'>docs</a>`
			`);`
			`</script>`
on -> to learn 2016-02-17 10:10:36 -08:00			`to learn how to write one.`
Update header style 2016-02-17 10:01:18 -08:00			`</p>`

			`<p>`
			`Or you can just drag your app here to run it:`
			`</p>`
Enable dragging to open an app. 2014-05-05 16:30:37 +08:00
Update header style 2016-02-17 10:01:18 -08:00			`<div id="holder">`
			`Drag your app here to run it`
			`</div>`
Enable dragging to open an app. 2014-05-05 16:30:37 +08:00
			`</div>`

			`<script>`
			`var holder = document.getElementById('holder');`
			`holder.ondragover = function () {`
			`this.className = 'hover';`
			`return false;`
			`};`
			`holder.ondragleave = holder.ondragend = function () {`
			`this.className = '';`
			`return false;`
			`};`
			`holder.ondrop = function (e) {`
			`this.className = '';`
			`e.preventDefault();`

			`var file = e.dataTransfer.files[0];`
			`require('child_process').execFile(execPath, [file.path], {`
			`detached: true, stdio: 'ignore'`
			`}).unref();`
			`return false;`
			`};`
			`</script>`
Add partial APIs for WebContents and NavigationController. 2013-04-18 15:09:53 +08:00			`</body>`
			`</html>`