13m0n4de / neko-quiz

NekoQuiz 是一个 CTF 问答题通用框架,对 USTC Hackergame 猫咪问答/猫咪小测 的仿制。
https://neko-quiz.shuttleapp.rs/
MIT License
2 stars 0 forks source link

可配置的页面背景图片 #1

Closed 13m0n4de closed 8 months ago

13m0n4de commented 9 months ago

目前背景是纯色,与 Hackergame 一致。

https://github.com/13m0n4de/neko-quiz/blob/c489d61b9e43b17a69e8628b5919b960f4da08d6/frontend/index.html#L8

背景图片不一定实用,算是一厢情愿的功能,考虑在 config.json 中添加一个字段用来表示图片路径/外链,应用至页面背景。

也许需要给问题卡片实现一些特效来配合完成网页效果,到时候另开 Issue 。

13m0n4de commented 9 months ago

因为页面两边留白比较多,所以不做背景图片,放个看板娘的图片也可以,效果和 https://github.com/13m0n4de/neko-quiz/blob/6ce527377a10e099ec1f34b29a0e15d942827c72/assets/demo-2.png 一样。

那暂时是两个方案了:

  1. 整个背景可定制图片或颜色,但应该要其他内容也配套,最后可能出现个简陋的”主题“功能,需要做很多很多工作
  2. 做看板娘,只可替换屏幕两侧的图片
13m0n4de commented 8 months ago

现在添加了对 images/ 目录的 copy-dir,通过配置文件指定网页背景的功能不准备实现了。

经过在 https://github.com/SVUCTF/SVUCTF-WINTER-2023/tree/main/challenges/misc/neko_quiz 的试验,手动设置背景图片也不太麻烦。

主要是背景图片这种东西没有通用的方案,所以就这样吧。

如果需要使用图片作为背景,将其放在 frontend/images/ 下,同时在 index.html 中添加样式,类似:

<style>
    body {
        background: url("images/bg.jpg") no-repeat center;
        background-size: 100%;
    }
</style>