0% found this document useful (0 votes)
27 views3 pages

JARVIS AI Interface Demo

The document is an HTML code for a user interface named 'J.A.R.V.I.S SYSTEM', featuring a console for user interaction. Users can input commands, and the system responds with predefined answers or acknowledges the command. The interface includes styling for a modern look and functionality for speech output of the responses.

Uploaded by

fourform629
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
0% found this document useful (0 votes)
27 views3 pages

JARVIS AI Interface Demo

The document is an HTML code for a user interface named 'J.A.R.V.I.S SYSTEM', featuring a console for user interaction. Users can input commands, and the system responds with predefined answers or acknowledges the command. The interface includes styling for a modern look and functionality for speech output of the responses.

Uploaded by

fourform629
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>
<head>
<title>JARVIS Interface</title>
<style>
body {
background: #000;
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
color: #00eaff;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}

#container {
width: 90%;
max-width: 700px;
background: rgba(0, 30, 50, 0.4);
border: 2px solid #00eaff;
border-radius: 12px;
padding: 20px;
box-shadow: 0 0 25px #00eaff;
}

h1 {
text-align: center;
color: #00eaff;
text-shadow: 0 0 12px #00eaff;
}

#console {
height: 300px;
overflow-y: auto;
border: 1px solid #00eaff;
padding: 10px;
font-family: monospace;
background: rgba(0, 0, 0, 0.5);
}

#console p {
margin: 6px 0;
}

#inputBox {
display: flex;
margin-top: 15px;
gap: 10px;
}

input {
flex: 1;
padding: 10px;
border-radius: 6px;
border: 1px solid #00eaff;
background: black;
color: #00eaff;
font-size: 16px;
}

button {
padding: 10px 20px;
border: none;
background: #00eaff;
color: black;
font-weight: bold;
border-radius: 6px;
cursor: pointer;
font-size: 16px;
box-shadow: 0 0 10px #00eaff;
}

button:hover {
background: white;
}
</style>
</head>

<body>

<div id="container">
<h1>J.A.R.V.I.S SYSTEM</h1>

<div id="console">
<p><b>JARVIS:</b> System online. How may I assist you?</p>
</div>

<div id="inputBox">
<input type="text" id="command" placeholder="Enter your command...">
<button onclick="sendCommand()">Send</button>
</div>
</div>

<script>
function sendCommand() {
let input = [Link]("command");
let text = [Link]();

if (text === "") return;

let consoleBox = [Link]("console");

// Display your command


[Link] += `<p><b>You:</b> ${text}</p>`;

// Generate JARVIS reply


let reply = processCommand(text);

// Display reply
[Link] += `<p><b>JARVIS:</b> ${reply}</p>`;

// Auto scroll
[Link] = [Link];

// Speak reply
speak(reply);
[Link] = "";
}

function processCommand(cmd) {
cmd = [Link]();

if ([Link]("hello") || [Link]("hi")) {
return "Hello sir, how can I assist you today?";
}

if ([Link]("time")) {
return "The current time is " + new Date().toLocaleTimeString();
}

if ([Link]("date")) {
return "Today's date is " + new Date().toLocaleDateString();
}

if ([Link]("who are you")) {


return "I am JARVIS, your personal AI assistant.";
}

if ([Link]("open")) {
return "I cannot open apps in this demo version, sir.";
}

if ([Link]("weather")) {
return "Weather systems are offline in this demo.";
}

return "Command received: \"" + cmd + "\"";


}

// Speech output
function speak(text) {
if ('speechSynthesis' in window) {
let msg = new SpeechSynthesisUtterance(text);
[Link] = 1;
[Link] = 1;
[Link](msg);
}
}
</script>

</body>
</html>

You might also like