Skip to content

Commit 7c65cec

Browse files
for-the-zerofor-the-zero
committed
重构主页
1 parent ca50cc6 commit 7c65cec

File tree

4 files changed

+424
-92
lines changed

4 files changed

+424
-92
lines changed

‎index.css

+68-9
Original file line numberDiff line numberDiff line change
@@ -3,23 +3,82 @@ body{
33
color: #201b12;
44
display: flex;
55
flex-direction: column;
6-
align-items: center;
6+
align-items: flex-start;
77
justify-content: center;
88
}
99
mdui-card{
10-
padding: 10px;
11-
margin: 15px;
12-
width: 250px;
13-
min-height: 250px;
10+
padding: 8px;
11+
margin: 10px;
12+
width: 180px;
13+
min-height: 200px;
1414
vertical-align: top;
1515
}
1616
.item-icon{
17-
font-size: 50px;
17+
font-size: 40px;
1818
}
1919
h1, p{
20-
margin-top: 10px;
21-
margin-bottom: 10px;
20+
margin-top: 7px;
21+
margin-bottom: 7px;
22+
}
23+
h1{
24+
font-size: 1.75rem;
25+
}
26+
p{
27+
font-size: 0.95rem;
28+
}
29+
.main{
30+
margin-left: 10px;
31+
margin-right: 10px;
2232
}
2333
.main > p{
24-
padding-left: 20px;
34+
padding-left: 10px;
35+
}
36+
.main, .tools{
37+
width: 100%;
38+
max-width: 100%;
39+
box-sizing: border-box;
40+
}
41+
mdui-circular-progress{
42+
position: absolute;
43+
top: 50%;
44+
left: 50%;
45+
transform: translate(-50%, -50%);
46+
}
47+
.sort-cate{
48+
display: flex;
49+
flex-direction: column;
50+
align-items: flex-start;
51+
justify-content: center;
52+
margin-left: 15px;
53+
margin-right: 15px;
54+
width: 100%;
55+
max-width: 100%;
56+
box-sizing: border-box;
57+
}
58+
.sort-cate-item{
59+
display: flex;
60+
flex-direction: row;
61+
align-items: center;
62+
justify-content: center;
63+
max-width: 80%;
64+
min-width: 200px;
65+
box-sizing: border-box;
66+
margin-top: 5px;
67+
}
68+
.sort-cate-item > mdui-select{
69+
display: block;
70+
margin-left: 10px;
71+
margin-right: 10px;
72+
width: 100%;
73+
max-width: 100%;
74+
box-sizing: border-box;
75+
}
76+
mdui-icon{
77+
user-select: none;
78+
}
79+
mdui-divider{
80+
margin-top: 10px;
81+
margin-bottom: 10px;
82+
width: 43%;
83+
box-sizing: border-box;
2584
}

‎index.html

+34-83
Original file line numberDiff line numberDiff line change
@@ -35,91 +35,42 @@
3535
<div class="main">
3636

3737
<p>这是一个简单小工具合集，会不断更新</p>
38-
39-
<mdui-card clickable href="https://forthezero.pythonanywhere.com/ab">
40-
<mdui-icon name="video_library--outlined" class="item-icon"></mdui-icon>
41-
<h1>Alan Becker视频列表</h1>
42-
<p>（站外）免_获取Alan Becker的YouTube视频列表（标题时间链接）</p>
43-
</mdui-card>
38+
<div class="sort-cate">
39+
<div class="sort-cate-item">
40+
<mdui-icon name="sort"></mdui-icon>
41+
<mdui-select variant="outlined" value="recommend" class="sort" end-icon="keyboard_arrow_down">
42+
<mdui-menu-item value="recommend">推荐/recommend</mdui-menu-item>
43+
<mdui-menu-item value="time">最新/newest</mdui-menu-item>
44+
</mdui-select>
45+
</div>
46+
<div class="sort-cate-item">
47+
<mdui-icon name="category--outlined"></mdui-icon>
48+
<mdui-select variant="outlined" value="no" class="category" end-icon="keyboard_arrow_down">
49+
<mdui-menu-item value="no">不分类/no</mdui-menu-item>
50+
<mdui-menu-item value="lang">语言/languages</mdui-menu-item>
51+
<mdui-menu-item value="ui">UI库/UI library</mdui-menu-item>
52+
</mdui-select>
53+
</div>
54+
</div>
55+
<mdui-divider></mdui-divider>
56+
57+
<!--再见旧代码<mdui-card clickable href="https://forthezero.pythonanywhere.com/ab"><mdui-icon name="video_library--outlined"class="item-icon"></mdui-icon><h1>Alan Becker视频列表</h1><p>（站外）免_获取Alan Becker的YouTube视频列表（标题时间链接）</p></mdui-card><mdui-card clickable href="./todo/index.html"><mdui-icon name="task_alt--outlined"class="item-icon"></mdui-icon><h1>Todo</h1><p>模仿别人做的todo，左键标记右键删除，手机长按=右键</p></mdui-card><mdui-card clickable href="./zen/index.html"><mdui-icon name="timer--outlined"class="item-icon"></mdui-icon><h1>Zen</h1><p><del>带记录功能的计时器……</del>一个Material3风格的简约专注网页，可显示一言句子，可以对专注计时进行统计</p></mdui-card><mdui-card clickable href="./calendar/index.html"><mdui-icon name="date_range--outlined"class="item-icon"></mdui-icon><h1>简单日历</h1><p>简约的日历，就只由简单的日历功能</p></mdui-card><mdui-card clickable href="./playvib/1.html"><mdui-icon name="vibration--outlined"class="item-icon"></mdui-icon><h1>震动测试</h1><p>仅限带线性马达的手机，随便搞的，更新了2.0版本，但还是不如意……</p></mdui-card><mdui-card clickable href="./form/index.html"><mdui-icon name="question_answer--outlined"class="item-icon"></mdui-icon><h1>QpenForm</h1><p>此处仅限前端部分</p><mdui-chip href="https://github.com/for-the-zero/QpenForm"target="_blank">Github</mdui-chip></mdui-card><mdui-card clickable href="./typeto/index.html"><mdui-icon name="keyboard--outlined"class="item-icon"></mdui-icon><h1>TypeTo</h1><p>（仅限电脑使用，需要键盘）将键盘上的按键映射成其它字符，可以拿来整活</p></mdui-card><mdui-card clickable href="./passkey/index.html"><mdui-icon name="password"class="item-icon"></mdui-icon><h1>Passkey</h1><p>生成图像密文，不提供解密（懒）</p></mdui-card><mdui-card clickable href="./vv/index.html"><mdui-icon name="voicemail"class="item-icon"></mdui-icon><h1>VisualVoice</h1><p>将声音转换成颜色</p></mdui-card><mdui-card clickable href="./taple/index.html"><mdui-icon name="table_chart--outlined"class="item-icon"></mdui-icon><h1>Taple</h1><p>一个好看的表格，用canvas绘制</p><mdui-chip href="https://github.com/for-the-zero/Taple"target="_blank">Github</mdui-chip></mdui-card><mdui-card clickable href="./showon/index.html"><mdui-icon name="smart_screen--outlined"class="item-icon"></mdui-icon><h1>文本展示</h1><p>将文本展示在屏幕上</p></mdui-card><mdui-card clickable href="./updyn/index.html"><mdui-icon name="post_add"class="item-icon"></mdui-icon><h1>UP主动态查看器</h1><p>查看UP主的动态</p><mdui-chip href="https://github.com/for-the-zero/UpDyn"target="_blank">Github</mdui-chip></mdui-card><mdui-card clickable variant="outlined"style="text-align: center; user-select: none;"><h1>Coming Soon...</h1></mdui-card>-->
58+
<mdui-collapse class="tools">
59+
60+
<!-- <mdui-card clickable href="#"><mdui-icon name="video_library--outlined"class="item-icon"></mdui-icon><h1>114514</h1><p>114514</p><mdui-chip href="#" icon="link" target="_blank">Github</mdui-chip></mdui-card>
61+
62+
<mdui-collapse-item value="item-2">
63+
<mdui-list-item slot="header" icon="folder--outlined">Item 1</mdui-list-item>
64+
<mdui-card clickable href="#"><mdui-icon name="video_library--outlined"class="item-icon"></mdui-icon><h1>114514</h1><p>114514</p><mdui-chip href="#" icon="link" target="_blank">Github</mdui-chip></mdui-card>
65+
</mdui-collapse-item> -->
66+
67+
<mdui-circular-progress></mdui-circular-progress>
68+
</mdui-collapse>
4469

45-
<mdui-card clickable href="./todo/index.html">
46-
<mdui-icon name="task_alt--outlined" class="item-icon"></mdui-icon>
47-
<h1>Todo</h1>
48-
<p>模仿别人做的todo，左键标记右键删除，手机长按=右键</p>
49-
</mdui-card>
50-
51-
<mdui-card clickable href="./zen/index.html">
52-
<mdui-icon name="timer--outlined" class="item-icon"></mdui-icon>
53-
<h1>Zen</h1>
54-
<p><del>带记录功能的计时器……</del>一个Material3风格的简约专注网页，可显示一言句子，可以对专注计时进行统计</p>
55-
</mdui-card>
56-
57-
<mdui-card clickable href="./calendar/index.html">
58-
<mdui-icon name="date_range--outlined" class="item-icon"></mdui-icon>
59-
<h1>简单日历</h1>
60-
<p>简约的日历，就只由简单的日历功能</p>
61-
</mdui-card>
62-
63-
<mdui-card clickable href="./playvib/1.html">
64-
<mdui-icon name="vibration--outlined" class="item-icon"></mdui-icon>
65-
<h1>震动测试</h1>
66-
<p>仅限带线性马达的手机，随便搞的，更新了2.0版本，但还是不如意……</p>
67-
</mdui-card>
68-
69-
<mdui-card clickable href="./form/index.html">
70-
<mdui-icon name="question_answer--outlined" class="item-icon"></mdui-icon>
71-
<h1>QpenForm</h1>
72-
<p>此处仅限前端部分</p>
73-
<mdui-chip href="https://github.com/for-the-zero/QpenForm" target="_blank">Github</mdui-chip>
74-
</mdui-card>
75-
76-
<mdui-card clickable href="./typeto/index.html">
77-
<mdui-icon name="keyboard--outlined" class="item-icon"></mdui-icon>
78-
<h1>TypeTo</h1>
79-
<p>（仅限电脑使用，需要键盘）将键盘上的按键映射成其它字符，可以拿来整活</p>
80-
</mdui-card>
81-
82-
<mdui-card clickable href="./passkey/index.html">
83-
<mdui-icon name="password" class="item-icon"></mdui-icon>
84-
<h1>Passkey</h1>
85-
<p>生成图像密文，不提供解密（懒）</p>
86-
</mdui-card>
87-
88-
<mdui-card clickable href="./vv/index.html">
89-
<mdui-icon name="voicemail" class="item-icon"></mdui-icon>
90-
<h1>VisualVoice</h1>
91-
<p>将声音转换成颜色</p>
92-
</mdui-card>
93-
94-
<mdui-card clickable href="./taple/index.html">
95-
<mdui-icon name="table_chart--outlined" class="item-icon"></mdui-icon>
96-
<h1>Taple</h1>
97-
<p>一个好看的表格，用canvas绘制</p>
98-
<mdui-chip href="https://github.com/for-the-zero/Taple" target="_blank">Github</mdui-chip>
99-
</mdui-card>
100-
101-
<mdui-card clickable href="./showon/index.html">
102-
<mdui-icon name="smart_screen--outlined" class="item-icon"></mdui-icon>
103-
<h1>文本展示</h1>
104-
<p>将文本展示在屏幕上</p>
105-
</mdui-card>
106-
107-
<mdui-card clickable href="./updyn/index.html">
108-
<mdui-icon name="post_add" class="item-icon"></mdui-icon>
109-
<h1>UP主动态查看器</h1>
110-
<p>查看UP主的动态</p>
111-
<mdui-chip href="https://github.com/for-the-zero/UpDyn" target="_blank">Github</mdui-chip>
112-
</mdui-card>
113-
114-
<mdui-card clickable variant="outlined"
115-
style="text-align: center; user-select: none;">
116-
<h1>Coming Soon...</h1>
117-
</mdui-card>
118-
119-
12070
</div>
121-
122-
12371
<script>mdui.setColorScheme('#59ffee')</script>
72+
<script src="https://unpkg.com/jquery/dist/jquery.min.js"></script>
73+
<script src="./links.js"></script>
74+
<script src="./index.js"></script>
12475
</body>
12576
</html>

‎index.js

+142
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,142 @@
1+
/*
2+
var list(已经导入了，无需创建)中的每一项都是一个项目，格式如下：
3+
{
4+
name: "Taple",
5+
icon: "table_chart--outlined",
6+
desc: "一个好看的表格，用canvas绘制",
7+
url: "./taple/index.html",
8+
github: "https://github.com/for-the-zero/Taple",
9+
slot: {
10+
time: 9,
11+
recommend: 100,
12+
lang: "cn",
13+
ui: "css"
14+
}
15+
},
16+
17+
<mdui-card clickable href="#"><mdui-icon name="video_library--outlined" class="item-icon"></mdui-icon>
18+
<h1>114514</h1>
19+
<p>114514</p><mdui-chip href="#" icon="link" target="_blank">Github</mdui-chip>
20+
</mdui-card>
21+
22+
<mdui-collapse-item value="item-2">
23+
<mdui-list-item slot="header" icon="folder--outlined">Item 1</mdui-list-item>
24+
<mdui-card clickable href="#"><mdui-icon name="video_library--outlined"class="item-icon"></mdui-icon><h1>114514</h1><p>114514</p><mdui-chip href="#" icon="link" target="_blank">Github</mdui-chip></mdui-card>
25+
</mdui-collapse-item>
26+
*/
27+
28+
//elements
29+
const e_tooltip = $('mdui-tooltip');
30+
const e_sort = $('.sort');
31+
const e_cate = $('.category');
32+
const e_toollist = $('.tools');
33+
34+
//egg
35+
var clk = 0;
36+
var eggs = {
37+
3: '你怎么还在点',
38+
4: '我说了这个东西没用的，别点了',
39+
5: '你点了，我也不知道',
40+
6: '真的是……',
41+
7: '这么有能耐的话……',
42+
8: '你有本事点到第100次',
43+
9: '你就点吧，懒得告诉你点了多少下，你自己数去',
44+
50: '50下了，你还在点？',
45+
51: '给你一点缓冲，我是来告诉你现在在51~54下',
46+
55: '你就点吧，懒得告诉你点了多少下，你自己数去',
47+
95: '加油哦，就快到了，放慢点吧',
48+
100: '不是你真的这么无聊',
49+
101: '既然这样',
50+
102: '我喜欢你',
51+
103: '≧ ﹏ ≦',
52+
104: '100下是不是太少了（）',
53+
105: '写不动了，后面真的没了',
54+
106: '再见~',
55+
110: '我是一个装饰按钮我是一个装饰按钮我是一个装饰按钮',
56+
};
57+
e_tooltip.on('click',function(){
58+
clk++;
59+
if(eggs[clk]){
60+
$(this).attr('content',eggs[clk]);
61+
};
62+
});
63+
64+
//trigger
65+
e_sort.on('change',function(){
66+
if(e_sort.val() === ''){
67+
e_sort.val('recommend');
68+
};
69+
show_tools(links, e_sort.val(), e_cate.val());
70+
});
71+
e_cate.on('change',function(){
72+
if(e_cate.val() === ''){
73+
e_cate.val('no');
74+
};
75+
show_tools(links, e_sort.val(), e_cate.val());
76+
});
77+
show_tools(links, e_sort.val(), e_cate.val());
78+
79+
function show_tools(list, sort, cate) {
80+
// prepare
81+
const categorized = {};
82+
if (cate === 'no') {
83+
categorized.no = [...list].sort((a, b) =>
84+
b.slot[sort] - a.slot[sort]
85+
);
86+
} else {
87+
list.forEach(item => {
88+
const categoryValue = item.slot[cate];
89+
if (!categorized[categoryValue]) {
90+
categorized[categoryValue] = [];
91+
};
92+
categorized[categoryValue].push(item);
93+
});
94+
Object.entries(categorized).forEach(([key, items]) => {
95+
items.sort((a, b) =>
96+
b.slot[sort] - a.slot[sort]
97+
);
98+
});
99+
};
100+
console.log(categorized);
101+
// show
102+
e_toollist.empty();
103+
if(cate === 'no'){
104+
for(let i=0;i<categorized.no.length;i++){
105+
let item = categorized.no[i];
106+
let card = $(`
107+
<mdui-card clickable href="${item.url}">
108+
<mdui-icon name="${item.icon}" class="item-icon"></mdui-icon>
109+
<h1>${item.name}</h1>
110+
<p>${item.desc}</p>
111+
${item.github ? `<mdui-chip href="${item.github}" icon="link" target="_blank">Github</mdui-chip>` : ''}
112+
</mdui-card>`);
113+
e_toollist.append(card);
114+
};
115+
} else {
116+
let cate_list = cate_order[cate];
117+
for(let i=0;i<cate_list.length;i++){
118+
let key = cate_list[i][0];
119+
let name = cate_list[i][1];
120+
let items = categorized[key];
121+
if(items){
122+
let group = $(`<mdui-collapse-item value="item-${i}">
123+
<mdui-list-item slot="header" icon="folder--outlined">${name}</mdui-list-item>
124+
</mdui-collapse-item>`);
125+
for(let j=0;j<items.length;j++){
126+
let item = items[j];
127+
let card = $(`
128+
<mdui-card clickable href="${item.url}">
129+
<mdui-icon name="${item.icon}" class="item-icon"></mdui-icon>
130+
<h1>${item.name}</h1>
131+
<p>${item.desc}</p>
132+
${item.github ? `<mdui-chip href="${item.github}" icon="link" target="_blank">Github</mdui-chip>` : ''}
133+
</mdui-card>`);
134+
group.append(card);
135+
};
136+
e_toollist.append(group);
137+
};
138+
};
139+
};
140+
};
141+
142+

0 commit comments

Comments
 (0)