diff --git a/live.html b/live.html index 147ac14..562e9b3 100644 --- a/live.html +++ b/live.html @@ -35,12 +35,25 @@ overflow-y: auto; scrollbar-width: thin; scrollbar-color: #0f0 #000; + margin-bottom: 80px; + padding: 20px; } + .response { - opacity: 0; + background-color: rgba(0, 0, 0, 0.8); + border: 1px solid #0f0; + border-radius: 10px; + margin-bottom: 15px; + padding: 15px; + box-shadow: 0 0 10px #0f0; + color: #0f0; + text-align: left; + font-size: 16px; + line-height: 1.5; animation: fadeInUp 1s forwards; animation-delay: var(--animation-order); } + @keyframes fadeInUp { from { opacity: 0; @@ -89,6 +102,38 @@ font-size: 14px; animation: fadeIn 2s ease-in-out; } + .pagination-button { + position: absolute; + bottom: 20px; + font-size: 18px; + cursor: pointer; + border: 2px solid #0f0; + border-radius: 20px; + padding: 10px 20px; + transition: all 0.3s ease-in-out; + } + .prev-button { + left: calc(50% - 120px); + background-color: #0f0; + color: #000; + box-shadow: 0 0 10px #0f0, 0 0 20px #0f0; + } + .prev-button:hover { + background-color: #000; + color: #0f0; + box-shadow: 0 0 20px #0f0, 0 0 40px #0f0; + } + .next-button { + left: calc(50% + 20px); + background-color: #0f0; + color: #000; + box-shadow: 0 0 10px #0f0, 0 0 20px #0f0; + } + .next-button:hover { + background-color: #000; + color: #0f0; + box-shadow: 0 0 20px #0f0, 0 0 40px #0f0; + } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } @@ -110,11 +155,11 @@