diff --git a/about.html b/about.html index 2940342..02d06a2 100644 --- a/about.html +++ b/about.html @@ -1,23 +1,18 @@ - - About Us - Fitness Website + - - - -
@@ -34,48 +29,21 @@

Our Mission

- -
-
-

Chetan Ajmani

- JavaScript Developer & Interactive Features Expert -

Bringing dynamic functionality to life, I specializes in JavaScript-driven interactivity, ensuring an engaging and responsive experience.

- -
-
- -
+ +
-

Tanish Mehta

- Front-End Specialist & UI/UX Expert -

Crafting intuitive and visually engaging designs,I ensures seamless user navigation with expert HTML and CSS styling. Their keen focus on user experience makes every interaction smooth.


+

Chetan Ajmani

+ JavaScript Developer & Interactive Features Expert +

Bringing dynamic functionality to life, I specializes in JavaScript-driven interactivity, ensuring an engaging and responsive experience.

-
-
- -
-
-

Vansh Thakur

- Content Strategist & Digital Optimization Specialist -

Driving meaningful engagement, I curates compelling content, optimizes SEO, and ensures the website remains informative and impactful. Their expertise elevates the platforms reach and effectiveness.


-
+
@@ -85,18 +53,7 @@

Vansh Thakur

0

Years of Experience

-
-

0

-

Happy Clients

-
-
-

0

-

Fitness Programs

-
-
-

0

-

Success Rate

-
+
@@ -109,39 +66,17 @@

Ready to Transform Your Life?

- - - - - - - - + +
+
+
Talk to your own assistant...
+
+
+ + +
+
+ - - + \ No newline at end of file diff --git a/cart.html b/cart.html index 8775b2e..41c61a8 100644 --- a/cart.html +++ b/cart.html @@ -7,7 +7,7 @@ Fitness Planet - Store - + @@ -22,21 +22,18 @@
-
Product 1

Tshirt Fitness Planet

₹499
-
Product 2

Classic Watch

$79.99
-
Product 3

Denim Jacket

@@ -44,9 +41,7 @@

Denim Jacket

- -

Shopping Cart

@@ -56,20 +51,18 @@

Shopping Cart

- - - - - - - - + +
+
+
Talk to your own assistant...
+
+
+ + +
+
+ + - + \ No newline at end of file diff --git a/chatbot.js b/chatbot.js new file mode 100644 index 0000000..54130ab --- /dev/null +++ b/chatbot.js @@ -0,0 +1,94 @@ +// Fetch and insert navbar +fetch('navbar.html') + .then(response => response.text()) + .then(data => { + document.getElementById('navbar').innerHTML = data; + initializeChatbot(); + }) + .catch(error => console.error('Error loading navbar:', error)); + +function initializeChatbot() { + const chatbotIcon = document.querySelector('img.navbar[alt="chatbot-png"]'); + const chatbox = document.querySelector('.chatbox'); + const chatContainer = document.querySelector('.chat-container'); + const h1 = document.querySelector('.h1'); + const prompt = document.querySelector('.prompt'); + const chatbtn = document.querySelector('.input-area button'); + + if (chatbotIcon && chatbox && chatContainer && h1 && prompt && chatbtn) { + // Toggle chatbox visibility + chatbotIcon.addEventListener('click', () => { + chatbox.classList.toggle('active'); + if (chatbox.classList.contains('active')) { + h1.style.display = 'block'; + } + }); + + // Chatbot functionality (rest of the code remains the same) + let userMessage = ''; + const Api_url = "https://generativelanguage.googleapis.com/v1beta/models/gemini-2.0-flash:generateContent?key=AIzaSyCacQmAMhupE1_VrLNnhsB-APf48WDmzDM"; + + function createChatBox(html, className) { + const div = document.createElement('div'); + div.classList.add(className); + div.innerHTML = html; + return div; + } + + async function generateApiResponse(aiChatBox) { + const textElement = aiChatBox.querySelector('.text'); + try { + const response = await fetch(Api_url, { + method: "POST", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify({ + contents: [{ "role": "user", "parts": [{ text: `${userMessage}` }] }] + }) + }); + const data = await response.json(); + const apiResponse = data?.candidates[0].content.parts[0].text.trim(); + textElement.innerText = apiResponse; + } catch (error) { + console.log(error); + } finally { + aiChatBox.querySelector('.loading').style.display = 'none'; + } + } + + function showLoading() { + const html = `

`; + let aiChatBox = createChatBox(html, "ai-chat-box"); + chatContainer.appendChild(aiChatBox); + generateApiResponse(aiChatBox); + } + + chatbtn.addEventListener('click', () => { + h1.style.display = 'none'; + userMessage = prompt.value; + const html = `

`; + let userChatBox = createChatBox(html, "user-chat-box"); + userChatBox.querySelector('.text').innerText = userMessage; + chatContainer.appendChild(userChatBox); + prompt.value = ''; + setTimeout(showLoading, 500); + }); + + prompt.addEventListener('keypress', function (event) { + if (event.key === 'Enter') { + event.preventDefault(); + if (prompt.value.trim() !== '') { + h1.style.display = 'none'; + userMessage = prompt.value; + const html = `

`; + let userChatBox = createChatBox(html, "user-chat-box"); + userChatBox.querySelector('.text').innerText = userMessage; + chatContainer.appendChild(userChatBox); + prompt.value = ''; + setTimeout(showLoading, 500); + } + } + }); + } else { + console.error('One or more chatbot elements not found in DOM'); + } +} \ No newline at end of file diff --git a/index.html b/index.html index b86705c..f76dedb 100644 --- a/index.html +++ b/index.html @@ -8,7 +8,7 @@ - + @@ -137,7 +137,8 @@

Links
-

Social Media

+

Social Media
+

@@ -190,18 +191,22 @@

Social Media

- - - - - - + + + + + + + + + + diff --git a/navbar.css b/navbar.css index 8055bce..928adba 100644 --- a/navbar.css +++ b/navbar.css @@ -102,4 +102,124 @@ body { .navbar a:hover::before { width: 100%; background-color: #cdc7c7b1; +} + +.chatbox { + position: fixed; + bottom: 30px; + right: 30px; + width: 350px; + max-height: 500px; + background: rgba(255, 255, 255, 0.1); + border-radius: 20px; + backdrop-filter: blur(10px); + box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); + padding: 20px; + display: flex; + flex-direction: column; + justify-content: space-between; + overflow: hidden; + opacity: 0; + transform: translateY(20px); + pointer-events: none; + transition: opacity 0.3s ease, transform 0.3s ease; + z-index: 1000; +} + +.chatbox.active { + opacity: 1; + transform: translateY(0); + pointer-events: auto; +} + +.chat-container{ + width:100%; + height:70%; + overflow:auto; + min-height: 300px; + overflow-y: auto; + padding-right: 10px; +} + +.h1{ + font-size: 3vw; + text-align: center; + color: #fff; +} +.input-area{ + display: flex; + align-items: center; + padding: 10px; + background: rgba(255, 255, 255, 0.1); + border-top: 1px solid rgba(255, 255, 255, 0.2); + border-radius: 0 0 20px 20px; + gap: 10px; +} + +.arrow { + width: 45px; + height: 45px; + margin: 0px; + background: rgba(0, 0, 0, 0.6); + border: none; + border-radius: 50%; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + transition: background 0.3s ease; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); +} + +/* White arrow */ +.arrow img { + width: 20px; + height: 20px; + filter: brightness(0) invert(1); +} + +/* Prevent blue glow on hover and add subtle effect */ +.arrow:hover { + background: rgba(0, 0, 0, 0.8); +} + + +.prompt { + flex: 1; + border: none; + padding: 10px 15px; + border-radius: 20px; + outline: none; + font-size: 14px; + background: rgba(255, 255, 255, 0.2); + color: white; +} + +.user-chat-box { + background-color: rgba(0, 0, 0, 0.8); + color: white; + align-self: flex-end; + padding: 10px 15px; + margin: 8px; + max-width: 70%; + border-radius: 20px 20px 0 20px; + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); + margin-left: auto; + border-top-left-radius: 12px; + border-top-right-radius: 12px; + border-bottom-left-radius: 12px; +} +.ai-chat-box { + background-color: rgba(255, 255, 255, 0.85); + color: black; + align-self: flex-start; + padding: 10px 15px; + margin: 8px; + max-width: 70%; + border-radius: 20px 20px 20px 0; + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); + margin-right: auto; + border-top-left-radius: 12px; + border-top-right-radius: 12px; + border-bottom-right-radius: 12px; } \ No newline at end of file diff --git a/script.js b/script.js index b91d68c..be6a479 100644 --- a/script.js +++ b/script.js @@ -210,44 +210,6 @@ prompt.addEventListener("keypress", function(event) { }); - document.addEventListener("DOMContentLoaded", function () { - const chatbotIcon = document.querySelector('img.navbar[alt="chatbot-png"]'); - const chatbox = document.querySelector('.chatbox'); - - chatbotIcon.addEventListener("click", function () { - chatbox.classList.toggle("active"); - }); - }); -// using this the enter key works when i click on the prompt option - - document.addEventListener("DOMContentLoaded", function () { - const sendButton = document.getElementById("send-button"); - const userInput = document.getElementById("user-input"); - - // Handle click on send button - sendButton.addEventListener("click", function () { - sendMessage(); - }); - - // Handle 'Enter' key press - userInput.addEventListener("keypress", function (event) { - if (event.key === "Enter") { - event.preventDefault(); // Prevent form submission if inside a form - sendMessage(); - } - }); - - function sendMessage() { - const message = userInput.value.trim(); - if (message !== "") { - // Your existing logic to handle the message - console.log("User said:", message); - - // Clear input - userInput.value = ""; - } - } - }); \ No newline at end of file diff --git a/signin.html b/signin.html index 9396dd4..7172e63 100644 --- a/signin.html +++ b/signin.html @@ -7,8 +7,8 @@ + -
@@ -21,7 +21,7 @@

Login

- +
Forgot Password ? @@ -31,22 +31,20 @@

Login

-

Registration

@@ -61,24 +59,23 @@

Registration

- +
-


@@ -97,20 +94,19 @@

Welcome Back!



+ +
+
+
Talk to your own assistant...
+
+
+ + +
+
+ + - - - - - - - \ No newline at end of file diff --git a/style.css b/style.css index 802027f..a4b89cc 100644 --- a/style.css +++ b/style.css @@ -116,125 +116,7 @@ video { height:calc(100% - 280px); position:relative; } -.chatbox { - position: fixed; - bottom: 30px; - right: 30px; - width: 350px; - max-height: 500px; - background: rgba(255, 255, 255, 0.1); - border-radius: 20px; - backdrop-filter: blur(10px); - box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); - padding: 20px; - display: flex; - flex-direction: column; - justify-content: space-between; - overflow: hidden; - opacity: 0; - transform: translateY(20px); - pointer-events: none; - transition: opacity 0.3s ease, transform 0.3s ease; - z-index: 1000; -} - -.chatbox.active { - opacity: 1; - transform: translateY(0); - pointer-events: auto; -} -.chat-container{ - width:100%; - height:70%; - overflow:auto; - min-height: 300px; - overflow-y: auto; - padding-right: 10px; -} - -.h1{ - font-size: 3vw; - text-align: center; - color: #fff; -} -.input-area{ - display: flex; - align-items: center; - padding: 10px; - background: rgba(255, 255, 255, 0.1); - border-top: 1px solid rgba(255, 255, 255, 0.2); - border-radius: 0 0 20px 20px; - gap: 10px; -} - -.arrow { - width: 45px; - height: 45px; - margin: 0px; - background: rgba(0, 0, 0, 0.6); - border: none; - border-radius: 50%; - cursor: pointer; - display: flex; - align-items: center; - justify-content: center; - transition: background 0.3s ease; - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); -} - -/* White arrow */ -.arrow img { - width: 20px; - height: 20px; - filter: brightness(0) invert(1); -} - -/* Prevent blue glow on hover and add subtle effect */ -.arrow:hover { - background: rgba(0, 0, 0, 0.8); -} - - -.prompt { - flex: 1; - border: none; - padding: 10px 15px; - border-radius: 20px; - outline: none; - font-size: 14px; - background: rgba(255, 255, 255, 0.2); - color: white; -} - -.user-chat-box { - background-color: rgba(0, 0, 0, 0.8); - color: white; - align-self: flex-end; - padding: 10px 15px; - margin: 8px; - max-width: 70%; - border-radius: 20px 20px 0 20px; - box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); - margin-left: auto; - border-top-left-radius: 12px; - border-top-right-radius: 12px; - border-bottom-left-radius: 12px; -} -.ai-chat-box { - background-color: rgba(255, 255, 255, 0.85); - color: black; - align-self: flex-start; - padding: 10px 15px; - margin: 8px; - max-width: 70%; - border-radius: 20px 20px 20px 0; - box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); - margin-right: auto; - border-top-left-radius: 12px; - border-top-right-radius: 12px; - border-bottom-right-radius: 12px; -} /* page 2 */