150 lines
3.9 KiB
HTML
150 lines
3.9 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>Launch App Settings</title>
|
|
<link rel="stylesheet" href="sdpi.css" />
|
|
|
|
<style>
|
|
html, body {
|
|
margin: 0;
|
|
padding: 0;
|
|
width: 100%;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
body {
|
|
padding: 12px 10px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* SDPI Webkit Scrollbar Styling */
|
|
::-webkit-scrollbar {
|
|
width: 6px;
|
|
height: 6px;
|
|
}
|
|
::-webkit-scrollbar-track {
|
|
background: #1e1e1e;
|
|
border-radius: 3px;
|
|
}
|
|
::-webkit-scrollbar-thumb {
|
|
background: #4a4a4a;
|
|
border-radius: 3px;
|
|
}
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: #666666;
|
|
}
|
|
|
|
.custom-select {
|
|
width: 100%;
|
|
height: 28px;
|
|
background-color: #383838;
|
|
border: 1px solid #1e1e1e;
|
|
border-radius: 3px;
|
|
color: #e2e2e2;
|
|
padding: 0 8px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
cursor: pointer;
|
|
box-sizing: border-box;
|
|
}
|
|
.custom-select:hover { background-color: #424242; }
|
|
|
|
.selected-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.selected-item img, .option-item img {
|
|
width: 16px;
|
|
height: 16px;
|
|
object-fit: contain;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.icon-placeholder {
|
|
width: 16px;
|
|
height: 16px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.options-menu {
|
|
position: absolute;
|
|
top: 30px;
|
|
left: 0;
|
|
right: 0;
|
|
max-height: 180px;
|
|
overflow-y: auto;
|
|
background-color: #232323;
|
|
border: 1px solid #1e1e1e;
|
|
border-radius: 3px;
|
|
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.6);
|
|
z-index: 9999;
|
|
display: none;
|
|
}
|
|
.options-menu.open { display: block; }
|
|
|
|
.option-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 6px 10px;
|
|
cursor: pointer;
|
|
font-size: 11px;
|
|
color: #d8d8d8;
|
|
}
|
|
.option-item:hover { background-color: #0078d4; color: #ffffff; }
|
|
|
|
.dropdown-separator {
|
|
height: 1px;
|
|
background-color: #1e1e1e;
|
|
margin: 4px 0;
|
|
}
|
|
|
|
.checkbox-container {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
font-size: 11px;
|
|
color: #e2e2e2;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
}
|
|
.checkbox-container input {
|
|
cursor: pointer;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="sdpi-item">
|
|
<div class="sdpi-item-label">App:</div>
|
|
<div class="sdpi-item-value">
|
|
<div id="selectTrigger" class="custom-select">
|
|
<div id="selectedDisplay" class="selected-item">
|
|
<span class="icon-placeholder"></span>
|
|
<span>Scanning apps...</span>
|
|
</div>
|
|
<span style="font-size: 9px; color: #a0a0a0;">▼</span>
|
|
</div>
|
|
<div id="optionsMenu" class="options-menu"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="sdpi-item">
|
|
<div class="sdpi-item-label">Option:</div>
|
|
<div class="sdpi-item-value">
|
|
<label class="checkbox-container">
|
|
<input type="checkbox" id="bringToFront" checked />
|
|
Bring to front if already running
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="launch-app.js"></script>
|
|
</body>
|
|
</html> |