code/sidepanel.html

<!DOCTYPE html>
<html>
  <head>
    <title>Runway Video Generator</title>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,500;1,9..40,500&display=swap"
      rel="stylesheet"
    />
    <style>
      body {
        font-family: "DM Sans", sans-serif;
        font-optical-sizing: auto;
        font-weight: 500;
        font-style: normal;
        padding: 20px;
        color: #0c0c0c;
        font-size: 13px;
      }
      #videoContainer {
        margin-top: 20px;
        position: relative;
      }
      .remove-button {
        position: absolute;
        top: 10px;
        right: 10px;
        background-color: #fff;
        width: 36px;
        height: 36px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        border: none;
        opacity: 0;
      }
      .remove-button:hover {
        background-color: rgba(255, 255, 255, 0.5);
      }
      .remove-button svg {
        fill: #0c0c0c;
        pointer-events: none; /* prevent svg from capturing click events */
      }
      .video-wrapper {
        position: relative;
        margin-bottom: 20px;
        align-items: flex-end;
        display: flex;
        flex-direction: column;
      }
      .video-wrapper:hover .remove-button {
        opacity: 1;
      }
      video {
        max-width: 100%;
      }
      #apiKeyForm {
        margin-bottom: 20px;
      }
      #apiKey {
        width: 250px;
      }
      .image-container {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0;
        margin-bottom: 8px;
      }
      .loader {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .remove-video:hover {
        background-color: rgba(255, 0, 0, 1);
      }
    </style>
  </head>
  <body>
    <div id="apiKeyForm" style="display: none">
      <label for="apiKey">Enter your Runway API Key:</label>
      <input type="password" id="apiKey" required />
      <button id="saveApiKey">Save</button>
    </div>
    <div id="status">
      Right click on an image and select "Generate video with Runway" to
      generate a video.
    </div>
    <div id="videoContainer"></div>
    <script src="sidepanel.js"></script>
  </body>
</html>