Spaces:

samirerty
/

anycoder-b70f1136

Running

App Files Files Community

samirerty commited on 16 days ago

Commit

352c8b1

verified ·

1 Parent(s): d1c6688

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +354 -582

index.html CHANGED Viewed

@@ -3,26 +3,33 @@
 <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">
-    <link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;700&display=swap" rel="stylesheet">
     <style>
         :root {
-            --ios-bg-start: #1a1a2e;
-            --ios-bg-mid: #16213e;
-            --ios-bg-end: #0f3460;
             --glass-bg: rgba(255, 255, 255, 0.1);
             --glass-border: rgba(255, 255, 255, 0.2);
-            --glass-highlight: rgba(255, 255, 255, 0.05);
-            --accent-pink: #E94584;
-            --accent-cyan: #4FD3C4;
-            --accent-purple: #533483;
-            --text-primary: rgba(255, 255, 255, 0.95);
-            --text-secondary: rgba(255, 255, 255, 0.7);
-            --shadow-sm: 0 4px 6px rgba(0, 0, 0, 0.1);
-            --shadow-md: 0 8px 32px rgba(0, 0, 0, 0.2);
-            --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.3);
-            --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
         }
         * {
@@ -32,724 +39,489 @@
             -webkit-tap-highlight-color: transparent;
         }
-        html {
-            font-size: 16px;
-            height: 100%;
-        }
         body {
-            font-family: 'Vazirmatn', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-            background: linear-gradient(135deg, var(--ios-bg-start) 0%, var(--ios-bg-mid) 50%, var(--ios-bg-end) 100%);
             min-height: 100vh;
-            overflow-x: hidden;
-            position: relative;
-            color: var(--text-primary);
-        }
-        /* Animated Background Pattern */
-        body::before {
-            content: '';
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background-image:
-                radial-gradient(circle at 20% 50%, rgba(233, 69, 132, 0.15) 0%, transparent 50%),
-                radial-gradient(circle at 80% 80%, rgba(79, 211, 196, 0.1) 0%, transparent 50%),
-                radial-gradient(circle at 40% 20%, rgba(83, 52, 131, 0.2) 0%, transparent 50%);
-            pointer-events: none;
-            z-index: -1;
-        }
-        /* Geometric Pattern Overlay */
-        .pattern-overlay {
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background-image:
-                linear-gradient(45deg, transparent 48%, rgba(255,255,255,0.02) 50%, transparent 52%),
-                linear-gradient(-45deg, transparent 48%, rgba(255,255,255,0.02) 50%, transparent 52%);
-            background-size: 60px 60px;
-            pointer-events: none;
-            z-index: -1;
-        }
-        /* 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;
-            position: sticky;
-            top: 0;
-            z-index: 100;
-            backdrop-filter: blur(20px);
-            background: rgba(26, 26, 46, 0.8);
-            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-icon {
-            display: flex;
-            align-items: center;
-            gap: 0.25rem;
         }
-        /* Built with anycoder */
-        .developer-credit {
-            position: fixed;
-            top: 2.5rem;
-            left: 1rem;
-            z-index: 101;
-            font-size: 0.75rem;
-            opacity: 0.8;
-            backdrop-filter: blur(10px);
-            background: rgba(255, 255, 255, 0.1);
-            padding: 0.25rem 0.75rem;
-            border-radius: 1rem;
-            border: 1px solid var(--glass-border);
-            transition: var(--transition-smooth);
         }
-        .developer-credit:hover {
-            background: rgba(255, 255, 255, 0.2);
-            transform: translateY(-2px);
         }
-        .developer-credit a {
-            color: var(--text-secondary);
-            text-decoration: none;
-            font-weight: 500;
         }
-        /* Main Container */
-        .container {
-            max-width: 430px;
-            margin: 0 auto;
-            padding: 1.5rem;
-            min-height: calc(100vh - 44px);
             display: flex;
             flex-direction: column;
-            gap: 1.5rem;
-            padding-bottom: 120px;
         }
-        /* Glassmorphism Base */
         .glass {
             background: var(--glass-bg);
             backdrop-filter: blur(20px);
             -webkit-backdrop-filter: blur(20px);
             border: 1px solid var(--glass-border);
-            box-shadow:
-                0 8px 32px 0 rgba(0, 0, 0, 0.2),
-                inset 0 1px 0 0 rgba(255, 255, 255, 0.1);
-            border-radius: 1.5rem;
-        }
-        /* Hero Widget */
-        .hero-widget {
-            padding: 2rem;
-            text-align: center;
-            position: relative;
-            overflow: hidden;
-            transition: var(--transition-smooth);
-        }
-        .hero-widget::before {
-            content: '';
-            position: absolute;
-            top: -50%;
-            right: -50%;
-            width: 200%;
-            height: 200%;
-            background: radial-gradient(circle, rgba(233, 69, 132, 0.2) 0%, transparent 70%);
-            animation: pulse 4s ease-in-out infinite;
-        }
-        @keyframes pulse {
-            0%, 100% { transform: scale(1); opacity: 0.5; }
-            50% { transform: scale(1.1); opacity: 0.8; }
-        }
-        .hero-content {
-            position: relative;
-            z-index: 1;
         }
-        .hero-icon {
-            width: 5rem;
-            height: 5rem;
-            background: linear-gradient(135deg, var(--accent-pink), var(--accent-purple));
-            border-radius: 1.25rem;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            margin: 0 auto 1.5rem;
-            font-size: 2.5rem;
-            box-shadow: 0 10px 30px rgba(233, 69, 132, 0.4);
-            transition: var(--transition-smooth);
-        }
-        .hero-widget:hover .hero-icon {
-            transform: scale(1.1) rotate(-5deg);
-            box-shadow: 0 15px 40px rgba(233, 69, 132, 0.5);
-        }
-        .hero h1 {
-            font-size: 1.75rem;
-            font-weight: 700;
-            margin-bottom: 0.5rem;
-            text-shadow: 0 2px 4px rgba(0,0,0,0.2);
-        }
-        .subtitle {
-            color: var(--text-secondary);
-            font-size: 1rem;
-            font-weight: 400;
-        }
-        /* Date & Time Widget */
-        .datetime-widget {
-            padding: 1.25rem;
             display: flex;
             justify-content: space-between;
             align-items: center;
-            margin-bottom: 0.5rem;
-        }
-        .date-info h2 {
-            font-size: 1.25rem;
             font-weight: 600;
-            margin-bottom: 0.25rem;
-        }
-        .date-info p {
-            font-size: 0.875rem;
-            color: var(--text-secondary);
-        }
-        .weather-icon {
-            font-size: 2rem;
-            color: var(--accent-cyan);
-        }
-        /* Apps Grid */
-        .apps-section {
-            margin-top: 1rem;
-        }
-        .section-title {
-            font-size: 1.25rem;
-            font-weight: 700;
-            margin-bottom: 1rem;
-            padding-right: 0.5rem;
-            display: flex;
-            align-items: center;
-            gap: 0.5rem;
-        }
-        .apps-grid {
-            display: grid;
-            grid-template-columns: repeat(3, 1fr);
-            gap: 1.5rem 1rem;
-            margin-bottom: 2rem;
         }
-        .app-item {
             display: flex;
-            flex-direction: column;
             align-items: center;
-            gap: 0.5rem;
-            cursor: pointer;
-            transition: var(--transition-smooth);
         }
-        .app-item:active {
-            transform: scale(0.95);
-        }
-        .app-icon {
-            width: 4rem;
-            height: 4rem;
-            border-radius: 1rem;
             display: flex;
             align-items: center;
-            justify-content: center;
-            font-size: 1.75rem;
-            position: relative;
-            overflow: hidden;
-            transition: var(--transition-smooth);
-            box-shadow:
-                0 4px 15px rgba(0,0,0,0.2),
-                inset 0 1px 0 rgba(255,255,255,0.2);
-        }
-        .app-item:hover .app-icon {
-            transform: translateY(-5px);
-            box-shadow:
-                0 8px 25px rgba(0,0,0,0.3),
-                inset 0 1px 0 rgba(255,255,255,0.3);
         }
-        .app-icon::after {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
-            height: 50%;
-            background: linear-gradient(to bottom, rgba(255,255,255,0.3), transparent);
-            border-radius: 1rem 1rem 0 0;
         }
-        .app-icon.pink {
-            background: linear-gradient(135deg, var(--accent-pink), #ff6b9d);
         }
-        .app-icon.purple {
-            background: linear-gradient(135deg, var(--accent-purple), #7c5cff);
         }
-        .app-icon.cyan {
-            background: linear-gradient(135deg, var(--accent-cyan), #6ee7d8);
         }
-        .app-icon.blue {
-            background: linear-gradient(135deg, #3b82f6, #60a5fa);
         }
-        .app-icon.green {
-            background: linear-gradient(135deg, #10b981, #34d399);
         }
-        .app-icon.orange {
-            background: linear-gradient(135deg, #f59e0b, #fbbf24);
         }
-        .app-label {
-            font-size: 0.75rem;
-            font-weight: 500;
-            color: var(--text-primary);
-            text-align: center;
-            max-width: 100%;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
         }
-        /* Features as Widgets */
-        .features-container {
             display: flex;
             flex-direction: column;
-            gap: 1rem;
-            margin: 1rem 0;
-        }
-        .feature-card {
-            padding: 1.25rem;
-            display: flex;
             align-items: center;
-            gap: 1rem;
-            transition: var(--transition-smooth);
             cursor: pointer;
         }
-        .feature-card:hover {
             background: rgba(255, 255, 255, 0.15);
-            transform: translateX(-5px);
         }
-        .feature-icon-small {
-            width: 3rem;
-            height: 3rem;
-            border-radius: 0.875rem;
             display: flex;
             align-items: center;
             justify-content: center;
-            font-size: 1.25rem;
-            flex-shrink: 0;
         }
-        .feature-content h3 {
             font-size: 1rem;
-            font-weight: 600;
-            margin-bottom: 0.25rem;
-        }
-        .feature-content p {
-            font-size: 0.875rem;
-            color: var(--text-secondary);
         }
-        .feature-arrow {
-            margin-right: auto;
-            color: var(--text-secondary);
-            font-size: 0.875rem;
         }
-        /* Dock */
         .dock-container {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            padding: 1rem 1.5rem 2rem;
             z-index: 50;
-            background: linear-gradient(to top, rgba(26, 26, 46, 0.9), transparent);
         }
         .dock {
-            backdrop-filter: blur(25px);
-            -webkit-backdrop-filter: blur(25px);
-            background: rgba(255, 255, 255, 0.15);
-            border: 1px solid rgba(255, 255, 255, 0.25);
-            border-radius: 2rem;
-            padding: 1rem;
             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);
-            max-width: 400px;
-            margin: 0 auto;
         }
-        .dock-item {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            gap: 0.5rem;
             text-decoration: none;
-            color: var(--text-primary);
-            transition: var(--transition-smooth);
-            padding: 0.5rem;
-            border-radius: 1rem;
-        }
-        .dock-item:hover {
-            transform: translateY(-8px);
-        }
-        .dock-icon {
-            width: 3.5rem;
-            height: 3.5rem;
-            border-radius: 1rem;
-            display: flex;
             align-items: center;
-            justify-content: center;
-            font-size: 1.5rem;
-            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
             position: relative;
             overflow: hidden;
         }
-        .dock-icon::after {
             content: '';
             position: absolute;
             top: 0;
             left: 0;
-            right: 0;
-            height: 50%;
-            background: linear-gradient(to bottom, rgba(255,255,255,0.4), transparent);
-            border-radius: 1rem 1rem 0 0;
-        }
-        .dock-label {
-            font-size: 0.75rem;
-            font-weight: 500;
-        }
-        /* Page Indicator */
-        .page-indicator {
-            display: flex;
-            justify-content: center;
-            gap: 0.5rem;
-            margin-top: 1rem;
-            margin-bottom: 0.5rem;
         }
-        .dot {
-            width: 0.5rem;
-            height: 0.5rem;
-            border-radius: 50%;
-            background: rgba(255,255,255,0.3);
-            transition: var(--transition-smooth);
         }
-        .dot.active {
-            background: var(--text-primary);
-            width: 1.5rem;
-            border-radius: 0.25rem;
         }
-        /* Responsive */
-        @media (min-width: 768px) {
-            .container {
-                max-width: 600px;
-            }
-            .apps-grid {
-                grid-template-columns: repeat(4, 1fr);
-            }
         }
-        @media (max-width: 380px) {
-            html {
-                font-size: 14px;
-            }
-            .apps-grid {
-                gap: 1rem 0.5rem;
-            }
-            .app-icon {
-                width: 3.5rem;
-                height: 3.5rem;
-                font-size: 1.5rem;
-            }
         }
-        /* Animations */
-        @keyframes float {
-            0%, 100% { transform: translateY(0px); }
-            50% { transform: translateY(-10px); }
         }
-        .floating {
-            animation: float 3s ease-in-out infinite;
         }
-        /* Scrollbar */
-        ::-webkit-scrollbar {
-            width: 0px;
-            background: transparent;
         }
-        /* Selection */
-        ::selection {
-            background: rgba(233, 69, 132, 0.3);
-            color: white;
         }
     </style>
 </head>
 <body>
-    <div class="pattern-overlay"></div>
-    <!-- Status Bar -->
-    <div class="status-bar">
-        <div class="status-time" id="clock">۰۹:۴۱</div>
-        <div class="developer-credit">
-            <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">Built with anycoder</a>
-        </div>
-        <div class="status-icons">
-            <i class="fas fa-signal"></i>
-            <i class="fas fa-wifi"></i>
-            <div class="battery-icon">
-                <span>۱۰۰٪</span>
-                <i class="fas fa-battery-full"></i>
-            </div>
-        </div>
-    </div>
-    <div class="container">
-        <!-- DateTime Widget -->
-        <div class="glass datetime-widget">
-            <div class="date-info">
-                <h2>چت روم</h2>
-                <p id="persian-date">پنجشنبه ۱۵ شهریور</p>
             </div>
-            <div class="weather-icon floating">
-                <i class="fas fa-comments"></i>
             </div>
         </div>
-        <!-- Hero Widget -->
-        <div class="glass hero-widget">
-            <div class="hero-content">
-                <div class="hero-icon">
-                    <i class="fas fa-comment-dots"></i>
-                </div>
-                <h1>چت روم ساده</h1>
-                <p class="subtitle">محلی برای گفتگو با دوستان</p>
-            </div>
         </div>
-        <!-- Features as App Grid -->
-        <div class="apps-section">
-            <h3 class="section-title">
-                <i class="fas fa-star" style="color: var(--accent-pink);"></i>
-                قابلیت‌ها
-            </h3>
-            <div class="apps-grid">
-                <div class="app-item" onclick="window.location.href='register.php'">
-                    <div class="app-icon pink">
-                        <i class="fas fa-shield-alt"></i>
                     </div>
-                    <span class="app-label">ثبت‌نام آسان</span>
                 </div>
-                <div class="app-item" onclick="window.location.href='rooms.php'">
-                    <div class="app-icon purple">
-                        <i class="fas fa-users"></i>
                     </div>
-                    <span class="app-label">ساخت اتاق</span>
                 </div>
-                <div class="app-item" onclick="window.location.href='chat.php'">
-                    <div class="app-icon cyan">
-                        <i class="fas fa-bolt"></i>
                     </div>
-                    <span class="app-label">چت زنده</span>
-                </div>
-            </div>
-        </div>
-        <!-- Detailed Features List -->
-        <div class="features-container">
-            <div class="glass feature-card" onclick="window.location.href='register.php'">
-                <div class="feature-icon-small pink">
-                    <i class="fas fa-mobile-alt"></i>
-                </div>
-                <div class="feature-content">
-                    <h3>ثبت‌نام آسان</h3>
-                    <p>با شماره موبایل ثبت‌نام کنید</p>
                 </div>
-                <i class="fas fa-chevron-left feature-arrow"></i>
             </div>
-            <div class="glass feature-card" onclick="window.location.href='rooms.php'">
-                <div class="feature-icon-small purple">
-                    <i class="fas fa-door-open"></i>
                 </div>
-                <div class="feature-content">
-                    <h3>ساخت اتاق</h3>
-                    <p>تا ۳ اتاق مختلف بسازید</p>
                 </div>
-                <i class="fas fa-chevron-left feature-arrow"></i>
             </div>
-            <div class="glass feature-card" onclick="window.location.href='chat.php'">
-                <div class="feature-icon-small cyan">
-                    <i class="fas fa-paper-plane"></i>
-                </div>
-                <div class="feature-content">
-                    <h3>چت زنده</h3>
-                    <p>گفتگوی آنلاین و سریع</p>
-                </div>
-                <i class="fas fa-chevron-left feature-arrow"></i>
-            </div>
         </div>
-        <!-- Page Indicators -->
-        <div class="page-indicator">
-            <div class="dot active"></div>
-            <div class="dot"></div>
         </div>
-    </div>
-    <!-- iOS Dock -->
-    <div class="dock-container">
-        <div class="dock">
-            <a href="login.php" class="dock-item">
-                <div class="dock-icon blue">
-                    <i class="fas fa-sign-in-alt"></i>
-                </div>
-                <span class="dock-label">ورود</span>
-            </a>
-            <a href="register.php" class="dock-item">
-                <div class="dock-icon green">
-                    <i class="fas fa-user-plus"></i>
-                </div>
-                <span class="dock-label">ثبت‌نام</span>
-            </a>
-            <a href="#" class="dock-item" onclick="alert('تنظیمات')">
-                <div class="dock-icon orange">
-                    <i class="fas fa-cog"></i>
-                </div>
-                <span class="dock-label">تنظیمات</span>
-            </a>
-        </div>
     </div>
     <script>
-        // Clock functionality
         function updateClock() {
             const now = new Date();
             const hours = String(now.getHours()).padStart(2, '0');
             const minutes = String(now.getMinutes()).padStart(2, '0');
-            // Convert to Persian digits
-            const persianDigits = ['۰', '۱', '۲', '۳', '۴', '۵', '۶', '۷', '۸', '۹'];
-            const persianTime = (hours + ':' + minutes).replace(/\d/g, w => persianDigits[w]);
-            document.getElementById('clock').textContent = persianTime;
         }
-        // Persian Date (simplified)
-        function updateDate() {
-            const days = ['یکشنبه', 'دوشنبه', 'سه‌شنبه', 'چهارشنبه', 'پنجشنبه', 'جمعه', 'شنبه'];
-            const months = ['فروردین', 'اردیبهشت', 'خرداد', 'تیر', 'مرداد', 'شهریور', 'مهر', 'آبان', 'آذر', 'دی', 'بهمن', 'اسفند'];
-            const now = new Date();
-            // Simplified Persian date calculation (approximate)
-            const day = now.getDate();
-            const month = now.getMonth();
-            const persianDigits = ['۰', '۱', '۲', '۳', '۴', '۵', '۶', '۷', '۸', '۹'];
-            const persianDay = String(day).replace(/\d/g, w => persianDigits[w]);
-            document.getElementById('persian-date').textContent = days[now.getDay()] + ' ' + persianDay + ' ' + months[month];
         }
-        // Initialize
-        updateClock();
-        updateDate();
-        setInterval(updateClock, 1000);
-        // Touch feedback for mobile
-        document.querySelectorAll('.app-item, .feature-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
         document.addEventListener('mousemove', (e) => {
-            const x = e.clientX / window.innerWidth;
-            const y = e.clientY / window.innerHeight;
-            document.body.style.background = `
-                linear-gradient(
-                    ${135 + (x * 10)}deg,
-                    var(--ios-bg-start) 0%,
-                    var(--ios-bg-mid) 50%,
-                    var(--ios-bg-end) 100%
-                )
-            `;
         });
     </script>
 </body>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    <title>چت روم ساده | iOS Glassmorphism</title>
+    <!-- Font Awesome 6 -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <!-- Google Fonts: Vazirmatn for Persian -->
+    <link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;700&display=swap" rel="stylesheet">
     <style>
         :root {
+            /* iOS Glassmorphism Color Palette */
+            --bg-gradient-start: #1a1a2e;
+            --bg-gradient-mid: #16213e;
+            --bg-gradient-end: #0f3460;
+            --primary-accent: #E94584;
+            --secondary-accent: #4FD3C4;
             --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);
+            --text-color: #ffffff;
+            --text-muted: rgba(255, 255, 255, 0.7);
+            --font-main: 'Vazirmatn', sans-serif;
+            --status-bar-height: 44px;
+            --dock-height: 90px;
         }
         * {
             -webkit-tap-highlight-color: transparent;
         }
         body {
+            font-family: var(--font-main);
+            background: linear-gradient(135deg, var(--bg-gradient-start) 0%, var(--bg-gradient-mid) 50%, var(--bg-gradient-end) 100%);
             min-height: 100vh;
             display: flex;
+            justify-content: center;
             align-items: center;
+            overflow: hidden; /* Prevent body scroll, handle inside app */
+            color: var(--text-color);
+            position: relative;
         }
+        /* Abstract Background Shapes for Glass Effect */
+        .shape {
+            position: absolute;
+            border-radius: 50%;
+            filter: blur(80px);
+            z-index: 0;
+            animation: float 10s infinite ease-in-out;
         }
+        .shape-1 {
+            width: 300px;
+            height: 300px;
+            background: var(--primary-accent);
+            top: -50px;
+            left: -50px;
+            opacity: 0.4;
         }
+        .shape-2 {
+            width: 400px;
+            height: 400px;
+            background: #533483;
+            bottom: -100px;
+            right: -100px;
+            opacity: 0.3;
+            animation-delay: -5s;
         }
+        @keyframes float {
+            0%, 100% { transform: translate(0, 0); }
+            50% { transform: translate(20px, -20px); }
         }
+        /* Main App Container (Phone Frame on Desktop) */
+        .app-wrapper {
+            position: relative;
+            z-index: 1;
+            width: 100%;
+            height: 100vh;
+            max-width: 480px; /* Mobile width constraint */
+            background: rgba(0, 0, 0, 0.2);
             display: flex;
             flex-direction: column;
+            overflow: hidden;
+            box-shadow: 0 0 50px rgba(0,0,0,0.5);
         }
+        /* Glass Utility Class */
         .glass {
             background: var(--glass-bg);
             backdrop-filter: blur(20px);
             -webkit-backdrop-filter: blur(20px);
             border: 1px solid var(--glass-border);
+            box-shadow: var(--glass-shadow);
         }
+        /* Status Bar */
+        .status-bar {
+            height: var(--status-bar-height);
             display: flex;
             justify-content: space-between;
             align-items: center;
+            padding: 0 20px;
+            font-size: 0.85rem;
             font-weight: 600;
+            z-index: 100;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
         }
+        .status-right {
             display: flex;
+            gap: 8px;
             align-items: center;
         }
+        .status-left {
             display: flex;
+            gap: 6px;
             align-items: center;
         }
+        .brand-link {
+            color: var(--secondary-accent);
+            text-decoration: none;
+            font-size: 0.75rem;
+            margin-right: 10px;
+            opacity: 0.9;
+            transition: opacity 0.3s;
         }
+        .brand-link:hover { opacity: 1; text-decoration: underline; }
+        /* Main Content Scroll Area */
+        .content-scroll {
+            flex: 1;
+            overflow-y: auto;
+            padding: 20px;
+            padding-bottom: calc(var(--dock-height) + 20px);
+            scrollbar-width: none; /* Firefox */
         }
+        .content-scroll::-webkit-scrollbar {
+            display: none; /* Chrome/Safari */
         }
+        /* Hero Section */
+        .hero {
+            text-align: center;
+            margin-top: 20px;
+            margin-bottom: 30px;
+            padding: 30px 20px;
+            border-radius: 24px;
+            position: relative;
+            overflow: hidden;
+            transition: transform 0.3s ease;
         }
+        .hero:hover {
+            transform: translateY(-2px);
         }
+        .hero h1 {
+            font-size: 2rem;
+            margin-bottom: 10px;
+            text-shadow: 0 2px 10px rgba(0,0,0,0.2);
         }
+        .subtitle {
+            font-size: 1rem;
+            color: var(--text-muted);
+            font-weight: 300;
         }
+        /* Features Grid (Widgets) */
+        .features {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+            gap: 15px;
+            margin-bottom: 30px;
         }
+        .feature {
+            padding: 20px;
+            border-radius: 20px;
             display: flex;
             flex-direction: column;
             align-items: center;
+            text-align: center;
+            transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
             cursor: pointer;
         }
+        .feature:hover {
             background: rgba(255, 255, 255, 0.15);
+            transform: scale(1.03);
         }
+        .feature .icon-box {
+            width: 50px;
+            height: 50px;
+            border-radius: 12px;
+            background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05));
             display: flex;
             align-items: center;
             justify-content: center;
+            font-size: 1.5rem;
+            margin-bottom: 15px;
+            color: var(--secondary-accent);
+            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
         }
+        .feature h3 {
             font-size: 1rem;
+            margin-bottom: 5px;
         }
+        .feature p {
+            font-size: 0.8rem;
+            color: var(--text-muted);
+            line-height: 1.4;
         }
+        /* Bottom Dock (CTA) */
         .dock-container {
+            position: absolute;
+            bottom: 20px;
+            left: 20px;
+            right: 20px;
+            height: var(--dock-height);
+            display: flex;
+            justify-content: center;
+            align-items: center;
             z-index: 50;
         }
         .dock {
             display: flex;
+            gap: 15px;
+            padding: 15px 25px;
+            border-radius: 30px;
+            backdrop-filter: blur(25px) saturate(180%);
+            -webkit-backdrop-filter: blur(25px) saturate(180%);
+            background: rgba(255, 255, 255, 0.1);
+            border: 1px solid rgba(255, 255, 255, 0.2);
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
             align-items: center;
         }
+        /* Buttons */
+        .btn {
             text-decoration: none;
+            padding: 12px 24px;
+            border-radius: 20px;
+            font-size: 0.9rem;
+            font-weight: 700;
+            transition: all 0.3s ease;
+            display: inline-flex;
             align-items: center;
+            gap: 8px;
             position: relative;
             overflow: hidden;
         }
+        .btn::after {
             content: '';
             position: absolute;
             top: 0;
             left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(255,255,255,0.2);
+            opacity: 0;
+            transition: opacity 0.3s;
         }
+        .btn:hover::after {
+            opacity: 1;
         }
+        .btn:active {
+            transform: scale(0.95);
         }
+        .btn-primary {
+            background: linear-gradient(135deg, var(--primary-accent), #c0356e);
+            color: white;
+            box-shadow: 0 4px 15px rgba(233, 69, 132, 0.4);
         }
+        .btn-secondary {
+            background: rgba(255, 255, 255, 0.1);
+            color: white;
+            border: 1px solid rgba(255, 255, 255, 0.2);
         }
+        .btn-secondary:hover {
+            background: rgba(255, 255, 255, 0.2);
         }
+        /* Navigation Indicator (Home Bar) */
+        .home-indicator {
+            position: absolute;
+            bottom: 8px;
+            left: 50%;
+            transform: translateX(-50%);
+            width: 120px;
+            height: 5px;
+            background: rgba(255, 255, 255, 0.3);
+            border-radius: 10px;
+            z-index: 60;
+        }
+        /* Toast Notification */
+        .toast {
+            position: absolute;
+            top: 60px;
+            left: 50%;
+            transform: translateX(-50%) translateY(-20px);
+            background: rgba(0, 0, 0, 0.8);
+            backdrop-filter: blur(10px);
+            color: white;
+            padding: 10px 20px;
+            border-radius: 20px;
+            font-size: 0.85rem;
+            opacity: 0;
+            pointer-events: none;
+            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+            z-index: 200;
+            white-space: nowrap;
+            display: flex;
+            align-items: center;
+            gap: 8px;
         }
+        .toast.show {
+            opacity: 1;
+            transform: translateX(-50%) translateY(0);
         }
+        /* Responsive */
+        @media (max-width: 480px) {
+            .app-wrapper {
+                max-width: 100%;
+                border-radius: 0;
+                height: 100vh;
+            }
+            .hero h1 {
+                font-size: 1.8rem;
+            }
+            .dock {
+                width: 100%;
+                justify-content: space-around;
+                padding: 15px;
+            }
+            .btn {
+                padding: 10px 18px;
+                font-size: 0.85rem;
+            }
         }
     </style>
 </head>
 <body>
+    <!-- Background Shapes -->
+    <div class="shape shape-1"></div>
+    <div class="shape shape-2"></div>
+    <!-- Main Wrapper -->
+    <div class="app-wrapper">
+        <!-- Status Bar -->
+        <div class="status-bar glass">
+            <div class="status-right">
+                <span id="clock">12:00</span>
+                <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="brand-link">
+                    <i class="fa-solid fa-code"></i> anycoder
+                </a>
             </div>
+            <div class="status-left">
+                <i class="fa-solid fa-signal"></i>
+                <i class="fa-solid fa-wifi"></i>
+                <i class="fa-solid fa-battery-full"></i>
             </div>
         </div>
+        <!-- Notification Toast -->
+        <div id="toast" class="toast">
+            <i class="fa-solid fa-circle-info" style="color: var(--secondary-accent)"></i>
+            <span id="toast-message">پیام سیستم</span>
         </div>
+        <!-- Scrollable Content -->
+        <div class="content-scroll">
+            <!-- Hero Widget -->
+            <div class="container">
+                <div class="hero glass">
+                    <h1>💬 چت روم ساده</h1>
+                    <p class="subtitle">محلی امن برای گفتگو با دوستان</p>
+                </div>
+            </div>
+            <!-- Features Grid -->
+            <div class="features">
+                <!-- Feature 1 -->
+                <div class="feature glass" onclick="showToast('در حال انتقال به ثبت‌نام...')">
+                    <div class="icon-box">
+                        <i class="fa-solid fa-lock"></i>
                     </div>
+                    <h3>ثبت‌نام آسان</h3>
+                    <p>با شماره موبایل ثبت‌نام کنید</p>
                 </div>
+                <!-- Feature 2 -->
+                <div class="feature glass" onclick="showToast('ایجاد اتاق جدید...')">
+                    <div class="icon-box">
+                        <i class="fa-solid fa-users"></i>
                     </div>
+                    <h3>ساخت اتاق</h3>
+                    <p>تا ۳ اتاق مختلف بسازید</p>
                 </div>
+                <!-- Feature 3 -->
+                <div class="feature glass" onclick="showToast('اتصال به سرور چت...')">
+                    <div class="icon-box">
+                        <i class="fa-solid fa-comments"></i>
                     </div>
+                    <h3>چت زنده</h3>
+                    <p>گفتگوی آنلاین و سریع</p>
                 </div>
             </div>
+            <!-- Extra Widget for Visual Interest -->
+            <div class="glass" style="padding: 20px; border-radius: 20px; margin-bottom: 20px; display: flex; align-items: center; gap: 15px;">
+                <div style="background: var(--primary-accent); width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center;">
+                    <i class="fa-solid fa-bell"></i>
                 </div>
+                <div>
+                    <h4 style="font-size: 0.9rem; margin-bottom: 2px;">اعلان جدید</h4>
+                    <p style="font-size: 0.75rem; color: var(--text-muted);">سیستم به‌روزرسانی شد</p>
                 </div>
             </div>
         </div>
+        <!-- Bottom Dock (CTA) -->
+        <div class="dock-container">
+            <div class="dock">
+                <a href="#" class="btn btn-secondary" onclick="simulateNav(event, 'ورود')">
+                    <i class="fa-solid fa-arrow-right-to-bracket"></i>
+                    ورود
+                </a>
+                <a href="#" class="btn btn-primary" onclick="simulateNav(event, 'شروع کنید')">
+                    شروع کنید
+                    <i class="fa-solid fa-arrow-left"></i>
+                </a>
+            </div>
         </div>
+        <!-- Home Indicator -->
+        <div class="home-indicator"></div>
     </div>
     <script>
+        // Update clock in status bar
         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 = `${hours}:${minutes}`;
         }
+        setInterval(updateClock, 1000);
+        updateClock();
+        // Toast Notification System
+        function showToast(message) {
+            const toast = document.getElementById('toast');
+            const msgSpan = document.getElementById('toast-message');
+            msgSpan.textContent = message;
+            toast.classList.add('show');
+            setTimeout(() => {
+                toast.classList.remove('show');
+            }, 2500);
         }
+        // Simulate Navigation (Since we don't have PHP backend)
+        function simulateNav(e, action) {
+            e.preventDefault();
+            showToast(`${action} - در حال بارگذاری...`);
+            // Add a small visual ripple effect logic here if desired
+            const btn = e.currentTarget;
+            btn.style.transform = "scale(0.90)";
+            setTimeout(() => {
+                btn.style.transform = "scale(1)";
+            }, 150);
+        }
+        // Add subtle parallax effect to background shapes on mouse move (Desktop)
         document.addEventListener('mousemove', (e) => {
+            const shapes = document.querySelectorAll('.shape');
+            const x = window.innerWidth / 2;
+            const y = window.innerHeight / 2;
+            shapes.forEach((shape, index) => {
+                const speed = (index + 1) * 0.02;
+                const xOffset = (e.clientX - x) * speed;
+                const yOffset = (e.clientY - y) * speed;
+                shape.style.transform = `translate(${xOffset}px, ${yOffset}px)`;
+            });
         });
     </script>
 </body>