diff --git a/public/tool/cloudflare.svg b/public/tool/cloudflare.svg new file mode 100644 index 0000000..10e5e71 --- /dev/null +++ b/public/tool/cloudflare.svg @@ -0,0 +1 @@ + diff --git a/public/tool/codepen.svg b/public/tool/codepen.svg new file mode 100644 index 0000000..27605cc --- /dev/null +++ b/public/tool/codepen.svg @@ -0,0 +1 @@ +Codepen diff --git a/public/tool/convert.svg b/public/tool/convert.svg new file mode 100644 index 0000000..884e639 --- /dev/null +++ b/public/tool/convert.svg @@ -0,0 +1 @@ + diff --git a/public/tool/github.svg b/public/tool/github.svg new file mode 100644 index 0000000..11920a4 --- /dev/null +++ b/public/tool/github.svg @@ -0,0 +1 @@ + diff --git a/public/tool/jsdelivr.svg b/public/tool/jsdelivr.svg new file mode 100644 index 0000000..2864f27 --- /dev/null +++ b/public/tool/jsdelivr.svg @@ -0,0 +1 @@ + diff --git a/public/tool/kaggle.svg b/public/tool/kaggle.svg new file mode 100644 index 0000000..dc75f80 --- /dev/null +++ b/public/tool/kaggle.svg @@ -0,0 +1 @@ +Kaggle diff --git a/public/tool/lightnotes.ico b/public/tool/lightnotes.ico new file mode 100644 index 0000000..d231ad0 Binary files /dev/null and b/public/tool/lightnotes.ico differ diff --git a/public/tool/openai.svg b/public/tool/openai.svg new file mode 100644 index 0000000..397492b --- /dev/null +++ b/public/tool/openai.svg @@ -0,0 +1 @@ +chatGPT diff --git a/public/tool/readthedocs.svg b/public/tool/readthedocs.svg new file mode 100644 index 0000000..39052c5 --- /dev/null +++ b/public/tool/readthedocs.svg @@ -0,0 +1 @@ +Read the Docs diff --git a/public/tool/replit.svg b/public/tool/replit.svg new file mode 100644 index 0000000..9fc2f89 --- /dev/null +++ b/public/tool/replit.svg @@ -0,0 +1 @@ +replit diff --git a/public/tool/stackoverflow.svg b/public/tool/stackoverflow.svg new file mode 100644 index 0000000..96aab7c --- /dev/null +++ b/public/tool/stackoverflow.svg @@ -0,0 +1 @@ + diff --git a/public/tool/twitter.svg b/public/tool/twitter.svg new file mode 100644 index 0000000..e4fc167 --- /dev/null +++ b/public/tool/twitter.svg @@ -0,0 +1 @@ + diff --git a/public/tool/vercel.svg b/public/tool/vercel.svg new file mode 100644 index 0000000..3cd28a7 --- /dev/null +++ b/public/tool/vercel.svg @@ -0,0 +1 @@ +Vercel diff --git a/src/assets/script/service.ts b/src/assets/script/service.ts index 9c8d20e..73ebfaa 100644 --- a/src/assets/script/service.ts +++ b/src/assets/script/service.ts @@ -2,7 +2,7 @@ import { useRegisterSW } from "virtual:pwa-register/vue"; import { ref, watch } from "vue"; -export const version = "1.8.2"; +export const version = "1.9.0"; export const updater = ref(false); diff --git a/src/assets/script/tool.ts b/src/assets/script/tool.ts new file mode 100644 index 0000000..1d95eed --- /dev/null +++ b/src/assets/script/tool.ts @@ -0,0 +1,15 @@ +export type Tool = { + type: ToolType, + name: string, + icon: string, + link: string, +} + +export type ToolList = Tool[]; +export type ToolMap = { [key: string]: Tool }; + +export enum ToolTypes { + BUILTIN, + CUSTOM, +} +export type ToolType = ToolTypes.BUILTIN | ToolTypes.CUSTOM; diff --git a/src/components/ToolBox.vue b/src/components/ToolBox.vue index b6d92f7..5135a1f 100644 --- a/src/components/ToolBox.vue +++ b/src/components/ToolBox.vue @@ -3,6 +3,8 @@ import {onMounted, ref} from "vue"; import {context} from "@/assets/script/shared"; import DateCard from "@/components/cards/DateCard.vue"; import WeatherCard from "@/components/cards/WeatherCard.vue"; +import type {ToolList} from "@/assets/script/tool"; +import {ToolTypes} from "@/assets/script/tool"; const props = defineProps<{ focus: boolean, @@ -33,20 +35,19 @@ window.addEventListener('contextmenu', (e) => { } }); -let tools = [ - { link: "github.com", icon: `Github` }, - { link: "chat.openai.com", icon: `chatGPT` }, - { link: "stackoverflow.com", icon: `Stack Overflow` }, - { link: "twitter.com", icon: `Twitter` }, - { link: "dash.cloudflare.com", icon: `Cloudflare` }, - { link: "vercel.com", icon: `Vercel` }, - { link: "codepen.io", icon: `Codepen` }, - { link: "kaggle.com", icon: `Kaggle` }, - { link: "replit.com", icon: `Replit` }, - { link: "readthedocs.io", icon: `Read the Docs` }, - { link: "shields.io", icon: `Shields.io` }, - { link: "jsdelivr.com", icon: `jsDelivr` }, -], renderer = ref(tools); +let tools: ToolList = [ + { "type": ToolTypes.BUILTIN, "name": "GitHub", "link": "https://github.com", "icon": "/tool/github.svg" }, + { "type": ToolTypes.BUILTIN, "name": "OpenAI", "link": "https://chat.openai.com", "icon": "/tool/openai.svg" }, + { "type": ToolTypes.BUILTIN, "name": "Stack Overflow", "link": "https://stackoverflow.com", "icon": "/tool/stackoverflow.svg" }, + { "type": ToolTypes.BUILTIN, "name": "ConvertIO", link: "https://convertio.co", "icon": "/tool/convert.svg" }, + { "type": ToolTypes.BUILTIN, "name": "Light Notes", "link": "https://notes.lightxi.com", "icon": "/tool/lightnotes.ico" }, + { "type": ToolTypes.BUILTIN, "name": "Twitter", "link": "https://twitter.com", "icon": "/tool/twitter.svg" }, + { "type": ToolTypes.BUILTIN, "name": "Cloudflare", "link": "https://dash.cloudflare.com", "icon": "/tool/cloudflare.svg" }, + { "type": ToolTypes.BUILTIN, "name": "Vercel", "link": "https://vercel.com", "icon": "/tool/vercel.svg" }, + { "type": ToolTypes.BUILTIN, "name": "Codepen", "link": "https://codepen.io", "icon": "/tool/codepen.svg" }, + { "type": ToolTypes.BUILTIN, "name": "Kaggle", "link": "https://kaggle.com", "icon": "/tool/kaggle.svg" }, + { "type": ToolTypes.BUILTIN, "name": "Replit", "link": "https://replit.com", "icon": "/tool/replit.svg" }, +]; function redirect(uri: string) { window.location.href = uri; @@ -60,12 +61,10 @@ function redirect(uri: string) {
- + + +
{{ tool.name }}
+
@@ -111,7 +110,7 @@ function redirect(uri: string) { display: flex; flex-wrap: wrap; width: max-content; - max-width: min(90%, 600px); + max-width: min(90%, 820px); height: max-content; transition: .25s; justify-content: center; @@ -132,25 +131,46 @@ function redirect(uri: string) { .tool { position: relative; - backdrop-filter: blur(6px); - display: inline-block; - background: rgba(0,0,0,0.4); - width: 60px; - height: 60px; + display: flex; + flex-direction: column; + width: max-content; + height: max-content; margin: 15px 15px 30px 15px; - transition: .3s; - border-radius: 6px; - overflow: hidden; + transition: .25s; cursor: pointer; } -.tool svg { - width: 40px; - height: 40px; - padding: 4px; - margin: 10px; +.tool img { + border-radius: 6px; + background: rgba(0,0,0,0.8); + box-shadow: 0 0 2px 2px rgba(0,0,0,0.2); + width: 80px; + height: 80px; + padding: 20px; fill: rgba(255,255,255,0.85); - transition: .25s; + transition: .2s; +} + +.tool div { + width: max-content; + white-space: nowrap; + position: absolute; + bottom: -24px; + left: 50%; + transform: translateX(-50%); + color: rgba(255,255,255,0.95); + font-family: var(--fonts-cn); + font-size: 14px; + transition: .2s; +} + +.tool:hover img { + background: rgba(0,0,0,0.95); + transform: scale(1.1); +} + +.tool:hover div { + bottom: -30px; } .tool:hover svg {