Nube-Streaming-Privado/multimedia.php at main · morjoos-dev/Nube-Streaming-Privado · GitHub

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
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
<?php
declare(strict_types=1);
require_once __DIR__ . '/helpers.php';
requireLogin();
$items = listVideoFolders();
?>
<!doctype html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>NubeHome · Multimedia</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link href="https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500&display=swap" rel="stylesheet">
  <style>
    :root {
      --bg: #080c14; --surface: #0d1422; --surface2: #111827; --surface3: #151e30;
      --border: rgba(255,255,255,0.07); --border2: rgba(255,255,255,0.04);
      --accent: #4f8bff; --accent2: #7c5cfc; --text: #f0f4ff; --text2: #c8d4f0; --muted: #6b7a99;
      --sidebar: 240px;
    }
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    body { background: var(--bg); color: var(--text); font-family: 'DM Sans', sans-serif; min-height: 100vh; display: flex; }

    .sidebar { width: var(--sidebar); flex-shrink: 0; background: var(--surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; padding: 22px 16px; position: fixed; top: 0; left: 0; height: 100vh; z-index: 100; }
    .sidebar-logo { display: flex; align-items: center; gap: 10px; padding: 0 6px; margin-bottom: 30px; }
    .sidebar-logo .icon { width: 36px; height: 36px; background: linear-gradient(135deg,var(--accent),var(--accent2)); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
    .sidebar-logo .name { font-family: 'Syne', sans-serif; font-weight: 800; font-size: 1.1rem; letter-spacing: -.02em; }
    .nav-section { margin-bottom: 8px; }
    .nav-label { font-size: .7rem; font-weight: 600; color: var(--muted); letter-spacing: .1em; text-transform: uppercase; padding: 0 10px; margin-bottom: 6px; }
    .nav-item { display: flex; align-items: center; gap: 10px; padding: 10px 10px; border-radius: 10px; color: var(--muted); font-size: .9rem; font-weight: 500; text-decoration: none; cursor: pointer; transition: all .18s; margin-bottom: 2px; border: none; background: none; width: 100%; text-align: left; }
    .nav-item:hover { background: var(--surface2); color: var(--text); }
    .nav-item.active { background: rgba(79,139,255,.12); color: var(--accent); }
    .nav-item .nav-icon { font-size: 1.1rem; width: 20px; flex-shrink: 0; }
    .sidebar-footer { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--border); }
    .user-chip { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 12px; background: var(--surface2); }
    .user-avatar { width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(135deg,var(--accent),var(--accent2)); display: flex; align-items: center; justify-content: center; font-family: 'Syne', sans-serif; font-weight: 800; font-size: .95rem; flex-shrink: 0; }
    .user-name { font-size: .88rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
    .logout-btn { color: var(--muted); font-size: .85rem; text-decoration: none; padding: 2px 4px; border-radius: 6px; transition: color .2s; }
    .logout-btn:hover { color: #ff4d6d; }

    .main { margin-left: var(--sidebar); flex: 1; }
    .topbar { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; padding: 14px 28px; background: rgba(8,12,20,.85); backdrop-filter: blur(16px); border-bottom: 1px solid var(--border); }
    .topbar-title { font-family: 'Syne', sans-serif; font-size: 1.15rem; font-weight: 700; }

    .content { padding: 28px; }
    .section-head { margin-bottom: 22px; }
    .section-head h2 { font-family: 'Syne', sans-serif; font-size: 1.5rem; font-weight: 800; margin-bottom: 4px; }
    .section-head p { color: var(--muted); font-size: .88rem; }

    /* Netflix grid */
    .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; }
    .tile {
      text-decoration: none; color: var(--text);
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 14px; overflow: hidden;
      transition: transform .22s, border-color .22s, box-shadow .22s;
      cursor: pointer;
    }
    .tile:hover { transform: translateY(-5px) scale(1.02); border-color: rgba(79,139,255,.4); box-shadow: 0 16px 40px rgba(0,0,0,.4), 0 0 0 1px rgba(79,139,255,.15); }
    .tile-cover { position: relative; aspect-ratio: 2/3; overflow: hidden; background: var(--surface2); }
    .tile-cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s; }
    .tile:hover .tile-cover img { transform: scale(1.05); }
    .tile-cover .play-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.5); opacity: 0; transition: opacity .22s; }
    .tile:hover .play-overlay { opacity: 1; }
    .play-btn { width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg,var(--accent),var(--accent2)); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; box-shadow: 0 4px 20px rgba(79,139,255,.5); }
    .tile-cover-placeholder { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
    .tile-cover-placeholder .folder-icon { font-size: 2.5rem; opacity: .4; }
    .tile-cover-placeholder .folder-name { font-size: .75rem; color: var(--muted); text-align: center; padding: 0 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%; }
    .tile-info { padding: 10px 12px 12px; }
    .tile-title { font-family: 'Syne', sans-serif; font-weight: 700; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .tile-badge { display: inline-block; margin-top: 5px; background: rgba(79,139,255,.15); color: var(--accent); font-size: .7rem; font-weight: 600; padding: 2px 8px; border-radius: 99px; letter-spacing: .04em; }

    .empty-state { text-align: center; padding: 64px 24px; color: var(--muted); }
    .empty-icon { font-size: 4rem; margin-bottom: 16px; opacity: .3; }
    .empty-title { font-family: 'Syne', sans-serif; font-size: 1.2rem; font-weight: 700; color: var(--text2); margin-bottom: 8px; }
    .empty-hint { font-size: .88rem; line-height: 1.6; }
    code { background: var(--surface2); padding: 2px 7px; border-radius: 6px; font-size: .85em; }

    @media (max-width: 768px) { .sidebar { transform: translateX(-100%); } .main { margin-left: 0; } .grid { grid-template-columns: repeat(auto-fill, minmax(130px,1fr)); } }
  </style>
</head>
<body>

<aside class="sidebar">
  <div class="sidebar-logo">
    <div class="icon">☁</div>
    <span class="name">NubeHome</span>
  </div>
  <div class="nav-section">
    <div class="nav-label">Principal</div>
    <a class="nav-item" href="dashboard.php"><span class="nav-icon">📁</span> Mis archivos</a>
    <a class="nav-item active" href="multimedia.php"><span class="nav-icon">🎬</span> Multimedia</a>
  </div>
  <div class="sidebar-footer">
    <div class="user-chip">
      <div class="user-avatar"><?= strtoupper(substr((string)($_SESSION['user']??'?'),0,1)) ?></div>
      <span class="user-name"><?= htmlspecialchars((string)($_SESSION['user']??'')) ?></span>
      <a class="logout-btn" href="logout.php" title="Salir">↩</a>
    </div>
  </div>
</aside>

<div class="main">
  <div class="topbar">
    <span class="topbar-title">🎬 Multimedia compartida</span>
  </div>

  <div class="content">
    <?php if (!$items): ?>
      <div class="empty-state">
        <div class="empty-icon">🎬</div>
        <div class="empty-title">Sin contenido aún</div>
        <div class="empty-hint">
          Crea carpetas en <code>files/video/</code> con un <code>portada.jpg</code><br>
          y tus archivos <code>.mp4</code> dentro para que aparezcan aquí.
        </div>
      </div>
    <?php else: ?>
      <div class="section-head">
        <h2>Tu biblioteca</h2>
        <p><?= count($items) ?> título<?= count($items)!==1?'s':'' ?> disponible<?= count($items)!==1?'s':'' ?></p>
      </div>
      <div class="grid">
        <?php foreach ($items as $it): ?>
          <a class="tile" href="player.php?folder=<?= urlencode($it['folder']) ?>">
            <div class="tile-cover">
              <?php if ($it['cover_exists']): ?>
                <img src="<?= htmlspecialchars($it['cover']) ?>" alt="<?= htmlspecialchars($it['folder']) ?>" loading="lazy">
              <?php else: ?>
                <div class="tile-cover-placeholder">
                  <div class="folder-icon">🎬</div>
                  <div class="folder-name"><?= htmlspecialchars($it['folder']) ?></div>
                </div>
              <?php endif; ?>
              <div class="play-overlay"><div class="play-btn">▶</div></div>
            </div>
            <div class="tile-info">
              <div class="tile-title"><?= htmlspecialchars($it['folder']) ?></div>
              <span class="tile-badge">Ver ahora</span>
            </div>
          </a>
        <?php endforeach; ?>
      </div>
    <?php endif; ?>
  </div>
</div>

</body>
</html>