elykia 1.0.3 → 1.0.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/countdown.js +201 -0
- package/home.css +15 -0
- package/package.json +1 -1
- package/SAO-Notify.js +0 -44
package/countdown.js
ADDED
|
@@ -0,0 +1,201 @@
|
|
|
1
|
+
const CountdownTimer = (() => {
|
|
2
|
+
const config = {
|
|
3
|
+
targetDate: "2025-01-29",
|
|
4
|
+
targetName: "春节",
|
|
5
|
+
units: {
|
|
6
|
+
day: { text: "今日", divider: 1, unit: "小时" },
|
|
7
|
+
week: { text: "本周", divider: 24, unit: "天" },
|
|
8
|
+
month: { text: "本月", divider: 24, unit: "天" },
|
|
9
|
+
year: { text: "本年", divider: 24, unit: "天" }
|
|
10
|
+
}
|
|
11
|
+
};
|
|
12
|
+
|
|
13
|
+
function getTimeUnit(unit) {
|
|
14
|
+
const now = new Date();
|
|
15
|
+
const start = new Date(now.setHours(0, 0, 0, 0));
|
|
16
|
+
const end = new Date(now.setHours(23, 59, 59, 999));
|
|
17
|
+
|
|
18
|
+
if (unit === 'day') {
|
|
19
|
+
const currentHour = new Date().getHours();
|
|
20
|
+
const remaining = 24 - currentHour;
|
|
21
|
+
const percentage = (currentHour / 24) * 100;
|
|
22
|
+
|
|
23
|
+
return {
|
|
24
|
+
name: config.units[unit].text,
|
|
25
|
+
remaining: remaining,
|
|
26
|
+
percentage: percentage.toFixed(2),
|
|
27
|
+
unit: config.units[unit].unit
|
|
28
|
+
};
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
const ranges = {
|
|
32
|
+
week: () => {
|
|
33
|
+
start.setDate(start.getDate() - start.getDay());
|
|
34
|
+
end.setDate(end.getDate() - end.getDay() + 6);
|
|
35
|
+
},
|
|
36
|
+
month: () => {
|
|
37
|
+
start.setDate(1);
|
|
38
|
+
end.setMonth(end.getMonth() + 1, 0);
|
|
39
|
+
},
|
|
40
|
+
year: () => {
|
|
41
|
+
start.setMonth(0, 1);
|
|
42
|
+
end.setMonth(11, 31);
|
|
43
|
+
}
|
|
44
|
+
};
|
|
45
|
+
ranges[unit]?.();
|
|
46
|
+
|
|
47
|
+
const total = unit === "day" ? 24 : Math.floor((end - start) / 86400000) + 1;
|
|
48
|
+
const passed = Math.floor((now - start) / (3600000 * config.units[unit].divider));
|
|
49
|
+
const percentage = (passed / total) * 100;
|
|
50
|
+
|
|
51
|
+
return {
|
|
52
|
+
name: config.units[unit].text,
|
|
53
|
+
remaining: total - passed,
|
|
54
|
+
percentage: percentage.toFixed(2),
|
|
55
|
+
unit: config.units[unit].unit
|
|
56
|
+
};
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
function updateCountdown() {
|
|
60
|
+
const elements = ['eventName', 'eventDate', 'daysUntil', 'countRight']
|
|
61
|
+
.map(id => document.getElementById(id));
|
|
62
|
+
|
|
63
|
+
if (elements.some(el => !el)) return;
|
|
64
|
+
|
|
65
|
+
const [eventName, eventDate, daysUntil, countRight] = elements;
|
|
66
|
+
const timeData = Object.keys(config.units).reduce((acc, unit) => ({...acc, [unit]: getTimeUnit(unit)}), {});
|
|
67
|
+
const daysRemaining = Math.round((new Date(config.targetDate) - new Date().setHours(0,0,0,0)) / 86400000);
|
|
68
|
+
|
|
69
|
+
eventName.textContent = config.targetName;
|
|
70
|
+
eventDate.textContent = config.targetDate;
|
|
71
|
+
daysUntil.textContent = daysRemaining;
|
|
72
|
+
countRight.innerHTML = Object.entries(timeData)
|
|
73
|
+
.map(([_, item]) => `
|
|
74
|
+
<div class="cd-count-item">
|
|
75
|
+
<div class="cd-item-name">${item.name}</div>
|
|
76
|
+
<div class="cd-item-progress">
|
|
77
|
+
<div class="cd-progress-bar" style="width: ${item.percentage}%; opacity: ${item.percentage/100}"></div>
|
|
78
|
+
<span class="cd-percentage ${item.percentage >= 46 ? 'cd-many' : ''}">${item.percentage}%</span>
|
|
79
|
+
<span class="cd-remaining ${item.percentage >= 60 ? 'cd-many' : ''}">
|
|
80
|
+
<span class="cd-tip">还剩</span>${item.remaining}<span class="cd-tip">${item.unit}</span>
|
|
81
|
+
</span>
|
|
82
|
+
</div>
|
|
83
|
+
</div>
|
|
84
|
+
`).join('');
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
function injectStyles() {
|
|
88
|
+
const styles = `
|
|
89
|
+
.card-countdown .item-content {
|
|
90
|
+
display: flex;
|
|
91
|
+
}
|
|
92
|
+
.cd-count-left {
|
|
93
|
+
position: relative;
|
|
94
|
+
display: flex;
|
|
95
|
+
flex-direction: column;
|
|
96
|
+
margin-right: 0.8rem;
|
|
97
|
+
line-height: 1.5;
|
|
98
|
+
align-items: center;
|
|
99
|
+
justify-content: center;
|
|
100
|
+
}
|
|
101
|
+
.cd-count-left .cd-text {
|
|
102
|
+
font-size: 14px;
|
|
103
|
+
}
|
|
104
|
+
.cd-count-left .cd-name {
|
|
105
|
+
font-weight: bold;
|
|
106
|
+
font-size: 18px;
|
|
107
|
+
}
|
|
108
|
+
.cd-count-left .cd-time {
|
|
109
|
+
font-size: 30px;
|
|
110
|
+
font-weight: bold;
|
|
111
|
+
color: var(--anzhiyu-main);
|
|
112
|
+
}
|
|
113
|
+
.cd-count-left .cd-date {
|
|
114
|
+
font-size: 12px;
|
|
115
|
+
opacity: 0.6;
|
|
116
|
+
}
|
|
117
|
+
.cd-count-left::after {
|
|
118
|
+
content: "";
|
|
119
|
+
position: absolute;
|
|
120
|
+
right: -0.8rem;
|
|
121
|
+
width: 2px;
|
|
122
|
+
height: 80%;
|
|
123
|
+
background-color: var(--anzhiyu-main);
|
|
124
|
+
opacity: 0.5;
|
|
125
|
+
}
|
|
126
|
+
.cd-count-right {
|
|
127
|
+
flex: 1;
|
|
128
|
+
margin-left: .8rem;
|
|
129
|
+
display: flex;
|
|
130
|
+
flex-direction: column;
|
|
131
|
+
justify-content: space-between;
|
|
132
|
+
}
|
|
133
|
+
.cd-count-item {
|
|
134
|
+
display: flex;
|
|
135
|
+
flex-direction: row;
|
|
136
|
+
align-items: center;
|
|
137
|
+
height: 24px;
|
|
138
|
+
}
|
|
139
|
+
.cd-item-name {
|
|
140
|
+
font-size: 14px;
|
|
141
|
+
margin-right: 0.8rem;
|
|
142
|
+
white-space: nowrap;
|
|
143
|
+
}
|
|
144
|
+
.cd-item-progress {
|
|
145
|
+
position: relative;
|
|
146
|
+
display: flex;
|
|
147
|
+
flex-direction: row;
|
|
148
|
+
align-items: center;
|
|
149
|
+
justify-content: space-between;
|
|
150
|
+
height: 100%;
|
|
151
|
+
width: 100%;
|
|
152
|
+
border-radius: 8px;
|
|
153
|
+
background-color: var(--anzhiyu-background);
|
|
154
|
+
overflow: hidden;
|
|
155
|
+
}
|
|
156
|
+
.cd-progress-bar {
|
|
157
|
+
height: 100%;
|
|
158
|
+
border-radius: 8px;
|
|
159
|
+
background-color: var(--anzhiyu-main);
|
|
160
|
+
}
|
|
161
|
+
.cd-percentage,
|
|
162
|
+
.cd-remaining {
|
|
163
|
+
position: absolute;
|
|
164
|
+
font-size: 12px;
|
|
165
|
+
margin: 0 6px;
|
|
166
|
+
transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
|
|
167
|
+
}
|
|
168
|
+
.cd-many {
|
|
169
|
+
color: #fff;
|
|
170
|
+
}
|
|
171
|
+
.cd-remaining {
|
|
172
|
+
opacity: 0;
|
|
173
|
+
transform: translateX(10px);
|
|
174
|
+
}
|
|
175
|
+
.card-countdown .item-content:hover .cd-remaining {
|
|
176
|
+
transform: translateX(0);
|
|
177
|
+
opacity: 1;
|
|
178
|
+
}
|
|
179
|
+
.card-countdown .item-content:hover .cd-percentage {
|
|
180
|
+
transform: translateX(-10px);
|
|
181
|
+
opacity: 0;
|
|
182
|
+
}
|
|
183
|
+
`;
|
|
184
|
+
|
|
185
|
+
const styleSheet = document.createElement("style");
|
|
186
|
+
styleSheet.textContent = styles;
|
|
187
|
+
document.head.appendChild(styleSheet);
|
|
188
|
+
}
|
|
189
|
+
|
|
190
|
+
let timer;
|
|
191
|
+
const start = () => {
|
|
192
|
+
injectStyles();
|
|
193
|
+
updateCountdown();
|
|
194
|
+
timer = setInterval(updateCountdown, 600000);
|
|
195
|
+
};
|
|
196
|
+
|
|
197
|
+
['pjax:complete', 'DOMContentLoaded'].forEach(event => document.addEventListener(event, start));
|
|
198
|
+
document.addEventListener('pjax:send', () => timer && clearInterval(timer));
|
|
199
|
+
|
|
200
|
+
return { start, stop: () => timer && clearInterval(timer) };
|
|
201
|
+
})();
|
package/home.css
ADDED
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
#recent-posts > .recent-post-item:not(a)::before {
|
|
2
|
+
content: "";
|
|
3
|
+
position: absolute;
|
|
4
|
+
top: 0;
|
|
5
|
+
left: 0;
|
|
6
|
+
width: 100%;
|
|
7
|
+
height: 200%;
|
|
8
|
+
background: linear-gradient(to right, transparent, white, transparent);
|
|
9
|
+
transform: translateX(-200%);
|
|
10
|
+
transition: transform 0.5s linear;
|
|
11
|
+
z-index: 1;
|
|
12
|
+
}
|
|
13
|
+
#recent-posts > .recent-post-item:not(a):hover::before {
|
|
14
|
+
transform: translateX(100%) skewX(-60deg);
|
|
15
|
+
}
|
package/package.json
CHANGED
package/SAO-Notify.js
DELETED
|
@@ -1,44 +0,0 @@
|
|
|
1
|
-
function SAONotify(title,message,action){
|
|
2
|
-
// 先移除旧有弹窗,确保不会重叠。
|
|
3
|
-
var notifyWindow = document.getElementById('SAO-Notify');
|
|
4
|
-
if(notifyWindow){
|
|
5
|
-
notifyWindow.remove();
|
|
6
|
-
}
|
|
7
|
-
//样式文件
|
|
8
|
-
var tempstyle = `#SAO-Notify{z-index:9999;background:rgba(204,204,207,0.8);font-family:'SAOUI',Langar,-apple-system,sans-serif;font-weight:bolder;text-shadow:0.5px 0.5px 0.5px#888;height:240px;width:350px;position:fixed;bottom:0;right:0;left:0;top:0;margin:auto auto;border-radius:5px;box-shadow:2px 2px 10px#888;display:block;animation:flashOpen 1s ease alternate}.notify-title{background:rgba(249,249,249,0.8);color:rgba(60,60,61,0.7);height:60px;width:100%;display:block;font-size:20px;text-align:center;border-top-left-radius:5px;border-top-right-radius:5px;padding-top:10px}.notify-alert::-webkit-scrollbar{display:none}.notify-alert{background:rgba(220,220,220,0.8);color:rgba(60,60,61,0.7);height:120px;overflow:scroll;width:100%;display:flex;justify-content:space-around;align-items:center;box-shadow:0px 0px 15px#bcbcbc inset;flex-wrap:wrap;padding:5px 25px;}.notify-button{background:rgba(249,249,249,0.8);height:60px;width:100%;display:block;text-align:center;border-bottom-left-radius:5px;border-bottom-right-radius:5px;padding-top:12.5px}.notify-confirm{background:rgba(47,121,212,0);border-radius:50%;display:inline-block;width:36px;height:36px;margin-inline:60px;border:1px solid;border-color:#2f79d4}.notify-confirm button{background:#2f79d4;text-align:center;border-radius:50%;font-size:18px;color:#fff;display:block;width:30px;height:30px;margin:2px}.notify-cancel{background:rgba(203,55,73,0);border-radius:50%;display:inline-block;width:36px;height:36px;margin-inline:60px;border:1px solid;border-color:#cb3749}.notify-cancel button{background:#cb3749;text-align:center;border-radius:50%;font-size:18px;font-weight:bolder;color:#fff;display:block;width:30px;height:30px;margin:2px}.notify-receive{background:rgba(47,121,212,0);border-radius:50%;display:inline-block;width:36px;height:36px;margin-inline:60px;border:1px solid;border-color:#eda60c}.notify-receive button{background:#eda60c;text-align:center;border-radius:50%;font-size:18px;color:#fff;display:block;width:30px;height:30px;margin:2px}@-moz-keyframes flashOpen{from{transform:rotateX(90deg)}to{transform:rotateX(0deg)}}@-webkit-keyframes flashOpen{from{transform:rotateX(90deg)}to{transform:rotateX(0deg)}}@-o-keyframes flashOpen{from{transform:rotateX(90deg)}to{transform:rotateX(0deg)}}@keyframes flashOpen{from{transform:rotateX(90deg)}to{transform:rotateX(0deg)}}@-moz-keyframes flashClose{from{transform:rotateX(0deg)}to{transform:rotateX(90deg)}}@-webkit-keyframes flashClose{from{transform:rotateX(0deg)}to{transform:rotateX(90deg)}}@-o-keyframes flashClose{from{transform:rotateX(0deg)}to{transform:rotateX(90deg)}}@keyframes flashClose{from{transform:rotateX(0deg)}to{transform:rotateX(90deg)}}`;
|
|
9
|
-
//若定义了action执行代码片段，则输出有双选项的弹窗
|
|
10
|
-
if (action){
|
|
11
|
-
var template =`<div id="SAO-Notify"><style>` + tempstyle +`</style><div class="notify-title">` + `${title}` + `</div><div class="notify-alert"> `+ `${message}` + `</div><div class="notify-button"><span class="notify-confirm"><button class="far fa-circle" type="button" name="confirm" onclick="clickAudio();setTimeout(function(){` + `${action}` + `},500);cancelNotify()"></button></span><span class="notify-cancel"><button class="fa fa-times" type="button" name="cancel" onclick="panelAudio();cancelNotify()"></button></span></div><audio id="SAO-Notify-Panel" src="https://npm.elemecdn.com/akilar-candyassets/audio/Panel.mp3"></audio><audio id="SAO-Notify-Click" src="https://npm.elemecdn.com/akilar-candyassets/audio/Click.mp3"></audio>
|
|
12
|
-
</div>`
|
|
13
|
-
} else { //若未定义action代码片段，则仅输出单选项的弹窗
|
|
14
|
-
var template =`<div id="SAO-Notify"><style>` + tempstyle +`</style><div class="notify-title">` + `${title}` + `</div><div class="notify-alert"> `+ `${message}` + `</div><div class="notify-button"><span class="notify-receive"><button class="fas fa-check" type="button" name="receive" onclick="panelAudio();cancelNotify()"></button></span></div><audio id="SAO-Notify-Panel" src="https://npm.elemecdn.com/akilar-candyassets/audio/Panel.mp3"></audio><audio id="SAO-Notify-Click" src="https://npm.elemecdn.com/akilar-candyassets/audio/Click.mp3"></audio>
|
|
15
|
-
</div>`
|
|
16
|
-
};
|
|
17
|
-
|
|
18
|
-
document.body.insertAdjacentHTML('beforeend',template);
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
//按钮确认选项音效
|
|
23
|
-
function clickAudio() {
|
|
24
|
-
var clickAudio = document.getElementById("SAO-Notify-Click");
|
|
25
|
-
if (clickAudio) {
|
|
26
|
-
clickAudio.play();//有音频时播放
|
|
27
|
-
}
|
|
28
|
-
}
|
|
29
|
-
//按钮取消选项音效
|
|
30
|
-
function panelAudio() {
|
|
31
|
-
var panelAudio = document.getElementById("SAO-Notify-Panel");
|
|
32
|
-
if (panelAudio) {
|
|
33
|
-
panelAudio.play();//有音频时播放
|
|
34
|
-
}
|
|
35
|
-
}
|
|
36
|
-
// 关闭通知栏
|
|
37
|
-
function cancelNotify(){
|
|
38
|
-
var notifyWindow = document.getElementById('SAO-Notify');
|
|
39
|
-
notifyWindow.style.animation = 'flashClose 1.5s ease alternate ';
|
|
40
|
-
setTimeout(function() {
|
|
41
|
-
notifyWindow.remove();
|
|
42
|
-
}, 1e3);
|
|
43
|
-
|
|
44
|
-
}
|