wineater-bot 3.2.0 → 3.3.0

package/src/js/styles.js

@@ -1,651 +0,0 @@
-const css = `
-:root {
-    --wineater-corp-color: #0044FF;
-    --wineater-color: #7B2BEB;
-}
-@font-face {
-    font-family: 'Poppins';
-    src: url('https://fonts.googleapis.com/css2?family=Poppins:wght@400&display=swap');
-}
-
-/* Overall chatbot styles */
-#chatbot-container {
-    position: fixed;
-    bottom: 20px;
-    right: 20px;
-    font-family: 'Poppins', sans-serif; /* Use Poppins as the main font */
-    z-index: 10000; /* Ensure chat is above other content */
-}
-
-/* Styling the chat icon */
-#chat-icon {
-      height: 50px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      padding: 10px 20px;
-      border-radius: 25px;
-      background: linear-gradient(90deg, var(--wineater-color), var(--wineater-corp-color)); /* Фиолетовый к синему */
-      cursor: pointer;
-      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); /* Тень */
-      color: white; /* Белый текст */
-      font-family: 'Poppins', sans-serif;
-      font-size: 16px; /* Увеличенный размер текста */
-      font-weight: bold;
-      box-sizing: border-box;
-      transition: transform 0.2s ease, box-shadow 0.2s ease; /* Анимация при наведении */
-    }
-
-    #chat-icon:hover {
-      transform: scale(1.1) translateY(-50%) rotate(90deg); /* Увеличение при наведении */
-      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4); /* Более глубокая тень */
-      
-    }
-
-    @keyframes pulse {
-      0%, 100% {
-        transform: scale(1);
-      }
-      50% {
-        transform: scale(1.1);
-      }
-    }
-
-    /* Подёргивание раз в 10 секунд */
-    .wiggle {
-      animation: wiggle 0.3s ease-in-out 10s infinite;
-    }
-
-    /* Плавное пульсирование каждые 10 секунд */
-    .pulse {
-      animation: pulse 1.5s ease-in-out 10s infinite;
-    }
-
-/* Position class for bottom-right */
-.chat-icon-bottom-right {
-    position: fixed;
-    bottom: 20px;
-    right: 20px;
-}
-
-.chat-icon-right-center {
-    position: fixed;
-    top: 50%;
-    right: -85px;
-    transform: translateY(-50%) rotate(90deg);
-}
-
-#chat-icon img {
-    width: 40px;
-    height: auto;
-    margin-right: 8px;
-}
-
-#chat-icon span {
-    color: white; /* Text color */
-    font-family: 'Poppins', sans-serif;
-}
-
-/* Chat window styles */
-#chat-window {
-  position: fixed;
-bottom: 20px;
-right: 20px;
-width: 380px;
-background-color: white;
-border-radius: 24px;
-border: 2px solid transparent;
-box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
-display: none;
-overflow: hidden;
-background: linear-gradient(white, white) padding-box,
-linear-gradient(90deg, var(--wineater-color), var(--wineater-corp-color)) border-box;
-  
-}
-
-#chat-header {
-  background-color: #FAFAFA;
-  padding: 24px 24px 20px;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-}
-
-#chat-title h1 {
-  font-family: 'Poppins', sans-serif;
-  font-size: 20px;
-  font-weight: 600;
-  color: #1F1F1F;
-  margin: 0;
-  line-height: 1.3;
-}
-
-#chat-title p {
-  font-family: 'Poppins', sans-serif;
-  font-size: 14px;
-  color: #666;
-  margin: 0;
-  line-height: 1.4;
-}
-
-#close-btn {
-  font-size: 20px;
-  color: #666;
-  cursor: pointer;
-  padding: 4px 8px;
-  margin: -4px -4px 0 16px;
-  line-height: 1;
-  border-radius: 50%;
-  transition: all 0.2s ease;
-}
-
-#close-btn:hover {
-  background-color: rgba(0, 0, 0, 0.05);
-  color: #333;
-}
-
-#message-container {
-  padding: 20px 24px;
-  max-height: 400px;
-  overflow-y: auto;
-}
-
-.message {
-  margin-bottom: 16px;
-  max-width: 85%;
-}
-
-.bot-message {
-  background-color: #F6F6F6;
-  padding: 12px 16px;
-  border-radius: 16px;
-  border-top-left-radius: 4px;
-  margin-right: auto;
-  font-size: 14px;
-  line-height: 1.5;
-  color: #1F1F1F;
-}
-
-.user-message {
-  background-color: #7E27ED;
-  color: white;
-  padding: 12px 16px;
-  border-radius: 16px;
-  border-top-right-radius: 4px;
-  margin-left: auto;
-  font-size: 14px;
-  line-height: 1.5;
-}
-
-#input-container {
-  padding: 16px 16px; /* Уменьшенный паддинг по бокам */
-  border-top: 1px solid rgba(0, 0, 0, 0.08);
-  display: flex;
-  gap: 0; /* Убрали отступ между элементами */
-  background-color: white;
-}
-
-/* Стили для поля ввода */
-#user-input {
-  flex: 1;
-  padding: 12px 16px;
-  border: 2px solid transparent; /* Прозрачная граница для эффекта градиента */
-  border-radius: 12px 0 0 12px; /* Скругление только слева */
-  font-size: 14px;
-  line-height: 1.5;
-  color: #2C2C2C;
-  transition: all 0.2s ease;
-  background: 
-    linear-gradient(white, white) padding-box,
-    linear-gradient(90deg, var(--wineater-corp-color), var(--wineater-color)) border-box;
-}
-
-#user-input:focus {
-  outline: none;
-  box-shadow: 0 0 0 3px rgba(123, 43, 235, 0.1);
-}
-
-/* Кнопка отправки */
-#send-button {
-  background: linear-gradient(90deg, var(--wineater-color), var(--wineater-corp-color));
-  color: white;
-  border: none;
-  padding: 12px 24px;
-  border-radius: 0 12px 12px 0; /* Скругление только справа */
-  font-size: 14px;
-  font-weight: 500;
-  cursor: pointer;
-  transition: transform 0.2s ease, box-shadow 0.2s ease;
-  box-shadow: 0 2px 8px rgba(123, 43, 235, 0.15);
-}
-
-#send-button:hover {
-  transform: translateY(-1px);
-  box-shadow: 0 4px 12px rgba(123, 43, 235, 0.2);
-}
-
-#send-button:active {
-  transform: translateY(0);
-  box-shadow: 0 2px 8px rgba(123, 43, 235, 0.15);
-}
-
-#powered-by {
-  padding: 12px 24px;
-  border-top: 1px solid rgba(0, 0, 0, 0.08);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: #FAFAFA;
-}
-
-#powered-by a {
-  display: flex;
-  align-items: center;
-  text-decoration: none;
-  opacity: 0.7;
-  transition: opacity 0.2s ease;
-}
-
-#powered-by a:hover {
-  opacity: 1;
-}
-
-#powered-by span {
-  font-family: 'Poppins', sans-serif;
-  color: #666;
-  margin-right: 8px;
-  font-size: 12px;
-}
-
-#chatbot-logo {
-  height: 16px;
-  width: auto;
-}
-
-/* Container for messages */
-#message-container {
-  padding: 24px;
-  display: flex;
-  max-height: 500px;
-  height: 400px;
-  flex-direction: column;
-  gap: 16px;
-}
-
-/* Message bubble styling */
-.message {
-  padding: 16px 20px;
-  border-radius: 20px;
-  margin-bottom: 8px;
-  font-size: 15px;
-  line-height: 1.5;
-  font-family: 'Poppins', sans-serif;
-  width: fit-content;
-  max-width: 85%;
-}
-
-/* Стили для сообщений API (бота) */
-.message.api {
-  background: linear-gradient(90deg, var(--wineater-color), var(--wineater-corp-color));
-  color: white;
-  border-top-left-radius: 4px;
-  margin-right: auto;
-  box-shadow: 0 2px 8px rgba(123, 43, 235, 0.15);
-}
-
-/* Стили для пользовательских сообщений */
-.message.user {
-  background-color: #F0F0F0;
-  color: #2C2C2C;
-  border-top-right-radius: 4px;
-  margin-left: auto;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
-}
-
-
-/* Dish item styling */
-.dish-message {
-    border: 2px solid #7E27ED; /* Bold yellow border */
-    cursor: pointer;
-    padding: 14px;
-    font-weight: bold;
-    font-size: 16px;
-    border-radius: 12px;
-    color: #333;
-    margin-top: 10px;
-    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Light shadow for depth */
-}
-
-/* Wine item styling */
-
-.wine-recommendation {
-  display: flex;
-  flex-direction: column;
-  background: white;
-    border: 2px solid transparent; /* Прозрачная граница для эффекта градиента */
-  border-radius: 20px;
-border-top-left-radius: 4px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
-  background: 
-    linear-gradient(white, white) padding-box,
-    linear-gradient(90deg, var(--wineater-color), var(--wineater-corp-color)) border-box;
-}
-
-.wine-item {
-  display: flex;
-  padding: 16px;
-  gap: 16px;
-}
-
-.wine-item img {
-  width: 100px;
-  height: 100px;
-  object-fit: cover;
-  border-radius: 8px;
-}
-
-.wine-item-details {
-  flex: 1;
-}
-
-.wine-item-details strong {
-  font-size: 16px;
-  color: #2C2C2C;
-  display: block;
-  margin-bottom: 4px;
-}
-
-.wine-item-price {
-  color: var(--wineater-color);
-  font-weight: 500;
-  margin-bottom: 4px;
-}
-
-.wine-item-region {
-  color: #666;
-  font-size: 14px;
-  margin-bottom: 4px;
-}
-
-.wine-item a {
-  color: var(--wineater-corp-color); /* Синий цвет ссылки */
-  text-decoration: underline; /* Подчеркивание для эффекта ссылки */
-  font-size: 14px; /* Размер текста */
-  font-weight: 500; /* Полужирный текст */
-  margin-top: 10px; /* Отступ сверху */
-  display: inline-block; /* Чтобы отступы работали корректно */
-}
-
-.wine-item a:hover {
-  text-decoration: none; /* Убираем подчеркивание при наведении */
-  color: #002699; /* Более темный синий для интерактивного эффекта */
-}
-
-.wine-description {
-  padding: 12px 16px;
-  color: white;
-
-    border-radius: 0px;
-border-bottom-left-radius: 15px;
-border-bottom-right-radius: 15px;
-
-  font-size: 14px;
-  line-height: 1.5;
-  background: linear-gradient(90deg, var(--wineater-color), var(--wineater-corp-color));
-  box-shadow: 0 2px 8px rgba(123, 43, 235, 0.15);
-}
-
-/* Ensure the chat window is visible when the 'visible' class is added */
-#chat-window.visible {
-    display: block;
-}
-
-/* Loader Styles */
-.loader {
- display: none;
-  width: 40px;
-  height: 40px;
-  margin: 20px auto;
-  background: conic-gradient(from 0deg, var(--wineater-color), var(--wineater-corp-color), var(--wineater-color));
-  border-radius: 50%;
-  animation: spin 1s linear infinite;
-  position: relative;
-}
-
-.loader::after {
-  content: '';
-  position: absolute;
-  top: 4px;
-  left: 4px;
-  right: 4px;
-  bottom: 4px;
-  background: white;
-  border-radius: 50%;
-}
-
-.loader.visible {
-  display: block;
-}
-
-@keyframes spin {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
-}
-
-/* Typing indicator styles */
-.typing-indicator {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 0;
-  visibility: hidden;
-  background-color: white;
-}
-
-#loading-indicator .typing-indicator {
-visibility: visible;
-}
-
-.typing-indicator span {
-  display: block;
-  width: 8px;
-  height: 8px;
-  margin: 0 3px;
-  border-radius: 50%;
-  background: linear-gradient(90deg, var(--wineater-color), var(--wineater-corp-color));
-  opacity: 0.7;
-  animation: typing 1s infinite;
-}
-
-@keyframes typing {
-  0%, 100% { 
-    transform: translateY(0); 
-    opacity: 0.7;
-  }
-  50% { 
-    transform: translateY(-8px);
-    opacity: 1;
-  }
-}
-
-/* Staggered animation for typing dots */
-.typing-indicator span:nth-child(1) {
-  animation-delay: 0s;
-}
-.typing-indicator span:nth-child(2) {
-  animation-delay: 0.15s;
-}
-.typing-indicator span:nth-child(3) {
-  animation-delay: 0.3s;
-}
-
-/* Show the typing indicator */
-.typing-indicator.visible {
-  visibility: visible;
-  height: 40px;
-}
-
-@media screen and (max-width: 768px) {
-    #chat-window {
-        width: 100%;
-        height: 100%;
-        bottom: 0;
-        right: 0;
-        border-radius: 0;
-        position: fixed;
-    }
-
-    #message-container {
-        height: calc(100vh - 250px); /* Учитываем высоту header и input container */
-        max-height: none;
-    }
-
-    #chat-icon {
-        height: 45px;
-        padding: 8px 16px;
-        font-size: 14px;
-    }
-
-   #chat-icon {
-        height: 36px; /* Ещё меньше для мобильных */
-        padding: 6px 12px;
-        font-size: 13px;
-    }
-    
-    #chat-icon img {
-        width: 20px;
-    }
-
-    #input-container {
-        padding: 12px;
-        position: fixed;
-        bottom: 30px;
-        width: 100%;
-        box-sizing: border-box;
-        
-    }
-
-    #user-input {
-        font-size: 16px; /* Оптимальный размер для мобильных устройств */
-        padding: 10px 14px;
-    }
-
-    #send-button {
-        padding: 10px 20px;
-    }
-
-    .wine-item {
-        flex-direction: column;
-        padding: 12px;
-    }
-
-    .wine-item img {
-        width: 100%;
-        height: 200px;
-        margin-bottom: 12px;
-    }
-}
-
-@media screen and (max-width: 480px) {
-    #chat-header {
-        padding: 16px;
-    }
-
-    #chat-icon {
-        padding: 3px 10px;
-        font-size: 12px;
-        border-radius: 10px;
-        border-top-right-radius: 0;
-        border-top-left-radius: 0;
-        right: -77px;
-    }
-    
-    #chat-icon img {
-        width: 18px;
-    }
-
-    #chat-title h1 {
-        font-size: 18px;
-    }
-
-    #chat-title p {
-        font-size: 12px;
-    }
-
-    .message {
-        padding: 12px 16px;
-        font-size: 14px;
-        max-width: 95%;
-    }
-
-    .wine-recommendation {
-        margin: 10px 0;
-    }
-
-    .wine-description {
-        padding: 10px 14px;
-        font-size: 13px;
-    }
-
-    #powered-by {
-        padding: 8px 16px;
-        display: block;
-        position: fixed;
-        width: 100%;
-        bottom: 0;
-        text-align: center;
-        box-sizing: border-box;
-    }
-
-    #powered-by a {
-        width: 100%;
-        justify-content: center;
-    }
-
-    #powered-by span {
-        font-size: 11px;
-    }
-
-    #chatbot-logo {
-        height: 14px;
-    }
-}
-
-/* Стили для планшетов */
-@media screen and (min-width: 769px) and (max-width: 1024px) {
-    #chat-window {
-        width: 400px;
-        right: 30px;
-        bottom: 30px;
-    }
-
-    #message-container {
-        max-height: 450px;
-    }
-}
-
-/* Стили для ландшафтной ориентации на мобильных */
-@media screen and (max-height: 600px) and (orientation: landscape) {
-    #chat-window {
-        height: 100vh;
-    }
-
-    #message-container {
-        height: calc(100vh - 140px);
-    }
-
-    .wine-item {
-        flex-direction: row;
-    }
-
-    .wine-item img {
-        width: 80px;
-        height: 80px;
-    }
-}
-    `;
-
-const style = document.createElement('style');
-style.textContent = css;
-document.head.appendChild(style);