1<!DOCTYPE html> 2<html lang="bn" dir="ltr"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta name="csrf-token" content="x4F9GyuD40WX6phiNu0xYGXsds1AmSW8J7BFMi2Q"> 7 <meta http-equiv="Content-Language" content="bn"> 8 <meta name="language" content="Bangla"> 9 10 11 <title>à¦à¦à¦¾à¦°à§à¦ à¦à§à¦ à¦à¦°à§à¦¨ - GH NETWORK | GH NETWORK</title> 12 13 14 <meta name="description" content="à¦à¦¾à¦à§à¦ªà§à¦°à§à¦° সà§à¦°à¦¾ ঠপà¦à¦¿à¦à§à¦¯à¦¾à¦² ফাà¦à¦¬à¦¾à¦° ঠIPv6 বà§à¦°à¦¡à¦¬à§à¦¯à¦¾à¦¨à§à¦¡ à¦à¦¨à§à¦à¦¾à¦°à¦¨à§à¦ সারà§à¦à¦¿à¦¸ পà§à¦°à¦¦à¦¾à¦¨à¦à¦¾à¦°à§à¥¤"> 15 <meta name="keywords" content="internet, broadband, gazipur, gh network, isp, optical fiber"> 16 <meta name="author" content="GH NETWORK"> 17 <meta name="robots" content="index, follow"> 18 19 20 <!-- Canonical URL --> 21 <link rel="canonical" href=" https://gh-network.net/check-coverage 22" /> 23 24 <!-- Open Graph / Facebook --> 25 <meta property="og:type" content="website"> 26 <meta property="og:title" content="GH NETWORK - à¦à¦¾à¦à§à¦ªà§à¦°à§à¦° সà§à¦°à¦¾ ঠপà¦à¦¿à¦à§à¦¯à¦¾à¦² ফাà¦à¦¬à¦¾à¦° ঠIPv6 বà§à¦°à¦¡à¦¬à§à¦¯à¦¾à¦¨à§à¦¡"> 27 <meta property="og:description" content="à¦à¦¾à¦à§à¦ªà§à¦°à§à¦° সà§à¦°à¦¾ ঠপà¦à¦¿à¦à§à¦¯à¦¾à¦² ফাà¦à¦¬à¦¾à¦° ঠIPv6 বà§à¦°à¦¡à¦¬à§à¦¯à¦¾à¦¨à§à¦¡ à¦à¦¨à§à¦à¦¾à¦°à¦¨à§à¦ সারà§à¦à¦¿à¦¸ পà§à¦°à¦¦à¦¾à¦¨à¦à¦¾à¦°à§à¥¤"> 28 <meta property="og:image" content="https://gh-network.net/favicon.ico"> 29 <meta property="og:url" content="https://gh-network.net/check-coverage"> 30 <meta property="og:type" content="website"> 31 <meta property="og:url" content="https://gh-network.net/check-coverage"> 32 <meta property="og:title" content="à¦à¦à¦¾à¦°à§à¦ à¦à§à¦ à¦à¦°à§à¦¨ - GH NETWORK"> 33 <meta property="og:description" content="à¦à¦ªà¦¨à¦¾à¦° à¦à¦²à¦¾à¦à¦¾à¦¯à¦¼ GH NETWORK-à¦à¦° à¦à¦à¦¾à¦°à§à¦ à¦à¦à§ à¦à¦¿à¦¨à¦¾ à¦à§à¦ à¦à¦°à§à¦¨à¥¤"> 34 <meta property="og:image" content="https://gh-network.net/images/coverage-og.jpg"> 35 36 <!-- Twitter --> 37 <meta name="twitter:card" content="summary_large_image"> 38 <meta name="twitter:site" content="@ghnetwork"> 39 <meta name="twitter:title" content="GH NETWORK - à¦à¦¾à¦à§à¦ªà§à¦°à§à¦° সà§à¦°à¦¾ ঠপà¦à¦¿à¦à§à¦¯à¦¾à¦² ফাà¦à¦¬à¦¾à¦° ঠIPv6 বà§à¦°à¦¡à¦¬à§à¦¯à¦¾à¦¨à§à¦¡"> 40 <meta name="twitter:description" content="à¦à¦¾à¦à§à¦ªà§à¦°à§à¦° সà§à¦°à¦¾ ঠপà¦à¦¿à¦à§à¦¯à¦¾à¦² ফাà¦à¦¬à¦¾à¦° ঠIPv6 বà§à¦°à¦¡à¦¬à§à¦¯à¦¾à¦¨à§à¦¡ à¦à¦¨à§à¦à¦¾à¦°à¦¨à§à¦ সারà§à¦à¦¿à¦¸ পà§à¦°à¦¦à¦¾à¦¨à¦à¦¾à¦°à§à¥¤"> 41 <meta name="twitter:image" content="https://gh-network.net/favicon.ico"> 42 <meta property="twitter:card" content="summary_large_image"> 43 <meta property="twitter:url" content="https://gh-network.net/check-coverage"> 44 <meta property="twitter:title" content="à¦à¦à¦¾à¦°à§à¦ à¦à§à¦ à¦à¦°à§à¦¨ - GH NETWORK"> 45 <meta property="twitter:description" content="à¦à¦ªà¦¨à¦¾à¦° à¦à¦²à¦¾à¦à¦¾à¦¯à¦¼ GH NETWORK-à¦à¦° à¦à¦à¦¾à¦°à§à¦ à¦à¦à§ à¦à¦¿à¦¨à¦¾ à¦à§à¦ à¦à¦°à§à¦¨à¥¤"> 46 <meta property="twitter:image" content="https://gh-network.net/images/coverage-twitter.jpg"> 47 48 <!-- Additional Meta Tags --> 49 <meta name="robots" content="index, follow"> 50 <meta name="googlebot" content="index, follow"> 51 <meta name="theme-color" content="#ffffff"> 52 53 <!-- Structured Data / Schema.org markup --> 54 55 <!-- Favicon --> 56 <link rel="icon" href="https://gh-network.net/favicon.ico" type="image/x-icon"> 57 58 <!-- Font Awesome --> 59 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"> 60 61 <!-- Google Fonts - Anek Bangla --> 62 <link rel="preconnect" href="https://fonts.googleapis.com"> 63 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 64 <link href="https://fonts.googleapis.com/css2?family=Anek+Bangla:wght@100;200;300;400;500;600;700;800&display=swap" rel="stylesheet"> 65 66 <!-- Custom CSS --> 67 <link rel="stylesheet" href="https://gh-network.net/assets/css/light-theme.css"> 68 <link rel="stylesheet" href="https://gh-network.net/assets/css/style.css"> 69 <link rel="stylesheet" href="https://gh-network.net/assets/css/style_new.css"> 70 <link rel="stylesheet" href="https://gh-network.net/assets/css/home_extra.css"> 71 <link rel="stylesheet" href="https://gh-network.net/assets/css/footer.css"> 72 <link rel="stylesheet" href="https://gh-network.net/assets/css/responsive-ui.css"> 73 74 75 76 <!-- Preload Critical Fonts -->
77 <link rel="preload" href="https://fonts.gstatic.com/s/anekbangla/v1/NAmZKzYbHv9kGzKgJqQpCw.woff2" as="font" type="font/woff2" crossorigin> 78 79 <style> 80 /* Apply Anek Bangla font to all elements */ 81 * { 82 font-family: "Anek Bangla", sans-serif; 83 font-optical-sizing: auto; 84 font-style: normal; 85 font-variation-settings: "wdth" 100; 86 -webkit-font-smoothing: antialiased; 87 -moz-osx-font-smoothing: grayscale; 88 text-rendering: optimizeLegibility; 89 } 90 91 /* Hide browser scrollbar and enable custom scrollbar for entire page */ 92 html { 93 overflow: -moz-scrollbars-none; /* Firefox */ 94 -ms-overflow-style: none; /* IE and Edge */ 95 scrollbar-width: none; /* Firefox */ 96 } 97 98 html::-webkit-scrollbar { 99 display: none; /* Chrome, Safari, Opera */ 100 } 101 102 /* Anek Bangla - All Weights */ 103 .anek-bangla-extralight { font-weight: 200; } 104 .anek-bangla-light { font-weight: 300; } 105 .anek-bangla-regular { font-weight: 400; } 106 .anek-bangla-medium { font-weight: 500; } 107 .anek-bangla-semibold { font-weight: 600; } 108 .anek-bangla-bold { font-weight: 700; } 109 .anek-bangla-extrabold { font-weight: 800; } 110 111 @font-face { 112 font-family: 'Anek Bangla'; 113 font-weight: 200; 114 font-style: normal; 115 font-display: swap; 116 src: url('https://fonts.gstatic.com/s/anekbangla/v1/NAmZKzYbHv9kGzKgJqQpCw.woff2') format('woff2'); 117 unicode-range: U+0980-09FF, U+1CD0-1CF9, U+200C-200D, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB; 118 } 119 120 @font-face { 121 font-family: 'Anek Bangla'; 122 font-weight: 300; 123 font-style: normal; 124 font-display: swap; 125 src: url('https://fonts.gstatic.com/s/anekbangla/v1/NAmZKzYbHv9kGzKgJqQpCw.woff2') format('woff2'); 126 unicode-range: U+0980-09FF, U+1CD0-1CF9, U+200C-200D, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB; 127 } 128 129 @font-face { 130 font-family: 'Anek Bangla'; 131 font-weight: 400; 132 font-style: normal; 133 font-display: swap; 134 src: url('https://fonts.gstatic.com/s/anekbangla/v1/NAmZKzYbHv9kGzKgJqQpCw.woff2') format('woff2'); 135 unicode-range: U+0980-09FF, U+1CD0-1CF9, U+200C-200D, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB; 136 } 137 138 @font-face { 139 font-family: 'Anek Bangla'; 140 font-weight: 500; 141 font-style: normal; 142 font-display: swap; 143 src: url('https://fonts.gstatic.com/s/anekbangla/v1/NAmZKzYbHv9kGzKgJqQpCw.woff2') format('woff2'); 144 unicode-range: U+0980-09FF, U+1CD0-1CF9, U+200C-200D, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB; 145 } 146 147 @font-face { 148 font-family: 'Anek Bangla'; 149 font-weight: 600; 150 font-style: normal; 151 font-display: swap; 152 src: url('https://fonts.gstatic.com/s/anekbangla/v1/NAmZKzYbHv9kGzKgJqQpCw.woff2') format('woff2'); 153 unicode-range: U+0980-09FF, U+1CD0-1CF9, U+200C-200D, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB; 154 } 155 156 @font-face { 157 font-family: 'Anek Bangla'; 158 font-weight: 700; 159 font-style: normal; 160 font-display: swap; 161 src: url('https://fonts.gstatic.com/s/anekbangla/v1/NAmZKzYbHv9kGzKgJqQpCw.woff2') format('woff2'); 162 unicode-range: U+0980-09FF, U+1CD0-1CF9, U+200C-200D, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB; 163 } 164 165 @font-face { 166 font-family: 'Anek Bangla'; 167 font-weight: 800; 168 font-style: normal; 169 font-display: swap; 170 src: url('https://fonts.gstatic.com/s/anekbangla/v1/NAmZKzYbHv9kGzKgJqQpCw.woff2') format('woff2'); 171 unicode-range: U+0980-09FF, U+1CD0-1CF9, U+200C-200D, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB; 172 } 173 174 body { 175 margin: 0; 176 font-family: "Anek Bangla", sans-serif; 177 font-optical-sizing: auto; 178 font-style: normal; 179 font-variation-settings: "wdth" 100; 180 line-height: 1.7; 181 color: #1e293b; 182 overflow-x: hidden;
183 overflow-y: scroll; /* Always show vertical space for custom scrollbar */ 184 text-rendering: optimizeLegibility; 185 -webkit-font-smoothing: antialiased; 186 -moz-osx-font-smoothing: grayscale; 187 font-feature-settings: 'kern' 1, 'calt' 1, 'liga' 1; 188 padding-bottom: 0; 189 background-color: #f8fafc; 190 } 191 192 /* Custom Scrollbar Styles - Global */ 193 ::-webkit-scrollbar { 194 width: 10px; 195 height: 10px; 196 } 197 198 ::-webkit-scrollbar-track { 199 background: #f1f5f9; 200 border-radius: 10px; 201 } 202 203 ::-webkit-scrollbar-thumb { 204 background: linear-gradient(180deg, #3b82f6, #8b5cf6); 205 border-radius: 10px; 206 border: 2px solid #f1f5f9; 207 } 208 209 ::-webkit-scrollbar-thumb:hover { 210 background: linear-gradient(180deg, #2563eb, #7c3aed); 211 } 212 213 /* Firefox custom scrollbar support */ 214 * { 215 scrollbar-width: thin; 216 scrollbar-color: #3b82f6 #f1f5f9; 217 } 218 219 /* Custom scrollbar for scrollable containers */ 220 .overflow-y-auto::-webkit-scrollbar, 221 .overflow-y-scroll::-webkit-scrollbar, 222 [style*="overflow-y: scroll"]::-webkit-scrollbar, 223 [style*="overflow-y: auto"]::-webkit-scrollbar, 224 .scrollable::-webkit-scrollbar,
225 .modal-content::-webkit-scrollbar, 226 .dropdown-menu::-webkit-scrollbar, 227 .sidebar::-webkit-scrollbar, 228 .content-area::-webkit-scrollbar { 229 width: 8px; 230 } 231 232 .overflow-y-auto::-webkit-scrollbar-track, 233 .overflow-y-scroll::-webkit-scrollbar-track, 234 [style*="overflow-y: scroll"]::-webkit-scrollbar-track, 235 [style*="overflow-y: auto"]::-webkit-scrollbar-track, 236 .scrollable::-webkit-scrollbar-track, 237 .modal-content::-webkit-scrollbar-track, 238 .dropdown-menu::-webkit-scrollbar-track, 239 .sidebar::-webkit-scrollbar-track, 240 .content-area::-webkit-scrollbar-track { 241 background: #f8fafc; 242 border-radius: 8px; 243 } 244 245 .overflow-y-auto::-webkit-scrollbar-thumb, 246 .overflow-y-scroll::-webkit-scrollbar-thumb, 247 [style*="overflow-y: scroll"]::-webkit-scrollbar-thumb, 248 [style*="overflow-y: auto"]::-webkit-scrollbar-thumb, 249 .scrollable::-webkit-scrollbar-thumb, 250 .modal-content::-webkit-scrollbar-thumb, 251 .dropdown-menu::-webkit-scrollbar-thumb, 252 .sidebar::-webkit-scrollbar-thumb, 253 .content-area::-webkit-scrollbar-thumb { 254 background: linear-gradient(180deg, #60a5fa, #a78bfa); 255 border-radius: 8px; 256 border: 2px solid #f8fafc; 257 } 258 259 .overflow-y-auto::-webkit-scrollbar-thumb:hover, 260 .overflow-y-scroll::-webkit-scrollbar-thumb:hover, 261 [style*="overflow-y: scroll"]::-webkit-scrollbar-thumb:hover, 262 [style*="overflow-y: auto"]::-webkit-scrollbar-thumb:hover, 263 .scrollable::-webkit-scrollbar-thumb:hover,
264 .modal-content::-webkit-scrollbar-thumb:hover, 265 .dropdown-menu::-webkit-scrollbar-thumb:hover, 266 .sidebar::-webkit-scrollbar-thumb:hover, 267 .content-area::-webkit-scrollbar-thumb:hover { 268 background: linear-gradient(180deg, #3b82f6, #8b5cf6); 269 } 270 271 /* Horizontal scrollbar styling */ 272 .overflow-x-auto::-webkit-scrollbar, 273 .overflow-x-scroll::-webkit-scrollbar { 274 height: 8px; 275 } 276 277 .overflow-x-auto::-webkit-scrollbar-track, 278 .overflow-x-scroll::-webkit-scrollbar-track { 279 background: #f8fafc; 280 border-radius: 8px; 281 } 282 283 .overflow-x-auto::-webkit-scrollbar-thumb, 284 .overflow-x-scroll::-webkit-scrollbar-thumb { 285 background: linear-gradient(90deg, #3b82f6, #8b5cf6); 286 border-radius: 8px; 287 border: 2px solid #f8fafc; 288 } 289 290 .overflow-x-auto::-webkit-scrollbar-thumb:hover, 291 .overflow-x-scroll::-webkit-scrollbar-thumb:hover { 292 background: linear-gradient(90deg, #2563eb, #7c3aed); 293 } 294 295 h1, h2, h3, h4, h5, h6 { 296 font-family: "Anek Bangla", sans-serif; 297 font-optical-sizing: auto; 298 font-style: normal; 299 font-variation-settings: "wdth" 100; 300 font-weight: 700; 301 line-height: 1.2; 302 margin-top: 0; 303 } 304 305 p { 306 font-family: "Anek Bangla", sans-serif; 307 font-optical-sizing: auto; 308 font-style: normal; 309 font-variation-settings: "wdth" 100; 310 font-weight: 400; 311 } 312 313 a, button, input, select, textarea { 314 font-family: "Anek Bangla", sans-serif; 315 font-optical-sizing: auto; 316 font-style: normal; 317 font-variation-settings: "wdth" 100; 318 } 319 320 /* Apply bottom padding only on mobile where bottom nav exists */ 321 @media (max-width: 1024px) { 322 body { 323 padding-bottom: 120px; 324 } 325 } 326 327 .container { 328 width: 100%; 329 max-width: 1200px; 330 margin: 0 auto; 331 padding: 0 20px; 332 } 333 </style> 334 335 336 <style> 337/* ============================================ 338 COVERAGE CHECK PAGE - LIGHT THEME 339 ============================================ */ 340 341:root { 342 --bg-primary: #ffffff; 343 --bg-secondary: #f8fafc; 344 --bg-tertiary: #f1f5f9; 345 --text-primary: #1e293b; 346 --text-secondary: #475569; 347 --text-muted: #64748b; 348 --accent-primary: #6D8BFF; 349 --accent-secondary: #9B70FF; 350 --border-color: #e2e8f0; 351 --success: #10b981; 352 --warning: #f59e0b; 353 --error: #ef4444; 354 --card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); 355 --card-shadow-hover: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); 356} 357 358* { 359 margin: 0; 360 padding: 0; 361 box-sizing: border-box; 362} 363 364body { 365 background: var(--bg-primary); 366 color: var(--text-primary); 367 font-family: 'Poppins', 'Bangla', sans-serif; 368 line-height: 1.6; 369 overflow-x: hidden; 370} 371 372.container { 373 max-width: 1400px; 374 margin: 0 auto; 375 padding: 0 20px; 376} 377 378/* ============================================ 379 SEARCH SECTION 380 ============================================ */ 381.search-section { 382 padding: 3rem 0 2rem; 383 background: var(--bg-secondary); 384 border-bottom: 1px solid var(--border-color); 385} 386 387.search-container { 388 max-width: 700px; 389 margin: 0 auto; 390} 391 392.search-box { 393 background: var(--bg-primary); 394 border: 1px solid var(--border-color); 395 border-radius: 16px; 396 padding: 2rem; 397 box-shadow: var(--card-shadow); 398} 399 400.search-label { 401 display: block; 402 font-size: 1.1rem; 403 font-weight: 600; 404 color: var(--text-primary); 405 margin-bottom: 1rem; 406 text-align: center; 407} 408 409.search-label i { 410 color: var(--accent-primary); 411 margin-right: 0.5rem; 412} 413 414.search-input-wrapper { 415 display: flex; 416 gap: 1rem; 417} 418 419.search-input { 420 flex: 1; 421 padding: 1rem 1.5rem; 422 background: var(--bg-primary); 423 border: 2px solid var(--border-color); 424 border-radius: 12px; 425 color: var(--text-primary); 426 font-size: 1.1rem; 427 transition: all 0.3s ease; 428} 429 430.search-input:focus { 431 outline: none; 432 border-color: var(--accent-primary); 433 box-shadow: 0 0 0 3px rgba(109, 139, 255, 0.1); 434} 435 436.search-input::placeholder { 437 color: var(--text-muted); 438} 439 440.search-btn { 441 padding: 1rem 2.5rem; 442 background: var(--accent-primary); 443 color: white; 444 border: none; 445 border-radius: 12px; 446 font-size: 1rem; 447 font-weight: 600; 448 cursor: pointer; 449 transition: all 0.3s ease; 450 white-space: nowrap; 451} 452 453.search-btn:hover { 454 background: var(--accent-secondary); 455 transform: translateY(-1px); 456 box-shadow: 0 4px 12px rgba(109, 139, 255, 0.3); 457} 458 459/* ============================================ 460 RESULT SECTION 461 ============================================ */ 462.result-section { 463 padding: 2rem 0; 464 display: none; 465 background: var(--bg-secondary); 466} 467 468.result-section.show { 469 display: block; 470} 471 472.result-card { 473 max-width: 700px; 474 margin: 0 auto; 475 background: var(--bg-primary); 476 border: 1px solid var(--border-color); 477 border-radius: 16px; 478 padding: 2rem; 479 box-shadow: var(--card-shadow); 480 text-align: center; 481} 482 483.result-icon { 484 width: 80px; 485 height: 80px; 486 margin: 0 auto 1.5rem; 487 border-radius: 50%; 488 display: flex;
489 align-items: center; 490 justify-content: center; 491 font-size: 2.5rem; 492} 493 494.result-icon.available { 495 background: rgba(16, 185, 129, 0.1); 496 color: var(--success); 497} 498 499.result-icon.coming-soon { 500 background: rgba(245, 158, 11, 0.1); 501 color: var(--warning); 502} 503 504.result-icon.not-available { 505 background: rgba(239, 68, 68, 0.1); 506 color: var(--error); 507} 508 509.result-title { 510 font-size: 1.6rem; 511 font-weight: 700; 512 margin-bottom: 1rem; 513} 514 515.result-title.available { 516 color: var(--success); 517} 518 519.result-title.coming-soon { 520 color: var(--warning); 521} 522 523.result-title.not-available { 524 color: var(--error); 525} 526 527.result-message { 528 font-size: 1rem; 529 color: var(--text-secondary); 530 margin-bottom: 1.5rem; 531 line-height: 1.7; 532} 533 534.result-actions { 535 display: flex; 536 gap: 1rem; 537 justify-content: center; 538 flex-wrap: wrap; 539} 540 541.btn-result { 542 padding: 0.875rem 1.5rem; 543 border-radius: 10px; 544 font-weight: 600; 545 text-decoration: none; 546 display: inline-flex;
547 align-items: center; 548 gap: 0.5rem; 549 transition: all 0.3s ease; 550 font-size: 0.95rem; 551} 552 553.btn-result.primary { 554 background: var(--accent-primary); 555 color: white; 556} 557 558.btn-result.primary:hover { 559 background: var(--accent-secondary); 560 transform: translateY(-1px); 561} 562 563.btn-result.secondary { 564 background: var(--bg-tertiary); 565 color: var(--text-primary); 566 border: 1px solid var(--border-color); 567} 568 569.btn-result.secondary:hover { 570 background: var(--border-color); 571} 572 573/* ============================================ 574 COVERAGE AREAS GRID 575 ============================================ */ 576.coverage-areas { 577 padding: 3rem 0 4rem; 578 background: var(--bg-primary); 579} 580 581.section-header { 582 text-align: center; 583 margin-bottom: 2.5rem; 584} 585 586.section-tag { 587 display: inline-block; 588 padding: 0.5rem 1.25rem; 589 background: rgba(109, 139, 255, 0.1); 590 border: 1px solid rgba(109, 139, 255, 0.3); 591 border-radius: 50px; 592 color: var(--accent-primary); 593 font-size: 0.875rem; 594 font-weight: 600; 595 margin-bottom: 1rem; 596} 597 598.section-title { 599 font-size: 2rem; 600 font-weight: 700; 601 color: var(--text-primary); 602 margin-bottom: 0.75rem; 603} 604 605.section-subtitle { 606 color: var(--text-secondary); 607 font-size: 1rem; 608 max-width: 500px; 609 margin: 0 auto; 610} 611 612/* Grid Layout: 5 per row on desktop, 2 per row on mobile */ 613.areas-grid { 614 display: grid; 615 grid-template-columns: repeat(5, 1fr); 616 gap: 1.25rem; 617} 618 619.area-box { 620 background: var(--bg-primary); 621 border: 1px solid var(--border-color); 622 border-radius: 12px; 623 padding: 1.25rem 1rem; 624 text-align: center; 625 transition: all 0.3s ease; 626 cursor: pointer; 627} 628 629.area-box:hover { 630 border-color: var(--accent-primary); 631 box-shadow: 0 10px 15px -3px rgba(109, 139, 255, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); 632 transform: translateY(-2px); 633} 634 635.area-icon { 636 width: 48px; 637 height: 48px; 638 background: rgba(109, 139, 255, 0.1); 639 border-radius: 10px; 640 display: flex;
641 align-items: center; 642 justify-content: center; 643 font-size: 1.25rem; 644 color: var(--accent-primary); 645 margin: 0 auto 0.75rem; 646} 647 648.area-name { 649 font-size: 0.95rem; 650 font-weight: 600; 651 color: var(--text-primary); 652 margin-bottom: 0.25rem; 653 line-height: 1.4; 654} 655 656.area-location { 657 font-size: 0.8rem; 658 color: var(--text-muted); 659} 660 661.area-status { 662 display: inline-flex; 663 align-items: center; 664 gap: 0.35rem; 665 margin-top: 0.75rem; 666 padding: 0.35rem 0.75rem; 667 background: rgba(16, 185, 129, 0.1); 668 color: var(--success); 669 border-radius: 50px; 670 font-size: 0.75rem; 671 font-weight: 600; 672} 673 674/* ============================================ 675 NO COVERAGE AREAS MESSAGE 676 ============================================ */ 677.no-coverage-message { 678 text-align: center; 679 padding: 3rem 2rem; 680 color: var(--text-muted); 681} 682 683.no-coverage-message i { 684 font-size: 3rem; 685 margin-bottom: 1rem; 686 color: var(--border-color); 687} 688 689/* ============================================ 690 RESPONSIVE DESIGN 691 ============================================ */ 692@media (max-width: 1200px) { 693 .areas-grid { 694 grid-template-columns: repeat(4, 1fr); 695 } 696} 697 698@media (max-width: 992px) { 699 .areas-grid { 700 grid-template-columns: repeat(3, 1fr); 701 } 702} 703 704@media (max-width: 768px) { 705 .search-section { 706 padding: 2rem 0 1.5rem; 707 } 708 709 .search-box { 710 padding: 1.5rem; 711 } 712 713 .search-input-wrapper { 714 flex-direction: column; 715 } 716 717 .search-btn { 718 width: 100%; 719 } 720 721 .result-actions { 722 flex-direction: column; 723 } 724 725 .btn-result { 726 width: 100%; 727 justify-content: center; 728 } 729 730 .areas-grid { 731 grid-template-columns: repeat(2, 1fr); 732 gap: 1rem; 733 } 734 735 .section-title { 736 font-size: 1.5rem; 737 } 738 739 .area-box { 740 padding: 1rem 0.75rem; 741 } 742 743 .area-icon { 744 width: 40px; 745 height: 40px; 746 font-size: 1rem; 747 } 748 749 .area-name { 750 font-size: 0.875rem; 751 } 752} 753 754@media (max-width: 480px) { 755 .container { 756 padding: 0 15px; 757 } 758 759 .areas-grid { 760 gap: 0.75rem; 761 } 762 763 .area-box { 764 padding: 0.875rem 0.5rem; 765 } 766} 767</style> 768 </head> 769<body> 770 771 772 <!-- Header Removed - All navigation moved to bottom floating bar --> 773<!-- Navigation is now handled by the floating bottom navigation bar --> 774 775 776 <main id="main-content"> 777 <!-- Search Section --> 778<section class="search-section"> 779 <div class="container"> 780 <div class="search-container"> 781 <div class="search-box"> 782 <label class="search-label" for="areaSearch"> 783 <i class="fas fa-search"></i> 784 à¦à¦ªà¦¨à¦¾à¦° à¦à¦²à¦¾à¦à¦¾à¦° নাম লিà¦à§à¦¨ 785 </label> 786 <div class="search-input-wrapper"> 787 <input 788 type="text" 789 id="areaSearch" 790 class="search-input" 791 placeholder="যà§à¦®à¦¨: à¦à¦¾à¦¨à§à¦¦à¦¨à¦¾, à¦à§à¦°à¦¾à¦¸à§à¦¤à¦¾, পালà§à¦° মাঠ..." 792 autocomplete="off" 793 > 794 <button class="search-btn" id="checkCoverageBtn"> 795 <i class="fas fa-search"></i> 796 à¦à§à¦ à¦à¦°à§à¦¨ 797 </button> 798 </div> 799 </div> 800 </div> 801 </div> 802</section> 803
804<!-- Result Section --> 805<section class="result-section" id="resultSection"> 806 <div class="container"> 807 <div class="result-card" id="resultCard"> 808 <!-- Content will be dynamically inserted --> 809 </div> 810 </div> 811</section> 812 813<!-- Coverage Areas Grid --> 814<section class="coverage-areas"> 815 <div class="container"> 816 <div class="section-header"> 817 <span class="section-tag"> 818 <i class="fas fa-map-marked-alt"></i> 819 à¦à¦®à¦¾à¦¦à§à¦° à¦à¦à¦¾à¦°à§à¦ à¦à¦²à¦¾à¦à¦¾ 820 </span> 821 <h2 class="section-title">যà§à¦¸à¦¬ à¦à¦²à¦¾à¦à¦¾à¦¯à¦¼ à¦à¦®à¦°à¦¾ সà§à¦¬à¦¾ দিà¦à§à¦à¦¿</h2> 822 <p class="section-subtitle">নিà¦à§à¦° তালিà¦à¦¾ থà§à¦à§ à¦à¦ªà¦¨à¦¾à¦° à¦à¦²à¦¾à¦à¦¾ à¦à§à¦à¦à§ দà§à¦à§à¦¨</p> 823 </div> 824 825 <div class="no-coverage-message"> 826 <i class="fas fa-map-marked-alt"></i> 827 <p>à¦à§à¦¨à§ à¦à¦à¦¾à¦°à§à¦ à¦à¦²à¦¾à¦à¦¾ যà§à¦ à¦à¦°à¦¾ হয়নি।</p> 828 </div> 829 </div> 830</section> 831 </main> 832 833 834 <!-- Simple Footer Component --> 835<footer class="footer"> 836 <!-- Policy Links Only --> 837 <div class="footer-content"> 838 <div class="policy-links"> 839 <a href="https://gh-network.net/about-us">About Us</a> 840 <span class="separator">|</span> 841 <a href="https://gh-network.net/privacy-policy">Privacy and Policy</a> 842 <span class="separator">|</span> 843 <a href="https://gh-network.net/terms-and-conditions">Terms and Conditions</a> 844 <span class="separator">|</span> 845 <a href="https://gh-network.net/refund-policy">Return and Refund Policy</a> 846 </div> 847 </div> 848 849 <!-- Payment Gateway Logo --> 850 <div class="payment-gateway"> 851 <img src="https://securepay.sslcommerz.com/public/image/SSLCommerz-Pay-With-logo-All-Size-03.png" alt="SSLCommerz - Pay With" class="payment-logo"> 852 </div> 853 854 <!-- Registered Address --> 855 <div class="footer-address"> 856 <p> 857 <i class="fas fa-map-marker-alt"></i> 858 Registered Address: Holding no- 843/C, Ward no- 17, Bason PS, Gazipur - 1702, Bangladesh. 859 </p> 860 </div> 861 862 <!-- Footer Bottom --> 863 <div class="footer-bottom"> 864 <div class="footer-bottom-content"> 865 <p class="copyright"><span id="current-year">2026</span> GH NETWORK. All Rights Reserved.</p> 866 <p class="trade-license">Trade License Number: 9541</p> 867 </div> 868 </div> 869</footer> 870 871<style> 872 /* Simple Footer Styles */ 873 .footer { 874 background: #1a1a2e; 875 color: #fff; 876 padding: 30px 0 0; 877 font-family: 'Anek Bangla', sans-serif; 878 width: 100vw; 879 position: relative; 880 left: 50%; 881 right: 50%; 882 margin-left: -50vw; 883 margin-right: -50vw; 884 } 885 886 .footer-content { 887 text-align: center; 888 margin-bottom: 25px; 889 width: 100%; 890 padding: 0 40px; 891 } 892 893 .policy-links { 894 display: flex; 895 justify-content: center; 896 align-items: center; 897 flex-wrap: wrap; 898 gap: 8px 16px; 899 width: 100%; 900 } 901 902 .policy-links a { 903 color: #60a5fa; 904 text-decoration: none; 905 font-size: 14px; 906 transition: color 0.3s ease; 907 } 908 909 .policy-links a:hover { 910 color: #fff; 911 text-decoration: underline; 912 } 913 914 .separator { 915 color: #475569; 916 font-size: 12px; 917 } 918 919 /* Payment Gateway Logo */ 920 .payment-gateway { 921 text-align: center; 922 padding: 20px 40px; 923 border-top: 1px solid rgba(255, 255, 255, 0.1); 924 width: 100%; 925 } 926 927 .payment-logo { 928 width: auto; 929 height: auto; 930 max-height: 120px; 931 max-width: 100%; 932 object-fit: contain; 933 } 934 935 /* Registered Address */ 936 .footer-address { 937 text-align: center; 938 padding: 15px 40px; 939 border-top: 1px solid rgba(255, 255, 255, 0.1); 940 width: 100%; 941 } 942 943 .footer-address p { 944 color: #94a3b8; 945 font-size: 13px; 946 margin: 0; 947 } 948 949 .footer-address i { 950 margin-right: 8px; 951 color: #60a5fa; 952 } 953 954 /* Footer Bottom */ 955 .footer-bottom { 956 background: #16213e; 957 padding: 15px 0; 958 width: 100%; 959 } 960 961 .footer-bottom-content { 962 display: flex; 963 justify-content: center; 964 align-items: center; 965 flex-wrap: wrap; 966 gap: 10px 20px; 967 width: 100%; 968 padding: 0 40px; 969 text-align: center; 970 } 971 972 .footer-bottom p { 973 color: #94a3b8; 974 font-size: 13px; 975 margin: 0; 976 } 977 978 .copyright { 979 text-align: center; 980 } 981 982 .trade-license { 983 text-align: center; 984 } 985 986 /* Desktop Only - Hide footer on mobile/tablet */ 987 @media (max-width: 1024px) { 988 .footer { 989 display: none !important; 990 } 991 } 992 993 /* Mobile - Hide trade license, center copyright */ 994 @media (max-width: 768px) { 995 .trade-license { 996 display: none !important; 997 } 998 999 .footer-bottom-content { 1000 justify-content: center; 1001 } 1002 1003 .copyright { 1004 text-align: center; 1005 } 1006 } 1007</style> 1008
1009<script> 1010 // Update current year dynamically 1011 document.addEventListener('DOMContentLoaded', function() { 1012 const yearSpan = document.getElementById('current-year'); 1013 if (yearSpan) { 1014 yearSpan.textContent = new Date().getFullYear(); 1015 } 1016 }); 1017</script>
1017 1018 1019 1020 <!-- Core Scripts -->
1021<script src="https://gh-network.net/assets/js/mobile-menu.js"></script>
vendor: 1 bytes, line 1021
1021
1022<script src="https://gh-network.net/assets/js/header-control.js"></script>
vendor: 1 bytes, line 1022
1022
1023<script src="https://gh-network.net/assets/js/home.js"></script>
vendor: 1 bytes, line 1023
1023
1024<script src="https://gh-network.net/assets/js/services-tabs.js"></script>
vendor: 1 bytes, line 1024
1024
1025<script src="https://gh-network.net/assets/js/payment-handler.js"></script>
1025 1026 1027<!-- Font Awesome JS -->
1028<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/js/all.min.js"></script>
1028 1029 1030<!-- Particles.js Initialization -->
1031<script> 1032 // Initialize particles.js 1033 document.addEventListener('DOMContentLoaded', function() { 1034 if (typeof particlesJS !== 'undefined') { 1035 particlesJS('particles-js', { 1036 particles: { 1037 number: { 1038 value: 80, 1039 density: { 1040 enable: true, 1041 value_area: 800 1042 } 1043 }, 1044 color: { 1045 value: '#4f46e5' 1046 }, 1047 shape: { 1048 type: 'circle', 1049 stroke: { 1050 width: 0, 1051 color: '#000000' 1052 } 1053 }, 1054 opacity: { 1055 value: 0.3, 1056 random: true, 1057 anim: { 1058 enable: true, 1059 speed: 1, 1060 opacity_min: 0.1, 1061 sync: false 1062 } 1063 }, 1064 size: { 1065 value: 3, 1066 random: true, 1067 anim: { 1068 enable: true, 1069 speed: 2, 1070 size_min: 0.1, 1071 sync: false 1072 } 1073 }, 1074 line_linked: { 1075 enable: true, 1076 distance: 150, 1077 color: '#4f46e5', 1078 opacity: 0.2, 1079 width: 1 1080 }, 1081 move: { 1082 enable: true, 1083 speed: 1.5, 1084 direction: 'none', 1085 random: true, 1086 straight: false, 1087 out_mode: 'out', 1088 bounce: false 1089 } 1090 }, 1091 interactivity: { 1092 detect_on: 'canvas', 1093 events: { 1094 onhover: { 1095 enable: true, 1096 mode: 'repulse' 1097 }, 1098 onclick: { 1099 enable: true, 1100 mode: 'push' 1101 }, 1102 resize: true 1103 }, 1104 modes: { 1105 repulse: { 1106 distance: 70, 1107 duration: 0.4 1108 }, 1109 push: { 1110 particles_nb: 3 1111 } 1112 } 1113 }, 1114 retina_detect: true 1115 }); 1116 } 1117 }); 1118</script>
1118 1119 1120 1121
1121<script> 1122// ============================================ 1123// COVERAGE DATA FROM DATABASE 1124// ============================================ 1125const coverageAreas = [ 1126 ]; 1127 1128// ============================================ 1129// SEARCH FUNCTIONALITY 1130// ============================================ 1131const searchInput = document.getElementById('areaSearch'); 1132const checkBtn = document.getElementById('checkCoverageBtn'); 1133const resultSection = document.getElementById('resultSection'); 1134const resultCard = document.getElementById('resultCard'); 1135 1136if (searchInput && checkBtn) { 1137 // Check on button click 1138 checkBtn.addEventListener('click', checkCoverage); 1139 1140 // Check on Enter key 1141 searchInput.addEventListener('keypress', function(e) { 1142 if (e.key === 'Enter') { 1143 checkCoverage(); 1144 } 1145 }); 1146} 1147 1148function checkCoverage() { 1149 const searchTerm = searchInput.value.trim().toLowerCase(); 1150 1151 if (!searchTerm) { 1152 alert('দয়া à¦à¦°à§ à¦à¦ªà¦¨à¦¾à¦° à¦à¦²à¦¾à¦à¦¾à¦° নাম লিà¦à§à¦¨'); 1153 searchInput.focus(); 1154 return; 1155 } 1156 1157 // Search for matching area 1158 const matchedArea = coverageAreas.find(area => 1159 area.variations.some(variation => 1160 variation.toLowerCase().includes(searchTerm) || searchTerm.includes(variation.toLowerCase()) 1161 ) 1162 ); 1163 1164 // Display result 1165 displayResult(matchedArea, searchTerm); 1166 1167 // Scroll to result 1168 setTimeout(() => { 1169 resultSection.scrollIntoView({ behavior: 'smooth', block: 'start' }); 1170 }, 100); 1171} 1172 1173function searchArea(areaName) { 1174 searchInput.value = areaName; 1175 checkCoverage(); 1176} 1177 1178function displayResult(area, searchTerm) { 1179 resultSection.classList.add('show'); 1180 1181 if (area) { 1182 // Area found - Available 1183 resultCard.innerHTML = ` 1184 <div class="result-icon available"> 1185 <i class="fas fa-check-circle"></i> 1186 </div> 1187 <h2 class="result-title available">ঠà¦à¦¿à¦¨à¦¨à§à¦¦à¦¨!</h2> 1188 <p class="result-message">${area.message}</p> 1189 <p class="result-message" style="font-size: 0.95rem;">${area.details}</p> 1190 <div class="result-actions"> 1191 <a href="https://gh-network.net/new-connection" class="btn-result primary"> 1192 <i class="fas fa-plug"></i> 1193 à¦à¦à¦¨à¦ à¦à¦¬à§à¦¦à¦¨ à¦à¦°à§à¦¨ 1194 </a> 1195 <a href="tel:+8809639261498" class="btn-result secondary"> 1196 <i class="fas fa-phone-alt"></i> 1197 à¦à¦² à¦à¦°à§à¦¨ 1198 </a> 1199 </div> 1200 `; 1201 } else { 1202 // Check if it's coming soon or not available 1203 const comingSoonKeywords = ['gazipur', 'à¦à¦¾à¦à§à¦ªà§à¦°', 'tongi', 'à¦à¦à§à¦à§', 'joydebpur', 'à¦à¦¯à¦¼à¦¦à§à¦¬à¦ªà§à¦°']; 1204 const isComingSoon = comingSoonKeywords.some(keyword => searchTerm.includes(keyword)); 1205 1206 if (isComingSoon) { 1207 // Coming Soon 1208 resultCard.innerHTML = ` 1209 <div class="result-icon coming-soon"> 1210 <i class="fas fa-clock"></i> 1211 </div> 1212 <h2 class="result-title coming-soon">শà§à¦à§à¦°à¦ à¦à¦¸à¦à§!</h2> 1213 <p class="result-message"> 1214 à¦à¦ªà¦¨à¦¾à¦° à¦à¦²à¦¾à¦à¦¾à¦¯à¦¼ GH_NETWORK à¦à¦° à¦à¦à¦¾à¦°à§à¦ à¦à§à¦¬ শà§à¦à§à¦°à¦ à¦à¦¾à¦²à§ হতৠযাà¦à§à¦à§à¥¤ 1215 à¦à¦à§à¦°à¦¹ পà§à¦°à¦à¦¾à¦¶ à¦à¦°à¦¤à§ à¦à¦®à¦¾à¦¦à§à¦° সাথৠযà§à¦à¦¾à¦¯à§à¦ à¦à¦°à§à¦¨à¥¤ 1216 </p> 1217 <div class="result-actions"> 1218 <a href="tel:+8809639261498" class="btn-result primary"> 1219 <i class="fas fa-phone-alt"></i> 1220 যà§à¦à¦¾à¦¯à§à¦ à¦à¦°à§à¦¨ 1221 </a> 1222 <a href="#" class="btn-result secondary" onclick="alert('à¦à¦ªà¦¨à¦¾à¦° à¦à¦²à¦¾à¦à¦¾à¦à¦¿ নà§à¦ à¦à¦°à¦¾ হয়à§à¦à§à¥¤ ধনà§à¦¯à¦¬à¦¾à¦¦!'); return false;"> 1223 <i class="fas fa-bell"></i> 1224 à¦à¦®à¦¾à¦à§ à¦à¦¾à¦¨à¦¾à¦¨ 1225 </a> 1226 </div> 1227 `; 1228 } else { 1229 // Not Available 1230 resultCard.innerHTML = ` 1231 <div class="result-icon not-available"> 1232 <i class="fas fa-times-circle"></i> 1233 </div> 1234 <h2 class="result-title not-available">দà§à¦à¦à¦¿à¦¤!</h2> 1235 <p class="result-message"> 1236 বরà§à¦¤à¦®à¦¾à¦¨à§ à¦à¦ªà¦¨à¦¾à¦° à¦à¦²à§à¦²à¦¿à¦à¦¿à¦¤ à¦à¦²à¦¾à¦à¦¾à¦¯à¦¼ "${searchTerm}" GH NETWORK-à¦à¦° à¦à¦à¦¾à¦°à§à¦ নà§à¦à¥¤ 1237 তবৠà¦à¦®à¦°à¦¾ দà§à¦°à§à¦¤ à¦à¦®à¦¾à¦¦à§à¦° à¦à¦à¦¾à¦°à§à¦ বাড়াà¦à§à¦à¦¿à¥¤ 1238 </p> 1239 <div class="result-actions"> 1240 <a href="tel:+8809639261498" class="btn-result primary"> 1241 <i class="fas fa-phone-alt"></i> 1242 যà§à¦à¦¾à¦¯à§à¦ à¦à¦°à§à¦¨ 1243 </a> 1244 <a href="#" class="btn-result secondary" onclick="alert('à¦à¦ªà¦¨à¦¾à¦° à¦à¦²à¦¾à¦à¦¾à¦à¦¿ নà§à¦ à¦à¦°à¦¾ হয়à§à¦à§à¥¤ ধনà§à¦¯à¦¬à¦¾à¦¦!'); return false;"> 1245 <i class="fas fa-bell"></i> 1246 à¦à¦à¦¾à¦°à§à¦ à¦à¦¾à¦²à§ হলৠà¦à¦¾à¦¨à¦¾à¦¨ 1247 </a> 1248 </div> 1249 `; 1250 } 1251 } 1252} 1253 1254// ============================================ 1255// CLEAR RESULT ON NEW SEARCH 1256// ============================================ 1257if (searchInput) { 1258 searchInput.addEventListener('input', function() { 1259 if (this.value.trim() === '') { 1260 resultSection.classList.remove('show'); 1261 } 1262 });
1263} 1264</script>
1264 1265 1266 1267 <nav class="nav-desktop " id="navDesktop" aria-label="Desktop Navigation"> 1268 <div class="nav-desktop-bar"> 1269 1270 1271 <a href="https://gh-network.net" class="nav-logo"> 1272 <div class="logo-icon"><i class="fas fa-wifi"></i></div> 1273 <div class="logo-text-group"> 1274 <span class="logo-name">GH NETWORK</span> 1275 <span class="logo-sub">ফাà¦à¦¬à¦¾à¦° ঠপà¦à¦¿à¦ ISP</span> 1276 </div> 1277 </a> 1278 1279 1280 <div class="nav-links-section"> 1281 <a href="https://gh-network.net" class="nav-link "> 1282 <i class="fas fa-home"></i><span>হà§à¦®</span> 1283 </a> 1284 <a href="https://gh-network.net/packages" class="nav-link "> 1285 <i class="fas fa-layer-group"></i><span>পà§à¦¯à¦¾à¦à§à¦</span> 1286 </a> 1287 <a href="https://gh-network.net/ftp-servers" class="nav-link "> 1288 <i class="fas fa-server"></i><span>FTP</span> 1289 </a> 1290 <a href="https://gh-network.net/support" class="nav-link "> 1291 <i class="fas fa-headset"></i><span>সাপà§à¦°à§à¦</span> 1292 </a> 1293 <a href="https://gh-network.net/bill-payment" class="nav-link "> 1294 <i class="fas fa-file-invoice-dollar"></i><span>বিল পà§</span> 1295 </a> 1296 </div> 1297 1298 1299 <div class="nav-right-actions"> 1300 <a href="https://gh-network.net/speed-test" class="nav-icon-pill speed" title="সà§à¦ªà¦¿à¦¡ à¦à§à¦¸à§à¦"> 1301 <i class="fas fa-tachometer-alt"></i><span>সà§à¦ªà¦¿à¦¡</span> 1302 </a> 1303 <a href="tel:09647989898" class="nav-icon-pill call" title="à¦à¦² à¦à¦°à§à¦¨"> 1304 <i class="fas fa-phone-alt"></i><span>à¦à¦²</span> 1305 </a> 1306 <a href="https://wa.me/8801947111662" target="_blank" rel="noopener noreferrer" class="nav-icon-pill whatsapp" title="হà§à¦¯à¦¼à¦¾à¦à¦¸à¦ à§à¦¯à¦¾à¦ª"> 1307 <i class="fab fa-whatsapp"></i><span>হà§à¦¯à¦¼à¦¾à¦à¦¸à¦ à§à¦¯à¦¾à¦ª</span> 1308 </a> 1309 <div class="nav-divider"></div> 1310 <a href="https://gh-network.net/login" class="login-btn"><i class="fas fa-sign-in-alt"></i><span>লà¦à¦à¦¨</span></a> 1311 </div> 1312 </div> 1313</nav> 1314 1315 1316<div class="mn-container " id="mobileNavContainer"> 1317 <nav class="mn-bar" role="navigation"> 1318 <div class="mn-gloss"></div> 1319 1320 <a href="https://gh-network.net" class="mn-tab "> 1321 <i class="fas fa-house-chimney"></i> 1322 <span>হà§à¦®</span> 1323 </a> 1324 1325 <a href="https://gh-network.net/packages" class="mn-tab "> 1326 <i class="fas fa-cubes"></i> 1327 <span>পà§à¦¯à¦¾à¦à§à¦</span> 1328 </a> 1329 1330 <a href="https://gh-network.net/bill-payment" class="mn-tab "> 1331 <i class="fas fa-wallet"></i> 1332 <span>বিল পà§</span> 1333 </a> 1334 1335 <a href="https://gh-network.net/support" class="mn-tab "> 1336 <i class="fas fa-headset"></i> 1337 <span>সাপà§à¦°à§à¦</span> 1338 </a> 1339 1340 <a href="https://gh-network.net/login" class="mn-tab"> 1341 <i class="fas fa-right-to-bracket"></i> 1342 <span>লà¦à¦à¦¨</span> 1343 </a> 1344 </nav> 1345</div> 1346 1347 1348<button class="m-contact-trigger " id="mobileContactTrigger" onclick="openContactSheet()" aria-label="Contact Us"> 1349 <i class="fas fa-comment-dots"></i> 1350 <span class="m-trigger-dot"></span> 1351</button> 1352 1353 1354<div class="mn-overlay" id="mnOverlay"></div> 1355<div class="mn-sheet" id="mnSheet"> 1356 <div class="mn-sheet-handle"></div> 1357 <div class="mn-sheet-header">যà§à¦à¦¾à¦¯à§à¦</div> 1358 <div class="mn-sheet-content"> 1359 <a href="tel:09647989898" class="mn-sheet-card"> 1360 <div class="mn-card-icon" style="background:#ecfdf5; color:#10b981;"><i class="fas fa-phone-alt"></i></div> 1361 <div class="mn-card-body"> 1362 <b>à¦à¦² à¦à¦°à§à¦¨</b> 1363 <span>09647989898</span> 1364 </div> 1365 <i class="fas fa-chevron-right mn-card-arrow"></i> 1366 </a> 1367 <a href="https://wa.me/8801947111662" target="_blank" rel="noopener noreferrer" class="mn-sheet-card"> 1368 <div class="mn-card-icon" style="background:#f0fdf4; color:#22c55e;"><i class="fab fa-whatsapp"></i></div> 1369 <div class="mn-card-body"> 1370 <b>হà§à¦¯à¦¼à¦¾à¦à¦¸à¦ à§à¦¯à¦¾à¦ª</b>
1371 <span>01947111662</span> 1372 </div> 1373 <i class="fas fa-chevron-right mn-card-arrow"></i> 1374 </a> 1375 </div> 1376</div> 1377 1378<style> 1379/* ââ GLOBAL TOKENS ââ */ 1380:root { 1381 --mn-indigo: #6366f1; 1382 --mn-purple: #a855f7; 1383 --mn-glass-bg: rgba(255, 255, 255, 0.78); 1384 --mn-glass-border: rgba(255, 255, 255, 0.5); 1385 --mn-spring: cubic-bezier(0.34, 1.56, 0.64, 1); 1386 --nav-h: 66px; 1387} 1388 1389/* ââââââââââââââââââââââââââââââââââââââ 1390 DESKTOP NAV â RESTORED & CLEAN 1391ââââââââââââââââââââââââââââââââââââââ */ 1392.nav-desktop { 1393 position: fixed; top: 0; left: 0; right: 0; 1394 z-index: 1000; 1395 background: rgba(255,255,255,0.98); 1396 border-bottom: 1px solid rgba(226,232,240,0.9); 1397 backdrop-filter: blur(16px); 1398 -webkit-backdrop-filter: blur(16px); 1399 box-shadow: 0 1px 12px rgba(0,0,0,0.05); 1400} 1401 1402.nav-desktop-bar { 1403 display: flex; align-items: center; justify-content: space-between; 1404 height: var(--nav-h); padding: 0 40px; 1405 max-width: 1440px; margin: 0 auto; 1406} 1407 1408/* Hide mobile parts by default on Desktop */ 1409.mn-container, .m-contact-trigger, .mn-overlay, .mn-sheet { 1410 display: none !important; 1411} 1412 1413.nav-logo { display: flex; align-items: center; gap: 11px; text-decoration: none; } 1414.logo-icon { 1415 width: 38px; height: 38px; 1416 background: linear-gradient(135deg, #6366f1, #8b5cf6); 1417 border-radius: 10px; display: flex; align-items: center; justify-content: center; 1418 font-size: 16px; color: #fff; box-shadow: 0 4px 10px rgba(99,102,241,0.3); 1419} 1420.logo-text-group { display: flex; flex-direction: column; } 1421.logo-name { font-size: 15px; font-weight: 800; color: #0f172a; letter-spacing: -0.4px; line-height: 1.1; } 1422.logo-sub { font-size: 10px; font-weight: 500; color: #94a3b8; } 1423 1424.nav-links-section { 1425 display: flex; align-items: center; gap: 2px; 1426 background: #f8fafc; border: 1px solid #e8edf3; 1427 border-radius: 12px; padding: 5px; 1428} 1429.nav-link { 1430 display: flex; align-items: center; gap: 7px; padding: 7px 14px; 1431 color: #64748b; text-decoration: none; font-size: 13.5px; font-weight: 500; 1432 border-radius: 8px; transition: all 0.18s ease; white-space: nowrap; 1433} 1434.nav-link:hover { color: #0f172a; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.06); } 1435.nav-link.active { color: #6366f1; background: #fff; box-shadow: 0 1px 6px rgba(99,102,241,0.12); font-weight: 600; } 1436
1437.nav-right-actions { display: flex; align-items: center; gap: 6px; } 1438.nav-icon-pill { 1439 display: flex; align-items: center; gap: 6px; padding: 7px 13px; 1440 border: 1.5px solid #e2e8f0; border-radius: 10px; font-size: 13px; 1441 font-weight: 600; text-decoration: none; background: #f1f5f9; color: #64748b; 1442 transition: all 0.18s ease; 1443} 1444.nav-icon-pill.speed { color: #0891b2; } 1445.nav-icon-pill.call { color: #059669; } 1446.nav-icon-pill.whatsapp { color: #16a34a; } 1447.nav-divider { width: 1px; height: 28px; background: #e2e8f0; margin: 0 4px; } 1448.login-btn { 1449 display: flex; align-items: center; gap: 8px; padding: 9px 18px; 1450 background: linear-gradient(135deg, #6366f1, #8b5cf6); color: #fff; 1451 border-radius: 10px; text-decoration: none; font-size: 13.5px; font-weight: 700; 1452 box-shadow: 0 3px 10px rgba(99,102,241,0.3); transition: all 0.18s ease; 1453} 1454 1455@media (min-width: 1025px) { 1456 body { padding-top: var(--nav-h) !important; padding-bottom: 0 !important; } 1457} 1458 1459/* ââââââââââââââââââââââââââââââââââââââ 1460 MOBILE NAV â CLEAN & ISOLATED 1461ââââââââââââââââââââââââââââââââââââââ */ 1462@media (max-width: 1024px) { 1463 .nav-desktop.hide-on-customer { display: none !important; } 1464 .mn-container.hide-on-customer { display: none !important; } 1465 .m-contact-trigger.hide-on-customer { display: none !important; } 1466 1467 /* Hide body padding for customer dashboard pages */ 1468 body:has(.portal-wrapper) { 1469 padding-bottom: 0 !important; 1470 } 1471 1472 .nav-desktop { display: none !important; } 1473 1474 body { 1475 padding-top: 0 !important; 1476 padding-bottom: calc(95px + env(safe-area-inset-bottom, 0px)) !important; 1477 } 1478 1479 /* RE-SHOW MOBILE PARTS ONLY ON MOBILE */ 1480 .mn-container { 1481 display: block !important; 1482 position: fixed; bottom: 0; left: 0; right: 0; z-index: 1000; 1483 padding: 0 16px calc(14px + env(safe-area-inset-bottom, 0px)); 1484 pointer-events: none; 1485 } 1486 1487 .mn-bar { 1488 position: relative; display: flex; align-items: center; justify-content: space-around; 1489 height: 72px; background: var(--mn-glass-bg); backdrop-filter: blur(28px) saturate(210%); 1490 -webkit-backdrop-filter: blur(28px) saturate(210%); border: 1px solid var(--mn-glass-border); 1491 border-radius: 32px; box-shadow: 0 12px 36px rgba(0,0,0,0.14); 1492 pointer-events: auto; overflow: hidden; 1493 } 1494 1495 .mn-tab { 1496 display: flex; flex-direction: column; align-items: center; justify-content: center; 1497 gap: 3px; flex: 1; height: 100%; text-decoration: none; -webkit-tap-highlight-color: transparent; 1498 position: relative; transition: all 0.4s var(--mn-spring); 1499 } 1500 .mn-tab:active { transform: scale(0.88) translateY(2px); } 1501 1502 .mn-tab i { 1503 font-size: 1.45rem; color: #64748b; 1504 transition: all 0.4s var(--mn-spring); z-index: 2; 1505 } 1506 .mn-tab span { 1507 font-size: 0.65rem; font-weight: 600; color: #64748b; 1508 z-index: 2; transition: all 0.4s ease; 1509 } 1510 1511 /* PREMIUM ACTIVE STATE (Best UI) */ 1512 .mn-tab.active i { 1513 background: linear-gradient(135deg, #6366f1, #a855f7); 1514 -webkit-background-clip: text; 1515 -webkit-text-fill-color: transparent; 1516 filter: drop-shadow(0 4px 10px rgba(99,102,241, 0.4)); 1517 transform: translateY(-4px); 1518 animation: activeFloat 3s ease-in-out infinite, activeGlow 3s ease-in-out infinite; 1519 } 1520 .mn-tab.active span { 1521 color: #4f46e5; font-weight: 800; transform: scale(1.1); 1522 } 1523 1524 /* Active Indicator Line (Top) */ 1525 .mn-tab.active::before { 1526 content: ''; position: absolute; top: 0; left: 50%; 1527 transform: translateX(-50%); width: 24px; height: 3px; 1528 background: linear-gradient(90deg, #6366f1, #a855f7); 1529 border-radius: 0 0 4px 4px; 1530 box-shadow: 0 2px 10px rgba(99,102,241, 0.6); 1531 animation: indicatorSlide 0.4s var(--mn-spring); 1532 } 1533 1534 /* Active Indicator Dot (Bottom) */ 1535 .mn-tab.active::after { 1536 content: ''; position: absolute; bottom: 6px; width: 4px; height: 4px; 1537 background: #6366f1; border-radius: 50%; 1538 box-shadow: 0 0 12px rgba(99,102,241, 0.8); 1539 } 1540
1541 @keyframes activeFloat { 1542 0%, 100% { transform: translateY(-4px); } 1543 50% { transform: translateY(-7px); } 1544 } 1545 @keyframes activeGlow { 1546 0%, 100% { filter: drop-shadow(0 4px 10px rgba(99,102,241, 0.4)); } 1547 50% { filter: drop-shadow(0 6px 15px rgba(99,102,241, 0.6)); } 1548 } 1549 @keyframes indicatorSlide { 1550 from { width: 0; opacity: 0; } 1551 to { width: 24px; opacity: 1; } 1552 } 1553 1554 .m-contact-trigger { 1555 display: flex !important; 1556 position: fixed; bottom: 105px; right: 20px; z-index: 1000; 1557 width: 52px; height: 52px; background: var(--mn-glass-bg); 1558 backdrop-filter: blur(20px) saturate(210%); border: 1px solid var(--mn-glass-border); 1559 border-radius: 18px; color: var(--mn-indigo); font-size: 1.4rem; 1560 align-items: center; justify-content: center; box-shadow: 0 10px 25px rgba(0,0,0,0.12); 1561 animation: mContactWiggle 5s infinite; 1562 } 1563 @keyframes mContactWiggle { 1564 0%, 80%, 100% { transform: scale(1) rotate(0deg); } 1565 85% { transform: scale(1.1) rotate(-12deg); } 1566 90% { transform: scale(1.1) rotate(12deg); } 1567 95% { transform: scale(1.1) rotate(-12deg); } 1568 } 1569 .m-trigger-dot { position: absolute; top: 14px; right: 14px; width: 10px; height: 10px; background: #ef4444; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 8px rgba(239, 68, 68, 0.4); } 1570 1571 .mn-overlay.show { display: block !important; } 1572 .mn-sheet.show { display: block !important; transform: translateY(0) !important; } 1573 1574 .mn-overlay { display: none; position: fixed; inset: 0; z-index: 2000; background: rgba(15,23,42,0.6); backdrop-filter: blur(4px); } 1575 .mn-sheet { 1576 display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 2001; 1577 background: #fff; border-radius: 32px 32px 0 0; transform: translateY(100%); 1578 transition: transform 0.4s var(--mn-spring); padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)); 1579 } 1580 .mn-sheet-handle { width: 40px; height: 5px; background: #e2e8f0; border-radius: 10px; margin: 12px auto; } 1581 .mn-sheet-header { font-size: 0.85rem; font-weight: 800; color: #94a3b8; text-transform: uppercase; letter-spacing: 1px; text-align: center; margin-bottom: 12px; } 1582 .mn-sheet-card { display: flex; align-items: center; gap: 16px; padding: 16px; background: #f8fafc; border: 1px solid #f1f5f9; border-radius: 20px; text-decoration: none; margin: 8px 16px; } 1583 .mn-card-icon { width: 48px; height: 48px; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; } 1584 .mn-card-body { display: flex; flex-direction: column; flex: 1; } 1585 .mn-card-body b { font-size: 1rem; color: #0f172a; } 1586 .mn-card-body span { font-size: 0.85rem; color: #64748b; } 1587} 1588</style> 1589
1590<script> 1591function openContactSheet() { 1592 const overlay = document.getElementById('mnOverlay'); 1593 const sheet = document.getElementById('mnSheet'); 1594 if(overlay && sheet) { 1595 overlay.classList.add('show'); 1596 sheet.classList.add('show'); 1597 document.body.style.overflow = 'hidden'; 1598 } 1599} 1600function closeContactSheet() { 1601 const overlay = document.getElementById('mnOverlay'); 1602 const sheet = document.getElementById('mnSheet'); 1603 if(overlay && sheet) { 1604 overlay.classList.remove('show'); 1605 sheet.classList.remove('show'); 1606 document.body.style.overflow = ''; 1607 } 1608} 1609if(document.getElementById('mnOverlay')) { 1610 document.getElementById('mnOverlay').addEventListener('click', closeContactSheet); 1611} 1612</script>
1612 1613</body> 1614</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.