Scribd
Upload
15 views

webdevda

The document outlines a web programming project by Atharva Mahesh Bhangale, featuring a webpage for the Immersitech VR headset that includes sections on product features, reviews, pricing, and a chatbot for user assistance. The HTML and CSS code provided showcases the structure and styling of the webpage, emphasizing an immersive user experience. The site is live at the specified GitHub link.

Uploaded by

atharvabhangale3
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
15 views

webdevda

The document outlines a web programming project by Atharva Mahesh Bhangale, featuring a webpage for the Immersitech VR headset that includes sections on product features, reviews, pricing, and a chatbot for user assistance. The HTML and CSS code provided showcases the structure and styling of the webpage, emphasizing an immersive user experience. The site is live at the specified GitHub link.

Uploaded by

atharvabhangale3
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 33

Web Programming DA-2

Name: Atharva Mahesh Bhangale


Reg No: 22BCE3274

Task-
Webpage using Javascript with chatbot
Webpage:
My site is live at:
https://atharvabhangale.github.io/VRwebpage/

Code:
Html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Landing Product</title>

<!-- STYLES -->

<link rel="stylesheet" href="css/style.css">


<link rel="stylesheet" href="css/responsive.css">
<link rel="stylesheet" href="css/index.css">
</head>
<body>

<!-- HEADER -->


<header id="header">
<div class="container">
<nav class="grid grid-header">
<a href="#" class="logo">
<img src="img/logo1.jpg" alt="Logo Ecommerce"
width="150px" class = "main-logo">
</a>
<button id="btn-menu-toggle" class="btn-menu-toggle">
<i class="fas fa-bars"></i>
</button>
<ul id="menu" class="menu list-inline">
<li>
<a href="#intro">Home</a>
</li>
<li>
<a href="#howto">How it works</a>
</li>
<li>
<a href="#features">Features</a>
</li>
<li>
<a href="#demo">Demo</a>
</li>
<li>
<a href="#reviews">Reviews</a>
</li>
<li>
<a href="#price">Price</a>
</li>
<li>
<a href="#contact">Contact</a>
</li>
</ul>
</nav>
</div>
</header>
<main>

<!-- INTRO -->


<section class="section bg-image" id="intro">
<div class="container">
<div class="grid grid2">
<div class="intro-desc animate__animated
animate__backInLeft">
<h3>Immersitech VR 4k</h3>
<h1>Immersive content so real, the truth literally
hurts</h1>
<p>Experience a new dimension of entertainment with
the Immersitech VR Headset. Dive into immersive virtual worlds that blur the
lines between reality and fantasy. Whether you're a gamer, an explorer, or an
adventurer at heart, our VR headset promises an unforgettable journey. </p>

<a href="#" class="btn-link btn-link-light">Order


now!</a>
</div>
<div class="intro-img animate__animated
animate__backInRight">
<img src="img/img3.png" alt="product image">
</div>
</div>
</div>
</section>

<!-- HOW TO WORK -->


<section class="section" id="howto">

<div class="container">
<h3 class="short">How it Works</h3>
<h2 class="title">Principal functions</h2>
<p class="desc">Discover the core functionalities that make
our product stand out:</p>
<div class="grid grid3">
<div class="functions col-left">
<ul>
<li>
<i class="fab fa-algolia"></i>
<h3>Fast</h3>
<p>Experience lightning-fast performance that
keeps you productive and efficient</p>
</li>
<li>
<i class="fas fa-shield-alt"></i>
<h3>Security</h3>
<p>Rest assured knowing that your data and
information are protected with advanced security features.</p>
</li>
</ul>
</div>
<div class="functions-image wow animate__animated
animate__backInUp">
<img src="img/img1.jpeg" alt="product image">
</div>
<div class="functions">
<ul>
<li>
<i class="fas fa-microchip"></i>
<h3>Monitor</h3>
<p>Keep track of important data and metrics
with our intuitive monitoring system.</p>
</li>
<li>
<i class="fas fa-memory"></i>
<h3>Alarm</h3>
<p>Stay alert and informed with our reliable
alarm system, ensuring you never miss a critical event.</p>
</li>
</ul>
</div>
</div>
</div>
</section>

<!-- FEATURES -->


<section class="section" id="features">
<div class="container">
<h3 class="short">Features</h3>
<h2 class="title">Discover the Power Behind the Experience:
Explore Our Key Features</h2>
<p class="desc">Escape into lifelike experiences where you're
at the center of the action. With 360-degree views and spatial audio, every
moment feels real. From thrilling games to tranquil escapes, our VR headset
offers endless possibilities for entertainment and relaxation</p>
<div class="grid grid3">
<div class="feature wow animate__animated
animate__fadeInUp">
<i class="fas fa-camera-retro"></i>
<h3>Camera System</h3>
<p>Capture Every Moment in Stunning Detail</p>
</div>
<div class="feature wow animate__animated
animate__fadeInUp">
<i class="fab fa-chromecast"></i>
<h3>Responsive Display</h3>
<p>Immersive Visuals, Instant Response</p>
</div>
<div class="feature wow animate__animated
animate__fadeInUp">
<i class="fas fa-microchip"></i>
<h3>Fastest Processor</h3>
<p>Unparalleled Speed for Seamless Experiences</p>
</div>
<div class="feature wow animate__animated
animate__fadeInUp">
<i class="fas fa-dice-d20"></i>
<h3>Exceptional Durability</h3>
<p>Built to Last: Rugged Design, Reliable
Performance</p>
</div>
<div class="feature wow animate__animated
animate__fadeInUp">
<i class="fas fa-battery-full"></i>
<h3>Battery Life</h3>
<p>Power That Endures: Long-lasting Performance for
Extended Use</p>
</div>
<div class="feature wow animate__animated
animate__fadeInUp">
<i class="fas fa-expand-arrows-alt"></i>
<h3>Better Connection</h3>
<p>Stay Connected Anywhere, Anytime: Reliable
Connectivity at Your Fingertips</p>
</div>
</div>
</div>
</section>

<!-- VIDEO SECTION -->


<section class="section bg-video bg-image" id="demo">
<div class="container">
<h2 class="title">Experience It Firsthand: Watch Our Product
Demo Video</h2>
<p class="desc">Step Into the Future: Immerse Yourself in Our
Product Demo Video and Witness the Next Level of Innovation</p>
<a href="#" class="btn-play wow animate__animated
animate__zoomIn">
<i class="far fa-play-circle"></i>
</a>
</div>
</section>

<!-- REVIEWS -->


<section class="section" id="reviews">
<div class="container">
<h3 class="short">Reviews</h3>
<h2 class="title">Hear It From Our Customers</h2>
<p class="desc">Discover why our customers are raving about
their VR experiences.</p>
<div class="grid grid3">
<div class="review wow animate__animated animate__zoomIn">
<img src="img/review1.png" alt="review user"
width="100px">
<blockquote>"I've never felt so immersed in a virtual
world before. The Immersitech VR Headset is a game-changer!"</blockquote>
<h3>Gokul Anil</h3>
</div>
<div class="review wow animate__animated animate__zoomIn">
<img src="img/review2.png" alt="review user"
width="100px">
<blockquote>"The Immersitech VR Headset exceeded my
expectations. It's like stepping into a whole new universe every time I put it
on!"</blockquote>
<h3>Komal Chaudhari</h3>
</div>
<div class="review wow animate__animated animate__zoomIn">
<img src="img/review3.png" alt="review user"
width="100px">
<blockquote>"Sleek design, easy setup, and incredibly
immersive experiences. I can't get enough of my Immersitech VR
Headset!"</blockquote>
<h3>Anurag Mahajan</h3>
</div>
</div>
</div>
</section>

<!-- PRICING -->


<section class="section" id="price">
<div class="container">
<div class="grid grid4">
<div class="info">
<h2>Choose your model</h2>
<p>Unveiling Your Path to Virtual Reality:</p><p>
Explore Our Range of Packages and Find the Perfect Fit for Your Needs and
Budget</p>
</div>
<div class="model wow animate__animated
animate__fadeInUp">
<i class="fas fa-mobile-alt"></i>
<h4>Basic</h4>
<h3>USD $199</h3>
<ul>
<li>Display: HD resolution</li>
<li>Field of View: Standard</li>
<li>Audio: Built-in speakers</li>
<li>Controllers: Basic controller included</li>
</ul>
<a href="#" class="btn-link">Order now!</a>
</div>
<div class="model wow animate__animated
animate__fadeInUp">
<i class="fas fa-mobile-alt"></i>
<h4>Premium</h4>
<h3>USD $349</h3>
<ul>
<li>Display:Full HD resolution</li>
<li>Field of View: Expanded</li>
<li>Audio: Enhanced audio system</li>
<li>Controllers: Advanced motion controllers
included</li>
</ul>
<a href="#" class="btn-link">Order now!</a>
</div>
<div class="model wow animate__animated
animate__fadeInUp">
<i class="fas fa-mobile-alt"></i>
<h4>Advance</h4>
<h3>USD $499</h3>
<ul>
<li>Display: Ultra HD resolution</li>
<li>Field of View: Wide-angle</li>
<li>Audio: Premium spatial audio system</li>
<li>Controllers: Advanced motion controllers with
haptic feedback</li>
</ul>
<a href="#" class="btn-link">Order now!</a>
</div>
</div>
</div>
</section>

<!-- CONTACT -->


<section id="contact" class="wow animate__animated
animate__zoomInDown">
<div class="bg-contact bg-image"></div>
<div class="container">
<div class="grid grid2">
<div></div>
<div class="section-contact">
<h2 class="title">Contact Us</h2>
<p class="desc">Connect with Us: Reach Out for
Support, Inquiries, and More</p>
<form action="">
<label for="name">
<input type="text" name="name" id="name"
placeholder="Your Name">
</label>
<label for="email">
<input type="email" name="email" id="email"
placeholder="Your Email">
</label>
<label for="tel">
<input type="tel" name="tel" id="tel"
placeholder="Your Phone number">
</label>
<button type="submit">Send</button>
</form>
</div>
</div>
</div>
</section>

</main>
<!-- FOOTER -->
<footer class="section">
<div class="container">
<ul class="social list-inline">
<li>
<a href="#">
<i class="fab fa-facebook-square"></i>
</a>
</li>
<li>
<a href="#">
<i class="fab fa-instagram-square"></i>
</a>
</li>
<li>
<a href="#">
<i class="fab fa-twitter-square"></i>
</a>
</li>
<li>
<a href="#">
<i class="fab fa-linkedin"></i>
</a>
</li>
</ul>
<p>
Copyright 2024 - <strong>Immersitech</strong>
</p>
</div>
</footer><div class="parent">
<div class="desc">
<h1 class="text">AssistPro</h1>
<p>Your Personal Guide to Seamless Support and Instant
Assistance</p>
<button id="init">START CHAT</button>
</div>
<div>
<img src="img/chatbot.png" alt="" class="bot-img">
</div>
</div>
<div id="test" style="position: fixed;top: 4rem;right: 8rem;display:
none;">
<div class="child" id="chatbot">
<div class="header">
<div class="h-child">
<img src="img/chatbot (1).png" alt="avatar" id="avatar">
<div>
<span class="name">AssistPRO</span>
<br>
<span style="color:lawngreen">online</span>
</div>
</div>
<div>
<button class="refBtn"><i class="fa fa-refresh"
onclick="initChat()"></i></button>
</div>
</div>

<div id="chat-box">

</div>
<div class="footer">
<span>powered by @atharva</span>
</div>
</div>
</div>

<!-- js file -->


<script src="js/index.js"></script>
<!-- MAIN JS -->
<script src="js/script.js"></script>

<!-- WOW ANIMATED COMPLEMENT -->


<script>
new WOW({
offset: 150
}).init();
</script>
</body>
</html>

Css:
/* pallete color */
:root{
--color-dark:#4b45dd;
--color-main:#6862f4;
--color-gray:#7b8da0;
--color-gray1:#424242;
--color-light:#f4f4ff;
}

*{
padding: 0;
margin:0;
box-sizing: border-box;
font-family: 'Montserrat', sans-serif;
font-weight: 400;
}
html {
scroll-behavior: smooth;
}
a{
text-decoration: none;
color: var(--color-main);
}
p{
font-size: .9em;
}
strong{
font-weight: 600;
}
.grid{
display: grid;
gap:20px 10px;
}
.grid2{
grid-template-columns: repeat(2, 1fr);
}
.grid3{
grid-template-columns: repeat(3, 1fr);
}
.grid4{
grid-template-columns: repeat(4, 1fr);
}
.grid img{
max-width: 100%;
}
.container{
width: 100%;
max-width: 1320px;
margin: 0 auto;
padding:0 25px;
}
.list-inline li{
display: inline-block;
list-style-type: none;
}
.bg-image{
background-repeat: no-repeat;
background-size: cover;
background-position:center;
}
h1{
font-weight: 700;
}
h2, h3{
font-weight: 600;
}
.btn-link {
border: 2px solid var(--color-main);
color: var(--color-main);
font-size: .8em;
display: inline-block;
font-weight: 600;
border-radius: 5px;
padding: 8px 15px;
}
.btn-link:hover{
background-color: var(--color-main);
color:#fff;
}
.btn-link-light{
border: 2px solid #fff;
}

/* all sections */
.section{
padding: 80px 0;
}
.section .short,
.section .title,
.section .desc{
text-align: center;
margin-bottom: 10px;
}

.section .short{
color: var(--color-main);
text-transform: uppercase;
font-size: .9em;
}
.section .desc{
margin-bottom: 40px;
font-size: .9em;
}

/* header nav */
header {
position: fixed;
width: 100%;
z-index: 1;
}
.grid-header{
grid-template-columns: 200px 1fr;
align-items: center;
}
.logo img {
max-width: 180px;
padding: 4px 0;
}

/* menu */
.btn-menu-toggle{
display: none;
padding: 10px;
justify-self:end;
}
.menu {
text-align: right;
}
.menu li {
padding: 5px 10px;
}
.menu li a {
color:var(--color-light);
font-weight: 600;
text-transform: uppercase;
font-size: .85em;
}
.menu li a:hover {
text-decoration: underline;
}

/* header sticky */
.sticky{
background-color: var(--color-dark);
box-shadow: 1px 1px 10px gray;
}

/* intro */
#intro{
background-image: url(../img/bg-top.png);
padding-top: 120px;
}
#intro .container{
max-width: 1000px;
padding:5px 25px;
}
.intro-img img {
width: 100%;
max-width: 390px;
margin: 0 auto;
display: block;
}
.intro-desc * {
color: #fff;
}
.intro-desc h1,
.intro-desc h3,
.intro-desc p {
margin-bottom:20px
}
.intro-desc h1{
font-size: 2em;
}

/* how to work */
#howto .grid{
grid-template-areas: "detail1 img detail2";
}
.functions ul{
padding: 10px 30px;
}
#howto .grid div:nth-child(1){
grid-area: detail1;
}
#howto .grid div:nth-child(2){
grid-area: img;
}
#howto .grid div:nth-child(3){
grid-area: detail2;
}

.functions li {
padding: 10px;
list-style-type: none;
margin: 5px 0 20px;
font-size: .9em;
}

.functions li i {
font-size: 2em;
margin-bottom: 10px;
color: var(--color-main);
}
.functions li h3{
margin-bottom: 10px;
}
.functions-image img {
width: 100%;
max-width: 300px;
margin: 0 auto;
display: block;
}
.col-left li {
text-align: right;
}

/* features */
#features{
background-color: var(--color-light);
}
#features .container{
max-width:1000px;
}
.feature {
padding: 50px 20px;
box-shadow: 1px 1px 15px var(--color-light);
text-align:center;
background-color: #fff;
}
.feature i {
color: var(--color-main);
font-size: 2.8em;
margin: 20px 0;
}
.feature h3 {
margin-bottom: 10px;
font-weight: 500;
}
.feature:hover{
background: linear-gradient(0deg, #6862f4 21%, #6862f4a4 79%);
}
.feature:hover *{
color:#fff;
}

/* video demo */
.bg-video{
background-image: url(../img/bg-video.png);
background-attachment: fixed;
}
section#demo{
text-align:center;
}
section#demo .title,
section#demo .desc,
section#demo .btn-play {
color: #fff;
}
section#demo .btn-play i{
font-size:5em
}
#demo .btn-play:hover i{
transform:scale(1.1);
}

/* reviews */
#reviews{
background-color: var(--color-light);
}
.review {
text-align: center;
padding: 15px 0;
}
.review img {
max-width: 150px;
}
.review blockquote {
font-style: italic;
margin: 15px 10px;
}
.review h3 {
font-size: .9em;
}

/* pricing */
.info {
padding: 40px 10px;
align-self: center;
}
.info h2 {
margin-bottom: 20px;
}
.info p {
margin-bottom: 10px;
}
.model {
text-align: center;
border: 1px solid var(--color-light);
padding: 40px 25px;
border-radius: 5px;
}
.model i {
color: var(--color-gray1);
font-size: 2em;
margin-bottom: 20px;
}
.model h3 {
color: var(--color-main);
margin-bottom: 20px;
font-weight: 600;
font-size: 1.4em;
}
.model h4 {
margin-bottom: 5px;
}
.model ul{
margin-bottom:40px
}
.model ul li {
text-align: left;
list-style-type: none;
padding: 10px 0;
font-size: .85em;
position: relative;
padding-left: 20px;
}
.model ul li:before{
content: "\f058";
font-family: 'Font Awesome 5 Free';
color: var(--color-main);
position: absolute;
left: 0;
}

/* contact */
#contact{
position: relative;
background-color: var(--color-light);
}
.bg-contact{
background-image: url(../img/img4.jpeg);
position: absolute;
left: 0;
width: 50%;
height: 100%;
}
.section-contact h2{
margin-bottom:10px
}
.section-contact p{
margin-bottom:20px
}
.section-contact {
padding: 80px 60px;
}
.section-contact form input,
.section-contact form button{
width: 100%;
margin-bottom: 15px;
padding: 12px 10px;
border-radius:4px;
border:1px solid var(--color-gray);
}
.section-contact form button {
background-color:var(--color-main);
border:0;
color:#fff;
}

/* footer */
footer ul,
footer p{
text-align: center;
}
ul.social i {
font-size: 1.5em;
}
ul.social a {
margin: 0 10px;
}
ul.social {
margin-bottom: 20px;
}
@media (max-width: 480px) {
/* reset grid */
.grid{
gap:initial;
}
.grid2,
.grid3,
.grid4{
grid-template-columns: 1fr;
}

/* header */
.btn-menu-toggle{
display: block;
background-color: transparent;
border: 1px solid var(--color-light);
color: var(--color-light);
}
.btn-menu-toggle i {
font-size: 1.2em;
}

/* menu */
.menu {
width: 100%;
position: absolute;
left: 0;
top: 64px;
background-color: var(--color-dark);
box-shadow: 1px 3px 5px #928dff;
height: 0;
overflow: hidden;
}
.menu li {
width: 100%;
text-align: left;
padding: 10px 20px!important;
}
.menu.show{
height: 270px;
}

/* how to */
#howto .grid{
grid-template-areas: 'detail1 detail2'
'img img';
grid-template-columns:auto;
}
.functions ul {
padding: 10px;
}
.functions ul li {
text-align: center;
}

/* update grid feature */


#features .grid{
gap:10px;
}
#features .grid3{
grid-template-columns: repeat(2, 1fr);
}
.feature{
padding: 15px;
}
.feature h3{
font-size: 1em;
}
/* contact section */
.section-contact{
padding: 60px 20px;
}
.bg-contact{
position: initial;
width: 100%;
height: 300px;
}
}
html,body{
height: 100%;
}
body{
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(90deg,#fff,#fff);
transition: 1s all ease-in-out;
}
#init{
margin-top: 2rem;
background: indianred;
border: none;
padding: 10px 20px;
border-radius: 20px;
font-size: 12px;
font-weight: 500;
color: aliceblue;
cursor: pointer;
}
.desc p{
color: rgb(133,153,168);
margin: 0;
font-weight: 600;
}
.text{
font-size: 65px;
font-weight: 800;
color: cadetblue;
margin: 0;
}
.parent{
position: relative;
height: 100%;
padding: 0 7rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.bot-img{
width: 20rem;
height: 20rem;
}
.child{
box-shadow: 0 0 2px salmon;
border-radius: 15px;
height: 30rem;
width: 16rem;
margin: auto;
background: white;
}
.header img{
width: 35px;
height: 35px;
border-radius: 50%;
margin: 0 0.5rem;
border: 1px solid rgb(231,231,231);
padding: 5px;
}
.header{
position: absolute;
top: 0;
display: flex;
align-items: center;
border-bottom: 1px solid whitesmoke;
background: white;
width: 16rem;
padding: 5px 0;
border-top-right-radius: 15px;
border-top-left-radius: 15px;
z-index: 1;
box-shadow: 0 0 2px rgb(175,175,175);
}
.h-child{
display: flex;
align-items: center;
}
.main-logo{
background-color: aliceblue;
border-radius: 10px;
margin: 10px 0px;
}
.header span{
font-size: 13px;
margin: 0;
padding: 0;
}
.refBtn{
position: absolute;
bottom: 1rem;
right: 1rem;
background: none;
border: none;
border-radius: 50%;
color: indianred;
font-size: 18px;
cursor: pointer;
}
.name{
font-weight: 600;
}
.footer{
position: absolute;
bottom: 0;
width: 16rem;
background: white;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
color: indianred;
padding: 15px 0;
text-align: center;
font-size: 14px;
box-shadow: 0 0 3px rgb(153,153,153);
}
#chat-box{
position: relative;
top: 40px;
padding: 8px 10px;
font-size: 12px;
height: 24.2rem;
overflow: auto;
background: rgb(224,241,253);
text-align: center;
}

/* these classes will be used in javascript file */


.msg{
background: white;
padding: 5px 15px;
border-top-right-radius: 15px;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
width: max-content;
font-size: 14px;
color: lightslategrey;
box-shadow: 0 0 5px rgb(226,226,226);
max-width: 65%;
text-align: left;
}
.test{
text-align: right;
margin: 20px 0;
}
.rep{
background: rgb(253,243,224);
color: lightslategray;
padding: 5px 15px;
border-top-right-radius: 15px;
border-bottom-left-radius: 15px;
border-top-left-radius: 15px;
font-size: 14px;
box-shadow: 0 0 5px rgb(211,211,211);
}
.opt{
padding: 5px 20px;
columns: lightsalmon;
border: 1px solid blueviolet;
border-radius: 1rem;
margin: 0.3rem 0.5rem;
display: inline-block;
cursor: pointer;
font-weight: 500;
background: white;
text-align: center;
font-size: 14px;
color: blueviolet;
}
.link{
text-decoration: none;
display: block;
text-align: center;
color: aliceblue !important;
background: blueviolet;
}
.m-link{
text-decoration: none;
}
.link:active{
background: white;
border: 1px solid blueviolet;
color: blueviolet;
}

Javascript:
// When the user scrolls the page, execute myFunction
window.onscroll = () => stickyMenu();

// Get the header


let header = document.getElementById("header");

// Get the offset position of the navbar


let sticky = header.offsetTop;
// Add the sticky class to the header when you reach its scroll position.
Remove "sticky" when you leave the scroll position
stickyMenu = () => (window.pageYOffset > sticky)
? header.classList.add("sticky")
: header.classList.remove("sticky");

// Show / hide menu mobil version


let showMenu = false;
const menuMain = document.getElementById("menu");
const btnMenuToggle = document.getElementById("btn-menu-toggle");

let actionMenu = () => {


if( showMenu ){
menuMain.classList.remove("show");
showMenu = false;
}else{
menuMain.classList.add("show");
showMenu = true;

}
}

btnMenuToggle.addEventListener("click", actionMenu);
var data= {
chatinit:{
title: ["Welcome to ImmersiTech VR! I'm here to assist you. How can I
help you today?"],
options: ["Explore VR Experiences","Discover Upcoming Events","Get
Headset Recommendations","Learn About EducationalContent"]
},
explorevrexperiences: {
title:["Please select category"],
options:['Gaming Experiences','Educational Simulations','Virtual
Tours','Immersive Storytelling'],
url : {

}
},

discoverupcomingevents: {
title:["Virtual Reality Conference: Future Frontiers"],
options:["Join us for an immersive journey into the future of virtual
reality at the Virtual Reality Conference: Future Frontiers, hosted by
ImmersiTech. This groundbreaking event brings together VR enthusiasts,
industry experts, and thought leaders for an exploration of the latest trends,
innovations, and possibilities in the world of VR technology."],
url : {
more:"https://www.youtube.com",
link:["https://www.youtube.com","https://www.youtube.com","https:/
/www.youtube.com","https://www.youtube.com"]
}
},
getheadsetrecommendations: {
title:["Unveiling Your Path to Virtual Reality: Explore Our Range of
Packages and Find the Perfect Fit for Your Needs and Budget"],
options:['Basic','Advance','Premium'],
url : {

}
},
learnabouteducationalcontent: {
title:["Thanks for your response","Here are some electronic items for
you","Click on it to know more"],
options:['History Exploration','Science Adventures','Geography
Expeditions','Art and Culture Immersion'],
url : {
more:"https://www.youtube.com",
link:["#","#","#","#","#"]
}
},
basic: {
title:["Thanks for your response","Here is more information about
basic verison","Click on it to know more"],
options:['Display','Camera','Processor','Comfort'],
url : {
more:"https://www.youtube.com",
link:["#","#","#","#"]
}
},
advance: {
title:["Thanks for your response","Here is more information about
Advance verison","Click on it to know more"],
options:['Display','Camera','Processor','Comfort'],
url : {
more:"https://www.youtube.com",
link:["#","#","#","#"]
}
},
premium: {
title:["Thanks for your response","Here is more information about
Premium verison","Click on it to know more"],
options:['Display','Camera','Processor','Comfort'],
url : {
more:"https://www.youtube.com",
link:["#","#","#","#"]
}
},
historyexploration: {
title:["Thanks for your response","These are some results based on
your input","Click on it to know more"],
options:['Clothing','Western Wear','Ethnic Wear','Top Brands'],
url : {
more:"https://www.youtube.com",
link:["#","#","#","#"]
}
},
scienceadventures: {
title:["These are some of latest discoveries and adventures in
Science"],
options: ["Meta Quest","Sora AI","Apple Vision Pro","Immersitech
VR","Chatgpt 4"],
url : {
more:"https://www.youtube.com",
link:["https://www.youtube.com","https://www.youtube.com","https:/
/www.youtube.com","https://www.youtube.com"]
}
},
gamingexperiences: {
title: ["Thanks for your response","Here are Virtual Gaming
Experiences"],
options: ["Palworld","Witcher 3","Star Citizen","Call of Duty","Gta
5"],
url: {
more:"https://www.youtube.com",
link:["#","#","#","#","#"]
}
},
educationalsimulations: {
title: ["Thanks for your response","Here are V"],
options: ["Mechanical","Comp
Bio","Agriculture","Biotechnology","Sustainable Development"],
url: {
more:"https://www.youtube.com",
link:["#","#","#","#","#"]
}
},
virtualtours: {
title: ["Thanks for your response","Here are some of our handpicked
Virtual tours"],
options: ["Bali","Tokyo","Switzerland","Maldives","Kashmir"],
url: {
more:"https://www.youtube.com",
link:["#","#","#","#","#"]
}
},
immersivestorytelling: {
title: ["Here are some more options for you"],
options: ["YouTube","Netflix","Amazon Prime","Hot Star"],
url: {
more:"https://www.youtube.com/",
link:["#","#","#","#","#"]
}
},
}

document.getElementById("init").addEventListener("click",showChatBot);
var cbot= document.getElementById("chat-box");

var len1= data.chatinit.title.length;

function showChatBot(){
console.log(this.innerText);
if(this.innerText=='START CHAT'){
document.getElementById('test').style.display='block';
document.getElementById('init').innerText='CLOSE CHAT';
initChat();
}
else{
location.reload();
}
}

function remove_spaces(str) {
let new_str = ""
for(let i = 0; i < str.length; i++) {
if (str[i] != " ") {
new_str += str[i].toLowerCase()
}
}

return new_str
}

function initChat(){
j=0;
cbot.innerHTML='';
for(var i=0;i<len1;i++){
setTimeout(handleChat,(i*500));
}
setTimeout(function(){
showOptions(data.chatinit.options)
},((len1+1)*500))
}

var j=0;
function handleChat(){
console.log(j);
var elm= document.createElement("p");
elm.innerHTML= data.chatinit.title[j];
elm.setAttribute("class","msg");
cbot.appendChild(elm);
j++;
handleScroll();
}

function showOptions(options){
for(var i=0;i<options.length;i++){
var opt= document.createElement("span");
var inp= '<div>'+options[i]+'</div>';
opt.innerHTML=inp;
opt.setAttribute("class","opt");
opt.addEventListener("click", handleOpt);
cbot.appendChild(opt);
handleScroll();
}
}

function handleOpt(){
console.log(this);
var findText= this.innerText;

document.querySelectorAll(".opt").forEach(el=>{
el.remove();
})
var elm= document.createElement("p");
elm.setAttribute("class","test");
var sp= '<span class="rep">'+this.innerText+'</span>';
elm.innerHTML= sp;
cbot.appendChild(elm);

var tempObj= data[remove_spaces(findText)];


handleResults(tempObj.title,tempObj.options,tempObj.url);
}

function handleDelay(title){
var elm= document.createElement("p");
elm.innerHTML= title;
elm.setAttribute("class","msg");
cbot.appendChild(elm);
}
function handleResults(title,options,url){
for(let i=0;i<title.length;i++){
setTimeout(function(){
handleDelay(title[i]);
},i*500)

const isObjectEmpty= (url)=>{


return JSON.stringify(url)=== "{}";
}

if(isObjectEmpty(url)==true){
console.log("having more options");
setTimeout(function(){
showOptions(options);
},title.length*500)

}
else{
console.log("end result");
setTimeout(function(){
handleOptions(options,url);
},title.length*500)

}
}

function handleOptions(options,url){
for(var i=0;i<options.length;i++){
var opt= document.createElement("span");
var inp= '<a class="m-link"
href="'+url.link[i]+'">'+options[i]+'</a>';
opt.innerHTML=inp;
opt.setAttribute("class","opt");
cbot.appendChild(opt);
}
var opt= document.createElement("span");
var inp= '<a class="m-link" href="'+url.more+'">'+'See more</a>';

const isObjectEmpty= (url)=>{


return JSON.stringify(url)=== "{}";
}

console.log(isObjectEmpty(url));
console.log(url);
opt.innerHTML=inp;
opt.setAttribute("class","opt link");
cbot.appendChild(opt);
handleScroll();
}

function handleScroll(){
var elem= document.getElementById('chat-box');
elem.scrollTop= elem.scrollHeight;
}

You might also like