2019-02-06 01:03:03 +01:00
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "utf-8" / >
< title > Components by LBRY< / title >
< link rel = "stylesheet" href = "https://rsms.me/inter/inter.css" / >
< link rel = "stylesheet" href = "https://cdn.jsdelivr.net/gh/tonsky/FiraCode@master/distr/fira_code.css" / >
< link rel = "stylesheet" href = "./index.css" / >
< style >
body {
display: flex;
flex-direction: column;
font-family: var(--font-sans);
padding: var(--spacing-l);
}
header {
border-bottom: 1px solid var(--lbry-gray-1);
margin-bottom: var(--spacing-l);
}
main {
flex: 1;
min-height: 100vh;
}
section {
2019-02-07 00:41:44 +01:00
border-bottom: 1px solid var(--lbry-gray-1);
2019-02-06 01:03:03 +01:00
margin-bottom: var(--spacing-l);
}
h1 {
font-size: 3rem;
font-weight: bolder;
}
h2 {
font-size: 2rem;
padding-bottom: var(--spacing-s);
}
h3 {
2019-02-07 00:41:44 +01:00
background-color: var(--lbry-black);
color: var(--lbry-white);
display: inline-block;
2019-02-06 01:03:03 +01:00
font-size: 1.5rem;
font-weight: bolder;
2019-02-07 00:41:44 +01:00
margin-bottom: var(--spacing-s);
padding: 0.25rem 1rem;
pointer-events: none;
2019-02-06 01:03:03 +01:00
}
p {
font-size: 1.25rem;
margin-bottom: var(--spacing-s);
}
hr {
margin-bottom: var(--spacing-s);
}
footer {
border-top: 1px solid var(--lbry-gray-1);
color: var(--lbry-gray-5);
padding-top: var(--spacing-l);
}
< / style >
< / head >
< body >
< header >
< h1 > @lbry/components< / h1 >
< h2 > Styling for shared components across LBRY properties< / h2 >
< / header >
< main >
< section >
< p > Hello and whaddup!< / p >
< / section >
< section >
< h3 > Form< / h3 >
< form >
< fieldset >
< legend > Subscribe to our newsletter< / legend >
< input-submit >
< input id = "emailAddress" placeholder = "you@domain.tld" type = "text" / >
< button title = "Subscribe to our technical newsletter" type = "button" > Subscribe< / button >
< / input-submit >
< / fieldset >
2019-02-07 21:22:04 +01:00
< fieldset >
< legend > Become a Gym Leader< / legend >
< fieldset-group >
< fieldset-section >
< label for = "name" > Name< / label >
< input id = "name" placeholder = "Will Smith" type = "text" / >
< / fieldset-section >
< fieldset-section >
< label for = "starter" > Pokémon< / label >
< select id = "starter" >
< option disabled selected > Choose a Pokémon< / option >
< option > Bulbasaur< / option >
< option > Charmander< / option >
< option > Squirtle< / option >
< / select >
< / fieldset-section >
< / fieldset-group >
< fieldset-section class = "full-width" >
< label for = "notes" > Notes< / label >
< textarea id = "notes" > < / textarea >
< / fieldset-section >
< / fieldset >
2019-02-06 01:03:03 +01:00
< fieldset >
< legend > Click some buttons< / legend >
2019-02-07 21:22:04 +01:00
< radio-element >
2019-02-07 00:41:44 +01:00
< input id = "test-radio-1" name = "toggle" type = "radio" >
< label for = "test-radio-1" > Radio button 1< / label >
2019-02-07 21:22:04 +01:00
< radio-toggle / >
< / radio-element >
2019-02-07 00:41:44 +01:00
2019-02-07 21:22:04 +01:00
< radio-element >
2019-02-07 00:41:44 +01:00
< input id = "test-radio-2" name = "toggle" type = "radio" >
< label for = "test-radio-2" > Radio button 2< / label >
2019-02-07 21:22:04 +01:00
< radio-toggle / >
< / radio-element >
< checkbox-element >
< input id = "test-checkbox-1" name = "check" type = "checkbox" >
< label for = "test-checkbox-1" > Checkbox< / label >
< checkbox-toggle / >
< / checkbox-element >
2019-02-06 01:03:03 +01:00
< / fieldset >
< / form >
< / section >
< section >
< h3 > Table< / h3 >
< table >
< thead >
< tr >
< th > Component< / th >
< th > Language (Toolset)< / th >
< th > What Is It< / th >
< / tr >
< / thead >
< tbody >
< tr >
< td > < a href = "https://github.com/lbryio/lbrycrd" rel = "noopener noreferrer" target = "_blank" > lbrycrd< / a > < / td >
< td > C++< / td >
< td > A full node for the LBRY blockchain, including a standalone wallet. Used by miners and some applications. Most consumer applications do not bundle < a class = "link--glossary" href = "/glossary#lbrycrd" > lbrycrd< / a > directly, and instead bundle < a class = "link--glossary" href = "/glossary#lbry-sdk" > lbry-sdk< / a > .< / td >
< / tr >
< tr >
< td > < a href = "https://github.com/lbryio/lbry" rel = "noopener noreferrer" target = "_blank" > lbry-sdk< / a > < / td >
< td > Python (asyncio)< / td >
< td > A daemon that can be used directly or to develop other applications. Provides convenience < a href = "/api/sdk" > APIs< / a > , bundles an SPV wallet (< a class = "link--glossary" href = "/glossary#torba" > torba< / a > ), and contains an implementation of the LBRY data network.< / td >
< / tr >
< tr >
< td > < a href = "https://github.com/lbryio/torba" rel = "noopener noreferrer" target = "_blank" > torba< / a > < / td >
< td > Python< / td >
< td > An < a class = "link--glossary" href = "/glossary#SPV" > SPV< / a > (Simple Payment Verification) wallet. Bundled with < a class = "link--glossary" href = "/glossary#lbry-sdk" > lbry-sdk< / a > .< / td >
< / tr >
< tr >
< td > < a href = "https://github.com/lbryio/lbry/tree/master/lbrynet/extras/wallet/server" rel = "noopener noreferrer" target = "_blank" > wallet server< / a > < / td >
< td > Protobuf, Python< / td >
< td > The wallet server used by < a class = "link--glossary" href = "/glossary#torba" > torba< / a > .< / td >
< / tr >
< tr >
< td > < a href = "https://github.com/lbryio/lbry/tree/master/lbrynet/schema" rel = "noopener noreferrer" target = "_blank" > schema< / a > < / td >
< td > Protobuf, Python< / td >
< td > Defines the structure of the metadata stored in the LBRY blockchain.< / td >
< / tr >
< / tbody >
< / table >
< / section >
< / main >
< footer > Copyright © 2018-2019, LBRY Inc. | BSD 3-Clause Licensed.< / footer >
< / body >
< / html >
