WallTD-v.1 / frontend /index.html
Feriel080's picture
Upload index.html
0906542 verified
raw
history blame
4.72 kB
<!DOCTYPE html>
<html lang="en">
<head>
<title>WallD</title>
<meta charset="utf-8">
<link rel="stylesheet" href="/assets/style.css">
<link href="/assets/prism-tomorrow-night.css " rel="stylesheet" />
<link rel="icon" type="image/ico" href="/images/WallD.ico">
</head>
<body>
<header>
<span class="title-bar">
<span class="left-group">
<img src="/images/WallD.png" alt="logo" height="50px">
<h1>WallD</h1>
</span>
<span class="right-group">
<button class="new-conv" id="newConvButton" data-tooltip="New Conversation" shortcut="ctrl+alt+N">
<img src="images/newconvo.png" alt="new conversation" height="20px">
</button>
<button class="history" id="historyButton" data-tooltip="History" shortcut="ctrl+⇧H">
<img src="/images/history.png" alt="history" height="20px">
</button>
</span>
</span>
</header>
<main class="chat-container">
<div class="welcome" id="welcome-message">
<h1 class="main-title">I'm WallD, your bot mate</h1>
<p class="subtitle">How can I help you today?</p>
<div class="functions" id="functions-box">
<div class="doc-sum">
<img src="/images/summ.png" alt="Document Summarization">
<div class="text-content">
<label>Document Summarization</label>
<p>Upload excel(.xlsx), docx, pptx, pdf or txt and write <em>summarize</em></p>
</div>
</div>
<div class="img-inter">
<img src="/images/img.png" alt="Image Interpretation">
<div class="text-content">
<label>Image Interpretation</label>
<p>Upload and image (.jpg, .png, .jpeg) and write <em>interpretation</em></p>
</div>
</div>
<div class="doc-tran">
<img src="/images/doc-tran.png" alt="Documment Translation">
<div class="text-content">
<label>Documment Translation</label>
<p>Upload excel(.xlsx), docx, pptx, pdf or txt and write <em>translate to [language]</em></p>
</div>
</div>
<div class="Q-A">
<img src="/images/qa.png" alt="Question Answering">
<div class="text-content">
<label>Question Answering</label>
<p>Upload documents or images, and start your request by <em>tell me [your question]</em></p>
</div>
</div>
<div class="visual">
<img src="/images/visual.png" alt="Data Visualization Code Generator">
<div class="text-content">
<label>Data Visualization Code Generator</label>
<p>Upload Excel documents and write <em>generate code of [your description]</em></p>
</div>
</div>
</div>
</div>
<div class="chat-messages" id="chatMessages">
<!-- The chat place -->
</div>
<div class="chat-input">
<div class="attachment-file"></div>
<div class="input-row">
<span class="text-placeholder">What do you want to do?</span>
<textarea aria-label="write your prompt" id="userInput"></textarea>
<button class="send" id="sendButton" disabled>
<img src="/images/send.png" alt="send" height="20px">
</button>
<label for="fileInput" class="attachment" id="attachmentButton" data-tooltip="Attach">
<img src="/images/attach.png" alt="attach" height="20px">
</label>
<input type="file" id="fileInput" accept=".png, .jpg, .docx, .xlsx, .ppt, .pdf">
</div>
</div>
<div class="background-of-input"></div>
</main>
<div class="history-container" id="historyContainer">
<ul id="historyList"></ul>
</div>
<footer>© <span id="currentYear"></span></footer>
<script>
document.getElementById('currentYear').textContent = new Date().getFullYear();
</script>
<script src="/assets/prism-tomorrow-night.js" defer></script>
<script src="/assets/script.js"></script>
</body>
</html>