✨ 轻雪天气更新
11
liteyuki/resources/liteyuki_weather/lang/en.lang
Normal file
@ -0,0 +1,11 @@
|
||||
weather.monday=Mon
|
||||
weather.tuesday=Tue
|
||||
weather.wednesday=Wed
|
||||
weather.thursday=Thu
|
||||
weather.friday=Fri
|
||||
weather.saturday=Sat
|
||||
weather.sunday=Sun
|
||||
weather.day=Day
|
||||
weather.night=Night
|
||||
weather.today=Today
|
||||
weather.tomorrow=Tomorrow
|
11
liteyuki/resources/liteyuki_weather/lang/ja.lang
Normal file
@ -0,0 +1,11 @@
|
||||
weather.monday=月
|
||||
weather.tuesday=火
|
||||
weather.wednesday=水
|
||||
weather.thursday=木
|
||||
weather.friday=金
|
||||
weather.saturday=土
|
||||
weather.sunday=日
|
||||
weather.day=昼
|
||||
weather.night=夜
|
||||
weather.today=今日
|
||||
weather.tomorrow=明日
|
11
liteyuki/resources/liteyuki_weather/lang/zh-CN.lang
Normal file
@ -0,0 +1,11 @@
|
||||
weather.monday=周一
|
||||
weather.tuesday=周二
|
||||
weather.wednesday=周三
|
||||
weather.thursday=周四
|
||||
weather.friday=周五
|
||||
weather.saturday=周六
|
||||
weather.sunday=周日
|
||||
weather.day=白天
|
||||
weather.night=夜晚
|
||||
weather.today=今天
|
||||
weather.tomorrow=明天
|
3
liteyuki/resources/liteyuki_weather/metadata.yml
Normal file
@ -0,0 +1,3 @@
|
||||
name: 轻雪天气资源包
|
||||
description: For Liteyuki Weather
|
||||
version: 2024.4.26
|
@ -0,0 +1,184 @@
|
||||
:root {
|
||||
--main-text-color: #fff;
|
||||
--sub-text-color: #ccc;
|
||||
--tip-text-color: #999;
|
||||
--device-info-width: 240px;
|
||||
--sub-border-radius: 60px;
|
||||
}
|
||||
|
||||
#weather-info {
|
||||
color: white;
|
||||
/*justify-content: center;*/
|
||||
/*align-items: center;*/
|
||||
/*align-content: center;*/
|
||||
}
|
||||
|
||||
.icon {
|
||||
/* icon 类img阴影*/
|
||||
filter: drop-shadow(1px 1px 10px #00000044);
|
||||
}
|
||||
|
||||
#main-info {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#main-left {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
#main-right {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
#time {
|
||||
font-size: 25px;
|
||||
font-weight: bold;
|
||||
font-style: italic;
|
||||
text-align: right;
|
||||
color: var(--sub-text-color);
|
||||
|
||||
}
|
||||
|
||||
#adm {
|
||||
font-size: 32px;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
color: var(--sub-text-color);
|
||||
}
|
||||
|
||||
#city {
|
||||
margin-top: 20px;
|
||||
font-size: 70px;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#temperature {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
|
||||
}
|
||||
|
||||
#temperature-now {
|
||||
font-size: 70px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#temperature-range {
|
||||
font-size: 40px;
|
||||
font-weight: bold;
|
||||
color: var(--sub-text-color);
|
||||
}
|
||||
|
||||
#description {
|
||||
font-size: 50px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
||||
#aqi {
|
||||
height: 50px;
|
||||
display: flex;
|
||||
border-radius: 60px;
|
||||
padding: 5px;
|
||||
font-size: 40px;
|
||||
text-align: center;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#aqi-dot {
|
||||
height: 80%;
|
||||
aspect-ratio: 1 / 1;
|
||||
border-radius: 50%;
|
||||
background-color: var(--sub-text-color);
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.main-icon {
|
||||
width: 240px;
|
||||
height: 240px;
|
||||
}
|
||||
|
||||
#hours-info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.hourly-item {
|
||||
text-align: center;
|
||||
background-color: #ffffff44;
|
||||
border-radius: var(--sub-border-radius);
|
||||
align-items: center;
|
||||
padding: 20px 10px;
|
||||
}
|
||||
|
||||
.hourly-icon{
|
||||
width: 80%;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.hourly-temperature {
|
||||
text-align: center;
|
||||
color: var(--main-text-color);
|
||||
font-size: 30px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.hourly-time {
|
||||
text-align: center;
|
||||
color: var(--main-text-color);
|
||||
font-size: 25px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
/**/
|
||||
.daily-item {
|
||||
display: flex;
|
||||
position: relative;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background-color: #ffffff44;
|
||||
height: 90px;
|
||||
border-radius: var(--sub-border-radius);
|
||||
margin-bottom: 20px;
|
||||
padding: 0 30px;
|
||||
}
|
||||
|
||||
/*最后一个没有margin_button*/
|
||||
.daily-item:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.icon-day {
|
||||
position: absolute;
|
||||
left: 60%;
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
.icon-night {
|
||||
position: absolute;
|
||||
left: 70%;
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
.daily-weather{
|
||||
position: absolute;
|
||||
left: 30%;
|
||||
}
|
||||
|
||||
.daily-temperature{
|
||||
position: absolute;
|
||||
left: 83%;
|
||||
}
|
||||
|
||||
.daily-day, .daily-weather, .daily-temperature {
|
||||
text-align: center;
|
||||
color: var(--main-text-color);
|
||||
font-size: 30px;
|
||||
}
|
Before Width: | Height: | Size: 7.2 KiB After Width: | Height: | Size: 7.2 KiB |
Before Width: | Height: | Size: 6.4 KiB After Width: | Height: | Size: 6.4 KiB |
Before Width: | Height: | Size: 7.0 KiB After Width: | Height: | Size: 7.0 KiB |
Before Width: | Height: | Size: 6.7 KiB After Width: | Height: | Size: 6.7 KiB |
Before Width: | Height: | Size: 5.2 KiB After Width: | Height: | Size: 5.2 KiB |
Before Width: | Height: | Size: 5.1 KiB After Width: | Height: | Size: 5.1 KiB |
Before Width: | Height: | Size: 5.9 KiB After Width: | Height: | Size: 5.9 KiB |
Before Width: | Height: | Size: 5.7 KiB After Width: | Height: | Size: 5.7 KiB |
Before Width: | Height: | Size: 5.7 KiB After Width: | Height: | Size: 5.7 KiB |
Before Width: | Height: | Size: 16 KiB After Width: | Height: | Size: 16 KiB |
Before Width: | Height: | Size: 9.6 KiB After Width: | Height: | Size: 9.6 KiB |
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 10 KiB |
Before Width: | Height: | Size: 8.8 KiB After Width: | Height: | Size: 8.8 KiB |
Before Width: | Height: | Size: 9.0 KiB After Width: | Height: | Size: 9.0 KiB |
Before Width: | Height: | Size: 9.5 KiB After Width: | Height: | Size: 9.5 KiB |
Before Width: | Height: | Size: 8.5 KiB After Width: | Height: | Size: 8.5 KiB |
Before Width: | Height: | Size: 9.4 KiB After Width: | Height: | Size: 9.4 KiB |
Before Width: | Height: | Size: 9.1 KiB After Width: | Height: | Size: 9.1 KiB |
Before Width: | Height: | Size: 9.5 KiB After Width: | Height: | Size: 9.5 KiB |
Before Width: | Height: | Size: 8.6 KiB After Width: | Height: | Size: 8.6 KiB |
Before Width: | Height: | Size: 9.9 KiB After Width: | Height: | Size: 9.9 KiB |
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
Before Width: | Height: | Size: 6.8 KiB After Width: | Height: | Size: 6.8 KiB |
Before Width: | Height: | Size: 9.3 KiB After Width: | Height: | Size: 9.3 KiB |
Before Width: | Height: | Size: 9.1 KiB After Width: | Height: | Size: 9.1 KiB |
Before Width: | Height: | Size: 9.8 KiB After Width: | Height: | Size: 9.8 KiB |
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 11 KiB |
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
Before Width: | Height: | Size: 9.1 KiB After Width: | Height: | Size: 9.1 KiB |
Before Width: | Height: | Size: 9.5 KiB After Width: | Height: | Size: 9.5 KiB |
Before Width: | Height: | Size: 8.6 KiB After Width: | Height: | Size: 8.6 KiB |
Before Width: | Height: | Size: 6.5 KiB After Width: | Height: | Size: 6.5 KiB |
Before Width: | Height: | Size: 7.5 KiB After Width: | Height: | Size: 7.5 KiB |
Before Width: | Height: | Size: 8.9 KiB After Width: | Height: | Size: 8.9 KiB |
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 10 KiB |
Before Width: | Height: | Size: 9.0 KiB After Width: | Height: | Size: 9.0 KiB |
Before Width: | Height: | Size: 9.0 KiB After Width: | Height: | Size: 9.0 KiB |
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 10 KiB |
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 10 KiB |
Before Width: | Height: | Size: 7.5 KiB After Width: | Height: | Size: 7.5 KiB |
Before Width: | Height: | Size: 8.9 KiB After Width: | Height: | Size: 8.9 KiB |
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 10 KiB |
Before Width: | Height: | Size: 9.5 KiB After Width: | Height: | Size: 9.5 KiB |
Before Width: | Height: | Size: 9.5 KiB After Width: | Height: | Size: 9.5 KiB |
Before Width: | Height: | Size: 5.8 KiB After Width: | Height: | Size: 5.8 KiB |
Before Width: | Height: | Size: 4.6 KiB After Width: | Height: | Size: 4.6 KiB |
Before Width: | Height: | Size: 4.6 KiB After Width: | Height: | Size: 4.6 KiB |
Before Width: | Height: | Size: 4.7 KiB After Width: | Height: | Size: 4.7 KiB |
Before Width: | Height: | Size: 6.8 KiB After Width: | Height: | Size: 6.8 KiB |
Before Width: | Height: | Size: 6.8 KiB After Width: | Height: | Size: 6.8 KiB |
Before Width: | Height: | Size: 6.7 KiB After Width: | Height: | Size: 6.7 KiB |
Before Width: | Height: | Size: 6.9 KiB After Width: | Height: | Size: 6.9 KiB |
Before Width: | Height: | Size: 5.4 KiB After Width: | Height: | Size: 5.4 KiB |
Before Width: | Height: | Size: 4.9 KiB After Width: | Height: | Size: 4.9 KiB |
Before Width: | Height: | Size: 6.1 KiB After Width: | Height: | Size: 6.1 KiB |
Before Width: | Height: | Size: 6.9 KiB After Width: | Height: | Size: 6.9 KiB |
Before Width: | Height: | Size: 6.3 KiB After Width: | Height: | Size: 6.3 KiB |
Before Width: | Height: | Size: 5.2 KiB After Width: | Height: | Size: 5.2 KiB |
Before Width: | Height: | Size: 5.2 KiB After Width: | Height: | Size: 5.2 KiB |
Before Width: | Height: | Size: 5.1 KiB After Width: | Height: | Size: 5.1 KiB |
Before Width: | Height: | Size: 5.2 KiB After Width: | Height: | Size: 5.2 KiB |
Before Width: | Height: | Size: 4.6 KiB After Width: | Height: | Size: 4.6 KiB |
Before Width: | Height: | Size: 4.2 KiB After Width: | Height: | Size: 4.2 KiB |
Before Width: | Height: | Size: 3.7 KiB After Width: | Height: | Size: 3.7 KiB |
Before Width: | Height: | Size: 4.2 KiB After Width: | Height: | Size: 4.2 KiB |
Before Width: | Height: | Size: 4.6 KiB After Width: | Height: | Size: 4.6 KiB |
Before Width: | Height: | Size: 5.1 KiB After Width: | Height: | Size: 5.1 KiB |
Before Width: | Height: | Size: 4.3 KiB After Width: | Height: | Size: 4.3 KiB |
Before Width: | Height: | Size: 4.3 KiB After Width: | Height: | Size: 4.3 KiB |
Before Width: | Height: | Size: 6.3 KiB After Width: | Height: | Size: 6.3 KiB |
114
liteyuki/resources/liteyuki_weather/templates/js/weather_now.js
Normal file
@ -0,0 +1,114 @@
|
||||
/**
|
||||
* @typedef {Object} Location
|
||||
* @property {string} city - The city name.
|
||||
* @property {string} country - The country name.
|
||||
*
|
||||
* @typedef {Object} Weather
|
||||
* @property {number} temperature - The current temperature.
|
||||
* @property {string} description - The weather description.
|
||||
*
|
||||
* @typedef {Object} Data
|
||||
* @property {Location} location - The location data.
|
||||
* @property {Weather} weather - The weather data.
|
||||
*/
|
||||
|
||||
/** @type {Data} */
|
||||
|
||||
let data = JSON.parse(document.getElementById("data").innerText)
|
||||
|
||||
let localData = data["localization"] // 本地化数据
|
||||
|
||||
let weatherNow = data["weatherNow"]
|
||||
|
||||
let weatherDaily = data["weatherDaily"]
|
||||
let weatherHourly = data["weatherHourly"]
|
||||
let aqi = data["aqi"]
|
||||
|
||||
let locationData = data["location"]
|
||||
|
||||
// 处理aqi
|
||||
let aqiValue = 0
|
||||
aqi["aqi"].forEach(
|
||||
(item) => {
|
||||
if (item["defaultLocalAqi"]) {
|
||||
document.getElementById("aqi-data").innerText = "AQI " + item["valueDisplay"] + " " + item["category"]
|
||||
// 将(255,255,255)这种格式的颜色设置给css
|
||||
document.getElementById("aqi-dot").style.backgroundColor = "rgb(" + item["color"] + ")"
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
templates = {
|
||||
"time": weatherNow["now"]["obsTime"],
|
||||
"city": locationData["name"],
|
||||
"adm": locationData["country"] + " " + locationData["adm1"] + " " + locationData["adm2"],
|
||||
"temperature-now": weatherNow["now"]["temp"] + "°",
|
||||
"temperature-range": weatherDaily["daily"][0]["tempMin"] + "°/" + weatherDaily["daily"][0]["tempMax"] + "°",
|
||||
"description": weatherNow["now"]["text"]
|
||||
}
|
||||
|
||||
// 遍历每一个id,给其赋值
|
||||
for (let id in templates) {
|
||||
document.getElementById(id).innerText = templates[id]
|
||||
}
|
||||
|
||||
let maxHourlyItem = 8
|
||||
let percentWidth = 1 / (maxHourlyItem * 1.5) * 100
|
||||
let hourlyStep = 2 // n小时一个数据
|
||||
let hourlyCount = 0
|
||||
weatherHourly['hourly'].forEach(
|
||||
(item, index) => {
|
||||
if (index % hourlyStep !== 0) {
|
||||
return
|
||||
}
|
||||
if (hourlyCount >= maxHourlyItem) {
|
||||
return
|
||||
}
|
||||
|
||||
let hourlyItemDiv = document.importNode(document.getElementById("hourly-item-template").content, true)
|
||||
hourlyItemDiv.className = "hourly-item"
|
||||
hourlyItemDiv.querySelector('.hourly-icon').setAttribute("src", `./img/qw_icon/${item["icon"]}.png`)
|
||||
hourlyItemDiv.querySelector('.hourly-time').innerText = get_time_hour(item["fxTime"])
|
||||
hourlyItemDiv.querySelector('.hourly-temperature').innerText = " " + item["temp"] + "°"
|
||||
// 设置最大宽度
|
||||
hourlyItemDiv.querySelector('.hourly-item').style.maxWidth = percentWidth + "%"
|
||||
hourlyItemDiv.querySelector('.hourly-icon').style.maxWidth = "100%"
|
||||
document.getElementById("hours-info").appendChild(hourlyItemDiv)
|
||||
hourlyCount++
|
||||
}
|
||||
)
|
||||
|
||||
let maxDailyItem = 7
|
||||
// 第一和第二天用today和tomorrow,后面用星期X英文小写
|
||||
let daysStandard = ['monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday', 'sunday']
|
||||
let todayDay = new Date().getDay()
|
||||
let days = [localData['today'], localData['tomorrow']]
|
||||
for (let i = 0; i < 5; i++) {
|
||||
days.push(localData[daysStandard[(todayDay + i) % 7]])
|
||||
}
|
||||
weatherDaily['daily'].forEach(
|
||||
(item, index) => {
|
||||
if (index >= maxDailyItem) {
|
||||
return
|
||||
}
|
||||
let today = days[index]
|
||||
if (index >= 2){
|
||||
today += `(${item["fxDate"].split("-")[1]}.${item["fxDate"].split("-")[2]})`
|
||||
}
|
||||
let dailyItemDiv = document.importNode(document.getElementById("daily-item-template").content, true)
|
||||
dailyItemDiv.querySelector('.icon-day').setAttribute("src", `./img/qw_icon/${item["iconDay"]}.png`)
|
||||
dailyItemDiv.querySelector('.icon-night').setAttribute("src", `./img/qw_icon/${item["iconNight"]}.png`)
|
||||
|
||||
dailyItemDiv.querySelector('.daily-day').innerText = today
|
||||
|
||||
dailyItemDiv.querySelector('.daily-weather').innerText = item["textDay"]
|
||||
dailyItemDiv.querySelector('.daily-temperature').innerText = item["tempMin"] + "°~" + item["tempMax"] + "°"
|
||||
|
||||
document.getElementById('days-info').appendChild(dailyItemDiv)
|
||||
}
|
||||
)
|
||||
|
||||
function get_time_hour(fxTime) {
|
||||
// fxTime 2024-05-03T02:00+08:00'
|
||||
return fxTime.split("T")[1].split("+")[0]
|
||||
}
|
@ -0,0 +1,73 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Liteyuki Status</title>
|
||||
<link rel="stylesheet" href="./css/card.css">
|
||||
<link rel="stylesheet" href="./css/fonts.css">
|
||||
<link rel="stylesheet" href="css/weather_now.css">
|
||||
</head>
|
||||
<!-- qw_icon: https://a.hecdn.net/img/common/icon/202106d/%d.png-->
|
||||
<body>
|
||||
<template id="hourly-item-template">
|
||||
<div class="hourly-item">
|
||||
<img class="hourly-icon icon" src="./img/qw_icon/101.png" alt="WeatherIcon">
|
||||
<div class="hourly-temperature">90°</div>
|
||||
<!-- <div class="hourly-windDir">None</div>-->
|
||||
<div class="hourly-time">02:00</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template id="daily-item-template">
|
||||
<div class="daily-item">
|
||||
<div class="daily-day">
|
||||
周八
|
||||
</div>
|
||||
<div class="daily-weather">
|
||||
小水
|
||||
</div>
|
||||
<img class="daily-icon icon-day icon" src="./img/qw_icon/101.png" alt="WeatherIcon">
|
||||
<img class="daily-icon icon-night icon" src="./img/qw_icon/101.png" alt="WeatherIcon">
|
||||
<div class="daily-temperature">
|
||||
12°~23°
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="data-storage" id="data">{{ data | tojson }}</div>
|
||||
<div class="info-box" id="weather-info">
|
||||
<div id="detail-info">
|
||||
<div id="time">2045-01-12 22:22:22</div>
|
||||
<div id="adm">枫丹 白露 白露区</div>
|
||||
<div id="city">白露区</div>
|
||||
</div>
|
||||
<div id="main-info">
|
||||
<div id="main-left">
|
||||
<img class="main-icon icon" src="./img/qw_icon/101.png" alt="WeatherIcon">
|
||||
</div>
|
||||
<div id="main-right">
|
||||
<div id="temperature">
|
||||
<div id="temperature-now">
|
||||
90°
|
||||
</div>
|
||||
<div id="temperature-range">
|
||||
10°~90°
|
||||
</div>
|
||||
</div>
|
||||
<div id="description">
|
||||
示例天气
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="aqi">
|
||||
<div id="aqi-dot"></div>
|
||||
<div id="aqi-data"> AQI 114 优</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-box" id="sub-info"></div>
|
||||
<div class="info-box" id="hours-info"></div>
|
||||
<div class="info-box" id="days-info"></div>
|
||||
|
||||
<script src="./js/card.js"></script>
|
||||
<script src="js/weather_now.js"></script>
|
||||
</body>
|
@ -156,4 +156,5 @@ status.minutes=Minuten
|
||||
status.seconds=Sekunden
|
||||
status.cores=Kerne
|
||||
status.threads=Threads
|
||||
status.process=Prozesse
|
||||
status.process=Prozesse
|
||||
status.description=Liteyuki Bot-Status
|
@ -156,4 +156,5 @@ status.minutes=Minutes
|
||||
status.seconds=Seconds
|
||||
status.cores=Cores
|
||||
status.threads=Threads
|
||||
status.process=Processes
|
||||
status.process=Processes
|
||||
status.description=Liteyuki Dashboard
|
@ -156,4 +156,5 @@ status.minutes=Minutos
|
||||
status.seconds=Segundos
|
||||
status.cores=Núcleos
|
||||
status.threads=Hilos
|
||||
status.process=Procesos
|
||||
status.process=Procesos
|
||||
status.description=Liteyuki Dashboard Status
|
@ -156,4 +156,5 @@ status.minutes=分
|
||||
status.seconds=秒
|
||||
status.cores=コア
|
||||
status.threads=スレッド
|
||||
status.process=プロセス
|
||||
status.process=プロセス
|
||||
status.description=軽雪監視パネル
|
@ -156,4 +156,5 @@ status.minutes=分
|
||||
status.seconds=秒
|
||||
status.cores=核心
|
||||
status.threads=线程
|
||||
status.process=进程
|
||||
status.process=进程
|
||||
status.description=轻雪机器人状态面板
|
@ -11,9 +11,15 @@ body {
|
||||
}
|
||||
|
||||
.info-box {
|
||||
border-radius: 30px;
|
||||
border-radius: 50px;
|
||||
padding: 30px;
|
||||
backdrop-filter: blur(10px);
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
#author-description {
|
||||
text-align: center;
|
||||
color: var(--sub-text-color);
|
||||
font-size: 30px;
|
||||
}
|
@ -1,50 +1,46 @@
|
||||
:root {
|
||||
--main-text-color: #fff;
|
||||
--sub-text-color: #bbb;
|
||||
--tip-text-color: #888;
|
||||
|
||||
--sub-text-color: #ccc;
|
||||
--tip-text-color: #999;
|
||||
--device-info-width: 240px;
|
||||
}
|
||||
|
||||
.bot-info {
|
||||
display: flex;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.bot-icon {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
aspect-ratio: 1;
|
||||
width: 220px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.bot-icon-img {
|
||||
height: 220px;
|
||||
border-radius: 50%;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.bot-name {
|
||||
color: var(--main-text-color);
|
||||
display: flex;
|
||||
font-size: 40px;
|
||||
font-size: 45px;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.bot-tag {
|
||||
white-space: nowrap;
|
||||
white-space: break-spaces;
|
||||
color: var(--sub-text-color);
|
||||
font-size: 27px;
|
||||
font-size: 30px;
|
||||
font-weight: 700;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.bot-tag[suffix="1"]::after {
|
||||
content: " | ";
|
||||
content: "|";
|
||||
display: inline-block;
|
||||
margin: 0 5px;
|
||||
height: 30%;
|
||||
@ -127,4 +123,5 @@
|
||||
font-style: italic;
|
||||
color: var(--sub-text-color);
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -1,83 +0,0 @@
|
||||
#weather-info {
|
||||
color: white;
|
||||
/*justify-content: center;*/
|
||||
/*align-items: center;*/
|
||||
/*align-content: center;*/
|
||||
}
|
||||
|
||||
#main-info {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#time {
|
||||
font-size: 25px;
|
||||
font-weight: bold;
|
||||
font-style: italic;
|
||||
text-align: right;
|
||||
color: #aaa;
|
||||
|
||||
}
|
||||
|
||||
#adm {
|
||||
font-size: 30px;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
#city {
|
||||
margin-top: 20px;
|
||||
font-size: 70px;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#temperature {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
|
||||
}
|
||||
|
||||
#temperature-now {
|
||||
font-size: 70px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#temperature-range {
|
||||
font-size: 40px;
|
||||
font-weight: bold;
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
#description {
|
||||
font-size: 50px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
||||
#aqi {
|
||||
height: 50px;
|
||||
display: flex;
|
||||
border-radius: 60px;
|
||||
padding: 5px;
|
||||
font-size: 40px;
|
||||
text-align: center;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#aqi-dot {
|
||||
height: 80%;
|
||||
aspect-ratio: 1 / 1;
|
||||
border-radius: 50%;
|
||||
background-color: #aaa;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.main-icon {
|
||||
width: 240px;
|
||||
height: 240px;
|
||||
}
|
@ -9,3 +9,9 @@ const bgs = [
|
||||
]
|
||||
// 随机选择背景图片
|
||||
document.body.style.backgroundImage = `url(./img/${bgs[Math.floor(Math.random() * bgs.length)]})`;
|
||||
// body后插入info-box id=description
|
||||
let descriptionDiv = document.createElement("div");
|
||||
descriptionDiv.className = 'info-box'
|
||||
descriptionDiv.id = 'author-description'
|
||||
descriptionDiv.innerText = 'Designed by SnowyKami'
|
||||
document.body.appendChild(descriptionDiv);
|
||||
|
@ -290,6 +290,8 @@ function main() {
|
||||
document.getElementById('motto-text').innerText = mottoText
|
||||
document.getElementById('motto-from').innerText = mottoFrom
|
||||
|
||||
document.getElementById('author-description').innerText = localData['description'] + ' Powered by Liteyuki'
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
@ -1,59 +0,0 @@
|
||||
/**
|
||||
* @typedef {Object} Location
|
||||
* @property {string} city - The city name.
|
||||
* @property {string} country - The country name.
|
||||
*
|
||||
* @typedef {Object} Weather
|
||||
* @property {number} temperature - The current temperature.
|
||||
* @property {string} description - The weather description.
|
||||
*
|
||||
* @typedef {Object} Data
|
||||
* @property {Location} location - The location data.
|
||||
* @property {Weather} weather - The weather data.
|
||||
*/
|
||||
|
||||
/** @type {Data} */
|
||||
|
||||
let data = JSON.parse(document.getElementById("data").innerText)
|
||||
|
||||
let weatherNow = data["weatherNow"]
|
||||
|
||||
let weatherDaily = data["weatherDaily"]
|
||||
let weatherHourly = data["weatherHourly"]
|
||||
let aqi = data["aqi"]
|
||||
|
||||
let locationData = data["location"]
|
||||
|
||||
// set info
|
||||
// document.getElementById("time").innerText = weatherNow["now"]["obsTime"]
|
||||
// document.getElementById("city").innerText = locationData["name"]
|
||||
// document.getElementById("adm").innerText = locationData["country"] + " " + locationData["adm1"] + " " + locationData["adm2"]
|
||||
// document.getElementById("temperature-now").innerText = weatherNow["now"]["temp"] + "°"
|
||||
// document.getElementById("temperature-range").innerText = weatherNow["now"]["feelsLike"] + "°"
|
||||
// document.getElementById("description").innerText = weatherNow["now"]["text"]
|
||||
// 处理aqi
|
||||
let aqiValue = 0
|
||||
aqi["aqi"].forEach(
|
||||
(item) => {
|
||||
if (item["defaultLocalAqi"]) {
|
||||
document.getElementById("aqi-data").innerText = "AQI " + item["valueDisplay"] + " " + item["category"]
|
||||
// 将(255,255,255)这种格式的颜色设置给css
|
||||
document.getElementById("aqi-dot").style.backgroundColor = "rgb(" + item["color"] + ")"
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
templates = {
|
||||
"time": weatherNow["now"]["obsTime"],
|
||||
"city": locationData["name"],
|
||||
"adm": locationData["country"] + " " + locationData["adm1"] + " " + locationData["adm2"],
|
||||
"temperature-now": weatherNow["now"]["temp"] + "°",
|
||||
"temperature-range": weatherDaily["daily"][0]["tempMin"] + "°/" + weatherDaily["daily"][0]["tempMax"] + "°",
|
||||
"description": weatherNow["now"]["text"]
|
||||
}
|
||||
|
||||
// 遍历每一个id,给其赋值
|
||||
|
||||
for (let id in templates) {
|
||||
document.getElementById(id).innerText = templates[id]
|
||||
}
|
@ -1,48 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Liteyuki Status</title>
|
||||
<link rel="stylesheet" href="./css/card.css">
|
||||
<link rel="stylesheet" href="./css/fonts.css">
|
||||
<link rel="stylesheet" href="./css/weather_now.css">
|
||||
</head>
|
||||
<!-- qw_icon: https://a.hecdn.net/img/common/icon/202106d/%d.png-->
|
||||
<body>
|
||||
<div class="data-storage" id="data">{{ data | tojson }}</div>
|
||||
<div class="info-box" id="weather-info">
|
||||
<div id="detail-info">
|
||||
<div id="time">1145-01-12 22:22:22</div>
|
||||
<div id="adm">国家 一级 二级</div>
|
||||
<div id="city">城市</div>
|
||||
</div>
|
||||
<div id="main-info">
|
||||
<div>
|
||||
<img class="main-icon" src="./img/qw_icon/101.png" alt="AAA">
|
||||
</div>
|
||||
<div>
|
||||
<div id="temperature">
|
||||
<div id="temperature-now">
|
||||
90°
|
||||
</div>
|
||||
<div id="temperature-range">
|
||||
10°~90°
|
||||
</div>
|
||||
</div>
|
||||
<div id="description">
|
||||
好天气
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="aqi">
|
||||
<div id="aqi-dot"></div>
|
||||
<div id="aqi-data"> AQI 114 优</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-box" id="sub-info"></div>
|
||||
<div class="info-box" id="hours-info"></div>
|
||||
<div class="info-box" id="days-info"></div>
|
||||
|
||||
<script src="./js/card.js"></script>
|
||||
<script src="./js/weather_now.js"></script>
|
||||
</body>
|