arcadeMultimidia/jogar.html at main · SenacPIN/arcadeMultimidia · 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
<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Jogar | Arcade Multimidia</title>
  <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&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
</head>
<body class="play-container">
  <header class="play-header">
    <a class="back-button" href="index.html" id="back-button" aria-label="Voltar para a Galeria">
      <!-- Ícone de seta para voltar -->
      <svg viewBox="0 0 24 24">
        <path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/>
      </svg>
    </a>
  </header>

  <main class="game-frame-wrapper" id="game-wrapper">
    <!-- Play Overlay: Banner + Botão de Iniciar -->
    <div class="play-overlay" id="play-overlay">
      <div class="play-overlay-bg" id="play-overlay-bg"></div>
      <button class="play-trigger-btn" id="play-trigger-btn" aria-label="Jogar">
        <svg viewBox="0 0 24 24">
          <path d="M8 5v14l11-7z"/>
        </svg>
        <span>JOGAR</span>
      </button>
    </div>

    <iframe class="game-iframe" id="game-iframe" src="" allowfullscreen allow="autoplay; fullscreen; gamepad"></iframe>

    <!-- Barra de Controles Flutuantes -->
    <div class="game-controls-bar" id="game-controls-bar">
      <!-- Controle de Volume -->
      <div class="volume-control-group">
        <button class="control-button volume-toggle-btn" id="volume-toggle-btn" type="button" aria-label="Mutar/Desmutar Som">
          <!-- Alto-falante alto -->
          <svg class="icon-vol-high" viewBox="0 0 24 24">
            <path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"/>
          </svg>
          <!-- Alto-falante mutado -->
          <svg class="icon-vol-muted" style="display: none;" viewBox="0 0 24 24">
            <path d="M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.21.05-.42.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z"/>
          </svg>
        </button>
        <input type="range" class="volume-slider" id="volume-slider" min="0" max="100" value="80" aria-label="Volume">
      </div>

      <!-- Botão Tela Cheia -->
      <button class="control-button fullscreen-button" id="fullscreen-btn" type="button" aria-label="Tela Cheia">
        <!-- Ícone expandir (tela cheia) -->
        <svg class="icon-expand" viewBox="0 0 24 24">
          <path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/>
        </svg>
        <!-- Ícone minimizar (sair da tela cheia) -->
        <svg class="icon-minimize" style="display: none;" viewBox="0 0 24 24">
          <path d="M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z"/>
        </svg>
      </button>
    </div>
  </main>

  <section class="game-details" id="game-details">
    <div class="details-title-row">
      <h1 id="details-title">Carregando título...</h1>
      <div class="details-tags" id="details-tags">
        <!-- Tags dinâmicas (Turma, Engine, etc.) -->
      </div>
    </div>

    <div class="details-card details-authors">
      <span class="details-label">Autor(es):</span>
      <span id="details-authors-list">Carregando...</span>
    </div>

    <div class="details-card details-description">
      <h2>Descrição</h2>
      <p id="details-description-text">Carregando descrição completa...</p>
    </div>

    <div class="details-card details-teachers">
      <span class="details-label">Docente(s):</span>
      <span id="details-teachers-list">Carregando...</span>
    </div>
  </section>

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