From b9dcf0f65af889ee171342fd7ac8f2c6957f09b6 Mon Sep 17 00:00:00 2001
From: devdatt <shreebhattji@urmic.org>
Date: Wed, 18 Feb 2026 06:14:01 +0530
Subject: [PATCH] fallback

---
 encoder/header.php | 656 ++++++++++++++++++++++++++++++++++++++++++---
 1 file changed, 615 insertions(+), 41 deletions(-)

diff --git a/encoder/header.php b/encoder/header.php
index 8095620..03cf202 100755
--- a/encoder/header.php
+++ b/encoder/header.php
@@ -80,7 +80,7 @@ include 'static.php';
 
         .top-header-2 a {
             color: var(--muted);
-            text-decoration: none;
+            text-decoration: none
         }
 
         .top-header-2 a:hover {
@@ -105,12 +105,12 @@ include 'static.php';
         .site-header nav {
             display: flex;
             gap: 26px;
-            flex-wrap: wrap;
+            flex-wrap: wrap
         }
 
         .site-header a {
             color: var(--muted);
-            text-decoration: none;
+            text-decoration: none
         }
 
         .site-header a:hover {
@@ -127,7 +127,7 @@ include 'static.php';
             max-width: 1280px;
             margin: 30px auto;
             padding: 24px;
-            background: linear-gradient(180deg, #0b1220, #020617);
+            background: linear-gradient(180deg, var(--panel), var(--panel2));
             border: 1px solid var(--border);
             border-radius: var(--radius);
             box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
@@ -138,19 +138,7 @@ include 'static.php';
         .grid {
             display: grid;
             gap: 26px;
-            grid-template-columns: repeat(2, 1fr);
-        }
-
-        /* last chart spans full row */
-        .grid .card:last-child {
-            grid-column: 1/-1;
-        }
-
-        /* mobile */
-        @media(max-width:900px) {
-            .grid {
-                grid-template-columns: 1fr;
-            }
+            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
         }
 
         /* CARD */
@@ -160,49 +148,135 @@ include 'static.php';
             border-radius: var(--radius);
             background: rgba(255, 255, 255, .02);
             border: 1px solid var(--border);
-            backdrop-filter: blur(4px);
+        }
+
+        .card.wide {
+            grid-column: 1/-1
         }
 
         .card h3 {
             margin: 0 0 16px;
-            font-size: 18px;
-            letter-spacing: .3px;
+            font-size: 17px;
             font-weight: 600;
             color: #f1f5f9;
         }
 
-        /* CHART AREA */
+        /* DROPDOWN ROW */
 
-        .chart-wrap {
+        .dropdown-container {
+            display: flex;
+            align-items: center;
+            gap: 16px;
+            margin-bottom: 16px;
+            flex-wrap: wrap;
+        }
+
+        .dropdown-label {
+            min-width: 170px;
+            color: var(--muted);
+            font-size: 14px;
+        }
+
+        .dropdown select {
+            padding: 10px 14px;
+            border-radius: 10px;
+            border: 1px solid var(--border);
+            background: #020617;
+            color: var(--text);
+            min-width: 180px;
+        }
+
+        /* INPUT ROW BLOCK (URL rows etc) */
+
+        .input-container {
+            display: flex;
+            gap: 14px;
+            flex-wrap: wrap;
+            margin-bottom: 16px;
+            align-items: flex-end;
+        }
+
+        .input-container .input-group {
+            flex: 1 1 260px;
+            margin: 0;
+        }
+
+        /* INPUT */
+
+        .input-group {
             position: relative;
+            margin-bottom: 18px;
+        }
+
+        .input-group input {
             width: 100%;
-            height: clamp(260px, 28vh, 420px);
+            padding: 14px 12px;
+            border-radius: 10px;
+            border: 1px solid var(--border);
+            background: #020617;
+            color: var(--text);
+            font-size: 14px;
         }
 
-        .chart-wrap canvas {
-            width: 100% !important;
-            height: 100% !important;
+        .input-group input:focus {
+            border-color: var(--accent);
+            box-shadow: 0 0 0 2px rgba(56, 189, 248, .15);
+            outline: none;
         }
 
-        /* GPU chart double height */
-        .grid .card:last-child .chart-wrap {
-            height: clamp(420px, 50vh, 720px);
+        .input-group label {
+            position: absolute;
+            left: 12px;
+            top: 50%;
+            transform: translateY(-50%);
+            font-size: 13px;
+            color: var(--muted);
+            background: #020617;
+            padding: 0 6px;
+            transition: .2s;
         }
 
-        /* TEXT */
-
-        .muted {
-            color: var(--muted)
+        .input-group input:focus+label,
+        .input-group input:not(:placeholder-shown)+label {
+            top: -7px;
+            font-size: 11px;
+            color: var(--accent);
         }
 
-        #lastUpdate,
-        #lastCpu,
-        #lastRam,
-        #lastGpu,
-        #lastIn,
-        #lastOut {
+        /* CHECKBOX */
+
+        .checkbox-group {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            white-space: nowrap;
+        }
+
+        .checkbox-group input {
+            width: 18px;
+            height: 18px;
+            accent-color: #38bdf8;
+        }
+
+        .checkbox-group label {
+            font-size: 14px;
+            color: var(--muted);
+        }
+
+        /* BUTTON */
+
+        button[type="submit"] {
+            background: linear-gradient(90deg, #ef4444, #dc2626);
+            color: white;
+            padding: 12px 24px;
+            border: none;
+            border-radius: 10px;
             font-weight: 600;
-            color: #e2e8f0;
+            cursor: pointer;
+        }
+
+        button[type="submit"]:hover {
+            opacity: .9
         }
 
         /* FOOTER */
@@ -229,15 +303,23 @@ include 'static.php';
             font-size: 14px;
         }
 
+        .footer-box strong {
+            color: #e2e8f0
+        }
+
         .phone {
             color: #38bdf8;
-            text-decoration: none;
+            text-decoration: none
         }
 
         .phone:hover {
             text-decoration: underline
         }
 
+        .muted {
+            color: #94a3b8
+        }
+
         .heart {
             color: #ef4444;
             animation: pulse 1.4s infinite;
@@ -256,6 +338,498 @@ include 'static.php';
                 opacity: .6
             }
         }
+
+        /* MOBILE */
+
+        @media(max-width:700px) {
+            .site-header nav {
+                gap: 14px
+            }
+
+            .page-wrap {
+                padding-top: 180px
+            }
+
+            .footer-box {
+                flex-direction: column;
+                text-align: center
+            }
+        }
+
+        /* CONTACT PAGE */
+
+        .card ul {
+            margin: 10px 0 0 18px;
+            padding: 0;
+            line-height: 1.7;
+            color: #cbd5e1;
+            font-size: 15px;
+        }
+
+        .card ul li {
+            margin-bottom: 8px;
+        }
+
+        .card p {
+            margin: 6px 0;
+            line-height: 1.6;
+            color: #cbd5e1;
+            font-size: 15px;
+        }
+
+        /* SOCIAL ICON ROW */
+
+        .social-row {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 14px;
+            margin-top: 10px;
+            justify-content: center;
+        }
+
+        .social-btn {
+            width: 58px;
+            height: 58px;
+            display: grid;
+            place-items: center;
+            border-radius: 14px;
+            background: rgba(255, 255, 255, .03);
+            border: 1px solid rgba(255, 255, 255, .08);
+            color: #cbd5e1;
+            transition: .25s;
+            text-decoration: none;
+        }
+
+        .social-btn:hover {
+            transform: translateY(-4px) scale(1.05);
+            background: linear-gradient(135deg, #0ea5e9, #6366f1);
+            color: white;
+            box-shadow: 0 10px 25px rgba(0, 0, 0, .45);
+        }
+
+        .social-btn svg {
+            width: 24px;
+            height: 24px;
+            display: block;
+        }
+
+        /* CONTACT CARD HEADINGS */
+
+        .card.wide h3 {
+            border-bottom: 1px solid rgba(255, 255, 255, .08);
+            padding-bottom: 8px;
+            margin-bottom: 14px;
+        }
+
+        /* ADDRESS BLOCK */
+
+        .card p br {
+            margin-bottom: 6px;
+        }
+
+        /* MOBILE TUNING */
+
+        @media(max-width:600px) {
+            .social-row {
+                gap: 10px;
+            }
+
+            .social-btn {
+                width: 50px;
+                height: 50px;
+            }
+        }
+
+        /* ===== FIREWALL PAGE ADDON ===== */
+
+        /* section title */
+        .card h2 {
+            margin: 0 0 18px;
+            font-size: 18px;
+            font-weight: 600;
+            border-bottom: 1px solid var(--border);
+            padding-bottom: 8px;
+            color: #f1f5f9;
+        }
+
+        /* form rows */
+        .row {
+            margin-bottom: 18px;
+        }
+
+        /* label */
+        .row label {
+            display: block;
+            font-size: 14px;
+            font-weight: 600;
+            margin-bottom: 6px;
+            color: var(--muted);
+        }
+
+        /* textarea fields */
+        textarea {
+            width: 100%;
+            padding: 14px 12px;
+            border-radius: 10px;
+            border: 1px solid var(--border);
+            background: #020617;
+            color: var(--text);
+            font-size: 14px;
+            resize: vertical;
+            transition: .2s;
+        }
+
+        textarea:focus {
+            outline: none;
+            border-color: var(--accent);
+            box-shadow: 0 0 0 2px rgba(56, 189, 248, .15);
+        }
+
+        /* helper hint */
+        .row small {
+            display: block;
+            margin-top: 6px;
+            font-size: 12px;
+            color: #64748b;
+        }
+
+        /* invalid highlight */
+        textarea:invalid {
+            border-color: #ef4444;
+        }
+
+        /* submit button spacing */
+        .card form button {
+            margin-top: 18px;
+        }
+
+        /* smooth card spacing for stacked ports */
+        .row:not(:last-child) {
+            padding-bottom: 12px;
+            border-bottom: 1px dashed rgba(255, 255, 255, .05);
+        }
+
+        /* mobile optimization */
+        @media(max-width:600px) {
+            .card h2 {
+                font-size: 16px
+            }
+
+            textarea {
+                font-size: 13px
+            }
+        }
+
+        /* ===== PASSWORD PAGE GLOBAL STYLES ===== */
+
+        .password-form {
+            max-width: 520px;
+            margin-top: 10px;
+        }
+
+        .password-form .field {
+            margin-bottom: 18px;
+        }
+
+        .password-form label {
+            display: block;
+            font-size: 14px;
+            font-weight: 600;
+            margin-bottom: 6px;
+            color: var(--muted);
+        }
+
+        .password-form input {
+            width: 100%;
+            padding: 14px 12px;
+            border-radius: 10px;
+            border: 1px solid var(--border);
+            background: #020617;
+            color: var(--text);
+            font-size: 14px;
+            transition: .2s;
+        }
+
+        .password-form input:focus {
+            outline: none;
+            border-color: var(--accent);
+            box-shadow: 0 0 0 2px rgba(56, 189, 248, .15);
+        }
+
+        .password-form input:invalid {
+            border-color: #ef4444;
+        }
+
+        /* divider between fields */
+        .password-form .field:not(:last-of-type) {
+            padding-bottom: 14px;
+            border-bottom: 1px dashed rgba(255, 255, 255, .05);
+        }
+
+        /* strength bar container */
+        .strength {
+            margin-top: 8px;
+            height: 8px;
+            border-radius: 6px;
+            background: #111827;
+            overflow: hidden;
+            border: 1px solid var(--border);
+        }
+
+        /* strength fill */
+        .strength-bar {
+            height: 100%;
+            width: 0%;
+            background: #ef4444;
+            transition: .3s;
+        }
+
+        /* strength text */
+        .strength-text {
+            font-size: 12px;
+            margin-top: 6px;
+            color: #94a3b8;
+        }
+
+        /* colors by strength */
+        .strength-weak {
+            background: #ef4444
+        }
+
+        .strength-medium {
+            background: #f59e0b
+        }
+
+        .strength-good {
+            background: #22c55e
+        }
+
+        .strength-strong {
+            background: linear-gradient(90deg, #22c55e, #38bdf8);
+        }
+
+        /* show password toggle */
+        .pass-toggle {
+            position: absolute;
+            right: 12px;
+            top: 50%;
+            transform: translateY(-50%);
+            cursor: pointer;
+            font-size: 13px;
+            color: #94a3b8;
+            user-select: none;
+        }
+
+        .pass-wrap {
+            position: relative;
+        }
+
+        /* mobile */
+        @media(max-width:600px) {
+            .password-form {
+                max-width: 100%
+            }
+        }
+
+        /* ===== CERT REQUEST PAGE ADDON ===== */
+
+        /* wrapper */
+        .wrap {
+            width: 100%;
+        }
+
+        /* labels */
+        .wrap label {
+            display: block;
+            margin-top: 14px;
+            font-size: 14px;
+            font-weight: 600;
+            color: var(--muted);
+        }
+
+        /* inputs */
+        .wrap input[type=text],
+        .wrap input[type=email],
+        .wrap select {
+            width: 100%;
+            padding: 14px 12px;
+            border-radius: 10px;
+            border: 1px solid var(--border);
+            background: #020617;
+            color: var(--text);
+            font-size: 14px;
+            transition: .2s;
+        }
+
+        .wrap input:focus,
+        .wrap select:focus {
+            outline: none;
+            border-color: var(--accent);
+            box-shadow: 0 0 0 2px rgba(56, 189, 248, .15);
+        }
+
+        /* grid row */
+        .wrap .row {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 16px;
+            margin-top: 12px;
+        }
+
+        /* checkbox block */
+        .wrap .checkbox {
+            display: flex;
+            gap: 10px;
+            margin-top: 18px;
+            align-items: flex-start;
+        }
+
+        .wrap .checkbox input {
+            margin-top: 4px;
+            accent-color: #38bdf8;
+        }
+
+        /* links */
+        .wrap .links {
+            margin-top: 14px;
+            font-size: 14px;
+        }
+
+        .wrap .links a {
+            color: #38bdf8;
+            text-decoration: none;
+        }
+
+        .wrap .links a:hover {
+            text-decoration: underline;
+        }
+
+        /* buttons row */
+        .wrap .actions {
+            display: flex;
+            gap: 12px;
+            margin-top: 18px;
+        }
+
+        .wrap .ghost {
+            background: transparent;
+            border: 1px solid var(--border);
+            color: var(--text);
+        }
+
+        /* info note box */
+        .wrap .note {
+            margin-top: 20px;
+            padding: 16px;
+            border-radius: var(--radius);
+            background: rgba(255, 255, 255, .03);
+            border: 1px solid var(--border);
+            font-size: 13px;
+            line-height: 1.6;
+        }
+
+        /* code block */
+        .wrap pre {
+            margin-top: 10px;
+            padding: 12px;
+            border-radius: 10px;
+            background: #020617;
+            border: 1px dashed var(--border);
+            color: #cbd5e1;
+            font-size: 13px;
+        }
+
+        /* responsive */
+        @media(max-width:700px) {
+            .wrap .row {
+                grid-template-columns: 1fr;
+            }
+        }
+
+        /* ===== NOTE BLOCK FIX ===== */
+
+        .card .note {
+            margin-top: 22px;
+            padding: 18px;
+            border-radius: 14px;
+            background: linear-gradient(180deg, #020617, #020617);
+            border: 1px solid var(--border);
+            color: #cbd5e1;
+            font-size: 14px;
+            line-height: 1.65;
+        }
+
+        /* title */
+        .card .note strong {
+            display: block;
+            margin-bottom: 10px;
+            font-size: 15px;
+            color: #e2e8f0;
+        }
+
+        /* code block inside note */
+        .card .note pre {
+            margin-top: 12px;
+            padding: 14px;
+            tab-size: 4;
+            letter-spacing: .2px;
+            border-radius: 12px;
+            background: #010409;
+            border: 1px dashed rgba(255, 255, 255, .08);
+            color: #94a3b8;
+            font-size: 13px;
+            line-height: 1.6;
+
+            white-space: pre-wrap;
+            /* allow wrapping */
+            word-break: break-word;
+            /* break long strings */
+            overflow-wrap: anywhere;
+            /* modern wrap support */
+        }
+
+        /* ===== CHART SIZE + READABILITY ===== */
+
+        /* chart container */
+        .chart-wrap {
+            position: relative;
+            height: 320px;
+            margin-top: 6px;
+        }
+
+        /* canvas fill container */
+        .chart-wrap canvas {
+            width: 100% !important;
+            height: 100% !important;
+        }
+
+        /* make charts visually clearer */
+        .card {
+            backdrop-filter: blur(4px);
+        }
+
+        /* slightly brighter panel for readability */
+        .containerindex {
+            background: linear-gradient(180deg, #0b1220, #020617);
+        }
+
+        /* headings easier to read */
+        .card h3 {
+            font-size: 18px;
+            letter-spacing: .3px;
+        }
+
+        /* metrics footer row readability */
+        #lastUpdate,
+        #lastCpu,
+        #lastRam,
+        #lastGpu,
+        #lastIn,
+        #lastOut {
+            font-weight: 600;
+            color: #e2e8f0;
+        }
+
     </style>
 
 </head>