portfolio_dwll/admin.html at main · Spockchaim/portfolio_dwll · 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
<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Admin - Portfólio</title>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
  <style>
    /* Ajustes específicos para a página Admin */
    body { display: block; overflow: auto; background-color: #0a0a0a; color: #f0f0f0; }
    .admin-conteiner { padding: 4rem 2rem; max-width: 800px; margin: 0 auto; }

    .secao-admin {
        margin-bottom: 3rem;
        background: rgba(255,255,255,0.02);
        padding: 2.5rem;
        border-radius: 16px;
        border: 1px solid #1e1e1e;
        box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    }

    .secao-admin h2 { font-size: 1.5rem; margin-bottom: 2rem; color: #fff; border-bottom: 1px solid #222; padding-bottom: 1rem; }

    .formulario-admin { display: flex; flex-direction: column; gap: 1.2rem; }

    .formulario-admin input, .formulario-admin textarea {
        background: rgba(255,255,255,0.04);
        border: 1px solid #222;
        border-radius: 10px;
        padding: 1rem;
        color: #fff;
        font-family: inherit;
        transition: border 0.3s;
    }

    .formulario-admin input:focus, .formulario-admin textarea:focus { outline: none; border-color: #444; }

    .cabecalho-admin { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4rem; }

    /* Estilo para a lista de gerenciamento */
    .item-admin-lista {
        background: rgba(255,255,255,0.03);
        padding: 1.2rem;
        margin-bottom: 1rem;
        border-radius: 12px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border: 1px solid #1a1a1a;
    }

    .botoes-acao { display: flex; gap: 0.5rem; }
    .btn-acao {
        font-size: 0.8rem;
        padding: 0.5rem 1rem;
        border-radius: 6px;
        cursor: pointer;
        border: 1px solid #333;
        transition: all 0.2s;
        background: transparent;
        color: #ccc;
    }
    .btn-edit:hover { background: #333; color: #fff; }
    .btn-delete:hover { background: #b30000; border-color: #b30000; color: #fff; }

  </style>
</head>
<body>

  <div class="admin-conteiner">
    <div class="cabecalho-admin">
      <h1>Painel Administrativo</h1>
      <a href="index.html" class="button secundario">← Voltar ao Site</a>
    </div>

    <!-- SEÇÃO PROJETOS -->
    <div class="secao-admin">
      <h2>Gerenciar Projetos (PUT / DELETE)</h2>
      <div id="lista-admin-projetos">
        <!-- Itens renderizados pelo script.js -->
      </div>
    </div>

    <div class="secao-admin">
      <h2>Adicionar Novo Projeto</h2>
      <form id="form-projeto" class="formulario-admin">
        <input type="text" id="proj-titulo" placeholder="Título do Projeto" required>
        <input type="text" id="proj-desc" placeholder="Descrição curta" required>
        <input type="text" id="proj-stack" placeholder="Tecnologias (ex: HTML · CSS · JS)" required>
        <input type="url" id="proj-github" placeholder="URL do GitHub (opcional)">
        <input type="url" id="proj-hospedagem" placeholder="URL de Hospedagem/Demo (opcional)">
        <button type="submit" class="button">Salvar Projeto (POST)</button>
      </form>
    </div>

    <!-- SEÇÃO FORMAÇÃO -->
    <div class="secao-admin">
      <h2>Adicionar Certificado / Formação</h2>
      <form id="form-formacao" class="formulario-admin">
        <input type="text" id="form-curso" placeholder="Nome do Curso" required>
        <input type="text" id="form-inst" placeholder="Instituição" required>
        <input type="text" id="form-ano" placeholder="Ano de Conclusão / Previsão" required>
        <button type="submit" class="button">Salvar Formação</button>
      </form>
    </div>

    <!-- SEÇÃO EVENTOS -->
    <div class="secao-admin">
      <h2>Adicionar Evento</h2>
      <form id="form-evento" class="formulario-admin">
        <input type="text" id="eve-titulo" placeholder="Nome do Evento" required>
        <input type="text" id="eve-desc" placeholder="Descrição rápida" required>
        <input type="text" id="eve-data" placeholder="Ano ou Data" required>
        <input type="url" id="eve-imagem" placeholder="URL da Foto do Evento">
        <button type="submit" class="button">Salvar Evento</button>
      </form>
    </div>

    <!-- SEÇÃO BLOG -->
    <div class="secao-admin">
      <h2>Adicionar Post no Blog</h2>
      <form id="form-blog" class="formulario-admin">
        <input type="text" id="blog-titulo" placeholder="Título do Post" required>
        <textarea id="blog-conteudo" rows="5" placeholder="Conteúdo do post..." required></textarea>
        <button type="submit" class="button">Salvar Post</button>
      </form>
    </div>
  </div>

  <script src="script.js"></script>
</body>
</html>