mirror of
https://github.com/joinmarket-webui/jam.git
synced 2026-08-19 13:18:30 +02:00
Add initial copy and icons for screens
This commit is contained in:
secondl1ght
parent
a1c464e395
commit
8598f3fc24
2 changed files with 92 additions and 3 deletions
|
|
@ -10,4 +10,9 @@
|
|||
<symbol id="gear" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path d="M17.3 10.453l1.927.315a.326.326 0 01.273.322v1.793a.326.326 0 01-.27.321l-1.93.339c-.111.387-.265.76-.459 1.111l1.141 1.584a.326.326 0 01-.034.422l-1.268 1.268a.326.326 0 01-.418.037l-1.6-1.123a5.482 5.482 0 01-1.118.468l-.34 1.921a.326.326 0 01-.322.269H11.09a.325.325 0 01-.321-.272l-.319-1.911a5.5 5.5 0 01-1.123-.465l-1.588 1.113a.326.326 0 01-.418-.037L6.052 16.66a.327.327 0 01-.035-.42l1.123-1.57a5.497 5.497 0 01-.47-1.129l-1.901-.337a.326.326 0 01-.269-.321V11.09c0-.16.115-.296.273-.322l1.901-.317c.115-.393.272-.77.47-1.128l-1.11-1.586a.326.326 0 01.037-.417L7.34 6.052a.326.326 0 01.42-.034l1.575 1.125c.354-.194.73-.348 1.121-.46l.312-1.91a.326.326 0 01.322-.273h1.793c.159 0 .294.114.322.27l.336 1.92c.389.112.764.268 1.12.465l1.578-1.135a.326.326 0 01.422.033l1.268 1.268a.326.326 0 01.036.418L16.84 9.342c.193.352.348.724.46 1.11zM9.716 12a2.283 2.283 0 104.566 0 2.283 2.283 0 00-4.566 0z" clip-rule="evenodd"></path></symbol>
|
||||
<symbol id="grid" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M5.5 9.5v-3a1 1 0 011-1h3a1 1 0 011 1v3a1 1 0 01-1 1h-3a1 1 0 01-1-1zM13.5 9.5v-3a1 1 0 011-1h3a1 1 0 011 1v3a1 1 0 01-1 1h-3a1 1 0 01-1-1zM13.5 17.5v-3a1 1 0 011-1h3a1 1 0 011 1v3a1 1 0 01-1 1h-3a1 1 0 01-1-1zM5.5 17.5v-3a1 1 0 011-1h3a1 1 0 011 1v3a1 1 0 01-1 1h-3a1 1 0 01-1-1z"></path></symbol>
|
||||
<symbol id="joining" fill="currentColor" viewBox="0 0 16 16"><path d="M8 9.5a2 2 0 1 0 0-4 2 2 0 0 0 0 4z" /><path d="M9.5 2c-.9 0-1.75.216-2.501.6A5 5 0 0 1 13 7.5a6.5 6.5 0 1 1-13 0 .5.5 0 0 1 1 0 5.5 5.5 0 0 0 8.001 4.9A5 5 0 0 1 3 7.5a6.5 6.5 0 0 1 13 0 .5.5 0 0 1-1 0A5.5 5.5 0 0 0 9.5 2zM8 3.5a4 4 0 1 0 0 8 4 4 0 0 0 0-8z" /></symbol>
|
||||
<symbol id='welcome' aria-hidden="true" focusable="false" data-prefix="fas" data-icon="door-open" class="svg-inline--fa fa-door-open fa-w-20" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path fill="currentColor" d="M624 448h-80V113.45C544 86.19 522.47 64 496 64H384v64h96v384h144c8.84 0 16-7.16 16-16v-32c0-8.84-7.16-16-16-16zM312.24 1.01l-192 49.74C105.99 54.44 96 67.7 96 82.92V448H16c-8.84 0-16 7.16-16 16v32c0 8.84 7.16 16 16 16h336V33.18c0-21.58-19.56-37.41-39.76-32.17zM264 288c-13.25 0-24-14.33-24-32s10.75-32 24-32 24 14.33 24 32-10.75 32-24 32z"></path></symbol>
|
||||
<symbol id='collab' aria-hidden="true" focusable="false" data-prefix="fas" data-icon="compress-arrows-alt" class="svg-inline--fa fa-compress-arrows-alt fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M200 288H88c-21.4 0-32.1 25.8-17 41l32.9 31-99.2 99.3c-6.2 6.2-6.2 16.4 0 22.6l25.4 25.4c6.2 6.2 16.4 6.2 22.6 0L152 408l31.1 33c15.1 15.1 40.9 4.4 40.9-17V312c0-13.3-10.7-24-24-24zm112-64h112c21.4 0 32.1-25.9 17-41l-33-31 99.3-99.3c6.2-6.2 6.2-16.4 0-22.6L481.9 4.7c-6.2-6.2-16.4-6.2-22.6 0L360 104l-31.1-33C313.8 55.9 288 66.6 288 88v112c0 13.3 10.7 24 24 24zm96 136l33-31.1c15.1-15.1 4.4-40.9-17-40.9H312c-13.3 0-24 10.7-24 24v112c0 21.4 25.9 32.1 41 17l31-32.9 99.3 99.3c6.2 6.2 16.4 6.2 22.6 0l25.4-25.4c6.2-6.2 6.2-16.4 0-22.6L408 360zM183 71.1L152 104 52.7 4.7c-6.2-6.2-16.4-6.2-22.6 0L4.7 30.1c-6.2 6.2-6.2 16.4 0 22.6L104 152l-33 31.1C55.9 198.2 66.6 224 88 224h112c13.3 0 24-10.7 24-24V88c0-21.3-25.9-32-41-16.9z"></path></symbol>
|
||||
<symbol id='key' aria-hidden="true" focusable="false" data-prefix="fas" data-icon="key" class="svg-inline--fa fa-key fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M512 176.001C512 273.203 433.202 352 336 352c-11.22 0-22.19-1.062-32.827-3.069l-24.012 27.014A23.999 23.999 0 0 1 261.223 384H224v40c0 13.255-10.745 24-24 24h-40v40c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24v-78.059c0-6.365 2.529-12.47 7.029-16.971l161.802-161.802C163.108 213.814 160 195.271 160 176 160 78.798 238.797.001 335.999 0 433.488-.001 512 78.511 512 176.001zM336 128c0 26.51 21.49 48 48 48s48-21.49 48-48-21.49-48-48-48-48 21.49-48 48z"></path></symbol>
|
||||
<symbol id='handshake' aria-hidden="true" focusable="false" data-prefix="fas" data-icon="handshake-slash" class="svg-inline--fa fa-handshake-slash fa-w-20" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path fill="currentColor" d="M0,128.21V384H64a32,32,0,0,0,32-32V184L23.83,128.21ZM48,320.1a16,16,0,1,1-16,16A16,16,0,0,1,48,320.1Zm80,31.81h18.3l90.5,81.89a64,64,0,0,0,90-9.3l.2-.2,17.91,15.5a37.16,37.16,0,0,0,52.29-5.39l8.8-10.82L128,208.72Zm416-223.7V352.1a32,32,0,0,0,32,32h64V128.21ZM592,352.1a16,16,0,1,1,16-16A16,16,0,0,1,592,352.1ZM303.33,202.67l59.58-54.57a16,16,0,0,1,21.59,23.61L358.41,195.6,504,313.8a73.08,73.08,0,0,1,7.91,7.7V128L457.3,73.41A31.76,31.76,0,0,0,434.7,64H348.8a31.93,31.93,0,0,0-21.6,8.41l-88.07,80.64-25.64-19.81L289.09,64H205.3a32,32,0,0,0-22.6,9.41L162.36,93.72,45.47,3.38A16,16,0,0,0,23,6.19L3.38,31.46A16,16,0,0,0,6.19,53.91L594.53,508.63A16,16,0,0,0,617,505.82l19.65-25.27a16,16,0,0,0-2.82-22.45Z"></path></symbol>
|
||||
<symbol id='shield' aria-hidden="true" focusable="false" data-prefix="fas" data-icon="shield-alt" class="svg-inline--fa fa-shield-alt fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M466.5 83.7l-192-80a48.15 48.15 0 0 0-36.9 0l-192 80C27.7 91.1 16 108.6 16 128c0 198.5 114.5 335.7 221.5 380.3 11.8 4.9 25.1 4.9 36.9 0C360.1 472.6 496 349.3 496 128c0-19.4-11.7-36.9-29.5-44.3zM256.1 446.3l-.1-381 175.9 73.3c-3.3 151.4-82.1 261.1-175.8 307.7z"></path></symbol>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 30 KiB After Width: | Height: | Size: 33 KiB |
|
|
@ -26,10 +26,94 @@ export default function Onboarding() {
|
|||
)
|
||||
} else if (step === 1) {
|
||||
return (
|
||||
<div class="mx-auto my-auto">
|
||||
<p class="fs-3 text-center">Intro copy</p>
|
||||
<div class="mx-auto my-auto col-12 col-md-4">
|
||||
<div class="d-flex justify-content-center">
|
||||
<Sprite symbol="welcome" width="100" height="100" className="mb-4" />
|
||||
</div>
|
||||
<p class="fs-3 text-center">1: Welcome to JoinMarket!</p>
|
||||
<p class="text-center text-secondary mb-5">
|
||||
Explainer what this app does for the user, core concepts, features...
|
||||
JoinMarket is a privacy-focused software solution that aims to improve the confidentiality and privacy of your
|
||||
bitcoin transactions. It facilitates the creation of collaborative transactions through a peer-to-peer
|
||||
marketplace. <br />
|
||||
<br />
|
||||
⚠️ Warning: While JoinMarket is tried and tested, this user interface is not. If anything breaks please{' '}
|
||||
<a href="https://github.com/joinmarket-webui/joinmarket-webui/issues" target="_blank" rel="noreferrer">
|
||||
report an issue
|
||||
</a>{' '}
|
||||
on GitHub.
|
||||
</p>
|
||||
<div class="d-flex justify-content-center">
|
||||
<rb.Button variant="dark" onClick={() => setStep(2)}>
|
||||
Continue
|
||||
</rb.Button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
} else if (step === 2) {
|
||||
return (
|
||||
<div class="mx-auto my-auto col-12 col-md-4">
|
||||
<div class="d-flex justify-content-center">
|
||||
<Sprite symbol="collab" width="100" height="100" className="mb-4" />
|
||||
</div>
|
||||
<p class="fs-3 text-center">2: Collaborative Transactions</p>
|
||||
<p class="text-center text-secondary mb-5">
|
||||
To have strong privacy guarantees in the open and transparent world of bitcoin, special kinds of transactions
|
||||
have to be created. JoinMarket helps you to create these transactions in an easy and automated way.
|
||||
</p>
|
||||
<div class="d-flex justify-content-center">
|
||||
<rb.Button variant="dark" onClick={() => setStep(3)}>
|
||||
Continue
|
||||
</rb.Button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
} else if (step === 3) {
|
||||
return (
|
||||
<div class="mx-auto my-auto col-12 col-md-4">
|
||||
<div class="d-flex justify-content-center">
|
||||
<Sprite symbol="key" width="100" height="100" className="mb-4" />
|
||||
</div>
|
||||
<p class="fs-3 text-center">3: You Are In Control</p>
|
||||
<p class="text-center text-secondary mb-5">
|
||||
JoinMarket is fully non-custodial, meaning that you always have full control over your funds. The system uses
|
||||
Bitcoin’s smart contracts to make sure that all transactions are atomic and your funds are secure at all
|
||||
times.
|
||||
</p>
|
||||
<div class="d-flex justify-content-center">
|
||||
<rb.Button variant="dark" onClick={() => setStep(4)}>
|
||||
Continue
|
||||
</rb.Button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
} else if (step === 4) {
|
||||
return (
|
||||
<div class="mx-auto my-auto col-12 col-md-4">
|
||||
<div class="d-flex justify-content-center">
|
||||
<Sprite symbol="handshake" width="100" height="100" className="mb-4" />
|
||||
</div>
|
||||
<p class="fs-3 text-center">4. No Trusted Third Parties</p>
|
||||
<p class="text-center text-secondary mb-5">
|
||||
Since JoinMarket is a peer-to-peer system, trusted third parties are eliminated from the get-go. This unique
|
||||
market-driven approach reduces counterparty risk to a minimum.
|
||||
</p>
|
||||
<div class="d-flex justify-content-center">
|
||||
<rb.Button variant="dark" onClick={() => setStep(5)}>
|
||||
Continue
|
||||
</rb.Button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
} else if (step === 5) {
|
||||
return (
|
||||
<div class="mx-auto my-auto col-12 col-md-4">
|
||||
<div class="d-flex justify-content-center">
|
||||
<Sprite symbol="shield" width="100" height="100" className="mb-4" />
|
||||
</div>
|
||||
<p class="fs-3 text-center">5: Privacy for All</p>
|
||||
<p class="text-center text-secondary mb-5">
|
||||
JoinMarket is free and open-source software without a single point of failure. Everyone is free to use it and
|
||||
build upon it.
|
||||
</p>
|
||||
<div class="d-flex justify-content-center">
|
||||
<rb.Button variant="dark" onClick={() => setStep(0)}>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue