⚙️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()">×</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>Last updated