Spaces:

12wqhh
/

https-huggingface-co-12wqhh

Running

App Files Files Community

12wqhh commited on Mar 29, 2025

Commit

5a8a569

verified ·

1 Parent(s): a229c17

Add 1 files

Browse files

Files changed (1) hide show

index.html +513 -661

index.html CHANGED Viewed

@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>نظام التسجيل | توتير</title>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
         * {
@@ -18,216 +18,144 @@
             color: #262626;
         }
-        /* Authentication Pages Styles */
-        .auth-container {
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            min-height: 100vh;
-        }
-        .auth-box-container {
             display: flex;
-            flex-direction: column;
             align-items: center;
-            width: 100%;
-            max-width: 350px;
-            margin: 0 auto;
-        }
-        .auth-box {
             background-color: white;
-            border: 1px solid #dbdbdb;
-            border-radius: 8px;
-            padding: 20px;
-            width: 100%;
-            margin-bottom: 10px;
-            text-align: center;
         }
-        .logo {
-            font-size: 28px;
             font-weight: 300;
-            margin: 20px 0;
         }
-        .auth-form {
             display: flex;
-            flex-direction: column;
-            gap: 6px;
-            margin-bottom: 15px;
-        }
-        .input-group {
-            position: relative;
-        }
-        .input-group input {
-            width: 100%;
-            padding: 10px;
-            background-color: #fafafa;
-            border: 1px solid #dbdbdb;
-            border-radius: 4px;
-            font-size: 14px;
-            direction: ltr;
         }
-        .input-group input:focus {
-            border-color: #a8a8a8;
-            outline: none;
         }
-        .input-group label {
-            position: absolute;
-            right: 10px;
-            top: 50%;
-            transform: translateY(-50%);
-            color: #8e8e8e;
-            font-size: 12px;
-            transition: all 0.2s;
-            cursor: text;
         }
-        .input-group input:focus + label,
-        .input-group input:not(:placeholder-shown) + label {
-            top: 5px;
-            transform: none;
-            font-size: 10px;
         }
-        .btn {
-            width: 100%;
-            padding: 8px;
-            border: none;
-            border-radius: 4px;
-            font-weight: bold;
             cursor: pointer;
-            margin-top: 10px;
         }
-        .btn-primary {
             background-color: #0095f6;
             color: white;
-        }
-        .btn-primary:disabled {
-            background-color: rgba(0, 149, 246, 0.3);
-            cursor: default;
-        }
-        .divider {
             display: flex;
             align-items: center;
-            margin: 15px 0;
-            color: #8e8e8e;
-            font-size: 13px;
-            font-weight: bold;
         }
-        .divider::before,
-        .divider::after {
-            content: "";
-            flex: 1;
-            height: 1px;
-            background-color: #dbdbdb;
-            margin: 0 10px;
         }
-        .btn-google {
             display: flex;
             align-items: center;
-            justify-content: center;
-            gap: 8px;
-            background-color: white;
-            border: 1px solid #dbdbdb;
-            color: #262626;
         }
-        .btn-google img {
-            width: 16px;
-            height: 16px;
         }
-        .auth-footer {
-            text-align: center;
             font-size: 14px;
-            margin-top: 20px;
         }
-        .auth-footer a {
-            color: #0095f6;
-            font-weight: bold;
-            text-decoration: none;
         }
-        .error-message {
-            color: #ed4956;
-            font-size: 12px;
-            margin-top: 5px;
-            display: none;
         }
-        .password-toggle {
-            position: absolute;
-            left: 10px;
-            top: 50%;
-            transform: translateY(-50%);
-            cursor: pointer;
             color: #8e8e8e;
-            font-size: 12px;
         }
-        .terms {
-            font-size: 12px;
-            color: #8e8e8e;
-            margin: 15px 0;
             line-height: 1.4;
         }
-        .terms a {
-            color: #262626;
-            font-weight: bold;
             text-decoration: none;
         }
-        /* Feed Page Styles (Hidden by default) */
-        .feed-container {
-            display: none;
-            max-width: 600px;
-            margin: 0 auto;
-            padding: 20px;
-        }
-        .header {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            padding: 10px 0;
-            border-bottom: 1px solid #dbdbdb;
-            margin-bottom: 20px;
-        }
-        .header-logo {
-            font-size: 24px;
-            font-weight: 300;
-        }
-        .header-icons {
-            display: flex;
-            gap: 20px;
-        }
-        .header-icons i {
-            font-size: 24px;
             cursor: pointer;
         }
         .stories {
             display: flex;
-            gap: 10px;
-            padding: 10px 0;
             margin-bottom: 20px;
             overflow-x: auto;
         }
         .story {
@@ -254,125 +182,106 @@
             object-fit: cover;
         }
         .story-username {
             font-size: 12px;
         }
-        .posts {
             display: flex;
-            flex-direction: column;
-            gap: 20px;
         }
-        .post {
-            border: 1px solid #dbdbdb;
-            border-radius: 8px;
-            background-color: white;
         }
-        .post-header {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            padding: 10px;
         }
-        .post-user {
-            display: flex;
-            align-items: center;
-            gap: 10px;
         }
-        .post-user-avatar {
-            width: 32px;
-            height: 32px;
-            border-radius: 50%;
-            object-fit: cover;
         }
-        .post-username {
-            font-weight: bold;
-            font-size: 14px;
         }
-        .post-more {
             cursor: pointer;
         }
-        .post-image {
             width: 100%;
-            max-height: 600px;
             object-fit: cover;
         }
-        .post-actions {
-            display: flex;
-            justify-content: space-between;
-            padding: 10px;
         }
-        .post-actions-left {
             display: flex;
-            gap: 15px;
-        }
-        .post-actions i {
-            font-size: 24px;
-            cursor: pointer;
-        }
-        .post-likes {
-            padding: 0 10px;
-            font-weight: bold;
-            font-size: 14px;
         }
-        .post-caption {
-            padding: 0 10px 10px;
-            font-size: 14px;
-        }
-        .post-caption-username {
-            font-weight: bold;
-            margin-left: 5px;
-        }
-        .post-comments {
-            padding: 0 10px;
-            color: #8e8e8e;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        .post-time {
-            padding: 0 10px 10px;
-            color: #8e8e8e;
-            font-size: 10px;
-            text-transform: uppercase;
-        }
-        .post-add-comment {
             display: flex;
-            justify-content: space-between;
-            padding: 10px;
-            border-top: 1px solid #dbdbdb;
-        }
-        .post-comment-input {
-            border: none;
-            outline: none;
-            width: 90%;
-            font-size: 14px;
-        }
-        .post-comment-button {
-            color: #0095f6;
-            font-weight: bold;
-            font-size: 14px;
-            cursor: pointer;
-            opacity: 0.5;
         }
         .bottom-nav {
             position: fixed;
             bottom: 0;
@@ -390,7 +299,7 @@
             cursor: pointer;
         }
-        /* Create Post Modal */
         .modal {
             display: none;
             position: fixed;
@@ -408,8 +317,9 @@
             background-color: white;
             border-radius: 12px;
             width: 90%;
-            max-width: 500px;
-            overflow: hidden;
         }
         .modal-header {
@@ -418,45 +328,107 @@
             display: flex;
             justify-content: space-between;
             align-items: center;
         }
         .modal-title {
             font-weight: bold;
         }
-        .modal-close, .modal-next {
             cursor: pointer;
         }
         .modal-close {
             color: #262626;
         }
-        .modal-next {
             color: #0095f6;
         }
         .modal-body {
             padding: 20px;
-            text-align: center;
         }
-        .upload-icon {
-            font-size: 50px;
             margin-bottom: 20px;
             color: #0095f6;
         }
-        .upload-text {
-            font-size: 22px;
-            margin-bottom: 20px;
         }
-        .upload-button {
             background-color: #0095f6;
             color: white;
             border: none;
-            padding: 8px 12px;
             border-radius: 4px;
             font-weight: bold;
             cursor: pointer;
@@ -464,484 +436,364 @@
         /* Responsive */
         @media (max-width: 450px) {
-            .auth-box {
-                background-color: transparent;
-                border: none;
             }
-            .feed-container {
-                padding: 0;
             }
         }
     </style>
 </head>
 <body>
-    <!-- Authentication Container -->
-    <div class="auth-container" id="authContainer">
-        <div class="auth-box-container">
-            <!-- Login Box -->
-            <div class="auth-box" id="loginBox">
-                <div class="logo">توتير</div>
-                <form class="auth-form" id="loginForm">
-                    <div class="input-group">
-                        <input type="text" id="loginUsername" placeholder=" " required>
-                        <label for="loginUsername">اسم المستخدم أو البريد الإلكتروني</label>
-                        <div class="error-message" id="loginUsernameError"></div>
-                    </div>
-                    <div class="input-group">
-                        <input type="password" id="loginPassword" placeholder=" " required>
-                        <label for="loginPassword">كلمة المرور</label>
-                        <span class="password-toggle" onclick="togglePassword('loginPassword', this)">
-                            <i class="far fa-eye"></i>
-                        </span>
-                        <div class="error-message" id="loginPasswordError"></div>
-                    </div>
-                    <button type="submit" class="btn btn-primary" id="loginBtn">تسجيل الدخول</button>
-                </form>
-                <div class="divider">أو</div>
-                <button class="btn btn-google" onclick="signInWithGoogle()">
-                    <img src="https://upload.wikimedia.org/wikipedia/commons/5/53/Google_%22G%22_Logo.svg" alt="Google">
-                    تسجيل الدخول باستخدام جوجل
-                </button>
-                <div class="auth-footer">
-                    <a href="#" id="forgotPasswordLink">نسيت كلمة المرور؟</a>
                 </div>
             </div>
-            <!-- Signup Box -->
-            <div class="auth-box" id="signupBox" style="display: none;">
-                <div class="logo">توتير</div>
-                <form class="auth-form" id="signupForm">
-                    <div class="input-group">
-                        <input type="email" id="signupEmail" placeholder=" " required>
-                        <label for="signupEmail">البريد الإلكتروني</label>
-                        <div class="error-message" id="signupEmailError"></div>
-                    </div>
-                    <div class="input-group">
-                        <input type="text" id="signupUsername" placeholder=" " required>
-                        <label for="signupUsername">اسم المستخدم</label>
-                        <div class="error-message" id="signupUsernameError"></div>
-                    </div>
-                    <div class="input-group">
-                        <input type="password" id="signupPassword" placeholder=" " required>
-                        <label for="signupPassword">كلمة المرور</label>
-                        <span class="password-toggle" onclick="togglePassword('signupPassword', this)">
-                            <i class="far fa-eye"></i>
-                        </span>
-                        <div class="error-message" id="signupPasswordError"></div>
-                    </div>
-                    <div class="input-group">
-                        <input type="password" id="signupConfirmPassword" placeholder=" " required>
-                        <label for="signupConfirmPassword">تأكيد كلمة المرور</label>
-                        <span class="password-toggle" onclick="togglePassword('signupConfirmPassword', this)">
-                            <i class="far fa-eye"></i>
-                        </span>
-                        <div class="error-message" id="signupConfirmPasswordError"></div>
-                    </div>
-                    <div class="terms">
-                        عند التسجيل، فإنك توافق على <a href="#">الشروط</a> و<a href="#">سياسة الخصوصية</a> الخاصة بنا
-                    </div>
-                    <button type="submit" class="btn btn-primary" id="signupBtn">إنشاء حساب</button>
-                </form>
-                <div class="divider">أو</div>
-                <button class="btn btn-google" onclick="signInWithGoogle()">
-                    <img src="https://upload.wikimedia.org/wikipedia/commons/5/53/Google_%22G%22_Logo.svg" alt="Google">
-                    التسجيل باستخدام جوجل
-                </button>
-            </div>
-            <!-- Toggle between login and signup -->
-            <div class="auth-box">
-                <div class="auth-footer">
-                    <span id="toggleAuthText">ليس لديك حساب؟</span>
-                    <a href="#" id="toggleAuthLink">إنشاء حساب</a>
                 </div>
             </div>
         </div>
-    </div>
-    <!-- Feed Container (Hidden by default) -->
-    <div class="feed-container" id="feedContainer">
-        <div class="header">
-            <div class="header-logo">توتير</div>
-            <div class="header-icons">
-                <i class="far fa-heart"></i>
-                <i class="far fa-paper-plane"></i>
-                <i class="far fa-plus-square" onclick="showCreatePostModal()"></i>
             </div>
         </div>
-        <div class="stories">
-            <div class="story">
-                <div class="story-avatar">
-                    <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User">
-                </div>
-                <div class="story-username">user1</div>
             </div>
-            <div class="story">
-                <div class="story-avatar">
-                    <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User">
-                </div>
-                <div class="story-username">user2</div>
             </div>
-            <div class="story">
-                <div class="story-avatar">
-                    <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User">
-                </div>
-                <div class="story-username">user3</div>
             </div>
-            <div class="story">
-                <div class="story-avatar">
-                    <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User">
-                </div>
-                <div class="story-username">user4</div>
             </div>
-            <div class="story">
-                <div class="story-avatar">
-                    <img src="https://randomuser.me/api/portraits/women/3.jpg" alt="User">
-                </div>
-                <div class="story-username">user5</div>
             </div>
         </div>
-        <div class="posts">
-            <div class="post">
-                <div class="post-header">
-                    <div class="post-user">
-                        <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User" class="post-user-avatar">
-                        <div class="post-username">user1</div>
-                    </div>
-                    <div class="post-more">
-                        <i class="fas fa-ellipsis-h"></i>
-                    </div>
-                </div>
-                <img src="https://source.unsplash.com/random/600x600" alt="Post" class="post-image">
-                <div class="post-actions">
-                    <div class="post-actions-left">
-                        <i class="far fa-heart"></i>
-                        <i class="far fa-comment"></i>
-                        <i class="far fa-paper-plane"></i>
-                    </div>
-                    <i class="far fa-bookmark"></i>
-                </div>
-                <div class="post-likes">1,234 إعجاب</div>
-                <div class="post-caption">
-                    <span class="post-caption-username">user1</span>
-                    هذه صورة رائعة من رحلتي الأخيرة! #سفر #مغامرة
-                </div>
-                <div class="post-comments">عرض جميع التعليقات (42)</div>
-                <div class="post-time">منذ ساعتين</div>
-                <div class="post-add-comment">
-                    <input type="text" placeholder="أضف تعليقًا..." class="post-comment-input">
-                    <div class="post-comment-button">نشر</div>
                 </div>
             </div>
-            <div class="post">
-                <div class="post-header">
-                    <div class="post-user">
-                        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User" class="post-user-avatar">
-                        <div class="post-username">user2</div>
-                    </div>
-                    <div class="post-more">
-                        <i class="fas fa-ellipsis-h"></i>
-                    </div>
                 </div>
-                <img src="https://source.unsplash.com/random/600x600?nature" alt="Post" class="post-image">
-                <div class="post-actions">
-                    <div class="post-actions-left">
-                        <i class="far fa-heart"></i>
-                        <i class="far fa-comment"></i>
-                        <i class="far fa-paper-plane"></i>
-                    </div>
-                    <i class="far fa-bookmark"></i>
                 </div>
-                <div class="post-likes">987 إعجاب</div>
-                <div class="post-caption">
-                    <span class="post-caption-username">user2</span>
-                    جمال الطبيعة لا يوصف 🌿 #طبيعة #منظر
                 </div>
-                <div class="post-comments">عرض جميع التعليقات (23)</div>
-                <div class="post-time">منذ 5 ساعات</div>
-                <div class="post-add-comment">
-                    <input type="text" placeholder="أضف تعليقًا..." class="post-comment-input">
-                    <div class="post-comment-button">نشر</div>
                 </div>
             </div>
         </div>
-        <div class="bottom-nav">
-            <i class="fas fa-home"></i>
-            <i class="fas fa-search"></i>
-            <i class="far fa-plus-square" onclick="showCreatePostModal()"></i>
-            <i class="far fa-heart"></i>
-            <i class="far fa-user"></i>
-        </div>
     </div>
-    <!-- Create Post Modal -->
-    <div class="modal" id="createPostModal">
-        <div class="modal-content">
             <div class="modal-header">
-                <div class="modal-close" onclick="hideCreatePostModal()">
                     <i class="fas fa-times"></i>
                 </div>
-                <div class="modal-title">إنشاء منشور جديد</div>
-                <div class="modal-next" onclick="nextStep()">التالي</div>
             </div>
-            <div class="modal-body">
-                <div class="upload-icon">
-                    <i class="fas fa-cloud-upload-alt"></i>
-                </div>
-                <div class="upload-text">اسحب الصور والفيديوهات إلى هنا</div>
-                <button class="upload-button" onclick="document.getElementById('fileInput').click()">اختر من الجهاز</button>
-                <input type="file" id="fileInput" style="display: none;" accept="image/*,video/*">
             </div>
         </div>
     </div>
     <script>
-        // متغيرات حالة النظام
-        let isLogin = true;
-        let isLoggedIn = false;
         // عناصر DOM
-        const authContainer = document.getElementById('authContainer');
-        const feedContainer = document.getElementById('feedContainer');
-        const loginBox = document.getElementById('loginBox');
-        const signupBox = document.getElementById('signupBox');
-        const toggleAuthText = document.getElementById('toggleAuthText');
-        const toggleAuthLink = document.getElementById('toggleAuthLink');
-        const loginForm = document.getElementById('loginForm');
-        const signupForm = document.getElementById('signupForm');
-        const createPostModal = document.getElementById('createPostModal');
-        // تبديل بين تسجيل الدخول وإنشاء حساب
-        function toggleAuth() {
-            isLogin = !isLogin;
-            if (isLogin) {
-                loginBox.style.display = 'block';
-                signupBox.style.display = 'none';
-                toggleAuthText.textContent = 'ليس لديك حساب؟';
-                toggleAuthLink.textContent = 'إنشاء حساب';
-            } else {
-                loginBox.style.display = 'none';
-                signupBox.style.display = 'block';
-                toggleAuthText.textContent = 'لديك حساب بالفعل؟';
-                toggleAuthLink.textContent = 'تسجيل الدخول';
-            }
         }
-        // إظهار/إخفاء كلمة المرور
-        function togglePassword(inputId, toggleElement) {
-            const input = document.getElementById(inputId);
-            const icon = toggleElement.querySelector('i');
-            if (input.type === 'password') {
-                input.type = 'text';
-                icon.classList.remove('fa-eye');
-                icon.classList.add('fa-eye-slash');
-            } else {
-                input.type = 'password';
-                icon.classList.remove('fa-eye-slash');
-                icon.classList.add('fa-eye');
-            }
-        }
-        // تسجيل الدخول باستخدام جوجل (وهمي)
-        function signInWithGoogle() {
-            // في الواقع، هنا سيتم استخدام Firebase Authentication أو أي خدمة أخرى
-            alert('جارٍ تحويلك إلى صفحة تسجيل الدخول باستخدام جوجل...');
-            // محاكاة تسجيل الدخول الناجح بعد تأخير
-            setTimeout(() => {
-                showFeedPage();
-            }, 1000);
         }
-        // التحقق من صحة نموذج تسجيل الدخول
-        function validateLoginForm() {
-            let isValid = true;
-            const username = document.getElementById('loginUsername').value.trim();
-            const password = document.getElementById('loginPassword').value;
-            // إعادة تعيين رسائل الخطأ
-            document.getElementById('loginUsernameError').style.display = 'none';
-            document.getElementById('loginPasswordError').style.display = 'none';
-            // التحقق من اسم المستخدم
-            if (username === '') {
-                document.getElementById('loginUsernameError').textContent = 'يرجى إدخال اسم المستخدم أو البريد الإلكتروني';
-                document.getElementById('loginUsernameError').style.display = 'block';
-                isValid = false;
-            }
-            // التحقق من كلمة المرور
-            if (password === '') {
-                document.getElementById('loginPasswordError').textContent = 'يرجى إدخال كلمة المرور';
-                document.getElementById('loginPasswordError').style.display = 'block';
-                isValid = false;
-            } else if (password.length < 6) {
-                document.getElementById('loginPasswordError').textContent = 'يجب أن تحتوي كلمة المرور على 6 أحرف على الأقل';
-                document.getElementById('loginPasswordError').style.display = 'block';
-                isValid = false;
-            }
-            return isValid;
         }
-        // التحقق من صحة نموذج إنشاء حساب
-        function validateSignupForm() {
-            let isValid = true;
-            const email = document.getElementById('signupEmail').value.trim();
-            const username = document.getElementById('signupUsername').value.trim();
-            const password = document.getElementById('signupPassword').value;
-            const confirmPassword = document.getElementById('signupConfirmPassword').value;
-            // إعادة تعيين رسائل الخطأ
-            document.getElementById('signupEmailError').style.display = 'none';
-            document.getElementById('signupUsernameError').style.display = 'none';
-            document.getElementById('signupPasswordError').style.display = 'none';
-            document.getElementById('signupConfirmPasswordError').style.display = 'none';
-            // التحقق من البريد الإلكتروني
-            if (email === '') {
-                document.getElementById('signupEmailError').textContent = 'يرجى إدخال البريد الإلكتروني';
-                document.getElementById('signupEmailError').style.display = 'block';
-                isValid = false;
-            } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
-                document.getElementById('signupEmailError').textContent = 'يرجى إدخال بريد إلكتروني صالح';
-                document.getElementById('signupEmailError').style.display = 'block';
-                isValid = false;
-            }
-            // التحقق من اسم المستخدم
-            if (username === '') {
-                document.getElementById('signupUsernameError').textContent = 'يرجى إدخال اسم المستخدم';
-                document.getElementById('signupUsernameError').style.display = 'block';
-                isValid = false;
-            } else if (username.length < 3) {
-                document.getElementById('signupUsernameError').textContent = 'يجب أن يحتوي اسم المستخدم على 3 أحرف على الأقل';
-                document.getElementById('signupUsernameError').style.display = 'block';
-                isValid = false;
-            }
-            // التحقق من كلمة المرور
-            if (password === '') {
-                document.getElementById('signupPasswordError').textContent = 'يرجى إدخال كلمة المرور';
-                document.getElementById('signupPasswordError').style.display = 'block';
-                isValid = false;
-            } else if (password.length < 6) {
-                document.getElementById('signupPasswordError').textContent = 'يجب أن تحتوي كلمة المرور على 6 أحرف على الأقل';
-                document.getElementById('signupPasswordError').style.display = 'block';
-                isValid = false;
-            }
-            // التحقق من تطابق كلمتي المرور
-            if (confirmPassword === '') {
-                document.getElementById('signupConfirmPasswordError').textContent = 'يرجى تأكيد كلمة المرور';
-                document.getElementById('signupConfirmPasswordError').style.display = 'block';
-                isValid = false;
-            } else if (password !== confirmPassword) {
-                document.getElementById('signupConfirmPasswordError').textContent = 'كلمتا المرور غير متطابقتين';
-                document.getElementById('signupConfirmPasswordError').style.display = 'block';
-                isValid = false;
-            }
-            return isValid;
-        }
-        // إرسال نموذج تسجيل الدخول
-        function submitLoginForm(event) {
-            event.preventDefault();
-            if (validateLoginForm()) {
-                // عرض رسالة تحميل
-                const loginBtn = document.getElementById('loginBtn');
-                const originalText = loginBtn.textContent;
-                loginBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> جاري تسجيل الدخول...';
-                loginBtn.disabled = true;
-                // محاكاة اتصال بالخادم
-                setTimeout(() => {
-                    showFeedPage();
-                    loginBtn.textContent = originalText;
-                    loginBtn.disabled = false;
-                }, 1500);
-            }
         }
-        // إرسال نموذج إنشاء حساب
-        function submitSignupForm(event) {
-            event.preventDefault();
-            if (validateSignupForm()) {
-                // عرض رسالة تحميل
-                const signupBtn = document.getElementById('signupBtn');
-                const originalText = signupBtn.textContent;
-                signupBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> جاري إنشاء الحساب...';
-                signupBtn.disabled = true;
-                // محاكاة اتصال بالخادم
-                setTimeout(() => {
-                    showFeedPage();
-                    signupBtn.textContent = originalText;
-                    signupBtn.disabled = false;
-                }, 2000);
-            }
         }
-        // عرض صفحة الفيد
-        function showFeedPage() {
-            authContainer.style.display = 'none';
-            feedContainer.style.display = 'block';
-            isLoggedIn = true;
         }
-        // عرض نافذة إنشاء منشور
-        function showCreatePostModal() {
-            if (!isLoggedIn) return;
-            createPostModal.style.display = 'flex';
         }
-        // إخفاء نافذة إنشاء منشور
-        function hideCreatePostModal() {
-            createPostModal.style.display = 'none';
         }
-        // الخطوة التالية في إنشاء المنشور (وهمي)
-        function nextStep() {
-            alert('هذه الخطوة ستفتح نافذة لقص وتعديل الصورة قبل النشر');
         }
-        // إضافة معالجي الأحداث
-        toggleAuthLink.addEventListener('click', function(e) {
-            e.preventDefault();
-            toggleAuth();
-        });
-        document.getElementById('forgotPasswordLink').addEventListener('click', function(e) {
-            e.preventDefault();
-            alert('سيتم إرسال رابط إعادة تعيين كلمة المرور إلى بريدك الإلكتروني المسجل.');
         });
-        loginForm.addEventListener('submit', submitLoginForm);
-        signupForm.addEventListener('submit', submitSignupForm);
-        // معالجة اختيار ملف للرفع
-        document.getElementById('fileInput').addEventListener('change', function(e) {
             if (this.files && this.files[0]) {
-                nextStep();
             }
         });
     </script>
 </body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>الملف الشخصي | توتير</title>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
         * {
             color: #262626;
         }
+        /* Header Styles */
+        .header {
             display: flex;
+            justify-content: space-between;
             align-items: center;
+            padding: 10px 15px;
+            border-bottom: 1px solid #dbdbdb;
             background-color: white;
+            position: sticky;
+            top: 0;
+            z-index: 10;
         }
+        .header-logo {
+            font-size: 24px;
             font-weight: 300;
         }
+        .header-icons {
             display: flex;
+            gap: 20px;
         }
+        .header-icons i {
+            font-size: 24px;
+            cursor: pointer;
         }
+        /* Profile Section */
+        .profile-container {
+            padding: 20px 15px;
+            background-color: white;
+            margin-bottom: 20px;
+            border-bottom: 1px solid #dbdbdb;
         }
+        .profile-header {
+            display: flex;
+            align-items: center;
+            margin-bottom: 20px;
         }
+        .profile-avatar {
+            width: 80px;
+            height: 80px;
+            border-radius: 50%;
+            object-fit: cover;
+            margin-left: 20px;
+            border: 2px solid #f8f8f8;
             cursor: pointer;
+            position: relative;
         }
+        .profile-avatar-edit {
+            position: absolute;
+            bottom: 0;
+            right: 0;
             background-color: #0095f6;
             color: white;
+            width: 25px;
+            height: 25px;
+            border-radius: 50%;
             display: flex;
             align-items: center;
+            justify-content: center;
+            font-size: 12px;
+            border: 2px solid white;
         }
+        .profile-stats {
+            display: flex;
+            flex-grow: 1;
+            justify-content: space-around;
         }
+        .stat-item {
             display: flex;
+            flex-direction: column;
             align-items: center;
         }
+        .stat-number {
+            font-weight: bold;
+            font-size: 18px;
         }
+        .stat-label {
             font-size: 14px;
+            color: #8e8e8e;
         }
+        .profile-info {
+            margin-bottom: 15px;
         }
+        .profile-name {
+            font-weight: bold;
+            margin-bottom: 5px;
+            display: flex;
+            align-items: center;
         }
+        .profile-username {
             color: #8e8e8e;
+            margin-bottom: 10px;
         }
+        .profile-bio {
+            margin-bottom: 10px;
             line-height: 1.4;
         }
+        .profile-website {
+            color: #00376b;
             text-decoration: none;
+            font-weight: bold;
         }
+        .edit-profile-btn {
+            width: 100%;
+            padding: 8px;
+            background-color: white;
+            border: 1px solid #dbdbdb;
+            border-radius: 4px;
+            font-weight: bold;
             cursor: pointer;
+            margin-top: 10px;
         }
+        /* Stories Section */
         .stories {
             display: flex;
+            gap: 15px;
+            padding: 15px 10px;
             margin-bottom: 20px;
             overflow-x: auto;
+            background-color: white;
+            border-bottom: 1px solid #dbdbdb;
         }
         .story {
             object-fit: cover;
         }
+        .story-add {
+            width: 70px;
+            height: 70px;
+            border-radius: 50%;
+            background-color: #f8f8f8;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: #0095f6;
+            font-size: 24px;
+        }
         .story-username {
             font-size: 12px;
+            max-width: 70px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
         }
+        /* Tabs Section */
+        .profile-tabs {
             display: flex;
+            justify-content: space-around;
+            background-color: white;
+            border-top: 1px solid #dbdbdb;
+            border-bottom: 1px solid #dbdbdb;
         }
+        .tab {
+            padding: 15px 0;
+            text-align: center;
+            flex: 1;
+            cursor: pointer;
+            position: relative;
         }
+        .tab.active {
+            font-weight: bold;
         }
+        .tab.active::after {
+            content: '';
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            height: 1px;
+            background-color: #262626;
         }
+        .tab i {
+            font-size: 20px;
         }
+        /* Posts Grid */
+        .posts-grid {
+            display: grid;
+            grid-template-columns: repeat(3, 1fr);
+            gap: 2px;
+            margin-bottom: 50px;
         }
+        .post-thumbnail {
+            aspect-ratio: 1/1;
+            position: relative;
             cursor: pointer;
         }
+        .post-thumbnail img {
             width: 100%;
+            height: 100%;
             object-fit: cover;
         }
+        .post-thumbnail-overlay {
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background-color: rgba(0, 0, 0, 0.3);
+            display: none;
+            align-items: center;
+            justify-content: center;
+            color: white;
+            gap: 20px;
         }
+        .post-thumbnail:hover .post-thumbnail-overlay {
             display: flex;
         }
+        .post-thumbnail-stat {
             display: flex;
+            align-items: center;
+            gap: 5px;
         }
+        /* Bottom Navigation */
         .bottom-nav {
             position: fixed;
             bottom: 0;
             cursor: pointer;
         }
+        /* Edit Profile Modal */
         .modal {
             display: none;
             position: fixed;
             background-color: white;
             border-radius: 12px;
             width: 90%;
+            max-width: 400px;
+            max-height: 80vh;
+            overflow-y: auto;
         }
         .modal-header {
             display: flex;
             justify-content: space-between;
             align-items: center;
+            position: relative;
         }
         .modal-title {
             font-weight: bold;
+            position: absolute;
+            left: 0;
+            right: 0;
+            text-align: center;
         }
+        .modal-close, .modal-save {
             cursor: pointer;
+            z-index: 1;
         }
         .modal-close {
             color: #262626;
         }
+        .modal-save {
             color: #0095f6;
         }
         .modal-body {
             padding: 20px;
         }
+        .edit-form-group {
+            margin-bottom: 15px;
+        }
+        .edit-form-group label {
+            display: block;
+            margin-bottom: 5px;
+            font-size: 14px;
+            color: #262626;
+            font-weight: bold;
+        }
+        .edit-form-group input, .edit-form-group textarea {
+            width: 100%;
+            padding: 8px;
+            border: 1px solid #dbdbdb;
+            border-radius: 4px;
+            font-size: 14px;
+        }
+        .edit-form-group textarea {
+            resize: vertical;
+            min-height: 80px;
+        }
+        .avatar-edit-container {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
             margin-bottom: 20px;
+        }
+        .avatar-preview {
+            width: 100px;
+            height: 100px;
+            border-radius: 50%;
+            object-fit: cover;
+            margin-bottom: 10px;
+        }
+        .change-avatar-btn {
             color: #0095f6;
+            font-weight: bold;
+            cursor: pointer;
         }
+        /* Create Story Modal */
+        .story-modal-content {
+            background-color: white;
+            border-radius: 12px;
+            width: 90%;
+            max-width: 400px;
+            overflow: hidden;
+        }
+        .story-modal-preview {
+            width: 100%;
+            max-height: 70vh;
+            object-fit: contain;
+            background-color: black;
         }
+        .story-modal-footer {
+            display: flex;
+            justify-content: center;
+            padding: 15px;
+        }
+        .story-post-btn {
             background-color: #0095f6;
             color: white;
             border: none;
+            padding: 8px 20px;
             border-radius: 4px;
             font-weight: bold;
             cursor: pointer;
         /* Responsive */
         @media (max-width: 450px) {
+            .profile-avatar {
+                width: 70px;
+                height: 70px;
+                margin-left: 10px;
+            }
+            .stat-number {
+                font-size: 16px;
             }
+            .stat-label {
+                font-size: 12px;
             }
         }
     </style>
 </head>
 <body>
+    <!-- Header -->
+    <div class="header">
+        <div class="header-logo">توتير</div>
+        <div class="header-icons">
+            <i class="far fa-heart"></i>
+            <i class="far fa-paper-plane"></i>
+        </div>
+    </div>
+    <!-- Profile Section -->
+    <div class="profile-container">
+        <div class="profile-header">
+            <div class="profile-avatar" onclick="showEditAvatarModal()">
+                <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Profile" id="profileAvatarImg">
+                <div class="profile-avatar-edit">
+                    <i class="fas fa-camera"></i>
                 </div>
             </div>
+            <div class="profile-stats">
+                <div class="stat-item">
+                    <div class="stat-number" id="postsCount">24</div>
+                    <div class="stat-label">منشورات</div>
+                </div>
+                <div class="stat-item">
+                    <div class="stat-number" id="followersCount">1.2K</div>
+                    <div class="stat-label">متابعون</div>
+                </div>
+                <div class="stat-item">
+                    <div class="stat-number" id="followingCount">340</div>
+                    <div class="stat-label">متابَعون</div>
                 </div>
             </div>
         </div>
+        <div class="profile-info">
+            <div class="profile-name">
+                <span id="profileName">سارة أحمد</span>
             </div>
+            <div class="profile-username" id="profileUsername">@sara_ahmed</div>
+            <div class="profile-bio" id="profileBio">
+                مصممة جرافيك | محبة للسفر والتصوير | أعيش في دبي
+                🌍✈️📷
+            </div>
+            <a href="#" class="profile-website" id="profileWebsite">www.sara-portfolio.com</a>
         </div>
+        <button class="edit-profile-btn" onclick="showEditProfileModal()">تعديل الملف الشخصي</button>
+    </div>
+    <!-- Stories Section -->
+    <div class="stories">
+        <div class="story" onclick="showCreateStoryModal()">
+            <div class="story-add">
+                <i class="fas fa-plus"></i>
             </div>
+            <div class="story-username">قصتك</div>
+        </div>
+        <div class="story">
+            <div class="story-avatar">
+                <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User">
             </div>
+            <div class="story-username">user1</div>
+        </div>
+        <div class="story">
+            <div class="story-avatar">
+                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User">
             </div>
+            <div class="story-username">user2</div>
+        </div>
+        <div class="story">
+            <div class="story-avatar">
+                <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User">
             </div>
+            <div class="story-username">user3</div>
+        </div>
+        <div class="story">
+            <div class="story-avatar">
+                <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User">
             </div>
+            <div class="story-username">user4</div>
         </div>
+    </div>
+    <!-- Tabs Section -->
+    <div class="profile-tabs">
+        <div class="tab active">
+            <i class="fas fa-table-cells-large"></i>
+        </div>
+        <div class="tab">
+            <i class="fas fa-tag"></i>
+        </div>
+    </div>
+    <!-- Posts Grid -->
+    <div class="posts-grid" id="postsGrid">
+        <!-- سيتم ملء هذا القسم بالمنشورات ديناميكيًا -->
+    </div>
+    <!-- Bottom Navigation -->
+    <div class="bottom-nav">
+        <i class="fas fa-home"></i>
+        <i class="fas fa-search"></i>
+        <i class="far fa-plus-square"></i>
+        <i class="far fa-heart"></i>
+        <i class="fas fa-user"></i>
+    </div>
+    <!-- Edit Profile Modal -->
+    <div class="modal" id="editProfileModal">
+        <div class="modal-content">
+            <div class="modal-header">
+                <div class="modal-close" onclick="hideEditProfileModal()">
+                    <i class="fas fa-times"></i>
                 </div>
+                <div class="modal-title">تعديل الملف الشخصي</div>
+                <div class="modal-save" onclick="saveProfileChanges()">حفظ</div>
             </div>
+            <div class="modal-body">
+                <div class="avatar-edit-container">
+                    <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Profile" class="avatar-preview" id="avatarPreview">
+                    <div class="change-avatar-btn" onclick="changeProfilePicture()">تغيير الصورة الشخصية</div>
+                    <input type="file" id="avatarUpload" accept="image/*" style="display: none;">
                 </div>
+                <div class="edit-form-group">
+                    <label for="editName">الاسم</label>
+                    <input type="text" id="editName" value="سارة أحمد">
+                </div>
+                <div class="edit-form-group">
+                    <label for="editUsername">اسم المستخدم</label>
+                    <input type="text" id="editUsername" value="@sara_ahmed">
                 </div>
+                <div class="edit-form-group">
+                    <label for="editBio">البايو</label>
+                    <textarea id="editBio">مصممة جرافيك | محبة للسفر والتصوير | أعيش في دبي
+🌍✈️📷</textarea>
                 </div>
+                <div class="edit-form-group">
+                    <label for="editWebsite">الموقع الإلكتروني</label>
+                    <input type="text" id="editWebsite" value="www.sara-portfolio.com">
                 </div>
             </div>
         </div>
     </div>
+    <!-- Create Story Modal -->
+    <div class="modal" id="createStoryModal">
+        <div class="modal-content story-modal-content">
             <div class="modal-header">
+                <div class="modal-close" onclick="hideCreateStoryModal()">
                     <i class="fas fa-times"></i>
                 </div>
+                <div class="modal-title">إنشاء قصة جديدة</div>
             </div>
+            <img src="" alt="Story Preview" class="story-modal-preview" id="storyPreview">
+            <div class="story-modal-footer">
+                <button class="story-post-btn" onclick="postStory()">نشر القصة</button>
             </div>
+            <input type="file" id="storyUpload" accept="image/*,video/*" style="display: none;">
         </div>
     </div>
     <script>
+        // بيانات المستخدم
+        const userProfile = {
+            name: "سار�� أحمد",
+            username: "@sara_ahmed",
+            bio: "مصممة جرافيك | محبة للسفر والتصوير | أعيش في دبي\n🌍✈️📷",
+            website: "www.sara-portfolio.com",
+            avatar: "https://randomuser.me/api/portraits/women/44.jpg",
+            postsCount: 24,
+            followersCount: "1.2K",
+            followingCount: 340,
+            posts: [
+                { id: 1, image: "https://source.unsplash.com/random/600x600?design", likes: 124, comments: 12 },
+                { id: 2, image: "https://source.unsplash.com/random/600x600?dubai", likes: 89, comments: 5 },
+                { id: 3, image: "https://source.unsplash.com/random/600x600?travel", likes: 156, comments: 23 },
+                { id: 4, image: "https://source.unsplash.com/random/600x600?photography", likes: 201, comments: 18 },
+                { id: 5, image: "https://source.unsplash.com/random/600x600?art", likes: 76, comments: 7 },
+                { id: 6, image: "https://source.unsplash.com/random/600x600?nature", likes: 312, comments: 42 },
+                { id: 7, image: "https://source.unsplash.com/random/600x600?beach", likes: 178, comments: 15 },
+                { id: 8, image: "https://source.unsplash.com/random/600x600?architecture", likes: 92, comments: 9 },
+                { id: 9, image: "https://source.unsplash.com/random/600x600?food", likes: 145, comments: 21 }
+            ]
+        };
         // عناصر DOM
+        const editProfileModal = document.getElementById('editProfileModal');
+        const createStoryModal = document.getElementById('createStoryModal');
+        const postsGrid = document.getElementById('postsGrid');
+        const avatarUpload = document.getElementById('avatarUpload');
+        const storyUpload = document.getElementById('storyUpload');
+        // تهيئة الصفحة
+        function initProfilePage() {
+            // عرض بيانات المستخدم
+            document.getElementById('profileName').textContent = userProfile.name;
+            document.getElementById('profileUsername').textContent = userProfile.username;
+            document.getElementById('profileBio').textContent = userProfile.bio;
+            document.getElementById('profileWebsite').textContent = userProfile.website;
+            document.getElementById('profileAvatarImg').src = userProfile.avatar;
+            document.getElementById('postsCount').textContent = userProfile.postsCount;
+            document.getElementById('followersCount').textContent = userProfile.followersCount;
+            document.getElementById('followingCount').textContent = userProfile.followingCount;
+            // عرض المنشورات
+            renderPosts();
         }
+        // عرض المنشورات في الشبكة
+        function renderPosts() {
+            postsGrid.innerHTML = '';
+            userProfile.posts.forEach(post => {
+                const postElement = document.createElement('div');
+                postElement.className = 'post-thumbnail';
+                postElement.innerHTML = `
+                    <img src="${post.image}" alt="Post ${post.id}">
+                    <div class="post-thumbnail-overlay">
+                        <div class="post-thumbnail-stat">
+                            <i class="fas fa-heart"></i>
+                            <span>${post.likes}</span>
+                        </div>
+                        <div class="post-thumbnail-stat">
+                            <i class="fas fa-comment"></i>
+                            <span>${post.comments}</span>
+                        </div>
+                    </div>
+                `;
+                postsGrid.appendChild(postElement);
+            });
+        }
+        // عرض نافذة تعديل الملف الشخصي
+        function showEditProfileModal() {
+            // تعبئة البيانات الحالية في النموذج
+            document.getElementById('editName').value = userProfile.name;
+            document.getElementById('editUsername').value = userProfile.username;
+            document.getElementById('editBio').value = userProfile.bio;
+            document.getElementById('editWebsite').value = userProfile.website;
+            document.getElementById('avatarPreview').src = userProfile.avatar;
+            editProfileModal.style.display = 'flex';
         }
+        // إخفاء نافذة تعديل الملف الشخصي
+        function hideEditProfileModal() {
+            editProfileModal.style.display = 'none';
         }
+        // حفظ التعديلات على الملف الشخصي
+        function saveProfileChanges() {
+            userProfile.name = document.getElementById('editName').value;
+            userProfile.username = document.getElementById('editUsername').value;
+            userProfile.bio = document.getElementById('editBio').value;
+            userProfile.website = document.getElementById('editWebsite').value;
+            // تحديث واجهة المستخدم بالبيانات الجديدة
+            document.getElementById('profileName').textContent = userProfile.name;
+            document.getElementById('profileUsername').textContent = userProfile.username;
+            document.getElementById('profileBio').textContent = userProfile.bio;
+            document.getElementById('profileWebsite').textContent = userProfile.website;
+            hideEditProfileModal();
         }
+        // تغيير الصورة الشخصية
+        function changeProfilePicture() {
+            avatarUpload.click();
         }
+        // عرض نافذة تعديل الصورة الشخصية مباشرة
+        function showEditAvatarModal() {
+            showEditProfileModal();
+            changeProfilePicture();
         }
+        // عرض نافذة إنشاء قصة
+        function showCreateStoryModal() {
+            createStoryModal.style.display = 'flex';
+            storyUpload.click();
         }
+        // إخفاء نافذة إنشاء قصة
+        function hideCreateStoryModal() {
+            createStoryModal.style.display = 'none';
         }
+        // نشر القصة
+        function postStory() {
+            alert('تم نشر قصتك بنجاح!');
+            hideCreateStoryModal();
         }
+        // معالجة اختيار صورة جديدة للصورة الشخصية
+        avatarUpload.addEventListener('change', function(e) {
+            if (this.files && this.files[0]) {
+                const reader = new FileReader();
+                reader.onload = function(event) {
+                    // تحديث الصورة في نافذة التعديل
+                    document.getElementById('avatarPreview').src = event.target.result;
+                    // تحديث الصورة في الملف الشخصي
+                    userProfile.avatar = event.target.result;
+                    document.getElementById('profileAvatarImg').src = event.target.result;
+                };
+                reader.readAsDataURL(this.files[0]);
+            }
         });
+        // معالجة اختيار صورة/فيديو للقصة
+        storyUpload.addEventListener('change', function(e) {
             if (this.files && this.files[0]) {
+                const file = this.files[0];
+                const reader = new FileReader();
+                reader.onload = function(event) {
+                    document.getElementById('storyPreview').src = event.target.result;
+                };
+                if (file.type.includes('image')) {
+                    reader.readAsDataURL(file);
+                } else if (file.type.includes('video')) {
+                    // يمكنك هنا معالجة ملفات الفيديو إذا أردت
+                    alert('تم اختيار فيديو للقصة');
+                }
             }
         });
+        // تهيئة الصفحة عند التحميل
+        window.addEventListener('DOMContentLoaded', initProfilePage);
     </script>
 </body>
 </html>