Mercurial

comparison medi/src/index.html @ 217:7ef4c9d2a72d hg-web

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
[DO NOT PUSH] Random values.
author MrJuneJune <me@mrjunejune.com>
date Sun, 25 Jan 2026 10:44:04 -0800
parents
children
comparison
equal deleted inserted replaced
192:b818a4561a3c 217:7ef4c9d2a72d
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Medi - Media Upload</title>
7 <style>
8 :root {
9 --bg: #0d1117;
10 --bg-secondary: #161b22;
11 --border: #30363d;
12 --text: #e6edf3;
13 --text-secondary: #8b949e;
14 --accent: #58a6ff;
15 --success: #3fb950;
16 --error: #f85149;
17 }
18
19 * {
20 box-sizing: border-box;
21 margin: 0;
22 padding: 0;
23 }
24
25 body {
26 font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
27 background: var(--bg);
28 color: var(--text);
29 min-height: 100vh;
30 }
31
32 #root {
33 max-width: 1200px;
34 margin: 0 auto;
35 padding: 40px 20px;
36 }
37
38 h1 {
39 font-size: 2rem;
40 margin-bottom: 8px;
41 }
42
43 .subtitle {
44 color: var(--text-secondary);
45 margin-bottom: 32px;
46 }
47
48 .upload-area {
49 border: 2px dashed var(--border);
50 border-radius: 12px;
51 padding: 60px 40px;
52 text-align: center;
53 cursor: pointer;
54 transition: all 0.2s;
55 background: var(--bg-secondary);
56 margin-bottom: 32px;
57 }
58
59 .upload-area:hover, .upload-area.dragover {
60 border-color: var(--accent);
61 background: rgba(88, 166, 255, 0.1);
62 }
63
64 .upload-area svg {
65 width: 64px;
66 height: 64px;
67 margin-bottom: 16px;
68 color: var(--text-secondary);
69 }
70
71 .upload-area h3 {
72 margin-bottom: 8px;
73 }
74
75 .upload-area p {
76 color: var(--text-secondary);
77 font-size: 14px;
78 }
79
80 .upload-area input {
81 display: none;
82 }
83
84 .media-grid {
85 display: grid;
86 grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
87 gap: 20px;
88 }
89
90 .media-card {
91 background: var(--bg-secondary);
92 border: 1px solid var(--border);
93 border-radius: 12px;
94 overflow: hidden;
95 }
96
97 .media-preview {
98 aspect-ratio: 16/9;
99 background: #000;
100 display: flex;
101 align-items: center;
102 justify-content: center;
103 position: relative;
104 }
105
106 .media-preview img, .media-preview video {
107 max-width: 100%;
108 max-height: 100%;
109 object-fit: contain;
110 }
111
112 .media-info {
113 padding: 16px;
114 }
115
116 .media-info h4 {
117 font-size: 14px;
118 margin-bottom: 4px;
119 word-break: break-all;
120 }
121
122 .media-info .type {
123 font-size: 12px;
124 color: var(--text-secondary);
125 text-transform: uppercase;
126 }
127
128 .media-info .status {
129 font-size: 12px;
130 margin-top: 8px;
131 padding: 4px 8px;
132 border-radius: 4px;
133 display: inline-block;
134 }
135
136 .status.processing {
137 background: rgba(88, 166, 255, 0.2);
138 color: var(--accent);
139 }
140
141 .status.completed {
142 background: rgba(63, 185, 80, 0.2);
143 color: var(--success);
144 }
145
146 .status.error {
147 background: rgba(248, 81, 73, 0.2);
148 color: var(--error);
149 }
150
151 .media-links {
152 padding: 0 16px 16px;
153 display: flex;
154 gap: 8px;
155 }
156
157 .media-links a {
158 font-size: 12px;
159 color: var(--accent);
160 text-decoration: none;
161 }
162
163 .media-links a:hover {
164 text-decoration: underline;
165 }
166
167 .loading-spinner {
168 width: 40px;
169 height: 40px;
170 border: 3px solid var(--border);
171 border-top-color: var(--accent);
172 border-radius: 50%;
173 animation: spin 1s linear infinite;
174 }
175
176 @keyframes spin {
177 to { transform: rotate(360deg); }
178 }
179
180 .empty-state {
181 text-align: center;
182 padding: 60px 20px;
183 color: var(--text-secondary);
184 }
185 </style>
186 </head>
187 <body>
188 <div id="root"></div>
189 <script src="/medi_bundle.js"></script>
190 </body>
191 </html>