Hugging Face's logo

Spaces:
NathMen12
/
Pixel-Drive
Paused

App Files Community
NathMen12 commited on
Commit
4df5a85
·
verified ·
1 Parent(s): 311560d

Create embed.html

Browse files
Files changed (1) hide show
  1. public/embed.html +65 -0
public/embed.html ADDED
@@ -0,0 +1,65 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="fr">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1">
6
+ <title>PixelDrive — Partage sécurisé</title>
7
+ __OG_META__
8
+ <style>
9
+ :root{--bg:#0d0f1a;--panel:#151827;--border:#262a3f;--primary:#6366f1;--text:#f4f4f5;--muted:#9aa0b4;--danger:#ef4444}
10
+ *{box-sizing:border-box;margin:0;padding:0}
11
+ body{font-family:'Inter',-apple-system,'Segoe UI',Roboto,sans-serif;background:radial-gradient(1200px 600px at 70% -10%,rgba(99,102,241,.15),transparent),var(--bg);color:var(--text);min-height:100dvh;display:flex;flex-direction:column}
12
+ .top{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-bottom:1px solid var(--border)}
13
+ .logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:1.05rem}
14
+ .logo svg{width:22px;height:22px;stroke:var(--primary);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
15
+ .badge{font-size:.65rem;color:var(--primary);border:1px solid var(--primary);padding:3px 8px;border-radius:99px;letter-spacing:.06em;text-transform:uppercase}
16
+ main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;gap:18px}
17
+ .card{width:min(920px,100%);background:var(--panel);border:1px solid var(--border);border-radius:14px;overflow:hidden;display:flex;align-items:center;justify-content:center;min-height:220px}
18
+ .card img,.card video{width:100%;max-height:70vh;object-fit:contain;background:#000}
19
+ .card audio{width:90%;margin:40px 0}
20
+ .card iframe{width:100%;height:70vh;border:none}
21
+ .card .no{padding:48px;text-align:center;color:var(--muted)}
22
+ .card .no svg{width:56px;height:56px;stroke:var(--muted);fill:none;stroke-width:1.5;margin-bottom:12px;stroke-linecap:round;stroke-linejoin:round}
23
+ .card .no.err{color:var(--danger);font-weight:600}
24
+ .meta{text-align:center;max-width:90%}
25
+ .name{font-weight:600;font-size:1.05rem;word-break:break-all}
26
+ .sub{color:var(--muted);font-size:.8rem;margin-top:4px}
27
+ .btn{display:inline-flex;align-items:center;gap:8px;background:var(--primary);color:#fff;text-decoration:none;padding:12px 22px;border-radius:10px;font-weight:600;font-size:.95rem;transition:filter .15s}
28
+ .btn:hover{filter:brightness(1.1)}
29
+ .btn svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
30
+ .foot{color:var(--muted);font-size:.7rem;margin-top:6px}
31
+ </style>
32
+ </head>
33
+ <body>
34
+ <header class="top">
35
+ <div class="logo"><svg viewBox="0 0 24 24"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg> PixelDrive</div>
36
+ <span class="badge">Zero-Knowledge</span>
37
+ </header>
38
+ <main>
39
+ <div class="card" id="player"></div>
40
+ <div class="meta"><div class="name" id="fname"></div><div class="sub" id="fsize"></div></div>
41
+ <a class="btn" id="dl" download><svg viewBox="0 0 24 24"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg> Télécharger</a>
42
+ <p class="foot">Chiffré AES-256-GCM · Propulsé par PixelDrive</p>
43
+ </main>
44
+ <script>
45
+ const D = __EMBED_DATA__;
46
+ const $ = id => document.getElementById(id);
47
+ function fmt(b){if(b==null)return'—';if(b<1024)return b+' B';if(b<1048576)return(b/1024).toFixed(0)+' KB';if(b<1073741824)return(b/1048576).toFixed(1)+' MB';return(b/1073741824).toFixed(2)+' GB'}
48
+ if (D.error) {
49
+ $('player').innerHTML = '<div class="no err">' + D.error + '</div>';
50
+ $('dl').style.display = 'none';
51
+ } else {
52
+ document.title = D.name + ' · PixelDrive';
53
+ $('fname').textContent = D.name;
54
+ $('fsize').textContent = fmt(D.size) + ' · ' + (D.mime || '');
55
+ $('dl').href = D.dl;
56
+ const m = D.mime || '';
57
+ if (m.startsWith('image/')) $('player').innerHTML = '<img src="' + D.dl + '" alt="">';
58
+ else if (m.startsWith('video/')) $('player').innerHTML = '<video controls playsinline src="' + D.dl + '"></video>';
59
+ else if (m.startsWith('audio/')) $('player').innerHTML = '<audio controls src="' + D.dl + '"></audio>';
60
+ else if (m === 'application/pdf') $('player').innerHTML = '<iframe src="' + D.dl + '"></iframe>';
61
+ else $('player').innerHTML = '<div class="no"><svg viewBox="0 0 24 24"><path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"/><polyline points="13 2 13 9 20 9"/></svg><div>Aperçu non disponible</div></div>';
62
+ }
63
+ </script>
64
+ </body>
65
+ </html>