Skip to content

Commit

Permalink
Add new getting-started page
Browse files Browse the repository at this point in the history
  • Loading branch information
m52go committed May 13, 2020
1 parent 452ea7b commit 367f133
Show file tree
Hide file tree
Showing 2 changed files with 222 additions and 1 deletion.
74 changes: 73 additions & 1 deletion css/styles.scss
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,14 @@ body {
letter-spacing: 0.03rem;
}

strong {
strong, .strong {
font-weight: 700;
}

.centered {
text-align: center;
}

.green, a {
color: #25B135
}
Expand Down Expand Up @@ -912,6 +916,74 @@ faq page
margin: 20px 0;
}

/*****************
getting started page
*****************/

#getting-started .admonition {
padding: 25px;
margin: 40px auto;
}

#getting-started .admonition.grey {
background-color: #f3f3f3;
}

#getting-started .admonition p:last-child {
margin-bottom: 0;
}

#getting-started .start-step-container {
margin: 50px auto;
overflow: hidden;
}

#getting-started .start-step-container .start-step {
clear: both;
overflow: hidden;
margin: 25px auto;
}

#getting-started .start-step-container .start-step .step-text {
width: 60%;
float: left;
padding-right: 50px;
}

#getting-started .start-step-container .start-step .step-text .topical {
display: none;
}

#getting-started .start-step-container .start-step .step-text .topical.active {
display: block;
}

#getting-started .start-step-container .start-step .step-feature {
width: 40%;
float: right;
padding-top: 7px;
}

#getting-started .start-step-container .start-step .step-feature .feature-selector > a {
padding: 8px 12px;
background-color: #f3f3f3;
color: #7E7E7E;
margin-right: 15px;
}

#getting-started .start-step-container .start-step .step-feature .feature-selector > a.active {
background-color: #25B135;
color: #fff;
}

#getting-started .step-feature .responsive-youtube-container {
margin-top: 15px;
display: none;
}

#getting-started .step-feature .responsive-youtube-container.active {
display: block;
}

/****************/

Expand Down
149 changes: 149 additions & 0 deletions getting-started.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,149 @@
---
layout: page
title: Getting Started ‹ Bisq - A decentralized bitcoin exchange network
ref: vision
lang: en
en-only: true
---

<h1>Getting Started</h1>

<div class="mt-5 mb-2" id="getting-started">
<p>This guide covers just what you need to get trading quickly!</p>
<p>Most videos below are just about 2 minutes long. Written documentation is linked below too, if you prefer it. And <a href="https://keybase.io/team/bisq" target="_blank">support</a> is never too far away, if you need it.</p>

<div class="admonition grey">
<p class="note">Before you can start trading on Bisq, you'll need a little bitcoin for a security deposit and fees (0.01 BTC should be enough). Each trader must lock bitcoin in a multisignature escrow until the trade is complete—this is part of what makes trading on Bisq highly secure.</p>
<p class="note"><a href="https://bisq.wiki/Funding_your_wallet#How_to_Obtain_Your_First_Bitcoin" target="_blank">Here are some tips</a> on getting this bitcoin without surrendering your data to a corporate, centralized exchange.</p>
</div>

<div class="start-step-container">
<div class="start-step">
<div class="step-text">
<h2>Download and Install Bisq</h2>
<p>You can download and install Bisq easily <a href="/downloads">from this website</a> or <a href="https://github.com/bisq-network/bisq/releases/latest" target="_blank">from GitHub</a>.</p>
<p>It's also a good idea to verify your installer file to be extra sure it hasn't been meddled with. See the videos here for directions. More details are in <a href="https://bisq.wiki/Downloading_and_installing" target="_blank">this wiki article</a>.</p>
<p>If you'd like to build Bisq from source, <a href="https://github.com/bisq-network/bisq/blob/master/docs/build.md" target="_blank">here are directions</a>. Bisq is free/libre open-source software that <a href="https://docs.bisq.network/contributor-checklist.html" target="_blank">you can contribute to</a>.</p>
</div>
<div class="step-feature">
<div class="feature-selector"><a href="#" id="select-windows-install-video" class="install-step-item active">Windows</a><a href="#" id="select-linux-install-video" class="install-step-item">macOS or Linux</a></div>
<div class="responsive-youtube-container install-step-item active" id="windows-install-video">
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/XABzwXw6X0A" frameborder="0" allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="responsive-youtube-container install-step-item" id="linux-install-video">
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/dTfM4AsxNHY" frameborder="0" allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
</div>

<div class="start-step">
<div class="step-text">
<h2>Set Up and Tour</h2>
<p>With Bisq, you're in total control of your funds and your data. This means you retain unparalleled sovereignty, but it also means no one can help you if you lose something important—so it's critical that you do proper backups before using Bisq to trade.</p>
<p>We've also prepared a short tour of the Bisq interface so you can make the most of it.</p>
<p>At the very least, please be 100% sure to <a href="https://bisq.wiki/Backing_up_your_wallet" target="_blank">write down your seed words</a> and <a href="https://bisq.wiki/Backing_up_a_data_directory" target="_blank">back up your data directory</a>.</p>
</div>
<div class="step-feature">
<div class="feature-selector"><a href="#" id="select-backing-up-video" class="backup-step-item active">Backing Up</a><a href="#" id="select-interface-tour-video" class="backup-step-item">Tour of Bisq</a></div>
<div class="responsive-youtube-container backup-step-item active" id="backing-up-video">
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/JSwMcQAT_CA" frameborder="0" allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="responsive-youtube-container backup-step-item" id="interface-tour-video">
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/HDkzUl9wibc" frameborder="0" allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
</div>

<div class="start-step">
<div class="step-text">
<h2>Create a Payment Account</h2>
<p>In order to trade bitcoin on Bisq, you've got to set up some way to send or receive other funds. Bisq only handles the bitcoin side of a trade—the other side is handled through fiat payment services (banks, money orders, cash) or altcoin wallets.</p>
<p class="topical active paymentaccount-step-item fiat">Not sure which kind of payment account to set up? There's a <a href="https://bisq.wiki/Payment_methods" target="_blank">full list of payment methods</a> on the wiki.</p>
<p class="topical active paymentaccount-step-item fiat">If you'll be trading fiat, please make sure you see the account limits video or read <a href="#" target="_blank">this article on the wiki</a>.</p>
<p class="topical paymentaccount-step-item altcoin">There are many altcoins available for trading on Bisq. Here are some tips for top markets:</p>
<ul class="topical paymentaccount-step-item altcoin">
<li><span class="strong">Monero</span>. If sending XMR, make sure your wallet is capable of providing the transaction key, transaction ID, and recipient's address.</li>
<li><span class="strong">BSQ</span>. You can find your BSQ address in <code>DAO</code> > <code>BSQ Wallet</code> > <code>Receive</code>.</li>
<li><span class="strong">Liquid BTC</span>. If receiving L-BTC, you must use a wallet that can reveal your blinding key, like the <a href="https://github.com/ElementsProject/elements" target="_blank">core Elements software</a> (Blockstream Green won't work, as of this writing).</li>
</ul>
</div>
<div class="step-feature">
<div class="feature-selector"><a href="#" id="select-fiat-setup-video" class="paymentaccount-step-item active">Fiat</a><a href="#" id="select-fiat-limits-video" class="paymentaccount-step-item">Fiat Limits</a><a href="#" id="select-altcoin-setup-video" class="paymentaccount-step-item">Altcoin</a></div>
<div class="responsive-youtube-container paymentaccount-step-item active" id="fiat-setup-video">
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/nDgT_kFC-9Y" frameborder="0" allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="responsive-youtube-container paymentaccount-step-item" id="fiat-limits-video">
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/TP5Zh6IJPVo" frameborder="0" allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="responsive-youtube-container paymentaccount-step-item" id="altcoin-setup-video">
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/33UTotkxw_0" frameborder="0" allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
</div>

<div class="start-step">
<div class="step-text">
<h2>Do a Trade</h2>
<p>Making an offer will usually get you a better price and more control (e.g., setting payment method and deposit percentage), but taking an offer can be more convenient.</p>
<p>See <a href="https://bisq.wiki/Trading_fees" target="_blank">trading fees here</a>. You'll notice offer makers pay a lot less.</p>
<p>Note that there's a mobile app for <a href="https://itunes.apple.com/us/app/bisq-mobile/id1424420411" target="_blank">iOS</a> and <a href="https://play.google.com/store/apps/details?id=com.joachimneumann.bisq" target="_blank">Android</a> you can use to get notifications for new offers and action items on open trades.</p>
<p>To see both sides of a Bisq trade at the same time, side-by-side, be sure to check out our <a href="https://www.youtube.com/watch?v=QjmpAq9RUXM" target="_blank">Bird's Eye View of a Bisq Trade</a> video.</p>
</div>
<div class="step-feature">
<div class="feature-selector"><a href="#" id="select-make-offer-video" class="dotrade-step-item active">Make Offer</a><a href="#" id="select-take-offer-video" class="dotrade-step-item">Take Offer & Complete Trade</a></div>
<div class="responsive-youtube-container dotrade-step-item active" id="make-offer-video">
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/w7Uvv-xrxn8" frameborder="0" allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="responsive-youtube-container dotrade-step-item" id="take-offer-video">
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/E6AOgXajK_E" frameborder="0" allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
</div>

<h3 class="centered">That's it—the bare essentials to getting started with Bisq.</h3>
<h3 class="centered">Browse the <a href="https://bisq.wiki/" target="_blank">wiki</a> and <a href="https://docs.bisq.network/" target="_blank">documentation</a> to learn more. Or say hi on <a href="https://keybase.io/team/bisq" target="_blank">Keybase</a>. Or...simply make your next trade!</h3>

</div>

</div>

<script>

//hack since jquery doesn't load until later
window.onload = function() {

//make selected selector and video active
$( "#getting-started .feature-selector > a" ).on( "click", function(e) {
e.preventDefault();

//activate selector
var currentStepItem = "";
var selectorClassList = e.currentTarget.classList;

for( var p in selectorClassList ) {
if( selectorClassList[p].indexOf( "-item" ) >= 0 ) {
currentStepItem = selectorClassList[p];
break;
}
}

$( "." + currentStepItem ).removeClass( "active" );

//activate payment account text items
if( e.currentTarget.id.indexOf("fiat") >= 0 ) {
$( "#getting-started .start-step-container .start-step .step-text .topical.fiat" ).addClass( "active" );
} else {
$( "#getting-started .start-step-container .start-step .step-text .topical.altcoin" ).addClass( "active" );
}

$( e.currentTarget ).addClass( "active" );

//show corresponding video
var currentVideo = ( e.currentTarget.id ).substring(7);
$( "#" + currentVideo ).addClass( "active" );

return;
})
};

</script>

0 comments on commit 367f133

Please sign in to comment.