- tauri 设计完成
This commit is contained in:
Pine
-116
@@ -1,116 +0,0 @@
|
||||
.logo.vite:hover {
|
||||
filter: drop-shadow(0 0 2em #747bff);
|
||||
}
|
||||
|
||||
.logo.react:hover {
|
||||
filter: drop-shadow(0 0 2em #61dafb);
|
||||
}
|
||||
:root {
|
||||
font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
font-weight: 400;
|
||||
|
||||
color: #0f0f0f;
|
||||
background-color: #f6f6f6;
|
||||
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
}
|
||||
|
||||
.container {
|
||||
margin: 0;
|
||||
padding-top: 10vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 6em;
|
||||
padding: 1.5em;
|
||||
will-change: filter;
|
||||
transition: 0.75s;
|
||||
}
|
||||
|
||||
.logo.tauri:hover {
|
||||
filter: drop-shadow(0 0 2em #24c8db);
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
a {
|
||||
font-weight: 500;
|
||||
color: #646cff;
|
||||
text-decoration: inherit;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #535bf2;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
input,
|
||||
button {
|
||||
border-radius: 8px;
|
||||
border: 1px solid transparent;
|
||||
padding: 0.6em 1.2em;
|
||||
font-size: 1em;
|
||||
font-weight: 500;
|
||||
font-family: inherit;
|
||||
color: #0f0f0f;
|
||||
background-color: #ffffff;
|
||||
transition: border-color 0.25s;
|
||||
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
button {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
border-color: #396cd8;
|
||||
}
|
||||
button:active {
|
||||
border-color: #396cd8;
|
||||
background-color: #e8e8e8;
|
||||
}
|
||||
|
||||
input,
|
||||
button {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
#greet-input {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
color: #f6f6f6;
|
||||
background-color: #2f2f2f;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #24c8db;
|
||||
}
|
||||
|
||||
input,
|
||||
button {
|
||||
color: #ffffff;
|
||||
background-color: #0f0f0f98;
|
||||
}
|
||||
button:active {
|
||||
background-color: #0f0f0f69;
|
||||
}
|
||||
}
|
||||
+12
-47
@@ -1,51 +1,16 @@
|
||||
import { useState } from "react";
|
||||
import reactLogo from "./assets/react.svg";
|
||||
import { invoke } from "@tauri-apps/api/core";
|
||||
import "./App.css";
|
||||
|
||||
function App() {
|
||||
const [greetMsg, setGreetMsg] = useState("");
|
||||
const [name, setName] = useState("");
|
||||
|
||||
async function greet() {
|
||||
// Learn more about Tauri commands at https://tauri.app/develop/calling-rust/
|
||||
setGreetMsg(await invoke("greet", { name }));
|
||||
}
|
||||
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
|
||||
import Admin from './pages/Admin';
|
||||
import Screen from './pages/Screen';
|
||||
import './styles/tokens.css';
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<main className="container">
|
||||
<h1>Welcome to Tauri + React</h1>
|
||||
|
||||
<div className="row">
|
||||
<a href="https://vite.dev" target="_blank">
|
||||
<img src="/vite.svg" className="logo vite" alt="Vite logo" />
|
||||
</a>
|
||||
<a href="https://tauri.app" target="_blank">
|
||||
<img src="/tauri.svg" className="logo tauri" alt="Tauri logo" />
|
||||
</a>
|
||||
<a href="https://react.dev" target="_blank">
|
||||
<img src={reactLogo} className="logo react" alt="React logo" />
|
||||
</a>
|
||||
</div>
|
||||
<p>Click on the Tauri, Vite, and React logos to learn more.</p>
|
||||
|
||||
<form
|
||||
className="row"
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
greet();
|
||||
}}
|
||||
>
|
||||
<input
|
||||
id="greet-input"
|
||||
onChange={(e) => setName(e.currentTarget.value)}
|
||||
placeholder="Enter a name..."
|
||||
/>
|
||||
<button type="submit">Greet</button>
|
||||
</form>
|
||||
<p>{greetMsg}</p>
|
||||
</main>
|
||||
<BrowserRouter>
|
||||
<Routes>
|
||||
<Route path="/admin" element={<Admin />} />
|
||||
<Route path="/screen" element={<Screen />} />
|
||||
<Route path="*" element={<Navigate to="/screen" replace />} />
|
||||
</Routes>
|
||||
</BrowserRouter>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
|
||||
@@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
|
||||
|
Before Width: | Height: | Size: 4.0 KiB |
@@ -0,0 +1,485 @@
|
||||
import { useState, useEffect, useCallback, useRef } from 'react';
|
||||
import * as api from '../utils/api';
|
||||
import '../styles/admin.css';
|
||||
|
||||
/* ============ SVG Icons ============ */
|
||||
const IconPrev = () => (
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
|
||||
<path d="M11 3L6 8L11 13" stroke="currentColor" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
);
|
||||
const IconPlay = () => (
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="currentColor">
|
||||
<polygon points="5,3 15,9 5,15" />
|
||||
</svg>
|
||||
);
|
||||
const IconPause = () => (
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="currentColor">
|
||||
<rect x="4" y="3" width="3" height="12" rx="1" />
|
||||
<rect x="11" y="3" width="3" height="12" rx="1" />
|
||||
</svg>
|
||||
);
|
||||
const IconNext = () => (
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
|
||||
<path d="M5 3L10 8L5 13" stroke="currentColor" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
/* ============ Badge ============ */
|
||||
function Badge({ type, label }) {
|
||||
const map = { video: 'badge-video', image: 'badge-image', url: 'badge-url', local: 'badge-local' };
|
||||
return <span className={`badge ${map[type] || ''}`}>{label || type}</span>;
|
||||
}
|
||||
|
||||
/* ============ Toast Container ============ */
|
||||
function ToastContainer({ toasts }) {
|
||||
return (
|
||||
<div className="toast-container">
|
||||
{toasts.map(t => (
|
||||
<div key={t.id} className={`toast ${t.type}`}>{t.msg}</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/* ============ Preview Modal ============ */
|
||||
function PreviewModal({ item, onClose, onAddToPlaylist, onDelete }) {
|
||||
const [closing, setClosing] = useState(false);
|
||||
const videoRef = useRef(null);
|
||||
|
||||
const handleClose = useCallback(() => {
|
||||
setClosing(true);
|
||||
if (videoRef.current) {
|
||||
videoRef.current.pause();
|
||||
videoRef.current.removeAttribute('src');
|
||||
}
|
||||
setTimeout(() => {
|
||||
onClose();
|
||||
setClosing(false);
|
||||
}, 200);
|
||||
}, [onClose]);
|
||||
|
||||
useEffect(() => {
|
||||
const onKey = (e) => { if (e.key === 'Escape') handleClose(); };
|
||||
document.addEventListener('keydown', onKey);
|
||||
return () => document.removeEventListener('keydown', onKey);
|
||||
}, [handleClose]);
|
||||
|
||||
if (!item) return null;
|
||||
|
||||
const previewUrl = item.source === 'url' ? item.relative_path : `/file/${item.relative_path}`;
|
||||
const overlayClass = `modal-overlay${closing ? ' closing' : ''}`;
|
||||
|
||||
return (
|
||||
<div className={overlayClass} onClick={(e) => { if (e.target.className.includes('modal-overlay')) handleClose(); }}>
|
||||
<div className="modal-panel" onClick={e => e.stopPropagation()}>
|
||||
<div className="modal-header">
|
||||
<span className="modal-title">{item.name}</span>
|
||||
<button className="modal-close" onClick={handleClose}>×</button>
|
||||
</div>
|
||||
<div className="modal-body">
|
||||
{item.type === 'image' ? (
|
||||
<img src={previewUrl} alt={item.name} />
|
||||
) : (
|
||||
<video ref={videoRef} src={previewUrl} controls autoPlay playsInline />
|
||||
)}
|
||||
</div>
|
||||
<div className="modal-footer">
|
||||
<span className="modal-info">
|
||||
<Badge type={item.source} label={item.source === 'url' ? '远程' : '本地'} />
|
||||
<Badge type={item.type} label={item.type === 'video' ? '视频' : '图片'} />
|
||||
</span>
|
||||
<div className="modal-actions">
|
||||
<button className="btn-accent btn-sm" onClick={() => { onAddToPlaylist(item.relative_path); handleClose(); }}>加入播放</button>
|
||||
<button className="btn-danger btn-sm" onClick={() => { onDelete(item.relative_path); handleClose(); }}>删除</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/* ============ Media Card ============ */
|
||||
function MediaCard({ item, onPreview, onAddToPlaylist, onDelete, showRemove, onRemove }) {
|
||||
const thumbUrl = item.source === 'url' ? item.relative_path : `/file/${item.relative_path}`;
|
||||
|
||||
return (
|
||||
<div className="media-card">
|
||||
{item.type === 'image' ? (
|
||||
<img src={thumbUrl} loading="lazy" className="thumb" alt={item.name} onClick={() => onPreview(item)} />
|
||||
) : (
|
||||
<video src={thumbUrl} preload="metadata" className="thumb" onClick={() => onPreview(item)} />
|
||||
)}
|
||||
<div className="body">
|
||||
<span className="name" title={item.name}>{item.name}</span>
|
||||
<div className="meta-row">
|
||||
<Badge type={item.source} label={item.source === 'url' ? '远程' : '本地'} />
|
||||
<Badge type={item.type} label={item.type === 'video' ? '视频' : '图片'} />
|
||||
</div>
|
||||
<div className="actions">
|
||||
{showRemove ? (
|
||||
<button className="btn-danger btn-sm" onClick={(e) => { e.stopPropagation(); onRemove(item.relative_path); }}>移出</button>
|
||||
) : (
|
||||
<>
|
||||
<button className="btn-accent btn-sm" onClick={(e) => { e.stopPropagation(); onAddToPlaylist(item.relative_path); }}>加入播放</button>
|
||||
<button className="btn-danger btn-sm" onClick={(e) => { e.stopPropagation(); onDelete(item.relative_path); }}>删除</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/* =========================================================
|
||||
Admin Page
|
||||
========================================================= */
|
||||
export default function Admin() {
|
||||
// Auth state
|
||||
const [isLoggedIn, setIsLoggedIn] = useState(() => localStorage.getItem('token') === 'admin_logged');
|
||||
const [username, setUsername] = useState('');
|
||||
const [password, setPassword] = useState('');
|
||||
|
||||
// Data state
|
||||
const [files, setFiles] = useState([]);
|
||||
const [playlistItems, setPlaylistItems] = useState([]);
|
||||
const [playMode, setPlayMode] = useState('sequential');
|
||||
const [imageDuration, setImageDuration] = useState(5);
|
||||
const [volume, setVolume] = useState(80);
|
||||
|
||||
// UI state
|
||||
const [statusText, setStatusText] = useState('等待大屏连接...');
|
||||
const [playState, setPlayState] = useState({ status: 'idle' });
|
||||
const [previewItem, setPreviewItem] = useState(null);
|
||||
const [toasts, setToasts] = useState([]);
|
||||
const toastIdRef = useRef(0);
|
||||
|
||||
// ============ Toast ============
|
||||
const addToast = useCallback((msg, type = 'success') => {
|
||||
const id = ++toastIdRef.current;
|
||||
setToasts(prev => [...prev, { id, msg, type }]);
|
||||
setTimeout(() => {
|
||||
setToasts(prev => prev.filter(t => t.id !== id));
|
||||
}, 2800);
|
||||
}, []);
|
||||
|
||||
// ============ Auth ============
|
||||
const handleLogin = async () => {
|
||||
const data = await api.login(username, password);
|
||||
if (data.success) {
|
||||
localStorage.setItem('token', 'admin_logged');
|
||||
setIsLoggedIn(true);
|
||||
} else {
|
||||
addToast('登录失败，请检查账号密码', 'error');
|
||||
}
|
||||
};
|
||||
|
||||
const handleKeyDown = (e) => { if (e.key === 'Enter') handleLogin(); };
|
||||
|
||||
const handleLogout = () => {
|
||||
localStorage.removeItem('token');
|
||||
setIsLoggedIn(false);
|
||||
};
|
||||
|
||||
// ============ Data Loading ============
|
||||
const loadSettings = useCallback(async () => {
|
||||
try {
|
||||
const d = await api.getSettings();
|
||||
setVolume(d.volume ?? 80);
|
||||
setPlayMode(d.play_mode || 'sequential');
|
||||
setImageDuration(d.image_duration || 5);
|
||||
} catch { /* ignore */ }
|
||||
}, []);
|
||||
|
||||
const loadFiles = useCallback(async () => {
|
||||
try {
|
||||
const data = await api.getMediaFiles();
|
||||
setFiles(data.files || []);
|
||||
} catch { /* ignore */ }
|
||||
}, []);
|
||||
|
||||
const loadPlaylist = useCallback(async () => {
|
||||
try {
|
||||
const data = await api.getPlaylist();
|
||||
setPlaylistItems(data.files || []);
|
||||
setPlayMode(data.play_mode || 'sequential');
|
||||
setImageDuration(data.image_duration ?? 5);
|
||||
setVolume(data.volume ?? 80);
|
||||
} catch { /* ignore */ }
|
||||
}, []);
|
||||
|
||||
const loadAll = useCallback(() => {
|
||||
loadSettings();
|
||||
loadFiles();
|
||||
loadPlaylist();
|
||||
}, [loadSettings, loadFiles, loadPlaylist]);
|
||||
|
||||
useEffect(() => {
|
||||
if (isLoggedIn) loadAll();
|
||||
}, [isLoggedIn, loadAll]);
|
||||
|
||||
// ============ SSE ============
|
||||
useEffect(() => {
|
||||
if (!isLoggedIn) return;
|
||||
const es = new EventSource('/api/events');
|
||||
es.onmessage = (e) => {
|
||||
try {
|
||||
const msg = JSON.parse(e.data);
|
||||
if (msg.action === 'state_update' && msg.state) {
|
||||
setPlayState(msg.state);
|
||||
const s = msg.state;
|
||||
if (s.status === 'idle' || !s.name) {
|
||||
setStatusText('等待大屏连接...');
|
||||
} else if (s.status === 'playing') {
|
||||
setStatusText(`正在播放 — ${s.name}`);
|
||||
} else if (s.status === 'paused') {
|
||||
setStatusText(`已暂停 — ${s.name}`);
|
||||
}
|
||||
}
|
||||
if (msg.action === 'playlist_changed') {
|
||||
loadPlaylist();
|
||||
}
|
||||
if (msg.action === 'settings_changed') {
|
||||
if (msg.volume !== undefined) setVolume(msg.volume);
|
||||
if (msg.play_mode !== undefined) setPlayMode(msg.play_mode);
|
||||
if (msg.image_duration !== undefined) setImageDuration(msg.image_duration);
|
||||
}
|
||||
} catch { /* ignore */ }
|
||||
};
|
||||
return () => es.close();
|
||||
}, [isLoggedIn, loadPlaylist]);
|
||||
|
||||
// ============ Handlers ============
|
||||
const handleUpload = async () => {
|
||||
const inp = document.getElementById('fileInput');
|
||||
const fileList = Array.from(inp.files);
|
||||
if (fileList.length === 0) { addToast('请选择文件', 'error'); return; }
|
||||
await api.uploadFiles(fileList);
|
||||
inp.value = '';
|
||||
addToast('上传完成');
|
||||
loadAll();
|
||||
};
|
||||
|
||||
const handleAddUrl = async () => {
|
||||
const inp = document.getElementById('urlInput');
|
||||
const url = inp.value.trim();
|
||||
if (!url) { addToast('请输入 URL', 'error'); return; }
|
||||
const data = await api.addUrlMedia(url);
|
||||
inp.value = '';
|
||||
addToast(data.duplicate ? 'URL 已存在于媒体库' : '已添加到媒体库');
|
||||
loadAll();
|
||||
};
|
||||
|
||||
const handleSaveSettings = async () => {
|
||||
await api.updateSettings({ play_mode: playMode, image_duration: imageDuration, volume });
|
||||
};
|
||||
|
||||
const handleAddToPlaylist = async (path) => {
|
||||
await api.addToPlaylist(path);
|
||||
addToast('已加入播放列表');
|
||||
loadAll();
|
||||
};
|
||||
|
||||
const handleRemoveFromPlaylist = async (path) => {
|
||||
await api.removeFromPlaylist(path);
|
||||
addToast('已移出播放列表');
|
||||
loadAll();
|
||||
};
|
||||
|
||||
const handleDeleteFile = async (path) => {
|
||||
if (!window.confirm('确定删除该文件？')) return;
|
||||
await api.deleteMedia(path);
|
||||
addToast('已删除');
|
||||
loadAll();
|
||||
};
|
||||
|
||||
const handleSendControl = async (action) => {
|
||||
await api.sendControl(action);
|
||||
};
|
||||
|
||||
// ============ Render ============
|
||||
if (!isLoggedIn) {
|
||||
return (
|
||||
<div className="admin-page">
|
||||
<div className="login-wrapper">
|
||||
<div className="login-card">
|
||||
<div className="login-brand">
|
||||
<div className="icon">
|
||||
<div className="iso-top"></div>
|
||||
<div className="iso-left"></div>
|
||||
<div className="iso-right"></div>
|
||||
<div className="iso-dot"></div>
|
||||
</div>
|
||||
<h2>昆明市大学生创业园</h2>
|
||||
<p>大屏幕轮播控制系统</p>
|
||||
</div>
|
||||
<div className="field">
|
||||
<label>账号</label>
|
||||
<input value={username} onChange={e => setUsername(e.target.value)} placeholder="请输入账号" autoComplete="username" onKeyDown={handleKeyDown} />
|
||||
</div>
|
||||
<div className="field">
|
||||
<label>密码</label>
|
||||
<input type="password" value={password} onChange={e => setPassword(e.target.value)} placeholder="请输入密码" autoComplete="current-password" onKeyDown={handleKeyDown} />
|
||||
</div>
|
||||
<button className="btn-login" onClick={handleLogin}>登 录</button>
|
||||
</div>
|
||||
</div>
|
||||
<ToastContainer toasts={toasts} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const isPlaying = playState.status === 'playing';
|
||||
const isPaused = playState.status === 'paused';
|
||||
const hasFiles = files.length > 0;
|
||||
const hasPlaylist = playlistItems.length > 0;
|
||||
|
||||
return (
|
||||
<div className="admin-page">
|
||||
<div className={`dashboard active`}>
|
||||
{/* Topbar */}
|
||||
<div className="topbar">
|
||||
<div className="topbar-left">
|
||||
<div className="brand-dot"></div>
|
||||
<h1>昆明市大学生创业园</h1>
|
||||
</div>
|
||||
<div className="topbar-center">
|
||||
<span className="status-bar-text">{statusText}</span>
|
||||
</div>
|
||||
<div className="topbar-right">
|
||||
<button className="btn-control" onClick={() => handleSendControl('prev')} title="上一个">
|
||||
<IconPrev />
|
||||
</button>
|
||||
<button className={`btn-control play-btn${isPlaying ? ' active' : ''}`} id="btnPlay" onClick={() => handleSendControl('play')} title="播放">
|
||||
<IconPlay />
|
||||
</button>
|
||||
<button className={`btn-control play-btn${isPaused ? ' active' : ''}`} id="btnPause" onClick={() => handleSendControl('pause')} title="暂停">
|
||||
<IconPause />
|
||||
</button>
|
||||
<button className="btn-control" onClick={() => handleSendControl('next')} title="下一个">
|
||||
<IconNext />
|
||||
</button>
|
||||
<span className="topbar-divider"></span>
|
||||
<button className="btn-logout" onClick={handleLogout}>退出</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Main Content */}
|
||||
<div className="main-grid">
|
||||
{/* Settings Card */}
|
||||
<div className="card">
|
||||
<div className="card-header">
|
||||
<div className="card-icon">{'\u2699'}</div>
|
||||
<h3>播放设置</h3>
|
||||
</div>
|
||||
<div className="form-inline">
|
||||
<div className="form-group">
|
||||
<label>播放模式</label>
|
||||
<select value={playMode} onChange={e => { setPlayMode(e.target.value); setTimeout(handleSaveSettings, 0); }}>
|
||||
<option value="sequential">顺序播放</option>
|
||||
<option value="random">随机播放</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>图片时长（秒）</label>
|
||||
<input type="number" value={imageDuration} min="1" max="300" onChange={e => { setImageDuration(Number(e.target.value)); setTimeout(handleSaveSettings, 0); }} />
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>音量</label>
|
||||
<input type="range" min="0" max="100" value={volume} onChange={e => { setVolume(Number(e.target.value)); setTimeout(handleSaveSettings, 0); }} />
|
||||
<div className="volume-label">{volume}%</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Upload Card */}
|
||||
<div className="card">
|
||||
<div className="card-header">
|
||||
<div className="card-icon">{'\uD83D\uDCE4'}</div>
|
||||
<h3>添加媒体</h3>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>本地上传</label>
|
||||
<div className="form-row">
|
||||
<input type="file" id="fileInput" accept=".mp4,.mkv,.avi,.jpg,.jpeg,.png" multiple />
|
||||
<button className="btn-accent" onClick={handleUpload}>上传</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>远程 URL</label>
|
||||
<div className="form-row">
|
||||
<input type="text" id="urlInput" placeholder="https://example.com/media.mp4" />
|
||||
<button className="btn-accent" onClick={handleAddUrl}>添加</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Media Library */}
|
||||
<div className="card full">
|
||||
<div className="card-header">
|
||||
<div className="card-icon">{'\uD83D\uDCC1'}</div>
|
||||
<h3>媒体库</h3>
|
||||
</div>
|
||||
<div className="media-grid">
|
||||
{!hasFiles ? (
|
||||
<div className="empty-state">
|
||||
<div className="empty-icon">{'\uD83D\uDCF7'}</div>
|
||||
暂无媒体文件<br />请上传或通过 URL 添加
|
||||
</div>
|
||||
) : (
|
||||
files.map((item, i) => (
|
||||
<MediaCard
|
||||
key={`file-${i}`}
|
||||
item={item}
|
||||
onPreview={setPreviewItem}
|
||||
onAddToPlaylist={handleAddToPlaylist}
|
||||
onDelete={handleDeleteFile}
|
||||
/>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Playlist */}
|
||||
<div className="card full">
|
||||
<div className="card-header">
|
||||
<div className="card-icon">{'\u25B6'}</div>
|
||||
<h3>播放列表</h3>
|
||||
</div>
|
||||
<div className="media-grid" id="playlistGrid">
|
||||
{!hasPlaylist ? (
|
||||
<div className="empty-state">
|
||||
<div className="empty-icon">{'\u25B6'}</div>
|
||||
播放列表为空<br />从上方媒体库添加内容
|
||||
</div>
|
||||
) : (
|
||||
playlistItems.map((item, i) => (
|
||||
<MediaCard
|
||||
key={`pl-${i}`}
|
||||
item={item}
|
||||
onPreview={setPreviewItem}
|
||||
onAddToPlaylist={handleAddToPlaylist}
|
||||
onDelete={handleDeleteFile}
|
||||
showRemove
|
||||
onRemove={handleRemoveFromPlaylist}
|
||||
/>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Preview Modal */}
|
||||
<PreviewModal
|
||||
item={previewItem}
|
||||
onClose={() => setPreviewItem(null)}
|
||||
onAddToPlaylist={handleAddToPlaylist}
|
||||
onDelete={handleDeleteFile}
|
||||
/>
|
||||
|
||||
{/* Toast */}
|
||||
<ToastContainer toasts={toasts} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,402 @@
|
||||
import { useState, useEffect, useRef, useCallback } from 'react';
|
||||
import * as api from '../utils/api';
|
||||
import '../styles/screen.css';
|
||||
|
||||
/* ============ Loader ============ */
|
||||
function Loader({ hidden, text }) {
|
||||
return (
|
||||
<div className={`loader${hidden ? ' hidden' : ''}`}>
|
||||
<div className="loader-brand">
|
||||
<div className="mark">
|
||||
<div className="iso-right"></div>
|
||||
<div className="iso-dot"></div>
|
||||
</div>
|
||||
<div className="label">PineSound</div>
|
||||
</div>
|
||||
<div className="loader-ring">
|
||||
<div className="ring"></div>
|
||||
<div className="ring"></div>
|
||||
<div className="ring"></div>
|
||||
</div>
|
||||
<div className="loader-hint" dangerouslySetInnerHTML={{ __html: text }} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/* =========================================================
|
||||
Screen Page
|
||||
========================================================= */
|
||||
export default function Screen() {
|
||||
const [list, setList] = useState([]);
|
||||
const [index, setIndex] = useState(0);
|
||||
const [volume, setVolume] = useState(0.8);
|
||||
const [playMode, setPlayMode] = useState('sequential');
|
||||
const [imageDuration, setImageDuration] = useState(5);
|
||||
const [paused, setPaused] = useState(false);
|
||||
const [soundBlocked, setSoundBlocked] = useState(false);
|
||||
const [loaded, setLoaded] = useState(false);
|
||||
const [loaderText, setLoaderText] = useState('加载播放列表中...');
|
||||
const [showVideo, setShowVideo] = useState(true);
|
||||
const [currentSrc, setCurrentSrc] = useState('');
|
||||
|
||||
const videoRef = useRef(null);
|
||||
const imgRef = useRef(null);
|
||||
const timerRef = useRef(null);
|
||||
|
||||
const getUrl = useCallback((item) => {
|
||||
return item.source === 'url' ? item.relative_path : `/file/${item.relative_path}`;
|
||||
}, []);
|
||||
|
||||
const reportState = useCallback((status) => {
|
||||
const item = list[index] || null;
|
||||
api.updateState({
|
||||
status,
|
||||
index,
|
||||
name: item ? item.name : '',
|
||||
type: item ? item.type : '',
|
||||
}).catch(() => {});
|
||||
}, [list, index]);
|
||||
|
||||
const updateStatusUI = useCallback(() => { }, []); // CSS handles visual feedback
|
||||
|
||||
const play = useCallback(() => {
|
||||
if (timerRef.current) clearTimeout(timerRef.current);
|
||||
if (paused) return;
|
||||
const item = list[index];
|
||||
if (!item) return;
|
||||
const url = getUrl(item);
|
||||
|
||||
if (item.type === 'video') {
|
||||
setShowVideo(true);
|
||||
setCurrentSrc(url);
|
||||
const video = videoRef.current;
|
||||
if (video) {
|
||||
video.style.display = 'block';
|
||||
video.src = url;
|
||||
video.load();
|
||||
video.muted = soundBlocked;
|
||||
const p = video.play();
|
||||
if (p !== undefined) {
|
||||
p.then(() => {
|
||||
reportState('playing');
|
||||
}).catch(() => {
|
||||
setSoundBlocked(true);
|
||||
video.muted = true;
|
||||
video.play().catch(() => {});
|
||||
reportState('playing');
|
||||
});
|
||||
}
|
||||
}
|
||||
} else {
|
||||
// Image
|
||||
setShowVideo(false);
|
||||
setCurrentSrc(url);
|
||||
reportState('playing');
|
||||
timerRef.current = setTimeout(next, imageDuration * 1000);
|
||||
}
|
||||
}, [list, index, paused, getUrl, soundBlocked, imageDuration, reportState]);
|
||||
|
||||
const skip = useCallback((delta) => {
|
||||
if (timerRef.current) clearTimeout(timerRef.current);
|
||||
setIndex(prev => {
|
||||
if (playMode === 'random') {
|
||||
return Math.floor(Math.random() * list.length);
|
||||
}
|
||||
return (prev + delta + list.length) % list.length;
|
||||
});
|
||||
}, [playMode, list.length]);
|
||||
|
||||
const next = useCallback(() => {
|
||||
if (paused) return;
|
||||
if (timerRef.current) clearTimeout(timerRef.current);
|
||||
setIndex(prev => {
|
||||
if (playMode === 'random') {
|
||||
return Math.floor(Math.random() * list.length);
|
||||
}
|
||||
return (prev + 1) % list.length;
|
||||
});
|
||||
}, [paused, playMode, list.length]);
|
||||
|
||||
// Play when index changes
|
||||
useEffect(() => {
|
||||
if (loaded && list.length > 0) {
|
||||
const item = list[index];
|
||||
if (item) {
|
||||
if (item.type === 'video') {
|
||||
setShowVideo(true);
|
||||
setCurrentSrc(getUrl(item));
|
||||
} else {
|
||||
const url = getUrl(item);
|
||||
setShowVideo(false);
|
||||
setCurrentSrc(url);
|
||||
}
|
||||
}
|
||||
}
|
||||
}, [index, loaded]);
|
||||
|
||||
// Separate effect for playback triggered by src changes
|
||||
useEffect(() => {
|
||||
if (!loaded || list.length === 0 || !currentSrc) return;
|
||||
const item = list[index];
|
||||
if (!item) return;
|
||||
|
||||
if (item.type === 'video') {
|
||||
const video = videoRef.current;
|
||||
if (video) {
|
||||
video.style.display = 'block';
|
||||
video.src = currentSrc;
|
||||
video.load();
|
||||
video.muted = soundBlocked;
|
||||
const p = video.play();
|
||||
if (p !== undefined) {
|
||||
p.then(() => reportState('playing'))
|
||||
.catch(() => {
|
||||
setSoundBlocked(true);
|
||||
video.muted = true;
|
||||
video.play().catch(() => {});
|
||||
reportState('playing');
|
||||
});
|
||||
}
|
||||
}
|
||||
} else {
|
||||
if (timerRef.current) clearTimeout(timerRef.current);
|
||||
reportState('playing');
|
||||
timerRef.current = setTimeout(next, imageDuration * 1000);
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [index]);
|
||||
|
||||
// Load playlist on mount
|
||||
useEffect(() => {
|
||||
const load = async () => {
|
||||
try {
|
||||
const data = await api.getPlaylist();
|
||||
const files = data.files || [];
|
||||
const vol = (data.volume || 80) / 100;
|
||||
setList(files);
|
||||
setVolume(vol);
|
||||
setPlayMode(data.play_mode || 'sequential');
|
||||
setImageDuration(data.image_duration || 5);
|
||||
if (videoRef.current) videoRef.current.volume = vol;
|
||||
|
||||
if (files.length === 0) {
|
||||
setLoaderText('播放列表为空，<a href="/admin">前往管理后台添加</a>');
|
||||
return;
|
||||
}
|
||||
setLoaded(true);
|
||||
|
||||
// Try play with sound
|
||||
const video = videoRef.current;
|
||||
if (video) {
|
||||
video.muted = false;
|
||||
const testPlay = video.play();
|
||||
if (testPlay !== undefined) {
|
||||
testPlay.then(() => {
|
||||
setSoundBlocked(false);
|
||||
video.pause();
|
||||
reportState('idle');
|
||||
}).catch(() => {
|
||||
setSoundBlocked(true);
|
||||
video.muted = true;
|
||||
reportState('idle');
|
||||
});
|
||||
}
|
||||
}
|
||||
} catch {/* ignore */}
|
||||
};
|
||||
load();
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, []);
|
||||
|
||||
// Connect SSE
|
||||
useEffect(() => {
|
||||
const es = new EventSource('/api/events');
|
||||
es.onmessage = (e) => {
|
||||
try {
|
||||
const msg = JSON.parse(e.data);
|
||||
switch (msg.action) {
|
||||
case 'pause':
|
||||
setPaused(true);
|
||||
if (timerRef.current) clearTimeout(timerRef.current);
|
||||
if (videoRef.current) videoRef.current.pause();
|
||||
reportState('paused');
|
||||
break;
|
||||
case 'play':
|
||||
setPaused(false);
|
||||
play();
|
||||
reportState('playing');
|
||||
break;
|
||||
case 'next':
|
||||
setPaused(false);
|
||||
skip(1);
|
||||
break;
|
||||
case 'prev':
|
||||
setPaused(false);
|
||||
skip(-1);
|
||||
break;
|
||||
case 'playlist_changed':
|
||||
reloadPlaylist();
|
||||
break;
|
||||
case 'settings_changed':
|
||||
applySettings(msg);
|
||||
break;
|
||||
}
|
||||
} catch {/* ignore */}
|
||||
};
|
||||
return () => es.close();
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [play, skip, reportState]);
|
||||
|
||||
const reloadPlaylist = useCallback(async () => {
|
||||
try {
|
||||
const data = await api.getPlaylist();
|
||||
const newList = data.files || [];
|
||||
const currentItem = list[index] || null;
|
||||
|
||||
if (newList.length === 0) {
|
||||
setList([]);
|
||||
setLoaded(false);
|
||||
setLoaderText('播放列表已清空，<a href="/admin">前往管理后台添加</a>');
|
||||
const video = videoRef.current;
|
||||
if (video) video.pause();
|
||||
return;
|
||||
}
|
||||
|
||||
setLoaded(true);
|
||||
|
||||
let newIndex = -1;
|
||||
if (currentItem) {
|
||||
newIndex = newList.findIndex(item => item.relative_path === currentItem.relative_path);
|
||||
}
|
||||
if (newIndex >= 0) {
|
||||
setList(newList);
|
||||
setIndex(newIndex);
|
||||
} else {
|
||||
setList(newList);
|
||||
setIndex(prev => Math.min(prev, newList.length - 1));
|
||||
}
|
||||
} catch {/* ignore */}
|
||||
}, [list, index]);
|
||||
|
||||
const applySettings = useCallback((msg) => {
|
||||
if (msg.volume !== undefined) {
|
||||
const vol = msg.volume / 100;
|
||||
setVolume(vol);
|
||||
const video = videoRef.current;
|
||||
if (video) {
|
||||
video.volume = vol;
|
||||
if (soundBlocked) {
|
||||
video.muted = false;
|
||||
video.play().then(() => {
|
||||
setSoundBlocked(false);
|
||||
const hint = document.getElementById('soundHint');
|
||||
if (hint) hint.style.display = 'none';
|
||||
}).catch(() => {
|
||||
video.muted = true;
|
||||
video.play().catch(() => {});
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
if (msg.play_mode !== undefined) setPlayMode(msg.play_mode);
|
||||
if (msg.image_duration !== undefined) setImageDuration(msg.image_duration);
|
||||
}, [soundBlocked]);
|
||||
|
||||
const enableSound = useCallback(() => {
|
||||
const video = videoRef.current;
|
||||
if (!video) return;
|
||||
video.muted = false;
|
||||
video.play().then(() => {
|
||||
setSoundBlocked(false);
|
||||
const hint = document.getElementById('soundHint');
|
||||
if (hint) hint.style.display = 'none';
|
||||
}).catch(() => {
|
||||
video.muted = true;
|
||||
video.play().catch(() => {});
|
||||
});
|
||||
}, []);
|
||||
|
||||
// Video ended handler
|
||||
useEffect(() => {
|
||||
const video = videoRef.current;
|
||||
if (!video) return;
|
||||
const handler = () => next();
|
||||
video.addEventListener('ended', handler);
|
||||
return () => video.removeEventListener('ended', handler);
|
||||
}, [next]);
|
||||
|
||||
// Global click for sound unblock
|
||||
useEffect(() => {
|
||||
const handler = () => {
|
||||
if (soundBlocked) enableSound();
|
||||
};
|
||||
document.addEventListener('click', handler);
|
||||
return () => document.removeEventListener('click', handler);
|
||||
}, [soundBlocked, enableSound]);
|
||||
|
||||
// Cleanup timer on unmount
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
if (timerRef.current) clearTimeout(timerRef.current);
|
||||
};
|
||||
}, []);
|
||||
|
||||
const currentItem = list[index] || null;
|
||||
|
||||
return (
|
||||
<div className="screen-page">
|
||||
{/* Perspective Grid */}
|
||||
<div className="perspective-grid"></div>
|
||||
{/* Ambient Orbs */}
|
||||
<div className="ambient-orb orb-1"></div>
|
||||
<div className="ambient-orb orb-2"></div>
|
||||
<div className="ambient-orb orb-3"></div>
|
||||
|
||||
{/* Loader */}
|
||||
<Loader hidden={loaded && list.length > 0} text={loaderText} />
|
||||
|
||||
{/* Media Players */}
|
||||
<video
|
||||
ref={videoRef}
|
||||
id="player"
|
||||
autoPlay
|
||||
playsInline
|
||||
controlsList="nodownload"
|
||||
style={{ display: showVideo && loaded ? 'block' : 'none' }}
|
||||
/>
|
||||
<img
|
||||
ref={imgRef}
|
||||
id="imgPlayer"
|
||||
alt=""
|
||||
src={!showVideo && loaded && currentItem ? getUrl(currentItem) : undefined}
|
||||
style={{ display: !showVideo && loaded ? 'block' : 'none' }}
|
||||
/>
|
||||
|
||||
{/* Corner Info — Now Playing */}
|
||||
<div className={`corner-info${loaded && currentItem ? ' visible' : ''}`}>
|
||||
<div className="ci-dot"></div>
|
||||
<span className="ci-text">{currentItem ? currentItem.name : '就绪'}</span>
|
||||
</div>
|
||||
|
||||
{/* Connection Indicator */}
|
||||
<div className={`conn-indicator${loaded ? ' visible' : ''}`}>
|
||||
<div className="conn-rings">
|
||||
<div className="cr-inner"></div>
|
||||
<div className="cr-outer"></div>
|
||||
</div>
|
||||
<span className="conn-label">Live</span>
|
||||
</div>
|
||||
|
||||
{/* Bottom Status */}
|
||||
<div className={`status-bar${loaded ? ' visible' : ''}`}>
|
||||
<div className={`sb-dot${paused ? ' idle' : ''}`}></div>
|
||||
<span className="sb-text">{currentItem ? `${index + 1} / ${list.length}` : '0 / 0'}</span>
|
||||
</div>
|
||||
|
||||
{/* Sound Hint */}
|
||||
<div id="soundHint" style={{ display: soundBlocked && loaded ? 'block' : 'none' }} onClick={enableSound}>
|
||||
点击启用声音
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,949 @@
|
||||
/* =========================================================
|
||||
Admin Page Theme — 昆明市大学生创业园大屏媒体轮播
|
||||
基于 admin.html CSS 移植
|
||||
========================================================= */
|
||||
.admin-page {
|
||||
--primary: #00BD7D;
|
||||
--primary-hover: #00a36b;
|
||||
--primary-glow: rgba(0, 189, 125, 0.25);
|
||||
--primary-subtle: rgba(0, 189, 125, 0.07);
|
||||
--primary-surface: rgba(0, 189, 125, 0.04);
|
||||
--success: #16A34A;
|
||||
--success-subtle: rgba(22, 163, 74, 0.08);
|
||||
--warning: #D97706;
|
||||
--warning-subtle: rgba(217, 119, 6, 0.08);
|
||||
--danger: #DC2626;
|
||||
--danger-hover: #ef4444;
|
||||
--danger-subtle: rgba(220, 38, 38, 0.08);
|
||||
--surface: #FFFFFF;
|
||||
--text: #111827;
|
||||
--text-secondary: #4b5563;
|
||||
--text-dim: #9ca3af;
|
||||
--text-inverse: #FFFFFF;
|
||||
--border-subtle: rgba(0,0,0,0.06);
|
||||
--border-default: rgba(0,0,0,0.1);
|
||||
--border-strong: rgba(0,0,0,0.16);
|
||||
|
||||
--space-4: 4px;
|
||||
--space-8: 8px;
|
||||
--space-12: 12px;
|
||||
--space-16: 16px;
|
||||
--space-24: 24px;
|
||||
--space-32: 32px;
|
||||
|
||||
--radius-sm: 4px;
|
||||
--radius-md: 8px;
|
||||
|
||||
--transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
--transition-slow: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
|
||||
--shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
|
||||
--shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
|
||||
--shadow-card: 0 1px 3px rgba(0,0,0,0.06), 0 2px 8px rgba(0,0,0,0.04);
|
||||
--shadow-card-hover: 0 4px 16px rgba(0,0,0,0.08), 0 8px 32px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.03);
|
||||
--shadow-lg: 0 8px 24px rgba(0,0,0,0.1), 0 16px 48px rgba(0,0,0,0.08);
|
||||
--shadow-xl: 0 12px 32px rgba(0,0,0,0.12), 0 24px 64px rgba(0,0,0,0.1);
|
||||
|
||||
font-family: "Poppins", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
|
||||
background: #f3f4f6;
|
||||
color: var(--text);
|
||||
min-height: 100vh;
|
||||
line-height: 1.6;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-weight: 400;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* ============ Spatial Background ============ */
|
||||
.admin-page::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
background:
|
||||
radial-gradient(ellipse 55% 40% at 80% 10%, rgba(0, 189, 125, 0.05) 0%, transparent 55%),
|
||||
radial-gradient(ellipse 50% 38% at 18% 6%, rgba(217, 119, 6, 0.04) 0%, transparent 55%),
|
||||
radial-gradient(ellipse 45% 28% at 50% 96%, rgba(0,0,0,0.02) 0%, transparent 50%);
|
||||
}
|
||||
|
||||
.admin-page::after {
|
||||
content: '';
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
opacity: 0.02;
|
||||
background-image:
|
||||
linear-gradient(30deg, rgba(0,0,0,0.15) 1px, transparent 1px),
|
||||
linear-gradient(-30deg, rgba(0,0,0,0.15) 1px, transparent 1px);
|
||||
background-size: 32px 32px;
|
||||
}
|
||||
|
||||
/* ============ Login ============ */
|
||||
.login-wrapper {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
min-height: 100vh;
|
||||
padding: var(--space-24);
|
||||
}
|
||||
|
||||
.login-wrapper::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 700px;
|
||||
height: 700px;
|
||||
background:
|
||||
radial-gradient(circle at 50% 50%, rgba(0, 189, 125, 0.07) 0%, transparent 35%),
|
||||
radial-gradient(circle at 50% 50%, rgba(217, 119, 6, 0.03) 0%, transparent 55%);
|
||||
pointer-events: none;
|
||||
animation: loginAmbient 8s ease-in-out infinite;
|
||||
}
|
||||
@keyframes loginAmbient {
|
||||
0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.7; }
|
||||
50% { transform: translate(-50%, -50%) scale(1.25); opacity: 1; }
|
||||
}
|
||||
|
||||
.login-wrapper::after {
|
||||
content: '';
|
||||
position: fixed;
|
||||
top: 10%;
|
||||
right: 6%;
|
||||
width: 240px;
|
||||
height: 240px;
|
||||
pointer-events: none;
|
||||
opacity: 0.05;
|
||||
background:
|
||||
linear-gradient(60deg, transparent 49%, rgba(0,189,125,0.6) 49.5%, rgba(0,189,125,0.6) 50.5%, transparent 51%),
|
||||
linear-gradient(-60deg, transparent 49%, rgba(0,189,125,0.6) 49.5%, rgba(0,189,125,0.6) 50.5%, transparent 51%),
|
||||
linear-gradient(180deg, transparent 49%, rgba(0,189,125,0.6) 49.5%, rgba(0,189,125,0.6) 50.5%, transparent 51%);
|
||||
background-size: 48px 48px;
|
||||
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
|
||||
}
|
||||
|
||||
.login-card {
|
||||
position: relative;
|
||||
background: var(--surface);
|
||||
border-radius: var(--radius-md);
|
||||
padding: var(--space-32);
|
||||
width: 100%;
|
||||
max-width: 420px;
|
||||
text-align: center;
|
||||
box-shadow:
|
||||
0 20px 60px rgba(0,0,0,0.08),
|
||||
0 0 0 1px rgba(0,0,0,0.04),
|
||||
0 1px 0 rgba(255,255,255,0.6) inset;
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
transform: perspective(800px) rotateX(1deg);
|
||||
transition: transform var(--transition-slow);
|
||||
}
|
||||
.login-card:hover { transform: perspective(800px) rotateX(0deg) translateY(-2px); }
|
||||
|
||||
.login-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: -1px;
|
||||
border-radius: var(--radius-md);
|
||||
padding: 1px;
|
||||
background: linear-gradient(135deg,
|
||||
rgba(0,0,0,0.04) 0%,
|
||||
rgba(0, 189, 125, 0.2) 30%,
|
||||
transparent 55%,
|
||||
rgba(217, 119, 6, 0.12) 80%,
|
||||
rgba(0,0,0,0.04) 100%);
|
||||
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
|
||||
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
|
||||
-webkit-mask-composite: xor;
|
||||
mask-composite: exclude;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.login-brand { margin-bottom: var(--space-32); }
|
||||
.login-brand .icon {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
margin: 0 auto var(--space-16);
|
||||
position: relative;
|
||||
}
|
||||
.login-brand .icon .iso-top {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) rotate(45deg);
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
background: rgba(0, 189, 125, 0.12);
|
||||
border: 1px solid rgba(0, 189, 125, 0.25);
|
||||
border-radius: 4px;
|
||||
}
|
||||
.login-brand .icon .iso-left {
|
||||
position: absolute;
|
||||
bottom: 2px;
|
||||
left: 2px;
|
||||
width: 26px;
|
||||
height: 24px;
|
||||
background: rgba(0,0,0,0.03);
|
||||
border: 1px solid rgba(0,0,0,0.08);
|
||||
border-radius: 4px;
|
||||
transform: skewY(25deg);
|
||||
}
|
||||
.login-brand .icon .iso-right {
|
||||
position: absolute;
|
||||
bottom: 2px;
|
||||
right: 2px;
|
||||
width: 26px;
|
||||
height: 24px;
|
||||
background: rgba(0, 189, 125, 0.15);
|
||||
border: 1px solid rgba(0, 189, 125, 0.22);
|
||||
border-radius: 4px;
|
||||
transform: skewY(-25deg);
|
||||
}
|
||||
.login-brand .icon .iso-dot {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
background: var(--primary);
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 12px rgba(0, 189, 125, 0.35);
|
||||
z-index: 2;
|
||||
}
|
||||
.login-brand h2 {
|
||||
font-family: "Oswald", "PingFang SC", "Hiragino Sans GB", sans-serif;
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
color: var(--text);
|
||||
letter-spacing: 0.02em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.login-brand p {
|
||||
font-family: "Poppins", "PingFang SC", sans-serif;
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
color: var(--text-dim);
|
||||
margin-top: var(--space-4);
|
||||
}
|
||||
|
||||
.login-card .field { margin-bottom: var(--space-16); text-align: left; }
|
||||
.login-card .field label {
|
||||
display: block;
|
||||
font-family: "JetBrains Mono", "SF Mono", "Consolas", monospace;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: var(--space-8);
|
||||
letter-spacing: 0.04em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.login-card .field input {
|
||||
width: 100%;
|
||||
padding: var(--space-12) var(--space-16);
|
||||
background: #f9fafb;
|
||||
border: 1px solid var(--border-default);
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: 15px;
|
||||
font-family: "Poppins", "PingFang SC", sans-serif;
|
||||
font-weight: 400;
|
||||
color: var(--text);
|
||||
transition: all var(--transition);
|
||||
outline: none;
|
||||
}
|
||||
.login-card .field input:focus {
|
||||
border-color: rgba(0, 189, 125, 0.5);
|
||||
box-shadow: 0 0 0 3px rgba(0, 189, 125, 0.08);
|
||||
}
|
||||
.login-card .field input::placeholder { color: var(--text-dim); }
|
||||
.login-card .btn-login {
|
||||
width: 100%;
|
||||
margin-top: var(--space-8);
|
||||
padding: 13px;
|
||||
background: var(--primary);
|
||||
color: var(--text-inverse);
|
||||
border: none;
|
||||
border-radius: var(--radius-sm);
|
||||
font-family: "Oswald", "PingFang SC", sans-serif;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.04em;
|
||||
text-transform: uppercase;
|
||||
cursor: pointer;
|
||||
transition: all var(--transition);
|
||||
box-shadow: 0 4px 16px rgba(0, 189, 125, 0.15);
|
||||
}
|
||||
.login-card .btn-login:hover {
|
||||
background: var(--primary-hover);
|
||||
box-shadow: 0 6px 24px rgba(0, 189, 125, 0.25);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
.login-card .btn-login:active { transform: translateY(0); }
|
||||
|
||||
/* ============ Dashboard Layout ============ */
|
||||
.dashboard { display: none; position: relative; z-index: 1; }
|
||||
.dashboard.active { display: block; }
|
||||
|
||||
/* ============ Topbar ============ */
|
||||
.topbar {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 20;
|
||||
background: rgba(255,255,255,0.84);
|
||||
backdrop-filter: blur(24px) saturate(180%);
|
||||
-webkit-backdrop-filter: blur(24px) saturate(180%);
|
||||
border-bottom: 1px solid var(--border-subtle);
|
||||
padding: 0 var(--space-32);
|
||||
height: 64px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-16);
|
||||
box-shadow:
|
||||
0 1px 0 rgba(255,255,255,0.5) inset,
|
||||
0 2px 16px rgba(0,0,0,0.03);
|
||||
}
|
||||
.topbar-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-12);
|
||||
min-width: 0;
|
||||
}
|
||||
.topbar-left .brand-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: var(--primary);
|
||||
box-shadow: 0 0 10px rgba(0, 189, 125, 0.35);
|
||||
flex-shrink: 0;
|
||||
animation: brandDotPulse 3s ease-in-out infinite;
|
||||
}
|
||||
@keyframes brandDotPulse {
|
||||
0%, 100% { box-shadow: 0 0 8px rgba(0, 189, 125, 0.3); }
|
||||
50% { box-shadow: 0 0 18px rgba(0, 189, 125, 0.5); }
|
||||
}
|
||||
.topbar-left h1 {
|
||||
font-family: "Oswald", "PingFang SC", sans-serif;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: var(--text);
|
||||
white-space: nowrap;
|
||||
letter-spacing: 0.03em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.topbar-center { flex: 1; text-align: center; min-width: 0; }
|
||||
.status-bar-text {
|
||||
font-family: "JetBrains Mono", "SF Mono", "Consolas", monospace;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: var(--text-dim);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: block;
|
||||
max-width: 400px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.topbar-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-4);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* Control buttons */
|
||||
.btn-control {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: var(--radius-md);
|
||||
border: 1px solid var(--border-subtle);
|
||||
background: #f9fafb;
|
||||
color: var(--text-secondary);
|
||||
cursor: pointer;
|
||||
font-size: 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all var(--transition);
|
||||
flex-shrink: 0;
|
||||
box-shadow: var(--shadow-xs);
|
||||
}
|
||||
.btn-control:hover {
|
||||
background: var(--surface);
|
||||
border-color: var(--border-strong);
|
||||
color: var(--text);
|
||||
box-shadow: var(--shadow-sm);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
.btn-control:active { transform: translateY(1px); box-shadow: none; }
|
||||
.btn-control.active {
|
||||
background: var(--primary);
|
||||
border-color: var(--primary);
|
||||
color: var(--text-inverse);
|
||||
box-shadow: 0 0 16px rgba(0, 189, 125, 0.3);
|
||||
}
|
||||
.btn-control.play-btn {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
font-size: 18px;
|
||||
background: var(--surface);
|
||||
border-color: var(--border-default);
|
||||
box-shadow: var(--shadow-card);
|
||||
}
|
||||
.btn-control.play-btn:hover {
|
||||
background: var(--surface);
|
||||
border-color: var(--border-strong);
|
||||
box-shadow: var(--shadow-card-hover);
|
||||
}
|
||||
.btn-control.play-btn.active {
|
||||
background: var(--primary);
|
||||
border-color: var(--primary);
|
||||
color: var(--text-inverse);
|
||||
box-shadow: 0 0 20px rgba(0, 189, 125, 0.35);
|
||||
}
|
||||
.topbar-divider {
|
||||
width: 1px;
|
||||
height: 24px;
|
||||
background: var(--border-subtle);
|
||||
margin: 0 var(--space-4);
|
||||
}
|
||||
.btn-logout {
|
||||
padding: var(--space-8) var(--space-16);
|
||||
font-family: "Poppins", "PingFang SC", sans-serif;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
background: transparent;
|
||||
border: 1px solid var(--border-default);
|
||||
color: var(--text-secondary);
|
||||
border-radius: var(--radius-md);
|
||||
cursor: pointer;
|
||||
transition: all var(--transition);
|
||||
white-space: nowrap;
|
||||
}
|
||||
.btn-logout:hover {
|
||||
background: var(--danger-subtle);
|
||||
border-color: rgba(220, 38, 38, 0.3);
|
||||
color: var(--danger);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
/* ============ Main Grid ============ */
|
||||
.main-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: var(--space-24);
|
||||
padding: var(--space-32);
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* ============ Cards ============ */
|
||||
.card {
|
||||
background: var(--surface);
|
||||
border-radius: var(--radius-md);
|
||||
padding: var(--space-24);
|
||||
border: 1px solid var(--border-subtle);
|
||||
box-shadow: var(--shadow-card);
|
||||
transition: all var(--transition-slow);
|
||||
transform: perspective(1000px) translateZ(0);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.card::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: var(--radius-md);
|
||||
background: linear-gradient(135deg, rgba(255,255,255,0.5) 0%, transparent 50%, rgba(0,0,0,0.01) 100%);
|
||||
pointer-events: none;
|
||||
}
|
||||
.card:hover {
|
||||
border-color: var(--border-default);
|
||||
box-shadow: var(--shadow-card-hover);
|
||||
transform: perspective(1000px) translateZ(4px);
|
||||
}
|
||||
.card.full { grid-column: 1 / -1; }
|
||||
.card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-12);
|
||||
margin-bottom: var(--space-24);
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.card-header .card-icon {
|
||||
font-size: 18px;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--primary-subtle);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
border: 1px solid rgba(0, 189, 125, 0.12);
|
||||
}
|
||||
.card-header h3 {
|
||||
font-family: "Oswald", "PingFang SC", sans-serif;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: var(--text);
|
||||
letter-spacing: 0.02em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
/* ============ Form Elements ============ */
|
||||
input[type="text"],
|
||||
input[type="number"],
|
||||
input[type="password"],
|
||||
select {
|
||||
width: 100%;
|
||||
padding: var(--space-12) var(--space-16);
|
||||
background: #f9fafb;
|
||||
border: 1px solid var(--border-default);
|
||||
border-radius: var(--radius-sm);
|
||||
font-family: "Poppins", "PingFang SC", sans-serif;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: var(--text);
|
||||
transition: all var(--transition);
|
||||
outline: none;
|
||||
}
|
||||
input:focus, select:focus {
|
||||
border-color: rgba(0, 189, 125, 0.5);
|
||||
box-shadow: 0 0 0 3px rgba(0, 189, 125, 0.07);
|
||||
}
|
||||
input::placeholder { color: var(--text-dim); }
|
||||
select {
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%239ca3af' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-position: right var(--space-12) center;
|
||||
padding-right: 36px;
|
||||
}
|
||||
input[type="file"] {
|
||||
font-size: 14px;
|
||||
font-family: "Poppins", "PingFang SC", sans-serif;
|
||||
font-weight: 400;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
input[type="file"]::file-selector-button {
|
||||
background: #f3f4f6;
|
||||
border: 1px solid var(--border-default);
|
||||
border-radius: var(--radius-sm);
|
||||
padding: var(--space-8) var(--space-16);
|
||||
margin-right: var(--space-12);
|
||||
cursor: pointer;
|
||||
font-family: "Poppins", "PingFang SC", sans-serif;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: var(--text);
|
||||
transition: all var(--transition);
|
||||
}
|
||||
input[type="file"]::file-selector-button:hover {
|
||||
background: var(--surface);
|
||||
border-color: var(--border-strong);
|
||||
}
|
||||
input[type="range"] {
|
||||
-webkit-appearance: none;
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
background: rgba(0,0,0,0.1);
|
||||
border-radius: 2px;
|
||||
padding: 0;
|
||||
border: none;
|
||||
}
|
||||
input[type="range"]:focus { box-shadow: none; }
|
||||
input[type="range"]::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: var(--primary);
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
border: 2px solid #fff;
|
||||
box-shadow: 0 1px 4px rgba(0,0,0,0.15), 0 0 8px rgba(0, 189, 125, 0.25);
|
||||
transition: all var(--transition);
|
||||
}
|
||||
input[type="range"]::-webkit-slider-thumb:hover {
|
||||
transform: scale(1.15);
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.2), 0 0 18px rgba(0, 189, 125, 0.35);
|
||||
}
|
||||
|
||||
.form-group { margin-bottom: var(--space-16); position: relative; z-index: 1; }
|
||||
.form-group:last-child { margin-bottom: 0; }
|
||||
.form-group label {
|
||||
display: block;
|
||||
font-family: "JetBrains Mono", "SF Mono", "Consolas", monospace;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: var(--space-8);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
.form-row {
|
||||
display: flex;
|
||||
gap: var(--space-8);
|
||||
align-items: end;
|
||||
}
|
||||
.form-row > :first-child { flex: 1; }
|
||||
.form-row > button { flex: 0 0 auto; }
|
||||
.form-inline {
|
||||
display: flex;
|
||||
gap: var(--space-24);
|
||||
align-items: end;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.form-inline .form-group { flex: 1; margin-bottom: 0; }
|
||||
|
||||
/* ============ Buttons ============ */
|
||||
button { font-family: "Poppins", "PingFang SC", sans-serif; cursor: pointer; transition: all var(--transition); }
|
||||
.btn-primary {
|
||||
padding: var(--space-12) var(--space-24);
|
||||
border-radius: var(--radius-sm);
|
||||
border: none;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
background: var(--text);
|
||||
color: var(--text-inverse);
|
||||
white-space: nowrap;
|
||||
letter-spacing: 0.01em;
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
.btn-primary:hover {
|
||||
background: #1f2937;
|
||||
box-shadow: var(--shadow-card);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
.btn-primary:active { transform: translateY(1px); }
|
||||
.btn-accent {
|
||||
padding: var(--space-12) var(--space-24);
|
||||
border-radius: var(--radius-sm);
|
||||
border: none;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
background: var(--primary);
|
||||
color: var(--text-inverse);
|
||||
white-space: nowrap;
|
||||
letter-spacing: 0.01em;
|
||||
box-shadow: 0 2px 8px rgba(0, 189, 125, 0.2);
|
||||
}
|
||||
.btn-accent:hover {
|
||||
background: var(--primary-hover);
|
||||
box-shadow: 0 4px 16px rgba(0, 189, 125, 0.3);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
.btn-accent:active { transform: translateY(1px); }
|
||||
.btn-danger {
|
||||
padding: var(--space-12) var(--space-24);
|
||||
border-radius: var(--radius-sm);
|
||||
border: none;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
background: var(--danger);
|
||||
color: var(--text-inverse);
|
||||
white-space: nowrap;
|
||||
letter-spacing: 0.01em;
|
||||
box-shadow: 0 2px 8px rgba(220, 38, 38, 0.15);
|
||||
}
|
||||
.btn-danger:hover {
|
||||
background: var(--danger-hover);
|
||||
box-shadow: 0 4px 16px rgba(220, 38, 38, 0.25);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
.btn-sm {
|
||||
padding: var(--space-8) var(--space-12);
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
/* ============ Media Grid ============ */
|
||||
.media-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
|
||||
gap: var(--space-16);
|
||||
}
|
||||
.media-card {
|
||||
background: #f9fafb;
|
||||
border: 1px solid var(--border-subtle);
|
||||
border-radius: var(--radius-md);
|
||||
overflow: hidden;
|
||||
transition: all var(--transition-slow);
|
||||
position: relative;
|
||||
box-shadow: var(--shadow-xs);
|
||||
transform: perspective(800px) translateZ(0);
|
||||
}
|
||||
.media-card:hover {
|
||||
background: var(--surface);
|
||||
border-color: var(--border-strong);
|
||||
box-shadow: var(--shadow-card-hover);
|
||||
transform: perspective(800px) translateZ(8px) translateY(-3px);
|
||||
}
|
||||
.media-card .thumb {
|
||||
width: 100%;
|
||||
height: 108px;
|
||||
object-fit: cover;
|
||||
background: #e5e7eb;
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
}
|
||||
.media-card .thumb-placeholder {
|
||||
width: 100%;
|
||||
height: 108px;
|
||||
background: #f3f4f6;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--text-dim);
|
||||
font-family: "JetBrains Mono", "SF Mono", monospace;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
.media-card .body { padding: var(--space-12); }
|
||||
.media-card .body .name {
|
||||
font-family: "Poppins", "PingFang SC", sans-serif;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: var(--text);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
display: block;
|
||||
}
|
||||
.media-card .body .meta-row {
|
||||
display: flex;
|
||||
gap: var(--space-4);
|
||||
margin-top: var(--space-8);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.media-card .body .actions {
|
||||
display: flex;
|
||||
gap: var(--space-4);
|
||||
margin-top: var(--space-12);
|
||||
}
|
||||
.media-card .body .actions button { flex: 1; }
|
||||
|
||||
.badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
font-family: "JetBrains Mono", "SF Mono", "Consolas", monospace;
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
padding: 2px 8px;
|
||||
border-radius: var(--radius-sm);
|
||||
letter-spacing: 0.04em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.badge-video { background: rgba(0, 189, 125, 0.1); color: #00BD7D; }
|
||||
.badge-image { background: rgba(217, 119, 6, 0.1); color: #b45309; }
|
||||
.badge-url { background: rgba(139, 92, 246, 0.08); color: #7c3aed; }
|
||||
.badge-local { background: rgba(22, 163, 74, 0.1); color: #16A34A; }
|
||||
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: var(--space-32) var(--space-24);
|
||||
color: var(--text-dim);
|
||||
font-family: "Poppins", "PingFang SC", sans-serif;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
.empty-state .empty-icon { font-size: 40px; margin-bottom: var(--space-12); opacity: 0.35; }
|
||||
|
||||
/* ============ Toast ============ */
|
||||
.toast-container {
|
||||
position: fixed;
|
||||
top: var(--space-24);
|
||||
right: var(--space-24);
|
||||
z-index: 9999;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-8);
|
||||
pointer-events: none;
|
||||
}
|
||||
.toast {
|
||||
padding: var(--space-12) var(--space-24);
|
||||
border-radius: var(--radius-md);
|
||||
font-family: "Poppins", "PingFang SC", sans-serif;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
pointer-events: auto;
|
||||
backdrop-filter: blur(24px) saturate(180%);
|
||||
-webkit-backdrop-filter: blur(24px) saturate(180%);
|
||||
animation: toastIn 0.35s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
max-width: 360px;
|
||||
border: 1px solid;
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
.toast.success { background: rgba(22, 163, 74, 0.1); color: #166534; border-color: rgba(22, 163, 74, 0.2); }
|
||||
.toast.error { background: rgba(220, 38, 38, 0.08); color: #991b1b; border-color: rgba(220, 38, 38, 0.18); }
|
||||
@keyframes toastIn {
|
||||
from { opacity: 0; transform: translateX(40px) scale(0.92); }
|
||||
to { opacity: 1; transform: translateX(0) scale(1); }
|
||||
}
|
||||
|
||||
/* ============ Preview Modal ============ */
|
||||
.modal-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 1000;
|
||||
background: rgba(0,0,0,0.45);
|
||||
backdrop-filter: blur(8px);
|
||||
-webkit-backdrop-filter: blur(8px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: var(--space-32);
|
||||
animation: overlayIn 0.25s ease;
|
||||
}
|
||||
@keyframes overlayIn { from { opacity: 0; } to { opacity: 1; } }
|
||||
.modal-overlay.closing { animation: overlayOut 0.2s ease forwards; }
|
||||
@keyframes overlayOut { from { opacity: 1; } to { opacity: 0; } }
|
||||
.modal-panel {
|
||||
position: relative;
|
||||
max-width: 90vw;
|
||||
max-height: 85vh;
|
||||
width: auto;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border-subtle);
|
||||
border-radius: var(--radius-md);
|
||||
overflow: hidden;
|
||||
box-shadow: var(--shadow-xl);
|
||||
animation: panelIn 0.35s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
transform: perspective(1000px) rotateX(0.5deg);
|
||||
}
|
||||
@keyframes panelIn { from { opacity: 0; transform: perspective(1000px) rotateX(2deg) translateY(20px) scale(0.94); } to { opacity: 1; transform: perspective(1000px) rotateX(0.5deg) translateY(0) scale(1); } }
|
||||
.modal-overlay.closing .modal-panel { animation: panelOut 0.2s ease forwards; }
|
||||
@keyframes panelOut { from { opacity: 1; transform: perspective(1000px) rotateX(0.5deg) translateY(0) scale(1); } to { opacity: 0; transform: perspective(1000px) rotateX(2deg) translateY(20px) scale(0.94); } }
|
||||
.modal-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: var(--space-16) var(--space-24);
|
||||
border-bottom: 1px solid var(--border-subtle);
|
||||
background: #f9fafb;
|
||||
}
|
||||
.modal-header .modal-title {
|
||||
font-family: "Oswald", "PingFang SC", sans-serif;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--text);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
margin-right: var(--space-12);
|
||||
letter-spacing: 0.02em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.modal-close {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: var(--radius-md);
|
||||
border: 1px solid var(--border-subtle);
|
||||
background: transparent;
|
||||
color: var(--text-secondary);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
font-size: 16px;
|
||||
transition: all var(--transition);
|
||||
}
|
||||
.modal-close:hover {
|
||||
background: var(--danger-subtle);
|
||||
border-color: rgba(220, 38, 38, 0.3);
|
||||
color: var(--danger);
|
||||
}
|
||||
.modal-body {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: var(--space-24);
|
||||
background: #f3f4f6;
|
||||
min-height: 200px;
|
||||
max-height: 65vh;
|
||||
overflow: auto;
|
||||
}
|
||||
.modal-body img { max-width: 100%; max-height: 60vh; object-fit: contain; border-radius: var(--radius-sm); }
|
||||
.modal-body video { max-width: 100%; max-height: 60vh; border-radius: var(--radius-sm); outline: none; }
|
||||
.modal-footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: var(--space-12) var(--space-24);
|
||||
border-top: 1px solid var(--border-subtle);
|
||||
background: #f9fafb;
|
||||
}
|
||||
.modal-info {
|
||||
font-family: "JetBrains Mono", "SF Mono", "Consolas", monospace;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
color: var(--text-dim);
|
||||
display: flex;
|
||||
gap: var(--space-4);
|
||||
align-items: center;
|
||||
}
|
||||
.modal-actions { display: flex; gap: var(--space-8); }
|
||||
|
||||
/* ============ Utilities ============ */
|
||||
.hidden { display: none !important; }
|
||||
.volume-label {
|
||||
font-family: "JetBrains Mono", "SF Mono", "Consolas", monospace;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: var(--text-dim);
|
||||
text-align: right;
|
||||
margin-top: var(--space-4);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
/* ============ Responsive ============ */
|
||||
@media (max-width: 768px) {
|
||||
.login-card { padding: var(--space-24) var(--space-16) var(--space-32); margin: var(--space-12); max-width: none; }
|
||||
.login-brand h2 { font-size: 20px; }
|
||||
.topbar { padding: 0 var(--space-16); height: 56px; gap: var(--space-8); }
|
||||
.topbar-left h1 { font-size: 15px; }
|
||||
.topbar-center { display: none; }
|
||||
.btn-control { width: 36px; height: 36px; font-size: 14px; }
|
||||
.btn-control.play-btn { width: 42px; height: 42px; font-size: 16px; }
|
||||
.btn-logout { padding: var(--space-4) var(--space-12); font-size: 12px; }
|
||||
.topbar-divider { display: none; }
|
||||
.main-grid { grid-template-columns: 1fr; gap: var(--space-16); padding: var(--space-16); }
|
||||
.card { padding: var(--space-16); }
|
||||
.card.full { grid-column: 1; }
|
||||
.form-inline { flex-direction: column; gap: var(--space-16); }
|
||||
.media-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-8); }
|
||||
.media-card .thumb { height: 88px; }
|
||||
.media-card .body { padding: var(--space-8); }
|
||||
.media-card .body .name { font-size: 12px; }
|
||||
.media-card .body .actions button { font-size: 11px; padding: var(--space-4) var(--space-8); }
|
||||
.toast-container { top: var(--space-12); right: var(--space-12); left: var(--space-12); }
|
||||
.toast { max-width: none; font-size: 12px; }
|
||||
.btn-primary, .btn-accent, .btn-danger { padding: var(--space-12) var(--space-16); font-size: 12px; }
|
||||
.modal-overlay { padding: var(--space-16); }
|
||||
.modal-panel { max-width: 100%; max-height: 90vh; }
|
||||
.modal-body { padding: var(--space-12); max-height: 55vh; }
|
||||
.modal-body img, .modal-body video { max-height: 50vh; }
|
||||
.modal-header { padding: var(--space-12) var(--space-16); }
|
||||
.modal-footer { padding: var(--space-8) var(--space-16); }
|
||||
}
|
||||
|
||||
@media (max-width: 400px) {
|
||||
.topbar-left h1 { font-size: 13px; }
|
||||
.topbar-right { gap: 2px; }
|
||||
.btn-control { width: 32px; height: 32px; font-size: 12px; }
|
||||
.btn-control.play-btn { width: 38px; height: 38px; font-size: 14px; }
|
||||
.media-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
|
||||
}
|
||||
@@ -0,0 +1,431 @@
|
||||
/* =========================================================
|
||||
Screen Page Theme — 大屏媒体轮播
|
||||
基于 screen.html CSS 移植
|
||||
========================================================= */
|
||||
.screen-page {
|
||||
--space-deep: #060d1a;
|
||||
--space-mid: #0b1530;
|
||||
--surface-glass: rgba(255,255,255,0.04);
|
||||
--surface-glass-warm: rgba(255,248,240,0.05);
|
||||
--text-dim: rgba(255,255,255,0.38);
|
||||
--text-soft: rgba(255,255,255,0.55);
|
||||
--text-bright: rgba(255,255,255,0.88);
|
||||
--accent-cyan: #06b6d4;
|
||||
--accent-warm: #f59e0b;
|
||||
--accent-rose: #f472b6;
|
||||
--glow-cyan: rgba(6, 182, 212, 0.25);
|
||||
--glow-warm: rgba(245, 158, 11, 0.2);
|
||||
--glow-rose: rgba(244, 114, 182, 0.15);
|
||||
|
||||
background: var(--space-deep);
|
||||
color: #fff;
|
||||
font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
|
||||
overflow: hidden;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
min-height: 100vh;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* ============ Spatial Depth Layers ============ */
|
||||
|
||||
/* Layer 0 — Deep space background */
|
||||
.screen-page::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 0;
|
||||
background:
|
||||
radial-gradient(ellipse 60% 50% at 75% 25%, rgba(245, 158, 11, 0.07) 0%, transparent 60%),
|
||||
radial-gradient(ellipse 50% 45% at 20% 20%, rgba(6, 182, 212, 0.05) 0%, transparent 55%),
|
||||
radial-gradient(ellipse 40% 35% at 15% 85%, rgba(244, 114, 182, 0.04) 0%, transparent 50%),
|
||||
radial-gradient(ellipse 80% 80% at 50% 50%, rgba(6, 13, 26, 0) 0%, var(--space-deep) 100%);
|
||||
}
|
||||
|
||||
/* Layer 1 — Perspective grid */
|
||||
.perspective-grid {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 1;
|
||||
pointer-events: none;
|
||||
opacity: 0.06;
|
||||
background-image:
|
||||
repeating-linear-gradient(
|
||||
to bottom,
|
||||
transparent,
|
||||
transparent calc(2px + 0.5vh),
|
||||
rgba(255,255,255,0.3) calc(2px + 0.5vh),
|
||||
rgba(255,255,255,0.3) calc(2.5px + 0.5vh)
|
||||
),
|
||||
repeating-linear-gradient(
|
||||
to right,
|
||||
transparent,
|
||||
transparent calc(2px + 0.5vw),
|
||||
rgba(255,255,255,0.3) calc(2px + 0.5vw),
|
||||
rgba(255,255,255,0.3) calc(2.5px + 0.5vw)
|
||||
);
|
||||
mask-image: radial-gradient(ellipse 60% 80% at 50% 50%, transparent 0%, rgba(0,0,0,0.4) 40%, rgba(0,0,0,0.15) 70%, transparent 100%);
|
||||
-webkit-mask-image: radial-gradient(ellipse 60% 80% at 50% 50%, transparent 0%, rgba(0,0,0,0.4) 40%, rgba(0,0,0,0.15) 70%, transparent 100%);
|
||||
}
|
||||
|
||||
/* Layer 2 — Ambient orbs */
|
||||
.ambient-orb {
|
||||
position: fixed;
|
||||
border-radius: 50%;
|
||||
pointer-events: none;
|
||||
z-index: 2;
|
||||
filter: blur(80px);
|
||||
animation: orbDrift 12s ease-in-out infinite;
|
||||
}
|
||||
.ambient-orb.orb-1 {
|
||||
width: 400px; height: 400px;
|
||||
top: -100px; right: -80px;
|
||||
background: rgba(6, 182, 212, 0.06);
|
||||
animation-delay: 0s;
|
||||
}
|
||||
.ambient-orb.orb-2 {
|
||||
width: 350px; height: 350px;
|
||||
bottom: -120px; left: -60px;
|
||||
background: rgba(245, 158, 11, 0.05);
|
||||
animation-delay: -4s;
|
||||
}
|
||||
.ambient-orb.orb-3 {
|
||||
width: 250px; height: 250px;
|
||||
top: 50%; left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
background: rgba(244, 114, 182, 0.03);
|
||||
animation-delay: -8s;
|
||||
}
|
||||
@keyframes orbDrift {
|
||||
0%, 100% { transform: translate(0, 0) scale(1); }
|
||||
25% { transform: translate(30px, -20px) scale(1.08); }
|
||||
50% { transform: translate(-15px, 25px) scale(0.94); }
|
||||
75% { transform: translate(-25px, -10px) scale(1.04); }
|
||||
}
|
||||
|
||||
/* Layer 3 — Vignette */
|
||||
.screen-page::after {
|
||||
content: '';
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
z-index: 50;
|
||||
background:
|
||||
radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(6, 13, 26, 0.55) 90%, rgba(4, 8, 16, 0.8) 100%);
|
||||
}
|
||||
|
||||
/* ============ Media Players ============ */
|
||||
#player {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
object-fit: contain;
|
||||
background: transparent;
|
||||
z-index: 3;
|
||||
}
|
||||
#imgPlayer {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
object-fit: contain;
|
||||
background: transparent;
|
||||
z-index: 3;
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* ============ Loader ============ */
|
||||
.loader {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 100;
|
||||
background: var(--space-deep);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 48px;
|
||||
transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.8s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
.loader.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
|
||||
|
||||
.loader-brand {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
}
|
||||
.loader-brand .mark {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
position: relative;
|
||||
}
|
||||
.loader-brand .mark::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) rotate(45deg);
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
background: rgba(255,255,255,0.06);
|
||||
border: 1px solid rgba(255,255,255,0.12);
|
||||
border-radius: 4px;
|
||||
}
|
||||
.loader-brand .mark::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 18px;
|
||||
left: 4px;
|
||||
width: 24px;
|
||||
height: 28px;
|
||||
background: rgba(255,255,255,0.03);
|
||||
border: 1px solid rgba(255,255,255,0.08);
|
||||
border-radius: 3px;
|
||||
transform: skewY(25deg);
|
||||
}
|
||||
.loader-brand .mark .iso-right {
|
||||
position: absolute;
|
||||
top: 18px;
|
||||
right: 4px;
|
||||
width: 24px;
|
||||
height: 28px;
|
||||
background: rgba(6, 182, 212, 0.08);
|
||||
border: 1px solid rgba(6, 182, 212, 0.15);
|
||||
border-radius: 3px;
|
||||
transform: skewY(-25deg);
|
||||
}
|
||||
.loader-brand .mark .iso-dot {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: var(--accent-cyan);
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 16px var(--glow-cyan), 0 0 32px rgba(6, 182, 212, 0.15);
|
||||
animation: isoPulse 2.4s ease-in-out infinite;
|
||||
z-index: 2;
|
||||
}
|
||||
@keyframes isoPulse {
|
||||
0%, 100% { opacity: 0.5; box-shadow: 0 0 12px var(--glow-cyan); }
|
||||
50% { opacity: 1; box-shadow: 0 0 24px var(--glow-cyan), 0 0 48px rgba(6, 182, 212, 0.2); }
|
||||
}
|
||||
.loader-brand .label {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.4em;
|
||||
color: rgba(255,255,255,0.35);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.loader-ring {
|
||||
position: relative;
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
perspective: 200px;
|
||||
}
|
||||
.loader-ring .ring {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
border: 1.5px solid transparent;
|
||||
}
|
||||
.loader-ring .ring:nth-child(1) {
|
||||
inset: 0;
|
||||
border-top-color: rgba(6, 182, 212, 0.5);
|
||||
border-right-color: rgba(6, 182, 212, 0.2);
|
||||
animation: spin3d 1.4s linear infinite;
|
||||
box-shadow: 0 0 20px rgba(6, 182, 212, 0.1);
|
||||
}
|
||||
.loader-ring .ring:nth-child(2) {
|
||||
inset: 8px;
|
||||
border-bottom-color: rgba(245, 158, 11, 0.35);
|
||||
border-left-color: rgba(245, 158, 11, 0.12);
|
||||
animation: spin3d 2s linear infinite reverse;
|
||||
transform: rotateX(30deg);
|
||||
}
|
||||
.loader-ring .ring:nth-child(3) {
|
||||
inset: 16px;
|
||||
border-top-color: rgba(244, 114, 182, 0.25);
|
||||
border-right-color: rgba(244, 114, 182, 0.08);
|
||||
animation: spin3d 2.6s linear infinite;
|
||||
transform: rotateX(-25deg);
|
||||
}
|
||||
@keyframes spin3d { to { transform: rotate(360deg); } }
|
||||
|
||||
.loader-hint {
|
||||
font-size: 13px;
|
||||
color: var(--text-dim);
|
||||
letter-spacing: 0.15em;
|
||||
}
|
||||
.loader-hint a {
|
||||
color: rgba(255,255,255,0.6);
|
||||
text-decoration: none;
|
||||
border-bottom: 1px solid rgba(255,255,255,0.15);
|
||||
padding-bottom: 2px;
|
||||
transition: color 0.3s, border-color 0.3s;
|
||||
}
|
||||
.loader-hint a:hover {
|
||||
color: rgba(255,255,255,0.9);
|
||||
border-color: rgba(255,255,255,0.4);
|
||||
}
|
||||
|
||||
/* ============ Sound Hint ============ */
|
||||
#soundHint {
|
||||
position: fixed;
|
||||
bottom: 48px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
z-index: 100;
|
||||
background: rgba(255,255,255,0.05);
|
||||
backdrop-filter: blur(24px) saturate(180%);
|
||||
-webkit-backdrop-filter: blur(24px) saturate(180%);
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
border-bottom: 1px solid rgba(255,255,255,0.04);
|
||||
color: rgba(255,255,255,0.8);
|
||||
padding: 14px 32px;
|
||||
border-radius: 40px;
|
||||
font-size: 14px;
|
||||
font-weight: 450;
|
||||
letter-spacing: 0.05em;
|
||||
cursor: pointer;
|
||||
display: none;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
box-shadow:
|
||||
0 4px 24px rgba(0,0,0,0.3),
|
||||
0 0 0 1px rgba(255,255,255,0.03) inset,
|
||||
0 1px 0 rgba(255,255,255,0.04) inset;
|
||||
animation: hintFloat 4s ease-in-out infinite;
|
||||
}
|
||||
#soundHint:hover {
|
||||
background: rgba(255,255,255,0.08);
|
||||
border-color: rgba(255,255,255,0.18);
|
||||
box-shadow:
|
||||
0 8px 32px rgba(0,0,0,0.4),
|
||||
0 0 0 1px rgba(255,255,255,0.05) inset,
|
||||
0 1px 0 rgba(255,255,255,0.06) inset,
|
||||
0 0 40px rgba(6, 182, 212, 0.08);
|
||||
transform: translateX(-50%) translateY(-2px);
|
||||
}
|
||||
@keyframes hintFloat {
|
||||
0%, 100% { box-shadow: 0 4px 24px rgba(0,0,0,0.3), 0 0 0 0 rgba(6, 182, 212, 0); }
|
||||
50% { box-shadow: 0 4px 24px rgba(0,0,0,0.3), 0 0 32px 2px rgba(6, 182, 212, 0.06); }
|
||||
}
|
||||
|
||||
/* ============ Status Elements ============ */
|
||||
.corner-info {
|
||||
position: fixed;
|
||||
top: 28px;
|
||||
left: 28px;
|
||||
z-index: 100;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
background: rgba(255,255,255,0.03);
|
||||
backdrop-filter: blur(16px);
|
||||
-webkit-backdrop-filter: blur(16px);
|
||||
border: 1px solid rgba(255,255,255,0.06);
|
||||
border-radius: 12px;
|
||||
padding: 8px 16px;
|
||||
opacity: 0;
|
||||
transition: opacity 0.6s ease;
|
||||
box-shadow:
|
||||
0 2px 12px rgba(0,0,0,0.2),
|
||||
0 0 0 1px rgba(255,255,255,0.02) inset;
|
||||
pointer-events: none;
|
||||
}
|
||||
.corner-info.visible { opacity: 1; }
|
||||
.corner-info .ci-dot {
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
border-radius: 50%;
|
||||
background: var(--accent-cyan);
|
||||
box-shadow: 0 0 10px var(--glow-cyan);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.corner-info .ci-text {
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
color: var(--text-soft);
|
||||
letter-spacing: 0.04em;
|
||||
white-space: nowrap;
|
||||
max-width: 300px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.conn-indicator {
|
||||
position: fixed;
|
||||
top: 28px;
|
||||
right: 28px;
|
||||
z-index: 100;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
opacity: 0;
|
||||
transition: opacity 0.6s ease;
|
||||
pointer-events: none;
|
||||
}
|
||||
.conn-indicator.visible { opacity: 1; }
|
||||
.conn-rings { position: relative; width: 8px; height: 8px; }
|
||||
.conn-rings .cr-inner {
|
||||
position: absolute;
|
||||
inset: 1px;
|
||||
border-radius: 50%;
|
||||
background: rgba(52, 211, 153, 0.6);
|
||||
box-shadow: 0 0 6px rgba(52, 211, 153, 0.3);
|
||||
transition: all 0.6s ease;
|
||||
}
|
||||
.conn-rings .cr-outer {
|
||||
position: absolute;
|
||||
inset: -3px;
|
||||
border-radius: 50%;
|
||||
border: 1px solid rgba(52, 211, 153, 0.2);
|
||||
animation: connPulse 2.5s ease-in-out infinite;
|
||||
}
|
||||
@keyframes connPulse {
|
||||
0%, 100% { transform: scale(1); opacity: 0.3; }
|
||||
50% { transform: scale(1.6); opacity: 0; }
|
||||
}
|
||||
.conn-label { font-size: 10px; font-weight: 500; color: var(--text-dim); letter-spacing: 0.06em; text-transform: uppercase; }
|
||||
|
||||
.status-bar {
|
||||
position: fixed;
|
||||
bottom: 28px;
|
||||
right: 28px;
|
||||
z-index: 100;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
background: rgba(255,255,255,0.03);
|
||||
backdrop-filter: blur(16px);
|
||||
-webkit-backdrop-filter: blur(16px);
|
||||
border: 1px solid rgba(255,255,255,0.05);
|
||||
border-radius: 10px;
|
||||
padding: 6px 14px;
|
||||
opacity: 0;
|
||||
transition: opacity 0.6s ease;
|
||||
box-shadow: 0 2px 10px rgba(0,0,0,0.15);
|
||||
pointer-events: none;
|
||||
}
|
||||
.status-bar.visible { opacity: 1; }
|
||||
.status-bar .sb-dot {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
border-radius: 50%;
|
||||
background: var(--accent-warm);
|
||||
box-shadow: 0 0 8px var(--glow-warm);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.status-bar .sb-dot.idle { background: rgba(255,255,255,0.25); box-shadow: none; }
|
||||
.status-bar .sb-text {
|
||||
font-size: 10px;
|
||||
font-weight: 500;
|
||||
color: var(--text-dim);
|
||||
letter-spacing: 0.04em;
|
||||
font-variant-numeric: tabular-nums;
|
||||
font-family: "SF Mono", "JetBrains Mono", "Consolas", monospace;
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
/* ============ Base Reset ============ */
|
||||
*, *::before, *::after {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Admin and Screen pages define their own :root variables */
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,830 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>昆明市大学生创业园-大屏媒体轮播</title>
|
||||
<style>
|
||||
:root {
|
||||
--space-deep: #060d1a;
|
||||
--space-mid: #0b1530;
|
||||
--surface-glass: rgba(255,255,255,0.04);
|
||||
--surface-glass-warm: rgba(255,248,240,0.05);
|
||||
--text-dim: rgba(255,255,255,0.38);
|
||||
--text-soft: rgba(255,255,255,0.55);
|
||||
--text-bright: rgba(255,255,255,0.88);
|
||||
--accent-cyan: #06b6d4;
|
||||
--accent-warm: #f59e0b;
|
||||
--accent-rose: #f472b6;
|
||||
--glow-cyan: rgba(6, 182, 212, 0.25);
|
||||
--glow-warm: rgba(245, 158, 11, 0.2);
|
||||
--glow-rose: rgba(244, 114, 182, 0.15);
|
||||
}
|
||||
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
|
||||
body {
|
||||
background: var(--space-deep);
|
||||
color: #fff;
|
||||
font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
|
||||
overflow: hidden;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
}
|
||||
|
||||
/* ============ Spatial Depth Layers ============ */
|
||||
|
||||
/* Layer 0 — Deep space background with warm nebula */
|
||||
body::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 0;
|
||||
background:
|
||||
/* Warm nebula — upper right */
|
||||
radial-gradient(ellipse 60% 50% at 75% 25%, rgba(245, 158, 11, 0.07) 0%, transparent 60%),
|
||||
/* Cyan nebula — upper left */
|
||||
radial-gradient(ellipse 50% 45% at 20% 20%, rgba(6, 182, 212, 0.05) 0%, transparent 55%),
|
||||
/* Rose accent — lower left */
|
||||
radial-gradient(ellipse 40% 35% at 15% 85%, rgba(244, 114, 182, 0.04) 0%, transparent 50%),
|
||||
/* Deep center vanish */
|
||||
radial-gradient(ellipse 80% 80% at 50% 50%, rgba(6, 13, 26, 0) 0%, var(--space-deep) 100%);
|
||||
}
|
||||
|
||||
/* Layer 1 — Perspective grid (vanishing point at center) */
|
||||
.perspective-grid {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 1;
|
||||
pointer-events: none;
|
||||
opacity: 0.06;
|
||||
background-image:
|
||||
/* Horizontal lines — perspective spacing */
|
||||
repeating-linear-gradient(
|
||||
to bottom,
|
||||
transparent,
|
||||
transparent calc(2px + 0.5vh),
|
||||
rgba(255,255,255,0.3) calc(2px + 0.5vh),
|
||||
rgba(255,255,255,0.3) calc(2.5px + 0.5vh)
|
||||
),
|
||||
/* Vertical lines — perspective spacing */
|
||||
repeating-linear-gradient(
|
||||
to right,
|
||||
transparent,
|
||||
transparent calc(2px + 0.5vw),
|
||||
rgba(255,255,255,0.3) calc(2px + 0.5vw),
|
||||
rgba(255,255,255,0.3) calc(2.5px + 0.5vw)
|
||||
);
|
||||
mask-image: radial-gradient(ellipse 60% 80% at 50% 50%, transparent 0%, rgba(0,0,0,0.4) 40%, rgba(0,0,0,0.15) 70%, transparent 100%);
|
||||
-webkit-mask-image: radial-gradient(ellipse 60% 80% at 50% 50%, transparent 0%, rgba(0,0,0,0.4) 40%, rgba(0,0,0,0.15) 70%, transparent 100%);
|
||||
}
|
||||
|
||||
/* Layer 2 — Floating ambient orbs */
|
||||
.ambient-orb {
|
||||
position: fixed;
|
||||
border-radius: 50%;
|
||||
pointer-events: none;
|
||||
z-index: 2;
|
||||
filter: blur(80px);
|
||||
animation: orbDrift 12s ease-in-out infinite;
|
||||
}
|
||||
.ambient-orb.orb-1 {
|
||||
width: 400px; height: 400px;
|
||||
top: -100px; right: -80px;
|
||||
background: rgba(6, 182, 212, 0.06);
|
||||
animation-delay: 0s;
|
||||
}
|
||||
.ambient-orb.orb-2 {
|
||||
width: 350px; height: 350px;
|
||||
bottom: -120px; left: -60px;
|
||||
background: rgba(245, 158, 11, 0.05);
|
||||
animation-delay: -4s;
|
||||
}
|
||||
.ambient-orb.orb-3 {
|
||||
width: 250px; height: 250px;
|
||||
top: 50%; left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
background: rgba(244, 114, 182, 0.03);
|
||||
animation-delay: -8s;
|
||||
}
|
||||
@keyframes orbDrift {
|
||||
0%, 100% { transform: translate(0, 0) scale(1); }
|
||||
25% { transform: translate(30px, -20px) scale(1.08); }
|
||||
50% { transform: translate(-15px, 25px) scale(0.94); }
|
||||
75% { transform: translate(-25px, -10px) scale(1.04); }
|
||||
}
|
||||
|
||||
/* Layer 3 — Atmospheric vignette (warm) */
|
||||
body::after {
|
||||
content: '';
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
z-index: 50;
|
||||
background:
|
||||
radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(6, 13, 26, 0.55) 90%, rgba(4, 8, 16, 0.8) 100%);
|
||||
}
|
||||
|
||||
/* ============ Media Elements ============ */
|
||||
#player {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
object-fit: contain;
|
||||
background: transparent;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
#imgPlayer {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
object-fit: contain;
|
||||
background: transparent;
|
||||
z-index: 3;
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* ============ Loader — 3D Depth ============ */
|
||||
.loader {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 100;
|
||||
background: var(--space-deep);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 48px;
|
||||
transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.8s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
.loader.hidden {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Brand mark — isometric cube illusion */
|
||||
.loader-brand {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
}
|
||||
.loader-brand .mark {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
position: relative;
|
||||
}
|
||||
/* Isometric top face */
|
||||
.loader-brand .mark::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) rotate(45deg);
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
background: rgba(255,255,255,0.06);
|
||||
border: 1px solid rgba(255,255,255,0.12);
|
||||
border-radius: 4px;
|
||||
}
|
||||
/* Isometric left face */
|
||||
.loader-brand .mark::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 18px;
|
||||
left: 4px;
|
||||
width: 24px;
|
||||
height: 28px;
|
||||
background: rgba(255,255,255,0.03);
|
||||
border: 1px solid rgba(255,255,255,0.08);
|
||||
border-radius: 3px;
|
||||
transform: skewY(25deg);
|
||||
}
|
||||
/* Isometric right face */
|
||||
.loader-brand .mark .iso-right {
|
||||
position: absolute;
|
||||
top: 18px;
|
||||
right: 4px;
|
||||
width: 24px;
|
||||
height: 28px;
|
||||
background: rgba(6, 182, 212, 0.08);
|
||||
border: 1px solid rgba(6, 182, 212, 0.15);
|
||||
border-radius: 3px;
|
||||
transform: skewY(-25deg);
|
||||
}
|
||||
/* Center glow dot */
|
||||
.loader-brand .mark .iso-dot {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: var(--accent-cyan);
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 16px var(--glow-cyan), 0 0 32px rgba(6, 182, 212, 0.15);
|
||||
animation: isoPulse 2.4s ease-in-out infinite;
|
||||
z-index: 2;
|
||||
}
|
||||
@keyframes isoPulse {
|
||||
0%, 100% { opacity: 0.5; box-shadow: 0 0 12px var(--glow-cyan); }
|
||||
50% { opacity: 1; box-shadow: 0 0 24px var(--glow-cyan), 0 0 48px rgba(6, 182, 212, 0.2); }
|
||||
}
|
||||
.loader-brand .label {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.4em;
|
||||
color: rgba(255,255,255,0.35);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
/* 3D Ring spinner with depth */
|
||||
.loader-ring {
|
||||
position: relative;
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
perspective: 200px;
|
||||
}
|
||||
.loader-ring .ring {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
border: 1.5px solid transparent;
|
||||
}
|
||||
.loader-ring .ring:nth-child(1) {
|
||||
inset: 0;
|
||||
border-top-color: rgba(6, 182, 212, 0.5);
|
||||
border-right-color: rgba(6, 182, 212, 0.2);
|
||||
animation: spin3d 1.4s linear infinite;
|
||||
box-shadow: 0 0 20px rgba(6, 182, 212, 0.1);
|
||||
}
|
||||
.loader-ring .ring:nth-child(2) {
|
||||
inset: 8px;
|
||||
border-bottom-color: rgba(245, 158, 11, 0.35);
|
||||
border-left-color: rgba(245, 158, 11, 0.12);
|
||||
animation: spin3d 2s linear infinite reverse;
|
||||
transform: rotateX(30deg);
|
||||
}
|
||||
.loader-ring .ring:nth-child(3) {
|
||||
inset: 16px;
|
||||
border-top-color: rgba(244, 114, 182, 0.25);
|
||||
border-right-color: rgba(244, 114, 182, 0.08);
|
||||
animation: spin3d 2.6s linear infinite;
|
||||
transform: rotateX(-25deg);
|
||||
}
|
||||
@keyframes spin3d {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
.loader-hint {
|
||||
font-size: 13px;
|
||||
color: var(--text-dim);
|
||||
letter-spacing: 0.15em;
|
||||
}
|
||||
.loader-hint a {
|
||||
color: rgba(255,255,255,0.6);
|
||||
text-decoration: none;
|
||||
border-bottom: 1px solid rgba(255,255,255,0.15);
|
||||
padding-bottom: 2px;
|
||||
transition: color 0.3s, border-color 0.3s;
|
||||
}
|
||||
.loader-hint a:hover {
|
||||
color: rgba(255,255,255,0.9);
|
||||
border-color: rgba(255,255,255,0.4);
|
||||
}
|
||||
|
||||
/* ============ Sound Hint — Glass Depth ============ */
|
||||
#soundHint {
|
||||
position: fixed;
|
||||
bottom: 48px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
z-index: 100;
|
||||
background: rgba(255,255,255,0.05);
|
||||
backdrop-filter: blur(24px) saturate(180%);
|
||||
-webkit-backdrop-filter: blur(24px) saturate(180%);
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
border-bottom: 1px solid rgba(255,255,255,0.04);
|
||||
color: rgba(255,255,255,0.8);
|
||||
padding: 14px 32px;
|
||||
border-radius: 40px;
|
||||
font-size: 14px;
|
||||
font-weight: 450;
|
||||
letter-spacing: 0.05em;
|
||||
cursor: pointer;
|
||||
display: none;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
box-shadow:
|
||||
0 4px 24px rgba(0,0,0,0.3),
|
||||
0 0 0 1px rgba(255,255,255,0.03) inset,
|
||||
0 1px 0 rgba(255,255,255,0.04) inset;
|
||||
animation: hintFloat 4s ease-in-out infinite;
|
||||
}
|
||||
#soundHint:hover {
|
||||
background: rgba(255,255,255,0.08);
|
||||
border-color: rgba(255,255,255,0.18);
|
||||
box-shadow:
|
||||
0 8px 32px rgba(0,0,0,0.4),
|
||||
0 0 0 1px rgba(255,255,255,0.05) inset,
|
||||
0 1px 0 rgba(255,255,255,0.06) inset,
|
||||
0 0 40px rgba(6, 182, 212, 0.08);
|
||||
transform: translateX(-50%) translateY(-2px);
|
||||
}
|
||||
@keyframes hintFloat {
|
||||
0%, 100% {
|
||||
box-shadow: 0 4px 24px rgba(0,0,0,0.3), 0 0 0 0 rgba(6, 182, 212, 0);
|
||||
}
|
||||
50% {
|
||||
box-shadow: 0 4px 24px rgba(0,0,0,0.3), 0 0 32px 2px rgba(6, 182, 212, 0.06);
|
||||
}
|
||||
}
|
||||
|
||||
/* ============ Status Elements ============ */
|
||||
|
||||
/* Corner info — glass panel */
|
||||
.corner-info {
|
||||
position: fixed;
|
||||
top: 28px;
|
||||
left: 28px;
|
||||
z-index: 100;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
background: rgba(255,255,255,0.03);
|
||||
backdrop-filter: blur(16px);
|
||||
-webkit-backdrop-filter: blur(16px);
|
||||
border: 1px solid rgba(255,255,255,0.06);
|
||||
border-radius: 12px;
|
||||
padding: 8px 16px;
|
||||
opacity: 0;
|
||||
transition: opacity 0.6s ease;
|
||||
box-shadow:
|
||||
0 2px 12px rgba(0,0,0,0.2),
|
||||
0 0 0 1px rgba(255,255,255,0.02) inset;
|
||||
pointer-events: none;
|
||||
}
|
||||
.corner-info.visible {
|
||||
opacity: 1;
|
||||
}
|
||||
.corner-info .ci-dot {
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
border-radius: 50%;
|
||||
background: var(--accent-cyan);
|
||||
box-shadow: 0 0 10px var(--glow-cyan);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.corner-info .ci-text {
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
color: var(--text-soft);
|
||||
letter-spacing: 0.04em;
|
||||
white-space: nowrap;
|
||||
max-width: 300px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
/* Connection indicator — layered dot */
|
||||
.conn-indicator {
|
||||
position: fixed;
|
||||
top: 28px;
|
||||
right: 28px;
|
||||
z-index: 100;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
opacity: 0;
|
||||
transition: opacity 0.6s ease;
|
||||
pointer-events: none;
|
||||
}
|
||||
.conn-indicator.visible {
|
||||
opacity: 1;
|
||||
}
|
||||
.conn-rings {
|
||||
position: relative;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
.conn-rings .cr-inner {
|
||||
position: absolute;
|
||||
inset: 1px;
|
||||
border-radius: 50%;
|
||||
background: rgba(52, 211, 153, 0.6);
|
||||
box-shadow: 0 0 6px rgba(52, 211, 153, 0.3);
|
||||
transition: all 0.6s ease;
|
||||
}
|
||||
.conn-rings .cr-outer {
|
||||
position: absolute;
|
||||
inset: -3px;
|
||||
border-radius: 50%;
|
||||
border: 1px solid rgba(52, 211, 153, 0.2);
|
||||
animation: connPulse 2.5s ease-in-out infinite;
|
||||
}
|
||||
@keyframes connPulse {
|
||||
0%, 100% { transform: scale(1); opacity: 0.3; }
|
||||
50% { transform: scale(1.6); opacity: 0; }
|
||||
}
|
||||
.conn-label {
|
||||
font-size: 10px;
|
||||
font-weight: 500;
|
||||
color: var(--text-dim);
|
||||
letter-spacing: 0.06em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
/* Bottom status bar — glass */
|
||||
.status-bar {
|
||||
position: fixed;
|
||||
bottom: 28px;
|
||||
right: 28px;
|
||||
z-index: 100;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
background: rgba(255,255,255,0.03);
|
||||
backdrop-filter: blur(16px);
|
||||
-webkit-backdrop-filter: blur(16px);
|
||||
border: 1px solid rgba(255,255,255,0.05);
|
||||
border-radius: 10px;
|
||||
padding: 6px 14px;
|
||||
opacity: 0;
|
||||
transition: opacity 0.6s ease;
|
||||
box-shadow: 0 2px 10px rgba(0,0,0,0.15);
|
||||
pointer-events: none;
|
||||
}
|
||||
.status-bar.visible {
|
||||
opacity: 1;
|
||||
}
|
||||
.status-bar .sb-dot {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
border-radius: 50%;
|
||||
background: var(--accent-warm);
|
||||
box-shadow: 0 0 8px var(--glow-warm);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.status-bar .sb-dot.idle {
|
||||
background: rgba(255,255,255,0.25);
|
||||
box-shadow: none;
|
||||
}
|
||||
.status-bar .sb-text {
|
||||
font-size: 10px;
|
||||
font-weight: 500;
|
||||
color: var(--text-dim);
|
||||
letter-spacing: 0.04em;
|
||||
font-variant-numeric: tabular-nums;
|
||||
font-family: "SF Mono", "JetBrains Mono", "Consolas", monospace;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Perspective Grid -->
|
||||
<div class="perspective-grid"></div>
|
||||
|
||||
<!-- Ambient Orbs -->
|
||||
<div class="ambient-orb orb-1"></div>
|
||||
<div class="ambient-orb orb-2"></div>
|
||||
<div class="ambient-orb orb-3"></div>
|
||||
|
||||
<!-- Loader -->
|
||||
<div class="loader" id="loader">
|
||||
<div class="loader-brand">
|
||||
<div class="mark">
|
||||
<div class="iso-right"></div>
|
||||
<div class="iso-dot"></div>
|
||||
</div>
|
||||
<div class="label">PineSound</div>
|
||||
</div>
|
||||
<div class="loader-ring">
|
||||
<div class="ring"></div>
|
||||
<div class="ring"></div>
|
||||
<div class="ring"></div>
|
||||
</div>
|
||||
<div class="loader-hint" id="loaderText">加载播放列表中...</div>
|
||||
</div>
|
||||
|
||||
<!-- Media Players -->
|
||||
<video id="player" autoplay playsinline controlsList="nodownload"></video>
|
||||
<img id="imgPlayer" alt="">
|
||||
|
||||
<!-- Corner Info — Now Playing -->
|
||||
<div class="corner-info" id="cornerInfo">
|
||||
<div class="ci-dot"></div>
|
||||
<span class="ci-text" id="ciText">就绪</span>
|
||||
</div>
|
||||
|
||||
<!-- Connection Indicator -->
|
||||
<div class="conn-indicator" id="connIndicator">
|
||||
<div class="conn-rings">
|
||||
<div class="cr-inner"></div>
|
||||
<div class="cr-outer"></div>
|
||||
</div>
|
||||
<span class="conn-label">Live</span>
|
||||
</div>
|
||||
|
||||
<!-- Bottom Status -->
|
||||
<div class="status-bar" id="statusBar">
|
||||
<div class="sb-dot" id="sbDot"></div>
|
||||
<span class="sb-text" id="sbText">0 / 0</span>
|
||||
</div>
|
||||
|
||||
<!-- Sound Hint -->
|
||||
<div id="soundHint" onclick="enableSound()">点击启用声音</div>
|
||||
|
||||
<script>
|
||||
const video = document.getElementById('player')
|
||||
const img = document.getElementById('imgPlayer')
|
||||
const loader = document.getElementById('loader')
|
||||
const loaderText = document.getElementById('loaderText')
|
||||
const soundHint = document.getElementById('soundHint')
|
||||
const cornerInfo = document.getElementById('cornerInfo')
|
||||
const ciText = document.getElementById('ciText')
|
||||
const connIndicator = document.getElementById('connIndicator')
|
||||
const statusBar = document.getElementById('statusBar')
|
||||
const sbDot = document.getElementById('sbDot')
|
||||
const sbText = document.getElementById('sbText')
|
||||
let list = []
|
||||
let index = 0
|
||||
let volume = 0.8
|
||||
let playMode = 'sequential'
|
||||
let imageDuration = 5
|
||||
let timer = null
|
||||
let soundBlocked = false
|
||||
let paused = false
|
||||
|
||||
function getUrl(item) {
|
||||
return item.source === 'url' ? item.relative_path : '/file/' + item.relative_path
|
||||
}
|
||||
|
||||
async function loadPlaylist() {
|
||||
const res = await fetch('/api/playlist')
|
||||
const data = await res.json()
|
||||
list = data.files
|
||||
volume = (data.volume || 80) / 100
|
||||
playMode = data.play_mode || 'sequential'
|
||||
imageDuration = data.image_duration || 5
|
||||
video.volume = volume
|
||||
if(list.length === 0){
|
||||
loaderText.innerHTML = '播放列表为空，<a href="/admin">前往管理后台添加</a>'
|
||||
return
|
||||
}
|
||||
loader.classList.add('hidden')
|
||||
showUI()
|
||||
connectSSE()
|
||||
tryPlayWithSound(() => play())
|
||||
}
|
||||
|
||||
function showUI() {
|
||||
cornerInfo.classList.add('visible')
|
||||
connIndicator.classList.add('visible')
|
||||
statusBar.classList.add('visible')
|
||||
}
|
||||
|
||||
function updateStatusUI() {
|
||||
const item = list.length > 0 ? list[index] : null
|
||||
if (item) {
|
||||
ciText.textContent = item.name
|
||||
}
|
||||
sbText.textContent = (index + 1) + ' / ' + list.length
|
||||
if (paused) {
|
||||
sbDot.className = 'sb-dot idle'
|
||||
} else {
|
||||
sbDot.className = 'sb-dot'
|
||||
}
|
||||
}
|
||||
|
||||
function tryPlayWithSound(fn) {
|
||||
video.muted = false
|
||||
const testPlay = video.play()
|
||||
if(testPlay !== undefined){
|
||||
testPlay.then(() => {
|
||||
soundBlocked = false
|
||||
soundHint.style.display = 'none'
|
||||
video.pause()
|
||||
fn()
|
||||
}).catch(() => {
|
||||
soundBlocked = true
|
||||
video.muted = true
|
||||
soundHint.style.display = 'block'
|
||||
fn()
|
||||
})
|
||||
}else{
|
||||
fn()
|
||||
}
|
||||
}
|
||||
|
||||
function connectSSE() {
|
||||
const es = new EventSource('/api/events')
|
||||
es.onmessage = function(e) {
|
||||
const msg = JSON.parse(e.data)
|
||||
switch(msg.action) {
|
||||
case 'pause':
|
||||
handlePause()
|
||||
break
|
||||
case 'play':
|
||||
handlePlay()
|
||||
break
|
||||
case 'next':
|
||||
paused = false
|
||||
skip(1)
|
||||
break
|
||||
case 'prev':
|
||||
paused = false
|
||||
skip(-1)
|
||||
break
|
||||
case 'playlist_changed':
|
||||
reloadPlaylist()
|
||||
break
|
||||
case 'settings_changed':
|
||||
applySettings(msg)
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function handlePause() {
|
||||
paused = true
|
||||
clearTimeout(timer)
|
||||
video.pause()
|
||||
updateStatusUI()
|
||||
reportState('paused')
|
||||
}
|
||||
|
||||
function handlePlay() {
|
||||
paused = false
|
||||
updateStatusUI()
|
||||
if(video.style.display !== 'none'){
|
||||
if(soundBlocked){
|
||||
video.muted = false
|
||||
video.play().then(() => {
|
||||
soundBlocked = false
|
||||
soundHint.style.display = 'none'
|
||||
reportState('playing')
|
||||
}).catch(() => {
|
||||
video.muted = true
|
||||
video.play().catch(() => {})
|
||||
reportState('playing')
|
||||
})
|
||||
}else{
|
||||
video.play().then(() => {
|
||||
reportState('playing')
|
||||
}).catch(() => {})
|
||||
}
|
||||
}else{
|
||||
timer = setTimeout(next, imageDuration * 1000)
|
||||
reportState('playing')
|
||||
}
|
||||
}
|
||||
|
||||
async function reloadPlaylist() {
|
||||
const res = await fetch('/api/playlist')
|
||||
const data = await res.json()
|
||||
const newList = data.files
|
||||
const currentItem = list.length > 0 ? list[index] : null
|
||||
list = newList
|
||||
if(list.length === 0){
|
||||
video.pause()
|
||||
video.style.display = 'none'
|
||||
img.style.display = 'none'
|
||||
loader.classList.remove('hidden')
|
||||
loaderText.innerHTML = '播放列表已清空，<a href="/admin">前往管理后台添加</a>'
|
||||
cornerInfo.classList.remove('visible')
|
||||
connIndicator.classList.remove('visible')
|
||||
statusBar.classList.remove('visible')
|
||||
return
|
||||
}
|
||||
loader.classList.add('hidden')
|
||||
showUI()
|
||||
let newIndex = -1
|
||||
if(currentItem){
|
||||
newIndex = list.findIndex(item => item.relative_path === currentItem.relative_path)
|
||||
}
|
||||
if(newIndex >= 0){
|
||||
index = newIndex
|
||||
}else{
|
||||
index = Math.min(index, list.length - 1)
|
||||
play()
|
||||
}
|
||||
updateStatusUI()
|
||||
}
|
||||
|
||||
function applySettings(msg) {
|
||||
if(msg.volume !== undefined) {
|
||||
volume = msg.volume / 100
|
||||
video.volume = volume
|
||||
if(soundBlocked){
|
||||
video.muted = false
|
||||
video.play().then(() => {
|
||||
soundBlocked = false
|
||||
soundHint.style.display = 'none'
|
||||
}).catch(() => {
|
||||
video.muted = true
|
||||
video.play().catch(() => {})
|
||||
})
|
||||
}
|
||||
}
|
||||
if(msg.play_mode !== undefined) {
|
||||
playMode = msg.play_mode
|
||||
}
|
||||
if(msg.image_duration !== undefined) {
|
||||
imageDuration = msg.image_duration
|
||||
}
|
||||
}
|
||||
|
||||
function reportState(status) {
|
||||
const item = list.length > 0 ? list[index] : null
|
||||
fetch('/api/state', {
|
||||
method: 'POST',
|
||||
headers: {'Content-Type': 'application/json'},
|
||||
body: JSON.stringify({
|
||||
state: {
|
||||
status: status,
|
||||
index: index,
|
||||
name: item ? item.name : '',
|
||||
type: item ? item.type : ''
|
||||
}
|
||||
})
|
||||
}).catch(() => {})
|
||||
}
|
||||
|
||||
function skip(delta) {
|
||||
clearTimeout(timer)
|
||||
if(playMode === 'random'){
|
||||
index = Math.floor(Math.random() * list.length)
|
||||
}else{
|
||||
index = (index + delta + list.length) % list.length
|
||||
}
|
||||
play()
|
||||
}
|
||||
|
||||
function play() {
|
||||
clearTimeout(timer)
|
||||
if(paused) return
|
||||
const item = list[index]
|
||||
const url = getUrl(item)
|
||||
updateStatusUI()
|
||||
if(item.type === 'video'){
|
||||
img.style.display = 'none'
|
||||
video.style.display = 'block'
|
||||
video.src = url
|
||||
video.load()
|
||||
video.muted = soundBlocked
|
||||
const p = video.play()
|
||||
if(p !== undefined){
|
||||
p.then(() => {
|
||||
reportState('playing')
|
||||
}).catch(e => {
|
||||
soundBlocked = true
|
||||
video.muted = true
|
||||
video.play().catch(() => {})
|
||||
soundHint.style.display = 'block'
|
||||
reportState('playing')
|
||||
})
|
||||
}
|
||||
}else{
|
||||
video.style.display = 'none'
|
||||
img.style.display = 'block'
|
||||
img.src = url
|
||||
reportState('playing')
|
||||
timer = setTimeout(next, imageDuration * 1000)
|
||||
}
|
||||
}
|
||||
|
||||
function next() {
|
||||
if(paused) return
|
||||
clearTimeout(timer)
|
||||
if(playMode === 'random'){
|
||||
index = Math.floor(Math.random() * list.length)
|
||||
}else{
|
||||
index = (index + 1) % list.length
|
||||
}
|
||||
play()
|
||||
}
|
||||
|
||||
function enableSound() {
|
||||
video.muted = false
|
||||
video.play().then(() => {
|
||||
soundBlocked = false
|
||||
soundHint.style.display = 'none'
|
||||
}).catch(() => {
|
||||
video.muted = true
|
||||
video.play().catch(() => {})
|
||||
})
|
||||
}
|
||||
|
||||
document.addEventListener('click', () => {
|
||||
if(soundBlocked){
|
||||
enableSound()
|
||||
}
|
||||
})
|
||||
|
||||
video.onended = next
|
||||
window.addEventListener('load', loadPlaylist)
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,109 @@
|
||||
// API 基地址：Tauri 生产环境使用绝对路径，浏览器环境使用相对路径
|
||||
const BASE = window.location.protocol === 'http:' || window.location.protocol === 'https:'
|
||||
? '' // 浏览器环境 — 同源请求
|
||||
: 'http://localhost:8000'; // Tauri 生产环境 (tauri://)
|
||||
|
||||
async function request(url, options = {}) {
|
||||
const res = await fetch(`${BASE}${url}`, {
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
...options,
|
||||
});
|
||||
return res.json();
|
||||
}
|
||||
|
||||
function formEncode(data) {
|
||||
return Object.entries(data)
|
||||
.map(([k, v]) => `${encodeURIComponent(k)}=${encodeURIComponent(v)}`)
|
||||
.join('&');
|
||||
}
|
||||
|
||||
// ============ Auth ============
|
||||
export async function login(username, password) {
|
||||
const res = await fetch(`${BASE}/api/login`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
|
||||
body: formEncode({ username, password }),
|
||||
});
|
||||
return res.json();
|
||||
}
|
||||
|
||||
// ============ Settings ============
|
||||
export async function getSettings() {
|
||||
const res = await fetch(`${BASE}/api/settings`);
|
||||
return res.json();
|
||||
}
|
||||
|
||||
export async function updateSettings(data) {
|
||||
return request('/api/settings', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify(data),
|
||||
});
|
||||
}
|
||||
|
||||
// ============ Media Files ============
|
||||
export async function getMediaFiles() {
|
||||
const res = await fetch(`${BASE}/media`);
|
||||
return res.json();
|
||||
}
|
||||
|
||||
export async function uploadFiles(files) {
|
||||
for (const file of files) {
|
||||
const fd = new FormData();
|
||||
fd.append('file', file);
|
||||
await fetch(`${BASE}/upload`, { method: 'POST', body: fd });
|
||||
}
|
||||
}
|
||||
|
||||
export async function addUrlMedia(url) {
|
||||
return request('/api/media/add-url', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({ url }),
|
||||
});
|
||||
}
|
||||
|
||||
export async function deleteMedia(path) {
|
||||
return request('/api/delete', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({ path }),
|
||||
});
|
||||
}
|
||||
|
||||
// ============ Playlist ============
|
||||
export async function getPlaylist() {
|
||||
const res = await fetch(`${BASE}/api/playlist`);
|
||||
return res.json();
|
||||
}
|
||||
|
||||
export async function addToPlaylist(path) {
|
||||
return request('/api/playlist/add', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({ path }),
|
||||
});
|
||||
}
|
||||
|
||||
export async function removeFromPlaylist(path) {
|
||||
return request('/api/playlist/remove', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({ path }),
|
||||
});
|
||||
}
|
||||
|
||||
// ============ Playback Control ============
|
||||
export async function sendControl(action) {
|
||||
return request('/api/control', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({ action }),
|
||||
});
|
||||
}
|
||||
|
||||
export async function getState() {
|
||||
const res = await fetch(`${BASE}/api/state`);
|
||||
return res.json();
|
||||
}
|
||||
|
||||
export async function updateState(state) {
|
||||
return request('/api/state', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({ state }),
|
||||
});
|
||||
}
|
||||
Reference in New Issue
Block a user