-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
1405 lines (1238 loc) · 69.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
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ayatica</title>
<link rel="icon" href="images/icon.png" type="image/x-icon">
<link rel="stylesheet" href="style.css">
<script src="https://d3js.org/d3.v7.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-cloud/1.2.5/d3.layout.cloud.min.js"></script>
<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=Edu+AU+VIC+WA+NT+Pre:[email protected]&family=Pacifico&display=swap"
rel="stylesheet">
<div class="nav-buttons">
<div class="dropdown">
<button class="dropbtn">Quran</button>
<div class="dropdown-content">
<a href="#quran-treemap">Treemap Search</a>
<a href="#to-name-a-few">Miracle Examples</a>
<a href="#word-cloud">Word Cloud</a>
<a href="#relief">Relief</a>
<a href="#numerical-patterns">Numerical Pattern Examples</a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Hadith</button>
<div class="dropdown-content">
<a href="#hadith-treemap-the">Treemap Search</a>
<a href="#hadith-examples">Miracle Examples</a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn" onclick="location.href='#about'">About</button>
</div>
</div>
</head>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-9FY2N06PLC"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', 'G-9FY2N06PLC');
</script>
<body>
<div class="loading-overlay" id="loading-screen">
<img src="images/mosque.gif" alt="Loading..." class="loading-icon">
<p class="arabic-loading">سَنُرِيهِمْ ءَايَـٰتِنَا فِى ٱلْـَٔافَاقِ وَفِىٓ أَنفُسِهِمْ حَتَّىٰ يَتَبَيَّنَ لَهُمْ
أَنَّهُ ٱلْحَقُّ ۗ أَوَلَمْ يَكْفِ بِرَبِّكَ أَنَّهُۥ عَلَىٰ كُلِّ شَىْءٍۢ شَهِيدٌ </p>
<p class="loading-translation">"We will show them Our signs in the universe and within themselves until it becomes
clear to them that this ˹Quran˺ is the truth. Is it not enough that your Lord is a Witness over all things?"</p>
</div>
<div id="logo" onclick="window.location.href='https://ymorsi.com';">
<img src="images/smiling.png" alt="YM Home">
<div class="tooltip">YM - Home</div>
</div>
<div class="intro-section">
<div id="bismillah">
<img src="images/bismillah.png" alt="Bismillah">
</div>
<h1 style="color: #03ac00; font-size: 2.2em; margin: 15px 0; text-align: center;">Are Ancient Islamic Texts Aligned
With
Modern Scientific Discoveries?</h1>
<!-- <center> -->
<div class="section-transition" style="margin-bottom: 10px;">
<p class="hook" style="padding-left: 100px; padding-right: 100px;">
<span style="color: #03ac00;"></span> The Quran and Hadith are foundational texts for almost 2 billion Muslims,
preserved meticulously for over 1400 years.<br><br>
<span style="color: #03ac00;"><strong>But:</strong></span> Many skeptics question how ancient religious texts
could contain any scientific value or accurate predictions about our modern understanding of the
universe.<br><br>
<span style="color: #03ac00;"><strong>Therefore:</strong></span> You'll be surprised to discover how these texts
<span class="highlight-discovery" style="transition: all 0.3s ease;">predicted the expansion of the universe,
described embryonic development stages, and revealed oceanic phenomena centuries before modern science could
verify them.</span>
</p>
</div>
<!-- </center> -->
</div>
<div class="section-transition step-section">
<h2>Step-By-Step</h2>
<p>We could spend thousands upon thousands of hours just exploring one of the individual texts we are looking at.
Let's go <span class="highlight-text">step-by-step</span>
before looking at the miracles of the Sahih Bukhari and Sahih Muslim hadith, and start off by analyzing
some miracles, linguistic patterns, and numerical patterns of <span class="highlight-text">the Quran</span>.
</p>
</div>
<div class="section-transition step-section" style="margin-top: 10px;margin-bottom: 10px;" id="quran-treemap">
<h2>Search for Miracles in the Quran</h2>
<p>The Quran contains numerous verses that describe scientific phenomena with remarkable accuracy, centuries before
their modern discovery. Use the interactive treemap below to explore these verses and more. You can search for
specific terms or filter to view scientific miracles specifically.</p>
<div style="display: flex; justify-content: center; gap: 20px; margin-top: 20px;">
<div id="search-container">
<input id="search-bar" type="text" placeholder="Search for a Quranic keyword (i.e., 'loves')" />
<button id="search-button">🔍</button>
</div>
<button id="filter-button" onclick="toggleScientificMiracles()">Show Examples of Scientific Miracles Only</button>
</div>
<center>
<div id="container" style="background-color: transparent;">
<div id="treemap" style="width: 58%;"></div>
<div style="width: 28%;">
<div id="verse-details">
<h3>Verse Details</h3>
<p>Pick a verse to view its details!</p>
</div>
</div>
</div>
</center>
</div>
</div>
<div class="section-transition step-section" style="margin-top: 10px; margin-bottom: 10px;" id="to-name-a-few">
<h2>To Name a Few...</h2>
<p>The above activity allowed for us to get a glimpse of the linguistic patterns, and even uncover some miracles on
our own. Note, the verses signifying miracles (colored in gold) were just some examples. Feel free to use the
treemap to find more! <br><br><b style="color:#03ac00;">Although the above activity provides plenty of insight
into some of the miracles of the Quran, let's take a closer look at some of the miracles in more detail...</b>
</new>
</p>
</div>
<section class="miracle-section">
<div class="verse-content">
<h2>Expansion of the Universe</h2>
<p class="arabic">وَالسَّمَاءَ بَنَيْنَاهَا بِأَيْيْدٍ وَإِنَّا لَمُوسِعُونَ</p>
<p><strong style="color:#03ac00;">Translation:</strong> "And the heaven We constructed with strength, and indeed,
We are [its] expander."
(Surah Adh-Dhariyat, 51:47)</p>
<p>This verse aligns with the modern understanding that the universe is expanding, a concept supported by
observations of distant galaxies moving away from us.</p>
<audio src="audio/expansion.mp3" controls></audio>
</div>
<div class="animation-container">
<div id="creation-burst-container">
<div id="creation-burst"></div>
</div>
</div>
<script>
const width = 400, height = 400;
const layers = [
{ name: "Earth", description: "The foundation of life" },
{ name: "Sky 1", description: "The first heaven" },
{ name: "Sky 2", description: "The second heaven" },
{ name: "Sky 3", description: "The third heaven" },
{ name: "Sky 4", description: "The fourth heaven" },
{ name: "Sky 5", description: "The fifth heaven" },
{ name: "Sky 6", description: "The sixth heaven" },
{ name: "Sky 7", description: "The seventh heaven" },
];
const tooltip = d3.select("#creation-burst-container")
.append("div")
.attr("class", "creation-tooltip")
.style("position", "absolute")
.style("pointer-events", "none");
const svg = d3.select("#creation-burst")
.append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", `translate(${width / 2}, ${height / 2})`);
const color = d3.scaleSequential(d3.interpolateCool).domain([0, layers.length]);
const maxRadius = 180;
function animateLayers() {
layers.forEach((layer, i) => {
svg.append("circle")
.attr("r", 0)
.attr("fill", color(i))
.attr("opacity", 0.6)
.attr("stroke", "#fff")
.attr("stroke-width", 1.5)
.on("mouseover", function (event) {
tooltip.style("opacity", 1)
.style("visibility", "visible")
.style("left", (event.pageX + 10) + "px")
.style("top", (event.pageY - 10) + "px")
.html(`<strong>${layer.name}</strong><br>${layer.description}`);
})
.on("mousemove", function (event) {
tooltip.style("left", (event.pageX + 10) + "px")
.style("top", (event.pageY - 10) + "px");
})
.on("mouseout", function () {
tooltip.style("opacity", 0)
.style("visibility", "hidden");
})
.transition()
.delay(i * 800)
.duration(4000)
.ease(d3.easeElasticOut)
.attr("r", maxRadius * (i + 1) / layers.length)
.attr("opacity", 0.3);
});
}
setInterval(() => {
svg.selectAll("circle").remove();
animateLayers();
}, 6000);
animateLayers();
</script>
</section>
<section class="miracle-section" style="display: flex; align-items: center; justify-content: space-between;">
<div class="animation-container"
style="flex: 1; display: flex; justify-content: center; align-items: center; padding: 20px;">
<div id="orbit-container" style="width: 400px; height: 400px;"></div>
</div>
<div class="verse-content" style="flex: 1; padding: 20px; text-align: left;">
<h2>Orbits of Celestial Bodies</h2>
<p class="arabic">وَهُوَ الَّذِي خَلَقَ اللَّيْلَ وَالنَّهَارَ وَالشَّمْسَ وَالْقَمَرَ ۖ كُلٌّ فِي فَلَكٍ
يَسْبَحُونَ</p>
<p><strong style="color:#03ac00;">Translation:</strong> "And it is He who created the night and the day and the
sun and the moon; all
[heavenly bodies] in an orbit are swimming." (Surah Al-Anbiya, 21:33)</p>
<p>This verse aligns with modern astronomy, which confirms that celestial bodies move in defined orbits.</p>
<audio src="audio/orbit.mp3" controls></audio>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script>
const container = document.getElementById("orbit-container");
const sceneWidth = container.offsetWidth;
const sceneHeight = container.offsetHeight;
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(60, sceneWidth / sceneHeight, 0.1, 1000);
camera.position.z = 10;
const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
renderer.setSize(sceneWidth, sceneHeight);
container.appendChild(renderer.domElement);
const sunGeometry = new THREE.SphereGeometry(0.6, 32, 32);
const sunMaterial = new THREE.MeshBasicMaterial({ color: 0xFFD700 });
const sun = new THREE.Mesh(sunGeometry, sunMaterial);
scene.add(sun);
const planets = [];
const orbitRadii = [1.5, 2.5, 3.5, 4.5, 5.5, 6.5];
const colors = [0x03ac00, 0x4a90e2, 0xe94e77, 0xFF5733, 0x9b59b6, 0x3498db];
orbitRadii.forEach((radius, index) => {
const planetGeometry = new THREE.SphereGeometry(0.2, 16, 16);
const planetMaterial = new THREE.MeshBasicMaterial({ color: colors[index] });
const planet = new THREE.Mesh(planetGeometry, planetMaterial);
planet.orbitRadius = radius;
planet.angle = Math.random() * Math.PI * 2;
scene.add(planet);
planets.push(planet);
});
const orbitTooltip = d3.select("body").append("div")
.attr("class", "creation-tooltip")
.style("opacity", 0);
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
planets.forEach((planet, index) => {
planet.angle += 0.01 * (index + 1);
planet.position.x = Math.cos(planet.angle) * planet.orbitRadius;
planet.position.y = Math.sin(planet.angle) * planet.orbitRadius;
});
}
container.addEventListener("mousemove", (event) => {
planets.forEach((planet, index) => {
const screenPos = planet.position.clone().project(camera);
const x = (screenPos.x * 0.5 + 0.5) * sceneWidth;
const y = (-screenPos.y * 0.5 + 0.5) * sceneHeight;
const distance = Math.hypot(event.clientX - x, event.clientY - y);
if (distance < 20) {
orbitTooltip.style("opacity", 1)
.style("left", `${event.pageX + 10}px`)
.style("top", `${event.pageY - 10}px`)
.html(`Planet ${index + 1} orbiting around`);
} else {
orbitTooltip.style("opacity", 0);
}
});
});
animate();
</script>
</section>
<section class="miracle-section">
<div class="verse-content">
<h2>Stages of Embryonic Development</h2>
<p class="arabic">
وَلَقَدْ خَلَقْنَا ٱلْإِنسَـٰنَ مِن سُلَـٰلَةٍۢ مِّن طِينٍۢ ١٢
ثُمَّ جَعَلْنَـٰهُ نُطْفَةًۭ فِى قَرَارٍۢ مَّكِينٍۢ ١٣
ثُمَّ خَلَقْنَا ٱلنُّطْفَةَ عَلَقَةًۭ فَخَلَقْنَا ٱلْعَلَقَةَ مُضْغَةًۭ فَخَلَقْنَا ٱلْمُضْغَةَ عِظَـٰمًۭا
فَكَسَوْنَا ٱلْعِظَـٰمَ لَحْمًۭا ثُمَّ أَنشَأْنَـٰهُ خَلْقًا ءَاخَرَ ۚ فَتَبَارَكَ ٱللَّهُ أَحْسَنُ
ٱلْخَـٰلِقِينَ ١٤
</p>
<p><strong style="color:#03ac00;">Translation:</strong> "And certainly did We create man from an extract of clay.
Then We placed him as a
sperm-drop in a firm lodging. Then We made the sperm-drop into a clinging clot, and We made the clot into a lump
[of flesh], and We made [from] the lump, bones, and We covered the bones with flesh; then We developed him into
another creation. So blessed is Allah , the best of creators." (Surah Al-Mu'minun, 23:12-14)</p>
<p>This verse describes the stages of human development in a way that aligns with modern embryology.</p>
<audio src="audio/emb.mp3" controls></audio>
</div>
<div class="animation-container">
<div id="embryonic-development-container">
<div id="embryonic-development"></div>
<div id="stage-label" style="text-align: center; color: white; margin-top: 10px; font-size: 1.2em;"></div>
</div>
</div>
<script>
const embryoSvg = d3.select("#embryonic-development")
.append("svg")
.attr("width", 500)
.attr("height", 500)
.append("g")
.attr("transform", "translate(200, 150)");
const stages = [
{ name: "Nutfah (Drop)", description: "The first cell, marking the beginning of life.", path: "M 50 50 a 20 20 0 1 0 40 0 a 20 20 0 1 0 -40 0 M 60 45 a 5 5 0 1 0 10 0 a 5 5 0 1 0 -10 0 M 70 55 a 4 4 0 1 0 8 0 a 4 4 0 1 0 -8 0 M 55 52 a 3 3 0 1 0 6 0 a 3 3 0 1 0 -6 0 M 65 58 a 4 4 0 1 0 8 0 a 4 4 0 1 0 -8 0", color: "#a1c4fd" },
{ name: "Alaqah (Clinging Substance)", description: "A stage resembling a leech or clinging substance.", path: "M 60 40 C 70 35, 90 35, 100 45 C 110 55, 110 65, 100 75 C 90 85, 70 85, 60 80 C 50 75, 45 65, 50 55 C 55 45, 60 40, 60 40 M 75 50 C 85 45, 95 45, 100 55 C 105 65, 100 75, 90 80 C 80 85, 70 80, 65 70 C 60 60, 65 55, 75 50 M 80 60 C 85 58, 90 58, 92 62 C 94 66, 92 70, 88 72 C 84 74, 80 72, 78 68 C 76 64, 77 62, 80 60", color: "#9b59b6" },
{ name: "Mudghah (Chewed Substance)", description: "Shape appears like a chewed lump, with notches.", path: "M 70 50 C 80 45, 100 45, 110 55 C 120 65, 120 85, 110 95 C 100 105, 80 105, 70 95 C 60 85, 60 65, 70 50 M 75 60 L 105 60 M 75 70 L 105 70 M 75 80 L 105 80 M 75 90 L 105 90 M 85 55 L 85 95 M 95 55 L 95 95", color: "#d35400" },
{ name: "Bone Formation", description: "Early bone structure forming a human shape.", path: "M 80 40 C 100 35, 120 40, 130 50 C 140 60, 140 80, 130 90 C 120 100, 100 105, 80 100 C 60 95, 50 80, 50 70 C 50 60, 60 45, 80 40 M 90 60 L 90 90 M 70 70 L 110 70 M 70 80 L 110 80 M 70 90 L 110 90 M 60 75 L 75 85 M 120 75 L 105 85", color: "#7f8c8d" },
{ name: "Clothing with Flesh", description: "The body is fleshed out, showing limb buds.", path: "M 80 30 C 100 25, 120 30, 130 40 C 140 50, 140 70, 130 85 C 120 100, 100 110, 80 105 C 60 100, 50 85, 50 70 C 50 55, 60 35, 80 30 M 85 55 C 95 50, 105 50, 115 60 M 85 70 C 95 65, 105 65, 115 75 M 85 85 C 95 80, 105 80, 115 90 M 60 65 C 65 60, 70 60, 75 65 M 125 65 C 120 60, 115 60, 110 65", color: "#f39c12" },
{ name: "Another Creation", description: "Resembles a basic human form with head, torso, and limbs.", path: "M 90 30 C 105 25, 120 28, 130 40 C 135 45, 138 55, 135 65 L 130 70 C 140 75, 145 85, 142 95 C 138 105, 130 110, 120 112 C 110 115, 100 114, 90 110 C 80 106, 72 100, 68 90 C 65 83, 64 75, 65 68 C 67 62, 70 58, 75 55 C 65 50, 60 40, 62 32 C 65 28, 75 25, 90 30 M 95 45 C 100 43, 105 43, 110 45 C 115 47, 118 50, 118 54 C 118 58, 115 61, 110 62 C 105 63, 100 62, 97 60 C 94 58, 93 55, 93 52 C 93 49, 94 46, 95 45 M 100 48 A 2 2 0 1 0 104 48 A 2 2 0 1 0 100 48 M 110 48 A 2 2 0 1 0 114 48 A 2 2 0 1 0 110 48 M 104 55 C 106 56, 108 56, 110 55 M 75 70 C 85 68, 95 70, 105 75 C 115 80, 122 87, 125 95 M 70 85 C 75 83, 80 84, 85 86 C 90 88, 93 92, 95 98 M 130 75 C 125 80, 122 85, 120 92 M 80 100 C 85 105, 90 108, 95 110 M 115 100 C 110 105, 105 108, 100 110", color: "#27ae60" }
];
let currentStageIndex = 0;
function animateStages() {
const stage = stages[currentStageIndex];
d3.select("#stage-label").text(stage.name);
embryoSvg.selectAll("path").remove();
embryoSvg.append("path")
.attr("d", stage.path)
.attr("fill", stage.color)
.attr("stroke", "#fff")
.attr("stroke-width", 2)
.attr("transform", "scale(0.6)")
.on("mouseover", function () {
embryoTooltip.style("opacity", 1)
.style("visibility", "visible")
.html(`<strong>${stage.name}</strong><br>${stage.description}`);
})
.on("mousemove", function (event) {
embryoTooltip.style("top", `${event.pageY - 20}px`)
.style("left", `${event.pageX + 10}px`);
})
.on("mouseout", function () {
embryoTooltip.style("opacity", 0)
.style("visibility", "hidden");
})
.transition()
.duration(50)
.ease(d3.easeElasticOut)
.attr("transform", "scale(1)");
currentStageIndex = (currentStageIndex + 1) % stages.length;
}
setInterval(() => {
embryoSvg.selectAll("path").remove();
animateStages();
}, 3000);
animateStages();
</script>
</section>
<section class="miracle-section">
<div style="display: flex; align-items: center; gap: 20px;">
<div class="animation-container" style="flex: 1;">
<img src="images/rome.png" alt="Roman Empire Animation" style="width: 100%; max-width: 400px;">
</div>
<div class="verse-content" style="flex: 1;">
<h2>The Romans' Victory</h2>
<p class="arabic">الٓمٓ ١ غُلِبَتِ ٱلرُّومُ ٢ فِىٓ أَدْنَى ٱلْأَرْضِ وَهُم مِّنۢ بَعْدِ غَلَبِهِمْ سَيَغْلِبُونَ
٣ فِى بِضْعِ سِنِينَ ۗ لِلَّهِ ٱلْأَمْرُ مِن قَبْلُ وَمِنۢ بَعْدُ ۚ وَيَوْمَئِذٍۢ يَفْرَحُ ٱلْمُؤْمِنُونَ ٤
بِنَصْرِ ٱللَّهِ ۚ يَنصُرُ مَن يَشَآءُ ۖ وَهُوَ ٱلْعَزِيزُ ٱلرَّحِيمُ ٥</p>
<p><strong style="color:#03ac00;">Translation:</strong> "Alif-Lãm-Mĩm. The Romans have been defeated in a nearby
land. Yet following their defeat, they will triumph within three to nine years. The ˹whole˺ matter rests with
Allah before and after ˹victory˺. And on that day the believers will rejoice at the victory willed by Allah.
He gives victory to whoever He wills. For He is the Almighty, Most Merciful." (Surah Ar-Rum (Romans), 30:1-5)
</p>
<p>There was a war between the Persians and Romans, and the Persians defeated the Romans (it was not even
close). They occupied their lands and besieged them at Constantinople. Persians at this time would worship the
sun and fire, and the Romans were people of the scripture, so naturally the Muslims were more inclined to
support them, while the polytheists of Makkah would support the Persians. When the news of the Persians' siege
of the Romans came to the Arabian Peninsula, the people of Mecca would gloat to the Muslims , which would
distress them. However, these Verses (Verses 1-5 of The Romans) were revealed depicting that the Romans will
rejoice at victory against the Persians. After just a few years the Romans defeated the Persians, manifesting
another miracle of the Quran.</p>
<p>The verses mention the place, "in the nearer land", which means the place where the battle took place. The
battle had actually taken place on the lowest point of the surface of the Earth. Additionally, concerning the
time, Allah's statement, "within three to nine years" clearly defined the time that the victory would take
place, and it actually took place approximately after nine years. In addition, the prophesied Roman victory
over the Persians coincided with the Muslim victory over the polytheists. <a style="color:#03ac00;">(Source:
The Unchallengeable
Miracles of the Quran, Yusuf Al-Hajj Ahmad)</a></p>
<audio src="audio/rum.mp3" controls></audio>
</div>
</div>
</section>
<section class="miracle-section">
<div class="verse-content">
<h2>Plant Reproduction</h2>
<p class="arabic">ٱلَّذِى جَعَلَ لَكُمُ ٱلْأَرْضَ مَهْدًۭا وَسَلَكَ لَكُمْ فِيهَا سُبُلًۭا وَأَنزَلَ مِنَ
ٱلسَّمَآءِ مَآءًۭ فَأَخْرَجْنَا بِهِۦٓ أَزْوَٰجًۭا مِّن نَّبَاتٍۢ شَتَّىٰ </p>
<p><strong style="color:#03ac00;">Translation:</strong> "˹He is the One˺ Who has laid out the earth for ˹all of˺
you, and set in it pathways for you, and sends down rain from the sky, causing various types of plants to
grow,." (Surah Ta-Ha, 20:53)</p>
<p>Here is the translation of the translation of zauj (plural azwaj) whose original meaning is: 'that which, in
the company of another, forms a pair'; the word is used just as readily for a married couple as for a pair of
shoes. This is describing how plants come in pairs, implying sexual plant reproduction, which was not something
that was known at the time of the Quran.</p>
<audio src="audio/plant.mp3" controls></audio>
</div>
<div class="animation-container" style="display: flex; align-items: center; justify-content: center; margin: auto;">
<img src="images/plants.gif" alt="Plant Growth Animation" style="height: 250px; margin: 0;">
</div>
</section>
<section class="miracle-section">
<div style="display: flex; align-items: center; gap: 20px;">
<div class="animation-container" style="flex: 1;">
<img src="images/clouds.gif" alt="Clouds" style="width: 100%; max-width: 400px;">
</div>
<div class="verse-content" style="flex: 1;">
<h2>Heavy Clouds</h2>
<p class="arabic">وَهُوَ ٱلَّذِى يُرْسِلُ ٱلرِّيَـٰحَ بُشْرًۢا بَيْنَ يَدَىْ رَحْمَتِهِۦ ۖ حَتَّىٰٓ إِذَآ
أَقَلَّتْ سَحَابًۭا ثِقَالًۭا سُقْنَـٰهُ لِبَلَدٍۢ مَّيِّتٍۢ فَأَنزَلْنَا بِهِ ٱلْمَآءَ فَأَخْرَجْنَا بِهِۦ
مِن كُلِّ ٱلثَّمَرَٰتِ ۚ كَذَٰلِكَ نُخْرِجُ ٱلْمَوْتَىٰ لَعَلَّكُمْ تَذَكَّرُونَ </p>
<p><strong style="color:#03ac00;">Translation:</strong> "He is the One Who sends the winds ushering in
His mercy. When they bear heavy clouds, We drive them to a lifeless land and then cause rain to fall,
producing every type of fruit. Similarly, We will bring the
dead to life, so perhaps you will be mindful." (Surah Al-A'raf (The Heights), 57)
</p>
<p>As you see, the Quran stated 1.400 years ago that clouds were not light at all and described them as "heavy
clouds". </p>
<p>What do scientists say regarding the issue? Are clouds really as heavy as the Quran states?</p>
<p>According to the research made in recent years, quite astonishing figures about the weight of clouds have
been found. For example, a cumulonimbus cloud, known as the thunder cloud, can contain up to 300.000 tons of
water. Yes, you did not misread it; we are mentioning clouds as heavy as 300.000 tons.</p>
<p>The fact that a mass of 300.000 tons is caused to stand in the sky without any support is something that
astonishes the mind. It is more interesting that this information is mentioned in the Quran.</p>
<p>The weight of the precipitation that covers an area of 50 kilometer square at a height of 1 centimeter is
about half a ton.</p>
<p>Now, let us think of this: At the time when the Qur'an was revealed, it was impossible for people to have
this information about the weight of clouds. Furthermore, we probably thought that clouds were very light
before we learned this fact. However, clouds weigh hundreds of thousands of tons and this fact is included in
the Quran. </p>
<p>How can it be doubted that the Quran is the word of Allah after hearing this information? If it is doubted,
how can the information given by the Quran be explained? </p>
<p>It cannot be explained in any way. There is only one explanation of the fact that the weight of clouds is
mentioned in the Quran: The Quran is the book of the Being, who stores thousands of tons of water in clouds.
This Being sends clouds to dry areas through winds and gives life to those areas. Yes, the Being who created
clouds
and makes clouds float in the air with thousands of tons of water also sent down the Quran. <a
href="https://questionsonislam.com/article/weight-clouds" style="color:#03ac00;">(Source:
Questions on Islam)</a></p>
<audio src="audio/clouds.mp3" controls></audio>
</div>
</div>
</section>
<div class="section-transition step-section" style="margin-top: 40px; margin-bottom: 10px;">
<h2>Uncovering Linguistic Patterns</h2>
<p>We've explored some of the remarkable scientific miracles in the Quran - from the expansion of the universe
to the intricacies of plant reproduction. But the miracles of the Quran extend beyond scientific phenomena
into its linguistic structure and recurring themes.</p>
<p>Let's shift our focus to analyze the <b style="color: #03ac00;">patterns and frequencies of words</b>
in the Quran's English translation. Through this interactive word cloud, we can discover which concepts
and themes appear most frequently, and explore how they connect across different chapters and verses.</p>
<p>You can adjust the word grouping size (n-gram) to find common phrases, and set minimum frequency
thresholds to focus on the most significant patterns. Click any word or phrase to see all verses where it appears.
</p>
</div>
<section class="miracle-section" id="word-cloud">
<div class="verse-content">
<h2>Quranic Word Cloud</h2>
<p>Explore the most common words in the Quran's English translation</p>
<div class="word-cloud-controls">
<label>
N-gram Size:
<input type="range" id="ngram-slider" min="1" max="7" value="1">
<span id="ngram-value">1</span>
</label>
<label>
Minimum Frequency:
<input type="range" id="freq-slider" min="2" max="50" value="5">
<span id="freq-value">5</span>
</label>
</div>
<div id="wordcloud-container"></div>
<div id="wordcloud-loader" class="wordcloud-loader" style="display: none;">
<div class="loader-spinner"></div>
<div class="loader-text">Updating Word Cloud...</div>
</div>
<div id="word-details">
<h3 style="color:#03ac00;">Word Details</h3>
<p>Click on a word to see verses containing it!</p>
</div>
</div>
</section>
<div class="section-transition step-section" style="margin-bottom: 10px;" id="relief">
<h2>For Times of Distress</h2>
<p>The Quran is full of chapters and verses for us to turn to in times of distress and anxiety. One such Surah is
<b style="color: #03ac00;">Surah Ad-Duha</b>, which was revealed to the Prophet Muhammad (ﷺ) when he was in a time
of distress.
</p>
</div>
<section class="miracle-section">
<div class="verse-content">
<h2>Surah Ad-Duha</h2>
<p class="arabic">وَالضُّحَىٰ ﴿1﴾ وَاللَّيْلِ إِذَا سَجَىٰ ﴿2﴾ مَا وَدَّعَكَ رَبُّكَ وَمَا قَلَىٰ ﴿3﴾
وَلَلْآخِرَةُ خَيْرٌ لَكَ مِنَ الْأُولَىٰ ﴿4﴾ وَلَسَوْفَ يُعْطِيكَ رَبُّكَ فَتَرْضَىٰ ﴿5﴾ أَلَمْ يَجِدْكَ
يَتِيمًا فَآوَىٰ ﴿6﴾ وَوَجَدَكَ ضَالًّا فَهَدَىٰ ﴿7﴾ وَوَجَدَكَ عَائِلًا فَأَغْنَىٰ ﴿8﴾ فَأَمَّا الْيَتِيمَ
فَلَا تَقْهَرْ ﴿9﴾ وَأَمَّا السَّائِلَ فَلَا تَنْهَرْ ﴿10﴾ وَأَمَّا بِنِعْمَةِ رَبِّكَ فَحَدِّثْ</p>
<p>In this Surah, Allah is directly communicating with the Prophet (ﷺ). This was an early Meccan Surah so it was
in the early stages of Prophethood where Muhammad (ﷺ) was under a lot of stress and anxiety. He experienced
mockery and
ridicule from his personal friends, clansmen, and neighbors
because they were not receptive to his message. During this time he also felt
that Allah had abandoned him. Allah knew better and was giving him a break since
if he "had continuously been exposed to the intensely bright light of Revelation
(Wahy) [his] nerves could not have endured it. Therefore, an interval was
given in order to afford [him] peace and tranquility.” Allah sent down this
Surah to comfort him and let him know he had not forgotten him. <a href="https://myislam.org/surah-ad-duha"
style="color:#03ac00;">(Source)</a></p>
<p>As a takeaway, we can find this Surah as a reminder for all of us that God is always with
us, and that we should not be discouraged by the hardships we face. No matter the hardship, we are reminded
that <strong style="color:#03ac00;">God has not left us</strong>, <strong style="color:#03ac00;">ease
will always succeed it</strong>. Many turn to this Surah in times of distress, and find comfort in its
meaning.
</p>
</div>
<div class="animation-container">
<div style="display: flex; justify-content: center; margin: 20px 0;">
<iframe width="560" height="315" src="https://www.youtube.com/embed/br2wCkrMUNw?si=Ke5ttZvhuy8UTKUH"
title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
referrerpolicy="strict-origin-when-cross-origin" allowfullscreen>
</iframe>
</div>
</div>
</section>
<div class="section-transition step-section" style="margin-bottom: 10px;" id="numerical-patterns">
<h2>Numerical Patterns</h2>
<p>The word cloud activity has given us a good idea of the linguistic patterns of the Quran, and even slowly
introduced us to some of the numerical patterns as well.
Before wrapping up our time exploring the Quran and move onto some Hadith, below are some examples of <b
style="color: #03ac00;">numerical patterns</b> in the Quran.</p>
</div>
<section class="miracle-section">
<div class="verse-content">
<h2>The Day Count Miracle</h2>
<p class="arabic">يَوْم</p>
<p><strong style="color:#03ac00;">Perfect Calendar Alignment:</strong> The word "day" (يَوْم/yawm) in its singular
form appears exactly 365 times in the Quran - matching precisely with the number of days in a solar year.</p>
<p>This remarkable correlation between the frequency of the word and the Earth's orbital period around the sun was
discovered only recently with computer analysis.</p>
</div>
<div class="animation-container">
<img src="images/sun.gif" alt="Day Count Pattern" style="width: 400px; height: 400px;">
</div>
</section>
<section class="miracle-section">
<div class="animation-container">
<img src="images/sea.gif" alt="Land Sea Ratio" style="width: 300px; height: 300px;">
</div>
<div class="verse-content">
<h2>The Land and Sea Ratio</h2>
<p class="arabic">بَحْر - بَرّ</p>
<p><strong style="color:#03ac00;">Geographic Precision:</strong> The word "sea" appears 32 times and "land"
appears 13 times. The ratio (32:45 or 71.11% sea to 28.89% land) exactly matches Earth's actual surface ratio of
water to land mass.</p>
<p>This precise ratio was only confirmed by satellite imagery and modern geographic measurements in recent
decades.</p>
</div>
</section>
<section class="miracle-section">
<div class="verse-content">
<h2>Life and Death Balance</h2>
<p class="arabic">حَيَاة - مَوْت</p>
<p><strong style="color:#03ac00;">Perfect Symmetry:</strong> The words "life" (حَيَا��) and "death" (مَوْت) each
appear exactly 145 times in the Quran, reflecting the universal truth that every life has its corresponding
death.</p>
<p>This equal frequency emphasizes the Quranic theme of life and death being two sides of the same coin.</p>
</div>
<div class="animation-container">
<img src="images/death.png" alt="Life Death Balance">
</div>
</section>
<section class="miracle-section">
<div class="animation-container">
<img src="images/gender.png" alt="Gender Equality" style="width: 300px; height: 300px;">
</div>
<div class="verse-content">
<h2>Gender Equality in Words</h2>
<p class="arabic">رَجُل - اِمْرَأَة</p>
<p><strong style="color:#03ac00;">Divine Balance:</strong> The word for "man" (رَجُل) and "woman" (اِمْرَأَة) each
appear exactly 24 times in the Quran, indicating equality in their spiritual status and religious obligations.
</p>
<p>This equal representation emphasizes the Quranic principle of spiritual equality between genders.</p>
</div>
</section>
<section class="miracle-section">
<div class="verse-content">
<h2>The Middle Verse Miracle</h2>
<p class="arabic">وَكَذَٰلِكَ جَعَلْنَاكُمْ أُمَّةً وَسَطًا</p>
<p><strong style="color:#03ac00;">Mathematical Precision:</strong> In Surah Al-Baqarah, which has 286 verses, the
exact middle verse (143) contains the word "middle" (وَسَطًا), declaring "Thus We have made you a middle
nation."</p>
<p>This perfect alignment of content and position creates a remarkable self-referential miracle.</p>
</div>
<div class="animation-container">
<img src="images/middle.png" alt="Middle Verse" style="width: 300px; height: 300px;">
</div>
</section>
<div class="section-transition step-section" style="margin-bottom: 10px;" id="hadith-treemap-the">
<h2>Time to Explore the Hadith!</h2>
<p>Now that we've done some exploration of the Quran, let's take a look through the <b
style="color: #03ac00;">hadith</b>,
more specifically the <b style="color: #03ac00;">Sahih Bukhari</b> and <b style="color: #03ac00;">Sahih
Muslim</b>.
A few examples of miracles in the hadith are boxes highlighted in gold.
</p>
</div>
<div class="hadith-section step-section">
<!-- <h1 >Interactive Hadith Treemaps</h1> -->
<div style="display: flex; justify-content: center; gap: 20px; margin-top: 20px;">
<div id="hadith-search-container" style="width: 50%;">
<input id="hadith-search-bar" type="text" placeholder="Search for a Hadith keyword (i.e., 'prayer')" />
<button id="hadith-search-button">🔍</button>
</div>
<button id="hadith-filter-button">Show Examples of Prophetic Wisdom</button>
</div>
<div class="loading-container" id="loadingScreen">
<div class="loading-spinner"></div>
<div class="loading-text">Loading Hadith Data...</div>
</div>
<div class="hadith-content" id="hadithContent">
<div class="main-container">
<div class="treemap-section">
<div class="treemap-container" id="bukhariTreemap"></div>
<div class="details-container" id="detailsBukhari">
<h2>Bukhari Hadith Details</h2>
<div class="details-content" id="hadithDetailsBukhari">Click on a hadith to view its details here.</div>
</div>
</div>
<div class="treemap-section">
<div class="treemap-container" id="muslimTreemap"></div>
<div class="details-container" id="detailsMuslim">
<h2>Muslim Hadith Details</h2>
<div class="details-content" id="hadithDetailsMuslim">Click on a hadith to view its details here.</div>
</div>
</div>
</div>
</div>
</div>
<div class="section-transition step-section" style="margin-top: 10px; margin-bottom: 10px;" id="hadith-examples">
<h2>To Name a Few More...</h2>
<p>The above activity allowed for us to get a glimpse of the linguistic patterns, and even uncover some miracles on
our own. Note, the verses signifying miracles (colored in gold) were just some examples. Feel free to use the
treemap to find more! <br><br><b style="color:#03ac00;">Although the above activity provides plenty of insight
into some of the miracles of the Quran, let's take a closer look at some of the miracles in more detail...</b>
</new>
</p>
</div>
<div class="tooltip" id="tooltip"></div>
<section class="miracle-section">
<div class="verse-content">
<h2>Fly Wings (Bukhari ID: 3187)</h2>
<p>Narrated Abu Huraira: The Prophet said "If a house fly falls in the drink of anyone of you, he should dip it
(in the drink), for one of its wings has a disease and the other has the cure for the disease."</p>
<p><strong style="color:#03ac00;">Evidently:</strong> The Prophet Muhammad (peace be upon him) mentioned that if a
fly falls into a drink, one wing carries disease while the other carries the cure. Modern research supports
this, indicating that certain microorganisms on fly wings produce antimicrobial substances. For instance, a
study published in the Journal of Nutritional Science and Vitaminology found that the right wing of the house
fly (Musca domestica) contains antimicrobial agents capable of neutralizing microbial contaminants in drinks.
</p>
</div>
<div class="animation-container" style="display: flex; align-items: center; justify-content: center;">
<img src="images/fly.gif" alt="Fly wings" style="width: 400px; height: 400px;">
</div>
</section>
<section class="miracle-section">
<div class="animation-container" style="display: flex; align-items: center; justify-content: center;">
<img src="images/moon.gif" alt="Moon" style="width: 300px; height: 300px;">
</div>
<div class="verse-content">
<h2>Splitting of the Moon (Muslim ID: 17142)</h2>
<p>Anas reported that the people of Mecca demanded from Allah's Messenger (may peace be upon him) that he should
show them (some) signs (miracles) and he showed tlicin the splitting of the moon. This hadlth has been narrated
on the authority of Anas through another chain of transmitters.</p>
<p><strong style="color:#03ac00;">Fun Fact: </strong> During the Meccan era, the Quraish infidels challenged
Prophet Muhammad (peace be upon him) to show a sign of his Prophethood, leading to the miraculous splitting of
the moon. This event is recorded in the Quran (54:1), where Allah states, "The hour drew nigh and the moon was
rent in twain." The miracle strengthened the faith of Muslims and left the disbelievers perplexed, dismissing it
as magic. Historical accounts, including an Indian manuscript preserved in the India Office Library, describe
King Chakrawati Farmas witnessing the event, traveling to meet the Prophet, embracing Islam, and later becoming
one of his Companions. Islamic references further preserve details of this Companion, known among the Arabs as
Sirbanak, highlighting his unique role in the Prophet's history.</p>
</div>
</section>
<section class="miracle-section">
<div class="verse-content">
<h2>Black Seeds (Muslim ID: 15812)</h2>
<p>Abu Huraira reported that he heard Allah's Messenger (may peace be upon him) as saying: Nigella seed is a
remedy for every disease except death. This hadith has been narrated through another chain of transmitters but
with a slight variation of wording.</p>
<p><strong style="color:#03ac00;">In Reality:</strong> The statement about the Nigella seed (black seed) being a
remedy for every disease except death is considered miraculous because it highlights the remarkable medicinal
properties of this small seed, which modern science has increasingly validated. Studies have shown that black
seed contains compounds with antimicrobial, anti-inflammatory, antioxidant, and immune-boosting effects, making
it beneficial for a wide range of health conditions. The foresight of such comprehensive therapeutic potential
over 1,400 years ago, in a time with limited medical knowledge, is seen by many as evidence of divine
inspiration.</p>
</div>
<div class="animation-container" style="display: flex; align-items: center; justify-content: center;">
<img src="images/blackSeed.png" alt="Black Seeds" style="width: 300px; height: 300px;">
</div>
</section>
<section class="miracle-section">
<div class="animation-container" style="display: flex; align-items: center; justify-content: center;">
<img src="images/earth.gif" alt="Earth" style="width: 300px; height: 300px;">
</div>
<div class="verse-content">
<h2>Signs of the End (Bukhari ID: 6983)</h2>
<p>Narrated Abu Huraira: Allah's Apostle said, "The Hour will not be established (1) till two big groups fight
each other whereupon there will be a great number of casualties on both sides and they will be following one and
the same religious doctrine, (2) till about thirty Dajjals (liars) appear, and each one of them will claim that
he is Allah's Apostle, (3) till the religious knowledge is taken away (by the death of Religious scholars) (4)
earthquakes will increase in number (5) time will pass quickly, (6) afflictions will appear, (7) Al-Harj, (i.e.,
killing) will increase, (8) till wealth will be in abundance ---- so abundant that a wealthy person will worry
lest nobody should accept his Zakat, and whenever he will present it to someone, that person (to whom it will be
offered) will say, 'I am not in need of it, (9) till the people compete with one another in constructing high
buildings, (10) till a man when passing by a grave of someone will say, 'Would that I were in his place (11) and
till the sun rises from the West. So when the sun will rise and the people will see it (rising from the West)
they will all believe (embrace Islam) but that will be the time when: (As Allah said,) 'No good will it do to a
soul to believe then, if it believed not before, nor earned good (by deeds of righteousness) through its Faith.'
(6.158) And the Hour will be established while two men spreading a garment in front of them but they will not be
able
to sell it, nor fold it up; and the Hour will be established when a man has milked his she-camel and has
taken away the milk but he will not be able to drink it; and the Hour will be established before a man repairing
a tank (for his livestock) is able to water (his animals) in it; and the Hour will be established when a person
has raised a morsel (of food) to his mouth but will not be able to eat it."</p>
<p><strong style="color:#03ac00;">Scarily Enough:</strong> Prophet Muhammad (peace be upon him) foretold events
that align strikingly with real-world developments, reflecting the miraculous nature of his prophecies. He
predicted the competition in constructing tall buildings, vividly seen in the modern race for skyscrapers,
particularly in the UAE with the Burj Khalifa. He spoke of large-scale wars between groups with similar
ideologies, such as the World Wars fought by nations often rooted in shared political or cultural ideologies.
The rise of false claimants to prophethood corresponds to numerous self-proclaimed messiahs in recent history.
The loss of authentic religious knowledge is evident in the fading influence of traditional scholarship amidst
misinformation. He also foretold increased seismic activity, aligning with documented rises in earthquake
occurrences. The prediction of wealth so abundant that people refuse charity is seen in wealthy nations where
basic needs are widely met, yet inequality persists. Finally, the accelerated pace of life resonates with the
global sense of time passing quickly in an era of rapid technological and social change. These fulfilled events
demonstrate the divine origin of these prophecies.</p>
</div>
</section>
<section class="miracle-section">
<div class="verse-content">
<h2>Honey As Medicine (Bukhari ID: 5546)</h2>
<p>Narrated Abu Sa`id Al-Khudri: A man came to the Prophet and said, "My brother has some Abdominal trouble." The
Prophet said to him "Let him drink honey." The man came for the second time and the Prophet said to him, 'Let
him drink honey." He came for the third time and the Prophet said, "Let him drink honey." He returned again and
said, "I have done that ' The Prophet then said, "Allah has said the truth, but your brother's `Abdomen has told
a lie. Let him drink honey." So he made him drink honey and he was cured.</p>
<p><strong style="color:#03ac00;">In Reality:</strong> The incident illustrates a miracle rooted in the Prophet
Muhammad's (peace be upon him) knowledge of honey's healing properties, which modern science has since
validated. Honey is now known to have antimicrobial, anti-inflammatory, and digestive health benefits due to
compounds like hydrogen peroxide, methylglyoxal, and natural enzymes. In this context, the Prophet's insistence
on honey as a remedy aligns with today's understanding of its ability to treat gastrointestinal issues, even
when its effects might not be immediately apparent. This prophetic insight, given over 1,400 years ago without
scientific tools, highlights a remarkable alignment with modern medical knowledge, affirming its miraculous
nature.</p>
</div>
<div class="animation-container" style="display: flex; align-items: center; justify-content: center;">
<img src="images/honey.gif" alt="Honey" style="width: 300px; height: 300px;">
</div>
</section>
<script>
document.addEventListener("DOMContentLoaded", () => {
const notableBukhariHadiths = [6030, 3187, 6983, 5633, 5583, 3488, 4664, 4668, 4669, 6959, 6983, 1010, 1009];
const notableMuslimHadiths = [16791, 15812, 16798, 17142, 16791, 15826, 15817, 15789, 15291, 15301];
let bukhariUpdate, muslimUpdate;
function createTreemap(data, container, detailsId, width, height) {
const root = d3.hierarchy(data).sum(d => d.value).sort((a, b) => b.value - a.value);
d3.treemap().size([width, height]).padding(1)(root);
const svg = d3.select(container)
.append("svg")
.attr("width", width)
.attr("height", height);
const g = svg.append("g");
const zoom = d3.zoom()
.scaleExtent([1, 8])
.on("zoom", (event) => {
g.attr("transform", event.transform);
});
svg.call(zoom);
const tooltip = d3.select("#tooltip");
const color = d3.scaleOrdinal().domain(root.children.map(d => d.data.name)).range(d3.schemeCategory10);
const notableHadiths = data.name === "Sahih Bukhari" ? notableBukhariHadiths : notableMuslimHadiths;
function displayDetails(d, detailsId) {
const detailsContainer = document.getElementById(detailsId);
if (d && d.data) {
const chapterName = d.parent.data.name;
const hadithText = d.data.text_en;
const hadithId = d.data.hadith_id;
const source = d.data.source;
detailsContainer.innerHTML = `
<h3>${source} - Chapter: ${chapterName}</h3>
<p><strong>Hadith ID:</strong> ${hadithId}</p>
<p><strong>Text:</strong> ${hadithText}</p>
`;
} else {
detailsContainer.innerHTML = "No data available for this hadith.";
}
}
function updateVisualization(filterParam) {
console.log("updateVisualization called with:", filterParam);
console.log("Data name:", data.name);
console.log("Notable hadiths:", notableHadiths);
g.selectAll("*").remove();
let leaves = root.leaves();
if (typeof filterParam === 'boolean') {
console.log("Boolean filter detected");
if (filterParam) {
leaves = leaves.filter(d => {
const isNotable = notableHadiths.includes(parseInt(d.data.hadith_id));
console.log("Checking hadith:", d.data.hadith_id, "isNotable:", isNotable);
return isNotable;
});
}
} else if (typeof filterParam === 'string' && filterParam) {
leaves = leaves.filter(d =>
d.data.text_en.toLowerCase().includes(filterParam.toLowerCase()) ||
d.parent.data.name.toLowerCase().includes(filterParam.toLowerCase())
);
}
g.selectAll("rect")
.data(leaves)
.enter()
.append("rect")
.attr("x", d => d.x0)
.attr("y", d => d.y0)
.attr("width", d => d.x1 - d.x0)
.attr("height", d => d.y1 - d.y0)
.style("fill", d => {
const isNotable = notableHadiths.includes(parseInt(d.data.hadith_id));
return isNotable ? 'gold' : color(d.parent.data.name);
})
.style("stroke", "#333")
.on("mouseover", (event, d) => {
tooltip.style("visibility", "visible")
.text(`Chapter: ${d.parent.data.name}`);
})
.on("mousemove", (event) => {
tooltip.style("top", `${event.pageY + 10}px`)
.style("left", `${event.pageX + 10}px`);
})
.on("mouseout", () => {
tooltip.style("visibility", "hidden");
})
.on("click", (event, d) => {
displayDetails(d, detailsId);
});
}
updateVisualization(false);
return updateVisualization;
}
const url = 'https://raw.githubusercontent.com/ymorsi7/ExplorableExplanation/refs/heads/main/data/hadith.json';
d3.json(url).then(data => {
const bukhariData = {
name: "Sahih Bukhari",
children: d3.groups(data.filter(d => d.source === "Sahih Bukhari"), d => d.chapter)
.map(([chapter, hadiths]) => ({
name: chapter,
children: hadiths.map(hadith => ({ ...hadith, value: 1 }))
}))
};
const muslimData = {
name: "Sahih Muslim",
children: d3.groups(data.filter(d => d.source === "Sahih Muslim"), d => d.chapter)
.map(([chapter, hadiths]) => ({
name: chapter,
children: hadiths.map(hadith => ({ ...hadith, value: 1 }))
}))
};
document.getElementById("loadingScreen").style.display = "none";
document.getElementById("hadithContent").style.display = "block";
bukhariUpdate = createTreemap(bukhariData, "#bukhariTreemap", "hadithDetailsBukhari", 600, 600);
muslimUpdate = createTreemap(muslimData, "#muslimTreemap", "hadithDetailsMuslim", 600, 600);
let showNotableOnly = false;
function toggleNotableHadiths() {
console.log("Toggle button clicked");
console.log("Current showNotableOnly:", showNotableOnly);
showNotableOnly = !showNotableOnly;
console.log("New showNotableOnly:", showNotableOnly);
document.getElementById("hadith-filter-button").textContent = showNotableOnly
? "Show All Hadiths"
: "Show Examples of Prophetic Wisdom";
if (bukhariUpdate) {
console.log("Calling bukhariUpdate with:", showNotableOnly);
bukhariUpdate(showNotableOnly);
}
if (muslimUpdate) {