floating bar created

content.js

@@ -5,19 +5,139 @@ var loggedIn = false;
 var floatingBar = null
 !(function () {
     let origin = "http://localhost:3039"
+
+    // this is load custom font
+    let customFont = new FontFace('tutor-shot-calibri', "http://localhost:3039/assets/fonts/calibri-regular.ttf")
+    customFont.load().then(function (font) {
+        document.fonts.add(font);
+    })
+
     if (window.origin == origin) login()
-    floatingBar = document.createElement('div')
-    floatingBar.setAttribute('style', `
-    position:fixed;
-    bottom:0;
-    width:100vw;
-    z-index:100;
-    background: linear-gradient(45deg, #ffb102, transparent);
-    margin: 40px;
+
+    let styleTag = document.createElement('style')
+    styleTag.setAttribute('tutor-shot-style', '')
+    styleString = `
+    
+    .tutor-shot {
+        all: unset;
+        position: fixed;
+        bottom: 30px;
+        width: 50px;
+        height: 50px;
+        z-index: 100;
+        background: #fff;
         padding: 10px;
-    border-radius: 10px;
-`)
+        border-radius: 50px;
+        box-shadow: 0px 0px 20px #cccccc;
+        display: flex;
+        align-items: center;
+        font-family: 'calibri';
+        transition: 0.3s;
+    }
+
+    .tutor-shot.tutor-shot-right {
+        right: 30px;
+        transition: 0.5s;
+    }
+
+    .tutor-shot.tutor-shot-left {
+        left: 30px;
+        transition: 0.5s;
+    }
+
+    .tutor-shot:hover {
+        width: 420px;
+        cursor: pointer;
+    }
+
+    .tutor-shot .counter-count {
+        all: unset;
+        min-width: 16px;
+        border-radius: 50px;
+        background-color: rgb(3, 153, 28);
+        color: #fff;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 13px;
+        font-weight: 600;
+        position: absolute;
+        right: 0px;
+        top: -7px;
+        z-index: 2;
+        padding: 4px;
+    }
+
+    .tutor-shot .logo {
+        all: unset;
+    }
+
+    .tutor-shot .logo .logo-img {
+        all: unset;
+        margin-top: -4px;
+        margin-left: -1px;
+    }
+
+    .tutor-shot .content {
+        all: unset;
+        display: flex;
+        align-items: center;
+        overflow: hidden;
+        width: 420px;
+    }
+  
+    .tutor-shot .content .item {
+        all: unset;
+        display: flex;
+        align-items: center;
+        margin-right: 16px;
+    }
+  
+    .tutor-shot .content .item .img {
+        all: unset;
+        margin-right: 3px;
+        filter: hue-rotate(335deg) brightness(0%) contrast(68%);
+        width: 20px;
+    }
+  
+    .tutor-shot .content .item .item-text {
+        all: unset;
+    }
+    `
+    styleTag.innerHTML = styleString
+    document.body.append(styleTag)
+
+    floatingBar = document.createElement('div')
+    floatingBar.setAttribute('class', `tutor-shot tutor-shot-right`)
     document.body.append(floatingBar)
+    let innerHTML = /*html*/`
+
+<div class="counter-count">1</div>
+<div class="logo">
+    <img class="logo-img" src="${origin}/assets/images/tutor-shot-48.png" width="40">
+</div>
+<div class="content">
+    <div class="item">
+        <img class="img" src="${origin}/assets/icons/pause.svg" width="20">
+        <span class="item-text">PAUSE</span>
+    </div>
+    <div class="item">
+        <img class="img" src="${origin}/assets/icons/stop-circle.svg" width="20">
+        <span class="item-text">STOP</span>
+    </div>
+    <div class="item">
+        <img class="img" src="${origin}/assets/icons/redo.svg" width="20">
+        <span class="item-text">RESTART</span>
+    </div>
+    <div class="item">
+        <img class="img" src="${origin}/assets/icons/capture.svg" width="20">
+        <span class="item-text">CAPTURE</span>
+    </div>
+</div>
+
+    `
+    floatingBar.innerHTML = innerHTML
+
 
     document.addEventListener("visibilitychange", function () {
         if (document.visibilityState === 'visible') {
@@ -42,7 +162,7 @@ function login() {
     }
 }
 
-function getCaptureData(){
+function getCaptureData() {
     return {
         SSTaken: 28,
         state: "paused"
@@ -50,15 +170,9 @@ function getCaptureData(){
 }
 
 function reRenderFloatingBar(ssTaken, state) {
+    console.log('reset floting bar data')
 
-    let innerHTML = /*html*/`
-   
-        <span>${ssTaken?ssTaken:0} SS taken</span>
-        ${state=='paused'?'<button>Play</button>':''}
-
-        <button>SS</button>
-    `
-    floatingBar.innerHTML = innerHTML
+    // floatingBar.innerHTML = innerHTML
 }
 
 var recording = false;