From 189e46b12ca6fa8518b6814178c09c22159fdfe0 Mon Sep 17 00:00:00 2001
From: SaketAnand
Date: Wed, 23 Aug 2023 15:11:12 +0530
Subject: [PATCH] Added index content for the webpage
---
.gitattributes | 2 +
css/main.css | 369 ++++++++++++++++++++++++++
css/main.min.css | 1 +
css/main.scss | 347 +++++++++++++++++++++++++
index.html | 589 ++++++++++++++++++++++++++++++++++++++++++
participants.html | 167 ++++++++++++
scripts/components.js | 5 +
7 files changed, 1480 insertions(+)
create mode 100644 .gitattributes
create mode 100644 css/main.css
create mode 100644 css/main.min.css
create mode 100644 css/main.scss
create mode 100644 index.html
create mode 100644 participants.html
create mode 100644 scripts/components.js
diff --git a/.gitattributes b/.gitattributes
new file mode 100644
index 0000000..dfe0770
--- /dev/null
+++ b/.gitattributes
@@ -0,0 +1,2 @@
+# Auto detect text files and perform LF normalization
+* text=auto
diff --git a/css/main.css b/css/main.css
new file mode 100644
index 0000000..84789a3
--- /dev/null
+++ b/css/main.css
@@ -0,0 +1,369 @@
+* {
+ padding: 0;
+ margin: 0;
+ box-sizing: border-box;
+ font-family: "Inter", sans-serif;
+}
+
+:root {
+ font-size: clamp(1rem, 1.2vmax, 1.2rem);
+}
+
+html,
+body {
+ height: 100%;
+}
+
+body {
+ --accent-color: #3d5afe;
+ --secondary-color: #ffac2e;
+ --text-color: 20, 20, 20;
+ --foreground-color: 252, 253, 255;
+ --background-color: 241, 243, 248;
+ --danger-color: rgb(255, 75, 75);
+ --green: #1cad59;
+ --yellow: rgb(220, 165, 0);
+ color: rgba(var(--text-color), 1);
+ background-color: rgba(var(--background-color), 1);
+}
+
+body[data-theme=dark] {
+ --accent-color: #6d83ff;
+ --secondary-color: #d60739;
+ --text-color: 220, 220, 220;
+ --foreground-color: 27, 28, 29;
+ --background-color: 21, 22, 22;
+ --danger-color: rgb(255, 106, 106);
+ --green: #00e676;
+ --yellow: rgb(255, 213, 5);
+}
+
+p,
+strong {
+ font-size: 0.9rem;
+ max-width: 65ch;
+ line-height: 1.7;
+ color: rgba(var(--text-color), 0.9);
+}
+
+.icon {
+ width: 1.2rem;
+ height: 1.2rem;
+ fill: rgba(var(--text-color), 0.9);
+ flex-shrink: 0;
+}
+
+.flex {
+ display: flex;
+}
+
+.flex-direction-column {
+ flex-direction: column;
+}
+
+.flex-wrap {
+ flex-wrap: wrap;
+}
+
+.grid {
+ display: grid;
+}
+
+.gap-0-3 {
+ gap: 0.3rem;
+}
+
+.gap-0-5 {
+ gap: 0.5rem;
+}
+
+.gap-1 {
+ gap: 1rem;
+}
+
+.gap-1-5 {
+ gap: 1.5rem;
+}
+
+.align-content-start {
+ align-content: start;
+}
+
+.align-items-center {
+ align-items: center;
+}
+
+.justify-content-center {
+ justify-content: center;
+}
+
+.wrap-around {
+ overflow-wrap: break-word;
+ word-wrap: break-word;
+ word-break: break-word;
+}
+
+header {
+ padding: 1.5rem 1rem;
+ justify-content: space-between;
+}
+
+main {
+ display: grid;
+ gap: 1rem;
+ padding: 1rem;
+ grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
+}
+
+#main_banner {
+ position: -webkit-sticky;
+ position: sticky;
+ top: 0;
+ justify-content: center;
+ padding: 1rem;
+ width: 100%;
+ background-color: rgb(238, 82, 82);
+}
+#main_banner .icon {
+ fill: rgba(var(--foreground-color), 1);
+}
+#main_banner #banner_content {
+ color: rgba(var(--foreground-color), 1);
+}
+
+.app {
+ display: flex;
+ flex-direction: column;
+ padding: max(1rem, 3vw);
+ background-color: rgba(var(--foreground-color), 1);
+ border-radius: 0.5rem;
+ gap: 1rem;
+}
+.app__icon {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 5rem;
+ height: 5rem;
+ border-radius: 0.5rem;
+ background-color: rgba(var(--background-color), 1);
+ margin-bottom: 1rem;
+}
+.app__icon .icon {
+ width: 3rem;
+ height: 3rem;
+ fill: rgba(var(--text-color), 0.9);
+}
+.app li {
+ list-style: none;
+ font-size: 0.9rem;
+ color: rgba(var(--text-color), 0.8);
+ margin-bottom: 0.8rem;
+ line-height: 1.5;
+}
+.app a:not([class]) {
+ display: flex;
+ align-items: center;
+ text-decoration: none;
+ color: var(--accent-color);
+ font-weight: 500;
+}
+.app a:not([class]):hover {
+ text-decoration: underline;
+}
+.app a:not([class]) .icon {
+ margin-left: 0.3rem;
+ width: 1em;
+ height: 1em;
+ fill: var(--accent-color);
+}
+
+.ext-link {
+ display: flex;
+ gap: 0.5rem;
+ align-items: center;
+ text-decoration: none;
+ background-color: var(--accent-color);
+ padding: 0.5rem 1rem;
+ border-radius: 0.5rem;
+ color: rgba(var(--foreground-color), 1);
+ font-weight: 500;
+ align-self: flex-start;
+ margin-top: auto;
+ transition: color 0.2s, background-color 0.2s;
+}
+.ext-link .icon {
+ fill: rgba(var(--foreground-color), 1);
+ transition: fill 0.2s;
+}
+.ext-link:hover {
+ color: var(--accent-color);
+ background-color: rgba(var(--foreground-color), 1);
+ box-shadow: 0 0 0 0.1rem var(--accent-color) inset;
+}
+.ext-link:hover .icon {
+ fill: var(--accent-color);
+}
+
+article {
+ display: grid;
+ gap: 1rem;
+ padding: 1.5rem max(1rem, 6vw);
+}
+
+ul {
+ display: grid;
+ gap: 1rem;
+ margin-top: 1rem;
+}
+
+.member-card {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 1rem;
+ padding: max(1rem, 1.5vw);
+ border-radius: 0.5rem;
+ background-color: rgba(var(--foreground-color), 1);
+}
+.member-card h4 {
+ min-width: 12rem;
+}
+.member-card h5 {
+ font-weight: 400;
+}
+.member-card .kyc-wrapper {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ font-size: 0.8rem;
+}
+.member-card .kyc-wrapper .icon {
+ width: 1.1rem;
+ height: 1.1rem;
+}
+.member-card .kyc-wrapper .kyc-status {
+ display: flex;
+ align-items: center;
+ gap: 0.1rem;
+ padding: 0.3rem;
+ border-radius: 3rem;
+ font-weight: 500;
+ background-color: rgba(var(--text-color), 0.1);
+ padding-right: 0.5rem;
+}
+.member-card .kyc-wrapper .kyc-status.pending {
+ background-color: var(--yellow);
+ color: rgba(var(--foreground-color), 1);
+}
+.member-card .kyc-wrapper .kyc-status.pending .icon {
+ fill: rgba(var(--foreground-color), 1);
+}
+.member-card .kyc-wrapper .kyc-status.verified {
+ background-color: var(--green);
+ color: rgba(var(--foreground-color), 1);
+}
+.member-card .kyc-wrapper .kyc-status.verified .icon {
+ fill: rgba(var(--foreground-color), 1);
+}
+
+sm-copy {
+ font-weight: 500;
+ font-size: 0.9rem;
+ color: rgba(var(--text-color), 0.8);
+}
+
+#hero_section {
+ text-align: center;
+ justify-content: center;
+ justify-items: center;
+ padding: 8vw 1rem;
+ margin-bottom: 1rem;
+ gap: 2rem;
+}
+#hero_section h1 {
+ font-size: max(1.6rem, 3vw);
+}
+#hero_section p {
+ max-width: 100%;
+}
+
+#token_price_wrapper {
+ padding: 1.5rem;
+ text-align: center;
+ aspect-ratio: 1/1;
+ width: 13rem;
+ background-color: rgba(var(--foreground-color), 1);
+ border-radius: 10rem;
+ justify-self: center;
+ font-size: 1rem;
+ font-weight: 500;
+ margin-top: 2rem;
+}
+
+.important-links {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 0.5rem;
+ margin-top: 1rem;
+}
+
+.important-link {
+ list-style: none;
+ flex: 1;
+}
+.important-link .icon,
+.important-link img {
+ width: 1.2rem;
+ height: 1.2rem;
+ fill: var(--accent-color);
+ flex-shrink: 0;
+}
+.important-link a {
+ white-space: nowrap;
+ display: flex;
+ align-items: center;
+ text-align: start;
+ gap: 0.5rem;
+ font-weight: 500;
+ background-color: rgba(var(--foreground-color), 1);
+ padding: 0.7rem 1rem;
+ border-radius: 0.5rem;
+ text-decoration: none;
+ color: var(--accent-color);
+}
+.important-link a:hover {
+ text-decoration: underline;
+}
+
+table th {
+ padding-bottom: 1rem;
+}
+table th:first-of-type {
+ text-align: start;
+}
+table th:not(:last-of-type) {
+ padding-right: 1rem;
+}
+table td {
+ padding-bottom: 0.8rem;
+ font-size: 0.9rem;
+}
+table td:not(:last-of-type) {
+ padding-right: 1rem;
+}
+table td:last-of-type {
+ display: flex;
+ justify-content: flex-end;
+}
+
+@media screen and (min-width: 768px) {
+ main {
+ padding: 1.5rem 8vw;
+ }
+ sm-copy {
+ min-width: 24rem;
+ }
+}
+.hidden {
+ display: none;
+}
\ No newline at end of file
diff --git a/css/main.min.css b/css/main.min.css
new file mode 100644
index 0000000..f1be977
--- /dev/null
+++ b/css/main.min.css
@@ -0,0 +1 @@
+*{padding:0;margin:0;box-sizing:border-box;font-family:"Inter",sans-serif}:root{font-size:clamp(1rem,1.2vmax,1.2rem)}html,body{height:100%}body{--accent-color: #3d5afe;--secondary-color: #ffac2e;--text-color: 20, 20, 20;--foreground-color: 252, 253, 255;--background-color: 241, 243, 248;--danger-color: rgb(255, 75, 75);--green: #1cad59;--yellow: rgb(220, 165, 0);color:rgba(var(--text-color), 1);background-color:rgba(var(--background-color), 1)}body[data-theme=dark]{--accent-color: #6d83ff;--secondary-color: #d60739;--text-color: 220, 220, 220;--foreground-color: 27, 28, 29;--background-color: 21, 22, 22;--danger-color: rgb(255, 106, 106);--green: #00e676;--yellow: rgb(255, 213, 5)}p,strong{font-size:.9rem;max-width:65ch;line-height:1.7;color:rgba(var(--text-color), 0.9)}.icon{width:1.2rem;height:1.2rem;fill:rgba(var(--text-color), 0.9);flex-shrink:0}.flex{display:flex}.flex-direction-column{flex-direction:column}.flex-wrap{flex-wrap:wrap}.grid{display:grid}.gap-0-3{gap:.3rem}.gap-0-5{gap:.5rem}.gap-1{gap:1rem}.gap-1-5{gap:1.5rem}.align-content-start{align-content:start}.align-items-center{align-items:center}.justify-content-center{justify-content:center}.wrap-around{overflow-wrap:break-word;word-wrap:break-word;word-break:break-word}header{padding:1.5rem 1rem;justify-content:space-between}main{display:grid;gap:1rem;padding:1rem;grid-template-columns:repeat(auto-fit, minmax(20rem, 1fr))}#main_banner{position:-webkit-sticky;position:sticky;top:0;justify-content:center;padding:1rem;width:100%;background-color:#ee5252}#main_banner .icon{fill:rgba(var(--foreground-color), 1)}#main_banner #banner_content{color:rgba(var(--foreground-color), 1)}.app{display:flex;flex-direction:column;padding:max(1rem,3vw);background-color:rgba(var(--foreground-color), 1);border-radius:.5rem;gap:1rem}.app__icon{display:flex;justify-content:center;align-items:center;width:5rem;height:5rem;border-radius:.5rem;background-color:rgba(var(--background-color), 1);margin-bottom:1rem}.app__icon .icon{width:3rem;height:3rem;fill:rgba(var(--text-color), 0.9)}.app li{list-style:none;font-size:.9rem;color:rgba(var(--text-color), 0.8);margin-bottom:.8rem;line-height:1.5}.app a:not([class]){display:flex;align-items:center;text-decoration:none;color:var(--accent-color);font-weight:500}.app a:not([class]):hover{text-decoration:underline}.app a:not([class]) .icon{margin-left:.3rem;width:1em;height:1em;fill:var(--accent-color)}.ext-link{display:flex;gap:.5rem;align-items:center;text-decoration:none;background-color:var(--accent-color);padding:.5rem 1rem;border-radius:.5rem;color:rgba(var(--foreground-color), 1);font-weight:500;align-self:flex-start;margin-top:auto;transition:color .2s,background-color .2s}.ext-link .icon{fill:rgba(var(--foreground-color), 1);transition:fill .2s}.ext-link:hover{color:var(--accent-color);background-color:rgba(var(--foreground-color), 1);box-shadow:0 0 0 .1rem var(--accent-color) inset}.ext-link:hover .icon{fill:var(--accent-color)}article{display:grid;gap:1rem;padding:1.5rem max(1rem,6vw)}ul{display:grid;gap:1rem;margin-top:1rem}.member-card{display:flex;flex-wrap:wrap;gap:1rem;padding:max(1rem,1.5vw);border-radius:.5rem;background-color:rgba(var(--foreground-color), 1)}.member-card h4{min-width:12rem}.member-card h5{font-weight:400}.member-card .kyc-wrapper{display:flex;align-items:center;gap:.5rem;font-size:.8rem}.member-card .kyc-wrapper .icon{width:1.1rem;height:1.1rem}.member-card .kyc-wrapper .kyc-status{display:flex;align-items:center;gap:.1rem;padding:.3rem;border-radius:3rem;font-weight:500;background-color:rgba(var(--text-color), 0.1);padding-right:.5rem}.member-card .kyc-wrapper .kyc-status.pending{background-color:var(--yellow);color:rgba(var(--foreground-color), 1)}.member-card .kyc-wrapper .kyc-status.pending .icon{fill:rgba(var(--foreground-color), 1)}.member-card .kyc-wrapper .kyc-status.verified{background-color:var(--green);color:rgba(var(--foreground-color), 1)}.member-card .kyc-wrapper .kyc-status.verified .icon{fill:rgba(var(--foreground-color), 1)}sm-copy{font-weight:500;font-size:.9rem;color:rgba(var(--text-color), 0.8)}#hero_section{text-align:center;justify-content:center;justify-items:center;padding:8vw 1rem;margin-bottom:1rem;gap:2rem}#hero_section h1{font-size:max(1.6rem,3vw)}#hero_section p{max-width:100%}#token_price_wrapper{padding:1.5rem;text-align:center;aspect-ratio:1/1;width:13rem;background-color:rgba(var(--foreground-color), 1);border-radius:10rem;justify-self:center;font-size:1rem;font-weight:500;margin-top:2rem}.important-links{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}.important-link{list-style:none;flex:1}.important-link .icon,.important-link img{width:1.2rem;height:1.2rem;fill:var(--accent-color);flex-shrink:0}.important-link a{white-space:nowrap;display:flex;align-items:center;text-align:start;gap:.5rem;font-weight:500;background-color:rgba(var(--foreground-color), 1);padding:.7rem 1rem;border-radius:.5rem;text-decoration:none;color:var(--accent-color)}.important-link a:hover{text-decoration:underline}table th{padding-bottom:1rem}table th:first-of-type{text-align:start}table th:not(:last-of-type){padding-right:1rem}table td{padding-bottom:.8rem;font-size:.9rem}table td:not(:last-of-type){padding-right:1rem}table td:last-of-type{display:flex;justify-content:flex-end}@media screen and (min-width: 768px){main{padding:1.5rem 8vw}sm-copy{min-width:24rem}}.hidden{display:none}
\ No newline at end of file
diff --git a/css/main.scss b/css/main.scss
new file mode 100644
index 0000000..7f2f7b0
--- /dev/null
+++ b/css/main.scss
@@ -0,0 +1,347 @@
+* {
+ padding: 0;
+ margin: 0;
+ box-sizing: border-box;
+ font-family: "Inter", sans-serif;
+}
+
+:root {
+ font-size: clamp(1rem, 1.2vmax, 1.2rem);
+}
+
+html,
+body {
+ height: 100%;
+}
+
+body {
+ --accent-color: #3d5afe;
+ --secondary-color: #ffac2e;
+ --text-color: 20, 20, 20;
+ --foreground-color: 252, 253, 255;
+ --background-color: 241, 243, 248;
+ --danger-color: rgb(255, 75, 75);
+ --green: #1cad59;
+ --yellow: rgb(220, 165, 0);
+ color: rgba(var(--text-color), 1);
+ background-color: rgba(var(--background-color), 1);
+}
+
+body[data-theme="dark"] {
+ --accent-color: #6d83ff;
+ --secondary-color: #d60739;
+ --text-color: 220, 220, 220;
+ --foreground-color: 27, 28, 29;
+ --background-color: 21, 22, 22;
+ --danger-color: rgb(255, 106, 106);
+ --green: #00e676;
+ --yellow: rgb(255, 213, 5);
+}
+
+p,
+strong {
+ font-size: 0.9rem;
+ max-width: 65ch;
+ line-height: 1.7;
+ color: rgba(var(--text-color), 0.9);
+}
+.icon {
+ width: 1.2rem;
+ height: 1.2rem;
+ fill: rgba(var(--text-color), 0.9);
+ flex-shrink: 0;
+}
+.flex {
+ display: flex;
+}
+.flex-direction-column {
+ flex-direction: column;
+}
+.flex-wrap {
+ flex-wrap: wrap;
+}
+.grid {
+ display: grid;
+}
+.gap-0-3 {
+ gap: 0.3rem;
+}
+.gap-0-5 {
+ gap: 0.5rem;
+}
+.gap-1 {
+ gap: 1rem;
+}
+.gap-1-5 {
+ gap: 1.5rem;
+}
+.align-content-start {
+ align-content: start;
+}
+
+.align-items-center {
+ align-items: center;
+}
+.justify-content-center {
+ justify-content: center;
+}
+.wrap-around {
+ overflow-wrap: break-word;
+ word-wrap: break-word;
+ word-break: break-word;
+}
+
+header {
+ padding: 1.5rem 1rem;
+ justify-content: space-between;
+}
+main {
+ display: grid;
+ gap: 1rem;
+ padding: 1rem;
+ grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
+}
+#main_banner {
+ position: sticky;
+ top: 0;
+ justify-content: center;
+ padding: 1rem;
+ width: 100%;
+ background-color: rgb(238, 82, 82);
+ .icon {
+ fill: rgba(var(--foreground-color), 1);
+ }
+ #banner_content {
+ color: rgba(var(--foreground-color), 1);
+ }
+}
+.app {
+ display: flex;
+ flex-direction: column;
+ padding: max(1rem, 3vw);
+ background-color: rgba(var(--foreground-color), 1);
+ border-radius: 0.5rem;
+ gap: 1rem;
+ &__icon {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 5rem;
+ height: 5rem;
+ border-radius: 0.5rem;
+ background-color: rgba(var(--background-color), 1);
+ margin-bottom: 1rem;
+ .icon {
+ width: 3rem;
+ height: 3rem;
+ fill: rgba(var(--text-color), 0.9);
+ }
+ }
+ li {
+ list-style: none;
+ font-size: 0.9rem;
+ color: rgba(var(--text-color), 0.8);
+ margin-bottom: 0.8rem;
+ line-height: 1.5;
+ }
+ a:not([class]) {
+ display: flex;
+ align-items: center;
+ text-decoration: none;
+ color: var(--accent-color);
+ font-weight: 500;
+ &:hover {
+ text-decoration: underline;
+ }
+ .icon {
+ margin-left: 0.3rem;
+ width: 1em;
+ height: 1em;
+ fill: var(--accent-color);
+ }
+ }
+}
+.ext-link {
+ display: flex;
+ gap: 0.5rem;
+ align-items: center;
+ text-decoration: none;
+ background-color: var(--accent-color);
+ padding: 0.5rem 1rem;
+ border-radius: 0.5rem;
+ color: rgba(var(--foreground-color), 1);
+ font-weight: 500;
+ align-self: flex-start;
+ margin-top: auto;
+ transition: color 0.2s, background-color 0.2s;
+ .icon {
+ fill: rgba(var(--foreground-color), 1);
+ transition: fill 0.2s;
+ }
+ &:hover {
+ color: var(--accent-color);
+ background-color: rgba(var(--foreground-color), 1);
+ box-shadow: 0 0 0 0.1rem var(--accent-color) inset;
+ .icon {
+ fill: var(--accent-color);
+ }
+ }
+}
+article {
+ display: grid;
+ gap: 1rem;
+ padding: 1.5rem max(1rem, 6vw);
+}
+ul {
+ display: grid;
+ gap: 1rem;
+ margin-top: 1rem;
+}
+.member-card {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 1rem;
+ padding: max(1rem, 1.5vw);
+ border-radius: 0.5rem;
+ background-color: rgba(var(--foreground-color), 1);
+ h4 {
+ min-width: 12rem;
+ }
+ h5 {
+ font-weight: 400;
+ }
+ .kyc-wrapper {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ font-size: 0.8rem;
+ .icon {
+ width: 1.1rem;
+ height: 1.1rem;
+ }
+ .kyc-status {
+ display: flex;
+ align-items: center;
+ gap: 0.1rem;
+ padding: 0.3rem;
+ border-radius: 3rem;
+ font-weight: 500;
+ background-color: rgba(var(--text-color), 0.1);
+ padding-right: 0.5rem;
+ &.pending {
+ background-color: var(--yellow);
+ color: rgba(var(--foreground-color), 1);
+ .icon {
+ fill: rgba(var(--foreground-color), 1);
+ }
+ }
+ &.verified {
+ background-color: var(--green);
+ color: rgba(var(--foreground-color), 1);
+ .icon {
+ fill: rgba(var(--foreground-color), 1);
+ }
+ }
+ }
+ }
+}
+
+sm-copy {
+ font-weight: 500;
+ font-size: 0.9rem;
+ color: rgba(var(--text-color), 0.8);
+}
+#hero_section {
+ text-align: center;
+ justify-content: center;
+ justify-items: center;
+ padding: 8vw 1rem;
+ margin-bottom: 1rem;
+ gap: 2rem;
+ h1 {
+ font-size: max(1.6rem, 3vw);
+ }
+ p {
+ max-width: 100%;
+ }
+}
+#token_price_wrapper {
+ padding: 1.5rem;
+ text-align: center;
+ aspect-ratio: 1/1;
+ width: 13rem;
+ background-color: rgba(var(--foreground-color), 1);
+ border-radius: 10rem;
+ justify-self: center;
+ font-size: 1rem;
+ font-weight: 500;
+ margin-top: 2rem;
+}
+.important-links {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 0.5rem;
+ margin-top: 1rem;
+}
+.important-link {
+ list-style: none;
+ flex: 1;
+ .icon,
+ img {
+ width: 1.2rem;
+ height: 1.2rem;
+ fill: var(--accent-color);
+ flex-shrink: 0;
+ }
+ a {
+ white-space: nowrap;
+ display: flex;
+ align-items: center;
+ text-align: start;
+ gap: 0.5rem;
+ font-weight: 500;
+ background-color: rgba(var(--foreground-color), 1);
+ padding: 0.7rem 1rem;
+ border-radius: 0.5rem;
+ text-decoration: none;
+ color: var(--accent-color);
+ &:hover {
+ text-decoration: underline;
+ }
+ }
+}
+table {
+ th {
+ &:first-of-type {
+ text-align: start;
+ }
+ &:not(:last-of-type) {
+ padding-right: 1rem;
+ }
+ padding-bottom: 1rem;
+ }
+ td {
+ padding-bottom: 0.8rem;
+ font-size: 0.9rem;
+ &:not(:last-of-type) {
+ padding-right: 1rem;
+ }
+ &:last-of-type {
+ display: flex;
+ justify-content: flex-end;
+ }
+ }
+}
+
+@media screen and (min-width: 768px) {
+ main {
+ padding: 1.5rem 8vw;
+ }
+ sm-copy {
+ min-width: 24rem;
+ }
+}
+
+.hidden {
+ display: none;
+}
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..3a035ea
--- /dev/null
+++ b/index.html
@@ -0,0 +1,589 @@
+
+
+
+
+
+
+
+ Content Collaboration Economic System
+
+
+
+
+
+
+
+
+
+
+
+ RanchiMall
+
+
+
+
+
+
+
+ Content Collaboration and Articles
+
+
Proof of Concept
+
+ Tokenizing articles on blockchain using FLO and Bitcoin address
+
+
+
+
+
+ Price per content# token (Dynamic)
+
+
+
+
+
+
+ Below are the initial blockchain data and apps to
+ begin with the Content# Token Economic System.
+
+
+
+
+
+
+
+
+ Bitcoin based multisig account
+
+
+ Multi-user Bitcoin bank account that holds assets for the project.
+ All assets are owned by token holders.
+
+
+

+
BTC address:
+
+
+
+ Check balance
+
+
+
+
+
+
+
+ Equivalent FLO multisig account
+
+
+ An equivalent FLO address connects to same user account if signed in with its equivalent BTC address.
+
+
+

+
Equivalent FLO address:
+
+
+
+ Check transactions
+
+
+
+
+
+
+
+
+
+
+ Statistics
+
+
Statistics are from 19th August 2023 to Today
+
+
+
+ | Stat |
+ Value |
+ Source |
+
+
+
+
+
+
+
+
+
+
+
+ Swap content# with USD#
+
+
+ Content# tokens can be exchanged for USD# tokens and vice versa.
+
+
+
+
+
+
+
+ FLO Wallet
+
+
+ -
+ Generate FLO address and private key
+
+ -
+ Send FLO and FLO tokens (content#)
+
+ -
+ Blockchain command to transfer tokens: e.g. send 5 content#
+
+ -
+ How we created tokens: create 100000000000000 content#
+
+
+
+ Open
+
+
+
+
+
+
+ Bitcoin Wallet
+
+
+ -
+ Generate a bitcoin address and private key
+
+
+ -
+ Send bitcoins
+
+ -
+ Convert Bitcoin address to FLO address & Bitcoin private key to FLO private key and vice versa
+
+
+
+ Open
+
+
+
+
+
+
+
+ Bitcoin/FLO Multisig Messenger
+
+
+ -
+ Create multi-sig as a private chat group and facilitate multi-sig transactions
+
+ -
+ chat and mail other Bitcoin/ FLO addresses using your Bitcoin/FLO address
+
+
+
+ Open
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/participants.html b/participants.html
new file mode 100644
index 0000000..925db0f
--- /dev/null
+++ b/participants.html
@@ -0,0 +1,167 @@
+
+
+
+
+
+
+
+ Participants and KYC status
+
+
+
+
+
+
+
+
+
+
+
+ RanchiMall
+
+
+
+
+
+
+
+ Project participants
+
+
+ FLO/BTC addresses used for El Salvador Project B and participants' KYC status.
+
+
+
+
+
+
+
+
+
FLO
+
+
+
+
BTC
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/scripts/components.js b/scripts/components.js
new file mode 100644
index 0000000..b19bcdd
--- /dev/null
+++ b/scripts/components.js
@@ -0,0 +1,5 @@
+/*jshint esversion: 6 */
+// Components downloaded: copy,spinner,theme-toggle
+const smCopy = document.createElement("template"); smCopy.innerHTML = '', customElements.define("sm-copy", class extends HTMLElement { constructor() { super(), this.attachShadow({ mode: "open" }).append(smCopy.content.cloneNode(!0)), this.copyContent = this.shadowRoot.querySelector(".copy-content"), this.copyButton = this.shadowRoot.querySelector(".copy-button"), this.copy = this.copy.bind(this) } static get observedAttributes() { return ["value"] } set value(t) { this.setAttribute("value", t) } get value() { return this.getAttribute("value") } fireEvent() { this.dispatchEvent(new CustomEvent("copy", { composed: !0, bubbles: !0, cancelable: !0 })) } copy() { navigator.clipboard.writeText(this.copyContent.textContent).then(t => this.fireEvent()).catch(t => console.error(t)) } connectedCallback() { this.copyButton.addEventListener("click", this.copy) } attributeChangedCallback(t, n, o) { "value" === t && (this.copyContent.textContent = o) } disconnectedCallback() { this.copyButton.removeEventListener("click", this.copy) } });
+const spinner = document.createElement("template"); spinner.innerHTML = ''; class SpinnerLoader extends HTMLElement { constructor() { super(), this.attachShadow({ mode: "open" }).append(spinner.content.cloneNode(!0)) } } window.customElements.define("sm-spinner", SpinnerLoader);
+const themeToggle = document.createElement("template"); themeToggle.innerHTML = ' '; class ThemeToggle extends HTMLElement { constructor() { super(), this.attachShadow({ mode: "open" }).append(themeToggle.content.cloneNode(!0)), this.isChecked = !1, this.hasTheme = "light", this.toggleState = this.toggleState.bind(this), this.fireEvent = this.fireEvent.bind(this), this.handleThemeChange = this.handleThemeChange.bind(this) } static get observedAttributes() { return ["checked"] } daylight() { this.hasTheme = "light", document.body.dataset.theme = "light", this.setAttribute("aria-checked", "false") } nightlight() { this.hasTheme = "dark", document.body.dataset.theme = "dark", this.setAttribute("aria-checked", "true") } toggleState() { this.toggleAttribute("checked"), this.fireEvent() } handleKeyDown(e) { " " === e.key && this.toggleState() } handleThemeChange(e) { e.detail.theme !== this.hasTheme && ("dark" === e.detail.theme ? this.setAttribute("checked", "") : this.removeAttribute("checked")) } fireEvent() { this.dispatchEvent(new CustomEvent("themechange", { bubbles: !0, composed: !0, detail: { theme: this.hasTheme } })) } connectedCallback() { this.setAttribute("role", "switch"), this.setAttribute("aria-label", "theme toggle"), "dark" === localStorage.getItem(`${window.location.hostname}-theme`) ? (this.nightlight(), this.setAttribute("checked", "")) : "light" === localStorage.getItem(`${window.location.hostname}-theme`) ? (this.daylight(), this.removeAttribute("checked")) : window.matchMedia("(prefers-color-scheme: dark)").matches ? (this.nightlight(), this.setAttribute("checked", "")) : (this.daylight(), this.removeAttribute("checked")), this.addEventListener("click", this.toggleState), this.addEventListener("keydown", this.handleKeyDown), document.addEventListener("themechange", this.handleThemeChange) } disconnectedCallback() { this.removeEventListener("click", this.toggleState), this.removeEventListener("keydown", this.handleKeyDown), document.removeEventListener("themechange", this.handleThemeChange) } attributeChangedCallback(e, t, n) { "checked" === e && (this.hasAttribute("checked") ? (this.nightlight(), localStorage.setItem(`${window.location.hostname}-theme`, "dark")) : (this.daylight(), localStorage.setItem(`${window.location.hostname}-theme`, "light"))) } } window.customElements.define("theme-toggle", ThemeToggle);
\ No newline at end of file