-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
221 lines (215 loc) · 12.4 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>PeerViewer - peer-to-peer remote desktop and support solution, completely free for unlimited personal and commercial use.</title>
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0" /> -->
<meta property="og:title" content="PeerViewer" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://PeerViewer.org/" />
<meta property="og:image" content="https://PeerViewer.org/images/v1.2.0_connect_1350x677.png" />
<meta property="og:image:alt" content="A screenshot of the PeerViewer app, showing the 'Allow Remote Control' and 'Control Remote Computer' views." />
<meta property="og:site_name" content="PeerViewer.org" />
<meta property="og:description" content="The peer-to-peer remote desktop and support solution, completely free for unlimited personal and commercial use." />
<meta name="twitter:card" content="summary_large_image" />
<!-- This stylesheet is only needed for the website, and will return a 404 in the Electron app, as it's bundled using webpack: -->
<link rel="stylesheet" href="index.css" />
<link rel="icon" type="image/x-icon" href="../images/512x512.png" />
</head>
<body>
<div class="container">
<header>
<a href="#" onclick="menuChange(event,6)"><img src="../images/logo_and_name.png" class="logo"/></a>
<div class="menu">
<div class="menuitem"><a href="#" class="menubutton menubuttonselected" id="menubuttonconnect" style="display:none" onclick="menuChange(event,0)">Connect</a></div>
<div class="menuitem"><a href="#" class="menubutton" onclick="menuChange(event,1)">Features</a></div>
<div class="menuitem"><a href="#" class="menubutton" onclick="menuChange(event,5)">About</a></div>
<div class="menuitem"><a href="#" class="menubutton" onclick="menuChange(event,4)">Contact and Donate</a></div>
</div>
</header>
<div class="outermain-content" id="content6">
<div class="innermain-content onecolumn">
<h1>Direct, Secure and Uninterrupted Remote Access - The P2P Way</h1>
<p>PeerViewer is a fully peer-to-peer remote desktop applications that lets you securely access and control computers anywhere, anytime, without the need for centralized servers. It's the privacy-focused, cost-effective solution for seamless remote support and collaboration.</p>
<a href="https://github.com/PeerViewer/codebase/releases/" class="bigbutton regulardownloadbutton" target="_blank"><div>Download PeerViewer to get started</div></a>
</div>
<div class="">
<img src="../images/laptop.png" class="laptop"/>
</div>
</div>
<div class="main-content" id="content0">
<div class="column" id="column1">
<h2>Allow Remote Control</h2>
<p>
<label for="pubkey">Your ID</label>
<input type="text" class="typetext" name="pubkey" id="pubkey" disabled size="43">
<a href="#copy" onclick="javascript:copyYourId();"><img width="16" src="../images/copy-icon.png" class="copyicon"></a>
</p>
<div id="serverhelptext">When you give your ID to someone running PeerViewer, they can operate your computer until you close this window.</div>
<!-- <button class="bigbutton" onclick="runServer()">Run Server</button> -->
<div id="serverstatus">Initializing...</div>
</div>
<div class="column" id="column2">
<h2>Control Remote Computer</h2>
<p>
<label for="connectto">Partner ID</label>
<input type="text" class="typetext" id="connectto" name="connectto" size="43" onKeyPress="javascript:checkSubmit(event)"/>
</p>
<div class="connectcontainer">
<button class="bigbutton connectbutton" onclick="runClient()">Connect</button>
</div>
<div id="clientstatus">Ready to connect.</div>
</div>
</div>
<div class="main-content" id="content1">
<div class="column">
<h1>We'd love to know which feature to focus on next.</h1>
<p>What would you like to see? Now you can vote... with your wallet!</p>
<p>Just scan the QR code of the feature(s) you want with a Bitcoin Lightning wallet and send however much you like. We're using this as an anti-spam mechanism, a way to weigh the votes, and a way to fund development.</p>
<p>The minimum amount is 1 satoshi, and the maximum is 10 Bitcoin. Every sat counts!</p>
<button class="bigbutton" onClick="menuChange(event,4)">Different feature? Request it now!</button>
</div>
<div class="column">
<div id="featuregallery">
<!-- This gets filled up by JavaScript. -->
</div>
</div>
</div>
<div class="outermain-content" id="content4">
<div class="onecolumn innermain-content">
<h1>As you know, writing and maintaining quality software is not cheap...</h1>
<p>We are aiming to keep this project well-maintained, bug-free, and reliable long-term.</p>
<p>Therefore, your generous donations are very much appreciated.</p>
<h3>Just scan the QR code with a Bitcoin Lightning wallet to send a message and however many satoshis you like.</p>
<p>Thank you!</p>
</div>
<div>
<a href="lightning:LNURL1DP68GURN8GHJ7ER9D4HJUMRWWP5KWEME9E3K7MF0D3H82UNVWQHNVN2Y2D95ULP9MGQ"><img src="../images/donate-phone.png" class="donate"/></a>
</div>
</div>
<div class="main-content" id="content5">
<div class="onecolumn">
<h1 class="about" id="h1about">PeerViewer is a remote desktop and support solution, completely free for unlimited personal and commercial use.</h1>
<p>
Under the hood, it uses direct (peer-to-peer) connections between the participants. This was recently made possible by the power of the <a href="https://pears.com/" target="_blank"><img class="pearslogo" src="../images/pears-logo.svg" alt="Pear Runtime Logo"/>Pear Runtime</a>.</p>
<!--
<h3>Why build an alternative to TeamViewer?</h3>
<p>TeamViewer works well and is very popular as a remote desktop and support program, but it's not free for commercial use.<p>
<p>Users report frequent disconnections, possibly due to TeamViewer monitoring the sessions and terminating them if they violate the terms of service.</p>
<p>We can do better.</p>
-->
<div class="threecolumns column1">
<img class="headericon" src="../images/lightbulb.svg" alt="Lightbulb"/>
<h3>Why Peer-to-Peer?</h3>
<div>
<p>
Traditionally, when you use network apps such as TeamViewer, place audio and video calls or share files, your data is going through intermediate servers which are expensive to host, can harm your privacy, increase latency and consume additional bandwidth.
</p>
</div>
</div>
<div class="threecolumns column2">
<img class="headericon" src="../images/lightning.svg" alt="Lightning"/>
<h3>Advantages</h3>
<div>
<ul>
<li>Being the highest bandwidth AND lowest latency way of establishing a network connection.</li>
<li>Ensuring maximum privacy for all participants.</li>
<li>Being low cost, making it possible to survive on a pay-what-you-can/voluntary/donation basis.</li>
<li>Minimizing time-to-market and allowing for quick MVP's without a lot of server-side datacenter setup work.</li>
</ul>
</div>
</div>
<div class="threecolumns column3">
<img class="headericon" src="../images/wall.svg" alt="Wall"/>
<h3>Building blocks</h3>
<div>
<p>We're lucky to be standing on the shoulders of giants to pull this off.<br/>Here's a list of some key, free and open-source technologies that make this possible:</p>
<ul>
<li>HolePunch, for establishing direct peer-to-peer connections.</li>
<li>LNBits, for quickly building reusable payment QR codes using the LNURLp standard.</li>
<li>Electron, for building standalone applications using open web standards.</li>
<li>Bitcoin and Lightning, for accepting payments without needing anyone's permission or approval.</li>
</ul>
</div>
</div>
<button class="bigbutton" onClick="menuChange(event,4)">Any suggestions? Let us know!</button>
</div>
</div>
<footer>
<span class="footerleft"><a href="https://peerviewer.org" target="_blank">PeerViewer</a> © 2024 Built with<a href="https://pears.com/" target="_blank"><img class="pearslogo" src="../images/pears-logo.svg"></a></span>
<span class="footerright"><a href="https://github.com/PeerViewer/" target="_blank"><img class="githublogo" src="../images/github-mark-white.svg"></a></span>
</footer>
</div>
<script>
function adaptForWeb() {
menuChange(null,6);
let h1about = document.getElementById("h1about")
if (h1about) h1about.style.fontSize = "62px";
}
function startup() {
try {
const process = require('node:process');
console.log(process.platform);
let menubuttonconnect = document.getElementById("menubuttonconnect")
if (menubuttonconnect) menubuttonconnect.style.display = "inline";
runServer(); // run server automatically at startup
/*
const electronVersion = process.versions.electron;
console.log("electronVersion = " + electronVersion);
const appVersion = process.env.npm_package_version; // This only works when running with npm start, not in an AppImage release :/
console.log("appVersion = " + appVersion);
document.getElementById('peerviewerversion').innerHTML = "version " + appVersion;
*/
} catch (e) {
console.log('Caught error in require of node:process:');
console.log(e);
adaptForWeb();
}
populateFeatureGallery();
}
function menuChange(event,itemnr) {
console.log("changing menu " + itemnr);
// Show the right content
for (let i=0;i<7;i++) {
let tohide = document.getElementById("content" + i)
if (tohide) tohide.style.display = "none";
}
let toshow = document.getElementById("content" + itemnr)
if (toshow) toshow.style.display = "flex";
// Color the right menu buttons
Array.from(document.getElementsByClassName("menubutton")).forEach(button => {
button.classList.remove("menubuttonselected");
});
if (event != null) event.target.classList.add("menubuttonselected");
}
function populateFeatureGallery() {
const features = [["MacOS Support", "If you'd like to remote control MacOS machines, or use an Apple for control, you need this!", "LNURL1DP68GURN8GHJ7ER9D4HJUMRWWP5KWEME9E3K7MF0D3H82UNVWQHKK7N9V4JKG82AFR6","macos-logo"],
["Integrated Bitcoin Lightning Wallet", "Allowing you 'stream' satoshis (for example: pay or get paid per minute) to provide remote support or share your computer.", "LNURL1DP68GURN8GHJ7ER9D4HJUMRWWP5KWEME9E3K7MF0D3H82UNVWQHKZKJP234KJANA6MQ", "bitcoin-logo"],
["View-Only Mode", "A View-Only mode might be nice to be able to share your desktop, without having the other party control it.", "LNURL1DP68GURN8GHJ7ER9D4HJUMRWWP5KWEME9E3K7MF0D3H82UNVWQH55M3H2PX4WYCUQ4G","viewonly-logo"]];
let featuresHTML = "";
for (let featurenr=0; featurenr<features.length; featurenr++) {
featuresHTML += '<div class="feature" id="feature' + featurenr + '"><a href="lightning:' + features[featurenr][2] + '"><img class="qrcode" src="../images/' + features[featurenr][2] + '.png" alt="QR code that can be paid with bitcoin lightning wallet"/></a><div class="featuredetail"><img class="featureheadericon" src="../images/' + features[featurenr][3] + '.svg" alt="' + features[featurenr][3] + '"/><h3>' + features[featurenr][0] + '</h3><p>' + features[featurenr][1] + '</p></div></div>';
}
document.getElementById("featuregallery").innerHTML = featuresHTML;
}
function copyYourId() {
let yourIdInput = document.getElementById("pubkey");
yourIdInput.select();
yourIdInput.setSelectionRange(0, 99999); // For mobile devices
navigator.clipboard.writeText(yourIdInput.value);
document.getElementById("serverstatus").innerHTML = "Copy successful. You can paste your ID in a message to your partner.";
console.log("Copied your ID: " + yourIdInput.value);
}
function checkSubmit(e) {
if (e && e.keyCode == 13) {
console.log("Return pressed on partner ID field, connecting...");
runClient();
}
}
function download() {
location.href = "https://github.com/PeerViewer/codebase/releases/";
}
startup();
</script>
</body>
</html>