Spaces:

melassy
/

api-whats-app

Running

App Files Files Community

melassy commited on Mar 28

Commit

cdcf27a

verified ·

1 Parent(s): 8f2cec5

Add 2 files

Browse files

Files changed (2) hide show

README.md +6 -4
index.html +735 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Api Whats App
-emoji: 🚀
 colorFrom: blue
-colorTo: pink
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: api-whats-app
+emoji: 🐳
 colorFrom: blue
+colorTo: blue
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,735 @@
-<!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="ar" dir="rtl">
+<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>
+        :root {
+            --primary-color: #25D366;
+            --secondary-color: #128C7E;
+            --accent-color: #34B7F1;
+            --text-color: #333;
+            --light-bg: #f5f5f5;
+            --white: #ffffff;
+            --error-color: #ff4444;
+            --success-color: #00C851;
+        }
+        * {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+        }
+        body {
+            background-color: var(--light-bg);
+            color: var(--text-color);
+            line-height: 1.6;
+        }
+        .container {
+            max-width: 1000px;
+            margin: 0 auto;
+            padding: 20px;
+        }
+        header {
+            background-color: var(--secondary-color);
+            color: var(--white);
+            padding: 20px 0;
+            text-align: center;
+            border-radius: 10px 10px 0 0;
+            margin-bottom: 30px;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+        }
+        header h1 {
+            font-size: 28px;
+            margin-bottom: 10px;
+        }
+        header p {
+            font-size: 16px;
+            opacity: 0.9;
+        }
+        .app-logo {
+            font-size: 40px;
+            margin-bottom: 15px;
+            color: var(--white);
+        }
+        .main-container {
+            background-color: var(--white);
+            border-radius: 10px;
+            padding: 30px;
+            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+        }
+        .upload-section {
+            margin-bottom: 30px;
+            border-bottom: 1px solid #eee;
+            padding-bottom: 30px;
+        }
+        .upload-container {
+            border: 2px dashed #ccc;
+            padding: 30px;
+            text-align: center;
+            border-radius: 8px;
+            transition: all 0.3s;
+            background-color: var(--light-bg);
+        }
+        .upload-container:hover {
+            border-color: var(--accent-color);
+            background-color: rgba(52, 183, 241, 0.05);
+        }
+        .upload-container i {
+            font-size: 48px;
+            color: var(--accent-color);
+            margin-bottom: 15px;
+        }
+        .upload-container p {
+            margin-bottom: 20px;
+            color: #666;
+        }
+        .btn {
+            background-color: var(--primary-color);
+            color: var(--white);
+            border: none;
+            padding: 12px 25px;
+            border-radius: 50px;
+            cursor: pointer;
+            font-size: 16px;
+            font-weight: 600;
+            transition: all 0.3s;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+        }
+        .btn:hover {
+            background-color: var(--secondary-color);
+            transform: translateY(-2px);
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+        }
+        .btn i {
+            margin-left: 8px;
+        }
+        .btn-secondary {
+            background-color: #6c757d;
+        }
+        .btn-secondary:hover {
+            background-color: #5a6268;
+        }
+        .form-group {
+            margin-bottom: 25px;
+        }
+        .form-group label {
+            display: block;
+            margin-bottom: 8px;
+            font-weight: 600;
+            color: var(--text-color);
+        }
+        .form-control {
+            width: 100%;
+            padding: 12px 15px;
+            border: 1px solid #ddd;
+            border-radius: 6px;
+            font-size: 16px;
+            transition: border 0.3s;
+        }
+        .form-control:focus {
+            border-color: var(--accent-color);
+            outline: none;
+            box-shadow: 0 0 0 3px rgba(52, 183, 241, 0.2);
+        }
+        textarea.form-control {
+            min-height: 120px;
+            resize: vertical;
+        }
+        .preview-section {
+            background-color: var(--light-bg);
+            padding: 20px;
+            border-radius: 8px;
+            margin-top: 30px;
+            border: 1px solid #eee;
+        }
+        .preview-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 15px;
+        }
+        .preview-content {
+            background-color: var(--white);
+            padding: 15px;
+            border-radius: 8px;
+            border: 1px solid #ddd;
+            max-height: 300px;
+            overflow-y: auto;
+        }
+        .student-list {
+            list-style: none;
+        }
+        .student-item {
+            padding: 12px 15px;
+            border-bottom: 1px solid #eee;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        .student-item:last-child {
+            border-bottom: none;
+        }
+        .send-section {
+            margin-top: 40px;
+            text-align: center;
+        }
+        .send-btn {
+            padding: 15px 40px;
+            font-size: 18px;
+        }
+        .modal {
+            display: none;
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0, 0, 0, 0.5);
+            z-index: 1000;
+            justify-content: center;
+            align-items: center;
+        }
+        .modal-content {
+            background-color: var(--white);
+            padding: 30px;
+            border-radius: 10px;
+            width: 90%;
+            max-width: 500px;
+            max-height: 80vh;
+            overflow-y: auto;
+        }
+        .modal-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+        }
+        .modal-title {
+            font-size: 20px;
+            font-weight: 600;
+        }
+        .close-modal {
+            background: none;
+            border: none;
+            font-size: 24px;
+            cursor: pointer;
+            color: #666;
+        }
+        .progress-container {
+            margin: 20px 0;
+        }
+        .progress-bar {
+            height: 10px;
+            background-color: #eee;
+            border-radius: 5px;
+            overflow: hidden;
+        }
+        .progress {
+            height: 100%;
+            background-color: var(--primary-color);
+            width: 0;
+            transition: width 0.3s;
+        }
+        .status-message {
+            text-align: center;
+            margin: 15px 0;
+            font-size: 14px;
+            color: #666;
+        }
+        .error {
+            color: var(--error-color);
+        }
+        .success {
+            color: var(--success-color);
+        }
+        .template-tags {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 8px;
+            margin-top: 10px;
+        }
+        .tag {
+            background-color: var(--light-bg);
+            padding: 5px 10px;
+            border-radius: 4px;
+            font-size: 14px;
+            cursor: pointer;
+            border: 1px solid #ddd;
+            transition: all 0.2s;
+        }
+        .tag:hover {
+            background-color: var(--accent-color);
+            color: var(--white);
+        }
+        @media (max-width: 768px) {
+            .container {
+                padding: 15px;
+            }
+            .main-container {
+                padding: 20px;
+            }
+            .upload-container {
+                padding: 20px 15px;
+            }
+            .btn {
+                padding: 10px 20px;
+                font-size: 14px;
+            }
+        }
+    </style>
+</head>
+<body>
+    <header>
+        <div class="container">
+            <div class="app-logo">
+                <i class="fab fa-whatsapp"></i>
+            </div>
+            <h1>نظام إرسال رسائل الواتساب للطلاب</h1>
+            <p>أرسل رسائل مخصصة للطلاب بسهولة وبشكل آلي</p>
+        </div>
+    </header>
+    <div class="container">
+        <div class="main-container">
+            <section class="upload-section">
+                <h2><i class="fas fa-file-upload"></i> تحميل ملف الطلاب</h2>
+                <div class="upload-container" id="uploadContainer">
+                    <i class="fas fa-file-excel"></i>
+                    <p>قم بسحب وإسقاط ملف Excel هنا أو انقر لاختيار الملف</p>
+                    <input type="file" id="fileInput" accept=".xlsx,.xls,.csv" style="display: none;">
+                    <button class="btn" id="selectFileBtn">
+                        <i class="fas fa-folder-open"></i> اختر ملف
+                    </button>
+                </div>
+                <div id="fileInfo" style="margin-top: 15px; display: none;">
+                    <div class="file-details" style="display: flex; align-items: center;">
+                        <i class="fas fa-file-excel" style="color: var(--success-color); font-size: 24px; margin-left: 10px;"></i>
+                        <div>
+                            <p style="font-weight: 600; margin-bottom: 5px;" id="fileName"></p>
+                            <p style="color: #666; font-size: 14px;" id="fileSize"></p>
+                        </div>
+                        <button id="clearFileBtn" style="background: none; border: none; margin-right: auto; color: var(--error-color); cursor: pointer;">
+                            <i class="fas fa-times"></i>
+                        </button>
+                    </div>
+                </div>
+            </section>
+            <section class="message-section">
+                <h2><i class="fas fa-comment-alt"></i> تكوين الرسالة</h2>
+                <div class="form-group">
+                    <label for="messageTemplate">نموذج الرسالة</label>
+                    <textarea id="messageTemplate" class="form-control" placeholder="عزيزي {اسم الطالب}، نود إعلامك بأن... الرابط: {الرابط}"></textarea>
+                    <div class="template-tags">
+                        <span class="tag" data-tag="{اسم الطالب}">{اسم الطالب}</span>
+                        <span class="tag" data-tag="{الرابط}">{الرابط}</span>
+                        <span class="tag" data-tag="{الرقم}">{الرقم}</span>
+                        <span class="tag" data-tag="{التاريخ}">{التاريخ}</span>
+                    </div>
+                </div>
+                <div class="form-group">
+                    <label for="customLink">رابط مخصص (اختياري)</label>
+                    <input type="url" id="customLink" class="form-control" placeholder="https://example.com">
+                </div>
+                <div class="preview-section">
+                    <div class="preview-header">
+                        <h3><i class="fas fa-eye"></i> معاينة الرسائل</h3>
+                    </div>
+                    <div class="preview-content">
+                        <p id="previewMessage">سيتم عرض معاينة الرسائل هنا بعد تحميل الملف وإدخال نموذج الرسالة.</p>
+                        <ul class="student-list" id="studentList" style="display: none;"></ul>
+                    </div>
+                </div>
+            </section>
+            <section class="send-section">
+                <button class="btn send-btn" id="sendMessagesBtn" disabled>
+                    <i class="fab fa-whatsapp"></i> إرسال الرسائل
+                </button>
+            </section>
+        </div>
+    </div>
+    <!-- Progress Modal -->
+    <div class="modal" id="progressModal">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h3 class="modal-title"><i class="fas fa-paper-plane"></i> جارٍ إرسال الرسائل</h3>
+                <button class="close-modal" id="closeModalBtn">&times;</button>
+            </div>
+            <div class="progress-container">
+                <div class="progress-bar">
+                    <div class="progress" id="progressBar"></div>
+                </div>
+                <div class="status-message" id="statusMessage">
+                    جاهز للبدء...
+                </div>
+            </div>
+            <div style="text-align: center;">
+                <button class="btn btn-secondary" id="cancelSendingBtn">
+                    <i class="fas fa-stop"></i> إلغاء العملية
+                </button>
+            </div>
+        </div>
+    </div>
+    <!-- Success Modal -->
+    <div class="modal" id="successModal">
+        <div class="modal-content">
+            <div style="text-align: center; margin: 20px 0;">
+                <i class="fas fa-check-circle" style="font-size: 60px; color: var(--success-color);"></i>
+                <h3 style="margin-top: 15px;">تم إرسال الرسائل بنجاح!</h3>
+            </div>
+            <div style="margin: 20px 0; text-align: center;">
+                <p id="successMessage"></p>
+            </div>
+            <div style="text-align: center;">
+                <button class="btn" id="okSuccessBtn">
+                    <i class="fas fa-check"></i> حسناً
+                </button>
+            </div>
+        </div>
+    </div>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            // DOM Elements
+            const uploadContainer = document.getElementById('uploadContainer');
+            const fileInput = document.getElementById('fileInput');
+            const selectFileBtn = document.getElementById('selectFileBtn');
+            const fileInfo = document.getElementById('fileInfo');
+            const fileName = document.getElementById('fileName');
+            const fileSize = document.getElementById('fileSize');
+            const clearFileBtn = document.getElementById('clearFileBtn');
+            const messageTemplate = document.getElementById('messageTemplate');
+            const customLink = document.getElementById('customLink');
+            const previewMessage = document.getElementById('previewMessage');
+            const studentList = document.getElementById('studentList');
+            const sendMessagesBtn = document.getElementById('sendMessagesBtn');
+            const progressModal = document.getElementById('progressModal');
+            const progressBar = document.getElementById('progressBar');
+            const statusMessage = document.getElementById('statusMessage');
+            const closeModalBtn = document.getElementById('closeModalBtn');
+            const cancelSendingBtn = document.getElementById('cancelSendingBtn');
+            const successModal = document.getElementById('successModal');
+            const successMessage = document.getElementById('successMessage');
+            const okSuccessBtn = document.getElementById('okSuccessBtn');
+            // Variables
+            let studentsData = [];
+            let sendingProcess = null;
+            // Event Listeners
+            selectFileBtn.addEventListener('click', function() {
+                fileInput.click();
+            });
+            uploadContainer.addEventListener('dragover', function(e) {
+                e.preventDefault();
+                uploadContainer.style.borderColor = var('--accent-color');
+                uploadContainer.style.backgroundColor = 'rgba(52, 183, 241, 0.1)';
+            });
+            uploadContainer.addEventListener('dragleave', function() {
+                uploadContainer.style.borderColor = '#ccc';
+                uploadContainer.style.backgroundColor = 'var(--light-bg)';
+            });
+            uploadContainer.addEventListener('drop', function(e) {
+                e.preventDefault();
+                uploadContainer.style.borderColor = '#ccc';
+                uploadContainer.style.backgroundColor = 'var(--light-bg)';
+                if (e.dataTransfer.files.length) {
+                    fileInput.files = e.dataTransfer.files;
+                    handleFileUpload();
+                }
+            });
+            fileInput.addEventListener('change', handleFileUpload);
+            clearFileBtn.addEventListener('click', function() {
+                fileInput.value = '';
+                fileInfo.style.display = 'none';
+                studentsData = [];
+                updatePreview();
+                updateSendButtonState();
+            });
+            messageTemplate.addEventListener('input', function() {
+                updatePreview();
+            });
+            customLink.addEventListener('input', function() {
+                updatePreview();
+            });
+            sendMessagesBtn.addEventListener('click', startSendingProcess);
+            closeModalBtn.addEventListener('click', function() {
+                progressModal.style.display = 'none';
+            });
+            cancelSendingBtn.addEventListener('click', function() {
+                if (sendingProcess) {
+                    clearInterval(sendingProcess);
+                    statusMessage.innerHTML = '<span class="error">تم إيقاف عملية الإرسال</span>';
+                    cancelSendingBtn.disabled = true;
+                }
+            });
+            okSuccessBtn.addEventListener('click', function() {
+                successModal.style.display = 'none';
+            });
+            // Add event listeners for template tags
+            document.querySelectorAll('.tag').forEach(tag => {
+                tag.addEventListener('click', function() {
+                    const tagValue = this.getAttribute('data-tag');
+                    insertAtCursor(messageTemplate, tagValue);
+                    messageTemplate.focus();
+                });
+            });
+            // Functions
+            function handleFileUpload() {
+                const file = fileInput.files[0];
+                if (!file) return;
+                // Simulate file processing (in a real app, you'd use SheetJS or similar)
+                setTimeout(() => {
+                    studentsData = generateSampleData();
+                    fileName.textContent = file.name;
+                    fileSize.textContent = formatFileSize(file.size);
+                    fileInfo.style.display = 'block';
+                    updatePreview();
+                    updateSendButtonState();
+                }, 500);
+            }
+            function generateSampleData() {
+                // In a real app, you would parse the actual Excel file
+                const mockData = [];
+                const names = [
+                    "أحمد محمد", "فاطمة علي", "يوسف إبراهيم",
+                    "سارة خالد", "محمد حسن", "نورا عبدالله",
+                    "عمر كمال", "لمى سعيد", "خالد وليد",
+                    "هناء مصطفى", "حسين رضا", "آية محمود"
+                ];
+                for (let i = 0; i < 12; i++) {
+                    mockData.push({
+                        name: names[i],
+                        phone: `9665${Math.floor(10000000 + Math.random() * 90000000)}`
+                    });
+                }
+                return mockData;
+            }
+            function formatFileSize(bytes) {
+                if (bytes === 0) return '0 Bytes';
+                const k = 1024;
+                const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+                const i = Math.floor(Math.log(bytes) / Math.log(k));
+                return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
+            }
+            function updatePreview() {
+                if (studentsData.length === 0) {
+                    studentList.style.display = 'none';
+                    previewMessage.style.display = 'block';
+                    previewMessage.textContent = 'سيتم عرض معاينة الرسائل هنا بعد تحميل الملف وإدخال نموذج الرسالة.';
+                    return;
+                }
+                let message = messageTemplate.value;
+                if (!message) {
+                    studentList.style.display = 'none';
+                    previewMessage.style.display = 'block';
+                    previewMessage.textContent = 'الرجاء إدخال نموذج الرسالة لمعاينة الرسائل.';
+                    return;
+                }
+                studentList.innerHTML = '';
+                previewMessage.style.display = 'none';
+                studentList.style.display = 'block';
+                // Show preview for first 3 students
+                const previewCount = Math.min(3, studentsData.length);
+                for (let i = 0; i < previewCount; i++) {
+                    const student = studentsData[i];
+                    const link = customLink.value || '{الرابط}';
+                    const processedMessage = processMessage(message, student.name, link);
+                    const li = document.createElement('li');
+                    li.className = 'student-item';
+                    li.innerHTML = `
+                        <div style="flex: 1;">
+                            <strong>${student.name}</strong>
+                            <div style="font-size: 12px; color: #666; margin-top: 4px;">${student.phone}</div>
+                        </div>
+                        <div style="max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
+                            ${processedMessage}
+                        </div>
+                    `;
+                    studentList.appendChild(li);
+                }
+                if (studentsData.length > 3) {
+                    const li = document.createElement('li');
+                    li.className = 'student-item';
+                    li.style.textAlign = 'center';
+                    li.style.color = '#666';
+                    li.textContent = `و ${studentsData.length - 3} طلاب آخرين...`;
+                    studentList.appendChild(li);
+                }
+            }
+            function processMessage(template, name, link) {
+                const today = new Date();
+                const dateStr = `${today.getDate()}/${today.getMonth() + 1}/${today.getFullYear()}`;
+                return template
+                    .replace(/{اسم الطالب}/g, name)
+                    .replace(/{الرابط}/g, link)
+                    .replace(/{الرقم}/g, '+9665XXXXXX')
+                    .replace(/{التاريخ}/g, dateStr);
+            }
+            function updateSendButtonState() {
+                sendMessagesBtn.disabled = studentsData.length === 0 || !messageTemplate.value;
+            }
+            function insertAtCursor(textarea, text) {
+                const startPos = textarea.selectionStart;
+                const endPos = textarea.selectionEnd;
+                const beforeText = textarea.value.substring(0, startPos);
+                const afterText = textarea.value.substring(endPos, textarea.value.length);
+                textarea.value = beforeText + text + afterText;
+                textarea.selectionStart = startPos + text.length;
+                textarea.selectionEnd = startPos + text.length;
+                textarea.focus();
+                // Trigger input event to update preview
+                const event = new Event('input', { bubbles: true });
+                textarea.dispatchEvent(event);
+            }
+            function startSendingProcess() {
+                progressModal.style.display = 'flex';
+                progressBar.style.width = '0%';
+                cancelSendingBtn.disabled = false;
+                let progress = 0;
+                const totalStudents = studentsData.length;
+                const link = customLink.value || '{الرابط}';
+                sendingProcess = setInterval(() => {
+                    if (progress >= totalStudents) {
+                        clearInterval(sendingProcess);
+                        sendingProcess = null;
+                        // Show success message
+                        progressModal.style.display = 'none';
+                        successMessage.textContent = `تم إرسال ${totalStudents} رسالة بنجاح إلى الطلاب.`;
+                        successModal.style.display = 'flex';
+                        return;
+                    }
+                    progress++;
+                    const percent = Math.round((progress / totalStudents) * 100);
+                    progressBar.style.width = `${percent}%`;
+                    // Simulate sending message (in a real app, you would send via WhatsApp API)
+                    const currentStudent = studentsData[progress - 1];
+                    const message = processMessage(messageTemplate.value, currentStudent.name, link);
+                    statusMessage.innerHTML = `جاري إرسال الرسالة إلى <strong>${currentStudent.name}</strong>...`;
+                    // Randomly simulate failures (for demo purposes)
+                    if (Math.random() < 0.1 && progress < totalStudents) {
+                        setTimeout(() => {
+                            statusMessage.innerHTML = `<span class="error">فشل إرسال الرسالة إلى ${currentStudent.name} - سيتم إعادة المحاولة...</span>`;
+                            progress--; // Retry this one
+                        }, 1500);
+                    }
+                }, 1500);
+            }
+            // Handle clicks outside modal to close it
+            window.addEventListener('click', function(event) {
+                if (event.target === progressModal) {
+                    progressModal.style.display = 'none';
+                }
+                if (event.target === successModal) {
+                    successModal.style.display = 'none';
+                }
+            });
+        });
+    </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: absolute; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">This website has been generated by <a href="https://enzostvs-deepsite.hf.space" style="color: #fff;" target="_blank" >DeepSite</a> <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;"></p></body>
+</html>