| 1 | <html class="whats-new-modal"> |
| 2 | <head> |
| 3 | <title>What's New in Agent Zero</title> |
| 4 | <script type="module"> |
| 5 | import { store } from "/plugins/_whats_new/webui/whats-new-store.js"; |
| 6 | </script> |
| 7 | </head> |
| 8 | |
| 9 | <body> |
| 10 | <div x-data> |
| 11 | <template x-if="$store.whatsNew"> |
| 12 | <div class="whats-new-shell" x-init="$store.whatsNew.onOpen()" x-destroy="$store.whatsNew.cleanup()"> |
| 13 | <section |
| 14 | class="whats-new-media-panel" |
| 15 | x-show="$store.whatsNew.hasSlides()" |
| 16 | :aria-label="$store.whatsNew.currentSlide.mediaLabel" |
| 17 | > |
| 18 | <template x-if="$store.whatsNew.currentSlide.mediaType === 'video'"> |
| 19 | <video |
| 20 | class="whats-new-media" |
| 21 | :src="$store.whatsNew.currentSlide.media" |
| 22 | :aria-label="$store.whatsNew.currentSlide.mediaLabel" |
| 23 | autoplay |
| 24 | loop |
| 25 | muted |
| 26 | playsinline |
| 27 | ></video> |
| 28 | </template> |
| 29 | <template x-if="$store.whatsNew.currentSlide.mediaType === 'image'"> |
| 30 | <img |
| 31 | class="whats-new-media" |
| 32 | :src="$store.whatsNew.currentSlide.media" |
| 33 | :alt="$store.whatsNew.currentSlide.mediaLabel" |
| 34 | /> |
| 35 | </template> |
| 36 | </section> |
| 37 | |
| 38 | <section class="whats-new-copy"> |
| 39 | <div class="whats-new-eyebrow" x-text="$store.whatsNew.currentSlide.eyebrow"></div> |
| 40 | <h3 x-text="$store.whatsNew.currentSlide.title"></h3> |
| 41 | <p class="whats-new-summary" x-text="$store.whatsNew.currentSlide.summary"></p> |
| 42 | <ul |
| 43 | class="whats-new-bullets" |
| 44 | x-show="$store.whatsNew.currentSlide.bullets.length" |
| 45 | > |
| 46 | <template x-for="item in $store.whatsNew.currentSlide.bullets" :key="item"> |
| 47 | <li x-text="item"></li> |
| 48 | </template> |
| 49 | </ul> |
| 50 | </section> |
| 51 | |
| 52 | <div class="modal-footer whats-new-footer" data-modal-footer> |
| 53 | <div class="whats-new-footer-left"> |
| 54 | <div class="whats-new-footer-progress" x-show="$store.whatsNew.hasSlides()"> |
| 55 | <span class="whats-new-progress-label" x-text="$store.whatsNew.progressLabel()"></span> |
| 56 | <div class="whats-new-progress-dots" role="tablist" aria-label="What's New slides"> |
| 57 | <template x-for="(slide, index) in $store.whatsNew.slides" :key="slide.id"> |
| 58 | <button |
| 59 | type="button" |
| 60 | class="whats-new-dot" |
| 61 | role="tab" |
| 62 | :class="{ 'active': index === $store.whatsNew.currentIndex }" |
| 63 | :aria-label="$store.whatsNew.dotLabel(index)" |
| 64 | :aria-selected="index === $store.whatsNew.currentIndex ? 'true' : 'false'" |
| 65 | @click="$store.whatsNew.goTo(index)" |
| 66 | ></button> |
| 67 | </template> |
| 68 | </div> |
| 69 | </div> |
| 70 | <label class="whats-new-never-show" x-show="$store.whatsNew.hasSlides()"> |
| 71 | <input |
| 72 | type="checkbox" |
| 73 | :checked="$store.whatsNew.neverShowAgain" |
| 74 | @change="$store.whatsNew.setNeverShowAgain($event.target.checked)" |
| 75 | /> |
| 76 | <span>Don't show automatically again</span> |
| 77 | </label> |
| 78 | </div> |
| 79 | <div class="whats-new-footer-actions"> |
| 80 | <button |
| 81 | type="button" |
| 82 | class="btn btn-cancel" |
| 83 | x-show="$store.whatsNew.hasSlides()" |
| 84 | @click="$store.whatsNew.skip()" |
| 85 | > |
| 86 | Skip |
| 87 | </button> |
| 88 | <button |
| 89 | type="button" |
| 90 | class="btn btn-field" |
| 91 | x-show="!$store.whatsNew.isFirst()" |
| 92 | @click="$store.whatsNew.previous()" |
| 93 | > |
| 94 | Back |
| 95 | </button> |
| 96 | <button type="button" class="btn btn-ok" @click="$store.whatsNew.next()"> |
| 97 | <span x-text="$store.whatsNew.isLast() ? 'Done' : 'Next'"></span> |
| 98 | </button> |
| 99 | </div> |
| 100 | </div> |
| 101 | </div> |
| 102 | </template> |
| 103 | </div> |
| 104 | |
| 105 | <style> |
| 106 | .modal-inner.whats-new-modal { |
| 107 | width: min(92vw, 760px); |
| 108 | max-height: min(88vh, 820px); |
| 109 | } |
| 110 | |
| 111 | .whats-new-shell { |
| 112 | display: flex; |
| 113 | flex-direction: column; |
| 114 | gap: 1rem; |
| 115 | min-width: 0; |
| 116 | } |
| 117 | |
| 118 | .whats-new-media-panel { |
| 119 | position: relative; |
| 120 | display: flex; |
| 121 | align-items: center; |
| 122 | justify-content: center; |
| 123 | width: 100%; |
| 124 | aspect-ratio: 1476 / 842; |
| 125 | min-height: 180px; |
| 126 | max-height: min(44vh, 360px); |
| 127 | overflow: hidden; |
| 128 | border: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent); |
| 129 | border-radius: 7px; |
| 130 | background: |
| 131 | radial-gradient(circle at 18% 12%, color-mix(in srgb, #4248f1 18%, transparent), transparent 34%), |
| 132 | color-mix(in srgb, var(--color-panel) 78%, #000 22%); |
| 133 | } |
| 134 | |
| 135 | .whats-new-media { |
| 136 | display: block; |
| 137 | width: 100%; |
| 138 | height: 100%; |
| 139 | object-fit: cover; |
| 140 | background: color-mix(in srgb, var(--color-panel) 82%, #000 18%); |
| 141 | } |
| 142 | |
| 143 | .whats-new-copy { |
| 144 | display: flex; |
| 145 | flex-direction: column; |
| 146 | gap: 0.55rem; |
| 147 | min-width: 0; |
| 148 | color: var(--color-text); |
| 149 | text-align: left; |
| 150 | } |
| 151 | |
| 152 | .whats-new-eyebrow { |
| 153 | color: color-mix(in srgb, #2196f3 86%, var(--color-text)); |
| 154 | font-size: 0.74rem; |
| 155 | font-weight: 760; |
| 156 | letter-spacing: 0.04em; |
| 157 | text-transform: uppercase; |
| 158 | } |
| 159 | |
| 160 | .whats-new-copy h3 { |
| 161 | margin: 0; |
| 162 | color: var(--color-text); |
| 163 | font-size: clamp(1.35rem, 2.5vw, 1.8rem); |
| 164 | font-weight: 760; |
| 165 | line-height: 1.12; |
| 166 | letter-spacing: 0; |
| 167 | } |
| 168 | |
| 169 | .whats-new-summary { |
| 170 | max-width: 62ch; |
| 171 | margin: 0; |
| 172 | color: var(--color-text-muted); |
| 173 | font-size: 0.98rem; |
| 174 | line-height: 1.45; |
| 175 | } |
| 176 | |
| 177 | .whats-new-bullets { |
| 178 | display: grid; |
| 179 | gap: 0.45rem; |
| 180 | margin: 0.25rem 0 0; |
| 181 | padding: 0; |
| 182 | list-style: none; |
| 183 | } |
| 184 | |
| 185 | .whats-new-bullets li { |
| 186 | position: relative; |
| 187 | min-width: 0; |
| 188 | padding-left: 1.1rem; |
| 189 | color: var(--color-text-muted); |
| 190 | font-size: 0.9rem; |
| 191 | line-height: 1.42; |
| 192 | } |
| 193 | |
| 194 | .whats-new-bullets li::before { |
| 195 | content: ""; |
| 196 | position: absolute; |
| 197 | left: 0; |
| 198 | top: 0.58em; |
| 199 | width: 0.42rem; |
| 200 | height: 0.42rem; |
| 201 | border-radius: 999px; |
| 202 | background: color-mix(in srgb, #4248f1 72%, #2196f3 28%); |
| 203 | box-shadow: 0 0 0 3px color-mix(in srgb, #4248f1 18%, transparent); |
| 204 | } |
| 205 | |
| 206 | .whats-new-footer { |
| 207 | justify-content: space-between; |
| 208 | gap: 1rem; |
| 209 | } |
| 210 | |
| 211 | .whats-new-footer-left, |
| 212 | .whats-new-footer-actions { |
| 213 | display: flex; |
| 214 | align-items: center; |
| 215 | gap: 0.65rem; |
| 216 | min-width: 0; |
| 217 | } |
| 218 | |
| 219 | .whats-new-footer-left { |
| 220 | flex-wrap: wrap; |
| 221 | } |
| 222 | |
| 223 | .whats-new-footer-progress { |
| 224 | display: flex; |
| 225 | align-items: center; |
| 226 | gap: 0.65rem; |
| 227 | min-width: 0; |
| 228 | } |
| 229 | |
| 230 | .whats-new-progress-label { |
| 231 | color: var(--color-text-muted); |
| 232 | font-size: 0.78rem; |
| 233 | white-space: nowrap; |
| 234 | } |
| 235 | |
| 236 | .whats-new-progress-dots { |
| 237 | display: flex; |
| 238 | align-items: center; |
| 239 | gap: 0.35rem; |
| 240 | } |
| 241 | |
| 242 | .whats-new-dot { |
| 243 | width: 0.48rem; |
| 244 | height: 0.48rem; |
| 245 | padding: 0; |
| 246 | border: 0; |
| 247 | border-radius: 999px; |
| 248 | background: color-mix(in srgb, var(--color-text-muted) 45%, transparent); |
| 249 | cursor: pointer; |
| 250 | transition: transform 0.16s ease, background-color 0.16s ease, width 0.16s ease; |
| 251 | } |
| 252 | |
| 253 | .whats-new-dot.active { |
| 254 | width: 1.2rem; |
| 255 | background: color-mix(in srgb, #4248f1 74%, #2196f3 26%); |
| 256 | } |
| 257 | |
| 258 | .whats-new-dot:hover { |
| 259 | transform: translateY(-1px); |
| 260 | background: color-mix(in srgb, #2196f3 72%, var(--color-text)); |
| 261 | } |
| 262 | |
| 263 | .whats-new-never-show { |
| 264 | display: inline-flex; |
| 265 | align-items: center; |
| 266 | gap: 0.35rem; |
| 267 | min-width: 0; |
| 268 | color: var(--color-text-muted); |
| 269 | font-size: 0.78rem; |
| 270 | cursor: pointer; |
| 271 | user-select: none; |
| 272 | } |
| 273 | |
| 274 | .whats-new-never-show input { |
| 275 | width: 0.95rem; |
| 276 | height: 0.95rem; |
| 277 | margin: 0; |
| 278 | flex: 0 0 auto; |
| 279 | accent-color: #4248f1; |
| 280 | } |
| 281 | |
| 282 | .whats-new-never-show span { |
| 283 | min-width: 0; |
| 284 | white-space: normal; |
| 285 | } |
| 286 | |
| 287 | @media (max-width: 640px) { |
| 288 | .modal-inner.whats-new-modal { |
| 289 | width: min(94vw, 760px); |
| 290 | } |
| 291 | |
| 292 | .whats-new-media-panel { |
| 293 | min-height: 150px; |
| 294 | max-height: 32vh; |
| 295 | } |
| 296 | |
| 297 | .whats-new-footer, |
| 298 | .whats-new-footer-left, |
| 299 | .whats-new-footer-actions { |
| 300 | align-items: stretch; |
| 301 | } |
| 302 | |
| 303 | .whats-new-footer { |
| 304 | flex-direction: column; |
| 305 | } |
| 306 | |
| 307 | .whats-new-footer-left { |
| 308 | justify-content: space-between; |
| 309 | } |
| 310 | |
| 311 | .whats-new-footer-progress { |
| 312 | justify-content: space-between; |
| 313 | } |
| 314 | |
| 315 | .whats-new-footer-actions { |
| 316 | justify-content: flex-end; |
| 317 | flex-wrap: wrap; |
| 318 | } |
| 319 | } |
| 320 | </style> |
| 321 | </body> |
| 322 | </html> |