Ibb-Smart-Shop-/computers.html at main · sohipdammaj2/Ibb-Smart-Shop- · GitHub

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
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">

    <title>الأجهزة الإلكترونية - متجر إلكتروني</title>
    <link rel="stylesheet" href="vv.css">
    <link rel="stylesheet" href="png.css"> <!-- تأكد من ربط ملف CSS الصحيح -->
</head>
<body>
    <header class="main-header">
        <nav class="navbar" style="margin-top:50px;">

           <div class="search-container">
    <input type="text" id="searchInput" class="search-bar" placeholder="ابحث عن المنتجات..." onkeyup="filterProducts()">
    <button class="search-button"><span class="bx bx-search"></span></button>
</div>
<div id="feedback"></div> <!-- Feedback element for no products found -->


               <div class="container">
                <div class="container">
                    <input type="checkbox" id="theme-toggle" class="theme-toggle-checkbox">
                    <label for="theme-toggle" onclick="applyTheme()" class="theme-toggle-label">
                        <span class="icon moon">🌙</span>
                        <span class="icon sun">🌞</span>
                        <span class="slider"></span>
                    </label>
                </div>
             </div>


            <a href="home.html" class="logo"><p class="p">متجرإلكتروني</p> </a>
            <button class="menu-toggle">☰</button>
            <ul class="nav-links">
                <li><a href="Control_panel.html" ><p class="bx bx-tachometer">لوحةالتحكم</p></a></li>
                <li><a href="home.html"><p class="bx bx-home">الرئيسية</p></a></li>
                <li><a href="computers.html"><p class="bx bx-devices">الأجهزةالإلكترونية</p></a></li>
                <li><a href="phone.html"> <p class="bx bx-devices">الهواتف المحمولة</p></a></li>
                <li><a href="accessories.html" ><p class="bx bx-headphone">الإكسسوارات الإلكترونية</p></a></li>
                <li><a href="communication.html" > <p class="bx bx-phone">تواصل معنا</p></a></li>
                <li><a href="car.html" > <p class="bx bx-credit-card">انشاء بطاقة تأمين</p></a></li>
            </ul>
        </nav>
        <div class="hero-section">
            <h1>استمتع بأحدث الأجهزة الإلكترونية</h1>
            <p>اختر من مجموعة متنوعة من المنتجات</p>
        </div>
    </header>

    <h2 class="zaqx">منتجاتنا</h2>
    <section class="products" id="productsSection">
        <div class="product-card">
            <img src="img.jpg" alt="منتج 1" class="product-image">
            <h3>الابتوب HP Zbook 15 G7</h3>
            <button class="btn-add-to-cart" onclick="addToCart('الابتوب HP Zbook 15 G7', 5000)">إضافة إلى السلة</button>
            <div class="product-details">
                <p class="product-price"> 5000</p>
            </div>
        </div>
        <!-- إضافة منتجات جديدة -->
        <div class="product-card">
            <img src="image2/c1.heic" alt="منتج 2" class="product-image">
            <h3>Lenovo L590</h3>
            <button class="btn-add-to-cart" onclick="addToCart('Lenovo L590', 299)">إضافة إلى السلة</button>
            <div class="product-details">
                <p class="product-price"> 299</p>
            </div>
        </div>
        <div class="product-card">
            <img src="image2/HO.jpg" alt="منتج 14" class="product-image">
            <h3>HONOR MagicBook X15</h3>
            <button class="btn-add-to-cart" onclick="addToCart('HONOR MagicBook X15', 977)">إضافة إلى السلة</button>
            <div class="product-details">
                <p class="product-price">977</p>
            </div>
        </div>
        <div class="product-card">
            <img src="image2/MAC.jpg" alt="منتج 3" class="product-image">
            <h3>MacBook Pro M2</h3>
            <button class="btn-add-to-cart" onclick="addToCart('MacBook Pro M2', 1000)">إضافة إلى السلة</button>
            <div class="product-details">
                <p class="product-price">1000 </p>
            </div>
        </div>
        <div class="product-card">
            <img src="image2/c2.heic" alt="منتج 4" class="product-image">
            <h3>Lenovo T560</h3>
            <button class="btn-add-to-cart" onclick="addToCart('Lenovo T560', 230)">إضافة إلى السلة</button>
            <div class="product-details">
                <p class="product-price">230 </p>
            </div>
        </div>
        <div class="product-card">
            <img src="image2/HP1.jpg" alt="منتج 11" class="product-image">
            <h3>HP 250 G8</h3>
            <button class="btn-add-to-cart" onclick="addToCart('HP 250 G8', 750)">إضافة إلى السلة</button>
            <div class="product-details">
                <p class="product-price">750 </p>
            </div>
        </div>
        <div class="product-card">
            <img src="image2/LA.jpg" alt="منتج 9" class="product-image">
            <h3>Laptop Series</h3>
            <button class="btn-add-to-cart" onclick="addToCart('Laptop Series', 240)">إضافة إلى السلة</button>
            <div class="product-details">
                <p class="product-price"> 240 </p>
            </div>
        </div>
        <div class="product-card">
            <img src="image2/c7.heic" alt="منتج 10" class="product-image">
            <h3>Lenovo P51</h3>
            <button class="btn-add-to-cart" onclick="addToCart('Lenovo P51', 340)">إضافة إلى السلة</button>
            <div class="product-details">
                <p class="product-price">340 </p>
            </div>
        </div>
        <div class="product-card">
            <img src="image2/c4.heic" alt="منتج 5" class="product-image">
            <h3>Lenovo T570</h3>
            <button class="btn-add-to-cart" onclick="addToCart('Lenovo T570', 259)">إضافة إلى السلة</button>
            <div class="product-details">
                <p class="product-price">259 </p>
            </div>
        </div>

        <div class="product-card">
            <img src="image2/LA2.jpg" alt="منتج 6" class="product-image">
            <h3>BEST</h3>
            <button class="btn-add-to-cart" onclick="addToCart('BEST', 469)">إضافة إلى السلة</button>
            <div class="product-details">
                <p class="product-price">469 </p>
            </div>
        </div>
        <div class="product-card">
            <img src="image2/c5.heic" alt="منتج 7" class="product-image">
            <h3>Lenovo P53</h3>
            <button class="btn-add-to-cart" onclick="addToCart('Lenovo P53', 475)">إضافة إلى السلة</button>
            <div class="product-details">
                <p class="product-price"> 475 </p>
            </div>
        </div>
        <div class="product-card">
            <img src="image2/c6.heic" alt="منتج 8" class="product-image">
            <h3>Lenovo L440P</h3>
            <button class="btn-add-to-cart" onclick="addToCart('Lenovo L440P', 140)">إضافة إلى السلة</button>
            <div class="product-details">
                <p class="product-price">140 </p>
            </div>
        </div>
        <div class="product-card">
            <img src="image2/c8.heic" alt="منتج 12" class="product-image">
            <h3>MSI Sword</h3>
            <button class="btn-add-to-cart" onclick="addToCart('MSI Sword', 930)">إضافة إلى السلة</button>
            <div class="product-details">
                <p class="product-price">930 </p>
            </div>
        </div>
        <div class="product-card">
            <img src="image2/c9.heic" alt="منتج 13" class="product-image">
            <h3>MSI</h3>
            <button class="btn-add-to-cart" onclick="addToCart('MSI', 679)">إضافة إلى السلة</button>
            <div class="product-details">
                <p class="product-price">679 </p>
            </div>
        </div>
        <div class="product-card">
            <img src="image2/c10.heic" alt="منتج 15" class="product-image">
            <h3>DELL Precision</h3>
            <button class="btn-add-to-cart" onclick="addToCart('DELL Precision', 577)">إضافة إلى السلة</button>
            <div class="product-details">
                <p class="product-price">577 </p>
            </div>
        </div>
        <div class="product-card">
            <img src="image2/c19.heic" alt="منتج 16" class="product-image">
            <h3>ROG ZEPHYRUS M15</h3>
            <button class="btn-add-to-cart" onclick="addToCart('ROG ZEPHYRUS M15', 880)">إضافة إلى السلة</button>
            <div class="product-details">
                <p class="product-price">880 </p>
            </div>
        </div>

        <!-- أضف المزيد من المنتجات حسب الحاجة -->
    </section>

    <!-- سلة التسوق -->
    <div class="cart" id="img">
        <img src="RSS.png" alt="سلة التسوق" class="cart-icon"  onclick="toggleCartDisplay()">
        <span id="cartCount" class="cart-count">0</span>
    </div>
    <!-- نافذة عرض سلة التسوق -->
    <div class="cart-modal-overlay"></div>
    <div id="cartModal" class="ccc">
        <div class="login_box">
            <div class="login-hearder">
                <span class="bx bx-cart">السلة</span>
            </div>
            <table id="cartTable" style="border: 0px solid black;">
                <thead>
                    <tr>
                        <th>اسم المنتج</th>
                        <th>الكمية</th>
                        <th class="mach" dir="ltr">السعر</th>
                        <th>حذف</th>
                    </tr>
                </thead>
                <tbody id="cartItems">
                    <tr>
                        <td>جلكسي اس 21 الترا</td>
                        <td>200000</td>
                        <td>4</td>
                        <td><button class="d" id="">حذف المنتج من السله</button></td>
                    </tr>
                </tbody>

            </table>
            <div class="klk">
                <p class="eee">عدد المنتجات: <span id="cartCountDisplay">0</span></p>
                <p class="eee"><i>$</i>إجمالي المبلغ: <span id="cartTotal">0</span></p>
            </div>
            <div class="klk">
                <button id="checkoutButton" onclick="goToCheckout()">إتمام الشراء</button>
                <button id="cancelOrderButton" onclick="cancelOrder()">إلغاء الطلب</button>
                <button id="clos" onclick="toggleCartDisplay()">إغلاق</button>
            </div>

        </div>
    </div>
    <footer class="main-footer">
        <p>© 2024 متجر إلكتروني. جميع الحقوق محفوظة.</p>
    </footer>
    <script src="lait.js"></script>
    <script src="java.js"></script>
</body>
</html>