mirror of
https://github.com/hamster1963/nezha-dash.git
synced 2025-04-24 21:10:45 +08:00
127 lines
4.2 KiB
CSS
127 lines
4.2 KiB
CSS
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Geolocation and Weather Info</title>
|
||
|
||
<!-- 引入 Tailwind CSS -->
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
|
||
<style>
|
||
@tailwind base;
|
||
@tailwind components;
|
||
@tailwind utilities;
|
||
|
||
@layer base {
|
||
/* 自定义变量和样式 */
|
||
:root {
|
||
--background: 0 0% 100%;
|
||
--foreground: 20 14.3% 4.1%;
|
||
--card: 0 0% 100%;
|
||
--card-foreground: 20 14.3% 4.1%;
|
||
--popover: 0 0% 100%;
|
||
--popover-foreground: 20 14.3% 4.1%;
|
||
--primary: 24 9.8% 10%;
|
||
--primary-foreground: 60 9.1% 97.8%;
|
||
--secondary: 60 4.8% 95.9%;
|
||
--secondary-foreground: 24 9.8% 10%;
|
||
--muted: 60 4.8% 95.9%;
|
||
--muted-foreground: 25 5.3% 44.7%;
|
||
--accent: 60 4.8% 95.9%;
|
||
--accent-foreground: 24 9.8% 10%;
|
||
--destructive: 0 84.2% 60.2%;
|
||
--destructive-foreground: 60 9.1% 97.8%;
|
||
--border: 20 5.9% 90%;
|
||
--input: 20 5.9% 90%;
|
||
--ring: 20 14.3% 4.1%;
|
||
--radius: 1rem;
|
||
--chart-1: 220 70% 50%;
|
||
--chart-2: 340 75% 55%;
|
||
--chart-3: 30 80% 55%;
|
||
--chart-4: 280 65% 60%;
|
||
--chart-5: 160 60% 45%;
|
||
--chart-6: 180 50% 50%;
|
||
--chart-7: 216 50% 50%;
|
||
--chart-8: 252 50% 50%;
|
||
--chart-9: 288 50% 50%;
|
||
--chart-10: 324 50% 50%;
|
||
}
|
||
|
||
body {
|
||
@apply bg-background text-foreground;
|
||
font-family: Arial, sans-serif;
|
||
}
|
||
|
||
/* 加入背景图片 */
|
||
body::before {
|
||
content: "";
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
z-index: -1;
|
||
background: rgba(255, 255, 255, 0.5) url(https://t.mwm.moe/ys/) no-repeat center center fixed;
|
||
background-size: cover;
|
||
}
|
||
|
||
/* 字体样式 */
|
||
.glowing-text {
|
||
font-size: 50px; /* 调整字体大小 */
|
||
font-weight: bold;
|
||
color: white; /* 设置文字颜色 */
|
||
text-shadow: 0 0 10px rgba(255, 255, 255, 0.8); /* 增加发光效果 */
|
||
padding: 15px;
|
||
border-radius: 10px;
|
||
background-color: rgba(0, 0, 0, 0.6); /* 背景半透明黑色 */
|
||
display: inline-block; /* 保证文字背景大小合适 */
|
||
}
|
||
|
||
.weather-detail {
|
||
font-size: 24px; /* 调整天气详情字体大小 */
|
||
color: white;
|
||
background-color: rgba(0, 0, 0, 0.6); /* 背景半透明黑色 */
|
||
padding: 15px;
|
||
border-radius: 10px;
|
||
margin: 10px 0;
|
||
}
|
||
|
||
#mapContainer {
|
||
width: 100%;
|
||
height: 500px; /* 调整地图大小 */
|
||
margin-top: 20px;
|
||
border: 2px solid rgba(255, 255, 255, 0.8); /* 边框颜色 */
|
||
border-radius: 10px;
|
||
}
|
||
|
||
.flag-img {
|
||
width: 100px; /* 设置国旗大小 */
|
||
height: auto;
|
||
margin: 20px;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="container mx-auto text-center">
|
||
<!-- 发光文字标题 -->
|
||
<h1 class="glowing-text">Geolocation and Weather Info</h1>
|
||
|
||
<!-- 天气详情 -->
|
||
<p class="weather-detail">当前温度：25°C，天气：晴</p>
|
||
|
||
<!-- 地图容器 -->
|
||
<div id="mapContainer"></div>
|
||
|
||
<!-- 国旗图片 -->
|
||
<img class="flag-img" src="https://flagcdn.com/w320/cn.png" alt="国旗">
|
||
</div>
|
||
|
||
<!-- 引入地图API的JS代码和天气数据获取 -->
|
||
<script>
|
||
// 这里可以加入获取地理位置信息和天气信息的JavaScript代码
|
||
</script>
|
||
</body>
|
||
</html>
|