Spaces:
Sleeping
Sleeping
File size: 3,470 Bytes
19502b9 65e3af8 19502b9 655a07e 19502b9 655a07e 19502b9 655a07e 19502b9 655a07e 489e308 19502b9 489e308 19502b9 489e308 19502b9 489e308 19502b9 489e308 19502b9 489e308 19502b9 655a07e |
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 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 |
/* ---------- GLOBAL STYLES ---------- */
body {
font-family: 'Poppins', sans-serif;
background: linear-gradient(to bottom right, #bfdbfe, #a5b4fc);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
}
/* ---------- CARD CONTAINER ---------- */
.container {
background: rgba(255, 255, 255, 0.9);
border-radius: 35px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
backdrop-filter: blur(10px);
border: 1px solid rgba(147, 197, 253, 0.3);
padding: 2rem;
}
/* ---------- INPUT AREA ---------- */
textarea {
border-radius: 30px;
border: 1px solid #c7d2fe;
background-color: #eef2ff;
padding: 1rem 1.25rem;
font-size: 1.05rem;
color: #1e293b;
width: 100%;
box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.05);
resize: vertical;
transition: all 0.25s ease;
}
textarea:focus {
outline: none;
border-color: #6366f1;
background-color: #e0e7ff;
box-shadow: 0 0 8px rgba(99, 102, 241, 0.5);
}
/* ---------- BUTTON ---------- */
button {
font-weight: 700;
border: none;
border-radius: 30px;
background: linear-gradient(90deg, #2563eb, #7c3aed, #9333ea);
color: white;
padding: 1rem;
width: 100%;
font-size: 1.15rem;
letter-spacing: 0.5px;
box-shadow: 0 4px 10px rgba(99, 102, 241, 0.3);
transition: all 0.3s ease;
}
button:hover {
transform: scale(1.03);
box-shadow: 0 8px 18px rgba(99, 102, 241, 0.4);
background: linear-gradient(90deg, #3b82f6, #8b5cf6, #a855f7);
}
/* ---------- ANSWER BOX ---------- */
#answer-box {
background: linear-gradient(to bottom right, #eef2ff, #e0f2fe);
border: 1px solid #c7d2fe;
border-radius: 30px;
padding: 1.25rem;
font-size: 1.05rem;
color: #1e293b;
max-height: 350px;
overflow-y: auto;
box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.05);
}
/* ---------- HISTORY BOX ---------- */
#history-list {
max-height: 200px;
overflow-y: auto;
}
#history-list li {
background: linear-gradient(to right, #e0e7ff, #f3e8ff);
padding: 0.9rem 1.2rem;
border-radius: 20px;
cursor: pointer;
transition: all 0.25s ease;
font-weight: 500;
}
#history-list li:hover {
transform: scale(1.03);
background: linear-gradient(to right, #c7d2fe, #ddd6fe);
}
/* ---------- SCROLLBAR ---------- */
#answer-box::-webkit-scrollbar,
#history-list::-webkit-scrollbar {
width: 8px;
}
#answer-box::-webkit-scrollbar-thumb,
#history-list::-webkit-scrollbar-thumb {
background-color: rgba(99, 102, 241, 0.6);
border-radius: 6px;
}
/* ---------- TYPING EFFECT ---------- */
.typing {
border-right: 3px solid #6366f1;
white-space: nowrap;
overflow: hidden;
animation: typing 3s steps(40, end), blink 0.8s infinite;
}
@keyframes typing {
from { width: 0; }
to { width: 100%; }
}
@keyframes blink {
50% { border-color: transparent; }
}
/* ---------- SHIMMER LOADING ---------- */
.shimmer {
background: linear-gradient(
100deg,
rgba(255,255,255,0) 20%,
rgba(255,255,255,0.6) 50%,
rgba(255,255,255,0) 80%
);
background-size: 200% 100%;
animation: shimmer 1.5s infinite;
height: 80px;
border-radius: 25px;
margin-bottom: 10px;
}
@keyframes shimmer {
100% { background-position: -200% 0; }
}
/* ---------- TITLES ---------- */
h1, h2 {
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
/* ---------- RESPONSIVE ---------- */
@media (max-width: 640px) {
textarea, button {
font-size: 1rem;
}
h1 {
font-size: 1.9rem;
}
h2 {
font-size: 1.4rem;
}
}
|