Files
dhiraagu-edir/index.html

368 lines
19 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="darkreader-lock">
<!-- Primary Meta Tags -->
<title>E-Dir - Dhiraagu Phone Directory Lookup | Find Maldives Phone Numbers</title>
<meta name="title" content="E-Dir - Dhiraagu Phone Directory Lookup | Find Maldives Phone Numbers">
<meta name="description" content="Search Dhiraagu phone directory instantly. Find Maldives phone numbers, addresses, and contact details. Fast, free, no captcha. Alternative to official Dhiraagu E-Directory.">
<meta name="keywords" content="dhiraagu, e-directory, edir, e-dir, phone directory, maldives phone numbers, dhiraagu directory, phone lookup, maldives directory, dhiraagu phone search, find phone number maldives, dhiraagu number search, maldives telephone directory">
<meta name="author" content="E-Dir">
<meta name="robots" content="index, follow">
<meta name="language" content="English">
<meta name="revisit-after" content="7 days">
<!-- Canonical URL -->
<link rel="canonical" href="https://dhiraagu-edir.shihaam.me/">
<!-- Favicon -->
<link rel="icon" type="image/svg+xml" href="favicon.svg">
<link rel="icon" type="image/png" href="favicon.png">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://dhiraagu-edir.shihaam.me/">
<meta property="og:title" content="E-Dir - Dhiraagu Phone Directory Lookup | Find Maldives Phone Numbers">
<meta property="og:description" content="Search Dhiraagu phone directory instantly. Find Maldives phone numbers, addresses, and contact details. Fast, free, no captcha required.">
<meta property="og:image" content="https://dhiraagu-edir.shihaam.me/og-image.png">
<meta property="og:site_name" content="E-Dir">
<meta property="og:locale" content="en_US">
<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:url" content="https://dhiraagu-edir.shihaam.me/">
<meta name="twitter:title" content="E-Dir - Dhiraagu Phone Directory Lookup">
<meta name="twitter:description" content="Search Dhiraagu phone directory instantly. Find Maldives phone numbers fast, free, no captcha.">
<meta name="twitter:image" content="https://dhiraagu-edir.shihaam.me/og-image.png">
<!-- Additional SEO -->
<meta name="application-name" content="E-Dir">
<meta name="theme-color" content="#0a0a0a" media="(prefers-color-scheme: dark)">
<meta name="theme-color" content="#f5f5f5" media="(prefers-color-scheme: light)">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="E-Dir">
<!-- Structured Data -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "WebApplication",
"name": "E-Dir",
"alternateName": "Dhiraagu E-Directory Alternative",
"description": "Search Dhiraagu phone directory instantly. Find Maldives phone numbers, addresses, and contact details without captcha.",
"url": "https://dhiraagu-edir.shihaam.me/",
"applicationCategory": "UtilitiesApplication",
"operatingSystem": "Any",
"offers": {
"@type": "Offer",
"price": "0",
"priceCurrency": "USD"
}
}
</script>
<!-- External Resources -->
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&family=Roboto+Mono:wght@400;500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="main-layout">
<div class="left-column">
<div class="card">
<div class="header">
<div class="logo">
<div class="logo-icon">
<span class="material-icons">contacts</span>
</div>
<h1>E-Dir</h1>
</div>
<p class="subtitle">Dhiraagu Directory Lookup</p>
</div>
<form id="searchForm" class="search-form-row">
<div class="input-group">
<input
type="tel"
id="phoneNumber"
placeholder="Enter phone number"
autocomplete="tel"
required
>
<span class="material-icons">phone</span>
</div>
<button type="submit" class="btn btn-primary btn-icon" id="searchBtn" title="Search">
<span class="material-icons">search</span>
</button>
</form>
</div>
<div class="card">
<div class="section-header">
<h2 class="section-title">Search History</h2>
<button class="btn btn-danger btn-icon" id="clearHistoryBtn" title="Clear History">
<span class="material-icons">delete</span>
</button>
</div>
<div class="search-box">
<input type="text" id="tableSearch" placeholder="Search history...">
<span class="material-icons">filter_list</span>
<button class="clear-search" id="clearSearchBtn">
<span class="material-icons">close</span>
</button>
</div>
<div class="results-count" id="resultsCount"></div>
<div class="table-container desktop-table">
<table id="historyTable">
<thead>
<tr>
<th class="sortable" data-sort="phone">Phone</th>
<th class="sortable" data-sort="result">Result</th>
<th class="sortable" data-sort="timestamp">Date/Time</th>
</tr>
</thead>
<tbody id="historyTableBody">
</tbody>
</table>
<div id="emptyState" class="empty-state">
<span class="material-icons">history</span>
<h3>No search history yet</h3>
<p>Your searches will appear here</p>
</div>
</div>
<div class="mobile-table" id="mobileTableContainer">
<div class="table-container">
<table id="mobileHistoryTable">
<thead>
<tr>
<th class="sortable" data-sort="phone">Phone</th>
<th class="sortable" data-sort="result">Result</th>
<th class="sortable" data-sort="timestamp">Date/Time</th>
</tr>
</thead>
<tbody id="mobileTableBody">
</tbody>
</table>
</div>
</div>
<div id="emptyStateMobile" class="empty-state mobile-table">
<span class="material-icons">history</span>
<h3>No search history yet</h3>
<p>Your searches will appear here</p>
</div>
</div>
</div>
<div class="right-column">
<div class="card">
<div class="section-header">
<h2 class="section-title">Emergency Numbers</h2>
</div>
<div class="emergency-grid">
<a href="tel:119" class="emergency-card emergency-critical">
<span class="material-icons">local_police</span>
<div class="emergency-info">
<span class="emergency-name">Police</span>
<span class="emergency-number">119</span>
</div>
</a>
<a href="tel:118" class="emergency-card emergency-critical">
<span class="material-icons">local_fire_department</span>
<div class="emergency-info">
<span class="emergency-name">Fire</span>
<span class="emergency-number">118</span>
</div>
</a>
<a href="tel:102" class="emergency-card emergency-critical">
<span class="material-icons">emergency</span>
<div class="emergency-info">
<span class="emergency-name">Ambulance</span>
<span class="emergency-number">102</span>
</div>
</a>
<a href="tel:191" class="emergency-card emergency-critical">
<span class="material-icons">sailing</span>
<div class="emergency-info">
<span class="emergency-name">Coast Guard</span>
<span class="emergency-number">191</span>
</div>
</a>
<a href="tel:1676" class="emergency-card">
<span class="material-icons">health_and_safety</span>
<div class="emergency-info">
<span class="emergency-name">HPA</span>
<span class="emergency-number">1676</span>
</div>
</a>
<a href="tel:1412" class="emergency-card">
<span class="material-icons">child_care</span>
<div class="emergency-info">
<span class="emergency-name">Child Helpline</span>
<span class="emergency-number">1412</span>
</div>
</a>
</div>
<details class="emergency-section">
<summary>Public Services</summary>
<div class="emergency-grid">
<a href="tel:104" class="emergency-card">
<span class="material-icons">bolt</span>
<div class="emergency-info">
<span class="emergency-name">STELCO</span>
<span class="emergency-number">104</span>
</div>
</a>
<a href="tel:105" class="emergency-card">
<span class="material-icons">water_drop</span>
<div class="emergency-info">
<span class="emergency-name">MWSC</span>
<span class="emergency-number">105</span>
</div>
</a>
<a href="tel:1402" class="emergency-card">
<span class="material-icons">account_balance</span>
<div class="emergency-info">
<span class="emergency-name">NSPA</span>
<span class="emergency-number">1402</span>
</div>
</a>
<a href="tel:1400" class="emergency-card">
<span class="material-icons">medical_services</span>
<div class="emergency-info">
<span class="emergency-name">Aasandha</span>
<span class="emergency-number">1400</span>
</div>
</a>
<a href="tel:1415" class="emergency-card">
<span class="material-icons">receipt_long</span>
<div class="emergency-info">
<span class="emergency-name">MIRA</span>
<span class="emergency-number">1415</span>
</div>
</a>
<a href="tel:1416" class="emergency-card">
<span class="material-icons">inventory</span>
<div class="emergency-info">
<span class="emergency-name">Customs</span>
<span class="emergency-number">1416</span>
</div>
</a>
<a href="tel:1414" class="emergency-card">
<span class="material-icons">how_to_vote</span>
<div class="emergency-info">
<span class="emergency-name">Elections</span>
<span class="emergency-number">1414</span>
</div>
</a>
<a href="tel:1410" class="emergency-card">
<span class="material-icons">psychology</span>
<div class="emergency-info">
<span class="emergency-name">Drug Rehab</span>
<span class="emergency-number">1410</span>
</div>
</a>
<a href="tel:110" class="emergency-card">
<span class="material-icons">contact_phone</span>
<div class="emergency-info">
<span class="emergency-name">Directory Enquiries</span>
<span class="emergency-number">110</span>
</div>
</a>
</div>
</details>
<details class="emergency-section">
<summary>Medical</summary>
<div class="emergency-grid">
<a href="tel:3335335" class="emergency-card">
<span class="material-icons">local_hospital</span>
<div class="emergency-info">
<span class="emergency-name">IGMH</span>
<span class="emergency-number">3335335</span>
</div>
</a>
<a href="tel:3313553" class="emergency-card">
<span class="material-icons">local_hospital</span>
<div class="emergency-info">
<span class="emergency-name">ADK</span>
<span class="emergency-number">3313553</span>
</div>
</a>
<a href="tel:3351610" class="emergency-card">
<span class="material-icons">local_hospital</span>
<div class="emergency-info">
<span class="emergency-name">Tree Top</span>
<span class="emergency-number">3351610</span>
</div>
</a>
</div>
</details>
<details class="emergency-section">
<summary>Travel</summary>
<div class="emergency-grid">
<a href="tel:3322211" class="emergency-card">
<span class="material-icons">flight</span>
<div class="emergency-info">
<span class="emergency-name">Flight Info</span>
<span class="emergency-number">3322211</span>
</div>
</a>
<a href="tel:3335544" class="emergency-card">
<span class="material-icons">flight_takeoff</span>
<div class="emergency-info">
<span class="emergency-name">Maldivian</span>
<span class="emergency-number">3335544</span>
</div>
</a>
</div>
</details>
</div>
</div>
</div>
</div>
<div class="toast" id="toast">
<span class="material-icons" id="toastIcon"></span>
<span id="toastMessage"></span>
</div>
<div class="confirm-modal" id="confirmModal">
<div class="confirm-card">
<h3 class="confirm-title">Clear History?</h3>
<p class="confirm-message">Are you sure you want to clear all search history? This action cannot be undone.</p>
<div class="confirm-actions">
<button class="btn btn-outline" id="cancelClearBtn">Cancel</button>
<button class="btn btn-danger-filled" id="confirmClearBtn">Clear</button>
</div>
</div>
</div>
<div class="confirm-modal" id="qrModal">
<div class="confirm-card qr-card">
<h3 class="confirm-title" id="qrTitle">QR Code</h3>
<div class="qr-container" id="qrContainer"></div>
<div class="confirm-actions">
<button class="btn btn-outline" id="closeQrBtn">Close</button>
</div>
</div>
</div>
<script src="qrcode.js"></script>
<script src="script.js"></script>
</body>
</html>