<!--
                 ██████████████████████████████████████                                                                            
               ██████████████████████████████████████████                                                                          
             ██████████████████████████████████████████████                                                                        
                                ███████                                                                                            
███████████████████████████████ ███████ ██████               ██████ ████████████████████████████████ █████████████████             
███████████████████████████████ ███████ ██████               ██████ ████████████████████████████████ ███████████████████           
███████████████████████████████ ███████ ██████               ██████ ████████████████████████████████ █████████████████████         
██████                          ███████ ██████               ██████ ██████                           ██████        █████████       
██████ ███████████████████████  ███████ ███████████████████████████ ██████  ███████████████████████  ██████ ██████████████████     
██████ ███████████████████████  ███████ ███████████████████████████ ██████  ███████████████████████  ██████ ████████████████████   
██████ ███████████████████████  ███████ ███████████████████████████ ██████  ███████████████████████  ██████ ██████████████████████ 
██████                          ███████ ██████               ██████ ██████                           ██████  █████████             
███████████████████████████████ ███████ ██████               ██████ ███████████████████████████████████████    █████████           
███████████████████████████████ ███████ ██████               ██████ ███████████████████████████████████████      █████████         
███████████████████████████████ ███████ ██████               ██████ ███████████████████████████████████████        █████████       
                                ███████                                                                              █████████     
                                ███████                                                                                █████████   
                                ███████                                                                                 █████████  
                                ███████                                                                                   █████████
                                                                                                                                   
██       ██     ██       ██████          ██     █         █████        ███████        ██████        ██        ███████        ██████
██       ████   ██       ██    ██        ██     █        █               ██           █    ██       ██        ██             █     
██       ██ ██  ██       ██     ██       ██     █        █████           ██           ███████       ██        ███████        █████ 
██       ██   ████       ██     █        ██     █             ██         ██           █  ██         ██        ██                  █
██       ██    ███       ███████          ██████         ███ ██          ██           █    ██       ██        ███████        ██████
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Citizen Portal | Ether Industries</title>
    <link rel="stylesheet" href="new-styles.css">
    <!-- Google tag (gtag.js) -->
    <script
      async
      src="https://www.googletagmanager.com/gtag/js?id=G-HF94ERD236"
    ></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag() {
        dataLayer.push(arguments);
      }
      gtag("js", new Date());
      gtag("config", "G-HF94ERD236");
    </script>
    <!-- Meta Pixel Code -->
    <script>
      !(function (f, b, e, v, n, t, s) {
        if (f.fbq) return;
        n = f.fbq = function () {
          n.callMethod
            ? n.callMethod.apply(n, arguments)
            : n.queue.push(arguments);
        };
        if (!f._fbq) f._fbq = n;
        n.push = n;
        n.loaded = !0;
        n.version = "2.0";
        n.queue = [];
        t = b.createElement(e);
        t.async = !0;
        t.src = v;
        s = b.getElementsByTagName(e)[0];
        s.parentNode.insertBefore(t, s);
      })(
        window,
        document,
        "script",
        "https://connect.facebook.net/en_US/fbevents.js"
      );
      fbq("init", "441544000099336");
      fbq("track", "PageView");
    </script>
    <noscript
      ><img
        height="1"
        width="1"
        style="display: none"
        src="https://www.facebook.com/tr?id=441544000099336&ev=PageView&noscript=1"
    /></noscript>
    <!-- End Meta Pixel Code -->
</head>
<body>
    <div class="container">
        <!-- Header Section -->
        <header>
            <a href="index.html">
                <img src="ETHER-INDUSTRIES.svg" alt="Ether Industries Logo" class="logo">
            </a>
            <p class="tagline">INNOVATING BEYOND TOMORROW</p>
        </header>

        <!-- Login Form Section -->
        <main class="login-page">
            <h1>CITIZEN PORTAL</h1>
            <form id="login-form">
                <div class="form-group">
                    <label for="username">Username</label>
                    <input type="text" id="username" value="citizen_52022041" readonly>
                </div>
                <div class="form-group">
                    <label for="password">Password</label>
                    <input type="password" id="password" placeholder="Enter password">
                        <div class="auto-fill-box" id="auto-fill-box">
                            <div class="top-section">
                                <div class="key-icon">🔑</div>
                                <div class="auto-fill-text">
                                    <span class="auto-fill-username">citizen_52022041</span>
                                    <span class="auto-fill-password">●●●●●●●●●</span>
                                </div>
                            </div>
                            <hr class="divider">
                            <div class="auto-fill-footer">AI auto-fill password</div>
                        </div>
                    <p id="hint" class="hint"></p>
                </div>
                <button type="submit">Login</button>
            </form>
        </main>

        <!-- Footer -->
        <footer>
            <p>© 2025 Ether Industries. All rights reserved.</p>
        </footer>
    </div>
    <script src="login.js"></script>
</body>
</html>