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>چت روم ساده</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| :root { | |
| --glass-bg: rgba(255, 255, 255, 0.1); | |
| --glass-border: rgba(255, 255, 255, 0.2); | |
| --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37); | |
| --primary-dark: #0f3460; | |
| --primary-purple: #533483; | |
| --accent-pink: #E94584; | |
| --accent-teal: #4FD3C4; | |
| --text-primary: rgba(255, 255, 255, 0.95); | |
| --text-secondary: rgba(255, 255, 255, 0.7); | |
| --text-tertiary: rgba(255, 255, 255, 0.5); | |
| } | |
| html { | |
| font-size: 16px; | |
| height: 100%; | |
| } | |
| body { | |
| font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; | |
| background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%); | |
| min-height: 100vh; | |
| overflow-x: hidden; | |
| position: relative; | |
| color: var(--text-primary); | |
| } | |
| /* Animated Background Shapes */ | |
| .bg-shapes { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| overflow: hidden; | |
| z-index: -1; | |
| pointer-events: none; | |
| } | |
| .shape { | |
| position: absolute; | |
| filter: blur(80px); | |
| opacity: 0.4; | |
| animation: float 20s infinite ease-in-out; | |
| } | |
| .shape-1 { | |
| width: 300px; | |
| height: 300px; | |
| background: var(--accent-pink); | |
| border-radius: 50%; | |
| top: -100px; | |
| right: -100px; | |
| animation-delay: 0s; | |
| } | |
| .shape-2 { | |
| width: 250px; | |
| height: 250px; | |
| background: var(--accent-teal); | |
| border-radius: 50%; | |
| bottom: 20%; | |
| left: -50px; | |
| animation-delay: 5s; | |
| } | |
| .shape-3 { | |
| width: 200px; | |
| height: 200px; | |
| background: var(--primary-purple); | |
| border-radius: 50%; | |
| top: 40%; | |
| right: 10%; | |
| animation-delay: 10s; | |
| } | |
| @keyframes float { | |
| 0%, 100% { transform: translate(0, 0) scale(1); } | |
| 33% { transform: translate(30px, -30px) scale(1.1); } | |
| 66% { transform: translate(-20px, 20px) scale(0.9); } | |
| } | |
| /* iOS Status Bar */ | |
| .status-bar { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 0.75rem 1.5rem; | |
| font-size: 0.875rem; | |
| font-weight: 600; | |
| color: var(--text-primary); | |
| position: sticky; | |
| top: 0; | |
| z-index: 100; | |
| backdrop-filter: blur(20px); | |
| background: rgba(15, 52, 96, 0.3); | |
| border-bottom: 1px solid var(--glass-border); | |
| } | |
| .status-time { | |
| font-variant-numeric: tabular-nums; | |
| } | |
| .status-icons { | |
| display: flex; | |
| gap: 0.5rem; | |
| align-items: center; | |
| } | |
| .status-icons i { | |
| font-size: 0.875rem; | |
| } | |
| .battery { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.25rem; | |
| } | |
| .battery-icon { | |
| width: 22px; | |
| height: 11px; | |
| border: 1px solid var(--text-primary); | |
| border-radius: 3px; | |
| position: relative; | |
| display: flex; | |
| align-items: center; | |
| padding: 1px; | |
| } | |
| .battery-icon::after { | |
| content: ''; | |
| position: absolute; | |
| right: -3px; | |
| width: 2px; | |
| height: 5px; | |
| background: var(--text-primary); | |
| border-radius: 0 1px 1px 0; | |
| } | |
| .battery-level { | |
| width: 80%; | |
| height: 100%; | |
| background: var(--text-primary); | |
| border-radius: 1px; | |
| } | |
| /* Main Container */ | |
| .ios-container { | |
| max-width: 430px; | |
| margin: 0 auto; | |
| min-height: calc(100vh - 100px); | |
| padding: 1.5rem; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 2rem; | |
| position: relative; | |
| } | |
| /* Glass Widget (Hero) */ | |
| .glass-widget { | |
| background: var(--glass-bg); | |
| backdrop-filter: blur(20px); | |
| -webkit-backdrop-filter: blur(20px); | |
| border: 1px solid var(--glass-border); | |
| border-radius: 24px; | |
| padding: 1.5rem; | |
| box-shadow: var(--glass-shadow); | |
| position: relative; | |
| overflow: hidden; | |
| transition: transform 0.3s ease, box-shadow 0.3s ease; | |
| } | |
| .glass-widget::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| height: 1px; | |
| background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent); | |
| } | |
| .glass-widget:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.5); | |
| } | |
| .widget-header { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.75rem; | |
| margin-bottom: 1rem; | |
| } | |
| .widget-icon { | |
| width: 40px; | |
| height: 40px; | |
| background: linear-gradient(135deg, var(--accent-pink), var(--primary-purple)); | |
| border-radius: 12px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 1.25rem; | |
| box-shadow: 0 4px 15px rgba(233, 69, 132, 0.4); | |
| } | |
| .widget-title { | |
| font-size: 0.875rem; | |
| color: var(--text-secondary); | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| } | |
| .hero-content h1 { | |
| font-size: 1.75rem; | |
| font-weight: 700; | |
| margin-bottom: 0.5rem; | |
| background: linear-gradient(to right, #fff, rgba(255,255,255,0.8)); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| } | |
| .hero-content p { | |
| font-size: 1rem; | |
| color: var(--text-secondary); | |
| line-height: 1.6; | |
| } | |
| /* App Grid */ | |
| .app-grid { | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| gap: 1.5rem 1rem; | |
| padding: 0 0.5rem; | |
| } | |
| .app-item { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 0.5rem; | |
| cursor: pointer; | |
| transition: transform 0.2s ease; | |
| } | |
| .app-item:active { | |
| transform: scale(0.92); | |
| filter: brightness(0.8); | |
| } | |
| .app-icon { | |
| width: 64px; | |
| height: 64px; | |
| border-radius: 18px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 1.75rem; | |
| position: relative; | |
| box-shadow: | |
| 0 4px 15px rgba(0,0,0,0.3), | |
| inset 0 1px 0 rgba(255,255,255,0.2); | |
| transition: all 0.3s ease; | |
| } | |
| .app-icon::before { | |
| content: ''; | |
| position: absolute; | |
| inset: 0; | |
| border-radius: 18px; | |
| background: linear-gradient(135deg, rgba(255,255,255,0.2), transparent); | |
| pointer-events: none; | |
| } | |
| .app-item:hover .app-icon { | |
| transform: translateY(-4px); | |
| box-shadow: | |
| 0 8px 25px rgba(0,0,0,0.4), | |
| inset 0 1px 0 rgba(255,255,255,0.3); | |
| } | |
| .icon-register { | |
| background: linear-gradient(135deg, var(--accent-teal), #2E8B8B); | |
| } | |
| .icon-rooms { | |
| background: linear-gradient(135deg, var(--primary-purple), #7B2D8E); | |
| } | |
| .icon-chat { | |
| background: linear-gradient(135deg, var(--accent-pink), #C73E7A); | |
| } | |
| .app-label { | |
| font-size: 0.75rem; | |
| color: var(--text-primary); | |
| font-weight: 500; | |
| text-align: center; | |
| text-shadow: 0 1px 2px rgba(0,0,0,0.3); | |
| } | |
| /* Feature Cards (Glass) */ | |
| .features-container { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 1rem; | |
| } | |
| .glass-card { | |
| background: var(--glass-bg); | |
| backdrop-filter: blur(20px); | |
| -webkit-backdrop-filter: blur(20px); | |
| border: 1px solid var(--glass-border); | |
| border-radius: 20px; | |
| padding: 1.25rem; | |
| display: flex; | |
| align-items: center; | |
| gap: 1rem; | |
| transition: all 0.3s ease; | |
| cursor: pointer; | |
| } | |
| .glass-card:hover { | |
| background: rgba(255, 255, 255, 0.15); | |
| transform: translateX(-4px); | |
| } | |
| .glass-card:active { | |
| transform: scale(0.98); | |
| } | |
| .card-icon { | |
| width: 48px; | |
| height: 48px; | |
| background: rgba(255, 255, 255, 0.15); | |
| border-radius: 14px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 1.5rem; | |
| flex-shrink: 0; | |
| border: 1px solid rgba(255,255,255,0.1); | |
| } | |
| .card-content h3 { | |
| font-size: 1rem; | |
| font-weight: 600; | |
| margin-bottom: 0.25rem; | |
| color: var(--text-primary); | |
| } | |
| .card-content p { | |
| font-size: 0.875rem; | |
| color: var(--text-secondary); | |
| } | |
| /* Bottom Dock */ | |
| .dock-container { | |
| position: fixed; | |
| bottom: 2rem; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| z-index: 50; | |
| width: calc(100% - 3rem); | |
| max-width: 400px; | |
| } | |
| .dock { | |
| background: rgba(255, 255, 255, 0.15); | |
| backdrop-filter: blur(25px); | |
| -webkit-backdrop-filter: blur(25px); | |
| border: 1px solid rgba(255, 255, 255, 0.25); | |
| border-radius: 32px; | |
| padding: 1rem 1.5rem; | |
| display: flex; | |
| justify-content: space-around; | |
| align-items: center; | |
| box-shadow: | |
| 0 10px 40px rgba(0,0,0,0.4), | |
| inset 0 1px 0 rgba(255,255,255,0.2); | |
| } | |
| .dock-item { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 0.5rem; | |
| text-decoration: none; | |
| color: var(--text-primary); | |
| transition: transform 0.2s ease; | |
| position: relative; | |
| } | |
| .dock-item:active { | |
| transform: scale(0.9); | |
| } | |
| .dock-icon { | |
| width: 56px; | |
| height: 56px; | |
| border-radius: 16px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 1.5rem; | |
| box-shadow: | |
| 0 4px 15px rgba(0,0,0,0.3), | |
| inset 0 1px 0 rgba(255,255,255,0.2); | |
| transition: all 0.3s ease; | |
| } | |
| .dock-item:hover .dock-icon { | |
| transform: translateY(-8px); | |
| box-shadow: | |
| 0 12px 30px rgba(0,0,0,0.4), | |
| inset 0 1px 0 rgba(255,255,255,0.3); | |
| } | |
| .dock-primary { | |
| background: linear-gradient(135deg, var(--accent-pink), var(--primary-purple)); | |
| } | |
| .dock-secondary { | |
| background: linear-gradient(135deg, var(--accent-teal), #2E8B8B); | |
| } | |
| .dock-label { | |
| font-size: 0.75rem; | |
| font-weight: 500; | |
| color: var(--text-primary); | |
| text-shadow: 0 1px 2px rgba(0,0,0,0.3); | |
| } | |
| /* Page Indicators */ | |
| .page-indicators { | |
| display: flex; | |
| justify-content: center; | |
| gap: 0.5rem; | |
| margin-top: 1rem; | |
| margin-bottom: 6rem; | |
| } | |
| .dot { | |
| width: 8px; | |
| height: 8px; | |
| border-radius: 50%; | |
| background: rgba(255,255,255,0.3); | |
| transition: all 0.3s ease; | |
| } | |
| .dot.active { | |
| width: 24px; | |
| border-radius: 4px; | |
| background: var(--text-primary); | |
| } | |
| /* Home Indicator */ | |
| .home-indicator { | |
| position: fixed; | |
| bottom: 0.5rem; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| width: 134px; | |
| height: 5px; | |
| background: var(--text-primary); | |
| border-radius: 3px; | |
| z-index: 100; | |
| } | |
| /* Built with anycoder */ | |
| .anycoder-badge { | |
| position: fixed; | |
| top: 2.5rem; | |
| left: 1rem; | |
| z-index: 101; | |
| background: rgba(255, 255, 255, 0.1); | |
| backdrop-filter: blur(10px); | |
| border: 1px solid rgba(255, 255, 255, 0.2); | |
| padding: 0.5rem 1rem; | |
| border-radius: 20px; | |
| font-size: 0.75rem; | |
| color: var(--text-secondary); | |
| text-decoration: none; | |
| transition: all 0.3s ease; | |
| } | |
| .anycoder-badge:hover { | |
| background: rgba(255, 255, 255, 0.2); | |
| color: var(--text-primary); | |
| } | |
| /* Animations */ | |
| @keyframes fadeInUp { | |
| from { | |
| opacity: 0; | |
| transform: translateY(20px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| .animate-in { | |
| animation: fadeInUp 0.6s ease forwards; | |
| } | |
| .delay-1 { animation-delay: 0.1s; } | |
| .delay-2 { animation-delay: 0.2s; } | |
| .delay-3 { animation-delay: 0.3s; } | |
| /* Responsive */ | |
| @media (max-width: 380px) { | |
| .app-grid { | |
| grid-template-columns: repeat(3, 1fr); | |
| gap: 1.25rem 0.75rem; | |
| } | |
| .app-icon { | |
| width: 58px; | |
| height: 58px; | |
| font-size: 1.5rem; | |
| } | |
| .glass-widget { | |
| padding: 1.25rem; | |
| } | |
| .hero-content h1 { | |
| font-size: 1.5rem; | |
| } | |
| } | |
| @media (min-width: 768px) { | |
| .ios-container { | |
| max-width: 500px; | |
| } | |
| .app-grid { | |
| grid-template-columns: repeat(3, 1fr); | |
| gap: 2rem 1.5rem; | |
| } | |
| } | |
| /* Scrollbar Styling */ | |
| ::-webkit-scrollbar { | |
| width: 6px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: transparent; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: rgba(255,255,255,0.2); | |
| border-radius: 3px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: rgba(255,255,255,0.3); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Background Shapes --> | |
| <div class="bg-shapes"> | |
| <div class="shape shape-1"></div> | |
| <div class="shape shape-2"></div> | |
| <div class="shape shape-3"></div> | |
| </div> | |
| <!-- Built with anycoder Badge --> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-badge"> | |
| Built with anycoder | |
| </a> | |
| <!-- iOS Status Bar --> | |
| <div class="status-bar"> | |
| <div class="status-time" id="clock">۰۹:۴۱</div> | |
| <div class="status-icons"> | |
| <i class="fas fa-signal"></i> | |
| <i class="fas fa-wifi"></i> | |
| <div class="battery"> | |
| <span>۸۰٪</span> | |
| <div class="battery-icon"> | |
| <div class="battery-level"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Container --> | |
| <div class="ios-container"> | |
| <!-- Hero Widget --> | |
| <div class="glass-widget animate-in"> | |
| <div class="widget-header"> | |
| <div class="widget-icon"> | |
| <i class="fas fa-comments"></i> | |
| </div> | |
| <span class="widget-title">چت روم</span> | |
| </div> | |
| <div class="hero-content"> | |
| <h1>چت روم ساده</h1> | |
| <p>محلی برای گفتگو با دوستان و خانواده. با امنیت بالا و سرعت فوقالعاده.</p> | |
| </div> | |
| </div> | |
| <!-- App Grid --> | |
| <div class="app-grid animate-in delay-1"> | |
| <div class="app-item" onclick="window.location.href='register.php'"> | |
| <div class="app-icon icon-register"> | |
| <i class="fas fa-user-plus"></i> | |
| </div> | |
| <span class="app-label">ثبتنام</span> | |
| </div> | |
| <div class="app-item" onclick="window.location.href='rooms.php'"> | |
| <div class="app-icon icon-rooms"> | |
| <i class="fas fa-door-open"></i> | |
| </div> | |
| <span class="app-label">اتاقها</span> | |
| </div> | |
| <div class="app-item" onclick="window.location.href='chat.php'"> | |
| <div class="app-icon icon-chat"> | |
| <i class="fas fa-comment-dots"></i> | |
| </div> | |
| <span class="app-label">چت زنده</span> | |
| </div> | |
| </div> | |
| <!-- Features List --> | |
| <div class="features-container animate-in delay-2"> | |
| <div class="glass-card" onclick="window.location.href='register.php'"> | |
| <div class="card-icon" style="color: var(--accent-teal);"> | |
| <i class="fas fa-mobile-alt"></i> | |
| </div> | |
| <div class="card-content"> | |
| <h3>ثبتنام آسان</h3> | |
| <p>با شماره موبایل در کمتر از یک دقیقه ثبتنام کنید</p> | |
| </div> | |
| <i class="fas fa-chevron-left" style="color: var(--text-tertiary); margin-right: auto;"></i> | |
| </div> | |
| <div class="glass-card" onclick="window.location.href='rooms.php'"> | |
| <div class="card-icon" style="color: var(--accent-pink);"> | |
| <i class="fas fa-users"></i> | |
| </div> | |
| <div class="card-content"> | |
| <h3>ساخت اتاق</h3> | |
| <p>تا ۳ اتاق مختلف با موضوعات متنوع بسازید</p> | |
| </div> | |
| <i class="fas fa-chevron-left" style="color: var(--text-tertiary); margin-right: auto;"></i> | |
| </div> | |
| <div class="glass-card" onclick="window.location.href='chat.php'"> | |
| <div class="card-icon" style="color: var(--primary-purple);"> | |
| <i class="fas fa-bolt"></i> | |
| </div> | |
| <div class="card-content"> | |
| <h3>چت زنده</h3> | |
| <p>گفتگوی آنلاین و سریع بدون تاخیر</p> | |
| </div> | |
| <i class="fas fa-chevron-left" style="color: var(--text-tertiary); margin-right: auto;"></i> | |
| </div> | |
| </div> | |
| <!-- Page Indicators --> | |
| <div class="page-indicators animate-in delay-3"> | |
| <div class="dot active"></div> | |
| <div class="dot"></div> | |
| </div> | |
| </div> | |
| <!-- Bottom Dock --> | |
| <div class="dock-container animate-in delay-3"> | |
| <div class="dock"> | |
| <a href="register.php" class="dock-item"> | |
| <div class="dock-icon dock-primary"> | |
| <i class="fas fa-user-plus"></i> | |
| </div> | |
| <span class="dock-label">شروع کنید</span> | |
| </a> | |
| <a href="login.php" class="dock-item"> | |
| <div class="dock-icon dock-secondary"> | |
| <i class="fas fa-sign-in-alt"></i> | |
| </div> | |
| <span class="dock-label">ورود</span> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Home Indicator --> | |
| <div class="home-indicator"></div> | |
| <script> | |
| // Persian Number Converter | |
| function toPersianNum(num) { | |
| const persianDigits = ['۰', '۱', '۲', '۳', '۴', '۵', '۶', '۷', '۸', '۹']; | |
| return num.toString().replace(/\d/g, x => persianDigits[x]); | |
| } | |
| // Update Clock | |
| function updateClock() { | |
| const now = new Date(); | |
| const hours = String(now.getHours()).padStart(2, '0'); | |
| const minutes = String(now.getMinutes()).padStart(2, '0'); | |
| document.getElementById('clock').textContent = toPersianNum(`${hours}:${minutes}`); | |
| } | |
| updateClock(); | |
| setInterval(updateClock, 1000); | |
| // Add touch feedback for mobile | |
| document.querySelectorAll('.app-item, .glass-card, .dock-item').forEach(item => { | |
| item.addEventListener('touchstart', function() { | |
| this.style.transform = 'scale(0.95)'; | |
| }); | |
| item.addEventListener('touchend', function() { | |
| this.style.transform = ''; | |
| }); | |
| }); | |
| // Parallax effect for background shapes on mouse move (desktop only) | |
| document.addEventListener('mousemove', (e) => { | |
| if (window.innerWidth > 768) { | |
| const shapes = document.querySelectorAll('.shape'); | |
| const x = e.clientX / window.innerWidth; | |
| const y = e.clientY / window.innerHeight; | |
| shapes.forEach((shape, index) => { | |
| const speed = (index + 1) * 20; | |
| const xOffset = (0.5 - x) * speed; | |
| const yOffset = (0.5 - y) * speed; | |
| shape.style.transform = `translate(${xOffset}px, ${yOffset}px)`; | |
| }); | |
| } | |
| }); | |
| // Page indicator interaction | |
| const dots = document.querySelectorAll('.dot'); | |
| dots.forEach((dot, index) => { | |
| dot.addEventListener('click', () => { | |
| dots.forEach(d => d.classList.remove('active')); | |
| dot.classList.add('active'); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |