Spaces:
Running
Running
| <html lang="fa" dir="rtl"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> | |
| <title>چت روم ساده | AnyCoder</title> | |
| <!-- Importing FontAwesome for modern icons --> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| :root { | |
| /* iOS Color Palette */ | |
| --ios-bg-dark: #000000; | |
| --ios-bg-gradient-start: #1c1c1e; | |
| --ios-bg-gradient-end: #2c2c2e; | |
| --glass-bg: rgba(255, 255, 255, 0.1); | |
| --glass-border: rgba(255, 255, 255, 0.15); | |
| --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37); | |
| --text-primary: #ffffff; | |
| --text-secondary: rgba(255, 255, 255, 0.7); | |
| --accent-blue: #0a84ff; | |
| --accent-purple: #bf5af2; | |
| --accent-gradient: linear-gradient(135deg, #0a84ff, #bf5af2); | |
| --blur-amount: 20px; | |
| --card-radius: 24px; | |
| --btn-radius: 50px; | |
| } | |
| * { | |
| box-sizing: border-box; | |
| margin: 0; | |
| padding: 0; | |
| -webkit-tap-highlight-color: transparent; | |
| } | |
| body { | |
| font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; | |
| background-color: var(--ios-bg-dark); | |
| color: var(--text-primary); | |
| min-height: 100vh; | |
| overflow-x: hidden; | |
| display: flex; | |
| flex-direction: column; | |
| position: relative; | |
| } | |
| /* Animated Background Blobs */ | |
| .background-blobs { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index: -1; | |
| overflow: hidden; | |
| background: radial-gradient(circle at 50% 120%, #1a1a2e, #000000); | |
| } | |
| .blob { | |
| position: absolute; | |
| border-radius: 50%; | |
| filter: blur(80px); | |
| opacity: 0.6; | |
| animation: float 10s infinite ease-in-out alternate; | |
| } | |
| .blob-1 { | |
| top: -10%; | |
| right: -10%; | |
| width: 400px; | |
| height: 400px; | |
| background: var(--accent-blue); | |
| animation-delay: 0s; | |
| } | |
| .blob-2 { | |
| bottom: -10%; | |
| left: -10%; | |
| width: 350px; | |
| height: 350px; | |
| background: var(--accent-purple); | |
| animation-delay: -5s; | |
| } | |
| .blob-3 { | |
| top: 40%; | |
| left: 30%; | |
| width: 200px; | |
| height: 200px; | |
| background: #5e5ce6; | |
| opacity: 0.4; | |
| animation-duration: 15s; | |
| } | |
| @keyframes float { | |
| 0% { transform: translate(0, 0) scale(1); } | |
| 100% { transform: translate(30px, 50px) scale(1.1); } | |
| } | |
| /* Glassmorphism Utility Class */ | |
| .glass { | |
| background: var(--glass-bg); | |
| backdrop-filter: blur(var(--blur-amount)); | |
| -webkit-backdrop-filter: blur(var(--blur-amount)); | |
| border: 1px solid var(--glass-border); | |
| box-shadow: var(--glass-shadow); | |
| } | |
| /* Header / Nav */ | |
| header { | |
| padding: 20px; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| position: sticky; | |
| top: 0; | |
| z-index: 100; | |
| } | |
| .brand { | |
| font-size: 1.2rem; | |
| font-weight: 700; | |
| letter-spacing: -0.5px; | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .user-menu { | |
| display: flex; | |
| align-items: center; | |
| gap: 15px; | |
| } | |
| .user-info { | |
| text-align: left; | |
| font-size: 0.85rem; | |
| } | |
| .user-name { | |
| font-weight: 600; | |
| display: block; | |
| } | |
| .user-status { | |
| font-size: 0.75rem; | |
| color: var(--text-secondary); | |
| } | |
| .avatar { | |
| width: 40px; | |
| height: 40px; | |
| border-radius: 50%; | |
| background: linear-gradient(135deg, #ff9f0a, #ff453a); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-weight: bold; | |
| font-size: 1.1rem; | |
| border: 2px solid rgba(255,255,255,0.2); | |
| } | |
| .logout-btn { | |
| background: transparent; | |
| border: none; | |
| color: var(--text-secondary); | |
| cursor: pointer; | |
| transition: color 0.3s; | |
| } | |
| .logout-btn:hover { | |
| color: #ff453a; | |
| } | |
| /* Main Container */ | |
| .container { | |
| flex: 1; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 40px 20px; | |
| width: 100%; | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| } | |
| /* Hero Section */ | |
| .hero { | |
| text-align: center; | |
| margin-bottom: 60px; | |
| animation: fadeInDown 1s ease-out; | |
| } | |
| .hero h1 { | |
| font-size: 3rem; | |
| font-weight: 800; | |
| margin-bottom: 15px; | |
| background: var(--accent-gradient); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| letter-spacing: -1px; | |
| } | |
| .subtitle { | |
| font-size: 1.2rem; | |
| color: var(--text-secondary); | |
| font-weight: 400; | |
| } | |
| /* Features Grid */ | |
| .features { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); | |
| gap: 25px; | |
| width: 100%; | |
| margin-bottom: 60px; | |
| } | |
| .feature { | |
| border-radius: var(--card-radius); | |
| padding: 30px; | |
| text-align: center; | |
| transition: transform 0.3s ease, background 0.3s ease; | |
| position: relative; | |
| overflow: hidden; | |
| animation: fadeInUp 0.8s ease-out backwards; | |
| } | |
| .feature:nth-child(1) { animation-delay: 0.1s; } | |
| .feature:nth-child(2) { animation-delay: 0.2s; } | |
| .feature:nth-child(3) { animation-delay: 0.3s; } | |
| .feature:hover { | |
| transform: translateY(-10px); | |
| background: rgba(255, 255, 255, 0.15); | |
| } | |
| .icon-wrapper { | |
| width: 70px; | |
| height: 70px; | |
| border-radius: 20px; | |
| margin: 0 auto 20px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 1.8rem; | |
| position: relative; | |
| background: rgba(255, 255, 255, 0.05); | |
| backdrop-filter: blur(10px); | |
| border: 1px solid rgba(255,255,255,0.1); | |
| } | |
| /* Icon Gradients */ | |
| .feature:nth-child(1) .icon-wrapper { color: #30d158; background: linear-gradient(135deg, rgba(48, 209, 88, 0.2), rgba(48, 209, 88, 0.05)); } | |
| .feature:nth-child(2) .icon-wrapper { color: #0a84ff; background: linear-gradient(135deg, rgba(10, 132, 255, 0.2), rgba(10, 132, 255, 0.05)); } | |
| .feature:nth-child(3) .icon-wrapper { color: #bf5af2; background: linear-gradient(135deg, rgba(191, 90, 242, 0.2), rgba(191, 90, 242, 0.05)); } | |
| .feature h3 { | |
| font-size: 1.3rem; | |
| margin-bottom: 10px; | |
| font-weight: 600; | |
| } | |
| .feature p { | |
| color: var(--text-secondary); | |
| font-size: 0.95rem; | |
| line-height: 1.5; | |
| } | |
| /* CTA Section */ | |
| .cta { | |
| display: flex; | |
| gap: 20px; | |
| flex-wrap: wrap; | |
| justify-content: center; | |
| animation: fadeInUp 1s ease-out backwards; | |
| animation-delay: 0.4s; | |
| width: 100%; | |
| } | |
| .btn { | |
| padding: 16px 40px; | |
| border-radius: var(--btn-radius); | |
| text-decoration: none; | |
| font-weight: 600; | |
| font-size: 1.1rem; | |
| transition: all 0.3s ease; | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 10px; | |
| min-width: 160px; | |
| justify-content: center; | |
| } | |
| .btn-primary { | |
| background: var(--accent-gradient); | |
| color: white; | |
| box-shadow: 0 4px 15px rgba(10, 132, 255, 0.4); | |
| border: none; | |
| } | |
| .btn-primary:hover { | |
| transform: scale(1.05); | |
| box-shadow: 0 8px 25px rgba(10, 132, 255, 0.6); | |
| } | |
| .btn-secondary { | |
| background: rgba(255, 255, 255, 0.1); | |
| color: white; | |
| border: 1px solid rgba(255, 255, 255, 0.2); | |
| backdrop-filter: blur(10px); | |
| } | |
| .btn-secondary:hover { | |
| background: rgba(255, 255, 255, 0.2); | |
| transform: scale(1.05); | |
| } | |
| /* Footer / Attribution */ | |
| .footer { | |
| padding: 20px; | |
| text-align: center; | |
| width: 100%; | |
| font-size: 0.8rem; | |
| color: var(--text-secondary); | |
| z-index: 10; | |
| } | |
| .footer a { | |
| color: var(--accent-blue); | |
| text-decoration: none; | |
| font-weight: 600; | |
| } | |
| .footer a:hover { | |
| text-decoration: underline; | |
| } | |
| /* Modal Styles (Simulating PHP pages) */ | |
| .modal-overlay { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: rgba(0, 0, 0, 0.6); | |
| backdrop-filter: blur(5px); | |
| z-index: 1000; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| opacity: 0; | |
| pointer-events: none; | |
| transition: opacity 0.3s ease; | |
| } | |
| .modal-overlay.active { | |
| opacity: 1; | |
| pointer-events: all; | |
| } | |
| .modal { | |
| width: 90%; | |
| max-width: 400px; | |
| padding: 30px; | |
| border-radius: var(--card-radius); | |
| transform: scale(0.9); | |
| transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); | |
| text-align: center; | |
| } | |
| .modal-overlay.active .modal { | |
| transform: scale(1); | |
| } | |
| .modal h2 { | |
| margin-bottom: 20px; | |
| } | |
| .close-modal { | |
| margin-top: 20px; | |
| background: transparent; | |
| border: 1px solid rgba(255,255,255,0.3); | |
| color: white; | |
| padding: 10px 20px; | |
| border-radius: 20px; | |
| cursor: pointer; | |
| } | |
| /* Animations */ | |
| @keyframes fadeInDown { | |
| from { opacity: 0; transform: translateY(-30px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| @keyframes fadeInUp { | |
| from { opacity: 0; transform: translateY(30px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| /* Responsive */ | |
| @media (max-width: 768px) { | |
| .hero h1 { font-size: 2.2rem; } | |
| .features { grid-template-columns: 1fr; } | |
| .cta { flex-direction: column; width: 100%; } | |
| .btn { width: 100%; } | |
| .header { padding: 15px; } | |
| .user-info { display: none; } /* Hide name on mobile for space */ | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Background Elements --> | |
| <div class="background-blobs"> | |
| <div class="blob blob-1"></div> | |
| <div class="blob blob-2"></div> | |
| <div class="blob blob-3"></div> | |
| </div> | |
| <!-- Navigation / Header --> | |
| <header class="glass"> | |
| <div class="brand"> | |
| <i class="fa-solid fa-cube" style="color: var(--accent-blue);"></i> | |
| AnyCoder | |
| </div> | |
| <div class="user-menu"> | |
| <div class="user-info"> | |
| <span class="user-name">saertymati</span> | |
| <span class="user-status">samirerty</span> | |
| </div> | |
| <div class="avatar">S</div> | |
| <button class="logout-btn" title="Logout"> | |
| <i class="fa-solid fa-arrow-right-from-bracket"></i> | |
| </button> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <div class="container"> | |
| <div class="hero"> | |
| <h1>💬 چت روم ساده</h1> | |
| <p class="subtitle">محلی برای گفتگو با دوستان</p> | |
| </div> | |
| <div class="features"> | |
| <div class="feature glass"> | |
| <div class="icon-wrapper"> | |
| <i class="fa-solid fa-lock"></i> | |
| </div> | |
| <h3>ثبتنام آسان</h3> | |
| <p>با شماره موبایل ثبتنام کنید</p> | |
| </div> | |
| <div class="feature glass"> | |
| <div class="icon-wrapper"> | |
| <i class="fa-solid fa-users"></i> | |
| </div> | |
| <h3>ساخت اتاق</h3> | |
| <p>تا ۳ اتاق مختلف بسازید</p> | |
| </div> | |
| <div class="feature glass"> | |
| <div class="icon-wrapper"> | |
| <i class="fa-solid fa-comments"></i> | |
| </div> | |
| <h3>چت زنده</h3> | |
| <p>گفتگوی آنلاین و سریع</p> | |
| </div> | |
| </div> | |
| <div class="cta"> | |
| <!-- Using onclick to show modal instead of actual PHP link for demo purposes --> | |
| <a href="#" class="btn btn-primary" onclick="openModal('register')">شروع کنید</a> | |
| <a href="#" class="btn btn-secondary" onclick="openModal('login')">ورود</a> | |
| </div> | |
| </div> | |
| <!-- Footer Attribution --> | |
| <footer class="footer"> | |
| <p>Built with <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">anycoder</a></p> | |
| </footer> | |
| <!-- Interactive Modals (Simulating Backend Pages) --> | |
| <div class="modal-overlay" id="modalOverlay"> | |
| <div class="modal glass"> | |
| <div id="modalContent"> | |
| <!-- Content injected via JS --> | |
| </div> | |
| <button class="close-modal" onclick="closeModal()">بستن</button> | |
| </div> | |
| </div> | |
| <script> | |
| // Modal Logic | |
| const modalOverlay = document.getElementById('modalOverlay'); | |
| const modalContent = document.getElementById('modalContent'); | |
| function openModal(type) { | |
| event.preventDefault(); | |
| modalOverlay.classList.add('active'); | |
| if (type === 'register') { | |
| modalContent.innerHTML = ` | |
| <div class="icon-wrapper" style="margin-bottom:15px; color:#30d158; background:rgba(48,209,88,0.1);"> | |
| <i class="fa-solid fa-user-plus"></i> | |
| </div> | |
| <h2>ثبتنام</h2> | |
| <p style="color: rgba(255,255,255,0.7); margin-bottom: 15px;">برای شروع گفتگو ثبتنام کنید</p> | |
| <button class="btn btn-primary" style="width:100%; font-size:0.9rem;">ادامه با شماره</button> | |
| `; | |
| } else if (type === 'login') { | |
| modalContent.innerHTML = ` | |
| <div class="icon-wrapper" style="margin-bottom:15px; color:#0a84ff; background:rgba(10,132,255,0.1);"> | |
| <i class="fa-solid fa-right-to-bracket"></i> | |
| </div> | |
| <h2>ورود</h2> | |
| <p style="color: rgba(255,255,255,0.7); margin-bottom: 15px;">به حساب کاربری خود وارد شوید</p> | |
| <button class="btn btn-primary" style="width:100%; font-size:0.9rem;">ورود</button> | |
| `; | |
| } | |
| } | |
| function closeModal() { | |
| modalOverlay.classList.remove('active'); | |
| } | |
| // Close modal on outside click | |
| modalOverlay.addEventListener('click', (e) => { | |
| if (e.target === modalOverlay) { | |
| closeModal(); | |
| } | |
| }); | |
| // Interactive Tilt Effect for Cards (3D feel) | |
| const cards = document.querySelectorAll('.feature'); | |
| cards.forEach(card => { | |
| card.addEventListener('mousemove', (e) => { | |
| const rect = card.getBoundingClientRect(); | |
| const x = e.clientX - rect.left; | |
| const y = e.clientY - rect.top; | |
| const centerX = rect.width / 2; | |
| const centerY = rect.height / 2; | |
| const rotateX = ((y - centerY) / centerY) * -5; // Max 5deg rotation | |
| const rotateY = ((x - centerX) / centerX) * 5; | |
| card.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale(1.02)`; | |
| }); | |
| card.addEventListener('mouseleave', () => { | |
| card.style.transform = 'perspective(1000px) rotateX(0) rotateY(0) scale(1)'; | |
| }); | |
| }); | |
| // Parallax Effect for Background Blobs | |
| document.addEventListener('mousemove', (e) => { | |
| const x = e.clientX / window.innerWidth; | |
| const y = e.clientY / window.innerHeight; | |
| const blob1 = document.querySelector('.blob-1'); | |
| const blob2 = document.querySelector('.blob-2'); | |
| const blob3 = document.querySelector('.blob-3'); | |
| blob1.style.transform = `translate(${x * 30}px, ${y * 30}px)`; | |
| blob2.style.transform = `translate(-${x * 30}px, -${y * 30}px)`; | |
| blob3.style.transform = `translate(${x * 15}px, -${y * 15}px)`; | |
| }); | |
| </script> | |
| </body> | |
| </html> |