Skip to content

Commit deb6b65

Browse files
maamounhajnajeebmaamounhajnajeeb
committed
after adding final data
1 parent fb17ac4 commit deb6b65

File tree

4 files changed

+101
-45
lines changed

4 files changed

+101
-45
lines changed

‎gifs/masjd_alaqsa.gif‎

1.09 MB
Loading

‎index.html‎

Lines changed: 35 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -6,54 +6,44 @@
66
<link rel="stylesheet" href="./styles/index.css">
77
<link rel="stylesheet" href="https://fonts.xz.style/serve/inter.css">
88
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@exampledev/new.css@1.1.2/new.min.css">
9-
<title>Syrian Poycott</title>
9+
<title>Poycott</title>
1010
</head>
1111
<body>
12-
الأمور المستثناه من المقاطعة
13-
حليب أطفال أي مياه لا
14-
من أين نأتي بالبدائل
15-
لن أقوم بعرض بدائل تجنبا للدعاية سوريا بلد غني غذائياً
16-
كيف نعرف أنه يجب مقاطعة هذه الشركات أو غيرها
17-
دليل أنه يجب مقاطعة هذه الشركات
18-
<div class="flex-container">
19-
<div class="flex-item">
20-
<img src="./images/doritos.png" width="100px" height="100px">
21-
<p>شاي ليبتون</p>
22-
<p>lipton tea</p>
23-
</div>
24-
<div class="flex-item">
25-
<img src="./images/lipton_tea.png" width="100px" height="100px">
26-
<p>شاي ليبتون</p>
27-
<p>lipton tea</p>
28-
</div>
29-
<div class="flex-item">
30-
<img src="./images/quaker.jpg" width="100px" height="100px">
31-
<p>شاي ليبتون</p>
32-
<p>lipton tea</p>
33-
</div>
34-
<div class="flex-item">
35-
<img src="./images/nescafe.png" width="100px" height="100px">
36-
<p>شاي ليبتون</p>
37-
<p>lipton tea</p>
38-
</div>
39-
<!-- <div class="flex-item">Item 2</div>
40-
<div class="flex-item">Item 3</div> -->
12+
<details class="right-align">
13+
<summary>كيف نتأكد من الشركات والمنتجات التي يجب مقاطعتها؟</summary>
14+
<p>يمكنكم البحث بسهولة ضمن الموقع <a href="https://masjidalaqsa.com/israeli-product-checker-boycott-list">التالي</a></p>
15+
<img src="gifs/masjd_alaqsa.gif" alt="Protest animation" class="gif-style">
16+
</details>
17+
<details class="right-align">
18+
<summary>ماهي البدائل؟</summary>
19+
<p>لن يتم ذكر أسماء بضائع بديلة تجنباً للدعاية, سوريا بلد غني غذائياً فيه الكثير من الخيرات وفيها العديد العديد من البدائل المميزة</p>
20+
</details>
21+
<details class="right-align">
22+
<summary>هل هناك أمور مستثناة من المقاطعة؟</summary>
23+
<p>لسنا بصدد التشريع هنا ولسنا بصدد إصدار الفتاوى بالتحليل أو التحريم, بشكل عام قاطع مادام الأمر ممكناً</p>
24+
<p>مثال 1: يمكننا التخلي عن بعض أنواع الشوكولا والمياه المعبأة للشركات التي تدعم الاحتلال والسوق مليء بالبضائع المحلية التي تغطي هذا الأمر و تزيد أيضاً</p>
25+
<p>مثال 2: حليب الأطفال, ربما يكون تغيير حليب الأطفال أمر صعب بالنسبة للأطفال الرضع و قد يؤدي للمرض وهذه ضرورة <span class="imp">(ضرورة حقيقية)</span> ربما تصعب المقاطعة معها</p>
26+
<p>فَاتَّقُوا اللَّهَ مَا اسْتَطَعْتُمْ</p>
27+
</details>
28+
<details class="right-align">
29+
<summary>كيفية المساهمة والدعم؟</summary>
30+
<p>بالنسبة للمطورين الذين يريدون المساهمة في المشروع هناك عدة أمور يجب أخذها بعين الاعتبار:</p>
31+
<ul>
32+
<li>إضافة البضائع المنتشرة في سوريا والابتعاد عما هو غير منتشر, الغاية التركيز على الأكثر انتشاراً و كي لا يتشتت الناس ببضائع ربما لا يرونها أبداً</li>
33+
<li>ضرورة الالتزام بالدليل القطعي على أن هذه الشركة تدعم الاحتلال (لسنا هنا للافتراء على أحد) ويكون ذلك من خلال تضمين رابط الوثيقة كما هو موضع</li>
34+
<li>اختيار صورة مناسبة (يفضل أن تكون مربعة الشكل)</li>
35+
</ul>
36+
<a href="https://github.com/maamounhajnajeeb/goods.boycott">رابط المشروع</a>
37+
</details>
38+
<details class="right-align">
39+
<summary>مواقع شبية</summary>
40+
<p>موقع <a href="https://boycott.yaqiin.org/">يقين</a></p>
41+
</details>
42+
<div class="flex-container" id="flex-container">
43+
4144
</div>
42-
<!-- <h1>Hello, world</h1>
43-
<blockquote>
44-
Hello, world!
45-
</blockquote>
46-
<blockquote>
47-
<p>Hello, world!</p>
48-
<button>Click me!</button>
49-
</blockquote>
50-
<ul>
51-
<li>Hello, world!</li>
52-
<li>
53-
<p>Line 1</p>
54-
<img src="https://example.com/image.png">
55-
</li>
56-
</ul> -->
45+
5746
<script src="scripts/main.js"></script>
47+
5848
</body>
5949
</html>

‎scripts/main.js‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
// let myReq = new XMLHttpRequest();
2+
// myReq.open("GET", "../data/data.json")
3+
// myReq.send()
4+
5+
// console.log(myReq.responseText);
6+
7+
// Fetch data from JSON file
8+
async function loadBoycottData() {
9+
try {
10+
const response = await fetch('../data/data.json');
11+
if (!response.ok) {
12+
throw new Error('Network response was not ok');
13+
}
14+
const data = await response.json();
15+
displayBoycottList(data.boycottList);
16+
} catch (error) {
17+
console.error('Error loading boycott data:', error);
18+
document.getElementById('flex-container').innerHTML =
19+
'<p class="error">Failed to load boycott list. Please try again later.</p>';
20+
}
21+
}
22+
23+
// Display data in HTML
24+
function displayBoycottList(items) {
25+
const container = document.getElementById('flex-container');
26+
27+
container.innerHTML = items.map(item => `
28+
<div class="flex-item">
29+
<img src="${item["image"]}" width="100px" height="100px">
30+
<p>${item["en_brand_name"]}</p>
31+
<p>${item["ar_brand_name"]}</p>
32+
</div>
33+
`).join('');
34+
35+
// for (let item of items) {
36+
// let childDiv = document.createElement("div");
37+
38+
// let image = document.createElement("img");
39+
// image.src = item["title"];
40+
41+
// let p1 = document.createElement("p");
42+
// p1.innerText = item["id"];
43+
44+
// let p2 = document.createElement("p");
45+
// p2.innerText = item["author"];
46+
47+
// let p3 = document.createElement("p");
48+
// p3.innerText = item["category"];
49+
50+
// childDiv.append(h2, p1, p2, p3);
51+
52+
// parentDiv.appendChild(childDiv);
53+
// }
54+
}
55+
56+
// Load data when page loads
57+
document.addEventListener('DOMContentLoaded', loadBoycottData);

‎styles/index.css‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,3 +17,12 @@
1717
border: 1px solid grey; /* Red border on hover (symbolizing boycott) */
1818
box-shadow: 0 0 8px rgba(255, 0, 0, 0.2); /* Glow effect */
1919
}
20+
21+
.right-align {
22+
text-align: right;
23+
}
24+
25+
.imp {
26+
color: red;
27+
background-color: white;
28+
}

0 commit comments

Comments
 (0)