UI update
added three more sections in how it works page
This commit is contained in:
sairaj mote
parent
43f3502a39
commit
7f533e6fa5
1
assets/client-side.svg
Normal file
1
assets/client-side.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 500"><defs><style>.a{fill:none;stroke:#a7a9ac;stroke-miterlimit:10;stroke-width:8px;}.b{fill:#d1d3d4;opacity:0.5;}.c{fill:#2fa3dc;}.d{fill:#fff;}</style></defs><rect class="a" x="109.43" y="61.69" width="581.14" height="376.61" rx="16"/><line class="a" x1="109.43" y1="99.72" x2="690.57" y2="99.72"/><rect class="b" x="294.04" y="243.37" width="211.92" height="26.66" rx="13.33"/><path class="c" d="M425.36,186.89l8-8a1.46,1.46,0,0,0,0-2.07,1.48,1.48,0,0,0-1-.43H395.08a1.47,1.47,0,0,0-1.46,1.46v50a1.46,1.46,0,0,0,1.46,1.46,1.49,1.49,0,0,0,1.05-.44l8-8.12a1.43,1.43,0,0,0,.41-1V208.36a1.45,1.45,0,0,1,.44-1l7.95-8a1.47,1.47,0,0,0,0-2.07,1.51,1.51,0,0,0-1.05-.43H406a1.46,1.46,0,0,1-1.47-1.46h0v-6.62a1.48,1.48,0,0,1,1.47-1.46h18.35A1.46,1.46,0,0,0,425.36,186.89Z"/><path class="c" d="M377.45,187.32h9.69a1.46,1.46,0,0,0,1.48-1.45h0v-8a1.47,1.47,0,0,0-1.46-1.46h-4.43a1.47,1.47,0,0,0-1.22.66l-5.28,8a1.46,1.46,0,0,0,.42,2A1.48,1.48,0,0,0,377.45,187.32Z"/><rect class="b" x="166.67" y="306.67" width="469.01" height="47.09" rx="4"/><rect class="b" x="166.67" y="362.24" width="469.01" height="47.09" rx="4"/><rect class="c" x="139.17" y="124.69" width="77.03" height="18.73" rx="4.19"/><circle class="c" cx="612.54" cy="362.24" r="40.25"/><path class="d" d="M616.3,365.44V345.55a1.4,1.4,0,0,0-1.4-1.4h-5.06a1.4,1.4,0,0,0-1.4,1.4v19.89H601a1.4,1.4,0,0,0-1,2.39l12,12a.71.71,0,0,0,1,0l12-12a1.4,1.4,0,0,0-1-2.39Z"/></svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
1
assets/global.svg
Normal file
1
assets/global.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 800 500"><defs><style>.a{fill:none;}.b{fill:#e6e7e8;}.c{clip-path:url(#a);}.d{fill:#bcbec0;}.e{fill:#f05455;}.f{fill:#ee2649;}.g{fill:#1b87c9;stroke:#38a4dd;stroke-width:16px;}.g,.i{stroke-miterlimit:10;}.h{fill:#fff;}.i{fill:#f1f2f2;stroke:#a7a9ac;stroke-width:4px;}</style><clipPath id="a"><circle class="a" cx="387.95" cy="228.72" r="152.91"/></clipPath></defs><circle class="b" cx="387.95" cy="228.72" r="152.91"/><g class="c"><path class="d" d="M492.21,95.4l-40.85,14.71a14,14,0,0,0-2.64,25.12h0a14,14,0,0,1,.7,23.38l-24.32,17.2a14.06,14.06,0,0,0-5.76,9.31l-5.5,35.5a14,14,0,0,0,8.76,15.21L441,243a14,14,0,0,0,9.32.32l31-9.75a14,14,0,0,1,15.52,5.1l28.66,39.16a14.06,14.06,0,0,0,12.93,5.66l6.37-.74a14,14,0,0,0,12.1-10.93c5.78-26.42,21.23-97.34,20.88-99.88S525.25,117,506.88,98.68A14,14,0,0,0,492.21,95.4Z"/><path class="d" d="M250.05,242.29l40.76,1.35a38.17,38.17,0,0,1,36.67,33.94h0a38.15,38.15,0,0,0,5.65,16.17L350.35,321a38.21,38.21,0,0,1,4.59,30.24l-5.37,20.05a38.18,38.18,0,0,1-38,28.28l-31-.95A38.15,38.15,0,0,1,246.4,375L213.49,295A38.16,38.16,0,0,1,250.05,242.29Z"/></g><rect class="e" x="524.58" y="342.41" width="13.81" height="28.06" rx="5" transform="translate(-96.37 480.22) rotate(-45)"/><rect class="f" x="525.59" y="344.85" width="6.9" height="28.06" rx="3.45" transform="translate(-98.81 479.21) rotate(-45)"/><rect class="e" x="552.32" y="343.56" width="20.52" height="87.93" rx="5" transform="translate(1234.4 263.76) rotate(135)"/><rect class="f" x="560.87" y="340.02" width="10.26" height="87.34" rx="5" transform="translate(1237.53 254.79) rotate(135)"/><circle class="g" cx="477.81" cy="300.29" r="66.25"/><path class="h" d="M484.17,275.21c-15.58-7.33-21.22.22-22.93-5.42-2.39-7.87,11.4-19.16,30.39-12.6,17.48,6,19.85,26.52,12.6,30.4C499,290.37,501.3,283.26,484.17,275.21Z"/><path class="i" d="M363.83,177a5,5,0,0,1-5-5V172A34.15,34.15,0,0,0,315,139.29a45.71,45.71,0,1,0-87.08,27.76,7.49,7.49,0,0,1-7,10h0a20.1,20.1,0,0,0-20.09,20.1h0a20.09,20.09,0,0,0,20.09,20.09h141A20.09,20.09,0,0,0,382,197.11h0a20.1,20.1,0,0,0-20.1-20.1Z"/></svg>
|
||||
|
After Width: | Height: | Size: 2.1 KiB |
1
assets/put-in-blockchain.svg
Normal file
1
assets/put-in-blockchain.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 31 KiB |
1
assets/split-torrent.svg
Normal file
1
assets/split-torrent.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 31 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 24 KiB After Width: | Height: | Size: 24 KiB |
@ -791,14 +791,9 @@ sm-option {
|
||||
}
|
||||
|
||||
.info__title {
|
||||
font-size: 2rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
object text {
|
||||
color: rgba(var(--text-color), 1);
|
||||
}
|
||||
|
||||
#main_footer {
|
||||
padding: 2rem 0;
|
||||
background-color: rgba(var(--text-color), 0.06);
|
||||
|
||||
2
css/main.min.css
vendored
2
css/main.min.css
vendored
File diff suppressed because one or more lines are too long
@ -712,14 +712,8 @@ sm-option{
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.info__title{
|
||||
font-size: 2rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
object{
|
||||
text{
|
||||
color: rgba(var(--text-color), 1);
|
||||
}
|
||||
}
|
||||
|
||||
#main_footer{
|
||||
padding: 2rem 0;
|
||||
|
||||
6198
illustrations.ai
Normal file
6198
illustrations.ai
Normal file
File diff suppressed because one or more lines are too long
53
index.html
53
index.html
@ -197,9 +197,9 @@
|
||||
<h1 class="page__title">How it works?</h1>
|
||||
<p>FLO Torrent stores torrent files direclty on FLO blockchain making it completely decentralised. But this approch came with some challenges.</p>
|
||||
<section class="info-section">
|
||||
<object class="info__image" data="torrent-vs-flo-tx.svg" type="image/svg+xml"></object>
|
||||
<object class="info__image" data="assets/torrent-vs-flo-tx.svg" type="image/svg+xml"></object>
|
||||
<div class="textual-info">
|
||||
<h2 class="info__title">The problem</h2>
|
||||
<h2 class="info__title h2">The problem</h2>
|
||||
<p>
|
||||
Maximum number of free characters that can be stored in a FLO blockchain transaction is 1040.
|
||||
But torrents are typically 20000 characters each.
|
||||
@ -211,30 +211,69 @@
|
||||
</div>
|
||||
</section>
|
||||
<section class="info-section">
|
||||
<object class="info__image" data="split-torrent.svg" type="image/svg+xml"></object>
|
||||
<object class="info__image" data="assets/split-torrent.svg" type="image/svg+xml"></object>
|
||||
<div class="textual-info">
|
||||
<h2 class="info__title">The solution</h2>
|
||||
<h2 class="info__title h2">The solution</h2>
|
||||
<p>
|
||||
Splitting can easily be achieved by reading only 900 characters from the torrent file one at a time, and using the remaining characters for linking purposes.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
<section class="info-section">
|
||||
<object class="info__image" data="put-in-blockchain.svg" type="image/svg+xml"></object>
|
||||
<object class="info__image" data="assets/put-in-blockchain.svg" type="image/svg+xml"></object>
|
||||
<div class="textual-info">
|
||||
<h2 class="info__title">Next step</h2>
|
||||
<h2 class="info__title h2">Next step</h2>
|
||||
<p>
|
||||
We put the first segment in the FLO Blockchain, and get it's unique transaction ID.
|
||||
Then we put the second segment in the blockchain, and link it with previous transaction ID.
|
||||
</p>
|
||||
<p>
|
||||
This process continues untill all segments are put on the blockchain.
|
||||
This process continues until all segments are put on the blockchain.
|
||||
</p>
|
||||
<p>
|
||||
The transaction ID of the last segment is the entry point to the full data stream, and is published as a torrent ID.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
<section class="info-section">
|
||||
<object class="info__image" data="assets/global.svg" type="image/svg+xml"></object>
|
||||
<div class="textual-info">
|
||||
<h2 class="info__title h2">Discoverability</h2>
|
||||
<p>
|
||||
Transactions from a global FLO Address will list all Torrent IDs, and other details like name of torrent, description etc.
|
||||
</p>
|
||||
<p>
|
||||
This global FLO Address will be a trusted address, and will list only trusted and good quality torrents.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
<section class="info-section">
|
||||
<object class="info__image" data="assets/client-side.svg" type="image/svg+xml"></object>
|
||||
<div class="textual-info">
|
||||
<h2 class="info__title h2">The FLO torrent client</h2>
|
||||
<p>
|
||||
FLO torrent will first read the global FLO Address, find all the torrent details and list it.
|
||||
</p>
|
||||
<p>
|
||||
When you select a torrent to download. It's entry transaction ID is retrieved, and the last segment of torrent file is downloaded. The previous transaction ID is also retrieved, and data in that ID is downloaded.
|
||||
</p>
|
||||
<p>
|
||||
Finally, all segments are downloaded until we reach the first segment which has no further linkages.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
<section class="info-section">
|
||||
<object class="info__image" data="assets/client-side.svg" type="image/svg+xml"></object>
|
||||
<div class="textual-info">
|
||||
<h2 class="info__title h2">Putting everything back</h2>
|
||||
<p>
|
||||
Thus, all segments of the torrent can be downloaded from the blockchain.
|
||||
</p>
|
||||
<p>
|
||||
Now, all the browser has to do is to reassemble them in the correct order, and we have our torrent file.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
</main>
|
||||
<footer id="main_footer" class="page-layout">
|
||||
|
||||
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 31 KiB After Width: | Height: | Size: 31 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 31 KiB |
Loading…
Reference in New Issue
Block a user