Spaces:

samirerty
/

anycoder-31b1d4f0

Running

App Files Files Community

samirerty commited on Jan 30

Commit

85e18f1

verified ·

1 Parent(s): c2b658c

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +481 -19

index.html CHANGED Viewed

@@ -1,19 +1,481 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="fa" dir="rtl">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>چت روم - ورود / ثبت نام</title>
+    <!-- FontAwesome for Modern Icons -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <!-- Google Fonts: Vazirmatn for beautiful Persian typography -->
+    <link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">
+    <style>
+        /*
+         * MODERN CSS & GLASSMORPHISM STYLES
+         * Designed for responsiveness and visual appeal.
+         */
+        :root {
+            --glass-bg: rgba(255, 255, 255, 0.15);
+            --glass-border: rgba(255, 255, 255, 0.2);
+            --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
+            --backdrop-blur: blur(16px);
+            --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --text-color: #ffffff;
+            --text-muted: rgba(255, 255, 255, 0.8);
+            --input-bg: rgba(255, 255, 255, 0.1);
+            --input-focus-bg: rgba(255, 255, 255, 0.2);
+            --error-color: #ff4b4b;
+            --success-color: #00b894;
+            --border-radius: 24px;
+            --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+        }
+        * {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+            outline: none;
+        }
+        body {
+            font-family: 'Vazirmatn', sans-serif;
+            min-height: 100vh;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            /* Modern Animated Gradient Background */
+            background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
+            background-size: 400% 400%;
+            animation: gradientBG 15s ease infinite;
+            color: var(--text-color);
+            overflow-x: hidden;
+            padding: 20px;
+        }
+        @keyframes gradientBG {
+            0% { background-position: 0% 50%; }
+            50% { background-position: 100% 50%; }
+            100% { background-position: 0% 50%; }
+        }
+        /* Container to center content */
+        .container {
+            width: 100%;
+            max-width: 480px;
+            perspective: 1000px;
+        }
+        /* Main Glass Card */
+        .login-wrapper {
+            background: var(--glass-bg);
+            backdrop-filter: var(--backdrop-blur);
+            -webkit-backdrop-filter: var(--backdrop-blur);
+            border: 1px solid var(--glass-border);
+            box-shadow: var(--glass-shadow);
+            border-radius: var(--border-radius);
+            padding: 40px 30px;
+            text-align: center;
+            position: relative;
+            overflow: hidden;
+            transition: transform 0.3s ease;
+        }
+        /* Decorative glowing orbs behind the glass for depth */
+        .login-wrapper::before {
+            content: '';
+            position: absolute;
+            top: -50px;
+            left: -50px;
+            width: 150px;
+            height: 150px;
+            background: rgba(255, 255, 255, 0.2);
+            border-radius: 50%;
+            filter: blur(40px);
+            z-index: -1;
+        }
+        .login-wrapper::after {
+            content: '';
+            position: absolute;
+            bottom: -50px;
+            right: -50px;
+            width: 120px;
+            height: 120px;
+            background: rgba(118, 75, 162, 0.3);
+            border-radius: 50%;
+            filter: blur(40px);
+            z-index: -1;
+        }
+        /* Logo Section */
+        .logo i {
+            font-size: 3rem;
+            margin-bottom: 15px;
+            background: linear-gradient(to right, #fff, #dcdcdc);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
+        }
+        .logo h1 {
+            font-weight: 800;
+            font-size: 1.8rem;
+            margin-bottom: 8px;
+            text-shadow: 0 2px 4px rgba(0,0,0,0.1);
+        }
+        .logo p {
+            color: var(--text-muted);
+            font-size: 0.95rem;
+            font-weight: 300;
+            margin-bottom: 30px;
+        }
+        /* Branding Link */
+        .built-with {
+            display: block;
+            margin-top: 15px;
+            font-size: 0.8rem;
+            color: rgba(255,255,255,0.6);
+            text-decoration: none;
+            transition: color 0.2s;
+        }
+        .built-with:hover {
+            color: #fff;
+            text-decoration: underline;
+        }
+        /* Tabs */
+        .form-tabs {
+            display: flex;
+            background: rgba(0, 0, 0, 0.1);
+            padding: 5px;
+            border-radius: 50px;
+            margin-bottom: 30px;
+        }
+        .tab-btn {
+            flex: 1;
+            background: transparent;
+            border: none;
+            color: var(--text-muted);
+            padding: 12px;
+            border-radius: 50px;
+            cursor: pointer;
+            font-family: 'Vazirmatn', sans-serif;
+            font-weight: 500;
+            font-size: 1rem;
+            transition: var(--transition);
+        }
+        .tab-btn.active {
+            background: var(--primary-gradient);
+            color: #fff;
+            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
+        }
+        /* Forms */
+        .form-container {
+            display: none;
+            animation: fadeIn 0.4s ease forwards;
+        }
+        .form-container.active {
+            display: block;
+        }
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(10px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        .form-group {
+            margin-bottom: 20px;
+            text-align: right;
+            position: relative;
+        }
+        .form-group label {
+            display: block;
+            margin-bottom: 8px;
+            font-size: 0.9rem;
+            color: var(--text-muted);
+            font-weight: 400;
+        }
+        .form-group label i {
+            margin-left: 6px;
+            font-size: 0.85rem;
+        }
+        .form-group input {
+            width: 100%;
+            padding: 14px 20px;
+            padding-left: 45px; /* Space for icon if desired, or just padding */
+            background: var(--input-bg);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            border-radius: 16px;
+            color: #fff;
+            font-family: 'Vazirmatn', sans-serif;
+            font-size: 1rem;
+            transition: var(--transition);
+        }
+        /* Placeholder styling for webkit */
+        .form-group input::placeholder {
+            color: rgba(255, 255, 255, 0.4);
+        }
+        .form-group input:focus {
+            background: var(--input-focus-bg);
+            border-color: rgba(255, 255, 255, 0.4);
+            box-shadow: 0 0 15px rgba(255, 255, 255, 0.05);
+        }
+        /* Buttons */
+        .btn {
+            width: 100%;
+            padding: 14px;
+            border: none;
+            border-radius: 16px;
+            font-family: 'Vazirmatn', sans-serif;
+            font-size: 1rem;
+            font-weight: 700;
+            cursor: pointer;
+            transition: var(--transition);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 10px;
+            margin-top: 10px;
+        }
+        .btn-primary {
+            background: var(--primary-gradient);
+            color: white;
+            box-shadow: 0 4px 15px rgba(118, 75, 162, 0.3);
+        }
+        .btn-primary:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 8px 25px rgba(118, 75, 162, 0.5);
+        }
+        .btn-success {
+            background: linear-gradient(135deg, #00b894 0%, #00cec9 100%);
+            color: white;
+            box-shadow: 0 4px 15px rgba(0, 184, 148, 0.3);
+        }
+        .btn-success:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 8px 25px rgba(0, 184, 148, 0.5);
+        }
+        /* Alerts */
+        .alert {
+            padding: 15px;
+            border-radius: 12px;
+            margin-bottom: 25px;
+            font-size: 0.9rem;
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            animation: slideDown 0.3s ease;
+        }
+        @keyframes slideDown {
+            from { opacity: 0; transform: translateY(-10px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        .alert.error {
+            background: rgba(255, 75, 75, 0.2);
+            border: 1px solid rgba(255, 75, 75, 0.3);
+            color: #ffcccc;
+            backdrop-filter: blur(5px);
+        }
+        .alert.success {
+            background: rgba(0, 184, 148, 0.2);
+            border: 1px solid rgba(0, 184, 148, 0.3);
+            color: #ccffef;
+            backdrop-filter: blur(5px);
+        }
+        /* Footer Info */
+        .login-info {
+            margin-top: 30px;
+            padding-top: 20px;
+            border-top: 1px solid rgba(255, 255, 255, 0.1);
+            color: var(--text-muted);
+            font-size: 0.85rem;
+        }
+        .login-info i {
+            margin-left: 5px;
+            color: #a29bfe;
+        }
+        /* Responsive Design */
+        @media (max-width: 480px) {
+            .login-wrapper {
+                padding: 30px 20px;
+                border-radius: 20px;
+            }
+            .logo h1 {
+                font-size: 1.5rem;
+            }
+            .form-group input {
+                padding: 12px 15px;
+            }
+        }
+    </style>
+</head>
+<body class="login-page">
+    <div class="container">
+        <div class="login-wrapper">
+            <div class="logo">
+                <i class="fas fa-comments"></i>
+                <h1>چت روم فارسی</h1>
+                <p>به محیط چت آنلاین خوش آمدید</p>
+                <!-- System Requirement: Built with anycoder link -->
+                <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="built-with">
+                    Built with anycoder
+                </a>
+            </div>
+            <!-- PHP Alerts Simulated with JS for Demo -->
+            <div id="demo-alert" style="display:none;"></div>
+            <?php // Original PHP logic commented out for standalone HTML demo
+            /*
+            if ($error): ?>
+                <div class="alert error"><?php echo $error; ?></div>
+            <?php endif;
+            if ($success): ?>
+                <div class="alert success"><?php echo $success; ?></div>
+            <?php endif;
+            */
+            ?>
+            <div class="form-tabs">
+                <button class="tab-btn active" data-tab="login">ورود</button>
+                <button class="tab-btn" data-tab="register">ثبت نام</button>
+            </div>
+            <!-- فرم ورود -->
+            <div id="login-form" class="form-container active">
+                <form method="POST" action="" id="form-login">
+                    <div class="form-group">
+                        <label for="login_username"><i class="fas fa-user"></i> نام کاربری</label>
+                        <input type="text" id="login_username" name="login_username" required placeholder="نام کاربری خود را وارد کنید">
+                    </div>
+                    <div class="form-group">
+                        <label for="login_password"><i class="fas fa-lock"></i> رمز عبور</label>
+                        <input type="password" id="login_password" name="login_password" required placeholder="رمز عبور خود را وارد کنید">
+                    </div>
+                    <button type="submit" name="login" class="btn btn-primary">
+                        <i class="fas fa-sign-in-alt"></i> ورود به سیستم
+                    </button>
+                </form>
+            </div>
+            <!-- فرم ثبت نام -->
+            <div id="register-form" class="form-container">
+                <form method="POST" action="" id="form-register">
+                    <div class="form-group">
+                        <label for="full_name"><i class="fas fa-id-card"></i> نام کامل</label>
+                        <input type="text" id="full_name" name="full_name" required placeholder="نام و نام خانوادگی">
+                    </div>
+                    <div class="form-group">
+                        <label for="email"><i class="fas fa-envelope"></i> ایمیل</label>
+                        <input type="email" id="email" name="email" required placeholder="example@mail.com">
+                    </div>
+                    <div class="form-group">
+                        <label for="username"><i class="fas fa-user"></i> نام کاربری</label>
+                        <input type="text" id="username" name="username" required placeholder="نام کاربری دلخواه">
+                    </div>
+                    <div class="form-group">
+                        <label for="password"><i class="fas fa-lock"></i> رمز عبور</label>
+                        <input type="password" id="password" name="password" required placeholder="رمز عبور قوی انتخاب کنید">
+                    </div>
+                    <button type="submit" name="register" class="btn btn-success">
+                        <i class="fas fa-user-plus"></i> ثبت نام
+                    </button>
+                </form>
+            </div>
+            <div class="login-info">
+                <p><i class="fas fa-info-circle"></i> پس از ورود می‌توانید به چت روم‌ها بپیوندید</p>
+            </div>
+        </div>
+    </div>
+    <!--
+       PHP Logic Removed for Browser Demo
+       In your real environment, ensure js/scripts.js is loaded or use the inline script below
+    -->
+    <script>
+        // مدیریت تب‌های فرم
+        document.querySelectorAll('.tab-btn').forEach(button => {
+            button.addEventListener('click', () => {
+                // حذف کلاس active از همه تب‌ها و فرم‌ها
+                document.querySelectorAll('.tab-btn').forEach(btn => btn.classList.remove('active'));
+                document.querySelectorAll('.form-container').forEach(form => form.classList.remove('active'));
+                // اضافه کردن active به تب و فرم انتخاب شده
+                button.classList.add('active');
+                document.getElementById(button.dataset.tab + '-form').classList.add('active');
+                // Clear alerts when switching tabs
+                const alertBox = document.getElementById('demo-alert');
+                alertBox.style.display = 'none';
+                alertBox.className = '';
+            });
+        });
+        // --- Simulation Logic for Demo Purposes (Replaces PHP behavior for preview) ---
+        function showAlert(message, type) {
+            const alertBox = document.getElementById('demo-alert');
+            alertBox.textContent = message;
+            alertBox.className = `alert ${type}`;
+            alertBox.style.display = 'flex';
+        }
+        document.getElementById('form-login').addEventListener('submit', function(e) {
+            e.preventDefault();
+            const user = document.getElementById('login_username').value;
+            const pass = document.getElementById('login_password').value;
+            if(user && pass) {
+                if (user === 'admin' && pass === 'admin') {
+                    showAlert('ورود موفقیت‌آمیز بود! در حال انتقال...', 'success');
+                } else {
+                    showAlert('نام کاربری یا رمز عبور اشتباه است (Demo: admin/admin)', 'error');
+                }
+            }
+        });
+        document.getElementById('form-register').addEventListener('submit', function(e) {
+            e.preventDefault();
+            const email = document.getElementById('email').value;
+            if(email.includes('@')) {
+                showAlert('ثبت نام موفقیت‌آمیز بود. اکنون وارد شوید.', 'success');
+            } else {
+                showAlert('لطفاً یک ایمیل معتبر وارد کنید.', 'error');
+            }
+        });
+    </script>
+</body>
+</html>