English | 中文
你可以在lockscreen-product下下载其它主题，也可以创建pr到lockscreen-product下，我们审核后会进行收录
theme.zip
├── index.html # 入口文件（必须）
├── css/
│ └── style.css
├── js/
│ └── main.js
├── images/
└── fonts/
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>时钟主题</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="lockscreen-container">
<div class="clock-section">
<div class="time-display">
<span id="hours">12</span>
<span class="colon">:</span>
<span id="minutes">00</span>
</div>
<div class="seconds-display">
<span id="seconds">00</span>
</div>
<div class="date-display">
<span id="weekday">星期一</span>
<span id="date">1月1日</span>
</div>
</div>
<div class="info-section">
<div class="battery-info">
<span id="battery-icon">🔋</span>
<span id="battery-level">--%</span>
</div>
<div class="notification-hint" id="notification-hint">
<span>📱</span>
<span>无通知</span>
</div>
</div>
<div class="unlock-hint">
<span>上滑解锁</span>
</div>
</div>
<script src="js/main.js"></script>
</body>
</html>* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
width: 100vw;
height: 100vh;
background: transparent;
color: white;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}
.lockscreen-container {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
padding: 60px 30px 40px;
position: relative;
}
.clock-section {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 80px;
}
.time-display {
display: flex;
align-items: center;
font-size: 96px;
font-weight: 200;
text-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}
.time-display .colon {
animation: blink 2s infinite;
}
@keyframes blink {
0%, 100% { opacity: 1; }
50% { opacity: 0.3; }
}
.seconds-display {
font-size: 36px;
margin-top: 10px;
opacity: 0.8;
}
.date-display {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 20px;
font-size: 20px;
}
.info-section {
position: absolute;
top: 20px;
right: 25px;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 8px;
}
.battery-info, .notification-hint {
display: flex;
align-items: center;
gap: 6px;
font-size: 14px;
padding: 6px 12px;
background: rgba(0, 0, 0, 0.3);
border-radius: 20px;
backdrop-filter: blur(10px);
}
.notification-hint.has-notification {
background: rgba(0, 150, 255, 0.4);
}
.unlock-hint {
margin-bottom: 20px;
font-size: 14px;
opacity: 0.6;
animation: bounce 2s infinite;
}
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-5px); }
}const weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
function updateTime() {
const now = new Date();
document.getElementById('hours').textContent = String(now.getHours()).padStart(2, '0');
document.getElementById('minutes').textContent = String(now.getMinutes()).padStart(2, '0');
document.getElementById('seconds').textContent = String(now.getSeconds()).padStart(2, '0');
document.getElementById('weekday').textContent = weekdays[now.getDay()];
document.getElementById('date').textContent = `${now.getMonth() + 1}月${now.getDate()}日`;
}
function updateBattery() {
if ('getBattery' in navigator) {
navigator.getBattery().then(function(battery) {
const level = Math.round(battery.level * 100);
document.getElementById('battery-level').textContent = level + '%';
document.getElementById('battery-icon').textContent =
battery.charging ? '⚡' : (level <= 20 ? '🪫' : '🔋');
});
}
}
function onTimeTick() {
updateTime();
}
function onNotificationStateChanged(hasNotifications) {
const hint = document.getElementById('notification-hint');
hint.classList.toggle('has-notification', hasNotifications);
hint.querySelector('span:last-child').textContent = hasNotifications ? '有新通知' : '无通知';
}
function init() {
updateTime();
updateBattery();
setInterval(updateTime, 1000);
if ('getBattery' in navigator) {
navigator.getBattery().then(function(battery) {
battery.addEventListener('levelchange', updateBattery);
battery.addEventListener('chargingchange', updateBattery);
});
}
}
document.addEventListener('DOMContentLoaded', init);// 获取系统属性
AviumLockscreen.getSystemProperty(key, defaultValue);
AviumLockscreen.getSystemPropertyInt(key, defaultValue);
AviumLockscreen.getSystemPropertyBoolean(key, defaultValue);
// 获取当前时间戳
AviumLockscreen.getCurrentTime();
// 获取主题名称
AviumLockscreen.getThemeName();
// 输出日志到 logcat
AviumLockscreen.log(message);
// 获取系统语言
const locale = AviumLockscreen.getSystemProperty("persist.sys.locale", "zh-CN");// 每分钟触发
function onTimeTick() {
updateClock();
}
// 通知状态变化时触发
function onNotificationStateChanged(hasNotifications) {
// hasNotifications: boolean
}| 要求 | 说明 |
|---|---|
| 入口文件 | index.html 必须位于 ZIP 根目录 |
| 背景 | 必须设置 background: transparent |
| 全屏 | 使用 width: 100vw; height: 100vh; |
| 路径 | 所有资源使用相对路径 |
| 网络 | 禁止外部网络资源加载 |
| 触摸 | 触摸事件被禁用 |
| 扩展名 | MIME 类型 |
|---|---|
| .html, .htm | text/html |
| .css | text/css |
| .js | application/javascript |
| .png | image/png |
| .jpg, .jpeg | image/jpeg |
| .gif | image/gif |
| .svg | image/svg+xml |
| .woff, .woff2 | font/woff |
| .ttf | font/ttf |
cd theme-directory
zip -r ../theme.zip .adb logcat -s WebViewLockscreen:D