UI update

added ore illustrations
This commit is contained in:
sairaj mote 2021-07-01 15:01:31 +05:30
parent 7f533e6fa5
commit 30ec3a3837
5 changed files with 4149 additions and 4003 deletions

1
assets/chunk-linking.svg Normal file

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 16 KiB

View File

@ -1 +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>
<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,.d{fill:#d1d3d4;}.b{opacity:0.4;}.c{fill:#2fa3dc;}.d{opacity:0.3;}.e{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="d" x="166.67" y="302.43" width="469.01" height="47.09" rx="4"/><rect class="d" x="166.67" y="358" 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="e" 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>

Before

Width:  |  Height:  |  Size: 1.4 KiB

After

Width:  |  Height:  |  Size: 1.5 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 35 KiB

File diff suppressed because one or more lines are too long

View File

@ -195,7 +195,7 @@
</section>
<section id="how_it_works" class="page hide-completely page-layout">
<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>
<p>FLO Torrent stores torrent files directly on FLO blockchain making it completely decentralised. But this approch came with some challenges.</p>
<section class="info-section">
<object class="info__image" data="assets/torrent-vs-flo-tx.svg" type="image/svg+xml"></object>
<div class="textual-info">
@ -230,6 +230,12 @@
<p>
This process continues until all segments are put on the blockchain.
</p>
</div>
</section>
<section class="info-section">
<object class="info__image" data="assets/chunk-linking.svg" type="image/svg+xml"></object>
<div class="textual-info">
<h2 class="info__title h2">Linking the chunks</h2>
<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>
@ -263,7 +269,7 @@
</div>
</section>
<section class="info-section">
<object class="info__image" data="assets/client-side.svg" type="image/svg+xml"></object>
<object class="info__image" data="assets/torrent-assembly.svg" type="image/svg+xml"></object>
<div class="textual-info">
<h2 class="info__title h2">Putting everything back</h2>
<p>
@ -1090,7 +1096,7 @@
}
const categories = ['movie', 'tv series', 'video', 'music', 'software', 'game', 'image', 'audio', 'misc']
const allTags = ['action', 'adventure', 'comedy', 'crime', 'drama', 'family', 'fantacy', 'horror', 'mystery', 'romance', 'sci-fi', 'sport', 'thriller', 'western']
const allTags = ['action', 'adventure', ,'anime', 'comedy', 'crime', 'drama', 'family', 'fantacy', 'horror', 'korean', 'mystery', 'romance', 'sci-fi', 'sport', 'thriller', 'western']
function renderOptions(list, options = {}){
const {groupName} = options