OpenQuiz/index.html at main · samuelsantanaoficial/OpenQuiz · 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" data-bs-theme="light">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="icon" href="./mortarboard.svg" type="image/svg+xml">
	<title>OpenQuiz</title>
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">

	<script>
		if ('serviceWorker' in navigator) {
			window.addEventListener('load', () => {
				navigator.serviceWorker.register('./sw.js')
					.then(() => console.log('App pronto para uso Offline!'))
					.catch((err) => console.log('Erro no SW:', err));
			});
		}
	</script>
	<link rel="manifest" href="./manifest.json">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="default">
	<meta name="apple-mobile-web-app-title" content="OpenQuiz">
	<meta name="theme-color" content="#e9ecef"> <!-- .bg-body-secondary (dark = #343a40 light = #e9ecef) -->
	<link rel="apple-touch-icon" href="maskable_icon_x512.png">
</head>

<body class="bg-body-tertiary">
	<header class="fixed-top bg-body-secondary p-2 rounded-bottom-4 shadow">
		<a class="navbar-brand" href="https://github.com/samuelsantanaoficial/OpenQuiz" target="_blank">
			<h1 class="fw-bolder">
				<i class="bi bi-mortarboard"></i>
				OpenQuiz
			</h1>
		</a>
	</header>

	<main class="container py-5 my-5">
		<section id="screen-setup" class="p-4 rounded shadow">
			<h1 class="text-center">Configurações do jogo</h1>
			<hr>
			<div class="mb-4">
				<label class="form-label fw-bold small text-muted">
					1. Adicionar arquivo de perguntas (<code>.txt</code>)
				</label>
				<input type="file" id="file-upload" class="form-control" accept=".txt">
				<div id="file-info" class="form-text mt-2"></div>
			</div>
			<div class="mb-4">
				<label class="form-label fw-bold small text-muted">
					2. Adicionar nome dos jogadores
				</label>
				<div class="row g-2 mt-2 mb-4">
					<div class="col">
						<button id="btn-add" class="btn btn-secondary w-100 btn-sm">
							<i class="bi bi-plus-lg"></i>
						</button>
					</div>
					<div class="col">
						<button id="btn-remove" class="btn btn-danger w-100 btn-sm">
							<i class="bi bi-dash-lg"></i>
						</button>
					</div>
				</div>
				<div id="players-container" class="d-grid gap-2"></div>
			</div>
			<button id="btn-start" class="btn btn-success w-100 py-3 fw-bold shadow" disabled>
				INICIAR!
			</button>
		</section>

		<section id="screen-game" class="d-none">
			<div class="d-flex justify-content-between align-items-center mb-3">
				<button id="btn-quit" class="btn btn-sm btn-outline-danger fw-bolder">
					<i class="bi bi-x"></i>
					Sair
				</button>
				<button id="turn">
					Jogador 1
				</button>
				<button class="btn btn-sm btn-outline-warning fw-bolder">
					<i class="bi bi-clock"></i>
					<span id="timer-display">15</span>
				</button>
			</div>


			<div class="text-center py-4 mb-3 rounded shadow">
				<h4 id="question-text" class="fw-bold m-0 px-2">Pergunta?</h4>
			</div>

			<button id="btn-release-timer" class="btn btn-outline-warning w-100 py-2 fw-bold mb-3">
				<i class="bi bi-stopwatch-fill"></i>
				VALENDO!
			</button>

			<div id="options-area" class="d-grid gap-3 blocked-area p-3 rounded shadow "></div>

			<button id="btn-next" class="btn btn-secondary w-100 mt-3 py-3 fw-bold d-none">
				Próxima
				<i class="bi bi-arrow-right"></i>
			</button>

			<div id="feedback-area" class="mt-3"></div>

		</section>

		<section id="screen-result" class="d-none text-center mt-5">
			<i class="bi bi-trophy-fill text-warning display-1"></i>
			<h1 class="fw-bold mt-3 mb-4">Placar Final</h1>
			<hr>
			<div id="winner-alert" class="alert alert-success d-inline-block fw-bold px-4 mb-4"></div>
			<ul id="final-list" class="list-group text-start mb-4 shadow-sm"></ul>
			<button id="btn-menu" class="btn btn-outline-secondary w-100">Voltar ao Início</button>
		</section>
	</main>

	<footer id="footer-score" class="fixed-bottom bg-body-secondary rounded-top-4 p-2">
		<div id="mini-scoreboard" class="container py-2"></div>
	</footer>

	<audio id="snd-clock" src="./audio/time_clock.mp3" loop></audio>
	<audio id="snd-success" src="./audio/right_answer.mp3"></audio>
	<audio id="snd-error" src="./audio/wrong_answer.mp3"></audio>
	<audio id="snd-complete" src="./audio/lesson_complete.mp3"></audio>
	<audio id="snd-failed" src="./audio/lesson_failed.mp3"></audio>

	<script src="app.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.6.0/dist/confetti.browser.min.js"></script>
</body>

</html>