StagChatbot/Multitasking-Chatbot

1body {2    font-family: Arial, sans-serif;3    margin: 0;4    padding: 0;5}6.layout {7    display: flex;8    height: 100vh;9}10/* CSS styles for the sidebar */11.sidebar {12    grid-area: sidebar;13    width: 15%;14    background-color: #f1f1f1; /* Adjust as needed */15    padding: 20px; /* Add padding around the sidebar */16    display: flex;17    flex-direction: column;18    justify-content: center;19    align-items: center;20}21 22 23/* Style for the logo */24#logo {25    width: auto;26    margin-bottom: 10px; /* Add margin below the logo */27}28 29/* Style for the buttons and icons */30.sidebar button {31    margin-bottom: 10px; /* Add margin between buttons */32    display: block; /* Make buttons appear in block format */33}34 35/* Style for the dropdown container */36.language-container {37    margin-bottom: 20px; /* Add margin below the language dropdown */38}39 40/* Style for the language dropdown */41#language-select {42    width: 100%; /* Make dropdown fill entire width */43    padding: 5px; /* Add padding inside the dropdown */44}45 46.chat-container {47    flex: 1;48    padding: 20px;49    overflow-y: auto;50}51.chat {52    list-style-type: none;53    margin: 0;54    padding: 0;55}56.message {57    background-color: #f1f1f1;58    padding: 10px;59    margin: 10px;60    border-radius: 5px;61    /* display: flex; */62    /* align-items: center; */63    white-space: pre-wrap;64}65.message-music {66    background-color: #f1f1f1;67    padding: 10px;68    margin: 10px;69    border-radius: 5px;70    display: flex;71    align-items: center;72    white-space: pre-wrap;73}74.user-message {75    text-align: left;76    background-color: #93c7dc;77}78.input-container {79    position: sticky;80    bottom: 0;81    display: flex;82    align-items: center;83}84#user-input {85    flex: 1;86    margin-right: 10px;87    padding: 8px;88    border: 1px solid #ccc;89    border-radius: 5px;90}91#send-button {92    padding: 8px 16px;93    border: none;94    background-color: #83be83;95    color: white;96    border-radius: 5px;97    cursor: pointer;98}99#send-button:hover {100    background-color: #5ebd5e;101}102#record-button {103    padding: 8px 16px;104    border: none;105    background-color: #51a6b1;106    color: white;107    border-radius: 5px;108    cursor: pointer;109    display: flex; /* Ensure the button's content is displayed as flex */110    align-items: center; /* Align the content vertically */111}112#record-button:hover{113    background-color: #34a6b6;114}115#record-button.active {116    background-color: lightcoral; /* Change the background color when active */117}118 119#mic {120    height: 100%; /* Set the height to fill the parent button */121    width: auto; /* Ensure the width adjusts proportionally */122}123 124#new-chat-button,125#spotify-button,126#instructions-button,127#map-button {128    margin-top: 10px;129    padding: 10px 10px;130    border: none;131    background-color: lightslategray;132    color: white;133    border-radius: 5px;134    cursor: pointer;135    transition: background-color 0.3s ease; /* Smooth transition */136}137 138#new-chat-button:hover,139#spotify-button:hover,140#instructions-button:hover,141#map-button:hover {142    background-color: #51a6b1;143}144 145#spotify-button.active{146    background-color: #51a6b1;147}148#map-button.active {149    background-color: #51a6b1;150}151 152#language-select-sidebar {153    margin-top: 10px;154    width: 55%;155    margin-bottom: 0px;156}157 158#language-select {159    /*  */160    height: 35px;161    /* padding: 10px 20px; */162    margin-bottom: 10px; /* Add margin between buttons */163    border: none;164    background-color: lightslategray; /* Green color */165    color: white;166    border-radius: 5px;167    text-align: center;168    cursor: pointer;169    transition: background-color 0.3s ease; /* Smooth transition */170}171#language-select:hover {172    background-color: #51a6b1; /* Darker green color on hover */173}174 175 176.sidebar button {177    width: 55%; /* Set the width */178    height: 35px; /* Set the height */179    margin-bottom: 5%; /* Add margin between buttons */180    display: block; /* Make buttons appear in block format */181    border: none; /* Remove default border */182    color: white; /* Text color */183    border-radius: 5px; /* Rounded corners */184    cursor: pointer; /* Add pointer cursor */185    transition: background-color 0.3s ease; /* Smooth transition */186}187 188/* Style for the credits */189#credits {190    margin-top: auto; /* Push the credits to the bottom */191    text-align: center; /* Center-align the text */192}193 194#credits p {195    font-size: 18px; /* Adjust font size */196    margin-bottom: 10px; /* Add margin below paragraphs */197}198 199#credits ul {200    list-style-type: none; /* Remove bullet points */201    padding: 0; /* Remove default padding */202}203 204#credits li {205    font-size: 16px; /* Adjust font size */206    margin-bottom: 5px; /* Add margin between list items */207}208 209#additional-buttons {210    margin-top: 20px; /* Add margin above the additional buttons */211}212 213#additional-buttons button {214    width: 45%; /* Set the width to fill the container */215    padding: 10px; /* Add padding inside the buttons */216    margin-bottom: 10px; /* Add margin between buttons */217    border: none; /* Remove default border */218    background-color: lightslategray; /* Set background color */219    color: white; /* Set text color */220    border-radius: 5px; /* Rounded corners */221    cursor: pointer; /* Add pointer cursor */222    transition: background-color 0.3s ease; /* Smooth transition */223}224 225#additional-buttons button:hover {226    background-color: #51a6b1; /* Darker background color on hover */227}228 229audio {230    padding-top: 10px;231    width: 100%;232}233 234 235.play-btn {236    cursor: pointer; /* Change cursor to pointer on hover */237}238 239.play-btn:hover {240    filter: brightness(0.75); /* Increase brightness on hover */241}242 243pre {244    padding: 1em;245    margin: 0.5em 0;246    background-color: #c6c6c6;247    border: 1px solid #000000;248    border-radius: 5px;249    overflow-x: auto;250}251code {252    display: block;253    white-space: pre-wrap;254}255 256li.message iframe {257    width: 100%;258    height: 60vh;259}260 261.location-dropdown {262    width: auto; /* Same width as the sidebar */263    height: 2em;264    border: none;265    background-color: lightslategray;266    color: white;267    border-radius: 5px;268    text-align: center;269    cursor: pointer;270    transition: background-color 0.3s ease;271}272 273.location-dropdown:hover {274    background-color: #51a6b1;275}276 277 278/* CSS styles for smaller screens */279@media (max-width: 1000px) {280    .layout {281        display: grid;282        grid-template-rows: auto; /* Define one row */283        grid-template-columns: auto; /* Define one column */284        grid-template-areas:285            'sidebar'286            'chat-container';287        width: 100%;288        overflow: scroll; /* Prevent double scrollbars */289    }290 291    .sidebar {292        grid-area: sidebar; /* Place the sidebar in its defined area */293        width: auto;294        height: 100vh; /* Set height to fill viewport height */295        overflow-y: auto /* Enable vertical scrolling for the sidebar if needed */296    }297 298    .chat-container {299        grid-area: chat-container; /* Place the main content in its defined area */300        height: 100vh; /* Set height to fill viewport height */301        overflow-y: auto; /* Enable vertical scrolling for the main content if needed */302    }303 304    /* Ensure elements can be scrolled */305    * {306        touch-action: auto;307        user-select: auto;308    }309}310