Compare commits
9
Commits
cef31b9248
..
master
| Author | SHA1 | Date | |
|---|---|---|---|
 XingfenD
|
8bcef95dd4 | ||
|
XingfenD
|
3171866344 | ||
|
XingfenD
|
1f8529badc | ||
|
XingfenD
|
16f20af5ae | ||
|
XingfenD
|
5bb42a8b8a | ||
|
XingfenD
|
d84e4dfdba | ||
|
XingfenD
|
110a8f7d9d | ||
|
XingfenD
|
4c96bf25be | ||
|
XingfenD
|
bdec081f8d |
@@ -0,0 +1,10 @@
|
|||||||
|
.git
|
||||||
|
.gitignore
|
||||||
|
*.md
|
||||||
|
docs
|
||||||
|
tests
|
||||||
|
workspace
|
||||||
|
yDropbox
|
||||||
|
docker-compose.yml
|
||||||
|
.env
|
||||||
|
.env.example
|
||||||
@@ -0,0 +1,3 @@
|
|||||||
|
# 访问令牌（必填）。请将下方示例替换为高强度随机字符串。
|
||||||
|
# Access token (required). Replace the example below with a strong random string.
|
||||||
|
YDROPBOX_TOKEN=change-me-to-a-strong-random-token
|
||||||
@@ -21,3 +21,6 @@ Thumbs.db
|
|||||||
|
|
||||||
# Superpowers workspace
|
# Superpowers workspace
|
||||||
.superpowers/
|
.superpowers/
|
||||||
|
|
||||||
|
# local env with secrets
|
||||||
|
.env
|
||||||
|
|||||||
@@ -0,0 +1,8 @@
|
|||||||
|
# AGENTS.md
|
||||||
|
|
||||||
|
## Safety Rules
|
||||||
|
- Dev branch naming: `{feat|fix|docs|chore}/{branch-name}` (e.g. `feat/file-tag-done`, `fix/tree-render`).
|
||||||
|
- Before `git commit`: run `git branch --show-current`. If on `master`, do NOT commit — ask user for a branch name (suggest one based on the changes, e.g. `docs/simplify-branch-workflow`), create it, commit there.
|
||||||
|
- General changes → `docs/CHANGELOG.md`; WebUI changes → `docs/CHANGELOG_webui.md` (files under `web/`). Higher versions on top.
|
||||||
|
ANGELOG entry format: same entry has English line then Chinese line on consecutive lines (no blank line between them); different entries are separated by a blank line.
|
||||||
|
- Version control: When bumping a version, update both the changelog and the corresponding version constant: `pkg/constant/version.go` for backend(docs/CHANGELOG.md), `web/version.js` for webui(docs/CHANGELOG_webui.md).
|
||||||
+19
@@ -0,0 +1,19 @@
|
|||||||
|
# syntax=docker/dockerfile:1
|
||||||
|
|
||||||
|
FROM golang:1.25-alpine AS build
|
||||||
|
WORKDIR /src
|
||||||
|
COPY go.mod go.sum ./
|
||||||
|
RUN go mod download
|
||||||
|
COPY . .
|
||||||
|
RUN CGO_ENABLED=0 GOOS=linux go build -ldflags="-s -w" -o /out/yDropbox ./cmd/ydropbox
|
||||||
|
|
||||||
|
FROM alpine:3.20
|
||||||
|
RUN adduser -D -u 10001 -s /sbin/nologin ydropbox \
|
||||||
|
&& apk add --no-cache ca-certificates tzdata
|
||||||
|
WORKDIR /app
|
||||||
|
COPY --from=build /out/yDropbox /app/yDropbox
|
||||||
|
USER ydropbox
|
||||||
|
VOLUME /app/workspace
|
||||||
|
EXPOSE 8999
|
||||||
|
ENTRYPOINT ["/app/yDropbox"]
|
||||||
|
CMD ["--addr", "0.0.0.0:8999", "--workspace", "/app/workspace"]
|
||||||
@@ -1,7 +1,7 @@
|
|||||||
BINARY := yDropbox
|
BINARY := yDropbox
|
||||||
PKG := ./cmd/ydropbox
|
PKG := ./cmd/ydropbox
|
||||||
|
|
||||||
.PHONY: build test run clean vet
|
.PHONY: build test run clean vet docker docker-up docker-down
|
||||||
|
|
||||||
build:
|
build:
|
||||||
CGO_ENABLED=0 go build -o $(BINARY) $(PKG)
|
CGO_ENABLED=0 go build -o $(BINARY) $(PKG)
|
||||||
@@ -17,3 +17,12 @@ vet:
|
|||||||
|
|
||||||
clean:
|
clean:
|
||||||
rm -f $(BINARY)
|
rm -f $(BINARY)
|
||||||
|
|
||||||
|
docker:
|
||||||
|
docker build -t ydropbox .
|
||||||
|
|
||||||
|
docker-up:
|
||||||
|
docker compose up -d --build
|
||||||
|
|
||||||
|
docker-down:
|
||||||
|
docker compose down
|
||||||
|
|||||||
@@ -0,0 +1,15 @@
|
|||||||
|
services:
|
||||||
|
ydropbox:
|
||||||
|
build: .
|
||||||
|
image: yoresee/yDropbox:latest
|
||||||
|
container_name: ydropbox
|
||||||
|
restart: unless-stopped
|
||||||
|
ports:
|
||||||
|
- "8999:8999"
|
||||||
|
environment:
|
||||||
|
YDROPBOX_TOKEN: ${YDROPBOX_TOKEN:?set YDROPBOX_TOKEN in .env}
|
||||||
|
volumes:
|
||||||
|
- ydropbox-data:/app/workspace
|
||||||
|
|
||||||
|
volumes:
|
||||||
|
ydropbox-data:
|
||||||
@@ -0,0 +1,47 @@
|
|||||||
|
# Changelog / 更新日志
|
||||||
|
|
||||||
|
All notable changes to this template should be documented in this file.
|
||||||
|
本模板的重要变更建议统一记录在此文件中。
|
||||||
|
|
||||||
|
The format loosely follows Keep a Changelog and can be adapted to the team's habits.
|
||||||
|
本文档参考了 Keep a Changelog 的思路，也可以根据团队习惯调整。
|
||||||
|
|
||||||
|
## [0.1.0] - 2026-08-27
|
||||||
|
|
||||||
|
### Added / 新增
|
||||||
|
|
||||||
|
- Added Docker deployment support: `Dockerfile`, `.dockerignore`, `docker-compose.yml` and `.env.example`.
|
||||||
|
- 新增 Docker 部署支持：`Dockerfile`、`.dockerignore`、`docker-compose.yml` 与 `.env.example`。
|
||||||
|
|
||||||
|
- Added `make docker` / `make docker-up` / `make docker-down` convenience targets to the Makefile.
|
||||||
|
- 在 Makefile 中新增 `make docker` / `make docker-up` / `make docker-down` 便捷命令。
|
||||||
|
|
||||||
|
- Documented Docker deployment in `docs/README.md`.
|
||||||
|
- 在 `docs/README.md` 中补充了 Docker 部署说明。
|
||||||
|
|
||||||
|
## [0.0.1] - 2026-04-28
|
||||||
|
|
||||||
|
### Added / 新增
|
||||||
|
|
||||||
|
- Added an English project-template README in `docs/README.md`.
|
||||||
|
- 在 `docs/README.md` 中补充了英文版项目模板说明。
|
||||||
|
|
||||||
|
- Added a Chinese project-template README in `docs/README_zh.md`.
|
||||||
|
- 在 `docs/README_zh.md` 中补充了中文版项目模板说明。
|
||||||
|
|
||||||
|
- Added guidance for template users on how to rewrite the README for their own project.
|
||||||
|
- 增加了模板使用者如何把 README 改写为自己项目介绍的说明。
|
||||||
|
|
||||||
|
- Added a documented repository structure overview based on the current scaffold.
|
||||||
|
- 基于当前仓库骨架补充了目录结构说明。
|
||||||
|
|
||||||
|
- Added this changelog file for future template maintenance.
|
||||||
|
- 新增本更新日志文件，便于后续持续维护模板。
|
||||||
|
|
||||||
|
### Notes / 说明
|
||||||
|
|
||||||
|
- The repository currently provides structure and placeholder files rather than a finished implementation.
|
||||||
|
- 当前仓库主要提供目录结构和占位文件，尚不是一个已完成功能实现的成品项目。
|
||||||
|
|
||||||
|
- Future updates should record framework selection, startup steps, deployment workflow, and major documentation changes.
|
||||||
|
- 后续若补充了技术栈、启动流程、部署方式或重要文档内容，建议继续记录在本文件中。
|
||||||
@@ -0,0 +1,63 @@
|
|||||||
|
# Changelog / 更新日志
|
||||||
|
|
||||||
|
All notable changes to this template should be documented in this file.
|
||||||
|
本模板的重要变更建议统一记录在此文件中。
|
||||||
|
|
||||||
|
The format loosely follows Keep a Changelog and can be adapted to the team's habits.
|
||||||
|
本文档参考了 Keep a Changelog 的思路，也可以根据团队习惯调整。
|
||||||
|
|
||||||
|
## [0.1.1] - 2026-08-27
|
||||||
|
|
||||||
|
### Added / 新增
|
||||||
|
|
||||||
|
- Added internationalization (i18n): English + 简体中文, with a `locale` store, a `$t()` magic, and a language toggle persisted to localStorage.
|
||||||
|
- 新增国际化（i18n）：支持 English 与简体中文，包含 `locale` store、`$t()` 魔法函数，以及持久化到 localStorage 的语言切换按钮。
|
||||||
|
|
||||||
|
- Added light/dark/system theme switching via a `theme` store that writes `data-theme` on `<html>`; respects OS preference by default and persists the choice.
|
||||||
|
- 新增浅色/深色/跟随系统主题切换：通过 `theme` store 在 `<html>` 上写入 `data-theme`，默认跟随系统并持久化用户选择。
|
||||||
|
|
||||||
|
- Added dark-theme token overrides and a no-flash inline bootstrap script on both pages.
|
||||||
|
- 为深色模式补充了设计令牌覆盖，并在两个页面加入防止主题闪烁的内联初始化脚本。
|
||||||
|
|
||||||
|
- Added a frontend version constant (`web/version.js`, exposed as `window.YDROPBX_VERSION`) shown in the app footer, kept in sync with this changelog.
|
||||||
|
- 新增前端版本常量（`web/version.js`，暴露为 `window.YDROPBX_VERSION`）并显示在应用页脚，与本文档版本保持一致。
|
||||||
|
|
||||||
|
## [0.1.0] - 2026-08-27
|
||||||
|
|
||||||
|
### Changed / 变更
|
||||||
|
|
||||||
|
- Refactored the vanilla frontend into a component-based structure (Alpine.js components, a central state store, and a shared icon module) while keeping the no-build, Go-served static-file approach.
|
||||||
|
- 将原生前端重构为组件化结构（基于 Alpine.js 的组件、集中式状态 store、共享图标模块），同时保留由 Go 直接托管、无需构建的静态文件方案。
|
||||||
|
|
||||||
|
- Replaced the duplicated Inbox/Outbox markup with a single reusable `fileSection` component configured by props (`dir`, `canShare`).
|
||||||
|
- 用同一个可复用的 `fileSection` 组件（按属性 `dir`、`canShare` 配置）替换了原先重复的收件箱/发件箱标记。
|
||||||
|
|
||||||
|
- Split styles into design tokens, base, and component layers under `web/styles/`, and moved UI icons into a shared `window.Icons` module.
|
||||||
|
- 将样式拆分为 `web/styles/` 下的设计令牌、基础样式与组件样式三层，并把界面图标统一收敛到共享的 `window.Icons` 模块。
|
||||||
|
|
||||||
|
## [0.0.1] - 2026-04-28
|
||||||
|
|
||||||
|
### Added / 新增
|
||||||
|
|
||||||
|
- Added an English project-template README in `docs/README.md`.
|
||||||
|
- 在 `docs/README.md` 中补充了英文版项目模板说明。
|
||||||
|
|
||||||
|
- Added a Chinese project-template README in `docs/README_zh.md`.
|
||||||
|
- 在 `docs/README_zh.md` 中补充了中文版项目模板说明。
|
||||||
|
|
||||||
|
- Added guidance for template users on how to rewrite the README for their own project.
|
||||||
|
- 增加了模板使用者如何把 README 改写为自己项目介绍的说明。
|
||||||
|
|
||||||
|
- Added a documented repository structure overview based on the current scaffold.
|
||||||
|
- 基于当前仓库骨架补充了目录结构说明。
|
||||||
|
|
||||||
|
- Added this changelog file for future template maintenance.
|
||||||
|
- 新增本更新日志文件，便于后续持续维护模板。
|
||||||
|
|
||||||
|
### Notes / 说明
|
||||||
|
|
||||||
|
- The repository currently provides structure and placeholder files rather than a finished implementation.
|
||||||
|
- 当前仓库主要提供目录结构和占位文件，尚不是一个已完成功能实现的成品项目。
|
||||||
|
|
||||||
|
- Future updates should record framework selection, startup steps, deployment workflow, and major documentation changes.
|
||||||
|
- 后续若补充了技术栈、启动流程、部署方式或重要文档内容，建议继续记录在本文件中。
|
||||||
+132
@@ -0,0 +1,132 @@
|
|||||||
|
# yDropbox
|
||||||
|
|
||||||
|
yDropbox 是一个自托管的轻量级文件存储服务（灵感来自 Dropbox），使用 Go 编写，编译为单一静态二进制文件，零外部依赖。它提供一个 Web 界面用于上传、管理、下载文件，并支持通过受密码保护和可过期的分享链接将文件分享给他人。
|
||||||
|
|
||||||
|
## 特性
|
||||||
|
|
||||||
|
- **单一二进制文件**：使用 `modernc.org/sqlite`（纯 Go 实现的 SQLite），无需 CGO，无需外部数据库或运行时依赖。
|
||||||
|
- **工作区（Workspace）模型**：文件存储在工作区下的 `inbox/` 与 `outbox/` 两个目录中，文件元数据保存在 `.ydropbox/db.sqlite`。
|
||||||
|
- **磁盘扫描同步**：内置扫描器每 10 秒扫描工作区目录，将磁盘上的新增文件登记进数据库，并移除已被删除文件的元数据。这意味着你也可以直接把文件放进目录，它们会被自动纳入管理。
|
||||||
|
- **令牌认证**：服务端通过访问令牌（`--token` 或环境变量 `YDROPBOX_TOKEN`）保护，Web 端登录后使用 HttpOnly、Secure 的会话 Cookie。
|
||||||
|
- **分享链接**：可为任意文件生成公开分享链接，支持可选密码保护与过期时间。
|
||||||
|
- **基础防护**：登录与分享密码均带有失败次数限制（5 次失败后锁定 60 秒），分享密码使用 bcrypt 哈希存储。
|
||||||
|
- **现代 Web UI**：基于 Alpine.js 的前端，支持拖拽上传、Toast 提示与响应式布局。
|
||||||
|
|
||||||
|
## 构建与运行
|
||||||
|
|
||||||
|
### 前置要求
|
||||||
|
|
||||||
|
- Go 1.25+
|
||||||
|
|
||||||
|
### 构建
|
||||||
|
|
||||||
|
```bash
|
||||||
|
make build
|
||||||
|
```
|
||||||
|
|
||||||
|
该命令会生成名为 `yDropbox` 的静态二进制文件（关闭 CGO）。
|
||||||
|
|
||||||
|
### 运行
|
||||||
|
|
||||||
|
```bash
|
||||||
|
./yDropbox --addr 127.0.0.1:8999 --workspace ./workspace --token YOUR_SECRET_TOKEN
|
||||||
|
```
|
||||||
|
|
||||||
|
或使用环境变量提供令牌：
|
||||||
|
|
||||||
|
```bash
|
||||||
|
export YDROPBOX_TOKEN=YOUR_SECRET_TOKEN
|
||||||
|
./yDropbox --workspace ./workspace
|
||||||
|
```
|
||||||
|
|
||||||
|
启动时会自动创建 `workspace/inbox`、`workspace/outbox` 与 `workspace/.ydropbox` 目录。
|
||||||
|
|
||||||
|
### 其他命令
|
||||||
|
|
||||||
|
```bash
|
||||||
|
make test # 运行测试 (go test ./...)
|
||||||
|
make vet # 静态检查 (go vet ./...)
|
||||||
|
make clean # 删除二进制文件
|
||||||
|
```
|
||||||
|
|
||||||
|
## Docker 部署
|
||||||
|
|
||||||
|
项目提供了 `Dockerfile` 与 `docker-compose.yml`，将编译产物打包为单一镜像（前端资源已通过 `go:embed` 内嵌，SQLite 为纯 Go 实现，镜像无外部依赖）。
|
||||||
|
|
||||||
|
### 使用 Docker Compose（推荐）
|
||||||
|
|
||||||
|
```bash
|
||||||
|
cp .env.example .env
|
||||||
|
# 编辑 .env，设置 YDROPBOX_TOKEN 为一个高强度随机字符串
|
||||||
|
docker compose up -d --build
|
||||||
|
```
|
||||||
|
|
||||||
|
服务启动后监听 `8999` 端口，文件与数据库持久化在名为 `ydropbox-data` 的卷中。
|
||||||
|
|
||||||
|
### 仅使用 Docker
|
||||||
|
|
||||||
|
```bash
|
||||||
|
docker build -t ydropbox .
|
||||||
|
docker run -d --name ydropbox \
|
||||||
|
-p 8999:8999 \
|
||||||
|
-e YDROPBOX_TOKEN=YOUR_SECRET_TOKEN \
|
||||||
|
-v "$(pwd)/workspace:/app/workspace" \
|
||||||
|
ydropbox
|
||||||
|
```
|
||||||
|
|
||||||
|
> 注意：必须通过 `-e YDROPBOX_TOKEN=...` 或 `--token` 提供访问令牌，否则服务启动会失败（与本地运行一致）。
|
||||||
|
|
||||||
|
## 配置
|
||||||
|
|
||||||
|
| 参数 / 环境变量 | 说明 | 默认值 |
|
||||||
|
| ---------------------- | --------------------------------- | ---------------- |
|
||||||
|
| `--addr` | HTTP 监听地址 | `127.0.0.1:8999` |
|
||||||
|
| `--workspace` | 工作区目录（文件与数据库存放处） | `./workspace` |
|
||||||
|
| `--token` / `YDROPBOX_TOKEN` | 访问令牌（必填，用于登录校验） | 无（必须提供） |
|
||||||
|
|
||||||
|
## 使用
|
||||||
|
|
||||||
|
1. 在浏览器打开 `http://<addr>/`，使用启动时的令牌登录。
|
||||||
|
2. 在 `inbox` / `outbox` 面板中通过按钮或拖拽上传文件。
|
||||||
|
3. 点击下载 / 删除管理文件。
|
||||||
|
4. 点击分享生成链接；可在创建时设置密码与过期时间，链接形如 `/s/<token>`。
|
||||||
|
|
||||||
|
## HTTP API
|
||||||
|
|
||||||
|
所有受保护接口均需在请求中携带登录后获得的 `ydropbox_session` Cookie。
|
||||||
|
|
||||||
|
| 方法 | 路径 | 说明 |
|
||||||
|
| ------ | ------------------------------- | -------------------------------------- |
|
||||||
|
| POST | `/api/login` | 使用令牌登录（`{"token": "..."}`） |
|
||||||
|
| POST | `/api/logout` | 注销当前会话 |
|
||||||
|
| POST | `/api/upload` | 上传文件（`multipart/form-data` 字段 `file`） |
|
||||||
|
| GET | `/api/files?dir=inbox\|outbox` | 列出指定目录下的文件 |
|
||||||
|
| GET | `/api/files/{id}/download` | 下载指定文件 |
|
||||||
|
| DELETE | `/api/files/{id}` | 删除指定文件 |
|
||||||
|
| POST | `/api/files/{id}/share` | 创建分享链接（可选 `password`、`expires_in_hours`） |
|
||||||
|
| GET | `/api/shares` | 列出所有分享链接 |
|
||||||
|
| DELETE | `/api/shares/{id}` | 删除指定分享链接 |
|
||||||
|
| GET | `/s/{token}` | 访问分享链接（受密码保护时显示表单） |
|
||||||
|
| POST | `/s/{token}` | 提交分享链接密码 |
|
||||||
|
|
||||||
|
### 限制说明
|
||||||
|
|
||||||
|
- 单次上传文件大小上限为 **100 MiB**。
|
||||||
|
- 会话有效期为 7 天，登录失败 5 次后锁定 60 秒。
|
||||||
|
- 分享链接过期后再次访问会被自动删除。
|
||||||
|
|
||||||
|
## 项目结构
|
||||||
|
|
||||||
|
```
|
||||||
|
cmd/ydropbox/main.go # 程序入口、命令行参数解析
|
||||||
|
internal/app/ # 应用装配（数据库、扫描器、HTTP 服务）
|
||||||
|
internal/server/ # HTTP 路由、认证、文件与分享处理、中间件
|
||||||
|
internal/store/ # SQLite 存储层（文件与分享元数据）
|
||||||
|
internal/scanner/ # 工作区目录扫描与元数据同步
|
||||||
|
web/ # 前端静态资源（HTML/CSS/JS，Alpine.js）
|
||||||
|
tests/ # 集成测试
|
||||||
|
```
|
||||||
|
|
||||||
|
## 许可证
|
||||||
|
|
||||||
|
本项目仅供学习与自用部署场景，请自行负责数据安全与访问控制。
|
||||||
@@ -2,16 +2,19 @@ module yoresee_dropbox
|
|||||||
|
|
||||||
go 1.25.0
|
go 1.25.0
|
||||||
|
|
||||||
|
require (
|
||||||
|
golang.org/x/crypto v0.55.0
|
||||||
|
modernc.org/sqlite v1.57.0
|
||||||
|
)
|
||||||
|
|
||||||
require (
|
require (
|
||||||
github.com/dustin/go-humanize v1.0.1 // indirect
|
github.com/dustin/go-humanize v1.0.1 // indirect
|
||||||
github.com/google/uuid v1.6.0 // indirect
|
github.com/google/uuid v1.6.0 // indirect
|
||||||
github.com/mattn/go-isatty v0.0.24 // indirect
|
github.com/mattn/go-isatty v0.0.24 // indirect
|
||||||
github.com/ncruces/go-strftime v1.0.0 // indirect
|
github.com/ncruces/go-strftime v1.0.0 // indirect
|
||||||
github.com/remyoudompheng/bigfft v0.0.0-20230129092748-24d4a6f8daec // indirect
|
github.com/remyoudompheng/bigfft v0.0.0-20230129092748-24d4a6f8daec // indirect
|
||||||
golang.org/x/crypto v0.55.0 // indirect
|
|
||||||
golang.org/x/sys v0.47.0 // indirect
|
golang.org/x/sys v0.47.0 // indirect
|
||||||
modernc.org/libc v1.74.4 // indirect
|
modernc.org/libc v1.74.4 // indirect
|
||||||
modernc.org/mathutil v1.7.1 // indirect
|
modernc.org/mathutil v1.7.1 // indirect
|
||||||
modernc.org/memory v1.11.0 // indirect
|
modernc.org/memory v1.11.0 // indirect
|
||||||
modernc.org/sqlite v1.57.0 // indirect
|
|
||||||
)
|
)
|
||||||
|
|||||||
@@ -1,7 +1,11 @@
|
|||||||
github.com/dustin/go-humanize v1.0.1 h1:GzkhY7T5VNhEkwH0PVJgjz+fX1rhBrR7pRT3mDkpeCY=
|
github.com/dustin/go-humanize v1.0.1 h1:GzkhY7T5VNhEkwH0PVJgjz+fX1rhBrR7pRT3mDkpeCY=
|
||||||
github.com/dustin/go-humanize v1.0.1/go.mod h1:Mu1zIs6XwVuF/gI1OepvI0qD18qycQx+mFykh5fBlto=
|
github.com/dustin/go-humanize v1.0.1/go.mod h1:Mu1zIs6XwVuF/gI1OepvI0qD18qycQx+mFykh5fBlto=
|
||||||
|
github.com/google/pprof v0.0.0-20260802141513-ef3492d7dac3 h1:LMLX+LgTNWpfvCBdFebv6EsYotImrt/Ppc5cXIriCSo=
|
||||||
|
github.com/google/pprof v0.0.0-20260802141513-ef3492d7dac3/go.mod h1:jl5iWTm0/hd5PjEYEOuwAJ57L/CibdZfrqZ5XA5GrCk=
|
||||||
github.com/google/uuid v1.6.0 h1:NIvaJDMOsjHA8n1jAhLSgzrAzy1Hgr+hNrb57e+94F0=
|
github.com/google/uuid v1.6.0 h1:NIvaJDMOsjHA8n1jAhLSgzrAzy1Hgr+hNrb57e+94F0=
|
||||||
github.com/google/uuid v1.6.0/go.mod h1:TIyPZe4MgqvfeYDBFedMoGGpEw/LqOeaOT+nhxU+yHo=
|
github.com/google/uuid v1.6.0/go.mod h1:TIyPZe4MgqvfeYDBFedMoGGpEw/LqOeaOT+nhxU+yHo=
|
||||||
|
github.com/hashicorp/golang-lru/v2 v2.0.7 h1:a+bsQ5rvGLjzHuww6tVxozPZFVghXaHOwFs4luLUK2k=
|
||||||
|
github.com/hashicorp/golang-lru/v2 v2.0.7/go.mod h1:QeFd9opnmA6QUJc5vARoKUSoFhyfM2/ZepoAG6RGpeM=
|
||||||
github.com/mattn/go-isatty v0.0.24 h1:tGZZoVgT/KiqK1c8ocVLeDS8BSWMRd47J3Lbz7vsReI=
|
github.com/mattn/go-isatty v0.0.24 h1:tGZZoVgT/KiqK1c8ocVLeDS8BSWMRd47J3Lbz7vsReI=
|
||||||
github.com/mattn/go-isatty v0.0.24/go.mod h1:nMCL3Zebbrt45jsMDgnfIwz6ydEQApk5oEI3HqDio6A=
|
github.com/mattn/go-isatty v0.0.24/go.mod h1:nMCL3Zebbrt45jsMDgnfIwz6ydEQApk5oEI3HqDio6A=
|
||||||
github.com/ncruces/go-strftime v1.0.0 h1:HMFp8mLCTPp341M/ZnA4qaf7ZlsbTc+miZjCLOFAw7w=
|
github.com/ncruces/go-strftime v1.0.0 h1:HMFp8mLCTPp341M/ZnA4qaf7ZlsbTc+miZjCLOFAw7w=
|
||||||
@@ -10,13 +14,39 @@ github.com/remyoudompheng/bigfft v0.0.0-20230129092748-24d4a6f8daec h1:W09IVJc94
|
|||||||
github.com/remyoudompheng/bigfft v0.0.0-20230129092748-24d4a6f8daec/go.mod h1:qqbHyh8v60DhA7CoWK5oRCqLrMHRGoxYCSS9EjAz6Eo=
|
github.com/remyoudompheng/bigfft v0.0.0-20230129092748-24d4a6f8daec/go.mod h1:qqbHyh8v60DhA7CoWK5oRCqLrMHRGoxYCSS9EjAz6Eo=
|
||||||
golang.org/x/crypto v0.55.0 h1:+KWHjbgOaAQ66dh/YlkZKHlz9ZUlq61AFirAR9ntP8M=
|
golang.org/x/crypto v0.55.0 h1:+KWHjbgOaAQ66dh/YlkZKHlz9ZUlq61AFirAR9ntP8M=
|
||||||
golang.org/x/crypto v0.55.0/go.mod h1:uq0V9dE/fzQuJtbnL+2EhWOE63vo164FY8xqEnV9xis=
|
golang.org/x/crypto v0.55.0/go.mod h1:uq0V9dE/fzQuJtbnL+2EhWOE63vo164FY8xqEnV9xis=
|
||||||
|
golang.org/x/mod v0.37.0 h1:vF1DjpVEshcIqoEaauuHebaLk1O1forxjxBaVn884JQ=
|
||||||
|
golang.org/x/mod v0.37.0/go.mod h1:m8S8VeM9r4dzDwjrKO0a1sZP3YjeMamRRlD+fmR2Q/0=
|
||||||
|
golang.org/x/sync v0.21.0 h1:HLII4xRRTtCRkxYp4HNFF0Js/Og6q2i++KXbg0gHCwM=
|
||||||
|
golang.org/x/sync v0.21.0/go.mod h1:9xrNwdLfx4jkKbNva9FpL6vEN7evnE43NNNJQ2LF3+0=
|
||||||
golang.org/x/sys v0.47.0 h1:o7XGOvZQCADBQQ4Y7VNq2dRWQR7JmOUW8Kxx4ZsNgWs=
|
golang.org/x/sys v0.47.0 h1:o7XGOvZQCADBQQ4Y7VNq2dRWQR7JmOUW8Kxx4ZsNgWs=
|
||||||
golang.org/x/sys v0.47.0/go.mod h1:4GL1E5IUh+htKOUEOaiffhrAeqysfVGipDYzABqnCmw=
|
golang.org/x/sys v0.47.0/go.mod h1:4GL1E5IUh+htKOUEOaiffhrAeqysfVGipDYzABqnCmw=
|
||||||
|
golang.org/x/tools v0.47.0 h1:7Kn5x/d1svx/PzryTsqeoZN4TZwqeH5pGWjefhLi/1Q=
|
||||||
|
golang.org/x/tools v0.47.0/go.mod h1:dFHnyTvFWY212G+h7ZY4Vsp/K3U4/7W9TyVaAul8uCA=
|
||||||
|
modernc.org/cc/v4 v4.29.1 h1:MKgdCV3WykTSPqpVrnxdEDS0HEd2FHpKZDzxzU5LyeI=
|
||||||
|
modernc.org/cc/v4 v4.29.1/go.mod h1:OnovgIhbbMXMu1aISnJ0wvVD1KnW+cAUJkIrAWh+kVI=
|
||||||
|
modernc.org/ccgo/v4 v4.34.6 h1:sBgfIwyN0TQ9C5hwIeuqyeAKyMWnbvj2fvpF4L11uzU=
|
||||||
|
modernc.org/ccgo/v4 v4.34.6/go.mod h1:SZ8YcN9NG7XVsQYdm6jYBvi8PQP1qi+kqB6OhjqI3Fk=
|
||||||
|
modernc.org/fileutil v1.4.0 h1:j6ZzNTftVS054gi281TyLjHPp6CPHr2KCxEXjEbD6SM=
|
||||||
|
modernc.org/fileutil v1.4.0/go.mod h1:EqdKFDxiByqxLk8ozOxObDSfcVOv/54xDs/DUHdvCUU=
|
||||||
|
modernc.org/gc/v2 v2.6.5 h1:nyqdV8q46KvTpZlsw66kWqwXRHdjIlJOhG6kxiV/9xI=
|
||||||
|
modernc.org/gc/v2 v2.6.5/go.mod h1:YgIahr1ypgfe7chRuJi2gD7DBQiKSLMPgBQe9oIiito=
|
||||||
|
modernc.org/gc/v3 v3.1.4 h1:2g65LGVSmFQrXeITAw97x7hCRvZFcyE1uDP+7Vng7JI=
|
||||||
|
modernc.org/gc/v3 v3.1.4/go.mod h1:HFK/6AGESC7Ex+EZJhJ2Gni6cTaYpSMmU/cT9RmlfYY=
|
||||||
|
modernc.org/goabi0 v0.2.0 h1:HvEowk7LxcPd0eq6mVOAEMai46V+i7Jrj13t4AzuNks=
|
||||||
|
modernc.org/goabi0 v0.2.0/go.mod h1:CEFRnnJhKvWT1c1JTI3Avm+tgOWbkOu5oPA8eH8LnMI=
|
||||||
modernc.org/libc v1.74.4 h1:fX1Omw4o2/1C2iRkkIsrQTasJQldLhRmuPreXLoWs9k=
|
modernc.org/libc v1.74.4 h1:fX1Omw4o2/1C2iRkkIsrQTasJQldLhRmuPreXLoWs9k=
|
||||||
modernc.org/libc v1.74.4/go.mod h1:eeQAS9W3sZeKYMFubydxJpII9ybHWshk+7or7bLG9co=
|
modernc.org/libc v1.74.4/go.mod h1:eeQAS9W3sZeKYMFubydxJpII9ybHWshk+7or7bLG9co=
|
||||||
modernc.org/mathutil v1.7.1 h1:GCZVGXdaN8gTqB1Mf/usp1Y/hSqgI2vAGGP4jZMCxOU=
|
modernc.org/mathutil v1.7.1 h1:GCZVGXdaN8gTqB1Mf/usp1Y/hSqgI2vAGGP4jZMCxOU=
|
||||||
modernc.org/mathutil v1.7.1/go.mod h1:4p5IwJITfppl0G4sUEDtCr4DthTaT47/N3aT6MhfgJg=
|
modernc.org/mathutil v1.7.1/go.mod h1:4p5IwJITfppl0G4sUEDtCr4DthTaT47/N3aT6MhfgJg=
|
||||||
modernc.org/memory v1.11.0 h1:o4QC8aMQzmcwCK3t3Ux/ZHmwFPzE6hf2Y5LbkRs+hbI=
|
modernc.org/memory v1.11.0 h1:o4QC8aMQzmcwCK3t3Ux/ZHmwFPzE6hf2Y5LbkRs+hbI=
|
||||||
modernc.org/memory v1.11.0/go.mod h1:/JP4VbVC+K5sU2wZi9bHoq2MAkCnrt2r98UGeSK7Mjw=
|
modernc.org/memory v1.11.0/go.mod h1:/JP4VbVC+K5sU2wZi9bHoq2MAkCnrt2r98UGeSK7Mjw=
|
||||||
|
modernc.org/opt v0.2.0 h1:tGyef5ApycA7FSEOMraay9SaTk5zmbx7Tu+cJs4QKZg=
|
||||||
|
modernc.org/opt v0.2.0/go.mod h1:03fq9lsNfvkYSfxrfUhZCWPk1lm4cq4N+Bh//bEtgns=
|
||||||
|
modernc.org/sortutil v1.2.1 h1:+xyoGf15mM3NMlPDnFqrteY07klSFxLElE2PVuWIJ7w=
|
||||||
|
modernc.org/sortutil v1.2.1/go.mod h1:7ZI3a3REbai7gzCLcotuw9AC4VZVpYMjDzETGsSMqJE=
|
||||||
modernc.org/sqlite v1.57.0 h1:qNQP6xnx5M0ISNtlnxoOX0+cD5bJ0/gr9aMmndFczzg=
|
modernc.org/sqlite v1.57.0 h1:qNQP6xnx5M0ISNtlnxoOX0+cD5bJ0/gr9aMmndFczzg=
|
||||||
modernc.org/sqlite v1.57.0/go.mod h1:yCJ2cmAaIkHQ25oXWrF8H4O1lIfPYPR26yCEDj2P3pQ=
|
modernc.org/sqlite v1.57.0/go.mod h1:yCJ2cmAaIkHQ25oXWrF8H4O1lIfPYPR26yCEDj2P3pQ=
|
||||||
|
modernc.org/strutil v1.2.1 h1:UneZBkQA+DX2Rp35KcM69cSsNES9ly8mQWD71HKlOA0=
|
||||||
|
modernc.org/strutil v1.2.1/go.mod h1:EHkiggD70koQxjVdSBM3JKM7k6L0FbGE5eymy9i3B9A=
|
||||||
|
modernc.org/token v1.1.0 h1:Xl7Ap9dKaEs5kLoOQeQmPWevfnk/DM5qcLcYlA8ys6Y=
|
||||||
|
modernc.org/token v1.1.0/go.mod h1:UGzOrNV1mAFSEB63lOFHIpNRUVMvYTc6yu1SMY/XTDM=
|
||||||
|
|||||||
@@ -69,9 +69,11 @@ func (s *Server) Handler() http.Handler {
|
|||||||
w.Write(data)
|
w.Write(data)
|
||||||
}))
|
}))
|
||||||
|
|
||||||
mux.Handle("GET /style.css", http.FileServerFS(web.FS))
|
static := http.FileServerFS(web.FS)
|
||||||
mux.Handle("GET /app.js", http.FileServerFS(web.FS))
|
mux.Handle("GET /components/", static)
|
||||||
mux.Handle("GET /alpine.min.js", http.FileServerFS(web.FS))
|
mux.Handle("GET /styles/", static)
|
||||||
|
mux.Handle("GET /version.js", static)
|
||||||
|
mux.Handle("GET /alpine.min.js", static)
|
||||||
|
|
||||||
return mux
|
return mux
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -0,0 +1,3 @@
|
|||||||
|
package constant
|
||||||
|
|
||||||
|
const Version = "0.1.0"
|
||||||
-69
@@ -1,69 +0,0 @@
|
|||||||
function app() {
|
|
||||||
return {
|
|
||||||
inboxFiles: [],
|
|
||||||
outboxFiles: [],
|
|
||||||
dragover: false,
|
|
||||||
toast: { show: false, message: '' },
|
|
||||||
async loadFiles() {
|
|
||||||
const [inbox, outbox] = await Promise.all([
|
|
||||||
fetch('/api/files?dir=inbox').then(r => r.json()),
|
|
||||||
fetch('/api/files?dir=outbox').then(r => r.json())
|
|
||||||
]);
|
|
||||||
this.inboxFiles = inbox.files || [];
|
|
||||||
this.outboxFiles = outbox.files || [];
|
|
||||||
},
|
|
||||||
showToast(msg) {
|
|
||||||
this.toast.message = msg;
|
|
||||||
this.toast.show = true;
|
|
||||||
setTimeout(() => { this.toast.show = false; }, 2500);
|
|
||||||
},
|
|
||||||
async upload(event, dir) {
|
|
||||||
const files = event.target.files;
|
|
||||||
if (!files || !files.length) return;
|
|
||||||
for (const file of files) {
|
|
||||||
const form = new FormData();
|
|
||||||
form.append('file', file);
|
|
||||||
form.append('dir', dir);
|
|
||||||
await fetch('/api/upload', { method: 'POST', body: form });
|
|
||||||
}
|
|
||||||
event.target.value = '';
|
|
||||||
this.showToast('File uploaded');
|
|
||||||
this.loadFiles();
|
|
||||||
},
|
|
||||||
async uploadDropped(event, dir) {
|
|
||||||
const files = event.dataTransfer.files;
|
|
||||||
if (!files || !files.length) return;
|
|
||||||
for (const file of files) {
|
|
||||||
const form = new FormData();
|
|
||||||
form.append('file', file);
|
|
||||||
form.append('dir', dir);
|
|
||||||
await fetch('/api/upload', { method: 'POST', body: form });
|
|
||||||
}
|
|
||||||
this.showToast('File uploaded');
|
|
||||||
this.loadFiles();
|
|
||||||
},
|
|
||||||
download(id) {
|
|
||||||
window.location.href = '/api/files/' + id + '/download';
|
|
||||||
},
|
|
||||||
async deleteFile(id) {
|
|
||||||
if (!confirm('Delete this file?')) return;
|
|
||||||
await fetch('/api/files/' + id, { method: 'DELETE' });
|
|
||||||
this.showToast('File deleted');
|
|
||||||
this.loadFiles();
|
|
||||||
},
|
|
||||||
async share(id) {
|
|
||||||
const res = await fetch('/api/files/' + id + '/share', { method: 'POST' });
|
|
||||||
const data = await res.json();
|
|
||||||
try {
|
|
||||||
await navigator.clipboard.writeText(data.url);
|
|
||||||
this.showToast('Share link copied to clipboard');
|
|
||||||
} catch (_) {
|
|
||||||
alert('Share URL: ' + data.url);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
async logout() {
|
|
||||||
await fetch('/api/logout', { method: 'POST' });
|
|
||||||
window.location.href = '/login';
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}
|
|
||||||
@@ -0,0 +1,85 @@
|
|||||||
|
/**
|
||||||
|
* Confirmation dialog (a promise-based modal store + UI component).
|
||||||
|
*
|
||||||
|
* Replaces the browser-native `confirm()` with a styled, accessible modal.
|
||||||
|
* Components request confirmation via `Alpine.store('confirm').show(opts)`,
|
||||||
|
* which resolves `true`/`false` when the user acts — mirroring a UI-library
|
||||||
|
* dialog API.
|
||||||
|
*/
|
||||||
|
(function () {
|
||||||
|
function register() {
|
||||||
|
Alpine.store('confirm', {
|
||||||
|
open: false,
|
||||||
|
title: '',
|
||||||
|
message: '',
|
||||||
|
danger: false,
|
||||||
|
_resolve: null,
|
||||||
|
|
||||||
|
show(opts) {
|
||||||
|
this.title = opts.title || 'Confirm';
|
||||||
|
this.message = opts.message || '';
|
||||||
|
this.danger = opts.danger || false;
|
||||||
|
this.open = true;
|
||||||
|
return new Promise((resolve) => {
|
||||||
|
this._resolve = resolve;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
accept() {
|
||||||
|
this._close(true);
|
||||||
|
},
|
||||||
|
|
||||||
|
cancel() {
|
||||||
|
this._close(false);
|
||||||
|
},
|
||||||
|
|
||||||
|
_close(result) {
|
||||||
|
this.open = false;
|
||||||
|
const resolve = this._resolve;
|
||||||
|
this._resolve = null;
|
||||||
|
if (resolve) resolve(result);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
Alpine.data('confirmDialog', () => ({
|
||||||
|
get store() {
|
||||||
|
return Alpine.store('confirm');
|
||||||
|
},
|
||||||
|
get open() {
|
||||||
|
return this.store.open;
|
||||||
|
},
|
||||||
|
get title() {
|
||||||
|
return this.store.title;
|
||||||
|
},
|
||||||
|
get message() {
|
||||||
|
return this.store.message;
|
||||||
|
},
|
||||||
|
get danger() {
|
||||||
|
return this.store.danger;
|
||||||
|
},
|
||||||
|
|
||||||
|
accept() {
|
||||||
|
this.store.accept();
|
||||||
|
},
|
||||||
|
cancel() {
|
||||||
|
this.store.cancel();
|
||||||
|
},
|
||||||
|
onEscape() {
|
||||||
|
if (this.open) this.cancel();
|
||||||
|
},
|
||||||
|
|
||||||
|
init() {
|
||||||
|
this.$watch('open', (visible) => {
|
||||||
|
if (visible) {
|
||||||
|
this.$nextTick(() => {
|
||||||
|
if (this.$refs.accept) this.$refs.accept.focus();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
|
||||||
|
if (window.Alpine) register();
|
||||||
|
else document.addEventListener('alpine:init', register);
|
||||||
|
})();
|
||||||
@@ -0,0 +1,44 @@
|
|||||||
|
/**
|
||||||
|
* fileSection component.
|
||||||
|
*
|
||||||
|
* A single reusable component parametrized by `dir` and `canShare`. Both the
|
||||||
|
* Inbox and Outbox on the page are the same component instance with different
|
||||||
|
* props, replacing the previously copy-pasted <section> blocks.
|
||||||
|
*
|
||||||
|
* Usage:
|
||||||
|
* <section x-data="fileSection('inbox', { canShare: true })"> ... </section>
|
||||||
|
*/
|
||||||
|
(function () {
|
||||||
|
function register() {
|
||||||
|
Alpine.data('fileSection', (dir, opts = {}) => ({
|
||||||
|
dir,
|
||||||
|
canShare: opts.canShare ?? false,
|
||||||
|
dragover: false,
|
||||||
|
|
||||||
|
get files() {
|
||||||
|
return Alpine.store('files').files[dir];
|
||||||
|
},
|
||||||
|
get count() {
|
||||||
|
return this.files.length;
|
||||||
|
},
|
||||||
|
get title() {
|
||||||
|
return Alpine.store('locale').t(dir === 'inbox' ? 'inbox' : 'outbox');
|
||||||
|
},
|
||||||
|
get icon() {
|
||||||
|
return dir === 'inbox' ? window.Icons.inbox : window.Icons.outbox;
|
||||||
|
},
|
||||||
|
|
||||||
|
async onSelect(e) {
|
||||||
|
await Alpine.store('files').upload(this.dir, e.target.files);
|
||||||
|
e.target.value = '';
|
||||||
|
},
|
||||||
|
|
||||||
|
async onDrop(e) {
|
||||||
|
await Alpine.store('files').upload(this.dir, e.dataTransfer.files);
|
||||||
|
},
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
|
||||||
|
if (window.Alpine) register();
|
||||||
|
else document.addEventListener('alpine:init', register);
|
||||||
|
})();
|
||||||
@@ -0,0 +1,120 @@
|
|||||||
|
/**
|
||||||
|
* Internationalization (i18n).
|
||||||
|
*
|
||||||
|
* - `window.I18n` holds the message catalogs (currently English + 简体中文).
|
||||||
|
* - The `locale` store owns the active language, persists it to localStorage,
|
||||||
|
* and exposes `t(key)`.
|
||||||
|
* - `$t('key')` is registered as an Alpine magic so templates can translate
|
||||||
|
* inline (e.g. `x-text="$t('nav.logout')"`).
|
||||||
|
*
|
||||||
|
* Because `t()` reads the reactive `lang`, any string bound through it updates
|
||||||
|
* automatically when the language changes.
|
||||||
|
*/
|
||||||
|
window.I18n = {
|
||||||
|
en: {
|
||||||
|
'app.name': 'yDropbox',
|
||||||
|
'nav.logout': 'Logout',
|
||||||
|
'inbox': 'Inbox',
|
||||||
|
'outbox': 'Outbox',
|
||||||
|
'dropzone.click': 'Click to upload',
|
||||||
|
'dropzone.rest': 'or drag and drop',
|
||||||
|
'empty.inbox': 'No files in inbox',
|
||||||
|
'empty.outbox': 'No files in outbox',
|
||||||
|
'action.download': 'Download',
|
||||||
|
'action.share': 'Share',
|
||||||
|
'action.delete': 'Delete',
|
||||||
|
'toast.uploaded': 'File uploaded',
|
||||||
|
'toast.deleted': 'File deleted',
|
||||||
|
'toast.loadFailed': 'Failed to load files',
|
||||||
|
'toast.shareCopied': 'Share link copied to clipboard',
|
||||||
|
'confirm.deleteTitle': 'Delete file',
|
||||||
|
'confirm.deleteMessage': 'This file will be permanently removed. Continue?',
|
||||||
|
'confirm.cancel': 'Cancel',
|
||||||
|
'confirm.delete': 'Delete',
|
||||||
|
'confirm.confirm': 'Confirm',
|
||||||
|
'theme.light': 'Light',
|
||||||
|
'theme.dark': 'Dark',
|
||||||
|
'theme.system': 'System',
|
||||||
|
'lang.label': 'Language',
|
||||||
|
'login.subtitle': 'Enter your access token to continue',
|
||||||
|
'login.token': 'Access Token',
|
||||||
|
'login.submit': 'Sign In',
|
||||||
|
'login.error': 'Invalid token. Please try again.',
|
||||||
|
},
|
||||||
|
zh: {
|
||||||
|
'app.name': 'yDropbox',
|
||||||
|
'nav.logout': '退出登录',
|
||||||
|
'inbox': '收件箱',
|
||||||
|
'outbox': '发件箱',
|
||||||
|
'dropzone.click': '点击上传',
|
||||||
|
'dropzone.rest': '或拖拽文件到此处',
|
||||||
|
'empty.inbox': '收件箱暂无文件',
|
||||||
|
'empty.outbox': '发件箱暂无文件',
|
||||||
|
'action.download': '下载',
|
||||||
|
'action.share': '分享',
|
||||||
|
'action.delete': '删除',
|
||||||
|
'toast.uploaded': '文件已上传',
|
||||||
|
'toast.deleted': '文件已删除',
|
||||||
|
'toast.loadFailed': '文件加载失败',
|
||||||
|
'toast.shareCopied': '分享链接已复制到剪贴板',
|
||||||
|
'confirm.deleteTitle': '删除文件',
|
||||||
|
'confirm.deleteMessage': '该文件将被永久删除，是否继续？',
|
||||||
|
'confirm.cancel': '取消',
|
||||||
|
'confirm.delete': '删除',
|
||||||
|
'confirm.confirm': '确认',
|
||||||
|
'theme.light': '浅色',
|
||||||
|
'theme.dark': '深色',
|
||||||
|
'theme.system': '跟随系统',
|
||||||
|
'lang.label': '语言',
|
||||||
|
'login.subtitle': '请输入访问令牌以继续',
|
||||||
|
'login.token': '访问令牌',
|
||||||
|
'login.submit': '登录',
|
||||||
|
'login.error': '令牌无效，请重试。',
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
(function () {
|
||||||
|
function register() {
|
||||||
|
Alpine.store('locale', {
|
||||||
|
lang: 'en',
|
||||||
|
|
||||||
|
init() {
|
||||||
|
let saved = null;
|
||||||
|
try {
|
||||||
|
saved = localStorage.getItem('yd.locale');
|
||||||
|
} catch (e) {}
|
||||||
|
const browser = (navigator.language || 'en').toLowerCase().startsWith('zh') ? 'zh' : 'en';
|
||||||
|
this.lang = saved || browser;
|
||||||
|
this._applyLangAttr();
|
||||||
|
},
|
||||||
|
|
||||||
|
set(lang) {
|
||||||
|
this.lang = lang;
|
||||||
|
try {
|
||||||
|
localStorage.setItem('yd.locale', lang);
|
||||||
|
} catch (e) {}
|
||||||
|
this._applyLangAttr();
|
||||||
|
},
|
||||||
|
|
||||||
|
toggle() {
|
||||||
|
this.set(this.lang === 'en' ? 'zh' : 'en');
|
||||||
|
},
|
||||||
|
|
||||||
|
t(key) {
|
||||||
|
const dict = window.I18n[this.lang] || window.I18n.en;
|
||||||
|
if (dict && dict[key] != null) return dict[key];
|
||||||
|
if (window.I18n.en[key] != null) return window.I18n.en[key];
|
||||||
|
return key;
|
||||||
|
},
|
||||||
|
|
||||||
|
_applyLangAttr() {
|
||||||
|
document.documentElement.setAttribute('lang', this.lang === 'zh' ? 'zh-CN' : 'en');
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
Alpine.magic('t', () => (key) => Alpine.store('locale').t(key));
|
||||||
|
}
|
||||||
|
|
||||||
|
if (window.Alpine) register();
|
||||||
|
else document.addEventListener('alpine:init', register);
|
||||||
|
})();
|
||||||
@@ -0,0 +1,45 @@
|
|||||||
|
/**
|
||||||
|
* Central icon set. Each entry is an inline SVG string (currentColor aware)
|
||||||
|
* injected via Alpine's x-html. Keeping icons here prevents the duplicated
|
||||||
|
* markup that previously littered every list row and header.
|
||||||
|
*/
|
||||||
|
window.Icons = {
|
||||||
|
logout:
|
||||||
|
'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></svg>',
|
||||||
|
|
||||||
|
inbox:
|
||||||
|
'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 12 16 12 14 15 10 15 8 12 2 12"/><path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"/></svg>',
|
||||||
|
|
||||||
|
outbox:
|
||||||
|
'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>',
|
||||||
|
|
||||||
|
file:
|
||||||
|
'<svg viewBox="0 0 24 24" fill="none" stroke="#2563eb" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>',
|
||||||
|
|
||||||
|
download:
|
||||||
|
'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>',
|
||||||
|
|
||||||
|
share:
|
||||||
|
'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" y1="13.51" x2="15.42" y2="17.49"/><line x1="15.41" y1="6.51" x2="8.59" y2="10.49"/></svg>',
|
||||||
|
|
||||||
|
trash:
|
||||||
|
'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>',
|
||||||
|
|
||||||
|
upload:
|
||||||
|
'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 13v8"/><path d="m8 17 4-4 4 4"/><path d="M20.39 18.39A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 4 16.3"/><path d="m8 17 4-4 4 4"/></svg>',
|
||||||
|
|
||||||
|
empty:
|
||||||
|
'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M22 12h-4l-3 3-4-3H2"/><path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"/></svg>',
|
||||||
|
|
||||||
|
/* Theme */
|
||||||
|
sun:
|
||||||
|
'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41"/></svg>',
|
||||||
|
moon:
|
||||||
|
'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>',
|
||||||
|
monitor:
|
||||||
|
'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="14" rx="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>',
|
||||||
|
|
||||||
|
/* Language */
|
||||||
|
globe:
|
||||||
|
'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>',
|
||||||
|
};
|
||||||
@@ -0,0 +1,88 @@
|
|||||||
|
/**
|
||||||
|
* Global state store (Alpine.store).
|
||||||
|
*
|
||||||
|
* Single source of truth for the file lists and shared actions, analogous to a
|
||||||
|
* Pinia/Redux store in a framework app. Components read reactive getters and
|
||||||
|
* dispatch actions here instead of owning their own duplicate state.
|
||||||
|
*/
|
||||||
|
(function () {
|
||||||
|
function register() {
|
||||||
|
Alpine.store('files', {
|
||||||
|
files: { inbox: [], outbox: [] },
|
||||||
|
toast: { show: false, message: '', _timer: null },
|
||||||
|
|
||||||
|
async init() {
|
||||||
|
await this.loadFiles();
|
||||||
|
},
|
||||||
|
|
||||||
|
async loadFiles() {
|
||||||
|
try {
|
||||||
|
const [inbox, outbox] = await Promise.all([
|
||||||
|
fetch('/api/files?dir=inbox').then((r) => r.json()),
|
||||||
|
fetch('/api/files?dir=outbox').then((r) => r.json()),
|
||||||
|
]);
|
||||||
|
this.files.inbox = inbox.files || [];
|
||||||
|
this.files.outbox = outbox.files || [];
|
||||||
|
} catch (e) {
|
||||||
|
this.showToast('toast.loadFailed');
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
showToast(message) {
|
||||||
|
this.toast.message = Alpine.store('locale').t(message);
|
||||||
|
this.toast.show = true;
|
||||||
|
if (this.toast._timer) clearTimeout(this.toast._timer);
|
||||||
|
this.toast._timer = setTimeout(() => {
|
||||||
|
this.toast.show = false;
|
||||||
|
}, 2500);
|
||||||
|
},
|
||||||
|
|
||||||
|
async upload(dir, fileList) {
|
||||||
|
if (!fileList || !fileList.length) return;
|
||||||
|
for (const file of fileList) {
|
||||||
|
const form = new FormData();
|
||||||
|
form.append('file', file);
|
||||||
|
form.append('dir', dir);
|
||||||
|
await fetch('/api/upload', { method: 'POST', body: form });
|
||||||
|
}
|
||||||
|
this.showToast('toast.uploaded');
|
||||||
|
await this.loadFiles();
|
||||||
|
},
|
||||||
|
|
||||||
|
download(id) {
|
||||||
|
window.location.href = '/api/files/' + id + '/download';
|
||||||
|
},
|
||||||
|
|
||||||
|
async deleteFile(id) {
|
||||||
|
const confirmed = await Alpine.store('confirm').show({
|
||||||
|
title: 'confirm.deleteTitle',
|
||||||
|
message: 'confirm.deleteMessage',
|
||||||
|
danger: true,
|
||||||
|
});
|
||||||
|
if (!confirmed) return;
|
||||||
|
await fetch('/api/files/' + id, { method: 'DELETE' });
|
||||||
|
this.showToast('toast.deleted');
|
||||||
|
await this.loadFiles();
|
||||||
|
},
|
||||||
|
|
||||||
|
async share(id) {
|
||||||
|
const res = await fetch('/api/files/' + id + '/share', { method: 'POST' });
|
||||||
|
const data = await res.json();
|
||||||
|
try {
|
||||||
|
await navigator.clipboard.writeText(data.url);
|
||||||
|
this.showToast('toast.shareCopied');
|
||||||
|
} catch (_) {
|
||||||
|
window.prompt('Share URL:', data.url);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
async logout() {
|
||||||
|
await fetch('/api/logout', { method: 'POST' });
|
||||||
|
window.location.href = '/login';
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if (window.Alpine) register();
|
||||||
|
else document.addEventListener('alpine:init', register);
|
||||||
|
})();
|
||||||
@@ -0,0 +1,64 @@
|
|||||||
|
/**
|
||||||
|
* Theme manager.
|
||||||
|
*
|
||||||
|
* Supports `light` / `dark` / `system`. The resolved theme is written to the
|
||||||
|
* `data-theme` attribute on <html>, which the CSS token layer keys off of.
|
||||||
|
* The `system` mode tracks the OS preference live. The choice is persisted to
|
||||||
|
* localStorage. A tiny inline script in each page sets the initial attribute
|
||||||
|
* before paint to avoid a flash of the wrong theme.
|
||||||
|
*/
|
||||||
|
(function () {
|
||||||
|
function register() {
|
||||||
|
Alpine.store('theme', {
|
||||||
|
mode: 'system', // 'light' | 'dark' | 'system'
|
||||||
|
resolved: 'light',
|
||||||
|
|
||||||
|
init() {
|
||||||
|
let saved = null;
|
||||||
|
try {
|
||||||
|
saved = localStorage.getItem('yd.theme');
|
||||||
|
} catch (e) {}
|
||||||
|
if (saved === 'light' || saved === 'dark' || saved === 'system') {
|
||||||
|
this.mode = saved;
|
||||||
|
}
|
||||||
|
this.apply();
|
||||||
|
|
||||||
|
const mq = window.matchMedia('(prefers-color-scheme: dark)');
|
||||||
|
const onChange = () => {
|
||||||
|
if (this.mode === 'system') this.apply();
|
||||||
|
};
|
||||||
|
if (mq.addEventListener) mq.addEventListener('change', onChange);
|
||||||
|
else if (mq.addListener) mq.addListener(onChange);
|
||||||
|
},
|
||||||
|
|
||||||
|
set(mode) {
|
||||||
|
this.mode = mode;
|
||||||
|
try {
|
||||||
|
localStorage.setItem('yd.theme', mode);
|
||||||
|
} catch (e) {}
|
||||||
|
this.apply();
|
||||||
|
},
|
||||||
|
|
||||||
|
cycle() {
|
||||||
|
const order = ['light', 'dark', 'system'];
|
||||||
|
const next = order[(order.indexOf(this.mode) + 1) % order.length];
|
||||||
|
this.set(next);
|
||||||
|
},
|
||||||
|
|
||||||
|
icon() {
|
||||||
|
if (this.mode === 'system') return 'monitor';
|
||||||
|
return this.mode === 'dark' ? 'moon' : 'sun';
|
||||||
|
},
|
||||||
|
|
||||||
|
apply() {
|
||||||
|
const mq = window.matchMedia('(prefers-color-scheme: dark)');
|
||||||
|
const resolved = this.mode === 'system' ? (mq.matches ? 'dark' : 'light') : this.mode;
|
||||||
|
this.resolved = resolved;
|
||||||
|
document.documentElement.setAttribute('data-theme', resolved);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if (window.Alpine) register();
|
||||||
|
else document.addEventListener('alpine:init', register);
|
||||||
|
})();
|
||||||
+179
-108
@@ -1,120 +1,191 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>yDropbox</title>
|
<title>yDropbox</title>
|
||||||
<link rel="stylesheet" href="/style.css">
|
<link rel="stylesheet" href="/styles/tokens.css">
|
||||||
<script defer src="/alpine.min.js"></script>
|
<link rel="stylesheet" href="/styles/base.css">
|
||||||
|
<link rel="stylesheet" href="/styles/components.css">
|
||||||
|
|
||||||
|
<!-- Set the theme before paint to avoid a flash of the wrong theme. -->
|
||||||
|
<script>
|
||||||
|
(function () {
|
||||||
|
try {
|
||||||
|
var t = localStorage.getItem('yd.theme') || 'system';
|
||||||
|
var dark = t === 'dark' || (t === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches);
|
||||||
|
document.documentElement.setAttribute('data-theme', dark ? 'dark' : 'light');
|
||||||
|
} catch (e) {}
|
||||||
|
})();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<!-- Components register themselves on `alpine:init`; Alpine is loaded last. -->
|
||||||
|
<script defer src="/components/icons.js"></script>
|
||||||
|
<script defer src="/version.js"></script>
|
||||||
|
<script defer src="/components/i18n.js"></script>
|
||||||
|
<script defer src="/components/theme.js"></script>
|
||||||
|
<script defer src="/components/store.js"></script>
|
||||||
|
<script defer src="/components/fileSection.js"></script>
|
||||||
|
<script defer src="/components/confirm.js"></script>
|
||||||
|
<script defer src="/alpine.min.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body x-data>
|
||||||
<div class="app" x-data="app()" x-init="loadFiles()">
|
<div class="app">
|
||||||
<header>
|
<header class="app-header">
|
||||||
<h1>y<span>Dropbox</span></h1>
|
<h1 class="brand">y<span>Dropbox</span></h1>
|
||||||
<button class="btn btn-logout" @click="logout()">
|
<div class="header-actions">
|
||||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></svg>
|
<button class="btn btn-icon" type="button"
|
||||||
Logout
|
@click="$store.locale.toggle()"
|
||||||
</button>
|
:title="$t('lang.label')" :aria-label="$t('lang.label')">
|
||||||
</header>
|
<span class="icon" x-html="Icons.globe"></span>
|
||||||
|
</button>
|
||||||
|
<button class="btn btn-icon" type="button"
|
||||||
|
@click="$store.theme.cycle()"
|
||||||
|
:title="$t('theme.' + $store.theme.mode)" :aria-label="$t('theme.' + $store.theme.mode)">
|
||||||
|
<span class="icon" x-html="Icons[$store.theme.icon()]"></span>
|
||||||
|
</button>
|
||||||
|
<button class="btn btn-ghost btn-logout" @click="$store.files.logout()">
|
||||||
|
<span class="icon" x-html="Icons.logout"></span>
|
||||||
|
<span x-text="$t('nav.logout')"></span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
<section class="section">
|
<main>
|
||||||
<div class="section-header">
|
<!-- Inbox -->
|
||||||
<h2>
|
<section class="section" x-data="fileSection('inbox', { canShare: true })">
|
||||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 12 16 12 14 15 10 15 8 12 2 12"/><path d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"/></svg>
|
<div class="section-header">
|
||||||
Inbox
|
<h2>
|
||||||
<span class="badge" x-text="inboxFiles.length"></span>
|
<span class="icon" x-html="icon"></span>
|
||||||
</h2>
|
<span x-text="title"></span>
|
||||||
</div>
|
<span class="badge" x-text="count"></span>
|
||||||
<div class="section-body">
|
</h2>
|
||||||
<div class="drop-zone" :class="{ 'dragover': dragover }"
|
</div>
|
||||||
@dragover.prevent="dragover = true"
|
|
||||||
@dragleave.prevent="dragover = false"
|
|
||||||
@drop.prevent="dragover = false; uploadDropped($event, 'inbox')">
|
|
||||||
<input type="file" @change="upload($event, 'inbox')" multiple>
|
|
||||||
<div class="drop-zone-icon">
|
|
||||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
|
|
||||||
</div>
|
|
||||||
<div class="drop-zone-text"><strong>Click to upload</strong> or drag and drop</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<template x-if="inboxFiles.length === 0">
|
<div class="drop-zone"
|
||||||
<div class="empty-state">
|
:class="{ 'is-dragover': dragover }"
|
||||||
<div class="empty-state-icon">
|
@dragover.prevent="dragover = true"
|
||||||
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M22 12h-4l-3 3L9 9l-3 3H2"/></svg>
|
@dragleave.prevent="dragover = false"
|
||||||
</div>
|
@drop.prevent="dragover = false; onDrop($event)">
|
||||||
<div class="empty-state-text">No files in inbox</div>
|
<input type="file" class="drop-zone-input" @change="onSelect($event)" multiple>
|
||||||
</div>
|
<div class="drop-zone-icon"><span class="icon" x-html="Icons.upload"></span></div>
|
||||||
</template>
|
<div class="drop-zone-text"><strong x-text="$t('dropzone.click')"></strong> <span x-text="$t('dropzone.rest')"></span></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<ul class="file-list">
|
<template x-if="count === 0">
|
||||||
<template x-for="file in inboxFiles" :key="file.id">
|
<div class="empty-state">
|
||||||
<li class="file-row">
|
<span class="empty-state-icon" x-html="Icons.empty"></span>
|
||||||
<div class="file-icon">
|
<div class="empty-state-text" x-text="$t('empty.' + dir)"></div>
|
||||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#2563eb" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
|
</div>
|
||||||
</div>
|
</template>
|
||||||
<div class="file-info">
|
|
||||||
<div class="file-name" x-text="file.name"></div>
|
|
||||||
</div>
|
|
||||||
<div class="file-actions">
|
|
||||||
<button class="btn btn-sm btn-ghost" @click="download(file.id)" title="Download">
|
|
||||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
|
|
||||||
</button>
|
|
||||||
<button class="btn btn-sm btn-ghost" @click="share(file.id)" title="Share">
|
|
||||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" y1="13.51" x2="15.42" y2="17.49"/><line x1="15.41" y1="6.51" x2="8.59" y2="10.49"/></svg>
|
|
||||||
</button>
|
|
||||||
<button class="btn btn-sm btn-ghost btn-danger" @click="deleteFile(file.id)" title="Delete">
|
|
||||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
</template>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section class="section">
|
<ul class="file-list" x-show="count > 0">
|
||||||
<div class="section-header">
|
<template x-for="file in files" :key="file.id">
|
||||||
<h2>
|
<li class="file-row">
|
||||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
|
<span class="file-icon" x-html="Icons.file"></span>
|
||||||
Outbox
|
<div class="file-info">
|
||||||
<span class="badge" x-text="outboxFiles.length"></span>
|
<div class="file-name" x-text="file.name"></div>
|
||||||
</h2>
|
</div>
|
||||||
</div>
|
<div class="file-actions">
|
||||||
<div class="section-body">
|
<button class="btn btn-icon" @click="$store.files.download(file.id)" :title="$t('action.download')">
|
||||||
<template x-if="outboxFiles.length === 0">
|
<span class="icon" x-html="Icons.download"></span>
|
||||||
<div class="empty-state">
|
</button>
|
||||||
<div class="empty-state-icon">
|
<button class="btn btn-icon" x-show="canShare" @click="$store.files.share(file.id)" :title="$t('action.share')">
|
||||||
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
|
<span class="icon" x-html="Icons.share"></span>
|
||||||
</div>
|
</button>
|
||||||
<div class="empty-state-text">No files in outbox</div>
|
<button class="btn btn-icon btn-danger" @click="$store.files.deleteFile(file.id)" :title="$t('action.delete')">
|
||||||
</div>
|
<span class="icon" x-html="Icons.trash"></span>
|
||||||
</template>
|
</button>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</template>
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
|
||||||
<ul class="file-list">
|
<!-- Outbox -->
|
||||||
<template x-for="file in outboxFiles" :key="file.id">
|
<section class="section" x-data="fileSection('outbox')">
|
||||||
<li class="file-row">
|
<div class="section-header">
|
||||||
<div class="file-icon">
|
<h2>
|
||||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#2563eb" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
|
<span class="icon" x-html="icon"></span>
|
||||||
</div>
|
<span x-text="title"></span>
|
||||||
<div class="file-info">
|
<span class="badge" x-text="count"></span>
|
||||||
<div class="file-name" x-text="file.name"></div>
|
</h2>
|
||||||
</div>
|
</div>
|
||||||
<div class="file-actions">
|
|
||||||
<button class="btn btn-sm btn-ghost" @click="download(file.id)" title="Download">
|
|
||||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
|
|
||||||
</button>
|
|
||||||
<button class="btn btn-sm btn-ghost btn-danger" @click="deleteFile(file.id)" title="Delete">
|
|
||||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
</template>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<div class="toast" :class="{ 'show': toast.show }" x-text="toast.message"></div>
|
<div class="drop-zone"
|
||||||
|
:class="{ 'is-dragover': dragover }"
|
||||||
|
@dragover.prevent="dragover = true"
|
||||||
|
@dragleave.prevent="dragover = false"
|
||||||
|
@drop.prevent="dragover = false; onDrop($event)">
|
||||||
|
<input type="file" class="drop-zone-input" @change="onSelect($event)" multiple>
|
||||||
|
<div class="drop-zone-icon"><span class="icon" x-html="Icons.upload"></span></div>
|
||||||
|
<div class="drop-zone-text"><strong x-text="$t('dropzone.click')"></strong> <span x-text="$t('dropzone.rest')"></span></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<template x-if="count === 0">
|
||||||
|
<div class="empty-state">
|
||||||
|
<span class="empty-state-icon" x-html="Icons.empty"></span>
|
||||||
|
<div class="empty-state-text" x-text="$t('empty.' + dir)"></div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<ul class="file-list" x-show="count > 0">
|
||||||
|
<template x-for="file in files" :key="file.id">
|
||||||
|
<li class="file-row">
|
||||||
|
<span class="file-icon" x-html="Icons.file"></span>
|
||||||
|
<div class="file-info">
|
||||||
|
<div class="file-name" x-text="file.name"></div>
|
||||||
|
</div>
|
||||||
|
<div class="file-actions">
|
||||||
|
<button class="btn btn-icon" @click="$store.files.download(file.id)" :title="$t('action.download')">
|
||||||
|
<span class="icon" x-html="Icons.download"></span>
|
||||||
|
</button>
|
||||||
|
<button class="btn btn-icon btn-danger" @click="$store.files.deleteFile(file.id)" :title="$t('action.delete')">
|
||||||
|
<span class="icon" x-html="Icons.trash"></span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</template>
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<div class="toast"
|
||||||
|
:class="{ 'show': $store.files.toast.show }"
|
||||||
|
x-text="$store.files.toast.message"></div>
|
||||||
|
|
||||||
|
<!-- Confirmation modal -->
|
||||||
|
<div class="modal-overlay"
|
||||||
|
x-data="confirmDialog()"
|
||||||
|
x-show="open"
|
||||||
|
x-cloak
|
||||||
|
x-transition.opacity
|
||||||
|
@click="cancel()"
|
||||||
|
@keydown.escape.window="onEscape()">
|
||||||
|
<div class="modal"
|
||||||
|
x-transition
|
||||||
|
@click.stop
|
||||||
|
role="dialog"
|
||||||
|
aria-modal="true"
|
||||||
|
:aria-label="$t(title)">
|
||||||
|
<h3 class="modal-title" x-text="$t(title)"></h3>
|
||||||
|
<p class="modal-body" x-text="$t(message)"></p>
|
||||||
|
<div class="modal-actions">
|
||||||
|
<button class="btn btn-ghost" type="button" @click="cancel()" x-text="$t('confirm.cancel')"></button>
|
||||||
|
<button class="btn"
|
||||||
|
:class="danger ? 'btn-danger' : 'btn-primary'"
|
||||||
|
type="button"
|
||||||
|
x-ref="accept"
|
||||||
|
@click="accept()"
|
||||||
|
x-text="$t(danger ? 'confirm.delete' : 'confirm.confirm')"></button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<script src="/app.js"></script>
|
|
||||||
|
<footer class="app-footer">
|
||||||
|
<span class="app-footer-brand">yDropbox</span>
|
||||||
|
<span class="app-footer-version" x-text="'v' + YDROPBX_VERSION"></span>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
+36
-6
@@ -4,17 +4,47 @@
|
|||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>yDropbox Login</title>
|
<title>yDropbox Login</title>
|
||||||
<link rel="stylesheet" href="/style.css">
|
<link rel="stylesheet" href="/styles/tokens.css">
|
||||||
|
<link rel="stylesheet" href="/styles/base.css">
|
||||||
|
<link rel="stylesheet" href="/styles/components.css">
|
||||||
|
|
||||||
|
<script>
|
||||||
|
(function () {
|
||||||
|
try {
|
||||||
|
var t = localStorage.getItem('yd.theme') || 'system';
|
||||||
|
var dark = t === 'dark' || (t === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches);
|
||||||
|
document.documentElement.setAttribute('data-theme', dark ? 'dark' : 'light');
|
||||||
|
} catch (e) {}
|
||||||
|
})();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script defer src="/components/icons.js"></script>
|
||||||
|
<script defer src="/components/i18n.js"></script>
|
||||||
|
<script defer src="/components/theme.js"></script>
|
||||||
|
<script defer src="/alpine.min.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body x-data>
|
||||||
|
<div class="page-topbar">
|
||||||
|
<button class="btn btn-icon" type="button"
|
||||||
|
@click="$store.locale.toggle()"
|
||||||
|
:title="$t('lang.label')" :aria-label="$t('lang.label')">
|
||||||
|
<span class="icon" x-html="Icons.globe"></span>
|
||||||
|
</button>
|
||||||
|
<button class="btn btn-icon" type="button"
|
||||||
|
@click="$store.theme.cycle()"
|
||||||
|
:title="$t('theme.' + $store.theme.mode)" :aria-label="$t('theme.' + $store.theme.mode)">
|
||||||
|
<span class="icon" x-html="Icons[$store.theme.icon()]"></span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="login-wrap">
|
<div class="login-wrap">
|
||||||
<div class="login-card">
|
<div class="login-card">
|
||||||
<h1>y<span>Dropbox</span></h1>
|
<h1>y<span>Dropbox</span></h1>
|
||||||
<p>Enter your access token to continue</p>
|
<p x-text="$t('login.subtitle')"></p>
|
||||||
<form id="loginForm">
|
<form id="loginForm">
|
||||||
<input type="password" id="token" placeholder="Access Token" required autocomplete="current-password">
|
<input type="password" id="token" :placeholder="$t('login.token')" required autocomplete="current-password">
|
||||||
<div class="login-error" id="loginError">Invalid token. Please try again.</div>
|
<div class="login-error" id="loginError" x-text="$t('login.error')"></div>
|
||||||
<button type="submit" class="btn btn-primary">Sign In</button>
|
<button type="submit" class="btn btn-primary" x-text="$t('login.submit')"></button>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
-340
@@ -1,340 +0,0 @@
|
|||||||
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
|
|
||||||
|
|
||||||
:root {
|
|
||||||
--bg: #f5f6f8;
|
|
||||||
--surface: #fff;
|
|
||||||
--border: #e2e5ea;
|
|
||||||
--text: #1a1d23;
|
|
||||||
--text-secondary: #6b7280;
|
|
||||||
--primary: #2563eb;
|
|
||||||
--primary-hover: #1d4ed8;
|
|
||||||
--danger: #ef4444;
|
|
||||||
--danger-hover: #dc2626;
|
|
||||||
--success: #10b981;
|
|
||||||
--radius: 10px;
|
|
||||||
--shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
|
|
||||||
--shadow-lg: 0 4px 12px rgba(0,0,0,.08);
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
|
||||||
background: var(--bg);
|
|
||||||
color: var(--text);
|
|
||||||
line-height: 1.5;
|
|
||||||
min-height: 100vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
.app {
|
|
||||||
max-width: 720px;
|
|
||||||
margin: 0 auto;
|
|
||||||
padding: 24px 20px 60px;
|
|
||||||
}
|
|
||||||
|
|
||||||
header {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 32px;
|
|
||||||
}
|
|
||||||
|
|
||||||
header h1 {
|
|
||||||
font-size: 22px;
|
|
||||||
font-weight: 700;
|
|
||||||
letter-spacing: -.3px;
|
|
||||||
color: var(--text);
|
|
||||||
}
|
|
||||||
|
|
||||||
header h1 span {
|
|
||||||
color: var(--primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 6px;
|
|
||||||
padding: 7px 14px;
|
|
||||||
font-size: 13px;
|
|
||||||
font-weight: 500;
|
|
||||||
border: 1px solid var(--border);
|
|
||||||
border-radius: 7px;
|
|
||||||
background: var(--surface);
|
|
||||||
color: var(--text);
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all .15s ease;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn:hover { background: #f0f1f3; }
|
|
||||||
|
|
||||||
.btn-primary {
|
|
||||||
background: var(--primary);
|
|
||||||
color: #fff;
|
|
||||||
border-color: var(--primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
|
|
||||||
|
|
||||||
.btn-danger {
|
|
||||||
color: var(--danger);
|
|
||||||
border-color: #fecaca;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-danger:hover { background: #fef2f2; border-color: var(--danger); }
|
|
||||||
|
|
||||||
.btn-ghost {
|
|
||||||
border-color: transparent;
|
|
||||||
background: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-ghost:hover { background: #f0f1f3; }
|
|
||||||
|
|
||||||
.btn-sm { padding: 5px 10px; font-size: 12px; }
|
|
||||||
|
|
||||||
.btn-logout {
|
|
||||||
border-color: transparent;
|
|
||||||
color: var(--text-secondary);
|
|
||||||
font-size: 13px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-logout:hover { color: var(--text); background: #f0f1f3; }
|
|
||||||
|
|
||||||
.section {
|
|
||||||
background: var(--surface);
|
|
||||||
border: 1px solid var(--border);
|
|
||||||
border-radius: var(--radius);
|
|
||||||
box-shadow: var(--shadow);
|
|
||||||
margin-bottom: 20px;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section-header {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
padding: 16px 20px;
|
|
||||||
border-bottom: 1px solid var(--border);
|
|
||||||
}
|
|
||||||
|
|
||||||
.section-header h2 {
|
|
||||||
font-size: 15px;
|
|
||||||
font-weight: 600;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section-header .badge {
|
|
||||||
font-size: 11px;
|
|
||||||
font-weight: 600;
|
|
||||||
background: var(--bg);
|
|
||||||
color: var(--text-secondary);
|
|
||||||
padding: 2px 7px;
|
|
||||||
border-radius: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section-body { padding: 0; }
|
|
||||||
|
|
||||||
.drop-zone {
|
|
||||||
margin: 16px 20px;
|
|
||||||
padding: 28px 20px;
|
|
||||||
border: 2px dashed var(--border);
|
|
||||||
border-radius: 8px;
|
|
||||||
text-align: center;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all .2s ease;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.drop-zone:hover, .drop-zone.dragover {
|
|
||||||
border-color: var(--primary);
|
|
||||||
background: #eff6ff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.drop-zone input[type="file"] {
|
|
||||||
position: absolute;
|
|
||||||
inset: 0;
|
|
||||||
opacity: 0;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.drop-zone-icon {
|
|
||||||
font-size: 24px;
|
|
||||||
margin-bottom: 6px;
|
|
||||||
color: var(--text-secondary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.drop-zone-text {
|
|
||||||
font-size: 13px;
|
|
||||||
color: var(--text-secondary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.drop-zone-text strong {
|
|
||||||
color: var(--primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.file-list { list-style: none; }
|
|
||||||
|
|
||||||
.file-row {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 12px;
|
|
||||||
padding: 12px 20px;
|
|
||||||
border-bottom: 1px solid #f3f4f6;
|
|
||||||
transition: background .1s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.file-row:last-child { border-bottom: none; }
|
|
||||||
.file-row:hover { background: #fafbfc; }
|
|
||||||
|
|
||||||
.file-icon {
|
|
||||||
width: 36px;
|
|
||||||
height: 36px;
|
|
||||||
border-radius: 8px;
|
|
||||||
background: #eff6ff;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
font-size: 16px;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.file-info {
|
|
||||||
flex: 1;
|
|
||||||
min-width: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.file-name {
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 500;
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
}
|
|
||||||
|
|
||||||
.file-meta {
|
|
||||||
font-size: 12px;
|
|
||||||
color: var(--text-secondary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.file-actions {
|
|
||||||
display: flex;
|
|
||||||
gap: 4px;
|
|
||||||
flex-shrink: 0;
|
|
||||||
opacity: 0;
|
|
||||||
transition: opacity .15s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.file-row:hover .file-actions { opacity: 1; }
|
|
||||||
|
|
||||||
.empty-state {
|
|
||||||
padding: 40px 20px;
|
|
||||||
text-align: center;
|
|
||||||
color: var(--text-secondary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.empty-state-icon {
|
|
||||||
font-size: 32px;
|
|
||||||
margin-bottom: 8px;
|
|
||||||
opacity: .5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.empty-state-text {
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.login-wrap {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
min-height: 100vh;
|
|
||||||
padding: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.login-card {
|
|
||||||
width: 100%;
|
|
||||||
max-width: 360px;
|
|
||||||
background: var(--surface);
|
|
||||||
border: 1px solid var(--border);
|
|
||||||
border-radius: 12px;
|
|
||||||
box-shadow: var(--shadow-lg);
|
|
||||||
padding: 40px 32px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.login-card h1 {
|
|
||||||
font-size: 24px;
|
|
||||||
font-weight: 700;
|
|
||||||
margin-bottom: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.login-card h1 span { color: var(--primary); }
|
|
||||||
|
|
||||||
.login-card p {
|
|
||||||
font-size: 14px;
|
|
||||||
color: var(--text-secondary);
|
|
||||||
margin-bottom: 28px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.login-card form {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.login-card input {
|
|
||||||
padding: 10px 14px;
|
|
||||||
font-size: 14px;
|
|
||||||
border: 1px solid var(--border);
|
|
||||||
border-radius: 8px;
|
|
||||||
outline: none;
|
|
||||||
transition: border-color .15s ease;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.login-card input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37,99,235,.1); }
|
|
||||||
|
|
||||||
.login-card .btn-primary {
|
|
||||||
width: 100%;
|
|
||||||
padding: 10px;
|
|
||||||
font-size: 14px;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.login-error {
|
|
||||||
font-size: 13px;
|
|
||||||
color: var(--danger);
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.login-error.show { display: block; }
|
|
||||||
|
|
||||||
.toast {
|
|
||||||
position: fixed;
|
|
||||||
bottom: 24px;
|
|
||||||
left: 50%;
|
|
||||||
transform: translateX(-50%) translateY(80px);
|
|
||||||
background: var(--text);
|
|
||||||
color: #fff;
|
|
||||||
padding: 10px 20px;
|
|
||||||
border-radius: 8px;
|
|
||||||
font-size: 13px;
|
|
||||||
font-weight: 500;
|
|
||||||
box-shadow: var(--shadow-lg);
|
|
||||||
opacity: 0;
|
|
||||||
transition: all .3s ease;
|
|
||||||
z-index: 1000;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.toast.show {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translateX(-50%) translateY(0);
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 600px) {
|
|
||||||
.app { padding: 16px 12px 40px; }
|
|
||||||
.section-header { padding: 12px 16px; }
|
|
||||||
.file-row { padding: 10px 16px; }
|
|
||||||
.file-actions { opacity: 1; }
|
|
||||||
.drop-zone { margin: 12px 16px; }
|
|
||||||
}
|
|
||||||
@@ -0,0 +1,54 @@
|
|||||||
|
*,
|
||||||
|
*::before,
|
||||||
|
*::after {
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
-webkit-text-size-adjust: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: var(--font-sans);
|
||||||
|
background: var(--color-bg);
|
||||||
|
background-image: var(--color-bg-gradient);
|
||||||
|
background-attachment: fixed;
|
||||||
|
color: var(--color-text);
|
||||||
|
line-height: 1.5;
|
||||||
|
min-height: 100vh;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
text-rendering: optimizeLegibility;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
font-family: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
[x-cloak] {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
:focus-visible {
|
||||||
|
outline: 2px solid var(--color-primary);
|
||||||
|
outline-offset: 2px;
|
||||||
|
border-radius: var(--radius-sm);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== App shell ===== */
|
||||||
|
.app {
|
||||||
|
max-width: 760px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: var(--space-8) var(--space-5) var(--space-16);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 600px) {
|
||||||
|
.app {
|
||||||
|
padding: var(--space-5) var(--space-4) var(--space-16);
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,463 @@
|
|||||||
|
/* ============================================================
|
||||||
|
Components
|
||||||
|
============================================================ */
|
||||||
|
|
||||||
|
/* ----- Icon helper (x-html injected SVGs) ----- */
|
||||||
|
.icon {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
line-height: 0;
|
||||||
|
}
|
||||||
|
.icon svg {
|
||||||
|
display: block;
|
||||||
|
width: 1em;
|
||||||
|
height: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ----- Header ----- */
|
||||||
|
.app-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: var(--space-8);
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-actions {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--space-2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.brand {
|
||||||
|
font-size: var(--text-2xl);
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: -0.4px;
|
||||||
|
color: var(--color-text);
|
||||||
|
}
|
||||||
|
.brand span {
|
||||||
|
color: var(--color-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ----- Buttons ----- */
|
||||||
|
.btn {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--space-2);
|
||||||
|
padding: var(--space-2) var(--space-4);
|
||||||
|
font-size: var(--text-sm);
|
||||||
|
font-weight: 500;
|
||||||
|
line-height: 1;
|
||||||
|
color: var(--color-text);
|
||||||
|
background: var(--color-surface);
|
||||||
|
border: 1px solid var(--color-border);
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background var(--transition-fast), border-color var(--transition-fast),
|
||||||
|
color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
|
||||||
|
white-space: nowrap;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
.btn:hover {
|
||||||
|
background: var(--color-surface-hover);
|
||||||
|
}
|
||||||
|
.btn:active {
|
||||||
|
transform: translateY(1px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary {
|
||||||
|
background: var(--color-primary);
|
||||||
|
border-color: var(--color-primary);
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.btn-primary:hover {
|
||||||
|
background: var(--color-primary-hover);
|
||||||
|
border-color: var(--color-primary-hover);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-danger {
|
||||||
|
color: var(--color-danger);
|
||||||
|
border-color: #fecaca;
|
||||||
|
}
|
||||||
|
.btn-danger:hover {
|
||||||
|
background: var(--color-danger-soft);
|
||||||
|
border-color: var(--color-danger);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-ghost {
|
||||||
|
border-color: transparent;
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
.btn-ghost:hover {
|
||||||
|
background: var(--color-surface-hover);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-sm {
|
||||||
|
padding: var(--space-2) var(--space-3);
|
||||||
|
font-size: var(--text-xs);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-logout {
|
||||||
|
color: var(--color-text-secondary);
|
||||||
|
font-size: var(--text-sm);
|
||||||
|
}
|
||||||
|
.btn-logout:hover {
|
||||||
|
color: var(--color-text);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Icon-only button */
|
||||||
|
.btn-icon {
|
||||||
|
padding: var(--space-2);
|
||||||
|
color: var(--color-text-secondary);
|
||||||
|
}
|
||||||
|
.btn-icon:hover {
|
||||||
|
color: var(--color-text);
|
||||||
|
background: var(--color-surface-hover);
|
||||||
|
}
|
||||||
|
.btn-icon.btn-danger:hover {
|
||||||
|
color: var(--color-danger);
|
||||||
|
background: var(--color-danger-soft);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ----- Section (card) ----- */
|
||||||
|
.section {
|
||||||
|
background: var(--color-surface);
|
||||||
|
border: 1px solid var(--color-border);
|
||||||
|
border-radius: var(--radius-lg);
|
||||||
|
box-shadow: var(--shadow-sm);
|
||||||
|
margin-bottom: var(--space-5);
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: var(--space-4) var(--space-5);
|
||||||
|
border-bottom: 1px solid var(--color-border);
|
||||||
|
}
|
||||||
|
.section-header h2 {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--space-2);
|
||||||
|
font-size: var(--text-lg);
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
.section-header h2 .icon {
|
||||||
|
font-size: 1.05em;
|
||||||
|
color: var(--color-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
min-width: 22px;
|
||||||
|
height: 22px;
|
||||||
|
padding: 0 var(--space-2);
|
||||||
|
font-size: var(--text-xs);
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--color-text-secondary);
|
||||||
|
background: var(--color-bg);
|
||||||
|
border-radius: var(--radius-full);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ----- Drop zone ----- */
|
||||||
|
.drop-zone {
|
||||||
|
position: relative;
|
||||||
|
margin: var(--space-4) var(--space-5);
|
||||||
|
padding: var(--space-8) var(--space-5);
|
||||||
|
text-align: center;
|
||||||
|
border: 2px dashed var(--color-border-strong);
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
cursor: pointer;
|
||||||
|
transition: border-color var(--transition-base), background var(--transition-base);
|
||||||
|
}
|
||||||
|
.drop-zone:hover,
|
||||||
|
.drop-zone.is-dragover {
|
||||||
|
border-color: var(--color-primary);
|
||||||
|
background: var(--color-primary-soft);
|
||||||
|
}
|
||||||
|
.drop-zone-input {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
opacity: 0;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.drop-zone-icon {
|
||||||
|
font-size: 1.6rem;
|
||||||
|
color: var(--color-text-tertiary);
|
||||||
|
margin-bottom: var(--space-2);
|
||||||
|
transition: color var(--transition-base);
|
||||||
|
}
|
||||||
|
.drop-zone:hover .drop-zone-icon,
|
||||||
|
.drop-zone.is-dragover .drop-zone-icon {
|
||||||
|
color: var(--color-primary);
|
||||||
|
}
|
||||||
|
.drop-zone-text {
|
||||||
|
font-size: var(--text-sm);
|
||||||
|
color: var(--color-text-secondary);
|
||||||
|
}
|
||||||
|
.drop-zone-text strong {
|
||||||
|
color: var(--color-primary);
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ----- File list ----- */
|
||||||
|
.file-list {
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-row {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--space-3);
|
||||||
|
padding: var(--space-3) var(--space-5);
|
||||||
|
border-bottom: 1px solid var(--color-divider);
|
||||||
|
transition: background var(--transition-fast);
|
||||||
|
}
|
||||||
|
.file-row:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
.file-row:hover {
|
||||||
|
background: var(--color-surface-hover);
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-icon {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 38px;
|
||||||
|
height: 38px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
font-size: 18px;
|
||||||
|
color: var(--color-primary);
|
||||||
|
background: var(--color-primary-soft);
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-info {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
.file-name {
|
||||||
|
font-size: var(--text-sm);
|
||||||
|
font-weight: 500;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-actions {
|
||||||
|
display: flex;
|
||||||
|
gap: var(--space-1);
|
||||||
|
flex-shrink: 0;
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity var(--transition-fast);
|
||||||
|
}
|
||||||
|
.file-row:hover .file-actions,
|
||||||
|
.file-row:focus-within .file-actions {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ----- Empty state ----- */
|
||||||
|
.empty-state {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--space-2);
|
||||||
|
padding: var(--space-10) var(--space-5);
|
||||||
|
text-align: center;
|
||||||
|
color: var(--color-text-secondary);
|
||||||
|
}
|
||||||
|
.empty-state-icon {
|
||||||
|
font-size: 2rem;
|
||||||
|
color: var(--color-text-tertiary);
|
||||||
|
opacity: 0.6;
|
||||||
|
}
|
||||||
|
.empty-state-text {
|
||||||
|
font-size: var(--text-sm);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ----- Toast ----- */
|
||||||
|
.toast {
|
||||||
|
position: fixed;
|
||||||
|
left: 50%;
|
||||||
|
bottom: var(--space-6);
|
||||||
|
transform: translateX(-50%) translateY(120%);
|
||||||
|
padding: var(--space-3) var(--space-5);
|
||||||
|
font-size: var(--text-sm);
|
||||||
|
font-weight: 500;
|
||||||
|
color: var(--color-toast-fg);
|
||||||
|
background: var(--color-toast-bg);
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
box-shadow: var(--shadow-lg);
|
||||||
|
opacity: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
z-index: var(--z-toast);
|
||||||
|
transition: transform var(--transition-slow), opacity var(--transition-slow);
|
||||||
|
}
|
||||||
|
.toast.show {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateX(-50%) translateY(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-reduced-motion: reduce) {
|
||||||
|
* {
|
||||||
|
transition-duration: 0.01ms !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ----- App footer (version) ----- */
|
||||||
|
.app-footer {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: var(--space-2);
|
||||||
|
margin-top: var(--space-8);
|
||||||
|
font-size: var(--text-xs);
|
||||||
|
color: var(--color-text-tertiary);
|
||||||
|
}
|
||||||
|
.app-footer-version {
|
||||||
|
font-variant-numeric: tabular-nums;
|
||||||
|
padding: 2px 8px;
|
||||||
|
background: var(--color-surface);
|
||||||
|
border: 1px solid var(--color-border);
|
||||||
|
border-radius: var(--radius-full);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ----- Modal (confirmation dialog) ----- */
|
||||||
|
.modal-overlay {
|
||||||
|
position: fixed;
|
||||||
|
inset: 0;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: var(--space-4);
|
||||||
|
background: rgba(16, 24, 40, 0.45);
|
||||||
|
backdrop-filter: blur(2px);
|
||||||
|
z-index: var(--z-modal);
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 380px;
|
||||||
|
padding: var(--space-6);
|
||||||
|
background: var(--color-surface);
|
||||||
|
border: 1px solid var(--color-border);
|
||||||
|
border-radius: var(--radius-lg);
|
||||||
|
box-shadow: var(--shadow-lg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-title {
|
||||||
|
font-size: var(--text-lg);
|
||||||
|
font-weight: 600;
|
||||||
|
margin-bottom: var(--space-2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-body {
|
||||||
|
font-size: var(--text-sm);
|
||||||
|
color: var(--color-text-secondary);
|
||||||
|
margin-bottom: var(--space-6);
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-actions {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
gap: var(--space-2);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ----- Login ----- */
|
||||||
|
.page-topbar {
|
||||||
|
position: fixed;
|
||||||
|
top: var(--space-4);
|
||||||
|
right: var(--space-4);
|
||||||
|
display: flex;
|
||||||
|
gap: var(--space-2);
|
||||||
|
z-index: var(--z-toast);
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-wrap {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
min-height: 100vh;
|
||||||
|
padding: var(--space-5);
|
||||||
|
}
|
||||||
|
.login-card {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 380px;
|
||||||
|
padding: var(--space-10) var(--space-8);
|
||||||
|
text-align: center;
|
||||||
|
background: var(--color-surface);
|
||||||
|
border: 1px solid var(--color-border);
|
||||||
|
border-radius: var(--radius-lg);
|
||||||
|
box-shadow: var(--shadow-lg);
|
||||||
|
}
|
||||||
|
.login-card h1 {
|
||||||
|
font-size: var(--text-2xl);
|
||||||
|
font-weight: 700;
|
||||||
|
margin-bottom: var(--space-1);
|
||||||
|
}
|
||||||
|
.login-card h1 span {
|
||||||
|
color: var(--color-primary);
|
||||||
|
}
|
||||||
|
.login-card p {
|
||||||
|
font-size: var(--text-sm);
|
||||||
|
color: var(--color-text-secondary);
|
||||||
|
margin-bottom: var(--space-6);
|
||||||
|
}
|
||||||
|
.login-card form {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: var(--space-3);
|
||||||
|
}
|
||||||
|
.login-card input {
|
||||||
|
width: 100%;
|
||||||
|
padding: var(--space-3) var(--space-4);
|
||||||
|
font-size: var(--text-base);
|
||||||
|
color: var(--color-text);
|
||||||
|
background: var(--color-surface);
|
||||||
|
border: 1px solid var(--color-border);
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
outline: none;
|
||||||
|
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
|
||||||
|
}
|
||||||
|
.login-card input:focus {
|
||||||
|
border-color: var(--color-primary);
|
||||||
|
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
|
||||||
|
}
|
||||||
|
.login-card .btn-primary {
|
||||||
|
justify-content: center;
|
||||||
|
padding: var(--space-3);
|
||||||
|
font-size: var(--text-base);
|
||||||
|
}
|
||||||
|
.login-error {
|
||||||
|
display: none;
|
||||||
|
font-size: var(--text-sm);
|
||||||
|
color: var(--color-danger);
|
||||||
|
}
|
||||||
|
.login-error.show {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ----- Responsive ----- */
|
||||||
|
@media (max-width: 600px) {
|
||||||
|
.section-header {
|
||||||
|
padding: var(--space-3) var(--space-4);
|
||||||
|
}
|
||||||
|
.file-row {
|
||||||
|
padding: var(--space-3) var(--space-4);
|
||||||
|
}
|
||||||
|
.file-actions {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
.drop-zone {
|
||||||
|
margin: var(--space-3) var(--space-4);
|
||||||
|
}
|
||||||
|
.login-card {
|
||||||
|
padding: var(--space-8) var(--space-5);
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,98 @@
|
|||||||
|
:root {
|
||||||
|
/* ===== Color ===== */
|
||||||
|
--color-bg: #f4f5f7;
|
||||||
|
--color-bg-gradient: radial-gradient(1200px 600px at 50% -10%, #eef2ff 0%, var(--color-bg) 55%);
|
||||||
|
--color-surface: #ffffff;
|
||||||
|
--color-surface-hover: #fafbfc;
|
||||||
|
--color-border: #e6e8ec;
|
||||||
|
--color-border-strong: #d4d8df;
|
||||||
|
|
||||||
|
--color-text: #1a1d23;
|
||||||
|
--color-text-secondary: #6b7280;
|
||||||
|
--color-text-tertiary: #9aa1ad;
|
||||||
|
|
||||||
|
--color-primary: #2563eb;
|
||||||
|
--color-primary-hover: #1d4ed8;
|
||||||
|
--color-primary-soft: #eff6ff;
|
||||||
|
|
||||||
|
--color-danger: #ef4444;
|
||||||
|
--color-danger-hover: #dc2626;
|
||||||
|
--color-danger-soft: #fef2f2;
|
||||||
|
|
||||||
|
--color-success: #10b981;
|
||||||
|
|
||||||
|
/* Structural tokens */
|
||||||
|
--color-divider: #f3f4f6;
|
||||||
|
--color-toast-bg: #1a1d23;
|
||||||
|
--color-toast-fg: #ffffff;
|
||||||
|
|
||||||
|
color-scheme: light;
|
||||||
|
|
||||||
|
/* ===== Spacing (4px base) ===== */
|
||||||
|
--space-1: 0.25rem;
|
||||||
|
--space-2: 0.5rem;
|
||||||
|
--space-3: 0.75rem;
|
||||||
|
--space-4: 1rem;
|
||||||
|
--space-5: 1.25rem;
|
||||||
|
--space-6: 1.5rem;
|
||||||
|
--space-8: 2rem;
|
||||||
|
--space-10: 2.5rem;
|
||||||
|
--space-16: 4rem;
|
||||||
|
|
||||||
|
/* ===== Radius ===== */
|
||||||
|
--radius-sm: 6px;
|
||||||
|
--radius-md: 10px;
|
||||||
|
--radius-lg: 14px;
|
||||||
|
--radius-full: 9999px;
|
||||||
|
|
||||||
|
/* ===== Shadow ===== */
|
||||||
|
--shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05);
|
||||||
|
--shadow-md: 0 4px 12px rgba(16, 24, 40, 0.08);
|
||||||
|
--shadow-lg: 0 16px 40px rgba(16, 24, 40, 0.14);
|
||||||
|
|
||||||
|
/* ===== Typography ===== */
|
||||||
|
--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||||
|
--text-xs: 0.75rem;
|
||||||
|
--text-sm: 0.875rem;
|
||||||
|
--text-base: 1rem;
|
||||||
|
--text-lg: 1.125rem;
|
||||||
|
--text-xl: 1.25rem;
|
||||||
|
--text-2xl: 1.5rem;
|
||||||
|
|
||||||
|
/* ===== Motion ===== */
|
||||||
|
--transition-fast: 150ms ease;
|
||||||
|
--transition-base: 200ms ease;
|
||||||
|
--transition-slow: 300ms ease;
|
||||||
|
|
||||||
|
/* ===== z-index ===== */
|
||||||
|
--z-toast: 1000;
|
||||||
|
--z-modal: 1100;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== Dark theme ===== */
|
||||||
|
[data-theme="dark"] {
|
||||||
|
--color-bg: #0f1115;
|
||||||
|
--color-bg-gradient: radial-gradient(1200px 600px at 50% -10%, #1a2030 0%, var(--color-bg) 55%);
|
||||||
|
--color-surface: #171a21;
|
||||||
|
--color-surface-hover: #1e222b;
|
||||||
|
--color-border: #262b35;
|
||||||
|
--color-border-strong: #323844;
|
||||||
|
|
||||||
|
--color-text: #e6e8ec;
|
||||||
|
--color-text-secondary: #9aa1ad;
|
||||||
|
--color-text-tertiary: #6b7280;
|
||||||
|
|
||||||
|
--color-primary: #3b82f6;
|
||||||
|
--color-primary-hover: #2f6fe0;
|
||||||
|
--color-primary-soft: #16233f;
|
||||||
|
|
||||||
|
--color-danger: #f87171;
|
||||||
|
--color-danger-hover: #ef4444;
|
||||||
|
--color-danger-soft: #2a1717;
|
||||||
|
|
||||||
|
--color-divider: #23262f;
|
||||||
|
--color-toast-bg: #e6e8ec;
|
||||||
|
--color-toast-fg: #1a1d23;
|
||||||
|
|
||||||
|
color-scheme: dark;
|
||||||
|
}
|
||||||
@@ -0,0 +1,3 @@
|
|||||||
|
// Frontend version. Bump this together with the top entry in
|
||||||
|
// docs/CHANGELOG_webui.md whenever the UI changes.
|
||||||
|
window.YDROPBX_VERSION = '0.1.1';
|
||||||
+1
-1
@@ -2,5 +2,5 @@ package web
|
|||||||
|
|
||||||
import "embed"
|
import "embed"
|
||||||
|
|
||||||
//go:embed login.html index.html style.css app.js alpine.min.js
|
//go:embed login.html index.html alpine.min.js version.js components styles
|
||||||
var FS embed.FS
|
var FS embed.FS
|
||||||
|
|||||||
Reference in New Issue
Block a user