File size: 1,527 Bytes
c962a98 bb63c76 c962a98 bb63c76 c962a98 bb63c76 c962a98 bb63c76 c962a98 bb63c76 c962a98 bb63c76 c962a98 bb63c76 c962a98 bb63c76 c962a98 bb63c76 c962a98 bb63c76 c962a98 bb63c76 c962a98 bb63c76 c962a98 bb63c76 c962a98 bb63c76 c962a98 bb63c76 c962a98 bb63c76 c962a98 bb63c76 c962a98 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 |
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.chat-container {
width: 400px;
border: 1px solid #ddd;
border-radius: 10px;
background-color: #fff;
overflow: hidden;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.chatbox {
display: flex;
flex-direction: column;
height: 400px;
}
.chatbox-header {
background-color: #4CAF50;
color: white;
text-align: center;
padding: 10px;
}
.chatbox-body {
flex: 1;
padding: 10px;
overflow-y: auto;
height: 300px;
}
.chatbox-footer {
display: flex;
padding: 10px;
}
.chatbox-footer input {
flex: 1;
padding: 5px;
border: 1px solid #ddd;
border-radius: 5px;
}
.chatbox-footer button {
padding: 5px 10px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
.chatbox-footer button:hover {
background-color: #45a049;
}
.message {
margin: 10px 0;
padding: 8px;
border-radius: 5px;
background-color: #f1f1f1;
}
.bot-message {
background-color: #e8f5e9;
}
.user-message {
background-color: #e1f5fe;
text-align: right;
}
.food-items {
padding: 10px;
display: none;
}
.food-items div {
margin: 5px;
padding: 10px;
background-color: #e8f5e9;
border-radius: 5px;
cursor: pointer;
}
.food-items div:hover {
background-color: #c8e6c9;
}
|