Skip to content

Commit f38941e

Browse files
aimtyaemaimtyaem
authored
Create features.html
1 parent dd57985 commit f38941e

File tree

1 file changed

+362
-0
lines changed

1 file changed

+362
-0
lines changed

‎features.html‎

Lines changed: 362 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,362 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>QuantumMind AI - VR Training Module</title>
7+
<style>
8+
body {
9+
font-family: 'Roboto', sans-serif;
10+
background: #0a0f24;
11+
color: #fff;
12+
margin: 0;
13+
padding: 0;
14+
}
15+
16+
/* Header with Horizontal Menu */
17+
header {
18+
background: #1a1f35;
19+
padding: 10px 20px;
20+
display: flex;
21+
justify-content: space-between;
22+
align-items: center;
23+
}
24+
25+
header nav ul {
26+
list-style: none;
27+
margin: 0;
28+
padding: 0;
29+
display: flex;
30+
gap: 20px;
31+
}
32+
33+
header nav ul li a {
34+
color: #fff;
35+
text-decoration: none;
36+
font-weight: bold;
37+
}
38+
39+
header nav ul li a:hover {
40+
color: #6c5ce7;
41+
}
42+
43+
.container {
44+
max-width: 1200px;
45+
margin: 20px auto;
46+
display: flex;
47+
gap: 30px;
48+
}
49+
50+
.vr-scene {
51+
flex: 2;
52+
background: #1a1f35;
53+
border-radius: 10px;
54+
padding: 20px;
55+
min-height: 600px;
56+
position: relative;
57+
overflow: hidden;
58+
}
59+
60+
.dashboard {
61+
flex: 1;
62+
background: #1a1f35;
63+
border-radius: 10px;
64+
padding: 20px;
65+
}
66+
67+
.stress-indicator {
68+
background: #2a2f45;
69+
padding: 20px;
70+
border-radius: 8px;
71+
margin-bottom: 20px;
72+
}
73+
74+
.progress-bar {
75+
height: 30px;
76+
background: #334;
77+
border-radius: 15px;
78+
overflow: hidden;
79+
margin: 10px 0;
80+
}
81+
82+
.progress {
83+
height: 100%;
84+
width: 50%;
85+
background: linear-gradient(90deg, #6c5ce7, #48dbfb);
86+
transition: width 0.3s ease;
87+
}
88+
89+
.chatbot {
90+
background: #2a2f45;
91+
padding: 15px;
92+
border-radius: 8px;
93+
margin-top: 20px;
94+
min-height: 150px;
95+
}
96+
97+
button {
98+
background: #6c5ce7;
99+
color: white;
100+
border: none;
101+
padding: 10px 20px;
102+
border-radius: 5px;
103+
cursor: pointer;
104+
margin: 5px;
105+
}
106+
107+
button:hover {
108+
background: #8577ef;
109+
}
110+
111+
/* AR Overlay Section */
112+
.ar-overlay {
113+
margin-top: 20px;
114+
padding: 20px;
115+
background: #2a2f45;
116+
border-radius: 8px;
117+
text-align: center;
118+
}
119+
120+
.ar-overlay img {
121+
width: 100%;
122+
max-width: 300px;
123+
border-radius: 8px;
124+
}
125+
126+
.ar-overlay p {
127+
margin-top: 10px;
128+
font-size: 1.1em;
129+
}
130+
131+
/* Chat System */
132+
.chat-system {
133+
margin-top: 20px;
134+
padding: 20px;
135+
background: #2a2f45;
136+
border-radius: 8px;
137+
}
138+
139+
.chat-history {
140+
height: 200px;
141+
overflow-y: auto;
142+
border: 1px solid #444;
143+
padding: 10px;
144+
margin-bottom: 10px;
145+
background: #1a1f35;
146+
}
147+
148+
.message {
149+
margin-bottom: 10px;
150+
padding: 5px;
151+
border-radius: 5px;
152+
}
153+
154+
.user-message {
155+
background: #6c5ce7;
156+
text-align: right;
157+
}
158+
159+
.bot-message {
160+
background: #48dbfb;
161+
text-align: left;
162+
}
163+
164+
.chat-input {
165+
display: flex;
166+
gap: 10px;
167+
}
168+
169+
.chat-input input {
170+
flex: 1;
171+
padding: 10px;
172+
border-radius: 5px;
173+
border: none;
174+
background: #1a1f35;
175+
color: #fff;
176+
}
177+
178+
.chat-input button {
179+
padding: 10px 20px;
180+
}
181+
</style>
182+
</head>
183+
<body>
184+
<!-- Header with Horizontal Menu -->
185+
<header>
186+
<img src="img/Logo.png" alt="QuantumMind AI Logo" width="150">
187+
<nav>
188+
<ul>
189+
<li><a href="#home">Home</a></li>
190+
<li><a href="#about">About</a></li>
191+
<li><a href="#vr-training">VR Training</a></li>
192+
<li><a href="#ar-overlay">AR Overlay</a></li>
193+
<li><a href="#contact">Contact</a></li>
194+
</ul>
195+
</nav>
196+
</header>
197+
198+
<div class="container">
199+
<!-- VR Scene Container -->
200+
<div class="vr-scene" id="vrContainer">
201+
<h2>Oxygen Leak Emergency</h2>
202+
<div id="sceneEffects">
203+
<!-- Visual effects would be implemented in actual VR engine -->
204+
<img src="oxygen_leak_scene.jpg" alt="VR Scene" style="width:100%">
205+
</div>
206+
<div class="interactive-elements">
207+
<button onclick="performBreathingExercise()">Start Breathing Exercise</button>
208+
<button onclick="findOxygenTank()">Locate Oxygen Tank</button>
209+
</div>
210+
</div>
211+
212+
<!-- Stress Dashboard -->
213+
<div class="dashboard">
214+
<div class="stress-indicator">
215+
<h3>Stress Level</h3>
216+
<div class="progress-bar">
217+
<div class="progress" id="stressProgress" style="width: 30%"></div>
218+
</div>
219+
<div id="stressValue">30%</div>
220+
</div>
221+
222+
<div class="heart-rate">
223+
<h3>Heart Rate</h3>
224+
<div id="bpm">82 BPM</div>
225+
</div>
226+
227+
<div class="chatbot">
228+
<h4>Virtual Companion</h4>
229+
<div id="chatMessages">
230+
<p>> System Ready</p>
231+
</div>
232+
</div>
233+
</div>
234+
</div>
235+
236+
<!-- AR Overlay Section -->
237+
<div class="ar-overlay" id="ar-overlay">
238+
<h2>AR Breathing Exercise</h2>
239+
<img src="ar_breathing.gif" alt="AR Breathing Exercise">
240+
<p>Follow the AR overlay to practice diaphragmatic breathing:</p>
241+
<p><strong>Inhale for 4s → Hold for 6s → Exhale for 8s</strong></p>
242+
<button onclick="startARBreathing()">Start AR Breathing</button>
243+
</div>
244+
245+
<!-- Chat System -->
246+
<div class="chat-system">
247+
<h2>Ask Expertbot</h2>
248+
<div class="chat-history" id="chat-history">
249+
<div class="message bot-message">RA: Hello! I'm simulated stress expert. Ask me anything about stress and mood.</div>
250+
</div>
251+
<div class="chat-input">
252+
<input type="text" id="user-input" placeholder="Type your question...">
253+
<button onclick="sendMessage()">Send</button>
254+
</div>
255+
</div>
256+
257+
<script>
258+
// Stress Simulation
259+
let stressLevel = 30;
260+
let stressInterval;
261+
262+
function startStressSimulation() {
263+
stressInterval = setInterval(() => {
264+
if(stressLevel < 100) {
265+
stressLevel += Math.random() * 2;
266+
updateDashboard();
267+
}
268+
}, 2000);
269+
}
270+
271+
function performBreathingExercise() {
272+
if(stressLevel > 20) {
273+
stressLevel -= 20;
274+
addChatMessage("Well done! Stress reduced through breathing exercise.");
275+
updateDashboard();
276+
}
277+
}
278+
279+
function findOxygenTank() {
280+
addChatMessage("Follow the green lights to emergency oxygen supply!");
281+
// Would trigger visual effects in actual implementation
282+
}
283+
284+
function updateDashboard() {
285+
// Update stress display
286+
document.getElementById('stressProgress').style.width = stressLevel + '%';
287+
document.getElementById('stressValue').textContent = Math.round(stressLevel) + '%';
288+
289+
// Update heart rate
290+
document.getElementById('bpm').textContent =
291+
Math.floor(80 + (stressLevel * 0.3)) + ' BPM';
292+
293+
// Trigger chatbot warnings
294+
if(stressLevel > 75) {
295+
addChatMessage("Warning: Critical stress levels! Focus on breathing.");
296+
} else if(stressLevel > 50) {
297+
addChatMessage("Stress levels rising. Recommend calming exercises.");
298+
}
299+
}
300+
301+
function addChatMessage(text) {
302+
const chatDiv = document.getElementById('chatMessages');
303+
chatDiv.innerHTML += `<p>> ${text}</p>`;
304+
chatDiv.scrollTop = chatDiv.scrollHeight;
305+
}
306+
307+
// AR Breathing Exercise
308+
function startARBreathing() {
309+
alert("AR Breathing Exercise Started! Follow the on-screen instructions.");
310+
addChatMessage("AR Breathing Exercise: Inhale 4s → Hold 6s → Exhale 8s");
311+
}
312+
313+
// Chat System
314+
const API_KEY = 'AIzaSyB-qg2CY7gGfowh5ITW5PwljgMMXlNKVHg';
315+
let chatHistory = [];
316+
317+
async function sendMessage() {
318+
const input = document.getElementById('user-input');
319+
const message = input.value.trim();
320+
if (!message) return;
321+
322+
// Add user message
323+
addMessage(message, 'user');
324+
input.value = '';
325+
326+
try {
327+
const response = await fetch(`https://generativelanguage.googleapis.com/v1beta/models/gemini-1.5-flash:generateContent?key=${API_KEY}`, {
328+
method: 'POST',
329+
headers: {
330+
'Content-Type': 'application/json',
331+
},
332+
body: JSON.stringify({
333+
contents: [{
334+
parts: [{
335+
text: `You are a psychiatrist expert. Answer questions about the stress. Current question: ${message}`
336+
}]
337+
}]
338+
})
339+
});
340+
341+
const data = await response.json();
342+
const botResponse = data.candidates[0].content.parts[0].text;
343+
addMessage(botResponse, 'bot');
344+
} catch (error) {
345+
addMessage("Error connecting to the chat service", 'bot');
346+
}
347+
}
348+
349+
function addMessage(text, sender) {
350+
const history = document.getElementById('chat-history');
351+
const messageDiv = document.createElement('div');
352+
messageDiv.className = `message ${sender}-message`;
353+
messageDiv.textContent = `${sender === 'user' ? 'You: ' : 'RA: '}${text}`;
354+
history.appendChild(messageDiv);
355+
history.scrollTop = history.scrollHeight;
356+
}
357+
358+
// Start simulation when page loads
359+
window.onload = startStressSimulation;
360+
</script>
361+
</body>
362+
</html>

0 commit comments

Comments
 (0)