2013-04-18 07:09:53 +00:00
|
|
|
<html>
|
|
|
|
|
<head>
|
2015-04-08 17:16:10 +00:00
|
|
|
<title>Electron</title>
|
2014-05-05 08:02:52 +00:00
|
|
|
<style>
|
|
|
|
|
body {
|
2016-04-26 16:16:59 +00:00
|
|
|
color: #205161;
|
2016-04-26 16:25:46 +00:00
|
|
|
font-family: Roboto, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", "Oxygen", "Ubuntu", "Cantarell", "Open Sans", sans-serif;
|
2016-02-17 18:01:18 +00:00
|
|
|
margin: 0;
|
2016-05-04 08:38:03 +00:00
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
2016-02-17 18:01:18 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.container {
|
2016-05-04 08:38:03 +00:00
|
|
|
margin: 15px 30px 30px 30px;
|
|
|
|
|
flex: 1;
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
2014-05-05 08:02:52 +00:00
|
|
|
}
|
|
|
|
|
|
2016-05-04 08:50:45 +00:00
|
|
|
.container > * {
|
|
|
|
|
margin: 15px 0 0 0;
|
2014-05-05 08:02:52 +00:00
|
|
|
}
|
|
|
|
|
|
2016-04-26 16:16:59 +00:00
|
|
|
.header {
|
|
|
|
|
background-color: #2f3241;
|
|
|
|
|
border-bottom: 1px solid #1a1b23;
|
2016-04-26 17:06:46 +00:00
|
|
|
color: #9feaf9;
|
2016-02-17 18:01:18 +00:00
|
|
|
padding: 15px 30px;
|
2014-05-05 08:02:52 +00:00
|
|
|
}
|
|
|
|
|
|
2016-04-27 22:41:36 +00:00
|
|
|
.header a,
|
|
|
|
|
.header a:hover {
|
2016-04-27 22:37:03 +00:00
|
|
|
padding-left: 15px;
|
|
|
|
|
color: #9feaf9;
|
|
|
|
|
font-weight: 300;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.header-nav {
|
2016-04-26 16:16:59 +00:00
|
|
|
float: right;
|
|
|
|
|
margin-top: 12px;
|
|
|
|
|
}
|
|
|
|
|
|
2016-04-27 22:37:03 +00:00
|
|
|
.header-version {
|
|
|
|
|
font-size: 1em;
|
|
|
|
|
padding-left: 10px;
|
|
|
|
|
font-weight: 300;
|
|
|
|
|
}
|
|
|
|
|
|
2016-04-26 16:16:59 +00:00
|
|
|
.header-icon {
|
|
|
|
|
width: 48px;
|
|
|
|
|
height: 48px;
|
|
|
|
|
vertical-align: middle;
|
|
|
|
|
margin-top: -4px;
|
|
|
|
|
margin-right: 0.4em;
|
|
|
|
|
}
|
|
|
|
|
|
2016-04-27 01:42:03 +00:00
|
|
|
.svg-stroke {
|
2016-04-26 17:06:46 +00:00
|
|
|
stroke: #9feaf9;
|
2016-04-26 16:16:59 +00:00
|
|
|
}
|
2016-04-27 01:42:03 +00:00
|
|
|
.svg-fill {
|
|
|
|
|
fill: #9feaf9;
|
|
|
|
|
}
|
2016-04-26 16:16:59 +00:00
|
|
|
|
|
|
|
|
.vertical-middle {
|
|
|
|
|
vertical-align: middle !important;
|
|
|
|
|
}
|
|
|
|
|
|
2016-04-26 16:30:37 +00:00
|
|
|
a,
|
2014-05-05 08:02:52 +00:00
|
|
|
a:hover {
|
2016-04-26 16:30:37 +00:00
|
|
|
color: #2ab0cb;
|
|
|
|
|
text-decoration: none;
|
2014-05-05 08:02:52 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
pre, code {
|
2016-04-26 16:25:46 +00:00
|
|
|
font-family: "Menlo", "Lucida Console", monospace;
|
|
|
|
|
border: 1px solid #e0e5e6;
|
|
|
|
|
background-color: #f6f8f8;
|
|
|
|
|
color: #466a72;
|
2014-05-05 08:02:52 +00:00
|
|
|
border-radius: 3px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
pre {
|
|
|
|
|
white-space: pre-wrap;
|
|
|
|
|
font-size: 13px;
|
|
|
|
|
line-height: 19px;
|
|
|
|
|
overflow: auto;
|
|
|
|
|
padding: 6px 10px;
|
|
|
|
|
}
|
2014-05-05 08:30:37 +00:00
|
|
|
|
2016-02-17 17:51:24 +00:00
|
|
|
code {
|
|
|
|
|
padding: 1px 4px 1px 4px;
|
|
|
|
|
font-size: 13px;
|
|
|
|
|
}
|
|
|
|
|
|
2014-05-05 08:30:37 +00:00
|
|
|
#holder {
|
2016-04-27 01:50:21 +00:00
|
|
|
display: flex;
|
2016-05-04 08:38:03 +00:00
|
|
|
flex: 1;
|
2016-04-27 01:50:21 +00:00
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
2016-04-26 16:25:46 +00:00
|
|
|
border: 1px solid #e0e5e6;
|
|
|
|
|
background-color: #f6f8f8;
|
|
|
|
|
color: #466a72;
|
|
|
|
|
border-radius: 3px;
|
|
|
|
|
font-size: 30px;
|
2016-04-26 16:28:50 +00:00
|
|
|
font-weight: 300;
|
2016-04-26 17:07:05 +00:00
|
|
|
cursor: default;
|
2014-05-05 08:46:25 +00:00
|
|
|
-webkit-user-select: none;
|
2014-05-05 08:30:37 +00:00
|
|
|
}
|
2016-02-17 17:51:24 +00:00
|
|
|
|
2014-05-05 08:30:37 +00:00
|
|
|
#holder.hover {
|
2016-04-26 16:25:46 +00:00
|
|
|
border-color: #2ab0cb;
|
2014-05-05 08:30:37 +00:00
|
|
|
}
|
2014-05-05 08:02:52 +00:00
|
|
|
</style>
|
2013-04-18 07:09:53 +00:00
|
|
|
</head>
|
|
|
|
|
<body>
|
2014-05-05 07:45:50 +00:00
|
|
|
<script>
|
2016-05-06 23:53:50 +00:00
|
|
|
const {remote, shell} = require('electron');
|
2015-11-12 10:28:04 +00:00
|
|
|
|
|
|
|
|
var execPath = remote.process.execPath;
|
2014-05-05 07:45:50 +00:00
|
|
|
var command = execPath + ' path-to-your-app';
|
2013-05-14 13:39:00 +00:00
|
|
|
|
2014-05-05 08:46:25 +00:00
|
|
|
document.onclick = function(e) {
|
|
|
|
|
e.preventDefault();
|
|
|
|
|
if (e.target.tagName == 'A')
|
2015-11-12 10:28:04 +00:00
|
|
|
shell.openExternal(e.target.href);
|
2014-05-05 08:46:25 +00:00
|
|
|
return false;
|
|
|
|
|
};
|
2014-05-05 08:30:37 +00:00
|
|
|
document.ondragover = document.ondrop = function(e) {
|
|
|
|
|
e.preventDefault();
|
|
|
|
|
return false;
|
2014-05-05 08:46:25 +00:00
|
|
|
};
|
2016-07-18 14:16:23 +00:00
|
|
|
|
|
|
|
|
document.onload = () => {
|
|
|
|
|
var a = false
|
|
|
|
|
setInterval(function () {
|
|
|
|
|
document.body.querySelector('.container').style.background = a ? 'red' : 'blue'
|
|
|
|
|
a = !a
|
|
|
|
|
}, 200)
|
|
|
|
|
}
|
2013-05-14 13:39:00 +00:00
|
|
|
</script>
|
2014-05-05 07:45:50 +00:00
|
|
|
|
2016-05-04 08:38:03 +00:00
|
|
|
<div class="header">
|
2016-04-26 16:16:59 +00:00
|
|
|
<svg class="header-icon" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
2016-04-26 16:30:55 +00:00
|
|
|
<g stroke="none" fill="none" fill-rule="evenodd">
|
|
|
|
|
<path class="svg-stroke" d="M11.7014354,7.72646259 C7.91761319,7.04380371 4.81334929,7.69369948 3.61536899,9.74908711 C2.72656361,11.27402 3.03878853,13.3122813 4.27551338,15.4489979 M6.32642733,18.1886712 C7.89193828,19.8928217 9.9666792,21.548102 12.4120986,22.9466461 C18.2414315,26.2804624 24.2930499,27.0779063 27.1669222,25.1368228 M29.8456419,24.0565148 C29.8456419,23.1971812 29.1423799,22.5005537 28.2748621,22.5005537 C27.4073444,22.5005537 26.7040823,23.1971812 26.7040823,24.0565148 C26.7040823,24.9158484 27.4073444,25.612476 28.2748621,25.612476 C29.1423799,25.612476 29.8456419,24.9158484 29.8456419,24.0565148 L29.8456419,24.0565148 Z"></path>
|
|
|
|
|
<path class="svg-stroke" d="M26.1017264,17.699802 C28.5790274,14.8008665 29.5563892,11.8210699 28.3609038,9.7699627 C27.4866535,8.27000212 25.5971843,7.51855661 23.1692624,7.48727915 M19.6970573,7.86083838 C17.4054295,8.34719767 14.8948834,9.30454988 12.424266,10.7175048 C6.42288792,14.1497143 2.65401611,19.1281832 3.16552768,22.580522 M3.68501877,25.612476 C4.5525365,25.612476 5.25579857,24.9158484 5.25579857,24.0565148 C5.25579857,23.1971812 4.5525365,22.5005537 3.68501877,22.5005537 C2.81750104,22.5005537 2.11423897,23.1971812 2.11423897,24.0565148 C2.11423897,24.9158484 2.81750104,25.612476 3.68501877,25.612476 L3.68501877,25.612476 L3.68501877,25.612476 Z"></path>
|
|
|
|
|
<path class="svg-stroke" d="M10.1856596,25.0699995 C11.480995,28.6529192 13.5999849,30.9876144 15.99422,30.9876144 C17.7292778,30.9876144 19.3197869,29.7615184 20.5570359,27.7228112 M22.0509221,24.3364015 C22.7373456,22.1635452 23.1341282,19.5948285 23.1341282,16.8425133 C23.1341282,10.0879866 20.7444131,4.43922457 17.5485944,3.03357113 M15.99422,4.25337326 C16.8617378,4.25337326 17.5649998,3.55674574 17.5649998,2.69741214 C17.5649998,1.83807854 16.8617378,1.14145101 15.99422,1.14145101 C15.1267023,1.14145101 14.4234402,1.83807854 14.4234402,2.69741214 C14.4234402,3.55674574 15.1267023,4.25337326 15.99422,4.25337326 Z"></path>
|
|
|
|
|
<path class="svg-fill" d="M16.2975137,18.2334955 C15.5219407,18.3994908 14.7578457,17.9112502 14.5899415,17.142994 C14.4226932,16.3747378 14.9152558,15.6178512 15.6908287,15.451531 C16.4664016,15.2855357 17.2304967,15.7737763 17.3984009,16.5420325 C17.5659771,17.3102887 17.0730866,18.0671753 16.2975137,18.2334955 Z"></path>
|
|
|
|
|
</g>
|
2016-04-26 16:16:59 +00:00
|
|
|
</svg>
|
|
|
|
|
|
|
|
|
|
<svg class="vertical-middle" width="156px" height="18px" viewBox="0 0 156 18" xmlns="http://www.w3.org/2000/svg">
|
|
|
|
|
<title>Electron</title>
|
|
|
|
|
<path stroke="none" fill="currentColor" fill-rule="evenodd" d="M0.93602403,17.0884387 L11.4962951,17.0884387 C11.9763075,17.0884387 12.3603173,16.7044288 12.3603173,16.2244165 C12.3603173,15.7444042 11.9763075,15.3603943 11.4962951,15.3603943 L1.89604868,15.3603943 L1.89604868,9.48024338 L10.2962643,9.48024338 C10.7762767,9.48024338 11.1602865,9.09623352 11.1602865,8.6162212 C11.1602865,8.16020949 10.7762767,7.75219902 10.2962643,7.75219902 L1.89604868,7.75219902 L1.89604868,2.01605176 L11.3762921,2.01605176 C11.8563044,2.01605176 12.2403142,1.6320419 12.2403142,1.15202958 C12.2403142,0.672017252 11.8563044,0.288007394 11.3762921,0.288007394 L0.93602403,0.288007394 C0.432011091,0.288007394 0,0.720018485 0,1.24803204 L0,16.1284141 C0,16.6564276 0.432011091,17.0884387 0.93602403,17.0884387 L0.93602403,17.0884387 Z M19.0804898,16.1284141 C19.0804898,16.6564276 19.5125009,17.0884387 20.0165139,17.0884387 L29.6887622,17.0884387 C30.1687745,17.0884387 30.5527844,16.7044288 30.5527844,16.2244165 C30.5527844,15.7444042 30.1687745,15.3363937 29.6887622,15.3363937 L20.9765385,15.3363937 L20.9765385,1.12802896 C20.9765385,0.600015404 20.5445274,0.168004313 20.0165139,0.168004313 C19.5125009,0.168004313 19.0804898,0.600015404 19.0804898,1.12802896 L19.0804898,16.1284141 Z M37.8729723,17.0884387 L48.4332434,17.0884387 C48.9132557,17.0884387 49.2972656,16.7044288 49.2972656,16.2244165 C49.2972656,15.7444042 48.9132557,15.3603943 48.4332434,15.3603943 L38.8329969,15.3603943 L38.8329969,9.48024338 L47.2332126,9.48024338 C47.7132249,9.48024338 48.0972348,9.09623352 48.0972348,8.6162212 C48.0972348,8.16020949 47.7132249,7.75219902 47.2332126,7.75219902 L38.8329969,7.75219902 L38.8329969,2.01605176 L48.3132403,2.01605176 C48.7932526,2.01605176 49.1772625,1.6320419 49.1772625,1.15202958 C49.1772625,0.672017252 48.7932526,0.288007394 48.3132403,0.288007394 L37.8729723,0.288007394 C37.3689593,0.288007394 36.9369483,0.720018485 36.9369483,1.24803204 L36.9369483,16.1284141 C36.9369483,16.6564276 37.3689593,17.0884387 37.8729723,17.0884387 L37.8729723,17.0884387 Z M63.6976353,17.3764461 C66.4577061,17.3764461 68.2817529,16.4164214 69.9377955,14.9043826 C70.1057998,14.7603789 70.2498035,14.5203728 70.2498035,14.2323654 C70.2498035,13.7523531 69.8177924,13.320342 69.3377801,13.320342 C69.0977739,13.320342 68.8817684,13.440345 68.7377647,13.5843487 C67.2977277,14.9043826 65.8336901,15.6244011 63.7456365,15.6244011 C60.0495416,15.6244011 57.2414695,12.5763229 57.2414695,8.68822305 L57.2414695,8.64022181 C57.2414695,4.77612261 60.025541,1.75204498 63.7456365,1.75204498 C65.8096895,1.75204498 67.2737271,2.5200647 68.5697603,3.67209427 C68.713764,3.76809674 68.9297696,3.88809982 69.1937764,3.88809982 C69.6977893,3.88809982 70.153801,3.45608873 70.153801,2.95207579 C70.153801,2.61606716 69.9617961,2.35206038 69.7697911,2.18405607 C68.2097511,0.888022798 66.4817067,0 63.7696371,0 C58.8255102,0 55.273419,3.93610105 55.273419,8.68822305 L55.273419,8.73622428 C55.273419,13.5603481 58.8495108,17.3764461 63.6976353,17.3764461 L63.6976353,17.3764461 Z M81.1700838,16.2484171 C81.1700838,16.7764307 81.6020949,17.2084418 82.1301085,17.2084418 C82.658122,17.2084418 83.0901331,16.7764307 83.0901331,16.2484171 L83.0901331,2.04005237 L87.9622582,2.04005237 C88.4422705,2.04005237 88.850281,1.65604251 88.850281,1.17603019 C88.850281,0.696017868 88.4422705,0.288007394 87.9622582,0.288007394 L76.2979587,0.288007394 C75.8179464,0.288007394 75.4099359,0.696017868 75.4099359,1.17603019 C75.4099359,1.65604251 75.8179464,2.04005237 76.2979587,2.04005237 L81.1700838,2.04005237 L81.1700838,16.2484171 Z M95.2824461,16.2484171 C95.2824461,16.7764307 95.7144572,17.2084418 96.2184701,17.2084418 C96.7464837,17.2084418 97.1784948,16.7764307 97.1784948,16.2484171 L97.1784948,10.5602711 L102.002619,10.5602711 L106.73074,16.7044288 C106.946746,16.9924362 107.234753,17.2084418 107.618763,17.2084418 C108.098775,17.2084418 108.578787,16.7764307 108.578787,16.2724177 C108.578787,16.008411 108.458784,15.7924054 108.266779,15.5763999 L104.090672,10.2002619 C106.706739,9.69624892 108.57
|
|
|
|
|
</svg>
|
|
|
|
|
|
2016-04-27 22:37:03 +00:00
|
|
|
<span class="header-version vertical-middle"><script>document.write(process.versions.electron)</script></span>
|
|
|
|
|
|
|
|
|
|
<div class="header-nav vertical-middle">
|
|
|
|
|
<a href="http://electron.atom.io/docs/latest">Docs</a>
|
|
|
|
|
<a href="https://github.com/electron/electron">Repository</a>
|
|
|
|
|
<a href="http://electron.atom.io/blog">Blog</a>
|
2016-04-26 16:16:59 +00:00
|
|
|
</div>
|
2016-05-04 08:38:03 +00:00
|
|
|
</div>
|
2014-05-05 07:45:50 +00:00
|
|
|
|
2016-02-17 18:01:18 +00:00
|
|
|
<div class="container">
|
2014-05-05 07:45:50 +00:00
|
|
|
|
2016-02-17 18:01:18 +00:00
|
|
|
<p>
|
2016-02-17 18:11:35 +00:00
|
|
|
To run your app with Electron, execute the following command in your
|
2016-02-17 18:01:18 +00:00
|
|
|
Console (or Terminal):
|
|
|
|
|
</p>
|
2014-05-05 07:45:50 +00:00
|
|
|
|
2016-02-17 18:01:18 +00:00
|
|
|
<script>document.write('<pre>' + command + '</pre>')</script>
|
|
|
|
|
|
|
|
|
|
<p>
|
|
|
|
|
The <code>path-to-your-app</code> should be the path to your own Electron
|
2016-02-17 18:02:53 +00:00
|
|
|
app.
|
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
<p>You can read the
|
2016-02-17 18:01:18 +00:00
|
|
|
<script>
|
|
|
|
|
document.write(
|
2016-03-31 23:50:30 +00:00
|
|
|
`<a href='https://github.com/electron/electron/blob/v${process.versions.electron}/docs/tutorial/quick-start.md'>quick start</a>`
|
2016-02-17 18:01:18 +00:00
|
|
|
);
|
|
|
|
|
</script>
|
|
|
|
|
guide in Electron's
|
|
|
|
|
<script>
|
|
|
|
|
document.write(
|
2016-03-31 23:50:30 +00:00
|
|
|
`<a href='https://github.com/electron/electron/tree/v${process.versions.electron}/docs#readme'>docs</a>`
|
2016-02-17 18:01:18 +00:00
|
|
|
);
|
|
|
|
|
</script>
|
2016-02-17 18:10:36 +00:00
|
|
|
to learn how to write one.
|
2016-02-17 18:01:18 +00:00
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
<p>
|
|
|
|
|
Or you can just drag your app here to run it:
|
|
|
|
|
</p>
|
2014-05-05 08:30:37 +00:00
|
|
|
|
2016-02-17 18:01:18 +00:00
|
|
|
<div id="holder">
|
|
|
|
|
Drag your app here to run it
|
|
|
|
|
</div>
|
2014-05-05 08:30:37 +00: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>
|
2013-04-18 07:09:53 +00:00
|
|
|
</body>
|
|
|
|
|
</html>
|
