You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
865 lines
26 KiB
865 lines
26 KiB
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta
|
|
http-equiv="Cache-Control"
|
|
content="no-cache, no-store, must-revalidate"
|
|
/>
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
|
<style>
|
|
/* From Uiverse.io by Cobp */
|
|
.container-ai-input {
|
|
--perspective: 1000px;
|
|
--translateY: 45px;
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
top: -2.5rem;
|
|
bottom: -2.5rem;
|
|
display: grid;
|
|
grid-template-columns: repeat(5, 1fr);
|
|
transform-style: preserve-3d;
|
|
}
|
|
|
|
.container-wrap {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-items: center;
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translateX(-50%) translateY(-50%);
|
|
z-index: 9;
|
|
transform-style: preserve-3d;
|
|
cursor: pointer;
|
|
padding: 4px;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.container-wrap:hover {
|
|
padding: 0;
|
|
}
|
|
|
|
.container-wrap:active {
|
|
transform: translateX(-50%) translateY(-50%) scale(0.95);
|
|
}
|
|
|
|
.container-wrap:after {
|
|
content: "";
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translateX(-50%) translateY(-55%);
|
|
width: 12rem;
|
|
height: 11rem;
|
|
background-color: #dedfe0;
|
|
border-radius: 3.2rem;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.container-wrap:hover:after {
|
|
transform: translateX(-50%) translateY(-50%);
|
|
height: 12rem;
|
|
}
|
|
|
|
.container-wrap input {
|
|
opacity: 0;
|
|
width: 0;
|
|
height: 0;
|
|
position: absolute;
|
|
}
|
|
|
|
.container-wrap input:checked + .card .eyes {
|
|
opacity: 0;
|
|
}
|
|
|
|
.container-wrap input:checked + .card .content-card {
|
|
width: 260px;
|
|
height: 160px;
|
|
}
|
|
|
|
.container-wrap input:checked + .card .background-blur-balls {
|
|
border-radius: 20px;
|
|
}
|
|
|
|
.container-wrap input:checked + .card .container-ai-chat {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
z-index: 99999;
|
|
pointer-events: visible;
|
|
}
|
|
|
|
.card {
|
|
width: 100%;
|
|
height: 100%;
|
|
/* background-color: #fff; */
|
|
transform-style: preserve-3d;
|
|
will-change: transform;
|
|
transition: all 0.6s ease;
|
|
border-radius: 3rem;
|
|
display: flex;
|
|
align-items: center;
|
|
transform: translateZ(50px);
|
|
justify-content: center;
|
|
}
|
|
|
|
.card:hover {
|
|
box-shadow: 0 10px 40px rgba(0, 0, 60, 0.25),
|
|
inset 0 0 10px rgba(255, 255, 255, 0.5);
|
|
}
|
|
|
|
.background-blur-balls {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translateX(-50%) translateY(-50%);
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: -10;
|
|
border-radius: 3rem;
|
|
transition: all 0.3s ease;
|
|
background-color: rgba(255, 255, 255, 0.8);
|
|
overflow: hidden;
|
|
}
|
|
.balls {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translateX(-50%) translateY(-50%);
|
|
animation: rotate-background-balls 10s linear infinite;
|
|
}
|
|
|
|
.container-wrap:hover .balls {
|
|
animation-play-state: paused;
|
|
}
|
|
|
|
.background-blur-balls .ball {
|
|
width: 6rem;
|
|
height: 6rem;
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
filter: blur(30px);
|
|
}
|
|
|
|
.background-blur-balls .ball.violet {
|
|
top: 0;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
background-color: #9147ff;
|
|
}
|
|
|
|
.background-blur-balls .ball.green {
|
|
bottom: 0;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
background-color: #34d399;
|
|
}
|
|
|
|
.background-blur-balls .ball.rosa {
|
|
top: 50%;
|
|
left: 0;
|
|
transform: translateY(-50%);
|
|
background-color: #ec4899;
|
|
}
|
|
|
|
.background-blur-balls .ball.cyan {
|
|
top: 50%;
|
|
right: 0;
|
|
transform: translateY(-50%);
|
|
background-color: #05e0f5;
|
|
}
|
|
|
|
.content-card {
|
|
width: 12rem;
|
|
height: 12rem;
|
|
display: flex;
|
|
border-radius: 3rem;
|
|
transition: all 0.3s ease;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.background-blur-card {
|
|
width: 100%;
|
|
height: 100%;
|
|
backdrop-filter: blur(50px);
|
|
}
|
|
|
|
.eyes {
|
|
position: absolute;
|
|
left: 50%;
|
|
bottom: 50%;
|
|
transform: translateX(-50%);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 52px;
|
|
gap: 2rem;
|
|
transition: all 0.3s ease;
|
|
|
|
& .eye {
|
|
width: 26px;
|
|
height: 52px;
|
|
background-color: #fff;
|
|
border-radius: 16px;
|
|
animation: animate-eyes 10s infinite linear;
|
|
transition: all 0.3s ease;
|
|
}
|
|
}
|
|
|
|
.eyes.happy {
|
|
display: none;
|
|
color: #fff;
|
|
gap: 0;
|
|
|
|
& svg {
|
|
width: 60px;
|
|
}
|
|
}
|
|
|
|
.container-wrap:hover .eyes .eye {
|
|
display: none;
|
|
}
|
|
|
|
.container-wrap:hover .eyes.happy {
|
|
display: flex;
|
|
}
|
|
|
|
.container-ai-chat {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 6px;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.container-wrap .card .chat {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
flex-direction: column;
|
|
border-radius: 15px;
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 4px;
|
|
overflow: hidden;
|
|
background-color: #ffffff;
|
|
}
|
|
|
|
.container-wrap .card .chat .chat-bot {
|
|
position: relative;
|
|
display: flex;
|
|
height: 100%;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.card .chat .chat-bot textarea {
|
|
background-color: transparent;
|
|
border-radius: 16px;
|
|
border: none;
|
|
width: 100%;
|
|
height: 100%;
|
|
color: #8b8b8b;
|
|
font-family: sans-serif;
|
|
font-size: 12px;
|
|
font-weight: 400;
|
|
padding: 10px;
|
|
resize: none;
|
|
outline: none;
|
|
|
|
&::-webkit-scrollbar {
|
|
width: 6px;
|
|
height: 10px;
|
|
}
|
|
|
|
&::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
&::-webkit-scrollbar-thumb {
|
|
background: #dedfe0;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
&::-webkit-scrollbar-thumb:hover {
|
|
background: #8b8b8b;
|
|
cursor: pointer;
|
|
}
|
|
|
|
&::placeholder {
|
|
color: #dedfe0;
|
|
transition: all 0.3s ease;
|
|
}
|
|
&:focus::placeholder {
|
|
color: #8b8b8b;
|
|
}
|
|
}
|
|
|
|
.card .chat .options {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-end;
|
|
padding: 10px;
|
|
|
|
& button {
|
|
transition: all 0.3s ease;
|
|
}
|
|
}
|
|
|
|
.card .chat .options .btns-add {
|
|
display: flex;
|
|
gap: 8px;
|
|
|
|
& button {
|
|
display: flex;
|
|
color: rgba(0, 0, 0, 0.1);
|
|
background-color: transparent;
|
|
border: none;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
|
|
&:hover {
|
|
transform: translateY(-5px);
|
|
color: #8b8b8b;
|
|
}
|
|
}
|
|
}
|
|
|
|
.card .chat .options .btn-submit {
|
|
display: flex;
|
|
padding: 2px;
|
|
background-image: linear-gradient(to top, #ff4141, #9147ff, #3b82f6);
|
|
border-radius: 10px;
|
|
box-shadow: inset 0 6px 2px -4px rgba(255, 255, 255, 0.5);
|
|
cursor: pointer;
|
|
border: none;
|
|
outline: none;
|
|
opacity: 0.7;
|
|
transition: all 0.15s ease;
|
|
|
|
& i {
|
|
width: 30px;
|
|
height: 30px;
|
|
padding: 6px;
|
|
background: rgba(0, 0, 0, 0.1);
|
|
border-radius: 10px;
|
|
backdrop-filter: blur(3px);
|
|
color: #cfcfcf;
|
|
}
|
|
& svg {
|
|
transition: all 0.3s ease;
|
|
}
|
|
&:hover {
|
|
opacity: 1;
|
|
& svg {
|
|
color: #f3f6fd;
|
|
filter: drop-shadow(0 0 5px #ffffff);
|
|
}
|
|
}
|
|
|
|
&:focus svg {
|
|
color: #f3f6fd;
|
|
filter: drop-shadow(0 0 5px #ffffff);
|
|
transform: scale(1.2) rotate(45deg) translateX(-2px) translateY(1px);
|
|
}
|
|
|
|
&:active {
|
|
transform: scale(0.92);
|
|
}
|
|
}
|
|
|
|
.area:nth-child(15):hover ~ .container-wrap .card,
|
|
.area:nth-child(15):hover ~ .container-wrap .eyes .eye {
|
|
transform: perspective(var(--perspective)) rotateX(-15deg)
|
|
rotateY(15deg) translateZ(var(--translateY)) scale3d(1, 1, 1);
|
|
}
|
|
.area:nth-child(14):hover ~ .container-wrap .card,
|
|
.area:nth-child(14):hover ~ .container-wrap .eyes .eye {
|
|
transform: perspective(var(--perspective)) rotateX(-15deg) rotateY(7deg)
|
|
translateZ(var(--translateY)) scale3d(1, 1, 1);
|
|
}
|
|
.area:nth-child(13):hover ~ .container-wrap .card,
|
|
.area:nth-child(13):hover ~ .container-wrap .eyes .eye {
|
|
transform: perspective(var(--perspective)) rotateX(-15deg) rotateY(0)
|
|
translateZ(var(--translateY)) scale3d(1, 1, 1);
|
|
}
|
|
.area:nth-child(12):hover ~ .container-wrap .card,
|
|
.area:nth-child(12):hover ~ .container-wrap .eyes .eye {
|
|
transform: perspective(var(--perspective)) rotateX(-15deg)
|
|
rotateY(-7deg) translateZ(var(--translateY)) scale3d(1, 1, 1);
|
|
}
|
|
.area:nth-child(11):hover ~ .container-wrap .card,
|
|
.area:nth-child(11):hover ~ .container-wrap .eyes .eye {
|
|
transform: perspective(var(--perspective)) rotateX(-15deg)
|
|
rotateY(-15deg) translateZ(var(--translateY)) scale3d(1, 1, 1);
|
|
}
|
|
|
|
.area:nth-child(10):hover ~ .container-wrap .card,
|
|
.area:nth-child(10):hover ~ .container-wrap .eyes .eye {
|
|
transform: perspective(var(--perspective)) rotateX(0) rotateY(15deg)
|
|
translateZ(var(--translateY)) scale3d(1, 1, 1);
|
|
}
|
|
.area:nth-child(9):hover ~ .container-wrap .card,
|
|
.area:nth-child(9):hover ~ .container-wrap .eyes .eye {
|
|
transform: perspective(var(--perspective)) rotateX(0) rotateY(7deg)
|
|
translateZ(var(--translateY)) scale3d(1, 1, 1);
|
|
}
|
|
.area:nth-child(8):hover ~ .container-wrap .card,
|
|
.area:nth-child(8):hover ~ .container-wrap .eyes .eye {
|
|
transform: perspective(var(--perspective)) rotateX(0) rotateY(0)
|
|
translateZ(var(--translateY)) scale3d(1, 1, 1);
|
|
}
|
|
.area:nth-child(7):hover ~ .container-wrap .card,
|
|
.area:nth-child(7):hover ~ .container-wrap .eyes .eye {
|
|
transform: perspective(var(--perspective)) rotateX(0) rotateY(-7deg)
|
|
translateZ(var(--translateY)) scale3d(1, 1, 1);
|
|
}
|
|
.area:nth-child(6):hover ~ .container-wrap .card,
|
|
.area:nth-child(6):hover ~ .container-wrap .eyes .eye {
|
|
transform: perspective(var(--perspective)) rotateX(0) rotateY(-15deg)
|
|
translateZ(var(--translateY)) scale3d(1, 1, 1);
|
|
}
|
|
|
|
.area:nth-child(5):hover ~ .container-wrap .card,
|
|
.area:nth-child(5):hover ~ .container-wrap .eyes .eye {
|
|
transform: perspective(var(--perspective)) rotateX(15deg) rotateY(15deg)
|
|
translateZ(var(--translateY)) scale3d(1, 1, 1);
|
|
}
|
|
.area:nth-child(4):hover ~ .container-wrap .card,
|
|
.area:nth-child(4):hover ~ .container-wrap .eyes .eye {
|
|
transform: perspective(var(--perspective)) rotateX(15deg) rotateY(7deg)
|
|
translateZ(var(--translateY)) scale3d(1, 1, 1);
|
|
}
|
|
.area:nth-child(3):hover ~ .container-wrap .card,
|
|
.area:nth-child(3):hover ~ .container-wrap .eyes .eye {
|
|
transform: perspective(var(--perspective)) rotateX(15deg) rotateY(0)
|
|
translateZ(var(--translateY)) scale3d(1, 1, 1);
|
|
}
|
|
.area:nth-child(2):hover ~ .container-wrap .card,
|
|
.area:nth-child(2):hover ~ .container-wrap .eyes .eye {
|
|
transform: perspective(var(--perspective)) rotateX(15deg) rotateY(-7deg)
|
|
translateZ(var(--translateY)) scale3d(1, 1, 1);
|
|
}
|
|
.area:nth-child(1):hover ~ .container-wrap .card,
|
|
.area:nth-child(1):hover ~ .container-wrap .eyes .eye {
|
|
transform: perspective(var(--perspective)) rotateX(15deg)
|
|
rotateY(-15deg) translateZ(var(--translateY)) scale3d(1, 1, 1);
|
|
}
|
|
|
|
.area:nth-child(15):hover
|
|
~ .container-wrap
|
|
.card
|
|
.container-ai-chat
|
|
.chat
|
|
.options
|
|
button,
|
|
.area:nth-child(15):hover
|
|
~ .container-wrap
|
|
.card
|
|
.container-ai-chat
|
|
.chat
|
|
.chat-bot {
|
|
transform: perspective(var(--perspective)) rotateX(-10deg) rotateY(8deg)
|
|
translateZ(var(--translateY)) scale3d(1, 1, 1);
|
|
}
|
|
|
|
.area:nth-child(14):hover
|
|
~ .container-wrap
|
|
.card
|
|
.container-ai-chat
|
|
.chat
|
|
.options
|
|
button,
|
|
.area:nth-child(14):hover
|
|
~ .container-wrap
|
|
.card
|
|
.container-ai-chat
|
|
.chat
|
|
.chat-bot {
|
|
transform: perspective(var(--perspective)) rotateX(-10deg) rotateY(4deg)
|
|
translateZ(var(--translateY)) scale3d(1, 1, 1);
|
|
}
|
|
|
|
.area:nth-child(13):hover
|
|
~ .container-wrap
|
|
.card
|
|
.container-ai-chat
|
|
.chat
|
|
.options
|
|
button,
|
|
.area:nth-child(13):hover
|
|
~ .container-wrap
|
|
.card
|
|
.container-ai-chat
|
|
.chat
|
|
.chat-bot {
|
|
transform: perspective(var(--perspective)) rotateX(-10deg) rotateY(0deg)
|
|
translateZ(var(--translateY)) scale3d(1, 1, 1);
|
|
}
|
|
|
|
.area:nth-child(12):hover
|
|
~ .container-wrap
|
|
.card
|
|
.container-ai-chat
|
|
.chat
|
|
.options
|
|
button,
|
|
.area:nth-child(12):hover
|
|
~ .container-wrap
|
|
.card
|
|
.container-ai-chat
|
|
.chat
|
|
.chat-bot {
|
|
transform: perspective(var(--perspective)) rotateX(-10deg)
|
|
rotateY(-4deg) translateZ(var(--translateY)) scale3d(1, 1, 1);
|
|
}
|
|
|
|
.area:nth-child(11):hover
|
|
~ .container-wrap
|
|
.card
|
|
.container-ai-chat
|
|
.chat
|
|
.options
|
|
button,
|
|
.area:nth-child(11):hover
|
|
~ .container-wrap
|
|
.card
|
|
.container-ai-chat
|
|
.chat
|
|
.chat-bot {
|
|
transform: perspective(var(--perspective)) rotateX(-10deg)
|
|
rotateY(-8deg) translateZ(var(--translateY)) scale3d(1, 1, 1);
|
|
}
|
|
|
|
.area:nth-child(10):hover
|
|
~ .container-wrap
|
|
.card
|
|
.container-ai-chat
|
|
.chat
|
|
.options
|
|
button,
|
|
.area:nth-child(10):hover
|
|
~ .container-wrap
|
|
.card
|
|
.container-ai-chat
|
|
.chat
|
|
.chat-bot {
|
|
transform: perspective(var(--perspective)) rotateX(0deg) rotateY(8deg)
|
|
translateZ(var(--translateY)) scale3d(1, 1, 1);
|
|
}
|
|
|
|
.area:nth-child(9):hover
|
|
~ .container-wrap
|
|
.card
|
|
.container-ai-chat
|
|
.chat
|
|
.options
|
|
button,
|
|
.area:nth-child(9):hover
|
|
~ .container-wrap
|
|
.card
|
|
.container-ai-chat
|
|
.chat
|
|
.chat-bot {
|
|
transform: perspective(var(--perspective)) rotateX(0deg) rotateY(4deg)
|
|
translateZ(var(--translateY)) scale3d(1, 1, 1);
|
|
}
|
|
|
|
.area:nth-child(8):hover
|
|
~ .container-wrap
|
|
.card
|
|
.container-ai-chat
|
|
.chat
|
|
.options
|
|
button,
|
|
.area:nth-child(8):hover
|
|
~ .container-wrap
|
|
.card
|
|
.container-ai-chat
|
|
.chat
|
|
.chat-bot {
|
|
transform: perspective(var(--perspective)) rotateX(0deg) rotateY(0deg)
|
|
translateZ(var(--translateY)) scale3d(1, 1, 1);
|
|
}
|
|
|
|
.area:nth-child(7):hover
|
|
~ .container-wrap
|
|
.card
|
|
.container-ai-chat
|
|
.chat
|
|
.options
|
|
button,
|
|
.area:nth-child(7):hover
|
|
~ .container-wrap
|
|
.card
|
|
.container-ai-chat
|
|
.chat
|
|
.chat-bot {
|
|
transform: perspective(var(--perspective)) rotateX(0deg) rotateY(-4deg)
|
|
translateZ(var(--translateY)) scale3d(1, 1, 1);
|
|
}
|
|
|
|
.area:nth-child(6):hover
|
|
~ .container-wrap
|
|
.card
|
|
.container-ai-chat
|
|
.chat
|
|
.options
|
|
button,
|
|
.area:nth-child(6):hover
|
|
~ .container-wrap
|
|
.card
|
|
.container-ai-chat
|
|
.chat
|
|
.chat-bot {
|
|
transform: perspective(var(--perspective)) rotateX(0deg) rotateY(-8deg)
|
|
translateZ(var(--translateY)) scale3d(1, 1, 1);
|
|
}
|
|
|
|
.area:nth-child(5):hover
|
|
~ .container-wrap
|
|
.card
|
|
.container-ai-chat
|
|
.chat
|
|
.options
|
|
button,
|
|
.area:nth-child(5):hover
|
|
~ .container-wrap
|
|
.card
|
|
.container-ai-chat
|
|
.chat
|
|
.chat-bot {
|
|
transform: perspective(var(--perspective)) rotateX(10deg) rotateY(8deg)
|
|
translateZ(var(--translateY)) scale3d(1, 1, 1);
|
|
}
|
|
|
|
.area:nth-child(4):hover
|
|
~ .container-wrap
|
|
.card
|
|
.container-ai-chat
|
|
.chat
|
|
.options
|
|
button,
|
|
.area:nth-child(4):hover
|
|
~ .container-wrap
|
|
.card
|
|
.container-ai-chat
|
|
.chat
|
|
.chat-bot {
|
|
transform: perspective(var(--perspective)) rotateX(10deg) rotateY(4deg)
|
|
translateZ(var(--translateY)) scale3d(1, 1, 1);
|
|
}
|
|
|
|
.area:nth-child(3):hover
|
|
~ .container-wrap
|
|
.card
|
|
.container-ai-chat
|
|
.chat
|
|
.options
|
|
button,
|
|
.area:nth-child(3):hover
|
|
~ .container-wrap
|
|
.card
|
|
.container-ai-chat
|
|
.chat
|
|
.chat-bot {
|
|
transform: perspective(var(--perspective)) rotateX(10deg) rotateY(0deg)
|
|
translateZ(var(--translateY)) scale3d(1, 1, 1);
|
|
}
|
|
|
|
.area:nth-child(2):hover
|
|
~ .container-wrap
|
|
.card
|
|
.container-ai-chat
|
|
.chat
|
|
.options
|
|
button,
|
|
.area:nth-child(2):hover
|
|
~ .container-wrap
|
|
.card
|
|
.container-ai-chat
|
|
.chat
|
|
.chat-bot {
|
|
transform: perspective(var(--perspective)) rotateX(10deg) rotateY(-4deg)
|
|
translateZ(var(--translateY)) scale3d(1, 1, 1);
|
|
}
|
|
|
|
.area:nth-child(1):hover
|
|
~ .container-wrap
|
|
.card
|
|
.container-ai-chat
|
|
.chat
|
|
.options
|
|
button,
|
|
.area:nth-child(1):hover
|
|
~ .container-wrap
|
|
.card
|
|
.container-ai-chat
|
|
.chat
|
|
.chat-bot {
|
|
transform: perspective(var(--perspective)) rotateX(10deg) rotateY(-8deg)
|
|
translateZ(var(--translateY)) scale3d(1, 1, 1);
|
|
}
|
|
|
|
@keyframes rotate-background-balls {
|
|
from {
|
|
transform: translateX(-50%) translateY(-50%) rotate(360deg);
|
|
}
|
|
to {
|
|
transform: translateX(-50%) translateY(-50%) rotate(0);
|
|
}
|
|
}
|
|
|
|
@keyframes animate-eyes {
|
|
46% {
|
|
height: 52px;
|
|
}
|
|
48% {
|
|
height: 20px;
|
|
}
|
|
50% {
|
|
height: 52px;
|
|
}
|
|
96% {
|
|
height: 52px;
|
|
}
|
|
98% {
|
|
height: 20px;
|
|
}
|
|
100% {
|
|
height: 52px;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<!-- From Uiverse.io by Cobp -->
|
|
<div class="container-ai-input">
|
|
<div class="area"></div>
|
|
<div class="area"></div>
|
|
<div class="area"></div>
|
|
<div class="area"></div>
|
|
<div class="area"></div>
|
|
<div class="area"></div>
|
|
<div class="area"></div>
|
|
<div class="area"></div>
|
|
<div class="area"></div>
|
|
<div class="area"></div>
|
|
<div class="area"></div>
|
|
<div class="area"></div>
|
|
<div class="area"></div>
|
|
<div class="area"></div>
|
|
<div class="area"></div>
|
|
<label class="container-wrap">
|
|
<input type="checkbox" />
|
|
<div class="card">
|
|
<div class="background-blur-balls">
|
|
<div class="balls">
|
|
<span class="ball rosa"></span>
|
|
<span class="ball violet"></span>
|
|
<span class="ball green"></span>
|
|
<span class="ball cyan"></span>
|
|
</div>
|
|
</div>
|
|
<div class="content-card">
|
|
<div class="background-blur-card">
|
|
<div class="eyes">
|
|
<span class="eye"></span>
|
|
<span class="eye"></span>
|
|
</div>
|
|
<div class="eyes happy">
|
|
<svg fill="none" viewBox="0 0 24 24">
|
|
<path
|
|
fill="currentColor"
|
|
d="M8.28386 16.2843C8.9917 15.7665 9.8765 14.731 12 14.731C14.1235 14.731 15.0083 15.7665 15.7161 16.2843C17.8397 17.8376 18.7542 16.4845 18.9014 15.7665C19.4323 13.1777 17.6627 11.1066 17.3088 10.5888C16.3844 9.23666 14.1235 8 12 8C9.87648 8 7.61556 9.23666 6.69122 10.5888C6.33728 11.1066 4.56771 13.1777 5.09858 15.7665C5.24582 16.4845 6.16034 17.8376 8.28386 16.2843Z"
|
|
></path>
|
|
</svg>
|
|
<svg fill="none" viewBox="0 0 24 24">
|
|
<path
|
|
fill="currentColor"
|
|
d="M8.28386 16.2843C8.9917 15.7665 9.8765 14.731 12 14.731C14.1235 14.731 15.0083 15.7665 15.7161 16.2843C17.8397 17.8376 18.7542 16.4845 18.9014 15.7665C19.4323 13.1777 17.6627 11.1066 17.3088 10.5888C16.3844 9.23666 14.1235 8 12 8C9.87648 8 7.61556 9.23666 6.69122 10.5888C6.33728 11.1066 4.56771 13.1777 5.09858 15.7665C5.24582 16.4845 6.16034 17.8376 8.28386 16.2843Z"
|
|
></path>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="container-ai-chat">
|
|
<div class="chat">
|
|
<div class="chat-bot">
|
|
<textarea
|
|
placeholder="Imagine Something...✦˚"
|
|
name="chat_bot"
|
|
id="chat_bot"
|
|
></textarea>
|
|
</div>
|
|
<div class="options">
|
|
<div class="btns-add">
|
|
<button>
|
|
<svg
|
|
viewBox="0 0 24 24"
|
|
height="20"
|
|
width="20"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M7 8v8a5 5 0 1 0 10 0V6.5a3.5 3.5 0 1 0-7 0V15a2 2 0 0 0 4 0V8"
|
|
stroke-width="2"
|
|
stroke-linejoin="round"
|
|
stroke-linecap="round"
|
|
stroke="currentColor"
|
|
fill="none"
|
|
></path>
|
|
</svg>
|
|
</button>
|
|
<button>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="20"
|
|
height="20"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M4 5a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1zm0 10a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1zm10 0a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1zm0-8h6m-3-3v6"
|
|
></path>
|
|
</svg>
|
|
</button>
|
|
<button>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="20"
|
|
height="20"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
fill="currentColor"
|
|
d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10s-4.477 10-10 10m-2.29-2.333A17.9 17.9 0 0 1 8.027 13H4.062a8.01 8.01 0 0 0 5.648 6.667M10.03 13c.151 2.439.848 4.73 1.97 6.752A15.9 15.9 0 0 0 13.97 13zm9.908 0h-3.965a17.9 17.9 0 0 1-1.683 6.667A8.01 8.01 0 0 0 19.938 13M4.062 11h3.965A17.9 17.9 0 0 1 9.71 4.333A8.01 8.01 0 0 0 4.062 11m5.969 0h3.938A15.9 15.9 0 0 0 12 4.248A15.9 15.9 0 0 0 10.03 11m4.259-6.667A17.9 17.9 0 0 1 15.973 11h3.965a8.01 8.01 0 0 0-5.648-6.667"
|
|
></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<button class="btn-submit">
|
|
<i>
|
|
<svg viewBox="0 0 512 512">
|
|
<path
|
|
d="M473 39.05a24 24 0 0 0-25.5-5.46L47.47 185h-.08a24 24 0 0 0 1 45.16l.41.13l137.3 58.63a16 16 0 0 0 15.54-3.59L422 80a7.07 7.07 0 0 1 10 10L226.66 310.26a16 16 0 0 0-3.59 15.54l58.65 137.38c.06.2.12.38.19.57c3.2 9.27 11.3 15.81 21.09 16.25h1a24.63 24.63 0 0 0 23-15.46L478.39 64.62A24 24 0 0 0 473 39.05"
|
|
fill="currentColor"
|
|
></path>
|
|
</svg>
|
|
</i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</label>
|
|
</div>
|
|
<div>123123</div>
|
|
</body>
|
|
</html>
|