help-senai/index.html at main · rodrigogduca/help-senai · 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
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Help SENAI - Calculadora de Média e Faltas | SENAI CIMATEC</title>
  <meta name="description" content="Calcule sua média semestral e controle suas faltas no SENAI CIMATEC. Ferramentas acadêmicas gratuitas para estudantes: calculadora de notas AV1, AV2, AV3, EDAG e simulador de faltas.">
  <meta name="keywords" content="SENAI, CIMATEC, calculadora média, calculadora faltas, passei SENAI, estudante SENAI, nota final, média semestral">
  <meta name="author" content="Clube de Programação SENAI CIMATEC">
  <meta name="robots" content="index, follow">
  <link rel="canonical" href="https://rodrigogduca.github.io/help-senai/">

  <!-- Open Graph / Redes Sociais -->
  <meta property="og:type" content="website">
  <meta property="og:title" content="Help SENAI - Calculadora de Média e Faltas">
  <meta property="og:description" content="Ferramentas acadêmicas gratuitas para estudantes do SENAI CIMATEC. Calcule sua média e controle suas faltas.">
  <meta property="og:url" content="https://rodrigogduca.github.io/help-senai/">
  <meta property="og:image" content="https://rodrigogduca.github.io/help-senai/logo.png">

  <link rel="icon" type="image/png" href="logo.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=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <div class="bg-grid"></div>

  <!-- NAVBAR -->
  <nav>
    <a href="#" class="nav-logo">
      <img src="logo.png" alt="Help SENAI">
      <span>Help SENAI</span>
    </a>
    <ul class="nav-links">
      <li><a href="#ferramentas">Ferramentas</a></li>
      <li><a href="https://clube-de-programacao.vercel.app/" class="nav-cta" target="_blank" rel="noopener noreferrer">Site Principal</a></li>
    </ul>
    <button class="hamburger" aria-label="Menu">
      <span></span><span></span><span></span>
    </button>
  </nav>

  <!-- MOBILE MENU -->
  <div class="mobile-menu">
    <a href="#ferramentas">Ferramentas</a>
    <a href="#contato">Contato</a>
    <a href="https://clube-de-programacao.vercel.app/" target="_blank" rel="noopener noreferrer">Site Principal</a>
  </div>

  <!-- HERO -->
  <section class="hero">
    <div class="container hero-content">
      <div class="hero-badge">Ferramentas Acadêmicas</div>
      <h1 class="fade-in">Calculadoras do<br><span class="highlight">Estudante SENAI</span></h1>
      <p class="fade-in">Ferramentas úteis para acompanhar seu desempenho acadêmico no SENAI CIMATEC.</p>
      <div class="hero-buttons fade-in">
        <a href="#ferramentas" class="btn-primary">Calcular Agora</a>
        <a href="https://clube-de-programacao.vercel.app/" class="btn-secondary" target="_blank" rel="noopener noreferrer">Site Principal →</a>
      </div>
    </div>
  </section>

  <div class="container"><hr class="divider"></div>

  <!-- FERRAMENTAS ACADEMICAS -->
  <section id="ferramentas">
    <div class="container">
      <span class="section-label fade-in">// ferramentas acadêmicas</span>
      <h2 class="section-title fade-in">Calculadoras<br>do estudante</h2>
      <p class="section-desc fade-in">Ferramentas úteis para acompanhar seu desempenho acadêmico no SENAI CIMATEC.</p>

      <div class="tools-grid">

        <!-- PASSEI SENAI? -->
        <div class="tool-card fade-in">
          <div class="tool-header">
            <div class="tool-icon">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#F28A1F" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
            </div>
            <h3>Passei SENAI?</h3>
            <p class="tool-desc">Calcule sua média semestral e descubra a nota mínima para a final.</p>
          </div>
          <div class="tool-body">
            <div class="tool-pesos">
              <span class="tool-peso-tag">AV1: 25%</span>
              <span class="tool-peso-tag">AV2: 25%</span>
              <span class="tool-peso-tag">AV3: 30%</span>
              <span class="tool-peso-tag">EDAG: 20%</span>
            </div>
            <div class="tool-notas-grid">
              <div class="tool-field">
                <label for="notaAV1">AV1 <span class="tool-peso-label">(25%)</span></label>
                <div class="tool-number-wrap">
                  <input type="number" id="notaAV1" min="0" max="10" step="0.1" placeholder="0 a 10" class="tool-input">
                  <div class="tool-number-btns">
                    <button type="button" class="tool-number-btn" data-dir="up" aria-label="Aumentar"><svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M2 8L6 4L10 8"/></svg></button>
                    <button type="button" class="tool-number-btn" data-dir="down" aria-label="Diminuir"><svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M2 4L6 8L10 4"/></svg></button>
                  </div>
                </div>
              </div>
              <div class="tool-field">
                <label for="notaAV2">AV2 <span class="tool-peso-label">(25%)</span></label>
                <div class="tool-number-wrap">
                  <input type="number" id="notaAV2" min="0" max="10" step="0.1" placeholder="0 a 10" class="tool-input">
                  <div class="tool-number-btns">
                    <button type="button" class="tool-number-btn" data-dir="up" aria-label="Aumentar"><svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M2 8L6 4L10 8"/></svg></button>
                    <button type="button" class="tool-number-btn" data-dir="down" aria-label="Diminuir"><svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M2 4L6 8L10 4"/></svg></button>
                  </div>
                </div>
              </div>
              <div class="tool-field">
                <label for="notaAV3">AV3 <span class="tool-peso-label">(30%)</span></label>
                <div class="tool-number-wrap">
                  <input type="number" id="notaAV3" min="0" max="10" step="0.1" placeholder="0 a 10" class="tool-input">
                  <div class="tool-number-btns">
                    <button type="button" class="tool-number-btn" data-dir="up" aria-label="Aumentar"><svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M2 8L6 4L10 8"/></svg></button>
                    <button type="button" class="tool-number-btn" data-dir="down" aria-label="Diminuir"><svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M2 4L6 8L10 4"/></svg></button>
                  </div>
                </div>
              </div>
              <div class="tool-field">
                <label for="notaEDAG">EDAG <span class="tool-peso-label">(20%)</span></label>
                <div class="tool-number-wrap">
                  <input type="number" id="notaEDAG" min="0" max="10" step="0.1" placeholder="0 a 10" class="tool-input">
                  <div class="tool-number-btns">
                    <button type="button" class="tool-number-btn" data-dir="up" aria-label="Aumentar"><svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M2 8L6 4L10 8"/></svg></button>
                    <button type="button" class="tool-number-btn" data-dir="down" aria-label="Diminuir"><svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M2 4L6 8L10 4"/></svg></button>
                  </div>
                </div>
              </div>
            </div>
            <button type="button" id="btnCalcularMedia" class="tool-btn">Calcular</button>
            <div id="resultadoMedia" class="tool-result" style="display:none;"></div>
          </div>
        </div>

        <!-- CALCULADORA DE FALTAS -->
        <div class="tool-card fade-in">
          <div class="tool-header">
            <div class="tool-icon">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#F28A1F" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
            </div>
            <h3>Calculadora de Faltas</h3>
            <p class="tool-desc">Descubra quantas faltas você ainda pode ter. Cada dia = 2 aulas de 50min. Presença mínima: 75%.</p>
          </div>
          <div class="tool-body">
            <div class="tool-field">
              <label for="cargaHoraria">Carga horária da disciplina</label>
              <div class="tool-select-wrap">
                <select id="cargaHoraria" class="tool-input">
                  <option value="" disabled selected>Selecione a carga horária</option>
                  <option value="30">30 horas</option>
                  <option value="60">60 horas</option>
                  <option value="90">90 horas</option>
                  <option value="105">105 horas</option>
                </select>
                <div class="tool-select-arrow">
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>
                </div>
              </div>
            </div>
            <div class="tool-field">
              <label for="faltasAtuais">Faltas já acumuladas (dias)</label>
              <div class="tool-number-wrap">
                <input type="number" id="faltasAtuais" min="0" max="500" value="0" placeholder="ex: 3" class="tool-input">
                <div class="tool-number-btns">
                  <button type="button" class="tool-number-btn" data-dir="up" aria-label="Aumentar"><svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M2 8L6 4L10 8"/></svg></button>
                  <button type="button" class="tool-number-btn" data-dir="down" aria-label="Diminuir"><svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M2 4L6 8L10 4"/></svg></button>
                </div>
              </div>
            </div>
            <button type="button" id="btnCalcularFaltas" class="tool-btn">Calcular</button>
            <div id="resultadoFaltas" class="tool-result" style="display:none;"></div>
          </div>
        </div>

      </div>
    </div>
  </section>

  <div class="container"><hr class="divider"></div>

  <!-- FOOTER -->
  <footer>
    <div class="container">
      <div class="footer-inner">
        <div class="footer-left">
          <span>© 2026 Help SENAI — Rodrigo Gandarela</span>
        </div>
        <span class="footer-tech"><a href="https://github.com/rodrigogduca/help-senai" target="_blank" rel="noopener noreferrer">Código Fonte</a></span>
      </div>
    </div>
  </footer>

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