|
@@ -1,43 +1,43 @@
|
|
|
ion-toolbar {
|
|
|
- height: 70px;
|
|
|
- --min-height: 60px;
|
|
|
- padding: 0;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- --background: transparent;
|
|
|
- }
|
|
|
-
|
|
|
- ion-header{
|
|
|
- background-color: #99d75c ;
|
|
|
- --background: transparent;
|
|
|
- }
|
|
|
-
|
|
|
- ion-title {
|
|
|
- margin: 0;
|
|
|
- flex: 1;
|
|
|
- text-align: center;
|
|
|
- font-size: 24px;
|
|
|
- }
|
|
|
+ height: 70px;
|
|
|
+ --min-height: 60px;
|
|
|
+ padding: 0;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ --background: transparent;
|
|
|
+}
|
|
|
+
|
|
|
+ion-header{
|
|
|
+ background-color: #99d75c ;
|
|
|
+ --background: transparent;
|
|
|
+}
|
|
|
+
|
|
|
+ion-title {
|
|
|
+ margin: 0;
|
|
|
+ flex: 1;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 24px;
|
|
|
+}
|
|
|
|
|
|
|
|
|
.input-box {
|
|
|
- background-color: white;
|
|
|
- border-radius: 8px;
|
|
|
-
|
|
|
- height: 40px;
|
|
|
- flex: 1;
|
|
|
+background-color: white;
|
|
|
+border-radius: 8px;
|
|
|
+
|
|
|
+height: 40px;
|
|
|
+flex: 1;
|
|
|
}
|
|
|
|
|
|
|
|
|
.footer-content {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- width: 100%;
|
|
|
+display: flex;
|
|
|
+align-items: center;
|
|
|
+justify-content: center;
|
|
|
+width: 100%;
|
|
|
}
|
|
|
|
|
|
ion-buttons {
|
|
|
- margin: 0 5px;
|
|
|
+margin: 0 5px;
|
|
|
}
|
|
|
|
|
|
.circle{
|
|
@@ -52,358 +52,97 @@ justify-content: center;
|
|
|
|
|
|
|
|
|
.chat-container {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- padding-top: 10px;
|
|
|
+display: flex;
|
|
|
+flex-direction: column;
|
|
|
+padding-top: 10px;
|
|
|
}
|
|
|
|
|
|
.message-container {
|
|
|
- display: flex;
|
|
|
- justify-content: flex-end;
|
|
|
- margin: 10px 0;
|
|
|
+display: flex;
|
|
|
+justify-content: flex-end;
|
|
|
+margin: 10px 0;
|
|
|
}
|
|
|
|
|
|
.message-content {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
+display: flex;
|
|
|
+align-items: center;
|
|
|
}
|
|
|
|
|
|
.user-message-content {
|
|
|
- justify-content: flex-end;
|
|
|
+justify-content: flex-end;
|
|
|
}
|
|
|
|
|
|
.ai-message-content {
|
|
|
- justify-content: flex-start;
|
|
|
+justify-content: flex-start;
|
|
|
}
|
|
|
|
|
|
.message-bubble {
|
|
|
- background-color: #99d75c;
|
|
|
- color: white;
|
|
|
- border-radius: 15px;
|
|
|
- padding: 10px 15px;
|
|
|
- max-width: 60%;
|
|
|
+background-color: #99d75c;
|
|
|
+color: white;
|
|
|
+border-radius: 15px;
|
|
|
+padding: 10px 15px;
|
|
|
+max-width: 60%;
|
|
|
}
|
|
|
|
|
|
.user-message {
|
|
|
- background-color: #99d75c;
|
|
|
- margin-left: 10px;
|
|
|
+background-color: #99d75c;
|
|
|
+margin-left: 10px;
|
|
|
}
|
|
|
|
|
|
.ai-message {
|
|
|
- background-color: white;
|
|
|
- color: black;
|
|
|
- border: 1px solid black;
|
|
|
- box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
|
|
|
- margin-right: 10px;
|
|
|
+background-color: white;
|
|
|
+color: black;
|
|
|
+border: 1px solid black;
|
|
|
+box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
|
|
|
+margin-right: 10px;
|
|
|
}
|
|
|
|
|
|
.user-avatar {
|
|
|
- width: 40px;
|
|
|
- height: 40px;
|
|
|
- border-radius: 50%;
|
|
|
- overflow: hidden;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- background-color: #f0f0f0;
|
|
|
- border: 2px solid #99d75c;
|
|
|
- margin-left: 5px;
|
|
|
+width: 40px;
|
|
|
+height: 40px;
|
|
|
+border-radius: 50%;
|
|
|
+overflow: hidden;
|
|
|
+display: flex;
|
|
|
+align-items: center;
|
|
|
+justify-content: center;
|
|
|
+background-color: #f0f0f0;
|
|
|
+border: 2px solid #99d75c;
|
|
|
+margin-left: 5px;
|
|
|
}
|
|
|
|
|
|
.ai-avatar {
|
|
|
- width: 40px;
|
|
|
- height: 40px;
|
|
|
- border-radius: 50%;
|
|
|
- overflow: hidden;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- background-color: #f0f0f0;
|
|
|
- border: 2px solid #99d75c;
|
|
|
- margin-right: 5px;
|
|
|
+width: 40px;
|
|
|
+height: 40px;
|
|
|
+border-radius: 50%;
|
|
|
+overflow: hidden;
|
|
|
+display: flex;
|
|
|
+align-items: center;
|
|
|
+justify-content: center;
|
|
|
+background-color: #f0f0f0;
|
|
|
+border: 2px solid #99d75c;
|
|
|
+margin-right: 5px;
|
|
|
}
|
|
|
|
|
|
.user-avatar img {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- object-fit: cover;
|
|
|
+width: 100%;
|
|
|
+height: 100%;
|
|
|
+object-fit: cover;
|
|
|
}
|
|
|
|
|
|
.ai-avatar img {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- object-fit: cover;
|
|
|
-}
|
|
|
-
|
|
|
-.yuyinframe{
|
|
|
- --background: transparent;
|
|
|
- background-color: #99d75c;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
+width: 100%;
|
|
|
+height: 100%;
|
|
|
+object-fit: cover;
|
|
|
}
|
|
|
-.modal-content {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- width: 100%;
|
|
|
- height: 25%;
|
|
|
-}
|
|
|
-
|
|
|
-.timer-container {
|
|
|
- height: 100%;
|
|
|
- flex-direction: column;
|
|
|
-
|
|
|
- justify-content: center;
|
|
|
|
|
|
-}
|
|
|
|
|
|
#timer{
|
|
|
- width: 100%;
|
|
|
- margin-top: 30px;
|
|
|
- text-align: center;
|
|
|
- margin-bottom: 10px;
|
|
|
+width: 100%;
|
|
|
+margin-top: 30px;
|
|
|
+text-align: center;
|
|
|
+margin-bottom: 10px;
|
|
|
}
|
|
|
|
|
|
-
|
|
|
-.cancle-button {
|
|
|
- font-size: 75px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- color: white;
|
|
|
- background-color: #99d75c;
|
|
|
- margin-right: 20px;
|
|
|
-}
|
|
|
-
|
|
|
-
|
|
|
-.send-button {
|
|
|
- height:60px ;
|
|
|
- width: 60px;
|
|
|
- border-radius: 50%;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- color: white;
|
|
|
- background-color: #99d75c;
|
|
|
- border: 5px solid white;
|
|
|
- margin-left: 20px;
|
|
|
-}
|
|
|
|
|
|
|
|
|
-
|
|
|
-.light {
|
|
|
- width: 100%;
|
|
|
- height: 90px;
|
|
|
- display: flex;
|
|
|
-}
|
|
|
-
|
|
|
-.light span {
|
|
|
- width: 10px;
|
|
|
- border-radius: 18px;
|
|
|
- margin-right: 20px;
|
|
|
-}
|
|
|
-
|
|
|
-.light span:nth-child(1) {
|
|
|
- animation: bar1 2s 0.2s infinite linear;
|
|
|
-}
|
|
|
|
|
|
-.light span:nth-child(2) {
|
|
|
- animation: bar2 2s 0.4s infinite linear;
|
|
|
-}
|
|
|
-
|
|
|
-.light span:nth-child(3) {
|
|
|
- animation: bar3 2s 0.6s infinite linear;
|
|
|
-}
|
|
|
-
|
|
|
-.light span:nth-child(4) {
|
|
|
- animation: bar4 2s 0.8s infinite linear;
|
|
|
-}
|
|
|
-
|
|
|
-.light span:nth-child(5) {
|
|
|
- animation: bar5 2s 1.0s infinite linear;
|
|
|
-}
|
|
|
-
|
|
|
-.light span:nth-child(6) {
|
|
|
- animation: bar6 2s 1.2s infinite linear;
|
|
|
-}
|
|
|
-
|
|
|
-.light span:nth-child(7) {
|
|
|
- animation: bar7 2s 1.4s infinite linear;
|
|
|
-}
|
|
|
-
|
|
|
-.light span:nth-child(8) {
|
|
|
- animation: bar8 2s 1.6s infinite linear;
|
|
|
-}
|
|
|
-
|
|
|
-.light span:nth-child(9) {
|
|
|
- animation: bar9 2s 1.8s infinite linear;
|
|
|
-}
|
|
|
-
|
|
|
-@keyframes bar1 {
|
|
|
- 0% {
|
|
|
- background: #f677b0;
|
|
|
- margin-top: 25%;
|
|
|
- height: 10%;
|
|
|
- }
|
|
|
-
|
|
|
- 50% {
|
|
|
- background: #f677b0;
|
|
|
- height: 100%;
|
|
|
- margin-top: 0%;
|
|
|
- }
|
|
|
-
|
|
|
- 100% {
|
|
|
- background: #f677b0;
|
|
|
- height: 10%;
|
|
|
- margin-top: 25%;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-@keyframes bar2 {
|
|
|
- 0% {
|
|
|
- background: #df7ff2;
|
|
|
- margin-top: 25%;
|
|
|
- height: 10%;
|
|
|
- }
|
|
|
-
|
|
|
- 50% {
|
|
|
- background: #df7ff2;
|
|
|
- height: 100%;
|
|
|
- margin-top: 0%;
|
|
|
- }
|
|
|
-
|
|
|
- 100% {
|
|
|
- background: #df7ff2;
|
|
|
- height: 10%;
|
|
|
- margin-top: 25%;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-@keyframes bar3 {
|
|
|
- 0% {
|
|
|
- background: #8c7ff2;
|
|
|
- margin-top: 25%;
|
|
|
- height: 10%;
|
|
|
- }
|
|
|
-
|
|
|
- 50% {
|
|
|
- background: #8c7ff2;
|
|
|
- height: 100%;
|
|
|
- margin-top: 0%;
|
|
|
- }
|
|
|
-
|
|
|
- 100% {
|
|
|
- background: #8c7ff2;
|
|
|
- height: 10%;
|
|
|
- margin-top: 25%;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-@keyframes bar4 {
|
|
|
- 0% {
|
|
|
- background: #024b6a;
|
|
|
- margin-top: 25%;
|
|
|
- height: 10%;
|
|
|
- }
|
|
|
-
|
|
|
- 50% {
|
|
|
- background: #024b6a;
|
|
|
- height: 100%;
|
|
|
- margin-top: 0%;
|
|
|
- }
|
|
|
-
|
|
|
- 100% {
|
|
|
- background: #024b6a;
|
|
|
- height: 10%;
|
|
|
- margin-top: 25%;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-@keyframes bar5 {
|
|
|
- 0% {
|
|
|
- background: #7ff2d3;
|
|
|
- margin-top: 25%;
|
|
|
- height: 10%;
|
|
|
- }
|
|
|
-
|
|
|
- 50% {
|
|
|
- background: #7ff2d3;
|
|
|
- height: 100%;
|
|
|
- margin-top: 0%;
|
|
|
- }
|
|
|
-
|
|
|
- 100% {
|
|
|
- background: #7ff2d3;
|
|
|
- height: 10%;
|
|
|
- margin-top: 25%;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-.loading-dots {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- margin-left: 10px;
|
|
|
-}
|
|
|
-
|
|
|
-.loading-dot {
|
|
|
- width: 8px;
|
|
|
- height: 8px;
|
|
|
- border-radius: 50%;
|
|
|
- background-color: #99d75c;
|
|
|
- margin: 0 2px;
|
|
|
- animation: loading 1s infinite;
|
|
|
-}
|
|
|
-
|
|
|
-.loading-dot:nth-child(1) {
|
|
|
- animation-delay: 0s;
|
|
|
-}
|
|
|
-
|
|
|
-.loading-dot:nth-child(2) {
|
|
|
- animation-delay: 0.2s;
|
|
|
-}
|
|
|
-
|
|
|
-.loading-dot:nth-child(3) {
|
|
|
- animation-delay: 0.4s;
|
|
|
-}
|
|
|
-
|
|
|
-@keyframes loading {
|
|
|
- 0%, 100% {
|
|
|
- opacity: 0.5;
|
|
|
- }
|
|
|
- 50% {
|
|
|
- opacity: 1;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-.emoji-picker {
|
|
|
- --background: transparent;
|
|
|
- background-color: #99d75c;
|
|
|
- display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
- padding: 10px;
|
|
|
- justify-content: flex-start;
|
|
|
- overflow-y: scroll;
|
|
|
- height: 200px;
|
|
|
-}
|
|
|
-
|
|
|
-.emoji-button {
|
|
|
- margin: 9px;
|
|
|
- cursor: pointer;
|
|
|
- font-size: 28px;
|
|
|
- height: 40px;
|
|
|
- width: 40px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- --background: transparent;
|
|
|
- --box-shadow: none;
|
|
|
- --outline: none;
|
|
|
- border: none;
|
|
|
- float: left;
|
|
|
-}
|