add proxy

CNAME

@@ -0,0 +1 @@
+dhiraagu-edir.shihaam.me

README.md

@@ -1,12 +1,16 @@
 # E-Dir
 
-A simple web frontend for Dhiraagu directory lookup.
+A better web frontend for [Dhiraagu E-Directory](https://www.dhiraagu.com.mv/e-directory).
 
 ## Features
 
 - Phone number lookup via Dhiraagu E-Dir API
-- Material Design UI
+- Tap-to-call with `tel:` links
+- Search history stored in LocalStorage
+- Accepts country code prefix (+960)
+- QR code generation to share contact numbers
 - Automatic dark/light theme (follows system preference)
+- No Recaptcha required
 
 ## Usage
 

backend/proxy.py

@@ -0,0 +1,40 @@
+#!/usr/bin/env python3
+from flask import Flask, request, Response
+from curl_cffi import requests as curl_requests
+
+app = Flask(__name__)
+BASE_URL = "https://app-production.dhiraagu.com.mv"
+
+
+def proxy_request(target_url: str) -> Response:
+    headers = {"Host": "app-production.dhiraagu.com.mv"}
+
+    for h in ["Authorization", "Content-Type", "Accept"]:
+        if h in request.headers:
+            headers[h] = request.headers[h]
+
+    resp = curl_requests.request(
+        method=request.method,
+        url=target_url,
+        headers=headers,
+        data=request.get_data() or None,
+        impersonate="chrome",
+        timeout=30,
+    )
+
+    return Response(resp.content, resp.status_code, {"Content-Type": resp.headers.get("content-type", "application/json")})
+
+
+@app.route("/<int:subscriber_id>")
+def subscriber_lookup(subscriber_id: int):
+    return proxy_request(f"{BASE_URL}/io/v1/info/subscribers/{subscriber_id}/dir")
+
+
+@app.route("/", defaults={"path": ""})
+@app.route("/<path:path>")
+def catch_all(path: str):
+    return proxy_request(f"{BASE_URL}/{path}")
+
+
+if __name__ == "__main__":
+    app.run(host="0.0.0.0", port=8080)

backend/requirements-proxy.txt

@@ -0,0 +1,2 @@
+flask>=3.0.0
+curl_cffi>=0.6.0

script.js

@@ -0,0 +1,416 @@
+const form = document.getElementById('searchForm');
+const phoneInput = document.getElementById('phoneNumber');
+const searchBtn = document.getElementById('searchBtn');
+const tableSearch = document.getElementById('tableSearch');
+const clearSearchBtn = document.getElementById('clearSearchBtn');
+const clearHistoryBtn = document.getElementById('clearHistoryBtn');
+const historyTableBody = document.getElementById('historyTableBody');
+const emptyState = document.getElementById('emptyState');
+const resultsCount = document.getElementById('resultsCount');
+const toast = document.getElementById('toast');
+const toastMessage = document.getElementById('toastMessage');
+const toastIcon = document.getElementById('toastIcon');
+const confirmModal = document.getElementById('confirmModal');
+const cancelClearBtn = document.getElementById('cancelClearBtn');
+const confirmClearBtn = document.getElementById('confirmClearBtn');
+const mobileTableContainer = document.getElementById('mobileTableContainer');
+const mobileTableBody = document.getElementById('mobileTableBody');
+const emptyStateMobile = document.getElementById('emptyStateMobile');
+const qrModal = document.getElementById('qrModal');
+const qrContainer = document.getElementById('qrContainer');
+const qrTitle = document.getElementById('qrTitle');
+const closeQrBtn = document.getElementById('closeQrBtn');
+
+let searchHistory = [];
+let currentSort = { column: 'timestamp', direction: 'desc' };
+
+const HISTORY_KEY = 'edir_search_history';
+
+function loadHistory() {
+    const stored = localStorage.getItem(HISTORY_KEY);
+    if (stored) {
+        searchHistory = JSON.parse(stored);
+    }
+    renderTable();
+}
+
+function saveHistory() {
+    localStorage.setItem(HISTORY_KEY, JSON.stringify(searchHistory));
+}
+
+function addToHistory(phone, result, status) {
+    const entry = {
+        id: Date.now(),
+        phone,
+        result,
+        status,
+        timestamp: Date.now()
+    };
+    searchHistory.unshift(entry);
+    saveHistory();
+    renderTable();
+}
+
+function clearHistory() {
+    searchHistory = [];
+    localStorage.removeItem(HISTORY_KEY);
+    renderTable();
+    showToast('History cleared', 'success');
+}
+
+function formatDate(timestamp) {
+    const date = new Date(timestamp);
+    const datePart = date.toLocaleDateString('en-US', {
+        month: 'short',
+        day: 'numeric',
+        year: 'numeric'
+    });
+    const timePart = date.toLocaleTimeString('en-US', {
+        hour: '2-digit',
+        minute: '2-digit',
+        hour12: true
+    });
+    return `<span class="date-part">${datePart}</span><span class="time-part">${timePart}</span>`;
+}
+
+function getStatusBadge(status) {
+    const badges = {
+        success: '<span class="status-badge status-success">Found</span>',
+        not_found: '<span class="status-badge status-not-found">Not Found</span>',
+        error: '<span class="status-badge status-error">Error</span>'
+    };
+    return badges[status] || badges.error;
+}
+
+function renderTable(filteredHistory = null) {
+    const data = filteredHistory || getSortedHistory();
+    historyTableBody.innerHTML = '';
+    mobileTableBody.innerHTML = '';
+
+    if (data.length === 0) {
+        emptyState.style.display = 'block';
+        mobileTableContainer.style.display = 'none';
+        emptyStateMobile.style.display = '';
+        resultsCount.textContent = filteredHistory ? 'No results found' : '';
+        return;
+    }
+
+    emptyState.style.display = 'none';
+    mobileTableContainer.style.display = '';
+    emptyStateMobile.style.display = 'none';
+    resultsCount.textContent = `Showing ${data.length} ${data.length === 1 ? 'result' : 'results'}`;
+
+    data.forEach((entry, index) => {
+        let resultHtml;
+        if (entry.status === 'not_found') {
+            resultHtml = getStatusBadge(entry.status);
+        } else if (entry.status === 'error') {
+            resultHtml = `${escapeHtml(entry.result)}<div style="margin-top: 8px;">${getStatusBadge(entry.status)}<button class="retry-btn" data-phone="${escapeHtml(entry.phone)}" data-id="${entry.id}" title="Retry"><span class="material-icons">refresh</span></button></div>`;
+        } else {
+            resultHtml = escapeHtml(entry.result);
+        }
+
+        // Desktop table row
+        const row = document.createElement('tr');
+        row.innerHTML = `
+            <td class="phone-number">
+                <div class="phone-cell">
+                    <div class="phone-icons">
+                        <a href="tel:${escapeHtml(entry.phone)}" class="phone-icon-btn" title="Call">
+                            <span class="material-icons">phone</span>
+                        </a>
+                        <button class="phone-icon-btn qr-btn" title="QR Code">
+                            <span class="material-icons">qr_code_2</span>
+                        </button>
+                    </div>
+                    <span class="phone-text">${escapeHtml(entry.phone)}</span>
+                </div>
+            </td>
+            <td class="result">${resultHtml}</td>
+            <td class="datetime">${formatDate(entry.timestamp)}</td>
+        `;
+        row.querySelector('.qr-btn').addEventListener('click', () => showQrCode(entry.phone));
+        const resultCell = row.querySelector('.result');
+        if (entry.status === 'success') {
+            resultCell.classList.add('copyable');
+            resultCell.addEventListener('click', () => copyToClipboard(entry.result));
+        }
+        const retryBtn = row.querySelector('.retry-btn');
+        if (retryBtn) {
+            retryBtn.addEventListener('click', () => retrySearch(entry.id, entry.phone, retryBtn));
+        }
+        historyTableBody.appendChild(row);
+
+        // Mobile table row
+        const mobileRow = document.createElement('tr');
+        mobileRow.innerHTML = `
+            <td class="phone-number">
+                <div class="phone-cell">
+                    <div class="phone-icons">
+                        <a href="tel:${escapeHtml(entry.phone)}" class="phone-icon-btn" title="Call">
+                            <span class="material-icons">phone</span>
+                        </a>
+                        <button class="phone-icon-btn qr-btn" title="QR Code">
+                            <span class="material-icons">qr_code_2</span>
+                        </button>
+                    </div>
+                    <span class="phone-text">${escapeHtml(entry.phone)}</span>
+                </div>
+            </td>
+            <td class="result">${resultHtml}</td>
+            <td class="datetime">${formatDate(entry.timestamp)}</td>
+        `;
+        mobileRow.querySelector('.qr-btn').addEventListener('click', () => showQrCode(entry.phone));
+        const mobileResultCell = mobileRow.querySelector('.result');
+        if (entry.status === 'success') {
+            mobileResultCell.classList.add('copyable');
+            mobileResultCell.addEventListener('click', () => copyToClipboard(entry.result));
+        }
+        const mobileRetryBtn = mobileRow.querySelector('.retry-btn');
+        if (mobileRetryBtn) {
+            mobileRetryBtn.addEventListener('click', () => retrySearch(entry.id, entry.phone, mobileRetryBtn));
+        }
+        mobileTableBody.appendChild(mobileRow);
+    });
+}
+
+function getSortedHistory() {
+    const sorted = [...searchHistory];
+    sorted.sort((a, b) => {
+        let comparison = 0;
+        if (currentSort.column === 'phone') {
+            comparison = a.phone.localeCompare(b.phone);
+        } else if (currentSort.column === 'result') {
+            comparison = a.result.localeCompare(b.result);
+        } else if (currentSort.column === 'timestamp') {
+            comparison = a.timestamp - b.timestamp;
+        } else if (currentSort.column === 'status') {
+            comparison = a.status.localeCompare(b.status);
+        }
+        return currentSort.direction === 'asc' ? comparison : -comparison;
+    });
+    return sorted;
+}
+
+function filterHistory(searchTerm) {
+    if (!searchTerm.trim()) {
+        renderTable();
+        clearSearchBtn.classList.remove('show');
+        return;
+    }
+
+    const term = searchTerm.toLowerCase();
+    const filtered = searchHistory.filter(entry =>
+        entry.phone.toLowerCase().includes(term) ||
+        entry.result.toLowerCase().includes(term)
+    );
+
+    renderTable(filtered);
+    clearSearchBtn.classList.add('show');
+}
+
+function handleSort(column) {
+    if (currentSort.column === column) {
+        currentSort.direction = currentSort.direction === 'asc' ? 'desc' : 'asc';
+    } else {
+        currentSort.column = column;
+        currentSort.direction = 'asc';
+    }
+
+    document.querySelectorAll('th').forEach(th => {
+        th.classList.remove('sort-asc', 'sort-desc');
+    });
+    document.querySelectorAll(`th[data-sort="${column}"]`).forEach(th => {
+        th.classList.add(currentSort.direction === 'asc' ? 'sort-asc' : 'sort-desc');
+    });
+
+    const searchTerm = tableSearch.value;
+    if (searchTerm.trim()) {
+        filterHistory(searchTerm);
+    } else {
+        renderTable();
+    }
+}
+
+function showToast(message, type = 'success') {
+    toastMessage.textContent = message;
+    toast.className = `toast ${type}`;
+    toastIcon.textContent = type === 'success' ? 'check_circle' : 'error';
+    toast.classList.add('show');
+
+    setTimeout(() => {
+        toast.classList.remove('show');
+    }, 3000);
+}
+
+function escapeHtml(text) {
+    const div = document.createElement('div');
+    div.textContent = text;
+    return div.innerHTML;
+}
+
+async function copyToClipboard(text) {
+    try {
+        await navigator.clipboard.writeText(text);
+        showToast('Copied to clipboard', 'success');
+    } catch (err) {
+        showToast('Failed to copy', 'error');
+    }
+}
+
+async function retrySearch(entryId, phoneNumber, button) {
+    button.classList.add('loading');
+
+    let apiNumber = phoneNumber;
+    if (/^\+960\d{7}$/.test(phoneNumber)) {
+        apiNumber = phoneNumber.slice(4);
+    } else if (/^960\d{7}$/.test(phoneNumber)) {
+        apiNumber = phoneNumber.slice(3);
+    }
+
+    try {
+        const response = await fetch(`https://dhiraagu-edir-proxy.shihaam.me/${encodeURIComponent(apiNumber)}`);
+        const data = await response.json();
+
+        const entryIndex = searchHistory.findIndex(e => e.id === entryId);
+        if (entryIndex === -1) return;
+
+        if (response.ok && data && data.dirEnquiryEntry) {
+            if (data.dirEnquiryEntry === 'Number not found') {
+                searchHistory[entryIndex].result = 'Number not found';
+                searchHistory[entryIndex].status = 'not_found';
+            } else {
+                searchHistory[entryIndex].result = data.dirEnquiryEntry;
+                searchHistory[entryIndex].status = 'success';
+            }
+        } else {
+            searchHistory[entryIndex].result = 'No results found';
+            searchHistory[entryIndex].status = 'error';
+        }
+        searchHistory[entryIndex].timestamp = Date.now();
+        saveHistory();
+        renderTable();
+        showToast('Retry successful', 'success');
+    } catch (error) {
+        button.classList.remove('loading');
+        showToast('Retry failed', 'error');
+    }
+}
+
+function showQrCode(phone) {
+    const telUrl = `tel:${phone}`;
+    qrTitle.textContent = phone;
+    qrContainer.innerHTML = '';
+    const isLightMode = window.matchMedia('(prefers-color-scheme: light)').matches;
+    new QRCode(qrContainer, {
+        text: telUrl,
+        width: 200,
+        height: 200,
+        colorDark: isLightMode ? '#e07800' : '#ff8c00',
+        colorLight: isLightMode ? '#ffffff' : '#111111',
+        correctLevel: QRCode.CorrectLevel.H
+    });
+    qrModal.classList.add('show');
+}
+
+// Only allow numbers and + in phone input
+phoneInput.addEventListener('input', (e) => {
+    e.target.value = e.target.value.replace(/[^0-9+]/g, '');
+});
+
+form.addEventListener('submit', async (e) => {
+    e.preventDefault();
+
+    const phoneNumber = phoneInput.value.trim();
+    if (!phoneNumber) return;
+
+    // Strip +960 or 960 prefix for API call if it's a valid Maldivian number
+    let apiNumber = phoneNumber;
+    if (/^\+960\d{7}$/.test(phoneNumber)) {
+        apiNumber = phoneNumber.slice(4); // Remove +960
+    } else if (/^960\d{7}$/.test(phoneNumber)) {
+        apiNumber = phoneNumber.slice(3); // Remove 960
+    }
+
+    searchBtn.disabled = true;
+    searchBtn.innerHTML = '<div class="spinner"></div>';
+
+    try {
+        const response = await fetch(`https://dhiraagu-edir-proxy.shihaam.me/${encodeURIComponent(apiNumber)}`);
+        const data = await response.json();
+
+        if (response.ok && data && data.dirEnquiryEntry) {
+            if (data.dirEnquiryEntry === 'Number not found') {
+                addToHistory(phoneNumber, 'Number not found', 'not_found');
+            } else {
+                addToHistory(phoneNumber, data.dirEnquiryEntry, 'success');
+            }
+        } else {
+            addToHistory(phoneNumber, 'No results found', 'error');
+        }
+    } catch (error) {
+        addToHistory(phoneNumber, 'Failed to fetch data', 'error');
+    } finally {
+        searchBtn.disabled = false;
+        searchBtn.innerHTML = '<span class="material-icons">search</span>';
+        phoneInput.value = '';
+    }
+});
+
+tableSearch.addEventListener('input', (e) => {
+    filterHistory(e.target.value);
+});
+
+clearSearchBtn.addEventListener('click', () => {
+    tableSearch.value = '';
+    filterHistory('');
+    tableSearch.focus();
+});
+
+document.querySelectorAll('th.sortable').forEach(th => {
+    th.addEventListener('click', () => {
+        handleSort(th.dataset.sort);
+    });
+});
+
+clearHistoryBtn.addEventListener('click', () => {
+    if (searchHistory.length === 0) {
+        showToast('No history to clear', 'error');
+        return;
+    }
+    confirmModal.classList.add('show');
+});
+
+cancelClearBtn.addEventListener('click', () => {
+    confirmModal.classList.remove('show');
+});
+
+confirmClearBtn.addEventListener('click', () => {
+    confirmModal.classList.remove('show');
+    clearHistory();
+});
+
+confirmModal.addEventListener('click', (e) => {
+    if (e.target === confirmModal) {
+        confirmModal.classList.remove('show');
+    }
+});
+
+closeQrBtn.addEventListener('click', () => {
+    qrModal.classList.remove('show');
+});
+
+qrModal.addEventListener('click', (e) => {
+    if (e.target === qrModal) {
+        qrModal.classList.remove('show');
+    }
+});
+
+document.addEventListener('keydown', (e) => {
+    if (e.ctrlKey && e.key === 'f') {
+        e.preventDefault();
+        tableSearch.focus();
+    }
+});
+
+loadHistory();