Hugging Face's logo

Spaces:
Rayan545454
/
r444rrr
Running

App Files Community
r444rrr
File size: 8,586 Bytes 
0a87fb7
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
 
<!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>
    @keyframes float {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-10px); }
    }
    .floating {
      animation: float 3s ease-in-out infinite;
    }
    .glass-effect {
      background: rgba(255, 255, 255, 0.2);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.3);
    }
    .input-focus:focus {
      border-color: #ec4899;
      box-shadow: 0 0 0 3px rgba(236, 72, 153, 0.2);
    }
  </style>
</head>
<body class="bg-gray-100 font-sans">
  <!-- Navigation -->
  <nav class="bg-pink-600 text-white shadow-lg">
    <div class="container mx-auto px-4 py-3 flex justify-between items-center">
      <a href="#" class="text-2xl font-bold">حقيبتي</a>
      <div class="flex items-center space-x-4 space-x-reverse">
        <a href="#" class="hover:text-pink-200 transition"><i class="fas fa-shopping-cart"></i></a>
        <a href="#" class="hover:text-pink-200 transition"><i class="fas fa-user"></i></a>
      </div>
    </div>
  </nav>

  <!-- Main Content -->
  <div class="container mx-auto px-4 py-8">
    <!-- Product Page -->
    <div id="product-page" class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl my-8">
      <div class="md:flex">
        <div class="md:flex-shrink-0 p-4">
          <img class="h-48 w-full object-cover md:h-full md:w-48 rounded-lg shadow-lg" src="https://images.unsplash.com/photo-1585334865750-77f9ecaa06cf?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80" alt="حقيبة يد أنيقة">
        </div>
        <div class="p-8">
          <div class="uppercase tracking-wide text-sm text-pink-600 font-semibold">حقيبة يد</div>
          <h1 class="block mt-1 text-lg leading-tight font-medium text-black">حقيبة يد أنيقة</h1>
          <p class="mt-2 text-gray-600">مصنوعة من الجلد الطبيعي، تصميم عصري ومساحة واسعة تناسب جميع احتياجاتك اليومية.</p>
          <div class="mt-4 flex items-center">
            <span class="text-3xl font-bold text-pink-600">199 درهم</span>
            <span class="ml-2 text-sm text-gray-500 line-through">250 درهم</span>
            <span class="mr-2 bg-pink-100 text-pink-800 text-xs font-semibold px-2.5 py-0.5 rounded">خصم 20%</span>
          </div>
          <div class="mt-6">
            <button onclick="showCheckoutPage()" class="w-full bg-pink-600 hover:bg-pink-700 text-white font-bold py-3 px-4 rounded-lg shadow-lg transition transform hover:scale-105">
              <i class="fas fa-shopping-cart mr-2"></i> أضف إلى السلة
            </button>
          </div>
          <div class="mt-4 flex justify-between text-sm text-gray-500">
            <div class="flex items-center">
              <i class="fas fa-truck mr-1"></i>
              <span>شحن مجاني</span>
            </div>
            <div class="flex items-center">
              <i class="fas fa-shield-alt mr-1"></i>
              <span>ضمان لمدة عام</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Checkout Page -->
    <div id="checkout-page" class="hidden max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden my-8">
      <div class="p-8">
        <div class="flex justify-between items-center mb-6">
          <h2 class="text-2xl font-bold text-gray-800">أكمل بياناتك</h2>
          <button onclick="showProductPage()" class="text-gray-500 hover:text-pink-600">
            <i class="fas fa-arrow-right"></i>
          </button>
        </div>
        
        <form id="checkout-form" class="space-y-4">
          <div>
            <label class="block text-gray-700 text-sm font-bold mb-2" for="name">الاسم الكامل</label>
            <input class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-pink-200 input-focus" 
                   id="name" type="text" placeholder="أدخل اسمك" required>
          </div>
          
          <div>
            <label class="block text-gray-700 text-sm font-bold mb-2" for="email">البريد الإلكتروني</label>
            <input class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-pink-200 input-focus" 
                   id="email" type="email" placeholder="[email protected]" required>
          </div>
          
          <div>
            <label class="block text-gray-700 text-sm font-bold mb-2" for="phone">رقم الجوال</label>
            <input class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-pink-200 input-focus" 
                   id="phone" type="tel" placeholder="+971501234567" required>
          </div>
          
          <div>
            <label class="block text-gray-700 text-sm font-bold mb-2" for="address">العنوان</label>
            <textarea class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-pink-200 input-focus" 
                      id="address" rows="2" placeholder="الشارقة، الإمارات" required></textarea>
          </div>
          
          <div class="pt-4">
            <button type="button" onclick="showPaymentPage()" class="w-full bg-green-600 hover:bg-green-700 text-white font-bold py-3 px-4 rounded-lg shadow-lg transition transform hover:scale-105">
              المتابعة إلى الدفع
            </button>
          </div>
        </form>
      </div>
    </div>

    <!-- Payment Page -->
    <div id="payment-page" class="hidden max-w-md mx-auto rounded-xl overflow-hidden my-8">
      <div class="glass-effect p-8 rounded-xl shadow-lg">
        <div class="text-center mb-6">
          <div class="text-5xl mb-4">💳</div>
          <h2 class="text-2xl font-bold text-white">أتمم الدفع</h2>
        </div>
        
        <div class="bg-white bg-opacity-20 p-6 rounded-lg mb-6">
          <div class="flex justify-between items-center mb-3">
            <span class="font-medium text-white">المنتج:</span>
            <span class="text-white">حقيبة يد أنيقة</span>
          </div>
          <div class="flex justify-between items-center mb-3">
            <span class="font-medium text-white">السعر:</span>
            <span class="text-white">199 درهم</span>
          </div>
          <div class="flex justify-between items-center">
            <span class="font-medium text-white">الشحن:</span>
            <span class="text-green-300">مجاني</span>
          </div>
          <div class="border-t border-white border-opacity-30 my-3"></div>
          <div class="flex justify-between items-center">
            <span class="font-bold text-white">المجموع:</span>
            <span class="text-xl font-bold text-white">199 درهم</span>
          </div>
        </div>
        
        <div class="mb-6">
          <label class="block text-white text-sm font-bold mb-2" for="card">رقم البطاقة</label>
          <div class="relative">
            <input class="w-full px-4 py-3 rounded-lg border border-white border-opacity-30 bg-white bg-opacity-20 text-white placeholder-white placeholder-opacity-70 focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-50" 
                   id="card" type="text" placeholder="1234 5678 9012 3456" required>
            <div class="absolute left-3 top-3 flex space-x
<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/r444rrr" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>