<img src="https://patricke004.github.io/customMicroSite/Images/logo-transparent-no-safezone.png" alt="" class="Logo">
<div class="Page">
<div class="Frame">
<div class="StatusIndicator">
<div class="StatusIndicatorCore">
<div class="StatusIndicatorCore-image">
<img id="StatusIndicatorCore-imageSelf" src="https://patricke004.github.io/customMicroSite/Images/ikonka_konverzace-01_online.png" alt="">
</div>
<div class="StatusIndicatorCore-text">
<p id="StatusIndicatorCore-textSelf">
Jsme online
</p>
</div>
</div>
</div>
<div class="WidgetInput">
<p id="Hints" class="isHidden">Zadejte prosím devítimístné telefonní číslo nebo šestímístné číslo pozvánky.</p>
<input type="text" id="WidgetInput-input" placeholder="Telefon / č. pozvánky">
<button id="WidgetInput-button">Začít hovor</button>
</div>
</div>
<div class="CustomVariables">
<div class="CustomVariables-input">
<label for="inputName">Jméno:</label>
<input type="text" class="CustomInput" id="inputName">
</div>
<div class="CustomVariables-input">
<button class="LoginButtons" id="login">Login</button>
</div>
<div class="CustomVariables-input">
<button class="LoginButtons" id="logout">Logout</button>
</div>
</div>
</div> body {
background-image: linear-gradient(to right, #6ca6bd, #8dc63f);
font-size: Raleway;
}
html, body {
margin: 0;
padding: 0;
}
input, button, p, label {
font-family: Raleway;
}
.Logo {
position: absolute;
width: 25%;
margin: 20px;
min-width: 200px;
}
.Page {
display: flex;
width: 100%;
height: 100vh;
align-items: center;
justify-content: center;
}
.Frame {
background-color: white;
width: 450px;
height: 350px;
border-radius: 10px;
display: flex;
flex-direction: column;
overflow: hidden;
}
.StatusIndicator {
flex: 3;
display: flex;
flex-direction: row;
justify-content: center;
}
.StatusIndicatorCore {
width: 300px;
display: flex;
}
.StatusIndicatorCore-image {
flex: 3;
display: flex;
align-items: center;
}
.StatusIndicatorCore-image>img {
max-height: 100%;
max-width: 100%;
}
.StatusIndicatorCore-text {
flex: 7;
display: flex;
align-items: center;
}
#StatusIndicatorCore-textSelf {
font-size: 35px;
font-family: Raleway;
font-weight: bold;
color: #8dc63f;
text-align: center;
margin: 0;
}
.WidgetInput {
width: 100%;
flex: 7;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
}
#WidgetInput-input {
width: 60%;
height: 40px;
border-radius: 8px;
border: 1px solid #6ca6bd;
font-size: 20px;
text-align: center;
color: #8dc63f;
margin-bottom: 10px;
box-sizing: border-box;
}
#WidgetInput-input:focus, #WidgetInput-button:focus, .LoginButtons:focus {
outline: 0;
border: 2px solid #6ca6bd;
}
#WidgetInput-button {
width: 60%;
border-radius: 8px;
border: 1px solid #6ca6bd;
background-color: #8dc63f;
transition: all 0.3s;
color: #fff;
height: 40px;
font-size: 20px;
margin-bottom: 20px;
}
#WidgetInput-button:hover, .LoginButtons:hover {
background-color: #6ca6bd;
}
#Hints {
position: absolute;
bottom: 0;
background-color: #bf464f;
color: white;
width: 100%;
padding: 10px 8px;
text-align: center;
box-sizing: border-box;
margin: 0;
transition: all ease-out 0.3s;
}
#Hints.isHidden {
transform: translateY(100%);
}
.CustomVariables {
position: absolute;
bottom: 0;
margin: 0 auto;
height: 50px;
width: 800px;
border-radius: 10px 10px 0 0;
background-color: #fff;
display: flex;
flex-direction: row;
align-content: center;
}
.CustomVariables-input {
flex: 1;
text-align: center;
}
.CustomVariables-input:first-of-type {
flex: 2;
}
.CustomInput {
width: 250px;
height: 30px;
border-radius: 8px;
border: 1px solid #6ca6bd;
font-size: 18px;
text-align: center;
color: #8dc63f;
box-sizing: border-box;
margin: 10px 0;
margin-left: 5px;
outline: 0;
}
.CustomInput:focus {
border: 2px solid #6ca6bd;
}
label {
font-size: 20px;
color: #5b5b5b;
}
.LoginButtons {
width: 150px;
border-radius: 8px;
border: 1px solid #6ca6bd;
background-color: #8dc63f;
transition: all 0.3s;
color: #fff;
height: 30px;
font-size: 20px;
margin: 10px 0;
}
</style>(function () {
var scr = document.createElement('script'); scr.type = 'text/javascript'; scr.async = true; scr.charset = 'UTF-8';
scr.src = '//app.mluvii.com/widget/OOWidget.js';
scr.$owidgetOnLoad = function (owidget) {
if (!owidget.isSupported) { return; }
owidget.init('295b1064-cf5b-4a5d-9e05-e7a74f86ae5e', 'navodMicroSite');
let widgetOnline = true;
owidget.setStatusUpdateCallback(function(code) {
const statusIndicatorImage = document.getElementById('StatusIndicatorCore-imageSelf');
const statusIndicatorText = document.getElementById('StatusIndicatorCore-textSelf');
switch(code) {
case 0:
statusIndicatorImage.src = 'https://patricke004.github.io/customMicroSite/Images/ikonka_konverzace-01_offline.png';
statusIndicatorText.innerText = 'Jsme offline';
statusIndicatorText.style.color = '#bf464f';
widgetOnline = false;
break;
case 1:
statusIndicatorImage.src = 'https://patricke004.github.io/customMicroSite/Images/ikonka_konverzace-01_online.png';
statusIndicatorText.innerText = 'Jsme online';
statusIndicatorText.style.color = '#8dc63f';
widgetOnline = true;
break;
case 2:
statusIndicatorImage.src = 'https://patricke004.github.io/customMicroSite/Images/ikonka_konverzace-01_busy.png';
statusIndicatorText.innerText = 'Máme toho hodně';
statusIndicatorText.style.color = '#ffbb06';
widgetOnline = true;
break;
}
});
const widgetButton = document.getElementById('WidgetInput-button');
const widgetInput = document.getElementById('WidgetInput-input');
const hints = document.getElementById('Hints');
const nameInput = document.getElementById('inputName');
const login = document.getElementById('login');
const logout = document.getElementById('logout');
const regNumberLength6 = new RegExp('^\\d{6}$');
const regNumberLength9 = new RegExp('^\\d{9}$');
widgetButton.addEventListener('click', function(e) {
if(!widgetOnline) return;
if(nameInput.value !== '') {
owidget.addCustomData('navod_clientName', nameInput.value);
}
if(!regNumberLength6.test(widgetInput.value) || !regNumberLength9.test(widgetInput.value)) {
hints.classList.remove('isHidden');
}
if(regNumberLength6.test(widgetInput.value)) {
owidget.openApp('callshow', widgetInput.value)
}
if(regNumberLength9.test(widgetInput.value)) {
owidget.numberNormalization(widgetInput.value)
const normalizedNumber = owidget.numberNormalization(widgetInput.value);
owidget.openApp('callback', normalizedNumber);
}
});
widgetInput.addEventListener('input', function() {
if(regNumberLength6.test(widgetInput.value) || regNumberLength9.test(widgetInput.value)) {
hints.classList.add('isHidden');
}
});
login.addEventListener('click', function() {
const foundUserId = 'as3d21sad351as-as1d';
owidget.addCustomData('navod_clientId', foundUserId);
});
logout.addEventListener('click', function() {
owidget.removeCustomData('navod_clientId');
// owidget.clearCustomData();
});
owidget.connectToServer();
};
var ffs = document.getElementsByTagName('script')[0]; ffs.parentNode.insertBefore(scr, ffs);
})();
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.