ai: Release demo playground source code.

assets/css/animation/style.css

@@ -0,0 +1,1628 @@
+/*
+ * SPDX-FileCopyrightText: Hadad <[email protected]>
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+.loading {
+  display: inline-block;
+  width: 1.1rem;
+  height: 1.1rem;
+  border: 2px solid #999;
+  border-top-color: transparent;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes fadeIn {
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fadeInDown {
+  from {
+    opacity: 0;
+    transform: translateY(-20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideInUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.pulse-animation {
+  animation: pulse 2s infinite;
+}
+
+@keyframes pulse {
+  0% {
+    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4);
+  }
+  70% {
+    box-shadow: 0 0 0 10px rgba(59, 130, 246, 0);
+  }
+  100% {
+    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
+  }
+}
+
+.floating-animation {
+  animation: floating 3s ease-in-out infinite;
+}
+
+@keyframes floating {
+  0% {
+    transform: translateY(0px);
+  }
+  50% {
+    transform: translateY(-10px);
+  }
+  100% {
+    transform: translateY(0px);
+  }
+}
+
+.gradient-text {
+  background: linear-gradient(90deg, #3b82f6, #8b5cf6, #ec4899);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.typing-animation::after {
+  content: "|";
+  animation: blink 1s infinite;
+  margin-left: 2px;
+}
+
+@keyframes blink {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0; }
+}
+
+.shine-effect {
+  position: relative;
+  overflow: hidden;
+}
+
+.shine-effect::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+  transition: 0.5s;
+}
+
+.shine-effect:hover::before {
+  left: 100%;
+}
+
+.bounce-in {
+  animation: bounceIn 0.6s ease-out;
+}
+
+@keyframes bounceIn {
+  0% {
+    transform: scale(0.8);
+    opacity: 0;
+  }
+  50% {
+    transform: scale(1.05);
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+.slide-in-left {
+  animation: slideInLeft 0.5s ease-out;
+}
+
+@keyframes slideInLeft {
+  from {
+    transform: translateX(-100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+.slide-in-right {
+  animation: slideInRight 0.5s ease-out;
+}
+
+@keyframes slideInRight {
+  from {
+    transform: translateX(100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+.zoom-in {
+  animation: zoomIn 0.4s ease-out;
+}
+
+@keyframes zoomIn {
+  from {
+    transform: scale(0.8);
+    opacity: 0;
+  }
+  to {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+.flip-in {
+  animation: flipIn 0.6s ease-out;
+}
+
+@keyframes flipIn {
+  from {
+    transform: rotateY(90deg);
+    opacity: 0;
+  }
+  to {
+    transform: rotateY(0deg);
+    opacity: 1;
+  }
+}
+
+.fade-in-up {
+  animation: fadeInUp 0.5s ease-out;
+}
+
+@keyframes fadeInUp {
+  from {
+    transform: translateY(20px);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+.fade-in-down {
+  animation: fadeInDown 0.5s ease-out;
+}
+
+@keyframes fadeInDown {
+  from {
+    transform: translateY(-20px);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+.rotate-in {
+  animation: rotateIn 0.6s ease-out;
+}
+
+@keyframes rotateIn {
+  from {
+    transform: rotate(15deg);
+    opacity: 0;
+  }
+  to {
+    transform: rotate(0deg);
+    opacity: 1;
+  }
+}
+
+.scale-pulse {
+  animation: scalePulse 1.5s infinite;
+}
+
+@keyframes scalePulse {
+  0%, 100% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.05);
+  }
+}
+
+.wave-animation {
+  animation: wave 2s infinite linear;
+}
+
+@keyframes wave {
+  0% {
+    background-position: 0 0;
+  }
+  100% {
+    background-position: 100% 0;
+  }
+}
+
+.glow-effect {
+  box-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
+  transition: box-shadow 0.3s ease;
+}
+
+.glow-effect:hover {
+  box-shadow: 0 0 20px rgba(59, 130, 246, 0.8);
+}
+
+.neon-glow {
+  text-shadow: 0 0 5px #3b82f6, 0 0 10px #3b82f6, 0 0 15px #3b82f6, 0 0 20px #3b82f6;
+  animation: neonPulse 2s infinite alternate;
+}
+
+@keyframes neonPulse {
+  from {
+    text-shadow: 0 0 5px #3b82f6, 0 0 10px #3b82f6, 0 0 15px #3b82f6, 0 0 20px #3b82f6;
+  }
+  to {
+    text-shadow: 0 0 10px #3b82f6, 0 0 20px #3b82f6, 0 0 30px #3b82f6, 0 0 40px #3b82f6;
+  }
+}
+
+.rainbow-text {
+  background: linear-gradient(90deg, #ff0000, #ff8000, #ffff00, #80ff00, #00ff00, #00ff80, #00ffff, #0080ff, #0000ff, #8000ff, #ff00ff, #ff0080);
+  background-size: 200% 200%;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  animation: rainbow 3s linear infinite;
+}
+
+@keyframes rainbow {
+  0% {
+    background-position: 0% 50%;
+  }
+  100% {
+    background-position: 200% 50%;
+  }
+}
+
+.hologram-effect {
+  position: relative;
+  overflow: hidden;
+}
+
+.hologram-effect::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(45deg, rgba(255,255,255,0.1) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.1) 75%, transparent 75%, transparent);
+  background-size: 20px 20px;
+  animation: hologram 1s linear infinite;
+  pointer-events: none;
+}
+
+@keyframes hologram {
+  0% {
+    background-position: 0 0;
+  }
+  100% {
+    background-position: 20px 20px;
+  }
+}
+
+.matrix-effect {
+  position: relative;
+  overflow: hidden;
+}
+
+.matrix-effect::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(rgba(0, 255, 0, 0.1) 50%, transparent 50%);
+  background-size: 100% 4px;
+  animation: matrix 0.5s linear infinite;
+  pointer-events: none;
+}
+
+@keyframes matrix {
+  0% {
+    background-position: 0 0;
+  }
+  100% {
+    background-position: 0 4px;
+  }
+}
+
+.glass-effect {
+  background: rgba(255, 255, 255, 0.05);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.card-hover {
+  transition: all 0.3s ease;
+  transform: translateY(0);
+}
+
+.card-hover:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
+}
+
+.text-glow {
+  text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
+  transition: text-shadow 0.3s ease;
+}
+
+.text-glow:hover {
+  text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
+}
+
+.border-glow {
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  transition: border-color 0.3s ease;
+}
+
+.border-glow:hover {
+  border-color: rgba(59, 130, 246, 0.5);
+}
+
+.shadow-glow {
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  transition: box-shadow 0.3s ease;
+}
+
+.shadow-glow:hover {
+  box-shadow: 0 8px 15px rgba(59, 130, 246, 0.3);
+}
+
+.pulse-glow {
+  animation: pulseGlow 2s infinite;
+}
+
+@keyframes pulseGlow {
+  0% {
+    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4);
+  }
+  70% {
+    box-shadow: 0 0 0 10px rgba(59, 130, 246, 0);
+  }
+  100% {
+    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
+  }
+}
+
+.floating-glow {
+  animation: floatingGlow 3s ease-in-out infinite;
+}
+
+@keyframes floatingGlow {
+  0% {
+    transform: translateY(0);
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  }
+  50% {
+    transform: translateY(-10px);
+    box-shadow: 0 10px 20px rgba(59, 130, 246, 0.3);
+  }
+  100% {
+    transform: translateY(0);
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  }
+}
+
+.rotate-glow {
+  animation: rotateGlow 4s linear infinite;
+}
+
+@keyframes rotateGlow {
+  0% {
+    transform: rotate(0deg);
+    box-shadow: 0 0 5px rgba(59, 130, 246, 0.5);
+  }
+  25% {
+    box-shadow: 5px 0 5px rgba(59, 130, 246, 0.5);
+  }
+  50% {
+    box-shadow: 0 -5px 5px rgba(59, 130, 246, 0.5);
+  }
+  75% {
+    box-shadow: -5px 0 5px rgba(59, 130, 246, 0.5);
+  }
+  100% {
+    transform: rotate(360deg);
+    box-shadow: 0 0 5px rgba(59, 130, 246, 0.5);
+  }
+}
+
+.wave-glow {
+  position: relative;
+  overflow: hidden;
+}
+
+.wave-glow::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.2), transparent);
+  animation: waveGlow 2s linear infinite;
+}
+
+@keyframes waveGlow {
+  0% {
+    left: -100%;
+  }
+  100% {
+    left: 100%;
+  }
+}
+
+.sparkle {
+  position: relative;
+}
+
+.sparkle::before {
+  content: "";
+  position: absolute;
+  top: -2px;
+  right: -2px;
+  width: 6px;
+  height: 6px;
+  background: #fff;
+  border-radius: 50%;
+  box-shadow: 0 0 10px #fff, 0 0 20px #fff;
+  animation: sparkle 1.5s infinite;
+}
+
+@keyframes sparkle {
+  0%, 100% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 1;
+  }
+}
+
+.shimmer {
+  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0) 100%);
+  background-size: 200% 100%;
+  animation: shimmer 2s infinite;
+}
+
+@keyframes shimmer {
+  0% {
+    background-position: -200% 0;
+  }
+  100% {
+    background-position: 200% 0;
+  }
+}
+
+.ripple {
+  position: relative;
+  overflow: hidden;
+}
+
+.ripple::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 0;
+  height: 0;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.2);
+  transform: translate(-50%, -50%);
+  opacity: 0;
+}
+
+.ripple:active::after {
+  width: 200px;
+  height: 200px;
+  opacity: 1;
+  transition: width 0.3s, height 0.3s, opacity 0.3s;
+}
+
+.morph {
+  transition: all 0.3s ease;
+  border-radius: 10px;
+}
+
+.morph:hover {
+  border-radius: 20px;
+}
+
+.tilt {
+  transition: transform 0.3s ease;
+  transform-style: preserve-3d;
+}
+
+.tilt:hover {
+  transform: rotateY(10deg) rotateX(10deg);
+}
+
+.pop {
+  transition: all 0.2s ease;
+}
+
+.pop:active {
+  transform: scale(0.95);
+}
+
+.skew {
+  transition: transform 0.3s ease;
+}
+
+.skew:hover {
+  transform: skew(-5deg);
+}
+
+.stretch {
+  transition: all 0.3s ease;
+}
+
+.stretch:hover {
+  transform: scaleX(1.05);
+}
+
+.compress {
+  transition: all 0.3s ease;
+}
+
+.compress:hover {
+  transform: scaleY(0.95);
+}
+
+.swing {
+  transition: transform 0.3s ease;
+  transform-origin: top center;
+}
+
+.swing:hover {
+  transform: rotate(5deg);
+}
+
+.wobble {
+  animation: wobble 1s ease-in-out;
+}
+
+@keyframes wobble {
+  0%, 100% {
+    transform: translateX(0);
+  }
+  25% {
+    transform: translateX(-10px);
+  }
+  75% {
+    transform: translateX(10px);
+  }
+}
+
+.jello {
+  animation: jello 0.6s ease;
+}
+
+@keyframes jello {
+  0%, 100% {
+    transform: scale(1, 1);
+  }
+  25% {
+    transform: scale(1.1, 0.9);
+  }
+  50% {
+    transform: scale(0.9, 1.1);
+  }
+  75% {
+    transform: scale(1.05, 0.95);
+  }
+}
+
+.heartbeat {
+  animation: heartbeat 1.5s ease-in-out infinite;
+}
+
+@keyframes heartbeat {
+  0%, 100% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.1);
+  }
+}
+
+.bounce {
+  animation: bounce 1s infinite;
+}
+
+@keyframes bounce {
+  0%, 100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-20px);
+  }
+}
+
+.flip {
+  animation: flip 1s ease;
+}
+
+@keyframes flip {
+  0% {
+    transform: rotateY(0deg);
+  }
+  100% {
+    transform: rotateY(360deg);
+  }
+}
+
+.roll {
+  animation: roll 1s ease;
+}
+
+@keyframes roll {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.rubberBand {
+  animation: rubberBand 1s ease;
+}
+
+@keyframes rubberBand {
+  0%, 100% {
+    transform: scale(1, 1);
+  }
+  30% {
+    transform: scaleX(1.25) scaleY(0.75);
+  }
+  40% {
+    transform: scaleX(0.75) scaleY(1.25);
+  }
+  60% {
+    transform: scaleX(1.15) scaleY(0.85);
+  }
+}
+
+.shake {
+  animation: shake 0.5s ease;
+}
+
+@keyframes shake {
+  0%, 100% {
+    transform: translateX(0);
+  }
+  25% {
+    transform: translateX(-5px);
+  }
+  75% {
+    transform: translateX(5px);
+  }
+}
+
+.tada {
+  animation: tada 1s ease;
+}
+
+@keyframes tada {
+  0%, 100% {
+    transform: scale(1);
+  }
+  10%, 20% {
+    transform: scale(0.9) rotate(-3deg);
+  }
+  30%, 50%, 70%, 90% {
+    transform: scale(1.1) rotate(3deg);
+  }
+  40%, 60%, 80% {
+    transform: scale(1.1) rotate(-3deg);
+  }
+}
+
+.lightSpeedIn {
+  animation: lightSpeedIn 0.5s ease-out;
+}
+
+@keyframes lightSpeedIn {
+  0% {
+    transform: translateX(100%) skewX(-30deg);
+    opacity: 0;
+  }
+  60% {
+    transform: translateX(-20%) skewX(30deg);
+    opacity: 1;
+  }
+  80% {
+    transform: translateX(0%) skewX(-15deg);
+    opacity: 1;
+  }
+  100% {
+    transform: translateX(0%) skewX(0deg);
+    opacity: 1;
+  }
+}
+
+.lightSpeedOut {
+  animation: lightSpeedOut 0.5s ease-in;
+}
+
+@keyframes lightSpeedOut {
+  0% {
+    transform: translateX(0%) skewX(0deg);
+    opacity: 1;
+  }
+  100% {
+    transform: translateX(100%) skewX(-30deg);
+    opacity: 0;
+  }
+}
+
+.rotateInDownLeft {
+  animation: rotateInDownLeft 0.6s ease-out;
+}
+
+@keyframes rotateInDownLeft {
+  0% {
+    transform-origin: left bottom;
+    transform: rotate(-90deg);
+    opacity: 0;
+  }
+  100% {
+    transform-origin: left bottom;
+    transform: rotate(0deg);
+    opacity: 1;
+  }
+}
+
+.rotateInDownRight {
+  animation: rotateInDownRight 0.6s ease-out;
+}
+
+@keyframes rotateInDownRight {
+  0% {
+    transform-origin: right bottom;
+    transform: rotate(90deg);
+    opacity: 0;
+  }
+  100% {
+    transform-origin: right bottom;
+    transform: rotate(0deg);
+    opacity: 1;
+  }
+}
+
+.rotateInUpLeft {
+  animation: rotateInUpLeft 0.6s ease-out;
+}
+
+@keyframes rotateInUpLeft {
+  0% {
+    transform-origin: left bottom;
+    transform: rotate(90deg);
+    opacity: 0;
+  }
+  100% {
+    transform-origin: left bottom;
+    transform: rotate(0deg);
+    opacity: 1;
+  }
+}
+
+.rotateInUpRight {
+  animation: rotateInUpRight 0.6s ease-out;
+}
+
+@keyframes rotateInUpRight {
+  0% {
+    transform-origin: right bottom;
+    transform: rotate(-90deg);
+    opacity: 0;
+  }
+  100% {
+    transform-origin: right bottom;
+    transform: rotate(0deg);
+    opacity: 1;
+  }
+}
+
+.hinge {
+  animation: hinge 2s ease;
+}
+
+@keyframes hinge {
+  0% {
+    transform-origin: top left;
+    animation-timing-function: ease-in-out;
+  }
+  20%, 60% {
+    transform: rotate(80deg);
+    transform-origin: top left;
+    animation-timing-function: ease-in-out;
+  }
+  40%, 80% {
+    transform: rotate(60deg);
+    transform-origin: top left;
+    animation-timing-function: ease-in-out;
+    opacity: 1;
+  }
+  100% {
+    transform: translateY(700px);
+    opacity: 0;
+  }
+}
+
+.jackInTheBox {
+  animation: jackInTheBox 0.7s ease;
+}
+
+@keyframes jackInTheBox {
+  0% {
+    opacity: 0;
+    transform: scale(0.1) rotate(30deg);
+    transform-origin: center bottom;
+  }
+  50% {
+    transform: rotate(-10deg);
+  }
+  70% {
+    transform: rotate(3deg);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.rollIn {
+  animation: rollIn 0.7s ease;
+}
+
+@keyframes rollIn {
+  0% {
+    opacity: 0;
+    transform: translateX(-100%) rotate(-120deg);
+  }
+  100% {
+    opacity: 1;
+    transform: translateX(0) rotate(0deg);
+  }
+}
+
+.rollOut {
+  animation: rollOut 0.7s ease;
+}
+
+@keyframes rollOut {
+  0% {
+    opacity: 1;
+    transform: translateX(0) rotate(0deg);
+  }
+  100% {
+    opacity: 0;
+    transform: translateX(100%) rotate(120deg);
+  }
+}
+
+.zoomInDown {
+  animation: zoomInDown 0.6s ease;
+}
+
+@keyframes zoomInDown {
+  0% {
+    opacity: 0;
+    transform: scale(0.1) translateY(-1000px);
+    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+  }
+  60% {
+    opacity: 1;
+    transform: scale(0.475) translateY(60px);
+    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+  }
+}
+
+.zoomInLeft {
+  animation: zoomInLeft 0.6s ease;
+}
+
+@keyframes zoomInLeft {
+  0% {
+    opacity: 0;
+    transform: scale(0.1) translateX(-1000px);
+    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+  }
+  60% {
+    opacity: 1;
+    transform: scale(0.475) translateX(10px);
+    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+  }
+}
+
+.zoomInRight {
+  animation: zoomInRight 0.6s ease;
+}
+
+@keyframes zoomInRight {
+  0% {
+    opacity: 0;
+    transform: scale(0.1) translateX(1000px);
+    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+  }
+  60% {
+    opacity: 1;
+    transform: scale(0.475) translateX(-10px);
+    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+  }
+}
+
+.zoomInUp {
+  animation: zoomInUp 0.6s ease;
+}
+
+@keyframes zoomInUp {
+  0% {
+    opacity: 0;
+    transform: scale(0.1) translateY(1000px);
+    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+  }
+  60% {
+    opacity: 1;
+    transform: scale(0.475) translateY(-60px);
+    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+  }
+}
+
+.zoomOut {
+  animation: zoomOut 0.6s ease;
+}
+
+@keyframes zoomOut {
+  0% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0;
+    transform: scale(0.3);
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+.zoomOutDown {
+  animation: zoomOutDown 0.6s ease;
+}
+
+@keyframes zoomOutDown {
+  40% {
+    opacity: 1;
+    transform: scale(0.475) translateY(-60px);
+    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+  }
+  100% {
+    opacity: 0;
+    transform: scale(0.1) translateY(2000px);
+    transform-origin: center bottom;
+    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+  }
+}
+
+.zoomOutLeft {
+  animation: zoomOutLeft 0.6s ease;
+}
+
+@keyframes zoomOutLeft {
+  40% {
+    opacity: 1;
+    transform: scale(0.475) translateX(42px);
+    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+  }
+  100% {
+    opacity: 0;
+    transform: scale(0.1) translateX(-2000px);
+    transform-origin: left center;
+    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+  }
+}
+
+.zoomOutRight {
+  animation: zoomOutRight 0.6s ease;
+}
+
+@keyframes zoomOutRight {
+  40% {
+    opacity: 1;
+    transform: scale(0.475) translateX(-42px);
+    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+  }
+  100% {
+    opacity: 0;
+    transform: scale(0.1) translateX(2000px);
+    transform-origin: right center;
+    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+  }
+}
+
+.zoomOutUp {
+  animation: zoomOutUp 0.6s ease;
+}
+
+@keyframes zoomOutUp {
+  40% {
+    opacity: 1;
+    transform: scale(0.475) translateY(60px);
+    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+  }
+  100% {
+    opacity: 0;
+    transform: scale(0.1) translateY(-2000px);
+    transform-origin: center top;
+    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+  }
+}
+
+.slideInDown {
+  animation: slideInDown 0.5s ease-out;
+}
+
+@keyframes slideInDown {
+  from {
+    transform: translateY(-100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+.slideInLeft {
+  animation: slideInLeft 0.5s ease-out;
+}
+
+@keyframes slideInLeft {
+  from {
+    transform: translateX(-100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+.slideInRight {
+  animation: slideInRight 0.5s ease-out;
+}
+
+@keyframes slideInRight {
+  from {
+    transform: translateX(100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+.slideInUp {
+  animation: slideInUp 0.5s ease-out;
+}
+
+@keyframes slideInUp {
+  from {
+    transform: translateY(100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+.slideOutDown {
+  animation: slideOutDown 0.5s ease-out;
+}
+
+@keyframes slideOutDown {
+  from {
+    transform: translateY(0);
+    opacity: 1;
+  }
+  to {
+    transform: translateY(100%);
+    opacity: 0;
+  }
+}
+
+.slideOutLeft {
+  animation: slideOutLeft 0.5s ease-out;
+}
+
+@keyframes slideOutLeft {
+  from {
+    transform: translateX(0);
+    opacity: 1;
+  }
+  to {
+    transform: translateX(-100%);
+    opacity: 0;
+  }
+}
+
+.slideOutRight {
+  animation: slideOutRight 0.5s ease-out;
+}
+
+@keyframes slideOutRight {
+  from {
+    transform: translateX(0);
+    opacity: 1;
+  }
+  to {
+    transform: translateX(100%);
+    opacity: 0;
+  }
+}
+
+.slideOutUp {
+  animation: slideOutUp 0.5s ease-out;
+}
+
+@keyframes slideOutUp {
+  from {
+    transform: translateY(0);
+    opacity: 1;
+  }
+  to {
+    transform: translateY(-100%);
+    opacity: 0;
+  }
+}
+
+.fadeIn {
+  animation: fadeIn 0.5s ease-out;
+}
+
+.fadeOut {
+  animation: fadeOut 0.5s ease-out;
+}
+
+@keyframes fadeOut {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+.fadeInDown {
+  animation: fadeInDown 0.5s ease-out;
+}
+
+.fadeOutDown {
+  animation: fadeOutDown 0.5s ease-out;
+}
+
+@keyframes fadeOutDown {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+    transform: translateY(100%);
+  }
+}
+
+.fadeInDownBig {
+  animation: fadeInDownBig 0.5s ease-out;
+}
+
+@keyframes fadeInDownBig {
+  from {
+    opacity: 0;
+    transform: translateY(-2000px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.fadeOutDownBig {
+  animation: fadeOutDownBig 0.5s ease-out;
+}
+
+@keyframes fadeOutDownBig {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+    transform: translateY(2000px);
+  }
+}
+
+.fadeInLeft {
+  animation: fadeInLeft 0.5s ease-out;
+}
+
+.fadeOutLeft {
+  animation: fadeOutLeft 0.5s ease-out;
+}
+
+@keyframes fadeOutLeft {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+    transform: translateX(-100%);
+  }
+}
+
+.fadeInLeftBig {
+  animation: fadeInLeftBig 0.5s ease-out;
+}
+
+@keyframes fadeInLeftBig {
+  from {
+    opacity: 0;
+    transform: translateX(-2000px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+.fadeOutLeftBig {
+  animation: fadeOutLeftBig 0.5s ease-out;
+}
+
+@keyframes fadeOutLeftBig {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+    transform: translateX(-2000px);
+  }
+}
+
+.fadeInRight {
+  animation: fadeInRight 0.5s ease-out;
+}
+
+.fadeOutRight {
+  animation: fadeOutRight 0.5s ease-out;
+}
+
+@keyframes fadeOutRight {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+    transform: translateX(100%);
+  }
+}
+
+.fadeInRightBig {
+  animation: fadeInRightBig 0.5s ease-out;
+}
+
+@keyframes fadeInRightBig {
+  from {
+    opacity: 0;
+    transform: translateX(2000px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+.fadeOutRightBig {
+  animation: fadeOutRightBig 0.5s ease-out;
+}
+
+@keyframes fadeOutRightBig {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+    transform: translateX(2000px);
+  }
+}
+
+.fadeInUp {
+  animation: fadeInUp 0.5s ease-out;
+}
+
+.fadeOutUp {
+  animation: fadeOutUp 0.5s ease-out;
+}
+
+@keyframes fadeOutUp {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+    transform: translateY(-100%);
+  }
+}
+
+.fadeInUpBig {
+  animation: fadeInUpBig 0.5s ease-out;
+}
+
+@keyframes fadeInUpBig {
+  from {
+    opacity: 0;
+    transform: translateY(2000px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.fadeOutUpBig {
+  animation: fadeOutUpBig 0.5s ease-out;
+}
+
+@keyframes fadeOutUpBig {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+    transform: translateY(-2000px);
+  }
+}
+
+.flipInX {
+  animation: flipInX 0.6s ease;
+}
+
+@keyframes flipInX {
+  0% {
+    transform: perspective(400px) rotateX(90deg);
+    opacity: 0;
+  }
+  40% {
+    transform: perspective(400px) rotateX(-10deg);
+  }
+  70% {
+    transform: perspective(400px) rotateX(10deg);
+  }
+  100% {
+    transform: perspective(400px) rotateX(0deg);
+    opacity: 1;
+  }
+}
+
+.flipInY {
+  animation: flipInY 0.6s ease;
+}
+
+@keyframes flipInY {
+  0% {
+    transform: perspective(400px) rotateY(90deg);
+    opacity: 0;
+  }
+  40% {
+    transform: perspective(400px) rotateY(-10deg);
+  }
+  70% {
+    transform: perspective(400px) rotateY(10deg);
+  }
+  100% {
+    transform: perspective(400px) rotateY(0deg);
+    opacity: 1;
+  }
+}
+
+.flipOutX {
+  animation: flipOutX 0.6s ease;
+}
+
+@keyframes flipOutX {
+  0% {
+    transform: perspective(400px) rotateX(0deg);
+    opacity: 1;
+  }
+  100% {
+    transform: perspective(400px) rotateX(90deg);
+    opacity: 0;
+  }
+}
+
+.flipOutY {
+  animation: flipOutY 0.6s ease;
+}
+
+@keyframes flipOutY {
+  0% {
+    transform: perspective(400px) rotateY(0deg);
+    opacity: 1;
+  }
+  100% {
+    transform: perspective(400px) rotateY(90deg);
+    opacity: 0;
+  }
+}
+
+.lightSpeedInRight {
+  animation: lightSpeedInRight 0.5s ease-out;
+}
+
+@keyframes lightSpeedInRight {
+  0% {
+    transform: translateX(-100%) skewX(30deg);
+    opacity: 0;
+  }
+  60% {
+    transform: translateX(20%) skewX(-30deg);
+    opacity: 1;
+  }
+  80% {
+    transform: translateX(0%) skewX(15deg);
+    opacity: 1;
+  }
+  100% {
+    transform: translateX(0%) skewX(0deg);
+    opacity: 1;
+  }
+}
+
+.lightSpeedOutLeft {
+  animation: lightSpeedOutLeft 0.5s ease-in;
+}
+
+@keyframes lightSpeedOutLeft {
+  0% {
+    transform: translateX(0%) skewX(0deg);
+    opacity: 1;
+  }
+  100% {
+    transform: translateX(-100%) skewX(30deg);
+    opacity: 0;
+  }
+}
+
+.lightSpeedOutRight {
+  animation: lightSpeedOutRight 0.5s ease-in;
+}
+
+@keyframes lightSpeedOutRight {
+  0% {
+    transform: translateX(0%) skewX(0deg);
+    opacity: 1;
+  }
+  100% {
+    transform: translateX(100%) skewX(-30deg);
+    opacity: 0;
+  }
+}
+
+.rotateOut {
+  animation: rotateOut 0.6s ease;
+}
+
+@keyframes rotateOut {
+  0% {
+    transform-origin: center;
+    opacity: 1;
+  }
+  100% {
+    transform-origin: center;
+    transform: rotate(200deg);
+    opacity: 0;
+  }
+}
+
+.rotateOutDownLeft {
+  animation: rotateOutDownLeft 0.6s ease;
+}
+
+@keyframes rotateOutDownLeft {
+  0% {
+    transform-origin: left bottom;
+    opacity: 1;
+  }
+  100% {
+    transform-origin: left bottom;
+    transform: rotate(45deg);
+    opacity: 0;
+  }
+}
+
+.rotateOutDownRight {
+  animation: rotateOutDownRight 0.6s ease;
+}
+
+@keyframes rotateOutDownRight {
+  0% {
+    transform-origin: right bottom;
+    opacity: 1;
+  }
+  100% {
+    transform-origin: right bottom;
+    transform: rotate(-45deg);
+    opacity: 0;
+  }
+}
+
+.rotateOutUpLeft {
+  animation: rotateOutUpLeft 0.6s ease;
+}
+
+@keyframes rotateOutUpLeft {
+  0% {
+    transform-origin: left bottom;
+    opacity: 1;
+  }
+  100% {
+    transform-origin: left bottom;
+    transform: rotate(-45deg);
+    opacity: 0;
+  }
+}
+
+.rotateOutUpRight {
+  animation: rotateOutUpRight 0.6s ease;
+}
+
+@keyframes rotateOutUpRight {
+  0% {
+    transform-origin: right bottom;
+    opacity: 1;
+  }
+  100% {
+    transform-origin: right bottom;
+    transform: rotate(45deg);
+    opacity: 0;
+  }
+}

assets/css/button.css

@@ -0,0 +1,65 @@
+/*
+ * SPDX-FileCopyrightText: Hadad <[email protected]>
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+#sendBtn, #stopBtn {
+  width: 2.75rem;
+  height: 2.75rem;
+  border: none;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  flex-shrink: 0;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+
+#sendBtn {
+  background: linear-gradient(135deg, var(--color-primary), #2563eb);
+  color: white;
+}
+
+#sendBtn:hover:not(:disabled) {
+  transform: translateY(-2px) scale(1.05);
+  box-shadow: 0 4px 8px rgba(59, 130, 246, 0.3);
+}
+
+#sendBtn:active:not(:disabled) {
+  transform: translateY(0) scale(0.98);
+}
+
+#sendBtn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+  transform: scale(0.96);
+}
+
+#stopBtn {
+  background: linear-gradient(135deg, #ef4444, #dc2626);
+  color: white;
+  display: none;
+  box-shadow: 0 2px 4px rgba(239, 68, 68, 0.2);
+}
+
+#stopBtn:hover {
+  transform: translateY(-2px) scale(1.05);
+  box-shadow: 0 4px 8px rgba(239, 68, 68, 0.3);
+}
+
+#stopBtn:active {
+  transform: translateY(0) scale(0.98);
+}
+
+#sendIcon {
+  width: 1.25rem;
+  height: 1.25rem;
+  stroke: #fff;
+  transition: transform 0.2s ease;
+}
+
+#sendBtn:hover:not(:disabled) #sendIcon {
+  transform: translateX(2px);
+}

assets/css/chat/bubble.css

@@ -0,0 +1,54 @@
+/*
+ * SPDX-FileCopyrightText: Hadad <[email protected]>
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+.bubble {
+  display: block;
+  align-self: flex-start;
+  background: #1f1f1f;
+  color: #e8e8e8;
+  border-radius: var(--bubble-radius);
+  line-height: 1.5;
+  white-space: normal;
+  font-family: 'Inter', sans-serif;
+  font-size: 0.95rem;
+  position: relative;
+  opacity: 0;
+  animation: bubbleAppear 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+  margin: 0.75rem 0;
+  overflow-wrap: break-word;
+  word-break: break-word;
+  vertical-align: middle;
+  padding: 1rem 1.25rem;
+  box-sizing: border-box;
+  max-width: 100%;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.05);
+  transition: all 0.3s ease;
+}
+
+.bubble:hover {
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+  transform: translateY(-1px);
+}
+
+@keyframes bubbleAppear {
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.bubble-user {
+  align-self: flex-end;
+  background: linear-gradient(135deg, var(--color-primary), #2563eb);
+  color: #fff;
+  border-bottom-right-radius: 0.5rem;
+  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.25);
+}
+
+.bubble-assist {
+  align-self: flex-start;
+  background: linear-gradient(135deg, #1f1f1f, #1a1a1a);
+}

assets/css/chat/markdown.css

@@ -0,0 +1,171 @@
+/*
+ * SPDX-FileCopyrightText: Hadad <[email protected]>
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+.md-content {
+  color: inherit;
+  font-size: 0.95rem;
+  line-height: 1.6;
+  overflow-wrap: break-word;
+  word-break: break-word;
+}
+
+.md-content p {
+  margin: 0.5rem 0;
+}
+
+.md-content pre {
+  overflow: auto;
+  padding: 1rem;
+  border-radius: 0.75rem;
+  margin: 0.75rem 0;
+  max-width: 100%;
+  box-sizing: border-box;
+  background: rgba(0, 0, 0, 0.3);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.md-content code {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", "Courier New", monospace;
+  font-size: 0.85em;
+  word-break: break-word;
+  background: rgba(0, 0, 0, 0.2);
+  padding: 0.2em 0.4em;
+  border-radius: 0.3rem;
+}
+
+.md-content pre code {
+  background: transparent;
+  padding: 0;
+}
+
+.md-content table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 0.75rem 0;
+  min-width: 100%;
+  box-sizing: border-box;
+}
+
+.table-wrapper {
+  overflow: auto;
+  border-radius: 0.6rem;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  margin: 0.5rem 0;
+  max-width: 100%;
+  box-sizing: border-box;
+}
+
+.md-content th, .md-content td {
+  padding: 0.6rem 0.8rem;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  text-align: left;
+  vertical-align: top;
+  word-break: break-word;
+  max-width: 200px;
+}
+
+.md-content th {
+  background: rgba(255, 255, 255, 0.1);
+  font-weight: 600;
+}
+
+.md-content tbody tr:nth-child(odd) td {
+  background: rgba(255, 255, 255, 0.05);
+}
+
+.md-content ul {
+  list-style-type: none;
+  padding-left: 0;
+}
+
+.md-content ul ul {
+  list-style-type: none;
+  padding-left: 2em;
+}
+
+.md-content ul ul ul {
+  list-style-type: none;
+  padding-left: 2em;
+}
+
+.md-content ol {
+  list-style-type: none;
+  padding-left: 0;
+  counter-reset: list-counter;
+}
+
+.md-content ol ol {
+  list-style-type: none;
+  padding-left: 2em;
+}
+
+.md-content ol ol ol {
+  list-style-type: none;
+  padding-left: 2em;
+}
+
+.md-content ul > li, .md-content ol > li {
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+  position: relative;
+  padding-left: 2.8em;
+}
+
+.md-content ul > li::before {
+  content: "•";
+  position: absolute;
+  left: 1em;
+  top: 0;
+  font-size: 1.2em;
+  color: var(--color-primary);
+}
+
+.md-content ol > li {
+  counter-increment: list-counter;
+}
+
+.md-content ol > li::before {
+  content: counter(list-counter) ".";
+  position: absolute;
+  left: 0;
+  top: 0;
+  min-width: 2.5em;
+  text-align: right;
+  padding-right: 0.5em;
+  color: var(--color-primary);
+  font-weight: 500;
+}
+
+.md-content hr {
+  border: 0;
+  height: 2px;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
+  margin: 1.2rem 0;
+  border-radius: 2px;
+}
+
+.md-content blockquote {
+  border-left: 4px solid rgba(59, 130, 246, 0.5);
+  padding: 0.75rem 1rem;
+  margin: 0.75rem 0;
+  color: rgba(255, 255, 255, 0.9);
+  background: rgba(59, 130, 246, 0.1);
+  border-radius: 0.5rem;
+  overflow-wrap: break-word;
+}
+
+.md-content img {
+  max-width: 100%;
+  height: auto;
+  display: block;
+  margin: 0.75rem auto;
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+}
+
+.md-content table td pre, .md-content table th pre {
+  max-height: 360px;
+  overflow: auto;
+}

assets/css/chat/style.css

@@ -0,0 +1,58 @@
+/*
+ * SPDX-FileCopyrightText: Hadad <[email protected]>
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+.chat-title {
+  font-weight: 700;
+  font-size: 1rem;
+  color: #e6eefc;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.chat-controls {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.chat-section {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+}
+
+#chatArea {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+  word-break: break-word;
+  max-width: 100%;
+}
+
+#chatBox {
+  display: none;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
+  padding: 0.75rem 1rem calc(var(--footer-height) + 1rem) 1rem;
+  box-sizing: border-box;
+  max-width: 100%;
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+  word-break: break-word;
+}

assets/css/footer.css

@@ -0,0 +1,21 @@
+/*
+ * SPDX-FileCopyrightText: Hadad <[email protected]>
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+#footerForm {
+  display: flex;
+  gap: 0.75rem;
+  background-color: transparent;
+  align-items: center;
+  width: 100%;
+  max-width: 100%;
+  box-sizing: border-box;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 1000;
+  animation: slideInUp 0.3s ease-out forwards;
+  height: var(--footer-height);
+}

assets/css/header.css

@@ -0,0 +1,30 @@
+/*
+ * SPDX-FileCopyrightText: Hadad <[email protected]>
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+.main-header, .chat-header {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  box-sizing: border-box;
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  transition: all var(--transition-speed) cubic-bezier(0.4, 0, 0.2, 1);
+  height: var(--header-height);
+  background-color: rgba(15, 15, 15, 0.85);
+}
+
+.main-header {
+  justify-content: space-between;
+}
+
+.chat-header {
+  justify-content: space-between;
+  display: none;
+}

assets/css/icon.css

@@ -0,0 +1,83 @@
+/*
+ * SPDX-FileCopyrightText: Hadad <[email protected]>
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+.icon-btn {
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  padding: 0.5rem;
+  border-radius: 0.5rem;
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  color: #dbe3ff;
+  backdrop-filter: blur(4px);
+  -webkit-backdrop-filter: blur(4px);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  height: 2.5rem;
+  width: 2.5rem;
+}
+
+.icon-btn:hover {
+  background: rgba(255, 255, 255, 0.1);
+  transform: translateY(-2px);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+}
+
+.icon-btn:active {
+  transform: translateY(0);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.icon {
+  width: 1.2rem;
+  height: 1.2rem;
+  color: #9ca3af;
+  flex-shrink: 0;
+  transition: transform 0.2s ease;
+}
+
+.prompt-item:hover .icon {
+  transform: scale(1.1);
+}
+
+#leftIcon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 1rem;
+  color: #9ca3af;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+#leftIcon:hover {
+  color: var(--color-primary);
+  transform: scale(1.1);
+}
+
+#rightIconGroup {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 0.5rem;
+  gap: 0.5rem;
+}
+
+.linkedin {
+  display: inline-block;
+  width: 1rem;
+  height: 1rem;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='%23dbe3ff' class='bi bi-linkedin' viewBox='0 0 16 16'%3E%3Cpath d='M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854zm4.943 12.248V6.169H2.542v7.225zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248S2.4 3.226 2.4 3.934c0 .694.521 1.248 1.327 1.248zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016l.016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225z'/%3E%3C/svg%3E");
+  background-size: contain;
+  background-repeat: no-repeat;
+  transition: transform 0.2s ease;
+}
+
+.icon-btn:hover .linkedin {
+  transform: scale(1.1);
+}

assets/css/input.css

@@ -0,0 +1,41 @@
+/*
+ * SPDX-FileCopyrightText: Hadad <[email protected]>
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+#inputContainer {
+  display: flex;
+  align-items: center;
+  flex: 1;
+  background: linear-gradient(145deg, #1a1a1a, #141414);
+  border-radius: 2rem;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  padding: 0.25rem;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  max-width: 100%;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+#inputContainer:focus-within {
+  border-color: var(--color-primary);
+  background: linear-gradient(145deg, #1f1f1f, #1a1a1a);
+  box-shadow: 0 4px 8px rgba(59, 130, 246, 0.2);
+  transform: translateY(-1px);
+}
+
+#userInput {
+  flex: 1;
+  padding: 0.75rem 1rem;
+  border-radius: 2rem;
+  border: 1px solid transparent;
+  background-color: transparent;
+  color: #e0e0e0;
+  font-size: 1rem;
+  outline: none;
+  transition: border-color 0.2s, background-color 0.2s;
+  word-break: break-word;
+  overflow-wrap: break-word;
+  max-width: 100%;
+  min-width: 0;
+  font-family: 'Inter', sans-serif;
+}

assets/css/logo.css

@@ -0,0 +1,20 @@
+/*
+ * SPDX-FileCopyrightText: Hadad <[email protected]>
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+.logo {
+  font-weight: 800;
+  font-size: 1.125rem;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  color: #eaeef8;
+  word-break: break-word;
+  transition: transform 0.2s ease;
+  height: 100%;
+}
+
+.logo:hover {
+  transform: scale(1.05);
+}

assets/css/prompts.css

@@ -0,0 +1,46 @@
+/*
+ * SPDX-FileCopyrightText: Hadad <[email protected]>
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+.prompts {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  gap: 1rem;
+  width: 100%;
+  max-width: 100%;
+  margin-bottom: 1.5rem;
+}
+
+.prompt-item {
+  background: linear-gradient(145deg, #1a1a1a, #141414);
+  padding: 1rem 1.25rem;
+  border-radius: var(--prompt-radius);
+  display: flex;
+  align-items: center;
+  gap: 0.8rem;
+  cursor: pointer;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  word-break: break-word;
+  overflow-wrap: break-word;
+  border: 1px solid rgba(255, 255, 255, 0.05);
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  animation: fadeIn 0.5s ease-out forwards;
+  transform: translateY(20px);
+  opacity: 0;
+}
+
+.prompt-item:nth-child(1) { animation-delay: 0.1s; }
+.prompt-item:nth-child(2) { animation-delay: 0.2s; }
+.prompt-item:nth-child(3) { animation-delay: 0.3s; }
+.prompt-item:nth-child(4) { animation-delay: 0.4s; }
+
+.prompt-item:hover {
+  background: linear-gradient(145deg, #1f1f1f, #1a1a1a);
+  transform: translateY(-3px) scale(1.02);
+  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
+}
+
+.prompt-item:active {
+  transform: translateY(0) scale(0.98);
+}

assets/css/screen/1200.css

@@ -0,0 +1,15 @@
+/*
+ * SPDX-FileCopyrightText: Hadad <[email protected]>
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+@media (min-width: 1200px) {
+  .prompts {
+    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+    max-width: 1200px;
+  }
+
+  .title {
+    font-size: clamp(2rem, 3vw, 3rem);
+  }
+}

assets/css/screen/2000.css

@@ -0,0 +1,50 @@
+/*
+ * SPDX-FileCopyrightText: Hadad <[email protected]>
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+@media (min-width: 2000px) {
+  :root {
+    --header-height: 4.5rem;
+    --footer-height: 6rem;
+    --border-radius: 1.25rem;
+    --bubble-radius: 1.25rem;
+    --prompt-radius: 1.25rem;
+    font-size: 1.1rem;
+  }
+
+  .title {
+    font-size: clamp(2.5rem, 2.5vw, 3.5rem);
+  }
+
+  .prompts {
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    max-width: 1600px;
+  }
+
+  .prompt-item {
+    padding: 1.25rem 1.5rem;
+    border-radius: 1.25rem;
+  }
+
+  .bubble {
+    padding: 1.25rem 1.5rem;
+    font-size: 1.1rem;
+    border-radius: 1.25rem;
+  }
+
+  #userInput {
+    padding: 1rem 1.25rem;
+    font-size: 1.1rem;
+  }
+
+  #sendBtn, #stopBtn {
+    width: 3.25rem;
+    height: 3.25rem;
+  }
+
+  .icon-btn {
+    width: 3rem;
+    height: 3rem;
+  }
+}

assets/css/screen/320.css

@@ -0,0 +1,82 @@
+/*
+ * SPDX-FileCopyrightText: Hadad <[email protected]>
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+@media (max-width: 320px) {
+  :root {
+    --header-height: 2.25rem;
+    --footer-height: 3.5rem;
+    --border-radius: 0.5rem;
+    --bubble-radius: 0.5rem;
+    --prompt-radius: 0.5rem;
+  }
+
+  .main-header, .chat-header {
+    padding: 0.3rem 0.4rem;
+  }
+
+  #chatBox {
+    padding: 0.3rem 0.4rem calc(var(--footer-height) + 0.4rem) 0.4rem;
+  }
+
+  #footerForm {
+    padding: 0.3rem 0.4rem;
+  }
+
+  #userInput {
+    padding: 0.4rem 0.5rem;
+    font-size: 0.8rem;
+  }
+
+  #sendBtn, #stopBtn {
+    width: 1.75rem;
+    height: 1.75rem;
+  }
+
+  .title {
+    font-size: clamp(1rem, 5vw, 1.4rem);
+    margin-bottom: 0.7rem;
+  }
+
+  .prompts {
+    gap: 0.4rem;
+    margin-bottom: 0.7rem;
+  }
+
+  .prompt-item {
+    padding: 0.5rem 0.7rem;
+    gap: 0.4rem;
+  }
+
+  .icon {
+    width: 0.8rem;
+    height: 0.8rem;
+  }
+
+  .system {
+    font-size: 0.6rem;
+    margin-top: 0.7rem;
+  }
+
+  .bubble {
+    padding: 0.5rem 0.7rem;
+    font-size: 0.75rem;
+    border-radius: 0.5rem;
+    margin: 0.3rem 0;
+  }
+
+  .chat-title {
+    font-size: 0.8rem;
+  }
+
+  .icon-btn {
+    padding: 0.25rem;
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+
+  .logo {
+    font-size: 0.85rem;
+  }
+}

assets/css/screen/360.css

@@ -0,0 +1,82 @@
+/*
+ * SPDX-FileCopyrightText: Hadad <[email protected]>
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+@media (max-width: 360px) {
+  :root {
+    --header-height: 2.5rem;
+    --footer-height: 3.75rem;
+    --border-radius: 0.625rem;
+    --bubble-radius: 0.625rem;
+    --prompt-radius: 0.625rem;
+  }
+
+  .main-header, .chat-header {
+    padding: 0.35rem 0.5rem;
+  }
+
+  #chatBox {
+    padding: 0.4rem 0.5rem calc(var(--footer-height) + 0.5rem) 0.5rem;
+  }
+
+  #footerForm {
+    padding: 0.4rem 0.5rem;
+  }
+
+  #userInput {
+    padding: 0.45rem 0.6rem;
+    font-size: 0.85rem;
+  }
+
+  #sendBtn, #stopBtn {
+    width: 2rem;
+    height: 2rem;
+  }
+
+  .title {
+    font-size: clamp(1.1rem, 5vw, 1.6rem);
+    margin-bottom: 0.8rem;
+  }
+
+  .prompts {
+    gap: 0.5rem;
+    margin-bottom: 0.8rem;
+  }
+
+  .prompt-item {
+    padding: 0.6rem 0.8rem;
+    gap: 0.5rem;
+  }
+
+  .icon {
+    width: 0.9rem;
+    height: 0.9rem;
+  }
+
+  .system {
+    font-size: 0.65rem;
+    margin-top: 0.8rem;
+  }
+
+  .bubble {
+    padding: 0.6rem 0.8rem;
+    font-size: 0.8rem;
+    border-radius: 0.625rem;
+    margin: 0.4rem 0;
+  }
+
+  .chat-title {
+    font-size: 0.85rem;
+  }
+
+  .icon-btn {
+    padding: 0.3rem;
+    width: 1.75rem;
+    height: 1.75rem;
+  }
+
+  .logo {
+    font-size: 0.9rem;
+  }
+}

assets/css/screen/3840.css

@@ -0,0 +1,51 @@
+/*
+ * SPDX-FileCopyrightText: Hadad <[email protected]>
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+@media (min-width: 3840px) {
+  :root {
+    --header-height: 5.5rem;
+    --footer-height: 7rem;
+    --border-radius: 1.5rem;
+    --bubble-radius: 1.5rem;
+    --prompt-radius: 1.5rem;
+    font-size: 1.3rem;
+  }
+
+  .title {
+    font-size: clamp(3rem, 2vw, 5rem);
+  }
+
+  .prompts {
+    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+    max-width: 2000px;
+    gap: 1.5rem;
+  }
+
+  .prompt-item {
+    padding: 1.5rem 1.75rem;
+    border-radius: 1.5rem;
+  }
+
+  .bubble {
+    padding: 1.5rem 1.75rem;
+    font-size: 1.2rem;
+    border-radius: 1.5rem;
+  }
+
+  #userInput {
+    padding: 1.25rem 1.5rem;
+    font-size: 1.2rem;
+  }
+
+  #sendBtn, #stopBtn {
+    width: 3.75rem;
+    height: 3.75rem;
+  }
+
+  .icon-btn {
+    width: 3.5rem;
+    height: 3.5rem;
+  }
+}

assets/css/screen/480.css

@@ -0,0 +1,78 @@
+/*
+ * SPDX-FileCopyrightText: Hadad <[email protected]>
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+@media (max-width: 480px) {
+  :root {
+    --header-height: 2.75rem;
+    --footer-height: 4rem;
+    --border-radius: 0.75rem;
+    --bubble-radius: 0.75rem;
+    --prompt-radius: 0.75rem;
+  }
+
+  .main-header, .chat-header {
+    padding: 0.4rem 0.6rem;
+  }
+
+  #chatBox {
+    padding: 0.5rem 0.6rem calc(var(--footer-height) + 0.6rem) 0.6rem;
+  }
+
+  #footerForm {
+    padding: 0.5rem 0.6rem;
+  }
+
+  #userInput {
+    padding: 0.5rem 0.7rem;
+    font-size: 0.9rem;
+  }
+
+  #sendBtn, #stopBtn {
+    width: 2.25rem;
+    height: 2.25rem;
+  }
+
+  .title {
+    font-size: clamp(1.2rem, 5vw, 1.8rem);
+    margin-bottom: 1rem;
+  }
+
+  .prompts {
+    gap: 0.6rem;
+    margin-bottom: 1rem;
+  }
+
+  .prompt-item {
+    padding: 0.7rem 0.9rem;
+    gap: 0.6rem;
+  }
+
+  .icon {
+    width: 1rem;
+    height: 1rem;
+  }
+
+  .system {
+    font-size: 0.7rem;
+    margin-top: 1rem;
+  }
+
+  .bubble {
+    padding: 0.7rem 0.9rem;
+    font-size: 0.85rem;
+    border-radius: 0.75rem;
+    margin: 0.5rem 0;
+  }
+
+  .chat-title {
+    font-size: 0.9rem;
+  }
+
+  .icon-btn {
+    padding: 0.35rem;
+    width: 2rem;
+    height: 2rem;
+  }
+}

assets/css/screen/720.css

@@ -0,0 +1,88 @@
+/*
+ * SPDX-FileCopyrightText: Hadad <[email protected]>
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+@media (max-width: 767px) {
+  :root {
+    --header-height: 3rem;
+    --footer-height: 4.5rem;
+    --border-radius: 0.875rem;
+    --bubble-radius: 0.875rem;
+    --prompt-radius: 0.875rem;
+  }
+
+  .main-header, .chat-header {
+    padding: 0.5rem 0.75rem;
+  }
+
+  #chatBox {
+    padding: 0.6rem 0.75rem calc(var(--footer-height) + 0.75rem) 0.75rem;
+  }
+
+  #footerForm {
+    padding: 0.6rem 0.75rem;
+  }
+
+  #inputContainer {
+    padding: 0.2rem;
+  }
+
+  #userInput {
+    padding: 0.6rem 0.8rem;
+    font-size: 0.95rem;
+  }
+
+  #sendBtn, #stopBtn {
+    width: 2.5rem;
+    height: 2.5rem;
+  }
+
+  .title {
+    font-size: clamp(1.3rem, 5vw, 2rem);
+    margin-bottom: 1.2rem;
+  }
+
+  .prompts {
+    grid-template-columns: 1fr;
+    gap: 0.75rem;
+    margin-bottom: 1.2rem;
+  }
+
+  .prompt-item {
+    padding: 0.8rem 1rem;
+    gap: 0.7rem;
+  }
+
+  .icon {
+    width: 1.1rem;
+    height: 1.1rem;
+  }
+
+  .system {
+    font-size: 0.75rem;
+    margin-top: 1.2rem;
+    line-height: 1.5;
+  }
+
+  .bubble {
+    padding: 0.8rem 1rem;
+    font-size: 0.9rem;
+    border-radius: 0.875rem;
+    margin: 0.6rem 0;
+  }
+
+  .chat-title {
+    font-size: 0.95rem;
+  }
+
+  .chat-controls {
+    gap: 0.4rem;
+  }
+
+  .icon-btn {
+    padding: 0.4rem;
+    width: 2.25rem;
+    height: 2.25rem;
+  }
+}

assets/css/screen/7680.css

@@ -0,0 +1,51 @@
+/*
+ * SPDX-FileCopyrightText: Hadad <[email protected]>
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+@media (min-width: 7680px) {
+  :root {
+    --header-height: 7rem;
+    --footer-height: 9rem;
+    --border-radius: 2rem;
+    --bubble-radius: 2rem;
+    --prompt-radius: 2rem;
+    font-size: 1.6rem;
+  }
+
+  .title {
+    font-size: clamp(4rem, 1.5vw, 7rem);
+  }
+
+  .prompts {
+    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
+    max-width: 3000px;
+    gap: 2rem;
+  }
+
+  .prompt-item {
+    padding: 2rem 2.25rem;
+    border-radius: 2rem;
+  }
+
+  .bubble {
+    padding: 2rem 2.25rem;
+    font-size: 1.4rem;
+    border-radius: 2rem;
+  }
+
+  #userInput {
+    padding: 1.5rem 2rem;
+    font-size: 1.4rem;
+  }
+
+  #sendBtn, #stopBtn {
+    width: 4.5rem;
+    height: 4.5rem;
+  }
+
+  .icon-btn {
+    width: 4rem;
+    height: 4rem;
+  }
+}

assets/css/screen/common.css

@@ -0,0 +1,66 @@
+/*
+ * SPDX-FileCopyrightText: Hadad <[email protected]>
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+.max-w-screen-xl {
+  max-width: min(1280px, 100%);
+  margin-left: auto;
+  margin-right: auto;
+  width: 100%;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  box-sizing: border-box;
+}
+
+@media (min-width: 640px) {
+  .max-w-screen-xl {
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+  }
+}
+
+@media (min-width: 1024px) {
+  .max-w-screen-xl {
+    padding-left: 2rem;
+    padding-right: 2rem;
+  }
+}
+
+@media (min-width: 1280px) {
+  .max-w-screen-xl {
+    padding-left: 3rem;
+    padding-right: 3rem;
+  }
+}
+
+@media (min-width: 1536px) {
+  .max-w-screen-xl {
+    padding-left: 4rem;
+    padding-right: 4rem;
+  }
+}
+
+@media (min-width: 2000px) {
+  .max-w-screen-xl {
+    max-width: 1600px;
+    padding-left: 5rem;
+    padding-right: 5rem;
+  }
+}
+
+@media (min-width: 3840px) {
+  .max-w-screen-xl {
+    max-width: 2400px;
+    padding-left: 6rem;
+    padding-right: 6rem;
+  }
+}
+
+@media (min-width: 7680px) {
+  .max-w-screen-xl {
+    max-width: 4000px;
+    padding-left: 8rem;
+    padding-right: 8rem;
+  }
+}

assets/css/style.css

@@ -0,0 +1,93 @@
+/*
+ * SPDX-FileCopyrightText: Hadad <[email protected]>
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+*, *::before, *::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html, body {
+  width: 100%;
+  height: 100%;
+  overflow-x: hidden;
+  font-family: 'Inter', sans-serif;
+  font-size: 1rem;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+  display: flex;
+  flex-direction: column;
+  background-color: var(--background-dark);
+  color: var(--text-dark);
+  overflow: hidden;
+  word-wrap: break-word;
+}
+
+:root {
+  --color-primary: #3b82f6;
+  --background-dark: #0f0f0f;
+  --background-light: #fff;
+  --text-dark: #e5e7eb;
+  --text-light: #111;
+  --white-line-color: #ffffff;
+  --header-height: 3.5rem;
+  --footer-height: 5rem;
+  --transition-speed: 0.3s;
+  --border-radius: 1rem;
+  --bubble-radius: 1rem;
+  --prompt-radius: 1rem;
+}
+
+main {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  margin-top: var(--header-height);
+  height: calc(100vh - var(--header-height));
+  overflow: hidden;
+}
+
+#initialContent {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  max-width: 100%;
+  width: 100%;
+  height: 100%;
+  padding: 1.5rem 1rem;
+  box-sizing: border-box;
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+  word-break: break-word;
+  animation: fadeIn 0.8s ease-out forwards;
+}
+
+.title {
+  font-size: clamp(1.5rem, 4vw, 2.5rem);
+  font-weight: 800;
+  color: #eaeef8;
+  margin-bottom: 1.5rem;
+  word-break: break-word;
+  overflow-wrap: break-word;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  animation: slideInUp 0.6s ease-out forwards;
+}
+
+.system {
+  text-align: center;
+  margin-top: 1.5rem;
+  font-size: 0.8rem;
+  color: #9ca3af;
+  word-break: break-word;
+  overflow-wrap: break-word;
+  max-width: 600px;
+  line-height: 1.6;
+  animation: fadeIn 1s ease-out 0.6s forwards;
+  opacity: 0;
+}

assets/css/webkit.css

@@ -0,0 +1,27 @@
+/*
+ * SPDX-FileCopyrightText: Hadad <[email protected]>
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: rgba(59, 130, 246, 0.5);
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: rgba(59, 130, 246, 0.7);
+}
+
+* {
+  -webkit-tap-highlight-color: transparent;
+}

assets/plugins/loader.js

@@ -0,0 +1,232 @@
+//
+// SPDX-FileCopyrightText: Hadad <[email protected]>
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// Prism.
+Prism.plugins.autoloader.languages_path = 'https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/';
+
+// WebSocket.
+const socket = new WebSocket((window.location.protocol==="https:"?"wss":"ws")+"//"+window.location.host);
+
+// UI elements.
+const chatArea = document.getElementById('chatArea');
+const chatBox = document.getElementById('chatBox');
+const initialContent = document.getElementById('initialContent');
+const form = document.getElementById('footerForm');
+const input = document.getElementById('userInput');
+const btn = document.getElementById('sendBtn');
+const stopBtn = document.getElementById('stopBtn');
+const promptItems = document.querySelectorAll('.prompt-item');
+const mainHeader = document.getElementById('mainHeader');
+const chatHeader = document.getElementById('chatHeader');
+const homeBtn = document.getElementById('homeBtn');
+const clearBtn = document.getElementById('clearBtn');
+
+// Track state.
+let streamMsg = null;
+let conversationHistory = [];
+let currentAssistantText = "";
+
+// Render markdown content.
+function renderMarkdown(el) {
+  const raw = el.dataset.text || "";
+  const html = marked.parse(raw, {
+    gfm: true,
+    breaks: true,
+    smartLists: true,
+    smartypants: false,
+    headerIds: false
+  });
+  el.innerHTML = '<div class="md-content">' + html + '</div>';
+  const wrapper = el.querySelector('.md-content');
+
+  // Wrap tables.
+  const tables = wrapper.querySelectorAll('table');
+  tables.forEach(t => {
+    if (t.parentNode && t.parentNode.classList && t.parentNode.classList.contains('table-wrapper')) return;
+    const div = document.createElement('div');
+    div.className = 'table-wrapper';
+    t.parentNode.insertBefore(div, t);
+    div.appendChild(t);
+  });
+
+  // Style horizontal rules.
+  const hrs = wrapper.querySelectorAll('hr');
+  hrs.forEach(h => {
+    if (!h.classList.contains('styled-hr')) {
+      h.classList.add('styled-hr');
+    }
+  });
+
+  // Highlight code.
+  Prism.highlightAllUnder(wrapper);
+}
+
+// Chat view.
+function enterChatView() {
+  mainHeader.style.display = 'none';
+  chatHeader.style.display = 'flex';
+  chatHeader.setAttribute('aria-hidden', 'false');
+  chatBox.style.display = 'flex';
+  initialContent.style.display = 'none';
+}
+
+// Home view.
+function leaveChatView() {
+  mainHeader.style.display = 'flex';
+  chatHeader.style.display = 'none';
+  chatHeader.setAttribute('aria-hidden', 'true');
+  chatBox.style.display = 'none';
+  initialContent.style.display = 'flex';
+}
+
+// Chat bubble.
+function addMsg(who, text) {
+  const div = document.createElement('div');
+  div.className = 'bubble ' + (who==='user' ? 'bubble-user' : 'bubble-assist');
+  div.dataset.text = text;
+  renderMarkdown(div);
+  chatBox.appendChild(div);
+  chatBox.style.display='flex';
+  chatBox.scrollTop = chatBox.scrollHeight;
+  return div;
+}
+
+// Clear all chat.
+function clearAllMessages() {
+  try { socket.send(JSON.stringify({type:'stop'})); } catch {}
+  conversationHistory = [];
+  currentAssistantText = "";
+  if(streamMsg) {
+    const loadingEl = streamMsg.querySelector('.loading');
+    if(loadingEl) loadingEl.remove();
+    streamMsg = null;
+  }
+  chatBox.innerHTML = "";
+  input.value = "";
+  btn.disabled = true;
+  stopBtn.style.display = 'none';
+  btn.style.display = 'inline-flex';
+  enterChatView();
+}
+
+// Wait for socket ready.
+function sendWhenReady(msgFn) {
+  if (socket.readyState === WebSocket.OPEN) {
+    msgFn();
+  } else {
+    socket.addEventListener('open', function handler() {
+      msgFn();
+      socket.removeEventListener('open', handler);
+    });
+  }
+}
+
+// Prompts.
+promptItems.forEach(p => {
+  p.addEventListener('click', () => {
+    input.value = p.dataset.prompt;
+    sendWhenReady(submitMessage);
+  });
+});
+
+// Send user message.
+async function submitMessage() {
+  const message = input.value.trim();
+  if(!message) return;
+  enterChatView();
+  addMsg('user', message);
+  conversationHistory.push({role: 'user', content: message});
+  streamMsg = addMsg('assistant', '');
+  const loadingEl = document.createElement('span');
+  loadingEl.className = 'loading';
+  streamMsg.appendChild(loadingEl);
+  stopBtn.style.display = 'inline-flex';
+  btn.style.display = 'none';
+  input.value='';
+  btn.disabled = true;
+  try {
+    socket.send(JSON.stringify({type:'ask', message, history: conversationHistory}));
+  } catch (error) {
+    if(streamMsg){ 
+      const loadingEl = streamMsg.querySelector('.loading');
+      if(loadingEl) loadingEl.remove();
+      streamMsg.dataset.text = error.message || 'An error occurred during the request.';
+      renderMarkdown(streamMsg);
+      streamMsg.dataset.done='1'; 
+      streamMsg=null; 
+    }
+    btn.style.display = 'inline-flex';
+    stopBtn.style.display = 'none';
+  }
+}
+
+// Submit.
+form.addEventListener('submit', e => {
+  e.preventDefault();
+  submitMessage();
+});
+
+// Stop.
+stopBtn.addEventListener('click', () => {
+  stopBtn.style.pointerEvents = 'none';
+  try { socket.send(JSON.stringify({type:'stop'})); } catch {}
+});
+
+// Home.
+homeBtn.addEventListener('click', () => {
+  leaveChatView();
+});
+
+// Clear messages.
+clearBtn.addEventListener('click', () => {
+  clearAllMessages();
+});
+
+// Socket messages.
+socket.onmessage = (e) => {
+  const data = JSON.parse(e.data);
+  if(data.type==='chunk') {
+    if(streamMsg) {
+      const loadingEl = streamMsg.querySelector('.loading');
+      if(loadingEl) loadingEl.remove();
+      streamMsg.dataset.text += data.chunk;
+      currentAssistantText = streamMsg.dataset.text ||"";
+      renderMarkdown(streamMsg);
+      chatBox.scrollTop = chatBox.scrollHeight;
+    }
+  } else if(data.type==='end' || data.type==='error') {
+    if(streamMsg){
+      const text = streamMsg.dataset.text || "";
+      const loadingEl = streamMsg.querySelector('.loading');
+      if(loadingEl) loadingEl.remove();
+      streamMsg.dataset.done='1';
+      if(data.type==='error') {
+        streamMsg.dataset.text = data.error || 'An error occurred during the request.';
+        renderMarkdown(streamMsg);
+      } else {
+        conversationHistory.push({role: 'assistant', content: text});
+      }
+      streamMsg = null;
+    }
+    btn.style.display = 'inline-flex';
+    stopBtn.style.display = 'none';
+    stopBtn.style.pointerEvents = 'auto';
+  }
+};
+
+// Enable send button only if input has text.
+input.addEventListener('input', () => {
+  btn.disabled= input.value.trim() === '';
+});
+
+// Animations.
+document.addEventListener('DOMContentLoaded', function() {
+  AOS.init({
+    duration: 800,
+    easing: 'ease-out-cubic',
+    once: true,
+    offset: 50
+  });
+});

index.js

@@ -1,172 +0,0 @@
-//
-// SPDX-FileCopyrightText: Hadad <[email protected]>
-// SPDX-License-Identifier: Apache-2.0
-//
-
-import express from "express";
-import http from "http";
-import { WebSocketServer } from "ws";
-import fetch from "node-fetch";
-import cookieParser from "cookie-parser";
-import path from "path";
-
-const app = express();
-const server = http.createServer(app);
-const wss = new WebSocketServer({ server });
-
-const OPENAI_API_BASE_URL = process.env.OPENAI_API_BASE_URL || "";
-const OPENAI_API_KEY = process.env.OPENAI_API_KEY || "";
-const UMINT = process.env.UMINT || ``;
-
-// Use cookies.
-app.use(cookieParser());
-
-// Root.
-app.get("/", (_req, res) => res.send(UMINT));
-
-// SEO.
-app.get("/robots.txt", (_req, res) => {
-  res.sendFile(path.resolve("src/crawlers/robots.txt"));
-});
-app.get("/sitemap.xml", (_req, res) => {
-  res.sendFile(path.resolve("src/crawlers/sitemap.xml"));
-});
-app.get("/google15aba15fe250d693.html", (_req, res) => {
-  res.sendFile(path.resolve("src/webmasters/google.html"));
-});
-app.get("/BingSiteAuth.xml", (_req, res) => {
-  res.sendFile(path.resolve("src/webmasters/bing.xml"));
-});
-
-// Favicon.
-app.get("/assets/images/favicon.ico", (_req, res) => {
-  res.sendFile(path.resolve("assets/images/favicon.ico"));
-});
-
-// Handle WebSocket connections.
-wss.on("connection", (ws) => {
-  let currentAbortController = null;
-
-  // Send messages to client.
-  const sendToClient = (type, payload) => {
-    ws.send(JSON.stringify({ type, ...payload }));
-  };
-
-  // Send logs to client.
-  const sendError = (message) => {
-    sendToClient("error", { error: message });
-  };
-
-  // Make a request.
-  const streamRequest = async (messages, retries = 3) => {
-    for (let attempt = 1; attempt <= retries; attempt++) {
-      currentAbortController = new AbortController();
-      const signal = currentAbortController.signal;
-
-      try {
-        const response = await fetch(OPENAI_API_BASE_URL, {
-          method: "POST",
-          headers: {
-            "Content-Type": "application/json",
-            "Authorization": `Bearer ${OPENAI_API_KEY}`,
-          },
-          body: JSON.stringify({
-            model: "gpt-4.1-nano",
-            messages,
-            stream: true,
-            private: true,
-            isPrivate: true
-          }),
-          signal
-        });
-
-        if (response.status === 502) {
-          if (attempt === retries) {
-            sendError(
-              "The server is currently busy. Please wait a moment or try again later."
-            );
-            return;
-          }
-          continue;
-        }
-
-        if (!response.ok) {
-          const errText = await response.text();
-          sendError(`HTTP ${response.status}: ${response.statusText} - ${errText}`);
-          return;
-        }
-
-        if (!response.body) {
-          sendError("Response body is empty.");
-          return;
-        }
-
-        let buffer = "";
-        for await (const chunk of response.body) {
-          if (signal.aborted) {
-            sendToClient("end", {});
-            return;
-          }
-          buffer += chunk.toString();
-          let idx;
-          while ((idx = buffer.indexOf("\n")) !== -1) {
-            const line = buffer.slice(0, idx).trim();
-            buffer = buffer.slice(idx + 1);
-            if (line.startsWith("data: ")) {
-              const dataStr = line.substring(6).trim();
-              if (!dataStr || dataStr === "[DONE]") continue;
-              try {
-                const parsed = JSON.parse(dataStr);
-                const part = parsed?.choices?.[0]?.delta?.content;
-                if (part) sendToClient("chunk", { chunk: part });
-              } catch (err) {
-                sendError(`Parse error: ${err.message}`);
-              }
-            }
-          }
-        }
-
-        sendToClient("end", {});
-        return;
-      } catch (err) {
-        if (signal.aborted) {
-          sendToClient("end", {});
-          return;
-        }
-        if (attempt === retries) {
-          sendError(err.message || "Unknown error.");
-        }
-      }
-    }
-  };
-
-  // Handle messages from client.
-  ws.on("message", async (msg) => {
-    try {
-      const data = JSON.parse(msg.toString());
-
-      if (data.type === "stop") {
-        if (currentAbortController) currentAbortController.abort();
-        sendToClient("end", {});
-        return;
-      }
-
-      const message = data.message;
-      const history = data.history || [];
-      const setupMessages = [...history, { role: "user", content: message }];
-      await streamRequest(setupMessages);
-
-    } catch (err) {
-      sendError(err.message || "An unknown error occurred.");
-      if (currentAbortController) currentAbortController.abort();
-    }
-  });
-
-  // Abort on WebSocket close.
-  ws.on("close", () => {
-    if (currentAbortController) currentAbortController.abort();
-  });
-});
-
-const PORT = process.env.PORT || 7860;
-server.listen(PORT);

mapping.js

@@ -0,0 +1,50 @@
+//
+// SPDX-FileCopyrightText: Hadad <[email protected]>
+// SPDX-License-Identifier: Apache-2.0
+//
+
+import express from "express";
+import http from "http";
+import cookieParser from "cookie-parser";
+import path from "path";
+import { PORT } from "./src/backend/config.js";
+import attachWss from "./src/backend/request.js";
+import { fileURLToPath } from "url";
+
+const app = express();
+const server = http.createServer(app);
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+// Cookies.
+app.use(cookieParser());
+
+// Root.
+app.get("/", (_req, res) => {
+  res.sendFile(path.resolve(__dirname, "src/frontend/loader.html"));
+});
+
+// Assets.
+app.use("/assets", express.static(path.resolve("assets")));
+
+// SEO.
+app.get("/robots.txt", (_req, res) => {
+  res.sendFile(path.resolve("src/crawlers/robots.txt"));
+});  // https://umint-ai.hf.space/robots.txt
+
+app.get("/sitemap.xml", (_req, res) => {
+  res.sendFile(path.resolve("src/crawlers/sitemap.xml"));
+});  // https://umint-ai.hf.space/sitemap.xml
+
+app.get("/google15aba15fe250d693.html", (_req, res) => {
+  res.sendFile(path.resolve("src/webmasters/google.html"));
+});  // https://umint-ai.hf.space/google15aba15fe250d693.html
+
+app.get("/BingSiteAuth.xml", (_req, res) => {
+  res.sendFile(path.resolve("src/webmasters/bing.xml"));
+});  // https://umint-ai.hf.space/BingSiteAuth.xml
+
+// Attach WebSocket server.
+attachWss(server);
+
+server.listen(PORT);

package.json

@@ -1,10 +1,10 @@
 {
   "name": "UltimaX Intelligence",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "type": "module",
-  "main": "index.js",
+  "main": "mapping.js",
   "scripts": {
-    "start": "node index.js"
+    "start": "node mapping.js"
   },
   "dependencies": {
     "express": "latest",
@@ -12,6 +12,7 @@
     "ws": "latest",
     "node-fetch": "latest",
     "cookie-parser": "latest",
-    "path": "latest"
+    "path": "latest",
+    "url": "latest"
   }
 }

src/backend/config.js

@@ -0,0 +1,11 @@
+//
+// SPDX-FileCopyrightText: Hadad <[email protected]>
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// Server port.
+export const PORT = process.env.PORT;
+// API endpoint.
+export const OPENAI_API_BASE_URL = process.env.OPENAI_API_BASE_URL;
+// API key.
+export const OPENAI_API_KEY = process.env.OPENAI_API_KEY;

src/backend/request.js

@@ -0,0 +1,140 @@
+//
+// SPDX-FileCopyrightText: Hadad <[email protected]>
+// SPDX-License-Identifier: Apache-2.0
+//
+
+import { WebSocketServer } from "ws";
+import fetch from "node-fetch";
+import {
+  OPENAI_API_BASE_URL,
+  OPENAI_API_KEY
+} from "./config.js";
+
+export default function attachWss(server) {
+  const wss = new WebSocketServer({ server });
+
+  // Handle WebSocket connections.
+  wss.on("connection", (ws) => {
+    let currentAbortController = null;
+
+    // Send messages to client.
+    const sendToClient = (type, payload) => {
+      ws.send(JSON.stringify({ type, ...payload }));
+    };
+
+    // Send logs to client.
+    const sendError = (message) => {
+      sendToClient("error", { error: message });
+    };
+
+    // Make a request.
+    const streamRequest = async (messages, retries = 3) => {
+      for (let attempt = 1; attempt <= retries; attempt++) {
+        currentAbortController = new AbortController();
+        const signal = currentAbortController.signal;
+
+        try {
+          const response = await fetch(OPENAI_API_BASE_URL, {
+            method: "POST",
+            headers: {
+              "Content-Type": "application/json",
+              "Authorization": `Bearer ${OPENAI_API_KEY}`,
+            },
+            body: JSON.stringify({
+              model: "gpt-4.1-nano",
+              messages,
+              stream: true,
+              private: true,
+              isPrivate: true
+            }),
+            signal
+          });
+
+          if (response.status === 502) {
+            if (attempt === retries) {
+              sendError(
+                "The server is currently busy. Please wait a moment or try again later."
+              );
+              return;
+            }
+            continue;
+          }
+
+          if (!response.ok) {
+            const errText = await response.text();
+            sendError(`HTTP ${response.status}: ${response.statusText} - ${errText}`);
+            return;
+          }
+
+          if (!response.body) {
+            sendError("Response body is empty.");
+            return;
+          }
+
+          let buffer = "";
+          for await (const chunk of response.body) {
+            if (signal.aborted) {
+              sendToClient("end", {});
+              return;
+            }
+            buffer += chunk.toString();
+            let idx;
+            while ((idx = buffer.indexOf("\n")) !== -1) {
+              const line = buffer.slice(0, idx).trim();
+              buffer = buffer.slice(idx + 1);
+              if (line.startsWith("data: ")) {
+                const dataStr = line.substring(6).trim();
+                if (!dataStr || dataStr === "[DONE]") continue;
+                try {
+                  const parsed = JSON.parse(dataStr);
+                  const part = parsed?.choices?.[0]?.delta?.content;
+                  if (part) sendToClient("chunk", { chunk: part });
+                } catch (err) {
+                  sendError(`Parse error: ${err.message}`);
+                }
+              }
+            }
+          }
+
+          sendToClient("end", {});
+          return;
+        } catch (err) {
+          if (signal.aborted) {
+            sendToClient("end", {});
+            return;
+          }
+          if (attempt === retries) {
+            sendError(err.message || "Unknown error.");
+          }
+        }
+      }
+    };
+
+    // Handle messages from client.
+    ws.on("message", async (msg) => {
+      try {
+        const data = JSON.parse(msg.toString());
+
+        if (data.type === "stop") {
+          if (currentAbortController) currentAbortController.abort();
+          sendToClient("end", {});
+          return;
+        }
+
+        const message = data.message;
+        const history = data.history || [];
+        const setupMessages = [...history, { role: "user", content: message }];
+        await streamRequest(setupMessages);
+
+      } catch (err) {
+        sendError(err.message || "An unknown error occurred.");
+        if (currentAbortController) currentAbortController.abort();
+      }
+    });
+
+    // Abort on WebSocket close.
+    ws.on("close", () => {
+      if (currentAbortController) currentAbortController.abort();
+    });
+  });
+}

src/crawlers/sitemap.xml

@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <!-- 
   SPDX-FileCopyrightText: Hadad <[email protected]>
-  SPDX-License-Identifier: MIT
+  SPDX-License-Identifier: Apache-2.0
 -->
 <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
   <url>

src/frontend/loader.html

@@ -0,0 +1,345 @@
+<!-- 
+  SPDX-FileCopyrightText: Hadad <[email protected]>
+  SPDX-License-Identifier: Apache-2.0
+-->
+
+<!DOCTYPE html>
+<html lang="en" class="dark-theme">
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport"
+          content="width=device-width, initial-scale=1.0, maximum-scale=1.0,
+                   user-scalable=no, viewport-fit=cover" />
+    <meta name="robots" content="index, follow" />
+    <title>UltimaX Intelligence</title>
+
+    <link rel="sitemap" type="application/xml" title="Sitemap" href="/sitemap.xml" />
+
+    <meta name="author" content="Hadad Darajat" />
+    <meta name="description"
+          content="UltimaX Intelligence is a free AI platform unifying multiple
+                   premium AI models with an intuitive ChatGPT-like interface.
+                   Powered by Pollinations open-source AI and integrated with
+                   OpenWebUI, it offers advanced features, no cost, no
+                   registration, and ensures user privacy with temporary,
+                   unsaved conversations." />
+    <meta name="keywords"
+          content="UltimaX Intelligence, free AI platform, premium AI models,
+                   Pollinations AI, open-source AI, Open-WebUI integration,
+                   ChatGPT alternative, AI tools free, no registration AI,
+                   AI privacy, temporary AI conversations, AI platform no login,
+                   advanced AI features, AI community powered,
+                   seamless AI experience" />
+
+    <!-- Open Graph -->
+    <meta property="og:domain" content="umint-ai.hf.space" />
+    <meta property="og:url" content="https://umint-ai.hf.space" />
+    <meta property="og:title" content="UltimaX Intelligence" />
+    <meta property="og:description"
+          content="UltimaX Intelligence is a free AI platform unifying multiple
+                   premium AI models with an intuitive ChatGPT-like interface.
+                   Powered by Pollinations open-source AI and integrated with
+                   OpenWebUI, it offers advanced features, no cost, no
+                   registration, and ensures user privacy with temporary,
+                   unsaved conversations." />
+    <meta property="og:image"
+          content="https://cdn-uploads.huggingface.co/production/uploads/686e28b405d4ddcdd96adeb2/i9iufR3L-rgj39mk_B9QW.jpeg" />
+
+    <!-- Twitter -->
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:domain" content="umint-ai.hf.space" />
+    <meta name="twitter:url" content="https://umint-ai.hf.space" />
+    <meta name="twitter:title" content="UltimaX Intelligence" />
+    <meta name="twitter:description"
+          content="UltimaX Intelligence is a free AI platform unifying multiple
+                   premium AI models with an intuitive ChatGPT-like interface.
+                   Powered by Pollinations open-source AI and integrated with
+                   OpenWebUI, it offers advanced features, no cost, no
+                   registration, and ensures user privacy with temporary,
+                   unsaved conversations." />
+    <meta name="twitter:image"
+          content="https://cdn-uploads.huggingface.co/production/uploads/686e28b405d4ddcdd96adeb2/i9iufR3L-rgj39mk_B9QW.jpeg" />
+
+    <!-- Favicon -->
+    <link rel="icon" href="/assets/images/favicon.ico" type="image/x-icon" />
+
+    <!-- Fonts & Styles -->
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap"
+          rel="stylesheet" />
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
+          rel="stylesheet" />
+    <script src="https://cdn.tailwindcss.com"></script>
+
+    <!-- Markdown & Syntax Highlight -->
+    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+    <link rel="stylesheet"
+          href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js"></script>
+
+    <!-- Animations -->
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/aos.js"></script>
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/aos.css" rel="stylesheet" />
+
+    <!-- Carousel -->
+    <script src="https://cdn.jsdelivr.net/npm/@splidejs/[email protected]/dist/js/splide.min.js"></script>
+    <link rel="stylesheet"
+          href="https://cdn.jsdelivr.net/npm/@splidejs/[email protected]/dist/css/splide.min.css" />
+
+    <!-- Smooth Scroll -->
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/locomotive-scroll.min.js"></script>
+    <link rel="stylesheet"
+          href="https://cdn.jsdelivr.net/npm/[email protected]/dist/locomotive-scroll.min.css" />
+
+    <!-- Styles -->
+    <link rel="stylesheet" href="/assets/css/animation/style.css" />
+    <link rel="stylesheet" href="/assets/css/button.css" />
+    <link rel="stylesheet" href="/assets/css/chat/bubble.css" />
+    <link rel="stylesheet" href="/assets/css/chat/markdown.css" />
+    <link rel="stylesheet" href="/assets/css/chat/style.css" />
+    <link rel="stylesheet" href="/assets/css/footer.css" />
+    <link rel="stylesheet" href="/assets/css/header.css" />
+    <link rel="stylesheet" href="/assets/css/icon.css" />
+    <link rel="stylesheet" href="/assets/css/input.css" />
+    <link rel="stylesheet" href="/assets/css/logo.css" />
+    <link rel="stylesheet" href="/assets/css/prompts.css" />
+    <link rel="stylesheet" href="/assets/css/screen/1200.css" />
+    <link rel="stylesheet" href="/assets/css/screen/2000.css" />
+    <link rel="stylesheet" href="/assets/css/screen/320.css" />
+    <link rel="stylesheet" href="/assets/css/screen/360.css" />
+    <link rel="stylesheet" href="/assets/css/screen/3840.css" />
+    <link rel="stylesheet" href="/assets/css/screen/480.css" />
+    <link rel="stylesheet" href="/assets/css/screen/720.css" />
+    <link rel="stylesheet" href="/assets/css/screen/7680.css" />
+    <link rel="stylesheet" href="/assets/css/screen/common.css" />
+    <link rel="stylesheet" href="/assets/css/style.css" />
+    <link rel="stylesheet" href="/assets/css/webkit.css" />
+</head>
+<body>
+    <!-- Header -->
+    <header class="main-header" id="mainHeader">
+        <div class="logo d-flex align-items-center">
+            <a id="toggleLink"
+               class="icon-btn"
+               aria-label="LinkedIn"
+               title="Hadad Darajat"
+               href="https://linkedin.com/in/hadadrjt"
+               target="_blank"
+               rel="noopener noreferrer">
+                <span class="linkedin"></span>
+            </a>
+        </div>
+    </header>
+
+    <!-- Chat Header -->
+    <header class="chat-header" id="chatHeader" aria-hidden="true">
+        <button id="homeBtn"
+                class="icon-btn"
+                aria-label="Back to Home"
+                title="Back to Home">
+            <svg width="20" height="20"
+                 viewBox="0 0 24 24"
+                 fill="none"
+                 stroke="currentColor"
+                 stroke-width="1.8"
+                 stroke-linecap="round"
+                 stroke-linejoin="round"
+                 xmlns="http://www.w3.org/2000/svg">
+                <path d="M3 11.5L12 4l9 7.5" />
+                <path d="M5 21V11.5h14V21" />
+            </svg>
+        </button>
+
+        <div class="chat-title" id="chatTitle">Demo Playground</div>
+
+        <div class="chat-controls">
+            <button id="clearBtn"
+                    class="icon-btn"
+                    aria-label="Clear All Messages"
+                    title="Clear All Messages">
+                <svg width="20" height="20"
+                     viewBox="0 0 24 24"
+                     fill="none"
+                     stroke="currentColor"
+                     stroke-width="1.6"
+                     stroke-linecap="round"
+                     stroke-linejoin="round"
+                     xmlns="http://www.w3.org/2000/svg">
+                    <path d="M3 6h18" />
+                    <path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
+                    <path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6" />
+                    <path d="M10 11v6" />
+                    <path d="M14 11v6" />
+                </svg>
+            </button>
+
+            <a href="https://umint-openwebui.hf.space"
+               target="_blank"
+               rel="noopener noreferrer"
+               class="icon-btn"
+               aria-label="OpenWebUI"
+               title="OpenWebUI">
+                <svg width="20" height="20"
+                     viewBox="0 0 24 24"
+                     fill="none"
+                     stroke="currentColor"
+                     stroke-width="1.8"
+                     stroke-linecap="round"
+                     stroke-linejoin="round"
+                     xmlns="http://www.w3.org/2000/svg">
+                    <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
+                    <path d="M15 3h6v6" />
+                    <path d="M10 14 21 3" />
+                </svg>
+            </a>
+        </div>
+    </header>
+
+    <!-- Main Content -->
+    <main>
+        <div class="flex-1 flex flex-col h-full max-w-screen-xl w-full mx-auto">
+            <div id="chatArea" class="flex-1" aria-live="polite">
+                <div id="initialContent"
+                     class="flex flex-col items-center justify-center text-center"
+                     style="width:100%; height:100%;">
+                    <div class="title mb-4 gradient-text">
+                        How can I help you today?
+                    </div>
+
+                    <!-- Prompts -->
+                    <div class="prompts w-full max-w-md mx-auto grid gap-2"
+                         style="width:100%;">
+                        <div class="prompt-item"
+                             data-prompt="How far away is the sun from Earth?"
+                             style="word-break: break-word;">
+                            <svg class="icon"
+                                 viewBox="0 0 24 24"
+                                 fill="none"
+                                 stroke="currentColor">
+                                <path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M18.66 18.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M18.66 5.34l1.41-1.41"
+                                      stroke-width="2"
+                                      stroke-linecap="round"
+                                      stroke-linejoin="round" />
+                                <circle cx="12" cy="12" r="4" stroke-width="2" />
+                            </svg>
+                            <span>How far away is the sun from Earth?</span>
+                        </div>
+
+                        <div class="prompt-item"
+                             data-prompt="Create complex python code, anything."
+                             style="word-break: break-word;">
+                            <svg class="icon"
+                                 viewBox="0 0 24 24"
+                                 fill="none"
+                                 stroke="currentColor">
+                                <path d="M4 7h16M4 12h16M4 17h16"
+                                      stroke-width="2"
+                                      stroke-linecap="round"
+                                      stroke-linejoin="round" />
+                            </svg>
+                            <span>Create complex python code.</span>
+                        </div>
+
+                        <div class="prompt-item"
+                             data-prompt="How many R’s are in strawberry?"
+                             style="word-break: break-word;">
+                            <svg class="icon"
+                                 viewBox="0 0 24 24"
+                                 fill="none"
+                                 stroke="currentColor">
+                                <path d="M3 12h18M12 3v18"
+                                      stroke-width="2"
+                                      stroke-linecap="round"
+                                      stroke-linejoin="round" />
+                            </svg>
+                            <span>How many R’s are in strawberry?</span>
+                        </div>
+
+                        <div class="prompt-item"
+                             data-prompt="Suggest a random prompt."
+                             style="word-break: break-word;">
+                            <svg class="icon"
+                                 viewBox="0 0 24 24"
+                                 fill="none"
+                                 stroke="currentColor">
+                                <path d="M12 3v18M7 12h10"
+                                      stroke-width="2"
+                                      stroke-linecap="round"
+                                      stroke-linejoin="round" />
+                            </svg>
+                            <span>Suggest a random prompt.</span>
+                        </div>
+                    </div>
+
+                    <p class="system mt-4 text-sm text-gray-400"
+                       style="word-wrap:break-word;">
+                        Demo only!
+                        <a href="https://umint-openwebui.hf.space"
+                           style="color: #3b82f6;"
+                           target="_blank">Click here</a>
+                        to continue.<br>
+                        Premium AI, all in one tools, and website builder.<br>
+                        Free, no cost at all.
+                    </p>
+                </div>
+            </div>
+
+            <div id="chatBox"
+                 class="hidden flex-col"
+                 aria-live="polite"></div>
+
+            <!-- Footer Form -->
+            <form id="footerForm"
+                  class="flex p-3 bg-transparent"
+                  autocomplete="off"
+                  style="position: relative; margin-top: auto; width: 100%;">
+                <div id="inputContainer">
+                    <input type="text"
+                           id="userInput"
+                           placeholder="Ask anything..."
+                           required
+                           style="word-break:break-word;" />
+                    <div id="rightIconGroup">
+                        <button type="submit"
+                                id="sendBtn"
+                                disabled
+                                aria-label="Send">
+                            <svg id="sendIcon"
+                                 xmlns="http://www.w3.org/2000/svg"
+                                 fill="none"
+                                 viewBox="0 0 24 24"
+                                 stroke="currentColor">
+                                <path stroke-linecap="round"
+                                      stroke-linejoin="round"
+                                      stroke-width="2"
+                                      d="M14 5l7 7-7 7M3 12h11" />
+                            </svg>
+                        </button>
+                        <button id="stopBtn"
+                                class="icon-btn"
+                                aria-label="Stop"
+                                title="Stop">
+                            <svg width="20"
+                                 height="20"
+                                 viewBox="0 0 24 24"
+                                 fill="white"
+                                 xmlns="http://www.w3.org/2000/svg">
+                                <rect x="6" y="6"
+                                      width="12"
+                                      height="12"
+                                      rx="2"
+                                      fill="white" />
+                            </svg>
+                        </button>
+                    </div>
+                </div>
+            </form>
+        </div>
+    </main>
+
+    <!-- Plugins -->
+    <script src="/assets/plugins/loader.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
+</body>
+</html>