Adding more apps and download option
This commit is contained in:
sairaj mote
parent
982b1e89a6
commit
33e8754153
33
css/main.css
33
css/main.css
@ -779,7 +779,7 @@ theme-toggle {
|
||||
|
||||
#page_container {
|
||||
overflow: auto;
|
||||
padding: 1rem;
|
||||
padding: 1rem max(1rem, 3vw);
|
||||
gap: 1rem;
|
||||
}
|
||||
#page_container > * {
|
||||
@ -834,7 +834,10 @@ theme-toggle {
|
||||
object-fit: cover;
|
||||
background-color: rgba(var(--text-color), 0.06);
|
||||
}
|
||||
.dapp-card .flex {
|
||||
.dapp-card__title__wrapper {
|
||||
color: rgba(var(--text-color), 1);
|
||||
}
|
||||
.dapp-card > .flex {
|
||||
margin-top: 1rem;
|
||||
margin-left: auto;
|
||||
}
|
||||
@ -846,6 +849,28 @@ theme-toggle {
|
||||
fill: rgba(var(--background-color), 1);
|
||||
}
|
||||
|
||||
#dapps_menu {
|
||||
view-transition-name: dapps-menu;
|
||||
}
|
||||
|
||||
.hamburger-menu__item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 0.5rem;
|
||||
font-size: 0.9rem;
|
||||
color: rgba(var(--text-color), 0.8);
|
||||
}
|
||||
.hamburger-menu__item:hover {
|
||||
background-color: rgba(var(--text-color), 0.06);
|
||||
text-decoration: none;
|
||||
}
|
||||
.hamburger-menu__item--active {
|
||||
background-color: rgba(var(--text-color), 0.06);
|
||||
color: rgba(var(--text-color), 1);
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 640px) {
|
||||
.hide-on-small {
|
||||
display: none;
|
||||
@ -858,6 +883,10 @@ theme-toggle {
|
||||
.popup__header {
|
||||
padding: 1rem 1.5rem 0 1.5rem;
|
||||
}
|
||||
#page_container[data-page=dapps] {
|
||||
display: grid;
|
||||
grid-template-columns: 12rem 1fr;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 1280px) {
|
||||
.page {
|
||||
|
||||
2
css/main.min.css
vendored
2
css/main.min.css
vendored
File diff suppressed because one or more lines are too long
@ -720,7 +720,7 @@ theme-toggle {
|
||||
}
|
||||
#page_container {
|
||||
overflow: auto;
|
||||
padding: 1rem;
|
||||
padding: 1rem max(1rem, 3vw);
|
||||
gap: 1rem;
|
||||
& > * {
|
||||
margin: 0 auto;
|
||||
@ -773,7 +773,10 @@ theme-toggle {
|
||||
object-fit: cover;
|
||||
background-color: rgba(var(--text-color), 0.06);
|
||||
}
|
||||
.flex {
|
||||
&__title__wrapper {
|
||||
color: rgba(var(--text-color), 1);
|
||||
}
|
||||
& > .flex {
|
||||
margin-top: 1rem;
|
||||
margin-left: auto;
|
||||
}
|
||||
@ -787,12 +790,34 @@ theme-toggle {
|
||||
}
|
||||
}
|
||||
}
|
||||
#dapps_menu {
|
||||
view-transition-name: dapps-menu;
|
||||
}
|
||||
.hamburger-menu {
|
||||
}
|
||||
.hamburger-menu__item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 0.5rem;
|
||||
font-size: 0.9rem;
|
||||
color: rgba(var(--text-color), 0.8);
|
||||
&:hover {
|
||||
background-color: rgba(var(--text-color), 0.06);
|
||||
text-decoration: none;
|
||||
}
|
||||
&--active {
|
||||
background-color: rgba(var(--text-color), 0.06);
|
||||
color: rgba(var(--text-color), 1);
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 640px) {
|
||||
.hide-on-small {
|
||||
display: none;
|
||||
}
|
||||
#page_container {
|
||||
&[data-page="home"] {
|
||||
&[data-page="dapps"] {
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -803,6 +828,12 @@ theme-toggle {
|
||||
.popup__header {
|
||||
padding: 1rem 1.5rem 0 1.5rem;
|
||||
}
|
||||
#page_container {
|
||||
&[data-page="dapps"] {
|
||||
display: grid;
|
||||
grid-template-columns: 12rem 1fr;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 1280px) {
|
||||
.page {
|
||||
|
||||
174
index.html
174
index.html
@ -14,6 +14,7 @@
|
||||
</head>
|
||||
|
||||
<body class="hidden">
|
||||
<sm-notifications id="notification_drawer"></sm-notifications>
|
||||
<header id="main_header" class="flex align-center">
|
||||
<a href="#/home">
|
||||
<h4>
|
||||
@ -310,17 +311,129 @@
|
||||
name: 'Messenger',
|
||||
description: 'Chat with your Bitcoin, Ethereum and FLO friends or use Bitcoin and FLO multisig.',
|
||||
icon: ``,
|
||||
appLink: 'https://ranchimall.github.io/messenger/',
|
||||
moreLink: '#/dapps/messenger'
|
||||
appLink: 'https://ranchimall.github.io/messenger',
|
||||
moreLink: '#/dapps/messenger',
|
||||
tags: ['messenger', 'chat', 'bitcoin', 'ethereum', 'flo', 'multisig'],
|
||||
category: 'Social'
|
||||
},
|
||||
{
|
||||
name: 'FLO wallet',
|
||||
name: 'FLO Wallet',
|
||||
description: 'A wallet for FLO',
|
||||
icon: ``,
|
||||
appLink: 'https://ranchimall.github.io/flowallet/',
|
||||
moreLink: '#/dapps/flo-wallet'
|
||||
appLink: 'https://ranchimall.github.io/flowallet',
|
||||
moreLink: '#/dapps/flo-wallet',
|
||||
tags: ['flo', 'wallet'],
|
||||
category: 'Wallet'
|
||||
},
|
||||
]
|
||||
{
|
||||
name: 'FLO Scout',
|
||||
description: 'Track FLO token transactions and utilize smart contracts.',
|
||||
icon: ``,
|
||||
appLink: 'https://ranchimall.github.io/floscout',
|
||||
moreLink: '#/dapps/flo-scout',
|
||||
tags: ['flo', 'scout', 'smart contracts'],
|
||||
category: 'Blockchain Explorer'
|
||||
},
|
||||
{
|
||||
name: 'BTC Wallet',
|
||||
description: 'Send and receive Bitcoin and track transactions.',
|
||||
icon: ``,
|
||||
appLink: 'https://ranchimall.github.io/btcwallet',
|
||||
moreLink: '#/dapps/btc-wallet',
|
||||
tags: ['bitcoin', 'wallet'],
|
||||
category: 'Wallet'
|
||||
},
|
||||
{
|
||||
name: 'Taproot wallet',
|
||||
description: 'A Bitcoin wallet with Taproot support.',
|
||||
icon: ``,
|
||||
appLink: 'https://ranchimall.github.io/taprootwallet',
|
||||
moreLink: '#/dapps/taproot-wallet',
|
||||
tags: ['bitcoin', 'wallet', 'taproot'],
|
||||
category: 'Wallet'
|
||||
},
|
||||
{
|
||||
name: 'FLO Ethereum',
|
||||
description: 'A Ethereum wallet that works with FLO',
|
||||
icon: ``,
|
||||
appLink: 'https://ranchimall.github.io/floethereum',
|
||||
moreLink: '#/dapps/flo-ethereum',
|
||||
tags: ['ethereum', 'wallet', 'flo'],
|
||||
category: 'Wallet'
|
||||
},
|
||||
{
|
||||
name: 'KYC',
|
||||
description: 'An app to verify your identity',
|
||||
icon: ``,
|
||||
appLink: 'https://ranchimall.github.io/kyc',
|
||||
moreLink: '#/dapps/kyc',
|
||||
tags: ['kyc', 'identity'],
|
||||
category: 'Identity'
|
||||
},
|
||||
{
|
||||
name: 'BTC Mortgage',
|
||||
description: 'Borrow or Lend USD against Bitcoin',
|
||||
icon: ``,
|
||||
appLink: 'https://ranchimall.github.io/btcmortgage',
|
||||
moreLink: '#/dapps/btc-mortgage',
|
||||
tags: ['bitcoin', 'mortgage', 'lend', 'borrow'],
|
||||
category: 'Finance'
|
||||
},
|
||||
{
|
||||
name: 'FLOpay',
|
||||
description: 'A rupee token payments app based on FLO',
|
||||
icon: ``,
|
||||
appLink: 'https://ranchimall.github.io/flopay',
|
||||
moreLink: '#/dapps/flopay',
|
||||
tags: ['flo', 'payments', 'rupee'],
|
||||
category: 'Wallet'
|
||||
},
|
||||
{
|
||||
name: 'Content Collaboration',
|
||||
description: 'A writing app that allows you to collaborate with others',
|
||||
icon: ``,
|
||||
appLink: 'https://ranchimall.github.io/cc',
|
||||
moreLink: '#/dapps/content-collaboration',
|
||||
tags: ['collaboration', 'writing', 'content'],
|
||||
category: 'Content'
|
||||
},
|
||||
{
|
||||
name: 'RIBC',
|
||||
description: 'RanchiMall Internship Blockchain Contract (RIBC) allows you hire and manage interns.',
|
||||
icon: ``,
|
||||
appLink: 'https://ranchimall.github.io/ribc',
|
||||
moreLink: '#/dapps/ribc',
|
||||
tags: ['internship', 'contract', 'ribc'],
|
||||
category: 'Management'
|
||||
},
|
||||
{
|
||||
name: 'LogSheet',
|
||||
description: 'Create and manage public and private log sheets',
|
||||
icon: ``,
|
||||
appLink: 'https://ranchimall.github.io/logsheet',
|
||||
moreLink: '#/dapps/log-sheet',
|
||||
tags: ['log', 'sheet', 'logsheets'],
|
||||
category: 'Content'
|
||||
},
|
||||
{
|
||||
name: 'Exchange',
|
||||
description: 'Trade FLO and FLO tokens with rupee tokens',
|
||||
icon: ``,
|
||||
appLink: 'https://ranchimall.github.io/exchangemarket',
|
||||
moreLink: '#/dapps/exchange',
|
||||
tags: ['exchange', 'trade', 'flo', 'rupee'],
|
||||
category: 'Finance'
|
||||
},
|
||||
{
|
||||
name: 'RanchiMall Times',
|
||||
description: 'A news app that showcases articles created with Content Collaboration app',
|
||||
icon: ``,
|
||||
appLink: 'https://ranchimall.github.io/rmtimes',
|
||||
moreLink: '#/dapps/ranchimall-times',
|
||||
tags: ['news', 'articles', 'content'],
|
||||
category: 'Content'
|
||||
},
|
||||
].sort((a, b) => a.name.localeCompare(b.name))
|
||||
router.addRoute('home', renderHome)
|
||||
router.addRoute('', renderHome)
|
||||
function renderDappCard(dapp) {
|
||||
@ -331,16 +444,18 @@
|
||||
${icon}
|
||||
</div>
|
||||
<div class="dapp-card__content grid gap-0-5">
|
||||
<h3 class="dapp-card__title">${name}</h3>
|
||||
<a class="flex align-center dapp-card__title__wrapper" href=${moreLink}>
|
||||
<h3 class="dapp-card__title">${name}</h3>
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6-6-6z"/></svg>
|
||||
</a>
|
||||
<p class="dapp-card__description">${description}</p>
|
||||
</div>
|
||||
<div class="flex gap-0-5 align-center">
|
||||
<a href=${moreLink} class="button dapp-card__link">
|
||||
Know more
|
||||
<svg class="icon margin-left-0-5" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/></svg>
|
||||
<div class="flex gap-0-5 align-center flex-wrap">
|
||||
<a href=${`https://github.com/ranchimall/${appLink.split('/').pop()}/archive/refs/heads/master.zip`} class="button dapp-card__link" title="Download dapp Zip">
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><g><rect fill="none" height="24" width="24"/></g><g><path d="M18,15v3H6v-3H4v3c0,1.1,0.9,2,2,2h12c1.1,0,2-0.9,2-2v-3H18z M17,11l-1.41-1.41L13,12.17V4h-2v8.17L8.41,9.59L7,11l5,5 L17,11z"/></g></svg>
|
||||
</a>
|
||||
<a href=${appLink} class="button dapp-card__link dapp-card__link--primary" target="_blank">
|
||||
Check it out
|
||||
Try it
|
||||
<svg class="icon margin-left-0-5" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"> <path d="M0 0h24v24H0z" fill="none"></path> <path d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"></path> </svg>
|
||||
</a>
|
||||
</div>
|
||||
@ -405,27 +520,42 @@
|
||||
renderElem(getRef('dapp_list'), html`${renderedDappsList}`)
|
||||
}
|
||||
}
|
||||
const appHamburgerMenu = (activePage) => html`
|
||||
<nav id="dapps_menu" class="grid gap-1">
|
||||
<h4>Dapps</h4>
|
||||
<ul class="flex flex-direction-column hamburger-menu gap-0-3">
|
||||
${dappsList.map(dapp => html`
|
||||
<li>
|
||||
<a class=${`hamburger-menu__item ${dapp.moreLink.includes(activePage) ? 'hamburger-menu__item--active' : ''}`} href=${dapp.moreLink}>${dapp.name}</a>
|
||||
</li>
|
||||
`)}
|
||||
</ul>
|
||||
</nav>
|
||||
`
|
||||
router.addRoute('dapps', (state) => {
|
||||
const { wildcards: [page], viewTransition } = state
|
||||
getRef('page_container').dataset.page = 'dapps';
|
||||
const { name, description, icon, appLink, moreLink } = dappsList.find(dapp => dapp.moreLink.includes(page))
|
||||
let dappPage = [
|
||||
appHamburgerMenu(page),
|
||||
html`
|
||||
<section class="flex flex-direction-column gap-1-5">
|
||||
<h1>${name}</h1>
|
||||
<p>${description}</p>
|
||||
</section>
|
||||
`
|
||||
]
|
||||
switch (page) {
|
||||
case 'messenger':
|
||||
renderElem(getRef('page_container'), html`
|
||||
<section class="grid gap-1-5">
|
||||
<h1>Messenger</h1>
|
||||
<p>Chat with your Bitcoin, Ethereum and FLO friends or use Bitcoin and FLO multisig.</p>
|
||||
</section>
|
||||
dappPage.push(html`
|
||||
`)
|
||||
break;
|
||||
case 'flo-wallet':
|
||||
renderElem(getRef('page_container'), html`
|
||||
<section class="grid gap-1-5">
|
||||
<h1>FLO wallet</h1>
|
||||
<p>A wallet for FLO</p>
|
||||
</section>
|
||||
dappPage.push(html`
|
||||
`)
|
||||
break;
|
||||
}
|
||||
renderElem(getRef('page_container'), html`${dappPage}`)
|
||||
if (!viewTransition) return
|
||||
viewTransition.ready.then(() => {
|
||||
document.documentElement.animate(
|
||||
|
||||
Loading…
Reference in New Issue
Block a user