phonenumber/index.html at main · mylabbuddy/phonenumber · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Network Lookup System</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=JetBrains+Mono&display=swap');

        body {
            font-family: 'Inter', sans-serif;
            background-color: #fcfcfc;
            color: #1a1a1a;
        }

        .mono {
            font-family: 'JetBrains+Mono', monospace;
        }

        .input-focus:focus {
            outline: none;
            border-color: #000;
            box-shadow: 0 0 0 1px #000;
        }

        .fade-in {
            animation: fadeIn 0.4s ease-out forwards;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
    </style>
</head>
<body class="flex flex-col min-h-screen items-center px-6 py-12 md:py-24">

    <!-- Header -->
    <header class="w-full max-w-xl text-center mb-12">
        <h1 class="text-2xl font-light tracking-tight mb-2 uppercase italic">Tele-Finder</h1>
        <p class="text-gray-400 text-sm">Enter a 10-digit number to identify origin.</p>
    </header>

    <!-- Lookup Section -->
    <main class="w-full max-w-xl">
        <div class="bg-white border border-gray-100 p-8 rounded-2xl shadow-sm mb-12">
            <div class="relative mb-8">
                <label class="block text-[10px] uppercase tracking-widest text-gray-400 mb-2 font-semibold">Phone Number</label>
                <input
                    type="text"
                    id="phoneInput"
                    maxlength="10"
                    placeholder="e.g. 9000123456"
                    class="w-full text-3xl font-light py-2 border-b border-gray-200 input-focus transition-all duration-300 placeholder-gray-200"
                >
            </div>

            <!-- Results -->
            <div id="results" class="hidden grid grid-cols-2 gap-8 pt-4 border-t border-gray-50 fade-in">
                <div>
                    <span class="block text-[10px] uppercase tracking-widest text-gray-400 mb-1 font-semibold">Operator</span>
                    <p id="operatorOutput" class="text-lg font-medium">--</p>
                </div>
                <div>
                    <span class="block text-[10px] uppercase tracking-widest text-gray-400 mb-1 font-semibold">Location</span>
                    <p id="locationOutput" class="text-lg font-medium">--</p>
                </div>
            </div>

            <div id="placeholder" class="text-center py-4 text-gray-300 italic text-sm">
                Waiting for input...
            </div>
        </div>

        <!-- Documentation/Notes Section -->
        <section class="space-y-10">
            <div>
                <h3 class="text-xs font-bold uppercase tracking-widest text-gray-900 mb-4 border-l-2 border-black pl-3">Network Operators</h3>
                <div class="bg-gray-50 p-6 rounded-lg border border-gray-100">
                    <pre class="mono text-xs leading-relaxed text-gray-600 whitespace-pre-wrap">
`AT - Airtel India`
`CG - BSNL/MTNL - Central Gov.`
`RJ - Reliance Jio`
`VI - Vodafone Idea`</pre>
                </div>
            </div>

            <div>
                <h3 class="text-xs font-bold uppercase tracking-widest text-gray-900 mb-4 border-l-2 border-black pl-3">Circle Directory</h3>
                <div class="bg-gray-50 p-6 rounded-lg border border-gray-100 overflow-x-auto">
                    <pre class="mono text-xs leading-relaxed text-gray-600 whitespace-pre">
`Andhra Pradesh`      | `AP` | `Cat A` | AP, Telangana, Yanam
`Assam`               | `AS` | `Cat C` | State of Assam
`Bihar & Jharkhand`   | `BR` | `Cat C` | Bihar, Jharkhand</pre>
                </div>
            </div>
        </section>
    </main>

    <footer class="mt-24 text-[10px] uppercase tracking-[0.2em] text-gray-300">
        Minimalist Registry System
    </footer>

    <script>
        // Database simulation
        const data = {
            "9000": { op: "Airtel", loc: "Andhra Pradesh" },
            "9100": { op: "Airtel", loc: "Andhra Pradesh" },
            "9200": { op: "Airtel", loc: "Madhya Pradesh" }
        };

        const phoneInput = document.getElementById('phoneInput');
        const results = document.getElementById('results');
        const placeholder = document.getElementById('placeholder');
        const operatorOutput = document.getElementById('operatorOutput');
        const locationOutput = document.getElementById('locationOutput');

        phoneInput.addEventListener('input', (e) => {
            let val = e.target.value.replace(/\D/g, '');
            e.target.value = val;

            if (val.length >= 4) {
                const prefix = val.substring(0, 4);
                const match = data[prefix];

                if (match) {
                    operatorOutput.textContent = match.op;
                    locationOutput.textContent = match.loc;
                    results.classList.remove('hidden');
                    placeholder.classList.add('hidden');
                } else {
                    operatorOutput.textContent = "Unknown";
                    locationOutput.textContent = "Unknown Prefix";
                    results.classList.remove('hidden');
                    placeholder.classList.add('hidden');
                }
            } else {
                results.classList.add('hidden');
                placeholder.classList.remove('hidden');
            }
        });
    </script>
</body>
</html>