Form Final Approved Teams Bot

<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv='cache-control' content='no-cache'>
<meta http-equiv='expires' content='0'>
<meta http-equiv='pragma' content='no-cache'>


<style>
body {
font-family: Arial, sans-serif;
background-color: #ffffff;
/* Color beige */
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
.Image img {
max-width: 100%;
position: relative;
height: auto;
.TextoTelefono {
margin-top: 1%;
font-size: 15px;
}
.TextoTelefono:hover {
font-size: 25px;
.slide {
position: relative;
width: 70%;
}
.slide-inner {
position: relative;
overflow: hidden;
width: 100%;
height: calc(500px + 3em);
}
.slide-open:checked+.slide-item {
position: static;
opacity: 100;
}
.slide-item {
position: absolute;
opacity: 0;
-webkit-transition: opacity 0.6s ease-out;
transition: opacity 0.6s ease-out;
margin: 10%;
}
.slide-item img {
display: block;
height: auto;
max-width: 100%;
}
.slide-control {
background: rgba(0, 0, 0, 0.28);
border-radius: 50%;
color: #fff;
cursor: pointer;
display: none;
font-size: 40px;
height: 40px;
line-height: 35px;
position: absolute;
top: 50%;
-webkit-transform: translate(0, -50%);
cursor: pointer;
-ms-transform: translate(0, -50%);
transform: translate(0, -50%);
text-align: center;
width: 40px;
z-index: 10;
}
.slide-control.prev {
left: 2%;
}
.slide-control.next {
right: 2%;
}
.slide-control:hover {
background: rgba(0, 0, 0, 0.8);
color: #aaaaaa;
}
#slide-1:checked~.control-1,
#slide-4:checked~.control-4 {
display: block;
}
.slide-indicador {
list-style: none;
margin: 0;
padding: 0;
position: absolute;
bottom: 2%;
left: 0;
right: 0;
text-align: center;
z-index: 10;
}
.slide-indicador li {
display: inline-block;
margin: 0 5px;
}
.slide-circulo {
color: #828282;
cursor: pointer;
display: block;
font-size: 35px;
}
.slide-circulo:hover {
color: #aaaaaa;
}
#slide-1:checked~.control-1~.slide-indicador li:nth-child(1) .slide-circulo,

#slide-4:checked~.control-4~.slide-indicador li:nth-child(4) .slide-circulo {
color: #428bca;
}
h1 {
text-align: center;
}
p {
text-align: center;
}
#titulo {
width: 100%;
position: absolute;
padding: 0px;
margin: 0px auto;
text-align: center;
font-size: 27px;
color: rgba(255, 255, 255, 1);
font-family: 'Open Sans', sans-serif;
z-index: 9999;
text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.33),
-1px 0px 2px rgba(255, 255, 255, 0);
}
h1.Title {
font-size: 16px;
font-family: Segoe UI;
line-height: 20px;
color: whitesmoke;
display: table-cell;
padding: 13px 0px 0px 20px;
}
h3 {
font-size: 14px;
font-family: Segoe UI;
line-height: 0px;
color: whitesmoke;
display: table-cell;
padding: 13px 0px 0px 20px;
}
#heading {
background-color: #33AEE2;
height: 100px;
width: 25.2%;
position: fixed;
top: 36.5%;
left: 66.8%;
visibility: hidden;
.main {
margin: 18px;
border-radius: 4px;
}
div[role="form"] {
background-color: black;
}
#webchat {
position: fixed;
height: calc(50%- 50px);

width: 0%;
position: fixed;
top: 100%;
left: 66.81%;
overflow: hidden;
#ChatCont {
padding: 10px;
background: #009ADB;
border-radius: 39%;
width: 150PX;
height: 40px;
cursor: pointer;
box-shadow: 0px 0px 1px #000;
display: inline-block;
position: fixed;
top: 88%;
left: 80%;
#ChatCont:hover {
opacity: .8;
}
</style>
<title></title>
</head>
<body>
<div class="Image">
<img src="https://reports.callzilla.cx/failurelog/Content/images/callzilla--
llc_owler_20170803_225004_original.png"
alt="Logo de la página">
</div>
<div class="slide">
<div class="slide-inner">
<input class="slide-open" type="radio" id="slide-1" name="slide" aria-
hidden="true" hidden="" checked="checked">
<div class="slide-item">
<h1 class="TituloSlides">Lorem ipsum dolor sit amet</h1>
<p>consectetur adipiscing elit. Sed sit amet augue nec nulla interdum
convallis. Suspendisse potenti. Proin sed
odio id odio venenatis mattis in eget dolor. Donec congue, tortor vel
fermentum eleifend, mi odio tempor
massa, ut tincidunt quam nunc id quam. Nullam eu libero en lectus
accumsan ultrices non eget lorem. Sed en
euismod arcu. Curabitur laoreet, en una convallis ultrices, urna mauris
congue ex, en lacinia libero dui ac
ligula. Nam tincidunt interdum lectus, eu facilisis tellus dictum sed.
Sed nec aliquet libero, sit amet
hendrerit lectus. Vivamus id erat nec metus suscipit tincidunt non et
elit. Sed fringilla eros en dui interdum
volutpat. Pellentesque id ex quis nisi suscipit fringilla. Quisque
vehicula malesuada est, en convallis lorem
pellentesque vel.
Fusce bibendum nunc nec libero posuere, en euismod erat elementum. Duis
dapibus tortor id orci volutpat, en
blandit lorem vestibulum. Etiam porttitor, mi en fermentum volutpat,
lorem velit egestas urna, nec posuere
augue orci en eu orci. Nullam posuere urna en arco blandit vestibulum.
Sed auctor, arna en euismod cursus,
ligula dui suscipit libero, ut dignissim nada dolor sit amet justo. Nam
en sed orci en quam bibendum
ullamcorper. Nulla facilisi. Integer condimentum volutpat mi, en
malesuada justo pellentesque en. Sed en lorem
augue. Nulla facilisi. Nam ut lacinia neque. Sed ac scelerisque mi.
Aenean pellentesque pharetra mi, eu
ultrices est ullamcorper vel. Cras en un tortor en tortor hendrerit
elementum.</p>
</div>
hidden="true" hidden="">
pellentesque vel.
elementum.</p>
</div>
pellentesque vel.
elementum.</p>
</div>
pellentesque vel.
elementum.</p>
</div>
<label id="ArrowIconsL" for="slide-4" class="slide-control prev control-
1">‹</label>
<label id="ArrowIconsR1" for="slide-2" class="slide-control next control-
1">›</label>
2">‹</label>
2">›</label>
3">‹</label>
3">›</label>
4">‹</label>
4">›</label>
<ol class="slide-indicador">
<li>
<label for="slide-1" class="slide-circulo">•</label>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
</ol>
</div>
</div>
<a Class="TextoTelefono"> For any questions please contact 8009929084 </a>
<div>
<div id="heading">

<h1 class="Title">Callzilla</h1><br>
<h3>HotLin information </h3>
</div>
<div id="webchat" role="main"></div>

</div>
<div id="ChatCont" onclick="AbrirCh()"></div>
<script
src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
<script>
var clic = 1;
var Ancho = screen.width;
var Alto = screen.height;
console.log(Ancho);
console.log(Alto);
const styleOptions = {
// Add styleOptions to customize Web Chat canvas

hideUploadButton: true
};
// Add your BOT token endpoint below

var theURL =
"https://default9016a401edcd4430a376fda323f8f5.dd.environment.api.powerplatform.com
/powervirtualagents/botsbyschema/cr167_axonDemo/directline/token?api-version=2022-
03-01-preview";
var environmentEndPoint = theURL.slice(0,

theURL.indexOf('/powervirtualagents'));
var apiVersion = theURL.slice(theURL.indexOf('api-version')).split('=')[1];
var regionalChannelSettingsURL =
`${environmentEndPoint}/powervirtualagents/regionalchannelsettings?api-version=$
{apiVersion}`;
var directline;
fetch(regionalChannelSettingsURL)
.then((response) => {
return response.json();
})
.then((data) => {
directline = data.channelUrlsById.directline;
})
.catch(err => console.error("An error occurred: " + err));
fetch(theURL)
.then(response => response.json())
.then(conversationInfo => {
window.WebChat.renderWebChat(
{
directLine: window.WebChat.createDirectLine({
domain: `${directline}v3/directline`,
token: conversationInfo.token,
}),
styleOptions
},
document.getElementById('webchat')
);
})
.catch(err => console.error("An error occurred: " + err));
function AbrirCh() {
if (Ancho > 1000) {

if (clic == 1) {
document.getElementById("webchat").style.height = "calc(50% - 50px)";
document.getElementById("webchat").style.top = "300px";
document.getElementById("webchat").style.width = "25%";
document.getElementById("webchat").style.border = "1px solid #33AEE2";
document.getElementById("heading").style.visibility = "visible";
document.getElementById("ArrowIconsR1").style.visibility = "hidden";
if (Alto > 300 && Alto < 451) {
document.getElementById("heading").style.top = "5%";
document.getElementById("webchat").style.height = "65%";
} else if (Alto > 450 && Alto < 501) {
} else if (Alto > 500 && Alto < 570) {
} else if (Alto > 569 && Alto < 600) {
} else if (Alto > 599 && Alto < 680) {
document.getElementById("heading").style.top = "33.5%";
} else if (Alto > 679 && Alto < 770) {
} else if (Alto > 769 && Alto < 820) {
} else if (Alto > 819 && Alto < 900) {
} else if (Alto > 899 && Alto < 960) {
} else if (Alto > 959 && Alto < 1040) {
} else if (Alto > 1039 && Alto < 1111) {
} else if (Alto > 1111 && Alto < 1195) {
} else if (Alto > 1194 && Alto < 1280) {
} else if (Alto > 1279 && Alto < 1380) {
document.getElementById("webchat").style.top = "30%";
clic = clic + 1;
} else {
document.getElementById("webchat").style.height = "calc(0% - 50px)";

document.getElementById("webchat").style.width = "0%";
document.getElementById("webchat").style.border = "none";
document.getElementById("heading").style.visibility = "hidden";
document.getElementById("ArrowIconsR1").style.visibility = "visible";
clic = 1;
</script>
</body>
</html>

Form Final Approved Teams Bot

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Form Final Approved Teams Bot

Uploaded by

Copyright:

Available Formats

<!

#slide-1:checked~.control-1~.slide-indicador li:nth-child(1) .slide-circulo,

height: calc(50%- 50px);

box-shadow: 0px 0px 1px #000;

<a Class="TextoTelefono"> For any questions please contact 8009929084 </a>

<div id="webchat" role="main"></div>

// Add styleOptions to customize Web Chat canvas

// Add your BOT token endpoint below

var environmentEndPoint = theURL.slice(0,

if (Ancho > 1000) {

if (Alto > 300 && Alto < 451) {

} else if (Alto > 450 && Alto < 501) {

} else if (Alto > 500 && Alto < 570) {

} else if (Alto > 569 && Alto < 600) {

} else if (Alto > 599 && Alto < 680) {

} else if (Alto > 679 && Alto < 770) {

} else if (Alto > 769 && Alto < 820) {

} else if (Alto > 819 && Alto < 900) {

} else if (Alto > 899 && Alto < 960) {

} else if (Alto > 959 && Alto < 1040) {

} else if (Alto > 1111 && Alto < 1195) {

} else if (Alto > 1194 && Alto < 1280) {

} else if (Alto > 1279 && Alto < 1380) {

document.getElementById("webchat").style.height = "calc(0% - 50px)";

You might also like