<!DOCTYPE html>
<html>
<head>
    <title>Main Interface</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
	<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="output.css">
		<script src="https://js.stripe.com/v3/"></script>
		<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
		<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
		<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
		<!--script src="https://www.WebRTC-Experiment.com/RecordRTC.js"></script -->
		<script src="https://cdnjs.cloudflare.com/ajax/libs/RecordRTC/5.6.2/RecordRTC.min.js" integrity="sha512-IMLquIKoKQeQ+kYuec3BvLYjy3yF2nH/ojHPkXQnQTeGKRliZcVed19I6E0t+WBt+9uPuEba0t2iyZAVP8mdlw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
		 <meta name="google-signin-client_id" content="94258824193-ebepm432om80c9c0tihulptpqe20d54d.apps.googleusercontent.com">
		<script src="https://accounts.google.com/gsi/client" async defer></script>
		<link rel="stylesheet" href="custom.css">
		<link href="https://unpkg.com/intro.js@7.2.0/introjs.css" rel="stylesheet">
		<script src="https://unpkg.com/intro.js/intro.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/3.0.0/purify.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
		<script>
			const email = DOMPurify.sanitize(localStorage.getItem('email'));
			const email_verified = DOMPurify.sanitize(localStorage.getItem('email_verified'));
			if (!email_verified)
				window.location.href = '/login';
				
		function startIntro(el) {
		  introJs(el).setOptions({
			nextLabel: 'Next',
			prevLabel: 'Back',
			//skipLabel: 'Skip',
			doneLabel: 'Done',
			exitOnOverlayClick: true,
			exitOnEsc: true,
			showStepNumbers: false,
			showButtons: true,
			showBullets: true,
		  }).start();
		  
		}
		
		</script>
		<style>
			
			.topic-text {
				color: white;
				background-color: orange;
			}
			.subtopic-text {
				background-color: lightgray;
				color: red;
			}
			.content-lightgray {
				color:orange;
				font-style: italic;
				
			}
			
			.stable-words-row {
			  padding: 1px;
			  height: 40px;
			  line-height: 1.5;
			}
			
			.stable-words-row1 {
			  padding: 5px;
			  height: 40px;
			  line-height: 1;
			}
			
	
			#canvas	{
					position:fixed;
					top:0;
					left:0;
					border:1px solid green;
					display:none;
				}

				#screenVideo	{
					position:fixed;
					top:0;
					display:none;
				}	
				
		</style>
</head>
	<body class="bg-[#27272f]">
	

	<div id="question-container" style="display:none;" class="mt-16 flex left-1/2 -translate-x-1/2">
		<div id="questionDiv" class="w-[800px] text-black h-full text-[35px] font-normal"></div>
	</div>
	
	<div class="absolute mt-0 flex w-full h-full border-4 border-green-600" id="screenVideoDiv" style="display:none"> 
		<video id="screenVideo" controls autoplay style="z-index:99999" class="justify-center items-center w-full h-full"></video>
		<canvas id="canvas" style="width:300px;height:300px" class="justify-center items-center"></canvas>
	</div>
	
	
	<div class='flex flex-row space-x-2 absolute right-0 hide-below'>
		<button  id="surveryFlag" class="bg-white hover:bg-gray-200 text-black font-bold py-2 px-4 rounded-full mr-4 mt-4 flex flex-row z-50 bounce" style="display:none">
			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="red" class="w-6 h-6">
			  <path fill-rule="evenodd" d="M3 2.25a.75.75 0 01.75.75v.54l1.838-.46a9.75 9.75 0 016.725.738l.108.054a8.25 8.25 0 005.58.652l3.109-.732a.75.75 0 01.917.81 47.784 47.784 0 00.005 10.337.75.75 0 01-.574.812l-3.114.733a9.75 9.75 0 01-6.594-.77l-.108-.054a8.25 8.25 0 00-5.69-.625l-2.202.55V21a.75.75 0 01-1.5 0V3A.75.75 0 013 2.25z" clip-rule="evenodd" />
			</svg>
		</button>
		<button id="loggedInAsDiv" class="space-x-2 bg-white hover:bg-gray-200 text-black font-bold py-2 px-4 rounded-full mr-4 mt-4 flex flex-row z-50">
			<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6">
			  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"></path>
			</svg>
			<span id="loggedInAs" class="text-[10px] bg-black text-white rounded px-2 py-1"></span>
		</button>
		<a href="/manage" id="manageIconATag" class="hidden space-x-2 bg-white hover:bg-gray-200 text-black font-bold py-2 px-4 rounded-full mr-4 flex flex-row">
			<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-6 h-6 text-gray-500">
			  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 10h16M4 16h16M4 6h16M4 6a2 2 0 110-4h0a2 2 0 010 4zm0 10a2 2 0 110-4h0a2 2 0 010 4zm0 6a2 2 0 110-4h0a2 2 0 010 4zm12-6a2 2 0 110-4h0a2 2 0 010 4zm0 6a2 2 0 110-4h0a2 2 0 010 4zm0-12a2 2 0 110-4h0a2 2 0 010 4z"></path>
			</svg>
		</a>
	</div>
	
	
	<div style="display:none" class='flex flex-col  bg-[#27272f] text-[#c0c5c9] h-screen justify-center items-center' id="admin">
		
		<div id="overlay" class="overlay" style="display:none"></div>
		<div id="survey-container" class="survey-container" style="position:absolute; display:none" class="z-50 flex flex-col justify-center items-center">
			<div class="text-white text-[25px] ">How likely are you to recommend us to a friend or colleague?</div>
			<form id="surveyForm" class="mt-8 flex flex-col">
				<div class="rating-scale flex">
					<label class="flex-1 text-[29px]"><input class="recommendationScoreCls h-5 w-5" type="radio" name="recommendationScore" value="1"> 1</label>
					<label class="flex-1 text-[29px]"><input class="recommendationScoreCls h-5 w-5" type="radio" name="recommendationScore" value="2"> 2</label>
					<label class="flex-1 text-[29px]"><input class="recommendationScoreCls h-5 w-5" type="radio" name="recommendationScore" value="3"> 3</label>
					<label class="flex-1 text-[29px]"><input class="recommendationScoreCls h-5 w-5" type="radio" name="recommendationScore" value="4"> 4</label>
					<label class="flex-1 text-[29px]"><input class="recommendationScoreCls h-5 w-5" type="radio" name="recommendationScore" value="5"> 5</label>
					<label class="flex-1 text-[29px]"><input class="recommendationScoreCls h-5 w-5" type="radio" name="recommendationScore" value="6"> 6</label>
					<label class="flex-1 text-[29px]"><input class="recommendationScoreCls h-5 w-5" type="radio" name="recommendationScore" value="7"> 7</label>
					<label class="flex-1 text-[29px]"><input class="recommendationScoreCls h-5 w-5" type="radio" name="recommendationScore" value="8"> 8</label>
					<label class="flex-1 text-[29px]"><input class="recommendationScoreCls h-5 w-5" type="radio" name="recommendationScore" value="9"> 9</label>
					<label class="flex-1 text-[29px]"><input class="recommendationScoreCls h-5 w-5" type="radio" name="recommendationScore" value="10"> 10</label>
				</div>
				<div class="w-full items-center justify-center flex flex-col">
					<div id="surveySubmit" class="bg-orange-600 w-48  h-10 text-white mt-4 text-center p-2">Submit</div>
				</div>
				
			</form>

			<div id="thankYouMessage" style="display:none;">
				<p>Thank you for your feedback!</p>
			</div>
		</div>
		

		<div id="RoomIdentifier" class="createRoom flex flex-row mt-16 justify-center items-center space-x-2 w-full">
			<div id="createRoomContainer" class=" p-8">
				<h2 class="flex flex-col mb-4 items-center font-bold">HIGHLIGHT ONE BELOW:</h2>
				<div class="flex flex-row space-x-2 text-center items-center justify-center">
					<h2 id="buyHours" class="hover:cursor-pointer p-4 dark text-gray-600 flex flex-col items-center font-bold">BUY HOURS?</h2>
					<h2 id="buyMins" class="hover:cursor-pointer p-4 bg-gray-700 text-gray-600 flex flex-col items-center font-bold">BUY MINUTES?</h2>
				</div>
				<br>
				<form id="createRoomForm" class="flex flex-col items-center">
					<input type="number"  placeholder ="enter hours" id="hours" name="hours" required class="p-2 rounded-md bg-[#40404b] shadow-sm w-[200px] text-[#ccc] focus:outline-none">
					<div id="error-message" class="text-red-300 text-sm"></div>
					<br>
					<input type="text"  placeholder ="enter referral code" id="referralCode" name="referralCode" class="p-2 rounded-md bg-[#40404b] shadow-sm w-[200px] text-[#ccc] focus:outline-none">
					<div id="error-message1" class="text-red-300 text-sm"></div>
					<br>
					<button disabled id="checkout-button" class="bg-gray-600 text-black px-4 py-2 rounded w-48">Submit</button>
				</form>
				<div class="mt-16" id="referralContainer" style="display:none">
					<div class="flex items-center justify-center font-bold">Refer&nbsp;<span id="referralCodeValue" class="text-orange-600"></span>&nbsp;to your friends!!!</div>
					<div class="flex items-center justify-center font-bold">Every 5 buys by&nbsp;<span id="referralEndDate" class="text-orange-600"></span>&nbsp;= 1 hour free</div>
					<div class="flex items-center justify-center font-bold">Buyers get 20% discount</div>
				</div> 
			</div>
			
		</div>
		
		<div id="warning" class="absolute left-4 top-2 bg-red-500 text-white py-2 px-4 rounded-md" style="display:none">
			<!--p class="text-lg font-bold">Warning:</p -->
			<p></p>
			<p></p>
			<p class="text-xs"></p>
		</div>
				
		<div class="createRoom flex flex-row space-x-[2px] justify-around items-center mt-48">
			<button class="configurationButton bg-orange-600 text-white p-2 rounded w-48 text-center">Go to Configuration</button>
		</div>
		
		<div class='configuration configurationMain flex flex-col' style="display:none">
			
			<div style="display:none" class='mt-[-200px] support'>
				<div class="flex justify-center items-center space-x-4 space-y-4 mb-4 flex-col flex-1">
					<span class="text-lg font-bold">Share Access To:</span>				
					<input data-test="<b>Delegate</b> the admin control to someone during interview. It allows you to focus on interview only." data-test="13"  id="UserDelegatedTo" class="text-center text-white bg-gray-500 w-96 p-[6px] italic text-sm h-8 focus:outline-none" placeholder="enter EMAIL..."/>
					<button  type="submit" id="addUser" class="bg-orange-600 w-24  h-8 text-white">Add</button>
				</div>
				<div id="delegateDiv" style="display:none" class="flex flex-row justify-center items-center space-x-16">
					<label id="delegate" class="checkbox">
					  <span id="delegateEmail"></span>
					  <input id="allowDelegate" type="checkbox" checked>
					  <span class="checkmark"></span>
					</label>
				</div>
			</div>
			<div class='mt-4  space-y-4 self' id="config">
				<div class="flex justify-left justify-wrap space-x-4 mt-10">
					<span class='w-20'>Model :</span>
					<div class='premium feature model p-[12px] text-sm hover:cursor-pointer flex flex-col' data-sec="15">
						<span>Advanced</span><span>+15s</span>
					</div>
					<div class='premium feature model p-[12px] text-sm flex flex-col hover:cursor-pointer clicked' data-sec="0">
						<span>Standard</span><span>+0s</span>
					</div>
					<div></div>
					<div></div>
					<span class='text-sm w-20'>Audio :</span>
					<div class='audio text-sm p-[12px] hover:cursor-pointer flex flex-col items-center justify-center'>Self?</div>
					<div class='audio text-sm p-[12px] hover:cursor-pointer flex flex-col items-center justify-center' >Self with Vonage,Zoom?</div>
				</div>
				
				<div class="hidden flex flex-row justify-left justify-wrap space-x-4"><span class='font-bold w-20'>Session :</span><input id="session" class="text-center text-white bg-gray-500 w-64 p-[6px] italic text-sm h-8 focus:outline-none" placeholder="Eg. Python Dev with AWS"/><button  type="submit" id="addSession" class="bg-orange-600 w-48  h-8 text-white">Save Session?</button></div>
				<div class="flex justify-left justify-wrap space-x-4"  style="display:none">
					<span class='text-sm w-20'>Role :</span>
					<input id="role" class="text-center text-white bg-gray-500 w-[180px] p-[6px] italic text-sm h-8 focus:outline-none" placeholder="Eg. SQL Developer"/>
					<div></div>
					<div></div>
				</div>
				<div class="flex justify-left space-x-4 h-16">
					<span  class='text-sm w-20'>Resume :</span>
					<span class='premium feature flex h-16 items-center justify-center hover:cursor-pointer' data-sec="15">+15s</span>
					<textarea id="project" maxlength="10000" class="h-16 scrollbar  text-white bg-gray-500 w-[505px] p-[12px] italic text-sm focus:outline-none" placeholder="Paste resume here...(max characters: 10000 characters.)"></textarea>
				</div>
				<div class="hidden flex ml-24 justify-left space-x-4">				
					<input class="w-full text-white bg-gray-500 text-sm h-8 px-4" placeholder="Write your own prompt (Optional) "/>
				</div>
				<div class="flex justify-left space-x-4 h-16">
					<span  class='text-sm w-20'>JD :</span>
					<span class='premium feature flex h-16 items-center justify-center hover:cursor-pointer' data-sec="15">+15s</span>
					<textarea  id="jd" maxlength="10000" class=" h-16 scrollbar  text-white bg-gray-500 w-[505px] p-[12px] italic text-sm focus:outline-none" placeholder="Paste Job Description here...(max characters: 10000 characters.)"></textarea>
				</div>	
				<div class="flex justify-left space-x-4 h-16">
					<span  class='text-sm w-20'>Additional:</span>
					<span class='premium feature flex h-16 items-center justify-center hover:cursor-pointer' data-sec="15">+15s</span>
					<textarea id="additional" maxlength="5000" class="h-16 scrollbar text-white bg-gray-500 w-[505px] p-[12px] italic text-sm focus:outline-none" placeholder="Paste here additional information...(max characters: 5000 characters.)"></textarea>
				</div>
				<div class="flex justify-left space-x-4 h-10" id="topics" style="display:none">
					<span  class='text-sm w-20'>Topics :</span>
					<span class='onlyone1 dark hover:cursor-pointer'  id='a'>SQL Server</span>
					<span class='onlyone1 hover:cursor-pointer' id='b'>Oracle</span>
					<span class='onlyone1 hover:cursor-pointer mr-2' id='d'>Java</span>
				</div>
				<div class="flex justify-left space-x-4 h-10"  style="display:none">
					<span class="text-sm w-20"> &nbsp; </span>
					<input  id="topicName" maxlength="40" class="text-center text-white bg-gray-500 w-96 p-[6px] italic text-sm h-8 focus:outline-none" placeholder="Add TOPIC (Core) if not found? Eg. Python and AWS"/>
					<button  type="submit" id="addTopic" class="bg-orange-600 w-24  h-8 text-white">Add</button>
				</div>
				<div class="flex justify-left space-x-4 h-10"  style="display:none">
					<span class="text-sm w-20">Style :</span>
					<span class='onlyone2 hover:cursor-pointer' id='_1'>In bullet points, </span>
					<span  class='onlyone2 hover:cursor-pointer' id='_2'>with example, </span>
				</div>
			</div>
		</div>
		
		<div class="configuration flex flex-row space-x-[2px] justify-around items-center mt-8"style="display:none">
			<button class="createRoomButton  bg-orange-600 text-white rounded p-2 w-48 text-center">Go to Buy Hours</button>
			<button class="assistantButton bg-orange-600 text-white rounded p-2 w-48 text-center">Go to Assistant</button>
		</div>
		<div class='assistant mt-0 h-[calc(100vh-40px-42px-24px)] flex flex-col items-center' style="display:none">
		<!--div class='assistant mt-[-100px] h-[calc(100vh-16px-56px-40px-40px-42px)] flex flex-col items-center' style="display:none"-->
			<div id="displayMessage"></div>
			<div id="statements" class="txt-left"></div>
			<div id="assistantDisplay" class='scrollbar flex flex-col items-center  justify-center flex-1 w-[900px] md:w-[790px] sm:w-full' style="display:none">
				<div class='flex flex-row hidden'>
						<button class='bg-orange-600 w-24 mb-4 p-2  ml-4 text-white hidden' id="normal">Normal</button>
						<button  class='bg-orange-600 w-24 mb-4 p-2  ml-4 text-white hidden' id="mirror">Mirror</button>
						<button class='bg-orange-500 w-24 mb-4 p-2  ml-4 text-white tone' id="friendly" data-tone="friendly">Semi</button>
						<button class='bg-orange-500 w-24 mb-4 p-2  ml-4 text-white tone clicked' id="casual" data-tone='casual'>Casual</button>	
						<button  class='bg-orange-500 w-24 mb-4 p-2  ml-4 text-white tone' id="formal" data-tone="formal">Formal</button>
				</div>
				<div   id="responseHere" class= 'flex flex-1 flex-col w-full scrollbar relative'>
				
					<ul id="messages" class="scrollbar flex-1 hover:cursor-pointer">
						<li class='ml-[20%] listelem wordwrap'>Can you talk about your recent projects?</li>
						<li  class='ml-[20%] listelem wordwrap'></li>
					</ul>
				
					<div class="flex space-x-4">
					  <button class="SendPrompt flex-1 bg-gray-600 text-white py-2 px-4 rounded">Skip</button>
					  <button class="SendPrompt flex-1 bg-gray-600 text-white py-2 px-4 rounded">Evaluate</button>
					  <button class="CopyToClipboard flex-1 bg-gray-600 text-white py-2 px-4 rounded">Click to Copy</button>
					  <button class="ResetInterview flex-1 bg-gray-600 text-white py-2 px-4 rounded">Reset Interview</button>
					</div>
					
				</div>
				
				
				<div class="w-full hideWithMediaScreen space-y-2">
					<div  class='flex flex-row items-center space-x-[1px] h-[62px]'>
						<textarea  placeholder="Initiate transcription by pressing record btn or spacebar or, start typing. Press ESC on continuous listening mode or spacebar on on-demand mode or press enter for typed text for AI response" id="autocomplete" maxlength="500" class='bg-[#40404b] h-[60px] mt-[24px] p-2 scrollbar shadow-sm flex-1 text-[#ccc] focus:outline-none'></textarea>
						<div id="copy" style="display:none"></div>		
						<button  id="button" class="real-time-interface__button bg-orange-400 w-12 h-[60px] text-black flex items-center justify-center" data-state="Record">
						  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
							<path stroke-linecap="round" stroke-linejoin="round" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" fill="red" />
							<circle cx="12" cy="12" r="2.5" stroke-linecap="round" stroke-linejoin="round"  />
						  </svg>
						</button>
						<button id="speak" class="hidden bg-orange-400 w-12 h-[60px] text-black flex items-center justify-center" data-state="Speak">
						  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
							<path stroke-linecap="round" stroke-linejoin="round" d="M12 18.75a6 6 0 006-6v-1.5m-6 7.5a6 6 0 01-6-6v-1.5m6 7.5v3.75m-3.75 0h7.5M12 15.75a3 3 0 01-3-3V4.5a3 3 0 116 0v8.25a3 3 0 01-3 3z" />
						  </svg>
						</button>
						<button class="clear w-12 h-[60px] bg-orange-400 text-black flex items-center justify-center">
							<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
							  <path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99" />
							</svg>
						</button>
						<button class="hidden w-12 h-[60px] bg-orange-400 text-black flex items-center justify-center" id="arrow">
							<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6" id="downArrow">
							  <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 5.25l-7.5 7.5-7.5-7.5m15 6l-7.5 7.5-7.5-7.5" />
							</svg>
							<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 hidden" id="upArrow">
							  <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l7.5-7.5 7.5 7.5m-15 6l7.5-7.5 7.5 7.5" />
							</svg>
						</button>
					</div>
					<div id="editableDiv" style="height:100px" class="p-0 flex flex-start flex-wrap scrollbar hidden text-white" data-placeholder="Edit and submit: Double Click anywhere to get it activated (notice two orange walls). For editing a word, click on the word and it will be replaced shortly based on context. If the replacement isn't good and the word is hilighted blue, you can type and correct. Press ESC or Spacebar to submit."></div>
					<div class='flex justify-left items-center space-x-[1px] hidden'>
						<input oninput="onInputChange(event)" type="text" placeholder="Start typing for uploaded notes ..." id="notekeys" class='bg-[#40404b] scrollbar shadow-sm text-[#ccc] flex-1 px-[4px] focus:outline-none' />
						<button class="clear1  w-12 h-[50px] bg-orange-400 text-black flex items-center justify-center">
							<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
							  <path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99" />
							</svg>
						</button>
					</div>
					<div class="notekeys-suggestions scrollbar absolute z-50" id="notekeys-suggestions"></div>					
				</div>
			</div>

			
			<div id="uploadFile" class="flex flex-1 flex-col w-screen h-screen scrollbar" style="display:none">
				<div class='flex flex-1 flex-row mt-16 items-center justify-center  p-2 scrollbar overflow-auto text-xs'>
					<div id="input" contenteditable="true" class="h-[100%] whitespace-nowrap overflow-x-auto overflow-y-auto w-1/2 border-2 border-gray-600 bg-[#545c66] p-2 scrollbar box-border">
						<div class="flex flex-col">
							<span>Do not paste text here. Upload text from txt file instead</span>
							<span>&nbsp;</span>
							<span>Instructions below-</span>
							<span>Topic should followed by colon and no space after:</span>
							<span>content</span>
							<span>Sub Topic should followed by hash and no space after#</span>
							<span>content</span>
							<span>&nbsp;</span>
							<span>Java Example </span>
							<span>Tell me about yourself:</span>
							<span>I have a professional experience of 5+ years...</span>
							<span>SOLID Principles#</span>
							<span>S in SOLID stands for Single Responsibility Principle...</span>
						</div>
					</div>
					<div id="output"                       class="h-[100%] w-1/2 border-2 border-gray-600 bg-[#545c66] p-2 scrollbar box-border">The highlighted text will be here</div>
				</div>
				<div class="flex flex-row space-x-4 flex justify-center items-center "> 
					<div class="relative w-64">
					  <input type="file" class="absolute w-full h-full opacity-0 cursor-pointer" id="fileInput">
					  <div class="flex items-center justify-center w-full px-4 py-2 border rounded-md border-gray-600 bg-gray-600 hover:bg-gray-700">
						<span class="mr-2 text-gray-200">Upload Notes</span>
					  </div>
					</div>
					
					<div class="relative w-64">
						<button id="saveTags" class="flex items-center justify-center w-full px-4  space-x-2 py-2 border rounded-md border-gray-600 bg-gray-600 hover:bg-gray-700 text-gray-200">
							<span>Save Tags</span>
							<span class="text-orange-600 font-bold">+15s</span>
						</button>
					</div>
				</div>			
			</div>
			
			
		</div>
		<div class="relative w-64 assistant hidden" style="display:none">
			<button id="switchScreen" class="flex items-center justify-center w-full px-4 py-2 border rounded-md border-gray-600 bg-gray-600 hover:bg-gray-700 text-gray-200">
				Switch Screen
			</button>
		</div>
		<div class="assistant flex flex-row space-x-[2px] justify-around items-center" style="display:none">
			<button class="createRoomButton  bg-orange-600 text-white rounded p-2 w-48 text-center">Go to Buy Hours</button>
			<button class="configurationButton bg-orange-600 text-white rounded p-2 w-48 text-center">Go to Configuration</button>
			
		</div>
				
		<div id="dialogBox" class="fixed z-10 inset-0 overflow-y-auto hidden" aria-labelledby="modal-title" role="dialog" aria-modal="true">
		  <div class="flex items-start justify-center min-h-screen">
			<div class="bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
			  <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
				<div class="sm:flex sm:items-start">
				  <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
					<h3 class="text-lg leading-6 font-medium text-gray-900" id="modal-title">
					  Confirm Action
					</h3>
					<div class="mt-2">
					  <p id="information" class="text-sm text-gray-500">
						Are you sure you want to join session again?
					  </p>
					</div>
				  </div>
				</div>
			  </div>
			  <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
				<button id="yesButton" type="button" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-green-600 text-base font-medium text-white hover:bg-green-700 focus:outline-none sm:ml-3 sm:w-auto sm:text-sm">
				  Yes
				</button>
				<button id="noButton" type="button" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
				  No
				</button>
			  </div>
			</div>
		  </div>
		</div>			
	</div>
		
	<div class='flex flex-col  bg-[#27272f] text-[#c0c5c9] h-[calc(100vh-8px)] justify-center items-center' id="user" style="display:none">
		<div id="userReminderContainer" style="position:absolute"class="absolute m-0 z-50">
			<div class="quote text-white font-bold text-lg"><b>REMINDER!!!</b></div>
			<div class="reminder">Remember to use <b class="text-white">time buying phrases</b></div>
			<div class="reminder"><b class="text-white">TAKE TIME</b> to remember <b class="text-white">3-4 words</b> so you can look away</div>
			<div class="reminder">Look<b class="text-white"> up, left or right</b> (pick one) as if you are thinking</div>
			<div class="reminder">Add <b class="text-white">filler words</b> to make reading imperfect</div>
			<button class='bg-orange-600 w-24 mb-4 p-2  ml-4 text-white' onclick="hideOverlay()">Hide</button>
		</div>
		<div class='assistant h-full flex flex-col items-center'>
				<div id="displayMessage1"></div>
				<div id="statements1" class="text-left"></div>
				<div id="assistantDisplay1" class='scrollbar flex flex-col items-center  justify-center flex-1 w-[900px] md:w-[790px] sm:w-full'>
					<div class='flex flex-row hidden'>
							<button class='bg-orange-600 w-24 mb-4 p-2  ml-4 text-white' id="normal1">Normal</button>
							<button  class='bg-orange-600 w-24 mb-4 p-2  ml-4 text-white' id="mirror1">Mirror</button>
					</div>
					<div id="responseHere1" class= 'flex flex-1 w-full scrollbar'>
						<div id="readingPane1" class="absolute top-0 left-0 w-full h-[150px] bg-[#27272f] bg-opacity-50"></div>
						<ul id="messages1" class="scrollbar flex-1">
							<li class='ml-[20%] listelem wordwrap'>Response will be here</li>
							<li class='ml-[20%] timebuying wordwrap'>*Can you repeat the question, please?</li>
							<li class='ml-[20%] timebuying wordwrap'>*Let me make sure I give you the right answer...Just a second.</li>
							<li class='ml-[20%] timebuying wordwrap'>*Let me gather my thoughts on that.</li>
							<li class='ml-[20%] timebuying wordwrap'>*I appreciate you bringing that up. Let me think for a moment.</li>
							<li class='ml-[20%] timebuying wordwrap'>*I've encountered a few situations related to that. Let me recall one.</li>
						</ul>
						<ul id="notesResponse1" class="scrollbar flex-1" style="display:none">
							<li class='ml-[20%] notes wordwrap'>Notes will be here</li>
						</ul>
							
					</div>
					<button class='bg-gray-600 w-full p-2 text-black opacity-40 h-12' id="toggleNotes1">AI</button>
					
				</div>
	
			</div>
			
			
	</div>	
	<div class="notekeys-suggestions scrollbar" id="notekeys-suggestions" style="display:none"></div>
		
		<script src="/socket.io/socket.io.js"></script>
		<script src="./js/1-script.min.js"></script>
		<script src="./js/2-dealwithsocket.min.js"></script>
		<script src="./js/3-speechtotext.min.js"></script>
		<script src="./js/4-userSpeechToText.min.js"></script>
		<script>
		const quotes = [
			{ quote: "Practice is the heartbeat of talent.", author: "Beyoncé" },
			{ quote: "Innovation is just collective practice towards perfection.", author: "Elon Musk" },
			{ quote: "The art of practice is a journey towards endless improvement.", author: "Yo-Yo Ma" },
			{ quote: "Every practice session writes a page in the story of success.", author: "Serena Williams" },
			{ quote: "Dedication to practice is the foundation of true creativity.", author: "Lady Gaga" },
			{ quote: "My success is the outcome of my practice; a symphony of hard work and dedication.", author: "Ludwig van Beethoven" },
			{ quote: "The road to excellence is paved with trials and practices.", author: "Cristiano Ronaldo" },
			{ quote: "In the theater of life, practice plays the leading role.", author: "Meryl Streep" },
			{ quote: "Through practice, we turn barriers into bridges.", author: "Usain Bolt" },
			{ quote: "The script of greatness is written through relentless practice.", author: "Leonardo DiCaprio" },
			{ quote: "Practice transforms potential into reality.", author: "J.K. Rowling" },
			{ quote: "It's not the hours you put in, but what you put in the hours of practice.", author: "Michael Phelps" },
			{ quote: "In practice lies the power to transcend limits.", author: "Simone Biles" },
			{ quote: "Practice is the secret ingredient behind every masterpiece.", author: "Pablo Picasso" },
			{ quote: "Great ideas bloom from the seeds of diligent practice.", author: "Steve Jobs" },
			{ quote: "The best performances are crafted in the quiet of practice.", author: "Freddie Mercury" },
			{ quote: "Practice builds the bridge between aspiration and achievement.", author: "Oprah Winfrey" },
			{ quote: "Every practice is a step towards perfection.", author: "Virat Kohli" },
			{ quote: "In the palette of life, practice paints the brightest colors.", author: "Frida Kahlo" },
			{ quote: "Mastering any art requires the ritual of practice.", author: "Stephen King" },
			{ quote: "Every stroke of practice paints a brighter future.", author: "Vincent van Gogh" },
			{ quote: "The rhythm of success is best tuned through practice.", author: "Bob Marley" },
			{ quote: "In the laboratory of life, practice is the most crucial experiment.", author: "Marie Curie" },
			{ quote: "Practice is the whisper of progress, echoing through time.", author: "Winston Churchill" },
			{ quote: "With each practice, we sculpt our destiny.", author: "Michelangelo" },
			{ quote: "The secret of your future is hidden in your daily practice.", author: "Muhammad Ali" },
			{ quote: "Practice is the alchemy that turns goals into achievements.", author: "Albert Einstein" },
			{ quote: "The dance of success is choreographed in daily practice.", author: "Mikhail Baryshnikov" },
			{ quote: "In the canvas of life, each practice is a brushstroke of genius.", author: "Leonardo da Vinci" },
			{ quote: "Practice is the composer of the symphony called 'excellence'.", author: "Ludwig van Beethoven" },
			{ quote: "The marathon of mastery begins with the steps of daily practice.", author: "Kipchoge Keino" },
			{ quote: "In the pursuit of greatness, practice is the most faithful companion.", author: "Cleopatra" },
			{ quote: "Practice molds talent like clay into a masterpiece.", author: "Auguste Rodin" },
			{ quote: "Each day of practice is a page in the novel of success.", author: "Jane Austen" },
			{ quote: "In the symphony of life, practice is the most harmonious note.", author: "Johann Sebastian Bach" },
			{ quote: "The fabric of success is woven with threads of practice.", author: "Coco Chanel" },
			{ quote: "Practice is the echo of aspiration in the halls of effort.", author: "Nelson Mandela" },
			{ quote: "A day without practice is a day without progress.", author: "Stephen Hawking" },
			{ quote: "In the currency of success, practice is the most valuable coin.", author: "Warren Buffett" },
			{ quote: "The magic of new beginnings starts with the practice of today.", author: "J.R.R. Tolkien" }
		];

        function displayRandomQuote() {
            const randomIndex = Math.floor(Math.random() * quotes.length);
            document.querySelector(".quote").innerText = `"${quotes[randomIndex].quote}"`;
            document.querySelector(".author").innerText = `- ${quotes[randomIndex].author}`;
			let userEl = document.querySelector("#user");
			let isUser = DOMPurify.sanitize(localStorage.getItem('isUser'));
        }

        
		let readingPaneEl = document.querySelector("#readingPane1");
		readingPaneEl.style.display = 'none';
		setTimeout(function(){
			let userEl = document.querySelector("#user");
			let adminEl = document.querySelector("#admin");
			let  isUser = DOMPurify.sanitize(localStorage.getItem('isUser'));
			let warningEl = document.querySelector("#warning");
			warningEl.style.display = '';
			if(isUser == 'true'){
				userEl.style.display = '';
				adminEl.style.display = 'none';
			}
			else{
				userEl.style.display = 'none';
				adminEl.style.display = '';
			}
			readingPaneEl.style.display = '';
		}, 3000);
		
		
		//window.onload = displayRandomQuote;

			function hideOverlay() {
				document.getElementById('userReminderContainer').style.display = 'none';
			}


		
		
		document.getElementById("surveryFlag").addEventListener("click", function(event){
			
			document.getElementById("survey-container").style.display = '';
			document.getElementById("overlay").style.display = '';
		});
		
        


		</script>
	</body>
</html>