iaucs · shirazidev · Jan 27, 2025 · Jan 27, 2025 · Jan 27, 2025 · Jan 27, 2025
diff --git a/images/iau-shiraz.png b/images/iau-shiraz.png
diff --git a/index.css b/index.css
@@ -1,3 +1,22 @@
+body {
+  direction: rtl;
+  font-family: "Vazirmatn", sans-serif;
+}
+@media (max-width: 768px) {
+  th,
+  td {
+    padding: 8px;
+    font-size: 12px;
+  }
+  .table-wrapper {
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+}
+table {
+  border: 2px solid white;
+  direction: rtl;
+}
 .dataTables_wrapper{
     height: 75vh;
     overflow: auto;
@@ -6,7 +25,7 @@ thead{
    top: 0;
 }
 tr:hover{
-    background-color: rgb(174 244 255) !important;
+    background-color: rgb(72, 72, 72) !important;
 }
 /* width */
 ::-webkit-scrollbar {

diff --git a/index.html b/index.html
@@ -8,65 +8,141 @@
     <meta name="author" content="Goudarz Jafari">
     <meta content="لیست دروس منتشر شده برای انتخاب واحد دانشگاه آزاد شیراز">
     <link rel="stylesheet" href="index.css"/>
-    <link rel="stylesheet" href="css/bootstrap.min.css">
-    <link rel="stylesheet" href="css/dataTables.bootstrap4.min.css">
+    <!-- <link rel="stylesheet" href="css/bootstrap.min.css">
+    <link rel="stylesheet" href="css/dataTables.bootstrap4.min.css"> -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link
+      href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;700&display=swap"
+      rel="stylesheet"
+    />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/js/all.min.js"></script>
+
     <link rel="apple-touch-icon" sizes="180x180" href="images//apple-touch-icon.png">
     <link rel="icon" type="image/png" sizes="32x32" href="images/favicon-32x32.png">
     <link rel="icon" type="image/png" sizes="16x16" href="images/favicon-16x16.png">
     <link rel="manifest" href="images/site.webmanifest">
 </head>
 <body>
-    <div class="container-fluid">
-        <main class="row">
-            <div class="col">
-                <section>
-                    <h1>لیست دروس انتخاب واحد</h1>
-                    <p>دروس ارائه شده ترم بهمن ۱۴۰۳ </p>
-                    <p> لیست دروس تخصصی و عمومی، کارشناسی ارشد (پیوسته - ناپیوسته) ، کارشناسی (پیوسته - ناپیوسته)، کاردانی (پیوسته - ناپیوسته)</p>
-                    <p> اولویت دیدن دروس در خود آموزشیار می‌باشد، این فایل فقط جنبه کمک در زمانی که دسترسی به آموزشیار راحت نباشد را دارد. (
-                        <b>
-                        تا ساعت ۲۳:۰۰ - ۵ بهمن ۱۴۰۳ لیست به روز شده
-                        </b>
-                        )
-                    </p>
-                </section>
-                <section id="table-container" class="table-responsive"></section>
-        </main>
-        <footer class="row">
-            <div class="col">
-                <hr>
-                <p class="text-right">پیاده‌سازی شده توسط 
-                    <a href="https://twitter.com/GoudarzJafari">گودرز جعفری</a></p>
+    <body class="bg-gray-900 text-gray-200 min-h-screen flex flex-col">
+        <header class="bg-blue-800 text-white py-4 shadow-md">
+          <div
+            class="container mx-auto flex flex-wrap items-center justify-between px-4"
+          >
+            <div class="flex items-center space-x-4 mb-2 sm:mb-0">
+              <img src="./images/iau-shiraz.png" alt="Logo" class="w-12 p-1" />
+              <h1 class="text-lg font-bold">
+                انجمن علمی کامپیوتر و هوش مصنوعی دانشگاه آزاد اسلامی واحد شیراز
+              </h1>
+            </div>
+          </div>
+        </header>
+
+        <main class="container mx-auto px-4 py-8 flex-grow">
+          <div class="text-center mb-8">
+            <h2 class="text-3xl font-bold">لیست دروس ارائه شده ترم بهمن ۱۴۰۳</h2>
+            <br />
+            <hr />
+            <br />
+            <span>آپدیت شده در ۵ بهمن ۱۴۰۳</span>
+            <br />
+            <span class="text-sm" style="direction: rtl;"
+              >اولویت دیدن دروس در خود آموزشیار می‌باشد، این صفحه فقط جنبه کمک در
+              زمانی که دسترسی به آموزشیار راحت نباشد را دارد.</span
+            >
+          </div>
+
+          <div
+            class="flex flex-wrap items-center justify-between mb-6 space-y-4 sm:space-y-0"
+          >
+            <div
+              class="flex flex-wrap w-full sm:w-auto items-center space-y-4 sm:space-y-0 sm:space-x-2 sm:space-x-reverse"
+            >
+              <input
+                type="text"
+                id="searchInputCode"
+                placeholder="جستجو"
+                class="border border-gray-700 rounded-lg py-2 px-4 w-full sm:w-64 bg-gray-800 text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-600 transition-all"
+              />
+              <a
+                href="/ghadim.html"
+                class="bg-blue-700 text-white px-5 py-2 rounded-lg shadow-md hover:bg-blue-800 hover:shadow-lg transition-all w-full sm:w-auto text-center"
+                title="کد درس جدید"
+              >
+                کد درس قبل از 1403
+              </a>
+              <a
+                href="/jadid.html"
+                class="bg-blue-700 text-white px-5 py-2 rounded-lg shadow-md hover:bg-blue-800 hover:shadow-lg transition-all w-full sm:w-auto text-center"
+                title="کد درس جدید"
+              >
+                کد درس 1403 به بعد
+              </a>
+              <a
+                href="./data/4032.json"
+                download
+                class="bg-green-700 text-white px-5 py-2 rounded-lg shadow-md hover:bg-green-800 hover:shadow-lg transition-all w-full sm:w-auto text-center"
+                title="دانلود آخرین تغییرات"
+              >
+                دانلود آخرین تغییرات
+              </a>
             </div>
+          </div>
+          <div class="mt-4 bg-blue-700 text-white rounded" id="resultSummary"></div>
+          <div
+            class="table-wrapper overflow-x-auto overflow-y-auto max-h-screen"
+            style="max-height: 500px"
+          >
+            <table
+              class="min-w-full border-collapse border border-gray-700 shadow-sm rounded-lg"
+            >
+              <thead class="bg-blue-900 sticky top-0 z-10">
+                <tr id="tableHeaders"></tr>
+              </thead>
+              <tbody id="courseTable">
+                <tr>
+                  <td colspan="15" class="text-center text-gray-500">
+                    در حال بارگذاری...
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+
+          <div class="flex justify-center mt-6 space-x-2" id="paginationControls">
+            <button
+              id="prevButton"
+              class="px-4 py-2 bg-blue-600 text-white rounded"
+            >
+              صفحه قبل
+            </button>
+            <span
+              id="pageInfo"
+              class="px-4 py-2 bg-blue-600 text-white rounded"
+            ></span>
+            <button
+              id="nextButton"
+              class="px-4 py-2 bg-blue-600 text-white rounded"
+            >
+              صفحه بعد
+            </button>
+          </div>
+        </main>
+
+        <footer class="bg-gray-800 text-gray-300 py-4 w-full">
+          <div class="container mx-auto px-4 text-center">
+            <span>توسعه داده شده توسط </span>
+            <a
+              href="tg://resolve?domain=shziaucesa"
+              target="_blank"
+              class="text-blue-500 hover:text-blue-400 transition-all"
+            >
+              انجمن علمی کامپیوتر
+            </a>
+            <span>(امیرحسین شیرازی ، گودرز جعفری و سیروس صالحی)</span>
+          </div>
         </footer>
-    </div>
-    <script src="js/jquery-3.3.1.min.js"></script>
-    <script src="js/bootstrap.bundle.min.js"></script>
-    <script src="js/jquery.csv.min.js"></script>
-    <script src="js/jquery.dataTables.min.js"></script>
-    <script src="js/dataTables.bootstrap4.min.js"></script>
-    <script src="js/csv_to_html_table.js"></script>
-    <script>
-        function format_link(link) {
-            if (link)
-                return "<a href='" + link + "' target='_blank'>" + link + "</a>";
-            else return "";
-        }
-        CsvToHtmlTable.init({
-            csv_path: "data/4032.csv",
-            element: "table-container",
-            allow_download: true,
-            csv_options: {
-                separator: ",",
-                delimiter: '"'
-            },
-            datatables_options: {
-                paging: false
-            },
-            custom_formatting: [
-                [4, format_link]
-            ]
-        });
-    </script>
-</body>
+
+        <script src="./js/scripts.js"></script>
+      </body>
+
 </html>
diff --git a/js/scripts.js b/js/scripts.js
@@ -0,0 +1,156 @@
+document.addEventListener("DOMContentLoaded", () => {
+    const jsonDataUrl = "/json/4032.json";
+    let jsonData = [];
+    const pageSize = 20;
+    let currentPage = 1;
+    let filteredData = [];
+
+    const fetchData = async () => {
+      try {
+        const response = await fetch(jsonDataUrl);
+        if (!response.ok) {
+          throw new Error("Failed to fetch data");
+        }
+        jsonData = await response.json();
+        filteredData = jsonData;
+        initializeTable(jsonData);
+      } catch (error) {
+        console.error(error);
+        alert("Error loading data.");
+      }
+    };
+
+    const generateHeaders = (data) => {
+      const headersRow = document.getElementById("tableHeaders");
+      headersRow.innerHTML = "";
+      const headers = Object.keys(data[0]);
+      headers.forEach((header) => {
+        const th = document.createElement("th");
+        th.classList.add(
+          "border",
+          "border-gray-700",
+          "px-4",
+          "py-3",
+          "text-gray-300"
+        );
+        th.textContent = header;
+        headersRow.appendChild(th);
+      });
+    };
+
+    const populateTable = (data) => {
+      const tableBody = document.getElementById("courseTable");
+      tableBody.innerHTML = "";
+      data.forEach((course, index) => {
+        const row = document.createElement("tr");
+        Object.entries(course).forEach(([key, value]) => {
+          const td = document.createElement("td");
+          td.classList.add("border", "border-gray-700", "px-4", "py-3");
+          if (key === "كد ارائه کلاس درس") {
+            td.innerHTML = `
+              <span id="courseCode-${index}">${value}</span>
+              <button onclick="copyCourseCode('courseCode-${index}')" class="ml-2 text-blue-500 hover:text-blue-700">
+                <i class="fas fa-copy"></i>
+              </button>
+            `;
+          } else {
+            td.textContent = value || "-";
+          }
+          row.appendChild(td);
+        });
+        tableBody.appendChild(row);
+      });
+    };
+
+    const searchInputCode = document.getElementById("searchInputCode");
+
+    const updateTable = () => {
+      const searchTermCode = searchInputCode.value.trim().toLowerCase();
+      if (searchTermCode === "") {
+        filteredData = jsonData;
+      } else {
+        filteredData = jsonData.filter((course) => {
+          return Object.values(course).some(
+            (value) =>
+              value &&
+              value.toString().toLowerCase().includes(searchTermCode)
+          );
+        });
+      }
+      currentPage = 1;
+      const paginatedData = paginateData(filteredData);
+      populateTable(paginatedData);
+      updatePaginationControls(filteredData);
+      updateResultSummary(filteredData);
+    };
+
+    const paginateData = (data) => {
+      const start = (currentPage - 1) * pageSize;
+      const end = start + pageSize;
+      return data.slice(start, end);
+    };
+
+    const updatePaginationControls = (data) => {
+      const totalPages = Math.ceil(data.length / pageSize);
+      const pageInfo = document.getElementById("pageInfo");
+      const prevButton = document.getElementById("prevButton");
+      const nextButton = document.getElementById("nextButton");
+
+      pageInfo.textContent = `صفحه ${currentPage} از ${totalPages}`;
+      prevButton.disabled = currentPage === 1;
+      nextButton.disabled = currentPage === totalPages;
+    };
+
+    const updateResultSummary = (data) => {
+      const resultSummary = document.getElementById("resultSummary");
+      const start = (currentPage - 1) * pageSize + 1;
+      const end = Math.min(currentPage * pageSize, data.length);
+      resultSummary.textContent = `در حال نمایش ${start} تا ${end} از ${data.length} ورودی «فیلتر شده از تمام ${jsonData.length} ورودی»`;
+    };
+
+    const initializeTable = (jsonData) => {
+      generateHeaders(jsonData);
+      const paginatedData = paginateData(jsonData);
+      populateTable(paginatedData);
+      updatePaginationControls(jsonData);
+      updateResultSummary(jsonData);
+    };
+
+    document.getElementById("prevButton").addEventListener("click", () => {
+      if (currentPage > 1) {
+        currentPage--;
+        const paginatedData = paginateData(filteredData);
+        populateTable(paginatedData);
+        updatePaginationControls(filteredData);
+        updateResultSummary(filteredData);
+      }
+    });
+
+    document.getElementById("nextButton").addEventListener("click", () => {
+      const totalPages = Math.ceil(filteredData.length / pageSize);
+      if (currentPage < totalPages) {
+        currentPage++;
+        const paginatedData = paginateData(filteredData);
+        populateTable(paginatedData);
+        updatePaginationControls(filteredData);
+        updateResultSummary(filteredData);
+      }
+    });
+
+    searchInputCode.addEventListener("input", updateTable);
+
+    fetchData();
+  });
+
+  function copyCourseCode(elementId) {
+    const courseCodeElement = document.getElementById(elementId);
+    const courseCode = courseCodeElement.textContent;
+    navigator.clipboard
+      .writeText(courseCode)
+      .then(() => {
+        alert("کد ارائه درس کپی شد: " + courseCode);
+      })
+      .catch((err) => {
+        console.error("Failed to copy text: ", err);
+      });
+  }
diff --git a/json/4032.json b/json/4032.json