wip
This commit is contained in:
@@ -1,295 +0,0 @@
|
||||
<html><head><style type="text/css">
|
||||
@keyframes gridpilot-pulse {
|
||||
0%, 100% { opacity: 1; transform: scale(1); }
|
||||
50% { opacity: 0.85; transform: scale(1.03); }
|
||||
}
|
||||
|
||||
@keyframes gridpilot-spin {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
@keyframes gridpilot-slide-in {
|
||||
from { transform: translateX(100%); opacity: 0; }
|
||||
to { transform: translateX(0); opacity: 1; }
|
||||
}
|
||||
|
||||
@keyframes gridpilot-checkered {
|
||||
0% { background-position: 0 0; }
|
||||
100% { background-position: 20px 20px; }
|
||||
}
|
||||
|
||||
@keyframes gridpilot-progress {
|
||||
0% { background-position: 0% 50%; }
|
||||
100% { background-position: 100% 50%; }
|
||||
}
|
||||
|
||||
#gridpilot-overlay {
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
width: 340px;
|
||||
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
z-index: 2147483647;
|
||||
animation: gridpilot-slide-in 0.4s ease-out;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
#gridpilot-overlay * {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.gridpilot-card {
|
||||
background: #12121B;
|
||||
border-radius: 4px;
|
||||
border: 1px solid rgba(183, 183, 187, 0.2);
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.gridpilot-header {
|
||||
background: linear-gradient(90deg, #c8102e 0%, #a00d25 100%);
|
||||
padding: 10px 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.gridpilot-header::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background:
|
||||
linear-gradient(45deg, transparent 48%, rgba(255,255,255,0.05) 49%, rgba(255,255,255,0.05) 51%, transparent 52%),
|
||||
linear-gradient(-45deg, transparent 48%, rgba(255,255,255,0.05) 49%, rgba(255,255,255,0.05) 51%, transparent 52%);
|
||||
background-size: 8px 8px;
|
||||
animation: gridpilot-checkered 1.5s linear infinite;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.gridpilot-logo {
|
||||
font-size: 22px;
|
||||
animation: gridpilot-pulse 2s ease-in-out infinite;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.gridpilot-title {
|
||||
color: #ffffff;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 1.5px;
|
||||
text-transform: uppercase;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
text-shadow: 0 1px 2px rgba(0,0,0,0.3);
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.gridpilot-btn {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
color: #ffffff;
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
border-radius: 3px;
|
||||
padding: 4px 10px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.5px;
|
||||
text-transform: uppercase;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
|
||||
.gridpilot-btn:hover {
|
||||
background: rgba(255, 255, 255, 0.25);
|
||||
border-color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.gridpilot-btn:active {
|
||||
background: rgba(255, 255, 255, 0.35);
|
||||
transform: scale(0.97);
|
||||
}
|
||||
|
||||
.gridpilot-btn.paused {
|
||||
background: #4e4e57;
|
||||
border-color: #ffffff;
|
||||
color: #ffffff;
|
||||
animation: gridpilot-pulse 1s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.gridpilot-close-btn {
|
||||
background: rgba(200, 16, 46, 0.6);
|
||||
border-color: rgba(200, 16, 46, 0.8);
|
||||
}
|
||||
|
||||
.gridpilot-close-btn:hover {
|
||||
background: rgba(200, 16, 46, 0.8);
|
||||
border-color: #c8102e;
|
||||
}
|
||||
|
||||
.gridpilot-close-btn:active {
|
||||
background: #c8102e;
|
||||
}
|
||||
|
||||
.gridpilot-header-buttons {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.gridpilot-body {
|
||||
padding: 14px;
|
||||
background: #1a1a24;
|
||||
}
|
||||
|
||||
.gridpilot-status {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.gridpilot-spinner {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border: 2px solid rgba(200, 16, 46, 0.3);
|
||||
border-top-color: #c8102e;
|
||||
border-radius: 50%;
|
||||
animation: gridpilot-spin 0.8s linear infinite;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.gridpilot-spinner.paused {
|
||||
animation-play-state: paused;
|
||||
border-top-color: #777880;
|
||||
border-color: rgba(119, 120, 128, 0.3);
|
||||
}
|
||||
|
||||
.gridpilot-action-text {
|
||||
color: rgba(255, 255, 255, 0.92);
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.gridpilot-progress-container {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.gridpilot-progress-bar {
|
||||
height: 4px;
|
||||
background: rgba(78, 78, 87, 0.5);
|
||||
border-radius: 2px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.gridpilot-progress-fill {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, #c8102e, #e8304a, #c8102e);
|
||||
background-size: 200% 100%;
|
||||
animation: gridpilot-progress 2s linear infinite;
|
||||
border-radius: 2px;
|
||||
transition: width 0.4s ease-out;
|
||||
}
|
||||
|
||||
.gridpilot-progress-fill.paused {
|
||||
animation-play-state: paused;
|
||||
background: #777880;
|
||||
}
|
||||
|
||||
.gridpilot-step-info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.gridpilot-step-text {
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.gridpilot-step-count {
|
||||
color: #c8102e;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.gridpilot-personality {
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
font-size: 11px;
|
||||
font-style: italic;
|
||||
text-align: center;
|
||||
padding-top: 10px;
|
||||
border-top: 1px solid rgba(183, 183, 187, 0.15);
|
||||
}
|
||||
|
||||
.gridpilot-footer {
|
||||
background: #12121B;
|
||||
padding: 8px 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
border-top: 1px solid rgba(183, 183, 187, 0.1);
|
||||
}
|
||||
|
||||
.gridpilot-footer-text {
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.gridpilot-footer-dot {
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
background: #c8102e;
|
||||
border-radius: 50%;
|
||||
animation: gridpilot-pulse 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.gridpilot-footer-dot.paused {
|
||||
background: #777880;
|
||||
animation: none;
|
||||
}
|
||||
</style></head><body><div id="gridpilot-overlay">
|
||||
<div class="gridpilot-card">
|
||||
<div class="gridpilot-header">
|
||||
<span class="gridpilot-logo">🏎️</span>
|
||||
<span class="gridpilot-title">GridPilot</span>
|
||||
<div class="gridpilot-header-buttons">
|
||||
<button class="gridpilot-btn gridpilot-close-btn" id="gridpilot-close-btn" onclick="(function() {
|
||||
window.__gridpilot_close_requested = true;
|
||||
})()">Stop</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gridpilot-body">
|
||||
<div class="gridpilot-status">
|
||||
<div class="gridpilot-spinner"></div>
|
||||
<span class="gridpilot-action-text" id="gridpilot-action">Processing step 0...</span>
|
||||
</div>
|
||||
<div class="gridpilot-progress-container">
|
||||
<div class="gridpilot-progress-bar">
|
||||
<div class="gridpilot-progress-fill" id="gridpilot-progress" style="width: 0%"></div>
|
||||
</div>
|
||||
<div class="gridpilot-step-info">
|
||||
<span class="gridpilot-step-text" id="gridpilot-step-text">Processing step 0...</span>
|
||||
<span class="gridpilot-step-count" id="gridpilot-step-count">Step 0 of 17</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gridpilot-personality" id="gridpilot-personality">🏁 Getting ready for the green flag...</div>
|
||||
</div>
|
||||
<div class="gridpilot-footer">
|
||||
<div class="gridpilot-footer-dot"></div>
|
||||
<span class="gridpilot-footer-text">Automating your session setup</span>
|
||||
</div>
|
||||
</div>
|
||||
</div></body></html>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 18 KiB |
File diff suppressed because one or more lines are too long
Binary file not shown.
|
Before Width: | Height: | Size: 448 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 389 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 390 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 389 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 388 KiB |
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user