Напиши для меня главную страницу типа perplexity, где вводишь запрос и получаешь ответ от ии с указанием источника, процесса поиска по сайтам, постепенным как бы печатанием текста. Пока что с mock данными
4ddfd3d
verified
| @keyframes typing { | |
| from { width: 0 } | |
| to { width: 100% } | |
| } | |
| @keyframes blink-caret { | |
| from, to { border-color: transparent } | |
| 50% { border-color: white } | |
| } | |
| .typing-effect { | |
| overflow: hidden; | |
| white-space: nowrap; | |
| border-right: 2px solid; | |
| animation: | |
| typing 3.5s steps(40, end), | |
| blink-caret .75s step-end infinite; | |
| } | |
| .source-badge { | |
| transition: all 0.3s ease; | |
| } | |
| .source-badge:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 4px 6px rgba(255, 255, 255, 0.1); | |
| } | |
| .search-process { | |
| background: linear-gradient(90deg, #333333, #555555, #333333); | |
| background-size: 200% 100%; | |
| animation: shimmer 1.5s infinite linear; | |
| } | |
| @keyframes shimmer { | |
| 0% { background-position: 200% 0; } | |
| 100% { background-position: -200% 0; } | |
| } |