Hugging Face's logo

Spaces:
Ethscriptions
/
POLS
Running

App Files Community
POLS
File size: 12,220 Bytes
d45e47b
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
0dd44c1
d45e47b
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
@font-face { font-family: "SolSC"; src: url(../fonts/sol-sc-400.woff2) format("woff2"); font-weight: 100 500; font-display: swap; }
@font-face { font-family: "SolSC"; src: url(../fonts/sol-sc-700.woff2) format("woff2"); font-weight: 600 800; font-display: swap; }
@font-face { font-family: "SolSC"; src: url(../fonts/sol-sc-900.woff2) format("woff2"); font-weight: 850 1000; font-display: swap; }
@font-face { font-family: "SolGrotesk"; src: url(../fonts/sol-grotesk.woff2) format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "SolMono"; src: url(../fonts/sol-mono.woff2) format("woff2"); font-weight: 100 800; font-display: swap; }

:root {
  --bg: #07050d; --panel: #110d1c; --panel2: #171226; --line: rgba(255,255,255,.08);
  --fg: #f4f2ff; --muted: #9a93b8; --purple: #9945FF; --green: #14F195; --pink: #DC1FFF;
  --grad: linear-gradient(90deg, #9945FF, #14F195);
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--fg); font-family: "SolSC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; }
body { min-height: 100vh; background: radial-gradient(1200px 600px at 10% -10%, rgba(153,69,255,.18), transparent 60%), radial-gradient(900px 500px at 110% 10%, rgba(20,241,149,.10), transparent 60%), var(--bg); }
button { font: inherit; color: inherit; cursor: pointer; }
.app { max-width: 1600px; margin: 0 auto; padding: 18px 22px 30px; }

.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.brand { display: flex; gap: 14px; align-items: center; }
.brand h1 { margin: 0; font-size: 22px; font-weight: 900; letter-spacing: .5px; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.brand p { margin: 3px 0 0; color: var(--muted); font-size: 13px; }
.logo { width: 34px; height: 30px; display: grid; gap: 4px; transform: skewX(-18deg); }
.logo i { display: block; border-radius: 2px; background: var(--grad); }
.back { color: var(--muted); text-decoration: none; font-size: 13px; white-space: nowrap; border: 1px solid var(--line); padding: 7px 12px; border-radius: 999px; }
.back:hover { color: var(--fg); border-color: rgba(255,255,255,.25); }

.layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 18px; align-items: start; }
@media (max-width: 1100px) { .layout { grid-template-columns: 1fr; } }

.stage-wrap { display: flex; justify-content: center; align-items: center; background: #000; border-radius: 16px; border: 1px solid var(--line); overflow: hidden; box-shadow: 0 30px 80px -30px rgba(153,69,255,.45); }
.stage { position: relative; width: 100%; aspect-ratio: 16 / 9; }
.stage-wrap.portrait { background: repeating-linear-gradient(45deg, #0a0812 0 12px, #0d0a17 12px 24px); }
.stage-wrap.portrait .stage { width: auto; height: min(78vh, 980px); aspect-ratio: 9 / 16; }
.stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.stage-wrap:fullscreen { border-radius: 0; border: 0; height: 100vh; }
.stage-wrap:fullscreen .stage { width: min(100vw, 100vh * 16 / 9); height: auto; }
.stage-wrap.portrait:fullscreen .stage { height: 100vh; width: auto; }

.big-play { position: absolute; inset: 0; margin: auto; width: max-content; height: max-content; display: flex; align-items: center; gap: 12px; padding: 16px 26px 16px 18px; border-radius: 999px; border: 1px solid rgba(255,255,255,.25); background: rgba(10,6,20,.6); backdrop-filter: blur(10px); font-size: 18px; font-weight: 700; transition: transform .2s, opacity .3s; }
.big-play svg { width: 40px; height: 40px; fill: #fff; background: var(--grad); border-radius: 50%; padding: 8px; }
.big-play:hover { transform: scale(1.05); }
.big-play.hide { opacity: 0; pointer-events: none; }
.loading { position: absolute; left: 50%; bottom: 14%; transform: translateX(-50%); display: flex; gap: 10px; align-items: center; font-size: 13px; color: var(--muted); background: rgba(0,0,0,.5); padding: 8px 14px; border-radius: 999px; }
.loading.hide { display: none; }
.spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(255,255,255,.2); border-top-color: var(--green); animation: sp 1s linear infinite; }
@keyframes sp { to { transform: rotate(360deg); } }

.controls { display: flex; align-items: center; gap: 12px; margin-top: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 8px 12px; }
.ctl { width: 38px; height: 38px; border: 0; border-radius: 10px; background: transparent; display: grid; place-items: center; flex: none; }
.ctl:hover { background: rgba(255,255,255,.07); }
.ctl svg { width: 24px; height: 24px; fill: currentColor; }
.time { font-family: "SolMono", ui-monospace, monospace; font-size: 13px; color: var(--muted); white-space: nowrap; min-width: 92px; }
.time .sep { margin: 0 4px; opacity: .5; }
.scrub { position: relative; flex: 1; height: 34px; cursor: pointer; touch-action: none; }
.scrub .track { position: absolute; left: 0; right: 0; top: 15px; height: 4px; border-radius: 4px; background: rgba(255,255,255,.12); overflow: hidden; }
.scrub .fill { height: 100%; width: 0; background: var(--grad); }
.scrub:hover .track { height: 6px; top: 14px; }
.scrub .marks i { position: absolute; top: 12px; width: 2px; height: 10px; background: rgba(255,255,255,.35); border-radius: 1px; }
.scrub .knob { position: absolute; top: 10px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(20,241,149,.25); left: 0; }
.scrub .tip { position: absolute; bottom: 34px; transform: translateX(-50%); white-space: nowrap; font-size: 12px; background: #000; border: 1px solid var(--line); padding: 4px 8px; border-radius: 6px; opacity: 0; pointer-events: none; transition: opacity .15s; }
.scrub:hover .tip { opacity: 1; }

.toggles { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 12px; }
.seg { display: inline-flex; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 4px; gap: 4px; }
.seg button { border: 0; background: transparent; padding: 8px 14px; border-radius: 9px; color: var(--muted); font-size: 14px; line-height: 1.25; }
.seg button.on { background: linear-gradient(135deg, rgba(153,69,255,.35), rgba(20,241,149,.22)); color: var(--fg); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.seg.small { display: flex; width: 100%; }
.seg.small button { flex: 1; font-size: 13px; padding: 8px 6px; }
.seg em { font-style: normal; font-size: 11px; opacity: .7; }
.chk { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--muted); cursor: pointer; user-select: none; }
.chk input { accent-color: var(--green); width: 16px; height: 16px; }
.hint { font-size: 12px; color: #5f5878; margin-left: auto; }
@media (max-width: 700px) { .hint { display: none; } }

.side { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; position: sticky; top: 14px; max-height: calc(100vh - 28px); display: flex; flex-direction: column; }
.tabs { display: flex; border-bottom: 1px solid var(--line); flex: none; }
.tabs button { flex: 1; border: 0; background: transparent; padding: 13px 4px; color: var(--muted); font-size: 14px; font-weight: 700; border-bottom: 2px solid transparent; }
.tabs button.on { color: var(--fg); border-bottom-color: var(--green); }
.panel { display: none; padding: 16px; overflow: auto; }
.panel.on { display: block; }
.panel h3 { margin: 0 0 6px; font-size: 16px; }
.muted { color: var(--muted); font-size: 13px; line-height: 1.6; margin: 0 0 12px; }
.muted.small { font-size: 12px; margin-top: 10px; }

.chapters { list-style: none; margin: 0; padding: 0; counter-reset: c; }
.chapters li { display: flex; gap: 10px; align-items: center; padding: 9px 10px; border-radius: 10px; cursor: pointer; transition: background .15s; }
.chapters li:hover { background: rgba(255,255,255,.05); }
.chapters li.on { background: linear-gradient(90deg, rgba(153,69,255,.25), rgba(20,241,149,.08)); }
.chapters .n { font-family: "SolMono", monospace; font-size: 11px; color: var(--muted); width: 22px; }
.chapters .ttl { flex: 1; font-size: 14px; font-weight: 700; }
.chapters .yr { font-size: 11px; color: var(--green); font-family: "SolMono", monospace; margin-left: 6px; font-weight: 400; }
.chapters .ts { font-family: "SolMono", monospace; font-size: 12px; color: var(--muted); }
.chapters .pbar { height: 2px; background: var(--grad); width: 0; border-radius: 2px; margin-top: 4px; }

.field { margin-bottom: 12px; }
.field > span { display: block; font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.exp-actions { display: flex; gap: 10px; margin-top: 14px; }
.primary { flex: 1; border: 0; border-radius: 12px; padding: 12px; font-weight: 900; font-size: 15px; color: #08050f; background: var(--grad); box-shadow: 0 10px 30px -10px rgba(20,241,149,.6); }
.primary:disabled { opacity: .5; cursor: wait; }
.ghost { border: 1px solid rgba(255,255,255,.18); background: transparent; border-radius: 10px; padding: 10px 14px; color: var(--fg); }
.ghost:hover { background: rgba(255,255,255,.06); }
.ghost.small { padding: 4px 10px; font-size: 12px; margin-left: 8px; border-radius: 8px; }
.progress { margin-top: 14px; }
.progress .bar { height: 8px; background: rgba(255,255,255,.08); border-radius: 8px; overflow: hidden; }
.progress .bar div { height: 100%; width: 0; background: var(--grad); transition: width .2s; }
.ptext { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); margin-top: 6px; font-family: "SolMono", monospace; }
.exp-preview { width: 100%; margin-top: 10px; border-radius: 8px; border: 1px solid var(--line); background: #000; }
.result { margin-top: 14px; padding: 12px; border-radius: 12px; background: rgba(20,241,149,.08); border: 1px solid rgba(20,241,149,.3); font-size: 13px; line-height: 1.6; }
.result a { color: var(--green); font-weight: 700; }
.result.err { background: rgba(255,59,92,.08); border-color: rgba(255,59,92,.35); }

.pub-block { margin-top: 14px; }
.pub-head { display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.pub-head b { color: var(--fg); font-size: 13px; }
.pub-text { white-space: pre-wrap; background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font-size: 13px; line-height: 1.65; max-height: 260px; overflow: auto; }
.pub-alt { display: flex; flex-direction: column; gap: 6px; }
.pub-alt .row { display: flex; gap: 8px; align-items: flex-start; background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; font-size: 13px; line-height: 1.5; }
.pub-alt .row span { flex: 1; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tags span { font-size: 12px; padding: 3px 9px; border-radius: 999px; background: rgba(153,69,255,.18); border: 1px solid rgba(153,69,255,.35); }
.copy { flex: none; border: 1px solid rgba(255,255,255,.18); background: transparent; border-radius: 8px; padding: 3px 10px; font-size: 12px; color: var(--fg); }
.copy:hover { background: rgba(20,241,149,.12); border-color: rgba(20,241,149,.5); }
.count { font-family: "SolMono", monospace; font-size: 11px; color: var(--muted); }
.count.over { color: #ff6b81; }

.covers { display: grid; gap: 14px; }
.covers figure { margin: 0; }
.covers canvas { width: 100%; border-radius: 10px; border: 1px solid var(--line); display: block; background: #000; }
.covers .cover-p { width: 75%; margin: 0 auto; }
.covers figcaption { font-size: 12px; color: var(--muted); margin-top: 6px; display: flex; align-items: center; justify-content: center; }

.foot { margin-top: 22px; font-size: 12px; color: #5f5878; text-align: center; line-height: 1.6; }
.toast { position: fixed; left: 50%; bottom: 30px; transform: translateX(-50%) translateY(20px); background: #111; border: 1px solid rgba(20,241,149,.4); color: var(--fg); padding: 10px 18px; border-radius: 999px; font-size: 14px; opacity: 0; pointer-events: none; transition: all .25s; z-index: 50; }
.toast.on { opacity: 1; transform: translateX(-50%); }