src/main/resources/static/index.html

<!DOCTYPE html>
<html ng-app="PluginManager">
<head>
    <meta charset="UTF-8">
    <title>Gerrit Plugin Manager</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
    <script src="js/plugin-manager.js"></script>
    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap" rel="stylesheet">
    <link href="../../../styles/fonts.css" rel="stylesheet">
    <link href="css/intro.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
</head>

<body ng-controller="LoadInstalledPlugins as plugins">

  <header>
      <div class="header-container">
          <div class="header-title">Gerrit</div>
          <input type="text" class="search-input" placeholder="Search for plugins..." ng-model="searchPlugin">
          <button type="button" class="skip-btn" style="border: none; cursor: pointer;" ng-click="plugins.goToGerrit()">
              Done &raquo; Go To Gerrit
          </button>
      </div>
  </header>

  <main>
      <div class="hero-section">
          <div class="hero-header">
              <img src="images/diffy-gerrit-code-review.png" alt="Gerrit Diffy" class="hero-image">
              <h2 class="hero-title">Plugin Manager</h2>
          </div>
      </div>

      <div class="search-container">
          <p class="hero-intro-text">
              Browse, install, and keep your Gerrit Code Review environment up to date with the latest plugins built
              on <a href="https://gerrit-ci.gerritforge.com/plugin-manager/">Gerrit-CI</a>.
          </p>
      </div>

      <div class="features-section">
          <!-- Plugin Feature Cards with dynamic border/shading via ng-class -->
          <div class="feature-card"
               ng-repeat="prop in plugins.list | filter:searchPlugin"
               ng-class="{
               'card-installable': prop.version == '' && prop.update_version != undefined,
               'card-upgradable': prop.version != '' && prop.update_version != ''
             }">

              <!-- Icon and Title Wrapper -->
              <div class="plugin-header">
                  <div class="plugin-icon-wrapper">
                      <!-- SVG Plug Icon -->
                      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
                           stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                          <path d="M12 22v-5"/>
                          <path d="M9 8V2"/>
                          <path d="M15 8V2"/>
                          <path d="M18 8v5a4 4 0 0 1-4 4h-4a4 4 0 0 1-4-4V8Z"/>
                      </svg>
                  </div>
                  <h3 class="feature-title">{{prop.id}}</h3>
              </div>

              <div class="version-info">
                  <span>Version: {{prop.version || 'Not installed'}}</span>
                  <div ng-if="prop.update_version" class="update-info"
                       ng-style="prop.version != '' ? {'color': '#f97316'} : {}">
                      <svg style="width: 14px; height: 14px; display: inline-block; vertical-align: middle; margin-right: 4px;"
                           fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path>
                      </svg>
                      Update available: {{prop.update_version}}
                  </div>
              </div>

              <p class="feature-text">{{prop.description.split('.')[0]}}</p>

              <div class="feature-footer">
                    <div class="feature-actions">
                        <!-- Status Labels -->
                        <span id="installing-{{prop.id}}" class="status-label status-default hidden">Installing...</span>
                        <span id="installed-{{prop.id}}"
                              class="status-label status-success {{ (prop.version != '' && prop.update_version == '') ? '':'hidden' }}">Up to date</span>
                        <span id="failed-{{prop.id}}" class="status-label status-warning hidden">Failed</span>

                        <!-- Action Buttons -->
                        <button id="install-{{prop.id}}" type="button"
                                class="install-btn card-btn {{ (prop.version == '' && prop.update_version != undefined) ? '':'hidden' }}"
                                ng-click="install(prop.id,prop.url)">
                            Install
                        </button>

                        <button id="upgrade-{{prop.id}}" type="button"
                                class="install-btn card-btn {{ (prop.version != '' && prop.update_version != '') ? '':'hidden' }}"
                                style="{{ (prop.version != '' && prop.update_version != '') ? 'background-color: #f97316; box-shadow: 0 4px 6px -1px rgba(249, 115, 22, 0.4);' : '' }}"
                                onmouseover="this.style.backgroundColor='#ea580c'"
                                onmouseout="this.style.backgroundColor='#f97316'"
                                ng-click="install(prop.id,prop.url)">
                            Upgrade
                        </button>
                    </div>

                    <div class="feature-license" ng-if="prop.license && prop.license.length > 0">
                        <div class="license-icon-wrapper" tabindex="0" aria-label="{{ prop.license }}">
                            <svg data-component="Octicon" aria-hidden="true" focusable="false" class="octicon octicon-law mr-2" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" display="inline-block" overflow="visible" style="vertical-align:text-bottom"><path d="M8.75.75V2h.985c.304 0 .603.08.867.231l1.29.736c.038.022.08.033.124.033h2.234a.75.75 0 0 1 0 1.5h-.427l2.111 4.692a.75.75 0 0 1-.154.838l-.53-.53.529.531-.001.002-.002.002-.006.006-.006.005-.01.01-.045.04c-.21.176-.441.327-.686.45C14.556 10.78 13.88 11 13 11a4.498 4.498 0 0 1-2.023-.454 3.544 3.544 0 0 1-.686-.45l-.045-.04-.016-.015-.006-.006-.004-.004v-.001a.75.75 0 0 1-.154-.838L12.178 4.5h-.162c-.305 0-.604-.079-.868-.231l-1.29-.736a.245.245 0 0 0-.124-.033H8.75V13h2.5a.75.75 0 0 1 0 1.5h-6.5a.75.75 0 0 1 0-1.5h2.5V3.5h-.984a.245.245 0 0 0-.124.033l-1.289.737c-.265.15-.564.23-.869.23h-.162l2.112 4.692a.75.75 0 0 1-.154.838l-.53-.53.529.531-.001.002-.002.002-.006.006-.016.015-.045.04c-.21.176-.441.327-.686.45C4.556 10.78 3.88 11 3 11a4.498 4.498 0 0 1-2.023-.454 3.544 3.544 0 0 1-.686-.45l-.045-.04-.016-.015-.006-.006-.004-.004v-.001a.75.75 0 0 1-.154-.838L2.178 4.5H1.75a.75.75 0 0 1 0-1.5h2.234a.249.249 0 0 0 .125-.033l1.288-.737c.265-.15.564-.23.869-.23h.984V.75a.75.75 0 0 1 1.5 0Zm2.945 8.477c.285.135.718.273 1.305.273s1.02-.138 1.305-.273L13 6.327Zm-10 0c.285.135.718.273 1.305.273s1.02-.138 1.305-.273L3 6.327Z"></path></svg>
                        </div>
                        <span class="license-popup">{{ prop.license }}</span>
                    </div>
              </div>
          </div>
      </div>
  </main>

  <footer>
      <p class="footer-text">
          Gerrit Code Review - Copyright &copy; 2026 The Android Open Source Project - Licensed under the Apache License,
          Version 2.0.
      </p>
  </footer>

</body>
</html>