Commit fd89e144 by ramdayalmunda

floating bar created

parent a56d284c
......@@ -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()
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: 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('style', `
position:fixed;
bottom:0;
width:100vw;
z-index:100;
background: linear-gradient(45deg, #ffb102, transparent);
margin: 40px;
padding: 10px;
border-radius: 10px;
`)
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;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment