Skip to content

Commit

Permalink
Update website
Browse files Browse the repository at this point in the history
  • Loading branch information
@ThomasFarstrike
ThomasFarstrike committed Feb 6, 2024
1 parent 69fe393 commit bf8a0f5
Show file tree
Hide file tree
Showing 2 changed files with 72 additions and 36 deletions.
85 changes: 56 additions & 29 deletions index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,12 +29,6 @@ a {
color: #18222E;
}

header {
background-color: #18222E;
color: #fff;
text-align: left;
padding: 0 0 0.5em 0;
}

footer {
background-color: #18222E;
Expand All @@ -56,11 +50,6 @@ footer a {
color: #CAE2E9;
}

header .logo {
margin: 1em;
width: 25%;
}

h1 {
font-family: GothamRndMedium;
font-size: 42px;
Expand All @@ -82,7 +71,8 @@ label {
font-weight: bold;
}

input[type=text] {
/* input [type=text] doesnt work in AppImage?! */
input.typetext {
background: transparent;
border: 0;
border-bottom: 2px solid #a7c3ca;
Expand All @@ -109,6 +99,10 @@ input:focus{
display: flex; /* content0 is the first menu item and visible by default */
}

#content5 {
text-align: center;
}

.column {
box-sizing: border-box;
flex: 1;
Expand All @@ -119,11 +113,24 @@ input:focus{
padding: 2em;
}

/* header has: logo (25%) - menu (50%) - builtwith (20%) */
header {
background-color: #18222E;
color: #fff;
text-align: left;
padding: 0 0 0.5em 0;
}

header .logo {
margin: 1em;
width: 25%;
}

.menu {
display: inline-block;
position: relative;
top: -1em;
width: 70%; /* 100% - 25% - 5% safety margin */
width: 50%;
}

.menuitem {
Expand All @@ -144,6 +151,14 @@ input:focus{
transition: all 0.2s linear;
}

.builtwith {
display: inline-block;
position: relative;
top: -1em;
text-align: right;
width: 20%;
}

#column1 {
border-right: solid;
}
Expand Down Expand Up @@ -173,10 +188,9 @@ input:focus{

.bigbutton {
display: inline-block;
float: left;
padding: 1.2em;
background-color: #18222E;
color: #fff;
color: #CAE2E9;
text-align: center;
text-decoration: none;
font-size: 16px;
Expand Down Expand Up @@ -213,12 +227,16 @@ input:focus{
width: 6em;
}

img.headericon {
img.featureheadericon {
float: left;
padding-right: 0.75em;
width: 1.3em;
}

img.headericon {
margin-bottom: 1em;
}

.featuredetail {
margin-left: 0.8em;
}
Expand All @@ -230,10 +248,6 @@ img.headericon {
top: 0.6em;
}

img.donate {
width: 50%;
}

.contactticketform {
border:none;
}
Expand All @@ -245,15 +259,15 @@ img.donate {
position: absolute;
height: 40%;
background-color: #333333b3;
left: 10em;
left: 0;
}

.bigbutton.downloadbutton {
border-radius: 35px;
font-size: 32px;
font-weight: bold;
height: 4em;
left: 10%;
left: 15%;
top: 20%;
width: 70%;
position: relative;
Expand All @@ -280,25 +294,38 @@ img.donate {
}

.threecolumns {
font-size: 15px;
float: left;
margin-top: 3em;
width: 33%;
padding: 1em;
width: 30%;
}

.threecolumns p {
padding: 0.5em 1em 0em 0;
.threecolumns div {
padding: 0.5em 1em 0em 1em;
text-align: left;
}

#content0 {
padding: 0;
}

#content4 {
height: 42em;
height: 35em;
overflow-y: hidden;
padding: 2em 2em 0 2em;
}

#content4 .column1 {
margin-left: 10%;
}

#content4 img.donate {
width: 80%;
position: absolute;
right: 0;
bottom: 0;
width: 35%;
}

.twocolumns {
width: 50%;
width: 40%;
}
23 changes: 16 additions & 7 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@
<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&nbsp;and&nbsp;Donate</a></div>
</div>
<div class="builtwith">© 2024 Built with<a href="https://pears.com/" target="_blank"><img class="pearslogo" src="../images/pears-logo.svg"></a></div>
</header>
<div class="main-content" id="content0">
<div class="coverremotecontrol">
Expand All @@ -38,7 +39,7 @@
<h2>Allow Remote Control</h2>
<p>
<label for="pubkey">Your ID</label>
<input type="text" name="pubkey" id="pubkey" disabled size="43">
<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>
Expand All @@ -49,7 +50,7 @@ <h2>Allow Remote Control</h2>
<h2>Control Remote Computer</h2>
<p>
<label for="connectto">Partner ID</label>
<input type="text" id="connectto" name="connectto" size="43" onKeyPress="javascript:checkSubmit(event)"/>
<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>
Expand Down Expand Up @@ -88,14 +89,15 @@ <h1>As you know, writing and maintaining quality software is not cheap...</h1>
<h3>You'll be able to add a comment to your donation, so use that to reach out if you'd like to send a message.</h3>
<p>Thank you!</p>
</div>
<div class="twocolumns column2">
<div>
<a href="lightning:LNURL1DP68GURN8GHJ7MR9VAJKUEPWD3HXY6T5WVHXXMMD9AKXUATJD3CZ7DN8GUE4WCGS0D0DN"><img src="../images/donate-phone.png" class="donate"/></a>
</div>
</div>
<div class="main-content" id="content5">
<div class="onecolumn">
<h1>PeerViewer is a remote desktop and support solution, completely free for unlimited personal and commercial use.</h1>
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>
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>
Expand All @@ -105,21 +107,28 @@ <h3>Why build an alternative to TeamViewer?</h3>
<div class="threecolumns column1">
<img class="headericon" src="../images/lightbulb.svg" alt="Lightbulb"/>
<h3>Why Peer-to-Peer?</h3>
<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>
<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>
Expand All @@ -128,10 +137,10 @@ <h3>Building blocks</h3>
<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><a href="https://peerviewer.org" target="_blank">PeerViewer</a> © 2023 Built with<a href="https://pears.com/" target="_blank"><img class="pearslogo" src="../images/pears-logo.svg"></a></span></footer>
</div>
<script>
function adaptForWeb() {
Expand Down Expand Up @@ -181,7 +190,7 @@ <h3>Building blocks</h3>
["View-Only Mode", "A View-Only mode might be nice to be able to share your desktop, without having the other party control it.", "LNURL1DP68GURN8GHJ7MR9VAJKUEPWD3HXY6T5WVHXXMMD9AKXUATJD3CZ7CFKDFUXXSGUDGTFU","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="headericon" src="../images/' + features[featurenr][3] + '.svg" alt="' + features[featurenr][3] + '"/><h3>' + features[featurenr][0] + '</h3><p>' + features[featurenr][1] + '</p></div></div>';
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;
}
Expand Down

0 comments on commit bf8a0f5

Please sign in to comment.