Scribd
Upload
53 views13 pages

Indexhtml

The document outlines the structure and styling of a TeleHealth System web application using HTML, CSS, and JavaScript. It features a user interface with a chat history sidebar, a modern search box for medical queries, and voice recognition capabilities. The application is designed to be responsive and includes animations for a better user experience.

Uploaded by

koolavarghese6
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
53 views13 pages

Indexhtml

The document outlines the structure and styling of a TeleHealth System web application using HTML, CSS, and JavaScript. It features a user interface with a chat history sidebar, a modern search box for medical queries, and voice recognition capabilities. The application is designed to be responsive and includes animations for a better user experience.

Uploaded by

koolavarghese6
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd

<!

DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TeleHealth System</title>
<script src="[Link]
<link rel="stylesheet" href="[Link]
awesome/5.15.3/css/[Link]">
<link href="[Link]
family=Chakra+Petch:wght@700&display=swap" rel="stylesheet">
<style>
@keyframes wipe {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}

#input-area {
margin-top: 20px;
width: 100%;
max-width: 1024px;
}

.animated-text {
font-weight: 700;
position: relative;
display: inline-block;
overflow: hidden;
white-space: nowrap;
font-size: 36px;
color: #000;
animation: typing 2s steps(30, end) forwards;
}

#response-text {
font-size: 18px;
color: #000;
line-height: 1.5;
white-space: normal;
overflow-wrap: break-word;
}

#response-text a {
color: #ff0000;
text-decoration: none;
}

#response-text a:hover {
text-decoration: underline;
}

@keyframes typing {
from {
width: 0;
}
to {
width: 100%;
}
}

.logo-container {
display: flex;
align-items: center;
margin-bottom: 20px;
}

@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}

.fade-in {
animation: fadeIn 2s ease forwards;
}

.response-container {
position: fixed;
bottom: 150px;
left: 50%;
transform: translateX(-50%);
width: 90%;
max-width: 1024px;
max-height: 50vh; /* Changed to 50vh */
overflow-y: auto;
background-color: #fff;
border: 1px solid #000;
border-radius: 8px;
padding: 20px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
z-index: 1000;
display: none;
}

#user-query-box {
position: absolute;
left: 78%;
top: 100px;
transform: translateX(-50%);
background-color: #fff;
border: 2px solid black;
max-width: 300px;
padding: 10px;
border-radius: 8px;
display: none;
}

.response-container h2 {
font-size: 24px;
margin-bottom: 10px;
color: #000;
}

.response-container p {
font-size: 18px;
line-height: 1.5;
word-wrap: break-word;
color: #000;
}

.response-container::-webkit-scrollbar {
width: 8px;
}

.response-container::-webkit-scrollbar-thumb {
background-color: #ff0000;
border-radius: 4px;
}

.response-container::-webkit-scrollbar-track {
background-color: #f1f1f1;
}

@media (max-width: 768px) {


.animated-text {
font-size: 24px;
}

#input-area {
flex-direction: column;
}

#user-query-box {
left: 10%;
right: 10%;
}

.response-container {
max-height: 45vh; /* Adjusted from 50vh */
bottom: 130px;
}
}

@media (max-width: 480px) {


.animated-text {
font-size: 20px;
}

#input-area {
padding: 10px;
}

#response-text {
font-size: 16px;
}

.response-container {
max-height: 40vh; /* Adjusted from 45vh */
padding: 15px;
}
}

.form-container {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: white;
border: 1px solid #000;
border-radius: 8px;
padding: 20px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
z-index: 1001;
}

#user-info {
display: none;
position: absolute;
top: 10px;
right: 10px;
text-align: right;
}

#user-info p {
margin: 5px 0;
color: #000;
}

#sidebar {
width: 300px;
background-color: #000;
padding: 20px;
height: 100vh;
position: fixed;
top: 0;
right: -300px;
overflow-y: auto;
transition: transform 0.3s ease;
z-index: 1002;
box-shadow: -2px 0 10px rgba(0, 0, 0, 0.3);
}

#[Link] {
transform: translateX(-300px);
}

#sidebar-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
padding-bottom: 10px;
}

#sidebar h3 {
margin: 0;
font-size: 1.2rem;
color: #fff;
}

#close-sidebar {
background: none;
border: none;
font-size: 1.5rem;
cursor: pointer;
color: #fff;
}

.query-item {
padding: 10px;
margin-bottom: 10px;
background-color: #222;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
cursor: pointer;
transition: all 0.2s;
color: #fff;
}

.query-item:hover {
background-color: #ff0000;
transform: translateX(-5px);
}

.query-text {
font-weight: bold;
margin-bottom: 5px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.query-date {
font-size: 0.8rem;
color: #ccc;
}

#menu-toggle {
position: fixed;
top: 20px;
right: 20px;
z-index: 1001;
background: #ff0000;
color: white;
border: none;
border-radius: 50%;
width: 45px;
height: 45px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

#menu-toggle i {
font-size: 1.2rem;
}

@keyframes dot-blink {
0%, 20% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}

.dot-container {
display: flex;
align-items: center;
}

.dot {
width: 10px;
height: 10px;
margin: 0 2px;
border-radius: 50%;
background-color: #ff0000;
animation: dot-blink 1.5s infinite;
}

.dot:nth-child(1) {
animation-delay: 0s;
}

.dot:nth-child(2) {
animation-delay: 0.3s;
}

.dot:nth-child(3) {
animation-delay: 0.6s;
}

.active {
color: #ff0000;
}

/* New styles for voice recognition */


#[Link] {
color: #ff0000;
animation: pulse 1.5s infinite;
}

@keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}

/* Modern search box styles */


#user-input::placeholder {
color: #666;
opacity: 1;
}

#user-input:-ms-input-placeholder {
color: #666;
}

#user-input::-ms-input-placeholder {
color: #666;
}

/* Updated input area styles */


#user-input {
color: #000;
background-color: #fff;
border-radius: 50px;
padding-left: 50px;
padding-right: 20px;
}

/* Updated button styles */


#send-icon {
background-color: #ff0000;
}

#send-icon:hover {
background-color: #cc0000;
}

#microphone-icon:hover {
color: #ff0000;
}

body {
background-color: #fff;
color: #000;
}

/* Updated header styles */


header {
background-color: #fff;
}

.search-icon {
position: absolute;
left: 15px;
top: 50%;
transform: translateY(-50%);
color: #666;
}

/* Style for listening text in input */


.listening-text {
color: #ff0000 !important;
font-style: italic;
}
</style>
</head>

<body class="bg-white flex flex-col items-center justify-between min-h-screen">


<button id="menu-toggle" class="menu-toggle">
<i class="fas fa-history"></i>
</button>

<div id="sidebar">
<div id="sidebar-header">
<h3>Chat History</h3>
<button id="close-sidebar"><i class="fas fa-times"></i></button>
</div>
<div id="query-history"></div>
</div>

<header class="w-full flex justify-between items-center p-4 relative"


id="header">
<div class="logo-container">
<a href="[Link]
<img src="[Link]
[Link]" alt="Screenshot-2025-03-26-193135" style="width: 250px; height: 70px;"
class="fade-in">
</a>
</div>
</header>
<div class="flex-grow flex items-center justify-center">
<div class="animated-text" id="animated-text">AI Tele-Health System</div>
</div>

<main class="flex flex-col items-center w-full">


<!-- Modern ChatGPT-like search box -->
<div class="w-full max-w-5xl relative mb-10" id="input-area">
<div class="relative flex items-center bg-white shadow-sm rounded-full
border border-black hover:border-red-600 focus-within:border-red-600 focus-
within:ring-1 focus-within:ring-red-600 transition-all duration-200">
<i class="fas fa-search search-icon"></i>
<input type="text" id="user-input" class="w-full py-4 px-5 rounded-
full outline-none text-lg bg-transparent placeholder-gray-600" placeholder="Ask any
medical question...">
<div class="flex items-center pr-3 space-x-2">
<button id="microphone-icon" class="p-2 rounded-full hover:bg-
gray-100 transition-colors duration-200">
<i class="fas fa-microphone text-gray-600 hover:text-red-
600"></i>
</button>
<button id="send-icon" class="p-2 rounded-full bg-red-600 text-
white hover:bg-red-700 transition-colors duration-200 disabled:opacity-50
disabled:cursor-not-allowed">
<i class="fas fa-paper-plane"></i>
</button>
</div>
</div>
</div>
<div id="response-container" class="response-container w-full max-w-5xl">
<h2 class="text-xl font-bold mb-4">Response:</h2>
<div id="response-text" class="dot-container">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
</div>

<div id="user-query-box" class="user-query-box">


<h2 class="font-bold">Your Query:</h2>
<p id="user-query-text"></p>
</div>

<!-- User Info Display -->


<div id="user-info" class="text-center" style="display: none;">
<p id="user-name" class="font-bold"></p>
<p id="user-phone"></p>
</div>
</main>

<script>
let selectedLanguage = 'en';
let queryHistory = [Link]([Link]('queryHistory')) || [];
let recognition = null;

// Initialize sidebar
[Link]('DOMContentLoaded', function() {
const menuToggle = [Link]('menu-toggle');
const sidebar = [Link]('sidebar');
const closeSidebar = [Link]('close-sidebar');

[Link]('click', function() {
[Link]('active');
});

[Link]('click', function() {
[Link]('active');
});

// Load previous queries


renderQueryHistory();

// Initialize input events


const userInput = [Link]('user-input');

[Link]('keydown', function(event) {
if ([Link] === 'Enter') {
[Link]();
sendMessage();
}
});
});

function renderQueryHistory() {
const queryHistoryContainer = [Link]('query-history');
[Link] = '';

if ([Link] === 0) {
[Link] = '<p class="text-white">No
previous queries</p>';
return;
}

[Link]((query, index) => {


const queryItem = [Link]('div');
[Link] = 'query-item';
[Link] = `
<div class="query-text">${[Link]}</div>
<div class="query-date">${new
Date([Link]).toLocaleString()}</div>
`;
[Link]('click', function() {
loadQuery(index);
});
[Link](queryItem);
});
}

function loadQuery(index) {
const query = queryHistory[index];
[Link]('user-input').value = [Link];
[Link]('response-text').innerHTML = [Link];
[Link]('response-container').[Link] = 'block';
[Link]('sidebar').[Link]('active');
}

function saveQuery(text, response) {


[Link]({
text: text,
response: response,
timestamp: new Date().getTime()
});

if ([Link] > 20) {


queryHistory = [Link](0, 20);
}

[Link]('queryHistory', [Link](queryHistory));
renderQueryHistory();
}

[Link]('send-icon').addEventListener('click',
sendMessage);
[Link]('microphone-icon').addEventListener('click',
toggleVoiceRecognition);

function toggleVoiceRecognition() {
if (recognition && [Link]) {
stopVoiceRecognition();
} else {
startVoiceRecognition();
}
}

function startVoiceRecognition() {
if (!('webkitSpeechRecognition' in window) && !('SpeechRecognition' in
window)) {
alert('Speech recognition is not supported in your browser. Please
use Chrome or Edge.');
return;
}

[Link]('microphone-icon').[Link]('active');

// Clear the input and show "Listening..." text in red


const userInput = [Link]('user-input');
[Link] = "Listening...";
[Link]('listening-text');
[Link] = "";

recognition = new ([Link] ||


[Link])();
[Link] = selectedLanguage;
[Link] = true;
[Link] = 1;
[Link] = true;

[Link] = () => {
[Link]('Speech recognition started');
};

[Link] = (event) => {


const transcript = [Link][0][0].transcript;
[Link]('user-input').value = transcript;
[Link]('user-input').[Link]('listening-
text');

if ([Link][0].isFinal) {
stopVoiceRecognition();
sendMessage();
}
};

[Link] = (event) => {


[Link]('Speech recognition error:', [Link]);
stopVoiceRecognition();

if ([Link] === 'no-speech') {


alert('No speech was detected. Please try again.');
} else {
alert('Speech recognition error: ' + [Link]);
}
};

[Link] = () => {
[Link]('Speech recognition ended');
if ([Link]) {
[Link]();
}
};

[Link]();
}

function stopVoiceRecognition() {
if (recognition) {
[Link] = false;
[Link]();
[Link]('microphone-
icon').[Link]('active');

// Restore the placeholder if input is empty


const userInput = [Link]('user-input');
[Link]('listening-text');
if ([Link] === "Listening..." || [Link]()
=== "") {
[Link] = "";
[Link] = "Ask any medical question...";
}
}
}

async function sendMessage() {


const userInput = [Link]('user-input');
const userInputText = [Link];

if ([Link]() === '' || userInputText === "Listening...")


return;

[Link]('Message sent:', userInputText);


[Link] = '';
[Link]('send-icon').disabled = true;

[Link]('animated-text').[Link] = 'none';
[Link]('user-query-text').innerText = userInputText;
[Link]('user-query-box').[Link] = 'block';

[Link]('response-text').innerHTML = `
<div class="dot-container">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
`;
[Link]('response-container').[Link] = 'block';

try {
const response = await fetch('/chat', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: [Link]({ messages: userInputText }),
});

const data = await [Link]();


const botResponse = [Link](/[*#]+/g, '');

[Link]('response-text').innerHTML = botResponse;
saveQuery(userInputText, botResponse);

} catch (error) {
[Link]('Error:', error);
[Link]('response-text').innerHTML = 'Sorry, there
was an error processing your request. Please try again.';
}

[Link]('response-container').[Link] = '120px';
[Link]('send-icon').disabled = false;
}

function handleFileUpload(event) {
const file = [Link][0];
if (file) {
const formData = new FormData();
[Link]('file', file);

fetch('/upload', {
method: 'POST',
body: formData,
})
.then(response => [Link]())
.then(data => {
[Link]('File uploaded successfully:', data);
})
.catch(error => [Link]('Error uploading file:', error));
}
}
</script>
</body>
</html>

You might also like