Mahar-Calculator/index.html at main · MatrixRex/Mahar-Calculator · 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
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
<!DOCTYPE html>
<html lang="bn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>আজকের মহর ফাতেমি (বাংলাদেশ) — Mahr Fatemi Amount Today</title>

    <meta name="description"
        content="বাংলাদেশে আজকের মহর ফাতেমি কত টাকা? ইসলামিক নিয়ম অনুযায়ী রুপার দামের ভিত্তিতে আজকের ফাতেমি মহর দেখুন">

    <meta name="keywords"
        content="Mahr Fatemi, Mahr Calculator, Silver Price BD, Islamic Marriage, Denmohor, Fatemi Mohor, Mahr Fatemi Bangladesh, Today Mahr Price, Mohor Calculator BD, মহরে ফাতেমি, দেনমোহর, মহর ক্যালকুলেটর">

    <meta name="author" content="MatrixRex">

    <!-- Canonical (FIXED trailing slash) -->
    <link rel="canonical" href="https://matrixrex.github.io/Mahar-Calculator/">

    <meta name="google-site-verification" content="OmE_EbtVKMyJ776YSvbZ6wKMkesiGHvdcabI3d4Afio" />

    <!-- Open Graph -->
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://matrixrex.github.io/Mahar-Calculator/">
    <meta property="og:title" content="Mahr Fatemi Amount Today in Bangladesh | আজকের মহরে ফাতেমি">
    <meta property="og:description"
        content="Calculate the current Mahr Fatemi & Mohor amount in Bangladesh (BDT) today. Real-time silver price based calculator.">
    <meta property="og:image"
        content="https://matrixrex.github.io/Mahar-Calculator/assets/web-app-manifest-512x512.png">

    <!-- NEW: Site Name (prevents 'GitHub Pages documentation') -->
    <meta property="og:site_name" content="মহর ফাতেমি ক্যালকুলেটর বাংলাদেশ">

    <!-- Twitter -->
    <meta property="twitter:card" content="summary_large_image">
    <meta property="twitter:url" content="https://matrixrex.github.io/Mahar-Calculator/">
    <meta property="twitter:title" content="Mahr Fatemi Amount Today in Bangladesh | আজকের মহরে ফাতেমি">
    <meta property="twitter:description"
        content="Calculate the current Mahr Fatemi & Mohor amount in Bangladesh (BDT) today. Real-time silver price based calculator.">
    <meta property="twitter:image"
        content="https://matrixrex.github.io/Mahar-Calculator/assets/web-app-manifest-512x512.png">

    <!-- JSON-LD: WebSite schema (REPLACED Article schema) -->
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "WebSite",
      "name": "মহর ফাতেমি ক্যালকুলেটর বাংলাদেশ",
      "alternateName": "Mahr Fatemi Calculator BD",
      "url": "https://matrixrex.github.io/Mahar-Calculator/",
      "inLanguage": "bn-BD",
      "publisher": {
        "@type": "Person",
        "name": "MatrixRex"
      }
    }
    </script>

    <!-- Favicons -->
    <link rel="icon" type="image/png" href="assets/favicon-96x96.png" sizes="96x96" />
    <link rel="icon" type="image/svg+xml" href="assets/favicon.svg" />
    <link rel="shortcut icon" href="assets/favicon.ico" />
    <link rel="apple-touch-icon" sizes="180x180" href="assets/apple-touch-icon.png" />
    <link rel="manifest" href="assets/site.webmanifest" />

    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Tiro+Bangla:ital@0;1&display=swap" rel="stylesheet">

    <!-- Icons -->
    <script src="https://unpkg.com/@phosphor-icons/web"></script>

    <!-- Tailwind -->
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            darkMode: 'class',
            theme: {
                extend: {
                    colors: {
                        emerald: { 900: '#0F5132' },
                        gold: { 400: '#D4AF37', 500: '#C5A028' },
                        offwhite: '#F8F9FA',
                        darkblack: '#121212',
                    },
                    fontFamily: {
                        bangla: ['"Tiro Bangla"', 'serif'],
                    }
                }
            }
        }
    </script>

    <link rel="stylesheet" href="css/style.css">
</head>

<body
    class="bg-offwhite dark:bg-darkblack text-emerald-900 dark:text-gray-100 transition-colors duration-300 min-h-screen flex flex-col">

    <!-- Header / Dark Mode Toggle & Share -->
    <header class="absolute top-0 right-0 p-6 z-50">
        <div class="flex items-center gap-2">
            <!-- Share Button with Dropdown -->
            <div class="relative" id="share-container">
                <button id="share-toggle"
                    class="p-3 rounded-full bg-emerald-900/10 dark:bg-white/10 hover:bg-emerald-900/20 dark:hover:bg-white/20 transition-all text-emerald-900 dark:text-gold-400">
                    <i class="ph ph-share-network text-xl"></i>
                </button>
                <!-- Dropdown Menu -->
                <div id="share-dropdown"
                    class="hidden absolute right-0 mt-2 w-40 rounded-xl bg-white dark:bg-gray-800 shadow-lg border border-gray-200 dark:border-gray-700 overflow-hidden z-50">
                    <button id="btn-download"
                        class="w-full flex items-center gap-3 px-4 py-3 text-sm text-emerald-900 dark:text-gray-100 hover:bg-emerald-900/10 dark:hover:bg-white/10 transition-colors">
                        <i class="ph ph-download-simple text-lg"></i>
                        <span>ছবি ডাউনলোড</span>
                    </button>
                    <button id="btn-copy"
                        class="w-full flex items-center gap-3 px-4 py-3 text-sm text-emerald-900 dark:text-gray-100 hover:bg-emerald-900/10 dark:hover:bg-white/10 transition-colors border-t border-gray-200 dark:border-gray-700">
                        <i class="ph ph-copy text-lg"></i>
                        <span>ছবি কপি</span>
                    </button>
                </div>
            </div>
            <!-- Theme Toggle -->
            <button id="theme-toggle"
                class="p-3 rounded-full bg-emerald-900/10 dark:bg-white/10 hover:bg-emerald-900/20 dark:hover:bg-white/20 transition-all text-emerald-900 dark:text-gold-400">
                <i class="ph ph-sun text-xl hidden dark:block"></i>
                <i class="ph ph-moon text-xl block dark:hidden"></i>
            </button>
        </div>
    </header>

    <!-- Hero Section -->
    <main id="home"
        class="flex-grow flex flex-col items-center justify-center text-center px-4 relative pt-32 pb-12 lg:py-0 min-h-[60vh]">
        <div class="space-y-6 max-w-4xl mx-auto z-10">

            <h1 class="text-4xl md:text-6xl lg:text-7xl font-bold text-emerald-900 dark:text-white leading-tight">
                আজকের মহরে ফাতেমি <br class="md:hidden" />
            </h1>
            <noscript>
                <p>
                    আজকের মহর ফাতেমি বাংলাদেশের রুপার বাজার দামের উপর ভিত্তি করে নির্ধারিত হয় এবং প্রতিদিন হালনাগাদ করা
                    হয়।
                </p>
            </noscript>

            <div class="py-4">
                <div id="loading-price" class="text-5xl md:text-8xl font-bold text-gray-400 animate-pulse">
                    Loading...
                </div>
                <div id="price-display"
                    class="hidden text-6xl md:text-8xl lg:text-9xl font-bold text-gold-400 drop-shadow-sm tracking-tight">
                    <!-- Price will be injected here -->
                </div>
            </div>

            <p class="text-xl md:text-2xl text-gray-600 dark:text-gray-400">
                ৫০০ দিরহাম = ১,৫৩০.৯ গ্রাম / ১৩১.২৫ ভরি রৌপ্য
            </p>

            <p id="per-gram-container" class="text-lg text-emerald-900 dark:text-gold-400 font-medium mt-2 hidden">
                আজকের রুপা প্রতি গ্রাম (বাংলাদেশ): <span id="per-gram-display">--</span> টাকা
            </p>

            <p class="text-sm text-gray-500 dark:text-gray-500 italic mt-2">
                "তথ্যগুলো শুধুমাত্র ধারণার জন্য। চূড়ান্ত সিদ্ধান্তের আগে স্থানীয় মুফতি সাহেবের পরামর্শ নিন।"
            </p>

            <div id="last-updated"
                class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-gray-200 dark:bg-gray-800 text-gray-600 dark:text-gray-400 text-sm">
                <i class="ph ph-clock"></i>
                <span></span>
            </div>
        </div>
        <section class="sr-only">
            <h2>আজকের মহর ফাতেমি কত টাকা</h2>
            <p>
                মহর ফাতেমি ইসলামে নির্ধারিত একটি মানদণ্ড যা ৫০০ দিরহাম রুপার মূল্যের উপর ভিত্তি করে হিসাব করা হয়।
                বাংলাদেশের বর্তমান বাজার দামের উপর ভিত্তি করে এই হিসাব প্রতিদিন পরিবর্তিত হতে পারে।
            </p>
        </section>

    </main>

    <!-- Info Grid -->
    <section class="bg-emerald-900/5 dark:bg-white/5 pt-12 pb-4 px-4 lg:px-8 min-h-[30vh]">
        <div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-4 gap-6 lg:gap-8">

            <!-- Other Mahr Section (Spans 3 columns) -->
            <div id="definitions" class="col-span-1 md:col-span-3">
                <h2
                    class="text-2xl font-bold text-emerald-900 dark:text-white mb-6 border-b border-emerald-900/10 dark:border-white/10 pb-2">
                    অন্যান্য মহর
                </h2>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                    <!-- Calculator Card -->
                    <div
                        class="glass-panel rounded-2xl p-6 text-center md:text-left hover:bg-emerald-900/10 dark:hover:bg-white/10 transition-all duration-300 group h-full">
                        <div
                            class="flex items-center justify-center md:justify-start gap-3 mb-4 text-emerald-900 dark:text-gold-400">
                            <i class="ph ph-calculator text-3xl group-hover:scale-110 transition-transform"></i>
                            <h3 class="text-xl font-bold">সর্বনিম্ন মহর</h3>
                        </div>
                        <div id="min-mahr-display"
                            class="text-3xl lg:text-4xl font-bold text-emerald-900 dark:text-white mb-2">
                            --
                        </div>
                        <p class="text-gray-600 dark:text-gray-400 text-sm">
                            ১০ দিরহাম / ৩০.৬১৮ গ্রাম / ২.৬২৫ ভরি
                        </p>
                    </div>

                    <!-- Definition Card 1: Mahr Mithil -->
                    <div class="glass-panel rounded-2xl p-6 h-full">
                        <h4 class="text-xl font-bold text-emerald-900 dark:text-gold-400 mb-4 flex items-center gap-2">
                            <i class="ph ph-users"></i> মহরে মিছিল
                        </h4>
                        <p class="text-sm text-gray-600 dark:text-gray-300 leading-relaxed">
                            কনের বাবার পরিবারের কনের সমসাময়িক ঐ সমস্ত নারী যারা সম্পদ, সৌন্দর্য, দ্বীনদারিতা ও বয়সে
                            কনের
                            সমকক্ষ, তাদের মহরের সমপরিমাণ মহর।
                        </p>
                    </div>

                    <!-- Definition Card 2: Mahr Musamma -->
                    <div class="glass-panel rounded-2xl p-6 h-full">
                        <h4 class="text-xl font-bold text-emerald-900 dark:text-gold-400 mb-4 flex items-center gap-2">
                            <i class="ph ph-handshake"></i> মহরে মুসাম্মা
                        </h4>
                        <p class="text-sm text-gray-600 dark:text-gray-300 leading-relaxed">
                            বর ও কনে পক্ষের পরস্পর সম্মতিতে যেই মহর নির্ধারিত হয়ে থাকে (শর্ত হলো ১০ দিরহামের কম না
                            হওয়া)।
                        </p>
                    </div>
                </div>
            </div>

            <!-- Trust & Credits Card -->
            <div id="references" class="col-span-1 flex flex-col pt-0 md:pt-14">
                <div class="glass-panel rounded-2xl p-6 flex flex-col justify-between h-full">
                    <div class="space-y-4">
                        <h3 class="text-xl font-bold text-emerald-900 dark:text-white mb-4">তথ্যসূত্র</h3>
                        <div class="flex flex-col gap-3 mt-4">
                            <a href="https://www.alkawsar.com/bn/qa/answers/detail/1394/" target="_blank"
                                rel="noopener noreferrer"
                                class="px-4 py-3 rounded-lg bg-emerald-900 text-white text-sm hover:bg-emerald-800 transition-colors text-center">
                                মাসিক আল-কাউসার
                            </a>
                            <a href="https://ifatwa.info/220/" target="_blank" rel="noopener noreferrer"
                                class="px-4 py-3 rounded-lg bg-emerald-900 text-white text-sm hover:bg-emerald-800 transition-colors text-center">
                                আই ফতোয়া
                            </a>
                        </div>
                    </div>
                </div>
            </div>

        </div>

        <!-- Developer Credit -->
        <div class="mt-12  flex flex-col md:flex-row items-center justify-center gap-4 text-center">
            <p class="text-xs text-gray-500 dark:text-gray-500">
                উম্মাহের স্বার্থে <a href="https://github.com/MatrixRex/Mahar-Calculator" target="_blank"
                    class="font-bold text-emerald-900 dark:text-gold-400 hover:underline">MatrixRex</a>
            </p>

            <!-- Dynamic Version Info -->
            <p class="text-[10px] text-gray-400 dark:text-gray-600">
                Build:
                <a href="https://github.com/MatrixRex/Mahar-Calculator/commit/COMMIT_HASH_PLACEHOLDER" target="_blank"
                    class="hover:underline hover:text-emerald-900 dark:hover:text-gold-400 transition-colors font-mono">
                    COMMIT_HASH_PLACEHOLDER
                </a>
                <span class="">•</span>
                <span>BUILD_DATE_PLACEHOLDER</span>
            </p>
        </div>
    </section>

    <script src="js/script.js"></script>
</body>

</html>