-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
96 lines (86 loc) · 6.62 KB
/
index.html
File metadata and controls
96 lines (86 loc) · 6.62 KB
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
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Git Master - Revisão e Aprendizado</title>
<meta name="description" content="Aprenda e revise os principais comandos do Git de forma interativa e visual.">
<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@300;400;600;800&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="assets/css/style.css">
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjggMTI4Ij48cGF0aCBmaWxsPSIjRjE1MDJGIiBkPSJNMTI1LjY2NiA2MC4xMDZsLTU1Ljc3LTU1Ljc3Yy0yLjg4Ni0yLjg4OC03LjU2OC0yLjg4OC0xMC40NTggMEwzNy4xOTUgMjYuNTggNTIuODggNDIuMjY0YzIuODEtMS4xMjcgNi4xMzYtLjcxMyA4LjYxOCAxLjc3IDIuNjUyIDIuNjU0IDMuMTIgNi41MTcgMS40OCA5LjU3NGwxMy43OTggMTMuOGMzLjA1Ni0xLjY0MiA2LjkyLTEuMTczIDkuNTc0IDEuNDggMy4zMTMgMy4zMTMgMy4zMTMgOC42ODMgMCAxMS45OTYtMy4zMTUgMy4zMTMtOC42ODQgMy4zMTMtMTEuOTk3IDAtMi44MTItMi44MTItMy4xNzctNy4wNS0xLjExOC0xMC4yMmwtMTIuNzUtMTIuNzV2MjcuMjM0YzEuNTU0Ljg5NiAyLjgyIDIuMzc4IDMuNDQ3IDQuMTk1IDEuMTM0IDMuMjg0LjA5MiA3LjAyNy0yLjYxNiA5LjczNC0zLjMxMiAzLjMxNC04LjY4MiAzLjMxNC0xMS45OTYgMC0zLjMxMy0zLjMxMy0zLjMxMy04LjY4MyAwLTExLjk5NiAyLjcwNS0yLjcwNiA2LjQ0Ni0zLjc0OCA5LjczLTIuNjE1VjU1LjA4OGMtMy4yNjQtMS4xMTQtNi45OC0yLjE0Ni05LjY2LTQuODI1LTMuMzEzLTMuMzEzLTMuMzEzLTguNjgzIDAtMTEuOTk2IDIuODEtMi44MSA3LjA1LTMuMTc2IDEwLjIyLTEuMTE3TDQ0LjAyNSAyMS40NjcgNC4zMzYgNjEuMTU2Yy0yLjg4NyAyLjg4OC0yLjg4NyA3LjU3IDAgMTAuNDU4bDU1Ljc3MiA1NS43N2MyLjg4NyAyLjg4OCA3LjU2OCAyLjg4OCAxMC40NTcgMGw1NS4xMDItNTUuMTA0YzIuODg1LTIuODg2IDIuODg1LTcuNTcgMC0xMC40NTd6Ii8+PC9zdmc+">
</head>
<body>
<div class="background-elements">
<div class="orb orb-1"></div>
<div class="orb orb-2"></div>
</div>
<main class="container">
<div class="top-actions">
<button id="langToggle" class="action-btn" aria-label="Alternar idioma">PT</button>
<button id="themeToggle" class="action-btn" aria-label="Alternar tema">
<svg id="moonIcon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="hidden"><path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/></svg>
<svg id="sunIcon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4"/><path d="M12 2v2"/><path d="M12 20v2"/><path d="m4.93 4.93 1.41 1.41"/><path d="m17.66 17.66 1.41 1.41"/><path d="M2 12h2"/><path d="M20 12h2"/><path d="m6.34 17.66-1.41 1.41"/><path d="m19.07 4.93-1.41 1.41"/></svg>
</button>
</div>
<header>
<h1>
<svg class="git-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128" width="56" height="56">
<path fill="currentColor" d="M125.666 60.106l-55.77-55.77c-2.886-2.888-7.568-2.888-10.458 0L37.195 26.58 52.88 42.264c2.81-1.127 6.136-.713 8.618 1.77 2.652 2.654 3.12 6.517 1.48 9.574l13.798 13.8c3.056-1.642 6.92-1.173 9.574 1.48 3.313 3.313 3.313 8.683 0 11.996-3.315 3.313-8.684 3.313-11.997 0-2.812-2.812-3.177-7.05-1.118-10.22l-12.75-12.75v27.234c1.554.896 2.82 2.378 3.447 4.195 1.134 3.284.092 7.027-2.616 9.734-3.312 3.314-8.682 3.314-11.996 0-3.313-3.313-3.313-8.683 0-11.996 2.705-2.706 6.446-3.748 9.73-2.615V55.088c-3.264-1.114-6.98-2.146-9.66-4.825-3.313-3.313-3.313-8.683 0-11.996 2.81-2.81 7.05-3.176 10.22-1.117L44.025 21.467 4.336 61.156c-2.887 2.888-2.887 7.57 0 10.458l55.772 55.77c2.887 2.888 7.568 2.888 10.457 0l55.102-55.104c2.885-2.886 2.885-7.57 0-10.457z"/>
</svg>
<span class="git-text">Git</span> Master
</h1>
<p>Seu guia interativo para dominar o versionamento de código.</p>
</header>
<section class="controls">
<div class="search-box">
<input type="text" id="searchInput" placeholder="Buscar comando (ex: commit)...">
</div>
<div class="filters" id="filters">
<button class="filter-btn active" data-filter="all">Todos</button>
<button class="filter-btn" data-filter="basics">Básicos</button>
<button class="filter-btn" data-filter="branching">Branches</button>
<button class="filter-btn" data-filter="remote">Remoto</button>
<button class="filter-btn" data-filter="undo">Desfazer</button>
<button class="filter-btn" data-filter="advanced">Avançado</button>
<button class="filter-btn" data-filter="gitignore">.gitignore</button>
</div>
<div class="mode-toggle">
<button id="studyModeBtn" class="toggle-btn active">Modo Estudo</button>
<button id="reviewModeBtn" class="toggle-btn">Modo Revisão</button>
</div>
</section>
<!-- Modo de Estudo -->
<section id="studyMode" class="card-grid">
<!-- Cards gerados via JS -->
</section>
<!-- Modo de Revisão -->
<section id="reviewMode" class="review-section hidden">
<div class="review-card glass-panel">
<div class="review-header">
<h2>Teste seus conhecimentos</h2>
<span class="score" id="scoreDisplay">Pontos: 0</span>
</div>
<div class="review-content">
<p id="reviewQuestion" class="question">Carregando pergunta...</p>
<div class="input-group">
<span class="prompt">$</span>
<input type="text" id="reviewInput" autocomplete="off" placeholder="Digite o comando git...">
</div>
<div id="reviewFeedback" class="feedback"></div>
<button id="nextQuestionBtn" class="primary-btn hidden">Próxima Pergunta</button>
</div>
</div>
</section>
<footer class="site-footer">
<p>© Totalo, todos os direitos reservados. Conteudo gerado por IA, pode haver erros.</p>
</footer>
<!-- Toast de Notificação -->
<div id="toast" class="toast hidden">
<span>Comando copiado!</span>
</div>
</main>
<script src="assets/js/script.js"></script>
</body>
</html>