VideoPlayground/index.html at main · LucasTBorges/VideoPlayground · 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
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>VideoPlayground - Post-Processing Demos</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="icon" type="image/x-icon" href="./src/assets/web/icon.png">

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">

    <link rel="stylesheet" type="text/css" href="./src/assets/style.css">

  </head>

  <body>
    <header class="app-header">
      <div class="logo">VideoPlayground</div>
      <div class="subtitle">Post-Processing & Face Tracking Demos</div>
      <style>
      .loading-overlay-iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(15, 23, 42, 0.479);
        z-index: 50;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
      }
      </style>
    </header>

    <div class="app-container">

      <nav class="sidebar">
        <div class="sidebar-title">Demos</div>
        <ul>
          <li><a href="./src/01-posprocessamento.html" target="examples" class="nav-item">Video Post-Processing</a></li>
          <!-- <li><a href="./src/02-localiza-face.html" target="examples" class="nav-item">Face Tracking</a></li> -->
          <li><a href="./src/03-anonimizacao-2d-mask.html" target="examples" class="nav-item">Anonymization (2D Mask)</a></li>
          <li><a href="./src/04-anonimizacao-3d-mask.html" target="examples" class="nav-item">Anonymization (3D Mask)</a></li>
          <li><a href="./src/05-anonimizacao-pos-proc.html" target="examples" class="nav-item">Anonymization (Filters)</a></li>
         </ul>

         <div class="sidebar-footer">
            <p>
                Developed by
                <a href="https://github.com/LucasTBorges" target="_blank" rel="noopener noreferrer" class="footer-link">
                    Lucas T. Borges
                </a>
            </p>
            <p>
                <a href="https://github.com/LucasTBorges/VideoPlayground" target="_blank" rel="noopener noreferrer" class="footer-link source-link">
                    <span class="icon-code">&lt;/&gt;</span> Source Code
                </a>
            </p>
        </div>
      </nav>

      <main class="content-area">
        <iframe id="main-iframe" name="examples" title="Project Demo" src="./src/01-posprocessamento.html"></iframe>
        <div id="app-loader" class="loading-overlay-iframe" style="display: none;">
          <div class="spinner"></div>
          <p style="margin-top: 15px; font-size: 0.9rem; color: #cbd5e1;">Loading Module...</p>
        </div>
      </main>

      <script>
        // Lida com a exibição do loader ao trocar de demo
        const iframe = document.getElementById('main-iframe');
        const loader = document.getElementById('app-loader');
        const navLinks = document.querySelectorAll('.nav-item');

        navLinks.forEach(link => {
            link.addEventListener('click', () => {
                loader.style.display = 'flex';
            });
        });
        iframe.addEventListener('load', () => {
            loader.style.display = 'none';
        });
      </script>

    </div>
  </body>
</html>