Hugging Face's logo

Spaces:
Rayan545454
/
m1
Running

App Files Community
Rayan545454 commited on
Commit
72c39f8
·
verified ·
1 Parent(s): e5844a1

ابغا ادخال جوال إذا زر البرامج فقط كيف ؟ - Initial Deployment

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +117 -18
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: M1
3
- emoji: 📚
4
- colorFrom: purple
5
- colorTo: indigo
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: m1
3
+ emoji: 🐳
4
+ colorFrom: gray
5
+ colorTo: gray
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,118 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </html>
 
1
+ <!DOCTYPE html>
2
+ <html lang="ar" dir="rtl">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>إدخال الجوال</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700&display=swap" rel="stylesheet">
10
+ <style>
11
+ body {
12
+ font-family: 'Tajawal', sans-serif;
13
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
14
+ min-height: 100vh;
15
+ display: flex;
16
+ align-items: center;
17
+ justify-content: center;
18
+ }
19
+ .phone-input-container {
20
+ background: rgba(255, 255, 255, 0.95);
21
+ backdrop-filter: blur(10px);
22
+ border-radius: 20px;
23
+ box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
24
+ }
25
+ .input-field:focus {
26
+ border-color: #667eea;
27
+ box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.3);
28
+ }
29
+ .submit-btn {
30
+ transition: all 0.3s ease;
31
+ background: linear-gradient(to right, #667eea, #764ba2);
32
+ }
33
+ .submit-btn:hover {
34
+ transform: translateY(-2px);
35
+ box-shadow: 0 10px 25px -5px rgba(102, 126, 234, 0.4);
36
+ }
37
+ .country-code {
38
+ background: #f8f9fa;
39
+ border-top-right-radius: 12px;
40
+ border-bottom-right-radius: 12px;
41
+ }
42
+ </style>
43
+ </head>
44
+ <body>
45
+ <div class="container mx-auto px-4">
46
+ <div class="phone-input-container max-w-md w-full mx-auto p-8">
47
+ <div class="text-center mb-8">
48
+ <h1 class="text-3xl font-bold text-gray-800 mb-2">أدخل رقم الجوال</h1>
49
+ <p class="text-gray-600">يرجى إدخال رقم الجوال للحصول على رمز التحقق</p>
50
+ </div>
51
+
52
+ <form id="phoneForm" class="space-y-6">
53
+ <div class="space-y-2">
54
+ <label for="phone" class="block text-sm font-medium text-gray-700">رقم الجوال</label>
55
+ <div class="flex">
56
+ <span class="country-code px-4 py-3 text-gray-700 border border-gray-300 border-l-0 rounded-r-lg">+966</span>
57
+ <input
58
+ type="tel"
59
+ id="phone"
60
+ name="phone"
61
+ required
62
+ placeholder="5xxxxxxxx"
63
+ class="input-field flex-1 px-4 py-3 border border-gray-300 rounded-l-lg focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all"
64
+ pattern="[0-9]{9}"
65
+ maxlength="9"
66
+ >
67
+ </div>
68
+ <p class="text-xs text-gray-500 mt-1">أدخل رقم الجوال بدون الرمز الدولي</p>
69
+ </div>
70
+
71
+ <div class="flex items-center">
72
+ <input
73
+ type="checkbox"
74
+ id="terms"
75
+ required
76
+ class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
77
+ >
78
+ <label for="terms" class="mr-2 block text-sm text-gray-700">
79
+ أوافق على <a href="#" class="text-blue-600 hover:text-blue-800">الشروط والأحكام</a>
80
+ </label>
81
+ </div>
82
+
83
+ <button
84
+ type="submit"
85
+ class="submit-btn w-full py-3 px-4 rounded-lg text-white font-medium shadow-lg hover:shadow-xl transition-all duration-300"
86
+ >
87
+ إرسال رمز التحقق
88
+ </button>
89
+ </form>
90
+
91
+ <div class="mt-6 text-center">
92
+ <p class="text-sm text-gray-600">
93
+ لديك حساب بالفعل؟ <a href="#" class="text-blue-600 hover:text-blue-800 font-medium">تسجيل الدخول</a>
94
+ </p>
95
+ </div>
96
+ </div>
97
+ </div>
98
+
99
+ <script>
100
+ document.getElementById('phoneForm').addEventListener('submit', function(e) {
101
+ e.preventDefault();
102
+ const phone = document.getElementById('phone').value;
103
+
104
+ if(phone.length === 9 && /^\d+$/.test(phone)) {
105
+ // هنا يمكنك إضافة منطق إرسال رمز التحقق
106
+ alert('تم إرسال رمز التحقق إلى الرقم: ' + phone);
107
+ } else {
108
+ alert('يرجى إدخال رقم جوال صحيح مكون من 9 أرقام');
109
+ }
110
+ });
111
+
112
+ // تقييد الإدخال للأرقام فقط
113
+ document.getElementById('phone').addEventListener('input', function(e) {
114
+ this.value = this.value.replace(/[^0-9]/g, '');
115
+ });
116
+ </script>
117
+ </body>
118
  </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ ابغا ادخال جوال إذا زر البرامج فقط كيف ؟