Spaces:

Rayan545454
/

rayan545454

Running

App Files Files Community

Rayan545454 commited on Aug 19, 2025

Commit

6678121

verified ·

1 Parent(s): 974aa7e

<!DOCTYPE html> <html lang="ar" dir="rtl"> <head> <meta charset="UTF-8"> <title>بوابة الدفع</title> <style> body { font-family: Arial, sans-serif; background-color: #f8f9fa; direction: rtl; padding: 40px; max-width: 600px; margin: auto; } h2 { color: #333; } label { display: block; margin-top: 15px; font-weight: bold; } input, select, textarea, button { width: 100%; padding: 10px; margin-top: 5px; border-radius: 5px; border: 1px solid #ccc; } button { margin-top: 20px; cursor: pointer; } .btn-primary { background-color: #007bff; color: white; border: none; } .btn-secondary { background-color: #6c757d; color: white; border: none; } </style> </head> <body> <h2>بوابة الدفع</h2> <form id="paymentForm"> <label>طريقة الدفع:</label> <select name="paymentMethod" required> <option value="visa">فيزا</option> <option value="mastercard">ماستر كارد</option> <option value="mada">مدى</option> </select> <label>رقم البطاقة:</label> <input type="text" name="cardNumber" placeholder="1234 5678 9012 3456" required> <label>تاريخ الانتهاء:</label> <input type="month" name="expiryDate" required> <label>رمز الأمان (CVV):</label> <input type="text" name="cvv" placeholder="123" required> <label>المحركات:</label> <input type="text" name="engineInfo" placeholder="مثال: محرك كهربائي"> <label>نص الزبون:</label> <textarea name="customerNote" placeholder="ملاحظات من العميل..."></textarea> <label>سبب الحفظ:</label> <input type="text" name="saveReason" placeholder="مثال: للمراجعة لاحقاً"> <button type="submit" class="btn-primary">حفظ</button> <button type="button" class="btn-secondary" onclick="reviewOnly()">مراجعة فقط</button> </form> <script> const form = document.getElementById('paymentForm'); form.addEventListener('submit', function(e) { e.preventDefault(); alert('تم حفظ البيانات بنجاح (تم التنفيذ)'); // يمكنك هنا إرسال البيانات إلى الخادم باستخدام fetch أو AJAX }); function reviewOnly() { alert('تم الحفظ للمراجعة فقط (بدون تنفيذ الدفع)'); } </script> </body> </html> - Initial Deployment

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +272 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Rayan545454
-emoji: 🌖
-colorFrom: yellow
-colorTo: gray
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: rayan545454
+emoji: 🐳
+colorFrom: pink
+colorTo: pink
 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,272 @@
-<!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>
+  <script src="https://cdn.tailwindcss.com"></script>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+  <style>
+    @import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700&display=swap');
+    body {
+      font-family: 'Tajawal', sans-serif;
+    }
+    .card-input {
+      background-image: url("data:image/svg+xml,%3Csvg width='24' height='16' viewBox='0 0 24 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21 0H3C1.34315 0 0 1.34315 0 3V13C0 14.6569 1.34315 16 3 16H21C22.6569 16 24 14.6569 24 13V3C24 1.34315 22.6569 0 21 0Z' fill='%23E5E7EB'/%3E%3Cpath d='M16 5C16 6.10457 15.1046 7 14 7C12.8954 7 12 6.10457 12 5C12 3.89543 12.8954 3 14 3C15.1046 3 16 3.89543 16 5Z' fill='%239CA3AF'/%3E%3Cpath d='M4 8H20' stroke='%239CA3AF' stroke-width='2'/%3E%3C/svg%3E");
+      background-repeat: no-repeat;
+      background-position: right 0.75rem center;
+      background-size: 24px 16px;
+    }
+    .card-input.visa {
+      background-image: url("data:image/svg+xml,%3Csvg width='24' height='16' viewBox='0 0 24 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21 0H3C1.34315 0 0 1.34315 0 3V13C0 14.6569 1.34315 16 3 16H21C22.6569 16 24 14.6569 24 13V3C24 1.34315 22.6569 0 21 0Z' fill='%231A1F71'/%3E%3Cpath d='M16 5C16 6.10457 15.1046 7 14 7C12.8954 7 12 6.10457 12 5C12 3.89543 12.8954 3 14 3C15.1046 3 16 3.89543 16 5Z' fill='%23F7B600'/%3E%3Cpath d='M4 8H20' stroke='%23F7B600' stroke-width='2'/%3E%3C/svg%3E");
+    }
+    .card-input.mastercard {
+      background-image: url("data:image/svg+xml,%3Csvg width='24' height='16' viewBox='0 0 24 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21 0H3C1.34315 0 0 1.34315 0 3V13C0 14.6569 1.34315 16 3 16H21C22.6569 16 24 14.6569 24 13V3C24 1.34315 22.6569 0 21 0Z' fill='%23001F5E'/%3E%3Cpath d='M16 5C16 6.10457 15.1046 7 14 7C12.8954 7 12 6.10457 12 5C12 3.89543 12.8954 3 14 3C15.1046 3 16 3.89543 16 5Z' fill='%23EB001B'/%3E%3Cpath d='M4 8H20' stroke='%23EB001B' stroke-width='2'/%3E%3C/svg%3E");
+    }
+    .card-input.mada {
+      background-image: url("data:image/svg+xml,%3Csvg width='24' height='16' viewBox='0 0 24 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21 0H3C1.34315 0 0 1.34315 0 3V13C0 14.6569 1.34315 16 3 16H21C22.6569 16 24 14.6569 24 13V3C24 1.34315 22.6569 0 21 0Z' fill='%23005248'/%3E%3Cpath d='M16 5C16 6.10457 15.1046 7 14 7C12.8954 7 12 6.10457 12 5C12 3.89543 12.8954 3 14 3C15.1046 3 16 3.89543 16 5Z' fill='%23FFFFFF'/%3E%3Cpath d='M4 8H20' stroke='%23FFFFFF' stroke-width='2'/%3E%3C/svg%3E");
+    }
+    .animate-spin {
+      animation: spin 1s linear infinite;
+    }
+    @keyframes spin {
+      from {
+        transform: rotate(0deg);
+      }
+      to {
+        transform: rotate(360deg);
+      }
+    }
+    .toast {
+      animation: fadeIn 0.3s, fadeOut 0.5s 2.5s;
+    }
+    @keyframes fadeIn {
+      from { opacity: 0; transform: translateY(20px); }
+      to { opacity: 1; transform: translateY(0); }
+    }
+    @keyframes fadeOut {
+      from { opacity: 1; transform: translateY(0); }
+      to { opacity: 0; transform: translateY(-20px); }
+    }
+  </style>
+</head>
+<body class="bg-gray-50 min-h-screen flex items-center justify-center p-4">
+  <div class="w-full max-w-md">
+    <!-- Header with logo -->
+    <div class="flex items-center justify-center mb-8">
+      <div class="bg-blue-600 text-white p-3 rounded-lg shadow-lg">
+        <i class="fas fa-credit-card text-2xl"></i>
+      </div>
+      <h1 class="text-2xl font-bold text-gray-800 mr-3">بوابة الدفع الإلكتروني</h1>
+    </div>
+    <!-- Payment Card -->
+    <div class="bg-white rounded-xl shadow-lg overflow-hidden">
+      <!-- Card Header -->
+      <div class="bg-blue-600 py-3 px-4 text-white">
+        <h2 class="font-bold text-lg">أكمل عملية الدفع</h2>
+        <p class="text-sm opacity-90">أدخل معلومات بطاقتك للدفع الآمن</p>
+      </div>
+      <!-- Card Body -->
+      <form id="paymentForm" class="p-6">
+        <!-- Payment Method -->
+        <div class="mb-6">
+          <label class="block text-gray-700 font-medium mb-2">طريقة الدفع</label>
+          <div class="relative">
+            <select name="paymentMethod" required
+              class="block appearance-none w-full bg-gray-100 border border-gray-200 text-gray-700 py-3 px-4 pr-8 rounded-lg leading-tight focus:outline-none focus:bg-white focus:border-blue-500 transition duration-200">
+              <option value="visa">فيزا</option>
+              <option value="mastercard">ماستر كارد</option>
+              <option value="mada">مدى</option>
+            </select>
+            <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center px-2 text-gray-700">
+              <i class="fas fa-chevron-down"></i>
+            </div>
+          </div>
+        </div>
+        <!-- Card Number -->
+        <div class="mb-6">
+          <label class="block text-gray-700 font-medium mb-2">رقم البطاقة</label>
+          <input type="text" name="cardNumber" placeholder="1234 5678 9012 3456" required
+            class="card-input w-full py-3 px-4 border border-gray-200 rounded-lg focus:outline-none focus:border-blue-500 transition duration-200">
+        </div>
+        <!-- Expiry and CVV -->
+        <div class="grid grid-cols-2 gap-4 mb-6">
+          <div>
+            <label class="block text-gray-700 font-medium mb-2">تاريخ الانتهاء</label>
+            <input type="month" name="expiryDate" required
+              class="w-full py-3 px-4 border border-gray-200 rounded-lg focus:outline-none focus:border-blue-500 transition duration-200">
+          </div>
+          <div>
+            <label class="block text-gray-700 font-medium mb-2">رمز الأمان (CVV)</label>
+            <div class="relative">
+              <input type="text" name="cvv" placeholder="123" required
+                class="w-full py-3 px-4 border border-gray-200 rounded-lg focus:outline-none focus:border-blue-500 transition duration-200">
+              <div class="absolute inset-y-0 left-0 flex items-center pl-3 cursor-pointer" onclick="toggleCVVHelp()">
+                <i class="fas fa-question-circle text-gray-400 hover:text-blue-500"></i>
+              </div>
+            </div>
+          </div>
+        </div>
+        <!-- Additional Information -->
+        <div class="mb-6">
+          <label class="block text-gray-700 font-medium mb-2">المحركات</label>
+          <input type="text" name="engineInfo" placeholder="مثال: محرك كهربائي"
+            class="w-full py-3 px-4 border border-gray-200 rounded-lg focus:outline-none focus:border-blue-500 transition duration-200">
+        </div>
+        <div class="mb-6">
+          <label class="block text-gray-700 font-medium mb-2">ملاحظات العميل</label>
+          <textarea name="customerNote" placeholder="ملاحظات من العميل..."
+            class="w-full py-3 px-4 border border-gray-200 rounded-lg focus:outline-none focus:border-blue-500 transition duration-200 h-24"></textarea>
+        </div>
+        <div class="mb-8">
+          <label class="block text-gray-700 font-medium mb-2">سبب الحفظ</label>
+          <input type="text" name="saveReason" placeholder="مثال: للمراجعة لاحقاً"
+            class="w-full py-3 px-4 border border-gray-200 rounded-lg focus:outline-none focus:border-blue-500 transition duration-200">
+        </div>
+        <!-- Buttons -->
+        <div class="grid grid-cols-2 gap-4">
+          <button type="submit" id="submitBtn"
+            class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded-lg transition duration-200 flex items-center justify-center">
+            <span id="submitText">حفظ الدفع</span>
+            <i id="submitIcon" class="fas fa-save mr-2"></i>
+          </button>
+          <button type="button" onclick="reviewOnly()"
+            class="bg-gray-600 hover:bg-gray-700 text-white font-bold py-3 px-4 rounded-lg transition duration-200 flex items-center justify-center">
+            <span>مراجعة فقط</span>
+            <i class="fas fa-eye mr-2"></i>
+          </button>
+        </div>
+      </form>
+    </div>
+    <!-- Security Badges -->
+    <div class="flex items-center justify-center mt-6 space-x-4 space-x-reverse">
+      <div class="text-gray-500 text-sm flex items-center">
+        <i class="fas fa-lock text-green-500 mr-1"></i>
+        <span>دفع آمن</span>
+      </div>
+      <div class="text-gray-500 text-sm flex items-center">
+        <i class="fas fa-shield-alt text-blue-500 mr-1"></i>
+        <span>مشفّر</span>
+      </div>
+    </div>
+  </div>
+  <!-- CVV Help Modal -->
+  <div id="cvvHelpModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 hidden">
+    <div class="bg-white rounded-lg p-6 max-w-sm w-full">
+      <div class="flex justify-between items-center mb-4">
+        <h3 class="font-bold text-lg">ما هو رمز الأمان (CVV)؟</h3>
+        <button onclick="toggleCVVHelp()" class="text-gray-500 hover:text-gray-700">
+          <i class="fas fa-times"></i>
+        </button>
+      </div>
+      <div class="mb-4">
+        <p class="text-gray-700 mb-3">رمز الأمان هو رمز مكون من 3 أو 4 أرقام موجود على ظهر بطاقتك الائتمانية.</p>
+        <div class="flex justify-center">
+          <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='120' viewBox='0 0 200 120'%3E%3Crect width='200' height='120' fill='%23f3f4f6' rx='8'/%3E%3Crect x='20' y='20' width='160' height='80' fill='%23e5e7eb' rx='4'/%3E%3Crect x='120' y='50' width='60' height='20' fill='%23d1d5db'/%3E%3Ctext x='150' y='65' font-family='Arial' font-size='12' text-anchor='middle' fill='%236b7280'%3ECVV%3C/text%3E%3C/svg%3E"
+               alt="CVV Location" class="rounded">
+        </div>
+      </div>
+      <button onclick="toggleCVVHelp()" class="w-full bg-blue-600 text-white py-2 rounded-lg hover:bg-blue-700 transition duration-200">
+        فهمت، شكرًا
+      </button>
+    </div>
+  </div>
+  <!-- Toast Notification -->
+  <div id="toast" class="fixed bottom-4 left-4 right-4 flex justify-center hidden">
+    <div class="toast bg-green-500 text-white px-6 py-3 rounded-lg shadow-lg flex items-center max-w-md">
+      <i class="fas fa-check-circle mr-2"></i>
+      <span id="toastMessage"></span>
+    </div>
+  </div>
+  <script>
+    // Update card icon based on payment method
+    const paymentMethodSelect = document.querySelector('select[name="paymentMethod"]');
+    const cardNumberInput = document.querySelector('input[name="cardNumber"]');
+    paymentMethodSelect.addEventListener('change', function() {
+      cardNumberInput.className = `card-input ${this.value} w-full py-3 px-4 border border-gray-200 rounded-lg focus:outline-none focus:border-blue-500 transition duration-200`;
+    });
+    // Format card number
+    cardNumberInput.addEventListener('input', function(e) {
+      let value = e.target.value.replace(/\s+/g, '');
+      if (value.length > 0) {
+        value = value.match(new RegExp('.{1,4}', 'g')).join(' ');
+      }
+      e.target.value = value;
+    });
+    // Toggle CVV help modal
+    function toggleCVVHelp() {
+      const modal = document.getElementById('cvvHelpModal');
+      modal.classList.toggle('hidden');
+    }
+    // Form submission
+    const form = document.getElementById('paymentForm');
+    const submitBtn = document.getElementById('submitBtn');
+    const submitText = document.getElementById('submitText');
+    const submitIcon = document.getElementById('submitIcon');
+    form.addEventListener('submit', function(e) {
+      e.preventDefault();
+      // Show loading state
+      submitBtn.disabled = true;
+      submitText.textContent = 'جاري المعالجة...';
+      submitIcon.className = 'fas fa-circle-notch animate-spin mr-2';
+      // Simulate API call
+      setTimeout(() => {
+        showToast('تم حفظ البيانات بنجاح (تم التنفيذ)');
+        // Reset form
+        submitBtn.disabled = false;
+        submitText.textContent = 'حفظ الدفع';
+        submitIcon.className = 'fas fa-save mr-2';
+      }, 2000);
+    });
+    // Review only function
+    function reviewOnly() {
+      showToast('تم الحفظ للمراجعة فقط (بدون تنفيذ الدفع)');
+    }
+    // Show toast notification
+    function showToast(message) {
+      const toast = document.getElementById('toast');
+      const toastMessage = document.getElementById('toastMessage');
+      toastMessage.textContent = message;
+      toast.classList.remove('hidden');
+      setTimeout(() => {
+        toast.classList.add('hidden');
+      }, 3000);
+    }
+  </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Rayan545454/rayan545454" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>