StagChatbot/Multitasking-Chatbot

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>StagCoders Interface</title>7    <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">8</head>9<body>10    <div class="layout">11        <div class="sidebar">12            <div id="logo">13                <!-- add your logo image here-->14                <img src="{{url_for('static', filename='fairfieldUniversityLogo.png')}}" alt="Logo" height="150"15                    width="150">16            </div>17 18            <button id="instructions-button" onclick="addInstructions()">Instructions</button>19            <button id="new-chat-button" onclick="startNewChat()">New chat </button>20 21            <!--Dropown menu for selecting language-->22            <div id="language-select-sidebar" class="language-container">23                <!-- <i class="fa-solid fa-earth-americas"></i> -->24                <select id="language-select">25                    <option value="english">English</option>26                    <option value="spanish">Spanish</option>27                    <option value="italian">Italian</option>28                    <option value="french">French</option>29                    <option value="german">German</option>30                </select>31            </div>32 33            <button id="spotify-button" onclick="toggleSpotify()">Spotify</button>34            <button id="map-button" onclick="toggleMap()">Map</button>35 36            <div id="credits">37                <p>Presented By:</p>38                <ul>39                    <li>Connor Hehn</li>40                    <li>Reyes Huerta</li>41                    <li>David McNulty</li>42                    <li>Andrew Visceglia</li>43                    <li>Dr. Sidike Paheding</li>44                </ul>45            </div>46 47        </div>48        <div class="chat-container">49            <ul class="chat">50                <li class="message">Hello, how can I assist you?</li>51                <!-- Previous messages go here -->52            </ul>53            <div class="input-container">54                <input type="text" id="user-input" placeholder="Type your message..." onkeydown="handleKeyDown(event)">55                <button id="send-button" onclick="sendMessage()">Send</button>56                <button id="record-button" onclick="startSpeechRecognition()">Record</button>57            </div>58            <div id="player"></div>59            <div id="additional-buttons">60                <button onclick="handleSample(this)">What are the campus dining options?</button>61                <button onclick="handleSample(this)">Where can I find the library?</button>62                <button onclick="handleSample(this)">How do I access the career services office?</button>63                <button onclick="handleSample(this)">Where can I find information about academic advising?</button>64                <button onclick="handleSample(this)">Code hello world in python</button>65                <button onclick="handleSample(this)">Code hello world in Java</button>66                <button onclick="handleSample(this)">What CS majors does Fairfield offer?</button>67 68 69                <!-- Add more buttons as needed -->70            </div>71        </div>72    </div>73 74    <script src="{{ url_for('static', filename='script.js') }}"></script>75 76</body>77</html>78