Hugging Face's logo

Spaces:
Aiheyil
/
ai
Running

App Files Community
ai / index.html
Aiheyil's picture
Aiheyil
Add 3 files
4bb39be verified
raw
history blame contribute delete
29.3 kB
<!DOCTYPE html>
<html lang="he" dir="rtl">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>AI 讛讻专讜讬讜转 - 诪爪讗 讗转 讛讗讞讚/转 砖诇讱 注诐 注讝专转 讘讬谞讛 诪诇讗讻讜转讬转</title>
 <script src="https://cdn.tailwindcss.com"></script>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
 <style>
 @import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700&display=swap');
body {
 font-family: 'Rubik', sans-serif;
 background-color: #fef6f6;
 }
.chat-container {
 height: 500px;
 overflow-y: auto;
 scrollbar-width: thin;
 }
.chat-container::-webkit-scrollbar {
 width: 6px;
 }
.chat-container::-webkit-scrollbar-thumb {
 background-color: #f87171;
 border-radius: 3px;
 }
.match-card {
 transition: all 0.3s ease;
 }
.match-card:hover {
 transform: translateY(-5px);
 box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
 }
.ai-message {
 background-color: #fef2f2;
 border-top-right-radius: 0;
 }
.user-message {
 background-color: #fecaca;
 border-top-left-radius: 0;
 }
.heart-pulse {
 animation: pulse 1.5s infinite;
 }
@keyframes pulse {
 0% { transform: scale(1); }
 50% { transform: scale(1.1); }
 100% { transform: scale(1); }
 }
.hebrew-date {
 direction: ltr;
 unicode-bidi: embed;
 }
 </style>
</head>
<body class="bg-gray-50">
 <!-- Navigation -->
 <nav class="bg-rose-600 text-white shadow-lg">
 <div class="container mx-auto px-4 py-3 flex justify-between items-center">
 <div class="flex items-center space-x-2">
 <i class="fas fa-heart text-2xl"></i>
 <h1 class="text-2xl font-bold">AI 讛讻专讜讬讜转</h1>
 </div>
 <div class="flex items-center space-x-4">
 <a href="#" class="hover:text-rose-200 transition"><i class="fas fa-home"></i> 讘讬转</a>
 <a href="#" class="hover:text-rose-200 transition"><i class="fas fa-search"></i> 讞讬驻讜砖</a>
 <a href="#" class="hover:text-rose-200 transition"><i class="fas fa-user"></i> 驻专讜驻讬诇</a>
 <a href="#" class="hover:text-rose-200 transition"><i class="fas fa-envelope"></i> 讛讜讚注讜转</a>
 </div>
 <div>
 <button class="bg-white text-rose-600 px-4 py-2 rounded-full font-medium hover:bg-rose-50 transition">
 <i class="fas fa-sign-in-alt mr-2"></i> 讻谞讬住讛
 </button>
 </div>
 </div>
 </nav>
<!-- Hero Section -->
 <section class="bg-gradient-to-r from-rose-500 to-pink-500 text-white py-16">
 <div class="container mx-auto px-4 text-center">
 <h2 class="text-4xl font-bold mb-4">诪爪讗 讗讛讘讛 注诐 注讝专转 讘讬谞讛 诪诇讗讻讜转讬转</h2>
 <p class="text-xl mb-8 max-w-2xl mx-auto">讛住讜讻谉 讛讞讻诐 砖诇谞讜 讬诇诪讚 诇讛讻讬专 讗讜转讱 讜讬诪爪讗 注讘讜专讱 讗转 讛讛转讗诪讛 讛诪讜砖诇诪转 讘讬讜转专 诪讘讬谉 讗诇驻讬 驻专讜驻讬诇讬诐</p>
 <div class="flex justify-center space-x-4">
 <button class="bg-white text-rose-600 px-6 py-3 rounded-full font-bold text-lg hover:bg-rose-100 transition">
 <i class="fas fa-user-plus mr-2"></i> 讛专砖诐 注讻砖讬讜
 </button>
 <button class="border-2 border-white px-6 py-3 rounded-full font-bold text-lg hover:bg-white hover:text-rose-600 transition">
 <i class="fas fa-play mr-2"></i> 爪驻讛 讘住专讟讜谉
 </button>
 </div>
 </div>
 </section>
<!-- Main Content -->
 <div class="container mx-auto px-4 py-12">
 <div class="flex flex-col lg:flex-row gap-8">
 <!-- AI Assistant Section -->
 <div class="lg:w-2/3 bg-white rounded-xl shadow-lg overflow-hidden">
 <div class="bg-rose-600 text-white px-6 py-4 flex items-center">
 <div class="w-10 h-10 rounded-full bg-white flex items-center justify-center mr-3">
 <i class="fas fa-robot text-rose-600 text-xl"></i>
 </div>
 <div>
 <h3 class="font-bold text-lg">住讜讻谉 讛讛讻专讜讬讜转 讛讞讻诐</h3>
 <p class="text-sm text-rose-100">诪讞驻砖 注讘讜专讱 讛转讗诪讜转 注讻砖讬讜</p>
 </div>
 <div class="ml-auto flex space-x-2">
 <button class="w-8 h-8 rounded-full bg-rose-500 hover:bg-rose-400 flex items-center justify-center">
 <i class="fas fa-ellipsis-h"></i>
 </button>
 </div>
 </div>
<!-- Chat Container -->
 <div class="chat-container p-4 space-y-4" id="chatContainer">
 <!-- AI Welcome Message -->
 <div class="flex items-start">
 <div class="w-8 h-8 rounded-full bg-rose-100 text-rose-600 flex items-center justify-center mr-3 flex-shrink-0">
 <i class="fas fa-robot"></i>
 </div>
 <div class="max-w-[80%] p-3 rounded-lg ai-message">
 <p class="font-medium">砖诇讜诐! 馃憢 讗谞讬 住讜讻谉 讛讛讻专讜讬讜转 讛讞讻诐 砖诇讱. 讗谞讬 讬讻讜诇 诇注讝讜专 诇讱 诇诪爪讜讗 讗转 讛讛转讗诪讛 讛诪讜砖诇诪转 诇驻讬 讛注讚驻讜转讬讱 讛讗讬砖讬讜转.</p>
 <p class="mt-2">诪讛 转专爪讛 诇讚注转 讗讜 诇讞驻砖 讛讬讜诐?</p>
 <div class="mt-3 flex flex-wrap gap-2">
 <button onclick="quickQuestion('讛爪讙 诇讬 讛转讗诪讜转 诇驻讬 讛驻专讜驻讬诇 砖诇讬')" class="text-xs bg-rose-100 text-rose-800 px-3 py-1 rounded-full hover:bg-rose-200 transition">讛爪讙 诇讬 讛转讗诪讜转 诇驻讬 讛驻专讜驻讬诇 砖诇讬</button>
 <button onclick="quickQuestion('诪爪讗 诇讬 讗谞砖讬诐 注诐 转讞讘讬讘讬诐 讚讜诪讬诐')" class="text-xs bg-rose-100 text-rose-800 px-3 py-1 rounded-full hover:bg-rose-200 transition">诪爪讗 诇讬 讗谞砖讬诐 注诐 转讞讘讬讘讬诐 讚讜诪讬诐</button>
 <button onclick="quickQuestion('诪讬 讛讻讬 诪转讗讬诐 诇讬 诇驻讬 讛讗诇讙讜专讬转诐 砖诇讱?')" class="text-xs bg-rose-100 text-rose-800 px-3 py-1 rounded-full hover:bg-rose-200 transition">诪讬 讛讻讬 诪转讗讬诐 诇讬 诇驻讬 讛讗诇讙讜专讬转诐 砖诇讱?</button>
 </div>
 </div>
 </div>
 </div>
<!-- Input Area -->
 <div class="border-t p-4 bg-gray-50">
 <div class="flex items-center">
 <input type="text" id="userInput" placeholder="砖讗诇 讗转 讛住讜讻谉 讛讞讻诐..." class="flex-1 border border-gray-300 rounded-full px-4 py-2 focus:outline-none focus:ring-2 focus:ring-rose-500 focus:border-transparent">
 <button onclick="sendMessage()" class="ml-3 w-10 h-10 rounded-full bg-rose-600 text-white hover:bg-rose-700 flex items-center justify-center transition">
 <i class="fas fa-paper-plane"></i>
 </button>
 </div>
 <p class="text-xs text-gray-500 mt-2 text-center">讛住讜讻谉 讛讞讻诐 诇讜诪讚 诪讛驻专讜驻讬诇 砖诇讱 讜诪讛讗讬谞讟专讗拽爪讬讜转 砖诇讱 讻讚讬 诇转转 诇讱 转讜爪讗讜转 诪讚讜讬拽讜转 讬讜转专</p>
 </div>
 </div>
<!-- Matches Section -->
 <div class="lg:w-1/3">
 <div class="bg-white rounded-xl shadow-lg overflow-hidden">
 <div class="bg-rose-600 text-white px-6 py-4">
 <h3 class="font-bold text-lg flex items-center">
 <i class="fas fa-heart heart-pulse mr-2"></i> 讛转讗诪讜转 诪讜诪诇爪讜转
 </h3>
 </div>
 <div class="p-4">
 <div class="mb-4">
 <div class="flex items-center justify-between mb-2">
 <h4 class="font-medium text-gray-700">讛转讗诪讜转 讞讚砖讜转</h4>
 <a href="#" class="text-sm text-rose-600 hover:text-rose-800">专讗讛 讛讻诇</a>
 </div>
 <div class="grid grid-cols-2 gap-3">
 <!-- Match Card 1 -->
 <div class="match-card bg-white border border-gray-200 rounded-lg overflow-hidden hover:shadow-md transition cursor-pointer">
 <div class="relative">
 <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="Profile" class="w-full h-32 object-cover">
 <div class="absolute bottom-2 right-2 bg-rose-500 text-white text-xs px-2 py-1 rounded-full">92%</div>
 </div>
 <div class="p-3">
 <h5 class="font-bold">谞讜注讛</h5>
 <p class="text-gray-600 text-sm">转诇 讗讘讬讘, 28</p>
 <div class="flex justify-between mt-2">
 <button class="text-rose-500 hover:text-rose-700"><i class="fas fa-heart"></i></button>
 <button class="text-gray-500 hover:text-gray-700"><i class="fas fa-comment-alt"></i></button>
 </div>
 </div>
 </div>
<!-- Match Card 2 -->
 <div class="match-card bg-white border border-gray-200 rounded-lg overflow-hidden hover:shadow-md transition cursor-pointer">
 <div class="relative">
 <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Profile" class="w-full h-32 object-cover">
 <div class="absolute bottom-2 right-2 bg-rose-500 text-white text-xs px-2 py-1 rounded-full">88%</div>
 </div>
 <div class="p-3">
 <h5 class="font-bold">讗讬转谉</h5>
 <p class="text-gray-600 text-sm">讬专讜砖诇讬诐, 31</p>
 <div class="flex justify-between mt-2">
 <button class="text-rose-500 hover:text-rose-700"><i class="fas fa-heart"></i></button>
 <button class="text-gray-500 hover:text-gray-700"><i class="fas fa-comment-alt"></i></button>
 </div>
 </div>
 </div>
 </div>
 </div>
<div>
 <div class="flex items-center justify-between mb-2">
 <h4 class="font-medium text-gray-700">讛转讗诪讜转 诪讜砖诇诪讜转</h4>
 <a href="#" class="text-sm text-rose-600 hover:text-rose-800">专讗讛 讛讻诇</a>
 </div>
 <!-- Perfect Match -->
 <div class="match-card bg-gradient-to-r from-rose-100 to-pink-100 border border-rose-200 rounded-lg p-4 mb-3">
 <div class="flex items-center">
 <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Profile" class="w-16 h-16 rounded-full object-cover border-2 border-rose-400">
 <div class="mr-3">
 <h5 class="font-bold">讬注诇</h5>
 <p class="text-gray-600 text-sm">讞讬驻讛, 29</p>
 <div class="flex items-center mt-1">
 <div class="w-full bg-rose-200 rounded-full h-2">
 <div class="bg-rose-600 h-2 rounded-full" style="width: 97%"></div>
 </div>
 <span class="text-xs font-bold text-rose-600 mr-1">97%</span>
 </div>
 </div>
 </div>
 <div class="mt-3 text-sm">
 <p class="font-medium text-gray-700">转讗讬诪讜转 讙讘讜讛讛!</p>
 <p class="text-gray-600">讙诐 讗转诐 讗讜讛讘讬诐 讟讬讜诇讬诐 讘讞讜"诇, 诪讜讝讬拽转 讙'讗讝 讜诪住注讚讜转 讗住讬讬转讬讜转.</p>
 </div>
 <div class="flex justify-between mt-3">
 <button class="flex-1 bg-rose-600 text-white py-2 rounded-lg mr-2 hover:bg-rose-700 transition">
 <i class="fas fa-heart mr-1"></i> 讗讛讘转讬
 </button>
 <button class="flex-1 bg-white text-rose-600 border border-rose-600 py-2 rounded-lg hover:bg-rose-50 transition">
 <i class="fas fa-comment-alt mr-1"></i> 砖诇讬讞转 讛讜讚注讛
 </button>
 </div>
 </div>
 </div>
 </div>
 </div>
<!-- Personality Insights -->
 <div class="bg-white rounded-xl shadow-lg overflow-hidden mt-6">
 <div class="bg-rose-600 text-white px-6 py-4">
 <h3 class="font-bold text-lg flex items-center">
 <i class="fas fa-chart-pie mr-2"></i> 转讜讘谞讜转 讗讬砖讬讜转
 </h3>
 </div>
 <div class="p-4">
 <div class="mb-4">
 <h4 class="font-medium text-gray-700 mb-2">讛注讚驻讜转 讛转讗诪讛</h4>
 <div class="space-y-3">
 <div>
 <div class="flex justify-between text-sm mb-1">
 <span>讞砖讬讘讜转 讙讬诇</span>
 <span>讘讬谞讜谞讬转</span>
 </div>
 <div class="w-full bg-gray-200 rounded-full h-2">
 <div class="bg-rose-400 h-2 rounded-full" style="width: 60%"></div>
 </div>
 </div>
 <div>
 <div class="flex justify-between text-sm mb-1">
 <span>讞砖讬讘讜转 诪讬拽讜诐</span>
 <span>讙讘讜讛讛</span>
 </div>
 <div class="w-full bg-gray-200 rounded-full h-2">
 <div class="bg-rose-500 h-2 rounded-full" style="width: 85%"></div>
 </div>
 </div>
 <div>
 <div class="flex justify-between text-sm mb-1">
 <span>讞砖讬讘讜转 转讞讘讬讘讬诐</span>
 <span>讙讘讜讛讛 诪讗讜讚</span>
 </div>
 <div class="w-full bg-gray-200 rounded-full h-2">
 <div class="bg-rose-600 h-2 rounded-full" style="width: 95%"></div>
 </div>
 </div>
 </div>
 </div>
 <div>
 <h4 class="font-medium text-gray-700 mb-2">住讙谞讜谉 讛转讗诪讛</h4>
 <div class="bg-rose-50 border border-rose-100 rounded-lg p-3">
 <p class="text-sm text-gray-700">讛住讜讻谉 讛讞讻诐 砖诇讱 诪转诪拽讚 讘诪爪讬讗转 讗谞砖讬诐 注诐 注专讻讬诐 讚讜诪讬诐 讜转讞讜诪讬 注谞讬讬谉 诪砖讜转驻讬诐, 注诐 讚讙砖 注诇 讻讬诪讬讛 讗讬砖讬转.</p>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
<!-- How It Works Section -->
 <section class="bg-white py-12">
 <div class="container mx-auto px-4">
 <h2 class="text-3xl font-bold text-center mb-12">讗讬讱 注讜讘讚 讛住讜讻谉 讛讞讻诐 砖诇谞讜?</h2>
 <div class="grid md:grid-cols-3 gap-8">
 <div class="text-center">
 <div class="w-20 h-20 bg-rose-100 rounded-full flex items-center justify-center mx-auto mb-4">
 <i class="fas fa-user-edit text-rose-600 text-3xl"></i>
 </div>
 <h3 class="text-xl font-bold mb-2">诇讜诪讚 讗讜转讱</h3>
 <p class="text-gray-600">讛住讜讻谉 讛讞讻诐 砖诇谞讜 诇讜诪讚 讗转 讛驻专讜驻讬诇 砖诇讱, 讛注讚驻讜转讬讱 讜讛转谞讛讙讜转讱 讘讗转专 讻讚讬 诇讛讘讬谉 诪讛 讗转讛 诪讞驻砖.</p>
 </div>
 <div class="text-center">
 <div class="w-20 h-20 bg-rose-100 rounded-full flex items-center justify-center mx-auto mb-4">
 <i class="fas fa-robot text-rose-600 text-3xl"></i>
 </div>
 <h3 class="text-xl font-bold mb-2">诪谞转讞 讛转讗诪讜转</h3>
 <p class="text-gray-600">讛讗诇讙讜专讬转诐 砖诇谞讜 住讜专拽 讗诇驻讬 驻专讜驻讬诇讬诐 讜诪讞驻砖 讗转 讛讛转讗诪讜转 讛讟讜讘讜转 讘讬讜转专 诇驻讬 讛驻专诪讟专讬诐 讛讞砖讜讘讬诐 诇讱.</p>
 </div>
 <div class="text-center">
 <div class="w-20 h-20 bg-rose-100 rounded-full flex items-center justify-center mx-auto mb-4">
 <i class="fas fa-heart text-rose-600 text-3xl"></i>
 </div>
 <h3 class="text-xl font-bold mb-2">诪爪讬讙 转讜爪讗讜转</h3>
 <p class="text-gray-600">讗转讛 诪拽讘诇 专砖讬诪讛 诪住讜谞谞转 砖诇 讗谞砖讬诐 注诐 驻讜讟谞爪讬讗诇 讗诪讬转讬 诇讛转讗诪讛, 讻讜诇诇 讛住讘专讬诐 诪讚讜注 讛诐 诪转讗讬诪讬诐 诇讱.</p>
 </div>
 </div>
 </div>
 </section>
<!-- Testimonials -->
 <section class="bg-rose-50 py-12">
 <div class="container mx-auto px-4">
 <h2 class="text-3xl font-bold text-center mb-12">住讬驻讜专讬 讛爪诇讞讛</h2>
 <div class="grid md:grid-cols-2 gap-8">
 <div class="bg-white p-6 rounded-lg shadow-md">
 <div class="flex items-center mb-4">
 <img src="https://randomuser.me/api/portraits/women/33.jpg" alt="Testimonial" class="w-16 h-16 rounded-full object-cover mr-4">
 <div>
 <h4 class="font-bold">诪讬讻诇 讜讚谞讬讗诇</h4>
 <p class="text-rose-600 text-sm">讛转讗讛讘讜 讚专讱 讛讗转专 诇驻谞讬 8 讞讜讚砖讬诐</p>
 </div>
 </div>
 <p class="text-gray-700">"讛住讜讻谉 讛讞讻诐 讛爪讬讙 诇讬 讗转 讚谞讬讗诇 讘转讜专 讛转讗诪讛 砖诇 96% 讻砖讗谞讬 讗驻讬诇讜 诇讗 讞讬驻砖转讬 诪讬砖讛讜 讻讝讛. 讛讜讗 爪讚拽 诇讙诪专讬! 诪爪讗谞讜 讻诇 讻讱 讛专讘讛 讚讘专讬诐 诪砖讜转驻讬诐 砖讗祝 驻注诐 诇讗 讛讬讬转讬 砖诪讛 诇讘 讗诇讬讛诐 讘讞讬驻讜砖 专讙讬诇."</p>
 </div>
 <div class="bg-white p-6 rounded-lg shadow-md">
 <div class="flex items-center mb-4">
 <img src="https://randomuser.me/api/portraits/men/45.jpg" alt="Testimonial" class="w-16 h-16 rounded-full object-cover mr-4">
 <div>
 <h4 class="font-bold">讗讜专讬 讜转诪专</h4>
 <p class="text-rose-600 text-sm">诪转讻谞谞讬诐 讞转讜谞讛 讗讞专讬 6 讞讜讚砖讬诐</p>
 </div>
 </div>
 <p class="text-gray-700">"讗讞专讬 砖谞讬诐 讘讗转专讬 讛讻专讜讬讜转, 讛住讜讻谉 讛讞讻诐 驻讛 讛讘讬谉 讗讜转讬 讬讜转专 讟讜讘 诪诪讛 砖讛讘谞转讬 讗转 注爪诪讬. 转讜讱 砖讘讜注讬讬诐 讛讜讗 讛爪讬讙 诇讬 讗转 转诪专, 讜注讻砖讬讜 讗谞讞谞讜 诪转讻谞谞讬诐 讞转讜谞讛. 讝讛 驻砖讜讟 注讜讘讚!"</p>
 </div>
 </div>
 </div>
 </section>
<!-- Footer -->
 <footer class="bg-gray-800 text-white py-8">
 <div class="container mx-auto px-4">
 <div class="grid md:grid-cols-4 gap-8">
 <div>
 <h3 class="text-xl font-bold mb-4 flex items-center">
 <i class="fas fa-heart text-rose-400 mr-2"></i> AI 讛讻专讜讬讜转
 </h3>
 <p class="text-gray-400">诪爪讬讗转 讗讛讘讛 讘注讬讚谉 讛讚讬讙讬讟诇讬 注诐 讟讻谞讜诇讜讙讬讬转 讘讬谞讛 诪诇讗讻讜转讬转 诪转拽讚诪转.</p>
 </div>
 <div>
 <h4 class="font-bold mb-4">拽讬砖讜专讬诐</h4>
 <ul class="space-y-2">
 <li><a href="#" class="text-gray-400 hover:text-white transition">讗讜讚讜转</a></li>
 <li><a href="#" class="text-gray-400 hover:text-white transition">讻讬爪讚 讝讛 注讜讘讚</a></li>
 <li><a href="#" class="text-gray-400 hover:text-white transition">诪讞讬专讬诐</a></li>
 <li><a href="#" class="text-gray-400 hover:text-white transition">讘诇讜讙</a></li>
 </ul>
 </div>
 <div>
 <h4 class="font-bold mb-4">转诪讬讻讛</h4>
 <ul class="space-y-2">
 <li><a href="#" class="text-gray-400 hover:text-white transition">砖讗诇讜转 谞驻讜爪讜转</a></li>
 <li><a href="#" class="text-gray-400 hover:text-white transition">爪讜专 拽砖专</a></li>
 <li><a href="#" class="text-gray-400 hover:text-white transition">诪讚讬谞讬讜转 驻专讟讬讜转</a></li>
 <li><a href="#" class="text-gray-400 hover:text-white transition">转谞讗讬 砖讬诪讜砖</a></li>
 </ul>
 </div>
 <div>
 <h4 class="font-bold mb-4">讛讜专讚 讗转 讛讗驻诇讬拽爪讬讛</h4>
 <div class="space-y-3">
 <button class="flex items-center bg-black text-white px-4 py-2 rounded-lg w-full">
 <i class="fab fa-apple text-2xl mr-2"></i>
 <div class="text-left">
 <div class="text-xs">讛讜专讚 讘</div>
 <div class="font-medium">App Store</div>
 </div>
 </button>
 <button class="flex items-center bg-black text-white px-4 py-2 rounded-lg w-full">
 <i class="fab fa-google-play text-2xl mr-2"></i>
 <div class="text-left">
 <div class="text-xs">讝诪讬谉 讘</div>
 <div class="font-medium">Google Play</div>
 </div>
 </button>
 </div>
 </div>
 </div>
 <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
 <p>漏 2023 AI 讛讻专讜讬讜转. 讻诇 讛讝讻讜讬讜转 砖诪讜专讜转.</p>
 </div>
 </div>
 </footer>
<script>
 // Chat functionality
 function sendMessage() {
 const input = document.getElementById('userInput');
 const message = input.value.trim();
if (message) {
 addUserMessage(message);
 input.value = '';
// Simulate AI response after a short delay
 setTimeout(() => {
 const responses = [
 "讗谞讬 讗谞转讞 讗转 讛驻专讜驻讬诇 砖诇讱 讜讗诪爪讗 注讘讜专讱 讗转 讛讛转讗诪讜转 讛讟讜讘讜转 讘讬讜转专. 专讙注 讗讞讚...",
 "诪爪讗转讬 讻诪讛 讛转讗诪讜转 诪注谞讬讬谞讜转 砖讬讻讜诇讜转 诇讛转讗讬诐 诇讱 诪讗讜讚!",
 "诇驻讬 讛谞转讜谞讬诐 砖诇讱, 讗谞讬 诪诪诇讬抓 诇讱 诇讘讚讜拽 讗转 讛驻专讜驻讬诇讬诐 讛讘讗讬诐:",
 "讛讗诇讙讜专讬转诐 砖诇谞讜 诪爪讗 砖讬砖 诇讱 讛专讘讛 讘诪砖讜转祝 注诐 讻诪讛 诪砖转诪砖讬诐 讘讗转专. 讗爪讬讙 诇讱 讗讜转诐 讘拽专讜讘.",
 "讗谞讬 专讜讗讛 砖讗转讛 诪讞驻砖 诪讬砖讛讜 注诐 转讞讜诪讬 注谞讬讬谉 讚讜诪讬诐. 讗谞讬 讗讘讚讜拽 讗转 讝讛."
 ];
const randomResponse = responses[Math.floor(Math.random() * responses.length)];
 addAIMessage(randomResponse);
// Scroll to bottom of chat
 const container = document.getElementById('chatContainer');
 container.scrollTop = container.scrollHeight;
 }, 1000);
 }
 }
function quickQuestion(question) {
 document.getElementById('userInput').value = question;
 sendMessage();
 }
function addUserMessage(message) {
 const container = document.getElementById('chatContainer');
const messageDiv = document.createElement('div');
 messageDiv.className = 'flex items-start justify-end';
messageDiv.innerHTML = `
 <div class="max-w-[80%] p-3 rounded-lg user-message">
 <p>${message}</p>
 </div>
 <div class="w-8 h-8 rounded-full bg-rose-600 text-white flex items-center justify-center ml-3 flex-shrink-0">
 <i class="fas fa-user"></i>
 </div>
 `;
container.appendChild(messageDiv);
 container.scrollTop = container.scrollHeight;
 }
function addAIMessage(message) {
 const container = document.getElementById('chatContainer');
const messageDiv = document.createElement('div');
 messageDiv.className = 'flex items-start';
messageDiv.innerHTML = `
 <div class="w-8 h-8 rounded-full bg-rose-100 text-rose-600 flex items-center justify-center mr-3 flex-shrink-0">
 <i class="fas fa-robot"></i>
 </div>
 <div class="max-w-[80%] p-3 rounded-lg ai-message">
 <p>${message}</p>
 </div>
 `;
container.appendChild(messageDiv);
 container.scrollTop = container.scrollHeight;
 }
// Allow pressing Enter to send message
 document.getElementById('userInput').addEventListener('keypress', function(e) {
 if (e.key === 'Enter') {
 sendMessage();
 }
 });
 </script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 馃К <a href="https://enzostvs-deepsite.hf.space?remix=Aiheyil/ai" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>