Muzari app.

hasanbahadirkoca · Oct 10, 2023 · 3ec982c · 3ec982c
1 parent 4f4d079
commit 3ec982c
Show file tree

Hide file tree

Showing 4 changed files with 326 additions and 0 deletions.
diff --git a/public/hafiz/muzari/font.ttf b/public/hafiz/muzari/font.ttf
diff --git a/public/hafiz/muzari/index.html b/public/hafiz/muzari/index.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <title>Örnek Tablo</title>
+    <link rel="stylesheet" type="text/css" href="styles.css">
+</head>
+
+<body>
+
+    <div class="container">
+        <div class="counter-container">
+            <span id="counter">Kelime 1 / 20</span>
+        </div>
+        <div class="table-container">
+            <table id="veriTablosu">
+                <thead>
+                    <tr>
+                        <th>Cemi</th>
+                        <th>Tesniye</th>
+                        <th>Müfret</th>
+                        <th></th>
+                    </tr>
+                </thead>
+                <tbody>
+                </tbody>
+            </table>
+        </div>
+        <div class="button-container">
+            <button id="geri" disabled>Geri</button>
+            <button id="ileri">İleri</button>
+        </div>
+    </div>
+
+    <script src="script.js"></script>
+
+</body>
+
+</html>
diff --git a/public/hafiz/muzari/script.js b/public/hafiz/muzari/script.js
@@ -0,0 +1,155 @@
+// Kelimeler
+let words = [
+  "كْتُبُ",
+  "عْلَمُ",
+  "نْصُرُ",
+  "دْخُلُ",
+  "خْرُجُ",
+  "ذْهَبُ",
+  "شْرَبُ",
+  "أْكُلُ",
+  "شْهَدُ",
+  "عْمَلُ",
+  "ذْكُرُ",
+  "سْجُدُ",
+  "جْعَلُ",
+  "عْبُدُ",
+  "كْفُرُ",
+  "فْعَلُ",
+  "غْفِرُ",
+  "نْظُرُ",
+  "حْكُمُ",
+  "مْلِكُ",
+];
+
+
+// Kelimeleri rastgele karıştır
+function shuffleArray(array) {
+  for (let i = array.length - 1; i > 0; i--) {
+      const j = Math.floor(Math.random() * (i + 1));
+      [array[i], array[j]] = [array[j], array[i]];
+  }
+  return array;
+}
+words = shuffleArray(words)
+
+let currentWordIndex = 0;
+const rowDescriptions = ["Gaib", "Gaibe", "Muhatab", "Muhataba", "Mütekellim"];
+
+function displayCurrentWord() {
+  triggerFadeAnimation();
+
+  setTimeout(() => {
+    const word = words[currentWordIndex];
+    const data = Array.from({ length: 5 }, (_, i) =>
+      Array.from({ length: 3 }, (_, j) => generateModifiedWord(i, j, word))
+    );
+    document.querySelector("#veriTablosu tbody").innerHTML = "";
+    populateTable(data, rowDescriptions);
+
+    document.querySelector("#ileri").disabled =
+      currentWordIndex === words.length - 1;
+    document.querySelector("#geri").disabled = currentWordIndex === 0;
+    updateCounter();
+  }, 300);
+}
+
+document.querySelector("#ileri").addEventListener("click", function () {
+  if (currentWordIndex < words.length - 1) {
+    currentWordIndex++;
+  }
+  displayCurrentWord();
+});
+
+document.querySelector("#geri").addEventListener("click", function () {
+  if (currentWordIndex > 0) {
+    currentWordIndex--;
+  }
+  displayCurrentWord();
+});
+
+// İlk kelimeyi göster
+displayCurrentWord();
+document.querySelector("#geri").disabled = true; // İlk başta geri butonunu devre dışı bırak.
+
+// Verilen kelimeyi uygun bir şekilde dönüştürür.
+function generateModifiedWord(i, j, word) {
+  let prefix = "";
+  let modifiedword = word;
+  let suffix = "";
+
+  if (i === 4 && j === 1) {
+    return "";
+  }
+
+  prefix = determinePrefix(i, j);
+  suffix = determineSuffix(i, j);
+
+  if (suffix) {
+    modifiedword = word.slice(0, -1);
+  }
+
+  return prefix + modifiedword + suffix;
+}
+
+// İlgili ön eki belirler.
+function determinePrefix(i, j) {
+  if (i === 0 || (i === 1 && j === 2)) return "يَ";
+  if (i === 4 && j === 0) return "أَ";
+  if (i === 4 && j === 2) return "نَ";
+  return "تَ";
+}
+
+// İlgili son eki belirler.
+function determineSuffix(i, j) {
+  if (j === 1) return "َ" + "انِ";
+  if ((j === 2 && i === 0) || (j === 2 && i === 2)) return "ُ" + "ونَ";
+  if ((j === 2 && i === 1) || (j === 2 && i === 3)) return "ْنَ";
+  if (j === 0 && i === 3) return "ِينَ";
+  return "";
+}
+
+// HTML tablosunu oluşturur.
+function populateTable(data, descriptions) {
+  const tableBody = document.querySelector("#veriTablosu tbody");
+
+  data.forEach((row, index) => {
+    const tableRow = document.createElement("tr");
+    row.reverse().forEach((cell, i) => {
+      const cellElement = document.createElement("td");
+      if (!(index === 0 && i === 2) && !(index === 4 && i === 1)) {
+        cellElement.innerText = "?";
+        cellElement.addEventListener("click", function () {
+          this.innerText = cell;
+        });
+      } else {
+        cellElement.innerText = cell;
+      }
+      tableRow.appendChild(cellElement);
+    });
+
+    const descCell = document.createElement("td");
+    descCell.innerText = descriptions[index];
+    tableRow.appendChild(descCell);
+
+    tableBody.appendChild(tableRow);
+  });
+}
+
+// Animasyonu tetikler.
+function triggerFadeAnimation() {
+  const tableContainer = document.querySelector(".container");
+  tableContainer.classList.add("fade-animation");
+  document.querySelector("#ileri").disabled = true; // İlk başta ileri butonunu devre dışı bırak.
+  document.querySelector("#geri").disabled = true; // İlk başta geri butonunu devre dışı bırak.
+
+  setTimeout(() => {
+    tableContainer.classList.remove("fade-animation");
+  }, 1000);
+}
+
+
+// Kelime numarasını göster
+function updateCounter() {
+  document.getElementById("counter").innerText = `${currentWordIndex + 1} / ${words.length}`;
+}
diff --git a/public/hafiz/muzari/styles.css b/public/hafiz/muzari/styles.css
@@ -0,0 +1,132 @@
+@font-face {
+  font-family: "TraditionalArabicRegular";
+  src: url("font.ttf") format("truetype");
+}
+
+body {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  height: 100vh;
+  margin: 0;
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+table {
+  border-collapse: collapse;
+  border: none;
+}
+
+th,
+td {
+  border-left: 1px solid black;
+  border-bottom: 1px solid black;
+  padding: 10px;
+  width: 120px;
+  height: 30px;
+  text-align: right;
+  color: red;
+  text-align: center;
+}
+
+td {
+  font-family: "TraditionalArabicRegular", Arial, sans-serif;
+  text-align: center;
+  font-size: 40px;
+}
+
+th,
+td:last-child {
+  width: auto;
+  height: auto;
+  color: blue;
+  font-size: 15px;
+  font-weight: lighter;
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+td:last-child {
+  text-align: left;
+}
+
+th:first-child,
+td:first-child {
+  border-left: none;
+}
+
+tr:last-child td {
+  border-bottom: none;
+}
+
+/** DEV **/
+
+/* ...Mevcut CSS kodlarınız... */
+
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin: 20px;
+}
+
+.table-container {
+  overflow-x: auto;
+}
+
+.button-container {
+  display: flex;
+  justify-content: center;
+  margin-top: 20px;
+  width: 100%;
+}
+
+button {
+  margin: 5px 10px;
+  padding: 10px 20px;
+  font-size: 16px;
+  border: none;
+  background-color: #ddd;
+  color: black;
+  transition: background-color 0.3s ease;
+  cursor: pointer;
+}
+
+button:hover {
+  background-color: #ccc;
+}
+
+button:disabled {
+  background-color: #ccc;
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.fade-animation {
+  animation-name: fadeoutin;
+  animation-duration: 600ms;
+  animation-timing-function: ease;
+}
+
+@keyframes fadeoutin {
+  0% {
+    opacity: 1;
+  }
+  25% {
+    opacity: 0;
+  }
+  75% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+
+.counter-container {
+  margin-bottom: 30px;
+  text-align: center;
+  font-size: 1.2em;
+  color: #333;
+}