currentalks: chat Bot ||JsBot..||currrentalks

Code:

<!doctype html>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">


<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<title>JsBot</title>
<style>

#Bot{
font-size:150px;
position:absolute;
top:235px;
left:530px;
border-color:white;
border-style: dashed;
border-radius:1100px;
box-shadow: 0 0 40px 0 #bbb;
width:300px;

z-index: 200;
}
#Bot:hover{
transition-delay: 1s;

box-shadow:0 0 10px #2196f3,0 0 40px #2196f3,0 0 10px #2196f3;
}
#circle{
display:inline-block;
color:#2196f3;
overflow: hidden;
transition:0.2s;
z-index:300;

}
#circle:hover{
color:#255784;

transition-delay: 1s;
}

#resultBox{
background-color: darkblue;
position:absolute;
right:0px;
width:395px;
height:210px;
border-color:black;
}
#volumeSlider{
position:absolute;
top:305px;
right:7px;
}
#rateSlider{
position:absolute;
top:370px;
right:7px;
}
#PitchSlider{
position:absolute;
top:435px;
right:7px;

}
#voiceOptions{
width:165px;
height:40px;
position:absolute;
left:2px;
top:95px;
background-color: darkblue;

}
@keyframes move_wave {
0% {
transform: translateX(0) translateZ(0) scaleY(1)
}
50% {
transform: translateX(-25%) translateZ(0) scaleY(0.55)
}
100% {
transform: translateX(-50%) translateZ(0) scaleY(1)
}
}
.waveWrapper {
overflow: hidden;


margin: ;
}
.waveWrapperInner {
position: absolute;
width: 217px;
overflow: hidden;
height: 60px;
top:223px;
left:2px;
background-image: linear-gradient(to top, #86377b 20%, #27273c 80%);
}
.waveWrapperInner1 {
position: absolute;
width: 217px;
overflow: hidden;
height: 46px;
top:601px;
right:129px;
background-image: linear-gradient(to top, #86377b 20%, #27273c 80%);
}
.bgTop {
z-index: 15;
opacity: 0.5;
}
.bgMiddle {
z-index: 10;
opacity: 0.75;
}
.bgBottom {
z-index: 5;
}
.wave {
position: absolute;
width: 200%;
height: 100%;
left: 0;
background-repeat: repeat no-repeat;
background-position: 0 bottom;
transform-origin: center bottom;
}
.waveTop {
background-size: 50% 60px;
}
.waveTop1 {
background-size: 50% 50px;
}
.waveAnimation .waveTop {
animation: move-wave 3s;
-webkit-animation: move-wave 3s;
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
.waveAnimation .waveTop1 {
animation: move-wave 3s;
-webkit-animation: move-wave 3s;
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
.waveMiddle {
background-size: 50% 60px;
}
.waveMiddle1 {
background-size: 50% 50px;
}
.waveAnimation .waveMiddle {
animation: move_wave 10s linear infinite;
}
.waveAnimation .waveMiddle1 {
animation: move_wave 10s linear infinite;
}
.waveBottom {
background-size: 50% 60px;
}
.waveBottom1 {
background-size: 50% 50px;
}
.waveAnimation .waveBottom {
animation: move_wave 15s linear infinite;
}
.waveAnimation .waveBottom1 {
animation: move_wave 15s linear infinite;
}



@keyframes example {
from {background-color: transparent;}
to {background-color: white;}
}

#slider{
width:69px;
background-color: #255784;
position:absolute;
top:496px;
right:28px;
transform:rotate(90deg);
}

</style>

</head>
<body class="bg-dark" background="https://wallpaperaccess.com/full/1876552.jpg" >

<script type="text/javascript">

var volumeSlider=document.getElementById('volumeSlider');
var rateSlider=document.getElementById('rateSlider');
var pitchSlider=document.getElementById('PitchSlider');
var voiceOptions=document.getElementById('voiceOptions');
var resultBox=document.getElementById('resultBox');
var bot=document.getElementById('Bot');

function CheckCompatibilty(){
if(!('speechSynthesis' in window)){
alert("Your browser doesn,t support speechSynthesis.If google,the upgrade!!")
}
}
CheckCompatibilty();

var voiceMap=[];

function loadvoices(){
var voices=speechSynthesis.getVoices();
for(var i=0;i<voices.length;i++){
var voice=voices[i];
var option=document.createElement('option');
option.value=voice.name;
option.innerHTML=voice.name;
voiceOptions.appendChild(option);
voiceMap[voice.name]=voice;

}
}

window.speechSynthesis.onvoiceschanged= function(e){
loadvoices();
}

function Speak(){

var msg=new SpeechSynthesisUtterance();
msg.voice=voiceMap[voiceOptions.value];
msg.Pitch=pitchSlider.value;
msg.text=resultBox.value;
msg.rate=rateSlider.value;
msg.volume=volumeSlider.value;

bot.style.animationName="example";
bot.style.animationDuration="7s";


window.speechSynthesis.speak(msg);



}

</script>


<div class="waveWrapper waveAnimation">
<div class="waveWrapperInner bgTop">
<div class="wave waveTop" style="background-image: url('http://front-end-noobs.com/jecko/img/wave-top.png')"></div>
</div>
<div class="waveWrapperInner bgMiddle">
<div class="wave waveMiddle" style="background-image: url('http://front-end-noobs.com/jecko/img/wave-mid.png')"></div>
</div>
<div class="waveWrapperInner bgBottom">
<div class="wave waveBottom" style="background-image: url('http://front-end-noobs.com/jecko/img/wave-bot.png')"></div>
</div>
</div>

<div class="waveWrapper waveAnimation">
<div class="waveWrapperInner1 bgTop">
<div class="wave waveTop1" style="background-image: url('http://front-end-noobs.com/jecko/img/wave-top.png')"></div>
</div>
<div class="waveWrapperInner1 bgMiddle">
<div class="wave waveMiddle1" style="background-image: url('http://front-end-noobs.com/jecko/img/wave-mid.png')"></div>
</div>
<div class="waveWrapperInner1 bgBottom">
<div class="wave waveBottom1" style="background-image: url('http://front-end-noobs.com/jecko/img/wave-bot.png')"></div>
</div>
</div>

<div class="container text-center" id="Bot" onclick="Speak();">
<svg class="bi bi-brightness-low" id="circle"width="0.7em" height="2em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M8 11a3 3 0 100-6 3 3 0 000 6zm0 1a4 4 0 100-8 4 4 0 000 8z" clip-rule="evenodd"/>
<circle cx="8" cy="2.5" r=".5"/>
<circle cx="8" cy="13.5" r=".5"/>
<circle cx="13.5" cy="8" r=".5" transform="rotate(90 13.5 8)"/>
<circle cx="2.5" cy="8" r=".5" transform="rotate(90 2.5 8)"/>
<circle cx="11.889" cy="4.111" r=".5" transform="rotate(45 11.89 4.11)"/>
<circle cx="4.111" cy="11.889" r=".5" transform="rotate(45 4.11 11.89)"/>
<circle cx="11.889" cy="11.889" r=".5" transform="rotate(135 11.89 11.889)"/>
<circle cx="4.111" cy="4.111" r=".5" transform="rotate(135 4.11 4.11)"/>
</svg>
</div>
<textarea id="resultBox" >Hello boss!!Want can i do for you!!</textarea>

<label>

<select id="voiceOptions"></select>

</label>
<label>

<input type="range" id="volumeSlider" min="0" max="1" value="0.5" step="0.1" />
</label>
<label>

<input type="range" id="rateSlider" min="0" max="1" value="0.5" step="0.1" />
</label>
<label>

<input type="range" id="PitchSlider" min="0" max="2" value="0.5" step="0.1" />
</label>

<label>

<input type="range" id="slider" value="" placeholder="#000000">
</label>







<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>

</html>

HTMl is taken from bootstrap and javascript and css were from different website.Sublime is used as text editor.Browser is chrome.

Output:

Comment your opinion below ,do you all like it,or you want more such kind of stuff.

You can download this project here

currentalks

Pages

Thursday, April 9, 2020

chat Bot ||JsBot..||currrentalks

No comments:

Post a Comment

Should I tell her?