Hugging Face's logo

Spaces:
WiW-collab
/
wiw-prototype
Sleeping

App Files Community
1
annaaaddddd commited on
Commit
283abbb
·
verified ·
1 Parent(s): caa0df2

Update interactive demo dark theme accommodation

Browse files
Files changed (1) hide show
  1. src/display/demo_new.html +100 -3
src/display/demo_new.html CHANGED
@@ -132,6 +132,101 @@
132
  @media (max-width:1100px){
133
  .overview-panel,.step-grid{grid-template-columns:1fr}
134
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
135
  </style>
136
  </head>
137
  <body>
@@ -163,7 +258,7 @@
163
  <div class="section-header">📋 Current Scenario</div>
164
  <div id="currentScenarioBox" style="padding:10px;background:#f6fff6;border:1px solid #cfe9cf;border-radius:8px"></div>
165
  <div style="margin-top:12px;">
166
- <div style="font-weight:700;color:#223; margin-bottom:6px;">🏁 Final Result</div>
167
  <div id="statusDisplay" class="final-status-display success">Mission Success!</div>
168
  </div>
169
  </div>
@@ -309,9 +404,11 @@ async function startDemo(){
309
 
310
  // Update current scenario's info
311
  document.getElementById('currentScenarioBox').innerHTML =
312
- `<div style="font-weight:600;margin-bottom:4px">${currentScenario.name}</div>
 
313
  <div>🎯 <b>${currentScenario.target}</b></div>
314
- <div>📝 "${currentScenario.prompt}"</div>`;
 
315
  document.getElementById('bevHeaderTitle').textContent = "🗺️ Bird's Eye View";
316
 
317
  await loadActionData();
 
132
  @media (max-width:1100px){
133
  .overview-panel,.step-grid{grid-template-columns:1fr}
134
  }
135
+ @media (prefers-color-scheme: dark) {
136
+ body {
137
+ background: linear-gradient(135deg,#121212 0%,#1e1e1e 100%);
138
+ color: #eee;
139
+ }
140
+
141
+ .selector-shell, .demo-shell, .panel-card, .step-card, .plan-box, .iteration-display {
142
+ background: #1f1f1f;
143
+ color: #eee;
144
+ border-color: #333;
145
+ }
146
+
147
+ .thumb-card {
148
+ background:#2a2a2a;
149
+ border-color:#444;
150
+ }
151
+ .thumb-card.selected {
152
+ background:linear-gradient(135deg,#244024 0%,#1a2a1a 100%);
153
+ border-color:#34a853;
154
+ }
155
+
156
+ .scenario-info {
157
+ background:linear-gradient(135deg,#3a2c00 0%,#5a4200 100%);
158
+ color:#ffda6a;
159
+ }
160
+
161
+ .section-header {
162
+ background:linear-gradient(135deg,#34a853,#4285f4);
163
+ color:#fff;
164
+ }
165
+ .results-section .section-header {
166
+ background:linear-gradient(135deg,#ea4335,#fbbc04);
167
+ }
168
+ .iteration-header {
169
+ background:linear-gradient(135deg,#4285f4,#34a853);
170
+ color:#fff;
171
+ }
172
+ .sequence-indicator {
173
+ background:linear-gradient(135deg,#ff6b6b,#4ecdc4);
174
+ color:#fff;
175
+ }
176
+
177
+ .success-explain {
178
+ background:#1e4620;
179
+ border-color:#2e7d32;
180
+ color:#a5d6a7;
181
+ }
182
+ .final-status-display.success {
183
+ background:#2e7d32;
184
+ color:#fff;
185
+ }
186
+
187
+ .conf-bar {
188
+ background:#333;
189
+ }
190
+ .conf-fill {
191
+ background:linear-gradient(90deg,#ea4335,#fbbc04,#34a853);
192
+ }
193
+
194
+ .nav-btn, .start-btn {
195
+ background:linear-gradient(135deg,#3399ff,#33cc66);
196
+ color:#fff;
197
+ border:none;
198
+ }
199
+
200
+ #currentScenarioBox .scenario-text,
201
+ #currentScenarioBox .scenario-text * {
202
+ color: #111 !important;
203
+ }
204
+
205
+ .final-result-title {
206
+ color: #eee !important;
207
+ }
208
+
209
+ .step-num {
210
+ background: #555 !important;
211
+ color: #fff !important;
212
+ }
213
+
214
+ .step-card div[style*="background:#fff3cd"] {
215
+ background: #5a4a00 !important;
216
+ border-color: #d6b400 !important;
217
+ color: #fff6d5 !important;
218
+ }
219
+
220
+ .flow-num {
221
+ background: #444 !important;
222
+ color: #fff !important;
223
+ }
224
+
225
+ .step-num {
226
+ background: #444 !important;
227
+ color: #fff !important;
228
+ }
229
+ }
230
  </style>
231
  </head>
232
  <body>
 
258
  <div class="section-header">📋 Current Scenario</div>
259
  <div id="currentScenarioBox" style="padding:10px;background:#f6fff6;border:1px solid #cfe9cf;border-radius:8px"></div>
260
  <div style="margin-top:12px;">
261
+ <div class="final-result-title">🏁 Final Result</div>
262
  <div id="statusDisplay" class="final-status-display success">Mission Success!</div>
263
  </div>
264
  </div>
 
404
 
405
  // Update current scenario's info
406
  document.getElementById('currentScenarioBox').innerHTML =
407
+ `<div class="scenario-text">
408
+ <div class="scenario-title">${currentScenario.name}</div>
409
  <div>🎯 <b>${currentScenario.target}</b></div>
410
+ <div>📝 "${currentScenario.prompt}"</div>
411
+ </div>`;
412
  document.getElementById('bevHeaderTitle').textContent = "🗺️ Bird's Eye View";
413
 
414
  await loadActionData();