- 初始化
This commit is contained in:
Pine
+116
@@ -0,0 +1,116 @@
|
||||
.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;
|
||||
}
|
||||
}
|
||||
+51
@@ -0,0 +1,51 @@
|
||||
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 }));
|
||||
}
|
||||
|
||||
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>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
@@ -0,0 +1 @@
|
||||
<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>
|
||||
|
After Width: | Height: | Size: 4.0 KiB |
@@ -0,0 +1,9 @@
|
||||
import React from "react";
|
||||
import ReactDOM from "react-dom/client";
|
||||
import App from "./App";
|
||||
|
||||
ReactDOM.createRoot(document.getElementById("root")).render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
</React.StrictMode>,
|
||||
);
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,830 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user