Spaces:
Sleeping
Sleeping
File size: 2,252 Bytes
00bfbaf 7b712ef 00bfbaf 7b712ef 00bfbaf 7b712ef 4500b48 7b712ef 00bfbaf 7b712ef 00bfbaf bce6c1b 7b712ef 00bfbaf bce6c1b 00bfbaf 7b712ef 00bfbaf 7b712ef 00bfbaf 7b712ef 00bfbaf 7b712ef 00bfbaf 7b712ef 00bfbaf 7b712ef 4500b48 00bfbaf 4500b48 7b712ef 00bfbaf 4500b48 7b712ef 00bfbaf 2f303fb 757470c 4500b48 757470c 7b712ef 2fafe6c 7b712ef bce6c1b 7b712ef 2fafe6c 277389d 321ef89 7b712ef 321ef89 757470c 321ef89 7b712ef 757470c |
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 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 |
body {
font-family: Arial, sans-serif;
background-color: #f7f7f7;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.chat-container {
background-color: #fff;
width: 400px; /* Increased width */
height: 600px; /* Increased height */
border-radius: 8px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
overflow: hidden;
}
.chat-header {
background-color: #4CAF50;
color: white;
text-align: center;
padding: 15px;
font-size: 18px;
}
.chat-messages {
padding: 15px;
height: 450px; /* Increased height for messages */
overflow-y: auto;
border-bottom: 1px solid #ddd;
}
.bot-message {
background-color: #f1f1f1;
padding: 8px;
border-radius: 5px;
margin-bottom: 10px;
}
.user-message {
background-color: #007BFF;
color: white;
padding: 8px;
border-radius: 5px;
margin-bottom: 10px;
text-align: right;
}
.ingredient-item {
display: block; /* Change to block to stack vertically */
width: 100%; /* Make the ingredient item take full width */
padding: 10px;
margin-bottom: 15px; /* More space between items */
border: 1px solid #ddd;
border-radius: 5px;
}
.ingredient-item img {
width: 100%; /* Make image fill the width of the container */
max-width: 150px; /* Set a max-width for images */
height: auto;
object-fit: cover;
border-radius: 5px;
margin-bottom: 10px;
}
.ingredient-item .name {
text-align: center;
font-size: 14px;
font-weight: bold;
margin-top: 10px;
}
.ingredient-item .description {
font-size: 12px;
color: #666;
margin-top: 5px;
text-align: center;
}
button {
background-color: #4CAF50;
color: white;
padding: 5px 10px;
border: none;
border-radius: 5px;
cursor: pointer;
width: 100%;
margin-top: 10px;
}
button:hover {
background-color: #45a049;
}
.selected-ingredients {
padding: 15px;
margin-top: 10px;
}
.send-button {
margin-top: 10px;
width: 100%;
padding: 10px;
background-color: #007BFF;
color: white;
border: none;
border-radius: 5px;
}
.send-button:hover {
background-color: #0056b3;
}
|