InterfaceNetflix/conta.html at main · Gilbertoaleite/InterfaceNetflix · 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
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style/conta.css">


    <!--Responsividade--------->
    <link rel="stylesheet" href="style/responsive.css" >
<!---owl css--->
<link rel="stylesheet" href="style/owl/owl.carousel.min.css">
<link rel="stylesheet" href="style/owl/owl.theme.default.min.css">
    <title>NETFLIX LIVE</title>

</head>
<body>

    <header>
       <div class="container">
          <h2 class="logo">NETFLIX</h2>
          <nav>
                    <a href="index.html">Inicio</a>
                 <a href="/series.html">Séries</a>
               <a target="_blank" href="https://github.com/Gilbertoaleite">Filmes</a>
             <a target="_blank" href="https://www.linkedin.com/in/gilbertoaleite/">Documentários</a>
          <a class="botao-log" target="_blank" href="/conta.html"></a>
               <button  class="botao-log" onclick="location.href='conta.html';"><img src="/img/botao-logi.png" /></button>
             <i class="fas fa-caret-down"></i>

          </nav>
       </div>
     </header>


  <main class="conta-main">
    <h1 class="titulo-conta">Quem está assistindo?</h1>
    <div class="conta-perfis" id="conta-perfis"></div>
  </main>


    <script src="https://kit.fontawesome.com/6975053bc0.js" crossorigin="anonymous"></script>
    <!--owl js-->
    <script src="js/owl/jquery.min.js"></script>
    <script src="js/owl/owl.carousel.min.js"></script>
    <script src="js/owl/setup2.js"></script>


  <footer>
    <div class="rodape">
      Desenvolvido por: <a class="footer-link" href="https://gilbertoaleite-desenvolvedor.netlify.app/" target="_blank" rel="noopener noreferrer">Gilberto A Leite</a> - Projeto DIO Atualizado em 2025
    </div>
  </footer>
    <script>
      // Função para renderizar perfis salvos
      window.removerPerfil = function(idx) {
        let perfis = JSON.parse(localStorage.getItem('perfisNetflix') || '[]');
        perfis.splice(idx, 1);
        localStorage.setItem('perfisNetflix', JSON.stringify(perfis));
        renderPerfis();
      }

      function renderPerfis() {
        const container = document.getElementById('conta-perfis');
        // Perfis fixos
        let perfis = [
          { nome: 'Gilberto', img: 'img/u2.jpg' },
          { nome: 'Infantil', img: 'img/u1.jpg' }
        ];
        // Perfis do localStorage
        const salvos = JSON.parse(localStorage.getItem('perfisNetflix') || '[]');
        perfis = perfis.concat(salvos);
        // Monta HTML
        let html = '';
        perfis.forEach((perfil, idx) => {
          // Só permite remover perfis criados pelo usuário (índice >= 2)
          let removeBtn = '';
          if (idx >= 2) {
            removeBtn = `<button onclick=\"removerPerfil(${idx-2})\" style=\"margin-top:6px; background:#e50914; color:#fff; border:none; border-radius:6px; padding:4px 10px; cursor:pointer; font-size:12px;\">Remover</button>`;
          }
          html += `<div class=\"box\">
            <img class=\"photo\" src=\"${perfil.img}\" alt=\"Perfil\" style=\"object-position: top; object-fit: cover; height: 95px; width: 120px; border-radius: 16px;\" onerror=\"this.onerror=null;this.src='img/u1.jpg';\" />
            <span style=\"color: #fff; display: block; text-align: center; margin-top: 8px; font-size: 20px;\">${perfil.nome}</span>
            ${removeBtn}
          </div>`;
        });

        // Botão de adicionar perfil
        html += `<div class=\"box\">
          <button role=\"button\" class=\"botao\" id=\"add-profile-btn\">
            <i class=\"fas fa-plus-circle\"></i> Adicionar perfil
          </button>
        </div>`;
        container.innerHTML = html;
        document.getElementById('add-profile-btn').onclick = criarPerfil;
      }

      // Função para criar novo perfil
      function criarPerfil() {
  let nome = prompt('Digite o nome do novo perfil:');
  if (!nome) return;
  let img = prompt('Cole a URL da imagem de perfil (ou deixe em branco para usar a padrão):');
  if (!img) img = 'img/u1.jpg';
  // Salva no localStorage
  let perfis = JSON.parse(localStorage.getItem('perfisNetflix') || '[]');
  perfis.push({ nome, img });
  localStorage.setItem('perfisNetflix', JSON.stringify(perfis));
  renderPerfis();
      }

      // Inicializa perfis ao carregar
      window.onload = renderPerfis;
    </script>
  </body>
 </html>