Spaces:
Sleeping
Sleeping
File size: 2,154 Bytes
620671f 66745b8 620671f 99a4858 66745b8 99a4858 66745b8 99a4858 620671f 99a4858 66745b8 99a4858 66745b8 620671f 99a4858 66745b8 99a4858 66745b8 be847ec 620671f be847ec 66745b8 be847ec 66745b8 99a4858 620671f 99a4858 620671f be847ec 620671f 66745b8 be847ec 99a4858 be847ec 99a4858 66745b8 be847ec 66745b8 be847ec 99a4858 be847ec 66745b8 620671f 99a4858 620671f 66745b8 620671f 66745b8 620671f 66745b8 be847ec 66745b8 |
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 118 119 120 121 122 123 124 125 126 127 128 129 130 131 |
/* Body Styling */
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #D1C4E9, #6B4FE2);
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.container {
width: 90%;
max-width: 700px;
background-color: white;
border-radius: 20px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
padding: 30px;
display: flex;
flex-direction: column;
justify-content: space-between;
height: 90%;
}
header {
text-align: center;
margin-bottom: 20px;
}
header h1 {
font-size: 2.5rem;
color: #6B4FE2;
margin-bottom: 10px;
}
header p {
font-size: 1.2rem;
color: #888;
}
/* Input Section */
.input-section {
display: flex;
gap: 10px;
margin-bottom: 20px;
}
.input-section input {
flex: 1;
padding: 15px;
font-size: 1rem;
border: 1px solid #E5E5E5;
border-radius: 15px;
outline: none;
transition: all 0.3s ease;
}
.input-section input:focus {
border-color: #6B4FE2;
}
.buttons {
display: flex;
gap: 10px;
align-items: center;
}
.button {
padding: 10px 20px;
font-size: 1rem;
border-radius: 12px;
cursor: pointer;
transition: all 0.3s ease;
}
.clear-btn {
background-color: #D1D1D1;
color: #333;
}
.clear-btn:hover {
background-color: #B5B5B5;
}
.submit-btn {
background-color: #FF7F32;
color: white;
}
.submit-btn:hover {
background-color: #FF5A00;
}
/* Messages Section */
.messages {
margin-top: 20px;
padding: 15px;
background-color: #F9F9F9;
border-radius: 15px;
overflow-y: auto;
max-height: 350px;
}
.user-message, .bot-message {
background-color: #F1F1F1;
padding: 15px;
border-radius: 12px;
margin-bottom: 12px;
max-width: 80%;
}
.user-message {
background-color: #6B4FE2;
color: white;
align-self: flex-end;
}
.bot-message {
background-color: #E5E5E5;
color: #333;
align-self: flex-start;
}
/* Footer */
footer {
text-align: center;
font-size: 1.1rem;
color: #888;
padding-top: 10px;
}
|