Codestin Search App

918 lines (818 loc) · 30.5 KB
<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Phân Tích Trạng Thái URL</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
    <style>
      .file-upload {
        position: relative;
        display: inline-block;
      .file-upload input[type="file"] {
        position: absolute;
        left: 0;
        top: 0;
        opacity: 0;
        width: 100%;
        height: 100%;
        cursor: pointer;
      .chart-container {
        position: relative;
        height: 300px;
        width: 100%;
      .url-item:hover {
        transform: translateX(5px);
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
      .dark-mode {
        background-color: #1a202c;
        color: #f7fafc;
      .dark-mode .card {
        background-color: #2d3748;
        border-color: #4a5568;
      .dark-mode .url-item {
        background-color: #2d3748;
        border-color: #4a5568;
      .dark-mode .url-item:hover {
        background-color: #4a5568;
      .transition-all {
        transition: all 0.3s ease;
      .dropzone {
        border: 2px dashed #cbd5e0;
        border-radius: 0.5rem;
        padding: 2rem;
        text-align: center;
        cursor: pointer;
        transition: all 0.3s;
      .dropzone:hover,
      .dropzone.dragover {
        border-color: #6366f1;
        background-color: #f0f4ff;
      .dropzone.dark-mode:hover,
      .dropzone.dark-mode.dragover {
        border-color: #818cf8;
        background-color: #2d3748;
      .progress-bar {
        height: 6px;
        background-color: #e5e7eb;
        border-radius: 3px;
        overflow: hidden;
        margin-top: 10px;
      .progress-bar-fill {
        height: 100%;
        background-color: #4f46e5;
        transition: width 0.3s ease;
      .debug-info {
        background-color: #f8fafc;
        border: 1px solid #e2e8f0;
        border-radius: 0.5rem;
        padding: 1rem;
        margin-top: 1rem;
        font-family: monospace;
        font-size: 0.875rem;
        overflow-x: auto;
      .debug-info.dark-mode {
        background-color: #2d3748;
        border-color: #4a5568;
        color: #f7fafc;
      .spinner {
        animation: spin 1s linear infinite;
      @keyframes spin {
          transform: rotate(0deg);
          transform: rotate(360deg);
      .tooltip {
        position: relative;
        display: inline-block;
      .tooltip .tooltip-text {
        visibility: hidden;
        width: 200px;
        background-color: #555;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 5px;
        position: absolute;
        z-index: 1;
        bottom: 125%;
        left: 50%;
        margin-left: -100px;
        opacity: 0;
        transition: opacity 0.3s;
      .tooltip:hover .tooltip-text {
        visibility: visible;
        opacity: 1;
    </style>
  <body class="bg-gray-100 min-h-screen transition-colors duration-300">
    <div class="container mx-auto px-4 py-8 max-w-4xl">
      <!-- Header -->
      <header class="text-center mb-10">
          class="text-3xl md:text-4xl font-bold text-indigo-700 mb-2 dark:text-indigo-400"
          Phân Tích Trạng Thái URL
        </h1>
        <p class="text-gray-600 text-lg dark:text-gray-300">
          Tải lên file JSON để xem trạng thái các liên kết
        </p>
        <button
          id="darkModeToggle"
          class="mt-4 px-4 py-2 bg-gray-800 text-white rounded-lg hover:bg-gray-700 transition-all dark:bg-gray-600 dark:hover:bg-gray-500"
          <i class="fas fa-moon mr-2"></i>Chế độ tối
        </button>
      </header>
      <!-- Upload File Section -->
        class="bg-white rounded-lg shadow-md p-6 mb-8 card transition-all dark:bg-gray-800 dark:border-gray-700"
        <div
          class="flex flex-col md:flex-row items-center justify-between gap-4"
          <div class="w-full md:w-2/3">
            <h2 class="text-xl font-semibold mb-2 dark:text-gray-200">
              Tải lên file JSON
            </h2>
            <p class="text-gray-600 mb-4 dark:text-gray-400">
              Chọn file JSON chứa dữ liệu URL và mã trạng thái HTTP
            </p>
            <div id="dropzone" class="dropzone mb-4 dark:border-gray-600">
              <div class="flex flex-col items-center justify-center">
                  class="fas fa-cloud-upload-alt text-4xl text-indigo-500 mb-3 dark:text-indigo-400"
                ></i>
                <p class="mb-2 font-medium dark:text-gray-300">
                  Kéo thả file JSON vào đây hoặc
                <div class="file-upload tooltip">
                  <button
                    class="bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-2 px-4 rounded-lg transition-all dark:bg-indigo-700 dark:hover:bg-indigo-600"
                    <i class="fas fa-upload mr-2"></i>Chọn file
                  </button>
                  <span class="tooltip-text"
                    >File JSON định dạng: {"url1": 200, "url2": 404}</span
                  <input
                    id="fileInput"
                    type="file"
                    accept=".json"
                    class="hidden"
                </div>
              </div>
            </div>
            <div id="fileInfo" class="hidden">
              <div
                class="flex items-center justify-between bg-gray-50 p-3 rounded-lg dark:bg-gray-700"
                <div class="flex items-center">
                    class="fas fa-file-alt text-indigo-500 mr-3 dark:text-indigo-400"
                  ></i>
                  <div>
                    <p id="fileName" class="font-medium dark:text-gray-300"></p>
                      id="fileSize"
                      class="text-sm text-gray-500 dark:text-gray-400"
                  </div>
                </div>
                <button
                  id="removeFile"
                  class="text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300"
                  <i class="fas fa-times"></i>
                </button>
              </div>
              <div
                id="progressBar"
                class="progress-bar hidden dark:bg-gray-600"
                  id="progressBarFill"
                  class="progress-bar-fill"
                  style="width: 0%"
                ></div>
              </div>
              <div id="loadingSpinner" class="hidden text-center py-4">
                  class="fas fa-circle-notch fa-spin text-2xl text-indigo-500 dark:text-indigo-400 spinner"
                ></i>
                <p class="mt-2 text-gray-600 dark:text-gray-400">
                  Đang xử lý file...
              </div>
            </div>
          </div>
          <div class="w-full md:w-1/3">
            <div
              class="flex items-center bg-blue-50 border border-blue-200 rounded-lg p-3 dark:bg-blue-900 dark:border-blue-800"
              <div class="bg-blue-100 p-2 rounded-full mr-3 dark:bg-blue-800">
                  class="fas fa-info-circle text-blue-600 dark:text-blue-400"
                ></i>
              </div>
              <p class="text-sm text-blue-800 dark:text-blue-200">
                File JSON cần có định dạng:
                <code class="bg-blue-100 px-1 rounded dark:bg-blue-800"
                  >{"url1": 200, "url2": 404}</code
              </p>
            </div>
          </div>
        </div>
        <div
          id="errorMessage"
          class="mt-4 p-3 bg-red-50 text-red-600 rounded-lg hidden dark:bg-red-900 dark:text-red-200"
        ></div>
        <div id="debugInfo" class="debug-info hidden"></div>
      </div>
      <!-- Main Content -->
      <div id="content" class="hidden">
        <div class="flex flex-col lg:flex-row gap-8">
          <!-- Chart Section -->
          <div
            class="w-full lg:w-1/2 bg-white rounded-lg shadow-md p-6 card transition-all dark:bg-gray-800 dark:border-gray-700"
            <div class="flex justify-between items-center mb-4">
              <h2 class="text-xl font-semibold dark:text-gray-200">
                Phân bổ trạng thái HTTP
              </h2>
              <div class="relative tooltip">
                <select
                  id="statusFilter"
                  class="appearance-none bg-gray-100 border border-gray-300 rounded-lg py-1 px-3 pr-8 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200"
                  <option value="all">Tất cả trạng thái</option>
                </select>
                  class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700 dark:text-gray-300"
                  <i class="fas fa-chevron-down text-xs"></i>
                </div>
                <span class="tooltip-text">Lọc theo mã trạng thái</span>
              </div>
            </div>
            <div class="chart-container">
              <canvas id="statusChart"></canvas>
            </div>
            <div
              class="mt-4 grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-2"
              id="chartLegend"
            ></div>
              class="text-xs text-gray-500 mt-2 text-center dark:text-gray-400"
              Nhấp vào phần biểu đồ hoặc chú thích để xem danh sách URL
            </p>
          </div>
          <!-- URL List Section -->
          <div class="w-full lg:w-1/2">
            <div
              class="bg-white rounded-lg shadow-md p-6 card transition-all h-full dark:bg-gray-800 dark:border-gray-700"
              <div class="flex justify-between items-center mb-4">
                <h2 class="text-xl font-semibold dark:text-gray-200">
                  Danh sách URL
                  class="text-sm text-gray-500 dark:text-gray-400"
                  id="selectedStatusInfo"
                  Chọn một phần từ biểu đồ để xem chi tiết
                </div>
              </div>
              <div class="overflow-y-auto max-h-96" id="urlListContainer">
                <div class="text-center py-10 text-gray-500 dark:text-gray-400">
                  <i class="fas fa-chart-pie text-4xl mb-3 text-indigo-300"></i>
                  <p>Không có dữ liệu để hiển thị</p>
                  <p class="text-sm">Vui lòng tải lên file JSON</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    <script>
      // DOM Elements
      const fileInput = document.getElementById("fileInput");
      const fileName = document.getElementById("fileName");
      const fileSize = document.getElementById("fileSize");
      const fileInfo = document.getElementById("fileInfo");
      const dropzone = document.getElementById("dropzone");
      const removeFile = document.getElementById("removeFile");
      const progressBar = document.getElementById("progressBar");
      const progressBarFill = document.getElementById("progressBarFill");
      const loadingSpinner = document.getElementById("loadingSpinner");
      const errorMessage = document.getElementById("errorMessage");
      const debugInfo = document.getElementById("debugInfo");
      const content = document.getElementById("content");
      const statusFilter = document.getElementById("statusFilter");
      const urlListContainer = document.getElementById("urlListContainer");
      const selectedStatusInfo = document.getElementById("selectedStatusInfo");
      const darkModeToggle = document.getElementById("darkModeToggle");
      // Global variables
      let statusChart;
      let statusData = {};
      let currentFilter = "all";
      let currentSelectedStatus = null;
      let isDarkMode = false;
      // Initialize dark mode from localStorage
      if (localStorage.getItem("darkMode") === "true") {
        toggleDarkMode();
      // Event Listeners
      fileInput.addEventListener("change", handleFileUpload);
      removeFile.addEventListener("click", resetFileInput);
      statusFilter.addEventListener("change", handleFilterChange);
      darkModeToggle.addEventListener("click", toggleDarkMode);
      // Drag and drop events
      dropzone.addEventListener("dragover", (e) => {
        e.preventDefault();
        e.stopPropagation();
        dropzone.classList.add("dragover");
      dropzone.addEventListener("dragleave", (e) => {
        e.preventDefault();
        e.stopPropagation();
        dropzone.classList.remove("dragover");
      dropzone.addEventListener("drop", (e) => {
        e.preventDefault();
        e.stopPropagation();
        dropzone.classList.remove("dragover");
        if (e.dataTransfer.files.length) {
          fileInput.files = e.dataTransfer.files;
          handleFileUpload({
            target: fileInput,
          });
      // Functions
      function handleFileUpload(event) {
        const file = event.target.files[0];
        if (!file) return;
        // Check file type
        if (!file.name.endsWith(".json")) {
          showError("Vui lòng chọn file có định dạng JSON (.json)");
          return;
        // Update file info display
        fileName.textContent = file.name;
        fileSize.textContent = formatFileSize(file.size);
        fileInfo.classList.remove("hidden");
        dropzone.classList.add("hidden");
        // Show progress bar and loading spinner
        progressBar.classList.remove("hidden");
        progressBarFill.style.width = "0%";
        loadingSpinner.classList.remove("hidden");
        // Clear previous debug info
        debugInfo.classList.add("hidden");
        debugInfo.textContent = "";
        // Process the file
        processUploadedFile(file);
      function processUploadedFile(file) {
        const reader = new FileReader();
        reader.onloadstart = function () {
          progressBarFill.style.width = "10%";
        reader.onprogress = function (e) {
          if (e.lengthComputable) {
            const percentLoaded = Math.round((e.loaded / e.total) * 100);
            progressBarFill.style.width = `${percentLoaded}%`;
        reader.onload = function (e) {
          try {
            progressBarFill.style.width = "100%";
            // Debug: Show raw file content
            debugInfo.textContent = `Nội dung file:\n${e.target.result.substring(
            )}${e.target.result.length > 1000 ? "..." : ""}`;
            debugInfo.classList.remove("hidden");
            const data = JSON.parse(e.target.result);
            // Debug: Show parsed JSON
            debugInfo.textContent += `\n\nDữ liệu đã phân tích:\n${JSON.stringify(
              data,
              null,
            ).substring(0, 1000)}${
              JSON.stringify(data).length > 1000 ? "..." : ""
            // Validate JSON structure
            if (typeof data !== "object" || Array.isArray(data)) {
              throw new Error(
                "Cấu trúc JSON không hợp lệ. Dữ liệu phải là một đối tượng (object)"
            // Check if it's a valid URL-status mapping
            let hasValidData = false;
            let invalidEntries = [];
            for (const [key, value] of Object.entries(data)) {
              if (typeof value === "number") {
                hasValidData = true;
              } else {
                invalidEntries.push(`"${key}": ${JSON.stringify(value)}`);
            if (invalidEntries.length > 0) {
              debugInfo.textContent += `\n\nCác mục không hợp lệ:\n${invalidEntries.join(
              )}`;
            if (!hasValidData) {
              throw new Error(
                "Không tìm thấy dữ liệu hợp lệ trong file. Mỗi URL cần có một mã trạng thái số."
            processData(data);
            renderChart();
            content.classList.remove("hidden");
            errorMessage.classList.add("hidden");
            // Hide loading elements after a delay
            setTimeout(() => {
              progressBar.classList.add("hidden");
              loadingSpinner.classList.add("hidden");
          } catch (error) {
            showError(`Lỗi khi xử lý file: ${error.message}`);
            console.error(error);
            resetFileInput();
        reader.onerror = function () {
          showError("Đã xảy ra lỗi khi đọc file. Vui lòng thử lại.");
          resetFileInput();
        reader.readAsText(file);
      function resetFileInput() {
        fileInput.value = "";
        fileInfo.classList.add("hidden");
        dropzone.classList.remove("hidden");
        content.classList.add("hidden");
        errorMessage.classList.add("hidden");
        progressBar.classList.add("hidden");
        loadingSpinner.classList.add("hidden");
        debugInfo.classList.add("hidden");
        // Reset chart if exists
        if (statusChart) {
          statusChart.destroy();
          statusChart = null;
        // Reset data
        statusData = {};
        currentFilter = "all";
        currentSelectedStatus = null;
        // Reset UI
        urlListContainer.innerHTML = `
                <div class="text-center py-10 text-gray-500 dark:text-gray-400">
                    <i class="fas fa-chart-pie text-4xl mb-3 text-indigo-300"></i>
                    <p>Không có dữ liệu để hiển thị</p>
                    <p class="text-sm">Vui lòng tải lên file JSON</p>
                </div>
        selectedStatusInfo.textContent =
          "Chọn một phần từ biểu đồ để xem chi tiết";
      function formatFileSize(bytes) {
        if (bytes === 0) return "0 Bytes";
        const k = 1024;
        const sizes = ["Bytes", "KB", "MB", "GB"];
        const i = Math.floor(Math.log(bytes) / Math.log(k));
        return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];
      function processData(data) {
        statusData = {};
        // Group URLs by status code
        for (const [url, status] of Object.entries(data)) {
          if (typeof status === "number") {
            if (!statusData[status]) {
              statusData[status] = [];
            statusData[status].push(url);
        // Sort status codes numerically
        const sortedStatuses = Object.keys(statusData).sort((a, b) => a - b);
        const sortedData = {};
        sortedStatuses.forEach((status) => {
          sortedData[status] = statusData[status];
        });
        statusData = sortedData;
        // Debug: Show processed data
        debugInfo.textContent += `\n\nDữ liệu đã xử lý:\n${JSON.stringify(
          statusData,
          null,
        )}`;
        // Update filter dropdown
        updateStatusFilter();
      function updateStatusFilter() {
        statusFilter.innerHTML =
          '<option value="all">Tất cả trạng thái</option>';
        for (const status in statusData) {
          const option = document.createElement("option");
          option.value = status;
          option.textContent = `${status} (${statusData[status].length} URLs)`;
          statusFilter.appendChild(option);
      function renderChart() {
        const ctx = document.getElementById("statusChart").getContext("2d");
        // Prepare chart data based on current filter
        let labels = [];
        let data = [];
        let backgroundColors = [];
        let hoverBackgroundColors = [];
        for (const [status, urls] of Object.entries(statusData)) {
          if (currentFilter === "all" || currentFilter === status) {
            labels.push(status);
            data.push(urls.length);
            const color = getStatusColor(status);
            backgroundColors.push(color);
            hoverBackgroundColors.push(lightenColor(color, 20));
        // Debug: Show chart data
        debugInfo.textContent += `\n\nDữ liệu biểu đồ:\nLabels: ${labels.join(
          ", "
        )}\nData: ${data.join(", ")}`;
        // Check if we have data to display
        if (data.length === 0) {
          debugInfo.textContent +=
            "\n\nCảnh báo: Không có dữ liệu hợp lệ để hiển thị biểu đồ";
          showError("Không có dữ liệu hợp lệ để hiển thị biểu đồ");
          return;
        // Destroy previous chart if exists
        if (statusChart) {
          statusChart.destroy();
        // Create new chart
        statusChart = new Chart(ctx, {
          type: "pie",
          data: {
            labels: labels,
            datasets: [
                data: data,
                backgroundColor: backgroundColors,
                hoverBackgroundColor: hoverBackgroundColors,
                borderWidth: 1,
                borderColor: isDarkMode ? "#4a5568" : "#e2e8f0",
                hoverBorderWidth: 2,
                hoverBorderColor: isDarkMode ? "#718096" : "#cbd5e0",
          options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
              legend: {
                display: false,
              tooltip: {
                callbacks: {
                  label: function (context) {
                    const label = context.label || "";
                    const value = context.raw || 0;
                    const total = context.dataset.data.reduce(
                      (a, b) => a + b,
                    const percentage = Math.round((value / total) * 100);
                    return `${label}: ${value} URLs (${percentage}%)`;
                  afterLabel: function (context) {
                    return "Nhấp để xem danh sách URL";
                bodyFont: {
                  size: 14,
                titleFont: {
                  size: 16,
                  weight: "bold",
            onClick: handleChartClick,
            onHover: (event, chartElements) => {
              if (chartElements.length > 0) {
                event.native.target.style.cursor = "pointer";
              } else {
                event.native.target.style.cursor = "default";
        });
        // Update chart legend
        updateChartLegend();
      function lightenColor(color, percent) {
        const num = parseInt(color.replace("#", ""), 16);
        const amt = Math.round(2.55 * percent);
        const R = (num >> 16) + amt;
        const G = ((num >> 8) & 0x00ff) + amt;
        const B = (num & 0x0000ff) + amt;
        return (
          "#" +
            (R < 255 ? (R < 1 ? 0 : R) : 255) * 0x10000 +
            (G < 255 ? (G < 1 ? 0 : G) : 255) * 0x100 +
            (B < 255 ? (B < 1 ? 0 : B) : 255)
            .toString(16)
            .slice(1)
      function updateChartLegend() {
        const legendContainer = document.getElementById("chartLegend");
        legendContainer.innerHTML = "";
        for (const [status, urls] of Object.entries(statusData)) {
          if (currentFilter === "all" || currentFilter === status) {
            const legendItem = document.createElement("div");
            legendItem.className =
              "flex items-center cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700 p-1 rounded tooltip";
            legendItem.innerHTML = `
                        <span class="inline-block w-3 h-3 rounded-full mr-2" style="background-color: ${getStatusColor(
                        )}"></span>
                        <span class="text-sm dark:text-gray-300">${status}: ${
              urls.length
            }</span>
                        <span class="tooltip-text">Nhấp để xem ${
                          urls.length
                        } URL có mã ${status}</span>
            legendItem.addEventListener("click", () => {
              showUrlsForStatus(status);
            legendContainer.appendChild(legendItem);
      function handleChartClick(event, elements) {
        if (elements.length > 0) {
          const index = elements[0].index;
          const status = statusChart.data.labels[index];
          showUrlsForStatus(status);
      function showUrlsForStatus(status) {
        currentSelectedStatus = status;
        // Update selected status info
        selectedStatusInfo.innerHTML = `
                <span class="inline-block w-3 h-3 rounded-full mr-1" style="background-color: ${getStatusColor(
                  status
                )}"></span>
                <span class="font-medium dark:text-gray-200">${status}</span>: ${
          statusData[status].length
        } URLs
        // Render URL list
        urlListContainer.innerHTML = "";
        statusData[status].forEach((url) => {
          const urlItem = document.createElement("div");
          urlItem.className =
            "mb-2 p-3 rounded-lg border border-gray-200 hover:bg-gray-50 cursor-pointer transition-all url-item dark:border-gray-600 dark:hover:bg-gray-700";
          urlItem.innerHTML = `
                    <div class="flex items-center justify-between">
                        <div class="truncate">
                            <a href="${url}" target="_blank" class="text-blue-600 hover:underline mr-2 dark:text-blue-400 truncate">${url}</a>
                        <span class="px-2 py-1 text-xs rounded-full whitespace-nowrap" style="background-color: ${getStatusColor(
                        )}; color: white">${status}</span>
                    </div>
          urlListContainer.appendChild(urlItem);
        });
      function handleFilterChange(event) {
        currentFilter = event.target.value;
        renderChart();
        // Clear selected status if it doesn't match the filter
        if (
          currentSelectedStatus &&
          currentFilter !== "all" &&
          currentFilter !== currentSelectedStatus
          currentSelectedStatus = null;
          selectedStatusInfo.textContent =
            "Chọn một phần từ biểu đồ để xem chi tiết";
          urlListContainer.innerHTML = `
                    <div class="text-center py-10 text-gray-500 dark:text-gray-400">
                        <i class="fas fa-chart-pie text-4xl mb-3 text-indigo-300"></i>
                        <p>Không có dữ liệu để hiển thị</p>
                        <p class="text-sm">Vui lòng chọn một phần từ biểu đồ</p>
                    </div>
      function showError(message) {
        errorMessage.textContent = message;
        errorMessage.classList.remove("hidden");
        content.classList.add("hidden");
        progressBar.classList.add("hidden");
        loadingSpinner.classList.add("hidden");
      function getStatusColor(status) {
        const statusCode = parseInt(status);
        if (statusCode >= 200 && statusCode < 300) {
          return "#10B981"; // Green for 2xx
        } else if (statusCode >= 300 && statusCode < 400) {
          return "#3B82F6"; // Blue for 3xx
        } else if (statusCode >= 400 && statusCode < 500) {
          return statusCode === 404 ? "#EF4444" : "#F59E0B"; // Red for 404, Yellow for other 4xx
        } else if (statusCode >= 500) {
          return "#EF4444"; // Red for 5xx
        return "#8B5CF6"; // Default purple
      function toggleDarkMode() {
        isDarkMode = !isDarkMode;
        document.body.classList.toggle("dark-mode");
        debugInfo.classList.toggle("dark-mode");
        if (isDarkMode) {
          darkModeToggle.innerHTML =
            '<i class="fas fa-sun mr-2"></i>Chế độ sáng';
          localStorage.setItem("darkMode", "true");
        } else {
          darkModeToggle.innerHTML =
            '<i class="fas fa-moon mr-2"></i>Chế độ tối';
          localStorage.setItem("darkMode", "false");
        // Re-render chart with dark mode colors if it exists
        if (statusChart) {
          renderChart();
        // Re-render URL list if exists
        if (currentSelectedStatus) {
          showUrlsForStatus(currentSelectedStatus);
      // Uncomment this to test with sample data
        document.addEventListener('DOMContentLoaded', function() {
            const sampleData = {
                "https://example.com": 200,
                "https://example.com/about": 200,
                "https://example.com/contact": 200,
                "https://example.com/old-page": 301,
                "https://example.com/missing": 404,
                "https://example.com/error": 500,
                "https://example.com/private": 403,
                "https://example.com/redirect": 302,
                "https://example.com/not-modified": 304,
                "https://example.com/unauthorized": 401,
                "https://example.com/bad-request": 400,
                "https://example.com/gateway-timeout": 504
            processData(sampleData);
            renderChart();
            content.classList.remove('hidden');
        });
    </script>
Provide feedback

Saved searches

Use saved searches to filter your results more quickly

FilesExpand file tree

index.html

Latest commit

History

index.html

File metadata and controls
