# HTML/CSS/JS

````
```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css">
    <title>Infiniti Multijob</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        .menu {
            display: none;
            position: fixed;
            bottom: 20px;
            right: 50px;
            width: 400px;
            height: 600px;
            border-radius: 10px;
            background-color: rgb(34, 32, 32);
            box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
            border: 2px solid rgb(54, 53, 53);
            flex-direction: column;
            z-index: 1000;
        }
        .menu-header {
            padding: 10px;
            color: white;
            font-size: 20px;
            font-weight: bold;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px solid rgb(54, 53, 53);
            cursor: move;
        }
        .menu-header i {
            font-size: 24px;
            vertical-align: middle;
        }
        .menu-header span {
            margin-left: 6px;
            vertical-align: middle;
        }
        .close-button {
            background: none;
            border: none;
            color: white;
            font-size: 35px;
            cursor: pointer;
            padding: 5px;
            position: absolute;
            right: 10px;
        }
        .status-section {
            background-color: rgba(255, 0, 0, 0.349);
            padding: 10px;
            border-radius: 3px;
            margin: 10px;
            text-align: center;
            color: white;
            font-size: 18px;
            font-weight: bold;
            box-shadow: rgba(122, 0, 0, 0.35) 0px 5px 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .status-section-job {
            background-color: rgba(255, 0, 76, 0.247);
            padding: 10px;
            border-radius: 3px;
            margin: 10px;
            text-align: center;
            color: white;
            font-size: 18px;
            font-weight: bold;
            box-shadow: rgba(122, 0, 116, 0.35) 0px 5px 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: relative;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
        .rainbow-hover {
            font-size: 16px;
            font-weight: 700;
            color: #ff7576;
            background-color: #0707079d;
            border: none;
            outline: none;
            cursor: pointer;
            padding: 9px 18px;
            position: relative;
            line-height: 24px;
            border-radius: 9px;
            transform-style: preserve-3d;
            transform: scale(var(--s, 1)) perspective(600px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
            perspective: 600px;
            transition: transform 0.1s;
        }
        .sp {
            background: linear-gradient(90deg, #f3b3f3, #eba2e2, #f1c4aa, #ebe2ba, #e79ed5);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            display: block;
        }
        .rainbow-hover:active {
            transition: 0.3s;
            transform: scale(0.93);
        }
        @keyframes fadeIn {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }
        @keyframes subtleBackgroundRed {
            0% {
                background-color: rgba(0, 0, 0, 0.75);
            }
            50% {
                background-color: rgba(180, 0, 0, 0.6);
            }
            100% {
                background-color: rgba(0, 0, 0, 0.75);
            }
        }
        body.show-confirmation-animation {
            animation: subtleBackgroundRed 6s infinite;
        }
        .confirmation-screen {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.75);
            z-index: 2000;
            justify-content: center;
            align-items: center;
            color: white;
            font-size: 24px;
            font-weight: bold;
            animation: fadeIn 0.3s ease-in-out;
        }
        .confirmation-box {
            background-color: rgb(34, 32, 32);
            border: 2px solid rgb(54, 53, 53);
            padding: 20px;
            border-radius: 10px;
            text-align: center;
        }
        .confirmation-buttons {
            display: flex;
            justify-content: space-around;
            margin-top: 20px;
        }
        .confirmation-buttons button {
            padding: 10px 20px;
            font-size: 18px;
            font-weight: bold;
        }
        .confirm {
            background-color: #4CAF50;
            border: none;
            color: white;
            cursor: pointer;
            border-radius: 5px;
        }
        .cancel {
            background-color: #f44336;
            border: none;
            color: white;
            cursor: pointer;
            border-radius: 5px;
        }
        .deleteButton {
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 3px;
            background-color: transparent;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.2s;
            position: absolute;
            right: 110px;
        }
        .deleteButton svg {
            width: 60%;
        }
        .deleteButton:hover {
            background-color: rgb(237, 56, 56);
            overflow: visible;
        }
        .bin path {
            transition: all 0.2s;
        }
        .deleteButton:hover .bin path {
            fill: #fff;
        }
        .deleteButton:active {
            transform: scale(0.98);
        }
        .tooltip {
            --tooltip-color: rgb(41, 41, 41);
            position: absolute;
            top: -40px;
            background-color: var(--tooltip-color);
            color: white;
            border-radius: 5px;
            font-size: 12px;
            padding: 8px 12px;
            font-weight: 600;
            box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.105);
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: all 0.5s;
        }
        .tooltip::before {
            position: absolute;
            width: 10px;
            height: 10px;
            transform: rotate(45deg);
            content: "";
            background-color: var(--tooltip-color);
            bottom: -10%;
        }
        .deleteButton:hover .tooltip {
            opacity: 1;
        }
        .menu-divider {
            border: none;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            margin: 10px;
        }
        .job-list {
            scrollbar-width: thin;
            scrollbar-color: #555555 #151515;
            max-height: calc(100% - 150px);
            overflow-y: auto;
        }
        .job-list::-webkit-scrollbar {
            width: 8px;
        }
        .job-list::-webkit-scrollbar-track {
            background: #151515;
        }
        .job-list::-webkit-scrollbar-thumb {
            background-color: #555555;
            border-radius: 20px;
            border: 2px solid #151515;
        }
        .job-list::-webkit-scrollbar-thumb:hover {
            background-color: #999999;
        }
        .button {
            width: 90px;
            height: 40px;
            position: relative;
            font-family: var(--font, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif);
            color: #ffffff;
            font-weight: 700;
            background-color: #303030;
            border: none;
            overflow: hidden;
            border-radius: 5px;
            box-shadow: rgba(0, 0, 0, 0.233) 0px 5px 7px 0px;
            transition: all ease 100ms;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
        }
        .button:hover {
            background-color: #535151;
        }
        .button:focus {
            background-color: #424242;
        }
        .button::before {
            content: '✅';
            position: absolute;
            color: #151c27;
            left: 0;
            top: -14px;
            right: 0;
            transition: all ease 300ms;
            opacity: 0%;
        }
        .button:focus::before {
            opacity: 100%;
            transform: translateY(26px);
        }
        .submit {
            transition: all ease 100ms;
            opacity: 100%;
            font-weight: 700;
            font-size: 16px;
        }
        .button:focus > .submit {
            opacity: 0%;
        }

    </style>
</head>
<body>
    <div class="menu" id="menu">
        <div class="menu-header">
           <div style="display: flex; align-items: center;">
              <i class="fa-solid fa-circle-info"></i>
              <span id="menu-title" style="margin-left: 10px;">Infiniti Multijob</span> <!-- Adjust margin-left as needed -->
           </div>
           <button class="close-button" onclick="closeMenu()">&times;</button>
        </div>
        <div class="status-section">
           <div style="display: flex; align-items: center;">
              <i class="fa-solid fa-business-time"></i>
              <span style="margin-left: 5px;" id="currentJobLabel">Unemployed</span>
           </div>
           <button class="button" onclick="handleSelectUnemployed()">
              <p class="submit">Select</p>
           </button>
        </div>
        <hr class="menu-divider">
        <div id="jobList" class="job-list"></div>
     </div>
     <div class="confirmation-screen" id="confirmationScreen">
        <div class="confirmation-box">
           <p>Are you sure you want to remove this job?</p>
           <div class="confirmation-buttons">
              <button class="confirm" onclick="confirmDeletion()">Yes</button>
              <button class="cancel" onclick="cancelDeletion()">Cancel</button>
           </div>
        </div>
     </div>
</body>
</html>
````


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://infiniti-scripts.gitbook.io/home/scripts/infin_multijob/html-css-js.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
