forked from TheBSD/poykott
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
290 lines (266 loc) · 14.5 KB
/
index.html
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
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
<!doctype html>
<html dir="rtl" lang="ar">
<head>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-MN19N6VE91"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-MN19N6VE91');
</script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="boycott Israeli Tech" />
<title>مقاطعة المنتجات التقنية الإسرائيلية </title>
<meta name="description" content="موقع لمقاطعة المنتجات التقنية الإسرائيلية وعرض بدائل لها" />
<!-- favicon -->
<link rel="icon" type="image/png" href="assets/images/icon.png" />
<link rel="apple-touch-icon" href="assets/images/icon.png">
<!-- Open Graph Meta Tags -->
<meta property="og:type" content="website" />
<meta property="og:site_name" content="مقاطعة المنتجات التقنية الإسرائيلية" />
<meta property="og:locale" content="ar_AR" />
<meta property="og:locale:alternate" content="ar_AR" />
<meta property="og:url" content="https://boycottisraelitech.com/" />
<meta property="og:title" content="مقاطعة المنتجات التقنية الإسرائيلية" />
<meta property="og:description" content="موقع لمقاطعة المنتجات التقنية الإسرائيلية وعرض بدائل لها" />
<meta property="og:image" content="https://boycottisraelitech.com/assets/images/banner.jpg" />
<meta property="og:image:width" content="256" />
<meta property="og:image:height" content="256" />
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Readex+Pro:wght@300;400;500;600&family=Roboto:wght@100;400;500;700&display=swap"
rel="stylesheet">
<!-- JS -->
<script src="./libs/tailwind.js"></script>
</script>
</head>
<body class="font-mainFont">
<div class="min-h-full">
<header class="pb-24 bg-[#f5f7fe]">
<div class="mx-auto max-w-3xl px-4 sm:px-6 lg:max-w-7xl lg:px-8">
<div class="relative flex items-center justify-center pt-5 pb-3 lg:justify-between">
<!-- Logo -->
<div class=" right-0 flex-shrink-0 lg:static mb-6">
<a href="#">
<span class="sr-only">مقاطعة</span>
<img class="h-20 w-auto" src="https://i.suar.me/YJmnL/l" alt=" Your Company">
</a>
</div>
</div>
<!-- Header -->
<div class="mx-auto mb-10 ">
<h1 class="text-4xl font-bold tracking-tight text-gray-900 sm:text-6xl">قاطع المنتجات الإسرائيلية التقنية</h1>
<p class="mt-6 text-lg leading-8 text-gray-600">
مشروع مقاطعة المنتجات التقنية الإسرائيلية والداعمة لها وتوفير بدائلها. نرحب بالمساهمة في <a href="https://github.com/TheBSD/poykott" target="_blank" class="underline">مستودعنا على GitHub</a> أو ساهم على <a href="https://docs.google.com/forms/d/1PVEH20o5E80S4TFxWmIX_A_tIGEPmEF0D6vxHd9XEGA/edit" target="_blank" class="underline">Google Form</a>.
</p>
</div>
<!-- Search -->
<!-- <div class="min-w-0 flex-1 px-12 lg:hidden drop-shadow-xl">
<div class="mx-auto w-full max-w-xs">
<label for="desktop-search" class="sr-only">Search</label>
<div class="relative text-white focus-within:text-gray-600">
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pl-3">
<svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd"
d="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z"
clip-rule="evenodd" />
</svg>
</div>
<input id="desktop-search"
class="block w-full rounded-md border-0 bg-white/20 py-1.5 pl-10 pr-3 text-white placeholder:text-black focus:bg-white focus:text-black focus:ring-0 focus:placeholder:text-text-black sm:text-sm sm:leading-6"
placeholder="Search" type="search" name="search">
</div>
</div>
</div> -->
<div class="border-t border-white border-opacity-20 py-5 lg:block">
<!-- Header -->
<!-- <div class="mx-auto mb-10">
<h1 class="text-4xl font-bold tracking-tight text-gray-900 sm:text-6xl">قاطع المنتجات الاسرائيلية</h1>
<p class="mt-6 text-lg leading-8 text-gray-600">
هذا مشروع مفتوح المصدر مساهمة بسيطة منا للتوعية بالبدائل الجيدة لتقنيات إسرائيلية أو أمريكية تدعم الكيان المحتل، نرحبّ بأي مساهمات عبر المستودع في Github مثلًا.
</p>
</div> -->
<div x-data="dataHandler()" x-init="fetchData" class="space-y-6">
<div class="w-full">
<div>
<div class="mx-auto w-full drop-shadow-xl">
<label for="mobile-search" class="sr-only">البحث</label>
<div class="relative text-black focus-within:text-gray-600">
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
<svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd"
d="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z"
clip-rule="evenodd" />
</svg>
</div>
<!-- Search Bar -->
<input x-model="searchTerm" type="text" id="mobile-search"
class=" block w-full rounded-md border-0 bg-white py-4 rounded-lg pr-10 pl-3 text-black placeholder:text-black focus:border-2 border-black focus:text-black focus:outline-none sm:text-base sm:leading-6"
placeholder="اكتب اسم الشركة أو حروفا منها .." name="search">
</div>
</div>
</div>
</div>
<div class="grid grid-cols-1 items-start gap-4 lg:grid-cols-3 lg:gap-8">
<!-- List of Companies -->
<div class="grid grid-cols-1 gap-4 lg:col-span-2 order-2 md:order-1">
<section aria-labelledby="section-1-title">
<h2 class="sr-only" id="section-1-title">قائمة الشركات</h2>
<div class="overflow-hidden rounded-lg bg-white shadow">
<div class="p-6">
<ul
class="divide-y divide-gray-100 overflow-hidden bg-white shadow-sm ring-1 ring-gray-900/5 sm:rounded-xl">
<template x-for="company in filteredCompanies" :key="company.id">
<li @click="selectedCompany = company; scrollToResponsive()"
class="relative flex justify-between gap-x-6 px-4 py-5 hover:bg-gray-50 sm:px-6 cursor-pointer">
<div class="flex min-w-0 gap-x-4">
<!-- Start Image -->
<img :src="company.logo" alt="Company Logo"
class="h-12 w-12 flex-none rounded-full bg-gray-50 object-contain">
<!-- End Image -->
<div class="min-w-0 flex-auto">
<p class="text-sm font-semibold leading-6 text-gray-900">
<a href="#" x-text="company.name">
<span class="absolute inset-x-0 -top-px bottom-0"></span>
</a>
</p>
<p class="mt-1 flex text-xs leading-5 text-gray-500 truncate"
x-text="company.description"></p>
</div>
</div>
<div class="flex shrink-0 items-center gap-x-4">
<svg class="h-5 w-5 flex-none text-gray-400" xmlns="http://www.w3.org/2000/svg"
fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5">
</path>
</svg>
</div>
</li>
</template>
</ul>
</div>
</div>
</section>
</div>
<!-- Right Section -->
<div class="grid grid-cols-1 gap-4 md:order-2">
<section aria-labelledby="section-2-title">
<h2 class="sr-only" id="section-2-title">التفاصيل</h2>
<div class="overflow-hidden rounded-lg bg-white shadow">
<div class="p-6">
<div class="col-span-1 flex flex-col divide-y divide-gray-200 rounded-lg bg-white text-center">
<div class="flex flex-1 flex-col">
<template x-if="selectedCompany && selectedCompany.logo">
<img class="mx-auto h-32 flex-shrink-0" :src="selectedCompany.logo"
alt="Company Logo">
</template>
<h3 class="mt-6 text-sm font-medium text-gray-900"
x-text="selectedCompany ? selectedCompany.name : ''"></h3>
<p class="text-sm text-gray-500 mt-2"
x-text="selectedCompany ? selectedCompany.description : ''"></p>
<hr class="my-4">
<p class="text-sm font-medium text-gray-900">البدائل</p>
<hr class="my-4">
<template x-if="selectedCompany && selectedCompany.alternatives">
<!-- Alternatives Section -->
<ul>
<template x-for="alternative in selectedCompany.alternatives">
<li
class="group relative bg-white focus-within:ring-2 focus-within:ring-inset focus-within:ring-indigo-500">
<div class="mt-8">
<h3 class="text-base font-semibold leading-6 text-gray-900">
<a x-bind:href="alternative.link" target="_blank" class="focus:outline-none">
<span class="absolute inset-0" aria-hidden="true"></span>
<span x-text="alternative.name"></span>
</a>
</h3>
<p class="mt-2 text-sm text-gray-500" x-text="alternative.description"></p>
</div>
<span
class="pointer-events-none absolute left-6 top-0 text-gray-300 group-hover:text-gray-400"
aria-hidden="true">
<a href="" target="_blank">
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round"
d="M19.5 19.5l-15-15m0 0v11.25m0-11.25h11.25"></path>
</svg>
</a>
</span>
</li>
</template>
</ul>
</template>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
</div>
</div>
</header>
</div>
<script src="./libs/alpine.js" defer></script>
<script>
tailwind.config = {
theme: {
extend: {
fontFamily: {
'mainFont': ['Readex Pro', 'sans-serif'],
},
}
}
}
</script>
<script>
function dataHandler() {
return {
companiesAndServices: [],
searchTerm: '',
selectedCompany: null,
get filteredCompanies() {
if (!this.searchTerm) return this.companiesAndServices;
return this.companiesAndServices.filter(company => this.deepSearch(company, this.searchTerm));
},
fetchData() {
fetch('https://raw.githubusercontent.com/TheBSD/poykott/main/israel-companies-services.json')
.then(response => response.json())
.then(data => {
this.companiesAndServices = data.companiesAndServices;
this.selectedCompany = this.companiesAndServices[0]; // Initialize with the first company
});
},
deepSearch(obj, searchTerm) {
if (typeof obj === 'string') return obj.toLowerCase().includes(searchTerm.toLowerCase());
if (Array.isArray(obj)) return obj.some(element => this.deepSearch(element, searchTerm));
if (typeof obj === 'object' && obj !== null) {
for (let key in obj) {
if (this.deepSearch(obj[key], searchTerm)) return true;
}
}
return false;
},
scrollToResponsive(){
let scrollLimit;
const screenWidth = window.innerWidth;
if (screenWidth < 768) {
scrollLimit = 370; // mobile screens
} else if (screenWidth >= 768 && screenWidth < 1024) {
scrollLimit = 350; // tablets
} else {
scrollLimit = 300; // desktops
}
window.scrollTo({ top: scrollLimit, behavior: 'smooth' });
}
}
}
</script>
</body>
</html>