diff --git a/components.js b/components.js new file mode 100644 index 0000000..aa18c59 --- /dev/null +++ b/components.js @@ -0,0 +1,2 @@ +/*jshint esversion: 6 */ +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 diff --git a/css/main.css b/css/main.css new file mode 100644 index 0000000..ed164db --- /dev/null +++ b/css/main.css @@ -0,0 +1,143 @@ +* { + 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 { + display: flex; +} + +.align-items-center { + align-items: center; +} + +header { + padding: 1.5rem 1rem; + justify-content: space-between; +} + +main { + display: grid; + gap: 1rem; + padding: 1.5rem max(1rem, 6vw); + grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); +} + +.app { + display: flex; + flex-direction: column; + padding: max(1.5rem, 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; +} +.ext-link .icon { + fill: rgba(var(--foreground-color), 1); +} + +@media screen and (min-width: 768px) { + main { + padding: 1.5rem 8vw; + } +} \ No newline at end of file diff --git a/css/main.min.css b/css/main.min.css new file mode 100644 index 0000000..6cba01b --- /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{display:flex}.align-items-center{align-items:center}header{padding:1.5rem 1rem;justify-content:space-between}main{display:grid;gap:1rem;padding:1.5rem max(1rem,6vw);grid-template-columns:repeat(auto-fit, minmax(20rem, 1fr))}.app{display:flex;flex-direction:column;padding:max(1.5rem,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}.ext-link .icon{fill:rgba(var(--foreground-color), 1)}@media screen and (min-width: 768px){main{padding:1.5rem 8vw}} \ No newline at end of file diff --git a/css/main.scss b/css/main.scss new file mode 100644 index 0000000..f1aca0a --- /dev/null +++ b/css/main.scss @@ -0,0 +1,137 @@ +* { + 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 { + display: flex; +} +.align-items-center { + align-items: center; +} + +header { + padding: 1.5rem 1rem; + justify-content: space-between; +} +main { + display: grid; + gap: 1rem; + padding: 1.5rem max(1rem, 6vw); + grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); +} +.app { + display: flex; + flex-direction: column; + padding: max(1.5rem, 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; + .icon { + fill: rgba(var(--foreground-color), 1); + } +} + +@media screen and (min-width: 768px) { + main { + padding: 1.5rem 8vw; + } +} diff --git a/index.html b/index.html new file mode 100644 index 0000000..d1ca6bf --- /dev/null +++ b/index.html @@ -0,0 +1,254 @@ + + + + + + + + El Salvador Real Estate Tokenization + + + + + + + + +
+

+ + + + RanchiMall +

+ +
+
+

+ El Salvador Real Estate Tokenization +

+
+
+ + + + + + + + + + +
+

+ FLO Wallet +

+ + + Open + + + + + + + + + +
+
+
+ + + +
+

+ Bitcoin Wallet +

+ + + Open + + + + + + + + + +
+
+
+ + + + +
+

+ FLO Scout +

+

+ FLO token explorer for tokens (flobnb#, rupee#, mining#, elsalvador#, bitcoinland#) and + their transactions +

+ + Open + + + + + + + + + +
+
+
+ + + + +
+

+ Content Collaboration +

+ + + Open + + + + + + + + + +
+
+
+ + + + + + + +
+

+ Bitcoin/FLO Multisig Messenger +

+ + + Open + + + + + + + + + +
+
+ + + \ No newline at end of file