@aidget-community/solar-terms 0.0.0-stage → 0.1.1

package/agents.md

@@ -0,0 +1,36 @@
+# 二十四节气
+
+卡片初始展示立冬。顶部是拖动区域，点击卡面翻转。组件不计算日期，也不创建定时任务。用户可自行安排 Agent 在指定时间更新节气。
+
+## 更新方法
+
+先读取组件及当前 revision。使用 `aidget_patch` 一次原子更新 `art`、`term`、`description` 三个区域：`art` 填入 `<img src="./assets/文件名.webp" alt="">`，其余区域填写下表的名称和简介，文字须转义 HTML。保留交互和布局；revision 冲突时重新读取。更新后截图检查，不要移动或调整用户窗口。
+
+| 节气 | 图片             | 简介                                                                 |
+| ---- | ---------------- | -------------------------------------------------------------------- |
+| 立春 | lichun.webp      | 立春是春季的开始，阳气渐生，草木孕育新的生机。                       |
+| 雨水 | yushui.webp      | 雨水时节，气温渐升，降水增多，春意慢慢展开。                         |
+| 惊蛰 | jingzhe.webp     | 春雷渐响，蛰伏的生灵开始活动，田野渐见生机。                         |
+| 春分 | chunfen.webp     | 春分昼夜近乎等长，春光正盛，万物生长。                               |
+| 清明 | qingming.webp    | 清明时节草木清新，人们踏青赏春，也追思故人。                         |
+| 谷雨 | guyu.webp        | 谷雨是春季最后一个节气，雨润百谷，作物生长。                         |
+| 立夏 | lixia.webp       | 立夏标志夏季开始，日渐长，草木更加繁茂。                             |
+| 小满 | xiaoman.webp     | 小满时节，夏熟作物籽粒渐渐饱满，尚未成熟。                           |
+| 芒种 | mangzhong.webp   | 芒种时节农事繁忙，既要收获成熟作物，也要播种。                       |
+| 夏至 | xiazhi.webp      | 夏至时北半球白昼最长，盛夏的热意逐渐加深。                           |
+| 小暑 | xiaoshu.webp     | 小暑天气渐热，盛夏来临，雷雨也常随之而至。                           |
+| 大暑 | dashu.webp       | 大暑正值盛夏，暑气旺盛，农作物生长迅速。                             |
+| 立秋 | liqiu.webp       | 立秋标志秋季开始，暑热仍在，收获的季节渐近。                         |
+| 处暑 | chushu.webp      | 处暑有暑热渐退之意，早晚逐渐带来秋凉。                               |
+| 白露 | bailu.webp       | 白露时昼夜温差渐大，清晨草木上可见凝结的露珠。                       |
+| 秋分 | qiufen.webp      | 秋分昼夜近乎等长，秋意渐浓，田野迎来收获。                           |
+| 寒露 | hanlu.webp       | 寒露时凉意加深，露水更冷，秋色渐浓。                                 |
+| 霜降 | shuangjiang.webp | 霜降是秋季最后一个节气，天气渐冷，部分地区初见霜。                   |
+| 立冬 | lidong.webp      | 立冬，冬季的第一个节气。草木渐休，万物收藏，天地进入养精蓄锐的时节。 |
+| 小雪 | xiaoxue.webp     | 小雪时气温继续下降，一些地区开始出现降雪。                           |
+| 大雪 | daxue.webp       | 大雪时天气更冷，降雪范围渐广，冬景日深。                             |
+| 冬至 | dongzhi.webp     | 冬至时北半球白昼最短，此后白昼逐渐增长。                             |
+| 小寒 | xiaohan.webp     | 小寒时节寒意深重，一年中最冷的日子渐近。                             |
+| 大寒 | dahan.webp       | 大寒是一年中最后一个节气，寒冬将尽，春天渐近。                       |
+
+保留彩色国画、楷书标题和翻面效果；仅使用本地资源，不增加脚本、网络或存储权限。

package/config.json

@@ -0,0 +1,11 @@
+{
+  "id": "solar-terms",
+  "title": "二十四节气",
+  "logo": null,
+  "screenshots": ["assets/screenshot.png"],
+  "platforms": ["macos", "windows", "linux"],
+  "size": { "width": 360, "height": 240 },
+  "dragMode": "all",
+  "permissions": [],
+  "network": []
+}

package/index.html

@@ -0,0 +1,36 @@
+<!doctype html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="aidget-surface" content="none" />
+    <link rel="stylesheet" href="./style.css" />
+    <title>二十四节气</title>
+  </head>
+  <body>
+    <input
+      class="flip-toggle"
+      id="flip"
+      type="checkbox"
+      aria-label="翻转节气卡片，查看或收起介绍"
+    />
+    <main class="card">
+      <div class="turner">
+        <div class="face front">
+          <span class="art" data-aidget-region="art"
+            ><img src="./assets/lidong.webp" alt=""
+          /></span>
+          <span class="series">二十四节气</span>
+          <span class="term" data-aidget-region="term">立冬</span>
+        </div>
+        <div class="face back">
+          <span class="description" data-aidget-region="description"
+            >立冬，冬季的第一个节气。草木渐休，万物收藏，天地进入养精蓄锐的时节。</span
+          >
+        </div>
+      </div>
+      <label class="flip-hit" for="flip" aria-hidden="true"></label>
+      <div class="drag-handle" aria-hidden="true"></div>
+    </main>
+  </body>
+</html>

package/package.json

@@ -1,6 +1,24 @@
 {
   "name": "@aidget-community/solar-terms",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.1",
+  "description": "以国画呈现二十四节气的翻面卡片。",
+  "license": "MIT",
+  "author": {
+    "name": "aidget community"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/aidget-ai/widgets.git",
+    "directory": "packages/solar-terms"
+  },
+  "files": [
+    "config.json",
+    "index.html",
+    "style.css",
+    "agents.md",
+    "assets"
+  ],
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/style.css

@@ -0,0 +1,153 @@
+* {
+  box-sizing: border-box;
+}
+html,
+body {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  overflow: hidden;
+  background: transparent;
+}
+body {
+  font-family: 'Kaiti SC', STKaiti, KaiTi, serif;
+  color: #243c38;
+}
+.flip-toggle {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  opacity: 0;
+}
+.card {
+  position: relative;
+  width: calc(100% - 40px);
+  height: calc(100% - 40px);
+  margin: 20px;
+  perspective: 1800px;
+  background: transparent;
+}
+.turner {
+  position: absolute;
+  inset: 0;
+  transform-style: preserve-3d;
+  transition: transform 700ms cubic-bezier(0.4, 0, 0.2, 1);
+  will-change: transform;
+}
+.flip-toggle:checked ~ .card .turner {
+  transform: rotateY(180deg);
+}
+.face {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  overflow: hidden;
+  padding: 25px 29px;
+  border-radius: 15px;
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+}
+.face::after {
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+  opacity: 0;
+  pointer-events: none;
+  background: #1c302a;
+  transition: opacity 700ms cubic-bezier(0.4, 0, 0.2, 1);
+  content: '';
+}
+.front {
+  isolation: isolate;
+  transform: rotateY(0deg) translateZ(0.1px);
+  background: #eee9d9;
+}
+.back {
+  justify-content: center;
+  transform: rotateY(180deg) translateZ(0.1px);
+  background-color: #f4f2e0;
+  background-image:
+    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.86' numOctaves='3' seed='9' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='120' height='120' filter='url(%23g)' opacity='0.18'/></svg>"),
+    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='200'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='0.008 0.55' numOctaves='2' seed='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='320' height='200' filter='url(%23f)' opacity='0.12'/></svg>"),
+    linear-gradient(122deg, rgb(255 255 255 / 18%), transparent 42%, rgb(112 94 58 / 4%));
+  background-blend-mode: multiply, multiply, normal;
+  background-size:
+    120px 120px,
+    320px 200px,
+    auto;
+  box-shadow: inset 0 0 0 1px rgb(92 75 44 / 8%);
+}
+.back::after {
+  opacity: 0.18;
+}
+.flip-toggle:checked ~ .card .front::after {
+  opacity: 0.18;
+}
+.flip-toggle:checked ~ .card .back::after {
+  opacity: 0;
+}
+.art,
+.art img {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+}
+.art {
+  z-index: -1;
+}
+.art img {
+  object-fit: cover;
+}
+.art::after {
+  position: absolute;
+  inset: 0;
+  content: '';
+  background: linear-gradient(90deg, rgb(247 244 226 / 80%), transparent 75%);
+}
+.flip-hit {
+  position: absolute;
+  inset: 32px 0 0;
+  cursor: pointer;
+}
+.drag-handle {
+  position: absolute;
+  z-index: 1;
+  inset: 0 0 auto;
+  height: 32px;
+  cursor: grab;
+}
+.drag-handle:active {
+  cursor: grabbing;
+}
+.flip-toggle:focus-visible ~ .card::after {
+  position: absolute;
+  inset: 3px;
+  border: 2px solid #7f4331;
+  border-radius: 12px;
+  pointer-events: none;
+  content: '';
+}
+.series {
+  font-size: 13px;
+  letter-spacing: 0.2em;
+}
+.term {
+  margin-top: 16px;
+  font-size: 52px;
+  line-height: 1.1;
+  letter-spacing: 0.12em;
+}
+.description {
+  width: 100%;
+  font-size: 19px;
+  line-height: 1.75;
+}
+@media (prefers-reduced-motion: reduce) {
+  .turner,
+  .face::after {
+    transition: none;
+  }
+}

package/README.md

@@ -1,3 +0,0 @@
-# Temporary Holding Version
-
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.