<!DOCTYPE html>
<html lang="en">
    <!--@thymesVar id="citationSession" type="com.sensysgatso.selfserviceportal.view.CitationSession"-->
    <!--@thymesVar id="cityConfiguration" type="com.sensysgatso.selfserviceportal.data.entities.CityConfiguration"-->
    <!--@thymesVar id="gatsoConfiguration" type="com.sensysgatso.selfserviceportal.config.GatsoConfiguration"-->
    <head><head>
        <title>Welcome to the Citation Processing Center</title>

        <meta charset="utf-8" />
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <meta name="description" content="Evidence Viewer" />
        <meta name="keywords" content="Evidence Viewer" />

        <meta property="og:image" content="/images/imagesrc.jpg" />
        <meta property="og:title" content="Citations Processing Center" />
        <meta property="og:description" content="Evidence Viewer" />

        <link rel="shortcut icon" href="/images/favicon.png" />
        <link rel="image_src" type="image/jpeg" href="/images/imagesrc.jpg" />

        <link href="https://fonts.googleapis.com/css?family=Nunito:400,300" rel="stylesheet" type="text/css" />
        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />

        
            <link rel="stylesheet" href="/js/lib/mediaelement/build/mediaelementplayer.min.css" type="text/css" />
            <link rel="stylesheet" href="/min/site.min.css" type="text/css" />
        
    </head></head>

    <body class="login">
        

        <header class="login">
            <div class="container">
                <div class="header-inner">
                    <div class="pagetitle has-logo">
                        <div>
                            <a href="#"><img src="/images/logo.png" height="60" width="55" alt="Site Logo" /></a>
                        </div>
                        <h1><span>Welcome to the</span>Citation Processing Center</h1>
                    </div>
                </div>
            </div>
        </header>

        <section id="login" role="main">
            <div class="container">
                <div id="loginblock">
                    <div class="content">
                        <div class="form">
                            <form action="/login" method="post">
                                <div class="row row-2">
                                    <div class="col">
                                        <h2>Login</h2>
                                        <p class="text-explain">Here you may review your citation evidence. To begin, please enter your Citation Number and PIN.</p>
                                        <div class="form-group mt30">
                                            <div class="form-error" id="citationnumberError" aria-live="polite">
                                                Please fill in your citation number
                                            </div>
                                            <label for="txtNumber">Citation Number</label>
                                            <input
                                                class="form-control"
                                                id="txtNumber"
                                                type="text"
                                                dir="ltr"
                                                placeholder="0XX.000XXXXXXX"
                                                aria-describedby="citationnumberError"
                                                aria-required="true"
                                                aria-invalid="true" name="number" value=""
                                            />
                                        </div>

                                        <div class="form-group">
                                            <div class="form-error" id="pinError" aria-live="polite">Please fill in your password</div>
                                            <label for="txtPin">PIN</label>
                                            <input
                                                class="form-control"
                                                id="txtPin"
                                                type="password"
                                                dir="ltr"
                                                aria-required="true"
                                                aria-invalid="true"
                                                aria-describedby="pinError" name="pin" value=""
                                            />
                                        </div>

                                        <div class="form-buttons">
                                            <button type="submit" class="button button-main">
                                                <span class="button-text">Log in</span>
                                                <span class="button-icon">
                                                    <i class="material-icons">keyboard_arrow_right</i>
                                                </span>
                                            </button>
                                        </div>
                                    </div>

                                    <div class="col col-separated mt90">
                                        <h3 class="sec">Having trouble logging in?</h3>
                                        <p class="text-explain">If you are having trouble logging in, please contact the Citation Processing Center at the number on the violation notice.</p>
                                        <a class="button mt30" href="/faq">Frequently asked questions</a>
                                        <h3 class="mt30 sec">Payment options</h3>
                                        <img src="/images/paymentoptions.png" alt="Visa &amp; Mastercard" />
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>

            <div class="push"></div>
        </section>

        <div><footer>
            <div id="footer">
                <div class="footer-inner">
                    <div class="left">
                        <a href="/terms">Privacy and Terms of Use</a>
                    </div>
                    <div class="right">
                        <span>Copyright © Citation Processing Center 2026</span>
                    </div>
                </div>
            </div>
        </footer></div>
        
            <script src="/js/lib/jquery/dist/jquery.js"></script>
            <script src="/js/lib/mediaelement/build/mediaelement-and-player.min.js"></script>
            <script src="/js/app/components/notice.js"></script>
            <script src="/js/app/main.js"></script>
        
        <script>
            (function () {
                function validateField(input) {
                    const group = input.closest(".form-group");
                    if (!input.value.trim()) {
                        group.classList.add("has-error");
                        input.setAttribute("aria-invalid", "true");
                    } else {
                        group.classList.remove("has-error");
                        input.setAttribute("aria-invalid", "false");
                    }
                }

                const inputs = document.querySelectorAll('.form-group input[aria-required="true"]');
                inputs.forEach((input) => {
                    input.addEventListener("blur", () => validateField(input));

                    input.addEventListener("input", () => validateField(input));
                });

                const form = document.querySelector("form");
                form.addEventListener("submit", (e) => {
                    let valid = true;
                    inputs.forEach((input) => {
                        validateField(input);
                        if (!input.value.trim()) valid = false;
                    });
                    if (!valid) {
                        e.preventDefault();
                        form.querySelector('input[aria-invalid="true"]').focus();
                    }
                });
            })();
        </script>
    </body>
</html>
