Spaces:
Running
Running
| <html lang="fa" dir="rtl"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>چت روم ساده | گفتگوی آنلاین</title> | |
| <!-- Persian Font: Vazirmatn --> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@100;300;400;500;700;900&display=swap" | |
| rel="stylesheet"> | |
| <!-- Icons --> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| :root { | |
| --primary: #6366f1; | |
| --primary-dark: #4f46e5; | |
| --secondary: #ec4899; | |
| --background: #0f172a; | |
| --surface: rgba(30, 41, 59, 0.7); | |
| --text: #f8fafc; | |
| --text-muted: #94a3b8; | |
| --border: rgba(148, 163, 184, 0.1); | |
| --success: #10b981; | |
| --warning: #f59e0b; | |
| --glass: rgba(255, 255, 255, 0.05); | |
| --shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37); | |
| } | |
| [data-theme="light"] { | |
| --background: #f1f5f9; | |
| --surface: rgba(255, 255, 255, 0.8); | |
| --text: #1e293b; | |
| --text-muted: #64748b; | |
| --border: rgba(148, 163, 184, 0.2); | |
| --glass: rgba(255, 255, 255, 0.6); | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| outline: none; | |
| } | |
| html { | |
| scroll-behavior: smooth; | |
| } | |
| body { | |
| font-family: 'Vazirmatn', sans-serif; | |
| background: var(--background); | |
| color: var(--text); | |
| min-height: 100vh; | |
| overflow-x: hidden; | |
| transition: background 0.3s ease, color 0.3s ease; | |
| } | |
| /* Animated Background */ | |
| .bg-animation { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index: -1; | |
| overflow: hidden; | |
| pointer-events: none; | |
| } | |
| .bg-animation .circle { | |
| position: absolute; | |
| border-radius: 50%; | |
| filter: blur(80px); | |
| opacity: 0.4; | |
| animation: float 20s infinite ease-in-out; | |
| } | |
| .circle:nth-child(1) { | |
| width: 400px; | |
| height: 400px; | |
| background: var(--primary); | |
| top: -100px; | |
| right: -100px; | |
| animation-delay: 0s; | |
| } | |
| .circle:nth-child(2) { | |
| width: 300px; | |
| height: 300px; | |
| background: var(--secondary); | |
| bottom: -50px; | |
| left: -50px; | |
| animation-delay: 5s; | |
| } | |
| .circle:nth-child(3) { | |
| width: 250px; | |
| height: 250px; | |
| background: var(--success); | |
| top: 50%; | |
| left: 50%; | |
| animation-delay: 10s; | |
| } | |
| @keyframes float { | |
| 0%, | |
| 100% { | |
| transform: translate(0, 0) scale(1); | |
| } | |
| 33% { | |
| transform: translate(30px, -50px) scale(1.1); | |
| } | |
| 66% { | |
| transform: translate(-20px, 20px) scale(0.9); | |
| } | |
| } | |
| /* Header */ | |
| header { | |
| position: fixed; | |
| top: 0; | |
| width: 100%; | |
| padding: 1rem 2rem; | |
| background: var(--glass); | |
| backdrop-filter: blur(12px); | |
| -webkit-backdrop-filter: blur(12px); | |
| border-bottom: 1px solid var(--border); | |
| z-index: 1000; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .logo { | |
| font-size: 1.5rem; | |
| font-weight: 900; | |
| background: linear-gradient(135deg, var(--primary), var(--secondary)); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| } | |
| .header-actions { | |
| display: flex; | |
| gap: 1rem; | |
| align-items: center; | |
| } | |
| .built-with { | |
| font-size: 0.75rem; | |
| color: var(--text-muted); | |
| text-decoration: none; | |
| padding: 0.5rem 1rem; | |
| border-radius: 2rem; | |
| background: var(--glass); | |
| border: 1px solid var(--border); | |
| transition: all 0.3s ease; | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| } | |
| .built-with:hover { | |
| background: var(--primary); | |
| color: white; | |
| transform: translateY(-2px); | |
| border-color: var(--primary); | |
| } | |
| .theme-toggle { | |
| background: var(--glass); | |
| border: 1px solid var(--border); | |
| color: var(--text); | |
| width: 40px; | |
| height: 40px; | |
| border-radius: 50%; | |
| cursor: pointer; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| transition: all 0.3s ease; | |
| } | |
| .theme-toggle:hover { | |
| transform: rotate(180deg); | |
| background: var(--primary); | |
| border-color: var(--primary); | |
| } | |
| /* Main Container */ | |
| .container { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 6rem 2rem 2rem; | |
| } | |
| /* Hero Section */ | |
| .hero { | |
| text-align: center; | |
| padding: 4rem 0; | |
| animation: fadeInUp 1s ease; | |
| } | |
| @keyframes fadeInUp { | |
| from { | |
| opacity: 0; | |
| transform: translateY(30px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| .hero h1 { | |
| font-size: clamp(2rem, 5vw, 4rem); | |
| font-weight: 900; | |
| margin-bottom: 1rem; | |
| line-height: 1.2; | |
| } | |
| .hero h1 .emoji { | |
| display: inline-block; | |
| animation: bounce 2s infinite; | |
| } | |
| @keyframes bounce { | |
| 0%, | |
| 100% { | |
| transform: translateY(0); | |
| } | |
| 50% { | |
| transform: translateY(-10px); | |
| } | |
| } | |
| .subtitle { | |
| font-size: 1.25rem; | |
| color: var(--text-muted); | |
| margin-bottom: 2rem; | |
| font-weight: 300; | |
| } | |
| /* Features Grid */ | |
| .features { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); | |
| gap: 2rem; | |
| margin: 4rem 0; | |
| perspective: 1000px; | |
| } | |
| .feature { | |
| background: var(--surface); | |
| backdrop-filter: blur(10px); | |
| -webkit-backdrop-filter: blur(10px); | |
| border: 1px solid var(--border); | |
| border-radius: 1.5rem; | |
| padding: 2rem; | |
| text-align: center; | |
| transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); | |
| position: relative; | |
| overflow: hidden; | |
| cursor: pointer; | |
| } | |
| .feature::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient(135deg, transparent, rgba(255, 255, 255, 0.05)); | |
| opacity: 0; | |
| transition: opacity 0.3s; | |
| } | |
| .feature:hover { | |
| transform: translateY(-10px) rotateX(5deg); | |
| box-shadow: var(--shadow); | |
| border-color: var(--primary); | |
| } | |
| .feature:hover::before { | |
| opacity: 1; | |
| } | |
| .icon { | |
| font-size: 3rem; | |
| margin-bottom: 1rem; | |
| display: inline-block; | |
| transition: transform 0.3s; | |
| } | |
| .feature:hover .icon { | |
| transform: scale(1.2) rotate(10deg); | |
| } | |
| .feature h3 { | |
| font-size: 1.25rem; | |
| margin-bottom: 0.5rem; | |
| color: var(--text); | |
| } | |
| .feature p { | |
| color: var(--text-muted); | |
| font-size: 0.95rem; | |
| line-height: 1.6; | |
| } | |
| /* CTA Section */ | |
| .cta { | |
| display: flex; | |
| gap: 1rem; | |
| justify-content: center; | |
| flex-wrap: wrap; | |
| margin: 3rem 0; | |
| } | |
| .btn { | |
| padding: 1rem 2.5rem; | |
| border-radius: 2rem; | |
| font-family: inherit; | |
| font-size: 1rem; | |
| font-weight: 700; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| border: none; | |
| text-decoration: none; | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .btn-primary { | |
| background: linear-gradient(135deg, var(--primary), var(--primary-dark)); | |
| color: white; | |
| box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4); | |
| } | |
| .btn-secondary { | |
| background: var(--glass); | |
| color: var(--text); | |
| border: 2px solid var(--border); | |
| backdrop-filter: blur(10px); | |
| } | |
| .btn:hover { | |
| transform: translateY(-3px); | |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); | |
| } | |
| .btn:active { | |
| transform: translateY(-1px); | |
| } | |
| .btn::after { | |
| content: ''; | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| width: 0; | |
| height: 0; | |
| border-radius: 50%; | |
| background: rgba(255, 255, 255, 0.3); | |
| transform: translate(-50%, -50%); | |
| transition: width 0.6s, height 0.6s; | |
| } | |
| .btn:active::after { | |
| width: 300px; | |
| height: 300px; | |
| } | |
| /* Modal Styles */ | |
| .modal { | |
| display: none; | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: rgba(0, 0, 0, 0.8); | |
| backdrop-filter: blur(5px); | |
| z-index: 2000; | |
| justify-content: center; | |
| align-items: center; | |
| opacity: 0; | |
| transition: opacity 0.3s; | |
| } | |
| .modal.active { | |
| display: flex; | |
| opacity: 1; | |
| } | |
| .modal-content { | |
| background: var(--surface); | |
| border: 1px solid var(--border); | |
| border-radius: 2rem; | |
| padding: 2.5rem; | |
| width: 90%; | |
| max-width: 450px; | |
| position: relative; | |
| transform: scale(0.9); | |
| transition: transform 0.3s; | |
| box-shadow: var(--shadow); | |
| backdrop-filter: blur(20px); | |
| } | |
| .modal.active .modal-content { | |
| transform: scale(1); | |
| } | |
| .close-modal { | |
| position: absolute; | |
| top: 1rem; | |
| left: 1rem; | |
| background: none; | |
| border: none; | |
| color: var(--text-muted); | |
| font-size: 1.5rem; | |
| cursor: pointer; | |
| width: 40px; | |
| height: 40px; | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| transition: all 0.3s; | |
| } | |
| .close-modal:hover { | |
| background: var(--glass); | |
| color: var(--text); | |
| transform: rotate(90deg); | |
| } | |
| .form-group { | |
| margin-bottom: 1.5rem; | |
| } | |
| .form-group label { | |
| display: block; | |
| margin-bottom: 0.5rem; | |
| color: var(--text); | |
| font-weight: 500; | |
| } | |
| .form-group input { | |
| width: 100%; | |
| padding: 0.75rem 1rem; | |
| border: 2px solid var(--border); | |
| border-radius: 1rem; | |
| background: var(--glass); | |
| color: var(--text); | |
| font-family: inherit; | |
| font-size: 1rem; | |
| transition: all 0.3s; | |
| } | |
| .form-group input:focus { | |
| outline: none; | |
| border-color: var(--primary); | |
| box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1); | |
| background: rgba(255, 255, 255, 0.1); | |
| } | |
| .form-submit { | |
| width: 100%; | |
| margin-top: 1rem; | |
| } | |
| /* Chat Application Interface */ | |
| #chat-app { | |
| display: none; | |
| height: calc(100vh - 80px); | |
| margin-top: 80px; | |
| } | |
| .chat-container { | |
| display: grid; | |
| grid-template-columns: 300px 1fr; | |
| height: 100%; | |
| gap: 1rem; | |
| padding: 1rem; | |
| } | |
| .sidebar { | |
| background: var(--surface); | |
| border: 1px solid var(--border); | |
| border-radius: 1.5rem; | |
| padding: 1.5rem; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 1rem; | |
| backdrop-filter: blur(10px); | |
| } | |
| .user-profile { | |
| text-align: center; | |
| padding-bottom: 1rem; | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .avatar { | |
| width: 80px; | |
| height: 80px; | |
| border-radius: 50%; | |
| background: linear-gradient(135deg, var(--primary), var(--secondary)); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 2rem; | |
| margin: 0 auto 0.5rem; | |
| border: 3px solid var(--border); | |
| color: white; | |
| } | |
| .rooms-list { | |
| flex: 1; | |
| overflow-y: auto; | |
| } | |
| .room-item { | |
| padding: 1rem; | |
| margin-bottom: 0.5rem; | |
| border-radius: 1rem; | |
| cursor: pointer; | |
| transition: all 0.3s; | |
| display: flex; | |
| align-items: center; | |
| gap: 0.75rem; | |
| border: 1px solid transparent; | |
| } | |
| .room-item:hover, | |
| .room-item.active { | |
| background: var(--glass); | |
| border-color: var(--primary); | |
| } | |
| .room-item.active { | |
| background: rgba(99, 102, 241, 0.1); | |
| } | |
| .chat-area { | |
| background: var(--surface); | |
| border: 1px solid var(--border); | |
| border-radius: 1.5rem; | |
| display: flex; | |
| flex-direction: column; | |
| overflow: hidden; | |
| backdrop-filter: blur(10px); | |
| } | |
| .chat-header { | |
| padding: 1.5rem; | |
| border-bottom: 1px solid var(--border); | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .chat-messages { | |
| flex: 1; | |
| overflow-y: auto; | |
| padding: 1.5rem; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 1rem; | |
| } | |
| .message { | |
| max-width: 70%; | |
| padding: 1rem 1.25rem; | |
| border-radius: 1.25rem; | |
| position: relative; | |
| animation: messageSlide 0.3s cubic-bezier(0.25, 1, 0.5, 1); | |
| word-wrap: break-word; | |
| } | |
| @keyframes messageSlide { | |
| from { | |
| opacity: 0; | |
| transform: translateY(10px) scale(0.95); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0) scale(1); | |
| } | |
| } | |
| .message.sent { | |
| align-self: flex-start; /* In RTL, flex-start is Right */ | |
| background: linear-gradient(135deg, var(--primary), var(--primary-dark)); | |
| color: white; | |
| border-bottom-right-radius: 0.25rem; | |
| } | |
| .message.received { | |
| align-self: flex-end; /* In RTL, flex-end is Left */ | |
| background: var(--glass); | |
| border: 1px solid var(--border); | |
| border-bottom-left-radius: 0.25rem; | |
| } | |
| .message-author { | |
| font-size: 0.75rem; | |
| opacity: 0.8; | |
| margin-bottom: 0.25rem; | |
| font-weight: 700; | |
| } | |
| .message-time { | |
| font-size: 0.7rem; | |
| opacity: 0.6; | |
| margin-top: 0.5rem; | |
| display: block; | |
| text-align: left; | |
| } | |
| .chat-input { | |
| padding: 1.5rem; | |
| border-top: 1px solid var(--border); | |
| display: flex; | |
| gap: 1rem; | |
| } | |
| .chat-input input { | |
| flex: 1; | |
| padding: 0.75rem 1.25rem; | |
| border: 2px solid var(--border); | |
| border-radius: 2rem; | |
| background: var(--glass); | |
| color: var(--text); | |
| font-family: inherit; | |
| font-size: 1rem; | |
| transition: border-color 0.3s; | |
| } | |
| .chat-input input:focus { | |
| outline: none; | |
| border-color: var(--primary); | |
| } | |
| .send-btn { | |
| width: 50px; | |
| height: 50px; | |
| border-radius: 50%; | |
| background: var(--primary); | |
| color: white; | |
| border: none; | |
| cursor: pointer; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| transition: all 0.3s; | |
| font-size: 1.25rem; | |
| } | |
| .send-btn:hover { | |
| background: var(--primary-dark); | |
| transform: scale(1.1) rotate(-10deg); | |
| } | |
| /* Responsive */ | |
| @media (max-width: 768px) { | |
| .chat-container { | |
| grid-template-columns: 1fr; | |
| position: relative; | |
| } | |
| .sidebar { | |
| position: absolute; | |
| right: -100%; | |
| top: 0; | |
| height: 100%; | |
| width: 280px; | |
| z-index: 100; | |
| transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1); | |
| box-shadow: var(--shadow); | |
| background: var(--background); /* Solid background for mobile sidebar */ | |
| } | |
| .sidebar.open { | |
| right: 0; | |
| } | |
| .mobile-menu-btn { | |
| display: block ; | |
| } | |
| .features { | |
| grid-template-columns: 1fr; | |
| } | |
| .hero h1 { | |
| font-size: 2.5rem; | |
| } | |
| } | |
| .mobile-menu-btn { | |
| display: none; | |
| background: var(--glass); | |
| border: 1px solid var(--border); | |
| color: var(--text); | |
| padding: 0.5rem 1rem; | |
| border-radius: 0.5rem; | |
| cursor: pointer; | |
| } | |
| /* Scrollbar */ | |
| ::-webkit-scrollbar { | |
| width: 8px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: transparent; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: var(--border); | |
| border-radius: 4px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: var(--primary); | |
| } | |
| /* Loading Animation */ | |
| .typing-indicator { | |
| display: none; | |
| align-self: flex-end; /* Left side in RTL */ | |
| background: var(--glass); | |
| padding: 1rem 1.5rem; | |
| border-radius: 1.25rem; | |
| border-bottom-left-radius: 0.25rem; | |
| border: 1px solid var(--border); | |
| margin-bottom: 1rem; | |
| } | |
| .typing-indicator.active { | |
| display: flex; | |
| gap: 0.25rem; | |
| animation: messageSlide 0.3s ease; | |
| } | |
| .typing-dot { | |
| width: 8px; | |
| height: 8px; | |
| background: var(--text-muted); | |
| border-radius: 50%; | |
| animation: typing 1.4s infinite; | |
| } | |
| .typing-dot:nth-child(2) { | |
| animation-delay: 0.2s; | |
| } | |
| .typing-dot:nth-child(3) { | |
| animation-delay: 0.4s; | |
| } | |
| @keyframes typing { | |
| 0%, | |
| 60%, | |
| 100% { | |
| transform: translateY(0); | |
| } | |
| 30% { | |
| transform: translateY(-10px); | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Animated Background --> | |
| <div class="bg-animation"> | |
| <div class="circle"></div> | |
| <div class="circle"></div> | |
| <div class="circle"></div> | |
| </div> | |
| <!-- Header --> | |
| <header> | |
| <div class="logo"> | |
| <i class="fas fa-comments"></i> | |
| <span>چت روم</span> | |
| </div> | |
| <div class="header-actions"> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="built-with"> | |
| <i class="fas fa-code"></i> Built with anycoder | |
| </a> | |
| <button class="theme-toggle" onclick="toggleTheme()" title="تغییر تم"> | |
| <i class="fas fa-moon"></i> | |
| </button> | |
| </div> | |
| </header> | |
| <!-- Landing Page --> | |
| <div id="landing" class="container"> | |
| <div class="hero"> | |
| <h1><span class="emoji">💬</span> چت روم ساده</h1> | |
| <p class="subtitle">محلی امن و سریع برای گفتگو با دوستان و همکاران</p> | |
| </div> | |
| <div class="features"> | |
| <div class="feature" onclick="showRegister()"> | |
| <div class="icon">🔐</div> | |
| <h3>ثبتنام آسان</h3> | |
| <p>با چند کلیک ساده ثبتنام کنید و بلافاصله شروع به چت کنید</p> | |
| </div> | |
| <div class="feature" onclick="showRegister()"> | |
| <div class="icon">👥</div> | |
| <h3>اتاقهای گفتگو</h3> | |
| <p>تا ۳ اتاق مختلف بسازید و گروههای خصوصی ایجاد کنید</p> | |
| </div> | |
| <div class="feature" onclick="showRegister()"> | |
| <div class="icon">⚡</div> | |
| <h3>چت زنده</h3> | |
| <p>ارسال پیام فوری با قابلیت مشاهده وضعیت تایپ</p> | |
| </div> | |
| </div> | |
| <div class="cta"> | |
| <button onclick="showRegister()" class="btn btn-primary"> | |
| <i class="fas fa-rocket"></i> | |
| شروع کنید | |
| </button> | |
| <button onclick="showLogin()" class="btn btn-secondary"> | |
| <i class="fas fa-sign-in-alt"></i> | |
| ورود | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Auth Modals --> | |
| <div id="login-modal" class="modal"> | |
| <div class="modal-content"> | |
| <button class="close-modal" onclick="closeModals()"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| <h2 style="margin-bottom: 1.5rem; text-align: center;"> | |
| <i class="fas fa-sign-in-alt" style="color: var(--primary);"></i> | |
| ورود به حساب | |
| </h2> | |
| <form onsubmit="handleLogin(event)"> | |
| <div class="form-group"> | |
| <label>شماره موبایل</label> | |
| <input type="tel" placeholder="09*********" required pattern="09[0-9]{9}"> | |
| </div> | |
| <div class="form-group"> | |
| <label>رمز عبور</label> | |
| <input type="password" placeholder="••••••••" required> | |
| </div> | |
| <button type="submit" class="btn btn-primary form-submit"> | |
| ورود | |
| </button> | |
| </form> | |
| <p style="text-align: center; margin-top: 1rem; color: var(--text-muted);"> | |
| حساب ندارید؟ | |
| <a href="#" onclick="closeModals(); showRegister();" | |
| style="color: var(--primary); text-decoration: none;">ثبتنام کنید</a> | |
| </p> | |
| </div> | |
| </div> | |
| <div id="register-modal" class="modal"> | |
| <div class="modal-content"> | |
| <button class="close-modal" onclick="closeModals()"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| <h2 style="margin-bottom: 1.5rem; text-align: center;"> | |
| <i class="fas fa-user-plus" style="color: var(--secondary);"></i> | |
| ایجاد حساب جدید | |
| </h2> | |
| <form onsubmit="handleRegister(event)"> | |
| <div class="form-group"> | |
| <label>نام کامل</label> | |
| <input type="text" placeholder="نام و نام خانوادگی" required> | |
| </div> | |
| <div class="form-group"> | |
| <label>شماره موبایل</label> | |
| <input type="tel" placeholder="09*********" required pattern="09[0-9]{9}"> | |
| </div> | |
| <div class="form-group"> | |
| <label>رمز عبور</label> | |
| <input type="password" placeholder="حداقل ۸ کاراکتر" required minlength="8"> | |
| </div> | |
| <button type="submit" class="btn btn-primary form-submit"> | |
| ثبتنام | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| <!-- Chat Application --> | |
| <div id="chat-app"> | |
| <div class="chat-container"> | |
| <aside class="sidebar" id="sidebar"> | |
| <div class="user-profile"> | |
| <div class="avatar" id="user-avatar">👤</div> | |
| <h3 id="user-name">کاربر مهمان</h3> | |
| <p style="color: var(--text-muted); font-size: 0.875rem;">آنلاین</p> | |
| </div> | |
| <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;"> | |
| <h4 style="font-size: 0.875rem; color: var(--text-muted);">اتاقهای شما</h4> | |
| <button onclick="createNewRoom()" style="background: var(--primary); color: white; border: none; width: 30px; height: 30px; border-radius: 50%; cursor: pointer; transition: transform 0.2s;" onmouseover="this.style.transform='scale(1.1)'" onmouseout="this.style.transform='scale(1)'"> | |
| <i class="fas fa-plus"></i> | |
| </button> | |
| </div> | |
| <div class="rooms-list" id="rooms-list"> | |
| <div class="room-item active" onclick="switchRoom(0)"> | |
| <i class="fas fa-hashtag" style="color: var(--primary);"></i> | |
| <div> | |
| <div style="font-weight: 700;">عمومی</div> | |
| <div style="font-size: 0.75rem; color: var(--text-muted);">۱۲ عضو آنلاین</div> | |
| </div> | |
| </div> | |
| <div class="room-item" onclick="switchRoom(1)"> | |
| <i class="fas fa-lock" style="color: var(--secondary);"></i> | |
| <div> | |
| <div style="font-weight: 700;">خصوصی</div> | |
| <div style="font-size: 0.75rem; color: var(--text-muted);">۳ عضو</div> | |
| </div> | |
| </div> | |
| </div> | |
| <button onclick="logout()" class="btn btn-secondary" style="width: 100%; margin-top: auto;"> | |
| <i class="fas fa-sign-out-alt"></i> | |
| خروج | |
| </button> | |
| </aside> | |
| <main class="chat-area"> | |
| <div class="chat-header"> | |
| <div style="display: flex; align-items: center; gap: 1rem;"> | |
| <button class="mobile-menu-btn" onclick="toggleSidebar()"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| <div> | |
| <h3 id="current-room-name">اتاق عمومی</h3> | |
| <p style="font-size: 0.875rem; color: var(--text-muted);"> | |
| <span class="online-count">۱۲</span> عضو آنلاین | |
| </p> | |
| </div> | |
| </div> | |
| <div style="display: flex; gap: 0.5rem;"> | |
| <button style="background: var(--glass); border: 1px solid var(--border); color: var(--text); width: 40px; height: 40px; border-radius: 50%; cursor: pointer; transition: background 0.3s;" onmouseover="this.style.background='var(--primary)'" onmouseout="this.style.background='var(--glass)'"> | |
| <i class="fas fa-search"></i> | |
| </button> | |
| <button style="background: var(--glass); border: 1px solid var(--border); color: var(--text); width: 40px; height: 40px; border-radius: 50%; cursor: pointer; transition: background 0.3s;" onmouseover="this.style.background='var(--secondary)'" onmouseout="this.style.background='var(--glass)'"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="chat-messages" id="chat-messages"> | |
| <div class="message received"> | |
| <div class="message-author">پشتیبانی</div> | |
| به چت روم خوش آمدید! 👋 | |
| <span class="message-time">۱۰:۳۰</span> | |
| </div> | |
| </div> | |
| <div class="typing-indicator" id="typing-indicator"> | |
| <div class="typing-dot"></div> | |
| <div class="typing-dot"></div> | |
| <div class="typing-dot"></div> | |
| </div> | |
| <div class="chat-input"> | |
| <button style="background: none; border: none; color: var(--text-muted); font-size: 1.25rem; cursor: pointer; transition: color 0.3s;" onmouseover="this.style.color='var(--primary)'" onmouseout="this.style.color='var(--text-muted)'"> | |
| <i class="fas fa-paperclip"></i> | |
| </button> | |
| <input type="text" id="message-input" placeholder="پیام خود را بنویسید..." onkeypress="handleKeyPress(event)"> | |
| <button class="send-btn" onclick="sendMessage()"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </div> | |
| </main> | |
| </div> | |
| </div> | |
| <script> | |
| // State Management | |
| let currentUser = null; | |
| let currentRoom = 0; | |
| let rooms = [ | |
| { name: 'عمومی', messages: [], online: 12 }, | |
| { name: 'خصوصی', messages: [], online: 3 } | |
| ]; | |
| // Random Responses for simulation | |
| const randomResponses = [ | |
| "بسیار عالی! 👍", | |
| "من موافقم.", | |
| "میتوانی بیشتر توضیح بدهی؟", | |
| "این جالب است! 🤔", | |
| "هoho! 😂", | |
| "بله، درست میگویی.", | |
| "منتظر پیام بعدی هستم..." | |
| ]; | |
| // Theme Toggle | |
| function toggleTheme() { | |
| const html = document.documentElement; | |
| const currentTheme = html.getAttribute('data-theme'); | |
| const newTheme = currentTheme === 'light' ? 'dark' : 'light'; | |
| html.setAttribute('data-theme', newTheme); | |
| localStorage.setItem('theme', newTheme); | |
| const icon = document.querySelector('.theme-toggle i'); | |
| icon.className = newTheme === 'light' ? 'fas fa-sun' : 'fas fa-moon'; | |
| } | |
| // Initialize Theme | |
| const savedTheme = localStorage.getItem('theme') || 'dark'; | |
| document.documentElement.setAttribute('data-theme', savedTheme); | |
| document.querySelector('.theme-toggle i').className = savedTheme === 'light' ? 'fas fa-sun' : 'fas fa-moon'; | |
| // Modal Functions | |
| function showLogin() { | |
| document.getElementById('login-modal').classList.add('active'); | |
| } |