Mudanças entre as edições de "Predefinição:TesteMapaTrilha"

De Wiki Gla
Ir para navegação Ir para pesquisar
Linha 1: Linha 1:
<includeonly>
<includeonly>
<!-- CSS Específico para esta predefinição -->
<style>
    .meu-container {
        border: 2px solid #3366cc;
        background-color: #f8f9fa;
        padding: 15px;
        border-radius: 8px;
        font-family: sans-serif;
    }
    .meu-titulo {
        color: #3366cc;
        margin-top: 0;
        font-weight: bold;
    }
    .meu-corpo {
        color: #333;
    }
</style>


<!-- Estrutura HTML -->
<div class="map-container" style="position: relative; width: 600px;">
<div class="meu-container">
  <!-- Sua imagem de fundo (ex: um mapa de parque ou RPG) -->
     <h2 class="meu-titulo">{{{titulo|Título Padrão}}}</h2>
  <img src="https://wiki.gla.com.br/images/9/9b/Bau_foosha_01.png" style="width: 100%; display: block; filter: brightness(0.8);">
    <div class="meu-corpo">
 
        {{{conteudo|Insira o texto aqui.}}}
  <svg viewBox="0 0 600 400" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;">
    </div>
    <!-- O caminho da trilha -->
</div>
     <path d="M50,300 Q150,50 300,200 T550,100"
          fill="none"
          stroke="#FFD700"
          stroke-width="4"
          stroke-linecap="round"
          class="trilha-pontilhada" />
  </svg>
  <svg viewBox="0 0 800 400" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; width: 100%;">
  <!-- A trilha que liga os pontos -->
  <path id="trilha"
        d="M 50,350 L 200,250 L 400,300 L 600,100"
        fill="none"
        stroke="#FFD700"
        stroke-width="4"
        stroke-dasharray="1, 10"
        stroke-linecap="round"
        class="trilha-pontilhada"/>
 
  <!-- Marcadores nos pontos de parada -->
  <circle cx="50" cy="350" r="6" fill="red" />
  <circle cx="200" cy="250" r="6" fill="red" />
  <circle cx="400" cy="300" r="6" fill="red" />
  <circle cx="600" cy="100" r="6" fill="red" />
</svg>
</includeonly>
</includeonly>

Edição das 19h04min de 10 de abril de 2026