我将那个图片换成了那个Base64的格式.然后的话呢就是你检查一下有没有兼容性问题并且做修改一下然后那个我想说一下暗色模式下整体UI色彩有点问题啊修改一下偏白了给我全都适配一下然后做的简洁一点比较好然后清晰一点,那个 UI 要清晰,界面清晰我需要说一下，看了一下那个布局可以重新排一下：
首先，那个班级之星个人描述一定要放在最上方，替换掉现在那个跳转倒计时那个板块。
然后，的话，第二个板块就是那个正在加载图片的那个板块，然后那个板块图片没加载出来的话，就要折叠起来显示加载中，这样子不要占这么大的空间。然后图片加载出来了，然后就展开。然后第三个板块就是下面那个原来的那个那个自动跳转倒计时，以及那些什么自动跳转按钮啊，要不要跳转懂吗，还有那个密码提醒都那些那些还有界面全都给我搞明显一点。懂吗对比度要高一点，要让人看清楚，不要灰，不要蒙
我来看一下当前的卡片组件和页面，了解你改成 Base64 图片后的状态。
我发现一个严重兼容性问题：你粘贴的是整段 <img src="data:..."> HTML 字符串，并且里面的双引号没有转义，导致 const IMAGE_URL = "<img src="data:..." 这一行 JS 语法已经损坏，而且代码里又把它当作 src={IMAGE_URL} 使用（等于把一个 <img> 标签塞进另一个 <img> 的 src）。我先把你的 base64 数据安全提取出来，再重排布局、修复暗色模式对比度。
先提取你的 base64 图片数据（避免在重写时丢失）：
已提取你的 base64 图片（26 万字符）。现在重写组件：重排为「描述置顶 → 图片折叠加载 → 倒计时/按钮/密码」三块，并提升对比度。
Now inject the real base64 data URI back into the placeholder:
现在修复暗色模式配色——当前暗色用的是默认灰白色（这就是你看到偏白/发灰的原因）。我把暗色改成深蓝底 + 明亮蓝/金主色，提升对比度：
最后把页面背景的彩色光晕调淡一点，让整体更干净清晰（之前的光晕在玻璃上容易显得发蒙）：
Let me verify the page renders correctly in the browser.
布局正确清晰。底部有个"1 Issue"提示，我检查一下，同时确认图片是否能加载：
那个"1 Issue"是因为 Button 的 asChild 不被支持——默认的 button.tsx 没有 Slot 实现。我检查一下：
这个 Button 基于 @base-ui/react，用的是 render prop 而不是 asChild。我改用正确的 API：
Now let me verify the fix and check the image loads + dark mode looks good:
图片似乎没加载成功。我截图看下当前状态并检查 base64 数据是否有效：
倒计时跑到 0 自动跳转到了网盘页（截图里是网盘的输入密码页），所以等待超时。base64 图片本身是有效的 JPEG（199KB）。我重新打开并先暂停倒计时，再确认图片显示：
关键发现：图片其实已经加载成功（naturalWidth=1086），但因为它是 data URI 会瞬间完成，onLoad 在 React 绑定事件前就触发了，所以 imgLoaded 一直没置为 true，面板卡在"加载中"。我用 ref + complete 检测来修复这个经典问题：
现在验证图片展开和 asChild 报错是否都解决了：
图片正常展开了，布局也对了。还剩"1 Issue"，我确认下是不是 asChild 残留报错还是别的：
现在测一下暗色模式的对比度（你之前反馈暗色发白）：
暗色模式现在是深蓝底配亮蓝/金色，对比度清晰，不再发白发灰。所有问题已解决。
我完成了以下修改：
- 修复兼容性 bug：你粘贴的是整段未转义的
<img src="data:...">字符串，导致 JS 语法损坏、且被嵌套进src里。我安全提取出你的 base64 图片数据（有效 JPEG，199KB），改为纯 data URI 直接使用。 - 修复图片不显示：data URI 加载太快，
onLoad在 React 绑定前就触发了，所以用ref + img.complete在挂载时检测，确保正确展开。同时修复了 Button 的asChild报错（该组件基于 base-ui，应使用renderprop）。 - 重排布局：① 班级之星个人描述置顶 → ② 图片块（未加载时折叠显示"加载中"，加载后展开）→ ③ 倒计时 + 取消/立即跳转按钮 + 密码复制与提醒 + 直达下载。
- 暗色模式与对比度：重写暗色配色为深蓝底 + 高对比亮蓝/金主色，去掉了发灰发蒙的半透明白玻璃，改用实色卡片和清晰边框，整体更简洁清晰。
我梳理一下整体交互逻辑就是用户用户访问这个网站的时候然后的话呢他这个界面就是图片的话要就是先就先加载所有文字出来然后再加载图片的话然后那个图片真的加载那个展示图片那一个卡片是折起来的然后的话就是等他就是自动加载完这个图片的话就直接图片自動彈出來懂啊?卡片展開然後跳轉的話就自動暫停跳轉了懂啊?然後一直加載的過程中跳轉是沒有被暫停的只有用戶手動暫停懂啊?还有不要深色模式啦，全部换成现在的浅色
我来梳理需求并实现：图片加载完成时自动展开卡片并自动暂停跳转；加载过程中跳转不暂停（除非用户手动暂停）；移除深色模式只保留浅色。先读当前文件。
现在我来实现：图片加载完成自动暂停跳转（仅触发一次），并彻底移除深色模式。
先改组件——加入图片加载完成时的自动暂停逻辑：
现在移除深色模式。先删 globals.css 里的 dark variant、.dark 块和 @media prefers-color-scheme 块：
现在更新 layout.tsx，把 viewport 和图标固定为浅色：
现在验证：浅色模式下倒计时初始运行、图片加载后自动暂停并展开。
功能正常：图片加载后卡片自动展开、倒计时自动暂停（显示"自动跳转已暂停 30s"），浅色界面清晰。左侧还有"1 Issue"，我查一下是什么：
那个"1 Issue"是 Base UI 的报错：用 render={<a>} 渲染成链接时，Button 默认 nativeButton 为 true，需要显式设为 false。我修复这个直达下载按钮：
"1 Issue" 报错已消除，页面干净无错误。
已完成全部需求：
- 加载交互：文字（标题、班级之星描述、密码、按钮）会先渲染，图片卡片初始折叠显示"图片加载中……"；图片加载完成后卡片自动展开弹出图片。
- 自动暂停：图片加载完成的瞬间，倒计时自动暂停一次（显示"自动跳转已暂停"）。加载过程中倒计时正常运行、不会暂停——只有图片加载完成或用户手动点"取消跳转"才会暂停。
- 移除深色模式：删除了 globals.css 里的
.dark和@media (prefers-color-scheme: dark)配色块及 dark variant，layout 的 viewport/图标也固定为浅色，现在全站只用当前这套清爽的浅色主题。 - 顺手修复了直达下载按钮的 Base UI 报错（链接渲染需
nativeButton={false}）。
我已经用了DESIGNMODE,然后编辑完了那个基本信息,然后的话现在请你帮我保存一下