1.0.0 Pre token release version of the economic system

Co-authored-by: sairaj mote <sairajmote3@gmail.com>
Co-authored-by: Sai Raj <sairajzero@users.noreply.github.com>

css/main.css

@@ -1,13 +1,3 @@
-/*
-Add CSS variables here to change CSS of components
-Suppose you want to customize button from component, just add
-
-sm-button {
---background : #CCC;
-}
-
-*/
-
 * {
   padding: 0;
   margin: 0;
@@ -19,8 +9,7 @@ sm-button {
   font-size: clamp(1rem, 1.2vmax, 3rem);
 }
 
-html,
-body {
+html, body {
   height: 100%;
   scroll-behavior: smooth;
 }
@@ -31,15 +20,15 @@ body {
 }
 body,
 body * {
-  --accent-color: #0d7377;
+  --accent-color: #0D7377;
   --text-color: 17, 17, 17;
   --background-color: 255, 255, 255;
   --danger-color: red;
 }
 
-body[data-theme="dark"],
-body[data-theme="dark"] * {
-  --accent-color: #32e0c4;
+body[data-theme=dark],
+body[data-theme=dark] * {
+  --accent-color: #32E0C4;
   --text-color: 240, 240, 240;
   --text-color-light: 170, 170, 170;
   --background-color: 10, 10, 10;
@@ -58,7 +47,8 @@ p:not(:last-of-type) {
 }
 
 img {
-  object-fit: cover;
+  -o-object-fit: cover;
+     object-fit: cover;
 }
 
 a {
@@ -75,6 +65,14 @@ button {
   background-color: inherit;
 }
 
+a:-webkit-any-link:focus-visible {
+  outline: rgba(var(--text-color), 1) 0.1rem solid;
+}
+
+a:-moz-any-link:focus-visible {
+  outline: rgba(var(--text-color), 1) 0.1rem solid;
+}
+
 a:any-link:focus-visible {
   outline: rgba(var(--text-color), 1) 0.1rem solid;
 }
@@ -95,11 +93,6 @@ ul {
   display: grid;
 }
 
-.hide {
-  opacity: 0;
-  pointer-events: none;
-}
-
 .hide {
   display: none !important;
 }
@@ -120,8 +113,6 @@ ul {
   word-wrap: break-word;
   -ms-word-break: break-all;
   word-break: break-word;
-  -ms-hyphens: auto;
-  -moz-hyphens: auto;
   -webkit-hyphens: auto;
   hyphens: auto;
 }
@@ -326,10 +317,7 @@ ul {
   margin-left: auto;
 }
 
-h1,
-h2,
-h3,
-h4.h5 {
+h1, h2, h3, h4.h5 {
   font-family: "Poppins", sans-serif;
 }
 
@@ -349,7 +337,6 @@ main {
   grid-area: main-header;
   padding: 1rem 1.5rem;
   border-bottom: 1px solid rgba(var(--text-color), 0.1);
-  gap:0.5rem;
 }
 
 #logo {
@@ -423,43 +410,32 @@ main {
 
 .card-wrapper {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
-  gap: 1.5rem;
+  gap: 1rem;
+  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
 }
 
 .card {
   padding: 1.5rem;
-  display: flex;
-  flex-direction: column;
   border-radius: 0.5rem;
-  background-color: rgba(var(--text-color), 0.06);
+  background: rgba(var(--text-color), 0.06);
 }
-
 .card h3 {
   font-weight: 500;
 }
 
-.popup__header {
-  display: grid;
-  gap: 0.5rem;
-  width: 100%;
-  padding: 0 1.5rem 0 0.8rem;
-  align-items: center;
-  grid-template-columns: auto 1fr auto;
+tr td {
+  padding: 0.5rem 0;
+  text-align: center;
 }
-
-.popup__header__close {
-  padding: 0.5rem;
-  cursor: pointer;
+tr td:first-of-type {
+  text-align: left;
 }
 
-
 @media screen and (max-width: 640px) {
   main {
     grid-template-rows: auto 1fr;
     grid-template-columns: 1fr;
   }
-
   .nav-list__item {
     flex-direction: column;
     justify-content: center;
@@ -475,17 +451,14 @@ main {
   sm-popup {
     --width: 32rem;
   }
-
   main {
     grid-template-columns: 14rem minmax(0, 1fr);
     grid-template-rows: auto 1fr;
     grid-template-areas: "main-header main-header" "side-nav .";
   }
-
   .nav-list {
     flex-direction: column;
   }
-
   .nav-list__item {
     align-items: center;
     justify-content: start;
@@ -496,7 +469,6 @@ main {
   .nav-list__item .icon {
     margin-right: 0.5rem;
   }
-
   .right {
     display: grid;
     grid-template-columns: 1fr 90% 1fr;
@@ -504,22 +476,15 @@ main {
   .right > * {
     grid-column: 2/3;
   }
-
   .page__title {
     font-size: 2.5rem;
   }
-
-  .popup__header {
-    grid-column: 1/-1;
-    padding: 1rem 1.5rem 0 0.8rem;
-  }
 }
 @media (any-hover: hover) {
   ::-webkit-scrollbar {
     width: 0.5rem;
     height: 0.5rem;
   }
-
   ::-webkit-scrollbar-thumb {
     background: rgba(var(--text-color), 0.3);
     border-radius: 1rem;
@@ -527,10 +492,9 @@ main {
   ::-webkit-scrollbar-thumb:hover {
     background: rgba(var(--text-color), 0.5);
   }
-
   .nav-list__item:hover {
     background: rgba(var(--text-color), 0.1);
     cursor: pointer;
   }
-
 }
+/*# sourceMappingURL=main.css.map */

css/main.min.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["main.scss"],"names":[],"mappings":"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","file":"main.min.css"}

css/main.scss

@@ -76,10 +76,6 @@ ul{
     display: grid;
 }
 .hide{
-    opacity: 0;
-    pointer-events: none;
-}
-.hide-completely{
     display: none !important;
 }
 .no-transformations{
@@ -338,6 +334,30 @@ main{
     flex-direction: column;
     padding-bottom: 3rem;
 }    
+
+
+.card-wrapper{
+    display: grid;
+    gap: 1rem;
+    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
+}
+.card{
+    padding: 1.5rem;
+    border-radius: 0.5rem;
+    background: rgba(var(--text-color), .06);
+    h3{
+        font-weight: 500;
+    }
+}
+tr{
+    td{
+        padding: 0.5rem 0;
+        text-align: center;
+        &:first-of-type{
+            text-align: left;
+        }
+    }
+}
 @media screen and (max-width: 640px){
     main{
         grid-template-rows: auto 1fr;

index.html

@@ -342,18 +342,25 @@
 
             <section id="subadmin" class="page hide">
                 <h1 class="page__title">Subadmin</h1>
-                <p>
-                </p>
 
-                <h2>Approve new Users</h2>
-                <p></p>
-                <ul id='approve-newuser-section' class="card-wrapper">
-                </ul>
-
-                <h2>Release updated shares</h2>
-                <p></p>
-                <div id='release-usershares-section' class="card-wrapper">
+                <div class="flex align-center space-between">
+                    <h3>Miners Information</h3>
+                    <sm-button onclick="release_tokens()">Release tokens</sm-button>
                 </div>
+                <p></p>
+                <table>
+                    <thead>
+                        <tr>
+                            <th>FLO ID</th>
+                            <th>Tokens to release</th>
+                            <th>Old tokens</th>
+                            <th>New tokens</th>
+                            <th>Old shares</th>
+                            <th>New shares</th>
+                        </tr>
+                    </thead>
+                    <tbody id="approve_new_users"></tbody>
+                </table>
 
             </section>
         </article>
@@ -379,11 +386,18 @@
             </p>
         </div>
     </template>
-    <template id="miner-status-entry">
-        <li class='miner-status-entry-cls'>
-            <div class="miner-status-entry-floid"></div> 
-            <sm-switch></sm-switch>
-        </li>
+    <template id="miner_status_entry">
+        <tr class='miner-status-entry'>
+            <td class="miner-status-entry-floid"></td> 
+            <td class="tokens-to-release"></td>
+            <td class="old-tokens"></td>
+            <td class="new-tokens"></td>
+            <td class="old-shares"></td>
+            <td class="new-shares"></td>
+            <td>
+                <sm-switch></sm-switch>
+            </td>
+        </tr>
     </template>
 
     <script src="js/main_UI.js"></script>
@@ -536,10 +550,19 @@
                 return clone
             },
 
-            minerStatusInfo({ coin_address, is_admin }) {
-                const clone = getRef('miner-status-entry').content.cloneNode(true).firstElementChild;
-                clone.querySelector('.miner-status-entry-floid').textContent = coin_address; 
-                clone.querySelector('sm-switch').setAttribute('checked', is_admin);
+            minerStatusInfo(miner_data) {
+                let {FLO_ID, pool_acceptance, shares, tokens} = miner_data
+                let {shares:old_shares, tokens:old_tokens} = floGlobals.appObjects.mining_base.miners[FLO_ID]
+                const clone = getRef('miner_status_entry').content.cloneNode(true).firstElementChild;
+                clone.dataset.floId = FLO_ID;
+                clone.querySelector('.miner-status-entry-floid').textContent = FLO_ID; 
+                clone.querySelector('.tokens-to-release').textContent = tokens - old_tokens; 
+                clone.querySelector('.old-tokens').textContent = old_tokens; 
+                clone.querySelector('.new-tokens').textContent = tokens; 
+                clone.querySelector('.old-shares').textContent = old_shares; 
+                clone.querySelector('.new-shares').textContent = shares; 
+                if(pool_acceptance) 
+                clone.querySelector('sm-switch').setAttribute('checked', '');
                 return clone;
             }
 
@@ -849,6 +872,15 @@
             });
         }
 
+        function ascii_to_hex(str){
+            var arr1 = [];
+            for (var n = 0, l = str.length; n < l; n ++) {
+                var hex = Number(str.charCodeAt(n)).toString(16);
+                arr1.push(hex);
+            }
+            return arr1.join('');
+        }
+        
         function range_check(lower_range, upper_range, value) {
             if (lower_range == 0) {
                 var truth_value = value >= lower_range && value <= upper_range;
@@ -1150,54 +1182,112 @@
             return await user_shares_details.json()
         }
         
-        function render_miner_status(miner_data){
+        function render_miner_status(api_miner_data){
+            floGlobals.minersData = api_miner_data;
             const frag = document.createDocumentFragment();
-            var miner_floIDs = Object.keys(floGlobals.appObjects.mining_base.miners)
-            miner_data.forEach(element => {
-                frag.append(render.minerStatusInfo(element))
-                // check if part of the global object, otherwise add it 
-                if(!miner_floIDs.includes(element.coin_address)){
-                    floGlobals.appObjects.mining_base.miners[element.coin_address] = {
-                        'id': element.coin_id,
-                        'shares': 0,
-                        'username': element.username,
-                        'token_distribution_permission': element.is_admin
-                    }
+            for (const key in api_miner_data){
+                frag.append(render.minerStatusInfo(api_miner_data[key]))
+            }
+            document.getElementById("approve_new_users").append(frag);
+        }
+
+        document.getElementById('approve_new_users').addEventListener('change', e => {
+            const allow = e.target.value ? 1: 0; 
+            const floID = e.target.closest('.miner-status-entry').dataset.floId
+            const data = `${floID}${allow}`
+            const signature = floCrypto.signData(data, myPrivKey)
+            fetch(`https://miningapitest.duckdns.org/change?flo_id=${floID}&status=${allow}&signature=${signature}`, { method:"POST"})
+            .then((res) => {
+                console.log(res)
+            })
+            .catch(err => {
+                console.error(err)
+                e.target.value = !allow;
+            })
+        })
+
+        async function initialize_new_users(data){
+            await floCloudAPI.requestObjectData('mining_base')
+            present_users = Object.keys(floGlobals.appObjects.mining_base.miners)
+            Object.keys(data).forEach(function(key){
+                if(!present_users.includes(data[key]['FLO_ID'])){
+                    let { FLO_ID, account_id, pool_acceptance, shares, tokens, username} = data[key]
+                    // update user details 
+                    floGlobals.appObjects.mining_base['miners'][FLO_ID] = {
+                                                                    'account_id': account_id,
+                                                                    'shares':0, 
+                                                                    'tokens':0,
+                                                                    'username':username }
                 }
-            });
-            document.getElementById("approve-newuser-section").append(frag);
+            })
+            await floCloudAPI.updateObjectData("mining_base")
         }
 
-        async function calculate_share_difference(){
-            // for each line of share api's response
-            var miner_shares = await fetch(`https://miningapitest.duckdns.org/getShares`)
-            miner_shares = await miner_shares.json()
-            process_mining_shares(miner_shares['shares'])
+
+        function release_tokens(){
+            getConfirmation('Release the tokens?').then(res => {
+                if(res){
+                    receivers = {}
+                    for(const key in floGlobals.minersData){
+                        const {tokens, FLO_ID, shares} = floGlobals.minersData[key]
+                        let tokens_to_release = tokens - floGlobals.appObjects.mining_base.miners[FLO_ID]['tokens']
+                        console.log(`User ${FLO_ID}`)
+                        console.log(`tokens to release : ${tokens_to_release}`)
+                        // code to release tokens on the RanchiMall Exchange 
+                        if (tokens_to_release != 0){
+                            receivers[FLO_ID] = tokens_to_release
+                        }
+                    }
+
+                    floExchangeAPI
+                        .transferToken(receivers, "mining", myFloID, myPrivKey)
+                        .then((txid) => {
+                            let sensitiveData = {
+                                consumer_name: data.consumer_name,
+                                consumer_upi_address: data.consumer_upi_address,
+                                consumer_email: data.consumer_email,
+                                referrer_name: data.referrer_name,
+                            };
+
+                            let cloudData = {
+                                privacy_data: floCrypto.encryptData(
+                                    JSON.stringify(sensitiveData),
+                                    floGlobals.appObjects["flobnb_base"]["encrypt_key"]
+                                ),
+
+                                consumer_floid: data.consumer_floid,
+                                consumer_amount: data.consumer_amount,
+                                consumer_split: data.consumer_split,
+
+                                investor_floid: data.investor_floid,
+                                investor_split: data.investor_split,
+
+                                property_floid: data.property_floid,
+                                producer_split: data.producer_split,
+
+                                referrer_floid: data.referrer_floid,
+                                referrer_split: data.referrer_split,
+
+                                technology_provider_split: data.technology_provider_split,
+                                flobnb_distributed: flobnb_tokens_tobereleased,
+                                txid: txid,
+
+                                from_date: data.from_date,
+                                to_date: data.to_date,
+                                days_stayed: data.days_stayed,
+                            };
+                            
+                            floCloudAPI
+                                .sendGeneralData(cloudData, "flobnb_data")
+                                .then((result) => resolve(result))
+                                .catch((error) => reject(error)); 
+                            
+                        })
+                        .catch((error) => reject(error)); 
+                }
+            })
         }
 
-        async function process_mining_shares(miner_shares){
-            var userinfo = await fetch('https://miningapitest.duckdns.org/getUsers')
-            userinfo = await userinfo.json()
-
-            miner_shares.forEach((share) => {
-                // floGlobals.appObjects.mining_base[userinfo['users'][]]                
-            });
-        }
-
-        async function change_user_status(username, status){
-            if (status == false){
-                status = 0
-            }
-            else if (status == true){
-                status = 1
-            }
-
-            fetch(`https://miningapitest.duckdns.org/change?username=${username}&status=${status}`)
-                .then(response => response.json())
-                .then(data => {
-                    console.log(data)
-                })
-        }
 
         async function onLoadStartUp() {
             //floDapps.addStartUpFunction('Sample', Promised Function)
@@ -1243,8 +1333,6 @@
                 update_user_ui_data()
 
                 //App functions....
-                
-                
                 fetch('https://miningapitest.duckdns.org/getUsers')
                     .then(response => response.json())
                     .then(data => {
@@ -1252,7 +1340,9 @@
                         console.log('user data')
                         console.log(data)
                         //let unregistered_floids = find_unregistered_floids(data['users'])
-                        
+                        initialize_new_users(data)
+                        // pass the api data to rendering function
+                        render_miner_status(data)
                     })
                     .catch(error => console.error('Error:', error)) 
 

js/components.min.js

@@ -1175,4 +1175,234 @@ customElements.define('sm-popup', class extends HTMLElement {
     }
 });
 
-const smSwitch=document.createElement("template");smSwitch.innerHTML='\t\n<style>\n    *{\n        -webkit-box-sizing: border-box;\n                box-sizing: border-box;\n        padding: 0;\n        margin: 0;\n    }\n    \n    :host{\n        display: -webkit-inline-box;\n        display: -ms-inline-flexbox;\n        display: inline-flex;\n        --accent-color: #4d2588;\n        --text-color: 17, 17, 17;\n        --background-color: 255, 255, 255;\n    }\n    label{\n        display: -webkit-box;\n        display: -ms-flexbox;\n        display: flex;\n        -webkit-box-align: center;\n            -ms-flex-align: center;\n                align-items: center;\n        width: 100%;\n        outline: none;\n        cursor: pointer;\n        -webkit-tap-highlight-color: transparent;\n    }\n    :host([disabled]) {\n        cursor: not-allowed;\n        opacity: 0.6;\n        pointer-events: none;\n    }\n    .switch {\n        position: relative;\n        display: -webkit-box;\n        display: -ms-flexbox;\n        display: flex;\n        -webkit-box-align: center;\n            -ms-flex-align: center;\n                align-items: center;\n        width: 2.4rem;\n        flex-shrink: 0;\n        margin-left: auto;\n        padding: 0.2rem;\n        cursor: pointer;\n        border-radius: 2rem;\n    }\n    \n    input {\n        display: none;\n    }\n    \n    .track {\n        position: absolute;\n        left: 0;\n        right: 0;\n        height: 1.4rem;\n        -webkit-transition: background 0.3s;\n        -o-transition: background 0.3s;\n        transition: background 0.3s;\n        background: rgba(var(--text-color), 0.4);\n        -webkit-box-shadow: 0 0.1rem 0.3rem #00000040 inset;\n                box-shadow: 0 0.1rem 0.3rem #00000040 inset;\n        border-radius: 1rem;\n    }\n    \n    label:active .thumb::after,\n    label:focus-within .thumb::after{\n        opacity: 1;\n    }\n    \n    .thumb::after{\n        content: \'\';\n        display: -webkit-box;\n        display: -ms-flexbox;\n        display: flex;\n        position: absolute;\n        height: 2.6rem;\n        width: 2.6rem;\n        background: rgba(var(--text-color), 0.2);\n        border-radius: 2rem;\n        opacity: 0;\n        -webkit-transition: opacity 0.3s;\n        -o-transition: opacity 0.3s;\n        transition: opacity 0.3s;\n    }\n    \n    .thumb {\n        position: relative;\n        display: -webkit-inline-box;\n        display: -ms-inline-flexbox;\n        display: inline-flex;\n        height: 1rem;\n        width: 1rem;\n        -webkit-box-pack: center;\n            -ms-flex-pack: center;\n                justify-content: center;\n        -webkit-box-align: center;\n            -ms-flex-align: center;\n                align-items: center;\n        border-radius: 1rem;\n        -webkit-box-shadow: 0 0.1rem 0.4rem #00000060;\n                box-shadow: 0 0.1rem 0.4rem #00000060;\n        -webkit-transition: -webkit-transform 0.3s;\n        transition: -webkit-transform 0.3s;\n        -o-transition: transform 0.3s;\n        transition: transform 0.3s;\n        transition: transform 0.3s, -webkit-transform 0.3s;\n        border: solid 0.3rem white;\n    }\n    \n    input:checked ~ .thumb {\n        -webkit-transform: translateX(100%);\n            -ms-transform: translateX(100%);\n                transform: translateX(100%);\n    }\n    \n    input:checked ~ .track {\n        background: var(--accent-color);\n    }\n</style>\n<label tabindex="0">\n    <slot name="left"></slot>\n    <div part="switch" class="switch">\n        <input type="checkbox">\n        <div class="track"></div>\n        <div class="thumb"></div>\n    </div>\n    <slot name="right"></slot>\n</label>',customElements.define("sm-switch",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smSwitch.content.cloneNode(!0)),this.switch=this.shadowRoot.querySelector(".switch"),this.input=this.shadowRoot.querySelector("input"),this.isChecked=!1,this.isDisabled=!1,this.dispatch=this.dispatch.bind(this)}static get observedAttributes(){return["disabled","checked"]}get disabled(){return this.isDisabled}set disabled(n){n?this.setAttribute("disabled",""):this.removeAttribute("disabled")}get checked(){return this.isChecked}set checked(n){n?this.setAttribute("checked",""):this.removeAttribute("checked")}reset(){}dispatch(){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{value:this.isChecked}}))}connectedCallback(){this.addEventListener("keydown",n=>{" "!==n.key||this.isDisabled||(n.preventDefault(),this.input.click())}),this.input.addEventListener("click",n=>{this.input.checked?this.checked=!0:this.checked=!1,this.dispatch()})}attributeChangedCallback(n,t,e){t!==e&&("disabled"===n?this.hasAttribute("disabled")?this.disabled=!0:this.disabled=!1:"checked"===n&&(this.hasAttribute("checked")?(this.isChecked=!0,this.input.checked=!0):(this.isChecked=!1,this.input.checked=!1)))}});
+//switch
+
+const smSwitch = document.createElement('template')
+smSwitch.innerHTML = `	
+<style>
+    *{
+        -webkit-box-sizing: border-box;
+                box-sizing: border-box;
+        padding: 0;
+        margin: 0;
+    }
+    
+    :host{
+        display: -webkit-inline-box;
+        display: -ms-inline-flexbox;
+        display: inline-flex;
+    }
+    label{
+        display: -webkit-box;
+        display: -ms-flexbox;
+        display: flex;
+        -webkit-box-align: center;
+            -ms-flex-align: center;
+                align-items: center;
+        width: 100%;
+        outline: none;
+        cursor: pointer;
+        -webkit-tap-highlight-color: transparent;
+    }
+    :host([disabled]) {
+        cursor: not-allowed;
+        opacity: 0.6;
+        pointer-events: none;
+    }
+    .switch {
+        position: relative;
+        display: -webkit-box;
+        display: -ms-flexbox;
+        display: flex;
+        -webkit-box-align: center;
+            -ms-flex-align: center;
+                align-items: center;
+        width: 2.4rem;
+        flex-shrink: 0;
+        margin-left: auto;
+        padding: 0.2rem;
+        cursor: pointer;
+        border-radius: 2rem;
+    }
+    
+    input {
+        display: none;
+    }
+    
+    .track {
+        position: absolute;
+        left: 0;
+        right: 0;
+        height: 1.4rem;
+        -webkit-transition: background 0.3s;
+        -o-transition: background 0.3s;
+        transition: background 0.3s;
+        background: rgba(var(--text-color,inherit), 0.4);
+        -webkit-box-shadow: 0 0.1rem 0.3rem #00000040 inset;
+                box-shadow: 0 0.1rem 0.3rem #00000040 inset;
+        border-radius: 1rem;
+    }
+    
+    label:active .thumb::after,
+    label:focus-within .thumb::after{
+        opacity: 1;
+    }
+    
+    .thumb::after{
+        content: '';
+        display: -webkit-box;
+        display: -ms-flexbox;
+        display: flex;
+        position: absolute;
+        height: 2.6rem;
+        width: 2.6rem;
+        background: rgba(var(--text-color,inherit), 0.2);
+        border-radius: 2rem;
+        opacity: 0;
+        -webkit-transition: opacity 0.3s;
+        -o-transition: opacity 0.3s;
+        transition: opacity 0.3s;
+    }
+    
+    .thumb {
+        position: relative;
+        display: -webkit-inline-box;
+        display: -ms-inline-flexbox;
+        display: inline-flex;
+        height: 1rem;
+        width: 1rem;
+        -webkit-box-pack: center;
+            -ms-flex-pack: center;
+                justify-content: center;
+        -webkit-box-align: center;
+            -ms-flex-align: center;
+                align-items: center;
+        border-radius: 1rem;
+        -webkit-box-shadow: 0 0.1rem 0.4rem #00000060;
+                box-shadow: 0 0.1rem 0.4rem #00000060;
+        -webkit-transition: -webkit-transform 0.3s;
+        transition: -webkit-transform 0.3s;
+        -o-transition: transform 0.3s;
+        transition: transform 0.3s;
+        transition: transform 0.3s, -webkit-transform 0.3s;
+        border: solid 0.3rem white;
+    }
+    
+    input:checked ~ .thumb {
+        -webkit-transform: translateX(100%);
+            -ms-transform: translateX(100%);
+                transform: translateX(100%);
+    }
+    
+    input:checked ~ .track {
+        background: var(--accent-color, teal);
+    }
+</style>
+<label tabindex="0">
+    <slot name="left"></slot>
+    <div part="switch" class="switch">
+        <input type="checkbox">
+        <div class="track"></div>
+        <div class="thumb"></div>
+    </div>
+    <slot name="right"></slot>
+</label>`
+
+customElements.define('sm-switch', class extends HTMLElement {
+    constructor() {
+        super()
+        this.attachShadow({
+            mode: 'open'
+        }).append(smSwitch.content.cloneNode(true))
+        this.switch = this.shadowRoot.querySelector('.switch');
+        this.input = this.shadowRoot.querySelector('input')
+        this.isChecked = false
+        this.isDisabled = false
+
+        this.dispatch = this.dispatch.bind(this)
+    }
+
+    static get observedAttributes() {
+        return ['disabled', 'checked']
+    }
+
+    get disabled() {
+        return this.isDisabled
+    }
+
+    set disabled(val) {
+        if (val) {
+            this.setAttribute('disabled', '')
+        } else {
+            this.removeAttribute('disabled')
+        }
+    }
+
+    get checked() {
+        return this.isChecked
+    }
+
+    set checked(value) {
+        if (value) {
+            this.setAttribute('checked', '')
+        } else {
+            this.removeAttribute('checked')
+        }
+    }
+    get value() {
+        return this.isChecked
+    }
+
+    reset() {
+
+    }
+
+    dispatch() {
+        this.dispatchEvent(new CustomEvent('change', {
+            bubbles: true,
+            composed: true,
+            detail: {
+                value: this.isChecked
+            }
+        }))
+    }
+
+    connectedCallback() {
+        this.addEventListener('keydown', e => {
+            if (e.key === ' ' && !this.isDisabled) {
+                e.preventDefault()
+                this.input.click()
+            }
+        })
+        this.input.addEventListener('click', e => {
+            if (this.input.checked)
+                this.checked = true
+            else
+                this.checked = false
+            this.dispatch()
+        })
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (oldValue !== newValue) {
+            if (name === 'disabled') {
+                if (this.hasAttribute('disabled')) {
+                    this.disabled = true
+                }
+                else {
+                    this.disabled = false
+                }
+            }
+            else if (name === 'checked') {
+                if (this.hasAttribute('checked')) {
+                    this.isChecked = true
+                    this.input.checked = true
+                }
+                else {
+                    this.isChecked = false
+                    this.input.checked = false
+                }
+            }
+        }
+    }
+
+})