-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
153 lines (142 loc) · 7.64 KB
/
index.html
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
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Labirinto de Programação</title>
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="css/themes.css">
<link rel="stylesheet" href="css/touch.css">
<!-- Favicons -->
<link rel="icon" type="image/png" sizes="32x32" href="static/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="static/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="static/apple-touch-icon.png">
<link rel="manifest" href="static/site.webmanifest">
</head>
<body>
<!-- Configurações e idioma -->
<div class="config-container">
<div class="language-select">
<select id="language-select">
<option value="pt">Português</option>
<option value="en">English</option>
<option value="es">Español</option>
</select>
</div>
<div class="theme-switch">
<select id="theme-toggle">
<option value="light">☀️ Light</option>
<option value="dark">🌙 Dark</option>
<option value="forest">🌲 Forest</option>
<option value="purple">💜 Purple</option>
</select>
</div>
</div>
<!-- Container principal com abas -->
<div class="tab-container">
<div class="tab-buttons">
<button class="tab-button active" onclick="switchTab('maze')">Labirinto</button>
<button class="tab-button" onclick="switchTab('program')">Programação</button>
</div>
<!-- Aba do Labirinto -->
<div id="maze-tab" class="tab-content active">
<div id="labirinto-container">
<div id="nivel-controles">
<select id="nivel-select">
<option value="facil" data-i18n="interface.levels.easy">Nível Fácil (8x8)</option>
<option value="medio" data-i18n="interface.levels.medium">Nível Médio (12x12)</option>
<option value="dificil" data-i18n="interface.levels.hard">Nível Difícil (15x15)</option>
</select>
<button id="novo-labirinto" data-i18n="interface.newMaze">🔄 Novo Labirinto</button>
</div>
<div id="labirinto"></div>
<div id="controles">
<button id="executar" data-i18n="interface.execute">▶ Executar</button>
<button id="pausar" disabled data-i18n="interface.pause">⏸ Pausar</button>
<button id="parar" disabled data-i18n="interface.stop">⏹ Parar</button>
<button id="limpar" data-i18n="interface.clear">🗑 Limpar</button>
<button id="salvar-programa" data-i18n="interface.save">💾 Salvar Programa</button>
<button id="abrir-programa" data-i18n="interface.open">📂 Abrir Programa</button>
<input type="file" id="input-abrir-programa" accept="application/json" style="display: none;">
</div>
</div>
</div>
<!-- Aba de Programação -->
<div id="program-tab" class="tab-content">
<div class="programming-container">
<div id="blocos-disponiveis">
<h2 data-i18n="interface.availableBlocks">Blocos Disponíveis</h2>
<p class="instrucao" data-i18n="interface.dragInstructions">Arraste os blocos para a área "Meu Programa" ➡️</p>
</div>
<div id="programa-container">
<div id="programa-header">
<h2 data-i18n="interface.myProgram">Meu Programa</h2>
<div id="resize-handle" class="touch-handle">↔</div>
</div>
<div class="instrucao-programa" data-i18n="interface.dragInstructions">
Arraste os blocos para esta área e organize-os na ordem que deseja executar
</div>
<div id="programa">
<div id="sequencia-blocos" class="bloco-container drop-zone">
<div class="programa-placeholder" data-i18n="interface.dropBlocks">
Solte os blocos aqui para criar seu programa
</div>
</div>
</div>
</div>
</div>
<div id="lixeira" title="Arraste blocos aqui para excluir" class="touch-area">🗑️</div>
</div>
</div>
<!-- Elementos auxiliares -->
<div id="mensagem"></div>
<div id="tutorial" class="tutorial">
<div class="tutorial-content">
<h3 data-i18n="tutorial.title">Como Jogar</h3>
<ol>
<li data-i18n="tutorial.steps.0">Escolha o nível do labirinto</li>
<li data-i18n="tutorial.steps.1">Arraste os blocos da esquerda para a área "Meu Programa"</li>
<li data-i18n="tutorial.steps.2">Organize os blocos na ordem que deseja executar</li>
<li data-i18n="tutorial.steps.3">Use os blocos de repetição e condicionais para criar sequências</li>
<li data-i18n="tutorial.steps.4">Arraste blocos para dentro dos blocos de controle</li>
<li data-i18n="tutorial.steps.5">Para excluir um bloco, arraste-o até a lixeira</li>
<li data-i18n="tutorial.steps.6">Clique em "Executar" para ver o carro seguir suas instruções</li>
<li data-i18n="tutorial.steps.7">O objetivo é chegar na bandeira! 🏁</li>
<li data-i18n="tutorial.steps.logical">Use blocos lógicos para criar condições complexas com AND e OR</li>
<li data-i18n="tutorial.steps.jsonDrop">Arraste arquivos JSON para a área "Meu Programa" para carregar programas salvos</li>
</ol>
<div class="tutorial-atalhos">
<h4 data-i18n="tutorial.shortcuts.title">Atalhos do Teclado:</h4>
<ul>
<li data-i18n="tutorial.shortcuts.execute">Ctrl/Cmd + Enter: Executar programa</li>
<li data-i18n="tutorial.shortcuts.pause">Ctrl/Cmd + P: Pausar execução</li>
<li data-i18n="tutorial.shortcuts.stop">Ctrl/Cmd + S: Parar execução</li>
<li data-i18n="tutorial.shortcuts.newMaze">Ctrl/Cmd + N: Novo labirinto</li>
</ul>
</div>
<button id="fechar-tutorial" data-i18n="tutorial.understood">Entendi!</button>
</div>
</div>
<button id="ajuda" class="botao-ajuda touch-area">?</button>
<!-- Scripts -->
<script src="js/blocks.js" type="module"></script>
<script src="js/main.js" type="module"></script>
<script>
function switchTab(tabId) {
// Remove active class from all tabs
document.querySelectorAll('.tab-content').forEach(tab => {
tab.classList.remove('active');
});
document.querySelectorAll('.tab-button').forEach(button => {
button.classList.remove('active');
});
// Add active class to selected tab
const selectedTab = tabId === 'maze' ? 'maze-tab' : 'program-tab';
document.getElementById(selectedTab).classList.add('active');
// Add active class to clicked button
const buttonIndex = tabId === 'maze' ? 0 : 1;
document.querySelectorAll('.tab-button')[buttonIndex].classList.add('active');
}
</script>
</body>
</html>